web-mojo 2.2.8 → 2.2.10

package/dist/chunks/{MetricsMiniChartWidget-DdZ3zNve.js → MetricsMiniChartWidget-DL5stA6A.js}

@@ -1,4 +1,4 @@
-import { D as Dialog } from "./Dialog-DrCs-ex1.js";
+import { D as Dialog } from "./Dialog-Cu_Dx46k.js";
 import { V as View, d as dataFormatter } from "./Rest-ChN4Ntac.js";
 import { W as WebSocketClient } from "./WebSocketClient-bLYhu2Wv.js";
 class BaseChart extends View {
@@ -1018,6 +1018,48 @@ class ChartHeaderView extends View {
     return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
 }
+const DEFAULT_CHART_COLORS = [
+  "rgba(52, 152, 219, 0.85)",
+  // Belize Hole
+  "rgba(231, 76, 60, 0.85)",
+  // Alizarin
+  "rgba(46, 204, 113, 0.85)",
+  // Emerald
+  "rgba(241, 196, 15, 0.85)",
+  // Sunflower
+  "rgba(155, 89, 182, 0.85)",
+  // Amethyst
+  "rgba(230, 126, 34, 0.85)",
+  // Carrot
+  "rgba(26, 188, 156, 0.85)",
+  // Turquoise
+  "rgba(52, 73, 94, 0.85)",
+  // Wet asphalt
+  "rgba(243, 156, 18, 0.85)",
+  // Orange
+  "rgba(142, 68, 173, 0.85)",
+  // Wisteria
+  "rgba(39, 174, 96, 0.85)",
+  // Nephritis
+  "rgba(41, 128, 185, 0.85)",
+  // Peter River
+  "rgba(192, 57, 43, 0.85)",
+  // Pomegranate
+  "rgba(127, 140, 141, 0.85)",
+  // Asbestos
+  "rgba(22, 160, 133, 0.85)",
+  // Green Sea
+  "rgba(211, 84, 0, 0.85)",
+  // Pumpkin
+  "rgba(44, 62, 80, 0.85)",
+  // Midnight Blue
+  "rgba(214, 69, 65, 0.85)",
+  // Valencia
+  "rgba(149, 165, 166, 0.85)",
+  // Concrete
+  "rgba(52, 232, 158, 0.85)"
+  // Mint
+];
 class SeriesChart extends BaseChart {
   constructor(options = {}) {
     super({
@@ -1045,26 +1087,39 @@ class SeriesChart extends BaseChart {
     this.series = options.series || [];
     this.xField = options.xField || "x";
     this.yField = options.yField || "y";
-    this.colors = options.colors || [
-      "rgba(54, 162, 235, 0.8)",
-      // Blue
-      "rgba(255, 99, 132, 0.8)",
-      // Red
-      "rgba(75, 192, 192, 0.8)",
-      // Green
-      "rgba(255, 206, 86, 0.8)",
-      // Yellow
-      "rgba(153, 102, 255, 0.8)",
-      // Purple
-      "rgba(255, 159, 64, 0.8)",
-      // Orange
-      "rgba(199, 199, 199, 0.8)",
-      // Grey
-      "rgba(83, 102, 255, 0.8)"
-      // Indigo
-    ];
+    const providedColors = Array.isArray(options.colors) && options.colors.length ? options.colors : DEFAULT_CHART_COLORS;
+    this.colors = [...providedColors];
     this.tooltipFormatters = options.tooltip || {};
   }
+  getColor(index) {
+    this.ensureColorPool(index + 1);
+    return this.colors[index];
+  }
+  ensureColorPool(count) {
+    if (this.colors.length >= count) return;
+    while (this.colors.length < count) {
+      const nextIndex = this.colors.length;
+      const hue = nextIndex * 37 % 360;
+      const color = `hsla(${hue}, 70%, 55%, 0.85)`;
+      this.colors.push(color);
+    }
+  }
+  withAlpha(color, alpha = 0.4) {
+    if (!color) return color;
+    const rgbaMatch = color.match(/rgba?\(([^)]+)\)/i);
+    if (rgbaMatch) {
+      const parts = rgbaMatch[1].split(",").map((part) => part.trim());
+      const [r, g, b] = parts;
+      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
+    const hslaMatch = color.match(/hsla?\(([^)]+)\)/i);
+    if (hslaMatch) {
+      const parts = hslaMatch[1].split(",").map((part) => part.trim());
+      const [h, s, l] = parts;
+      return `hsla(${h}, ${s}, ${l}, ${alpha})`;
+    }
+    return color;
+  }
   async getTemplate() {
     return await super.getTemplate();
   }
@@ -1142,13 +1197,16 @@ class SeriesChart extends BaseChart {
       labels.push(xValue);
       values.push(yValue);
     });
+    this.ensureColorPool(1);
+    const baseColor = this.getColor(0);
+    const backgroundAlpha = this.chartType === "line" ? 0.25 : 0.65;
     return {
       labels,
       datasets: [{
         label: this.title || "Data",
         data: values,
-        backgroundColor: this.colors[0].replace("0.8", "0.6"),
-        borderColor: this.colors[0],
+        backgroundColor: this.withAlpha(baseColor, backgroundAlpha),
+        borderColor: baseColor,
         borderWidth: 2,
         tension: this.chartType === "line" ? this.tension : 0,
         fill: this.chartType === "line" ? this.fill : false,
@@ -1158,26 +1216,40 @@ class SeriesChart extends BaseChart {
   }
   processChartJSData(data) {
     const processedData = { ...data };
-    processedData.datasets = processedData.datasets.map((dataset, index) => ({
-      ...dataset,
-      backgroundColor: dataset.backgroundColor || this.colors[index % this.colors.length].replace("0.8", "0.6"),
-      borderColor: dataset.borderColor || this.colors[index % this.colors.length],
-      borderWidth: dataset.borderWidth || 2,
-      tension: this.chartType === "line" ? dataset.tension ?? this.tension : 0,
-      fill: this.chartType === "line" ? dataset.fill ?? this.fill : false,
-      stepped: this.chartType === "line" ? dataset.stepped ?? this.stepped : false
-    }));
+    if (!processedData.datasets) {
+      processedData.datasets = [];
+      return processedData;
+    }
+    const datasetCount = processedData.datasets.length;
+    this.ensureColorPool(datasetCount);
+    const backgroundAlpha = this.chartType === "line" ? 0.25 : 0.65;
+    processedData.datasets = processedData.datasets.map((dataset, index) => {
+      const baseColor = dataset.borderColor || this.getColor(index);
+      return {
+        ...dataset,
+        backgroundColor: dataset.backgroundColor || this.withAlpha(baseColor, backgroundAlpha),
+        borderColor: baseColor,
+        borderWidth: dataset.borderWidth || 2,
+        tension: this.chartType === "line" ? dataset.tension ?? this.tension : 0,
+        fill: this.chartType === "line" ? dataset.fill ?? this.fill : false,
+        stepped: this.chartType === "line" ? dataset.stepped ?? this.stepped : false
+      };
+    });
     return processedData;
   }
   processSeriesData(data) {
     const labels = data.labels || [];
     const datasets = [];
+    const count = data.series?.length || 0;
+    this.ensureColorPool(count);
+    const backgroundAlpha = this.chartType === "line" ? 0.25 : 0.65;
     data.series.forEach((series, index) => {
+      const baseColor = series.borderColor || this.getColor(index);
       datasets.push({
         label: series.name || series.label || `Series ${index + 1}`,
         data: series.data || [],
-        backgroundColor: series.backgroundColor || this.colors[index % this.colors.length].replace("0.8", "0.6"),
-        borderColor: series.borderColor || this.colors[index % this.colors.length],
+        backgroundColor: series.backgroundColor || this.withAlpha(baseColor, backgroundAlpha),
+        borderColor: baseColor,
         borderWidth: series.borderWidth || 2,
         tension: this.chartType === "line" ? series.tension ?? this.tension : 0,
         fill: this.chartType === "line" ? series.fill ?? this.fill : false,
@@ -1808,24 +1880,7 @@ class MetricsChart extends SeriesChart {
       ...options,
       chartType: options.chartType || "line",
       title: options.title || "Metrics",
-      colors: options.colors || [
-        "rgba(54, 162, 235, 0.8)",
-        // Blue
-        "rgba(255, 99, 132, 0.8)",
-        // Red
-        "rgba(75, 192, 192, 0.8)",
-        // Green
-        "rgba(255, 206, 86, 0.8)",
-        // Yellow
-        "rgba(153, 102, 255, 0.8)",
-        // Purple
-        "rgba(255, 159, 64, 0.8)",
-        // Orange
-        "rgba(199, 199, 199, 0.8)",
-        // Grey
-        "rgba(83, 102, 255, 0.8)"
-        // Indigo
-      ],
+      colors: options.colors,
       yAxis: options.yAxis || { label: "Count", beginAtZero: true },
       tooltip: options.tooltip || { y: "number" },
       width: options.width,
@@ -1860,6 +1915,8 @@ class MetricsChart extends SeriesChart {
       { value: "incident_evt", label: "System Events" },
       { value: "incidents", label: "Incidents" }
     ];
+    this.maxDatasets = Number.isFinite(options.maxDatasets) ? options.maxDatasets : null;
+    this.groupRemainingLabel = options.groupRemainingLabel || "Other";
     this.isLoading = false;
     this.lastFetch = null;
     if (!this.dateStart || !this.dateEnd) {
@@ -2008,18 +2065,42 @@ class MetricsChart extends SeriesChart {
   }
   processMetricsData(data) {
     const { data: metricsData, labels } = data;
-    const datasets = [];
-    Object.keys(metricsData).forEach((metric, index) => {
-      const values = metricsData[metric];
+    const metricEntries = Object.entries(metricsData || {});
+    const rankedEntries = metricEntries.map(([metric, values]) => {
       const sanitizedValues = values.map((val) => {
         if (val === null || val === void 0 || val === "") return 0;
         return typeof val === "number" ? val : parseFloat(val) || 0;
       });
+      const total = sanitizedValues.reduce((sum, val) => sum + val, 0);
+      return { metric, values: sanitizedValues, total };
+    });
+    rankedEntries.sort((a, b) => b.total - a.total);
+    let visibleEntries = rankedEntries;
+    let otherEntry = null;
+    if (this.maxDatasets && this.maxDatasets > 0 && rankedEntries.length > this.maxDatasets) {
+      visibleEntries = rankedEntries.slice(0, this.maxDatasets);
+      const remaining = rankedEntries.slice(this.maxDatasets);
+      const otherValues = labels.map(
+        (_, index) => remaining.reduce((sum, entry) => sum + (entry.values[index] || 0), 0)
+      );
+      otherEntry = {
+        metric: this.groupRemainingLabel,
+        values: otherValues,
+        total: otherValues.reduce((sum, val) => sum + val, 0),
+        isGrouped: true
+      };
+    }
+    const datasets = [];
+    const allEntries = otherEntry ? [...visibleEntries, otherEntry] : visibleEntries;
+    this.ensureColorPool(allEntries.length);
+    const backgroundAlpha = this.chartType === "line" ? 0.25 : 0.65;
+    allEntries.forEach((entry, index) => {
+      const baseColor = this.getColor(index);
       datasets.push({
-        label: this.formatMetricLabel(metric),
-        data: sanitizedValues,
-        backgroundColor: this.colors[index % this.colors.length].replace("0.8", "0.6"),
-        borderColor: this.colors[index % this.colors.length],
+        label: this.formatMetricLabel(entry.metric),
+        data: entry.values,
+        backgroundColor: this.withAlpha(baseColor, backgroundAlpha),
+        borderColor: baseColor,
         borderWidth: 2,
         tension: this.chartType === "line" ? 0.4 : 0,
         fill: false,
@@ -3199,4 +3280,4 @@ export {
   MetricsMiniChart as b,
   MetricsMiniChartWidget as c
 };
-//# sourceMappingURL=MetricsMiniChartWidget-DdZ3zNve.js.map
+//# sourceMappingURL=MetricsMiniChartWidget-DL5stA6A.js.map