@cere/cere-design-system 0.1.0 → 0.2.0

package/dist/chunk-T7LPABOL.mjs

@@ -1,595 +0,0 @@
-import {
-  BytesSize
-} from "./chunk-QD6RLAO2.mjs";
-import {
-  deploymentSurfaceTokens
-} from "./chunk-ATIFLPH6.mjs";
-
-// src/components/charts/ChartWidget/ChartWidget.tsx
-import { Box, Stack, Typography, styled, useTheme } from "@mui/material";
-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/MetricsChart/MetricsChart.tsx
-import { format as format2, startOfDay, subHours, subWeeks, subMonths } from "date-fns";
-import { LineChart as LineChart2 } from "@mui/x-charts";
-import { useDrawingArea, useYScale } from "@mui/x-charts/hooks";
-import { Box as Box2, Card, CardHeader, CardMedia, Divider, Stack as Stack2, styled as styled2, Typography as Typography2, useTheme as useTheme2 } from "@mui/material";
-
-// src/components/charts/MetricsChart/PeriodSelect.tsx
-import { MenuItem, TextField } from "@mui/material";
-import { jsx as jsx2 } from "react/jsx-runtime";
-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__ */ jsx2(
-  TextField,
-  {
-    select: true,
-    size: "small",
-    value,
-    defaultValue: options[0].value,
-    onChange: (e) => onChange?.(e.target.value),
-    children: options.map(({ value: value2, label }) => /* @__PURE__ */ jsx2(MenuItem, { value: value2, children: label }, value2))
-  }
-);
-
-// src/components/charts/MetricsChart/MetricsChart.tsx
-import { useMemo, useState } from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var mapPeriodToFromDate = (period = "month") => {
-  const date = /* @__PURE__ */ new Date();
-  if (period === "hour") {
-    return subHours(date, 1);
-  }
-  if (period === "day") {
-    return subHours(date, 24);
-  }
-  if (period === "week") {
-    return startOfDay(subWeeks(date, 1));
-  }
-  return startOfDay(subMonths(date, 1));
-};
-var Chart2 = styled2(LineChart2)({
-  height: 320,
-  marginBottom: 16
-});
-var NoDataRect = styled2("rect")({
-  fill: deploymentSurfaceTokens.highlightBg
-});
-var LoadingText = styled2("text")(({ theme }) => ({
-  stroke: "none",
-  fill: theme.palette.text.primary,
-  shapeRendering: "crispEdges",
-  textAnchor: "middle",
-  dominantBaseline: "middle"
-}));
-var MetricsChart = ({ history = [] }) => {
-  const theme = useTheme2();
-  const [period, setPeriod] = useState("week");
-  const periodFrom = useMemo(() => mapPeriodToFromDate(period), [period]);
-  const periodHistory = useMemo(
-    () => history.filter((record) => record.recordTime > periodFrom),
-    [history, periodFrom]
-  );
-  const total = useMemo(
-    () => 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 = useYScale();
-    const { left, width, height } = useDrawingArea();
-    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__ */ jsxs2("g", { children: [
-      /* @__PURE__ */ jsx3(NoDataRect, { x: rectX, y: rectY, width: backgroundWidth, height: backgroundHeight }),
-      /* @__PURE__ */ jsx3(LoadingText, { style: { ...theme.typography.subtitle1 }, x: left + width / 2, y: top + height / 2, children: text })
-    ] });
-  };
-  return /* @__PURE__ */ jsxs2(Card, { children: [
-    /* @__PURE__ */ jsx3(CardHeader, { title: "GET / PUT Requests", action: /* @__PURE__ */ jsx3(PeriodSelect, { value: period, onChange: setPeriod }) }),
-    /* @__PURE__ */ jsxs2(CardMedia, { children: [
-      /* @__PURE__ */ jsx3(
-        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) => format2(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__ */ jsxs2(Stack2, { direction: "row", spacing: 2, marginY: 3, justifyContent: "center", children: [
-        /* @__PURE__ */ jsxs2(Stack2, { direction: "row", spacing: 1, alignItems: "center", children: [
-          /* @__PURE__ */ jsx3(Box2, { sx: { width: 14, height: 14, borderRadius: "4px", backgroundColor: theme.palette.primary.main } }),
-          /* @__PURE__ */ jsx3(Typography2, { variant: "body2", children: "Get" })
-        ] }),
-        /* @__PURE__ */ jsxs2(Stack2, { direction: "row", spacing: 1, alignItems: "center", children: [
-          /* @__PURE__ */ jsx3(Box2, { sx: { width: 14, height: 14, borderRadius: "4px", backgroundColor: theme.palette.success.main } }),
-          /* @__PURE__ */ jsx3(Typography2, { variant: "body2", children: "Put" })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs2(CardMedia, { children: [
-      /* @__PURE__ */ jsx3(Divider, { flexItem: true }),
-      /* @__PURE__ */ jsxs2(Stack2, { direction: "row", spacing: 2, padding: 2, children: [
-        /* @__PURE__ */ jsxs2(Stack2, { direction: "row", alignItems: "center", spacing: 1, children: [
-          /* @__PURE__ */ jsx3(Typography2, { variant: "body2", color: "secondary", children: "GET Requests per account" }),
-          /* @__PURE__ */ jsx3(Typography2, { variant: "h3", children: total.gets })
-        ] }),
-        /* @__PURE__ */ jsxs2(Stack2, { direction: "row", alignItems: "center", spacing: 1, children: [
-          /* @__PURE__ */ jsx3(Typography2, { variant: "body2", color: "secondary", children: "PUT Requests per account" }),
-          /* @__PURE__ */ jsx3(Typography2, { variant: "h3", children: total.puts })
-        ] }),
-        /* @__PURE__ */ jsxs2(Stack2, { direction: "row", alignItems: "center", spacing: 1, children: [
-          /* @__PURE__ */ jsx3(Typography2, { variant: "body2", color: "secondary", children: "Total Consumed per account" }),
-          /* @__PURE__ */ jsx3(Typography2, { variant: "h3", children: /* @__PURE__ */ jsx3(BytesSize, { bytes: total.transferredBytes }) })
-        ] }),
-        /* @__PURE__ */ jsxs2(Stack2, { direction: "row", alignItems: "center", spacing: 1, children: [
-          /* @__PURE__ */ jsx3(Typography2, { variant: "body2", color: "secondary", children: "Total Stored per account" }),
-          /* @__PURE__ */ jsx3(Typography2, { variant: "h3", children: /* @__PURE__ */ jsx3(BytesSize, { bytes: total.storedBytes }) })
-        ] })
-      ] })
-    ] })
-  ] });
-};
-
-// src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx
-import { useCallback, useMemo as useMemo2, useState as useState2 } from "react";
-import {
-  Box as Box3,
-  Card as Card2,
-  CardHeader as CardHeader2,
-  CardMedia as CardMedia2,
-  CircularProgress,
-  Divider as Divider2,
-  Stack as Stack4,
-  Typography as Typography4,
-  styled as styled3,
-  useTheme as useTheme3
-} from "@mui/material";
-import { LineChart as LineChart3 } from "@mui/x-charts";
-import { format as format3 } from "date-fns";
-
-// src/components/charts/TimeSeriesGraph/TimeRangeSelect.tsx
-import { MenuItem as MenuItem2, TextField as TextField2 } from "@mui/material";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var TimeRangeSelect = ({ options: options2, value, onChange }) => /* @__PURE__ */ jsx4(
-  TextField2,
-  {
-    select: true,
-    size: "small",
-    value: value ?? (options2.length > 0 ? options2[0].value : ""),
-    onChange: (e) => onChange?.(e.target.value),
-    "aria-label": "Time range selector",
-    sx: { minWidth: 120 },
-    children: options2.map((option) => /* @__PURE__ */ jsx4(MenuItem2, { value: option.value, children: option.label }, option.value))
-  }
-);
-
-// src/components/charts/TimeSeriesGraph/SummaryStats.tsx
-import { Stack as Stack3, Typography as Typography3 } from "@mui/material";
-import { jsx as jsx5, jsxs as jsxs3 } 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__ */ jsx5(
-    Stack3,
-    {
-      direction: "row",
-      spacing: 3,
-      padding: 2,
-      flexWrap: "wrap",
-      useFlexGap: true,
-      role: "list",
-      "aria-label": "Summary statistics",
-      children: items.map((item) => /* @__PURE__ */ jsxs3(
-        Stack3,
-        {
-          direction: "row",
-          alignItems: "center",
-          spacing: 1,
-          role: "listitem",
-          children: [
-            /* @__PURE__ */ jsx5(Typography3, { variant: "body2", color: "text.secondary", children: item.label }),
-            /* @__PURE__ */ jsx5(Typography3, { variant: "h5", fontWeight: 600, children: formatSummaryValue(item.value, item.unit) })
-          ]
-        },
-        item.label
-      ))
-    }
-  );
-};
-
-// src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx
-import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var ChartContainer = styled3(Box3)({
-  position: "relative",
-  height: 320
-});
-var LoadingOverlay = styled3(Box3)(({ 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 = styled3(Box3, {
-  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 = useTheme3();
-  const [hiddenSeries, setHiddenSeries] = useState2(/* @__PURE__ */ new Set());
-  const dataset = useMemo2(() => buildDataset(series, hiddenSeries), [series, hiddenSeries]);
-  const visibleSeries = useMemo2(
-    () => series.filter((s) => !hiddenSeries.has(s.name)),
-    [series, hiddenSeries]
-  );
-  const chartColors = useMemo2(() => 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 = useMemo2(() => {
-    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 = useMemo2(
-    () => 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__ */ jsxs4(Stack4, { direction: "row", spacing: 1, alignItems: "center", children: [
-    headerAction,
-    timeRangeOptions && timeRangeOptions.length > 0 && /* @__PURE__ */ jsx6(
-      TimeRangeSelect,
-      {
-        options: timeRangeOptions,
-        value: selectedTimeRange,
-        onChange: onTimeRangeChange
-      }
-    )
-  ] });
-  const showHeader = !!title || !!headerAction || timeRangeOptions && timeRangeOptions.length > 0;
-  return /* @__PURE__ */ jsxs4(
-    Card2,
-    {
-      "aria-label": title ? `Line chart showing ${title}` : "Line chart",
-      role: "figure",
-      children: [
-        showHeader && /* @__PURE__ */ jsx6(
-          CardHeader2,
-          {
-            title,
-            titleTypographyProps: {
-              variant: "subtitle1",
-              fontWeight: 500
-            },
-            action: headerActionElement
-          }
-        ),
-        /* @__PURE__ */ jsxs4(CardMedia2, { children: [
-          /* @__PURE__ */ jsxs4(ChartContainer, { children: [
-            loading && /* @__PURE__ */ jsx6(LoadingOverlay, { role: "status", "aria-label": "Loading chart data", children: /* @__PURE__ */ jsx6(CircularProgress, { size: 40 }) }),
-            /* @__PURE__ */ jsx6(
-              LineChart3,
-              {
-                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) => format3(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__ */ jsx6(
-            Stack4,
-            {
-              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__ */ jsxs4(
-                  Stack4,
-                  {
-                    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__ */ jsx6(LegendDot, { dotColor: s.color }),
-                      /* @__PURE__ */ jsx6(Typography4, { variant: "body2", children: s.name })
-                    ]
-                  },
-                  s.name
-                );
-              })
-            }
-          )
-        ] }),
-        shouldShowSummary && /* @__PURE__ */ jsxs4(Fragment, { children: [
-          /* @__PURE__ */ jsx6(Divider2, {}),
-          /* @__PURE__ */ jsx6(SummaryStats, { items: summaryItems })
-        ] })
-      ]
-    }
-  );
-};
-
-export {
-  ChartWidget,
-  PeriodSelect,
-  MetricsChart,
-  TimeRangeSelect,
-  SummaryStats,
-  TimeSeriesGraph
-};
-//# sourceMappingURL=chunk-T7LPABOL.mjs.map