@cere/cere-design-system 0.0.44 → 0.1.0

package/dist/chunk-KF2Y7HO3.js

@@ -0,0 +1,595 @@
+"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; }
+
+var _chunkAIY6222Qjs = require('./chunk-AIY6222Q.js');
+
+
+var _chunkFN5YL4BKjs = require('./chunk-FN5YL4BK.js');
+
+// src/components/charts/ChartWidget/ChartWidget.tsx
+var _material = require('@mui/material');
+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 = _material.styled.call(void 0, (0, _material.Box))(() => ({
+  height: 200
+}));
+var ChartWidget = ({
+  title,
+  value,
+  history,
+  formatValue = (value2) => _bytesize2.default.call(void 0, value2 || 0).toString()
+}) => {
+  const theme = _material.useTheme.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { spacing: 1, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "caption", color: "text.secondary", children: title }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { 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/MetricsChart/MetricsChart.tsx
+
+
+var _hooks = require('@mui/x-charts/hooks');
+
+
+// src/components/charts/MetricsChart/PeriodSelect.tsx
+
+
+var options = [
+  /**
+   * TODO: Enable the options below when the backend supports them
+   */
+  // { value: 'hour', label: 'Last hour' },
+  // { value: 'day', label: '24 hours' },
+  { value: "week", label: "1 week" },
+  { value: "month", label: "1 month" }
+];
+var PeriodSelect = ({ value, onChange }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _material.TextField,
+  {
+    select: true,
+    size: "small",
+    value,
+    defaultValue: options[0].value,
+    onChange: (e) => _optionalChain([onChange, 'optionalCall', _4 => _4(e.target.value)]),
+    children: options.map(({ value: value2, label }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.MenuItem, { value: value2, children: label }, value2))
+  }
+);
+
+// src/components/charts/MetricsChart/MetricsChart.tsx
+var _react = require('react');
+
+var mapPeriodToFromDate = (period = "month") => {
+  const date = /* @__PURE__ */ new Date();
+  if (period === "hour") {
+    return _datefns.subHours.call(void 0, date, 1);
+  }
+  if (period === "day") {
+    return _datefns.subHours.call(void 0, date, 24);
+  }
+  if (period === "week") {
+    return _datefns.startOfDay.call(void 0, _datefns.subWeeks.call(void 0, date, 1));
+  }
+  return _datefns.startOfDay.call(void 0, _datefns.subMonths.call(void 0, date, 1));
+};
+var Chart2 = _material.styled.call(void 0, (0, _xcharts.LineChart))({
+  height: 320,
+  marginBottom: 16
+});
+var NoDataRect = _material.styled.call(void 0, "rect")({
+  fill: _chunkFN5YL4BKjs.deploymentSurfaceTokens.highlightBg
+});
+var LoadingText = _material.styled.call(void 0, "text")(({ theme }) => ({
+  stroke: "none",
+  fill: theme.palette.text.primary,
+  shapeRendering: "crispEdges",
+  textAnchor: "middle",
+  dominantBaseline: "middle"
+}));
+var MetricsChart = ({ history = [] }) => {
+  const theme = _material.useTheme.call(void 0, );
+  const [period, setPeriod] = _react.useState.call(void 0, "week");
+  const periodFrom = _react.useMemo.call(void 0, () => mapPeriodToFromDate(period), [period]);
+  const periodHistory = _react.useMemo.call(void 0, 
+    () => history.filter((record) => record.recordTime > periodFrom),
+    [history, periodFrom]
+  );
+  const total = _react.useMemo.call(void 0, 
+    () => periodHistory.reduce(
+      (acc, record) => ({
+        gets: acc.gets + record.gets,
+        puts: acc.puts + record.puts,
+        storedBytes: acc.storedBytes + record.storedBytes,
+        transferredBytes: acc.transferredBytes + record.transferredBytes
+      }),
+      { gets: 0, puts: 0, storedBytes: 0, transferredBytes: 0 }
+    ),
+    [periodHistory]
+  );
+  const NoDataOverlay = () => {
+    const yScale = _hooks.useYScale.call(void 0, );
+    const { left, width, height } = _hooks.useDrawingArea.call(void 0, );
+    const [, top] = yScale.range();
+    const padding = { top: 8, bottom: 8, left: 20, right: 20 };
+    const text = "No data for selected period";
+    const textWidth = 211;
+    const textHeight = 24;
+    const backgroundWidth = textWidth + padding.left + padding.right;
+    const backgroundHeight = textHeight + padding.top + padding.bottom;
+    const rectX = left + (width - backgroundWidth) / 2;
+    const rectY = top + (height - backgroundHeight) / 2;
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NoDataRect, { x: rectX, y: rectY, width: backgroundWidth, height: backgroundHeight }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingText, { style: { ...theme.typography.subtitle1 }, x: left + width / 2, y: top + height / 2, children: text })
+    ] });
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Card, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.CardHeader, { title: "GET / PUT Requests", action: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PeriodSelect, { value: period, onChange: setPeriod }) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.CardMedia, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        Chart2,
+        {
+          skipAnimation: true,
+          dataset: periodHistory || [],
+          axisHighlight: { x: "none", y: "none" },
+          grid: { horizontal: true, vertical: false },
+          margin: { top: 10, right: 20, bottom: 40, left: 40 },
+          colors: [theme.palette.primary.main, theme.palette.success.main],
+          slots: {
+            noDataOverlay: NoDataOverlay
+          },
+          slotProps: {
+            noDataOverlay: {
+              style: {
+                ...theme.typography.h4
+              }
+            }
+          },
+          yAxis: periodHistory.length ? [
+            {
+              min: periodHistory.length ? void 0 : 0,
+              max: periodHistory.length ? void 0 : 100,
+              tickNumber: periodHistory.length ? void 0 : 5,
+              disableLine: true,
+              disableTicks: true,
+              tickLabelStyle: {
+                fontSize: 10
+              }
+            }
+          ] : [],
+          xAxis: [
+            {
+              dataKey: "recordTime",
+              min: periodFrom,
+              max: /* @__PURE__ */ new Date(),
+              disableLine: false,
+              disableTicks: false,
+              valueFormatter: (date) => _datefns.format.call(void 0, date, "do MMM"),
+              tickMinStep: 3600 * 1e3 * 24,
+              // min step: 24h
+              tickLabelStyle: {
+                fontSize: 10,
+                transform: "translate(-16px, 16px) rotate(-30deg)"
+              }
+            }
+          ],
+          series: [
+            {
+              curve: "linear",
+              dataKey: "gets",
+              showMark: false
+            },
+            {
+              curve: "linear",
+              dataKey: "puts",
+              showMark: false
+            }
+          ]
+        }
+      ),
+      periodHistory.length > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { direction: "row", spacing: 2, marginY: 3, justifyContent: "center", children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { width: 14, height: 14, borderRadius: "4px", backgroundColor: theme.palette.primary.main } }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", children: "Get" })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { width: 14, height: 14, borderRadius: "4px", backgroundColor: theme.palette.success.main } }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", children: "Put" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.CardMedia, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, { flexItem: true }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { direction: "row", spacing: 2, padding: 2, children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "secondary", children: "GET Requests per account" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h3", children: total.gets })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "secondary", children: "PUT Requests per account" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h3", children: total.puts })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "secondary", children: "Total Consumed per account" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAIY6222Qjs.BytesSize, { bytes: total.transferredBytes }) })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "secondary", children: "Total Stored per account" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAIY6222Qjs.BytesSize, { bytes: total.storedBytes }) })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// src/components/charts/TimeSeriesGraph/TimeRangeSelect.tsx
+
+
+var TimeRangeSelect = ({ options: options2, value, onChange }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _material.TextField,
+  {
+    select: true,
+    size: "small",
+    value: _nullishCoalesce(value, () => ( (options2.length > 0 ? options2[0].value : ""))),
+    onChange: (e) => _optionalChain([onChange, 'optionalCall', _5 => _5(e.target.value)]),
+    "aria-label": "Time range selector",
+    sx: { minWidth: 120 },
+    children: options2.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.MenuItem, { 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, 
+    _material.Stack,
+    {
+      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, 
+        _material.Stack,
+        {
+          direction: "row",
+          alignItems: "center",
+          spacing: 1,
+          role: "listitem",
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: item.label }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "h5", fontWeight: 600, children: formatSummaryValue(item.value, item.unit) })
+          ]
+        },
+        item.label
+      ))
+    }
+  );
+};
+
+// src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx
+
+var ChartContainer = _material.styled.call(void 0, (0, _material.Box))({
+  position: "relative",
+  height: 320
+});
+var LoadingOverlay = _material.styled.call(void 0, (0, _material.Box))(({ 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 = _material.styled.call(void 0, _material.Box, {
+  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 = _material.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, _material.Stack, { 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, 
+    _material.Card,
+    {
+      "aria-label": title ? `Line chart showing ${title}` : "Line chart",
+      role: "figure",
+      children: [
+        showHeader && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _material.CardHeader,
+          {
+            title,
+            titleTypographyProps: {
+              variant: "subtitle1",
+              fontWeight: 500
+            },
+            action: headerActionElement
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.CardMedia, { 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, _material.CircularProgress, { 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, 
+            _material.Stack,
+            {
+              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, 
+                  _material.Stack,
+                  {
+                    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, _material.Typography, { variant: "body2", children: s.name })
+                    ]
+                  },
+                  s.name
+                );
+              })
+            }
+          )
+        ] }),
+        shouldShowSummary && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, {}),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SummaryStats, { items: summaryItems })
+        ] })
+      ]
+    }
+  );
+};
+
+
+
+
+
+
+
+
+exports.ChartWidget = ChartWidget; exports.PeriodSelect = PeriodSelect; exports.MetricsChart = MetricsChart; exports.TimeRangeSelect = TimeRangeSelect; exports.SummaryStats = SummaryStats; exports.TimeSeriesGraph = TimeSeriesGraph;
+//# sourceMappingURL=chunk-KF2Y7HO3.js.map