fix(charts): resolve threshold axis by index before id, matching ECharts

Author: TheodoreSpeaks

apps/sim/lib/charts/annotations.test.ts

@@ -166,6 +166,29 @@ describe('chart annotations', () => {
     expect(labels.markLine).toMatchObject({ data: [{ xAxis: 5, label: { position: 'start' } }] })
   })
 
+  it('prefers the axis index over the axis id, as ECharts does', () => {
+    const option = applyChartAnnotations(
+      {
+        xAxis: { type: 'time' },
+        yAxis: [
+          { id: 'stage', type: 'category' },
+          { id: 7, type: 'value' },
+        ],
+        series: [{ type: 'line', yAxisIndex: 1, yAxisId: 'stage' }],
+      },
+      { thresholds: [{ value: 5 }] },
+      palette
+    )
+    expect((option.series as Series[])[0].markLine).toMatchObject({ data: [{ yAxis: 5 }] })
+    expect(() =>
+      applyChartAnnotations(
+        { ...option, series: [{ type: 'line', yAxisId: '7' }] },
+        { thresholds: [{ value: 5 }] },
+        palette
+      )
+    ).not.toThrow()
+  })
+
   it('rejects a first series that references an axis the chart does not define', () => {
     for (const reference of [{ yAxisIndex: 1 }, { yAxisIndex: -1 }, { yAxisIndex: 0.5 }])
       expect(() =>

apps/sim/lib/charts/annotations.ts

@@ -31,16 +31,19 @@ function firstSeries(option: Record<string, unknown>): Record<string, unknown> {
   return toRecord(Array.isArray(option.series) ? option.series[0] : option.series)
 }
 
-/** The axis the first series is plotted on, resolved through its `*AxisId` or `*AxisIndex`. */
+/**
+ * The axis the first series is plotted on. Like ECharts, `*AxisIndex` wins over `*AxisId`, and ids
+ * match across string and number.
+ */
 function seriesAxis(
   option: Record<string, unknown>,
   key: 'xAxis' | 'yAxis'
 ): Record<string, unknown> {
   const axes = Array.isArray(option[key]) ? (option[key] as unknown[]) : [option[key]]
   const series = firstSeries(option)
   const id = series[`${key}Id`]
-  if (id !== undefined) {
-    const axis = axes.find((candidate) => toRecord(candidate).id === id)
+  if (series[`${key}Index`] === undefined && id !== undefined) {
+    const axis = axes.find((candidate) => String(toRecord(candidate).id) === String(id))
     if (axis === undefined) throw new Error(`The first series references a missing ${key} "${id}"`)
     return toRecord(axis)
   }