Function createComparisonSizeChart

website/script/benchmarks.js:1305–1448

(data)

}

function createComparisonSizeChart(data) {
	const chartElement = document.getElementById("alternatives-size-chart");
	if (!chartElement) return;

	// Get the latest benchmark data
	const latest = data[0];
	if (!latest.alternative_tools || !latest.alternative_tools.files) {
		console.log("No alternative tools data available");
		return;
	}

	const files = latest.alternative_tools.files;
	const categories = [];
	const series = {};

	// Collect all CSS files and tools
	for (const [filename, fileData] of Object.entries(files)) {
		if (!fileData.tools) continue;
		if (selectedFile && filename !== selectedFile) continue;

		categories.push(filename);

		for (const [toolName, toolData] of Object.entries(fileData.tools)) {
			if (!series[toolName]) {
				series[toolName] = [];
			}

			if (toolData.error || !toolData.output_size || toolData.output_size === 0) {
				series[toolName].push(null);
			} else {
				// Convert bytes to KB
				const sizeKB = toolData.output_size / 1024;
				series[toolName].push(sizeKB);
			}
		}
	}

	// Convert to ApexCharts format
	const chartSeries = Object.entries(series).map(([toolName, values]) => ({
		name: toolName,
		data: values,
	}));

	const options = {
		series: chartSeries,
		chart: {
			type: "bar",
			height: 1200,
			toolbar: { show: true },
			zoom: { enabled: true },
			events: {
				dataPointSelection: function (event, chartContext, config) {
					if (categories[config.dataPointIndex]) {
						const clickedFile = categories[config.dataPointIndex];
						if (selectedFile === clickedFile) {
							// Double-click behavior: reset to show all files
							selectedFile = null;
						} else {