improved timeseries tooltip

Author: birnbaum

viewer/src/components/TimeSeries.jsx

@@ -74,7 +74,14 @@ function TrajectoryChart({ signal, runs, chosen }) {
   )
   const { missing, magnitude, spec, error } = prepared
   const option = useMemo(
-    () => trajectoryOptions(prepared.series, alignment, s.zoom),
+    () =>
+      trajectoryOptions(
+        prepared.series,
+        alignment,
+        s.zoom,
+        prepared.spec,
+        prepared.magnitude,
+      ),
     [prepared, alignment, s.zoom],
   )
   return (

viewer/src/trajectory.js

@@ -3,6 +3,7 @@ import { summarizeTrajectories } from './uncertainty.js'
 import { human } from './model.js'
 import { inSelectionOrder } from './state.js'
 import { displayUnit, inDisplayUnit, unitOptions } from './units.js'
+import { columnNumberFormat, formatNumber } from './numbers.js'
 function trajectorySeries(study, current, supported, spec) {
   const configColor = (config) => current.configColors[config.key]
   const color = (run) =>
@@ -15,6 +16,7 @@ function trajectorySeries(study, current, supported, spec) {
     id: run.key,
     name: `${run.name}${run.record.parameters.seed == null ? '' : ` · seed ${run.record.parameters.seed}`}`,
     type: 'line',
+    encode: { x: 0, y: 1, tooltip: [1] },
     step: 'end',
     showSymbol: false,
     connectNulls: false,
@@ -64,7 +66,7 @@ function trajectorySeries(study, current, supported, spec) {
           type: 'custom',
           silent: true,
           z: 1,
-          encode: { x: [0, 3], y: [1, 2] },
+          encode: { x: [0, 3], y: [1, 2], tooltip: [1, 2] },
           data: points
             .slice(0, -1)
             .flatMap((p, i) =>
@@ -99,6 +101,7 @@ function trajectorySeries(study, current, supported, spec) {
         id: `summary-${config.key}`,
         name: `${config.name} · ${human(s.timeStat)}`,
         type: 'line',
+        encode: { x: 0, y: 1, tooltip: [1] },
         step: 'end',
         showSymbol: false,
         connectNulls: false,
@@ -172,10 +175,28 @@ export function prepareTrajectory(
       : trajectorySeries(study, settings, supported, spec)),
   }
 }
-export function trajectoryOptions(series, alignment, zoom) {
+export function trajectoryOptions(series, alignment, zoom, spec, magnitude) {
+  const tooltipUnit = displayUnit(spec.unit, magnitude / spec.factor)
+  const numberFormat = columnNumberFormat(
+    magnitude / spec.factor / tooltipUnit.factor,
+  )
+  const formatValue = (value) => {
+    const formatted = formatNumber(inDisplayUnit(value, tooltipUnit), numberFormat)
+    return ['1', 'unknown'].includes(tooltipUnit.unit)
+      ? formatted
+      : `${formatted} ${tooltipUnit.unit}`
+  }
   return {
     useUTC: true,
-    tooltip: { trigger: 'axis', renderMode: 'richText', confine: true },
+    tooltip: {
+      trigger: 'axis',
+      renderMode: 'richText',
+      confine: true,
+      valueFormatter: (value) =>
+        Array.isArray(value)
+          ? value.map(formatValue).join(' – ')
+          : formatValue(value),
+    },
     axisPointer: { link: [{ xAxisIndex: 'all' }] },
     grid: { top: 20, left: 80, right: 30, bottom: 75 },
     xAxis: {

viewer/tests/browser/react.spec.ts

@@ -135,6 +135,12 @@ for (const [kind, base] of [
     ).toBeCloseTo(20)
     await page.getByRole('button', { name: 'Time series', exact: true }).click()
     await expect(page.locator('.time-chart canvas')).toHaveCount(2)
+    const hover = await page.locator('.time-chart').first().evaluate((el) => {
+      const chart = (window as any).echarts.getInstanceByDom(el)
+      chart.dispatchAction({ type: 'showTip', seriesIndex: 1, dataIndex: 0 })
+      return chart.getOption().tooltip[0].valueFormatter(1234.567891234)
+    })
+    expect(hover).toBe('1,234.57 W')
     await page
       .getByRole('combobox', {
         name: 'Display unit for grid / Power',

viewer/tests/trajectory.test.mjs

@@ -0,0 +1,19 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { trajectoryOptions } from '../src/trajectory.js'
+
+test('trajectory tooltips use automatic units even when the axis unit is overridden', () => {
+  const watts = trajectoryOptions([], 'elapsed', {}, { unit: 'W', factor: 1 }, 2e6)
+  const kilowatts = trajectoryOptions([], 'elapsed', {}, { unit: 'kW', factor: 1000 }, 2e6)
+  assert.equal(watts.tooltip.valueFormatter(1234567.891234), '1.23 MW')
+  assert.equal(kilowatts.tooltip.valueFormatter(1234.567891234), '1.23 MW')
+  assert.equal(watts.tooltip.valueFormatter(-1234567.891234), '-1.23 MW')
+  assert.equal(watts.tooltip.valueFormatter([1234567.89, 1987654.32]), '1.23 MW – 1.99 MW')
+})
+
+test('trajectory tooltips preserve fractions, missing values and small nonzero values', () => {
+  const fraction = trajectoryOptions([], 'elapsed', {}, { unit: '1', factor: 1 }, 1)
+  assert.equal(fraction.tooltip.valueFormatter(0.123456789), '0.12')
+  assert.equal(fraction.tooltip.valueFormatter(null), '—')
+  assert.equal(fraction.tooltip.valueFormatter(0.00001), '<0.01')
+})