@flexem/fc-gui 3.0.0-alpha.90 → 3.0.0-alpha.91

package/src/elements/alarm/alarm-element.ts

@@ -0,0 +1,423 @@
+/* eslint-disable radix */
+/* eslint-disable max-len */
+import { Injector } from '@angular/core';
+import * as d3 from 'd3';
+import { PermissionChecker } from '../../service';
+import { VariableCommunicator } from '../../communication';
+import { ConditionalDisplayElement } from '../base/conditional-display-element';
+import { AlarmModel } from '../../model/alarm/alarm.model';
+import { AlarmsStore, GetAlarmsArgs, VariableStore } from '../../config';
+import { HistoricalCurveElementOption } from '../historical-curve/historical-curve.element.option';
+import * as moment from 'moment';
+import { LoggerService, LOGGER_SERVICE_TOKEN } from '../../logger';
+import { HistoricalCurveTimePeriod } from '../historical-curve/historical-curve.time-period';
+import { Localization, LOCALIZATION } from '../../localization';
+
+enum AlaertElementStatus {
+    Normal = 0, // 正常
+    Loading = 1 // 加载中
+}
+
+export class AlarmElement extends ConditionalDisplayElement {
+
+    readonly model: AlarmModel;
+    private readonly logger: LoggerService;
+    readonly variableCommunicator: VariableCommunicator;
+    private readonly localization: Localization;
+    private readonly timePeriods: Array<HistoricalCurveTimePeriod>;
+    private elementStatus: AlaertElementStatus = AlaertElementStatus.Loading;
+    private element: any;
+    private refreshIntervalId: NodeJS.Timer;
+    private readonly displayOption: HistoricalCurveElementOption = {
+        dataLimit: 500,
+        dataZoomHeight: 32,
+        marginLeft: 1,
+        marginRight: 20,
+        mobileMinWidth: 450,
+        operationAreaHeight: 32,
+        operationAreaMarginTop: 10,
+        operationSelectFontSize: '16px',
+        operationButtonWidth: 24,
+        operationButtonHeight: 24,
+        operationButtonMargin: 4
+    };
+    private alarmNames: string[] = [];
+    private startTime: moment.Moment;
+    private endTime: moment.Moment;
+    private currentTimePeriod: number;
+    private alarmList: any[][] = [];
+    private currentAlarmList: any[] = [];
+    private page = 0;
+    private totalCount = 0;
+    private pageSize = 5;
+    private getAlarmDataId: NodeJS.Timer;
+
+    constructor(element: HTMLElement,
+        injector: Injector,
+        permissionChecker: PermissionChecker,
+        variableCommunicator: VariableCommunicator,
+        variableStore: VariableStore,
+        private readonly alarmsStore: AlarmsStore,
+        signalRAppId: string
+    ) {
+        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
+        this.rootElement.selectAll('*').remove();
+        this.setStatusAsLoading();
+        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
+        this.localization = injector.get(LOCALIZATION);
+        this.variableCommunicator = variableCommunicator;
+        this.timePeriods = this.getValidTimePeriods();
+        this.pageSize = this.model.generalSetting.pageSize;
+        localStorage.setItem('simulate-time', moment().valueOf() + '');
+        if (this.model.filterSetting) {
+            this.alarmNames = this.model.filterSetting.detailsData.map(item => item.name);
+            this.currentTimePeriod = this.model.filterSetting?.displayPeriod;
+            this.updateQueryTimeRange();
+            if (this.model.filterSetting.alarmType) {
+                this.refreshIntervalId = setInterval(() => {
+                    this.loadFirstPage();
+                    this.logger.debug(`[GUI]Refresh Alarm Table:${d3.time.format('%x %X')(new Date())}`);
+                }, this.model.filterSetting.refreshCycle * 60 * 1000);
+            } else {
+                variableCommunicator.subscribeUserDeviceAlarms(signalRAppId).subscribe(alarms => {
+                    alarms.forEach(alarm => {
+                        if (this.alarmNames.indexOf(alarm.name) !== -1) {
+                            this.getAlarmData();
+                            return;
+                        }
+                    });
+                });
+            }
+            this.getAlarmData();
+        } else {
+            this.totalCount = 0;
+            this.alarmList = [];
+            this.renderElement();
+        }
+    }
+
+    dispose() {
+        clearInterval(this.refreshIntervalId);
+        if (this.element) { this.element.tooltip.hidden(true); }
+        this.logger.debug(`[GUI]Dispose Alarm Table Refresh Interval:${d3.time.format('%x %X')(new Date())}`);
+    }
+
+    private getValidTimePeriods(): Array<HistoricalCurveTimePeriod> {
+        const timePeriods = new Array<HistoricalCurveTimePeriod>();
+        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 });
+        timePeriods.push({ key: 5, name: this.localization.lastOneYear });
+        return timePeriods;
+    }
+
+    private getAlarmData() {
+        this.rootElement.selectAll('*').remove();
+        this.setStatusAsLoading();
+        clearTimeout(this.getAlarmDataId);
+        this.getAlarmDataId = setTimeout(() => {
+            if (this.model.filterSetting.alarmType) {
+                this.updateQueryTimeRange();
+                const input = new GetAlarmsArgs(
+                    this.alarmNames,
+                    this.startTime,
+                    this.endTime,
+                    this.pageSize,
+                    this.page * this.pageSize);
+                this.alarmsStore.getHistoryAlarms(input).subscribe(result => {
+                    if (!result.error) {
+                        this.totalCount = result.totalCount;
+                        this.alarmList = result.items.map(item => [
+                            item.name,
+                            item.message,
+                            item.alarmLevel,
+                            item.triggeredTime.format('YYYY-MM-DD HH:mm:ss')
+                        ]);
+                        this.renderElement();
+                    }
+                });
+            } else {
+                const input = new GetAlarmsArgs(
+                    this.alarmNames,
+                    undefined,
+                    undefined,
+                    this.pageSize,
+                    this.page * this.pageSize);
+                this.alarmsStore.getCurrentAlarms(input).subscribe(result => {
+                    if (!result.error) {
+                        this.totalCount = result.totalCount;
+                        this.currentAlarmList = result.items;
+                        if (!result.items.length && result.totalCount) {
+                            this.page = 0;
+                            this.getAlarmData();
+                            return;
+                        }
+                        this.alarmList = this.currentAlarmList.map(item => [
+                            item.name,
+                            item.message,
+                            item.alarmLevel,
+                            item.triggeredTime.format('YYYY-MM-DD HH:mm:ss')
+                        ]);
+
+                        this.renderElement();
+                    }
+                });
+            }
+        }, 500);
+    }
+
+    private renderElement() {
+        const elementHeight = this.model.size.height;
+        this.element = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+        this.element.setAttribute('width', this.model.size.width.toString());
+        this.element.setAttribute('height', elementHeight.toString());
+        this.$element.append(this.element);
+        const table = document.createElement('table');
+        table.style.cssText = `border: 2px solid ${this.model.generalSetting.stroke};
+            height: ${elementHeight - 39}`;
+
+        let tr = document.createElement('tr');
+        let fontString = '';
+        if (this.model.generalSetting.headerFont.isItalic) {
+            fontString += 'italic ';
+        }
+        if (this.model.generalSetting.headerFont.isBold) {
+            fontString += 'bold ';
+        }
+        fontString += this.model.generalSetting.headerFont.fontSize + ' ' + this.model.generalSetting.headerFont.fontFamily;
+        tr.style.cssText = `height: ${this.model.heights[0]}px;
+            background: ${this.model.generalSetting.headerFillColor};
+            color: ${this.model.generalSetting.headerFont.color};
+            font: ${fontString};
+            text-align: ${this.model.generalSetting.headerFont.textAlign};
+            ${this.model.generalSetting.headerFont.isUnderline ? 'text-decoration: underline' : ''};
+            vertical-align: middle;`;
+
+        for (let row = 0; row < 4; row++) {
+            const th = document.createElement('th');
+            th.innerHTML = this.model.columLabels[row];
+            th.style.cssText = `width: ${this.model.widths[row] / this.model.size.width * 100}%;
+                border-style: solid;
+                border-color: ${this.model.generalSetting.splitLine};
+                border-left-width: ${!row || this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;`;
+            tr.appendChild(th);
+        }
+        table.appendChild(tr);
+
+        const levelColors = ['#3695FF', '#FFE900', '#FFA800', '#E84F4F'];
+        for (let row = 0; row < this.pageSize; row++) {
+            tr = document.createElement('tr');
+            tr.style.cssText = `height: ${this.model.heights[row + 1]}px;
+                    background: ${this.model.generalSetting.tableFillColor};
+                    font: ${this.model.generalSetting.fontStyle};
+                    color: ${this.model.generalSetting.fontColor};
+                    text-align: ${this.model.generalSetting.textAlign};
+                    vertical-align: middle;`;
+            for (let col = 0; col < 4; col++) {
+                const td = document.createElement('td');
+                td.style.cssText = `border-style: solid;
+                border-color: ${this.model.generalSetting.splitLine};
+                border-top-width: ${this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;
+                border-left-width: ${!col || this.model.generalSetting.isHiddenColumnSplitLine ? 0 : 1}px;`;
+                if (this.alarmList[row]) {
+                    if (col !== 2) {
+                        td.innerHTML = this.alarmList[row][col];
+                        td.style.cssText += `${this.model.generalSetting.isUnderline ? 'text-decoration: underline' : ''};`;
+                    } else {
+                        const alarmLevel = document.createElement('div');
+                        let alarmHeight = parseInt(this.model.generalSetting.fontSize) + 15;
+                        if (alarmHeight > this.model.heights[row + 1]) alarmHeight = this.model.heights[row + 1];
+                        let margin = '0 15px';
+                        if (this.model.generalSetting.textAlign === 'left') {
+                            margin = '0 30px 0 0';
+                        } else if (this.model.generalSetting.textAlign === 'right') {
+                            margin = '0 0 0 30px';
+                        }
+                        alarmLevel.style.cssText = `margin: ${margin};
+                            border-radius: 5px;
+                            background: ${levelColors[this.alarmList[row][col]]};
+                            color: #ffffff;
+                            width: ${this.model.widths[col] - 30}px;
+                            height: ${alarmHeight}px;
+                            max-height: ${this.model.heights[row + 1]}px;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            ${this.model.generalSetting.isUnderline ? 'text-decoration: underline' : ''};`;
+                        alarmLevel.innerHTML = this.model.levelText[this.alarmList[row][col]];
+                        td.appendChild(alarmLevel);
+                    }
+                } else if (col === 2) {
+                    const alarmLevel = document.createElement('div');
+                    let margin = '0 15px';
+                    if (this.model.generalSetting.textAlign === 'left') {
+                        margin = '0 30px 0 0';
+                    } else if (this.model.generalSetting.textAlign === 'right') {
+                        margin = '0 0 0 30px';
+                    }
+                    alarmLevel.style.cssText = `margin: ${margin};
+                            width: ${this.model.widths[col] - 30}px;`;
+                    td.appendChild(alarmLevel);
+                }
+                tr.appendChild(td);
+            }
+            table.appendChild(tr);
+        }
+
+        this.element.appendChild(table);
+
+        this.renderOperationArea(this.model.size.width, elementHeight - 39);
+    }
+
+    private renderOperationArea(chartWidth: number, chartHeight: number) {
+        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');
+
+        if (this.model.filterSetting?.alarmType) {
+            const selectElement = operationArea.append('select').style('margin-left', this.displayOption.marginLeft + 'px')
+                .style('font-size', this.displayOption.operationSelectFontSize).on('change', () => {
+                    const displayTimePeriod = this.rootElement.select('select').property('value');
+                    this.updateTimeRange(displayTimePeriod);
+                    this.getAlarmData();
+                });
+            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));
+        }
+
+        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)')
+            .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('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
+            .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('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
+            .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('margin', `0 ${this.displayOption.operationButtonMargin}px 0 0`)
+            .on('click', () => { this.loadFirstPage(); });
+        this.setStatusAsNormal();
+    }
+
+    private updateTimeRange(timePeriodType: number) {
+        this.currentTimePeriod = +timePeriodType;
+        this.updateQueryTimeRange();
+    }
+
+    private updateQueryTimeRange() {
+        this.endTime = moment();
+        switch (this.currentTimePeriod) {
+            case 1:
+                this.startTime = moment().subtract(1, 'hours');
+                break;
+            case 3:
+                this.startTime = moment().subtract(7, 'days');
+                break;
+            case 4:
+                this.startTime = moment().subtract(30, 'days');
+                break;
+            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');
+        }
+    }
+
+    private loadFirstPage() {
+        if (this.page > 0) {
+            this.page = 0;
+            this.getAlarmData();
+        }
+    }
+
+    private loadNextPage() {
+        let last_page = Math.ceil(this.totalCount / this.pageSize);
+        if (last_page) last_page--;
+        if (this.page < last_page) {
+            this.page++;
+            this.getAlarmData();
+        }
+    }
+
+    private loadPreviousPage() {
+        if (this.page > 0) {
+            this.page--;
+            this.getAlarmData();
+        }
+    }
+
+    private loadLastPage() {
+        let last_page = Math.ceil(this.totalCount / this.pageSize);
+        if (last_page) last_page--;
+        if (this.page !== last_page) {
+            this.page = last_page;
+            this.getAlarmData();
+        }
+    }
+
+    private setStatusAsNormal() {
+        this.elementStatus = AlaertElementStatus.Normal;
+        this.clearStatus();
+    }
+
+    private setStatusAsLoading() {
+        this.elementStatus = AlaertElementStatus.Loading;
+        this.renderStatus('assets/img/loading.svg', '#226abc');
+    }
+
+    private renderStatus(icon: string, stroke: string) {
+        if (this.elementStatus === AlaertElementStatus.Normal) {
+            this.clearStatus();
+            return;
+        }
+        this.rootElement.append('rect').attr('id', 'StateFrame').attr('fill', 'transparent')
+            .attr('width', this.model.size.width)
+            .attr('height', this.model.size.height);
+        const document = this.$element[0].ownerDocument;
+        const currentRect = this.$element.find('rect#StateFrame').first();
+        if (!currentRect.length) { return; }
+        this.$element.find('image#StateImage').remove();
+        const imgObj = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+        if (imgObj) {
+            let x = Number(currentRect[0].getAttribute('width')) - 20;
+            const currentRectX = currentRect[0].getAttribute('x');
+            if (currentRectX !== null) {
+                x += Number(currentRectX);
+            }
+            currentRect[0].setAttribute('stroke', stroke);
+            currentRect[0].setAttribute('stroke-opacity', '0.5');
+            imgObj.href.baseVal = icon;
+            imgObj.setAttributeNS(null, 'id', 'StateImage');
+            imgObj.setAttributeNS(null, 'x', x.toString());
+            imgObj.setAttributeNS(null, 'y', '0');
+            imgObj.setAttributeNS(null, 'height', '20px');
+            imgObj.setAttributeNS(null, 'width', '20px');
+            const titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+            imgObj.appendChild(titleElement);
+            this.$element.append(imgObj);
+        }
+    }
+
+    private clearStatus() {
+        const currentRect = this.$element.find('rect#StateFrame').first();
+        if (!currentRect.length) { return; }
+        const stroke = currentRect[0].getAttribute('stroke');
+        if (stroke) { currentRect[0].removeAttribute('stroke'); }
+        this.$element.find('image#StateImage').remove();
+    }
+}

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

@@ -0,0 +1,193 @@
+import { BarGraph, BarGraphDirection } from '../model';
+import { Localization } from '../localization';
+import { VariableCommunicator } from '../communication';
+import { ReadableElement } from './base/readable-element';
+import { calculatePercent } from './shared/math-utils';
+import { VariableUtil } from '../utils/variable-util';
+import { VariableStore } from '../config';
+import { PermissionChecker } from '../service';
+import { VariableValueType } from '../model/shared/condition/variable-value-type';
+
+export class BarGraphElement extends ReadableElement {
+    private static DEFAULT_MIN_VALUE = 0;
+    private static DEFAULT_MAX_VALUE = 100;
+
+    readonly model: BarGraph;
+
+    private readonly $barRect: JQuery;
+    private readonly barElement: JQuery;
+    private readonly $barText: JQuery;
+    private readonly defaultTransform: string;
+    private defaultBarColor = '#6fd149';
+    private defaultUpperLimitColor = '#ff4448';
+    private defaultLowerLimitColor = '#0f60e8';
+    private barText = '';
+    private valueObj: any = {};
+    private isNeedUpdateScale = false;
+
+    public get readVariableName(): string {
+        if (!this.model) { throw new Error('Model cannot be null'); }
+        if (null == this.model.version || this.model.version < 2) {
+            return this.model.variableName;
+        } else {
+            const variable = this.model.readVariable;
+            if (!variable) { return undefined; }
+            return VariableUtil.getConvertedVariableName(this.variableStore, variable);
+        }
+    }
+
+    constructor(element: HTMLElement, permissionChecker: PermissionChecker,
+        variableCommunicator: VariableCommunicator,
+        variableStore: VariableStore,
+        localization: Localization,
+        signalRAppId: string) {
+        super(element, permissionChecker, variableCommunicator, variableStore, localization, signalRAppId);
+        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;
+        }
+        this.$barRect = this.$element.find('rect');
+        this.$barText = this.$element.find('text[id="text"]').last();
+        if (this.model.version && this.model.version >= 1) {
+            const backgroundColor = this.model.backgroundColor ? this.model.backgroundColor : 'transparent';
+            this.barElement = this.$element.children(`path[fill='${backgroundColor}']`);
+            this.defaultTransform = this.barElement.attr('transform');
+            this.$barRect.attr('transform', this.defaultTransform);
+        }
+        setTimeout(() => {
+            this.initFrameNode();
+        }, 0);
+    }
+
+    private initFrameNode() {
+        const arcPath = Snap(this.$element[0]);
+        const b = arcPath.getBBox(true);
+        this.rootElement.append('rect').attr('id', 'StateFrame').attr('width', b.width).attr('height', b.height).attr('fill', 'transparent');
+    }
+
+    private updateValueObj(value: any, variableName: any) {
+
+        if (this.model.readVariable?.name === variableName) {
+            this.isNeedUpdateScale = false;
+            this.valueObj.value = value;
+        }
+
+        if (this.model.minVariable?.name === variableName) {
+            this.isNeedUpdateScale = true;
+            this.valueObj.min = value;
+        }
+
+        if (this.model.maxVariable?.name === variableName) {
+            this.isNeedUpdateScale = true;
+            this.valueObj.max = value;
+        }
+    }
+
+    private updateScale() {
+        if (!this.isNeedUpdateScale) { return; }
+        const textElements = this.$element.find('g:first > text');
+        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 = BarGraphElement.DEFAULT_MIN_VALUE;
+            max = BarGraphElement.DEFAULT_MAX_VALUE;
+        }
+
+        const avgSacle = ((max - min) / this.model.masterDivisionNumber).toFixed(5);
+
+        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;
+            }
+        }
+    }
+
+    updateVariableValue(value: number, variableName: any) {
+        this.updateValueObj(value, variableName);
+        this.updateScale();
+        const variableValue = Number(this.valueObj.value);
+        let maxValue = this.model.maxValueType ? this.valueObj.max : this.model.max;
+        let minValue = this.model.minValueType ? this.valueObj.min : this.model.min;
+
+        minValue = Number(minValue);
+        maxValue = Number(maxValue);
+
+        if (isNaN(minValue) || isNaN(maxValue)) {
+            minValue = BarGraphElement.DEFAULT_MIN_VALUE;
+            maxValue = BarGraphElement.DEFAULT_MAX_VALUE;
+        }
+
+        if (isNaN(variableValue)) {
+            return;
+        }
+
+        const useAlarmLimit = this.model.useAlarmLimit;
+        const useAlarmUpperLimit = null != this.model.upperLimit;
+        const useAlarmLowerLimit = null != this.model.lowerLimit;
+        let barColor = this.model.barColor;
+        const upperLimitColor = this.model.upperLimitColor;
+        const lowerLimitColor = this.model.lowerLimitColor;
+        const percentageFont = this.model.percentageFont;
+        let box;
+        if (this.model.version && this.model.version >= 1) {
+            box = (<any>this.barElement[0]).getBBox();
+        } else {
+            box = (<any>this.$barRect.parent()[0]).getBBox();
+        }
+        const percent = calculatePercent(minValue, maxValue, variableValue);
+        let translateY = 0;
+        if (this.model.direction === BarGraphDirection.DownToUp || this.model.direction === BarGraphDirection.LeftToRight) {
+            translateY = box.height * (1 - percent);
+        }
+
+        if (!barColor) {
+            barColor = this.defaultBarColor;
+        }
+        if (useAlarmLimit) {
+            if (useAlarmUpperLimit && variableValue > +this.model.upperLimit) {
+                if (upperLimitColor) {
+                    barColor = upperLimitColor;
+                } else {
+                    barColor = this.defaultUpperLimitColor;
+                }
+            } else if (useAlarmLowerLimit && variableValue < +this.model.lowerLimit) {
+                if (lowerLimitColor) {
+                    barColor = lowerLimitColor;
+                } else {
+                    barColor = this.defaultLowerLimitColor;
+                }
+            }
+        }
+        this.$barRect.attr('height', box.height * percent);
+        this.$barRect.attr('width', box.width);
+        this.$barRect.attr('fill', barColor);
+        if (this.model.version && this.model.version >= 1) {
+            this.$barRect.attr('transform', this.defaultTransform + ` translate(0,${translateY})`);
+        } else {
+            this.$barRect.attr('transform', `translate(0,${translateY})`);
+        }
+        this.barText = (percent * 100).toFixed(0) + '%';
+        this.$barText.text(this.barText);
+        if (percentageFont) {
+            this.$barText.attr('font-family', 'Microsoft YaHei');
+            this.$barText.attr('font-size', percentageFont.fontSize + '');
+            this.$barText.attr('fill', percentageFont.color);
+            if (percentageFont.isBold) { this.$barText.attr('font-weight', 'bold'); }
+            if (percentageFont.isItalic) { this.$barText.attr('font-style', 'italic'); }
+            if (percentageFont.isUnderline) { this.$barText.attr('text-decoration', 'underline'); }
+        }
+    }
+}

package/src/elements/base/base-element.ts

@@ -0,0 +1,15 @@
+import * as d3 from 'd3-selection';
+import { BaseElementModel } from '../../model';
+
+export abstract class BaseElement {
+
+    protected readonly $element: JQuery;
+    protected readonly rootElement: d3.Selection<any, {}, null, undefined>;
+    protected model: BaseElementModel;
+
+    constructor(element: HTMLElement, protected readonly signalRAppId: string = '') {
+        this.$element = $(element);
+        this.rootElement = d3.select(element);
+        this.model = JSON.parse(this.rootElement.attr('data-model'));
+    }
+}