Add resolved vs model release date scatter chart (#48)

- Create js/modelReleaseDates.js with verified release dates for 74 models
  (90.2% coverage) from official sources including Anthropic, OpenAI,
  Google, Meta, Mistral, DeepSeek, Qwen, ZhipuAI, Moonshot, MiniMax,
  ByteDance, and Amazon
- Create js/charts/resolvedVsReleaseDateChart.js scatter chart renderer
  with time-based X-axis and model labels
- Add chartjs-adapter-date-fns CDN import for time scale support
- Add "Resolved vs model release date" option to chart type dropdown
- Update getSelectedModels() to include tags in returned data

Author: aorwall

js/analysis.js

@@ -49,7 +49,8 @@
                 name: modelName,
                 resolved: parseFloat(cb.getAttribute('data-resolved')) || 0,
                 cost: cost,
-                per_instance_details: fullModelData?.per_instance_details || null
+                per_instance_details: fullModelData?.per_instance_details || null,
+                tags: fullModelData?.tags || null
             };
         });
     }
@@ -325,6 +326,14 @@
                     empty.style.display = '';
                 }
             }
+        } else if (chartType === 'resolved-vs-release-date') {
+            compareChart = renderResolvedVsReleaseDateChart(ctx, selected, colors, backgroundPlugin);
+            if (!compareChart) {
+                if (empty) {
+                    empty.textContent = 'No release date data available for selected models.';
+                    empty.style.display = '';
+                }
+            }
         } else {
             // Default to bar chart
             compareChart = renderBarChart(ctx, selected, colors, backgroundPlugin);

js/charts/resolvedVsReleaseDateChart.js

@@ -0,0 +1,152 @@
+// Scatter chart for resolved % vs model release date
+function renderResolvedVsReleaseDateChart(ctx, selected, colors, backgroundPlugin) {
+    // Filter models with release dates
+    const modelsWithDates = selected.filter(s => {
+        const releaseDate = getModelReleaseDate(s.tags);
+        return releaseDate !== null;
+    });
+
+    if (modelsWithDates.length === 0) {
+        return null;
+    }
+
+    // Plugin to draw labels on scatter plot
+    const labelPlugin = {
+        id: 'releaseDateLabels',
+        afterDatasetsDraw: (chart, args, options) => {
+            if (chart.config.type !== 'scatter') return;
+            const {ctx, chartArea} = chart;
+            if (!chartArea) return;
+
+            ctx.save();
+            ctx.font = '11px sans-serif';
+            ctx.fillStyle = colors.textColor;
+            ctx.textAlign = 'left';
+            ctx.textBaseline = 'middle';
+
+            chart.data.datasets[0].data.forEach((point, index) => {
+                const meta = chart.getDatasetMeta(0);
+                const element = meta.data[index];
+                if (!element) return;
+
+                const x = element.x;
+                const y = element.y;
+                const label = modelsWithDates[index].name;
+
+                // Draw label with slight offset
+                ctx.fillText(label, x + 8, y);
+            });
+
+            ctx.restore();
+        }
+    };
+
+    // Prepare scatter data
+    const scatterData = modelsWithDates.map(s => {
+        const releaseDateInt = getModelReleaseDate(s.tags);
+        const releaseDate = parseReleaseDateInt(releaseDateInt);
+        return {
+            x: releaseDate.getTime(),
+            y: s.resolved
+        };
+    });
+
+    // Calculate y-axis range with nice round numbers
+    const resolvedValues = modelsWithDates.map(s => s.resolved);
+    const minResolved = Math.min(...resolvedValues);
+    const maxResolved = Math.max(...resolvedValues);
+
+    // Round to nice values (multiples of 5)
+    const yMinRaw = Math.max(0, minResolved * 0.9);
+    const yMaxRaw = Math.min(100, maxResolved * 1.05);
+    const yMin = Math.floor(yMinRaw / 5) * 5;
+    const yMax = Math.ceil(yMaxRaw / 5) * 5;
+
+    // Calculate x-axis (date) range with padding
+    const dateValues = scatterData.map(d => d.x);
+    const minDate = Math.min(...dateValues);
+    const maxDate = Math.max(...dateValues);
+    const dateRange = maxDate - minDate;
+    const xMin = minDate - dateRange * 0.05;
+    const xMax = maxDate + dateRange * 0.20; // More padding on right for labels
+
+    return new Chart(ctx, {
+        type: 'scatter',
+        data: {
+            datasets: [{
+                label: 'Models',
+                data: scatterData,
+                backgroundColor: colors.barBackground,
+                borderColor: colors.barBorder,
+                borderWidth: 2,
+                pointRadius: 6,
+                pointHoverRadius: 8
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            animation: false,
+            scales: {
+                y: {
+                    min: yMin,
+                    max: yMax,
+                    title: {
+                        display: true,
+                        text: '% Resolved',
+                        color: colors.textColor,
+                        font: { size: 14 }
+                    },
+                    ticks: {
+                        stepSize: 5,
+                        callback: (v) => v + '%',
+                        color: colors.textColor,
+                        font: { size: 12 }
+                    },
+                    grid: {
+                        color: colors.gridColor
+                    }
+                },
+                x: {
+                    type: 'time',
+                    min: xMin,
+                    max: xMax,
+                    time: {
+                        unit: 'month',
+                        displayFormats: {
+                            month: 'MMM yyyy'
+                        }
+                    },
+                    title: {
+                        display: true,
+                        text: 'Model Release Date',
+                        color: colors.textColor,
+                        font: { size: 14 }
+                    },
+                    ticks: {
+                        color: colors.textColor,
+                        font: { size: 12 },
+                        maxRotation: 45
+                    },
+                    grid: {
+                        color: colors.gridColor
+                    }
+                }
+            },
+            plugins: {
+                legend: { display: false },
+                tooltip: {
+                    callbacks: {
+                        label: (ctx) => {
+                            const model = modelsWithDates[ctx.dataIndex];
+                            const releaseDate = parseReleaseDateInt(getModelReleaseDate(model.tags));
+                            const formattedDate = formatReleaseDate(releaseDate);
+                            return `${model.name}: ${formattedDate}, ${ctx.parsed.y.toFixed(2)}%`;
+                        }
+                    }
+                }
+            }
+        },
+        plugins: [backgroundPlugin, labelPlugin]
+    });
+}