@wick-charts/react 0.2.2 → 0.2.3

package/src/LineSeries.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useLayoutEffect, useRef } from 'react';
+
+import { type LineSeriesOptions, type TimePoint, normalizeTime } from '@wick-charts/core';
+
+import { useChartInstance } from './context';
+
+export interface LineSeriesProps {
+  /** Array of datasets — one per layer. A single line uses `[data]`. */
+  data: TimePoint[][];
+  options?: Partial<LineSeriesOptions>;
+  /** Stable series ID — same value across remounts. */
+  id?: string;
+}
+
+/** Only fall back to a full `setSeriesData` replace when more than this many new
+ * points appear in a single tick — otherwise streamed updates would always look
+ * like bulk loads and the renderer would clear its entrance-animation entries. */
+const BULK_THRESHOLD = 20;
+
+export function LineSeries({ data, options, id: idProp }: LineSeriesProps) {
+  const chart = useChartInstance();
+  const seriesRef = useRef<string | null>(null);
+  const prevLensRef = useRef<number[]>([]);
+  const prevFirstTimesRef = useRef<(number | null)[]>([]);
+  const prevLastTimesRef = useRef<(number | null)[]>([]);
+
+  useLayoutEffect(() => {
+    const id = chart.addLineSeries({ ...options, layers: data.length, id: idProp });
+    seriesRef.current = id;
+    prevLensRef.current = new Array(data.length).fill(0);
+    prevFirstTimesRef.current = new Array(data.length).fill(null);
+    prevLastTimesRef.current = new Array(data.length).fill(null);
+    return () => {
+      chart.removeSeries(id);
+      seriesRef.current = null;
+      prevLensRef.current = [];
+      prevFirstTimesRef.current = [];
+      prevLastTimesRef.current = [];
+    };
+  }, [chart, data.length, idProp]);
+
+  useLayoutEffect(() => {
+    const id = seriesRef.current;
+    if (!id) return;
+
+    chart.batch(() => {
+      for (let i = 0; i < data.length; i++) {
+        const layer = data[i];
+        const prevLen = prevLensRef.current[i] ?? 0;
+        const prevFirst = prevFirstTimesRef.current[i] ?? null;
+
+        if (layer.length === 0) {
+          chart.setSeriesData(id, [], i);
+          prevLensRef.current[i] = 0;
+          prevFirstTimesRef.current[i] = null;
+          prevLastTimesRef.current[i] = null;
+          continue;
+        }
+
+        const firstTime = normalizeTime(layer[0].time);
+        const lastTime = normalizeTime(layer[layer.length - 1].time);
+        const prevLast = prevLastTimesRef.current[i] ?? null;
+        const shifted = prevFirst !== null && prevFirst !== firstTime;
+        const added = layer.length - prevLen;
+        const hasNewLast = prevLast !== null && prevLast !== lastTime;
+
+        // Rolling-window slide (maxPoints cap): drop oldest, append newest,
+        // length unchanged. Sync prefix then appendData the new tail so the
+        // entrance animation fires instead of getting wiped by setSeriesData.
+        if (shifted && added === 0 && hasNewLast) {
+          chart.setSeriesData(id, layer.slice(0, -1), i);
+          chart.appendData(id, layer[layer.length - 1], i);
+        } else if (prevLen === 0 || layer.length < prevLen || added > BULK_THRESHOLD || shifted) {
+          chart.setSeriesData(id, layer, i);
+        } else if (layer.length === prevLen) {
+          chart.updateData(id, layer[layer.length - 1], i);
+        } else {
+          for (let j = prevLen; j < layer.length; j++) {
+            chart.appendData(id, layer[j], i);
+          }
+        }
+
+        prevLensRef.current[i] = layer.length;
+        prevFirstTimesRef.current[i] = firstTime;
+        prevLastTimesRef.current[i] = lastTime;
+      }
+    });
+  }, [chart, data]);
+
+  useEffect(() => {
+    if (seriesRef.current && options) {
+      chart.updateSeriesOptions(seriesRef.current, options);
+    }
+  }, [
+    chart,
+    options?.colors?.join(','),
+    options?.strokeWidth,
+    options?.area?.visible,
+    (options as { areaFill?: boolean } | undefined)?.areaFill,
+    options?.pulse,
+    options?.stacking,
+    options?.entryAnimation,
+    options?.enterAnimation,
+    options?.entryMs,
+    options?.enterMs,
+    options?.smoothMs,
+  ]);
+
+  return null;
+}

package/src/PieSeries.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useLayoutEffect, useRef } from 'react';
+
+import type { PieSeriesOptions, PieSliceData } from '@wick-charts/core';
+
+import { useChartInstance } from './context';
+
+export interface PieSeriesProps {
+  data: PieSliceData[];
+  options?: Partial<PieSeriesOptions>;
+  /** Stable series ID — same value across remounts. */
+  id?: string;
+}
+
+/** Pie chart series. Set `options.innerRadiusRatio` > 0 for donut. */
+export function PieSeries({ data, options, id: idProp }: PieSeriesProps) {
+  const chart = useChartInstance();
+  const seriesRef = useRef<string | null>(null);
+
+  useLayoutEffect(() => {
+    const id = chart.addPieSeries({ ...options, id: idProp });
+    seriesRef.current = id;
+    return () => {
+      chart.removeSeries(id);
+      seriesRef.current = null;
+    };
+  }, [chart, idProp]);
+
+  useEffect(() => {
+    if (seriesRef.current && options) {
+      chart.updateSeriesOptions(seriesRef.current, options);
+    }
+  }, [
+    chart,
+    options?.innerRadiusRatio,
+    options?.padAngle,
+    options?.animate,
+    options?.shadow,
+    options?.innerShadow,
+    options?.colors,
+    options?.sliceLabels?.mode,
+    options?.sliceLabels?.content,
+    options?.sliceLabels?.fontSize,
+    options?.sliceLabels?.minSliceAngle,
+    options?.sliceLabels?.elbowLen,
+    options?.sliceLabels?.legPad,
+    options?.sliceLabels?.labelGap,
+    options?.sliceLabels?.distance,
+    options?.sliceLabels?.railWidth,
+    options?.sliceLabels?.balanceSides,
+  ]);
+
+  useLayoutEffect(() => {
+    if (seriesRef.current) {
+      chart.setSeriesData(seriesRef.current, data);
+    }
+  }, [chart, data]);
+
+  return null;
+}

package/src/ThemeContext.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext } from 'react';
+
+import type { ChartTheme } from '@wick-charts/core';
+
+const ThemeCtx = createContext<ChartTheme | null>(null);
+
+export const ThemeProvider = ThemeCtx.Provider;
+
+/** Read the current chart theme from context. Must be inside a ThemeProvider. */
+export function useTheme(): ChartTheme {
+  const theme = useContext(ThemeCtx);
+  if (!theme) {
+    throw new Error('useTheme must be used within <ThemeProvider>');
+  }
+  return theme;
+}
+
+/** Read the theme from context, or return null if no provider. */
+export function useThemeOptional(): ChartTheme | null {
+  return useContext(ThemeCtx);
+}

package/src/context.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+import type { ChartInstance } from '@wick-charts/core';
+
+export const ChartContext = createContext<ChartInstance | null>(null);
+
+export function useChartInstance(): ChartInstance {
+  const chart = useContext(ChartContext);
+  if (!chart) {
+    throw new Error('useChartInstance must be used within <ChartContainer>');
+  }
+  return chart;
+}

package/src/index.ts

@@ -0,0 +1,120 @@
+// Re-export core (users import everything from '@wick-charts/react')
+
+export type {
+  AxisBound,
+  AxisConfig,
+  BarSeriesOptions,
+  /** @deprecated Use {@link StackingMode} instead. */
+  BarStacking,
+  BuildHoverSnapshotsArgs,
+  BuildLastSnapshotsArgs,
+  CandlestickSeriesOptions,
+  ChartLayout,
+  ChartOptions,
+  ChartTheme,
+  CrosshairPosition,
+  HoverInfo,
+  LegendItem,
+  /** @deprecated Use {@link TimePoint} instead. */
+  LineData,
+  LineSeriesOptions,
+  OHLCData,
+  OHLCInput,
+  PieSeriesOptions,
+  PieSliceData,
+  SeriesSnapshot,
+  SeriesType,
+  SliceInfo,
+  SnapshotSort,
+  StackingMode,
+  ThemeConfig,
+  ThemePreset,
+  TimePoint,
+  TimePointInput,
+  TimeValue,
+  TooltipField,
+  TooltipFormatter,
+  TooltipPosition,
+  TooltipPositionArgs,
+  Typography,
+  ValueFormatter,
+  VisibleRange,
+  XAxisConfig,
+  YAxisConfig,
+  YRange,
+} from '@wick-charts/core';
+export {
+  ChartInstance,
+  andromeda,
+  ayuMirage,
+  buildHoverSnapshots,
+  buildLastSnapshots,
+  catppuccin,
+  computeTooltipPosition,
+  createTheme,
+  darkTheme,
+  detectInterval,
+  dracula,
+  formatCompact,
+  formatDate,
+  formatPriceAdaptive,
+  formatTime,
+  githubLight,
+  gruvbox,
+  handwritten,
+  highContrast,
+  lavenderMist,
+  lightPink,
+  lightTheme,
+  materialPalenight,
+  minimalLight,
+  mintBreeze,
+  monokaiPro,
+  nightOwl,
+  normalizeTime,
+  oneDarkPro,
+  panda,
+  peachCream,
+  quietLight,
+  rosePineDawn,
+  sandDune,
+  solarizedLight,
+} from '@wick-charts/core';
+
+export { BarSeries } from './BarSeries';
+export { CandlestickSeries } from './CandlestickSeries';
+// React components
+export { ChartContainer } from './ChartContainer';
+// React hooks
+export { useChartInstance } from './context';
+export { LineSeries } from './LineSeries';
+export { PieSeries } from './PieSeries';
+export {
+  useCrosshairPosition,
+  useLastYValue,
+  usePreviousClose,
+  useVisibleRange,
+  useYRange,
+} from './store-bridge';
+export { ThemeProvider, useTheme } from './ThemeContext';
+export { Crosshair } from './ui/Crosshair';
+export type { InfoBarProps, InfoBarRenderContext } from './ui/InfoBar';
+export { InfoBar } from './ui/InfoBar';
+export type { LegendItemOverride, LegendProps } from './ui/Legend';
+// Legend
+export { Legend } from './ui/Legend';
+export { NumberFlow } from './ui/NumberFlow';
+export type { PieLegendMode, PieLegendPosition, PieLegendProps, PieLegendRenderContext } from './ui/PieLegend';
+export { PieLegend } from './ui/PieLegend';
+export { PieTooltip } from './ui/PieTooltip';
+export type { SparklineProps, SparklineValuePosition, SparklineVariant } from './ui/Sparkline';
+export { Sparkline } from './ui/Sparkline';
+export { TimeAxis, TimeAxis as XAxis } from './ui/TimeAxis';
+export type { TitleProps } from './ui/Title';
+export { Title } from './ui/Title';
+export type { TooltipProps, TooltipRenderContext, TooltipSort } from './ui/Tooltip';
+// UI overlays
+export { Tooltip } from './ui/Tooltip';
+export type { YAxisProps } from './ui/YAxis';
+export { YAxis } from './ui/YAxis';
+export { YLabel } from './ui/YLabel';

package/src/store-bridge.ts

@@ -0,0 +1,100 @@
+import { useMemo, useSyncExternalStore } from 'react';
+
+import type { ChartInstance, CrosshairPosition, VisibleRange, YRange } from '@wick-charts/core';
+
+type ChartEvent = 'crosshairMove' | 'viewportChange' | 'dataUpdate' | 'seriesChange';
+
+// `chart.on` is typed per-event (e.g. `crosshairMove` passes `CrosshairPosition`)
+// but the React bridge only needs a generic "something changed" ping. Narrow
+// via `Parameters<ChartInstance['on']>` so we stay inside the public surface
+// without collapsing to `any`.
+type ChartOnListener = Parameters<ChartInstance['on']>[1];
+
+function createStore<T>(chart: ChartInstance, events: ChartEvent | ChartEvent[], getSnapshot: () => T) {
+  const list = Array.isArray(events) ? events : [events];
+  return {
+    subscribe: (callback: () => void) => {
+      const listener = callback as unknown as ChartOnListener;
+      for (const e of list) chart.on(e, listener);
+      return () => {
+        for (const e of list) chart.off(e, listener);
+      };
+    },
+    getSnapshot,
+  };
+}
+
+export function useVisibleRange(chart: ChartInstance): VisibleRange {
+  const store = useMemo(
+    () => createStore(chart, ['viewportChange', 'dataUpdate', 'seriesChange'], () => chart.getVisibleRange()),
+    [chart],
+  );
+  return useSyncExternalStore(store.subscribe, store.getSnapshot);
+}
+
+export function useYRange(chart: ChartInstance): YRange {
+  const store = useMemo(
+    () => createStore(chart, ['viewportChange', 'dataUpdate', 'seriesChange'], () => chart.getYRange()),
+    [chart],
+  );
+  return useSyncExternalStore(store.subscribe, store.getSnapshot);
+}
+
+export function useLastYValue(chart: ChartInstance, seriesId: string): { value: number; isLive: boolean } | null {
+  const store = useMemo(() => {
+    let snapshot = chart.getLastValue(seriesId);
+    // Remember the pixel Y that corresponds to `snapshot` so we can detect
+    // viewport shifts (resize, headerLayout toggle, zoom/pan) where the value
+    // is unchanged but the badge needs to move. Computing both prev and next
+    // against the current yScale would always compare equal.
+    let lastY = snapshot ? chart.yScale.valueToY(snapshot.value) : null;
+    const getSnapshot = () => snapshot;
+
+    const refresh = (): boolean => {
+      const next = chart.getLastValue(seriesId);
+      const nextY = next ? chart.yScale.valueToY(next.value) : null;
+      if (snapshot?.value === next?.value && snapshot?.isLive === next?.isLive && lastY === nextY) {
+        return false;
+      }
+
+      snapshot = next;
+      lastY = nextY;
+      return true;
+    };
+
+    return {
+      subscribe: (callback: () => void) => {
+        // The snapshot captured in useMemo can predate the series being added
+        // (LineSeries's useLayoutEffect runs after YLabel's initial render, so
+        // getLastValue returned null). Reconcile before listeners attach —
+        // useSyncExternalStore re-reads getSnapshot after subscribe and will
+        // force a re-render when the value differs from the last one it saw.
+        refresh();
+        const onChange = () => {
+          if (refresh()) callback();
+        };
+        chart.on('dataUpdate', onChange);
+        chart.on('viewportChange', onChange);
+        return () => {
+          chart.off('dataUpdate', onChange);
+          chart.off('viewportChange', onChange);
+        };
+      },
+      getSnapshot,
+    };
+  }, [chart, seriesId]);
+  return useSyncExternalStore(store.subscribe, store.getSnapshot);
+}
+
+export function usePreviousClose(chart: ChartInstance, seriesId: string): number | null {
+  const store = useMemo(
+    () => createStore(chart, 'dataUpdate', () => chart.getPreviousClose(seriesId)),
+    [chart, seriesId],
+  );
+  return useSyncExternalStore(store.subscribe, store.getSnapshot);
+}
+
+export function useCrosshairPosition(chart: ChartInstance): CrosshairPosition | null {
+  const store = useMemo(() => createStore(chart, 'crosshairMove', () => chart.getCrosshairPosition()), [chart]);
+  return useSyncExternalStore(store.subscribe, store.getSnapshot);
+}

package/src/ui/Crosshair.tsx

@@ -0,0 +1,61 @@
+import { formatTime } from '@wick-charts/core';
+
+import { useChartInstance } from '../context';
+import { useCrosshairPosition } from '../store-bridge';
+
+export function Crosshair() {
+  const chart = useChartInstance();
+  const position = useCrosshairPosition(chart);
+
+  if (!position) return null;
+
+  const theme = chart.getTheme();
+  const dataInterval = chart.getDataInterval();
+
+  const labelStyle = {
+    // Blend the theme's labelBackground at 80% opacity so the axis grid
+    // shows through — matches TradingView-style overlays and keeps the
+    // badge from looking like an opaque block.
+    background: `color-mix(in srgb, ${theme.crosshair.labelBackground} 80%, transparent)`,
+    color: theme.crosshair.labelTextColor,
+    fontSize: theme.typography.axisFontSize,
+    fontFamily: theme.typography.fontFamily,
+    fontVariantNumeric: 'tabular-nums' as const,
+    padding: '2px 6px',
+    borderRadius: 2,
+    whiteSpace: 'nowrap' as const,
+    pointerEvents: 'none' as const,
+    // Sit above axis ticks (z:0) but below the YLabel badge (z:3) so the
+    // live last-value stays visible when the crosshair crosses its row.
+    zIndex: 2,
+  };
+
+  return (
+    <>
+      {/* Y label on right axis */}
+      <div
+        style={{
+          position: 'absolute',
+          right: 0,
+          top: position.mediaY,
+          transform: 'translateY(-50%)',
+          ...labelStyle,
+        }}
+      >
+        {chart.yScale.formatY(position.y)}
+      </div>
+      {/* Time label on bottom axis */}
+      <div
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          left: position.mediaX,
+          transform: 'translateX(-50%)',
+          ...labelStyle,
+        }}
+      >
+        {formatTime(position.time, dataInterval)}
+      </div>
+    </>
+  );
+}

package/src/ui/InfoBar.tsx

@@ -0,0 +1,194 @@
+import { type ReactNode, useLayoutEffect, useState } from 'react';
+
+import {
+  type OHLCData,
+  type SeriesSnapshot,
+  type TimePoint,
+  type TooltipFormatter,
+  buildHoverSnapshots,
+  buildLastSnapshots,
+  formatCompact,
+  formatPriceAdaptive,
+  formatTime,
+} from '@wick-charts/core';
+
+import { useChartInstance } from '../context';
+import { useCrosshairPosition } from '../store-bridge';
+import { useTheme } from '../ThemeContext';
+import type { TooltipSort } from './Tooltip';
+
+/** Context passed to the {@link InfoBar} render-prop. */
+export interface InfoBarRenderContext {
+  readonly snapshots: readonly SeriesSnapshot[];
+  /** Timestamp displayed. In hover mode it's the crosshair time; in last-mode it's the newest point. */
+  readonly time: number;
+  /** `true` while the user's pointer is over the chart (hover mode). */
+  readonly isHover: boolean;
+}
+
+/** Props for the {@link InfoBar} component. */
+export interface InfoBarProps {
+  /** Sort order for line values (default: 'none'). */
+  sort?: TooltipSort;
+  /**
+   * Custom formatter for every displayed number in the default UI. Called per
+   * cell with the field hint (`'open' | 'high' | 'low' | 'close' | 'volume' | 'value'`).
+   * Defaults: adaptive precision for ohlc/value, compact (K/M/B/T) for volume.
+   * Ignored when {@link children} is a render-prop.
+   */
+  format?: TooltipFormatter;
+  /**
+   * Render-prop escape hatch. Receives the computed snapshots and replaces the
+   * entire built-in layout. Filter, reorder, or re-style rows here without
+   * re-implementing any data wiring.
+   */
+  children?: (ctx: InfoBarRenderContext) => ReactNode;
+}
+
+/** Default InfoBar formatter — adaptive for ohlc/value, compact for volume. */
+const defaultInfoBarFormat: TooltipFormatter = (v, field) =>
+  field === 'volume' ? formatCompact(v) : formatPriceAdaptive(v);
+
+/**
+ * Compact OHLC/series info bar rendered as a flex row above the chart canvas.
+ * Pairs with {@link Tooltip} (which then only renders its floating near-cursor part).
+ *
+ * Pass a render-prop child for a custom layout — the built-in UI is used when
+ * {@link children} is omitted.
+ */
+export function InfoBar({ sort = 'none', format = defaultInfoBarFormat, children }: InfoBarProps) {
+  const chart = useChartInstance();
+  const theme = useTheme();
+  const crosshair = useCrosshairPosition(chart);
+
+  const [, bump] = useState(0);
+  useLayoutEffect(() => {
+    const onOverlayChange = () => bump((n) => n + 1);
+    chart.on('overlayChange', onOverlayChange);
+    // Catch-up: a sibling series' layout effect may have registered data in
+    // the same commit. Bump so the next synchronous render picks it up.
+    if (chart.getSeriesIds().length > 0) bump((n) => n + 1);
+
+    return () => {
+      chart.off('overlayChange', onOverlayChange);
+    };
+  }, [chart]);
+
+  // Hover-over-the-y-axis gap: the overlay canvas includes the y-axis strip,
+  // so a crosshair event fires for offsets past the plotted data. The
+  // nearest-time lookup then snaps to an out-of-range timestamp and returns
+  // no samples. Falling back to the last-mode snapshots here keeps the bar
+  // populated (showing last values at 0.6 opacity) instead of blinking out
+  // every time the pointer grazes the y-axis.
+  const lastSnapshots = buildLastSnapshots(chart, { sort, cacheKey: 'infobar-last' });
+  let snapshots = lastSnapshots;
+  let displayTime = lastSnapshots.length === 0 ? 0 : Math.max(...lastSnapshots.map((s) => s.data.time));
+  let isHover = false;
+  if (crosshair !== null) {
+    const hoverSnapshots = buildHoverSnapshots(chart, { time: crosshair.time, sort, cacheKey: 'infobar-hover' });
+    if (hoverSnapshots.length > 0) {
+      snapshots = hoverSnapshots;
+      // `snapshots[0].data.time` is index-0 → shifts when `sort` reorders.
+      // Use the raw crosshair time (what the user is pointing at) so the
+      // header stays stable across sort toggles.
+      displayTime = crosshair.time;
+      isHover = true;
+    }
+  }
+
+  if (snapshots.length === 0) return null;
+
+  if (children) {
+    return (
+      <div
+        data-tooltip-legend=""
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          flexShrink: 0,
+          fontFamily: theme.typography.fontFamily,
+          fontSize: theme.typography.fontSize,
+          fontVariantNumeric: 'tabular-nums',
+          opacity: isHover ? 1 : 0.6,
+          transition: 'opacity 0.2s ease',
+          pointerEvents: 'none',
+        }}
+      >
+        {children({ snapshots, time: displayTime, isHover })}
+      </div>
+    );
+  }
+
+  const dataInterval = chart.getDataInterval();
+
+  return (
+    <div
+      data-tooltip-legend=""
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4,
+        flexWrap: 'wrap',
+        padding: '4px 8px',
+        flexShrink: 0,
+        fontSize: theme.typography.fontSize,
+        fontFamily: theme.typography.fontFamily,
+        fontVariantNumeric: 'tabular-nums',
+        opacity: isHover ? 1 : 0.6,
+        transition: 'opacity 0.2s ease',
+        pointerEvents: 'none',
+      }}
+    >
+      <span style={{ color: theme.axis.textColor, marginRight: 2 }}>{formatTime(displayTime, dataInterval)}</span>
+      {snapshots.map((s) => {
+        const isOHLC = 'open' in s.data;
+        if (isOHLC) {
+          const ohlc = s.data as OHLCData;
+          const isUp = ohlc.close >= ohlc.open;
+          const c = isUp ? theme.candlestick.upColor : theme.candlestick.downColor;
+          return (
+            <span key={s.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+              <LegendItem label="O" display={format(ohlc.open, 'open')} color={c} dim={theme.axis.textColor} />
+              <LegendItem label="H" display={format(ohlc.high, 'high')} color={c} dim={theme.axis.textColor} />
+              <LegendItem label="L" display={format(ohlc.low, 'low')} color={c} dim={theme.axis.textColor} />
+              <LegendItem label="C" display={format(ohlc.close, 'close')} color={c} dim={theme.axis.textColor} />
+              {ohlc.volume != null && (
+                <LegendItem
+                  label="V"
+                  display={format(ohlc.volume, 'volume')}
+                  color={theme.axis.textColor}
+                  dim={theme.axis.textColor}
+                />
+              )}
+            </span>
+          );
+        }
+        const line = s.data as TimePoint;
+
+        return (
+          <span key={s.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>
+            <span
+              style={{
+                width: 6,
+                height: 6,
+                borderRadius: '50%',
+                background: s.color,
+                flexShrink: 0,
+              }}
+            />
+            <span style={{ color: s.color, fontWeight: 500 }}>{format(line.value, 'value')}</span>
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+function LegendItem({ label, display, color, dim }: { label: string; display: string; color: string; dim: string }) {
+  return (
+    <>
+      <span style={{ color: dim, opacity: 0.5, marginLeft: 5 }}>{label}</span>
+      <span style={{ color, fontWeight: 500, marginLeft: 2 }}>{display}</span>
+    </>
+  );
+}