@cere/cere-design-system 0.0.45 → 0.2.0

package/dist/chunk-DZXNYLVG.js

@@ -0,0 +1,392 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/charts/ChartWidget/ChartWidget.tsx
+var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
+var _Stack = require('@mui/material/Stack'); var _Stack2 = _interopRequireDefault(_Stack);
+var _Typography = require('@mui/material/Typography'); var _Typography2 = _interopRequireDefault(_Typography);
+var _styles = require('@mui/material/styles');
+var _xcharts = require('@mui/x-charts');
+var _bytesize = require('byte-size'); var _bytesize2 = _interopRequireDefault(_bytesize);
+var _datefns = require('date-fns');
+var _jsxruntime = require('react/jsx-runtime');
+var Chart = _styles.styled.call(void 0, (0, _Box2.default))(() => ({
+  height: 200
+}));
+var ChartWidget = ({
+  title,
+  value,
+  history,
+  formatValue = (value2) => _bytesize2.default.call(void 0, value2 || 0).toString()
+}) => {
+  const theme = _styles.useTheme.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Stack2.default, { spacing: 1, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "caption", color: "text.secondary", children: title }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { fontWeight: "bold", children: value }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Chart, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _xcharts.LineChart,
+      {
+        dataset: history || [],
+        axisHighlight: { x: "none", y: "none" },
+        grid: { horizontal: true, vertical: false },
+        margin: { top: 10, right: 20, bottom: 40, left: 40 },
+        colors: [theme.palette.primary.main],
+        slots: {
+          noDataOverlay: () => null
+        },
+        yAxis: [
+          {
+            dataKey: "value",
+            disableLine: true,
+            disableTicks: true,
+            min: _optionalChain([history, 'optionalAccess', _ => _.length]) ? void 0 : 0,
+            max: _optionalChain([history, 'optionalAccess', _2 => _2.length]) ? void 0 : 100,
+            tickNumber: _optionalChain([history, 'optionalAccess', _3 => _3.length]) ? void 0 : 5,
+            valueFormatter: (value2) => formatValue(value2 || 0),
+            tickLabelStyle: {
+              fontSize: 10
+            }
+          }
+        ],
+        xAxis: [
+          {
+            dataKey: "date",
+            min: history && Math.min(...history.map((record) => +record.date)),
+            max: history && Math.max(...history.map((record) => +record.date)),
+            disableLine: true,
+            disableTicks: true,
+            valueFormatter: (date) => _datefns.format.call(void 0, date, "do MMM"),
+            tickPlacement: "end",
+            tickNumber: 1,
+            tickLabelStyle: {
+              fontSize: 10,
+              transform: "translate(-16px, 16px) rotate(-30deg)"
+            }
+          }
+        ],
+        series: [
+          {
+            curve: "linear",
+            dataKey: "value",
+            showMark: false,
+            valueFormatter: (value2) => formatValue(value2 || 0)
+          }
+        ]
+      }
+    ) })
+  ] });
+};
+
+// src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx
+var _react = require('react');
+
+var _Card = require('@mui/material/Card'); var _Card2 = _interopRequireDefault(_Card);
+var _CardHeader = require('@mui/material/CardHeader'); var _CardHeader2 = _interopRequireDefault(_CardHeader);
+var _CardMedia = require('@mui/material/CardMedia'); var _CardMedia2 = _interopRequireDefault(_CardMedia);
+var _CircularProgress = require('@mui/material/CircularProgress'); var _CircularProgress2 = _interopRequireDefault(_CircularProgress);
+var _Divider = require('@mui/material/Divider'); var _Divider2 = _interopRequireDefault(_Divider);
+
+
+
+
+
+
+// src/components/charts/TimeSeriesGraph/TimeRangeSelect.tsx
+var _MenuItem = require('@mui/material/MenuItem'); var _MenuItem2 = _interopRequireDefault(_MenuItem);
+var _TextField = require('@mui/material/TextField'); var _TextField2 = _interopRequireDefault(_TextField);
+
+var TimeRangeSelect = ({ options, value, onChange }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _TextField2.default,
+  {
+    select: true,
+    size: "small",
+    value: _nullishCoalesce(value, () => ( (options.length > 0 ? options[0].value : ""))),
+    onChange: (e) => _optionalChain([onChange, 'optionalCall', _4 => _4(e.target.value)]),
+    "aria-label": "Time range selector",
+    sx: { minWidth: 120 },
+    children: options.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { value: option.value, children: option.label }, option.value))
+  }
+);
+
+// src/components/charts/TimeSeriesGraph/SummaryStats.tsx
+
+
+
+var formatSummaryValue = (value, unit) => {
+  const displayValue = typeof value === "number" ? value.toLocaleString() : value;
+  return unit ? `${displayValue} ${unit}` : displayValue;
+};
+var SummaryStats = ({ items }) => {
+  if (items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _Stack2.default,
+    {
+      direction: "row",
+      spacing: 3,
+      padding: 2,
+      flexWrap: "wrap",
+      useFlexGap: true,
+      role: "list",
+      "aria-label": "Summary statistics",
+      children: items.map((item) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _Stack2.default,
+        {
+          direction: "row",
+          alignItems: "center",
+          spacing: 1,
+          role: "listitem",
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "body2", color: "text.secondary", children: item.label }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "h5", fontWeight: 600, children: formatSummaryValue(item.value, item.unit) })
+          ]
+        },
+        item.label
+      ))
+    }
+  );
+};
+
+// src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx
+
+var ChartContainer = _styles.styled.call(void 0, (0, _Box2.default))({
+  position: "relative",
+  height: 320
+});
+var LoadingOverlay = _styles.styled.call(void 0, (0, _Box2.default))(({ theme }) => ({
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "rgba(255, 255, 255, 0.7)",
+  zIndex: 1,
+  borderRadius: theme.shape.borderRadius
+}));
+var LegendDot = _styles.styled.call(void 0, _Box2.default, {
+  shouldForwardProp: (prop) => prop !== "dotColor"
+})(({ dotColor }) => ({
+  width: 14,
+  height: 14,
+  borderRadius: 4,
+  backgroundColor: dotColor,
+  flexShrink: 0
+}));
+var formatYAxisValue = (value) => {
+  const absValue = Math.abs(value);
+  if (absValue >= 1e9) {
+    return `${(value / 1e9).toFixed(absValue % 1e9 === 0 ? 0 : 1)}B`;
+  }
+  if (absValue >= 1e6) {
+    return `${(value / 1e6).toFixed(absValue % 1e6 === 0 ? 0 : 1)}M`;
+  }
+  if (absValue >= 1e3) {
+    return `${(value / 1e3).toFixed(absValue % 1e3 === 0 ? 0 : 1)}K`;
+  }
+  return String(value);
+};
+var TWENTY_FOUR_HOURS_MS = 24 * 60 * 60 * 1e3;
+var inferXAxisFormat = (min, max) => {
+  if (!min || !max) return "do MMM";
+  const spanMs = max.getTime() - min.getTime();
+  return spanMs <= TWENTY_FOUR_HOURS_MS ? "HH:mm" : "do MMM";
+};
+var buildDataset = (series, hiddenSeries) => {
+  const timestampMap = /* @__PURE__ */ new Map();
+  series.forEach((s) => {
+    if (hiddenSeries.has(s.name)) return;
+    s.data.forEach((dp) => {
+      const ts = dp.timestamp.getTime();
+      if (!timestampMap.has(ts)) {
+        timestampMap.set(ts, { timestamp: dp.timestamp });
+      }
+      timestampMap.get(ts)[s.name] = dp.value;
+    });
+  });
+  return Array.from(timestampMap.values()).sort(
+    (a, b) => a.timestamp.getTime() - b.timestamp.getTime()
+  );
+};
+var TimeSeriesGraph = ({
+  title,
+  series,
+  timeRangeOptions,
+  selectedTimeRange,
+  onTimeRangeChange,
+  summaryItems,
+  showSummary = true,
+  headerAction,
+  loading = false,
+  xAxisFormat
+}) => {
+  const theme = _styles.useTheme.call(void 0, );
+  const [hiddenSeries, setHiddenSeries] = _react.useState.call(void 0, /* @__PURE__ */ new Set());
+  const dataset = _react.useMemo.call(void 0, () => buildDataset(series, hiddenSeries), [series, hiddenSeries]);
+  const visibleSeries = _react.useMemo.call(void 0, 
+    () => series.filter((s) => !hiddenSeries.has(s.name)),
+    [series, hiddenSeries]
+  );
+  const chartColors = _react.useMemo.call(void 0, () => visibleSeries.map((s) => s.color), [visibleSeries]);
+  const handleLegendToggle = _react.useCallback.call(void 0, (seriesName) => {
+    setHiddenSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(seriesName)) {
+        next.delete(seriesName);
+      } else {
+        next.add(seriesName);
+      }
+      return next;
+    });
+  }, []);
+  const timeBounds = _react.useMemo.call(void 0, () => {
+    if (dataset.length === 0) return { min: void 0, max: void 0 };
+    const timestamps = dataset.map((row) => row.timestamp.getTime());
+    return {
+      min: new Date(Math.min(...timestamps)),
+      max: new Date(Math.max(...timestamps))
+    };
+  }, [dataset]);
+  const resolvedXAxisFormat = _react.useMemo.call(void 0, 
+    () => _nullishCoalesce(xAxisFormat, () => ( inferXAxisFormat(timeBounds.min, timeBounds.max))),
+    [xAxisFormat, timeBounds.min, timeBounds.max]
+  );
+  const hasData = dataset.length > 0;
+  const shouldShowSummary = showSummary && summaryItems && summaryItems.length > 0;
+  const headerActionElement = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Stack2.default, { direction: "row", spacing: 1, alignItems: "center", children: [
+    headerAction,
+    timeRangeOptions && timeRangeOptions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      TimeRangeSelect,
+      {
+        options: timeRangeOptions,
+        value: selectedTimeRange,
+        onChange: onTimeRangeChange
+      }
+    )
+  ] });
+  const showHeader = !!title || !!headerAction || timeRangeOptions && timeRangeOptions.length > 0;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _Card2.default,
+    {
+      "aria-label": title ? `Line chart showing ${title}` : "Line chart",
+      role: "figure",
+      children: [
+        showHeader && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _CardHeader2.default,
+          {
+            title,
+            titleTypographyProps: {
+              variant: "subtitle1",
+              fontWeight: 500
+            },
+            action: headerActionElement
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _CardMedia2.default, { children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ChartContainer, { children: [
+            loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingOverlay, { role: "status", "aria-label": "Loading chart data", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CircularProgress2.default, { size: 40 }) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _xcharts.LineChart,
+              {
+                dataset,
+                axisHighlight: { x: "line", y: "none" },
+                grid: { horizontal: true, vertical: false },
+                margin: { top: 10, right: 20, bottom: 40, left: 50 },
+                colors: chartColors.length > 0 ? chartColors : [theme.palette.primary.main],
+                slots: {
+                  noDataOverlay: () => null
+                },
+                tooltip: { trigger: hasData ? "axis" : "none" },
+                yAxis: [
+                  {
+                    disableLine: true,
+                    disableTicks: true,
+                    min: hasData ? void 0 : 0,
+                    max: hasData ? void 0 : 100,
+                    tickNumber: hasData ? void 0 : 5,
+                    valueFormatter: (value) => formatYAxisValue(value || 0),
+                    tickLabelStyle: {
+                      fontSize: 10
+                    }
+                  }
+                ],
+                xAxis: [
+                  {
+                    dataKey: "timestamp",
+                    scaleType: "time",
+                    min: timeBounds.min,
+                    max: timeBounds.max,
+                    disableLine: true,
+                    disableTicks: true,
+                    valueFormatter: (date) => _datefns.format.call(void 0, date, resolvedXAxisFormat),
+                    tickLabelStyle: {
+                      fontSize: 10
+                    }
+                  }
+                ],
+                series: visibleSeries.map((s) => ({
+                  curve: "linear",
+                  dataKey: s.name,
+                  label: s.name,
+                  showMark: false,
+                  connectNulls: false
+                })),
+                slotProps: {
+                  legend: { hidden: true }
+                }
+              }
+            )
+          ] }),
+          series.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _Stack2.default,
+            {
+              direction: "row",
+              spacing: 2,
+              justifyContent: "center",
+              paddingY: 1,
+              flexWrap: "wrap",
+              useFlexGap: true,
+              role: "list",
+              "aria-label": "Chart legend",
+              children: series.map((s) => {
+                const isHidden = hiddenSeries.has(s.name);
+                return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                  _Stack2.default,
+                  {
+                    direction: "row",
+                    spacing: 1,
+                    alignItems: "center",
+                    role: "listitem",
+                    onClick: () => handleLegendToggle(s.name),
+                    sx: {
+                      cursor: "pointer",
+                      opacity: isHidden ? 0.4 : 1,
+                      transition: "opacity 0.2s ease",
+                      userSelect: "none"
+                    },
+                    "aria-pressed": !isHidden,
+                    "aria-label": `Toggle ${s.name} visibility`,
+                    children: [
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LegendDot, { dotColor: s.color }),
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "body2", children: s.name })
+                    ]
+                  },
+                  s.name
+                );
+              })
+            }
+          )
+        ] }),
+        shouldShowSummary && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Divider2.default, {}),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SummaryStats, { items: summaryItems })
+        ] })
+      ]
+    }
+  );
+};
+
+
+
+
+
+
+exports.ChartWidget = ChartWidget; exports.TimeRangeSelect = TimeRangeSelect; exports.SummaryStats = SummaryStats; exports.TimeSeriesGraph = TimeSeriesGraph;
+//# sourceMappingURL=chunk-DZXNYLVG.js.map

package/dist/chunk-DZXNYLVG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/cere-design-system/cere-design-system/dist/chunk-DZXNYLVG.js","../src/components/charts/ChartWidget/ChartWidget.tsx","../src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx","../src/components/charts/TimeSeriesGraph/TimeRangeSelect.tsx","../src/components/charts/TimeSeriesGraph/SummaryStats.tsx"],"names":["value","jsx","Stack","styled","useTheme","LineChart"],"mappings":"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","file":"/home/runner/work/cere-design-system/cere-design-system/dist/chunk-DZXNYLVG.js","sourcesContent":[null,"import { ReactNode } from 'react';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport { styled, useTheme } from '@mui/material/styles';\nimport { LineChart } from '@mui/x-charts';\nimport size from 'byte-size';\nimport { format } from 'date-fns';\n\ntype ChartWidgetHistoryRecord = {\n  date: Date;\n  value: number;\n};\n\nexport type ChartWidgetProps = {\n  title: string;\n  value?: ReactNode;\n  history?: ChartWidgetHistoryRecord[];\n  formatValue?: (value: number) => string;\n};\n\nconst Chart = styled(Box)(() => ({\n  height: 200,\n}));\n\nexport const ChartWidget = ({\n  title,\n  value,\n  history,\n  formatValue = (value) => size(value || 0).toString(),\n}: ChartWidgetProps) => {\n  const theme = useTheme();\n\n  return (\n    <Stack spacing={1}>\n      <Typography variant=\"caption\" color=\"text.secondary\">\n        {title}\n      </Typography>\n      <Typography fontWeight=\"bold\">{value}</Typography>\n\n      <Chart>\n        <LineChart\n          dataset={history || []}\n          axisHighlight={{ x: 'none', y: 'none' }}\n          grid={{ horizontal: true, vertical: false }}\n          margin={{ top: 10, right: 20, bottom: 40, left: 40 }}\n          colors={[theme.palette.primary.main]}\n          slots={{\n            noDataOverlay: () => null,\n          }}\n          yAxis={[\n            {\n              dataKey: 'value',\n              disableLine: true,\n              disableTicks: true,\n              min: history?.length ? undefined : 0,\n              max: history?.length ? undefined : 100,\n              tickNumber: history?.length ? undefined : 5,\n              valueFormatter: (value) => formatValue(value || 0),\n              tickLabelStyle: {\n                fontSize: 10,\n              },\n            },\n          ]}\n          xAxis={[\n            {\n              dataKey: 'date',\n              min: history && Math.min(...history.map((record) => +record.date)),\n              max: history && Math.max(...history.map((record) => +record.date)),\n              disableLine: true,\n              disableTicks: true,\n              valueFormatter: (date) => format(date, 'do MMM'),\n              tickPlacement: 'end',\n              tickNumber: 1,\n\n              tickLabelStyle: {\n                fontSize: 10,\n                transform: 'translate(-16px, 16px) rotate(-30deg)',\n              },\n            },\n          ]}\n          series={[\n            {\n              curve: 'linear',\n              dataKey: 'value',\n              showMark: false,\n              valueFormatter: (value) => formatValue(value || 0),\n            },\n          ]}\n        />\n      </Chart>\n    </Stack>\n  );\n};\n","import { ReactNode, useCallback, useMemo, useState } from 'react';\nimport Box from '@mui/material/Box';\nimport Card from '@mui/material/Card';\nimport CardHeader from '@mui/material/CardHeader';\nimport CardMedia from '@mui/material/CardMedia';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport Divider from '@mui/material/Divider';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport { styled, useTheme } from '@mui/material/styles';\nimport { LineChart } from '@mui/x-charts';\nimport { format } from 'date-fns';\n\nimport { TimeRangeSelect, type TimeRangeOption } from './TimeRangeSelect';\nimport { SummaryStats, type SummaryItem } from './SummaryStats';\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n\n/**\n * A single data point in a time series.\n * Use `null` for the value to represent missing/gap data — the line will break.\n */\nexport interface DataPoint {\n  /** Timestamp of the observation */\n  timestamp: Date;\n  /** Numeric value, or `null` to indicate a gap in the data */\n  value: number | null;\n}\n\n/**\n * Represents one line on the graph (a named data series).\n */\nexport interface DataSeries {\n  /** Unique display name for this series (shown in legend) */\n  name: string;\n  /** CSS color string for the line and legend indicator */\n  color: string;\n  /** Ordered array of data points */\n  data: DataPoint[];\n}\n\nexport interface TimeSeriesGraphProps {\n  /** Optional title displayed at the top-left of the graph card */\n  title?: string;\n  /**\n   * Array of data series to render. Each series becomes one line on the graph.\n   * There is no hardcoded limit on the number of series.\n   */\n  series: DataSeries[];\n  /**\n   * Configurable time range options for the dropdown selector.\n   * When omitted, the time range dropdown is not rendered.\n   */\n  timeRangeOptions?: TimeRangeOption[];\n  /** Currently selected time range value (controlled) */\n  selectedTimeRange?: string;\n  /** Callback invoked when the user picks a different time range */\n  onTimeRangeChange?: (value: string) => void;\n  /**\n   * Optional array of summary statistics displayed below the graph.\n   * When omitted or empty, the summary section is hidden.\n   */\n  summaryItems?: SummaryItem[];\n  /**\n   * Whether to show the summary statistics section.\n   * Defaults to `true`. Set to `false` to explicitly hide, even when `summaryItems` are provided.\n   */\n  showSummary?: boolean;\n  /**\n   * Optional header action element rendered to the right of the title\n   * (e.g., a secondary dropdown or filter control).\n   */\n  headerAction?: ReactNode;\n  /**\n   * When `true`, shows a loading overlay (spinner) over the graph area\n   * while the header remains visible and interactive.\n   */\n  loading?: boolean;\n  /**\n   * Override the x-axis date format string (date-fns format tokens).\n   * When omitted, the format is auto-detected from the data's time span:\n   * - <= 24 hours → `'HH:mm'`\n   * - > 24 hours  → `'do MMM'`\n   */\n  xAxisFormat?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Styled helpers\n// ---------------------------------------------------------------------------\n\nconst ChartContainer = styled(Box)({\n  position: 'relative',\n  height: 320,\n});\n\nconst LoadingOverlay = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  inset: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: 'rgba(255, 255, 255, 0.7)',\n  zIndex: 1,\n  borderRadius: theme.shape.borderRadius,\n}));\n\nconst LegendDot = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'dotColor',\n})<{ dotColor: string }>(({ dotColor }) => ({\n  width: 14,\n  height: 14,\n  borderRadius: 4,\n  backgroundColor: dotColor,\n  flexShrink: 0,\n}));\n\n// ---------------------------------------------------------------------------\n// Utility functions\n// ---------------------------------------------------------------------------\n\n/**\n * Formats large Y-axis values into shorthand notation.\n * 1,000 → 1K, 1,000,000 → 1M, 1,000,000,000 → 1B\n */\nconst formatYAxisValue = (value: number): string => {\n  const absValue = Math.abs(value);\n  if (absValue >= 1_000_000_000) {\n    return `${(value / 1_000_000_000).toFixed(absValue % 1_000_000_000 === 0 ? 0 : 1)}B`;\n  }\n  if (absValue >= 1_000_000) {\n    return `${(value / 1_000_000).toFixed(absValue % 1_000_000 === 0 ? 0 : 1)}M`;\n  }\n  if (absValue >= 1_000) {\n    return `${(value / 1_000).toFixed(absValue % 1_000 === 0 ? 0 : 1)}K`;\n  }\n  return String(value);\n};\n\nconst TWENTY_FOUR_HOURS_MS = 24 * 60 * 60 * 1000;\n\n/**\n * Infers the appropriate x-axis date format string based on the time span of the data.\n * - Span <= 24 hours → `'HH:mm'` (e.g., \"14:30\")\n * - Span > 24 hours → `'do MMM'` (e.g., \"2nd Jan\")\n */\nexport const inferXAxisFormat = (\n  min: Date | undefined,\n  max: Date | undefined,\n): string => {\n  if (!min || !max) return 'do MMM';\n  const spanMs = max.getTime() - min.getTime();\n  return spanMs <= TWENTY_FOUR_HOURS_MS ? 'HH:mm' : 'do MMM';\n};\n\n/** A single row in the chart dataset — timestamp plus one field per series. */\ntype DatasetRow = Record<string, string | number | Date | null | undefined>;\n\n/**\n * Builds the unified dataset array that MUI X-Charts expects.\n * Each row is keyed by timestamp with one field per series.\n */\nconst buildDataset = (\n  series: DataSeries[],\n  hiddenSeries: Set<string>,\n): DatasetRow[] => {\n  // Collect all unique timestamps across all visible series\n  const timestampMap = new Map<number, DatasetRow>();\n\n  series.forEach((s) => {\n    if (hiddenSeries.has(s.name)) return;\n    s.data.forEach((dp) => {\n      const ts = dp.timestamp.getTime();\n      if (!timestampMap.has(ts)) {\n        timestampMap.set(ts, { timestamp: dp.timestamp } as DatasetRow);\n      }\n      timestampMap.get(ts)![s.name] = dp.value;\n    });\n  });\n\n  // Sort by timestamp ascending\n  return Array.from(timestampMap.values()).sort(\n    (a, b) => (a.timestamp as Date).getTime() - (b.timestamp as Date).getTime(),\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * A reusable time series graph component that displays one or more data lines\n * over a shared time axis. Supports configurable time range selection,\n * optional summary statistics, interactive legend toggling, crosshair tooltips,\n * and a loading state.\n *\n * Built on `@mui/x-charts` LineChart and the Cere Design System theme.\n *\n * @example\n * ```tsx\n * <TimeSeriesGraph\n *   title=\"Engagement over time\"\n *   series={[\n *     { name: 'Engagements', color: '#6750A4', data: engagementData },\n *     { name: 'Unique Streams', color: '#4caf50', data: streamData },\n *   ]}\n *   timeRangeOptions={[\n *     { label: 'Last hour', value: 'hour' },\n *     { label: '24 hours', value: 'day' },\n *     { label: '1 week', value: 'week' },\n *     { label: '1 month', value: 'month' },\n *   ]}\n *   selectedTimeRange=\"week\"\n *   onTimeRangeChange={(range) => fetchData(range)}\n *   summaryItems={[\n *     { label: 'Total Engagements', value: 11372 },\n *     { label: 'Daily Engagements', value: 156 },\n *   ]}\n * />\n * ```\n *\n * Figma reference: [ROB Design - Node 162:1172](https://www.figma.com/design/xky11VbkkFcgZLwZE8BdCN/ROB?node-id=162-1172&m=dev)\n */\nexport const TimeSeriesGraph = ({\n  title,\n  series,\n  timeRangeOptions,\n  selectedTimeRange,\n  onTimeRangeChange,\n  summaryItems,\n  showSummary = true,\n  headerAction,\n  loading = false,\n  xAxisFormat,\n}: TimeSeriesGraphProps) => {\n  const theme = useTheme();\n  const [hiddenSeries, setHiddenSeries] = useState<Set<string>>(new Set());\n\n  // Build the MUI X-Charts dataset from visible series\n  const dataset = useMemo(() => buildDataset(series, hiddenSeries), [series, hiddenSeries]);\n\n  // Visible series (exclude hidden)\n  const visibleSeries = useMemo(\n    () => series.filter((s) => !hiddenSeries.has(s.name)),\n    [series, hiddenSeries],\n  );\n\n  // Colors array matching the order of visible series\n  const chartColors = useMemo(() => visibleSeries.map((s) => s.color), [visibleSeries]);\n\n  // Toggle a series' visibility\n  const handleLegendToggle = useCallback((seriesName: string) => {\n    setHiddenSeries((prev) => {\n      const next = new Set(prev);\n      if (next.has(seriesName)) {\n        next.delete(seriesName);\n      } else {\n        next.add(seriesName);\n      }\n      return next;\n    });\n  }, []);\n\n  // Compute time bounds for the X-axis from visible data\n  const timeBounds = useMemo(() => {\n    if (dataset.length === 0) return { min: undefined, max: undefined };\n    const timestamps = dataset.map((row) => (row.timestamp as Date).getTime());\n    return {\n      min: new Date(Math.min(...timestamps)),\n      max: new Date(Math.max(...timestamps)),\n    };\n  }, [dataset]);\n\n  // Resolve the x-axis date format: explicit prop wins, otherwise auto-detect\n  const resolvedXAxisFormat = useMemo(\n    () => xAxisFormat ?? inferXAxisFormat(timeBounds.min, timeBounds.max),\n    [xAxisFormat, timeBounds.min, timeBounds.max],\n  );\n\n  // Determine whether we have data to display\n  const hasData = dataset.length > 0;\n\n  // Whether to render the summary section\n  const shouldShowSummary = showSummary && summaryItems && summaryItems.length > 0;\n\n  // Build the header action area (time range + optional custom action)\n  const headerActionElement = (\n    <Stack direction=\"row\" spacing={1} alignItems=\"center\">\n      {headerAction}\n      {timeRangeOptions && timeRangeOptions.length > 0 && (\n        <TimeRangeSelect\n          options={timeRangeOptions}\n          value={selectedTimeRange}\n          onChange={onTimeRangeChange}\n        />\n      )}\n    </Stack>\n  );\n\n  // Determine whether to show the header at all\n  const showHeader = !!title || !!headerAction || (timeRangeOptions && timeRangeOptions.length > 0);\n\n  return (\n    <Card\n      aria-label={title ? `Line chart showing ${title}` : 'Line chart'}\n      role=\"figure\"\n    >\n      {showHeader && (\n        <CardHeader\n          title={title}\n          titleTypographyProps={{\n            variant: 'subtitle1',\n            fontWeight: 500,\n          }}\n          action={headerActionElement}\n        />\n      )}\n\n      <CardMedia>\n        <ChartContainer>\n          {loading && (\n            <LoadingOverlay role=\"status\" aria-label=\"Loading chart data\">\n              <CircularProgress size={40} />\n            </LoadingOverlay>\n          )}\n\n          <LineChart\n            dataset={dataset}\n            axisHighlight={{ x: 'line', y: 'none' }}\n            grid={{ horizontal: true, vertical: false }}\n            margin={{ top: 10, right: 20, bottom: 40, left: 50 }}\n            colors={chartColors.length > 0 ? chartColors : [theme.palette.primary.main]}\n            slots={{\n              noDataOverlay: () => null,\n            }}\n            tooltip={{ trigger: hasData ? 'axis' : 'none' }}\n            yAxis={[\n              {\n                disableLine: true,\n                disableTicks: true,\n                min: hasData ? undefined : 0,\n                max: hasData ? undefined : 100,\n                tickNumber: hasData ? undefined : 5,\n                valueFormatter: (value: number) => formatYAxisValue(value || 0),\n                tickLabelStyle: {\n                  fontSize: 10,\n                },\n              },\n            ]}\n            xAxis={[\n              {\n                dataKey: 'timestamp',\n                scaleType: 'time',\n                min: timeBounds.min,\n                max: timeBounds.max,\n                disableLine: true,\n                disableTicks: true,\n                valueFormatter: (date: Date) => format(date, resolvedXAxisFormat),\n                tickLabelStyle: {\n                  fontSize: 10,\n                },\n              },\n            ]}\n            series={visibleSeries.map((s) => ({\n              curve: 'linear' as const,\n              dataKey: s.name,\n              label: s.name,\n              showMark: false,\n              connectNulls: false,\n            }))}\n            // Hide the built-in legend — we render a custom one below\n            slotProps={{\n              legend: { hidden: true },\n            }}\n          />\n        </ChartContainer>\n\n        {/* Custom interactive legend */}\n        {series.length > 0 && (\n          <Stack\n            direction=\"row\"\n            spacing={2}\n            justifyContent=\"center\"\n            paddingY={1}\n            flexWrap=\"wrap\"\n            useFlexGap\n            role=\"list\"\n            aria-label=\"Chart legend\"\n          >\n            {series.map((s) => {\n              const isHidden = hiddenSeries.has(s.name);\n              return (\n                <Stack\n                  key={s.name}\n                  direction=\"row\"\n                  spacing={1}\n                  alignItems=\"center\"\n                  role=\"listitem\"\n                  onClick={() => handleLegendToggle(s.name)}\n                  sx={{\n                    cursor: 'pointer',\n                    opacity: isHidden ? 0.4 : 1,\n                    transition: 'opacity 0.2s ease',\n                    userSelect: 'none',\n                  }}\n                  aria-pressed={!isHidden}\n                  aria-label={`Toggle ${s.name} visibility`}\n                >\n                  <LegendDot dotColor={s.color} />\n                  <Typography variant=\"body2\">{s.name}</Typography>\n                </Stack>\n              );\n            })}\n          </Stack>\n        )}\n      </CardMedia>\n\n      {/* Summary statistics */}\n      {shouldShowSummary && (\n        <>\n          <Divider />\n          <SummaryStats items={summaryItems!} />\n        </>\n      )}\n    </Card>\n  );\n};\n","import MenuItem from '@mui/material/MenuItem';\nimport TextField from '@mui/material/TextField';\n\n/**\n * Represents a single time range option in the dropdown.\n */\nexport interface TimeRangeOption {\n  /** Display label shown in the dropdown (e.g., \"1 week\") */\n  label: string;\n  /** Value identifier passed to the callback on selection */\n  value: string;\n}\n\nexport interface TimeRangeSelectProps {\n  /** Available time range options */\n  options: TimeRangeOption[];\n  /** Currently selected time range value */\n  value?: string;\n  /** Callback invoked when user selects a different time range */\n  onChange?: (value: string) => void;\n}\n\n/**\n * Configurable time range dropdown selector.\n * Renders a compact select field with the provided time range options.\n *\n * @example\n * ```tsx\n * <TimeRangeSelect\n *   options={[\n *     { label: 'Last hour', value: 'hour' },\n *     { label: '24 hours', value: 'day' },\n *     { label: '1 week', value: 'week' },\n *   ]}\n *   value=\"week\"\n *   onChange={(value) => console.log(value)}\n * />\n * ```\n */\nexport const TimeRangeSelect = ({ options, value, onChange }: TimeRangeSelectProps) => (\n  <TextField\n    select\n    size=\"small\"\n    value={value ?? (options.length > 0 ? options[0].value : '')}\n    onChange={(e) => onChange?.(e.target.value)}\n    aria-label=\"Time range selector\"\n    sx={{ minWidth: 120 }}\n  >\n    {options.map((option) => (\n      <MenuItem key={option.value} value={option.value}>\n        {option.label}\n      </MenuItem>\n    ))}\n  </TextField>\n);\n","import Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\n/**\n * Represents a single summary statistic item displayed below the graph.\n */\nexport interface SummaryItem {\n  /** Descriptive label (e.g., \"Total Engagements\") */\n  label: string;\n  /** Numeric or string value (e.g., \"13.72\" or 11372) */\n  value: string | number;\n  /** Optional unit suffix (e.g., \"K\", \"GB\", \"%\") */\n  unit?: string;\n}\n\nexport interface SummaryStatsProps {\n  /** Array of summary items to display */\n  items: SummaryItem[];\n}\n\n/**\n * Formats a summary value with its optional unit.\n */\nconst formatSummaryValue = (value: string | number, unit?: string): string => {\n  const displayValue = typeof value === 'number' ? value.toLocaleString() : value;\n  return unit ? `${displayValue} ${unit}` : displayValue;\n};\n\n/**\n * Renders a horizontal row of summary statistics below the graph.\n * Each item shows a label with its corresponding value and optional unit.\n *\n * Matches the Figma design layout with label in secondary text color\n * and value in bold heading typography.\n *\n * @example\n * ```tsx\n * <SummaryStats\n *   items={[\n *     { label: 'Total Engagements', value: 11372 },\n *     { label: 'Total Consumed', value: '156.91', unit: 'GB' },\n *   ]}\n * />\n * ```\n */\nexport const SummaryStats = ({ items }: SummaryStatsProps) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <Stack\n      direction=\"row\"\n      spacing={3}\n      padding={2}\n      flexWrap=\"wrap\"\n      useFlexGap\n      role=\"list\"\n      aria-label=\"Summary statistics\"\n    >\n      {items.map((item) => (\n        <Stack\n          key={item.label}\n          direction=\"row\"\n          alignItems=\"center\"\n          spacing={1}\n          role=\"listitem\"\n        >\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {item.label}\n          </Typography>\n          <Typography variant=\"h5\" fontWeight={600}>\n            {formatSummaryValue(item.value, item.unit)}\n          </Typography>\n        </Stack>\n      ))}\n    </Stack>\n  );\n};\n"]}