From fbd809a06ba36d6cbd6f7e1e0df9a20db0950de4 Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Tue, 8 Sep 2026 16:51:14 -0600 Subject: [PATCH] fix: sort and highlight npm stats tooltip series --- package.json | 2 +- pnpm-lock.yaml | 10 ++++----- src/components/npm-stats/NPMStatsChart.tsx | 2 +- src/utils/builder-environment.ts | 18 ++++++++-------- tests/builder-ai-package-resources.test.ts | 24 +++++++++++----------- tests/builder-environment.test.ts | 18 ++++++++-------- 6 files changed, 37 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index 6ff26a404..ed3ff797e 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.16.0", + "@tanstack/charts": "0.16.1", "@tanstack/create": "^0.70.0", "@tanstack/highlight": "^0.0.9", "@tanstack/markdown": "^0.0.11", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5f0abbbef..1e65c01e8 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.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) + specifier: 0.16.1 + version: 0.16.1(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.70.0 version: 0.70.0 @@ -3363,8 +3363,8 @@ packages: '@opentelemetry/api': optional: true - '@tanstack/charts@0.16.0': - resolution: {integrity: sha512-adG4sVaWjSqGsp/8YU5q7AjoYoPaivVseDjWWcV4osKemfTHnGFlPqlymxbhWxk1BF3p5Rewgqs4BlgZAXve8g==} + '@tanstack/charts@0.16.1': + resolution: {integrity: sha512-pkJlmC5MyQ0lsVl5UHqvVedUpzXIWMOJfS4l8qXBzZZyzJoLtalCOcs4wYrqZ4x8SWvSgq5nRRT6qtHAqaePmA==} peerDependencies: '@angular/core': '>=19' '@angular/platform-browser': '>=19' @@ -9559,7 +9559,7 @@ snapshots: transitivePeerDependencies: - zod - '@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)': + '@tanstack/charts@0.16.1(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/src/components/npm-stats/NPMStatsChart.tsx b/src/components/npm-stats/NPMStatsChart.tsx index 4eb8bb5b0..eb21ce355 100644 --- a/src/components/npm-stats/NPMStatsChart.tsx +++ b/src/components/npm-stats/NPMStatsChart.tsx @@ -2229,6 +2229,7 @@ function getNpmChartTooltipContent( return { title, rows: points.map((point) => ({ + active: point === context.primaryPoint, color: point.datum.color, label: point.groupLabel, value: formatValue(point), @@ -2275,7 +2276,6 @@ function createNpmStatsChart(input: NpmStatsChartInput) { content: (points, context) => getNpmChartTooltipContent(points, context, input), placement: ['top', 'right', 'left', 'bottom'], - sort: 'color-domain', }, }) } diff --git a/src/utils/builder-environment.ts b/src/utils/builder-environment.ts index d6f47da28..9657ebbb0 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.16.0', - '@tanstack/charts/': 'https://esm.sh/@tanstack/charts@0.16.0/', + '@tanstack/charts': 'https://esm.sh/@tanstack/charts@0.16.1', + '@tanstack/charts/': 'https://esm.sh/@tanstack/charts@0.16.1/', '@tanstack/charts/react': - 'https://esm.sh/@tanstack/charts@0.16.0/react?external=react,react-dom', + 'https://esm.sh/@tanstack/charts@0.16.1/react?external=react,react-dom', '@tanstack/charts/react/canvas': - 'https://esm.sh/@tanstack/charts@0.16.0/react/canvas?external=react,react-dom', + 'https://esm.sh/@tanstack/charts@0.16.1/react/canvas?external=react,react-dom', '@tanstack/charts/react/core': - 'https://esm.sh/@tanstack/charts@0.16.0/react/core?external=react,react-dom', + 'https://esm.sh/@tanstack/charts@0.16.1/react/core?external=react,react-dom', '@tanstack/charts/react/tooltip': - 'https://esm.sh/@tanstack/charts@0.16.0/react/tooltip?external=react,react-dom', + 'https://esm.sh/@tanstack/charts@0.16.1/react/tooltip?external=react,react-dom', '@tanstack/charts/octane': - 'https://esm.sh/@tanstack/charts@0.16.0/octane?external=octane', + 'https://esm.sh/@tanstack/charts@0.16.1/octane?external=octane', '@tanstack/charts/octane/canvas': - 'https://esm.sh/@tanstack/charts@0.16.0/octane/canvas?external=octane', + 'https://esm.sh/@tanstack/charts@0.16.1/octane/canvas?external=octane', '@tanstack/charts/octane/core': - 'https://esm.sh/@tanstack/charts@0.16.0/octane/core?external=octane', + 'https://esm.sh/@tanstack/charts@0.16.1/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/tests/builder-ai-package-resources.test.ts b/tests/builder-ai-package-resources.test.ts index fa263096a..bc97fa567 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.16.0', + packageVersion: '0.16.1', 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.16.0/package.json': JSON.stringify({ + 'https://unpkg.com/@tanstack/charts@0.16.1/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.16.0/dist/scales/band.d.ts': + 'https://unpkg.com/@tanstack/charts@0.16.1/dist/scales/band.d.ts': 'export declare function scaleBand(): BandScale;\nexport type { BandScale };', - 'https://unpkg.com/@tanstack/charts@0.16.0/dist/scales/band.js': + 'https://unpkg.com/@tanstack/charts@0.16.1/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.16.0/?meta': metadata, + 'https://unpkg.com/@tanstack/charts@0.16.1/?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.16.0/skills/design/SKILL.md': skill, + 'https://unpkg.com/@tanstack/charts@0.16.1/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.16.0/docs/large.md': source, + 'https://unpkg.com/@tanstack/charts@0.16.1/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.16.0/docs/shared.md': 'shared', + 'https://unpkg.com/@tanstack/charts@0.16.1/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.16.0/docs/exact.md': 'é', - 'https://unpkg.com/@tanstack/charts@0.16.0/docs/extra.md': 'x', + 'https://unpkg.com/@tanstack/charts@0.16.1/docs/exact.md': 'é', + 'https://unpkg.com/@tanstack/charts@0.16.1/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.16.0/docs/retry.md': 'ready', - 'https://unpkg.com/@tanstack/charts@0.16.0/docs/other.md': 'other', + 'https://unpkg.com/@tanstack/charts@0.16.1/docs/retry.md': 'ready', + 'https://unpkg.com/@tanstack/charts@0.16.1/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 6daa22bc2..37a9d9146 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.16.0', + 'https://esm.sh/@tanstack/charts@0.16.1', ) assert.equal( builderImports['@tanstack/charts/'], - 'https://esm.sh/@tanstack/charts@0.16.0/', + 'https://esm.sh/@tanstack/charts@0.16.1/', ) assert.equal( builderImports['@tanstack/charts/react'], - 'https://esm.sh/@tanstack/charts@0.16.0/react?external=react,react-dom', + 'https://esm.sh/@tanstack/charts@0.16.1/react?external=react,react-dom', ) assert.equal( builderImports['@tanstack/charts/react/canvas'], - 'https://esm.sh/@tanstack/charts@0.16.0/react/canvas?external=react,react-dom', + 'https://esm.sh/@tanstack/charts@0.16.1/react/canvas?external=react,react-dom', ) assert.equal( builderImports['@tanstack/charts/react/core'], - 'https://esm.sh/@tanstack/charts@0.16.0/react/core?external=react,react-dom', + 'https://esm.sh/@tanstack/charts@0.16.1/react/core?external=react,react-dom', ) assert.equal( builderImports['@tanstack/charts/react/tooltip'], - 'https://esm.sh/@tanstack/charts@0.16.0/react/tooltip?external=react,react-dom', + 'https://esm.sh/@tanstack/charts@0.16.1/react/tooltip?external=react,react-dom', ) assert.equal( builderImports['@tanstack/charts/octane'], - 'https://esm.sh/@tanstack/charts@0.16.0/octane?external=octane', + 'https://esm.sh/@tanstack/charts@0.16.1/octane?external=octane', ) assert.equal( builderImports['@tanstack/charts/octane/canvas'], - 'https://esm.sh/@tanstack/charts@0.16.0/octane/canvas?external=octane', + 'https://esm.sh/@tanstack/charts@0.16.1/octane/canvas?external=octane', ) assert.equal( builderImports['@tanstack/charts/octane/core'], - 'https://esm.sh/@tanstack/charts@0.16.0/octane/core?external=octane', + 'https://esm.sh/@tanstack/charts@0.16.1/octane/core?external=octane', ) assert.equal(