@flexem/fc-gui 3.0.0-alpha.3 → 3.0.0-alpha.30

package/elements/base/readable-element.js

@@ -4,8 +4,8 @@ import { ConditionalEnableElement } from './conditional-enable-element';
 import { forEach } from 'lodash';
 import { VariableUtil } from '../../utils/variable-util';
 export class ReadableElement extends ConditionalEnableElement {
-    constructor(element, permissionChecker, variableCommunicator, variableStore, localization) {
-        super(element, permissionChecker, variableCommunicator, variableStore, localization);
+    constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
     }
     init(variableName) {
         if (variableName) {
@@ -36,6 +36,33 @@ export class ReadableElement extends ConditionalEnableElement {
             return VariableUtil.getConvertedVariableName(this.variableStore, variable);
         }
     }
+    get minVariableName() {
+        if (!this.model.minValueType) {
+            return undefined;
+        }
+        return this.getVariableName(this.model.minVariable);
+    }
+    get minValueType() {
+        return this.model.minValueType;
+    }
+    get maxVariableName() {
+        if (!this.model.maxValueType) {
+            return undefined;
+        }
+        return this.getVariableName(this.model.maxVariable);
+    }
+    get maxValueType() {
+        return this.model.maxValueType;
+    }
+    getVariableName(variable) {
+        if (!this.model) {
+            throw new Error('Model cannot be null');
+        }
+        if (!variable) {
+            return undefined;
+        }
+        return VariableUtil.getConvertedVariableName(this.variableStore, variable);
+    }
     reportStateChanged(variableState) {
         forEach(this.elementStates, elementState => {
             if (elementState.variableName === variableState.variableName) {
@@ -51,8 +78,10 @@ export class ReadableElement extends ConditionalEnableElement {
                 this.changeStates();
             }
         });
-        if (this.state === State.Normal || this.state === State.Disable) {
-            this.updateVariableValue(value.value);
+        if (this.state === State.Normal || this.state === State.Disable
+            || value.variableName === this.minVariableName
+            || value.variableName === this.maxVariableName) {
+            this.updateVariableValue(value.value, value.variableName);
         }
     }
 }

package/elements/base/readable-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ReadableElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./conditional-enable-element","name":"ConditionalEnableElement","line":9,"character":46},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":13,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":13,"character":57},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":13,"character":98},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":14,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":14,"character":52}]}],"init":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}],"reportStateChanged":[{"__symbolic":"method"}],"reportValueChanged":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ReadableElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./conditional-enable-element","name":"ConditionalEnableElement","line":9,"character":46},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":13,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":13,"character":57},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":13,"character":98},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":14,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":14,"character":52},{"__symbolic":"reference","name":"string"}]}],"init":[{"__symbolic":"method"}],"getVariableName":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}],"reportStateChanged":[{"__symbolic":"method"}],"reportValueChanged":[{"__symbolic":"method"}]}}}}]

package/elements/base/state-control-element.d.ts

@@ -11,7 +11,7 @@ export declare abstract class StateControlElement extends ConditionalDynamicDisp
     state: State;
     private currentRect;
     preState: State;
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization);
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
     initState(): void;
     updateElementStates(newElementStates: VariableState[]): void;
     addElementState(newElementState: VariableState): void;

package/elements/base/state-control-element.js

@@ -3,8 +3,8 @@ import { VariableStateEnum } from '../../communication';
 import { ConditionalDynamicDisplayElement } from './conditional-dynamic-display-element';
 import { State } from '../../model';
 export class StateControlElement extends ConditionalDynamicDisplayElement {
-    constructor(element, permissionChecker, variableCommunicator, variableStore, localization) {
-        super(element, permissionChecker, variableCommunicator, variableStore);
+    constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
         this.localization = localization;
         this.isEnable = true;
         this.elementStates = [];

package/elements/base/state-control-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"StateControlElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./conditional-dynamic-display-element","name":"ConditionalDynamicDisplayElement","line":8,"character":50},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":16,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":16,"character":57},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":16,"character":98},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":17,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":17,"character":71}]}],"initState":[{"__symbolic":"method"}],"updateElementStates":[{"__symbolic":"method"}],"addElementState":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"getState":[{"__symbolic":"method"}],"changeState":[{"__symbolic":"method"}],"loadStateData":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"clearTip":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"StateControlElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./conditional-dynamic-display-element","name":"ConditionalDynamicDisplayElement","line":8,"character":50},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":16,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":16,"character":57},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":16,"character":98},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":17,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":17,"character":71},{"__symbolic":"reference","name":"string"}]}],"initState":[{"__symbolic":"method"}],"updateElementStates":[{"__symbolic":"method"}],"addElementState":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"getState":[{"__symbolic":"method"}],"changeState":[{"__symbolic":"method"}],"loadStateData":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"clearTip":[{"__symbolic":"method"}]}}}}]

package/elements/character-display/character-display-element.d.ts

@@ -17,7 +17,7 @@ export declare class CharacterDisplayElement extends ReadableElement {
     private displayValue;
     private graphs;
     private readonly logger;
-    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, variableCommunicator: VariableCommunicator, graphStore: GraphStore, permissionChecker: PermissionChecker, operationRecordService: OperationRecordService, securityChecker: SecurityChecker, variableStore: VariableStore, localization: Localization);
+    constructor(element: HTMLElement, injector: Injector, modalService: BsModalService, variableCommunicator: VariableCommunicator, graphStore: GraphStore, permissionChecker: PermissionChecker, operationRecordService: OperationRecordService, securityChecker: SecurityChecker, variableStore: VariableStore, localization: Localization, signalRAppId: string);
     get readVariableName(): string;
     get writeVariableName(): string;
     protected updateVariableValue(value: string): void;

package/elements/character-display/character-display-element.js

@@ -11,8 +11,8 @@ import { VerifyPasswordModalComponent } from '../../modal/verify-password/verify
 import { VariableUtil } from '../../utils/variable-util';
 import { TextElementModal } from '../shared/text/text-element';
 export class CharacterDisplayElement extends ReadableElement {
-    constructor(element, injector, modalService, variableCommunicator, graphStore, permissionChecker, operationRecordService, securityChecker, variableStore, localization) {
-        super(element, permissionChecker, variableCommunicator, variableStore, localization);
+    constructor(element, injector, modalService, variableCommunicator, graphStore, permissionChecker, operationRecordService, securityChecker, variableStore, localization, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
         this.modalService = modalService;
         this.graphStore = graphStore;
         this.operationRecordService = operationRecordService;

package/elements/character-display/character-display-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"CharacterDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/readable-element","name":"ReadableElement","line":19,"character":45},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":28,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":28,"character":48},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":29,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":30,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":31,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":32,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":33,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":34,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":35,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":36,"character":22}]}],"updateVariableValue":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"updateDisplayValue":[{"__symbolic":"method"}],"getVariableValueText":[{"__symbolic":"method"}],"characterDisplayText":[{"__symbolic":"method"}],"initElement":[{"__symbolic":"method"}],"initVariableText":[{"__symbolic":"method"}],"initClickEvent":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"doWriteCharacterValue":[{"__symbolic":"method"}],"recordOperation":[{"__symbolic":"method"}],"changeGraph":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"CharacterDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/readable-element","name":"ReadableElement","line":19,"character":45},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":28,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":28,"character":48},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":29,"character":39},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":30,"character":30},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":31,"character":37},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":32,"character":27},{"__symbolic":"reference","module":"../../service","name":"OperationRecordService","line":33,"character":49},{"__symbolic":"reference","module":"../../security","name":"SecurityChecker","line":34,"character":42},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":35,"character":23},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":36,"character":22},{"__symbolic":"reference","name":"string"}]}],"updateVariableValue":[{"__symbolic":"method"}],"changeStates":[{"__symbolic":"method"}],"updateDisplayValue":[{"__symbolic":"method"}],"getVariableValueText":[{"__symbolic":"method"}],"characterDisplayText":[{"__symbolic":"method"}],"initElement":[{"__symbolic":"method"}],"initVariableText":[{"__symbolic":"method"}],"initClickEvent":[{"__symbolic":"method"}],"checkElementPassword":[{"__symbolic":"method"}],"doWriteCharacterValue":[{"__symbolic":"method"}],"recordOperation":[{"__symbolic":"method"}],"changeGraph":[{"__symbolic":"method"}]}}}}]

package/elements/datetime-display/datetime-display-element.d.ts

@@ -13,7 +13,7 @@ export declare class DatetimeDisplayElement extends ConditionalDisplayElement {
     protected readonly model: DatetimeDisplay;
     protected readonly logger: LoggerService;
     private readonly $dateTimeText;
-    constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, graphStore: GraphStore);
+    constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, graphStore: GraphStore, signalRAppId: string);
     private getAndSetCurrentTime;
     private getDatetimeFormat;
     private initGraph;

package/elements/datetime-display/datetime-display-element.js

@@ -6,8 +6,8 @@ import { ConditionalDisplayElement } from '../base/conditional-display-element';
 import { GraphStateElement } from '../shared/graph/graph-state-element';
 import { LOGGER_SERVICE_TOKEN } from '../../logger';
 export class DatetimeDisplayElement extends ConditionalDisplayElement {
-    constructor(element, injector, permissionChecker, variableCommunicator, variableStore, graphStore) {
-        super(element, permissionChecker, variableCommunicator, variableStore);
+    constructor(element, injector, permissionChecker, variableCommunicator, variableStore, graphStore, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
         this.permissionChecker = permissionChecker;
         this.variableCommunicator = variableCommunicator;
         this.variableStore = variableStore;

package/elements/datetime-display/datetime-display-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"DatetimeDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":14,"character":44},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":21,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":21,"character":48},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":22,"character":46},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":23,"character":49},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":24,"character":42},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":25,"character":37}]}],"getAndSetCurrentTime":[{"__symbolic":"method"}],"getDatetimeFormat":[{"__symbolic":"method"}],"initGraph":[{"__symbolic":"method"}],"getFormat":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"DatetimeDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":14,"character":44},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":21,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":21,"character":48},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":22,"character":46},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":23,"character":49},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":24,"character":42},{"__symbolic":"reference","module":"../../config","name":"GraphStore","line":25,"character":37},{"__symbolic":"reference","name":"string"}]}],"getAndSetCurrentTime":[{"__symbolic":"method"}],"getDatetimeFormat":[{"__symbolic":"method"}],"initGraph":[{"__symbolic":"method"}],"getFormat":[{"__symbolic":"method"}]}}}}]

package/elements/historical-curve/historical-curve.element.d.ts

@@ -32,7 +32,7 @@ export declare class HistoricalCurveElement extends ConditionalDisplayElement {
     private elementStatus;
     private chartElement;
     private isMobileMode;
-    constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, historyDataStore: HistoryDataStore);
+    constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, historyDataStore: HistoryDataStore, signalRAppId: string);
     dispose(): void;
     private getValidTimePeriods;
     private updateTimeRange;

package/elements/historical-curve/historical-curve.element.js

@@ -11,8 +11,8 @@ import { LOGGER_SERVICE_TOKEN } from '../../logger';
 import { GlobalSettings, DisplayMode } from '../../settings';
 import { CurveType } from '../../model/historical-curve/curve-type';
 export class HistoricalCurveElement extends ConditionalDisplayElement {
-    constructor(element, injector, permissionChecker, variableCommunicator, variableStore, historyDataStore) {
-        super(element, permissionChecker, variableCommunicator, variableStore);
+    constructor(element, injector, permissionChecker, variableCommunicator, variableStore, historyDataStore, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
         this.historyDataStore = historyDataStore;
         this.displayOption = {
             dataLimit: 500,
@@ -58,7 +58,9 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
     }
     getValidTimePeriods() {
         const timePeriods = new Array();
+        timePeriods.push({ key: 6, name: this.localization.lastThirtyMinutes });
         timePeriods.push({ key: 1, name: this.localization.lastOneHour });
+        timePeriods.push({ key: 7, name: this.localization.lastEightHour });
         timePeriods.push({ key: 2, name: this.localization.lastTwentyFourHours });
         timePeriods.push({ key: 3, name: this.localization.lastSevenDays });
         timePeriods.push({ key: 4, name: this.localization.lastThirtyDays });
@@ -84,6 +86,12 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             case 5:
                 this.startTime = moment().subtract(1, 'years');
                 break;
+            case 6:
+                this.startTime = moment().subtract(30, 'minutes');
+                break;
+            case 7:
+                this.startTime = moment().subtract(8, 'hours');
+                break;
             default:
                 this.startTime = moment().subtract(1, 'days');
         }
@@ -151,10 +159,6 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             chart.focus.showXAxis(false);
         }
         this.renderCommonProperty(chart, chartWidth, chartHeight, data);
-        // if in Mobile mode and width is less than the min width, then hide operation area
-        if (this.isMobileMode && this.model.displaySetting.size.width < this.displayOption.mobileMinWidth) {
-            return chart;
-        }
         this.renderOperationArea(chartWidth, chartHeight);
         return chart;
     }
@@ -178,10 +182,6 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
         }
         chart.xAxis.tickFormat(d => this.timeFormat(d, '%x %X'));
         this.renderCommonProperty(chart, chartWidth, chartHeight, data);
-        // if in Mobile mode and width is less than the min width, then hide operation area
-        if (this.isMobileMode && this.model.displaySetting.size.width < this.displayOption.mobileMinWidth) {
-            return chart;
-        }
         this.renderOperationArea(chartWidth, chartHeight);
         const focusContext = this.rootElement.select('.nv-context');
         focusContext.select('.nv-barsWrap.nvd3-svg').attr('transform', 'translate(0,30)');

package/elements/historical-curve/historical-curve.element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"HistoricalCurveElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":20,"character":44},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":62,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":63,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":64,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":65,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":66,"character":23},{"__symbolic":"reference","module":"../../config","name":"HistoryDataStore","line":67,"character":43}]}],"dispose":[{"__symbolic":"method"}],"getValidTimePeriods":[{"__symbolic":"method"}],"updateTimeRange":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"reRenderElement":[{"__symbolic":"method"}],"renderElement":[{"__symbolic":"method"}],"renderChart":[{"__symbolic":"method"}],"getLineChart":[{"__symbolic":"method"}],"getMultiBarWithFocusChart":[{"__symbolic":"method"}],"renderCommonProperty":[{"__symbolic":"method"}],"renderOperationArea":[{"__symbolic":"method"}],"timeFormat":[{"__symbolic":"method"}],"loadFirstPage":[{"__symbolic":"method"}],"loadNextPage":[{"__symbolic":"method"}],"loadPreviousPage":[{"__symbolic":"method"}],"loadLastPage":[{"__symbolic":"method"}],"initElementStatus":[{"__symbolic":"method"}],"updateElementStatus":[{"__symbolic":"method"}],"setStatusAsUnbound":[{"__symbolic":"method"}],"setStatusAsLoading":[{"__symbolic":"method"}],"setStatusAsLoadFailed":[{"__symbolic":"method"}],"renderStatus":[{"__symbolic":"method"}],"clearStatus":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"HistoricalCurveElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base/conditional-display-element","name":"ConditionalDisplayElement","line":20,"character":44},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":62,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":63,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":64,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":65,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":66,"character":23},{"__symbolic":"reference","module":"../../config","name":"HistoryDataStore","line":67,"character":43},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"getValidTimePeriods":[{"__symbolic":"method"}],"updateTimeRange":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"reRenderElement":[{"__symbolic":"method"}],"renderElement":[{"__symbolic":"method"}],"renderChart":[{"__symbolic":"method"}],"getLineChart":[{"__symbolic":"method"}],"getMultiBarWithFocusChart":[{"__symbolic":"method"}],"renderCommonProperty":[{"__symbolic":"method"}],"renderOperationArea":[{"__symbolic":"method"}],"timeFormat":[{"__symbolic":"method"}],"loadFirstPage":[{"__symbolic":"method"}],"loadNextPage":[{"__symbolic":"method"}],"loadPreviousPage":[{"__symbolic":"method"}],"loadLastPage":[{"__symbolic":"method"}],"initElementStatus":[{"__symbolic":"method"}],"updateElementStatus":[{"__symbolic":"method"}],"setStatusAsUnbound":[{"__symbolic":"method"}],"setStatusAsLoading":[{"__symbolic":"method"}],"setStatusAsLoadFailed":[{"__symbolic":"method"}],"renderStatus":[{"__symbolic":"method"}],"clearStatus":[{"__symbolic":"method"}]}}}}]

package/elements/main-element.d.ts

@@ -11,6 +11,7 @@ export declare class MainElement {
     private readonly context;
     private readonly variableCommunicator;
     private readonly popupViewService;
+    private readonly signalRAppId;
     private readonly elements;
     private root;
     private isLoaded;
@@ -20,7 +21,7 @@ export declare class MainElement {
     oldSize: Size;
     private hostContainerId;
     get rootElement(): HTMLElement;
-    constructor(injector: Injector, bsModalService: BsModalService, context: GuiContext, variableCommunicator: VariableCommunicator, popupViewService: PopupViewService);
+    constructor(injector: Injector, bsModalService: BsModalService, context: GuiContext, variableCommunicator: VariableCommunicator, popupViewService: PopupViewService, signalRAppId: any);
     load(data: string, overflowVisible: boolean, guiOptions: GuiOptions): void;
     /**
      * 保证在显示区域内显示画面所有内容，等比缩放画面大小以铺满整个显示区域

package/elements/main-element.js

@@ -27,13 +27,15 @@ import { PolygonElement } from './vector-graphics/polygon-element';
 import { HyperlinkElement } from './static-elements/hyperlink-element';
 import { VideoElement } from './video/video-element';
 import { WeatherElement } from './weather/weater-element';
+import { AirQualityElement } from './air-quality/air-quality-element';
 export class MainElement {
-    constructor(injector, bsModalService, context, variableCommunicator, popupViewService) {
+    constructor(injector, bsModalService, context, variableCommunicator, popupViewService, signalRAppId) {
         this.injector = injector;
         this.bsModalService = bsModalService;
         this.context = context;
         this.variableCommunicator = variableCommunicator;
         this.popupViewService = popupViewService;
+        this.signalRAppId = signalRAppId;
         this.elements = new Array();
         this.logger = injector.get(LOGGER_SERVICE_TOKEN);
     }
@@ -57,72 +59,75 @@ export class MainElement {
             const category = $(element).data('model').category;
             switch (category) {
                 case GuiConsts.components.numericalDisplayKey:
-                    const numericalDisplayElement = new NumericalDisplayElement(element, this.injector, this.bsModalService, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.graphStore, this.context.operationRecordService, this.context.securityChecker, this.context.configStore.variableStore, this.injector.get(LOCALIZATION));
+                    const numericalDisplayElement = new NumericalDisplayElement(element, this.injector, this.bsModalService, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.graphStore, this.context.operationRecordService, this.context.securityChecker, this.context.configStore.variableStore, this.injector.get(LOCALIZATION), this.signalRAppId);
                     this.elements.push(numericalDisplayElement);
                     break;
                 case GuiConsts.components.imageKey:
-                    this.elements.push(new ImageElement(element, this.injector, this.context.configStore.imageStore, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.graphStore));
+                    this.elements.push(new ImageElement(element, this.injector, this.context.configStore.imageStore, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.graphStore, this.signalRAppId));
                     break;
                 case GuiConsts.components.meterKey:
-                    this.elements.push(new MeterElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.injector.get(LOCALIZATION)));
+                    this.elements.push(new MeterElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.injector.get(LOCALIZATION), this.signalRAppId));
                     break;
                 case GuiConsts.components.pipeKey:
-                    this.elements.push(new PipeElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.injector.get(LOCALIZATION)));
+                    this.elements.push(new PipeElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.injector.get(LOCALIZATION), this.signalRAppId));
                     break;
                 case GuiConsts.components.switchIndicatorLightKey:
-                    this.elements.push(new SwitchIndicatorLightElement(element, this.injector, this.bsModalService, this.variableCommunicator, this.context.configStore.graphStore, this.context.permissionChecker, this.context.operationRecordService, this.context.securityChecker, this.context.configStore.variableStore, this.injector.get(LOCALIZATION)));
+                    this.elements.push(new SwitchIndicatorLightElement(element, this.injector, this.bsModalService, this.variableCommunicator, this.context.configStore.graphStore, this.context.permissionChecker, this.context.operationRecordService, this.context.securityChecker, this.context.configStore.variableStore, this.injector.get(LOCALIZATION), this.signalRAppId));
                     break;
                 case GuiConsts.components.barGraphKey:
-                    this.elements.push(new BarGraphElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.injector.get(LOCALIZATION)));
+                    this.elements.push(new BarGraphElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.injector.get(LOCALIZATION), this.signalRAppId));
                     break;
                 case GuiConsts.components.toggleViewKey:
                 case GuiConsts.components.viewOperationElement:
-                    this.elements.push(new ViewOperationElement(element, this.injector, this.bsModalService, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.graphStore, this.context.permissionChecker, this.context.operationRecordService, this.context.securityChecker, this.injector.get(LOCALIZATION), this.popupViewService, guiOptions.hostContainerId, guiOptions.el));
+                    this.elements.push(new ViewOperationElement(element, this.injector, this.bsModalService, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.graphStore, this.context.permissionChecker, this.context.operationRecordService, this.context.securityChecker, this.injector.get(LOCALIZATION), this.popupViewService, guiOptions.hostContainerId, guiOptions.el, this.signalRAppId));
                     break;
                 case GuiConsts.components.characterKey:
-                    this.elements.push(new CharacterDisplayElement(element, this.injector, this.bsModalService, this.variableCommunicator, this.context.configStore.graphStore, this.context.permissionChecker, this.context.operationRecordService, this.context.securityChecker, this.context.configStore.variableStore, this.injector.get(LOCALIZATION)));
+                    this.elements.push(new CharacterDisplayElement(element, this.injector, this.bsModalService, this.variableCommunicator, this.context.configStore.graphStore, this.context.permissionChecker, this.context.operationRecordService, this.context.securityChecker, this.context.configStore.variableStore, this.injector.get(LOCALIZATION), this.signalRAppId));
                     break;
                 case GuiConsts.components.textKey:
-                    this.elements.push(new TextElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.graphStore));
+                    this.elements.push(new TextElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.graphStore, this.signalRAppId));
                     break;
                 case GuiConsts.components.hyperlinkKey:
-                    this.elements.push(new HyperlinkElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.graphStore));
+                    this.elements.push(new HyperlinkElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.graphStore, this.signalRAppId));
                     break;
                 case GuiConsts.components.straightLineKey:
-                    this.elements.push(new StraightLineElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore));
+                    this.elements.push(new StraightLineElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.signalRAppId));
                     break;
                 case GuiConsts.components.polyLineKey:
-                    this.elements.push(new PolyLineElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore));
+                    this.elements.push(new PolyLineElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.signalRAppId));
                     break;
                 case GuiConsts.components.ellipseKey:
-                    this.elements.push(new EllipseElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore));
+                    this.elements.push(new EllipseElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.signalRAppId));
                     break;
                 case GuiConsts.components.rectangleKey:
-                    this.elements.push(new RectangleElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore));
+                    this.elements.push(new RectangleElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.signalRAppId));
                     break;
                 case GuiConsts.components.sectorkey:
-                    this.elements.push(new SectorElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore));
+                    this.elements.push(new SectorElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.signalRAppId));
                     break;
                 case GuiConsts.components.datetimeDisplayKey:
-                    this.elements.push(new DatetimeDisplayElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.graphStore));
+                    this.elements.push(new DatetimeDisplayElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.graphStore, this.signalRAppId));
                     break;
                 case GuiConsts.components.historicalCurveKey:
-                    this.elements.push(new HistoricalCurveElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.historyDataStore));
+                    this.elements.push(new HistoricalCurveElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.configStore.historyDataStore, this.signalRAppId));
                     break;
                 case GuiConsts.components.ringGraphKey:
-                    this.elements.push(new RingGraphElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.injector.get(LOCALIZATION)));
+                    this.elements.push(new RingGraphElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.injector.get(LOCALIZATION), this.signalRAppId));
                     break;
                 case GuiConsts.components.polygonKey:
-                    this.elements.push(new PolygonElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore));
+                    this.elements.push(new PolygonElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.signalRAppId));
                     break;
                 case GuiConsts.components.videokey:
-                    this.elements.push(new VideoElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.videoService, new Size(this.rawWidth, this.rawHeight), guiOptions.svgRootClass));
+                    this.elements.push(new VideoElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.videoService, new Size(this.rawWidth, this.rawHeight), guiOptions.svgRootClass, this.signalRAppId));
                     break;
                 case GuiConsts.components.tableKey:
-                    this.elements.push(new PolygonElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore));
+                    this.elements.push(new PolygonElement(element, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.signalRAppId));
                     break;
                 case GuiConsts.components.weatherKey:
-                    this.elements.push(new WeatherElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.weatherService));
+                    this.elements.push(new WeatherElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.weatherService, this.signalRAppId));
+                    break;
+                case GuiConsts.components.airQualityKey:
+                    this.elements.push(new AirQualityElement(element, this.injector, this.context.permissionChecker, this.variableCommunicator, this.context.configStore.variableStore, this.context.weatherService, this.signalRAppId));
                     break;
             }
         });
@@ -203,7 +208,7 @@ export class MainElement {
     initElementState() {
         forEach(this.elements, element => {
             if (element instanceof ReadableElement) {
-                element.init(element.readVariableName);
+                element.init(element.readVariableName || element.maxVariableName || element.minVariableName);
             }
             else if (element instanceof HistoricalCurveElement) {
                 element.initElementStatus();
@@ -214,8 +219,20 @@ export class MainElement {
     getVariableNames() {
         const variableNames = new Array();
         forEach(this.elements, element => {
+            var _a, _b;
             if (element instanceof ReadableElement) {
+                const maxVariableName = (_a = element) === null || _a === void 0 ? void 0 : _a.maxVariableName;
+                const maxValueType = element.maxValueType;
+                const minVariableName = (_b = element) === null || _b === void 0 ? void 0 : _b.minVariableName;
+                const minValueType = element.minValueType;
                 const variableName = element.readVariableName;
+                // 最大最小值选择变量类型时，其中一个未绑定变量不进行开点操作 - FLEXCLOUD-1817
+                if (maxValueType && maxVariableName && !variableNames.find(v => isEqual(maxVariableName, v))) {
+                    variableNames.push(maxVariableName);
+                }
+                if (minValueType && minVariableName && !variableNames.find(v => isEqual(minVariableName, v))) {
+                    variableNames.push(minVariableName);
+                }
                 if (variableName && !variableNames.find(v => isEqual(variableName, v))) {
                     variableNames.push(element.readVariableName);
                 }
@@ -241,7 +258,7 @@ export class MainElement {
         each(values, value => {
             each(this.elements, e => {
                 if (e instanceof ReadableElement) {
-                    if (e.readVariableName === value.variableName) {
+                    if (e.readVariableName === value.variableName || e.minVariableName === value.variableName || e.maxVariableName === value.variableName) {
                         e.reportValueChanged(value);
                     }
                 }
@@ -251,7 +268,8 @@ export class MainElement {
     dispose() {
         each(this.elements, e => {
             if (e instanceof HistoricalCurveElement || e instanceof VideoElement
-                || e instanceof WeatherElement || e instanceof NumericalDisplayElement || e instanceof TextElement) {
+                || e instanceof WeatherElement || e instanceof NumericalDisplayElement || e instanceof TextElement
+                || e instanceof AirQualityElement) {
                 e.dispose();
             }
         });

package/elements/main-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"MainElement":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":53,"character":43},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":54,"character":41},{"__symbolic":"reference","module":"../gui/gui-context","name":"GuiContext","line":55,"character":34},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":56,"character":47},{"__symbolic":"reference","module":"../view/popup-view.service","name":"PopupViewService","line":57,"character":43}]}],"load":[{"__symbolic":"method"}],"uniformStretch":[{"__symbolic":"method"}],"changeVideoStyle":[{"__symbolic":"method"}],"horizontalStretch":[{"__symbolic":"method"}],"initElementState":[{"__symbolic":"method"}],"getVariableNames":[{"__symbolic":"method"}],"reportVariableStates":[{"__symbolic":"method"}],"reportVariableValues":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"checkIsLoaded":[{"__symbolic":"method"}],"initBackground":[{"__symbolic":"method"}],"getImageEl":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"MainElement":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":54,"character":43},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":55,"character":41},{"__symbolic":"reference","module":"../gui/gui-context","name":"GuiContext","line":56,"character":34},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":57,"character":47},{"__symbolic":"reference","module":"../view/popup-view.service","name":"PopupViewService","line":58,"character":43},null]}],"load":[{"__symbolic":"method"}],"uniformStretch":[{"__symbolic":"method"}],"changeVideoStyle":[{"__symbolic":"method"}],"horizontalStretch":[{"__symbolic":"method"}],"initElementState":[{"__symbolic":"method"}],"getVariableNames":[{"__symbolic":"method"}],"reportVariableStates":[{"__symbolic":"method"}],"reportVariableValues":[{"__symbolic":"method"}],"dispose":[{"__symbolic":"method"}],"checkIsLoaded":[{"__symbolic":"method"}],"initBackground":[{"__symbolic":"method"}],"getImageEl":[{"__symbolic":"method"}]}}}}]

package/elements/meter-element.d.ts

@@ -5,16 +5,22 @@ import { ReadableElement } from './base';
 import { VariableStore } from '../config';
 import { PermissionChecker } from '../service';
 export declare class MeterElement extends ReadableElement {
+    private static DEFAULT_MIN_VALUE;
+    private static DEFAULT_MAX_VALUE;
     private readonly $handEl;
     private readonly arcPath$;
     private cx;
     private cy;
     private offsetY;
     private mainElementTransform;
+    private valueObj;
+    private isNeedUpdateScale;
     readonly model: Meter;
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization);
-    updateVariableValue(value: number): void;
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
+    private updateValueObj;
+    updateVariableValue(value: number, variableName: any): void;
     private initFrameNode;
+    private updateScale;
     private getAngle;
     private directionPoint;
 }

package/elements/meter-element.js

@@ -1,10 +1,20 @@
 import { ReadableElement } from './base';
+import { isNumber } from 'lodash';
+import { VariableValueType } from '../model/shared/condition/variable-value-type';
 export class MeterElement extends ReadableElement {
-    constructor(element, permissionChecker, variableCommunicator, variableStore, localization) {
-        super(element, permissionChecker, variableCommunicator, variableStore, localization);
+    constructor(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
         this.cx = 0;
         this.cy = 0;
         this.offsetY = 0;
+        this.valueObj = {};
+        this.isNeedUpdateScale = false;
+        if ((this.model.minValueType === VariableValueType.Constant && this.model.maxValueType === VariableValueType.Variable)
+            || this.model.maxValueType === VariableValueType.Constant && this.model.minValueType === VariableValueType.Variable) {
+            this.isNeedUpdateScale = true;
+            this.updateScale();
+            this.isNeedUpdateScale = false;
+        }
         let mainEl$;
         if (this.model.version && this.model.version > 3) {
             mainEl$ = this.$element.find('[data-id="main"]');
@@ -31,18 +41,75 @@ export class MeterElement extends ReadableElement {
             this.changeStates();
         });
     }
-    updateVariableValue(value) {
-        const angle = this.getAngle(value);
-        this.$handEl.attr('transform', this.mainElementTransform + ` translate(0,${this.offsetY}) rotate(${angle}, ${this.cx}, ${this.cy})`);
+    updateValueObj(value, variableName) {
+        var _a, _b, _c;
+        if (((_a = this.model.readVariable) === null || _a === void 0 ? void 0 : _a.name) === variableName) {
+            this.isNeedUpdateScale = false;
+            this.valueObj.value = value;
+        }
+        if (((_b = this.model.minVariable) === null || _b === void 0 ? void 0 : _b.name) === variableName) {
+            this.isNeedUpdateScale = true;
+            this.valueObj.min = value;
+        }
+        if (((_c = this.model.maxVariable) === null || _c === void 0 ? void 0 : _c.name) === variableName) {
+            this.isNeedUpdateScale = true;
+            this.valueObj.max = value;
+        }
+    }
+    updateVariableValue(value, variableName) {
+        this.updateValueObj(value, variableName);
+        this.updateScale();
+        const angle = this.getAngle();
+        if (isNumber(angle)) {
+            this.$handEl.attr('transform', this.mainElementTransform + ` translate(0,${this.offsetY}) rotate(${angle}, ${this.cx}, ${this.cy})`);
+        }
     }
     initFrameNode() {
         const b = Snap(this.$element[0]).getBBox();
         this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', b.width).attr('height', b.height).attr('fill', 'transparent');
     }
-    getAngle(value) {
-        const min = this.model.min;
-        const max = this.model.max;
-        value = Math.min(Math.max(value, min), max);
+    updateScale() {
+        if (!this.isNeedUpdateScale) {
+            return;
+        }
+        let min = this.model.minValueType ? this.valueObj.min : this.model.min;
+        let max = this.model.maxValueType ? this.valueObj.max : this.model.max;
+        min = Number(min);
+        max = Number(max);
+        if (isNaN(min) || isNaN(max)) {
+            min = MeterElement.DEFAULT_MIN_VALUE;
+            max = MeterElement.DEFAULT_MAX_VALUE;
+        }
+        const avgSacle = ((max - min) / this.model.masterDivisionNumber).toFixed(5);
+        const textElements = this.$element.find('g:first > text');
+        for (let i = 0; i < textElements.length; i++) {
+            const text = textElements[i];
+            if (!text.innerHTML) {
+                continue;
+            }
+            let sacleValue = ((Number(avgSacle) * i) + min).toFixed(0);
+            // 整数位和小数位格式化；
+            if (this.model.fractionDigits > 0) {
+                sacleValue = (sacleValue / Math.pow(10, this.model.fractionDigits)).toFixed(this.model.fractionDigits);
+            }
+            if (!isNaN(sacleValue)) {
+                text.innerHTML = sacleValue;
+            }
+        }
+    }
+    getAngle() {
+        let min = this.model.minValueType ? this.valueObj.min : this.model.min;
+        let max = this.model.maxValueType ? this.valueObj.max : this.model.max;
+        min = Number(min);
+        max = Number(max);
+        if (isNaN(min) || isNaN(max)) {
+            min = MeterElement.DEFAULT_MIN_VALUE;
+            max = MeterElement.DEFAULT_MAX_VALUE;
+        }
+        if (!this.valueObj.value && isNaN(Number(this.valueObj.value))) {
+            return undefined;
+        }
+        const value = Math.min(Math.max(this.valueObj.value || 0, min), max);
         const len = (value - min) / (max - min);
         const arcPath = Snap(this.arcPath$[0]);
         const b = arcPath.getBBox(true);
@@ -68,3 +135,5 @@ export class MeterElement extends ReadableElement {
         return c;
     }
 }
+MeterElement.DEFAULT_MIN_VALUE = 0;
+MeterElement.DEFAULT_MAX_VALUE = 100;

package/elements/meter-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"MeterElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./base","name":"ReadableElement","line":7,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":18,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../service","name":"PermissionChecker","line":18,"character":57},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":19,"character":30},{"__symbolic":"reference","module":"../config","name":"VariableStore","line":19,"character":67},{"__symbolic":"reference","module":"../localization","name":"Localization","line":19,"character":96}]}],"updateVariableValue":[{"__symbolic":"method"}],"initFrameNode":[{"__symbolic":"method"}],"getAngle":[{"__symbolic":"method"}],"directionPoint":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"MeterElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./base","name":"ReadableElement","line":9,"character":34},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":25,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../service","name":"PermissionChecker","line":25,"character":57},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":26,"character":30},{"__symbolic":"reference","module":"../config","name":"VariableStore","line":26,"character":67},{"__symbolic":"reference","module":"../localization","name":"Localization","line":26,"character":96},{"__symbolic":"reference","name":"string"}]}],"updateValueObj":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}],"initFrameNode":[{"__symbolic":"method"}],"updateScale":[{"__symbolic":"method"}],"getAngle":[{"__symbolic":"method"}],"directionPoint":[{"__symbolic":"method"}]},"statics":{"DEFAULT_MIN_VALUE":0,"DEFAULT_MAX_VALUE":100}}}}]