@openremote/or-gauge 1.8.0-snapshot.20250725120001 → 1.8.0-snapshot.20250725123024

package/lib/index.js

@@ -1,340 +1,94 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { css, html, LitElement } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
-import { AssetModelUtil } from "@openremote/model";
-import { Gauge } from "gaugeJS";
-import manager, { Util } from "@openremote/core";
-import { i18next } from "@openremote/or-translate";
-import { debounce } from "lodash";
-import { getAssetDescriptorIconTemplate } from "@openremote/or-icon";
-//language=css
-const styling = css `
-    :host {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-    }
-
-    #chart-wrapper {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-    }
-    #chart-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    #chart {
-        width: 100%;
-    }
-
-    .chart-description {
-        margin: 0 20px;
-        font-size: 16px;
-        z-index: 3;
-    }
-    .mainvalue-wrapper {
-        width: 100%;
-        display: flex;
-        flex: 0 0 60px;
-        align-items: center;
-        justify-content: center;
-    }
-    .main-number {
-        color: var(--internal-or-asset-viewer-title-text-color);
-        font-size: 42px;
-    }
-
-    .main-number-icon {
-        font-size: 24px;
-        margin-right: 10px;
-        display: flex;
-    }
-
-    .main-number-unit {
-        font-size: 42px;
-        color: var(--internal-or-asset-viewer-title-text-color);
-        font-weight: 200;
-        margin-left: 5px;
-    }
-
-    .main-number.xs, .main-number-unit.xs {
-        font-size: 18px;
-    }
-    .main-number.s, .main-number-unit.s {
-        font-size: 24px;
-    }
-    .main-number.m, .main-number-unit.m {
-        font-size: 30px;
-    }
-    .main-number.l, .main-number-unit.l {
-        font-size: 36px;
-    }
-    .main-number.xl, .main-number-unit.xl {
-        font-size: 42px;
-    }
-    .main-number.unknown, .main-number-unit.unknown {
-        font-size: unset;
-    }
-`;
-let OrGauge = class OrGauge extends LitElement {
-    static get styles() {
-        return [styling];
+var __decorate=this&&this.__decorate||function(t,e,i,a){var s,n=arguments.length,o=n<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,a);else for(var r=t.length-1;r>=0;r--)(s=t[r])&&(o=(n<3?s(o):n>3?s(e,i,o):s(e,i))||o);return n>3&&o&&Object.defineProperty(e,i,o),o},__awaiter=this&&this.__awaiter||function(t,e,i,a){return new(i||(i=Promise))(function(s,n){function o(t){try{h(a.next(t))}catch(t){n(t)}}function r(t){try{h(a.throw(t))}catch(t){n(t)}}function h(t){var e;t.done?s(t.value):((e=t.value)instanceof i?e:new i(function(t){t(e)})).then(o,r)}h((a=a.apply(t,e||[])).next())})};import{css as t,html as e,LitElement as i}from"lit";import{customElement as a,property as s,query as n,state as o}from"lit/decorators.js";import{AssetModelUtil as r}from"@openremote/model";import{Gauge as h}from"gaugeJS";import l,{Util as u}from"@openremote/core";import{i18next as d}from"@openremote/or-translate";import{debounce as p}from"lodash";import{getAssetDescriptorIconTemplate as g}from"@openremote/or-icon";let styling=t`
+    :host {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
     }
-    constructor() {
-        super();
-        this.decimals = 0;
-        this.loading = false;
-        if (!this.config) {
-            this.config = this.getDefaultConfig();
-        }
-        // Register observer when gauge size changes
-        this.updateComplete.then(() => {
-            this.resizeObserver = new ResizeObserver(debounce((entries) => {
-                const size = entries[0].contentRect;
-                this.gaugeSize = {
-                    width: size.width,
-                    height: size.height
-                };
-                this.updateComplete.then(() => {
-                    this.setupGauge(); // recreate gauge since the library is not 100% responsive.
-                });
-            }, 200));
-            this.resizeObserver.observe(this._wrapperElem);
-        });
+
+    #chart-wrapper {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
     }
-    // Processing changes before update, to prevent extra render
-    willUpdate(changedProps) {
-        if (changedProps.has('assetAttribute')) {
-            const attr = this.assetAttribute[1];
-            const attributeDescriptor = AssetModelUtil.getAttributeDescriptor(attr.name, this.asset.type);
-            this.unit = Util.resolveUnits(Util.getAttributeUnits(attr, attributeDescriptor, this.asset.type));
-            this.value = attr.value != null ? attr.value : NaN;
-        }
+    #chart-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
-    // After render took place...
-    updated(changedProperties) {
-        var _a, _b, _c, _d;
-        if (changedProperties.has('value')) {
-            (_a = this.gauge) === null || _a === void 0 ? void 0 : _a.set(this.value != null ? this.value : NaN);
-        }
-        if (changedProperties.has('attrRef')) {
-            if (this.attrRef) {
-                this.loadData(this.attrRef);
-            }
-            else {
-                this.assetAttribute = undefined;
-                this.value = undefined;
-            }
-        }
-        // Render gauge again if..
-        if (changedProperties.has('min') && this.min != null && this.gauge) {
-            this.gauge.setMinValue(this.min);
-            this.gauge.set(this.value != null ? this.value : NaN);
-        }
-        if (changedProperties.has('max') && this.max != null && this.gauge) {
-            this.gauge.maxValue = this.max;
-            this.gauge.set(this.value != null ? this.value : NaN);
-        }
-        if (changedProperties.has('thresholds') && this.thresholds) {
-            // Make staticZones out of the thresholds.
-            // If below the minimum or above the maximum, set the value according to it.
-            this.config.options.staticZones = [];
-            this.thresholds.sort((x, y) => (x[0] < y[0]) ? -1 : 1).forEach(((threshold, index) => {
-                var _a, _b, _c;
-                const min = threshold[0];
-                const max = (this.thresholds[index + 1] ? this.thresholds[index + 1][0] : this.max);
-                const zone = {
-                    strokeStyle: threshold[1],
-                    min: ((this.min && min && this.min > min) ? this.min : ((this.max && min && this.max < min) ? this.max : min)),
-                    max: ((this.max && max && this.max < max) ? this.max : ((this.min && max && this.min > max) ? this.min : max))
-                };
-                (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.staticZones) === null || _c === void 0 ? void 0 : _c.push(zone);
-            }));
-            // The lowest staticZone should ALWAYS have the minimum value, to prevent the graphic displaying incorrectly.
-            if (this.min && ((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.staticZones)) {
-                this.config.options.staticZones[0].min = this.min;
-            }
-            // Applying the options we changed.
-            if (this.gauge) {
-                this.gauge.setOptions((_d = this.config) === null || _d === void 0 ? void 0 : _d.options);
-            }
-        }
+
+    #chart {
+        width: 100%;
     }
-    setupGauge() {
-        var _a;
-        this.gauge = new Gauge(this._gaugeElem);
-        this.gauge.setOptions((_a = this.config) === null || _a === void 0 ? void 0 : _a.options);
-        this.gauge.maxValue = (this.max ? this.max : 100);
-        this.gauge.setMinValue(this.min ? this.min : 0);
-        this.gauge.animationSpeed = 1;
-        this.gauge.set(this.value != null ? this.value : NaN);
-        if (this.value == null && this.attrRef) {
-            this.loadData(this.attrRef);
-        }
+
+    .chart-description {
+        margin: 0 20px;
+        font-size: 16px;
+        z-index: 3;
     }
-    getGaugeWidth(gaugeSize, includeLabelHeight = true) {
-        if (!gaugeSize) {
-            return "unset";
-        }
-        const width = gaugeSize.width;
-        const height = (includeLabelHeight ? (gaugeSize.height - this._detailsElem.clientHeight) : gaugeSize.height) * 1.5;
-        return Math.min(width, height) + "px";
+    .mainvalue-wrapper {
+        width: 100%;
+        display: flex;
+        flex: 0 0 60px;
+        align-items: center;
+        justify-content: center;
     }
-    shouldShowLabel(gaugeSize) {
-        return (gaugeSize.width > 70) && (gaugeSize.height > 100);
+    .main-number {
+        color: var(--internal-or-asset-viewer-title-text-color);
+        font-size: 42px;
     }
-    getLabelSize(width) {
-        if (width < 120) {
-            return "s";
-        }
-        else if (width < 240) {
-            return "m";
-        }
-        else if (width < 320) {
-            return "l";
-        }
-        else {
-            return "xl";
-        }
+
+    .main-number-icon {
+        font-size: 24px;
+        margin-right: 10px;
+        display: flex;
     }
-    render() {
-        const formattedVal = (this.value != null ? +this.value.toFixed(this.decimals) : NaN); // + operator prevents str return
-        // Set width/height values based on size
-        const showLabel = this.gaugeSize ? this.shouldShowLabel(this.gaugeSize) : true;
-        const labelSize = showLabel && this.gaugeSize ? this.getLabelSize(this.gaugeSize.width) : "unknown";
-        const gaugeWidth = this.getGaugeWidth(this.gaugeSize, showLabel);
-        return html `
-            <div style="position: relative; height: 100%; width: 100%;">
-                <div id="chart-wrapper" style="display: ${this.loading ? 'none' : 'flex'};">
-                    <div id="chart-container" style="flex: 0 0 0; width: ${gaugeWidth};">
-                        <canvas id="chart"></canvas>
-                    </div>
-                    <div id="details-container">
-                        ${showLabel ? html `
-                            <div class="mainvalue-wrapper">
-                                <span class="main-number-icon">${this.asset ? getAssetDescriptorIconTemplate(AssetModelUtil.getAssetDescriptor(this.asset.type)) : ""}</span>
-                                <span class="main-number ${labelSize}">${formattedVal}</span>
-                                <span class="main-number-unit ${labelSize}">${this.unit ? this.unit : ""}</span>
-                            </div>
-                        ` : undefined}
-                    </div>
-                </div>
-            </div>
-            ${this.loading ? html `
-                <span>${i18next.t('loading')}</span>
-            ` : undefined}
-        `;
+
+    .main-number-unit {
+        font-size: 42px;
+        color: var(--internal-or-asset-viewer-title-text-color);
+        font-weight: 200;
+        margin-left: 5px;
     }
-    loadData(attrRef) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const response = yield manager.rest.api.AssetResource.queryAssets({ ids: [attrRef.id] });
-            const assets = response.data;
-            const assetAttributes = [attrRef].map((attrRef) => {
-                const assetIndex = assets.findIndex((asset) => asset.id === attrRef.id);
-                const asset = assetIndex >= 0 ? assets[assetIndex] : undefined;
-                return asset && asset.attributes ? [assetIndex, asset.attributes[attrRef.name]] : undefined;
-            }).filter((indexAndAttr) => !!indexAndAttr);
-            this.asset = assets[0];
-            this.assetAttribute = assetAttributes[0];
-        });
+
+    .main-number.xs, .main-number-unit.xs {
+        font-size: 18px;
     }
-    getDefaultConfig() {
-        return {
-            attributeRef: undefined,
-            options: {
-                angle: 0,
-                lineWidth: 0.4,
-                radiusScale: 1,
-                pointer: {
-                    length: 0.5,
-                    strokeWidth: 0.035,
-                    color: "#000000",
-                },
-                staticZones: [],
-                limitMax: true,
-                limitMin: true,
-                colorStart: "#000000",
-                colorStop: "#707070",
-                strokeColor: "#ABCDEF",
-                generateGradient: false,
-                highDpiSupport: true
-            }
-        };
+    .main-number.s, .main-number-unit.s {
+        font-size: 24px;
     }
-};
-__decorate([
-    property({ type: Object })
-], OrGauge.prototype, "attrRef", void 0);
-__decorate([
-    property({ type: Object })
-], OrGauge.prototype, "asset", void 0);
-__decorate([
-    property({ type: Object })
-], OrGauge.prototype, "assetAttribute", void 0);
-__decorate([
-    property()
-], OrGauge.prototype, "value", void 0);
-__decorate([
-    property()
-], OrGauge.prototype, "decimals", void 0);
-__decorate([
-    property()
-], OrGauge.prototype, "unit", void 0);
-__decorate([
-    property()
-], OrGauge.prototype, "min", void 0);
-__decorate([
-    property()
-], OrGauge.prototype, "max", void 0);
-__decorate([
-    property()
-], OrGauge.prototype, "thresholds", void 0);
-__decorate([
-    property()
-], OrGauge.prototype, "config", void 0);
-__decorate([
-    property({ type: String })
-], OrGauge.prototype, "realm", void 0);
-__decorate([
-    state()
-], OrGauge.prototype, "loading", void 0);
-__decorate([
-    state()
-], OrGauge.prototype, "gauge", void 0);
-__decorate([
-    state()
-], OrGauge.prototype, "gaugeSize", void 0);
-__decorate([
-    query("#chart")
-], OrGauge.prototype, "_gaugeElem", void 0);
-__decorate([
-    query("#chart-wrapper")
-], OrGauge.prototype, "_wrapperElem", void 0);
-__decorate([
-    query("#details-container")
-], OrGauge.prototype, "_detailsElem", void 0);
-OrGauge = __decorate([
-    customElement("or-gauge")
-], OrGauge);
-export { OrGauge };
-//# sourceMappingURL=index.js.map
+    .main-number.m, .main-number-unit.m {
+        font-size: 30px;
+    }
+    .main-number.l, .main-number-unit.l {
+        font-size: 36px;
+    }
+    .main-number.xl, .main-number-unit.xl {
+        font-size: 42px;
+    }
+    .main-number.unknown, .main-number-unit.unknown {
+        font-size: unset;
+    }
+`,OrGauge=class extends i{static get styles(){return[styling]}constructor(){super(),this.decimals=0,this.loading=!1,this.config||(this.config=this.getDefaultConfig()),this.updateComplete.then(()=>{this.resizeObserver=new ResizeObserver(p(t=>{let e=t[0].contentRect;this.gaugeSize={width:e.width,height:e.height},this.updateComplete.then(()=>{this.setupGauge()})},200)),this.resizeObserver.observe(this._wrapperElem)})}willUpdate(t){if(t.has("assetAttribute")){let t=this.assetAttribute[1],e=r.getAttributeDescriptor(t.name,this.asset.type);this.unit=u.resolveUnits(u.getAttributeUnits(t,e,this.asset.type)),this.value=null!=t.value?t.value:NaN}}updated(t){var e,i,a,s;t.has("value")&&(null==(e=this.gauge)||e.set(null!=this.value?this.value:NaN)),t.has("attrRef")&&(this.attrRef?this.loadData(this.attrRef):(this.assetAttribute=void 0,this.value=void 0)),t.has("min")&&null!=this.min&&this.gauge&&(this.gauge.setMinValue(this.min),this.gauge.set(null!=this.value?this.value:NaN)),t.has("max")&&null!=this.max&&this.gauge&&(this.gauge.maxValue=this.max,this.gauge.set(null!=this.value?this.value:NaN)),t.has("thresholds")&&this.thresholds&&(this.config.options.staticZones=[],this.thresholds.sort((t,e)=>t[0]<e[0]?-1:1).forEach((t,e)=>{var i,a,s;let n=t[0],o=this.thresholds[e+1]?this.thresholds[e+1][0]:this.max,r={strokeStyle:t[1],min:this.min&&n&&this.min>n?this.min:this.max&&n&&this.max<n?this.max:n,max:this.max&&o&&this.max<o?this.max:this.min&&o&&this.min>o?this.min:o};null==(s=null==(a=null==(i=this.config)?void 0:i.options)?void 0:a.staticZones)||s.push(r)}),this.min&&(null==(a=null==(i=this.config)?void 0:i.options)?void 0:a.staticZones)&&(this.config.options.staticZones[0].min=this.min),this.gauge&&this.gauge.setOptions(null==(s=this.config)?void 0:s.options))}setupGauge(){var t;this.gauge=new h(this._gaugeElem),this.gauge.setOptions(null==(t=this.config)?void 0:t.options),this.gauge.maxValue=this.max?this.max:100,this.gauge.setMinValue(this.min?this.min:0),this.gauge.animationSpeed=1,this.gauge.set(null!=this.value?this.value:NaN),null==this.value&&this.attrRef&&this.loadData(this.attrRef)}getGaugeWidth(t,e=!0){return t?Math.min(t.width,(e?t.height-this._detailsElem.clientHeight:t.height)*1.5)+"px":"unset"}shouldShowLabel(t){return t.width>70&&t.height>100}getLabelSize(t){return t<120?"s":t<240?"m":t<320?"l":"xl"}render(){let t=null!=this.value?+this.value.toFixed(this.decimals):NaN,i=!this.gaugeSize||this.shouldShowLabel(this.gaugeSize),a=i&&this.gaugeSize?this.getLabelSize(this.gaugeSize.width):"unknown",s=this.getGaugeWidth(this.gaugeSize,i);return e`
+            <div style="position: relative; height: 100%; width: 100%;">
+                <div id="chart-wrapper" style="display: ${this.loading?"none":"flex"};">
+                    <div id="chart-container" style="flex: 0 0 0; width: ${s};">
+                        <canvas id="chart"></canvas>
+                    </div>
+                    <div id="details-container">
+                        ${i?e`
+                            <div class="mainvalue-wrapper">
+                                <span class="main-number-icon">${this.asset?g(r.getAssetDescriptor(this.asset.type)):""}</span>
+                                <span class="main-number ${a}">${t}</span>
+                                <span class="main-number-unit ${a}">${this.unit?this.unit:""}</span>
+                            </div>
+                        `:void 0}
+                    </div>
+                </div>
+            </div>
+            ${this.loading?e`
+                <span>${d.t("loading")}</span>
+            `:void 0}
+        `}loadData(t){return __awaiter(this,void 0,void 0,function*(){let e=(yield l.rest.api.AssetResource.queryAssets({ids:[t.id]})).data,i=[t].map(t=>{let i=e.findIndex(e=>e.id===t.id),a=i>=0?e[i]:void 0;return a&&a.attributes?[i,a.attributes[t.name]]:void 0}).filter(t=>!!t);this.asset=e[0],this.assetAttribute=i[0]})}getDefaultConfig(){return{attributeRef:void 0,options:{angle:0,lineWidth:.4,radiusScale:1,pointer:{length:.5,strokeWidth:.035,color:"#000000"},staticZones:[],limitMax:!0,limitMin:!0,colorStart:"#000000",colorStop:"#707070",strokeColor:"#ABCDEF",generateGradient:!1,highDpiSupport:!0}}}};__decorate([s({type:Object})],OrGauge.prototype,"attrRef",void 0),__decorate([s({type:Object})],OrGauge.prototype,"asset",void 0),__decorate([s({type:Object})],OrGauge.prototype,"assetAttribute",void 0),__decorate([s()],OrGauge.prototype,"value",void 0),__decorate([s()],OrGauge.prototype,"decimals",void 0),__decorate([s()],OrGauge.prototype,"unit",void 0),__decorate([s()],OrGauge.prototype,"min",void 0),__decorate([s()],OrGauge.prototype,"max",void 0),__decorate([s()],OrGauge.prototype,"thresholds",void 0),__decorate([s()],OrGauge.prototype,"config",void 0),__decorate([s({type:String})],OrGauge.prototype,"realm",void 0),__decorate([o()],OrGauge.prototype,"loading",void 0),__decorate([o()],OrGauge.prototype,"gauge",void 0),__decorate([o()],OrGauge.prototype,"gaugeSize",void 0),__decorate([n("#chart")],OrGauge.prototype,"_gaugeElem",void 0),__decorate([n("#chart-wrapper")],OrGauge.prototype,"_wrapperElem",void 0),__decorate([n("#details-container")],OrGauge.prototype,"_detailsElem",void 0),OrGauge=__decorate([a("or-gauge")],OrGauge);export{OrGauge};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openremote/or-gauge",
-  "version": "1.8.0-snapshot.20250725120001",
+  "version": "1.8.0-snapshot.20250725123024",
   "description": "OpenRemote gauge",
   "customElements": "custom-elements.json",
   "main": "dist/umd/index.bundle.js",
@@ -18,16 +18,16 @@
   "author": "OpenRemote",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@openremote/core": "1.8.0-snapshot.20250725120001",
-    "@openremote/or-components": "1.8.0-snapshot.20250725120001",
-    "@openremote/or-icon": "1.8.0-snapshot.20250725120001",
-    "@openremote/or-mwc-components": "1.8.0-snapshot.20250725120001",
-    "@openremote/or-translate": "1.8.0-snapshot.20250725120001",
+    "@openremote/core": "1.8.0-snapshot.20250725123024",
+    "@openremote/or-components": "1.8.0-snapshot.20250725123024",
+    "@openremote/or-icon": "1.8.0-snapshot.20250725123024",
+    "@openremote/or-mwc-components": "1.8.0-snapshot.20250725123024",
+    "@openremote/or-translate": "1.8.0-snapshot.20250725123024",
     "gaugeJS": "^1.3.7",
     "lit": "^2.0.2"
   },
   "devDependencies": {
-    "@openremote/util": "1.8.0-snapshot.20250725120001"
+    "@openremote/util": "1.8.0-snapshot.20250725123024"
   },
   "publishConfig": {
     "access": "public"