diff --git a/package.json b/package.json index 45c42737b..0a82141e4 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "@tanstack/ai-anthropic": "^0.18.0", "@tanstack/ai-client": "^0.28.0", "@tanstack/ai-openai": "^0.22.0", - "@tanstack/charts": "0.13.0", + "@tanstack/charts": "0.16.0", "@tanstack/create": "^0.69.0", "@tanstack/highlight": "^0.0.9", "@tanstack/markdown": "^0.0.11", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 878cb0ecc..cd1680b5f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -109,8 +109,8 @@ importers: specifier: ^0.22.0 version: 0.22.0(@tanstack/ai@0.49.1(@opentelemetry/api@1.9.1)(zod@4.3.6))(ws@8.21.0)(zod@4.3.6) '@tanstack/charts': - specifier: 0.13.0 - version: 0.13.0(lit@3.3.2)(octane@0.1.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@8.0.16(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(preact@10.29.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.12) + specifier: 0.16.0 + version: 0.16.0(lit@3.3.2)(octane@0.1.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@8.0.16(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(preact@10.29.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.12) '@tanstack/create': specifier: ^0.69.0 version: 0.69.0(tslib@2.8.1) @@ -3483,8 +3483,8 @@ packages: '@opentelemetry/api': optional: true - '@tanstack/charts@0.13.0': - resolution: {integrity: sha512-yliQoguzGDUGU/xLPEutY8Tm0NbVWFbTX2TuJ7kjtxA/ohoKeCmlnbCa4VMpyQOmuTe8eo3Oiq8ePP0Y24ck8w==} + '@tanstack/charts@0.16.0': + resolution: {integrity: sha512-adG4sVaWjSqGsp/8YU5q7AjoYoPaivVseDjWWcV4osKemfTHnGFlPqlymxbhWxk1BF3p5Rewgqs4BlgZAXve8g==} peerDependencies: '@angular/core': '>=19' '@angular/platform-browser': '>=19' @@ -9828,7 +9828,7 @@ snapshots: transitivePeerDependencies: - zod - '@tanstack/charts@0.13.0(lit@3.3.2)(octane@0.1.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@8.0.16(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(preact@10.29.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.12)': + '@tanstack/charts@0.16.0(lit@3.3.2)(octane@0.1.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@8.0.16(@types/node@25.5.0)(esbuild@0.27.4)(jiti@2.7.0)(tsx@4.21.0)(yaml@2.9.0)))(preact@10.29.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.12)': dependencies: '@types/d3-force': 3.0.10 '@types/d3-geo': 3.1.1 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 8e5ef518e..5ff804ac4 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -2,7 +2,7 @@ packages: - . minimumReleaseAgeExclude: - - '@tanstack/charts@0.13.0' + - '@tanstack/charts@0.16.0' - '@tanstack/react-table@9.0.0' - '@tanstack/table-core@9.0.0' diff --git a/scripts/charts-landing/activation-chart.ts b/scripts/charts-landing/activation-chart.ts index 4005bf74f..a3fc1aad4 100644 --- a/scripts/charts-landing/activation-chart.ts +++ b/scripts/charts-landing/activation-chart.ts @@ -71,21 +71,23 @@ export const activationChart = defineChart({ dy: -21, }), ], - x: { - scale: scaleUtc().domain([weeks[0]!.date, weeks.at(-1)!.date]), - axis: { - label: 'Week ending', - ticks: { format: (value) => monthDay.format(value) }, + scales: { + x: { + scale: scaleUtc().domain([weeks[0]!.date, weeks.at(-1)!.date]), + axis: { + label: 'Week ending', + ticks: { format: (value) => monthDay.format(value) }, + }, + grid: false, }, - grid: false, - }, - y: { - scale: scaleLinear().domain([40, 82]), - axis: { - label: 'Activation rate (%)', - ticks: { count: 5, format: (value) => `${Math.round(value)}%` }, + y: { + scale: scaleLinear().domain([40, 82]), + axis: { + label: 'Activation rate (%)', + ticks: { count: 5, format: (value) => `${Math.round(value)}%` }, + }, + grid: true, }, - grid: true, }, theme: activationTheme, }) diff --git a/scripts/charts-landing/kinetic-area-chart.ts b/scripts/charts-landing/kinetic-area-chart.ts index 67aa57387..e9f71923e 100644 --- a/scripts/charts-landing/kinetic-area-chart.ts +++ b/scripts/charts-landing/kinetic-area-chart.ts @@ -35,14 +35,16 @@ export const kineticAreaChart = defineChart({ r: 4, }), ], - x: { - scale: scaleLinear().domain([1, 8]), - axis: { ticks: { count: 4, format: (month) => `M${month}` } }, - }, - y: { - scale: scaleLinear().domain([30, 100]), - axis: { ticks: { count: 4 } }, - grid: true, + scales: { + x: { + scale: scaleLinear().domain([1, 8]), + axis: { ticks: { count: 4, format: (month) => `M${month}` } }, + }, + y: { + scale: scaleLinear().domain([30, 100]), + axis: { ticks: { count: 4 } }, + grid: true, + }, }, theme: kineticDarkTheme, }) diff --git a/scripts/charts-landing/kinetic-bar-chart.ts b/scripts/charts-landing/kinetic-bar-chart.ts index 4391254c1..e6d25b626 100644 --- a/scripts/charts-landing/kinetic-bar-chart.ts +++ b/scripts/charts-landing/kinetic-bar-chart.ts @@ -22,13 +22,15 @@ export const kineticBarChart = defineChart({ strokeDasharray: '5 7', }), ], - x: { - scale: scaleBand().domain(productNames).padding(0.16), - }, - y: { - scale: scaleLinear().domain([0, 100]), - ticks: 4, - grid: true, + scales: { + x: { + scale: scaleBand().domain(productNames).padding(0.16), + }, + y: { + scale: scaleLinear().domain([0, 100]), + axis: { ticks: { count: 4 } }, + grid: true, + }, }, color: { domain: ['Core', 'Data', 'Runtime'], diff --git a/scripts/charts-landing/kinetic-donut-chart.ts b/scripts/charts-landing/kinetic-donut-chart.ts index 8f63e8154..e463eed62 100644 --- a/scripts/charts-landing/kinetic-donut-chart.ts +++ b/scripts/charts-landing/kinetic-donut-chart.ts @@ -15,8 +15,10 @@ export const kineticDonutChart = defineChart({ id: 'hero-donut', inset: 10, radiusRatio: 0.78, - angle: { scale: scaleLinear().domain([0, 1]) }, - radius: { scale: scaleLinear().domain([0, 1]) }, + scales: { + angle: { scale: scaleLinear().domain([0, 1]) }, + radius: { scale: scaleLinear().domain([0, 1]) }, + }, marks: [ radialArc(productShareSlices, { id: 'hero-arcs', @@ -44,6 +46,7 @@ export const kineticDonutChart = defineChart({ ], }), ], + scales: { x: null, y: null }, color: { domain: productShare.map((row) => row.segment), range: ['#61e8ff', '#ff806f', '#b9f227', '#a78bfa', '#77929f'], diff --git a/scripts/charts-landing/kinetic-dumbbell-chart.ts b/scripts/charts-landing/kinetic-dumbbell-chart.ts index b4bc84d26..08fb9564a 100644 --- a/scripts/charts-landing/kinetic-dumbbell-chart.ts +++ b/scripts/charts-landing/kinetic-dumbbell-chart.ts @@ -34,13 +34,15 @@ export const kineticDumbbellChart = defineChart({ r: 5, }), ], - x: { - scale: scaleLinear().domain([30, 100]), - axis: { ticks: { count: 4 } }, - grid: true, - }, - y: { - scale: scaleBand().domain(productNames).padding(0.28), + scales: { + x: { + scale: scaleLinear().domain([30, 100]), + axis: { ticks: { count: 4 } }, + grid: true, + }, + y: { + scale: scaleBand().domain(productNames).padding(0.28), + }, }, theme: kineticDarkTheme, }) diff --git a/scripts/charts-landing/kinetic-heatmap-chart.ts b/scripts/charts-landing/kinetic-heatmap-chart.ts index deb7a57d8..463877af0 100644 --- a/scripts/charts-landing/kinetic-heatmap-chart.ts +++ b/scripts/charts-landing/kinetic-heatmap-chart.ts @@ -22,11 +22,13 @@ export const kineticHeatmapChart = defineChart({ strokeWidth: 2, }), ], - x: { - scale: scaleBand().domain(productNames).padding(0.04), - }, - y: { - scale: scaleBand().domain(heatmapMetrics).padding(0.08), + scales: { + x: { + scale: scaleBand().domain(productNames).padding(0.04), + }, + y: { + scale: scaleBand().domain(heatmapMetrics).padding(0.08), + }, }, color: { domain: ['Building', 'Strong', 'Peak'], diff --git a/scripts/charts-landing/kinetic-layered-chart.ts b/scripts/charts-landing/kinetic-layered-chart.ts index a363d0963..482949fce 100644 --- a/scripts/charts-landing/kinetic-layered-chart.ts +++ b/scripts/charts-landing/kinetic-layered-chart.ts @@ -65,14 +65,16 @@ export const kineticLayeredChart = defineChart({ dy: -22, }), ], - x: { - scale: scaleLinear().domain([1, 8]), - axis: { ticks: { count: 4, format: (month) => `M${month}` } }, - }, - y: { - scale: scaleLinear().domain([30, 100]), - axis: { ticks: { count: 4 } }, - grid: true, + scales: { + x: { + scale: scaleLinear().domain([1, 8]), + axis: { ticks: { count: 4, format: (month) => `M${month}` } }, + }, + y: { + scale: scaleLinear().domain([30, 100]), + axis: { ticks: { count: 4 } }, + grid: true, + }, }, theme: kineticDarkTheme, }) diff --git a/scripts/charts-landing/kinetic-line-chart.ts b/scripts/charts-landing/kinetic-line-chart.ts index d30a84111..705a7b440 100644 --- a/scripts/charts-landing/kinetic-line-chart.ts +++ b/scripts/charts-landing/kinetic-line-chart.ts @@ -26,14 +26,16 @@ export const kineticLineChart = defineChart({ r: 4, }), ], - x: { - scale: scaleLinear().domain([1, 8]), - axis: { ticks: { count: 4, format: (month) => `M${month}` } }, - }, - y: { - scale: scaleLinear().domain([30, 100]), - axis: { ticks: { count: 4 } }, - grid: true, + scales: { + x: { + scale: scaleLinear().domain([1, 8]), + axis: { ticks: { count: 4, format: (month) => `M${month}` } }, + }, + y: { + scale: scaleLinear().domain([30, 100]), + axis: { ticks: { count: 4 } }, + grid: true, + }, }, theme: kineticDarkTheme, }) diff --git a/scripts/charts-landing/kinetic-lollipop-chart.ts b/scripts/charts-landing/kinetic-lollipop-chart.ts index 5fba2e6e7..4afa8688b 100644 --- a/scripts/charts-landing/kinetic-lollipop-chart.ts +++ b/scripts/charts-landing/kinetic-lollipop-chart.ts @@ -27,13 +27,15 @@ export const kineticLollipopChart = defineChart({ r: 6, }), ], - x: { - scale: scaleBand().domain(productNames).padding(0.3), - }, - y: { - scale: scaleLinear().domain([0, 100]), - axis: { ticks: { count: 4 } }, - grid: true, + scales: { + x: { + scale: scaleBand().domain(productNames).padding(0.3), + }, + y: { + scale: scaleLinear().domain([0, 100]), + axis: { ticks: { count: 4 } }, + grid: true, + }, }, theme: kineticDarkTheme, }) diff --git a/scripts/charts-landing/kinetic-radar-chart.ts b/scripts/charts-landing/kinetic-radar-chart.ts index ceee08384..017c8f420 100644 --- a/scripts/charts-landing/kinetic-radar-chart.ts +++ b/scripts/charts-landing/kinetic-radar-chart.ts @@ -22,11 +22,13 @@ export const kineticRadarChart = defineChart({ polar({ id: 'hero-radar', radiusRatio: 0.83, - angle: { - scale: scalePoint().domain(radarDimensionNames), - wrap: true, + scales: { + angle: { + scale: scalePoint().domain(radarDimensionNames), + wrap: true, + }, + radius: { scale: scaleLinear().domain([0, 100]) }, }, - radius: { scale: scaleLinear().domain([0, 100]) }, guides: [ radialGrid({ ticks: 4, @@ -73,5 +75,6 @@ export const kineticRadarChart = defineChart({ ], }), ], + scales: { x: null, y: null }, theme: kineticDarkTheme, }) diff --git a/scripts/charts-landing/kinetic-scatter-chart.ts b/scripts/charts-landing/kinetic-scatter-chart.ts index b0df0c2b2..638f71d25 100644 --- a/scripts/charts-landing/kinetic-scatter-chart.ts +++ b/scripts/charts-landing/kinetic-scatter-chart.ts @@ -18,14 +18,16 @@ export const kineticScatterChart = defineChart({ r: 'size', }), ], - x: { - scale: scaleLinear().domain([8, 34]), - axis: { ticks: { count: 4 } }, - }, - y: { - scale: scaleLinear().domain([65, 96]), - axis: { ticks: { count: 4, format: (value) => `${value}%` } }, - grid: true, + scales: { + x: { + scale: scaleLinear().domain([8, 34]), + axis: { ticks: { count: 4 } }, + }, + y: { + scale: scaleLinear().domain([65, 96]), + axis: { ticks: { count: 4, format: (value) => `${value}%` } }, + grid: true, + }, }, theme: kineticDarkTheme, }) diff --git a/scripts/generate-charts-landing-svg.ts b/scripts/generate-charts-landing-svg.ts index 8773a7dfd..6d48dc89c 100644 --- a/scripts/generate-charts-landing-svg.ts +++ b/scripts/generate-charts-landing-svg.ts @@ -69,13 +69,15 @@ const editorialTheme = defineChart({ curve: d3Curve(curveMonotoneX), }), ], - x: { - scale: scaleLinear().domain([1, 10]), - axis: { ticks: { count: 4, format: (month) => `M${month}` } }, - }, - y: { - scale: scaleLinear().domain(themeDomain).nice(), - axis: { ticks: { count: 3 } }, + scales: { + x: { + scale: scaleLinear().domain([1, 10]), + axis: { ticks: { count: 4, format: (month) => `M${month}` } }, + }, + y: { + scale: scaleLinear().domain(themeDomain).nice(), + axis: { ticks: { count: 3 } }, + }, }, theme: { foreground: '#3e3529', @@ -106,14 +108,16 @@ const productTheme = defineChart({ r: 4, }), ], - x: { - scale: scaleLinear().domain([1, 10]), - axis: { ticks: { count: 4, format: (month) => `M${month}` } }, - }, - y: { - scale: scaleLinear().domain(themeDomain).nice(), - axis: { ticks: { count: 4 } }, - grid: true, + scales: { + x: { + scale: scaleLinear().domain([1, 10]), + axis: { ticks: { count: 4, format: (month) => `M${month}` } }, + }, + y: { + scale: scaleLinear().domain(themeDomain).nice(), + axis: { ticks: { count: 4 } }, + grid: true, + }, }, theme: { foreground: '#003e53', @@ -145,16 +149,18 @@ const terminalTheme = defineChart({ curve: d3Curve(curveStepAfter), }), ], - x: { - scale: scaleLinear().domain([1, 10]), - axis: { - ticks: { count: 4, format: (month) => String(month).padStart(2, '0') }, + scales: { + x: { + scale: scaleLinear().domain([1, 10]), + axis: { + ticks: { count: 4, format: (month) => String(month).padStart(2, '0') }, + }, + }, + y: { + scale: scaleLinear().domain(themeDomain).nice(), + axis: { ticks: { count: 4 } }, + grid: true, }, - }, - y: { - scale: scaleLinear().domain(themeDomain).nice(), - axis: { ticks: { count: 4 } }, - grid: true, }, theme: { foreground: '#a2e1a9', @@ -194,15 +200,16 @@ const monokaiTheme = defineChart({ strokeWidth: 3, }), ], - x: { - scale: scaleLinear().domain([1, 10]), - ticks: 4, - format: (month: number) => `M${month}`, - }, - y: { - scale: scaleLinear().domain(themeDomain).nice(), - ticks: 4, - grid: true, + scales: { + x: { + scale: scaleLinear().domain([1, 10]), + axis: { ticks: { count: 4, format: (month) => `M${month}` } }, + }, + y: { + scale: scaleLinear().domain(themeDomain).nice(), + axis: { ticks: { count: 4 } }, + grid: true, + }, }, theme: { foreground: '#f8f8f2', diff --git a/src/components/charts/ChartsBuilderPage.client.tsx b/src/components/charts/ChartsBuilderPage.client.tsx index f6c630283..90ca3892d 100644 --- a/src/components/charts/ChartsBuilderPage.client.tsx +++ b/src/components/charts/ChartsBuilderPage.client.tsx @@ -99,19 +99,21 @@ const definition = defineChart({ inset: 2, }), ], - x: { - scale: scaleBand() - .domain(letters.map((datum) => datum.letter)) - .padding(0.2), - }, - y: { - scale: scaleLinear().domain([0, 0.14]).nice(), - axis: { label: 'Frequency' }, - grid: true, + scales: { + x: { + scale: scaleBand() + .domain(letters.map((datum) => datum.letter)) + .padding(0.2), + }, + y: { + scale: scaleLinear().domain([0, 0.14]).nice(), + axis: { label: 'Frequency' }, + grid: true, + }, }, margin: { top: 24, right: 24, bottom: 48, left: 56 }, theme: { background: 'transparent' }, - animate: true, + svgAnimation: true, }) const host = document.createElement('div') diff --git a/src/components/charts/TimeSeriesChart.tsx b/src/components/charts/TimeSeriesChart.tsx index 545b50dc1..bb1e88d04 100644 --- a/src/components/charts/TimeSeriesChart.tsx +++ b/src/components/charts/TimeSeriesChart.tsx @@ -78,19 +78,21 @@ function createTimeSeriesChart(input: TimeSeriesChartInput) { r: 3, }), ], - x: { - scale: d3.scaleUtc().domain([firstDate, lastDate]).nice(), - axis: { label: 'Date' }, - grid: true, - }, - y: { - scale: d3.scaleLinear().domain([0, maxValue]).nice(), - axis: { label: input.yLabel }, - grid: true, + scales: { + x: { + scale: d3.scaleUtc().domain([firstDate, lastDate]).nice(), + axis: { label: 'Date' }, + grid: true, + }, + y: { + scale: d3.scaleLinear().domain([0, maxValue]).nice(), + axis: { label: input.yLabel }, + grid: true, + }, }, margin: { top: 20, right: 20, bottom: 40, left: 60 }, theme: { background: 'transparent' }, - animate: true, + svgAnimation: true, tooltip: { use: tooltip, format: formatTooltip }, }) } diff --git a/src/components/intent/SkillDependencyGraph.tsx b/src/components/intent/SkillDependencyGraph.tsx index 360e1fde0..bda77d3a6 100644 --- a/src/components/intent/SkillDependencyGraph.tsx +++ b/src/components/intent/SkillDependencyGraph.tsx @@ -105,11 +105,13 @@ function createDependencyGraph(input: DependencyGraphInput) { dy: 18, }), ], - x: { - scale: scaleLinear().domain([0, input.width]), - }, - y: { - scale: scaleLinear().domain([input.height, 0]), + scales: { + x: { + scale: scaleLinear().domain([0, input.width]), + }, + y: { + scale: scaleLinear().domain([input.height, 0]), + }, }, color: { scale: scaleOrdinal() diff --git a/src/components/intent/SkillSparkline.tsx b/src/components/intent/SkillSparkline.tsx index 0f76650d6..d100a9ddf 100644 --- a/src/components/intent/SkillSparkline.tsx +++ b/src/components/intent/SkillSparkline.tsx @@ -102,13 +102,15 @@ function createSkillSparkline( inset: 0, }), ], - x: { - scale: d3.scaleLinear().domain([-0.5, slots - 0.5]), - }, - y: { - scale: d3 - .scaleLinear() - .domain([0, d3.max(history, (entry) => entry.total) ?? 1]), + scales: { + x: { + scale: d3.scaleLinear().domain([-0.5, slots - 0.5]), + }, + y: { + scale: d3 + .scaleLinear() + .domain([0, d3.max(history, (entry) => entry.total) ?? 1]), + }, }, color: { scale: d3 diff --git a/src/components/landing/ChartsLanding.tsx b/src/components/landing/ChartsLanding.tsx index f61bbcc99..1c4750aba 100644 --- a/src/components/landing/ChartsLanding.tsx +++ b/src/components/landing/ChartsLanding.tsx @@ -151,15 +151,17 @@ const accountHealth = defineChart({ key: 'id', }), ], - x: { - scale: scaleLinear, - axis: { label: 'Monthly revenue ($k)' }, - }, - y: { - scale: scaleLinear, - axis: { - label: '90-day retention', - ticks: { format: (value) => percent.format(value) }, + scales: { + x: { + scale: scaleLinear, + axis: { label: 'Monthly revenue ($k)' }, + }, + y: { + scale: scaleLinear, + axis: { + label: '90-day retention', + ticks: { format: (value) => percent.format(value) }, + }, }, }, tooltip, diff --git a/src/components/landing/chartsActivationSvg.ts b/src/components/landing/chartsActivationSvg.ts index e659e3c56..d31026c56 100644 --- a/src/components/landing/chartsActivationSvg.ts +++ b/src/components/landing/chartsActivationSvg.ts @@ -2,6 +2,6 @@ // Source: scripts/charts-landing/activation-chart.ts export const chartsActivationSvg = - 'Illustrative weekly activation data from January through May 2026. The actual rate rises from 48 to 78 percent, compared with an expected range and a 70 percent goal. Onboarding v2 and Invite flow are marked as release events.' + 'Illustrative weekly activation data from January through May 2026. The actual rate rises from 48 to 78 percent, compared with an expected range and a 70 percent goal. Onboarding v2 and Invite flow are marked as release events.' export const chartsActivationCompactSvg = - 'Illustrative weekly activation data from January through May 2026. The actual rate rises from 48 to 78 percent, compared with an expected range and a 70 percent goal. Onboarding v2 and Invite flow are marked as release events.' + 'Illustrative weekly activation data from January through May 2026. The actual rate rises from 48 to 78 percent, compared with an expected range and a 70 percent goal. Onboarding v2 and Invite flow are marked as release events.' diff --git a/src/components/landing/chartsCommonSvg.ts b/src/components/landing/chartsCommonSvg.ts index a7ae09d00..74babbe72 100644 --- a/src/components/landing/chartsCommonSvg.ts +++ b/src/components/landing/chartsCommonSvg.ts @@ -2,10 +2,10 @@ // Source: scripts/generate-charts-landing-svg.ts export const chartsThemeEditorialSvg = - '' + '' export const chartsThemeProductSvg = - '' + '' export const chartsThemeTerminalSvg = - '' + '' export const chartsThemeMonokaiSvg = - '' + '' diff --git a/src/components/landing/chartsKineticSvg.ts b/src/components/landing/chartsKineticSvg.ts index 16a7d93ca..914368ff1 100644 --- a/src/components/landing/chartsKineticSvg.ts +++ b/src/components/landing/chartsKineticSvg.ts @@ -2,14 +2,14 @@ // Source: scripts/charts-landing/kinetic-*-chart.ts export const chartsKineticBarSvg = - '' + '' export const chartsKineticDonutSvg = '' export const chartsKineticHeatmapSvg = - '' + '' export const chartsKineticLayeredSvg = - '' + '' export const chartsKineticRadarSvg = '' export const chartsKineticScatterSvg = - '' + '' diff --git a/src/components/npm-stats/NPMStatsChart.tsx b/src/components/npm-stats/NPMStatsChart.tsx index c53ab83fb..4eb8bb5b0 100644 --- a/src/components/npm-stats/NPMStatsChart.tsx +++ b/src/components/npm-stats/NPMStatsChart.tsx @@ -797,31 +797,33 @@ function createLatestBarExportChart({ radius: 2, }), ], - x: isHorizontalBar - ? { - scale: numericScale, - axis: { - label: { text: 'Downloads', offset: 35 }, - ticks: { format: formatCompactAxisNumber }, - }, - grid: true, - } - : { - scale: categoricalScale, - axis: { - tickLabels: { rotate: verticalXAxisLayout.tickRotate }, + scales: { + x: isHorizontalBar + ? { + scale: numericScale, + axis: { + label: { text: 'Downloads', offset: 35 }, + ticks: { format: formatCompactAxisNumber }, + }, + grid: true, + } + : { + scale: categoricalScale, + axis: { + tickLabels: { rotate: verticalXAxisLayout.tickRotate }, + }, }, - }, - y: isHorizontalBar - ? { scale: categoricalScale } - : { - scale: numericScale, - axis: { - label: 'Downloads', - ticks: { format: formatCompactAxisNumber }, + y: isHorizontalBar + ? { scale: categoricalScale } + : { + scale: numericScale, + axis: { + label: 'Downloads', + ticks: { format: formatCompactAxisNumber }, + }, + grid: true, }, - grid: true, - }, + }, gradients: getTanStackGradients(fillGradients), margin: { top: 20, @@ -2259,7 +2261,7 @@ function createNpmStatsChart(input: NpmStatsChartInput) { const definition = defineChart(() => createNpmStatsChartSpec(input)) return defineChart(definition, { - animate: { + svgAnimation: { duration: chartUpdateTransitionDurationMs, easing: 'ease-out', }, @@ -2322,15 +2324,17 @@ function createNpmStatsChartSpec(input: NpmStatsChartInput) { radius: input.chartType === 'stacked-bar' ? undefined : 2, }), ], - x: { - scale: numericScale, - axis: { - label: input.xLabel, - ticks: { format: formatCompactAxisNumber }, + scales: { + x: { + scale: numericScale, + axis: { + label: input.xLabel, + ticks: { format: formatCompactAxisNumber }, + }, + grid: true, }, - grid: true, + y: { scale: categoricalScale }, }, - y: { scale: categoricalScale }, } } @@ -2354,14 +2358,16 @@ function createNpmStatsChartSpec(input: NpmStatsChartInput) { radius: input.chartType === 'stacked-bar' ? undefined : 2, }), ], - x: { scale: categoricalScale }, - y: { - scale: numericScale, - axis: { - label: input.yLabel, - ticks: { format: input.yFormat }, + scales: { + x: { scale: categoricalScale }, + y: { + scale: numericScale, + axis: { + label: input.yLabel, + ticks: { format: input.yFormat }, + }, + grid: true, }, - grid: true, }, } } @@ -2422,17 +2428,19 @@ function createNpmStatsChartSpec(input: NpmStatsChartInput) { curve, }), ], - x, - y: { - scale: d3 - .scaleLinear() - .domain([valueExtent[0] ?? 0, valueExtent[1] ?? 1]) - .nice(5), - axis: { - label: input.yLabel, - ticks: { format: input.yFormat }, + scales: { + x, + y: { + scale: d3 + .scaleLinear() + .domain([valueExtent[0] ?? 0, valueExtent[1] ?? 1]) + .nice(5), + axis: { + label: input.yLabel, + ticks: { format: input.yFormat }, + }, + grid: true, }, - grid: true, }, clip: !!input.timelineDomain, } @@ -2474,17 +2482,19 @@ function createNpmStatsChartSpec(input: NpmStatsChartInput) { curve, }), ], - x, - y: { - scale: d3 - .scaleLinear() - .domain([stackedExtent[0] ?? 0, stackedExtent[1] ?? 1]) - .nice(5), - axis: { - label: input.yLabel, - ticks: { format: input.yFormat }, + scales: { + x, + y: { + scale: d3 + .scaleLinear() + .domain([stackedExtent[0] ?? 0, stackedExtent[1] ?? 1]) + .nice(5), + axis: { + label: input.yLabel, + ticks: { format: input.yFormat }, + }, + grid: true, }, - grid: true, }, clip: !!input.timelineDomain, } diff --git a/src/libraries/libraries.ts b/src/libraries/libraries.ts index 7a0771a55..c8d083f79 100644 --- a/src/libraries/libraries.ts +++ b/src/libraries/libraries.ts @@ -341,6 +341,7 @@ export const charts: LibrarySlim = { tagline: "A chart grammar you don't have to outgrow.", description: 'A typed, tree-shakable chart grammar for SVG and Canvas. Compose marks, views, scales, transforms, interactions, and motion with compact primitives or D3-compatible inputs.', + badge: 'alpha', repo: 'tanstack/charts', frameworks: [ 'react', diff --git a/src/utils/builder-environment.ts b/src/utils/builder-environment.ts index d87595e28..d6f47da28 100644 --- a/src/utils/builder-environment.ts +++ b/src/utils/builder-environment.ts @@ -1,22 +1,22 @@ import type { ExampleEnvironment } from './example-workspace' export const builderImports = { - '@tanstack/charts': 'https://esm.sh/@tanstack/charts@0.13.0', - '@tanstack/charts/': 'https://esm.sh/@tanstack/charts@0.13.0/', + '@tanstack/charts': 'https://esm.sh/@tanstack/charts@0.16.0', + '@tanstack/charts/': 'https://esm.sh/@tanstack/charts@0.16.0/', '@tanstack/charts/react': - 'https://esm.sh/@tanstack/charts@0.13.0/react?external=react,react-dom', + 'https://esm.sh/@tanstack/charts@0.16.0/react?external=react,react-dom', '@tanstack/charts/react/canvas': - 'https://esm.sh/@tanstack/charts@0.13.0/react/canvas?external=react,react-dom', + 'https://esm.sh/@tanstack/charts@0.16.0/react/canvas?external=react,react-dom', '@tanstack/charts/react/core': - 'https://esm.sh/@tanstack/charts@0.13.0/react/core?external=react,react-dom', + 'https://esm.sh/@tanstack/charts@0.16.0/react/core?external=react,react-dom', '@tanstack/charts/react/tooltip': - 'https://esm.sh/@tanstack/charts@0.13.0/react/tooltip?external=react,react-dom', + 'https://esm.sh/@tanstack/charts@0.16.0/react/tooltip?external=react,react-dom', '@tanstack/charts/octane': - 'https://esm.sh/@tanstack/charts@0.13.0/octane?external=octane', + 'https://esm.sh/@tanstack/charts@0.16.0/octane?external=octane', '@tanstack/charts/octane/canvas': - 'https://esm.sh/@tanstack/charts@0.13.0/octane/canvas?external=octane', + 'https://esm.sh/@tanstack/charts@0.16.0/octane/canvas?external=octane', '@tanstack/charts/octane/core': - 'https://esm.sh/@tanstack/charts@0.13.0/octane/core?external=octane', + 'https://esm.sh/@tanstack/charts@0.16.0/octane/core?external=octane', '@tanstack/charts-data/': 'https://esm.sh/gh/TanStack/charts@b8690671d677244848cff0eebd3d5dd0d5825b18/packages/charts-demo-data/src/', '@tanstack/highlight': 'https://esm.sh/@tanstack/highlight@0.0.10', diff --git a/src/utils/builder-examples.ts b/src/utils/builder-examples.ts index 0a3064b9f..8fbe0bb77 100644 --- a/src/utils/builder-examples.ts +++ b/src/utils/builder-examples.ts @@ -99,8 +99,10 @@ const definition = defineChart(({ width }) => ({ fill: '#3b7f2a', fontSize: 10, }), ], - x: { scale: scaleLinear().domain([0, 1440]), axis: false }, - y: { scale: scaleLinear().domain([0, 4]), axis: false }, + scales: { + x: { scale: scaleLinear().domain([0, 1440]), axis: false }, + y: { scale: scaleLinear().domain([0, 4]), axis: false }, + }, margin: 0, clip: true, })) @@ -179,11 +181,13 @@ function PopulationRace() { dx: 8, anchor: 'start', fill: 'currentColor', fontWeight: 700, }), ], - x: { scale: scaleLinear().domain([0, 1600]), axis: { label: 'Population (millions)' }, grid: false }, - y: { scale: scaleBand().domain(rows.map((row) => row.country)).padding(0.12) }, + scales: { + x: { scale: scaleLinear().domain([0, 1600]), axis: { label: 'Population (millions)' }, grid: false }, + y: { scale: scaleBand().domain(rows.map((row) => row.country)).padding(0.12) }, + }, margin: { top: 20, right: 72, bottom: 44, left: 116 }, theme: { background: 'transparent' }, - animate: true, + svgAnimation: true, }), [rows]) return React.createElement('section', { className: 'race' }, @@ -246,11 +250,13 @@ function IndicatorChart({ kind, revision }) { lineY(rows, { x: 'x', y: 'signal', key: 'id', stroke: '#adbbd7', strokeOpacity: 0.7, strokeWidth: 1.2 }), dot(rows.filter((_, index) => index % 13 === 0), { x: 'x', y: 'value', key: 'id', fill: color, r: 3 }), ], - x: { scale: scaleLinear().domain([0, 63]), axis: false }, - y: { scale: scaleLinear().domain([0, 100]), axis: false, grid: true }, + scales: { + x: { scale: scaleLinear().domain([0, 63]), axis: false }, + y: { scale: scaleLinear().domain([0, 100]), axis: false, grid: true }, + }, margin: { top: 12, right: 16, bottom: 18, left: 16 }, theme: { background: 'transparent' }, - animate: true, + svgAnimation: true, }), [color, kind, rows]) return React.createElement(Chart, { definition, height: 240, initialWidth: 620, ariaLabel: 'Technical indicator trend' }) diff --git a/tests/builder-ai-package-resources.test.ts b/tests/builder-ai-package-resources.test.ts index e4c09f03a..fa263096a 100644 --- a/tests/builder-ai-package-resources.test.ts +++ b/tests/builder-ai-package-resources.test.ts @@ -24,7 +24,7 @@ test('resolves exact built-in and installed package versions', () => { { specifier: '@tanstack/charts/scales/band', packageName: '@tanstack/charts', - packageVersion: '0.13.0', + packageVersion: '0.16.0', exportKey: './scales/band', }, ) @@ -70,7 +70,7 @@ test('resolves exact built-in and installed package versions', () => { test('inspects exact module exports and declarations', async () => { const baseFetcher = createFetcher({ - 'https://unpkg.com/@tanstack/charts@0.13.0/package.json': JSON.stringify({ + 'https://unpkg.com/@tanstack/charts@0.16.0/package.json': JSON.stringify({ exports: { './scales/band': { types: './dist/scales/band.d.ts', @@ -78,9 +78,9 @@ test('inspects exact module exports and declarations', async () => { }, }, }), - 'https://unpkg.com/@tanstack/charts@0.13.0/dist/scales/band.d.ts': + 'https://unpkg.com/@tanstack/charts@0.16.0/dist/scales/band.d.ts': 'export declare function scaleBand(): BandScale;\nexport type { BandScale };', - 'https://unpkg.com/@tanstack/charts@0.13.0/dist/scales/band.js': + 'https://unpkg.com/@tanstack/charts@0.16.0/dist/scales/band.js': 'function scaleBand() {}\nexport { scaleBand };', }) let fetchCount = 0 @@ -145,7 +145,7 @@ test('searches bounded docs, declarations, and trusted TanStack skills', async ( ], }) const baseFetcher = createFetcher({ - 'https://unpkg.com/@tanstack/charts@0.13.0/?meta': metadata, + 'https://unpkg.com/@tanstack/charts@0.16.0/?meta': metadata, }) let fetchCount = 0 const fetcher: typeof fetch = (input, init) => { @@ -182,7 +182,7 @@ test('searches bounded docs, declarations, and trusted TanStack skills', async ( test('reads package resources in chunks and trusts only TanStack skills', async () => { const skill = 'Use scaleBand from the exact scale subpath.' const fetcher = createFetcher({ - 'https://unpkg.com/@tanstack/charts@0.13.0/skills/design/SKILL.md': skill, + 'https://unpkg.com/@tanstack/charts@0.16.0/skills/design/SKILL.md': skill, }) const result = await readBuilderAiPackageResource( clientExecution, @@ -237,7 +237,7 @@ test('reads package resources in chunks and trusts only TanStack skills', async test('reuses one package download across chunked reads', async () => { const source = `${'a'.repeat(50_000)}tail` const baseFetcher = createFetcher({ - 'https://unpkg.com/@tanstack/charts@0.13.0/docs/large.md': source, + 'https://unpkg.com/@tanstack/charts@0.16.0/docs/large.md': source, }) let fetchCount = 0 const fetcher: typeof fetch = (input, init) => { @@ -268,7 +268,7 @@ test('reuses one package download across chunked reads', async () => { test('coalesces concurrent reads of one package resource', async () => { const baseFetcher = createFetcher({ - 'https://unpkg.com/@tanstack/charts@0.13.0/docs/shared.md': 'shared', + 'https://unpkg.com/@tanstack/charts@0.16.0/docs/shared.md': 'shared', }) let fetchCount = 0 const fetcher: typeof fetch = async (input, init) => { @@ -302,8 +302,8 @@ test('coalesces concurrent reads of one package resource', async () => { test('budgets unique package downloads by UTF-8 bytes', async () => { const fetcher = createFetcher({ - 'https://unpkg.com/@tanstack/charts@0.13.0/docs/exact.md': 'é', - 'https://unpkg.com/@tanstack/charts@0.13.0/docs/extra.md': 'x', + 'https://unpkg.com/@tanstack/charts@0.16.0/docs/exact.md': 'é', + 'https://unpkg.com/@tanstack/charts@0.16.0/docs/extra.md': 'x', }) const fetchState = createBuilderAiPackageFetchState({ maxBytes: 2 }) @@ -339,8 +339,8 @@ test('budgets unique package downloads by UTF-8 bytes', async () => { test('retries transient package fetches without bypassing the resource budget', async () => { const baseFetcher = createFetcher({ - 'https://unpkg.com/@tanstack/charts@0.13.0/docs/retry.md': 'ready', - 'https://unpkg.com/@tanstack/charts@0.13.0/docs/other.md': 'other', + 'https://unpkg.com/@tanstack/charts@0.16.0/docs/retry.md': 'ready', + 'https://unpkg.com/@tanstack/charts@0.16.0/docs/other.md': 'other', }) let fetchCount = 0 const fetcher: typeof fetch = async (input, init) => { diff --git a/tests/builder-environment.test.ts b/tests/builder-environment.test.ts index 67beaaa3e..6daa22bc2 100644 --- a/tests/builder-environment.test.ts +++ b/tests/builder-environment.test.ts @@ -30,40 +30,40 @@ test('uses TanStack category colors in the starter sandbox', () => { test('exposes unified Charts subpaths without duplicate framework runtimes', () => { assert.equal( builderImports['@tanstack/charts'], - 'https://esm.sh/@tanstack/charts@0.13.0', + 'https://esm.sh/@tanstack/charts@0.16.0', ) assert.equal( builderImports['@tanstack/charts/'], - 'https://esm.sh/@tanstack/charts@0.13.0/', + 'https://esm.sh/@tanstack/charts@0.16.0/', ) assert.equal( builderImports['@tanstack/charts/react'], - 'https://esm.sh/@tanstack/charts@0.13.0/react?external=react,react-dom', + 'https://esm.sh/@tanstack/charts@0.16.0/react?external=react,react-dom', ) assert.equal( builderImports['@tanstack/charts/react/canvas'], - 'https://esm.sh/@tanstack/charts@0.13.0/react/canvas?external=react,react-dom', + 'https://esm.sh/@tanstack/charts@0.16.0/react/canvas?external=react,react-dom', ) assert.equal( builderImports['@tanstack/charts/react/core'], - 'https://esm.sh/@tanstack/charts@0.13.0/react/core?external=react,react-dom', + 'https://esm.sh/@tanstack/charts@0.16.0/react/core?external=react,react-dom', ) assert.equal( builderImports['@tanstack/charts/react/tooltip'], - 'https://esm.sh/@tanstack/charts@0.13.0/react/tooltip?external=react,react-dom', + 'https://esm.sh/@tanstack/charts@0.16.0/react/tooltip?external=react,react-dom', ) assert.equal( builderImports['@tanstack/charts/octane'], - 'https://esm.sh/@tanstack/charts@0.13.0/octane?external=octane', + 'https://esm.sh/@tanstack/charts@0.16.0/octane?external=octane', ) assert.equal( builderImports['@tanstack/charts/octane/canvas'], - 'https://esm.sh/@tanstack/charts@0.13.0/octane/canvas?external=octane', + 'https://esm.sh/@tanstack/charts@0.16.0/octane/canvas?external=octane', ) assert.equal( builderImports['@tanstack/charts/octane/core'], - 'https://esm.sh/@tanstack/charts@0.13.0/octane/core?external=octane', + 'https://esm.sh/@tanstack/charts@0.16.0/octane/core?external=octane', ) assert.equal(