@openremote/or-dashboard-builder 1.2.0-snapshot.20240819121545 → 1.2.0-snapshot.20240913092339
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/umd/index.js +105 -83
- package/dist/umd/index.orbundle.js +238 -185
- package/lib/or-dashboard-preview.js +2 -2
- package/lib/or-dashboard-preview.js.map +1 -1
- package/lib/or-dashboard-tree.js +2 -2
- package/lib/or-dashboard-tree.js.map +1 -1
- package/lib/widgets/attribute-input-widget.d.ts +2 -1
- package/lib/widgets/attribute-input-widget.js +10 -8
- package/lib/widgets/attribute-input-widget.js.map +1 -1
- package/lib/widgets/chart-widget.d.ts +2 -1
- package/lib/widgets/chart-widget.js +8 -6
- package/lib/widgets/chart-widget.js.map +1 -1
- package/lib/widgets/gateway-widget.d.ts +1 -1
- package/lib/widgets/gateway-widget.js +2 -2
- package/lib/widgets/gateway-widget.js.map +1 -1
- package/lib/widgets/gauge-widget.d.ts +2 -1
- package/lib/widgets/gauge-widget.js +6 -4
- package/lib/widgets/gauge-widget.js.map +1 -1
- package/lib/widgets/image-widget.d.ts +1 -1
- package/lib/widgets/image-widget.js +1 -1
- package/lib/widgets/image-widget.js.map +1 -1
- package/lib/widgets/kpi-widget.d.ts +2 -1
- package/lib/widgets/kpi-widget.js +8 -3
- package/lib/widgets/kpi-widget.js.map +1 -1
- package/package.json +6 -6
- package/src/or-dashboard-preview.ts +15 -1
- package/src/or-dashboard-tree.ts +4 -1
- package/src/widgets/attribute-input-widget.ts +24 -12
- package/src/widgets/chart-widget.ts +25 -25
- package/src/widgets/gateway-widget.ts +6 -5
- package/src/widgets/gauge-widget.ts +18 -9
- package/src/widgets/image-widget.ts +3 -1
- package/src/widgets/kpi-widget.ts +19 -5
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
var GaugeWidget_1,__decorate=this&&this.__decorate||function(t,e,i,s){var n,
|
|
2
|
-
${when(this.
|
|
1
|
+
var GaugeWidget_1,__decorate=this&&this.__decorate||function(t,e,i,s){var n,o=arguments.length,a=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,s);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(a=(o<3?n(a):o>3?n(e,i,a):n(e,i))||a);return o>3&&a&&Object.defineProperty(e,i,a),a};import{html}from"lit";import{customElement,state}from"lit/decorators.js";import{OrAssetWidget}from"../util/or-asset-widget";import{GaugeSettings}from"../settings/gauge-settings";import{when}from"lit/directives/when.js";import"@openremote/or-gauge";function getDefaultWidgetConfig(){return{attributeRefs:[],thresholds:[[0,"#4caf50"],[75,"#ff9800"],[90,"#ef5350"]],decimals:0,min:0,max:100,valueType:"number"}}let GaugeWidget=GaugeWidget_1=class extends OrAssetWidget{constructor(){super(...arguments),this._loading=!1}static getManifest(){return{displayName:"Gauge",displayIcon:"gauge",minColumnWidth:1,minColumnHeight:1,getContentHtml:t=>new GaugeWidget_1(t),getSettingsHtml:t=>new GaugeSettings(t),getDefaultConfig:()=>getDefaultWidgetConfig()}}refreshContent(t){this.loadAssets(this.widgetConfig.attributeRefs)}willUpdate(t){if(t.has("widgetConfig")&&this.widgetConfig){const t=this.widgetConfig.attributeRefs,e=null==t?void 0:t.filter((t=>this.isAttributeRefLoaded(t)));(null==e?void 0:e.length)!==(t?t.length:0)&&this.loadAssets(t)}return super.willUpdate(t)}loadAssets(t){this._loading=!0,this.fetchAssets(t).then((e=>{this.loadedAssets=e,this.assetAttributes=null==t?void 0:t.map((t=>{const i=e.findIndex((e=>e.id===t.id)),s=i>=0?e[i]:void 0;return s&&s.attributes?[i,s.attributes[t.name]]:void 0})).filter((t=>!!t))})).finally((()=>{this._loading=!1}))}render(){return html`
|
|
2
|
+
${when(this._loading,(()=>html`
|
|
3
|
+
<or-loading-indicator></or-loading-indicator>
|
|
4
|
+
`),(()=>when(this.loadedAssets&&this.assetAttributes&&this.loadedAssets.length>0&&this.assetAttributes.length>0,(()=>html`
|
|
3
5
|
<or-gauge .asset="${this.loadedAssets[0]}" .assetAttribute="${this.assetAttributes[0]}" .thresholds="${this.widgetConfig.thresholds}"
|
|
4
6
|
.decimals="${this.widgetConfig.decimals}" .min="${this.widgetConfig.min}" .max="${this.widgetConfig.max}"
|
|
5
7
|
style="height: 100%; overflow: hidden;">
|
|
@@ -8,5 +10,5 @@ var GaugeWidget_1,__decorate=this&&this.__decorate||function(t,e,i,s){var n,r=ar
|
|
|
8
10
|
<div style="height: 100%; display: flex; justify-content: center; align-items: center;">
|
|
9
11
|
<span><or-translate value="noAttributeConnected"></or-translate></span>
|
|
10
12
|
</div>
|
|
11
|
-
`))}
|
|
12
|
-
`}};GaugeWidget=GaugeWidget_1=__decorate([customElement("gauge-widget")],GaugeWidget);export{GaugeWidget};
|
|
13
|
+
`))))}
|
|
14
|
+
`}};__decorate([state()],GaugeWidget.prototype,"_loading",void 0),GaugeWidget=GaugeWidget_1=__decorate([customElement("gauge-widget")],GaugeWidget);export{GaugeWidget};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gauge-widget.js","sourceRoot":"","sources":["../../src/widgets/gauge-widget.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"gauge-widget.js","sourceRoot":"","sources":["../../src/widgets/gauge-widget.ts"],"names":[],"mappings":"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"}
|
|
@@ -18,7 +18,7 @@ export declare class ImageWidget extends OrAssetWidget {
|
|
|
18
18
|
static getManifest(): WidgetManifest;
|
|
19
19
|
refreshContent(force: boolean): void;
|
|
20
20
|
static get styles(): CSSResult[];
|
|
21
|
-
|
|
21
|
+
willUpdate(changedProps: PropertyValues): void;
|
|
22
22
|
protected loadAssets(): void;
|
|
23
23
|
protected handleMarkerPlacement(config: ImageWidgetConfig): TemplateResult<1>[] | undefined;
|
|
24
24
|
protected render(): TemplateResult;
|
|
@@ -34,7 +34,7 @@ var ImageWidget_1,__decorate=this&&this.__decorate||function(t,e,i,r){var s,o=ar
|
|
|
34
34
|
text-overflow: ellipsis;
|
|
35
35
|
white-space: nowrap;
|
|
36
36
|
}
|
|
37
|
-
`;function getDefaultWidgetConfig(){return{attributeRefs:[],showTimestampControls:!1,imagePath:"",markers:[]}}let ImageWidget=ImageWidget_1=class extends OrAssetWidget{static getManifest(){return{displayName:"Image",displayIcon:"file-image-marker",minColumnWidth:1,minColumnHeight:1,getContentHtml:t=>new ImageWidget_1(t),getSettingsHtml:t=>new ImageSettings(t),getDefaultConfig:()=>getDefaultWidgetConfig()}}refreshContent(t){this.loadAssets()}static get styles(){return[...super.styles,styling]}
|
|
37
|
+
`;function getDefaultWidgetConfig(){return{attributeRefs:[],showTimestampControls:!1,imagePath:"",markers:[]}}let ImageWidget=ImageWidget_1=class extends OrAssetWidget{static getManifest(){return{displayName:"Image",displayIcon:"file-image-marker",minColumnWidth:1,minColumnHeight:1,getContentHtml:t=>new ImageWidget_1(t),getSettingsHtml:t=>new ImageSettings(t),getDefaultConfig:()=>getDefaultWidgetConfig()}}refreshContent(t){this.loadAssets()}static get styles(){return[...super.styles,styling]}willUpdate(t){if(t.has("widgetConfig")&&this.widgetConfig){const t=this.widgetConfig.attributeRefs;(null==t?void 0:t.filter((t=>!this.isAttributeRefLoaded(t)))).length>0&&this.loadAssets()}return super.willUpdate(t)}loadAssets(){this.fetchAssets(this.widgetConfig.attributeRefs).then((t=>{this.loadedAssets=t,this.assetAttributes=this.widgetConfig.attributeRefs.map((e=>{const i=t.findIndex((t=>t.id===e.id)),r=i>=0?t[i]:void 0;return r&&r.attributes?[i,r.attributes[e.name]]:void 0})).filter((t=>!!t))}))}handleMarkerPlacement(t){if(this.assetAttributes.length&&t.attributeRefs.length>0)return 0===t.markers.length?(console.error("No markers found!"),[]):t.attributeRefs.map(((e,i)=>{const r=t.markers.find((t=>t.attributeRef.id===e.id&&t.attributeRef.name===e.name)),s=this.loadedAssets.find((t=>t.id===e.id));let o;const a={left:`${r.coordinates[0]}%`,top:`${r.coordinates[1]}%`};if(s){const t=s.attributes[e.name],i=AssetModelUtil.getAttributeAndValueDescriptors(s.type,e.name,t);o=Util.getAttributeValueAsString(t,i[0],s.type,!0,"-"),"colourRGB"===(null==t?void 0:t.type)&&"-"!==o&&(a.backgroundColor=o,a.minHeight="21px",a.minWidth="13px",o=void 0)}return html`
|
|
38
38
|
<span id="overlay" style="${styleMap(a)}">
|
|
39
39
|
${o}
|
|
40
40
|
</span>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-widget.js","sourceRoot":"","sources":["../../src/widgets/image-widget.ts"],"names":[],"mappings":";;;;;;;AACA,OAAO,EAAC,cAAc,EAA+C,MAAM,mBAAmB,CAAC;AAE/F,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAC,GAAG,EAAa,IAAI,EAAkC,SAAS,EAAE,MAAM,KAAK,CAAC;AACrF,OAAO,EAAC,aAAa,EAAC,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAC,aAAa,EAAC,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,aAAa,EAAE,IAAI,EAAC,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,MAAM,OAAO,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCA4Be,SAAS,CAAC,aAAa,CAAC;6CACb,SAAS,CAAC,aAAa,CAAC;;;;;;;CAOpE,CAAC;AAcF,SAAS,sBAAsB;IAC3B,OAAO;QACH,aAAa,EAAE,EAAE;QACjB,qBAAqB,EAAE,KAAK;QAC5B,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,EAAE;KACd,CAAC;AACN,CAAC;AAGM,IAAM,WAAW,mBAAjB,MAAM,WAAY,SAAQ,aAAa;IAK1C,MAAM,CAAC,WAAW;QACd,OAAO;YACH,WAAW,EAAE,OAAO;YACpB,WAAW,EAAE,mBAAmB;YAChC,cAAc,EAAE,CAAC;YACjB,eAAe,EAAE,CAAC;YAClB,cAAc,CAAC,MAAyB;gBACpC,OAAO,IAAI,aAAW,CAAC,MAAM,CAAC,CAAC;YACnC,CAAC;YACD,eAAe,CAAC,MAAyB;gBACrC,OAAO,IAAI,aAAa,CAAC,MAAM,CAAC,CAAC;YACrC,CAAC;YACD,gBAAgB;gBACZ,OAAO,sBAAsB,EAAE,CAAC;YACpC,CAAC;SACJ,CAAA;IACL,CAAC;IAEM,cAAc,CAAC,KAAc;QAChC,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAED,MAAM,KAAK,MAAM;QACb,OAAO,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,CAAC;IAED,
|
|
1
|
+
{"version":3,"file":"image-widget.js","sourceRoot":"","sources":["../../src/widgets/image-widget.ts"],"names":[],"mappings":"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"}
|
|
@@ -13,9 +13,10 @@ export interface KpiWidgetConfig extends WidgetConfig {
|
|
|
13
13
|
}
|
|
14
14
|
export declare class KpiWidget extends OrAssetWidget {
|
|
15
15
|
protected widgetConfig: KpiWidgetConfig;
|
|
16
|
+
protected _loading: boolean;
|
|
16
17
|
static getManifest(): WidgetManifest;
|
|
17
18
|
refreshContent(force: boolean): void;
|
|
18
|
-
protected
|
|
19
|
+
protected willUpdate(changedProps: Map<string, any>): void;
|
|
19
20
|
protected loadAssets(attributeRefs: AttributeRef[]): void;
|
|
20
21
|
protected render(): TemplateResult;
|
|
21
22
|
}
|
|
@@ -1,8 +1,13 @@
|
|
|
1
|
-
var KpiWidget_1,__decorate=this&&this.__decorate||function(t,e,i,s){var o,r=arguments.length,d=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(t,e,i,s);else for(var n=t.length-1;n>=0;n--)(o=t[n])&&(d=(r<3?o(d):r>3?o(e,i,d):o(e,i))||d);return r>3&&d&&Object.defineProperty(e,i,d),d};import{customElement}from"lit/decorators.js";import{OrAssetWidget}from"../util/or-asset-widget";import{html}from"lit";import{KpiSettings}from"../settings/kpi-settings";import"@openremote/or-attribute-card";function getDefaultWidgetConfig(){return{attributeRefs:[],period:"day",decimals:0,deltaFormat:"absolute",showTimestampControls:!1}}let KpiWidget=KpiWidget_1=class extends OrAssetWidget{static getManifest(){return{displayName:"KPI",displayIcon:"label",minColumnWidth:1,minColumnHeight:1,getContentHtml:t=>new KpiWidget_1(t),getSettingsHtml:t=>new KpiSettings(t),getDefaultConfig:()=>getDefaultWidgetConfig()}}refreshContent(t){this.loadAssets(this.widgetConfig.attributeRefs)}
|
|
2
|
-
<div style="height: 100%; overflow: hidden;">
|
|
1
|
+
var KpiWidget_1,__decorate=this&&this.__decorate||function(t,e,i,s){var o,r=arguments.length,d=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(t,e,i,s);else for(var n=t.length-1;n>=0;n--)(o=t[n])&&(d=(r<3?o(d):r>3?o(e,i,d):o(e,i))||d);return r>3&&d&&Object.defineProperty(e,i,d),d};import{customElement,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import{OrAssetWidget}from"../util/or-asset-widget";import{html}from"lit";import{KpiSettings}from"../settings/kpi-settings";import"@openremote/or-attribute-card";function getDefaultWidgetConfig(){return{attributeRefs:[],period:"day",decimals:0,deltaFormat:"absolute",showTimestampControls:!1}}let KpiWidget=KpiWidget_1=class extends OrAssetWidget{constructor(){super(...arguments),this._loading=!1}static getManifest(){return{displayName:"KPI",displayIcon:"label",minColumnWidth:1,minColumnHeight:1,getContentHtml:t=>new KpiWidget_1(t),getSettingsHtml:t=>new KpiSettings(t),getDefaultConfig:()=>getDefaultWidgetConfig()}}refreshContent(t){this.loadAssets(this.widgetConfig.attributeRefs)}willUpdate(t){if(t.has("widgetConfig")&&this.widgetConfig){const t=this.widgetConfig.attributeRefs,e=null==t?void 0:t.filter((t=>this.isAttributeRefLoaded(t)));(null==e?void 0:e.length)!==(t?t.length:0)&&this.loadAssets(t)}return super.willUpdate(t)}loadAssets(t){this._loading=!0,this.fetchAssets(t).then((e=>{this.loadedAssets=e,this.assetAttributes=null==t?void 0:t.map((t=>{const i=e.findIndex((e=>e.id===t.id)),s=i>=0?e[i]:void 0;return s&&s.attributes?[i,s.attributes[t.name]]:void 0})).filter((t=>!!t))})).finally((()=>{this._loading=!1}))}render(){var t;return html`
|
|
2
|
+
<div style="position: relative; height: 100%; overflow: hidden;">
|
|
3
|
+
${when(this._loading,(()=>html`
|
|
4
|
+
<div style="position: absolute; top: -5%; width: 100%; height: 105%; background: white; z-index: 1;">
|
|
5
|
+
<or-loading-indicator></or-loading-indicator>
|
|
6
|
+
</div>
|
|
7
|
+
`))}
|
|
3
8
|
<or-attribute-card .assets="${this.loadedAssets}" .assetAttributes="${this.assetAttributes}" .period="${this.widgetConfig.period}"
|
|
4
9
|
.deltaFormat="${this.widgetConfig.deltaFormat}" .mainValueDecimals="${this.widgetConfig.decimals}"
|
|
5
10
|
showControls="${null===(t=this.widgetConfig)||void 0===t?void 0:t.showTimestampControls}" showTitle="${!1}" style="height: 100%;">
|
|
6
11
|
</or-attribute-card>
|
|
7
12
|
</div>
|
|
8
|
-
`}};KpiWidget=KpiWidget_1=__decorate([customElement("kpi-widget")],KpiWidget);export{KpiWidget};
|
|
13
|
+
`}};__decorate([state()],KpiWidget.prototype,"_loading",void 0),KpiWidget=KpiWidget_1=__decorate([customElement("kpi-widget")],KpiWidget);export{KpiWidget};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kpi-widget.js","sourceRoot":"","sources":["../../src/widgets/kpi-widget.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"kpi-widget.js","sourceRoot":"","sources":["../../src/widgets/kpi-widget.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openremote/or-dashboard-builder",
|
|
3
|
-
"version": "1.2.0-snapshot.
|
|
3
|
+
"version": "1.2.0-snapshot.20240913092339",
|
|
4
4
|
"description": "OpenRemote Dashboard Builder",
|
|
5
5
|
"main": "dist/umd/index.bundle.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -16,15 +16,15 @@
|
|
|
16
16
|
"author": "OpenRemote",
|
|
17
17
|
"license": "AGPL-3.0-or-later",
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@openremote/core": "1.2.0-snapshot.
|
|
20
|
-
"@openremote/model": "1.2.0-snapshot.
|
|
21
|
-
"@openremote/or-chart": "1.2.0-snapshot.
|
|
22
|
-
"@openremote/rest": "1.2.0-snapshot.
|
|
19
|
+
"@openremote/core": "1.2.0-snapshot.20240913092339",
|
|
20
|
+
"@openremote/model": "1.2.0-snapshot.20240913092339",
|
|
21
|
+
"@openremote/or-chart": "1.2.0-snapshot.20240913092339",
|
|
22
|
+
"@openremote/rest": "1.2.0-snapshot.20240913092339",
|
|
23
23
|
"gridstack": "^7.2.0",
|
|
24
24
|
"lit": "^2.0.2"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@openremote/util": "1.2.0-snapshot.
|
|
27
|
+
"@openremote/util": "1.2.0-snapshot.20240913092339"
|
|
28
28
|
},
|
|
29
29
|
"publishConfig": {
|
|
30
30
|
"access": "public"
|
|
@@ -139,6 +139,7 @@ export class OrDashboardPreview extends LitElement {
|
|
|
139
139
|
|
|
140
140
|
// If there is no value yet, do initial setup:
|
|
141
141
|
} else if(newValue != undefined) {
|
|
142
|
+
console.debug("Creating a new Dashboard grid...");
|
|
142
143
|
this._template = newValue;
|
|
143
144
|
this.setupGrid(false, false);
|
|
144
145
|
}
|
|
@@ -305,6 +306,7 @@ export class OrDashboardPreview extends LitElement {
|
|
|
305
306
|
// Switching edit/view mode needs recreation of Grid
|
|
306
307
|
if(changedProperties.has("editMode")) {
|
|
307
308
|
if(changedProperties.get('editMode') != undefined) {
|
|
309
|
+
console.debug(`Edit mode is now ${this.editMode}. Force recreating grid...`);
|
|
308
310
|
this.setupGrid(true, true);
|
|
309
311
|
}
|
|
310
312
|
}
|
|
@@ -429,6 +431,7 @@ export class OrDashboardPreview extends LitElement {
|
|
|
429
431
|
/* ------------------------------- */
|
|
430
432
|
|
|
431
433
|
public refreshPreview() {
|
|
434
|
+
console.debug("Refreshing dashboard preview!");
|
|
432
435
|
this.setupGrid(true, true);
|
|
433
436
|
}
|
|
434
437
|
|
|
@@ -651,6 +654,7 @@ export class OrDashboardPreview extends LitElement {
|
|
|
651
654
|
}
|
|
652
655
|
|
|
653
656
|
protected _onGridResize() {
|
|
657
|
+
console.debug("Grid resize detected. Recreating the grid...");
|
|
654
658
|
this.setupGrid(true, false);
|
|
655
659
|
}
|
|
656
660
|
|
|
@@ -665,25 +669,35 @@ export class OrDashboardPreview extends LitElement {
|
|
|
665
669
|
let gridElement = this.shadowRoot?.getElementById("gridElement");
|
|
666
670
|
gridElement!.style.backgroundSize = "" + this.grid.cellWidth() + "px " + this.grid.getCellHeight() + "px";
|
|
667
671
|
gridElement!.style.height = maingrid!.scrollHeight + 'px';
|
|
672
|
+
console.debug("Amount of columns has been changed! Recreating grid...");
|
|
668
673
|
this.setupGrid(true, false);
|
|
669
674
|
}
|
|
670
675
|
|
|
671
676
|
// If multiple properties changed, just force rerender all of it.
|
|
672
677
|
else if(changes.changedKeys.length > 1) {
|
|
678
|
+
console.debug("Multiple changes detected. Force recreating grid...");
|
|
673
679
|
this.setupGrid(true, true);
|
|
674
680
|
}
|
|
675
681
|
|
|
676
682
|
// On widgets change, check whether they are programmatically added to GridStack. If not, adding them.
|
|
677
683
|
else if(changes.changedKeys.includes('widgets')) {
|
|
678
684
|
if(this.grid?.el != null) {
|
|
685
|
+
let amountAdded = 0;
|
|
679
686
|
this.grid.getGridItems().forEach((gridElement) => {
|
|
680
687
|
if(!gridElement.classList.contains('ui-draggable')) {
|
|
681
688
|
this.grid?.makeWidget(gridElement);
|
|
689
|
+
amountAdded++;
|
|
682
690
|
}
|
|
683
|
-
})
|
|
691
|
+
});
|
|
692
|
+
// If a widget is added, update the grid. (for example to update dashboard height)
|
|
693
|
+
if(amountAdded > 0) {
|
|
694
|
+
console.debug(`Created ${amountAdded} widgets. Updating the grid...`);
|
|
695
|
+
this.setupGrid(false, false);
|
|
696
|
+
}
|
|
684
697
|
}
|
|
685
698
|
}
|
|
686
699
|
else if(changes.changedKeys.includes('screenPresets')) {
|
|
700
|
+
console.debug("New template has a different screen preset! Force recreating grid...");
|
|
687
701
|
this.setupGrid(true, true);
|
|
688
702
|
}
|
|
689
703
|
}
|
package/src/or-dashboard-tree.ts
CHANGED
|
@@ -156,7 +156,10 @@ export class OrDashboardTree extends LitElement {
|
|
|
156
156
|
|
|
157
157
|
protected _doDuplicateDashboard(dashboard: Dashboard) {
|
|
158
158
|
const newDashboard = JSON.parse(JSON.stringify(dashboard)) as Dashboard;
|
|
159
|
-
newDashboard.displayName = (newDashboard.displayName +
|
|
159
|
+
newDashboard.displayName = (newDashboard.displayName + " copy");
|
|
160
|
+
if(newDashboard.template) {
|
|
161
|
+
newDashboard.template.id = Math.random().toString(36).slice(2, (String(newDashboard.template.id).length + 2)); // generate a new ID
|
|
162
|
+
}
|
|
160
163
|
DashboardService.create(newDashboard, undefined, this.realm).then(d => {
|
|
161
164
|
if (!this.dashboards) {
|
|
162
165
|
this.dashboards = [d] as Dashboard[];
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import {css, html, PropertyValues, TemplateResult } from "lit";
|
|
2
2
|
import {OrAssetWidget} from "../util/or-asset-widget";
|
|
3
3
|
import {WidgetConfig} from "../util/widget-config";
|
|
4
|
-
import {
|
|
4
|
+
import {AttributeRef, WellknownMetaItems} from "@openremote/model";
|
|
5
5
|
import {WidgetManifest} from "../util/or-widget";
|
|
6
6
|
import {WidgetSettings} from "../util/widget-settings";
|
|
7
|
-
import { customElement, query, queryAll } from "lit/decorators.js";
|
|
7
|
+
import { customElement, query, queryAll, state } from "lit/decorators.js";
|
|
8
8
|
import {AttributeInputSettings} from "../settings/attribute-input-settings";
|
|
9
9
|
import { when } from "lit/directives/when.js";
|
|
10
10
|
import {throttle} from "lodash";
|
|
@@ -22,7 +22,7 @@ function getDefaultWidgetConfig() {
|
|
|
22
22
|
attributeRefs: [],
|
|
23
23
|
readonly: false,
|
|
24
24
|
showHelperText: true
|
|
25
|
-
} as AttributeInputWidgetConfig
|
|
25
|
+
} as AttributeInputWidgetConfig;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
const styling = css`
|
|
@@ -45,6 +45,9 @@ export class AttributeInputWidget extends OrAssetWidget {
|
|
|
45
45
|
|
|
46
46
|
protected widgetConfig!: AttributeInputWidgetConfig;
|
|
47
47
|
|
|
48
|
+
@state()
|
|
49
|
+
protected _loading = false;
|
|
50
|
+
|
|
48
51
|
@query("#widget-wrapper")
|
|
49
52
|
protected widgetWrapperElem?: HTMLElement;
|
|
50
53
|
|
|
@@ -85,7 +88,7 @@ export class AttributeInputWidget extends OrAssetWidget {
|
|
|
85
88
|
delete this.resizeObserver;
|
|
86
89
|
}
|
|
87
90
|
|
|
88
|
-
protected
|
|
91
|
+
protected willUpdate(changedProps: PropertyValues) {
|
|
89
92
|
|
|
90
93
|
// If widgetConfig, and the attributeRefs of them have changed...
|
|
91
94
|
if(changedProps.has("widgetConfig") && this.widgetConfig) {
|
|
@@ -106,12 +109,15 @@ export class AttributeInputWidget extends OrAssetWidget {
|
|
|
106
109
|
this.resizeObserver.observe(this.widgetWrapperElem);
|
|
107
110
|
}
|
|
108
111
|
|
|
109
|
-
return super.
|
|
112
|
+
return super.willUpdate(changedProps);
|
|
110
113
|
}
|
|
111
114
|
|
|
112
115
|
protected loadAssets(attributeRefs: AttributeRef[]) {
|
|
116
|
+
this._loading = true;
|
|
113
117
|
this.fetchAssets(attributeRefs).then((assets) => {
|
|
114
118
|
this.loadedAssets = assets;
|
|
119
|
+
}).finally(() => {
|
|
120
|
+
this._loading = false;
|
|
115
121
|
});
|
|
116
122
|
}
|
|
117
123
|
|
|
@@ -120,7 +126,11 @@ export class AttributeInputWidget extends OrAssetWidget {
|
|
|
120
126
|
const attribute = (config.attributeRefs.length > 0 && this.loadedAssets[0]?.attributes) ? this.loadedAssets[0].attributes[config.attributeRefs[0].name!] : undefined;
|
|
121
127
|
const readOnlyMetaItem = Util.getMetaValue(WellknownMetaItems.READONLY, attribute);
|
|
122
128
|
return html`
|
|
123
|
-
${when(
|
|
129
|
+
${when(this._loading, () => {
|
|
130
|
+
return html`
|
|
131
|
+
<or-loading-indicator></or-loading-indicator>
|
|
132
|
+
`;
|
|
133
|
+
}, () => when(config.attributeRefs.length > 0 && attribute && this.loadedAssets && this.loadedAssets.length > 0, () => {
|
|
124
134
|
return html`
|
|
125
135
|
<div id="widget-wrapper">
|
|
126
136
|
<or-attribute-input class="attr-input" fullWidth
|
|
@@ -132,12 +142,14 @@ export class AttributeInputWidget extends OrAssetWidget {
|
|
|
132
142
|
.hasHelperText="${config.showHelperText}"
|
|
133
143
|
></or-attribute-input>
|
|
134
144
|
</div>
|
|
135
|
-
|
|
136
|
-
}, () =>
|
|
137
|
-
|
|
138
|
-
<
|
|
139
|
-
|
|
140
|
-
|
|
145
|
+
`;
|
|
146
|
+
}, () => {
|
|
147
|
+
return html`
|
|
148
|
+
<div style="height: 100%; display: flex; justify-content: center; align-items: center;">
|
|
149
|
+
<span><or-translate value="noAttributesConnected"></or-translate></span>
|
|
150
|
+
</div>
|
|
151
|
+
`;
|
|
152
|
+
}))}
|
|
141
153
|
`;
|
|
142
154
|
}
|
|
143
155
|
}
|
|
@@ -87,6 +87,9 @@ export class ChartWidget extends OrAssetWidget {
|
|
|
87
87
|
@state()
|
|
88
88
|
protected datapointQuery!: AssetDatapointQueryUnion;
|
|
89
89
|
|
|
90
|
+
@state()
|
|
91
|
+
protected _loading = false;
|
|
92
|
+
|
|
90
93
|
// Override of widgetConfig with extended type
|
|
91
94
|
protected widgetConfig!: ChartWidgetConfig;
|
|
92
95
|
|
|
@@ -141,39 +144,36 @@ export class ChartWidget extends OrAssetWidget {
|
|
|
141
144
|
|
|
142
145
|
if(changedProps.has('widgetConfig') && this.widgetConfig) {
|
|
143
146
|
this.datapointQuery = this.widgetConfig.datapointQuery;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
return super.willUpdate(changedProps);
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
// WebComponent lifecycle method, that occurs AFTER every state update
|
|
150
|
-
protected updated(changedProps: Map<string, any>) {
|
|
151
|
-
super.updated(changedProps);
|
|
152
147
|
|
|
153
|
-
// If widgetConfig, and the attributeRefs of them have changed...
|
|
154
|
-
if(changedProps.has("widgetConfig") && this.widgetConfig) {
|
|
155
148
|
const attributeRefs = this.widgetConfig.attributeRefs;
|
|
156
149
|
const missingAssets = attributeRefs?.filter((attrRef: AttributeRef) => !this.isAttributeRefLoaded(attrRef));
|
|
157
150
|
if (missingAssets.length > 0) {
|
|
158
|
-
|
|
159
|
-
// Fetch the new list of assets
|
|
160
|
-
this.fetchAssets(attributeRefs).then((assets) => {
|
|
161
|
-
this.loadedAssets = assets;
|
|
162
|
-
this.assetAttributes = attributeRefs?.map((attrRef: AttributeRef) => {
|
|
163
|
-
const assetIndex = assets.findIndex((asset) => asset.id === attrRef.id);
|
|
164
|
-
const foundAsset = assetIndex >= 0 ? assets[assetIndex] : undefined;
|
|
165
|
-
return foundAsset && foundAsset.attributes ? [assetIndex, foundAsset.attributes[attrRef.name!]] : undefined;
|
|
166
|
-
}).filter((indexAndAttr: any) => !!indexAndAttr) as [number, Attribute<any>][];
|
|
167
|
-
});
|
|
168
|
-
|
|
151
|
+
this.loadAssets(attributeRefs);
|
|
169
152
|
}
|
|
170
153
|
}
|
|
171
|
-
|
|
154
|
+
|
|
155
|
+
return super.willUpdate(changedProps);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
protected loadAssets(attributeRefs: AttributeRef[]) {
|
|
159
|
+
this._loading = true;
|
|
160
|
+
this.fetchAssets(attributeRefs).then((assets) => {
|
|
161
|
+
this.loadedAssets = assets;
|
|
162
|
+
this.assetAttributes = attributeRefs?.map((attrRef: AttributeRef) => {
|
|
163
|
+
const assetIndex = assets.findIndex((asset) => asset.id === attrRef.id);
|
|
164
|
+
const foundAsset = assetIndex >= 0 ? assets[assetIndex] : undefined;
|
|
165
|
+
return foundAsset && foundAsset.attributes ? [assetIndex, foundAsset.attributes[attrRef.name!]] : undefined;
|
|
166
|
+
}).filter((indexAndAttr: any) => !!indexAndAttr) as [number, Attribute<any>][];
|
|
167
|
+
}).finally(() => {
|
|
168
|
+
this._loading = false;
|
|
169
|
+
});
|
|
172
170
|
}
|
|
173
171
|
|
|
174
172
|
protected render(): TemplateResult {
|
|
175
173
|
return html`
|
|
176
|
-
${when(this.
|
|
174
|
+
${when(this._loading, () => html`
|
|
175
|
+
<or-loading-indicator></or-loading-indicator>
|
|
176
|
+
`, () => when(this.loadedAssets && this.assetAttributes && this.loadedAssets.length > 0 && this.assetAttributes.length > 0, () => {
|
|
177
177
|
return html`
|
|
178
178
|
<or-chart .assets="${this.loadedAssets}" .assetAttributes="${this.assetAttributes}" .rightAxisAttributes="${this.widgetConfig.rightAxisAttributes}"
|
|
179
179
|
.showLegend="${(this.widgetConfig?.showLegend != null) ? this.widgetConfig?.showLegend : true}"
|
|
@@ -188,8 +188,8 @@ export class ChartWidget extends OrAssetWidget {
|
|
|
188
188
|
<div style="height: 100%; display: flex; justify-content: center; align-items: center;">
|
|
189
189
|
<span><or-translate value="noAttributesConnected"></or-translate></span>
|
|
190
190
|
</div>
|
|
191
|
-
|
|
192
|
-
})}
|
|
191
|
+
`;
|
|
192
|
+
}))}
|
|
193
193
|
`;
|
|
194
194
|
}
|
|
195
195
|
|
|
@@ -42,7 +42,7 @@ function getDefaultWidgetConfig(): GatewayWidgetConfig {
|
|
|
42
42
|
return {
|
|
43
43
|
type: GatewayTunnelInfoType.HTTPS,
|
|
44
44
|
target: "localhost",
|
|
45
|
-
targetPort: 443
|
|
45
|
+
targetPort: 443
|
|
46
46
|
};
|
|
47
47
|
}
|
|
48
48
|
|
|
@@ -98,7 +98,7 @@ export class GatewayWidget extends OrWidget {
|
|
|
98
98
|
super.disconnectedCallback();
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
-
protected firstUpdated(
|
|
101
|
+
protected firstUpdated(changedProps: PropertyValues) {
|
|
102
102
|
if(this.widgetConfig) {
|
|
103
103
|
|
|
104
104
|
// Apply a timeout of 500 millis, so the tunnel has time to close upon disconnectedCallback() of a different widget.
|
|
@@ -117,8 +117,9 @@ export class GatewayWidget extends OrWidget {
|
|
|
117
117
|
this._loading = false;
|
|
118
118
|
});
|
|
119
119
|
|
|
120
|
-
}, 500)
|
|
120
|
+
}, 500);
|
|
121
121
|
}
|
|
122
|
+
return super.firstUpdated(changedProps);
|
|
122
123
|
}
|
|
123
124
|
|
|
124
125
|
protected render(): TemplateResult {
|
|
@@ -340,9 +341,9 @@ export class GatewayWidget extends OrWidget {
|
|
|
340
341
|
switch (info.type) {
|
|
341
342
|
case GatewayTunnelInfoType.HTTPS:
|
|
342
343
|
case GatewayTunnelInfoType.HTTP:
|
|
343
|
-
return "//" + info.id + "." + window.location.
|
|
344
|
+
return "//" + info.id + "." + (info.hostname ? info.hostname : window.location.hostname);
|
|
344
345
|
case GatewayTunnelInfoType.TCP:
|
|
345
|
-
return info.
|
|
346
|
+
return (info.hostname ? info.hostname : window.location.hostname) + ":" + info.assignedPort;
|
|
346
347
|
}
|
|
347
348
|
}
|
|
348
349
|
|
|
@@ -2,7 +2,7 @@ import {html, TemplateResult} from "lit";
|
|
|
2
2
|
import {customElement, state} from "lit/decorators.js";
|
|
3
3
|
import {OrAssetWidget} from "../util/or-asset-widget";
|
|
4
4
|
import {WidgetConfig} from "../util/widget-config";
|
|
5
|
-
import {
|
|
5
|
+
import {Attribute, AttributeRef} from "@openremote/model";
|
|
6
6
|
import {OrWidget, WidgetManifest} from "../util/or-widget";
|
|
7
7
|
import {WidgetSettings} from "../util/widget-settings";
|
|
8
8
|
import {GaugeSettings} from "../settings/gauge-settings";
|
|
@@ -35,6 +35,9 @@ export class GaugeWidget extends OrAssetWidget {
|
|
|
35
35
|
// Override of widgetConfig with extended type
|
|
36
36
|
protected widgetConfig!: GaugeWidgetConfig;
|
|
37
37
|
|
|
38
|
+
@state()
|
|
39
|
+
protected _loading = false;
|
|
40
|
+
|
|
38
41
|
static getManifest(): WidgetManifest {
|
|
39
42
|
return {
|
|
40
43
|
displayName: "Gauge",
|
|
@@ -50,16 +53,15 @@ export class GaugeWidget extends OrAssetWidget {
|
|
|
50
53
|
getDefaultConfig(): GaugeWidgetConfig {
|
|
51
54
|
return getDefaultWidgetConfig();
|
|
52
55
|
}
|
|
53
|
-
}
|
|
56
|
+
};
|
|
54
57
|
}
|
|
55
58
|
|
|
56
59
|
public refreshContent(force: boolean) {
|
|
57
60
|
this.loadAssets(this.widgetConfig.attributeRefs);
|
|
58
61
|
}
|
|
59
62
|
|
|
60
|
-
// WebComponent lifecycle method, that occurs
|
|
61
|
-
protected
|
|
62
|
-
super.updated(changedProps);
|
|
63
|
+
// WebComponent lifecycle method, that occurs DURING every state update
|
|
64
|
+
protected willUpdate(changedProps: Map<string, any>) {
|
|
63
65
|
|
|
64
66
|
// If widgetConfig, and the attributeRefs of them have changed...
|
|
65
67
|
if(changedProps.has("widgetConfig") && this.widgetConfig) {
|
|
@@ -74,10 +76,11 @@ export class GaugeWidget extends OrAssetWidget {
|
|
|
74
76
|
|
|
75
77
|
}
|
|
76
78
|
}
|
|
77
|
-
return super.
|
|
79
|
+
return super.willUpdate(changedProps);
|
|
78
80
|
}
|
|
79
81
|
|
|
80
82
|
protected loadAssets(attributeRefs: AttributeRef[]) {
|
|
83
|
+
this._loading = true;
|
|
81
84
|
this.fetchAssets(attributeRefs).then((assets) => {
|
|
82
85
|
this.loadedAssets = assets;
|
|
83
86
|
this.assetAttributes = attributeRefs?.map((attrRef: AttributeRef) => {
|
|
@@ -85,13 +88,19 @@ export class GaugeWidget extends OrAssetWidget {
|
|
|
85
88
|
const foundAsset = assetIndex >= 0 ? assets[assetIndex] : undefined;
|
|
86
89
|
return foundAsset && foundAsset.attributes ? [assetIndex, foundAsset.attributes[attrRef.name!]] : undefined;
|
|
87
90
|
}).filter((indexAndAttr: any) => !!indexAndAttr) as [number, Attribute<any>][];
|
|
91
|
+
}).finally(() => {
|
|
92
|
+
this._loading = false;
|
|
88
93
|
});
|
|
89
94
|
}
|
|
90
95
|
|
|
91
96
|
|
|
92
97
|
protected render(): TemplateResult {
|
|
93
98
|
return html`
|
|
94
|
-
${when(this.
|
|
99
|
+
${when(this._loading, () => {
|
|
100
|
+
return html`
|
|
101
|
+
<or-loading-indicator></or-loading-indicator>
|
|
102
|
+
`;
|
|
103
|
+
}, () => when(this.loadedAssets && this.assetAttributes && this.loadedAssets.length > 0 && this.assetAttributes.length > 0, () => {
|
|
95
104
|
return html`
|
|
96
105
|
<or-gauge .asset="${this.loadedAssets[0]}" .assetAttribute="${this.assetAttributes[0]}" .thresholds="${this.widgetConfig.thresholds}"
|
|
97
106
|
.decimals="${this.widgetConfig.decimals}" .min="${this.widgetConfig.min}" .max="${this.widgetConfig.max}"
|
|
@@ -103,8 +112,8 @@ export class GaugeWidget extends OrAssetWidget {
|
|
|
103
112
|
<div style="height: 100%; display: flex; justify-content: center; align-items: center;">
|
|
104
113
|
<span><or-translate value="noAttributeConnected"></or-translate></span>
|
|
105
114
|
</div>
|
|
106
|
-
|
|
107
|
-
})}
|
|
115
|
+
`;
|
|
116
|
+
}))}
|
|
108
117
|
`;
|
|
109
118
|
}
|
|
110
119
|
|
|
@@ -101,7 +101,7 @@ export class ImageWidget extends OrAssetWidget {
|
|
|
101
101
|
return [...super.styles, styling];
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
|
|
104
|
+
willUpdate(changedProps: PropertyValues) {
|
|
105
105
|
|
|
106
106
|
if(changedProps.has('widgetConfig') && this.widgetConfig) {
|
|
107
107
|
const attributeRefs = this.widgetConfig.attributeRefs;
|
|
@@ -110,6 +110,8 @@ export class ImageWidget extends OrAssetWidget {
|
|
|
110
110
|
this.loadAssets();
|
|
111
111
|
}
|
|
112
112
|
}
|
|
113
|
+
|
|
114
|
+
return super.willUpdate(changedProps);
|
|
113
115
|
}
|
|
114
116
|
|
|
115
117
|
protected loadAssets() {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { customElement } from "lit/decorators.js";
|
|
1
|
+
import { customElement, state } from "lit/decorators.js";
|
|
2
|
+
import { when } from "lit/directives/when.js";
|
|
2
3
|
import {OrAssetWidget} from "../util/or-asset-widget";
|
|
3
4
|
import {OrWidget, WidgetManifest} from "../util/or-widget";
|
|
4
5
|
import {WidgetSettings} from "../util/widget-settings";
|
|
@@ -31,6 +32,9 @@ export class KpiWidget extends OrAssetWidget {
|
|
|
31
32
|
|
|
32
33
|
protected widgetConfig!: KpiWidgetConfig;
|
|
33
34
|
|
|
35
|
+
@state()
|
|
36
|
+
protected _loading = false;
|
|
37
|
+
|
|
34
38
|
static getManifest(): WidgetManifest {
|
|
35
39
|
return {
|
|
36
40
|
displayName: "KPI",
|
|
@@ -53,8 +57,7 @@ export class KpiWidget extends OrAssetWidget {
|
|
|
53
57
|
this.loadAssets(this.widgetConfig.attributeRefs);
|
|
54
58
|
}
|
|
55
59
|
|
|
56
|
-
protected
|
|
57
|
-
super.updated(changedProps);
|
|
60
|
+
protected willUpdate(changedProps: Map<string, any>) {
|
|
58
61
|
|
|
59
62
|
// If widgetConfig, and the attributeRefs of them have changed...
|
|
60
63
|
if(changedProps.has("widgetConfig") && this.widgetConfig) {
|
|
@@ -69,10 +72,11 @@ export class KpiWidget extends OrAssetWidget {
|
|
|
69
72
|
|
|
70
73
|
}
|
|
71
74
|
}
|
|
72
|
-
return super.
|
|
75
|
+
return super.willUpdate(changedProps);
|
|
73
76
|
}
|
|
74
77
|
|
|
75
78
|
protected loadAssets(attributeRefs: AttributeRef[]) {
|
|
79
|
+
this._loading = true;
|
|
76
80
|
this.fetchAssets(attributeRefs).then((assets) => {
|
|
77
81
|
this.loadedAssets = assets;
|
|
78
82
|
this.assetAttributes = attributeRefs?.map((attrRef: AttributeRef) => {
|
|
@@ -80,12 +84,22 @@ export class KpiWidget extends OrAssetWidget {
|
|
|
80
84
|
const foundAsset = assetIndex >= 0 ? assets[assetIndex] : undefined;
|
|
81
85
|
return foundAsset && foundAsset.attributes ? [assetIndex, foundAsset.attributes[attrRef.name!]] : undefined;
|
|
82
86
|
}).filter((indexAndAttr: any) => !!indexAndAttr) as [number, Attribute<any>][];
|
|
87
|
+
}).finally(() => {
|
|
88
|
+
this._loading = false;
|
|
83
89
|
});
|
|
84
90
|
}
|
|
85
91
|
|
|
86
92
|
protected render(): TemplateResult {
|
|
87
93
|
return html`
|
|
88
|
-
<div style="height: 100%; overflow: hidden;">
|
|
94
|
+
<div style="position: relative; height: 100%; overflow: hidden;">
|
|
95
|
+
${when(this._loading, () => {
|
|
96
|
+
// Have to use `position: absolute` with white background due to rendering inconsistencies in or-attribute-card
|
|
97
|
+
return html`
|
|
98
|
+
<div style="position: absolute; top: -5%; width: 100%; height: 105%; background: white; z-index: 1;">
|
|
99
|
+
<or-loading-indicator></or-loading-indicator>
|
|
100
|
+
</div>
|
|
101
|
+
`;
|
|
102
|
+
})}
|
|
89
103
|
<or-attribute-card .assets="${this.loadedAssets}" .assetAttributes="${this.assetAttributes}" .period="${this.widgetConfig.period}"
|
|
90
104
|
.deltaFormat="${this.widgetConfig.deltaFormat}" .mainValueDecimals="${this.widgetConfig.decimals}"
|
|
91
105
|
showControls="${this.widgetConfig?.showTimestampControls}" showTitle="${false}" style="height: 100%;">
|