@cere/cere-design-system 0.0.45 → 0.2.0

package/dist/chunk-BT7XUTT5.mjs

@@ -0,0 +1,392 @@
+// src/components/charts/ChartWidget/ChartWidget.tsx
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { styled, useTheme } from "@mui/material/styles";
+import { LineChart } from "@mui/x-charts";
+import size from "byte-size";
+import { format } from "date-fns";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Chart = styled(Box)(() => ({
+  height: 200
+}));
+var ChartWidget = ({
+  title,
+  value,
+  history,
+  formatValue = (value2) => size(value2 || 0).toString()
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: title }),
+    /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: value }),
+    /* @__PURE__ */ jsx(Chart, { children: /* @__PURE__ */ jsx(
+      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: history?.length ? void 0 : 0,
+            max: history?.length ? void 0 : 100,
+            tickNumber: history?.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) => format(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
+import { useCallback, useMemo, useState } from "react";
+import Box2 from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardMedia from "@mui/material/CardMedia";
+import CircularProgress from "@mui/material/CircularProgress";
+import Divider from "@mui/material/Divider";
+import Stack3 from "@mui/material/Stack";
+import Typography3 from "@mui/material/Typography";
+import { styled as styled2, useTheme as useTheme2 } from "@mui/material/styles";
+import { LineChart as LineChart2 } from "@mui/x-charts";
+import { format as format2 } from "date-fns";
+
+// src/components/charts/TimeSeriesGraph/TimeRangeSelect.tsx
+import MenuItem from "@mui/material/MenuItem";
+import TextField from "@mui/material/TextField";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TimeRangeSelect = ({ options, value, onChange }) => /* @__PURE__ */ jsx2(
+  TextField,
+  {
+    select: true,
+    size: "small",
+    value: value ?? (options.length > 0 ? options[0].value : ""),
+    onChange: (e) => onChange?.(e.target.value),
+    "aria-label": "Time range selector",
+    sx: { minWidth: 120 },
+    children: options.map((option) => /* @__PURE__ */ jsx2(MenuItem, { value: option.value, children: option.label }, option.value))
+  }
+);
+
+// src/components/charts/TimeSeriesGraph/SummaryStats.tsx
+import Stack2 from "@mui/material/Stack";
+import Typography2 from "@mui/material/Typography";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+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__ */ jsx3(
+    Stack2,
+    {
+      direction: "row",
+      spacing: 3,
+      padding: 2,
+      flexWrap: "wrap",
+      useFlexGap: true,
+      role: "list",
+      "aria-label": "Summary statistics",
+      children: items.map((item) => /* @__PURE__ */ jsxs2(
+        Stack2,
+        {
+          direction: "row",
+          alignItems: "center",
+          spacing: 1,
+          role: "listitem",
+          children: [
+            /* @__PURE__ */ jsx3(Typography2, { variant: "body2", color: "text.secondary", children: item.label }),
+            /* @__PURE__ */ jsx3(Typography2, { variant: "h5", fontWeight: 600, children: formatSummaryValue(item.value, item.unit) })
+          ]
+        },
+        item.label
+      ))
+    }
+  );
+};
+
+// src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var ChartContainer = styled2(Box2)({
+  position: "relative",
+  height: 320
+});
+var LoadingOverlay = styled2(Box2)(({ 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 = styled2(Box2, {
+  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 = useTheme2();
+  const [hiddenSeries, setHiddenSeries] = useState(/* @__PURE__ */ new Set());
+  const dataset = useMemo(() => buildDataset(series, hiddenSeries), [series, hiddenSeries]);
+  const visibleSeries = useMemo(
+    () => series.filter((s) => !hiddenSeries.has(s.name)),
+    [series, hiddenSeries]
+  );
+  const chartColors = useMemo(() => visibleSeries.map((s) => s.color), [visibleSeries]);
+  const handleLegendToggle = useCallback((seriesName) => {
+    setHiddenSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(seriesName)) {
+        next.delete(seriesName);
+      } else {
+        next.add(seriesName);
+      }
+      return next;
+    });
+  }, []);
+  const timeBounds = useMemo(() => {
+    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 = useMemo(
+    () => 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__ */ jsxs3(Stack3, { direction: "row", spacing: 1, alignItems: "center", children: [
+    headerAction,
+    timeRangeOptions && timeRangeOptions.length > 0 && /* @__PURE__ */ jsx4(
+      TimeRangeSelect,
+      {
+        options: timeRangeOptions,
+        value: selectedTimeRange,
+        onChange: onTimeRangeChange
+      }
+    )
+  ] });
+  const showHeader = !!title || !!headerAction || timeRangeOptions && timeRangeOptions.length > 0;
+  return /* @__PURE__ */ jsxs3(
+    Card,
+    {
+      "aria-label": title ? `Line chart showing ${title}` : "Line chart",
+      role: "figure",
+      children: [
+        showHeader && /* @__PURE__ */ jsx4(
+          CardHeader,
+          {
+            title,
+            titleTypographyProps: {
+              variant: "subtitle1",
+              fontWeight: 500
+            },
+            action: headerActionElement
+          }
+        ),
+        /* @__PURE__ */ jsxs3(CardMedia, { children: [
+          /* @__PURE__ */ jsxs3(ChartContainer, { children: [
+            loading && /* @__PURE__ */ jsx4(LoadingOverlay, { role: "status", "aria-label": "Loading chart data", children: /* @__PURE__ */ jsx4(CircularProgress, { size: 40 }) }),
+            /* @__PURE__ */ jsx4(
+              LineChart2,
+              {
+                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) => format2(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__ */ jsx4(
+            Stack3,
+            {
+              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__ */ jsxs3(
+                  Stack3,
+                  {
+                    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__ */ jsx4(LegendDot, { dotColor: s.color }),
+                      /* @__PURE__ */ jsx4(Typography3, { variant: "body2", children: s.name })
+                    ]
+                  },
+                  s.name
+                );
+              })
+            }
+          )
+        ] }),
+        shouldShowSummary && /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx4(Divider, {}),
+          /* @__PURE__ */ jsx4(SummaryStats, { items: summaryItems })
+        ] })
+      ]
+    }
+  );
+};
+
+export {
+  ChartWidget,
+  TimeRangeSelect,
+  SummaryStats,
+  TimeSeriesGraph
+};
+//# sourceMappingURL=chunk-BT7XUTT5.mjs.map

package/dist/chunk-BT7XUTT5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/charts/ChartWidget/ChartWidget.tsx","../src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx","../src/components/charts/TimeSeriesGraph/TimeRangeSelect.tsx","../src/components/charts/TimeSeriesGraph/SummaryStats.tsx"],"sourcesContent":["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"],"mappings":";AACA,OAAO,SAAS;AAChB,OAAO,WAAW;AAClB,OAAO,gBAAgB;AACvB,SAAS,QAAQ,gBAAgB;AACjC,SAAS,iBAAiB;AAC1B,OAAO,UAAU;AACjB,SAAS,cAAc;AA2BnB,SACE,KADF;AAbJ,IAAM,QAAQ,OAAO,GAAG,EAAE,OAAO;AAAA,EAC/B,QAAQ;AACV,EAAE;AAEK,IAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc,CAACA,WAAU,KAAKA,UAAS,CAAC,EAAE,SAAS;AACrD,MAAwB;AACtB,QAAM,QAAQ,SAAS;AAEvB,SACE,qBAAC,SAAM,SAAS,GACd;AAAA,wBAAC,cAAW,SAAQ,WAAU,OAAM,kBACjC,iBACH;AAAA,IACA,oBAAC,cAAW,YAAW,QAAQ,iBAAM;AAAA,IAErC,oBAAC,SACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,WAAW,CAAC;AAAA,QACrB,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,QACtC,MAAM,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA,QAC1C,QAAQ,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,IAAI,MAAM,GAAG;AAAA,QACnD,QAAQ,CAAC,MAAM,QAAQ,QAAQ,IAAI;AAAA,QACnC,OAAO;AAAA,UACL,eAAe,MAAM;AAAA,QACvB;AAAA,QACA,OAAO;AAAA,UACL;AAAA,YACE,SAAS;AAAA,YACT,aAAa;AAAA,YACb,cAAc;AAAA,YACd,KAAK,SAAS,SAAS,SAAY;AAAA,YACnC,KAAK,SAAS,SAAS,SAAY;AAAA,YACnC,YAAY,SAAS,SAAS,SAAY;AAAA,YAC1C,gBAAgB,CAACA,WAAU,YAAYA,UAAS,CAAC;AAAA,YACjD,gBAAgB;AAAA,cACd,UAAU;AAAA,YACZ;AAAA,UACF;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL;AAAA,YACE,SAAS;AAAA,YACT,KAAK,WAAW,KAAK,IAAI,GAAG,QAAQ,IAAI,CAAC,WAAW,CAAC,OAAO,IAAI,CAAC;AAAA,YACjE,KAAK,WAAW,KAAK,IAAI,GAAG,QAAQ,IAAI,CAAC,WAAW,CAAC,OAAO,IAAI,CAAC;AAAA,YACjE,aAAa;AAAA,YACb,cAAc;AAAA,YACd,gBAAgB,CAAC,SAAS,OAAO,MAAM,QAAQ;AAAA,YAC/C,eAAe;AAAA,YACf,YAAY;AAAA,YAEZ,gBAAgB;AAAA,cACd,UAAU;AAAA,cACV,WAAW;AAAA,YACb;AAAA,UACF;AAAA,QACF;AAAA,QACA,QAAQ;AAAA,UACN;AAAA,YACE,OAAO;AAAA,YACP,SAAS;AAAA,YACT,UAAU;AAAA,YACV,gBAAgB,CAACA,WAAU,YAAYA,UAAS,CAAC;AAAA,UACnD;AAAA,QACF;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;;;AC7FA,SAAoB,aAAa,SAAS,gBAAgB;AAC1D,OAAOC,UAAS;AAChB,OAAO,UAAU;AACjB,OAAO,gBAAgB;AACvB,OAAO,eAAe;AACtB,OAAO,sBAAsB;AAC7B,OAAO,aAAa;AACpB,OAAOC,YAAW;AAClB,OAAOC,iBAAgB;AACvB,SAAS,UAAAC,SAAQ,YAAAC,iBAAgB;AACjC,SAAS,aAAAC,kBAAiB;AAC1B,SAAS,UAAAC,eAAc;;;ACXvB,OAAO,cAAc;AACrB,OAAO,eAAe;AAgDhB,gBAAAC,YAAA;AAVC,IAAM,kBAAkB,CAAC,EAAE,SAAS,OAAO,SAAS,MACzD,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACC,QAAM;AAAA,IACN,MAAK;AAAA,IACL,OAAO,UAAU,QAAQ,SAAS,IAAI,QAAQ,CAAC,EAAE,QAAQ;AAAA,IACzD,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK;AAAA,IAC1C,cAAW;AAAA,IACX,IAAI,EAAE,UAAU,IAAI;AAAA,IAEnB,kBAAQ,IAAI,CAAC,WACZ,gBAAAA,KAAC,YAA4B,OAAO,OAAO,OACxC,iBAAO,SADK,OAAO,KAEtB,CACD;AAAA;AACH;;;ACrDF,OAAOC,YAAW;AAClB,OAAOC,iBAAgB;AA4Df,SAOE,OAAAC,MAPF,QAAAC,aAAA;AAtCR,IAAM,qBAAqB,CAAC,OAAwB,SAA0B;AAC5E,QAAM,eAAe,OAAO,UAAU,WAAW,MAAM,eAAe,IAAI;AAC1E,SAAO,OAAO,GAAG,YAAY,IAAI,IAAI,KAAK;AAC5C;AAmBO,IAAM,eAAe,CAAC,EAAE,MAAM,MAAyB;AAC5D,MAAI,MAAM,WAAW,GAAG;AACtB,WAAO;AAAA,EACT;AAEA,SACE,gBAAAD;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAS;AAAA,MACT,YAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAW;AAAA,MAEV,gBAAM,IAAI,CAAC,SACV,gBAAAG;AAAA,QAACH;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,YAAW;AAAA,UACX,SAAS;AAAA,UACT,MAAK;AAAA,UAEL;AAAA,4BAAAE,KAACD,aAAA,EAAW,SAAQ,SAAQ,OAAM,kBAC/B,eAAK,OACR;AAAA,YACA,gBAAAC,KAACD,aAAA,EAAW,SAAQ,MAAK,YAAY,KAClC,6BAAmB,KAAK,OAAO,KAAK,IAAI,GAC3C;AAAA;AAAA;AAAA,QAXK,KAAK;AAAA,MAYZ,CACD;AAAA;AAAA,EACH;AAEJ;;;AFmNI,SAoII,UAjIA,OAAAG,MAHJ,QAAAC,aAAA;AApMJ,IAAM,iBAAiBC,QAAOC,IAAG,EAAE;AAAA,EACjC,UAAU;AAAA,EACV,QAAQ;AACV,CAAC;AAED,IAAM,iBAAiBD,QAAOC,IAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACjD,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,cAAc,MAAM,MAAM;AAC5B,EAAE;AAEF,IAAM,YAAYD,QAAOC,MAAK;AAAA,EAC5B,mBAAmB,CAAC,SAAS,SAAS;AACxC,CAAC,EAAwB,CAAC,EAAE,SAAS,OAAO;AAAA,EAC1C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,YAAY;AACd,EAAE;AAUF,IAAM,mBAAmB,CAAC,UAA0B;AAClD,QAAM,WAAW,KAAK,IAAI,KAAK;AAC/B,MAAI,YAAY,KAAe;AAC7B,WAAO,IAAI,QAAQ,KAAe,QAAQ,WAAW,QAAkB,IAAI,IAAI,CAAC,CAAC;AAAA,EACnF;AACA,MAAI,YAAY,KAAW;AACzB,WAAO,IAAI,QAAQ,KAAW,QAAQ,WAAW,QAAc,IAAI,IAAI,CAAC,CAAC;AAAA,EAC3E;AACA,MAAI,YAAY,KAAO;AACrB,WAAO,IAAI,QAAQ,KAAO,QAAQ,WAAW,QAAU,IAAI,IAAI,CAAC,CAAC;AAAA,EACnE;AACA,SAAO,OAAO,KAAK;AACrB;AAEA,IAAM,uBAAuB,KAAK,KAAK,KAAK;AAOrC,IAAM,mBAAmB,CAC9B,KACA,QACW;AACX,MAAI,CAAC,OAAO,CAAC,IAAK,QAAO;AACzB,QAAM,SAAS,IAAI,QAAQ,IAAI,IAAI,QAAQ;AAC3C,SAAO,UAAU,uBAAuB,UAAU;AACpD;AASA,IAAM,eAAe,CACnB,QACA,iBACiB;AAEjB,QAAM,eAAe,oBAAI,IAAwB;AAEjD,SAAO,QAAQ,CAAC,MAAM;AACpB,QAAI,aAAa,IAAI,EAAE,IAAI,EAAG;AAC9B,MAAE,KAAK,QAAQ,CAAC,OAAO;AACrB,YAAM,KAAK,GAAG,UAAU,QAAQ;AAChC,UAAI,CAAC,aAAa,IAAI,EAAE,GAAG;AACzB,qBAAa,IAAI,IAAI,EAAE,WAAW,GAAG,UAAU,CAAe;AAAA,MAChE;AACA,mBAAa,IAAI,EAAE,EAAG,EAAE,IAAI,IAAI,GAAG;AAAA,IACrC,CAAC;AAAA,EACH,CAAC;AAGD,SAAO,MAAM,KAAK,aAAa,OAAO,CAAC,EAAE;AAAA,IACvC,CAAC,GAAG,MAAO,EAAE,UAAmB,QAAQ,IAAK,EAAE,UAAmB,QAAQ;AAAA,EAC5E;AACF;AAuCO,IAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,UAAU;AAAA,EACV;AACF,MAA4B;AAC1B,QAAM,QAAQC,UAAS;AACvB,QAAM,CAAC,cAAc,eAAe,IAAI,SAAsB,oBAAI,IAAI,CAAC;AAGvE,QAAM,UAAU,QAAQ,MAAM,aAAa,QAAQ,YAAY,GAAG,CAAC,QAAQ,YAAY,CAAC;AAGxF,QAAM,gBAAgB;AAAA,IACpB,MAAM,OAAO,OAAO,CAAC,MAAM,CAAC,aAAa,IAAI,EAAE,IAAI,CAAC;AAAA,IACpD,CAAC,QAAQ,YAAY;AAAA,EACvB;AAGA,QAAM,cAAc,QAAQ,MAAM,cAAc,IAAI,CAAC,MAAM,EAAE,KAAK,GAAG,CAAC,aAAa,CAAC;AAGpF,QAAM,qBAAqB,YAAY,CAAC,eAAuB;AAC7D,oBAAgB,CAAC,SAAS;AACxB,YAAM,OAAO,IAAI,IAAI,IAAI;AACzB,UAAI,KAAK,IAAI,UAAU,GAAG;AACxB,aAAK,OAAO,UAAU;AAAA,MACxB,OAAO;AACL,aAAK,IAAI,UAAU;AAAA,MACrB;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAGL,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,QAAQ,WAAW,EAAG,QAAO,EAAE,KAAK,QAAW,KAAK,OAAU;AAClE,UAAM,aAAa,QAAQ,IAAI,CAAC,QAAS,IAAI,UAAmB,QAAQ,CAAC;AACzE,WAAO;AAAA,MACL,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,UAAU,CAAC;AAAA,MACrC,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,UAAU,CAAC;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAGZ,QAAM,sBAAsB;AAAA,IAC1B,MAAM,eAAe,iBAAiB,WAAW,KAAK,WAAW,GAAG;AAAA,IACpE,CAAC,aAAa,WAAW,KAAK,WAAW,GAAG;AAAA,EAC9C;AAGA,QAAM,UAAU,QAAQ,SAAS;AAGjC,QAAM,oBAAoB,eAAe,gBAAgB,aAAa,SAAS;AAG/E,QAAM,sBACJ,gBAAAH,MAACI,QAAA,EAAM,WAAU,OAAM,SAAS,GAAG,YAAW,UAC3C;AAAA;AAAA,IACA,oBAAoB,iBAAiB,SAAS,KAC7C,gBAAAL;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU;AAAA;AAAA,IACZ;AAAA,KAEJ;AAIF,QAAM,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC,gBAAiB,oBAAoB,iBAAiB,SAAS;AAE/F,SACE,gBAAAC;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,QAAQ,sBAAsB,KAAK,KAAK;AAAA,MACpD,MAAK;AAAA,MAEJ;AAAA,sBACC,gBAAAD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,sBAAsB;AAAA,cACpB,SAAS;AAAA,cACT,YAAY;AAAA,YACd;AAAA,YACA,QAAQ;AAAA;AAAA,QACV;AAAA,QAGF,gBAAAC,MAAC,aACC;AAAA,0BAAAA,MAAC,kBACE;AAAA,uBACC,gBAAAD,KAAC,kBAAe,MAAK,UAAS,cAAW,sBACvC,0BAAAA,KAAC,oBAAiB,MAAM,IAAI,GAC9B;AAAA,YAGF,gBAAAA;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC;AAAA,gBACA,eAAe,EAAE,GAAG,QAAQ,GAAG,OAAO;AAAA,gBACtC,MAAM,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA,gBAC1C,QAAQ,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,IAAI,MAAM,GAAG;AAAA,gBACnD,QAAQ,YAAY,SAAS,IAAI,cAAc,CAAC,MAAM,QAAQ,QAAQ,IAAI;AAAA,gBAC1E,OAAO;AAAA,kBACL,eAAe,MAAM;AAAA,gBACvB;AAAA,gBACA,SAAS,EAAE,SAAS,UAAU,SAAS,OAAO;AAAA,gBAC9C,OAAO;AAAA,kBACL;AAAA,oBACE,aAAa;AAAA,oBACb,cAAc;AAAA,oBACd,KAAK,UAAU,SAAY;AAAA,oBAC3B,KAAK,UAAU,SAAY;AAAA,oBAC3B,YAAY,UAAU,SAAY;AAAA,oBAClC,gBAAgB,CAAC,UAAkB,iBAAiB,SAAS,CAAC;AAAA,oBAC9D,gBAAgB;AAAA,sBACd,UAAU;AAAA,oBACZ;AAAA,kBACF;AAAA,gBACF;AAAA,gBACA,OAAO;AAAA,kBACL;AAAA,oBACE,SAAS;AAAA,oBACT,WAAW;AAAA,oBACX,KAAK,WAAW;AAAA,oBAChB,KAAK,WAAW;AAAA,oBAChB,aAAa;AAAA,oBACb,cAAc;AAAA,oBACd,gBAAgB,CAAC,SAAeC,QAAO,MAAM,mBAAmB;AAAA,oBAChE,gBAAgB;AAAA,sBACd,UAAU;AAAA,oBACZ;AAAA,kBACF;AAAA,gBACF;AAAA,gBACA,QAAQ,cAAc,IAAI,CAAC,OAAO;AAAA,kBAChC,OAAO;AAAA,kBACP,SAAS,EAAE;AAAA,kBACX,OAAO,EAAE;AAAA,kBACT,UAAU;AAAA,kBACV,cAAc;AAAA,gBAChB,EAAE;AAAA,gBAEF,WAAW;AAAA,kBACT,QAAQ,EAAE,QAAQ,KAAK;AAAA,gBACzB;AAAA;AAAA,YACF;AAAA,aACF;AAAA,UAGC,OAAO,SAAS,KACf,gBAAAP;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS;AAAA,cACT,gBAAe;AAAA,cACf,UAAU;AAAA,cACV,UAAS;AAAA,cACT,YAAU;AAAA,cACV,MAAK;AAAA,cACL,cAAW;AAAA,cAEV,iBAAO,IAAI,CAAC,MAAM;AACjB,sBAAM,WAAW,aAAa,IAAI,EAAE,IAAI;AACxC,uBACE,gBAAAJ;AAAA,kBAACI;AAAA,kBAAA;AAAA,oBAEC,WAAU;AAAA,oBACV,SAAS;AAAA,oBACT,YAAW;AAAA,oBACX,MAAK;AAAA,oBACL,SAAS,MAAM,mBAAmB,EAAE,IAAI;AAAA,oBACxC,IAAI;AAAA,sBACF,QAAQ;AAAA,sBACR,SAAS,WAAW,MAAM;AAAA,sBAC1B,YAAY;AAAA,sBACZ,YAAY;AAAA,oBACd;AAAA,oBACA,gBAAc,CAAC;AAAA,oBACf,cAAY,UAAU,EAAE,IAAI;AAAA,oBAE5B;AAAA,sCAAAL,KAAC,aAAU,UAAU,EAAE,OAAO;AAAA,sBAC9B,gBAAAA,KAACQ,aAAA,EAAW,SAAQ,SAAS,YAAE,MAAK;AAAA;AAAA;AAAA,kBAhB/B,EAAE;AAAA,gBAiBT;AAAA,cAEJ,CAAC;AAAA;AAAA,UACH;AAAA,WAEJ;AAAA,QAGC,qBACC,gBAAAP,MAAA,YACE;AAAA,0BAAAD,KAAC,WAAQ;AAAA,UACT,gBAAAA,KAAC,gBAAa,OAAO,cAAe;AAAA,WACtC;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":["value","Box","Stack","Typography","styled","useTheme","LineChart","format","jsx","Stack","Typography","jsx","jsxs","jsx","jsxs","styled","Box","useTheme","Stack","LineChart","format","Typography"]}