Finalize Charts 0.0.1 site contracts

package.json

@@ -62,12 +62,12 @@
     "@tanstack/ai-anthropic": "^0.10.1",
     "@tanstack/ai-client": "^0.11.3",
     "@tanstack/ai-openai": "^0.9.5",
-    "@tanstack/charts": "0.0.0",
+    "@tanstack/charts": "0.0.1",
     "@tanstack/create": "^0.69.0",
     "@tanstack/highlight": "^0.0.9",
     "@tanstack/markdown": "^0.0.11",
     "@tanstack/pacer": "^0.21.1",
-    "@tanstack/react-charts": "0.0.0",
+    "@tanstack/react-charts": "0.0.1",
     "@tanstack/react-hotkeys": "^0.10.0",
     "@tanstack/react-pacer": "^0.22.1",
     "@tanstack/react-query": "^5.100.11",

src/components/charts/TimeSeriesChart.tsx

@@ -28,13 +28,13 @@ type TimeSeriesChartInput = {
   yLabel: string
 }
 
-const timeSeriesChart = defineChart<TimeSeriesChartInput>()(({ input }) => {
+function createTimeSeriesChart(input: TimeSeriesChartInput) {
   const firstDate = input.data[0]?.date ?? new Date(0)
   const lastDate = input.data.at(-1)?.date ?? new Date(86_400_000)
   const maxValue = d3.max(input.data, (datum) => datum.value) ?? 1
   const curve = d3Curve(d3.curveMonotoneX)
 
-  return {
+  return defineChart({
     marks:
       input.variant === 'bar'
         ? [
@@ -89,8 +89,10 @@ const timeSeriesChart = defineChart<TimeSeriesChartInput>()(({ input }) => {
     },
     margin: { top: 20, right: 20, bottom: 40, left: 60 },
     theme: { background: 'transparent' },
-  }
-})
+    animate: true,
+    tooltip: { format: formatTooltip },
+  })
+}
 
 type TimeSeriesChartProps = {
   data: Array<{ date: string; count: number }>
@@ -121,6 +123,16 @@ export function TimeSeriesChart({
       }
     })
   }, [binType, data, variant])
+  const definition = React.useMemo(
+    () =>
+      createTimeSeriesChart({
+        color,
+        data: chartData,
+        variant,
+        yLabel: yLabel ?? (variant === 'cumulative' ? 'Total' : 'Count'),
+      }),
+    [chartData, color, variant, yLabel],
+  )
 
   if (chartData.length === 0) {
     return (
@@ -132,18 +144,10 @@ export function TimeSeriesChart({
 
   return (
     <Chart
-      definition={timeSeriesChart}
-      input={{
-        color,
-        data: chartData,
-        variant,
-        yLabel: yLabel ?? (variant === 'cumulative' ? 'Total' : 'Count'),
-      }}
+      definition={definition}
       height={height}
       initialWidth={640}
       ariaLabel={`${variant === 'cumulative' ? 'Cumulative' : variant} count by date`}
-      animate
-      tooltip={{ format: formatTooltip }}
     />
   )
 }

src/components/intent/SkillDependencyGraph.tsx

@@ -49,8 +49,6 @@ interface PositionedLink {
   y2: number
 }
 
-type GraphDatum = PositionedNode | PositionedLink
-
 type DependencyGraphInput = {
   height: number
   links: Array<PositionedLink>
@@ -68,60 +66,66 @@ const typeColors = {
   default: '#9ca3af',
 } as const
 
-const dependencyGraph = defineChart<DependencyGraphInput>()(({ input }) => ({
-  marks: [
-    arrow(input.links, {
-      id: 'skill-dependencies',
-      x1: 'x1',
-      y1: 'y1',
-      x2: 'x2',
-      y2: 'y2',
-      key: 'id',
-      stroke: 'currentColor',
-      strokeOpacity: 0.24,
-      strokeWidth: 1.5,
-      headLength: 7,
-    }),
-    dot(input.nodes, {
-      id: 'skills',
-      x: 'x',
-      y: 'y',
-      z: 'type',
-      key: 'id',
-      r: 6,
-      stroke: 'currentColor',
-      strokeOpacity: 0.3,
-      strokeWidth: 1.5,
-    }),
-    text(input.nodes, {
-      id: 'skill-labels',
-      x: 'x',
-      y: 'y',
-      text: 'id',
-      key: 'id',
-      fill: 'currentColor',
-      fontSize: 10,
-      fontWeight: 500,
-      dy: 18,
-    }),
-  ],
-  x: {
-    scale: scaleLinear().domain([0, input.width]),
-    guide: false,
-  },
-  y: {
-    scale: scaleLinear().domain([input.height, 0]),
-    guide: false,
-  },
-  color: {
-    scale: scaleOrdinal<string, string>()
-      .domain(Object.keys(typeColors))
-      .range(Object.values(typeColors)),
-  },
-  guides: false,
-  margin: 0,
-  theme: { background: 'transparent' },
-}))
+function createDependencyGraph(input: DependencyGraphInput) {
+  return defineChart({
+    marks: [
+      arrow(input.links, {
+        id: 'skill-dependencies',
+        x1: 'x1',
+        y1: 'y1',
+        x2: 'x2',
+        y2: 'y2',
+        key: 'id',
+        stroke: 'currentColor',
+        strokeOpacity: 0.24,
+        strokeWidth: 1.5,
+        headLength: 7,
+      }),
+      dot(input.nodes, {
+        id: 'skills',
+        x: 'x',
+        y: 'y',
+        z: 'type',
+        key: 'id',
+        r: 6,
+        stroke: 'currentColor',
+        strokeOpacity: 0.3,
+        strokeWidth: 1.5,
+      }),
+      text(input.nodes, {
+        id: 'skill-labels',
+        x: 'x',
+        y: 'y',
+        text: 'id',
+        key: 'id',
+        fill: 'currentColor',
+        fontSize: 10,
+        fontWeight: 500,
+        dy: 18,
+      }),
+    ],
+    x: {
+      scale: scaleLinear().domain([0, input.width]),
+      guide: false,
+    },
+    y: {
+      scale: scaleLinear().domain([input.height, 0]),
+      guide: false,
+    },
+    color: {
+      scale: scaleOrdinal<string, string>()
+        .domain(Object.keys(typeColors))
+        .range(Object.values(typeColors)),
+    },
+    guides: false,
+    margin: 0,
+    theme: { background: 'transparent' },
+    tooltip: {
+      format: (point) =>
+        point.datum.kind === 'node' ? point.datum.id : 'Dependency',
+    },
+  })
+}
 
 export function SkillDependencyGraph({
   skills,
@@ -240,6 +244,11 @@ export function SkillDependencyGraph({
     }
   }, [dimensions, graph])
 
+  const dependencyGraph = React.useMemo(
+    () => createDependencyGraph({ ...layout, ...dimensions }),
+    [dimensions, layout],
+  )
+
   if (graph.links.length === 0) return null
 
   return (
@@ -250,22 +259,17 @@ export function SkillDependencyGraph({
       {dimensions.width > 0 && layout.nodes.length > 0 ? (
         <Chart
           definition={dependencyGraph}
-          input={{ ...layout, ...dimensions }}
           width={dimensions.width}
           height={dimensions.height}
           ariaLabel={`Dependencies between skills in ${packageName}`}
           onSelect={(point) => {
-            const datum: GraphDatum | undefined = point?.datum
+            const datum = point?.datum
             if (!datum || datum.kind !== 'node') return
             void navigate({
               to: '/intent/registry/$packageName/$skillName',
               params: { packageName, skillName: datum.id },
             })
           }}
-          tooltip={{
-            format: (point) =>
-              point.datum.kind === 'node' ? point.datum.id : 'Dependency',
-          }}
         />
       ) : null}