feat(graphs): add changes over time graphs

packages/docs/package.json

@@ -18,10 +18,12 @@
     "@tanstack/charts": "^1.1.0",
     "astro": "^7.4.0",
     "chart.js": "^4.5.1",
+    "d3-shape": "3.2.0",
     "@framework-tracker/results": "workspace:*"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.10",
+    "@types/d3-shape": "3.2.0",
     "@typescript-eslint/parser": "8.62.1",
     "eslint": "10.6.0",
     "eslint-plugin-astro": "^2.1.1"

packages/docs/src/components/BuildSizeChart.astro

@@ -1,9 +1,14 @@
 ---
-import { starterStats } from '../lib/prepare-chart'
-import { prepareColdBuildTimeComparison } from '../lib/prepare-chart'
-import ComparisonBarChart from './ComparisonBarChart.astro'
+import {
+  prepareColdBuildTimeComparison,
+  prepareColdBuildTimeMonthlyComparison,
+  starterHistory,
+  starterStats,
+} from '../lib/prepare-chart'
+import ComparisonComposition from './ComparisonComposition.astro'
 
-const chart = prepareColdBuildTimeComparison(starterStats)
+const bar = prepareColdBuildTimeComparison(starterStats)
+const line = prepareColdBuildTimeMonthlyComparison(starterHistory, starterStats)
 ---
 
-<ComparisonBarChart {...chart} />
+<ComparisonComposition bar={bar} line={line} />

packages/docs/src/components/BuildSizeProdChart.astro

@@ -1,9 +1,14 @@
 ---
-import { starterStats } from '../lib/prepare-chart'
-import { prepareWarmBuildTimeComparison } from '../lib/prepare-chart'
-import ComparisonBarChart from './ComparisonBarChart.astro'
+import {
+  prepareWarmBuildTimeComparison,
+  prepareWarmBuildTimeMonthlyComparison,
+  starterHistory,
+  starterStats,
+} from '../lib/prepare-chart'
+import ComparisonComposition from './ComparisonComposition.astro'
 
-const chart = prepareWarmBuildTimeComparison(starterStats)
+const bar = prepareWarmBuildTimeComparison(starterStats)
+const line = prepareWarmBuildTimeMonthlyComparison(starterHistory, starterStats)
 ---
 
-<ComparisonBarChart {...chart} />
+<ComparisonComposition bar={bar} line={line} />

packages/docs/src/components/CodeComparison.astro

@@ -1,7 +1,7 @@
 ---
 import { render } from 'astro:content'
 import { getCodeComparison } from '../lib/prepare-table'
-import { frameworkLogos } from '../lib/framework-logos'
+import { getBrandByPackage } from '../lib/framework-logos'
 
 type Props = {
   example: string
@@ -21,7 +21,7 @@ const tabs = await Promise.all(
   frameworks.map(async ({ name, slug, package: packageName, entry }) => ({
     name,
     slug,
-    logo: frameworkLogos[packageName],
+    logo: getBrandByPackage(packageName)?.logo,
     docs: entry?.data.docs,
     Content: entry == null ? null : (await render(entry)).Content,
     tabId: `${example}-tab-${slug}`,

packages/docs/src/components/ComparisonBarChart.astro

@@ -1,5 +1,5 @@
 ---
-import { formatChartValue, getComparisonChartHeight } from '../lib/chart'
+import { COMPARISON_CHART_HEIGHT, formatChartValue } from '../lib/chart'
 import type { ChartDatum, ChartValueFormat } from '../lib/types'
 
 interface Props {
@@ -19,7 +19,6 @@ const chartData = data.map((d) => ({
   focused: d.focused,
   version: d.version,
 }))
-const chartHeight = getComparisonChartHeight(chartData.length)
 
 const chartPayload = JSON.stringify({
   id,
@@ -36,7 +35,7 @@ const chartPayload = JSON.stringify({
   <div
     class="comparison-chart-wrapper"
     data-comparison={chartPayload}
-    style={`--comparison-chart-height: ${chartHeight}px`}
+    style={`--comparison-chart-height: ${COMPARISON_CHART_HEIGHT}px`}
   >
     <div class="comparison-chart-host"></div>
     <div class="comparison-logo-layer" aria-hidden="true"></div>
@@ -152,8 +151,8 @@ const chartPayload = JSON.stringify({
   import { decorative } from '@tanstack/charts/mark/decorative'
   import { tooltip } from '@tanstack/charts/tooltip'
   import {
+    COMPARISON_CHART_HEIGHT,
     formatChartValue,
-    getComparisonChartHeight,
     getFrameworkLogoSource,
   } from '../lib/chart'
   import type { ChartDatum, ComparisonChartPayload } from '../lib/types'
@@ -293,8 +292,7 @@ const chartPayload = JSON.stringify({
     const values = rows.map((d) => d.value)
     const max = Math.max(...values)
     const median = getMedian(values)
-    const height = getComparisonChartHeight(rows.length)
-    wrapper.style.setProperty('--comparison-chart-height', `${height}px`)
+    const height = COMPARISON_CHART_HEIGHT
 
     const barColor = getCssVar('--ft-chart-bar', BAR_COLOR)
     const barHoverColor = getCssVar('--ft-chart-bar-hover', BAR_HOVER_COLOR)

packages/docs/src/components/ComparisonComposition.astro

@@ -0,0 +1,120 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { MonthlyComparisonChartPayload } from '../lib/types'
+import ComparisonBarChart from './ComparisonBarChart.astro'
+import ComparisonLineChart from './ComparisonLineChart.astro'
+
+interface Props {
+  bar: ComponentProps<typeof ComparisonBarChart>
+  line: MonthlyComparisonChartPayload
+}
+
+const { bar, line } = Astro.props
+---
+
+<div class="comparison-composition">
+  <div
+    class="comparison-composition-toggle"
+    role="group"
+    aria-label={`${bar.title} chart type`}
+  >
+    <button type="button" data-view="bar" aria-pressed="true">Bar</button>
+    <button type="button" data-view="line" aria-pressed="false">Line</button>
+  </div>
+
+  <div data-view-panel="bar">
+    <ComparisonBarChart {...bar} />
+  </div>
+
+  <div data-view-panel="line" hidden>
+    <ComparisonLineChart {...line} />
+  </div>
+</div>
+
+<style>
+  .comparison-composition {
+    position: relative;
+  }
+
+  .comparison-composition-toggle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    display: inline-flex;
+    padding: 2px;
+    border: 1px solid var(--ft-border);
+    border-radius: 6px;
+    background: var(--ft-bg-muted);
+  }
+
+  .comparison-composition :global(figcaption) {
+    padding-right: 8.5rem;
+  }
+
+  .comparison-composition-toggle button {
+    margin: 0;
+    padding: 0.2rem 0.85rem;
+    border: 0;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--ft-muted);
+    font: inherit;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    line-height: 1.4;
+    cursor: pointer;
+    transition:
+      background-color 140ms ease-out,
+      color 140ms ease-out;
+  }
+
+  .comparison-composition-toggle button:hover {
+    color: var(--ft-text);
+  }
+
+  .comparison-composition-toggle button[aria-pressed='true'] {
+    background: var(--ft-bg);
+    color: var(--ft-text);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
+  }
+
+  .comparison-composition-toggle button:focus-visible {
+    outline: 2px solid var(--ft-accent);
+    outline-offset: 1px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .comparison-composition-toggle button {
+      transition: none;
+    }
+  }
+</style>
+
+<script>
+  function initComposition(composition: HTMLElement) {
+    if (composition.dataset.ready) return
+    composition.dataset.ready = 'true'
+
+    const buttons =
+      composition.querySelectorAll<HTMLButtonElement>('button[data-view]')
+    const panels =
+      composition.querySelectorAll<HTMLElement>('[data-view-panel]')
+
+    buttons.forEach((button) => {
+      button.addEventListener('click', () => {
+        const view = button.dataset.view
+        buttons.forEach((b) =>
+          b.setAttribute('aria-pressed', String(b === button)),
+        )
+        panels.forEach((panel) => {
+          panel.hidden = panel.dataset.viewPanel !== view
+        })
+      })
+    })
+  }
+
+  document
+    .querySelectorAll<HTMLElement>('.comparison-composition')
+    .forEach(initComposition)
+</script>