@solidxai/core-ui 0.1.9-beta.7 → 0.1.9

package/dist/components/core/dashboard/widgets/DefaultDashboardPieChartWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultDashboardPieChartWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/DefaultDashboardPieChartWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAGjF,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,6BAA6B,2CAElF"}

package/dist/components/core/dashboard/widgets/DefaultDashboardPieChartWidget.js

@@ -0,0 +1,17 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DefaultDashboardChartWidget } from "./DefaultDashboardChartWidget";
+export function DefaultDashboardPieChartWidget(props) {
+    return _jsx(DefaultDashboardChartWidget, __assign({}, props));
+}
+//# sourceMappingURL=DefaultDashboardPieChartWidget.js.map

package/dist/components/core/dashboard/widgets/DefaultDashboardPieChartWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultDashboardPieChartWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/DefaultDashboardPieChartWidget.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAE5E,MAAM,UAAU,8BAA8B,CAAC,KAAoC;IACjF,OAAO,KAAC,2BAA2B,eAAK,KAAK,EAAI,CAAC;AACpD,CAAC","sourcesContent":["import type { DashboardWidgetComponentProps } from \"../../../../types/dashboard\";\nimport { DefaultDashboardChartWidget } from \"./DefaultDashboardChartWidget\";\n\nexport function DefaultDashboardPieChartWidget(props: DashboardWidgetComponentProps) {\n  return <DefaultDashboardChartWidget {...props} />;\n}\n"]}

package/dist/components/core/dashboard/widgets/DefaultDashboardPieChartWidget.tsx

@@ -0,0 +1,6 @@
+import type { DashboardWidgetComponentProps } from "../../../../types/dashboard";
+import { DefaultDashboardChartWidget } from "./DefaultDashboardChartWidget";
+
+export function DefaultDashboardPieChartWidget(props: DashboardWidgetComponentProps) {
+  return <DefaultDashboardChartWidget {...props} />;
+}

package/dist/components/core/dashboard/widgets/DefaultDashboardTableWidget.d.ts

@@ -0,0 +1,3 @@
+import type { DashboardWidgetComponentProps } from "../../../../types/dashboard";
+export declare function DefaultDashboardTableWidget({ runtime }: DashboardWidgetComponentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DefaultDashboardTableWidget.d.ts.map

package/dist/components/core/dashboard/widgets/DefaultDashboardTableWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultDashboardTableWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/DefaultDashboardTableWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAEjF,wBAAgB,2BAA2B,CAAC,EAAE,OAAO,EAAE,EAAE,6BAA6B,2CAoCrF"}

package/dist/components/core/dashboard/widgets/DefaultDashboardTableWidget.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function DefaultDashboardTableWidget(_a) {
+    var _b, _c;
+    var runtime = _a.runtime;
+    var columns = Array.isArray((_b = runtime === null || runtime === void 0 ? void 0 : runtime.data) === null || _b === void 0 ? void 0 : _b.columns) ? runtime.data.columns : [];
+    var records = Array.isArray((_c = runtime === null || runtime === void 0 ? void 0 : runtime.data) === null || _c === void 0 ? void 0 : _c.records) ? runtime.data.records : [];
+    return (_jsx("div", { style: { overflow: "auto", maxHeight: "100%" }, children: _jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [_jsx("thead", { children: _jsx("tr", { children: columns.map(function (column) { return (_jsx("th", { style: { textAlign: "left", borderBottom: "1px solid #eceff3", padding: "6px 8px", fontSize: "0.84rem" }, children: column }, column)); }) }) }), _jsx("tbody", { children: records.slice(0, 25).map(function (record, index) { return (_jsx("tr", { children: columns.map(function (column) {
+                            var _a;
+                            return (_jsx("td", { style: { textAlign: "left", borderBottom: "1px solid #f3f4f6", padding: "6px 8px", fontSize: "0.83rem", whiteSpace: "nowrap" }, children: "".concat((_a = record === null || record === void 0 ? void 0 : record[column]) !== null && _a !== void 0 ? _a : "") }, "".concat(index, "-").concat(column)));
+                        }) }, "record-".concat(index))); }) })] }) }));
+}
+//# sourceMappingURL=DefaultDashboardTableWidget.js.map

package/dist/components/core/dashboard/widgets/DefaultDashboardTableWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultDashboardTableWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/DefaultDashboardTableWidget.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,2BAA2B,CAAC,EAA0C;;QAAxC,OAAO,aAAA;IACnD,IAAM,OAAO,GAAa,KAAK,CAAC,OAAO,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5F,IAAM,OAAO,GAA0B,KAAK,CAAC,OAAO,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEzG,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,YACjD,iBAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,aACzD,0BACE,uBACG,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,CACvB,aAEE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,mBAAmB,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,YAEvG,MAAM,IAHF,MAAM,CAIR,CACN,EAPwB,CAOxB,CAAC,GACC,GACC,EACR,0BACG,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,KAAK,IAAK,OAAA,CAC3C,uBACG,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM;;4BAAK,OAAA,CACvB,aAEE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,mBAAmB,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAE7H,UAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,MAAM,CAAC,mCAAI,EAAE,CAAE,IAHvB,UAAG,KAAK,cAAI,MAAM,CAAE,CAItB,CACN,CAAA;yBAAA,CAAC,IARK,iBAAU,KAAK,CAAE,CASrB,CACN,EAX4C,CAW5C,CAAC,GACI,IACF,GACJ,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type { DashboardWidgetComponentProps } from \"../../../../types/dashboard\";\n\nexport function DefaultDashboardTableWidget({ runtime }: DashboardWidgetComponentProps) {\n  const columns: string[] = Array.isArray(runtime?.data?.columns) ? runtime.data.columns : [];\n  const records: Record<string, any>[] = Array.isArray(runtime?.data?.records) ? runtime.data.records : [];\n\n  return (\n    <div style={{ overflow: \"auto\", maxHeight: \"100%\" }}>\n      <table style={{ width: \"100%\", borderCollapse: \"collapse\" }}>\n        <thead>\n          <tr>\n            {columns.map((column) => (\n              <th\n                key={column}\n                style={{ textAlign: \"left\", borderBottom: \"1px solid #eceff3\", padding: \"6px 8px\", fontSize: \"0.84rem\" }}\n              >\n                {column}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {records.slice(0, 25).map((record, index) => (\n            <tr key={`record-${index}`}>\n              {columns.map((column) => (\n                <td\n                  key={`${index}-${column}`}\n                  style={{ textAlign: \"left\", borderBottom: \"1px solid #f3f4f6\", padding: \"6px 8px\", fontSize: \"0.83rem\", whiteSpace: \"nowrap\" }}\n                >\n                  {`${record?.[column] ?? \"\"}`}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"]}

package/dist/components/core/dashboard/widgets/DefaultDashboardTableWidget.tsx

@@ -0,0 +1,39 @@
+import type { DashboardWidgetComponentProps } from "../../../../types/dashboard";
+
+export function DefaultDashboardTableWidget({ runtime }: DashboardWidgetComponentProps) {
+  const columns: string[] = Array.isArray(runtime?.data?.columns) ? runtime.data.columns : [];
+  const records: Record<string, any>[] = Array.isArray(runtime?.data?.records) ? runtime.data.records : [];
+
+  return (
+    <div style={{ overflow: "auto", maxHeight: "100%" }}>
+      <table style={{ width: "100%", borderCollapse: "collapse" }}>
+        <thead>
+          <tr>
+            {columns.map((column) => (
+              <th
+                key={column}
+                style={{ textAlign: "left", borderBottom: "1px solid #eceff3", padding: "6px 8px", fontSize: "0.84rem" }}
+              >
+                {column}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {records.slice(0, 25).map((record, index) => (
+            <tr key={`record-${index}`}>
+              {columns.map((column) => (
+                <td
+                  key={`${index}-${column}`}
+                  style={{ textAlign: "left", borderBottom: "1px solid #f3f4f6", padding: "6px 8px", fontSize: "0.83rem", whiteSpace: "nowrap" }}
+                >
+                  {`${record?.[column] ?? ""}`}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/dist/components/core/dashboard/widgets/DefaultDashboardUnknownWidget.d.ts

@@ -0,0 +1,3 @@
+import type { DashboardWidgetComponentProps } from "../../../../types/dashboard";
+export declare function DefaultDashboardUnknownWidget({ runtime }: DashboardWidgetComponentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DefaultDashboardUnknownWidget.d.ts.map

package/dist/components/core/dashboard/widgets/DefaultDashboardUnknownWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultDashboardUnknownWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/DefaultDashboardUnknownWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAEjF,wBAAgB,6BAA6B,CAAC,EAAE,OAAO,EAAE,EAAE,6BAA6B,2CAMvF"}

package/dist/components/core/dashboard/widgets/DefaultDashboardUnknownWidget.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function DefaultDashboardUnknownWidget(_a) {
+    var _b, _c;
+    var runtime = _a.runtime;
+    return (_jsx("pre", { style: { margin: 0, fontSize: "0.78rem", overflow: "auto", maxHeight: "100%" }, children: JSON.stringify((_c = (_b = runtime === null || runtime === void 0 ? void 0 : runtime.data) !== null && _b !== void 0 ? _b : runtime) !== null && _c !== void 0 ? _c : {}, null, 2) }));
+}
+//# sourceMappingURL=DefaultDashboardUnknownWidget.js.map

package/dist/components/core/dashboard/widgets/DefaultDashboardUnknownWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultDashboardUnknownWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/DefaultDashboardUnknownWidget.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,6BAA6B,CAAC,EAA0C;;QAAxC,OAAO,aAAA;IACrD,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,YAChF,IAAI,CAAC,SAAS,CAAC,MAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,mCAAI,OAAO,mCAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,GACpD,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type { DashboardWidgetComponentProps } from \"../../../../types/dashboard\";\n\nexport function DefaultDashboardUnknownWidget({ runtime }: DashboardWidgetComponentProps) {\n  return (\n    <pre style={{ margin: 0, fontSize: \"0.78rem\", overflow: \"auto\", maxHeight: \"100%\" }}>\n      {JSON.stringify(runtime?.data ?? runtime ?? {}, null, 2)}\n    </pre>\n  );\n}\n"]}

package/dist/components/core/dashboard/widgets/DefaultDashboardUnknownWidget.tsx

@@ -0,0 +1,9 @@
+import type { DashboardWidgetComponentProps } from "../../../../types/dashboard";
+
+export function DefaultDashboardUnknownWidget({ runtime }: DashboardWidgetComponentProps) {
+  return (
+    <pre style={{ margin: 0, fontSize: "0.78rem", overflow: "auto", maxHeight: "100%" }}>
+      {JSON.stringify(runtime?.data ?? runtime ?? {}, null, 2)}
+    </pre>
+  );
+}

package/dist/components/core/dashboard/widgets/QueueSlaHeatmapWidget.d.ts

@@ -0,0 +1,3 @@
+import type { DashboardWidgetComponentProps } from "../../../../types/dashboard";
+export declare function QueueSlaHeatmapWidget({ runtime }: DashboardWidgetComponentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=QueueSlaHeatmapWidget.d.ts.map

package/dist/components/core/dashboard/widgets/QueueSlaHeatmapWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueueSlaHeatmapWidget.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/QueueSlaHeatmapWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAkDjF,wBAAgB,qBAAqB,CAAC,EAAE,OAAO,EAAE,EAAE,6BAA6B,2CAsM/E"}

package/dist/components/core/dashboard/widgets/QueueSlaHeatmapWidget.js

@@ -0,0 +1,203 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import ReactECharts from "echarts-for-react";
+var clamp = function (value, min, max) { return Math.min(Math.max(value, min), max); };
+var escapeHtml = function (value) {
+    return "".concat(value !== null && value !== void 0 ? value : "")
+        .replaceAll("&", "&")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#39;");
+};
+var formatBucketLabel = function (value) {
+    if (!value)
+        return "";
+    var date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return value;
+    return new Intl.DateTimeFormat("en-GB", {
+        day: "2-digit",
+        month: "short",
+        hour: "2-digit",
+        minute: "2-digit",
+    }).format(date);
+};
+var formatMetric = function (value, unit) {
+    if (unit === void 0) { unit = "ms"; }
+    if (value === undefined || value === null || Number.isNaN(Number(value))) {
+        return "--";
+    }
+    return "".concat(new Intl.NumberFormat("en-GB", { maximumFractionDigits: 2 }).format(Number(value))).concat(unit);
+};
+export function QueueSlaHeatmapWidget(_a) {
+    var _b, _c;
+    var runtime = _a.runtime;
+    var chartRef = useRef(null);
+    var containerRef = useRef(null);
+    var viewportWidth = typeof window === "undefined" ? 1280 : window.innerWidth;
+    var isMobileViewport = viewportWidth < 768;
+    var data = (_c = (_b = runtime === null || runtime === void 0 ? void 0 : runtime.data) !== null && _b !== void 0 ? _b : runtime) !== null && _c !== void 0 ? _c : {};
+    var xCategories = Array.isArray(data === null || data === void 0 ? void 0 : data.xCategories) ? data.xCategories : [];
+    var yCategories = Array.isArray(data === null || data === void 0 ? void 0 : data.yCategories) ? data.yCategories : [];
+    var points = Array.isArray(data === null || data === void 0 ? void 0 : data.points) ? data.points : [];
+    var pointDetails = Array.isArray(data === null || data === void 0 ? void 0 : data.pointDetails) ? data.pointDetails : [];
+    var tooltipFields = Array.isArray(data === null || data === void 0 ? void 0 : data.tooltipFields) ? data.tooltipFields : [];
+    var legendThresholds = Array.isArray(data === null || data === void 0 ? void 0 : data.legendThresholds) ? data.legendThresholds : [];
+    if (xCategories.length === 0 || yCategories.length === 0 || points.length === 0) {
+        return (_jsx("div", { style: { height: "100%", minHeight: 260, display: "flex", alignItems: "center", justifyContent: "center", color: "#64748b", fontSize: "0.92rem" }, children: "No SLA heatmap data available for the current filters." }));
+    }
+    var detailMap = new Map(pointDetails.map(function (detail) { return ["".concat(detail.xIndex, ":").concat(detail.yIndex), detail]; }));
+    var metricValues = points.map(function (entry) { var _a; return Number((_a = entry === null || entry === void 0 ? void 0 : entry[2]) !== null && _a !== void 0 ? _a : 0); }).filter(function (entry) { return Number.isFinite(entry); });
+    var min = metricValues.length ? Math.min.apply(Math, metricValues) : 0;
+    var max = metricValues.length ? Math.max.apply(Math, metricValues) : 0;
+    var visualMap = legendThresholds.length > 0
+        ? {
+            type: "piecewise",
+            orient: "horizontal",
+            left: "center",
+            bottom: 0,
+            itemWidth: isMobileViewport ? 12 : 18,
+            itemHeight: isMobileViewport ? 10 : 14,
+            itemGap: isMobileViewport ? 8 : 12,
+            textStyle: {
+                fontSize: isMobileViewport ? 10 : 11,
+            },
+            pieces: legendThresholds.map(function (threshold) { return ({
+                label: threshold.label,
+                color: threshold.color,
+                lte: threshold.lte,
+                gte: threshold.gte,
+                gt: threshold.gt,
+            }); }),
+        }
+        : {
+            min: min,
+            max: max,
+            calculable: true,
+            orient: "horizontal",
+            left: "center",
+            bottom: 0,
+        };
+    var option = {
+        tooltip: {
+            confine: true,
+            extraCssText: "max-width:".concat(isMobileViewport ? 190 : 260, "px;white-space:normal;word-break:break-word;overflow-wrap:anywhere;"),
+            position: function (point, _params, _dom, _rect, size) {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                var pointX = point[0], pointY = point[1];
+                var boxWidth = Number((_b = (_a = size === null || size === void 0 ? void 0 : size.contentSize) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 0);
+                var boxHeight = Number((_d = (_c = size === null || size === void 0 ? void 0 : size.contentSize) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : 0);
+                var viewWidth = Number((_f = (_e = size === null || size === void 0 ? void 0 : size.viewSize) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : 0);
+                var viewHeight = Number((_h = (_g = size === null || size === void 0 ? void 0 : size.viewSize) === null || _g === void 0 ? void 0 : _g[1]) !== null && _h !== void 0 ? _h : 0);
+                var offset = 12;
+                var nextLeft = clamp(pointX - (boxWidth / 2), 8, Math.max(8, viewWidth - boxWidth - 8));
+                var preferredTop = pointY - boxHeight - offset;
+                var fallbackTop = pointY + offset;
+                var nextTop = preferredTop < 8
+                    ? clamp(fallbackTop, 8, Math.max(8, viewHeight - boxHeight - 8))
+                    : preferredTop;
+                return [nextLeft, nextTop];
+            },
+            formatter: function (params) {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                var point = Array.isArray(params === null || params === void 0 ? void 0 : params.data) ? params.data : [];
+                var xIndex = Number((_a = point === null || point === void 0 ? void 0 : point[0]) !== null && _a !== void 0 ? _a : -1);
+                var yIndex = Number((_b = point === null || point === void 0 ? void 0 : point[1]) !== null && _b !== void 0 ? _b : -1);
+                var metricValue = Number((_c = point === null || point === void 0 ? void 0 : point[2]) !== null && _c !== void 0 ? _c : 0);
+                var detail = detailMap.get("".concat(xIndex, ":").concat(yIndex));
+                var queueName = escapeHtml((_e = (_d = detail === null || detail === void 0 ? void 0 : detail.queueName) !== null && _d !== void 0 ? _d : yCategories[yIndex]) !== null && _e !== void 0 ? _e : "");
+                var bucketLabel = escapeHtml(formatBucketLabel((_g = (_f = detail === null || detail === void 0 ? void 0 : detail.bucket) !== null && _f !== void 0 ? _f : xCategories[xIndex]) !== null && _g !== void 0 ? _g : ""));
+                var averageElapsed = escapeHtml(formatMetric((_h = detail === null || detail === void 0 ? void 0 : detail.avgElapsedMillis) !== null && _h !== void 0 ? _h : metricValue));
+                var rows = [
+                    "<div style=\"max-width:".concat(isMobileViewport ? 180 : 240, "px;line-height:1.4;white-space:normal;word-break:break-word;overflow-wrap:anywhere;\">"),
+                    "<div style=\"font-weight:600;margin-bottom:4px;word-break:break-word;overflow-wrap:anywhere;\">".concat(queueName, "</div>"),
+                    "<div>Bucket: ".concat(bucketLabel, "</div>"),
+                    "<div>Average Elapsed: ".concat(averageElapsed, "</div>"),
+                ];
+                if (tooltipFields.includes("messageCount") && (detail === null || detail === void 0 ? void 0 : detail.messageCount) !== undefined) {
+                    rows.push("<div>Message Count: ".concat(escapeHtml(new Intl.NumberFormat("en-GB").format(detail.messageCount)), "</div>"));
+                }
+                if (tooltipFields.includes("peakElapsedMillis") && (detail === null || detail === void 0 ? void 0 : detail.peakElapsedMillis) !== undefined) {
+                    rows.push("<div>Peak Elapsed: ".concat(escapeHtml(formatMetric(detail.peakElapsedMillis)), "</div>"));
+                }
+                rows.push("</div>");
+                return rows.join("");
+            },
+        },
+        grid: {
+            left: isMobileViewport ? 82 : 110,
+            right: isMobileViewport ? 10 : 20,
+            top: 18,
+            bottom: isMobileViewport ? 92 : 70,
+            containLabel: true,
+        },
+        xAxis: {
+            type: "category",
+            data: xCategories,
+            splitArea: { show: true },
+            axisLabel: {
+                formatter: function (value) { return formatBucketLabel(value); },
+                rotate: isMobileViewport ? 45 : 30,
+                fontSize: isMobileViewport ? 10 : 11,
+                hideOverlap: true,
+            },
+        },
+        yAxis: {
+            type: "category",
+            data: yCategories,
+            splitArea: { show: true },
+            axisLabel: {
+                interval: 0,
+                width: isMobileViewport ? 78 : 100,
+                overflow: "truncate",
+                fontSize: isMobileViewport ? 10 : 11,
+            },
+        },
+        visualMap: visualMap,
+        series: [
+            {
+                name: "Queue SLA",
+                type: "heatmap",
+                data: points,
+                label: { show: false },
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowColor: "rgba(0,0,0,0.25)",
+                    },
+                },
+            },
+        ],
+    };
+    useEffect(function () {
+        var _a, _b;
+        var resizeChart = function () {
+            var _a, _b, _c, _d;
+            try {
+                (_d = (_c = (_b = (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.resize) === null || _d === void 0 ? void 0 : _d.call(_c, { width: "auto", height: "auto" });
+            }
+            catch (_e) {
+                // no-op: chart may not be ready yet
+            }
+        };
+        var observedElement = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.closest(".grid-stack-item-content")) !== null && _b !== void 0 ? _b : containerRef.current;
+        var observer = typeof ResizeObserver !== "undefined" && observedElement
+            ? new ResizeObserver(function () { return resizeChart(); })
+            : null;
+        if (observer && observedElement) {
+            observer.observe(observedElement);
+        }
+        var rafId = window.requestAnimationFrame(resizeChart);
+        var timeoutId = window.setTimeout(resizeChart, 120);
+        var timeoutIdLong = window.setTimeout(resizeChart, 320);
+        return function () {
+            window.cancelAnimationFrame(rafId);
+            window.clearTimeout(timeoutId);
+            window.clearTimeout(timeoutIdLong);
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        };
+    }, [option]);
+    return (_jsx("div", { ref: containerRef, style: { width: "100%", height: "100%", minHeight: 280, flex: 1 }, children: _jsx(ReactECharts, { ref: chartRef, option: option, style: { width: "100%", height: "100%", minHeight: 280 }, notMerge: true, lazyUpdate: true, autoResize: true }) }));
+}
+//# sourceMappingURL=QueueSlaHeatmapWidget.js.map

package/dist/components/core/dashboard/widgets/QueueSlaHeatmapWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueueSlaHeatmapWidget.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/widgets/QueueSlaHeatmapWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef } from \"react\";\nimport ReactECharts from \"echarts-for-react\";\nimport type { DashboardWidgetComponentProps } from \"../../../../types/dashboard\";\n\ntype HeatmapPointDetail = {\n  xIndex: number;\n  yIndex: number;\n  bucket?: string;\n  queueName?: string;\n  avgElapsedMillis?: number;\n  messageCount?: number;\n  peakElapsedMillis?: number;\n  [key: string]: any;\n};\n\ntype HeatmapLegendThreshold = {\n  label?: string;\n  color?: string;\n  lte?: number;\n  gte?: number;\n  gt?: number;\n};\n\nconst clamp = (value: number, min: number, max: number): number => Math.min(Math.max(value, min), max);\n\nconst escapeHtml = (value: unknown): string =>\n  `${value ?? \"\"}`\n    .replaceAll(\"&\", \"&amp;\")\n    .replaceAll(\"<\", \"&lt;\")\n    .replaceAll(\">\", \"&gt;\")\n    .replaceAll('\"', \"&quot;\")\n    .replaceAll(\"'\", \"&#39;\");\n\nconst formatBucketLabel = (value: string): string => {\n  if (!value) return \"\";\n  const date = new Date(value);\n  if (Number.isNaN(date.getTime())) return value;\n  return new Intl.DateTimeFormat(\"en-GB\", {\n    day: \"2-digit\",\n    month: \"short\",\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n  }).format(date);\n};\n\nconst formatMetric = (value: number | undefined, unit = \"ms\"): string => {\n  if (value === undefined || value === null || Number.isNaN(Number(value))) {\n    return \"--\";\n  }\n  return `${new Intl.NumberFormat(\"en-GB\", { maximumFractionDigits: 2 }).format(Number(value))}${unit}`;\n};\n\nexport function QueueSlaHeatmapWidget({ runtime }: DashboardWidgetComponentProps) {\n  const chartRef = useRef<any>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const viewportWidth = typeof window === \"undefined\" ? 1280 : window.innerWidth;\n  const isMobileViewport = viewportWidth < 768;\n  const data = runtime?.data ?? runtime ?? {};\n  const xCategories: string[] = Array.isArray(data?.xCategories) ? data.xCategories : [];\n  const yCategories: string[] = Array.isArray(data?.yCategories) ? data.yCategories : [];\n  const points: [number, number, number][] = Array.isArray(data?.points) ? data.points : [];\n  const pointDetails: HeatmapPointDetail[] = Array.isArray(data?.pointDetails) ? data.pointDetails : [];\n  const tooltipFields: string[] = Array.isArray(data?.tooltipFields) ? data.tooltipFields : [];\n  const legendThresholds: HeatmapLegendThreshold[] = Array.isArray(data?.legendThresholds) ? data.legendThresholds : [];\n\n  if (xCategories.length === 0 || yCategories.length === 0 || points.length === 0) {\n    return (\n      <div style={{ height: \"100%\", minHeight: 260, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", color: \"#64748b\", fontSize: \"0.92rem\" }}>\n        No SLA heatmap data available for the current filters.\n      </div>\n    );\n  }\n\n  const detailMap = new Map(\n    pointDetails.map((detail) => [`${detail.xIndex}:${detail.yIndex}`, detail] satisfies [string, HeatmapPointDetail])\n  );\n\n  const metricValues = points.map((entry) => Number(entry?.[2] ?? 0)).filter((entry) => Number.isFinite(entry));\n  const min = metricValues.length ? Math.min(...metricValues) : 0;\n  const max = metricValues.length ? Math.max(...metricValues) : 0;\n\n  const visualMap = legendThresholds.length > 0\n    ? {\n        type: \"piecewise\",\n        orient: \"horizontal\" as const,\n        left: \"center\" as const,\n        bottom: 0,\n        itemWidth: isMobileViewport ? 12 : 18,\n        itemHeight: isMobileViewport ? 10 : 14,\n        itemGap: isMobileViewport ? 8 : 12,\n        textStyle: {\n          fontSize: isMobileViewport ? 10 : 11,\n        },\n        pieces: legendThresholds.map((threshold) => ({\n          label: threshold.label,\n          color: threshold.color,\n          lte: threshold.lte,\n          gte: threshold.gte,\n          gt: threshold.gt,\n        })),\n      }\n    : {\n        min,\n        max,\n        calculable: true,\n        orient: \"horizontal\" as const,\n        left: \"center\" as const,\n        bottom: 0,\n      };\n\n  const option = {\n    tooltip: {\n      confine: true,\n      extraCssText: `max-width:${isMobileViewport ? 190 : 260}px;white-space:normal;word-break:break-word;overflow-wrap:anywhere;`,\n      position: (point: number[], _params: any, _dom: HTMLElement, _rect: any, size: any) => {\n        const [pointX, pointY] = point;\n        const boxWidth = Number(size?.contentSize?.[0] ?? 0);\n        const boxHeight = Number(size?.contentSize?.[1] ?? 0);\n        const viewWidth = Number(size?.viewSize?.[0] ?? 0);\n        const viewHeight = Number(size?.viewSize?.[1] ?? 0);\n        const offset = 12;\n\n        const nextLeft = clamp(pointX - (boxWidth / 2), 8, Math.max(8, viewWidth - boxWidth - 8));\n        const preferredTop = pointY - boxHeight - offset;\n        const fallbackTop = pointY + offset;\n        const nextTop = preferredTop < 8\n          ? clamp(fallbackTop, 8, Math.max(8, viewHeight - boxHeight - 8))\n          : preferredTop;\n\n        return [nextLeft, nextTop];\n      },\n      formatter: (params: any) => {\n        const point = Array.isArray(params?.data) ? params.data : [];\n        const xIndex = Number(point?.[0] ?? -1);\n        const yIndex = Number(point?.[1] ?? -1);\n        const metricValue = Number(point?.[2] ?? 0);\n        const detail = detailMap.get(`${xIndex}:${yIndex}`);\n        const queueName = escapeHtml(detail?.queueName ?? yCategories[yIndex] ?? \"\");\n        const bucketLabel = escapeHtml(formatBucketLabel(detail?.bucket ?? xCategories[xIndex] ?? \"\"));\n        const averageElapsed = escapeHtml(formatMetric(detail?.avgElapsedMillis ?? metricValue));\n\n        const rows = [\n          `<div style=\"max-width:${isMobileViewport ? 180 : 240}px;line-height:1.4;white-space:normal;word-break:break-word;overflow-wrap:anywhere;\">`,\n          `<div style=\"font-weight:600;margin-bottom:4px;word-break:break-word;overflow-wrap:anywhere;\">${queueName}</div>`,\n          `<div>Bucket: ${bucketLabel}</div>`,\n          `<div>Average Elapsed: ${averageElapsed}</div>`,\n        ];\n\n        if (tooltipFields.includes(\"messageCount\") && detail?.messageCount !== undefined) {\n          rows.push(`<div>Message Count: ${escapeHtml(new Intl.NumberFormat(\"en-GB\").format(detail.messageCount))}</div>`);\n        }\n        if (tooltipFields.includes(\"peakElapsedMillis\") && detail?.peakElapsedMillis !== undefined) {\n          rows.push(`<div>Peak Elapsed: ${escapeHtml(formatMetric(detail.peakElapsedMillis))}</div>`);\n        }\n\n        rows.push(\"</div>\");\n        return rows.join(\"\");\n      },\n    },\n    grid: {\n      left: isMobileViewport ? 82 : 110,\n      right: isMobileViewport ? 10 : 20,\n      top: 18,\n      bottom: isMobileViewport ? 92 : 70,\n      containLabel: true,\n    },\n    xAxis: {\n      type: \"category\",\n      data: xCategories,\n      splitArea: { show: true },\n      axisLabel: {\n        formatter: (value: string) => formatBucketLabel(value),\n        rotate: isMobileViewport ? 45 : 30,\n        fontSize: isMobileViewport ? 10 : 11,\n        hideOverlap: true,\n      },\n    },\n    yAxis: {\n      type: \"category\",\n      data: yCategories,\n      splitArea: { show: true },\n      axisLabel: {\n        interval: 0,\n        width: isMobileViewport ? 78 : 100,\n        overflow: \"truncate\" as const,\n        fontSize: isMobileViewport ? 10 : 11,\n      },\n    },\n    visualMap,\n    series: [\n      {\n        name: \"Queue SLA\",\n        type: \"heatmap\",\n        data: points,\n        label: { show: false },\n        emphasis: {\n          itemStyle: {\n            shadowBlur: 10,\n            shadowColor: \"rgba(0,0,0,0.25)\",\n          },\n        },\n      },\n    ],\n  };\n\n  useEffect(() => {\n    const resizeChart = () => {\n      try {\n        chartRef.current?.getEchartsInstance?.()?.resize?.({ width: \"auto\", height: \"auto\" });\n      } catch {\n        // no-op: chart may not be ready yet\n      }\n    };\n\n    const observedElement =\n      containerRef.current?.closest(\".grid-stack-item-content\") as HTMLElement | null ??\n      containerRef.current;\n\n    const observer = typeof ResizeObserver !== \"undefined\" && observedElement\n      ? new ResizeObserver(() => resizeChart())\n      : null;\n\n    if (observer && observedElement) {\n      observer.observe(observedElement);\n    }\n\n    const rafId = window.requestAnimationFrame(resizeChart);\n    const timeoutId = window.setTimeout(resizeChart, 120);\n    const timeoutIdLong = window.setTimeout(resizeChart, 320);\n\n    return () => {\n      window.cancelAnimationFrame(rafId);\n      window.clearTimeout(timeoutId);\n      window.clearTimeout(timeoutIdLong);\n      observer?.disconnect();\n    };\n  }, [option]);\n\n  return (\n    <div ref={containerRef} style={{ width: \"100%\", height: \"100%\", minHeight: 280, flex: 1 }}>\n      <ReactECharts\n        ref={chartRef}\n        option={option}\n        style={{ width: \"100%\", height: \"100%\", minHeight: 280 }}\n        notMerge\n        lazyUpdate\n        autoResize\n      />\n    </div>\n  );\n}\n"]}