fix(charts): preserve stable series identities

Author: waleedlatif1

packages/emcn/src/components/charts/bar-chart.tsx

@@ -169,7 +169,7 @@ function BarChartComponent({
       <div className='relative' style={{ width, height }}>
         <ChartDataTable
           label={label || 'Values by date'}
-          series={[{ label: unit || 'Value', data }]}
+          series={[{ id: 'base', label: unit || 'Value', data }]}
           timeZone={timeZone}
         />
         <svg

packages/emcn/src/components/charts/chart-accessibility.test.tsx

@@ -10,6 +10,7 @@ describe('Chart accessibility', () => {
         label='Cost'
         series={[
           {
+            id: 'credits',
             label: 'Credits',
             data: [
               { timestamp: '2026-01-01T00:00:00Z', value: 0.00000123456789 },

packages/emcn/src/components/charts/chart-data-table.tsx

@@ -2,7 +2,7 @@ import { formatChartTimestamp } from '@sim/emcn'
 
 interface ChartDataTableProps {
   label: string
-  series: { label: string; data: { timestamp: string; value: number }[] }[]
+  series: { id: string; label: string; data: { timestamp: string; value: number }[] }[]
   timeZone?: string
 }
 
@@ -21,7 +21,7 @@ export function ChartDataTable({ label, series, timeZone }: ChartDataTableProps)
         <tr>
           <th scope='col'>Date</th>
           {series.map((item) => (
-            <th key={item.label} scope='col'>
+            <th key={item.id} scope='col'>
               {item.label}
             </th>
           ))}
@@ -32,7 +32,7 @@ export function ChartDataTable({ label, series, timeZone }: ChartDataTableProps)
           <tr key={timestamp}>
             <th scope='row'>{formatChartTimestamp(timestamp, timeZone)}</th>
             {series.map((item, index) => (
-              <td key={item.label}>
+              <td key={item.id}>
                 {values[index]
                   .get(timestamp)
                   ?.toLocaleString(undefined, { maximumSignificantDigits: 21 }) ?? '—'}

packages/emcn/src/components/charts/chart-layout.test.tsx

@@ -241,6 +241,29 @@ describe('RadarChart rendered geometry', () => {
 })
 
 describe('Dashboard chart states', () => {
+  it('preserves distinct cells when equally named series change order', () => {
+    const data = dailySeries(3, 10)
+    const first = { id: 'base', label: 'Runs', color: 'red', data: dailySeries(3, 20) }
+    const second = { id: 'second', label: 'Runs', color: 'green', data: dailySeries(3, 30) }
+    mountAtWidth(400, <LineChart label='Runs' color='blue' data={data} series={[first, second]} />)
+    const headers = [...container.querySelectorAll('thead th')]
+    const cells = [...container.querySelectorAll('tbody tr:first-child td')]
+    expect(cells.map((cell) => cell.textContent)).toEqual(['10', '20', '30'])
+    act(() => container.querySelector('button')?.click())
+    act(() =>
+      root.render(<LineChart label='Runs' color='blue' data={data} series={[second, first]} />)
+    )
+    const updatedHeaders = [...container.querySelectorAll('thead th')]
+    const updatedCells = [...container.querySelectorAll('tbody tr:first-child td')]
+    expect(updatedHeaders[2]).toBe(headers[3])
+    expect(updatedHeaders[3]).toBe(headers[2])
+    expect(updatedCells[1]).toBe(cells[2])
+    expect(updatedCells[2]).toBe(cells[1])
+    expect(updatedCells.map((cell) => cell.textContent)).toEqual(['10', '30', '20'])
+    expect(container.querySelector('path[stroke="red"]')?.getAttribute('opacity')).toBe('1')
+    expect(container.querySelector('path[stroke="green"]')).toBeNull()
+  })
+
   it('previews, pins, and clears a distribution without changing its proportions', () => {
     const segments = [
       { label: 'Completed', value: 90, color: 'blue' },

packages/emcn/src/components/charts/line-chart.tsx

@@ -33,7 +33,7 @@ export interface LineChartPoint {
 }
 
 export interface LineChartMultiSeries {
-  id?: string
+  id: string
   label: string
   color: string
   data: LineChartPoint[]
@@ -94,11 +94,10 @@ function LineChartComponent({
   const hasExternalWrapper = !label || label === ''
 
   const allSeries = useMemo(
-    () =>
-      (Array.isArray(series) && series.length > 0
-        ? [{ id: 'base', label, color, data }, ...series]
-        : [{ id: 'base', label, color, data }]
-      ).map((s, idx) => ({ ...s, id: s.id || s.label || String(idx) })),
+    () => [
+      { id: 'base', sourceId: 'base', label, color, data },
+      ...(series ?? []).map((item) => ({ ...item, id: `series:${item.id}`, sourceId: item.id })),
+    ],
     [series, label, color, data]
   )
 
@@ -292,6 +291,7 @@ function LineChartComponent({
         <ChartDataTable
           label={label || 'Values by date'}
           series={allSeries.map((item) => ({
+            id: item.id,
             label: item.label || unit || 'Value',
             data: item.data,
           }))}
@@ -378,7 +378,7 @@ function LineChartComponent({
             const baseOpacity = isActive ? 1 : 0.12
             const strokeOpacity = hoverSeriesId ? (isHovered ? 1 : 0.2) : baseOpacity
             const sw = (() => {
-              switch ((s.id || '').toLowerCase()) {
+              switch (s.sourceId.toLowerCase()) {
                 case 'p50':
                   return isDark ? 1.5 : 1.7
                 case 'p90':
@@ -539,7 +539,7 @@ function LineChartComponent({
               const seriesIndex = allSeries.findIndex((x) => x.id === s.id)
               const v = allSeries[seriesIndex]?.data?.[hoverIndex]?.value
               const valueStr = fmt(v)
-              const labelStr = s.label || String(s.id || '')
+              const labelStr = s.label || s.sourceId
               const len = `${labelStr} ${valueStr}`.length
               return Math.max(m, len)
             }, 0)
@@ -557,7 +557,7 @@ function LineChartComponent({
                 {toDisplay.map((s) => {
                   const seriesIndex = allSeries.findIndex((x) => x.id === s.id)
                   const val = allSeries[seriesIndex]?.data?.[hoverIndex]?.value
-                  const seriesLabel = s.label || s.id
+                  const seriesLabel = s.label || s.sourceId
                   const showLabel =
                     seriesLabel && seriesLabel !== 'base' && seriesLabel.trim() !== ''
                   return (