@micha.bigler/ui-core-micha 3.14.4 → 4.0.0

package/src/components/charts/ScatterChart.jsx

@@ -1,299 +0,0 @@
-import React, { useMemo } from 'react';
-import { Box } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import { useTranslation } from 'react-i18next';
-import { ScatterChart as MuiScatterChart } from '@mui/x-charts/ScatterChart';
-import { useXScale, useYScale } from '@mui/x-charts/hooks';
-import { useNeutralChartPalette } from './palette';
-import {
-  DEFAULT_LEGEND_POSITION,
-  assertRemovedChartProp,
-  defaultNumericTickFormatter,
-  resolveChartLayout,
-  withAxisDefaults,
-  withChartSlotDefaults,
-  withGridDefaults,
-} from './chartDefaults';
-
-// Small enough that hram's largest cloud (~300 points, the tested magnitude -- state it, don't
-// imply it scales past that) doesn't fuse into a solid mass at the default (non-bubble) size.
-const DEFAULT_MARKER_RADIUS = 5;
-const BUBBLE_MIN_RADIUS = 3;
-const BUBBLE_RADIUS_SCALE = 10;
-
-/**
- * value -> radius, `max(3, 10 * sqrt(value / maxValue))` -- the formula the access-gap panel
- * already hand-rolls (THEME-10 scope 5). Exported so a consumer can size a legend swatch or a
- * standalone marker the same way the chart does.
- */
-export function scaleBubbleRadius(value, maxValue, { minRadius = BUBBLE_MIN_RADIUS, scale = BUBBLE_RADIUS_SCALE } = {}) {
-  if (!Number.isFinite(value) || !Number.isFinite(maxValue) || maxValue <= 0) return minRadius;
-  return Math.max(minRadius, scale * Math.sqrt(Math.max(0, value) / maxValue));
-}
-
-// A custom MUI marker slot -- the only way to vary radius/colour/shape PER POINT: MUI's own
-// Scatter passes a single `markerSize` per whole series (confirmed against
-// @mui/x-charts/ScatterChart/Scatter.js -- `size: series.markerSize`, never derived from a
-// point's own `z`), so bubble sizing and per-point overrides (a hollow status-quo marker, a
-// continuous-scale colour) can only be expressed by replacing the marker itself.
-function makeMarkerSlot(seriesById, { sizeAccessor, chartMax, getPointStyle }) {
-  return function PresetScatterMarker({
-    seriesId, dataIndex, color, x, y, isHighlighted, isFaded, size, onClick, ...rest
-  }) {
-    const point = seriesById[seriesId]?.data?.[dataIndex];
-    const style = point && getPointStyle ? (getPointStyle(point, { seriesId, dataIndex }) || {}) : {};
-    const radius = style.radius
-      ?? (sizeAccessor && point ? scaleBubbleRadius(sizeAccessor(point), chartMax) : size);
-    const r = (isHighlighted ? 1.15 : 1) * radius;
-    const fill = style.hollow ? 'none' : (style.color ?? color);
-    const stroke = style.color ?? color;
-    const shared = {
-      onClick,
-      opacity: isFaded ? 0.3 : 1,
-      stroke,
-      strokeWidth: style.hollow ? 2 : (style.strokeWidth ?? 1),
-      style: { cursor: onClick ? 'pointer' : 'unset' },
-      ...rest,
-    };
-    if (style.shape === 'square') {
-      return <rect x={x - r} y={y - r} width={r * 2} height={r * 2} fill={fill} {...shared} />;
-    }
-    if (style.shape === 'diamond') {
-      return <polygon points={`${x},${y - r} ${x + r},${y} ${x},${y + r} ${x - r},${y}`} fill={fill} {...shared} />;
-    }
-    return <circle cx={x} cy={y} r={r} fill={fill} {...shared} />;
-  };
-}
-
-/**
- * A computed curve (allocation's Pareto envelope) drawn inside the chart's own live coordinate
- * space. Render as a `ScatterChart` child -- `useXScale`/`useYScale` only resolve inside the
- * chart's own context, so this can never drift into a second, hand-rolled pixel mapping the way
- * the hand-drawn panels this preset replaces each built their own.
- */
-export function ScatterReferenceCurve({ points, color, dashed, strokeWidth = 2 }) {
-  const xScale = useXScale();
-  const yScale = useYScale();
-  if (!points || points.length < 2) return null;
-  const d = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${xScale(p.x)},${yScale(p.y)}`).join(' ');
-  return <path d={d} fill="none" stroke={color} strokeWidth={strokeWidth} strokeDasharray={dashed ? '6 3' : undefined} />;
-}
-
-/**
- * A straight reference line with an optional inline label -- the access panel's labelled y=x
- * "no gap" diagonal, or optimization's dashed threshold line. Same live-scale rule as
- * `ScatterReferenceCurve`.
- */
-export function ScatterReferenceLine({
-  from, to, color, dashed, strokeWidth = 1.5, label, labelAt, labelAngle = 0,
-}) {
-  const xScale = useXScale();
-  const yScale = useYScale();
-  const labelX = labelAt ? xScale(labelAt.x) : null;
-  const labelY = labelAt ? yScale(labelAt.y) : null;
-  return (
-    <g>
-      <line
-        x1={xScale(from.x)}
-        y1={yScale(from.y)}
-        x2={xScale(to.x)}
-        y2={yScale(to.y)}
-        stroke={color}
-        strokeWidth={strokeWidth}
-        strokeDasharray={dashed ? '5 3' : undefined}
-      />
-      {label && labelAt && (
-        <text
-          x={labelX}
-          y={labelY}
-          fontSize={10}
-          fill={color}
-          textAnchor="start"
-          transform={labelAngle ? `rotate(${labelAngle}, ${labelX}, ${labelY})` : undefined}
-        >
-          {label}
-        </text>
-      )}
-    </g>
-  );
-}
-
-/**
- * Responsive MUI X-Charts scatter preset, drawn from three real consumers (THEME-10): a
- * continuously-coloured cost/outcome cloud with an envelope curve and marked points
- * (allocation performance), a bubble cloud with a labelled y=x reference diagonal and
- * categorical per-point colouring (access gap), and a cloud with a dashed reference line and a
- * hollow status-quo marker (optimization results). Reuses BarChart/LineChart's own axis
- * machinery (THEME-9) rather than sizing its own -- a scatter axis is a numeric axis like any
- * other, and a preset that re-derives axis sizing would re-open exactly what THEME-9 closed.
- *
- * `series` follows MUI's own scatter shape (`{id, label, data: [{x,y,z?,id?}], color?}`).
- * Multiple series render as a categorical cloud with a discrete legend, one colour per series
- * -- draw those colours from the app's own family/role register via `palette`; this package
- * does not invent one. A single series with no explicit `color` renders as one neutral mass:
- * undifferentiated data encodes no dimension, so it gets the role register's neutral tone
- * (`palette.js`'s `neutral`), never a series/KPI identity hue.
- *
- * `sizeAccessor(point) => number` turns on bubble mode: marker radius follows
- * `scaleBubbleRadius`, and every series' points are drawn largest-first so a small bubble is
- * never hidden under a large one -- the z-order is the whole correctness of a bubble chart, not
- * a decoration.
- *
- * `getPointStyle(point, {seriesId, dataIndex}) => {hollow?, color?, shape?, radius?,
- * strokeWidth?}` marks individual points -- a status-quo point drawn hollow against filled
- * candidates (allocation, optimization), a `'square'` shape for a source category the data
- * itself marks (allocation's "targeted" points), or a per-point colour from a continuous scale
- * the caller computed (this package does not ship a continuous colour-scale/legend component;
- * the caller already owns that logic and only needs a way to apply the resolved colour per
- * point, which this is it). Read the `point` object itself, not `dataIndex`, to correlate a
- * style back to your own data -- in bubble mode (`sizeAccessor` set) `dataIndex` indexes the
- * chart's internal z-ordered copy of your series, not your original array's order.
- *
- * Reference geometry (a computed curve, a straight line, either with an optional label) is
- * composed as `children` using `ScatterReferenceCurve`/`ScatterReferenceLine` above.
- *
- * `size` (UCM-CHART-12, UCM-CHART-15): `"compact" | "standard" | "tall" | "extra_tall" |
- * "super_tall"`, resolved through the theme's spacing scale by `resolveChartLayout`. `height`
- * (px) is the documented escape for a justified special case -- prefer `size`.
- * `minHeight`/`aspect`/`margin` are gone (see docs/CHART-LAYOUT.md).
- *
- * Tested magnitude: a few hundred marks (hram's largest cloud is ~300 points). Not verified,
- * and not implied to hold, at thousands+.
- *
- * THEME-10 was commissioned before its requirement set closed -- a forthcoming "paired point"
- * shape (optimization's MILP-vs-simulated pair, two marks joined by a connector) is named but
- * explicitly NOT built here. Nothing below assumes a datum produces exactly one mark: a point
- * object may carry arbitrary extra fields beyond `{x,y,z,id}` (as `getPointStyle`'s own status-
- * quo/bubble-radius usage already does), `getPointStyle`/`sizeAccessor` key off that datum, not
- * off a fixed mark count, and reference geometry is composed via `children`, not baked into the
- * per-point contract. A pair variant can therefore layer on later -- extra series entries plus a
- * connector drawn through `children` -- without reshaping `series` or either callback's contract.
- */
-export function ScatterChart({
-  series = [],
-  xAxisLabel,
-  yAxisLabel,
-  xAxis,
-  yAxis,
-  palette,
-  size = 'standard',
-  height,
-  minHeight,
-  aspect,
-  margin,
-  xLabels = 'auto',
-  grid,
-  hideLegend = series.length <= 1,
-  legendPosition = DEFAULT_LEGEND_POSITION,
-  sizeAccessor,
-  getPointStyle,
-  markerSize = DEFAULT_MARKER_RADIUS,
-  slotProps,
-  children,
-  ...chartProps
-}) {
-  const theme = useTheme();
-  const { i18n } = useTranslation();
-  const neutralPalette = useNeutralChartPalette();
-
-  assertRemovedChartProp('ScatterChart', 'minHeight', minHeight, 'Use size="compact" | "standard" | "tall" | "extra_tall" | "super_tall", or height for the documented escape.');
-  assertRemovedChartProp('ScatterChart', 'aspect', aspect, 'Removed with no replacement -- pick a size token; the chart no longer tracks width.');
-  assertRemovedChartProp('ScatterChart', 'margin', margin, 'Removed -- the layout model owns margins completely.');
-
-  const labelledXAxis = withAxisDefaults(
-    xAxis,
-    xAxisLabel,
-    { scaleType: 'linear', valueFormatter: defaultNumericTickFormatter(i18n.language) },
-    theme.typography.caption.fontSize,
-  );
-  const labelledYAxis = withAxisDefaults(
-    yAxis,
-    yAxisLabel,
-    { scaleType: 'linear', valueFormatter: defaultNumericTickFormatter(i18n.language) },
-    theme.typography.caption.fontSize,
-  );
-  // `resolveChartLayout`'s own y-axis sizing (via `sizeYAxisForContent`) expects `series[i].data`
-  // to be a plain array of numbers -- true for BarChart/LineChart, but a scatter's data is
-  // `{x,y,z,id}` points. Adapt AT THIS CALL SITE, not inside the shared resolver -- BarChart/
-  // LineChart's own contract must not change for this (reviewer finding, live-caught under
-  // THEME-10: the untested case silently found zero candidates and fell back to MUI's flat
-  // default at a magnitude that didn't visibly overlap).
-  const yValueSeries = useMemo(
-    () => series.map((item) => ({ ...item, data: (item.data || []).map((point) => point?.y) })),
-    [series],
-  );
-  const layout = resolveChartLayout({
-    size,
-    height,
-    xAxis: labelledXAxis,
-    yAxis: labelledYAxis,
-    series: yValueSeries,
-    xLabels,
-    hideLegend,
-    legendPosition,
-    slotProps,
-    tickFontSize: theme.typography.caption.fontSize,
-    spacing: theme.spacing,
-    defaultLineHeight: theme.typography.caption.lineHeight,
-  });
-
-  const isNeutral = series.length <= 1 && !series[0]?.color;
-  const resolvedPalette = palette || (isNeutral ? [neutralPalette.neutral] : neutralPalette.categorical);
-
-  // A single chart-wide max, NOT one per series: population (or whatever sizeAccessor reads) is
-  // one comparable scale across the whole cloud (matches the access-gap panel's own
-  // `maxPop = Math.max(1, ...points.map(p => p.population))`, computed over every point
-  // regardless of division/settlement) -- a per-series max would let each series' own largest
-  // point always render at full radius, making cross-series bubble size meaningless.
-  const chartMax = useMemo(() => {
-    if (!sizeAccessor) return 1;
-    return Math.max(
-      1,
-      ...series.flatMap((item) => (item.data || []).map((point) => sizeAccessor(point))).filter(Number.isFinite),
-    );
-  }, [series, sizeAccessor]);
-
-  // THEME-10 scope 5: explicit z-order -- largest bubbles drawn first so smaller ones are never
-  // hidden underneath (SVG paints later elements on top). A no-op outside bubble mode.
-  const orderedSeries = useMemo(() => (
-    sizeAccessor
-      ? series.map((item) => ({
-        ...item,
-        data: [...(item.data || [])].sort((a, b) => sizeAccessor(b) - sizeAccessor(a)),
-      }))
-      : series
-  ), [series, sizeAccessor]);
-
-  // The marker's `dataIndex` refers to a position in whatever was actually handed to MUI --
-  // `orderedSeries` (post z-order sort), not the caller's original `series` -- so the lookup
-  // table the marker closes over must be built from that SAME array, or a sorted bubble series
-  // would resolve every point's style/radius against the wrong (pre-sort) index.
-  const orderedSeriesById = useMemo(
-    () => Object.fromEntries(orderedSeries.map((item) => [item.id, item])),
-    [orderedSeries],
-  );
-  const markerSlot = useMemo(
-    () => makeMarkerSlot(orderedSeriesById, { sizeAccessor, chartMax, getPointStyle }),
-    [orderedSeriesById, sizeAccessor, chartMax, getPointStyle],
-  );
-
-  return (
-    <Box data-testid="scatter-chart-container" sx={layout.sx}>
-      <MuiScatterChart
-        {...chartProps}
-        height={layout.chartHeight}
-        series={orderedSeries.map((item) => ({ markerSize, ...item }))}
-        xAxis={layout.xAxis}
-        yAxis={layout.yAxis}
-        colors={resolvedPalette}
-        grid={withGridDefaults(grid)}
-        hideLegend={hideLegend}
-        margin={layout.margin}
-        slots={{ marker: markerSlot }}
-        slotProps={withChartSlotDefaults(slotProps, legendPosition)}
-      >
-        {children}
-      </MuiScatterChart>
-    </Box>
-  );
-}

package/src/components/charts/TimeSeriesChart.jsx

@@ -1,300 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Box,
-  Checkbox,
-  FormControlLabel,
-  FormGroup,
-  Radio,
-  RadioGroup,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { ChartFrame } from './ChartFrame';
-import { BarChart } from './BarChart';
-import { useNeutralChartPalette } from './palette';
-
-// Fixed platform-wide range -> granularity mapping (operator decision, CHART-2 /
-// dcm ACT-1) — the resolution follows the window and is never an independent
-// caller-supplied control. Every preset lands between a dozen and fifty points.
-// Preset default height (CHART-4): MUI X-Charts' responsive container
-// measures its actual parent height via ResizeObserver and draws nothing
-// if that parent has none — ChartFrame's flex-centered content Box does
-// NOT stretch its child to fill available height (alignItems: 'center'),
-// so BarChart needs its own explicit size, not just ChartFrame's.
-// `height` forwards straight to MuiBarChart's own native height prop
-// (bypassing ResizeObserver-based measurement entirely), matching the
-// confirmed-working dev/entries.jsx BarChartEntry reference.
-// Deliberate, known exception to DESIGN.md #14 ("responsive = container-
-// sized, not fixed px"): width stays responsive (unset, still auto-
-// measured), only height is fixed, and only because MUI X-Charts' own
-// ResizeObserver-based height measurement is what silently produced a
-// zero-height chart in the first place (CHART-4). Do not "fix" this back
-// to a responsive/aspect-ratio height without re-verifying the underlying
-// MUI measurement bug is actually resolved.
-//
-// UCM-CHART-12: `CHART_HEIGHT` (320) is the number `"standard"` (BarChart's new `size` token) was
-// deliberately pinned to, specifically so this preset's own default did not silently move under
-// this migration -- still used here as ChartFrame's own `minHeight` floor (a card concern,
-// unaffected by CHART-12), and the inner BarChart now takes `size="standard"` instead of `height`.
-const CHART_HEIGHT = 320;
-
-// Dynamic sx factories are outside the registry's documented top-level-object
-// lower bound; the series colour is data-dependent at render time.
-const seriesToggleSx = (colour) => ({
-  color: colour,
-  '&.Mui-checked': { color: colour },
-});
-
-// CHART-5: how many x-axis tick labels to show, evenly spread across
-// data.xLabels, regardless of container width or label length. Replaces
-// MUI's own collision-based tick filtering (which, given enough densely
-// packed categories, can end up hiding every single label — confirmed live
-// with 24 hourly buckets) with a deterministic guarantee that some labels
-// always render. See makeTickLabelInterval below.
-const MAX_X_TICKS = 8;
-
-function makeTickLabelInterval(labelCount) {
-  const step = Math.max(1, Math.ceil(labelCount / MAX_X_TICKS));
-  const lastIndex = labelCount - 1;
-  // `index % step === 0` alone systematically drops the final bucket unless
-  // it happens to land exactly on a step boundary (e.g. 24 labels / step 3
-  // covers indices 0..21, never 23) -- the most recent time bucket is
-  // usually the one that matters most, so it is always force-included.
-  return (_value, index) => index % step === 0 || index === lastIndex;
-}
-
-// CHART-5: a y-axis is "integer" when every value across its currently
-// visible series is a whole number — re-evaluated on every toggle (an axis
-// can flip from fractional to integer, or vice versa, as series are shown/
-// hidden). Empty (no visible series on this axis) is deliberately NOT
-// integer: there's nothing to format, and treating an empty list as
-// vacuously "all integer" would apply the formatter to an axis with no data.
-function isIntegerAxis(seriesList) {
-  return seriesList.length > 0 && seriesList.every(
-    (series) => (series.data || []).every((value) => Number.isInteger(value)),
-  );
-}
-
-// Blanks the tick label for a non-integer value on an axis whose visible
-// series are otherwise all whole numbers -- a deterministic backstop since
-// d3's own "nice tick" choice for a small integer domain can still land on
-// a fractional position (e.g. domain [0,3] ticking at 0, 1.5, 3). Tooltip/
-// legend formatting (a different `location`) is left untouched -- only the
-// on-axis tick text is ever blanked.
-function integerTickFormatter(value, context) {
-  if (context?.location !== 'tick') return String(value);
-  return Number.isInteger(value) ? String(value) : '';
-}
-
-const RANGE_OPTIONS = [
-  { key: '1d', granularity: 'hour', labelKey: 'TimeSeriesChart.RANGE_1_DAY' },
-  { key: '1w', granularity: '4hour', labelKey: 'TimeSeriesChart.RANGE_1_WEEK' },
-  { key: '1m', granularity: 'day', labelKey: 'TimeSeriesChart.RANGE_1_MONTH' },
-  { key: '1y', granularity: 'month', labelKey: 'TimeSeriesChart.RANGE_1_YEAR' },
-];
-
-function SeriesToggleDot({ color, active }) {
-  return (
-    <Box
-      component="span"
-      data-testid="series-colour-dot"
-      sx={{
-        width: (theme) => theme.spacing(1.5),
-        height: (theme) => theme.spacing(1.5),
-        borderRadius: '50%',
-        bgcolor: color,
-        opacity: active ? 1 : 0.35,
-      }}
-    />
-  );
-}
-
-/**
- * A time-series preset on ChartFrame + BarChart: a range picker (emits the
- * selected range AND its mapped granularity to the host) and series toggle
- * checkboxes, in the frame's toolbar slot.
- *
- * Presentational only — takes `data` and callbacks, never fetches. The host
- * owns fetching; this component owns which range is selected and which
- * series are visible, telling the host what changed via `onRangeChange`.
- *
- * Second y-axis is opt-in per series (CHART-5, reversing CHART-2's original
- * "toggles only" choice on operator instruction): a series with
- * `axis: 'secondary'` plots against a second, independently-scaled y-axis
- * (requires `secondaryYAxisLabel`). Omit `axis` (or set it to `'primary'`)
- * on every series for today's single-shared-axis behaviour, unchanged.
- */
-export function TimeSeriesChart({
-  title,
-  subtitle,
-  xAxisLabel,
-  yAxisLabel,
-  secondaryYAxisLabel,
-  data,
-  loading = false,
-  error = false,
-  onRangeChange,
-  defaultRange = '1w',
-  skipAnimation,
-}) {
-  const { t } = useTranslation();
-  const palette = useNeutralChartPalette().categorical;
-  const seriesConfig = data?.series || [];
-
-  const [range, setRange] = useState(defaultRange);
-  // Series identity (keys) is NOT assumed stable at mount: the host commonly
-  // mounts with empty data and fills it asynchronously (fetch-after-mount),
-  // so visibleKeys must sync as new keys appear rather than being captured
-  // once. seenKeys tracks every key ever observed so that a key present in
-  // seriesConfig but absent from visibleKeys is recognized as a deliberate
-  // user toggle-off (stays off) rather than treated as new (defaulted
-  // visible) on the next data update. Both are plain state (not a ref) and
-  // updated together in the render body — React's documented pattern for
-  // syncing derived state from props — so an interrupted/discarded render
-  // (concurrent features) rolls both back together instead of leaving
-  // seenKeys mutated while the paired visibleKeys update is dropped.
-  const [seenKeys, setSeenKeys] = useState(() => new Set());
-  const [visibleKeys, setVisibleKeys] = useState(() => new Set());
-
-  const currentKeys = seriesConfig.map((series) => series.key);
-  const newKeys = currentKeys.filter((key) => !seenKeys.has(key));
-  if (newKeys.length > 0) {
-    setSeenKeys((previous) => {
-      const next = new Set(previous);
-      newKeys.forEach((key) => next.add(key));
-      return next;
-    });
-    setVisibleKeys((previous) => {
-      const next = new Set(previous);
-      newKeys.forEach((key) => next.add(key));
-      return next;
-    });
-  }
-
-  const handleRangeChange = (event) => {
-    const nextRange = event.target.value;
-    setRange(nextRange);
-    const option = RANGE_OPTIONS.find((candidate) => candidate.key === nextRange);
-    onRangeChange?.(nextRange, option?.granularity);
-  };
-
-  const toggleSeries = (key) => {
-    setVisibleKeys((previous) => {
-      const next = new Set(previous);
-      if (next.has(key)) next.delete(key);
-      else next.add(key);
-      return next;
-    });
-  };
-
-  const visibleSeries = seriesConfig.filter((series) => visibleKeys.has(series.key));
-  // Preserve each series' color by its ORIGINAL index, not the filtered
-  // position — otherwise toggling one series off shifts every remaining
-  // series' color, breaking the swatch-to-series identity the toggles rely on.
-  const visiblePalette = visibleSeries.map(
-    (series) => palette[seriesConfig.indexOf(series) % palette.length],
-  );
-  const isDataEmpty = seriesConfig.length === 0 || visibleSeries.length === 0;
-
-  const hasSecondaryAxis = seriesConfig.some((series) => series.axis === 'secondary');
-  if (hasSecondaryAxis && !secondaryYAxisLabel) {
-    throw new Error('TimeSeriesChart requires secondaryYAxisLabel when a series uses axis: "secondary".');
-  }
-  const primaryVisibleSeries = visibleSeries.filter((series) => series.axis !== 'secondary');
-  const secondaryVisibleSeries = visibleSeries.filter((series) => series.axis === 'secondary');
-  const yAxis = hasSecondaryAxis
-    ? [
-      {
-        id: 'primary',
-        label: yAxisLabel,
-        // MUI defaultizes an axis with no explicit `position` to 'left' ONLY
-        // for the first entry in the array -- every subsequent entry
-        // defaults to 'none' (never drawn) unless given one explicitly.
-        // Both are set here, not just 'secondary', so this stays correct
-        // even if the array order ever changes.
-        position: 'left',
-        ...(isIntegerAxis(primaryVisibleSeries) ? { valueFormatter: integerTickFormatter } : {}),
-      },
-      {
-        id: 'secondary',
-        label: secondaryYAxisLabel,
-        position: 'right',
-        ...(isIntegerAxis(secondaryVisibleSeries) ? { valueFormatter: integerTickFormatter } : {}),
-      },
-    ]
-    : (isIntegerAxis(primaryVisibleSeries) ? [{ valueFormatter: integerTickFormatter }] : undefined);
-
-  const toolbar = (
-    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 3, alignItems: 'center' }}>
-      <RadioGroup
-        row
-        value={range}
-        onChange={handleRangeChange}
-        aria-label={t('TimeSeriesChart.RANGE_LABEL')}
-      >
-        {RANGE_OPTIONS.map((option) => (
-          <FormControlLabel
-            key={option.key}
-            value={option.key}
-            control={<Radio size="small" />}
-            label={t(option.labelKey)}
-          />
-        ))}
-      </RadioGroup>
-      {seriesConfig.length > 0 && (
-        <FormGroup row aria-label={t('TimeSeriesChart.SERIES_LABEL')}>
-          {seriesConfig.map((series, index) => (
-            <FormControlLabel
-              key={series.key}
-              control={(
-                <Checkbox
-                  size="small"
-                  checked={visibleKeys.has(series.key)}
-                  onChange={() => toggleSeries(series.key)}
-                  icon={<SeriesToggleDot color={palette[index % palette.length]} active={false} />}
-                  checkedIcon={<SeriesToggleDot color={palette[index % palette.length]} active />}
-                  sx={seriesToggleSx(palette[index % palette.length])}
-                />
-              )}
-              label={series.label}
-            />
-          ))}
-        </FormGroup>
-      )}
-    </Box>
-  );
-
-  return (
-    <ChartFrame
-      title={title}
-      subtitle={subtitle}
-      toolbar={toolbar}
-      loading={loading}
-      error={error}
-      isEmpty={isDataEmpty}
-      minHeight={CHART_HEIGHT}
-    >
-      {!isDataEmpty && (
-        <BarChart
-          xAxisLabel={xAxisLabel}
-          yAxisLabel={yAxisLabel}
-          xAxis={[{
-            data: data?.xLabels || [],
-            tickLabelInterval: makeTickLabelInterval((data?.xLabels || []).length),
-          }]}
-          yAxis={yAxis}
-          series={visibleSeries.map((series) => ({
-            data: series.data,
-            label: series.label,
-            ...(hasSecondaryAxis && series.axis === 'secondary' ? { yAxisId: 'secondary' } : {}),
-          }))}
-          palette={visiblePalette}
-          size="standard"
-          hideLegend={seriesConfig.length > 0}
-          skipAnimation={skipAnimation}
-        />
-      )}
-    </ChartFrame>
-  );
-}
-
-export default TimeSeriesChart;