@flexem/fc-gui 3.0.0-alpha.1 → 3.0.0-alpha.100

package/elements/base/conditional-dynamic-display-element.js

@@ -3,8 +3,8 @@ import { DynamicDisplay } from '../../model/shared/dynamic-display/dynamic-displ
 import { ConditionalDisplayElement } from './conditional-display-element';
 import { GuiConsts } from '../../shared';
 export class ConditionalDynamicDisplayElement extends ConditionalDisplayElement {
-    constructor(element, permissionChecker, variableCommunicator, variableStore) {
-        super(element, permissionChecker, variableCommunicator, variableStore);
+    constructor(element, permissionChecker, variableCommunicator, variableStore, signalRAppId) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
         this.variableCommunicator = variableCommunicator;
         this.variableStore = variableStore;
         this.initDynamicBehavior();
@@ -16,7 +16,7 @@ export class ConditionalDynamicDisplayElement extends ConditionalDisplayElement
             const strokeWidth = this.model.strokeWidth ? this.model.strokeWidth : 0;
             this.hor = location.x - Number(strokeWidth) / 2;
             this.ver = location.y - Number(strokeWidth) / 2;
-            const behavior = new DynamicDisplay(this.model.dynamicSetting, this.variableCommunicator, this.variableStore, location);
+            const behavior = new DynamicDisplay(this.model.dynamicSetting, this.variableCommunicator, this.variableStore, location, this.signalRAppId);
             behavior.doBehavior.subscribe(result => {
                 if (this.model.angle) {
                     this.ang = Number(this.model.angle);

package/elements/base/conditional-dynamic-display-element.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"ConditionalDynamicDisplayElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./conditional-display-element","name":"ConditionalDisplayElement","line":10,"character":63},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":23,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service/permission-checker","name":"PermissionChecker","line":23,"character":57},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":24,"character":49},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":25,"character":42},{"__symbolic":"reference","name":"string"}]}],"initDynamicBehavior":[{"__symbolic":"method"}],"getActualSize":[{"__symbolic":"method"}],"getActualLocation":[{"__symbolic":"method"}],"isBold":[{"__symbolic":"method"}],"isItalic":[{"__symbolic":"method"}],"fontFamily":[{"__symbolic":"method"}]}}}}]

package/elements/base/conditional-enable-element.d.ts

@@ -12,7 +12,7 @@ export declare abstract class ConditionalEnableElement extends StateControlEleme
     protected abstract readonly model: ConditionalEnableModel;
     isGrantedPermission: boolean;
     isInitialized: boolean;
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization);
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
     private initialize;
     private updateEnableStateByConditionAndPermission;
     private updateEnableStateByCondition;

package/elements/base/conditional-enable-element.js

@@ -1,8 +1,8 @@
 import { ConditionItemsResultObserver } from '../../model';
 import { StateControlElement } from './state-control-element';
 export class ConditionalEnableElement extends StateControlElement {
-    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.permissionChecker = permissionChecker;
         this.variableCommunicator = variableCommunicator;
         this.variableStore = variableStore;
@@ -68,7 +68,7 @@ export class ConditionalEnableElement extends StateControlElement {
             this.isInitialized = true;
             this.changeStates();
         });
-        enableConditionResult.requestData();
+        enableConditionResult.requestData(this.signalRAppId);
     }
     updateEnableStateByCondition() {
         if (null == this.model.enableItems || !this.model.enableItems.length) {
@@ -81,7 +81,7 @@ export class ConditionalEnableElement extends StateControlElement {
             this.isInitialized = true;
             this.changeStates();
         });
-        enableConditionResult.requestData();
+        enableConditionResult.requestData(this.signalRAppId);
     }
     updateEnableStateByPermission() {
         let isEnable = false;

package/elements/base/conditional-enable-element.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"ConditionalEnableElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./state-control-element","name":"StateControlElement","line":7,"character":55},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":14,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":15,"character":46},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":16,"character":49},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":17,"character":42},{"__symbolic":"reference","module":"../../localization","name":"Localization","line":18,"character":41},{"__symbolic":"reference","name":"string"}]}],"initialize":[{"__symbolic":"method"}],"updateEnableStateByConditionAndPermission":[{"__symbolic":"method"}],"updateEnableStateByCondition":[{"__symbolic":"method"}],"updateEnableStateByPermission":[{"__symbolic":"method"}],"setEnableByConditionOrPermission":[{"__symbolic":"method"}]}}}}]

package/elements/base/index.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./base-element","export":["BaseElement"]},{"from":"./state-control-element","export":["StateControlElement"]},{"from":"./readable-element","export":["ReadableElement"]}]}]

package/elements/base/readable-element.d.ts

@@ -6,10 +6,15 @@ import { Localization } from '../../localization';
 import { VariableStore } from '../../config';
 export declare abstract class ReadableElement extends ConditionalEnableElement {
     protected abstract model: ReadableModel;
-    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization);
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
     init(variableName: string): void;
     get readVariableName(): string;
-    protected abstract updateVariableValue(value: any): void;
+    get minVariableName(): string;
+    get minValueType(): any;
+    get maxVariableName(): string;
+    get maxValueType(): any;
+    private getVariableName;
+    protected abstract updateVariableValue(value: any, variableName: any): void;
     reportStateChanged(variableState: VariableState): void;
     reportValueChanged(value: VariableValue): void;
 }

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

@@ -0,0 +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},{"__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

@@ -0,0 +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},{"__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

@@ -1,5 +1,5 @@
 import { Injector } from '@angular/core';
-import { BsModalService } from 'ngx-bootstrap';
+import { BsModalService } from 'ngx-bootstrap/modal';
 import { VariableCommunicator } from '../../communication';
 import { GraphStore, VariableStore } from '../../config';
 import { Localization } from '../../localization';
@@ -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

@@ -0,0 +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},{"__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

@@ -0,0 +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},{"__symbolic":"reference","name":"string"}]}],"getAndSetCurrentTime":[{"__symbolic":"method"}],"getDatetimeFormat":[{"__symbolic":"method"}],"initGraph":[{"__symbolic":"method"}],"getFormat":[{"__symbolic":"method"}]}}}}]

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

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"HistoricalCurveElementStatus":{"Normal":0,"Loading":1,"Unbound":2,"LoadFailed":3}}}]

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

@@ -32,7 +32,9 @@ 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);
+    private data;
+    private timer;
+    constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, historyDataStore: HistoryDataStore, signalRAppId: string);
     dispose(): void;
     private getValidTimePeriods;
     private updateTimeRange;
@@ -40,6 +42,7 @@ export declare class HistoricalCurveElement extends ConditionalDisplayElement {
     private reRenderElement;
     private renderElement;
     private renderChart;
+    initPoint(): void;
     private getLineChart;
     private getMultiBarWithFocusChart;
     private renderCommonProperty;

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

@@ -10,9 +10,10 @@ import { HistoricalCurveElementStatus } from './historical-curve-element-status'
 import { LOGGER_SERVICE_TOKEN } from '../../logger';
 import { GlobalSettings, DisplayMode } from '../../settings';
 import { CurveType } from '../../model/historical-curve/curve-type';
+import { AxisRangeType } from '../../model/historical-curve/historical-curve-axis-settings';
 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,
@@ -21,13 +22,14 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             marginRight: 20,
             mobileMinWidth: 450,
             operationAreaHeight: 32,
-            operationAreaMarginTop: 10,
+            operationAreaMarginTop: 25,
             operationSelectFontSize: '16px',
             operationButtonWidth: 24,
             operationButtonHeight: 24,
             operationButtonMargin: 4
         };
         this.elementStatus = HistoricalCurveElementStatus.Loading;
+        this.data = [];
         this.logger = injector.get(LOGGER_SERVICE_TOKEN);
         this.localization = injector.get(LOCALIZATION);
         this.timePeriods = this.getValidTimePeriods();
@@ -38,7 +40,7 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
         }, this.model.displaySetting.refreshInterval * 1000);
         this.isMobileMode = DisplayMode.Mobile === injector.get(GlobalSettings).displayMode;
         if (this.isMobileMode) {
-            this.displayOption.operationAreaMarginTop = 20;
+            this.displayOption.operationAreaMarginTop = 35;
             if (this.model.displaySetting.size.width >= this.displayOption.mobileMinWidth) {
                 this.displayOption.operationAreaHeight = 68;
                 this.displayOption.operationSelectFontSize = '24px';
@@ -58,7 +60,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 +88,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');
         }
@@ -131,6 +141,7 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             each(result, v => values.push({ x: moment(v.time).local().toDate().valueOf(), y: v.values[key] }));
             data.push({ key: channel.name, area: channel.projectEnabled, values: values });
         });
+        this.data = data;
         nv.addGraph(() => {
             if (this.model.displaySetting.curveType === CurveType.BarGroup || this.model.displaySetting.curveType === CurveType.BarStack) {
                 return this.getMultiBarWithFocusChart(chartWidth, chartHeight, data);
@@ -140,10 +151,57 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             }
         });
     }
+    initPoint() {
+        try {
+            const legendList = this.$element
+                .find('.nv-legend')
+                .find('.nv-series');
+            let hiddenCount = 0;
+            for (let i = 0; i < this.data.length; i++) {
+                const channel = this.model.dataSetting.channels[i];
+                if (legendList.eq(i).children().eq(0).css('fill-opacity') === '1') {
+                    const pointList = this.$element
+                        .find('.nv-scatterWrap')
+                        .find('.nv-series-' + (i - hiddenCount))
+                        .find('.nv-point');
+                    if (pointList && pointList.length) {
+                        for (let j = 0; j < pointList.length; j++) {
+                            const point = pointList.eq(j);
+                            const previousPoint = pointList.eq(j - 1);
+                            if (j && point.attr('transform').split(',')[1] !== previousPoint.attr('transform').split(',')[1]) {
+                                if (channel.enablePoint && channel.pointColor) {
+                                    const pointStyle = {
+                                        'stroke-opacity': 1,
+                                        'stroke-width': '2px',
+                                        'stroke': channel.pointColor,
+                                        'fill-opacity': 1,
+                                        'fill': channel.pointColor
+                                    };
+                                    point.addClass('nv-mark-point');
+                                    point.css(pointStyle);
+                                    previousPoint.addClass('nv-mark-point');
+                                    previousPoint.css(pointStyle);
+                                }
+                            }
+                        }
+                    }
+                }
+                else {
+                    hiddenCount++;
+                }
+            }
+        }
+        catch (e) {
+            console.log(e);
+        }
+    }
     getLineChart(chartWidth, chartHeight, data) {
         const chart = nv.models.lineChart().showLegend(true)
             .margin({ top: 0, bottom: 0, left: this.displayOption.marginLeft, right: this.displayOption.marginRight })
             .noData(this.localization.chartNoData);
+        if (this.model.displaySetting.axisSetting.yAxisRangeType === AxisRangeType.Custom) {
+            chart.yDomain([this.model.displaySetting.axisSetting.yAxisMin, this.model.displaySetting.axisSetting.yAxisMax]);
+        }
         if (!this.isMobileMode) {
             chart.focusEnable(true);
             chart.focus.margin({ top: 10, right: 0, bottom: 0, left: 0 });
@@ -151,11 +209,20 @@ 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);
+        this.initPoint();
+        chart.legend.dispatch.on('legendClick', () => {
+            setTimeout(() => {
+                this.$element.find('.nv-mark-point').css({
+                    'stroke-opacity': 0,
+                    'stroke-width': 0,
+                    'stroke': 'unset',
+                    'fill-opacity': 0,
+                    'fill': 'unset'
+                }).removeClass('nv-mark-point');
+                this.initPoint();
+            }, 1);
+        });
         return chart;
     }
     getMultiBarWithFocusChart(chartWidth, chartHeight, data) {
@@ -172,16 +239,15 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             chart.multibar.stacked(true);
             chart.multibar2.stacked(true);
         }
+        if (this.model.displaySetting.axisSetting.yAxisRangeType === AxisRangeType.Custom) {
+            chart.yDomain([this.model.displaySetting.axisSetting.yAxisMin, this.model.displaySetting.axisSetting.yAxisMax]);
+        }
         if (!this.isMobileMode) {
             chart.focusEnable(true);
             chart.focusShowAxisX(false);
         }
         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)');
@@ -196,9 +262,27 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
         return chart;
     }
     renderCommonProperty(chart, chartWidth, chartHeight, data) {
+        var _a, _b;
         chart.tooltip.headerFormatter(d => this.timeFormat(d, '%x %X'));
         if (this.model.displaySetting.showAxis) {
-            chart.xAxis.showMaxMin(true).tickFormat(d => this.timeFormat(d, '%X'));
+            chart.xAxis.showMaxMin(true).tickFormat(d => {
+                this.$element.find('.nv-mark-point').css({
+                    'stroke-opacity': 0,
+                    'stroke-width': 0,
+                    'stroke': 'unset',
+                    'fill-opacity': 0,
+                    'fill': 'unset'
+                }).removeClass('nv-mark-point');
+                clearTimeout(this.timer);
+                this.timer = undefined;
+                this.timer = setTimeout(() => {
+                    this.initPoint();
+                }, 100);
+                if (this.currentTimePeriod === 3 || this.currentTimePeriod === 4 || this.currentTimePeriod === 5) {
+                    return this.timeFormat(d, '%y-%m-%d');
+                }
+                return this.timeFormat(Number(d), '%X');
+            });
             if (this.model.displaySetting.axisSetting) {
                 if (this.model.displaySetting.axisSetting.showAxisLabel && this.model.displaySetting.axisSetting.axisLabelFont) {
                     chart.xAxis.fontSize(this.model.displaySetting.axisSetting.axisLabelFont.fontSize);
@@ -223,43 +307,141 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             chart.update();
             this.rootElement.selectAll('.nv-noData').attr('x', chartWidth / 2).attr('y', chartHeight / 2 + this.displayOption.operationAreaHeight);
         });
+        const fontSize = (_b = (_a = this.model.displaySetting.axisSetting) === null || _a === void 0 ? void 0 : _a.axisLabelFont) === null || _b === void 0 ? void 0 : _b.fontSize;
         this.rootElement.selectAll('.domain').style('stroke-opacity', 1);
         if (this.model.displaySetting.showAxis && this.model.displaySetting.axisSetting) {
             const axisColor = this.model.displaySetting.axisSetting.axisColor;
             this.rootElement.selectAll('.domain').style('stroke', axisColor);
-            if (this.model.displaySetting.axisSetting.showAxisLabel) {
-                const fontSize = this.model.displaySetting.axisSetting.axisLabelFont.fontSize;
+            if (fontSize && this.model.displaySetting.axisSetting.showAxisLabel) {
                 this.rootElement.selectAll('.nv-axisMaxMin').select('text').style('font-size', fontSize);
             }
         }
+        let strokeWidth = 0;
+        if (this.model.displaySetting.axisSetting.showTick !== false) {
+            strokeWidth = 1;
+        }
+        this.rootElement
+            .selectAll('.nv-x')
+            .selectAll('.tick')
+            .selectAll('line')
+            .attr('style', `stroke:${this.model.displaySetting.axisSetting.xAxisTickColor || 'rgb(127, 147, 159)'};stroke-width:${strokeWidth};`);
+        this.rootElement
+            .selectAll('.nv-y')
+            .selectAll('.tick')
+            .selectAll('line')
+            .attr('style', `stroke:${this.model.displaySetting.axisSetting.yAxisTickColor || 'rgb(127, 147, 159)'};stroke-width:${strokeWidth};`);
+        if (fontSize && this.currentTimePeriod === 3 || this.currentTimePeriod === 4 || this.currentTimePeriod === 5) {
+            const self = this;
+            this.rootElement
+                .selectAll('.nv-x')
+                .selectAll('.tick')
+                .selectAll('text')
+                .data(function (d) {
+                return [self.timeFormat(Number(d), '%y-%m-%d'), self.timeFormat(Number(d), '%H:%M:%S')];
+            })
+                .enter()
+                .append('text')
+                .attr('class', 'full-date')
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('dy', '2.3em')
+                .style('text-anchor', 'middle')
+                .style('font-size', fontSize)
+                .text((d) => d);
+            this.rootElement
+                .selectAll('.nv-axisMaxMin-x')
+                .selectAll('text')
+                .data(function (d) {
+                return [self.timeFormat(Number(d), '%y-%m-%d'), self.timeFormat(Number(d), '%H:%M:%S')];
+            })
+                .enter()
+                .append('text')
+                .attr('class', 'full-date')
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('dy', '2.3em')
+                .style('text-anchor', 'middle')
+                .style('font-size', fontSize)
+                .text((d) => d);
+            const focusWrap = this.rootElement.selectAll('.nv-focusWrap');
+            if (focusWrap.size()) {
+                let h = focusWrap.attr('transform');
+                if (h && h.length && h.indexOf(',') !== -1) {
+                    h = h.slice(0, -1).split(',')[1];
+                    this.rootElement
+                        .selectAll('.nv-focusWrap')
+                        .attr('transform', `translate(0,${Number(h) + 15})`);
+                }
+            }
+            const resizeObserver = new window.MutationObserver(() => {
+                this.rootElement
+                    .selectAll('.nv-x')
+                    .selectAll('.tick')
+                    .selectAll('.full-date')
+                    .remove();
+                this.rootElement
+                    .selectAll('.nv-x')
+                    .selectAll('.tick')
+                    .selectAll('text')
+                    .data(function (d) {
+                    return [self.timeFormat(Number(d), '%y-%m-%d'), self.timeFormat(Number(d), '%H:%M:%S')];
+                })
+                    .enter()
+                    .append('text')
+                    .attr('class', 'full-date')
+                    .attr('x', 0)
+                    .attr('y', 0)
+                    .attr('dy', '2.3em')
+                    .style('text-anchor', 'middle')
+                    .style('font-size', fontSize)
+                    .text((d) => d);
+            });
+            const extent = document.getElementsByClassName('extent');
+            if (extent.length) {
+                resizeObserver.observe(extent[0], { attributes: true });
+            }
+        }
+        else {
+            this.rootElement
+                .selectAll('.full-date')
+                .remove();
+        }
     }
     renderOperationArea(chartWidth, chartHeight) {
         const operationArea = this.rootElement.append('g').attr('transform', `translate(0,${chartHeight + this.displayOption.operationAreaMarginTop})`)
             .append('foreignObject').attr('width', chartWidth).attr('height', this.displayOption.operationAreaHeight).attr('fill', 'none')
             .append('xhtml:div').style('height', (this.displayOption.operationAreaHeight - 4) + 'px').style('overflow', 'hidden').style('margin-top', '4px');
         const selectElement = operationArea.append('select').style('margin-left', this.displayOption.marginLeft + 'px')
+            .style('background-color', 'inherit')
             .style('font-size', this.displayOption.operationSelectFontSize).on('change', () => {
             const displayTimePeriod = this.rootElement.select('select').property('value');
             this.updateTimeRange(displayTimePeriod);
             this.reRenderElement(this.startTime, this.endTime, this.displayOption.dataLimit, HistoricalCurveTimeRange.BeginOpenEndOpen);
         });
+        const rect = this.$element.parent().parent().find('rect');
+        const fillColor = rect.attr('fill');
         const options = selectElement.selectAll('option').data(this.timePeriods).enter().append('option');
-        options.text(d => d.name).attr('value', d => d.key).property('selected', d => d.key === Number(this.currentTimePeriod));
+        options.text(d => d.name).attr('value', d => d.key).property('selected', d => d.key === Number(this.currentTimePeriod))
+            .style('background-color', fillColor);
         const buttonWidth = this.displayOption.operationButtonWidth + 'px', buttonHeight = this.displayOption.operationButtonHeight + 'px';
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/last_page.svg)')
+            .style('float', 'right').style('background-image', 'url(assets/img/last_page.svg)')
+            .style('background-color', 'inherit')
             .on('click', () => { this.loadLastPage(); });
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/next_page.svg)')
+            .style('float', 'right').style('background-image', 'url(assets/img/next_page.svg)')
             .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
+            .style('background-color', 'inherit')
             .on('click', () => { this.loadNextPage(); });
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/previous_page.svg)')
+            .style('float', 'right').style('background-image', 'url(assets/img/previous_page.svg)')
             .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
+            .style('background-color', 'inherit')
             .on('click', () => { this.loadPreviousPage(); });
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background', 'white').style('background-image', 'url(assets/img/first_page.svg)')
+            .style('float', 'right').style('background-image', 'url(assets/img/first_page.svg)')
             .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
+            .style('background-color', 'inherit')
             .on('click', () => { this.loadFirstPage(); });
     }
     timeFormat(datetime, specifier) {