Feature/line chart (#1323)

Display table data as a line chart. 
Note that the chart functionality is still under construction. 
This is a first PR that will be followed by a number of more PR regarding charts. 
For this reason chart is disabled by default and is not visible in PxWeb yet.

Author: MikaelNordberg

package-lock.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@tanstack/react-virtual": "^3.13.21",
     "clsx": "^2.1.1",
+    "echarts": "^6.1.0",
     "hast-util-to-jsx-runtime": "^2.3.6",
     "motion": "^12.40.0",
     "vite-plugin-dts": "^4.5.4"

packages/pxweb2-ui/package.json

@@ -5,6 +5,7 @@ export * from './lib/components/Badge/Badge';
 export * from './lib/components/BottomSheet/BottomSheet';
 export * from './lib/components/Breadcrumbs/Breadcrumbs';
 export * from './lib/components/Button/Button';
+export * from './lib/components/Chart';
 export * from './lib/components/Checkbox/Checkbox';
 export * from './lib/components/CheckCircle/CheckCircleIcon';
 export * from './lib/components/CheckCircle/CheckCircleToggle';

packages/pxweb2-ui/src/index.ts

@@ -0,0 +1,163 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it, beforeEach, vi } from 'vitest';
+
+import LineChart from './LineChart';
+import { mapPxTableToChartDataset } from '../Utils/chartDataMapper';
+import { useEChartOption } from '../Utils/useEChartOption';
+import {
+  buildDatasetOption,
+  buildSeriesOption,
+} from '../Utils/chartOptionBuilder';
+import type { EChartsDataset } from '../Utils/chartTypes';
+import type { PxTable } from '../../../shared-types/pxTable';
+
+vi.mock('../Utils/chartDataMapper', () => ({
+  mapPxTableToChartDataset: vi.fn(),
+}));
+
+vi.mock('../Utils/useEChartOption', () => ({
+  useEChartOption: vi.fn(),
+}));
+
+vi.mock('../Utils/chartOptionBuilder', async () => {
+  const actual = await vi.importActual<
+    typeof import('../Utils/chartOptionBuilder')
+  >('../Utils/chartOptionBuilder');
+
+  return {
+    ...actual,
+    buildDatasetOption: vi.fn(),
+    buildSeriesOption: vi.fn(),
+  };
+});
+
+const mockDataset: EChartsDataset = {
+  title: 'Population by year',
+  origin: 'Statistics Demo',
+  unit: 'persons',
+  dimensions: ['name', 'men', 'women'],
+  source: [{ name: '2024', men: 10, women: 12 }],
+  series: [
+    { key: 'men', name: 'Men' },
+    { key: 'women', name: 'Women' },
+    { key: 'total', name: 'Total' },
+  ],
+};
+
+function getTooltipFormatter(option: { tooltip?: unknown }) {
+  const tooltip = Array.isArray(option.tooltip)
+    ? option.tooltip[0]
+    : option.tooltip;
+
+  if (!tooltip || typeof tooltip !== 'object' || !('formatter' in tooltip)) {
+    return undefined;
+  }
+
+  const formatter = tooltip.formatter;
+  return typeof formatter === 'function'
+    ? (formatter as (params: unknown) => string)
+    : undefined;
+}
+
+describe('LineChart', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    vi.mocked(mapPxTableToChartDataset).mockReturnValue(mockDataset);
+    vi.mocked(buildDatasetOption).mockReturnValue({
+      dataset: {
+        dimensions: mockDataset.dimensions,
+        source: mockDataset.source,
+      },
+      legend: {},
+      tooltip: {},
+    });
+    vi.mocked(buildSeriesOption).mockReturnValue([
+      { name: 'Men', type: 'line', symbol: 'circle', symbolSize: 8 },
+      { name: 'Women', type: 'line', symbol: 'rect', symbolSize: 8 },
+      { name: 'Total', type: 'line', symbol: 'triangle', symbolSize: 8 },
+    ]);
+    vi.mocked(useEChartOption).mockReturnValue({
+      divRef: { current: null },
+      chartRef: { current: null },
+    });
+  });
+
+  it('builds chart option with mapped dataset and provided colors', () => {
+    const colors = ['#111111', '#222222'];
+
+    render(<LineChart pxtable={{} as PxTable} colors={colors} />);
+
+    expect(mapPxTableToChartDataset).toHaveBeenCalledWith({});
+    expect(buildDatasetOption).toHaveBeenCalledWith(mockDataset);
+    expect(buildSeriesOption).toHaveBeenCalledWith(mockDataset, 'line', colors);
+
+    const option = vi.mocked(useEChartOption).mock.calls[0][0];
+
+    expect(option.legend).toEqual({
+      height: 40 * mockDataset.series.length,
+    });
+    expect(option.yAxis).toMatchObject({
+      name: 'persons',
+    });
+    expect(option.grid).toEqual({
+      top: 0,
+      bottom: 200,
+      left: '0',
+      right: '0',
+      containLabel: false,
+    });
+  });
+
+  it('renders chart container with height based on number of series', () => {
+    const { container } = render(<LineChart pxtable={{} as PxTable} />);
+
+    const chartDiv = Array.from(container.querySelectorAll('div')).find(
+      (element) => element.style.height,
+    );
+
+    expect(chartDiv).toBeTruthy();
+    expect(chartDiv?.style.height).toBe('630px');
+  });
+
+  it('returns empty tooltip text for empty params', () => {
+    render(<LineChart pxtable={{} as PxTable} />);
+
+    const option = vi.mocked(useEChartOption).mock.calls[0][0];
+    const formatter = getTooltipFormatter(option);
+
+    expect(formatter).toBeTypeOf('function');
+    expect(formatter?.([])).toBe('');
+  });
+
+  it('formats tooltip rows with symbol svg, labels, values and fallback color', () => {
+    render(<LineChart pxtable={{} as PxTable} />);
+
+    const option = vi.mocked(useEChartOption).mock.calls[0][0];
+    const formatter = getTooltipFormatter(option);
+
+    const html = formatter?.([
+      {
+        axisValueLabel: '2024',
+        seriesIndex: 0,
+        seriesName: 'Men',
+        data: { men: 10, women: 12 },
+      },
+      {
+        axisValueLabel: '2024',
+        seriesIndex: 1,
+        seriesName: 'Women',
+        color: '#ff0000',
+        data: { men: 10, women: 12 },
+      },
+    ]);
+
+    expect(html).toContain('<div><div>2024</div>');
+    expect(html).toContain('Men: 10');
+    expect(html).toContain('Women: 12');
+    expect(html).toContain('fill="#666666"');
+    expect(html).toContain('fill="#ff0000"');
+    expect(html).toContain('<circle');
+    expect(html).toContain('<rect');
+  });
+});

packages/pxweb2-ui/src/lib/components/Chart/LineChart/LineChart.spec.tsx

@@ -0,0 +1,101 @@
+import { useMemo } from 'react';
+import type * as echarts from 'echarts';
+
+import {
+  buildDatasetOption,
+  buildSeriesOption,
+  LINE_SERIES_SYMBOLS,
+} from '../Utils/chartOptionBuilder';
+import { useEChartOption } from '../Utils/useEChartOption';
+import type { PxTable } from '../../../shared-types/pxTable';
+import { mapPxTableToChartDataset } from '../Utils/chartDataMapper';
+
+interface LineChartProps {
+  readonly pxtable: PxTable;
+  readonly colors?: string[];
+}
+
+type TooltipParam = {
+  axisValueLabel?: string;
+  seriesIndex: number;
+  seriesName: string;
+  data?: Record<string, string | number>;
+  color?: string;
+};
+
+function getTooltipSymbolSvg(symbol: string, color: string): string {
+  switch (symbol) {
+    case 'rect':
+      return `<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><rect x="1" y="1" width="8" height="8" fill="${color}" /></svg>`;
+    case 'triangle':
+      return `<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><polygon points="5,1 9,9 1,9" fill="${color}" /></svg>`;
+    case 'diamond':
+      return `<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><polygon points="5,1 9,5 5,9 1,5" fill="${color}" /></svg>`;
+    case 'pin':
+      return `<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M5 1a2.2 2.2 0 0 0-2.2 2.2c0 1.8 2.2 5.6 2.2 5.6s2.2-3.8 2.2-5.6A2.2 2.2 0 0 0 5 1z" fill="${color}" /></svg>`;
+    case 'arrow':
+      return `<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M1 5h5V3l3 2-3 2V5H1z" fill="${color}" /></svg>`;
+    default:
+      return `<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="4" fill="${color}" /></svg>`;
+  }
+}
+
+export function LineChart({ pxtable, colors }: LineChartProps) {
+  const dataset = useMemo(() => mapPxTableToChartDataset(pxtable), [pxtable]);
+  const option = useMemo<echarts.EChartsOption>(
+    () => ({
+      ...buildDatasetOption(dataset),
+      grid: { top: 0, bottom: 200, left: '0', right: '0', containLabel: false },
+      xAxis: { type: 'category' as const, axisLabel: { rotate: 45 } },
+      yAxis: {
+        name: dataset.unit,
+        min: (value) => value.min,
+      },
+      legend: {
+        height: 40 * dataset.series.length, // increase legend height based on number of series to prevent overlap with x-axis labels
+      },
+      series: buildSeriesOption(dataset, 'line', colors),
+      tooltip: {
+        trigger: 'axis',
+        formatter: (params: unknown) => {
+          const axisParams = (Array.isArray(params) ? params : [params]) as
+            | TooltipParam[]
+            | undefined;
+
+          if (!axisParams || axisParams.length === 0) {
+            return '';
+          }
+
+          const title = axisParams[0].axisValueLabel;
+          const rows = axisParams
+            .map((param) => {
+              const seriesMeta = dataset.series[param.seriesIndex];
+              const row = param.data as Record<string, string | number>;
+              const value = row?.[seriesMeta.key];
+              const symbol =
+                LINE_SERIES_SYMBOLS[
+                  param.seriesIndex % LINE_SERIES_SYMBOLS.length
+                ];
+              const color = param.color ?? '#666666';
+
+              return `<div style="display:flex;align-items:center;gap:6px"><span style="display:inline-flex;align-items:center">${getTooltipSymbolSvg(symbol, color)}</span><span>${param.seriesName}: ${value ?? ''}</span></div>`;
+            })
+            .join('');
+
+          return `<div><div>${title}</div>${rows}</div>`;
+        },
+      },
+    }),
+    [dataset, colors],
+  );
+
+  const { divRef } = useEChartOption(option);
+  const height = 600 + dataset.series.length * 10; // increase chart height based on number of series to prevent legend overlap
+
+  return (
+    <div>
+      <div ref={divRef} style={{ width: '100%', height: `${height}px` }}></div>
+    </div>
+  );
+}
+export default LineChart;