@flexem/fc-gui 3.0.0-alpha.104 → 3.0.0-alpha.106

package/elements/bar-graph-element.d.ts

@@ -19,7 +19,6 @@ export declare class BarGraphElement extends ReadableElement {
     private valueObj;
     private isNeedUpdateScale;
     private needAddNumber;
-    private needInitTransform;
     get readVariableName(): string;
     constructor(element: HTMLElement, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, localization: Localization, signalRAppId: string);
     private initTransform;

package/elements/bar-graph-element.js

@@ -13,7 +13,6 @@ export class BarGraphElement extends ReadableElement {
         this.valueObj = {};
         this.isNeedUpdateScale = false;
         this.needAddNumber = 0;
-        this.needInitTransform = true;
         if ((this.model.minValueType === VariableValueType.Constant && this.model.maxValueType === VariableValueType.Variable)
             || this.model.maxValueType === VariableValueType.Constant && this.model.minValueType === VariableValueType.Variable) {
             this.isNeedUpdateScale = true;
@@ -29,9 +28,7 @@ export class BarGraphElement extends ReadableElement {
             this.$barRect.attr('transform', this.defaultTransform);
         }
         setTimeout(() => {
-            if (this.model.maxValueType !== VariableValueType.Variable || this.model.minValueType !== VariableValueType.Variable) {
-                this.initFrameNode();
-            }
+            this.initFrameNode();
         });
     }
     get readVariableName() {
@@ -53,8 +50,10 @@ export class BarGraphElement extends ReadableElement {
         if (this.needAddNumber <= 3)
             return;
         this.$element[0].childNodes.forEach((node, index) => {
-            const matrixE = node.transform.baseVal[0].matrix.e;
-            node.transform.baseVal[0].matrix.e = matrixE + (this.needAddNumber - 3) * 7;
+            // const matrixE = node.transform.baseVal[0].matrix.e;
+            // node.transform.baseVal[0].matrix.e = matrixE + (this.needAddNumber - 3) * 7;
+            if (!node.transform.baseVal[0])
+                return;
             if (node.nodeName === 'g') {
                 const nodeValue = node.attributes['clip-path'].value.replace('url(#', '').replace(')', '');
                 const rootNode = node.parentNode.parentNode.parentElement;
@@ -66,8 +65,8 @@ export class BarGraphElement extends ReadableElement {
                     const values = [];
                     line.split(' ').forEach((item) => {
                         const nItem = Number(item);
-                        if (!isNaN(nItem) && item < 100) {
-                            item = nItem > 0 ? nItem + (this.needAddNumber - 3) * 7 : nItem - (this.needAddNumber - 3) * 7;
+                        if (nItem === -1) {
+                            item = nItem - (this.needAddNumber - 3) * 7;
                         }
                         values.push(item);
                     });
@@ -83,8 +82,7 @@ export class BarGraphElement extends ReadableElement {
     initFrameNode() {
         const arcPath = Snap(this.$element[0]);
         const b = arcPath.getBBox(true);
-        const width = this.needAddNumber <= 3 ? b.width : b.width + (this.needAddNumber - 3) * 7;
-        this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', width).attr('height', b.height).attr('fill', 'transparent');
+        this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', b.width).attr('height', b.height).attr('fill', 'transparent');
     }
     updateValueObj(value, variableName) {
         var _a, _b, _c;
@@ -114,13 +112,9 @@ export class BarGraphElement extends ReadableElement {
             min = BarGraphElement.DEFAULT_MIN_VALUE;
             max = BarGraphElement.DEFAULT_MAX_VALUE;
         }
-        if (this.model.maxValueType === VariableValueType.Variable && this.model.minValueType === VariableValueType.Variable) {
+        if (this.model.maxValueType === VariableValueType.Variable || this.model.minValueType === VariableValueType.Variable) {
             this.needAddNumber = max.toString().length > min.toString().length ? max.toString().length : min.toString().length;
-            if (this.needInitTransform) {
-                this.initTransform();
-                this.initFrameNode();
-                this.needInitTransform = false;
-            }
+            this.initTransform();
         }
         const avgSacle = ((max - min) / this.model.masterDivisionNumber).toFixed(5);
         for (let i = 0; i < textElements.length; i++) {
@@ -155,6 +149,10 @@ export class BarGraphElement extends ReadableElement {
                             }
                             break;
                     }
+                    if (this.model.minValueType !== VariableValueType.Constant && this.model.maxValueType === VariableValueType.Constant) {
+                        const maxLen = this.model.max && this.model.max.toString().length;
+                        translateX += maxLen > 2 ? (maxLen - 3) * 7 : 0;
+                    }
                     text.transform.baseVal[0].matrix.e = translateX;
                 }
             }

package/elements/bar-graph-element.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"BarGraphElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./base/readable-element","name":"ReadableElement","line":10,"character":37},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":40,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../service","name":"PermissionChecker","line":40,"character":57},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":41,"character":30},{"__symbolic":"reference","module":"../config","name":"VariableStore","line":42,"character":23},{"__symbolic":"reference","module":"../localization","name":"Localization","line":43,"character":22},{"__symbolic":"reference","name":"string"}]}],"initTransform":[{"__symbolic":"method"}],"initFrameNode":[{"__symbolic":"method"}],"updateValueObj":[{"__symbolic":"method"}],"updateScale":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}]},"statics":{"DEFAULT_MIN_VALUE":0,"DEFAULT_MAX_VALUE":100}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"BarGraphElement":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./base/readable-element","name":"ReadableElement","line":10,"character":37},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":39,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"../service","name":"PermissionChecker","line":39,"character":57},{"__symbolic":"reference","module":"../communication","name":"VariableCommunicator","line":40,"character":30},{"__symbolic":"reference","module":"../config","name":"VariableStore","line":41,"character":23},{"__symbolic":"reference","module":"../localization","name":"Localization","line":42,"character":22},{"__symbolic":"reference","name":"string"}]}],"initTransform":[{"__symbolic":"method"}],"initFrameNode":[{"__symbolic":"method"}],"updateValueObj":[{"__symbolic":"method"}],"updateScale":[{"__symbolic":"method"}],"updateVariableValue":[{"__symbolic":"method"}]},"statics":{"DEFAULT_MIN_VALUE":0,"DEFAULT_MAX_VALUE":100}}}}]

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

@@ -22,7 +22,7 @@ export class DatetimeDisplayElement extends ConditionalDisplayElement {
             this.getAndSetCurrentTime(format);
             setInterval(() => {
                 this.getAndSetCurrentTime(format);
-            }, 1000);
+            }, 100);
         }
     }
     getAndSetCurrentTime(format) {

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

@@ -35,8 +35,12 @@ export declare class HistoricalCurveElement extends ConditionalDisplayElement {
     private data;
     private timer;
     private resizeEventListener;
+    private isAndroid;
+    private needResize;
     constructor(element: HTMLElement, injector: Injector, permissionChecker: PermissionChecker, variableCommunicator: VariableCommunicator, variableStore: VariableStore, historyDataStore: HistoryDataStore, signalRAppId: string);
     dispose(): void;
+    private initKeyboardListener;
+    private setNeedResize;
     private getValidTimePeriods;
     private updateTimeRange;
     private updateQueryTimeRange;

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

@@ -30,6 +30,11 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
         };
         this.elementStatus = HistoricalCurveElementStatus.Loading;
         this.data = [];
+        this.needResize = true;
+        this.setNeedResize = () => {
+            this.needResize = false;
+            setTimeout(() => this.needResize = true, 500);
+        };
         this.logger = injector.get(LOGGER_SERVICE_TOKEN);
         this.localization = injector.get(LOCALIZATION);
         this.timePeriods = this.getValidTimePeriods();
@@ -50,6 +55,7 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
             }
         }
         this.loadFirstPage();
+        this.initKeyboardListener();
     }
     dispose() {
         clearInterval(this.refreshIntervalId);
@@ -59,8 +65,19 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
         if (this.resizeEventListener) {
             this.resizeEventListener.clear();
         }
+        if (this.isAndroid) {
+            window.removeEventListener('native.keyboardshow', this.setNeedResize);
+            window.removeEventListener('native.keyboardhide', this.setNeedResize);
+        }
         this.logger.debug(`[GUI]Dispose Histoical Curve Refresh Interval:${d3.time.format('%x %X')(new Date())}`);
     }
+    initKeyboardListener() {
+        this.isAndroid = !!navigator.userAgent.match(/(Android)/i);
+        if (this.isAndroid) {
+            window.addEventListener('native.keyboardshow', this.setNeedResize);
+            window.addEventListener('native.keyboardhide', this.setNeedResize);
+        }
+    }
     getValidTimePeriods() {
         const timePeriods = new Array();
         timePeriods.push({ key: 6, name: this.localization.lastThirtyMinutes });
@@ -307,6 +324,8 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
         this.rootElement.append('g').datum(data).call(chart);
         this.rootElement.selectAll('.nv-noData').attr('x', chartWidth / 2).attr('y', chartHeight / 2 + this.displayOption.operationAreaHeight);
         this.resizeEventListener = nv.utils.windowResize(() => {
+            if (!this.needResize)
+                return;
             chart.update();
             this.rootElement.selectAll('.nv-noData').attr('x', chartWidth / 2).attr('y', chartHeight / 2 + this.displayOption.operationAreaHeight);
         });
@@ -411,11 +430,12 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
         }
     }
     renderOperationArea(chartWidth, chartHeight) {
+        const backgroundColor = this.model.displaySetting.axisSetting.filterBackgroudColor || 'inherit';
         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('background-color', backgroundColor)
             .style('font-size', this.displayOption.operationSelectFontSize).on('change', () => {
             const displayTimePeriod = this.rootElement.select('select').property('value');
             this.updateTimeRange(displayTimePeriod);
@@ -425,26 +445,26 @@ export class HistoricalCurveElement extends ConditionalDisplayElement {
         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))
-            .style('background-color', fillColor);
+            .style('background-color', this.model.displaySetting.axisSetting.filterBackgroudColor || 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-image', 'url(assets/img/last_page.svg)')
-            .style('background-color', 'inherit')
+            .style('float', 'right').style('background-image', 'url(assets/img/black_last_page.png)')
+            .style('background-color', backgroundColor).style('background-size', 'cover')
             .on('click', () => { this.loadLastPage(); });
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background-image', 'url(assets/img/next_page.svg)')
+            .style('float', 'right').style('background-image', 'url(assets/img/black_next_page.png)')
             .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
-            .style('background-color', 'inherit')
+            .style('background-color', backgroundColor).style('background-size', 'cover')
             .on('click', () => { this.loadNextPage(); });
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background-image', 'url(assets/img/previous_page.svg)')
+            .style('float', 'right').style('background-image', 'url(assets/img/black_previous_page.png)')
             .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
-            .style('background-color', 'inherit')
+            .style('background-color', backgroundColor).style('background-size', 'cover')
             .on('click', () => { this.loadPreviousPage(); });
         operationArea.append('button').style('width', buttonWidth).style('height', buttonHeight).style('border', 'none')
-            .style('float', 'right').style('background-image', 'url(assets/img/first_page.svg)')
+            .style('float', 'right').style('background-image', 'url(assets/img/black_first_page.png)')
             .style('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
-            .style('background-color', 'inherit')
+            .style('background-color', backgroundColor).style('background-size', 'cover')
             .on('click', () => { this.loadFirstPage(); });
     }
     timeFormat(datetime, specifier) {

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":21,"character":44},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":66,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":67,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":68,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":69,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":70,"character":23},{"__symbolic":"reference","module":"../../config","name":"HistoryDataStore","line":71,"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"}],"initPoint":[{"__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":21,"character":44},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":68,"character":25,"context":{"typeName":"HTMLElement"}},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":69,"character":18},{"__symbolic":"reference","module":"../../service","name":"PermissionChecker","line":70,"character":27},{"__symbolic":"reference","module":"../../communication","name":"VariableCommunicator","line":71,"character":30},{"__symbolic":"reference","module":"../../config","name":"VariableStore","line":72,"character":23},{"__symbolic":"reference","module":"../../config","name":"HistoryDataStore","line":73,"character":43},{"__symbolic":"reference","name":"string"}]}],"dispose":[{"__symbolic":"method"}],"initKeyboardListener":[{"__symbolic":"method"}],"getValidTimePeriods":[{"__symbolic":"method"}],"updateTimeRange":[{"__symbolic":"method"}],"updateQueryTimeRange":[{"__symbolic":"method"}],"reRenderElement":[{"__symbolic":"method"}],"renderElement":[{"__symbolic":"method"}],"renderChart":[{"__symbolic":"method"}],"initPoint":[{"__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/model/historical-curve/historical-curve-axis-settings.d.ts

@@ -9,6 +9,7 @@ export interface HistoricalCurveAxisSettings {
     readonly showTick?: boolean;
     readonly xAxisTickColor?: string;
     readonly yAxisTickColor?: string;
+    readonly filterBackgroudColor?: string;
 }
 export declare enum AxisRangeType {
     Auto = 0,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"main": "bundles/fc-gui.umd.js",
-	"version": "3.0.0-alpha.104",
+	"version": "3.0.0-alpha.106",
 	"module": "public_api.js",
 	"typings": "public_api.d.ts",
 	"license": "UNLICENSED",