Merge branch 'bugfix/chart-tooltip-unit-per-value' into q/1.0

Author: bert-e

src/lib/components/charts/common/chartUtils.test.ts

@@ -6,6 +6,7 @@ import {
   formatXAxisDate,
   normalizeChartDataWithUnits,
   getTooltipDateFormat,
+  formatTooltipValueWithUnit,
 } from './chartUtils';
 import { NAN_STRING } from '../../constants';
 import { UnitRange } from '../types';
@@ -414,4 +415,79 @@ describe('normalizeChartDataWithUnits', () => {
       expect(result.rechartsData).toEqual(data);
     });
   });
+
+  describe('valueBase', () => {
+    it('should expose the value base used for normalization', () => {
+      const data = [{ category: 'A', value: 2000 }];
+      const unitRange: UnitRange = [
+        { threshold: 1, label: 'op/s' },
+        { threshold: 1000, label: 'kop/s' },
+      ];
+
+      const result = normalizeChartDataWithUnits(
+        data,
+        2000,
+        unitRange,
+        'category',
+      );
+
+      expect(result.unitLabel).toBe('kop/s');
+      expect(result.valueBase).toBe(1000);
+    });
+
+    it('should default valueBase to 1 when no unit range is provided', () => {
+      const result = normalizeChartDataWithUnits(
+        [{ category: 'A', value: 100 }],
+        100,
+        undefined,
+        'category',
+      );
+
+      expect(result.valueBase).toBe(1);
+    });
+  });
+});
+
+describe('formatTooltipValueWithUnit', () => {
+  const unitRange: UnitRange = [
+    { threshold: 1, label: 'op/s' },
+    { threshold: 1000, label: 'kop/s' },
+    { threshold: 1000000, label: 'Mop/s' },
+  ];
+
+  it('re-derives a smaller unit for values that are small relative to the axis unit', () => {
+    // Axis is in kop/s (valueBase 1000). A point of 5 op/s is stored as 0.005.
+    // Without re-scaling it would read "0.01 kop/s"; instead it should read "5 op/s".
+    expect(formatTooltipValueWithUnit(0.005, 1000, unitRange, 'kop/s')).toBe(
+      '5.00 op/s',
+    );
+  });
+
+  it('keeps the axis unit for values that match its magnitude', () => {
+    // 2 (stored) * 1000 = 2000 op/s → 2 kop/s
+    expect(formatTooltipValueWithUnit(2, 1000, unitRange, 'kop/s')).toBe(
+      '2.00 kop/s',
+    );
+  });
+
+  it('re-derives a larger unit for values that exceed the axis unit', () => {
+    // 5000 (stored) * 1000 = 5,000,000 op/s → 5 Mop/s
+    expect(formatTooltipValueWithUnit(5000, 1000, unitRange, 'kop/s')).toBe(
+      '5.00 Mop/s',
+    );
+  });
+
+  it('handles negative values (symmetrical charts) using the magnitude', () => {
+    expect(formatTooltipValueWithUnit(-0.005, 1000, unitRange, 'kop/s')).toBe(
+      '-5.00 op/s',
+    );
+  });
+
+  it('falls back to the provided unit label when no unit range is given', () => {
+    expect(formatTooltipValueWithUnit(42.5, 1, undefined, '%')).toBe('42.50 %');
+  });
+
+  it('returns "-" for non-finite values', () => {
+    expect(formatTooltipValueWithUnit(NaN, 1000, unitRange, 'kop/s')).toBe('-');
+  });
 });

src/lib/components/charts/common/chartUtils.ts

@@ -182,6 +182,7 @@ export const normalizeChartDataWithUnits = <T extends Record<string, any>>(
   topValue: number;
   rechartsData: T[];
   topDomain: number;
+  valueBase: number;
 } => {
   // If no unit range provided, just calculate top value without unit conversion
   if (!unitRange || unitRange.length === 0) {
@@ -191,6 +192,7 @@ export const normalizeChartDataWithUnits = <T extends Record<string, any>>(
       topValue,
       rechartsData: data,
       topDomain: maxValue * 1.1,
+      valueBase: 1,
     };
   }
 
@@ -212,7 +214,50 @@ export const normalizeChartDataWithUnits = <T extends Record<string, any>>(
     return normalizedDataPoint as T;
   });
 
-  return { unitLabel, topValue, rechartsData, topDomain };
+  return { unitLabel, topValue, rechartsData, topDomain, valueBase };
+};
+
+/**
+ * Formats a single value for tooltip display, re-deriving the unit from the
+ * value's own magnitude when a unitRange is provided.
+ *
+ * Chart data is normalized once against the dataset maximum so the Y-axis can
+ * use a single unit. A value that is small relative to that maximum would
+ * otherwise render with many decimals under the axis unit (e.g. "0.005 kop/s").
+ * Re-applying the unitRange per value keeps the tooltip readable (e.g. "5 op/s")
+ * independently of the axis unit.
+ *
+ * @param value - The normalized value as stored in the Recharts dataset
+ * @param valueBase - The factor the dataset was divided by during normalization
+ * @param unitRange - Unit range used for the chart; when empty the value is shown as-is
+ * @param fallbackUnitLabel - Unit label used when no unitRange is provided (e.g. "%")
+ */
+export const formatTooltipValueWithUnit = (
+  value: number,
+  valueBase: number,
+  unitRange: UnitRange | undefined,
+  fallbackUnitLabel?: string,
+): string => {
+  if (!Number.isFinite(value)) return '-';
+
+  if (!unitRange || unitRange.length === 0) {
+    const formatted = formatISONumber(value, {
+      fixedDecimals: true,
+      compact: true,
+    });
+    return `${formatted}${fallbackUnitLabel ? ` ${fallbackUnitLabel}` : ''}`;
+  }
+
+  const originalValue = value * valueBase;
+  const { valueBase: tooltipValueBase, unitLabel } = getUnitLabel(
+    unitRange,
+    Math.abs(originalValue),
+  );
+  const formatted = formatISONumber(originalValue / tooltipValueBase, {
+    fixedDecimals: true,
+    compact: true,
+  });
+  return `${formatted}${unitLabel ? ` ${unitLabel}` : ''}`;
 };
 
 /**

src/lib/components/charts/index.ts

@@ -47,6 +47,7 @@ export {
   formatXAxisDate,
   getTooltipDateFormat,
   normalizeChartDataWithUnits,
+  formatTooltipValueWithUnit,
 } from './common/chartUtils';
 
 // Context Providers (for backward compatibility)

src/lib/components/charts/linetimeseries/LineTimeSerieChart.tsx

@@ -80,6 +80,7 @@ export function LineTimeSerieChart({
     topDomain,
     topValue,
     unitLabel,
+    valueBase,
     xAxisTicks,
     linesToRender,
     belowSeriesLabels,
@@ -192,6 +193,8 @@ export function LineTimeSerieChart({
             content={(props: TooltipContentProps<number, string>) => (
               <LineTimeSerieChartTooltip
                 unitLabel={unitLabel}
+                valueBase={valueBase}
+                unitRange={unitRange}
                 duration={duration}
                 renderTooltip={renderTooltip}
                 isSymmetrical={yAxisType === 'symmetrical'}

src/lib/components/charts/linetimeseries/LineTimeSerieChart.types.ts

@@ -119,6 +119,11 @@ export const CHART_PRESETS: Record<'default' | 'modern', DisplayOptions> = {
 export type LineTimeSerieChartTooltipProps = {
   tooltipProps: TooltipContentProps<number, string>;
   unitLabel?: string;
+  valueBase?: number;
+  unitRange?: {
+    threshold: number;
+    label: string;
+  }[];
   duration: number;
   renderTooltip?: (
     tooltipProps: TooltipContentProps<number, string>,

src/lib/components/charts/linetimeseries/LineTimeSerieChartTooltip.tsx

@@ -10,26 +10,7 @@ import {
 } from '../common/ChartTooltip';
 import { LineTimeSerieChartTooltipProps } from './LineTimeSerieChart.types';
 import { getCurrentlyHoveredChartId } from './useChartHover';
-import { formatISONumber } from '../../../utils';
-
-/**
- * Formats a numeric value for tooltip display
- * - Non-finite values (NaN, null, undefined) → "-"
- * - Zero → "0" with unit
- * - Large values (>= 1000) → compact notation (1k, 1M)
- * - Normal values (1-999) → up to 2 decimal places
- * - Small values (0.01-0.99) → 2 decimal places
- * - Very small values (< 0.01) → scientific notation (e.g., 4.7e-5)
- */
-export const formatTooltipValue = (
-  value: number,
-  unitLabel?: string,
-): string => {
-  if (!Number.isFinite(value)) return '-';
-
-  const formatted = formatISONumber(value, { fixedDecimals: true, compact: true });
-  return `${formatted}${unitLabel ? ` ${unitLabel}` : ''}`;
-};
+import { formatTooltipValueWithUnit } from '../common/chartUtils';
 
 /**
  * Custom tooltip component for LineTimeSerieChart
@@ -39,6 +20,8 @@ export const LineTimeSerieChartTooltip: React.FC<
   LineTimeSerieChartTooltipProps
 > = ({
   unitLabel,
+  valueBase = 1,
+  unitRange,
   duration,
   tooltipProps,
   renderTooltip,
@@ -104,7 +87,12 @@ export const LineTimeSerieChartTooltip: React.FC<
                 />
               );
 
-              const formattedValue = formatTooltipValue(entry.value, unitLabel);
+              const formattedValue = formatTooltipValueWithUnit(
+                entry.value,
+                valueBase,
+                unitRange,
+                unitLabel,
+              );
 
               return (
                 <React.Fragment key={index}>

src/lib/components/charts/linetimeseries/useChartData.ts

@@ -32,6 +32,8 @@ type ChartDataOutput = {
   topValue: number;
   /** Unit label (e.g., "KiB/s", "%") */
   unitLabel: string | undefined;
+  /** Factor the dataset was divided by during normalization (for tooltip re-scaling) */
+  valueBase: number;
   /** X-axis tick positions */
   xAxisTicks: number[];
   /** Line configurations ready for rendering */
@@ -207,7 +209,7 @@ export function useChartData({
    * - Applies unit range thresholds (e.g., B/s → KiB/s → MiB/s)
    * - Calculates Y-axis domain
    */
-  const { topValue, unitLabel, rechartsData, topDomain } = useMemo(() => {
+  const { topValue, unitLabel, rechartsData, topDomain, valueBase } = useMemo(() => {
     const values = chartData.flatMap((dataPoint) =>
       Object.entries(dataPoint)
         .filter(([key]) => key !== 'timestamp')
@@ -231,6 +233,7 @@ export function useChartData({
         unitLabel: yAxisType === 'percentage' ? '%' : undefined,
         rechartsData: chartData,
         topDomain: 1,
+        valueBase: 1,
       };
     }
 
@@ -258,6 +261,7 @@ export function useChartData({
       unitLabel: result.unitLabel ?? (yAxisType === 'percentage' ? '%' : undefined),
       rechartsData: result.rechartsData,
       topDomain: finalTopDomain,
+      valueBase: result.valueBase,
     };
   }, [chartData, yAxisType, unitRange]);
 
@@ -317,6 +321,7 @@ export function useChartData({
     topDomain,
     topValue,
     unitLabel,
+    valueBase,
     xAxisTicks,
     linesToRender,
     belowSeriesLabels,