@kwirthmagnify/kwirth-common-front 0.5.11 → 0.5.13

package/dist/MiniGauge.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface IMiniGaugeProps {
+    value: number;
+    max: number;
+    label: string;
+    format?: (v: number) => string;
+}
+export declare const MiniGauge: React.FC<IMiniGaugeProps>;

package/dist/MiniGauge.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MiniGauge = void 0;
+const react_1 = __importDefault(require("react"));
+const GAUGE_ZONES = [
+    { size: 0.5, fill: '#5BE12C' },
+    { size: 0.3, fill: '#F5CD19' },
+    { size: 0.2, fill: '#EA4228' },
+];
+const VW = 100, VH = 54;
+const GCX = VW / 2, GCY = VH;
+const G_OUTER = VW * 0.46, G_INNER = G_OUTER * 0.58, G_NEEDLE = G_OUTER * 0.86;
+const ARC_PATHS = (() => {
+    let a = Math.PI;
+    return GAUGE_ZONES.map(zone => {
+        const end = a - zone.size * Math.PI;
+        const ox1 = GCX + G_OUTER * Math.cos(a), oy1 = GCY - G_OUTER * Math.sin(a);
+        const ox2 = GCX + G_OUTER * Math.cos(end), oy2 = GCY - G_OUTER * Math.sin(end);
+        const ix1 = GCX + G_INNER * Math.cos(a), iy1 = GCY - G_INNER * Math.sin(a);
+        const ix2 = GCX + G_INNER * Math.cos(end), iy2 = GCY - G_INNER * Math.sin(end);
+        const d = `M ${ox1} ${oy1} A ${G_OUTER} ${G_OUTER} 0 0 1 ${ox2} ${oy2} L ${ix2} ${iy2} A ${G_INNER} ${G_INNER} 0 0 0 ${ix1} ${iy1} Z`;
+        a = end;
+        return { d, fill: zone.fill };
+    });
+})();
+const labelStyle = {
+    display: 'block',
+    fontSize: '0.75rem',
+    lineHeight: 1,
+    opacity: 0.6,
+    textAlign: 'center',
+};
+const MiniGauge = ({ value, max, label, format }) => {
+    const display = format ? format(value) : value.toFixed(1);
+    const pct = Math.min(value / (max || 1), 1);
+    const na = Math.PI * (1 - pct);
+    const nx = GCX + G_NEEDLE * Math.cos(na);
+    const ny = GCY - G_NEEDLE * Math.sin(na);
+    return (react_1.default.createElement("div", { style: { flex: 1, minWidth: 0, textAlign: 'center' } },
+        react_1.default.createElement("span", { style: Object.assign(Object.assign({}, labelStyle), { marginBottom: 4 }) }, display),
+        react_1.default.createElement("svg", { viewBox: `0 0 ${VW} ${VH}`, style: { width: '100%', display: 'block' } },
+            ARC_PATHS.map((p, i) => react_1.default.createElement("path", { key: i, d: p.d, fill: p.fill })),
+            react_1.default.createElement("line", { x1: GCX, y1: GCY, x2: nx, y2: ny, stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' }),
+            react_1.default.createElement("circle", { cx: GCX, cy: GCY, r: 3, fill: 'currentColor' })),
+        react_1.default.createElement("span", { style: Object.assign(Object.assign({}, labelStyle), { marginTop: 4 }) }, label)));
+};
+exports.MiniGauge = MiniGauge;

package/dist/index.d.ts

@@ -81,3 +81,5 @@ export interface IChannel {
 }
 export declare const cleanANSI: (text: string) => string;
 export { MarkdownViewer } from './MarkdownViewer';
+export { MiniGauge } from './MiniGauge';
+export type { IMiniGaugeProps } from './MiniGauge';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MarkdownViewer = exports.cleanANSI = exports.MetricDefinition = exports.ENotifyLevel = exports.EChannelRefreshAction = exports.useKeyboard = void 0;
+exports.MiniGauge = exports.MarkdownViewer = exports.cleanANSI = exports.MetricDefinition = exports.ENotifyLevel = exports.EChannelRefreshAction = exports.useKeyboard = void 0;
 const react_1 = require("react");
 const kwirth_common_1 = require("@kwirthmagnify/kwirth-common");
 Object.defineProperty(exports, "EChannelRefreshAction", { enumerable: true, get: function () { return kwirth_common_1.EChannelRefreshAction; } });
@@ -41,3 +41,5 @@ const cleanANSI = (text) => text.replace(/\x1b\[[0-9;]*[mKHVfJrcegH]|\x1b\[\d*n/
 exports.cleanANSI = cleanANSI;
 var MarkdownViewer_1 = require("./MarkdownViewer");
 Object.defineProperty(exports, "MarkdownViewer", { enumerable: true, get: function () { return MarkdownViewer_1.MarkdownViewer; } });
+var MiniGauge_1 = require("./MiniGauge");
+Object.defineProperty(exports, "MiniGauge", { enumerable: true, get: function () { return MiniGauge_1.MiniGauge; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwirthmagnify/kwirth-common-front",
-  "version": "0.5.11",
+  "version": "0.5.13",
   "description": "Frontend channel interfaces for Kwirth plugins and channels",
   "scripts": {
     "build": "del .\\dist\\* /s /q && tsc"