@ktnpm_devops/react-component 0.3.0 → 0.4.1

package/dist/index18.cjs

@@ -2,139 +2,161 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const clsx = require("./index36.cjs");
-const constants = require("./index39.cjs");
-const CountersAnalysisCard_module = require("./index54.cjs");
-const CounterTimeseriesChart = require("./index17.cjs");
-const COLUMN_HEADERS = [
-  { key: "counter", label: "Counter" },
-  { key: "nodeType", label: "Node Type" },
-  { key: "bureauName", label: "Bureau" },
-  { key: "objectType", label: "Object Type" },
-  { key: "objectValue", label: "Object Value" },
-  { key: "anomalyName", label: "Anomaly" },
-  { key: "distinctTimestamps", label: "Timestamps" }
-];
-const isRowMatch = (a, b) => a.counter === b.counter && a.nodeType === b.nodeType && a.bureauName === b.bureauName && a.objectType === b.objectType && a.objectValue === b.objectValue && a.anomalyName === b.anomalyName;
-const CountersAnalysisCard = ({
+const ReactECharts = require("echarts-for-react");
+const clsx = require("./index38.cjs");
+const constants = require("./index45.cjs");
+const CounterTimeseriesChart_module = require("./index60.cjs");
+const DEFAULT_TIME_RANGE_OPTIONS = ["auto", "1h", "6h", "24h", "7d", "30d"];
+const buildMarkAreas = (annotations) => annotations.filter((a) => a.end).map((a) => [
+  { name: a.label, xAxis: a.start, itemStyle: { color: a.color ?? "rgba(255,107,90,0.12)" } },
+  { xAxis: a.end }
+]);
+const buildMarkLines = (annotations) => annotations.filter((a) => !a.end).map((a) => ({
+  name: a.label,
+  xAxis: a.start,
+  label: { formatter: a.label, position: "insideEndTop" },
+  lineStyle: { color: a.color ?? constants.CHART_COLORS[0], type: "dashed" }
+}));
+const extractSeries = (data, field) => {
+  const values = data.map((d) => d[field]);
+  return values.every((v) => v == null) ? void 0 : values;
+};
+const buildOption = (data, annotations, showConfidenceBands, showP50, showLegend) => {
+  const timestamps = data.map((d) => d.ts);
+  const values = data.map((d) => d.value);
+  const p05 = showConfidenceBands ? extractSeries(data, "p05") : void 0;
+  const p95 = showConfidenceBands ? extractSeries(data, "p95") : void 0;
+  const p50 = showP50 ? extractSeries(data, "p50") : void 0;
+  const upperThreshold = extractSeries(data, "upperThreshold");
+  const lowerThreshold = extractSeries(data, "lowerThreshold");
+  const markArea = annotations.length > 0 ? { silent: true, data: buildMarkAreas(annotations) } : void 0;
+  const markLine = annotations.length > 0 ? { silent: true, symbol: "none", data: buildMarkLines(annotations) } : void 0;
+  const series = [];
+  series.push({
+    name: "Value",
+    type: "line",
+    data: values,
+    symbol: "none",
+    lineStyle: { width: 2, color: constants.CHART_COLORS[0] },
+    itemStyle: { color: constants.CHART_COLORS[0] },
+    markArea,
+    markLine
+  });
+  if (p50) {
+    series.push({
+      name: "p50",
+      type: "line",
+      data: p50,
+      symbol: "none",
+      lineStyle: { width: 1.5, type: "dashed", color: constants.CHART_COLORS[1] },
+      itemStyle: { color: constants.CHART_COLORS[1] }
+    });
+  }
+  if (p05 && p95) {
+    series.push({
+      name: "p05",
+      type: "line",
+      data: p05,
+      symbol: "none",
+      lineStyle: { width: 0 },
+      stack: "confidence",
+      areaStyle: { opacity: 0 }
+    });
+    series.push({
+      name: "p95",
+      type: "line",
+      data: p95.map((v, i) => {
+        const low = p05[i];
+        if (v == null || low == null) return null;
+        return v - low;
+      }),
+      symbol: "none",
+      lineStyle: { width: 0 },
+      stack: "confidence",
+      areaStyle: { opacity: 0.15, color: constants.CHART_COLORS[1] }
+    });
+  }
+  if (upperThreshold) {
+    series.push({
+      name: "Upper threshold",
+      type: "line",
+      data: upperThreshold,
+      symbol: "none",
+      lineStyle: { width: 1, type: "dashed", color: constants.CHART_COLORS[4] },
+      itemStyle: { color: constants.CHART_COLORS[4] }
+    });
+  }
+  if (lowerThreshold) {
+    series.push({
+      name: "Lower threshold",
+      type: "line",
+      data: lowerThreshold,
+      symbol: "none",
+      lineStyle: { width: 1, type: "dashed", color: constants.CHART_COLORS[5] },
+      itemStyle: { color: constants.CHART_COLORS[5] }
+    });
+  }
+  return {
+    tooltip: { trigger: "axis" },
+    legend: showLegend ? { bottom: 0 } : void 0,
+    grid: { left: "3%", right: "4%", bottom: showLegend ? "12%" : "3%", containLabel: true },
+    xAxis: { type: "category", data: timestamps, boundaryGap: false },
+    yAxis: { type: "value" },
+    series
+  };
+};
+const CounterTimeseriesChart = ({
+  data,
   title,
-  isLoading,
-  error,
-  onRetry,
+  isLoading = false,
+  error = null,
+  timeRange = "auto",
+  timeRangeOptions,
+  onTimeRangeChange,
+  annotations = [],
+  showConfidenceBands = true,
+  showP50 = true,
+  showLegend = false,
   onChartReady,
-  actions,
-  className,
-  rows,
-  selectedRow,
-  onSelectRow,
-  timeseriesData,
-  timeseriesLoading,
-  timePeriod = "7d",
-  onTimePeriodChange,
-  pageSize = constants.COUNTERS_PAGE_SIZE
+  className
 }) => {
-  const [currentPage, setCurrentPage] = react.useState(0);
-  const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));
-  const paginatedRows = react.useMemo(
-    () => rows.slice(currentPage * pageSize, (currentPage + 1) * pageSize),
-    [rows, currentPage, pageSize]
+  const rangeOptions = timeRangeOptions ?? [...DEFAULT_TIME_RANGE_OPTIONS];
+  const option = react.useMemo(
+    () => buildOption(data, annotations, showConfidenceBands, showP50, showLegend),
+    [data, annotations, showConfidenceBands, showP50, showLegend]
   );
-  const handlePrevious = () => {
-    setCurrentPage((prev) => Math.max(0, prev - 1));
-  };
-  const handleNext = () => {
-    setCurrentPage((prev) => Math.min(totalPages - 1, prev + 1));
-  };
-  if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(CountersAnalysisCard_module.default.root, className), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("header", { className: CountersAnalysisCard_module.default.header, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: CountersAnalysisCard_module.default.title, children: title }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: CountersAnalysisCard_module.default.loading, children: "Loading..." })
-    ] });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(CountersAnalysisCard_module.default.root, className), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("header", { className: CountersAnalysisCard_module.default.header, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: CountersAnalysisCard_module.default.title, children: title }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CountersAnalysisCard_module.default.error, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: error }),
-        onRetry && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: CountersAnalysisCard_module.default.retryButton, onClick: onRetry, children: "Retry" })
-      ] })
-    ] });
-  }
-  if (rows.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(CountersAnalysisCard_module.default.root, className), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("header", { className: CountersAnalysisCard_module.default.header, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: CountersAnalysisCard_module.default.title, children: title }),
-        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CountersAnalysisCard_module.default.headerActions, children: actions })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: CountersAnalysisCard_module.default.empty, children: "No counters available" })
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(CountersAnalysisCard_module.default.root, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: CountersAnalysisCard_module.default.header, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: CountersAnalysisCard_module.default.title, children: title }),
-      actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CountersAnalysisCard_module.default.headerActions, children: actions })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CountersAnalysisCard_module.default.splitContainer, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CountersAnalysisCard_module.default.tablePanel, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("table", { className: CountersAnalysisCard_module.default.table, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: COLUMN_HEADERS.map(({ key, label }) => /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", children: label }, key)) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: paginatedRows.map((row, index) => {
-            const isSelected = selectedRow != null && isRowMatch(row, selectedRow);
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "tr",
-              {
-                className: clsx.clsx(CountersAnalysisCard_module.default.tableRow, {
-                  [CountersAnalysisCard_module.default.tableRowSelected]: isSelected
-                }),
-                "aria-selected": isSelected,
-                onClick: () => onSelectRow == null ? void 0 : onSelectRow(row),
-                children: COLUMN_HEADERS.map(({ key }) => /* @__PURE__ */ jsxRuntime.jsx("td", { children: String(row[key] ?? "") }, key))
-              },
-              `${row.counter}-${row.nodeType}-${row.objectValue}-${index}`
-            );
-          }) })
-        ] }),
-        totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CountersAnalysisCard_module.default.pagination, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: CountersAnalysisCard_module.default.paginationButton,
-              disabled: currentPage === 0,
-              onClick: handlePrevious,
-              children: "Previous"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: CountersAnalysisCard_module.default.paginationInfo, children: [
-            "Page ",
-            currentPage + 1,
-            " of ",
-            totalPages
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: CountersAnalysisCard_module.default.paginationButton,
-              disabled: currentPage >= totalPages - 1,
-              onClick: handleNext,
-              children: "Next"
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: CountersAnalysisCard_module.default.chartPanel, children: selectedRow ? /* @__PURE__ */ jsxRuntime.jsx(
-        CounterTimeseriesChart.CounterTimeseriesChart,
+  const showHeader = title || onTimeRangeChange;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(CounterTimeseriesChart_module.default.root, className), children: [
+    showHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CounterTimeseriesChart_module.default.header, children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: CounterTimeseriesChart_module.default.title, children: title }),
+      onTimeRangeChange && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CounterTimeseriesChart_module.default.timeRangeGroup, role: "group", "aria-label": "Time range presets", children: rangeOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
         {
-          data: timeseriesData ?? [],
-          isLoading: timeseriesLoading,
-          timeRange: timePeriod,
-          onTimeRangeChange: onTimePeriodChange,
-          onChartReady
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: CountersAnalysisCard_module.default.placeholder, children: "Select a counter to view timeseries" }) })
-    ] })
+          type: "button",
+          className: clsx.clsx(CounterTimeseriesChart_module.default.timeRangeButton, {
+            [CounterTimeseriesChart_module.default.timeRangeButtonActive]: opt === timeRange
+          }),
+          onClick: () => onTimeRangeChange(opt),
+          "aria-pressed": opt === timeRange,
+          children: opt
+        },
+        opt
+      )) })
+    ] }),
+    isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CounterTimeseriesChart_module.default.loading, children: "Loading chart data..." }),
+    !isLoading && error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CounterTimeseriesChart_module.default.error, children: error }),
+    !isLoading && !error && data.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CounterTimeseriesChart_module.default.empty, children: "No data available" }),
+    !isLoading && !error && data.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CounterTimeseriesChart_module.default.chartContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ReactECharts,
+      {
+        option,
+        style: { height: "100%", width: "100%" },
+        onChartReady,
+        notMerge: true
+      }
+    ) })
   ] });
 };
-exports.CountersAnalysisCard = CountersAnalysisCard;
+CounterTimeseriesChart.displayName = "CounterTimeseriesChart";
+exports.CounterTimeseriesChart = CounterTimeseriesChart;
 //# sourceMappingURL=index18.cjs.map

package/dist/index18.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index18.cjs","sources":["../src/charts/CountersAnalysisCard/CountersAnalysisCard.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport clsx from 'clsx';\nimport type { CountersAnalysisCardProps } from './CountersAnalysisCard.types';\nimport type { DistinctCounterRow } from '../../types/chart.types';\nimport { COUNTERS_PAGE_SIZE } from '../../constants';\nimport { CounterTimeseriesChart } from '../CounterTimeseriesChart';\nimport styles from './CountersAnalysisCard.module.css';\n\nconst COLUMN_HEADERS: { key: keyof DistinctCounterRow; label: string }[] = [\n  { key: 'counter', label: 'Counter' },\n  { key: 'nodeType', label: 'Node Type' },\n  { key: 'bureauName', label: 'Bureau' },\n  { key: 'objectType', label: 'Object Type' },\n  { key: 'objectValue', label: 'Object Value' },\n  { key: 'anomalyName', label: 'Anomaly' },\n  { key: 'distinctTimestamps', label: 'Timestamps' },\n];\n\nconst isRowMatch = (a: DistinctCounterRow, b: DistinctCounterRow): boolean =>\n  a.counter === b.counter &&\n  a.nodeType === b.nodeType &&\n  a.bureauName === b.bureauName &&\n  a.objectType === b.objectType &&\n  a.objectValue === b.objectValue &&\n  a.anomalyName === b.anomalyName;\n\nexport const CountersAnalysisCard = ({\n  title,\n  isLoading,\n  error,\n  onRetry,\n  onChartReady,\n  actions,\n  className,\n  rows,\n  selectedRow,\n  onSelectRow,\n  timeseriesData,\n  timeseriesLoading,\n  timePeriod = '7d',\n  onTimePeriodChange,\n  pageSize = COUNTERS_PAGE_SIZE,\n}: CountersAnalysisCardProps) => {\n  const [currentPage, setCurrentPage] = useState(0);\n\n  const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));\n\n  const paginatedRows = useMemo(\n    () => rows.slice(currentPage * pageSize, (currentPage + 1) * pageSize),\n    [rows, currentPage, pageSize],\n  );\n\n  const handlePrevious = () => {\n    setCurrentPage((prev) => Math.max(0, prev - 1));\n  };\n\n  const handleNext = () => {\n    setCurrentPage((prev) => Math.min(totalPages - 1, prev + 1));\n  };\n\n  if (isLoading) {\n    return (\n      <div className={clsx(styles.root, className)}>\n        <header className={styles.header}>\n          <h2 className={styles.title}>{title}</h2>\n        </header>\n        <div className={styles.loading}>Loading...</div>\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div className={clsx(styles.root, className)}>\n        <header className={styles.header}>\n          <h2 className={styles.title}>{title}</h2>\n        </header>\n        <div className={styles.error}>\n          <span>{error}</span>\n          {onRetry && (\n            <button type=\"button\" className={styles.retryButton} onClick={onRetry}>\n              Retry\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  if (rows.length === 0) {\n    return (\n      <div className={clsx(styles.root, className)}>\n        <header className={styles.header}>\n          <h2 className={styles.title}>{title}</h2>\n          {actions && <div className={styles.headerActions}>{actions}</div>}\n        </header>\n        <div className={styles.empty}>No counters available</div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={clsx(styles.root, className)}>\n      <header className={styles.header}>\n        <h2 className={styles.title}>{title}</h2>\n        {actions && <div className={styles.headerActions}>{actions}</div>}\n      </header>\n\n      <div className={styles.splitContainer}>\n        <div className={styles.tablePanel}>\n          <table className={styles.table}>\n            <thead>\n              <tr>\n                {COLUMN_HEADERS.map(({ key, label }) => (\n                  <th key={key} scope=\"col\">\n                    {label}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {paginatedRows.map((row, index) => {\n                const isSelected = selectedRow != null && isRowMatch(row, selectedRow);\n                return (\n                  <tr\n                    key={`${row.counter}-${row.nodeType}-${row.objectValue}-${index}`}\n                    className={clsx(styles.tableRow, {\n                      [styles.tableRowSelected]: isSelected,\n                    })}\n                    aria-selected={isSelected}\n                    onClick={() => onSelectRow?.(row)}\n                  >\n                    {COLUMN_HEADERS.map(({ key }) => (\n                      <td key={key}>{String(row[key] ?? '')}</td>\n                    ))}\n                  </tr>\n                );\n              })}\n            </tbody>\n          </table>\n\n          {totalPages > 1 && (\n            <div className={styles.pagination}>\n              <button\n                type=\"button\"\n                className={styles.paginationButton}\n                disabled={currentPage === 0}\n                onClick={handlePrevious}\n              >\n                Previous\n              </button>\n              <span className={styles.paginationInfo}>\n                Page {currentPage + 1} of {totalPages}\n              </span>\n              <button\n                type=\"button\"\n                className={styles.paginationButton}\n                disabled={currentPage >= totalPages - 1}\n                onClick={handleNext}\n              >\n                Next\n              </button>\n            </div>\n          )}\n        </div>\n\n        <div className={styles.chartPanel}>\n          {selectedRow ? (\n            <CounterTimeseriesChart\n              data={timeseriesData ?? []}\n              isLoading={timeseriesLoading}\n              timeRange={timePeriod as string as import('../../types/chart.types').TimeRangeOption}\n              onTimeRangeChange={onTimePeriodChange as unknown as ((range: import('../../types/chart.types').TimeRangeOption) => void) | undefined}\n              onChartReady={onChartReady}\n            />\n          ) : (\n            <div className={styles.placeholder}>Select a counter to view timeseries</div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["COUNTERS_PAGE_SIZE","useState","useMemo","clsx","styles","jsx","jsxs","CounterTimeseriesChart"],"mappings":"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"}
+{"version":3,"file":"index18.cjs","sources":["../src/charts/CounterTimeseriesChart/CounterTimeseriesChart.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport ReactECharts from 'echarts-for-react';\nimport clsx from 'clsx';\nimport type { CounterTimeseriesChartProps } from './CounterTimeseriesChart.types';\nimport type { CounterTimeseriesPoint, ChartAnnotation } from '../../types/chart.types';\nimport { CHART_COLORS } from '../../constants';\nimport styles from './CounterTimeseriesChart.module.css';\n\nconst DEFAULT_TIME_RANGE_OPTIONS = ['auto', '1h', '6h', '24h', '7d', '30d'] as const;\n\n/** Build markArea data from range annotations (those with an end timestamp). */\nconst buildMarkAreas = (annotations: ChartAnnotation[]) =>\n  annotations\n    .filter((a) => a.end)\n    .map((a) => [\n      { name: a.label, xAxis: a.start, itemStyle: { color: a.color ?? 'rgba(255,107,90,0.12)' } },\n      { xAxis: a.end },\n    ]);\n\n/** Build markLine data from point annotations (those without an end timestamp). */\nconst buildMarkLines = (annotations: ChartAnnotation[]) =>\n  annotations\n    .filter((a) => !a.end)\n    .map((a) => ({\n      name: a.label,\n      xAxis: a.start,\n      label: { formatter: a.label, position: 'insideEndTop' as const },\n      lineStyle: { color: a.color ?? CHART_COLORS[0], type: 'dashed' as const },\n    }));\n\n/** Extract a numeric array for a given field, returning undefined when all values are null. */\nconst extractSeries = (data: CounterTimeseriesPoint[], field: keyof CounterTimeseriesPoint) => {\n  const values = data.map((d) => d[field] as number | null | undefined);\n  return values.every((v) => v == null) ? undefined : values;\n};\n\nconst buildOption = (\n  data: CounterTimeseriesPoint[],\n  annotations: ChartAnnotation[],\n  showConfidenceBands: boolean,\n  showP50: boolean,\n  showLegend: boolean,\n) => {\n  const timestamps = data.map((d) => d.ts);\n  const values = data.map((d) => d.value);\n\n  const p05 = showConfidenceBands ? extractSeries(data, 'p05') : undefined;\n  const p95 = showConfidenceBands ? extractSeries(data, 'p95') : undefined;\n  const p50 = showP50 ? extractSeries(data, 'p50') : undefined;\n\n  const upperThreshold = extractSeries(data, 'upperThreshold');\n  const lowerThreshold = extractSeries(data, 'lowerThreshold');\n\n  const markArea = annotations.length > 0 ? { silent: true, data: buildMarkAreas(annotations) } : undefined;\n  const markLine = annotations.length > 0 ? { silent: true, symbol: 'none', data: buildMarkLines(annotations) } : undefined;\n\n  const series: unknown[] = [];\n\n  // Main value line\n  series.push({\n    name: 'Value',\n    type: 'line',\n    data: values,\n    symbol: 'none',\n    lineStyle: { width: 2, color: CHART_COLORS[0] },\n    itemStyle: { color: CHART_COLORS[0] },\n    markArea,\n    markLine,\n  });\n\n  // p50 dashed line\n  if (p50) {\n    series.push({\n      name: 'p50',\n      type: 'line',\n      data: p50,\n      symbol: 'none',\n      lineStyle: { width: 1.5, type: 'dashed', color: CHART_COLORS[1] },\n      itemStyle: { color: CHART_COLORS[1] },\n    });\n  }\n\n  // Confidence band (p05–p95 area between)\n  if (p05 && p95) {\n    // Lower bound (invisible line)\n    series.push({\n      name: 'p05',\n      type: 'line',\n      data: p05,\n      symbol: 'none',\n      lineStyle: { width: 0 },\n      stack: 'confidence',\n      areaStyle: { opacity: 0 },\n    });\n    // Upper bound fills from p05 to p95\n    series.push({\n      name: 'p95',\n      type: 'line',\n      data: p95.map((v, i) => {\n        const low = p05[i];\n        if (v == null || low == null) return null;\n        return v - low;\n      }),\n      symbol: 'none',\n      lineStyle: { width: 0 },\n      stack: 'confidence',\n      areaStyle: { opacity: 0.15, color: CHART_COLORS[1] },\n    });\n  }\n\n  // Threshold lines\n  if (upperThreshold) {\n    series.push({\n      name: 'Upper threshold',\n      type: 'line',\n      data: upperThreshold,\n      symbol: 'none',\n      lineStyle: { width: 1, type: 'dashed', color: CHART_COLORS[4] },\n      itemStyle: { color: CHART_COLORS[4] },\n    });\n  }\n\n  if (lowerThreshold) {\n    series.push({\n      name: 'Lower threshold',\n      type: 'line',\n      data: lowerThreshold,\n      symbol: 'none',\n      lineStyle: { width: 1, type: 'dashed', color: CHART_COLORS[5] },\n      itemStyle: { color: CHART_COLORS[5] },\n    });\n  }\n\n  return {\n    tooltip: { trigger: 'axis' },\n    legend: showLegend ? { bottom: 0 } : undefined,\n    grid: { left: '3%', right: '4%', bottom: showLegend ? '12%' : '3%', containLabel: true },\n    xAxis: { type: 'category', data: timestamps, boundaryGap: false },\n    yAxis: { type: 'value' },\n    series,\n  };\n};\n\nexport const CounterTimeseriesChart = ({\n  data,\n  title,\n  isLoading = false,\n  error = null,\n  timeRange = 'auto',\n  timeRangeOptions,\n  onTimeRangeChange,\n  annotations = [],\n  showConfidenceBands = true,\n  showP50 = true,\n  showLegend = false,\n  onChartReady,\n  className,\n}: CounterTimeseriesChartProps) => {\n  const rangeOptions = timeRangeOptions ?? [...DEFAULT_TIME_RANGE_OPTIONS];\n\n  const option = useMemo(\n    () => buildOption(data, annotations, showConfidenceBands, showP50, showLegend),\n    [data, annotations, showConfidenceBands, showP50, showLegend],\n  );\n\n  const showHeader = title || onTimeRangeChange;\n\n  return (\n    <div className={clsx(styles.root, className)}>\n      {showHeader && (\n        <div className={styles.header}>\n          {title && <h3 className={styles.title}>{title}</h3>}\n          {onTimeRangeChange && (\n            <div className={styles.timeRangeGroup} role=\"group\" aria-label=\"Time range presets\">\n              {rangeOptions.map((opt) => (\n                <button\n                  key={opt}\n                  type=\"button\"\n                  className={clsx(styles.timeRangeButton, {\n                    [styles.timeRangeButtonActive]: opt === timeRange,\n                  })}\n                  onClick={() => onTimeRangeChange(opt)}\n                  aria-pressed={opt === timeRange}\n                >\n                  {opt}\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      {isLoading && <div className={styles.loading}>Loading chart data...</div>}\n\n      {!isLoading && error && <div className={styles.error}>{error}</div>}\n\n      {!isLoading && !error && data.length === 0 && (\n        <div className={styles.empty}>No data available</div>\n      )}\n\n      {!isLoading && !error && data.length > 0 && (\n        <div className={styles.chartContainer}>\n          <ReactECharts\n            option={option}\n            style={{ height: '100%', width: '100%' }}\n            onChartReady={onChartReady}\n            notMerge\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nCounterTimeseriesChart.displayName = 'CounterTimeseriesChart';\n"],"names":["CHART_COLORS","useMemo","clsx","styles","jsxs","jsx"],"mappings":"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"}

package/dist/index18.js

@@ -1,140 +1,162 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useMemo } from "react";
-import { clsx } from "./index36.js";
-import { COUNTERS_PAGE_SIZE } from "./index39.js";
-import styles from "./index54.js";
-import { CounterTimeseriesChart } from "./index17.js";
-const COLUMN_HEADERS = [
-  { key: "counter", label: "Counter" },
-  { key: "nodeType", label: "Node Type" },
-  { key: "bureauName", label: "Bureau" },
-  { key: "objectType", label: "Object Type" },
-  { key: "objectValue", label: "Object Value" },
-  { key: "anomalyName", label: "Anomaly" },
-  { key: "distinctTimestamps", label: "Timestamps" }
-];
-const isRowMatch = (a, b) => a.counter === b.counter && a.nodeType === b.nodeType && a.bureauName === b.bureauName && a.objectType === b.objectType && a.objectValue === b.objectValue && a.anomalyName === b.anomalyName;
-const CountersAnalysisCard = ({
+import { useMemo } from "react";
+import ReactECharts from "echarts-for-react";
+import { clsx } from "./index38.js";
+import { CHART_COLORS } from "./index45.js";
+import styles from "./index60.js";
+const DEFAULT_TIME_RANGE_OPTIONS = ["auto", "1h", "6h", "24h", "7d", "30d"];
+const buildMarkAreas = (annotations) => annotations.filter((a) => a.end).map((a) => [
+  { name: a.label, xAxis: a.start, itemStyle: { color: a.color ?? "rgba(255,107,90,0.12)" } },
+  { xAxis: a.end }
+]);
+const buildMarkLines = (annotations) => annotations.filter((a) => !a.end).map((a) => ({
+  name: a.label,
+  xAxis: a.start,
+  label: { formatter: a.label, position: "insideEndTop" },
+  lineStyle: { color: a.color ?? CHART_COLORS[0], type: "dashed" }
+}));
+const extractSeries = (data, field) => {
+  const values = data.map((d) => d[field]);
+  return values.every((v) => v == null) ? void 0 : values;
+};
+const buildOption = (data, annotations, showConfidenceBands, showP50, showLegend) => {
+  const timestamps = data.map((d) => d.ts);
+  const values = data.map((d) => d.value);
+  const p05 = showConfidenceBands ? extractSeries(data, "p05") : void 0;
+  const p95 = showConfidenceBands ? extractSeries(data, "p95") : void 0;
+  const p50 = showP50 ? extractSeries(data, "p50") : void 0;
+  const upperThreshold = extractSeries(data, "upperThreshold");
+  const lowerThreshold = extractSeries(data, "lowerThreshold");
+  const markArea = annotations.length > 0 ? { silent: true, data: buildMarkAreas(annotations) } : void 0;
+  const markLine = annotations.length > 0 ? { silent: true, symbol: "none", data: buildMarkLines(annotations) } : void 0;
+  const series = [];
+  series.push({
+    name: "Value",
+    type: "line",
+    data: values,
+    symbol: "none",
+    lineStyle: { width: 2, color: CHART_COLORS[0] },
+    itemStyle: { color: CHART_COLORS[0] },
+    markArea,
+    markLine
+  });
+  if (p50) {
+    series.push({
+      name: "p50",
+      type: "line",
+      data: p50,
+      symbol: "none",
+      lineStyle: { width: 1.5, type: "dashed", color: CHART_COLORS[1] },
+      itemStyle: { color: CHART_COLORS[1] }
+    });
+  }
+  if (p05 && p95) {
+    series.push({
+      name: "p05",
+      type: "line",
+      data: p05,
+      symbol: "none",
+      lineStyle: { width: 0 },
+      stack: "confidence",
+      areaStyle: { opacity: 0 }
+    });
+    series.push({
+      name: "p95",
+      type: "line",
+      data: p95.map((v, i) => {
+        const low = p05[i];
+        if (v == null || low == null) return null;
+        return v - low;
+      }),
+      symbol: "none",
+      lineStyle: { width: 0 },
+      stack: "confidence",
+      areaStyle: { opacity: 0.15, color: CHART_COLORS[1] }
+    });
+  }
+  if (upperThreshold) {
+    series.push({
+      name: "Upper threshold",
+      type: "line",
+      data: upperThreshold,
+      symbol: "none",
+      lineStyle: { width: 1, type: "dashed", color: CHART_COLORS[4] },
+      itemStyle: { color: CHART_COLORS[4] }
+    });
+  }
+  if (lowerThreshold) {
+    series.push({
+      name: "Lower threshold",
+      type: "line",
+      data: lowerThreshold,
+      symbol: "none",
+      lineStyle: { width: 1, type: "dashed", color: CHART_COLORS[5] },
+      itemStyle: { color: CHART_COLORS[5] }
+    });
+  }
+  return {
+    tooltip: { trigger: "axis" },
+    legend: showLegend ? { bottom: 0 } : void 0,
+    grid: { left: "3%", right: "4%", bottom: showLegend ? "12%" : "3%", containLabel: true },
+    xAxis: { type: "category", data: timestamps, boundaryGap: false },
+    yAxis: { type: "value" },
+    series
+  };
+};
+const CounterTimeseriesChart = ({
+  data,
   title,
-  isLoading,
-  error,
-  onRetry,
+  isLoading = false,
+  error = null,
+  timeRange = "auto",
+  timeRangeOptions,
+  onTimeRangeChange,
+  annotations = [],
+  showConfidenceBands = true,
+  showP50 = true,
+  showLegend = false,
   onChartReady,
-  actions,
-  className,
-  rows,
-  selectedRow,
-  onSelectRow,
-  timeseriesData,
-  timeseriesLoading,
-  timePeriod = "7d",
-  onTimePeriodChange,
-  pageSize = COUNTERS_PAGE_SIZE
+  className
 }) => {
-  const [currentPage, setCurrentPage] = useState(0);
-  const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));
-  const paginatedRows = useMemo(
-    () => rows.slice(currentPage * pageSize, (currentPage + 1) * pageSize),
-    [rows, currentPage, pageSize]
+  const rangeOptions = timeRangeOptions ?? [...DEFAULT_TIME_RANGE_OPTIONS];
+  const option = useMemo(
+    () => buildOption(data, annotations, showConfidenceBands, showP50, showLegend),
+    [data, annotations, showConfidenceBands, showP50, showLegend]
   );
-  const handlePrevious = () => {
-    setCurrentPage((prev) => Math.max(0, prev - 1));
-  };
-  const handleNext = () => {
-    setCurrentPage((prev) => Math.min(totalPages - 1, prev + 1));
-  };
-  if (isLoading) {
-    return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
-      /* @__PURE__ */ jsx("header", { className: styles.header, children: /* @__PURE__ */ jsx("h2", { className: styles.title, children: title }) }),
-      /* @__PURE__ */ jsx("div", { className: styles.loading, children: "Loading..." })
-    ] });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
-      /* @__PURE__ */ jsx("header", { className: styles.header, children: /* @__PURE__ */ jsx("h2", { className: styles.title, children: title }) }),
-      /* @__PURE__ */ jsxs("div", { className: styles.error, children: [
-        /* @__PURE__ */ jsx("span", { children: error }),
-        onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: styles.retryButton, onClick: onRetry, children: "Retry" })
-      ] })
-    ] });
-  }
-  if (rows.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
-      /* @__PURE__ */ jsxs("header", { className: styles.header, children: [
-        /* @__PURE__ */ jsx("h2", { className: styles.title, children: title }),
-        actions && /* @__PURE__ */ jsx("div", { className: styles.headerActions, children: actions })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: styles.empty, children: "No counters available" })
-    ] });
-  }
+  const showHeader = title || onTimeRangeChange;
   return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
-    /* @__PURE__ */ jsxs("header", { className: styles.header, children: [
-      /* @__PURE__ */ jsx("h2", { className: styles.title, children: title }),
-      actions && /* @__PURE__ */ jsx("div", { className: styles.headerActions, children: actions })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: styles.splitContainer, children: [
-      /* @__PURE__ */ jsxs("div", { className: styles.tablePanel, children: [
-        /* @__PURE__ */ jsxs("table", { className: styles.table, children: [
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: COLUMN_HEADERS.map(({ key, label }) => /* @__PURE__ */ jsx("th", { scope: "col", children: label }, key)) }) }),
-          /* @__PURE__ */ jsx("tbody", { children: paginatedRows.map((row, index) => {
-            const isSelected = selectedRow != null && isRowMatch(row, selectedRow);
-            return /* @__PURE__ */ jsx(
-              "tr",
-              {
-                className: clsx(styles.tableRow, {
-                  [styles.tableRowSelected]: isSelected
-                }),
-                "aria-selected": isSelected,
-                onClick: () => onSelectRow == null ? void 0 : onSelectRow(row),
-                children: COLUMN_HEADERS.map(({ key }) => /* @__PURE__ */ jsx("td", { children: String(row[key] ?? "") }, key))
-              },
-              `${row.counter}-${row.nodeType}-${row.objectValue}-${index}`
-            );
-          }) })
-        ] }),
-        totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: styles.pagination, children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: styles.paginationButton,
-              disabled: currentPage === 0,
-              onClick: handlePrevious,
-              children: "Previous"
-            }
-          ),
-          /* @__PURE__ */ jsxs("span", { className: styles.paginationInfo, children: [
-            "Page ",
-            currentPage + 1,
-            " of ",
-            totalPages
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: styles.paginationButton,
-              disabled: currentPage >= totalPages - 1,
-              onClick: handleNext,
-              children: "Next"
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: styles.chartPanel, children: selectedRow ? /* @__PURE__ */ jsx(
-        CounterTimeseriesChart,
+    showHeader && /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+      title && /* @__PURE__ */ jsx("h3", { className: styles.title, children: title }),
+      onTimeRangeChange && /* @__PURE__ */ jsx("div", { className: styles.timeRangeGroup, role: "group", "aria-label": "Time range presets", children: rangeOptions.map((opt) => /* @__PURE__ */ jsx(
+        "button",
         {
-          data: timeseriesData ?? [],
-          isLoading: timeseriesLoading,
-          timeRange: timePeriod,
-          onTimeRangeChange: onTimePeriodChange,
-          onChartReady
-        }
-      ) : /* @__PURE__ */ jsx("div", { className: styles.placeholder, children: "Select a counter to view timeseries" }) })
-    ] })
+          type: "button",
+          className: clsx(styles.timeRangeButton, {
+            [styles.timeRangeButtonActive]: opt === timeRange
+          }),
+          onClick: () => onTimeRangeChange(opt),
+          "aria-pressed": opt === timeRange,
+          children: opt
+        },
+        opt
+      )) })
+    ] }),
+    isLoading && /* @__PURE__ */ jsx("div", { className: styles.loading, children: "Loading chart data..." }),
+    !isLoading && error && /* @__PURE__ */ jsx("div", { className: styles.error, children: error }),
+    !isLoading && !error && data.length === 0 && /* @__PURE__ */ jsx("div", { className: styles.empty, children: "No data available" }),
+    !isLoading && !error && data.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.chartContainer, children: /* @__PURE__ */ jsx(
+      ReactECharts,
+      {
+        option,
+        style: { height: "100%", width: "100%" },
+        onChartReady,
+        notMerge: true
+      }
+    ) })
   ] });
 };
+CounterTimeseriesChart.displayName = "CounterTimeseriesChart";
 export {
-  CountersAnalysisCard
+  CounterTimeseriesChart
 };
 //# sourceMappingURL=index18.js.map