@flexem/fc-gui 3.0.0-alpha.126 → 3.0.0-alpha.128

package/bundles/@flexem/fc-gui.umd.js

@@ -22260,10 +22260,18 @@ var history_data_store = __webpack_require__(254);
 
 // CONCATENATED MODULE: ./.tmp/config/history-data/history-data.model.ts
 class HistoryDataModel {
-    constructor(error, isUnbind, values) {
+    constructor(error, isUnbind, values, historyDataItems // 新增：多条目独立数据
+    ) {
         this.error = error;
         this.isUnbind = isUnbind;
         this.values = values;
+        this.historyDataItems = historyDataItems;
+    }
+}
+class HistoryDataItemModel {
+    constructor(itemName, rows) {
+        this.itemName = itemName;
+        this.rows = rows;
     }
 }
 
@@ -22350,14 +22358,15 @@ class GetAlarmsArgs {
 /* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "g", function() { return GraphResult; });
 /* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "i", function() { return GraphType; });
 /* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "h", function() { return graph_store["GraphStore"]; });
-/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "p", function() { return view_store["ViewStore"]; });
-/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "o", function() { return view_model["a" /* ViewModel */]; });
-/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "m", function() { return image_store["ImageStore"]; });
-/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "k", function() { return history_data_store["HistoryDataStore"]; });
-/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "j", function() { return HistoryDataModel; });
-/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "l", function() { return HistoryDataValue; });
+/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "q", function() { return view_store["ViewStore"]; });
+/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "p", function() { return view_model["a" /* ViewModel */]; });
+/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "n", function() { return image_store["ImageStore"]; });
+/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "l", function() { return history_data_store["HistoryDataStore"]; });
+/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "k", function() { return HistoryDataModel; });
+/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "j", function() { return HistoryDataItemModel; });
+/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "m", function() { return HistoryDataValue; });
 /* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "d", function() { return GetHistoryDataArgs; });
-/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "n", function() { return variable_store["VariableStore"]; });
+/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "o", function() { return variable_store["VariableStore"]; });
 /* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "e", function() { return GetVariableNameArgs; });
 /* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "a", function() { return alarm_store["AlarmsStore"]; });
 /* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "c", function() { return GetAlarmsArgs; });
@@ -33026,7 +33035,7 @@ class Guid {
 /* harmony import */ var _Subscription__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(25);
 /* harmony import */ var _internal_symbol_rxSubscriber__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(53);
 /* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(24);
-/* harmony import */ var _util_hostReportError__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(35);
+/* harmony import */ var _util_hostReportError__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(36);
 /** PURE_IMPORTS_START tslib,_util_isFunction,_Observer,_Subscription,_internal_symbol_rxSubscriber,_config,_util_hostReportError PURE_IMPORTS_END */
 
 
@@ -35713,7 +35722,7 @@ class WriteCharacterModalArgs {
 }
 
 // EXTERNAL MODULE: ./.tmp/modal/write-character/write-character-modal.component.ts
-var write_character_modal_component = __webpack_require__(38);
+var write_character_modal_component = __webpack_require__(39);
 
 // EXTERNAL MODULE: ./.tmp/utils/access-permission.service.ts + 1 modules
 var access_permission_service = __webpack_require__(43);
@@ -37025,7 +37034,7 @@ class datetime_display_element_DatetimeDisplayElement extends conditional_displa
 var d3 = __webpack_require__(18);
 
 // EXTERNAL MODULE: ./node_modules/nvd3/build/nv.d3.js
-var nv_d3 = __webpack_require__(39);
+var nv_d3 = __webpack_require__(35);
 
 // CONCATENATED MODULE: ./.tmp/config/history-data/historical-curve.time-range.ts
 var HistoricalCurveTimeRange;
@@ -37313,7 +37322,50 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
         }
     }
     handleQueryResult(result) {
-        if (result.error) {
+        // 【新格式】多条目模式下的错误处理
+        if (result.historyDataItems && result.historyDataItems.length > 0) {
+            // 只要有条目正常返回(即使没有数据),就走正常逻辑
+            // 这样可以确保即使部分条目失败,只要有条目成功返回,就显示正常状态
+            this.clearStatus();
+            if (result.isUnbind) {
+                this.updateElementStatus(HistoricalCurveElementStatus.Unbound);
+            }
+            else {
+                this.updateElementStatus(HistoricalCurveElementStatus.Normal);
+            }
+            // 如果有错误信息,在控制台输出警告
+            if (result.error) {
+                this.logger.warn(`[历史曲线] 部分条目查询失败: ${result.error}`);
+            }
+            // 检查是否有任何条目有数据
+            const hasAnyData = result.historyDataItems.some(item => item.rows && item.rows.length > 0);
+            if (hasAnyData) {
+                // 有数据,计算所有条目的最小和最大时间，确保时间轴覆盖所有数据
+                let globalMinTime = null;
+                let globalMaxTime = null;
+                result.historyDataItems.forEach(item => {
+                    if (item.rows && item.rows.length > 0) {
+                        const itemMinTime = moment(Object(lodash["first"])(item.rows).time);
+                        const itemMaxTime = moment(Object(lodash["last"])(item.rows).time);
+                        if (!globalMinTime || itemMinTime.isBefore(globalMinTime)) {
+                            globalMinTime = itemMinTime;
+                        }
+                        if (!globalMaxTime || itemMaxTime.isAfter(globalMaxTime)) {
+                            globalMaxTime = itemMaxTime;
+                        }
+                    }
+                });
+                // 设置全局时间范围
+                if (globalMinTime && globalMaxTime) {
+                    this.currentStartTime = globalMinTime;
+                    this.currentEndTime = globalMaxTime;
+                }
+            }
+            // 无论是否有数据,都渲染曲线(没有数据会显示空曲线)
+            this.chartElement = this.renderChartWithMultiItems(result.historyDataItems);
+        }
+        // 【旧格式】单条目模式的错误处理
+        else if (result.error) {
             this.updateElementStatus(HistoricalCurveElementStatus.LoadFailed, result.error);
         }
         else {
@@ -37324,6 +37376,7 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
             else {
                 this.updateElementStatus(HistoricalCurveElementStatus.Normal);
             }
+            // 【旧格式】单条目数据，使用原有渲染方式
             if (result.values.length) {
                 this.currentStartTime = moment(Object(lodash["first"])(result.values).time);
                 this.currentEndTime = moment(Object(lodash["last"])(result.values).time);
@@ -37357,31 +37410,61 @@ class historical_curve_element_HistoricalCurveElement extends conditional_displa
         const chartWidth = this.model.displaySetting.size.width;
         const chartHeight = this.model.displaySetting.size.height - this.displayOption.operationAreaHeight - this.displayOption.operationAreaMarginTop;
         const data = new Array();
-        // 【新格式】多条目模式：曲线名称使用"条目名-通道名"格式
-        if (this.model.dataSetting.dataItems && this.model.dataSetting.dataItems.length > 0) {
-            let channelIndex = 0;
-            Object(lodash["each"])(this.model.dataSetting.dataItems, dataItem => {
-                Object(lodash["each"])(dataItem.channels, channel => {
-                    const values = new Array();
-                    Object(lodash["each"])(result, v => values.push({ x: moment(v.time).local().toDate().valueOf(), y: v.values[channelIndex] }));
-                    // 使用"条目名-通道名"格式
-                    const displayName = `${dataItem.dataName}-${channel.name}`;
-                    data.push({ key: displayName, area: channel.projectEnabled, values: values });
-                    channelIndex++;
-                });
-            });
-        }
-        // 【旧格式】单条目模式：同样使用"条目名-通道名"格式
-        else {
-            const dataItemName = this.model.dataSetting.dataName;
-            Object(lodash["each"])(this.model.dataSetting.channels, (channel, key) => {
+        // 【旧格式】单条目模式：只显示通道名
+        Object(lodash["each"])(this.model.dataSetting.channels, (channel, key) => {
+            const values = new Array();
+            Object(lodash["each"])(result, v => values.push({ x: moment(v.time).local().toDate().valueOf(), y: v.values[key] }));
+            const displayName = channel.name;
+            data.push({ key: displayName, area: channel.projectEnabled, values: values });
+        });
+        this.data = data;
+        nv_d3["addGraph"](() => {
+            let chart;
+            if (this.model.displaySetting.curveType === CurveType.BarGroup || this.model.displaySetting.curveType === CurveType.BarStack) {
+                chart = this.getMultiBarWithFocusChart(chartWidth, chartHeight, data);
+            }
+            else {
+                chart = this.getLineChart(chartWidth, chartHeight, data);
+            }
+            // 设置 tooltip 自动隐藏逻辑
+            this.setupTooltipAutoHide(chart);
+            return chart;
+        });
+    }
+    /**
+     * 【新格式】多条目独立数据的曲线渲染
+     * 每个条目独立保持自己的时间戳，不会出现时间戳混乱的问题
+     */
+    renderChartWithMultiItems(historyDataItems) {
+        const chartWidth = this.model.displaySetting.size.width;
+        const chartHeight = this.model.displaySetting.size.height - this.displayOption.operationAreaHeight - this.displayOption.operationAreaMarginTop;
+        const data = new Array();
+        // 创建一个 Map 用于快速查找条目数据
+        const itemDataMap = new Map();
+        Object(lodash["each"])(historyDataItems, item => {
+            if (item && item.itemName) {
+                itemDataMap.set(item.itemName, item.rows || []);
+            }
+        });
+        // 判断是否只有一个条目
+        const isSingleItem = this.model.dataSetting.dataItems && this.model.dataSetting.dataItems.length === 1;
+        // 为每个条目的每个通道创建独立的曲线
+        Object(lodash["each"])(this.model.dataSetting.dataItems, (dataItem) => {
+            const itemName = dataItem.dataName;
+            // 通过 itemName 匹配数据，而不是通过索引
+            const itemRows = itemDataMap.get(itemName) || [];
+            Object(lodash["each"])(dataItem.channels, (channel, channelIdx) => {
                 const values = new Array();
-                Object(lodash["each"])(result, v => values.push({ x: moment(v.time).local().toDate().valueOf(), y: v.values[key] }));
-                // 使用"条目名-通道名"格式
-                const displayName = `${dataItemName}-${channel.name}`;
+                // 每个条目使用自己的时间戳和数据
+                Object(lodash["each"])(itemRows, row => {
+                    const value = row.values && row.values[channelIdx] !== undefined ? row.values[channelIdx] : null;
+                    values.push({ x: moment(row.time).local().toDate().valueOf(), y: value });
+                });
+                // 只有多个条目时才使用"条目名-通道名"格式，单条目时只显示通道名
+                const displayName = isSingleItem ? channel.name : `${itemName}-${channel.name}`;
                 data.push({ key: displayName, area: channel.projectEnabled, values: values });
             });
-        }
+        });
         this.data = data;
         nv_d3["addGraph"](() => {
             let chart;
@@ -37987,7 +38070,7 @@ class WriteValueModalArgs {
 }
 
 // EXTERNAL MODULE: ./.tmp/modal/write-value/write-value-modal.component.ts
-var write_value_modal_component = __webpack_require__(37);
+var write_value_modal_component = __webpack_require__(38);
 
 // EXTERNAL MODULE: ./.tmp/model/shared/data-type/fcloud-data-Type.ts
 var fcloud_data_Type = __webpack_require__(6);
@@ -38224,7 +38307,10 @@ class numerical_display_element_NumericalDisplayElement extends readable_element
                             }
                         }, 30000);
                     }
-                    this.variableCommunicator.write(this.writeVariableName, writeValue).subscribe();
+                    // 如果是系统变量"当前语种ID"，跳过写值操作（已在 handleCurrentLanguageIdSave 中处理）
+                    if (this.writeVariableName !== '当前语种ID') {
+                        this.variableCommunicator.write(this.writeVariableName, writeValue).subscribe();
+                    }
                 }
                 else {
                     this.writeValueMmodalRef.hide();
@@ -43349,1024 +43435,233 @@ var ConditionType;
 
 /***/ }),
 /* 35 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return hostReportError; });
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-function hostReportError(err) {
-    setTimeout(function () { throw err; }, 0);
-}
-//# sourceMappingURL=hostReportError.js.map
-
-
-/***/ }),
-/* 36 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-
-// EXTERNAL MODULE: external "@angular/core"
-var core_ = __webpack_require__(0);
-
-// EXTERNAL MODULE: ./node_modules/lodash/lodash.js
-var lodash = __webpack_require__(2);
-
-// EXTERNAL MODULE: ./.tmp/localization/index.ts + 1 modules
-var _tmp_localization = __webpack_require__(9);
-
-// EXTERNAL MODULE: ./.tmp/settings/index.ts + 2 modules
-var settings = __webpack_require__(16);
-
-// EXTERNAL MODULE: ./.tmp/logger/index.ts + 2 modules
-var logger = __webpack_require__(7);
-
-// EXTERNAL MODULE: ./.tmp/shared/index.ts + 3 modules
-var shared = __webpack_require__(5);
-
-// EXTERNAL MODULE: ./.tmp/view/view.service.ts
-var view_service = __webpack_require__(27);
-
-// EXTERNAL MODULE: ./.tmp/gui/gui-view.ts + 126 modules
-var gui_view = __webpack_require__(32);
-
-// EXTERNAL MODULE: external "rxjs/operators"
-var operators_ = __webpack_require__(17);
+/***/ (function(module, exports, __webpack_require__) {
 
-// CONCATENATED MODULE: ./.tmp/gui/gui-host.ts
+/* nvd3 version 1.8.6-dev (https://github.com/flexem/nvd3) 2018-08-22 */
+(function(){
 
+// set up main nv object
+var nv = {};
 
+// the major global objects under the nv namespace
+nv.dev = false; //set false when in production
+nv.tooltip = nv.tooltip || {}; // For the tooltip system
+nv.utils = nv.utils || {}; // Utility subsystem
+nv.models = nv.models || {}; //stores all the possible models/components
+nv.charts = {}; //stores all the ready to use charts
+nv.logs = {}; //stores some statistics and potential error messages
+nv.dom = {}; //DOM manipulation functions
 
+// Node/CommonJS - require D3
+if (typeof(module) !== 'undefined' && typeof(exports) !== 'undefined' && typeof(d3) == 'undefined') {
+    d3 = __webpack_require__(18);
+}
 
+nv.dispatch = d3.dispatch('render_start', 'render_end');
 
-class gui_host_GuiHost {
-    constructor(injector, bsModalService, context, guiOptions, el) {
-        this.injector = injector;
-        this.bsModalService = bsModalService;
-        this.context = context;
-        this.guiOptions = guiOptions;
-        this.el = el;
-        this.logger = injector.get(logger["b" /* LOGGER_SERVICE_TOKEN */]);
-        const toggleViewFunc = (viewIndex, parentContainerId, baseEl) => {
-            this.currentViewIndex = viewIndex;
-            return this.context.configStore.viewStore.getViewConfig(viewIndex).pipe(Object(operators_["map"])(config => {
-                if (this.currentViewIndex !== viewIndex) {
-                    return;
-                }
-                if (!config || !config.config || !config.config.length) {
-                    throw new shared["a" /* ConfigIsEmptyError */]();
-                }
-                if (this.currentView) {
-                    this.currentView.dispose();
-                }
-                this.currentView = new gui_view["a" /* GuiView */](this.injector, this.bsModalService, this.context);
-                const hostGuiOptions = {
-                    svgRootClass: this.guiOptions.svgRootClass,
-                    hostContainerId: parentContainerId,
-                    el: baseEl
-                };
-                this.currentView.load(config, hostGuiOptions);
-                this.currentView.resize(this.currentViewSize, this.currentViewReiszeMode, this.guiOptions.svgRootClass);
-                this.containerEl = $(baseEl.nativeElement).find(`div#${parentContainerId}`).first();
-                this.containerEl.empty();
-                this.containerEl.append(this.currentView.element);
-                this.logger.debug(`[GUI] Toggle View(${viewIndex}) successed.`);
-            }));
-        };
-        injector.get(view_service["a" /* ViewService */]).toggleViews.set(el, toggleViewFunc);
-    }
-    get element() {
-        if (this.containerEl) {
-            return this.containerEl[0];
-        }
-        else {
-            throw new Error('Gui Host not loaded yet.');
-        }
-    }
-    /**
-     * Load gui host and main view.
-     */
-    load(configureViewId) {
-        if (this.isLoaded) {
-            throw new Error('The GuiHost already loaded.');
-        }
-        this.isLoaded = true;
-        this.containerEl = $(`<div class="svg-content" id= "${this.guiOptions.hostContainerId}" style="display:flex;position:relative;"></div>`);
-        const result = new Promise((resolve, reject) => {
-            if (configureViewId && configureViewId !== 0) {
-                this.loadViewConfigByConfigureViewId(resolve, reject, configureViewId);
-            }
-            else {
-                this.loadMainViewConfig(resolve, reject);
-            }
-        });
-        return result;
-    }
-    loadByConfigureViewCode(configureViewCode) {
-        if (this.isLoaded) {
-            throw new Error('The GuiHost already loaded.');
+// Function bind polyfill
+// Needed ONLY for phantomJS as it's missing until version 2.0 which is unreleased as of this comment
+// https://github.com/ariya/phantomjs/issues/10522
+// http://kangax.github.io/compat-table/es5/#Function.prototype.bind
+// phantomJS is used for running the test suite
+if (!Function.prototype.bind) {
+    Function.prototype.bind = function (oThis) {
+        if (typeof this !== "function") {
+            // closest thing possible to the ECMAScript 5 internal IsCallable function
+            throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
         }
-        this.isLoaded = true;
-        this.containerEl = $(`<div class="svg-content" id= "${this.guiOptions.hostContainerId}" style="display: inline-block;position: relative;"></div>`);
-        const result = new Promise((resolve, reject) => {
-            if (configureViewCode) {
-                this.loadViewConfigByConfigureViewCode(resolve, reject, configureViewCode);
-            }
-            else {
-                this.loadMainViewConfig(resolve, reject);
-            }
-        });
-        return result;
-    }
-    loadMainViewConfig(resolve, reject) {
-        this.context.configStore.viewStore.getMainViewConfig().subscribe(config => {
-            if (config.config && config.config.length) {
-                this.currentView = new gui_view["a" /* GuiView */](this.injector, this.bsModalService, this.context);
-                this.currentView.load(config, this.guiOptions);
-                this.containerEl.empty();
-                this.containerEl.append(this.currentView.element);
-                resolve(this);
-                this.logger.debug('[GUI] Host loaded.');
-            }
-            else {
-                reject(new shared["a" /* ConfigIsEmptyError */]());
-            }
-        }, error => {
-            this.logger.error('[GUI] Load failed: ' + error.stack);
-            reject(error);
-        });
-    }
-    loadViewConfigByConfigureViewId(resolve, reject, configureViewId) {
-        this.context.configStore.viewStore.getViewConfigByConfigureViewId(configureViewId).subscribe(config => {
-            this.handleViewConfigCallback(resolve, reject, config);
-        }, error => {
-            this.logger.error('[GUI] Load failed: ' + error.stack);
-            reject(error);
-        });
-    }
-    loadViewConfigByConfigureViewCode(resolve, reject, configureViewCode) {
-        this.context.configStore.viewStore.getViewConfigByConfigureViewCode(configureViewCode).subscribe(config => {
-            this.handleViewConfigCallback(resolve, reject, config);
-        }, error => {
-            this.logger.error('[GUI] Load failed: ' + error.stack);
-            reject(error);
-        });
+
+        var aArgs = Array.prototype.slice.call(arguments, 1),
+            fToBind = this,
+            fNOP = function () {},
+            fBound = function () {
+                return fToBind.apply(this instanceof fNOP && oThis
+                        ? this
+                        : oThis,
+                    aArgs.concat(Array.prototype.slice.call(arguments)));
+            };
+
+        fNOP.prototype = this.prototype;
+        fBound.prototype = new fNOP();
+        return fBound;
+    };
+}
+
+//  Development render timers - disabled if dev = false
+if (nv.dev) {
+    nv.dispatch.on('render_start', function(e) {
+        nv.logs.startTime = +new Date();
+    });
+
+    nv.dispatch.on('render_end', function(e) {
+        nv.logs.endTime = +new Date();
+        nv.logs.totalTime = nv.logs.endTime - nv.logs.startTime;
+        nv.log('total', nv.logs.totalTime); // used for development, to keep track of graph generation times
+    });
+}
+
+// Logs all arguments, and returns the last so you can test things in place
+// Note: in IE8 console.log is an object not a function, and if modernizr is used
+// then calling Function.prototype.bind with with anything other than a function
+// causes a TypeError to be thrown.
+nv.log = function() {
+    if (nv.dev && window.console && console.log && console.log.apply)
+        console.log.apply(console, arguments);
+    else if (nv.dev && window.console && typeof console.log == "function" && Function.prototype.bind) {
+        var log = Function.prototype.bind.call(console.log, console);
+        log.apply(console, arguments);
     }
-    handleViewConfigCallback(resolve, reject, config) {
-        if (!config.config || !config.config.length) {
-            reject(new shared["a" /* ConfigIsEmptyError */]());
-        }
-        this.currentView = new gui_view["a" /* GuiView */](this.injector, this.bsModalService, this.context);
-        this.currentView.load(config, this.guiOptions);
-        this.containerEl.empty();
-        this.containerEl.append(this.currentView.element);
-        resolve(this);
-        this.logger.debug('[GUI] Host loaded.');
+    return arguments[arguments.length - 1];
+};
+
+// print console warning, should be used by deprecated functions
+nv.deprecated = function(name, info) {
+    if (console && console.warn) {
+        console.warn('nvd3 warning: `' + name + '` has been deprecated. ', info || '');
     }
-    /**
-     * Resize current view
-     * @param size : target view size
-     * @param resizeMode : target resize mode
-     */
-    resizeView(size, resizeMode) {
-        if (this.currentView) {
-            this.currentView.resize(size, resizeMode, this.guiOptions.svgRootClass);
-            this.currentViewSize = size;
-            this.currentViewReiszeMode = resizeMode;
+};
+
+// The nv.render function is used to queue up chart rendering
+// in non-blocking async functions.
+// When all queued charts are done rendering, nv.dispatch.render_end is invoked.
+nv.render = function render(step) {
+    // number of graphs to generate in each timeout loop
+    step = step || 1;
+
+    nv.render.active = true;
+    nv.dispatch.render_start();
+
+    var renderLoop = function() {
+        var chart, graph;
+
+        for (var i = 0; i < step && (graph = nv.render.queue[i]); i++) {
+            chart = graph.generate();
+            if (typeof graph.callback == typeof(Function)) graph.callback(chart);
         }
-    }
-    /**
-     * Update current view size;
-     * @param size : target view size
-     */
-    updateViewSize(size) {
-        if (!this.currentView) {
-            return;
+
+        nv.render.queue.splice(0, i);
+
+        if (nv.render.queue.length) {
+            setTimeout(renderLoop);
         }
-        this.currentView.resize(size, this.currentViewReiszeMode, this.guiOptions.svgRootClass);
-        this.currentViewSize = size;
-    }
-    /**
-     * Resize current view
-     * @param size : target view size
-     * @param resizeMode : target resize mode
-     */
-    updateViewResizeMode(resizeMode) {
-        if (this.currentView) {
-            this.currentView.resize(this.currentViewSize, resizeMode, this.guiOptions.svgRootClass);
-            this.currentViewReiszeMode = resizeMode;
+        else {
+            nv.dispatch.render_end();
+            nv.render.active = false;
         }
+    };
+
+    setTimeout(renderLoop);
+};
+
+nv.render.active = false;
+nv.render.queue = [];
+
+/*
+Adds a chart to the async rendering queue. This method can take arguments in two forms:
+nv.addGraph({
+    generate: <Function>
+    callback: <Function>
+})
+
+or
+
+nv.addGraph(<generate Function>, <callback Function>)
+
+The generate function should contain code that creates the NVD3 model, sets options
+on it, adds data to an SVG element, and invokes the chart model. The generate function
+should return the chart model.  See examples/lineChart.html for a usage example.
+
+The callback function is optional, and it is called when the generate function completes.
+*/
+nv.addGraph = function(obj) {
+    if (typeof arguments[0] === typeof(Function)) {
+        obj = {generate: arguments[0], callback: arguments[1]};
     }
-    dispose() {
-        if (this.currentView) {
-            this.currentView.dispose();
-        }
-        if (this.context) {
-            this.context.dispose();
-        }
-        this.logger.debug('[GUI] GuiHost disposed.');
+
+    nv.render.queue.push(obj);
+
+    if (!nv.render.active) {
+        nv.render();
     }
+};
+
+// Node/CommonJS exports
+if (true) {
+  module.exports = nv;
 }
-
-// EXTERNAL MODULE: ./.tmp/utils/guid.ts
-var guid = __webpack_require__(28);
-
-// CONCATENATED MODULE: ./.tmp/gui/gui.component.ts
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return gui_component_GuiComponent; });
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+
+if (typeof(window) !== 'undefined') {
+  window.nv = nv;
+}
+/* Facade for queueing DOM write operations
+ * with Fastdom (https://github.com/wilsonpage/fastdom)
+ * if available.
+ * This could easily be extended to support alternate
+ * implementations in the future.
+ */
+nv.dom.write = function(callback) {
+	if (window.fastdom !== undefined) {
+		return fastdom.mutate(callback);
+	}
+	return callback();
 };
-var __param = (undefined && undefined.__param) || function (paramIndex, decorator) {
-    return function (target, key) { decorator(target, key, paramIndex); }
+
+/* Facade for queueing DOM read operations
+ * with Fastdom (https://github.com/wilsonpage/fastdom)
+ * if available.
+ * This could easily be extended to support alternate
+ * implementations in the future.
+ */
+nv.dom.read = function(callback) {
+	if (window.fastdom !== undefined) {
+		return fastdom.measure(callback);
+	}
+	return callback();
 };
+/* Utility class to handle creation of an interactive layer.
+ This places a rectangle on top of the chart. When you mouse move over it, it sends a dispatch
+ containing the X-coordinate. It can also render a vertical line where the mouse is located.
 
+ dispatch.elementMousemove is the important event to latch onto.  It is fired whenever the mouse moves over
+ the rectangle. The dispatch is given one object which contains the mouseX/Y location.
+ It also has 'pointXValue', which is the conversion of mouseX to the x-axis scale.
+ */
+nv.interactiveGuideline = function() {
+    "use strict";
 
+    var margin = { left: 0, top: 0 } //Pass the chart's top and left magins. Used to calculate the mouseX/Y.
+        ,   width = null
+        ,   height = null
+        ,   xScale = d3.scale.linear()
+        ,   dispatch = d3.dispatch('elementMousemove', 'elementMouseout', 'elementClick', 'elementDblclick', 'elementMouseDown', 'elementMouseUp')
+        ,   showGuideLine = true
+        ,   svgContainer = null // Must pass the chart's svg, we'll use its mousemove event.
+        ,   tooltip = nv.models.tooltip()
+        ,   isMSIE =  window.ActiveXObject// Checkt if IE by looking for activeX. (excludes IE11)
+    ;
 
+    tooltip
+        .duration(0)
+        .hideDelay(0)
+        .hidden(false);
 
+    function layer(selection) {
+        selection.each(function(data) {
+            var container = d3.select(this);
+            var availableWidth = (width || 960), availableHeight = (height || 400);
+            var wrap = container.selectAll("g.nv-wrap.nv-interactiveLineLayer")
+                .data([data]);
+            var wrapEnter = wrap.enter()
+                .append("g").attr("class", " nv-wrap nv-interactiveLineLayer");
+            wrapEnter.append("g").attr("class","nv-interactiveGuideLine");
 
+            if (!svgContainer) {
+                return;
+            }
 
-
-let gui_component_GuiComponent = class GuiComponent {
-    constructor(el, localization, injector, bsModalService) {
-        this.el = el;
-        this.localization = localization;
-        this.injector = injector;
-        this.bsModalService = bsModalService;
-        this.loadFailed = new core_["EventEmitter"]();
-        this.loaded = new core_["EventEmitter"]();
-        this.lastScale = 1;
-        this.isMobileMode = false;
-        this.globalSettings = this.injector.get(settings["b" /* GlobalSettings */]);
-        this.viewService = injector.get(view_service["a" /* ViewService */]);
-    }
-    get viewResizeMode() {
-        switch (this.resizeMode) {
-            case 'HorizontalUniform':
-                return settings["c" /* ViewResizeMode */].HorizontalUniform;
-            default:
-                return settings["c" /* ViewResizeMode */].Uniform;
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes.displayMode) {
-            this.onDisplayModeChanged(changes.displayMode.previousValue, changes.displayMode.currentValue);
-        }
-        if (changes.context) {
-            this.onProviderChanged(changes.context.previousValue, changes.context.currentValue);
-        }
-        if (changes.size) {
-            this.onSizeChanged(changes.size.previousValue, changes.size.currentValue);
-        }
-        if (changes.resizeMode) {
-            this.onResizeModeChanged(changes.resizeMode.previousValue, changes.resizeMode.currentValue);
-        }
-    }
-    doubleFingerZooming() {
-        const scaleElement = this.$svg.find('div.svg-content').first()[0];
-        const self = this;
-        self.initWidth = scaleElement.offsetWidth;
-        self.initHeight = scaleElement.offsetHeight;
-        self.lastScale = 1;
-        scaleElement.addEventListener('touchstart', function (e) {
-            self.pageX = e.targetTouches[0].pageX;
-            self.pageY = e.targetTouches[0].pageY;
-            self.initX = !Object(lodash["isNaN"])(parseInt(scaleElement.style.left, 10)) ? parseInt(scaleElement.style.left, 10) : 0;
-            self.initY = !Object(lodash["isNaN"])(parseInt(scaleElement.style.top, 10)) ? parseInt(scaleElement.style.top, 10) : 0;
-            if (e.touches.length >= 2) {
-                self.startTouch = e.touches;
-            }
-            self.isTouch = true;
-        }, false);
-        scaleElement.addEventListener('touchmove', function (e) {
-            if (e.touches.length === 1 && self.isTouch && self.lastScale > 1) {
-                e.preventDefault();
-                const touchMoveX = e.targetTouches[0].pageX, touchMoveY = e.targetTouches[0].pageY;
-                const left = Number(touchMoveX) - Number(self.pageX) + Number(self.initX);
-                const top = Number(touchMoveY) - Number(self.pageY) + Number(self.initY);
-                if (left > -(self.lastScale - 1) * self.initWidth / 2 && left < (self.lastScale - 1) * self.initWidth / 2) {
-                    scaleElement.style.left = left + 'px';
-                }
-                if (top > -(self.lastScale - 1) * self.initHeight / 2 && top < (self.lastScale - 1) * self.initHeight / 2) {
-                    scaleElement.style.top = top + 'px';
-                }
-            }
-            if (e.touches.length >= 2 && self.isTouch) {
-                e.preventDefault();
-                const now = e.touches;
-                const scale = (self.getDistance(now[0], now[1]) / self.getDistance(self.startTouch[0], self.startTouch[1]));
-                let nowScale = self.lastScale;
-                if (scale >= 1) {
-                    nowScale *= 1.008;
-                }
-                if (nowScale < 1) {
-                    nowScale = 1;
-                }
-                if (nowScale > 5) {
-                    nowScale = 5;
-                }
-                if (scale < 1) {
-                    nowScale *= 0.992;
-                    scaleElement.style.left = -(nowScale - 1) * self.initWidth / 8 + 'px';
-                    scaleElement.style.top = -(nowScale - 1) * self.initHeight / 8 + 'px';
-                }
-                scaleElement.style.transform = 'scale(' + nowScale + ')';
-                self.lastScale = nowScale;
-            }
-        }, false);
-        scaleElement.addEventListener('touchend', function () {
-            if (self.isTouch) {
-                self.isTouch = false;
-            }
-        }, false);
-    }
-    getDistance(p1, p2) {
-        const x = p2.pageX - p1.pageX, y = p2.pageY - p1.pageY;
-        return Math.sqrt((x * x) + (y * y));
-    }
-    ngOnDestroy() {
-        if (this.host) {
-            this.host.dispose();
-        }
-    }
-    onProviderChanged(oldValue, newValue) {
-        if (Object(lodash["isEqual"])(oldValue, newValue)) {
-            return;
-        }
-        if (this.host) {
-            this.host.dispose();
-            this.host = null;
-        }
-        if (newValue) {
-            this.$svg = $(this.el.nativeElement).find('div.svgView').first();
-            this.$svg.empty();
-            const svgRootClass = 'S' + guid["a" /* Guid */].newGuid().toString('n');
-            this.hostContainerId = 'H' + guid["a" /* Guid */].newGuid().toString('n');
-            this.$svg.addClass(svgRootClass);
-            const guiOptions = {
-                svgRootClass: svgRootClass,
-                hostContainerId: this.hostContainerId,
-                el: this.el
-            };
-            const host = new gui_host_GuiHost(this.injector, this.bsModalService, newValue, guiOptions, this.el);
-            /*
-             * if configureViewCode exist then load by configureViewCode else load by configureViewId
-             */
-            (this.context.configureViewCode ? host.loadByConfigureViewCode(this.context.configureViewCode) :
-                host.load(this.context.configureViewId)).then(t => {
-                // 加载结束后，如果context发生了变化，直接返回。
-                if (!Object(lodash["isEqual"])(this.context, t.context)) {
-                    t.dispose();
-                    return;
-                }
-                this.host = host;
-                this.host.resizeView(this.size, this.viewResizeMode);
-                this.$svg.append(t.element);
-                if (this.isMobileMode) {
-                    this.doubleFingerZooming();
-                }
-                this.loaded.emit();
-            }).catch(error => {
-                this.$svg.append(`<p>${this.localization.loadFailed}</p>`);
-                this.loadFailed.emit(error);
-            });
-        }
-        else {
-            if (this.$svg) {
-                this.$svg.empty();
-            }
-            this.host = null;
-        }
-    }
-    onSizeChanged(oldValue, newValue) {
-        if (!this.host || Object(lodash["isEqual"])(oldValue, newValue)) {
-            return;
-        }
-        this.host.updateViewSize(newValue);
-        if (this.isMobileMode) {
-            this.doubleFingerZooming();
-        }
-    }
-    onResizeModeChanged(oldValue, newValue) {
-        if (!this.host || Object(lodash["isEqual"])(oldValue, newValue)) {
-            return;
-        }
-        this.host.updateViewResizeMode(this.viewResizeMode);
-    }
-    onDisplayModeChanged(oldValue, newValue) {
-        if (Object(lodash["isEqual"])(oldValue, newValue)) {
-            return;
-        }
-        this.isMobileMode = this.displayMode === 'Mobile';
-        this.globalSettings.displayMode = this.isMobileMode ? settings["a" /* DisplayMode */].Mobile : settings["a" /* DisplayMode */].Web;
-    }
-    refreshCurrentPage() {
-        if (this.host.currentViewIndex === undefined) {
-            return false;
-        }
-        const toggleView = this.viewService.toggleViews.get(this.el);
-        if (!toggleView) {
-            return false;
-        }
-        toggleView(this.host.currentViewIndex, this.hostContainerId, this.el).subscribe();
-        return true;
-    }
-};
-__decorate([
-    Object(core_["Input"])()
-], gui_component_GuiComponent.prototype, "context", void 0);
-__decorate([
-    Object(core_["Input"])()
-], gui_component_GuiComponent.prototype, "size", void 0);
-__decorate([
-    Object(core_["Input"])()
-], gui_component_GuiComponent.prototype, "resizeMode", void 0);
-__decorate([
-    Object(core_["Input"])()
-], gui_component_GuiComponent.prototype, "displayMode", void 0);
-__decorate([
-    Object(core_["Output"])()
-], gui_component_GuiComponent.prototype, "loadFailed", void 0);
-__decorate([
-    Object(core_["Output"])()
-], gui_component_GuiComponent.prototype, "loaded", void 0);
-gui_component_GuiComponent = __decorate([
-    Object(core_["Component"])({
-        selector: 'fc-gui',
-        template: "<div> <div class='svgView' style=\"position: relative;display: flex;justify-content: center;align-items: center;\"></div> </div> "
-    }),
-    __param(1, Object(core_["Inject"])(_tmp_localization["b" /* LOCALIZATION */]))
-], gui_component_GuiComponent);
-
-
-
-/***/ }),
-/* 37 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return WriteValueModalComponent; });
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _localization__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
-/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
-/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_2__);
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __param = (undefined && undefined.__param) || function (paramIndex, decorator) {
-    return function (target, key) { decorator(target, key, paramIndex); }
-};
-
-
-
-let WriteValueModalComponent = class WriteValueModalComponent {
-    constructor(localization, dataTypeService, fractionDigitService, numericalOperationService, bsModalRef) {
-        this.localization = localization;
-        this.dataTypeService = dataTypeService;
-        this.fractionDigitService = fractionDigitService;
-        this.numericalOperationService = numericalOperationService;
-        this.bsModalRef = bsModalRef;
-        this.writeValueRangeText = '';
-        this.isSubmitting = false;
-    }
-    get invalidErrorText() {
-        return this.localization.loadFailed;
-    }
-    ngOnInit() {
-        this.initData(this.args);
-        this.validate();
-    }
-    initData(option) {
-        this.variableName = option.variableName;
-        this.dataType = option.dataType;
-        this.fBoxDataType = option.fBoxDataType;
-        this.integerDigits = option.integerDigits ? option.integerDigits : 0;
-        this.fractionDigits = option.fractionDigits ? option.fractionDigits : 0;
-        this.valueType = this.dataTypeService.getValueType(option.version, option.dataType);
-        this.pattern = this.dataTypeService.getValuePattern(option.version, option.dataType);
-        this.numericalOperation = option.numericalOperation;
-        this.enableNumericalOperation = this.numericalOperation.enableNumericalOperation ?
-            this.numericalOperation.enableNumericalOperation : false;
-        this.value = '';
-        if (this.args.enableDataParsed) {
-            this.setValueRangeAccordToDataParsed(option);
-        }
-        else {
-            this.writeMaxValue = this.dataTypeService.getMaxValue(option.version, this.dataType, this.fBoxDataType);
-            this.writeMinValue = this.dataTypeService.getMinValue(option.version, this.dataType, this.fBoxDataType);
-        }
-        this.writeValueRangeText = this.getWriteValueRangeText();
-    }
-    setValueRangeAccordToDataParsed(option) {
-        if (this.dataTypeService.isFloat(option.version, this.dataType) || this.enableNumericalOperation) {
-            this.maxValueLimit = this.dataTypeService.getMaxValue(option.version, this.dataType, this.fBoxDataType);
-            this.minValueLimit = this.dataTypeService.getMinValue(option.version, this.dataType, this.fBoxDataType);
-            this.numericalLowerLimit = this.numericalOperation.numericalLowerLimit;
-            this.numericalUpperLimit = this.numericalOperation.numericalUpperLimit;
-        }
-        else {
-            this.maxValueLimit = +this.fractionDigitService.movePoint(this.dataTypeService.getMaxValue(option.version, this.dataType, this.fBoxDataType), -this.fractionDigits);
-            this.minValueLimit = +this.fractionDigitService.movePoint(this.dataTypeService.getMinValue(option.version, this.dataType, this.fBoxDataType), -this.fractionDigits);
-            this.numericalLowerLimit = +this.fractionDigitService.movePoint(this.numericalOperation.numericalLowerLimit, -this.fractionDigits);
-            this.numericalUpperLimit = +this.fractionDigitService.movePoint(this.numericalOperation.numericalUpperLimit, -this.fractionDigits);
-        }
-        const minValue = this.numericalOperationService.getWriteMinValue(this.minValueLimit, this.numericalOperation);
-        const maxValue = this.numericalOperationService.getWriteMaxValue(this.maxValueLimit, this.numericalOperation);
-        const lowerLimitValue = this.numericalOperationService.getWriteMinValue(this.numericalLowerLimit, this.numericalOperation);
-        const upperLimitValue = this.numericalOperationService.getWriteMaxValue(this.numericalUpperLimit, this.numericalOperation);
-        const realMinValue = minValue < maxValue ? minValue : maxValue;
-        const realMaxValue = minValue < maxValue ? maxValue : minValue;
-        const realLowerLimitValue = lowerLimitValue < upperLimitValue ? lowerLimitValue : upperLimitValue;
-        const realUpperLimitValue = lowerLimitValue < upperLimitValue ? upperLimitValue : lowerLimitValue;
-        this.writeMinValue = realMinValue > realLowerLimitValue ? realMinValue : realLowerLimitValue;
-        this.writeMaxValue = realMaxValue < realUpperLimitValue ? realMaxValue : realUpperLimitValue;
-    }
-    getWriteValueRangeText() {
-        let minValue = '';
-        let maxValue = '';
-        if (this.dataTypeService.isHexOrBinaryType(this.args.version, this.dataType)) {
-            minValue = this.writeMinValue.toString(16);
-            maxValue = this.writeMaxValue.toString(16);
-        }
-        else {
-            if (this.args.enableDataParsed && this.fractionDigits > 0) {
-                minValue = this.writeMinValue.toFixed(this.fractionDigits).toString();
-                maxValue = this.writeMaxValue.toFixed(this.fractionDigits).toString();
-            }
-            else {
-                minValue = this.writeMinValue.toString();
-                maxValue = this.writeMaxValue.toString();
-            }
-        }
-        return minValue + '~' + maxValue;
-    }
-    save() {
-        this.isSubmitting = true;
-        let value = this.value;
-        const showValue = this.value;
-        if (this.args.enableDataParsed) {
-            if (this.enableNumericalOperation) {
-                value = this.numericalOperationService.getWriteValue(this.args.version, this.value, this.numericalOperation, this.dataType, this.fractionDigits);
-            }
-            else {
-                value = this.formatWriteValue();
-            }
-        }
-        // 处理系统变量"当前语种ID"
-        if (this.variableName === '当前语种ID') {
-            this.handleCurrentLanguageIdSave(value);
-            return;
-        }
-        if (!this.args.releasedVariableService) {
-            this.onClosed({
-                value: value,
-                showValue: showValue,
-                enableNumericalOperation: false,
-                isNumericalOperation: this.isNumericalOperation,
-                variableRwType: 6
-            });
-            return;
-        }
-        this.args.releasedVariableService.getVariableWithValueTransform(this.variableName).subscribe(result => {
-            const valueTransform = JSON.parse(result.valueTransform);
-            if ((valueTransform === null || valueTransform === void 0 ? void 0 : valueTransform.Type) !== 0) {
-                this.isNumericalOperation = true;
-            }
-            this.onClosed({
-                value: value,
-                showValue: showValue,
-                enableNumericalOperation: this.enableNumericalOperation,
-                isNumericalOperation: this.isNumericalOperation,
-                variableRwType: result.variableRwType
-            });
-        });
-    }
-    /**
-     * 处理"当前语种ID"系统变量的保存
-     */
-    handleCurrentLanguageIdSave(value) {
-        if (!this.args.guiContext || !this.args.guiContext.updateCurrentLanguageId) {
-            this.showValidationErrorInfo(this.localization.loadFailed);
-            this.isSubmitting = false;
-            return;
-        }
-        // 转换为数字类型
-        const languageId = value === '' || value == null ? null : Number(value);
-        // 调用 GuiContext 的更新方法
-        this.args.guiContext.updateCurrentLanguageId(languageId).then(() => {
-            // 更新成功，关闭弹窗
-            this.bsModalRef.hide();
-        }).catch(() => {
-            this.showValidationErrorInfo(this.localization.loadFailed);
-            this.isSubmitting = false;
-        });
-    }
-    close() {
-        this.bsModalRef.hide();
-    }
-    validate(event = null) {
-        if (event && event.keyCode === 13 && !this.validationError) {
-            this.save();
-            return;
-        }
-        // 校验数值必填
-        if (null == this.value || '' === this.value.trim()) {
-            return this.showValidationErrorInfo(this.localization.numericalValueRequired);
-        }
-        // 校验格式
-        if (!new RegExp(this.pattern).test(this.value)) {
-            return this.showValidationErrorInfo(this.localization.invalidNumericalValue);
-        }
-        // 校验小数点位数
-        if (!this.enableNumericalOperation && this.dataTypeService.isSupportFractionDigit(this.args.version, this.dataType)
-            && this.getFractionDigits(this.value) > this.fractionDigits) {
-            return this.showValidationErrorInfo(`${this.localization.fractionDigitsMustLessThan}${this.fractionDigits}`);
-        }
-        // 校验负号
-        if (Object(lodash__WEBPACK_IMPORTED_MODULE_2__["isNil"])(this.args.version) || (!Object(lodash__WEBPACK_IMPORTED_MODULE_2__["isNil"])(this.args.version) && this.args.version < 5)) {
-            if (!this.enableNumericalOperation && !this.dataTypeService.isSignedType(this.args.version, this.dataType) && this.value.startsWith('-')) {
-                return this.showValidationErrorInfo(this.localization.canNotBeNegative);
-            }
-        }
-        if (this.dataTypeService.isBinaryType(this.args.version, this.dataType) || this.dataTypeService.isHexType(this.args.version, this.dataType)) {
-            // 校验数值最大长度
-            const valueMaxLength = this.dataTypeService.getValueMaxLength(this.args.version, this.dataType, this.fBoxDataType);
-            const maxLength = this.integerDigits ? Math.min(this.integerDigits, valueMaxLength) : valueMaxLength;
-            if (this.value.length > maxLength) {
-                return this.showValidationErrorInfo(this.localization.numericalValueTooLong);
-            }
-        }
-        let transportValue;
-        if (this.dataTypeService.isHexOrBinaryType(this.args.version, this.dataType)) {
-            transportValue = this.dataTypeService.formatToDecimal(this.args.version, this.value, this.dataType);
-        }
-        else {
-            transportValue = Number(this.value);
-        }
-        if (Number(transportValue) > this.writeMaxValue || Number(transportValue) < this.writeMinValue) {
-            return this.showValidationErrorInfo(this.localization.valueOutOfRange);
-        }
-        // 没有错误则隐藏错误框
-        this.hideValidationErrorInfo();
-    }
-    showValidationErrorInfo(errorText) {
-        this.validationError = true;
-        this.validationErrorText = errorText;
-    }
-    hideValidationErrorInfo() {
-        this.validationError = false;
-        this.validationErrorText = '';
-    }
-    getFractionDigits(number) {
-        if (number && number.indexOf('.') > 0) {
-            return number.split('.')[1].length;
-        }
-        return 0;
-    }
-    /**
-     * 格式化写入的值
-     * 因为有小数点的数值类型，会被按照小数点位数移位，所以需要在修改前右移小数点位数
-     */
-    formatWriteValue() {
-        if (this.dataTypeService.isSupportFractionDigit(this.args.version, this.dataType) &&
-            !this.dataTypeService.isFloat(this.args.version, this.dataType) && this.fractionDigits) {
-            return this.fractionDigitService.movePoint(this.value, this.fractionDigits);
-        }
-        if (this.dataTypeService.isSupportNumericalOperation(this.args.version, this.dataType)) {
-            this.value = Number(this.value).toString();
-        }
-        return this.value;
-    }
-};
-__decorate([
-    Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])()
-], WriteValueModalComponent.prototype, "invalidErrorText", null);
-WriteValueModalComponent = __decorate([
-    Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
-        selector: 'writeValueModal',
-        template: "<form #writeValueForm=\"ngForm\" novalidate (ngSubmit)=\"save()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.setting}}</span> <span>{{variableName}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"write-value-range\">{{localization.writeValueRange}}：</span> <div class=\"write-value-range\"> {{writeValueRangeText}} <span *ngIf=\"valueType\">({{valueType}})</span> </div> <input type=\"text\" name=\"valueInput\" autoFocus class=\"form-control write-value\" [(ngModel)]=\"value\" (keyup)=\"validate($event)\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!validationError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\"> <button type=\"submit\" class=\"btn md-skip btn-primary btn-block\" [disabled]=\"validationError || isSubmitting\"> <ng-container *ngIf=\"!isSubmitting\">{{localization.submit}}</ng-container> <ng-container *ngIf=\"isSubmitting\">{{localization.submitting}}</ng-container> </button> </div> </form> ",
-        styles: [".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { background-color: #3B97FC; border-color: #3B97FC; padding: 5px 30px; width: 90%; margin: 0 5%; height: 32px; } .write-value-range { color: #7f939e; font-size: 14px; margin-left: 15px; } .write-value { padding-left: 8px; margin-left: 16px; height: 32px; } "]
-    }),
-    __param(0, Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Inject"])(_localization__WEBPACK_IMPORTED_MODULE_1__[/* LOCALIZATION */ "b"]))
-], WriteValueModalComponent);
-
-
-
-/***/ }),
-/* 38 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return WriteCharacterModalComponent; });
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(40);
-/* harmony import */ var _localization__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __param = (undefined && undefined.__param) || function (paramIndex, decorator) {
-    return function (target, key) { decorator(target, key, paramIndex); }
-};
-
-
-
-let WriteCharacterModalComponent = class WriteCharacterModalComponent {
-    constructor(localization) {
-        this.localization = localization;
-        this._onClosed = new rxjs__WEBPACK_IMPORTED_MODULE_1__[/* Subject */ "a"]();
-    }
-    get onClosed() {
-        return this._onClosed;
-    }
-    get invalidErrorText() {
-        return this.localization.loadFailed;
-    }
-    ngOnInit() {
-        this.variableName = this.args.variableName;
-        this.isPassword = this.args.isPassword ? this.args.isPassword : false;
-        this.charCount = this.args.charCount;
-        this.value = '';
-        this.validate();
-    }
-    validate() {
-        // 校验数值必填
-        if (null == this.value || '' === this.value.trim()) {
-            return this.showValidationErrorInfo(this.localization.characterInputRequired);
-        }
-        if (this.value.length > this.charCount) {
-            return this.showValidationErrorInfo(this.localization.characterOutofRange);
-        }
-        this.hideValidationErrorInfo();
-    }
-    showValidationErrorInfo(errorText) {
-        this.validationError = true;
-        this.validationErrorText = errorText;
-    }
-    hideValidationErrorInfo() {
-        this.validationError = false;
-        this.validationErrorText = '';
-    }
-    save() {
-        this.close({ value: this.value });
-    }
-    close(modalResult) {
-        this._onClosed.next(modalResult);
-        this._onClosed.complete();
-    }
-};
-__decorate([
-    Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])()
-], WriteCharacterModalComponent.prototype, "invalidErrorText", null);
-WriteCharacterModalComponent = __decorate([
-    Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
-        selector: 'writeCharacterModal',
-        template: "<form #writeValueForm=\"ngForm\" novalidate (ngSubmit)=\"save()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.setting}}</span> <span>{{variableName}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <input type=\"text\" name=\"characterInput\" autoFocus class=\"form-control write-character-value\" [(ngModel)]=\"value\" (keyup)=\"validate()\" *ngIf=\"!isPassword\" autocomplete=\"off\"> <input type=\"password\" name=\"passwordInput\" autoFocus class=\"form-control write-character-value\" [(ngModel)]=\"value\" (keyup)=\"validate()\" *ngIf=\"isPassword\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!validationError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\"> <button type=\"submit\" class=\"btn md-skip btn-primary btn-block\" [disabled]=\"validationError\">{{localization.submit}}</button> </div> </form> ",
-        styles: [".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 10px 0px 0px 15px; } .btn-primary { background-color: #3B97FC; border-color: #3B97FC; padding: 5px 30px; width: 90%; margin: 0 5%; height: 32px; } .write-character-value { padding-left: 8px; height: 32px; margin-left: 16px; } "]
-    }),
-    __param(0, Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Inject"])(_localization__WEBPACK_IMPORTED_MODULE_2__[/* LOCALIZATION */ "b"]))
-], WriteCharacterModalComponent);
-
-
-
-/***/ }),
-/* 39 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/* nvd3 version 1.8.6-dev (https://github.com/flexem/nvd3) 2018-08-22 */
-(function(){
-
-// set up main nv object
-var nv = {};
-
-// the major global objects under the nv namespace
-nv.dev = false; //set false when in production
-nv.tooltip = nv.tooltip || {}; // For the tooltip system
-nv.utils = nv.utils || {}; // Utility subsystem
-nv.models = nv.models || {}; //stores all the possible models/components
-nv.charts = {}; //stores all the ready to use charts
-nv.logs = {}; //stores some statistics and potential error messages
-nv.dom = {}; //DOM manipulation functions
-
-// Node/CommonJS - require D3
-if (typeof(module) !== 'undefined' && typeof(exports) !== 'undefined' && typeof(d3) == 'undefined') {
-    d3 = __webpack_require__(18);
-}
-
-nv.dispatch = d3.dispatch('render_start', 'render_end');
-
-// Function bind polyfill
-// Needed ONLY for phantomJS as it's missing until version 2.0 which is unreleased as of this comment
-// https://github.com/ariya/phantomjs/issues/10522
-// http://kangax.github.io/compat-table/es5/#Function.prototype.bind
-// phantomJS is used for running the test suite
-if (!Function.prototype.bind) {
-    Function.prototype.bind = function (oThis) {
-        if (typeof this !== "function") {
-            // closest thing possible to the ECMAScript 5 internal IsCallable function
-            throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
-        }
-
-        var aArgs = Array.prototype.slice.call(arguments, 1),
-            fToBind = this,
-            fNOP = function () {},
-            fBound = function () {
-                return fToBind.apply(this instanceof fNOP && oThis
-                        ? this
-                        : oThis,
-                    aArgs.concat(Array.prototype.slice.call(arguments)));
-            };
-
-        fNOP.prototype = this.prototype;
-        fBound.prototype = new fNOP();
-        return fBound;
-    };
-}
-
-//  Development render timers - disabled if dev = false
-if (nv.dev) {
-    nv.dispatch.on('render_start', function(e) {
-        nv.logs.startTime = +new Date();
-    });
-
-    nv.dispatch.on('render_end', function(e) {
-        nv.logs.endTime = +new Date();
-        nv.logs.totalTime = nv.logs.endTime - nv.logs.startTime;
-        nv.log('total', nv.logs.totalTime); // used for development, to keep track of graph generation times
-    });
-}
-
-// Logs all arguments, and returns the last so you can test things in place
-// Note: in IE8 console.log is an object not a function, and if modernizr is used
-// then calling Function.prototype.bind with with anything other than a function
-// causes a TypeError to be thrown.
-nv.log = function() {
-    if (nv.dev && window.console && console.log && console.log.apply)
-        console.log.apply(console, arguments);
-    else if (nv.dev && window.console && typeof console.log == "function" && Function.prototype.bind) {
-        var log = Function.prototype.bind.call(console.log, console);
-        log.apply(console, arguments);
-    }
-    return arguments[arguments.length - 1];
-};
-
-// print console warning, should be used by deprecated functions
-nv.deprecated = function(name, info) {
-    if (console && console.warn) {
-        console.warn('nvd3 warning: `' + name + '` has been deprecated. ', info || '');
-    }
-};
-
-// The nv.render function is used to queue up chart rendering
-// in non-blocking async functions.
-// When all queued charts are done rendering, nv.dispatch.render_end is invoked.
-nv.render = function render(step) {
-    // number of graphs to generate in each timeout loop
-    step = step || 1;
-
-    nv.render.active = true;
-    nv.dispatch.render_start();
-
-    var renderLoop = function() {
-        var chart, graph;
-
-        for (var i = 0; i < step && (graph = nv.render.queue[i]); i++) {
-            chart = graph.generate();
-            if (typeof graph.callback == typeof(Function)) graph.callback(chart);
-        }
-
-        nv.render.queue.splice(0, i);
-
-        if (nv.render.queue.length) {
-            setTimeout(renderLoop);
-        }
-        else {
-            nv.dispatch.render_end();
-            nv.render.active = false;
-        }
-    };
-
-    setTimeout(renderLoop);
-};
-
-nv.render.active = false;
-nv.render.queue = [];
-
-/*
-Adds a chart to the async rendering queue. This method can take arguments in two forms:
-nv.addGraph({
-    generate: <Function>
-    callback: <Function>
-})
-
-or
-
-nv.addGraph(<generate Function>, <callback Function>)
-
-The generate function should contain code that creates the NVD3 model, sets options
-on it, adds data to an SVG element, and invokes the chart model. The generate function
-should return the chart model.  See examples/lineChart.html for a usage example.
-
-The callback function is optional, and it is called when the generate function completes.
-*/
-nv.addGraph = function(obj) {
-    if (typeof arguments[0] === typeof(Function)) {
-        obj = {generate: arguments[0], callback: arguments[1]};
-    }
-
-    nv.render.queue.push(obj);
-
-    if (!nv.render.active) {
-        nv.render();
-    }
-};
-
-// Node/CommonJS exports
-if (true) {
-  module.exports = nv;
-}
-
-if (typeof(window) !== 'undefined') {
-  window.nv = nv;
-}
-/* Facade for queueing DOM write operations
- * with Fastdom (https://github.com/wilsonpage/fastdom)
- * if available.
- * This could easily be extended to support alternate
- * implementations in the future.
- */
-nv.dom.write = function(callback) {
-	if (window.fastdom !== undefined) {
-		return fastdom.mutate(callback);
-	}
-	return callback();
-};
-
-/* Facade for queueing DOM read operations
- * with Fastdom (https://github.com/wilsonpage/fastdom)
- * if available.
- * This could easily be extended to support alternate
- * implementations in the future.
- */
-nv.dom.read = function(callback) {
-	if (window.fastdom !== undefined) {
-		return fastdom.measure(callback);
-	}
-	return callback();
-};
-/* Utility class to handle creation of an interactive layer.
- This places a rectangle on top of the chart. When you mouse move over it, it sends a dispatch
- containing the X-coordinate. It can also render a vertical line where the mouse is located.
-
- dispatch.elementMousemove is the important event to latch onto.  It is fired whenever the mouse moves over
- the rectangle. The dispatch is given one object which contains the mouseX/Y location.
- It also has 'pointXValue', which is the conversion of mouseX to the x-axis scale.
- */
-nv.interactiveGuideline = function() {
-    "use strict";
-
-    var margin = { left: 0, top: 0 } //Pass the chart's top and left magins. Used to calculate the mouseX/Y.
-        ,   width = null
-        ,   height = null
-        ,   xScale = d3.scale.linear()
-        ,   dispatch = d3.dispatch('elementMousemove', 'elementMouseout', 'elementClick', 'elementDblclick', 'elementMouseDown', 'elementMouseUp')
-        ,   showGuideLine = true
-        ,   svgContainer = null // Must pass the chart's svg, we'll use its mousemove event.
-        ,   tooltip = nv.models.tooltip()
-        ,   isMSIE =  window.ActiveXObject// Checkt if IE by looking for activeX. (excludes IE11)
-    ;
-
-    tooltip
-        .duration(0)
-        .hideDelay(0)
-        .hidden(false);
-
-    function layer(selection) {
-        selection.each(function(data) {
-            var container = d3.select(this);
-            var availableWidth = (width || 960), availableHeight = (height || 400);
-            var wrap = container.selectAll("g.nv-wrap.nv-interactiveLineLayer")
-                .data([data]);
-            var wrapEnter = wrap.enter()
-                .append("g").attr("class", " nv-wrap nv-interactiveLineLayer");
-            wrapEnter.append("g").attr("class","nv-interactiveGuideLine");
-
-            if (!svgContainer) {
-                return;
-            }
-
-            function mouseHandler() {
-                var mouseX = d3.event.clientX - this.getBoundingClientRect().left;
-                var mouseY = d3.event.clientY - this.getBoundingClientRect().top;
+            function mouseHandler() {
+                var mouseX = d3.event.clientX - this.getBoundingClientRect().left;
+                var mouseY = d3.event.clientY - this.getBoundingClientRect().top;
 
                 var subtractMargin = true;
                 var mouseOutAnyReason = false;
@@ -63418,206 +62713,1003 @@ nv.models.sunburst = function() {
                     });
             }
 
-            //zoom out to the center when the data is updated.
-            zoomClick(nodes[nodes.length - 1])
+            //zoom out to the center when the data is updated.
+            zoomClick(nodes[nodes.length - 1])
+
+
+            //remove unmatched elements ...
+            cG.exit()
+                .transition()
+                .duration(duration)
+                .attr('opacity',0)
+                .each('end',function(d){
+                    var k = key(d);
+                    prevPositions[k] = undefined;
+                })
+                .remove();
+        });
+
+
+        renderWatch.renderEnd('sunburst immediate');
+        return chart;
+    }
+
+    //============================================================
+    // Expose Public Variables
+    //------------------------------------------------------------
+
+    chart.dispatch = dispatch;
+    chart.options = nv.utils.optionsFunc.bind(chart);
+
+    chart._options = Object.create({}, {
+        // simple options, just get/set the necessary values
+        width:      {get: function(){return width;}, set: function(_){width=_;}},
+        height:     {get: function(){return height;}, set: function(_){height=_;}},
+        mode:       {get: function(){return mode;}, set: function(_){mode=_;}},
+        id:         {get: function(){return id;}, set: function(_){id=_;}},
+        duration:   {get: function(){return duration;}, set: function(_){duration=_;}},
+        groupColorByParent: {get: function(){return groupColorByParent;}, set: function(_){groupColorByParent=!!_;}},
+        showLabels: {get: function(){return showLabels;}, set: function(_){showLabels=!!_}},
+        labelFormat: {get: function(){return labelFormat;}, set: function(_){labelFormat=_}},
+        labelThreshold: {get: function(){return labelThreshold;}, set: function(_){labelThreshold=_}},
+        sort: {get: function(){return sort;}, set: function(_){sort=_}},
+        key: {get: function(){return key;}, set: function(_){key=_}},
+        // options that require extra logic in the setter
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    != undefined ? _.top    : margin.top;
+            margin.right  = _.right  != undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom != undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   != undefined ? _.left   : margin.left;
+        }},
+        color: {get: function(){return color;}, set: function(_){
+            color=nv.utils.getColor(_);
+        }}
+    });
+
+    nv.utils.initOptions(chart);
+    return chart;
+};
+nv.models.sunburstChart = function() {
+    "use strict";
+
+    //============================================================
+    // Public Variables with Default Settings
+    //------------------------------------------------------------
+
+    var sunburst = nv.models.sunburst();
+    var tooltip = nv.models.tooltip();
+
+    var margin = {top: 30, right: 20, bottom: 20, left: 20}
+        , width = null
+        , height = null
+        , color = nv.utils.defaultColor()
+        , showTooltipPercent = false
+        , id = Math.round(Math.random() * 100000)
+        , defaultState = null
+        , noData = null
+        , duration = 250
+        , dispatch = d3.dispatch('stateChange', 'changeState','renderEnd');
+
+
+    //============================================================
+    // Private Variables
+    //------------------------------------------------------------
+
+    var renderWatch = nv.utils.renderWatch(dispatch);
+
+    tooltip
+        .duration(0)
+        .headerEnabled(false)
+        .valueFormatter(function(d){return d;});
+
+    //============================================================
+    // Chart function
+    //------------------------------------------------------------
+
+    function chart(selection) {
+        renderWatch.reset();
+        renderWatch.models(sunburst);
+
+        selection.each(function(data) {
+            var container = d3.select(this);
 
+            nv.utils.initSVG(container);
 
-            //remove unmatched elements ...
-            cG.exit()
-                .transition()
-                .duration(duration)
-                .attr('opacity',0)
-                .each('end',function(d){
-                    var k = key(d);
-                    prevPositions[k] = undefined;
-                })
-                .remove();
-        });
+            var availableWidth = nv.utils.availableWidth(width, container, margin);
+            var availableHeight = nv.utils.availableHeight(height, container, margin);
 
+            chart.update = function() {
+                if (duration === 0) {
+                    container.call(chart);
+                } else {
+                    container.transition().duration(duration).call(chart);
+                }
+            };
+            chart.container = container;
 
-        renderWatch.renderEnd('sunburst immediate');
+            // Display No Data message if there's nothing to show.
+            if (!data || !data.length) {
+                nv.utils.noData(chart, container);
+                return chart;
+            } else {
+                container.selectAll('.nv-noData').remove();
+            }
+
+            sunburst.width(availableWidth).height(availableHeight).margin(margin);
+            container.call(sunburst);
+        });
+
+        renderWatch.renderEnd('sunburstChart immediate');
         return chart;
     }
 
+    //============================================================
+    // Event Handling/Dispatching (out of chart's scope)
+    //------------------------------------------------------------
+
+    sunburst.dispatch.on('elementMouseover.tooltip', function(evt) {
+        evt.series = {
+            key: evt.data.name,
+            value: (evt.data.value || evt.data.size),
+            color: evt.color,
+            percent: evt.percent
+        };
+        if (!showTooltipPercent) {
+            delete evt.percent;
+            delete evt.series.percent;
+        }
+        tooltip.data(evt).hidden(false);
+    });
+
+    sunburst.dispatch.on('elementMouseout.tooltip', function(evt) {
+        tooltip.hidden(true);
+    });
+
+    sunburst.dispatch.on('elementMousemove.tooltip', function(evt) {
+        tooltip();
+    });
+
     //============================================================
     // Expose Public Variables
     //------------------------------------------------------------
 
+    // expose chart's sub-components
     chart.dispatch = dispatch;
+    chart.sunburst = sunburst;
+    chart.tooltip = tooltip;
     chart.options = nv.utils.optionsFunc.bind(chart);
 
+    // use Object get/set functionality to map between vars and chart functions
     chart._options = Object.create({}, {
         // simple options, just get/set the necessary values
-        width:      {get: function(){return width;}, set: function(_){width=_;}},
-        height:     {get: function(){return height;}, set: function(_){height=_;}},
-        mode:       {get: function(){return mode;}, set: function(_){mode=_;}},
-        id:         {get: function(){return id;}, set: function(_){id=_;}},
-        duration:   {get: function(){return duration;}, set: function(_){duration=_;}},
-        groupColorByParent: {get: function(){return groupColorByParent;}, set: function(_){groupColorByParent=!!_;}},
-        showLabels: {get: function(){return showLabels;}, set: function(_){showLabels=!!_}},
-        labelFormat: {get: function(){return labelFormat;}, set: function(_){labelFormat=_}},
-        labelThreshold: {get: function(){return labelThreshold;}, set: function(_){labelThreshold=_}},
-        sort: {get: function(){return sort;}, set: function(_){sort=_}},
-        key: {get: function(){return key;}, set: function(_){key=_}},
+        noData:             {get: function(){return noData;},               set: function(_){noData=_;}},
+        defaultState:       {get: function(){return defaultState;},         set: function(_){defaultState=_;}},
+        showTooltipPercent: {get: function(){return showTooltipPercent;},   set: function(_){showTooltipPercent=_;}},
+
         // options that require extra logic in the setter
-        margin: {get: function(){return margin;}, set: function(_){
-            margin.top    = _.top    != undefined ? _.top    : margin.top;
-            margin.right  = _.right  != undefined ? _.right  : margin.right;
-            margin.bottom = _.bottom != undefined ? _.bottom : margin.bottom;
-            margin.left   = _.left   != undefined ? _.left   : margin.left;
-        }},
         color: {get: function(){return color;}, set: function(_){
-            color=nv.utils.getColor(_);
+            color = _;
+            sunburst.color(color);
+        }},
+        duration: {get: function(){return duration;}, set: function(_){
+            duration = _;
+            renderWatch.reset(duration);
+            sunburst.duration(duration);
+        }},
+        margin: {get: function(){return margin;}, set: function(_){
+            margin.top    = _.top    !== undefined ? _.top    : margin.top;
+            margin.right  = _.right  !== undefined ? _.right  : margin.right;
+            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
+            margin.left   = _.left   !== undefined ? _.left   : margin.left;
+            sunburst.margin(margin);
         }}
     });
-
+    nv.utils.inheritOptions(chart, sunburst);
     nv.utils.initOptions(chart);
     return chart;
+
+};
+
+nv.version = "1.8.6-dev";
+})();
+//# sourceMappingURL=nv.d3.js.map
+
+/***/ }),
+/* 36 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return hostReportError; });
+/** PURE_IMPORTS_START  PURE_IMPORTS_END */
+function hostReportError(err) {
+    setTimeout(function () { throw err; }, 0);
+}
+//# sourceMappingURL=hostReportError.js.map
+
+
+/***/ }),
+/* 37 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+
+// EXTERNAL MODULE: external "@angular/core"
+var core_ = __webpack_require__(0);
+
+// EXTERNAL MODULE: ./node_modules/lodash/lodash.js
+var lodash = __webpack_require__(2);
+
+// EXTERNAL MODULE: ./.tmp/localization/index.ts + 1 modules
+var _tmp_localization = __webpack_require__(9);
+
+// EXTERNAL MODULE: ./.tmp/settings/index.ts + 2 modules
+var settings = __webpack_require__(16);
+
+// EXTERNAL MODULE: ./.tmp/logger/index.ts + 2 modules
+var logger = __webpack_require__(7);
+
+// EXTERNAL MODULE: ./.tmp/shared/index.ts + 3 modules
+var shared = __webpack_require__(5);
+
+// EXTERNAL MODULE: ./.tmp/view/view.service.ts
+var view_service = __webpack_require__(27);
+
+// EXTERNAL MODULE: ./.tmp/gui/gui-view.ts + 126 modules
+var gui_view = __webpack_require__(32);
+
+// EXTERNAL MODULE: external "rxjs/operators"
+var operators_ = __webpack_require__(17);
+
+// CONCATENATED MODULE: ./.tmp/gui/gui-host.ts
+
+
+
+
+
+class gui_host_GuiHost {
+    constructor(injector, bsModalService, context, guiOptions, el) {
+        this.injector = injector;
+        this.bsModalService = bsModalService;
+        this.context = context;
+        this.guiOptions = guiOptions;
+        this.el = el;
+        this.logger = injector.get(logger["b" /* LOGGER_SERVICE_TOKEN */]);
+        const toggleViewFunc = (viewIndex, parentContainerId, baseEl) => {
+            this.currentViewIndex = viewIndex;
+            return this.context.configStore.viewStore.getViewConfig(viewIndex).pipe(Object(operators_["map"])(config => {
+                if (this.currentViewIndex !== viewIndex) {
+                    return;
+                }
+                if (!config || !config.config || !config.config.length) {
+                    throw new shared["a" /* ConfigIsEmptyError */]();
+                }
+                if (this.currentView) {
+                    this.currentView.dispose();
+                }
+                this.currentView = new gui_view["a" /* GuiView */](this.injector, this.bsModalService, this.context);
+                const hostGuiOptions = {
+                    svgRootClass: this.guiOptions.svgRootClass,
+                    hostContainerId: parentContainerId,
+                    el: baseEl
+                };
+                this.currentView.load(config, hostGuiOptions);
+                this.currentView.resize(this.currentViewSize, this.currentViewReiszeMode, this.guiOptions.svgRootClass);
+                this.containerEl = $(baseEl.nativeElement).find(`div#${parentContainerId}`).first();
+                this.containerEl.empty();
+                this.containerEl.append(this.currentView.element);
+                this.logger.debug(`[GUI] Toggle View(${viewIndex}) successed.`);
+            }));
+        };
+        injector.get(view_service["a" /* ViewService */]).toggleViews.set(el, toggleViewFunc);
+    }
+    get element() {
+        if (this.containerEl) {
+            return this.containerEl[0];
+        }
+        else {
+            throw new Error('Gui Host not loaded yet.');
+        }
+    }
+    /**
+     * Load gui host and main view.
+     */
+    load(configureViewId) {
+        if (this.isLoaded) {
+            throw new Error('The GuiHost already loaded.');
+        }
+        this.isLoaded = true;
+        this.containerEl = $(`<div class="svg-content" id= "${this.guiOptions.hostContainerId}" style="display:flex;position:relative;"></div>`);
+        const result = new Promise((resolve, reject) => {
+            if (configureViewId && configureViewId !== 0) {
+                this.loadViewConfigByConfigureViewId(resolve, reject, configureViewId);
+            }
+            else {
+                this.loadMainViewConfig(resolve, reject);
+            }
+        });
+        return result;
+    }
+    loadByConfigureViewCode(configureViewCode) {
+        if (this.isLoaded) {
+            throw new Error('The GuiHost already loaded.');
+        }
+        this.isLoaded = true;
+        this.containerEl = $(`<div class="svg-content" id= "${this.guiOptions.hostContainerId}" style="display: inline-block;position: relative;"></div>`);
+        const result = new Promise((resolve, reject) => {
+            if (configureViewCode) {
+                this.loadViewConfigByConfigureViewCode(resolve, reject, configureViewCode);
+            }
+            else {
+                this.loadMainViewConfig(resolve, reject);
+            }
+        });
+        return result;
+    }
+    loadMainViewConfig(resolve, reject) {
+        this.context.configStore.viewStore.getMainViewConfig().subscribe(config => {
+            if (config.config && config.config.length) {
+                this.currentView = new gui_view["a" /* GuiView */](this.injector, this.bsModalService, this.context);
+                this.currentView.load(config, this.guiOptions);
+                this.containerEl.empty();
+                this.containerEl.append(this.currentView.element);
+                resolve(this);
+                this.logger.debug('[GUI] Host loaded.');
+            }
+            else {
+                reject(new shared["a" /* ConfigIsEmptyError */]());
+            }
+        }, error => {
+            this.logger.error('[GUI] Load failed: ' + error.stack);
+            reject(error);
+        });
+    }
+    loadViewConfigByConfigureViewId(resolve, reject, configureViewId) {
+        this.context.configStore.viewStore.getViewConfigByConfigureViewId(configureViewId).subscribe(config => {
+            this.handleViewConfigCallback(resolve, reject, config);
+        }, error => {
+            this.logger.error('[GUI] Load failed: ' + error.stack);
+            reject(error);
+        });
+    }
+    loadViewConfigByConfigureViewCode(resolve, reject, configureViewCode) {
+        this.context.configStore.viewStore.getViewConfigByConfigureViewCode(configureViewCode).subscribe(config => {
+            this.handleViewConfigCallback(resolve, reject, config);
+        }, error => {
+            this.logger.error('[GUI] Load failed: ' + error.stack);
+            reject(error);
+        });
+    }
+    handleViewConfigCallback(resolve, reject, config) {
+        if (!config.config || !config.config.length) {
+            reject(new shared["a" /* ConfigIsEmptyError */]());
+        }
+        this.currentView = new gui_view["a" /* GuiView */](this.injector, this.bsModalService, this.context);
+        this.currentView.load(config, this.guiOptions);
+        this.containerEl.empty();
+        this.containerEl.append(this.currentView.element);
+        resolve(this);
+        this.logger.debug('[GUI] Host loaded.');
+    }
+    /**
+     * Resize current view
+     * @param size : target view size
+     * @param resizeMode : target resize mode
+     */
+    resizeView(size, resizeMode) {
+        if (this.currentView) {
+            this.currentView.resize(size, resizeMode, this.guiOptions.svgRootClass);
+            this.currentViewSize = size;
+            this.currentViewReiszeMode = resizeMode;
+        }
+    }
+    /**
+     * Update current view size;
+     * @param size : target view size
+     */
+    updateViewSize(size) {
+        if (!this.currentView) {
+            return;
+        }
+        this.currentView.resize(size, this.currentViewReiszeMode, this.guiOptions.svgRootClass);
+        this.currentViewSize = size;
+    }
+    /**
+     * Resize current view
+     * @param size : target view size
+     * @param resizeMode : target resize mode
+     */
+    updateViewResizeMode(resizeMode) {
+        if (this.currentView) {
+            this.currentView.resize(this.currentViewSize, resizeMode, this.guiOptions.svgRootClass);
+            this.currentViewReiszeMode = resizeMode;
+        }
+    }
+    dispose() {
+        if (this.currentView) {
+            this.currentView.dispose();
+        }
+        if (this.context) {
+            this.context.dispose();
+        }
+        this.logger.debug('[GUI] GuiHost disposed.');
+    }
+}
+
+// EXTERNAL MODULE: ./.tmp/utils/guid.ts
+var guid = __webpack_require__(28);
+
+// CONCATENATED MODULE: ./.tmp/gui/gui.component.ts
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return gui_component_GuiComponent; });
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __param = (undefined && undefined.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+
+
+
+
+
+
+
+let gui_component_GuiComponent = class GuiComponent {
+    constructor(el, localization, injector, bsModalService) {
+        this.el = el;
+        this.localization = localization;
+        this.injector = injector;
+        this.bsModalService = bsModalService;
+        this.loadFailed = new core_["EventEmitter"]();
+        this.loaded = new core_["EventEmitter"]();
+        this.lastScale = 1;
+        this.isMobileMode = false;
+        this.globalSettings = this.injector.get(settings["b" /* GlobalSettings */]);
+        this.viewService = injector.get(view_service["a" /* ViewService */]);
+    }
+    get viewResizeMode() {
+        switch (this.resizeMode) {
+            case 'HorizontalUniform':
+                return settings["c" /* ViewResizeMode */].HorizontalUniform;
+            default:
+                return settings["c" /* ViewResizeMode */].Uniform;
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.displayMode) {
+            this.onDisplayModeChanged(changes.displayMode.previousValue, changes.displayMode.currentValue);
+        }
+        if (changes.context) {
+            this.onProviderChanged(changes.context.previousValue, changes.context.currentValue);
+        }
+        if (changes.size) {
+            this.onSizeChanged(changes.size.previousValue, changes.size.currentValue);
+        }
+        if (changes.resizeMode) {
+            this.onResizeModeChanged(changes.resizeMode.previousValue, changes.resizeMode.currentValue);
+        }
+    }
+    doubleFingerZooming() {
+        const scaleElement = this.$svg.find('div.svg-content').first()[0];
+        const self = this;
+        self.initWidth = scaleElement.offsetWidth;
+        self.initHeight = scaleElement.offsetHeight;
+        self.lastScale = 1;
+        scaleElement.addEventListener('touchstart', function (e) {
+            self.pageX = e.targetTouches[0].pageX;
+            self.pageY = e.targetTouches[0].pageY;
+            self.initX = !Object(lodash["isNaN"])(parseInt(scaleElement.style.left, 10)) ? parseInt(scaleElement.style.left, 10) : 0;
+            self.initY = !Object(lodash["isNaN"])(parseInt(scaleElement.style.top, 10)) ? parseInt(scaleElement.style.top, 10) : 0;
+            if (e.touches.length >= 2) {
+                self.startTouch = e.touches;
+            }
+            self.isTouch = true;
+        }, false);
+        scaleElement.addEventListener('touchmove', function (e) {
+            if (e.touches.length === 1 && self.isTouch && self.lastScale > 1) {
+                e.preventDefault();
+                const touchMoveX = e.targetTouches[0].pageX, touchMoveY = e.targetTouches[0].pageY;
+                const left = Number(touchMoveX) - Number(self.pageX) + Number(self.initX);
+                const top = Number(touchMoveY) - Number(self.pageY) + Number(self.initY);
+                if (left > -(self.lastScale - 1) * self.initWidth / 2 && left < (self.lastScale - 1) * self.initWidth / 2) {
+                    scaleElement.style.left = left + 'px';
+                }
+                if (top > -(self.lastScale - 1) * self.initHeight / 2 && top < (self.lastScale - 1) * self.initHeight / 2) {
+                    scaleElement.style.top = top + 'px';
+                }
+            }
+            if (e.touches.length >= 2 && self.isTouch) {
+                e.preventDefault();
+                const now = e.touches;
+                const scale = (self.getDistance(now[0], now[1]) / self.getDistance(self.startTouch[0], self.startTouch[1]));
+                let nowScale = self.lastScale;
+                if (scale >= 1) {
+                    nowScale *= 1.008;
+                }
+                if (nowScale < 1) {
+                    nowScale = 1;
+                }
+                if (nowScale > 5) {
+                    nowScale = 5;
+                }
+                if (scale < 1) {
+                    nowScale *= 0.992;
+                    scaleElement.style.left = -(nowScale - 1) * self.initWidth / 8 + 'px';
+                    scaleElement.style.top = -(nowScale - 1) * self.initHeight / 8 + 'px';
+                }
+                scaleElement.style.transform = 'scale(' + nowScale + ')';
+                self.lastScale = nowScale;
+            }
+        }, false);
+        scaleElement.addEventListener('touchend', function () {
+            if (self.isTouch) {
+                self.isTouch = false;
+            }
+        }, false);
+    }
+    getDistance(p1, p2) {
+        const x = p2.pageX - p1.pageX, y = p2.pageY - p1.pageY;
+        return Math.sqrt((x * x) + (y * y));
+    }
+    ngOnDestroy() {
+        if (this.host) {
+            this.host.dispose();
+        }
+    }
+    onProviderChanged(oldValue, newValue) {
+        if (Object(lodash["isEqual"])(oldValue, newValue)) {
+            return;
+        }
+        if (this.host) {
+            this.host.dispose();
+            this.host = null;
+        }
+        if (newValue) {
+            this.$svg = $(this.el.nativeElement).find('div.svgView').first();
+            this.$svg.empty();
+            const svgRootClass = 'S' + guid["a" /* Guid */].newGuid().toString('n');
+            this.hostContainerId = 'H' + guid["a" /* Guid */].newGuid().toString('n');
+            this.$svg.addClass(svgRootClass);
+            const guiOptions = {
+                svgRootClass: svgRootClass,
+                hostContainerId: this.hostContainerId,
+                el: this.el
+            };
+            const host = new gui_host_GuiHost(this.injector, this.bsModalService, newValue, guiOptions, this.el);
+            /*
+             * if configureViewCode exist then load by configureViewCode else load by configureViewId
+             */
+            (this.context.configureViewCode ? host.loadByConfigureViewCode(this.context.configureViewCode) :
+                host.load(this.context.configureViewId)).then(t => {
+                // 加载结束后，如果context发生了变化，直接返回。
+                if (!Object(lodash["isEqual"])(this.context, t.context)) {
+                    t.dispose();
+                    return;
+                }
+                this.host = host;
+                this.host.resizeView(this.size, this.viewResizeMode);
+                this.$svg.append(t.element);
+                if (this.isMobileMode) {
+                    this.doubleFingerZooming();
+                }
+                this.loaded.emit();
+            }).catch(error => {
+                this.$svg.append(`<p>${this.localization.loadFailed}</p>`);
+                this.loadFailed.emit(error);
+            });
+        }
+        else {
+            if (this.$svg) {
+                this.$svg.empty();
+            }
+            this.host = null;
+        }
+    }
+    onSizeChanged(oldValue, newValue) {
+        if (!this.host || Object(lodash["isEqual"])(oldValue, newValue)) {
+            return;
+        }
+        this.host.updateViewSize(newValue);
+        if (this.isMobileMode) {
+            this.doubleFingerZooming();
+        }
+    }
+    onResizeModeChanged(oldValue, newValue) {
+        if (!this.host || Object(lodash["isEqual"])(oldValue, newValue)) {
+            return;
+        }
+        this.host.updateViewResizeMode(this.viewResizeMode);
+    }
+    onDisplayModeChanged(oldValue, newValue) {
+        if (Object(lodash["isEqual"])(oldValue, newValue)) {
+            return;
+        }
+        this.isMobileMode = this.displayMode === 'Mobile';
+        this.globalSettings.displayMode = this.isMobileMode ? settings["a" /* DisplayMode */].Mobile : settings["a" /* DisplayMode */].Web;
+    }
+    refreshCurrentPage() {
+        if (this.host.currentViewIndex === undefined) {
+            return false;
+        }
+        const toggleView = this.viewService.toggleViews.get(this.el);
+        if (!toggleView) {
+            return false;
+        }
+        toggleView(this.host.currentViewIndex, this.hostContainerId, this.el).subscribe();
+        return true;
+    }
 };
-nv.models.sunburstChart = function() {
-    "use strict";
-
-    //============================================================
-    // Public Variables with Default Settings
-    //------------------------------------------------------------
-
-    var sunburst = nv.models.sunburst();
-    var tooltip = nv.models.tooltip();
-
-    var margin = {top: 30, right: 20, bottom: 20, left: 20}
-        , width = null
-        , height = null
-        , color = nv.utils.defaultColor()
-        , showTooltipPercent = false
-        , id = Math.round(Math.random() * 100000)
-        , defaultState = null
-        , noData = null
-        , duration = 250
-        , dispatch = d3.dispatch('stateChange', 'changeState','renderEnd');
-
-
-    //============================================================
-    // Private Variables
-    //------------------------------------------------------------
-
-    var renderWatch = nv.utils.renderWatch(dispatch);
-
-    tooltip
-        .duration(0)
-        .headerEnabled(false)
-        .valueFormatter(function(d){return d;});
-
-    //============================================================
-    // Chart function
-    //------------------------------------------------------------
-
-    function chart(selection) {
-        renderWatch.reset();
-        renderWatch.models(sunburst);
-
-        selection.each(function(data) {
-            var container = d3.select(this);
+__decorate([
+    Object(core_["Input"])()
+], gui_component_GuiComponent.prototype, "context", void 0);
+__decorate([
+    Object(core_["Input"])()
+], gui_component_GuiComponent.prototype, "size", void 0);
+__decorate([
+    Object(core_["Input"])()
+], gui_component_GuiComponent.prototype, "resizeMode", void 0);
+__decorate([
+    Object(core_["Input"])()
+], gui_component_GuiComponent.prototype, "displayMode", void 0);
+__decorate([
+    Object(core_["Output"])()
+], gui_component_GuiComponent.prototype, "loadFailed", void 0);
+__decorate([
+    Object(core_["Output"])()
+], gui_component_GuiComponent.prototype, "loaded", void 0);
+gui_component_GuiComponent = __decorate([
+    Object(core_["Component"])({
+        selector: 'fc-gui',
+        template: "<div> <div class='svgView' style=\"position: relative;display: flex;justify-content: center;align-items: center;\"></div> </div> "
+    }),
+    __param(1, Object(core_["Inject"])(_tmp_localization["b" /* LOCALIZATION */]))
+], gui_component_GuiComponent);
 
-            nv.utils.initSVG(container);
+
+
+/***/ }),
+/* 38 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return WriteValueModalComponent; });
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _localization__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
+/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
+/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_2__);
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __param = (undefined && undefined.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
 
-            var availableWidth = nv.utils.availableWidth(width, container, margin);
-            var availableHeight = nv.utils.availableHeight(height, container, margin);
 
-            chart.update = function() {
-                if (duration === 0) {
-                    container.call(chart);
-                } else {
-                    container.transition().duration(duration).call(chart);
-                }
-            };
-            chart.container = container;
 
-            // Display No Data message if there's nothing to show.
-            if (!data || !data.length) {
-                nv.utils.noData(chart, container);
-                return chart;
-            } else {
-                container.selectAll('.nv-noData').remove();
+let WriteValueModalComponent = class WriteValueModalComponent {
+    constructor(localization, dataTypeService, fractionDigitService, numericalOperationService, bsModalRef) {
+        this.localization = localization;
+        this.dataTypeService = dataTypeService;
+        this.fractionDigitService = fractionDigitService;
+        this.numericalOperationService = numericalOperationService;
+        this.bsModalRef = bsModalRef;
+        this.writeValueRangeText = '';
+        this.isSubmitting = false;
+    }
+    get invalidErrorText() {
+        return this.localization.loadFailed;
+    }
+    ngOnInit() {
+        this.initData(this.args);
+        this.validate();
+    }
+    initData(option) {
+        this.variableName = option.variableName;
+        this.dataType = option.dataType;
+        this.fBoxDataType = option.fBoxDataType;
+        this.integerDigits = option.integerDigits ? option.integerDigits : 0;
+        this.fractionDigits = option.fractionDigits ? option.fractionDigits : 0;
+        this.valueType = this.dataTypeService.getValueType(option.version, option.dataType);
+        this.pattern = this.dataTypeService.getValuePattern(option.version, option.dataType);
+        this.numericalOperation = option.numericalOperation;
+        this.enableNumericalOperation = this.numericalOperation.enableNumericalOperation ?
+            this.numericalOperation.enableNumericalOperation : false;
+        this.value = '';
+        if (this.args.enableDataParsed) {
+            this.setValueRangeAccordToDataParsed(option);
+        }
+        else {
+            this.writeMaxValue = this.dataTypeService.getMaxValue(option.version, this.dataType, this.fBoxDataType);
+            this.writeMinValue = this.dataTypeService.getMinValue(option.version, this.dataType, this.fBoxDataType);
+        }
+        this.writeValueRangeText = this.getWriteValueRangeText();
+    }
+    setValueRangeAccordToDataParsed(option) {
+        if (this.dataTypeService.isFloat(option.version, this.dataType) || this.enableNumericalOperation) {
+            this.maxValueLimit = this.dataTypeService.getMaxValue(option.version, this.dataType, this.fBoxDataType);
+            this.minValueLimit = this.dataTypeService.getMinValue(option.version, this.dataType, this.fBoxDataType);
+            this.numericalLowerLimit = this.numericalOperation.numericalLowerLimit;
+            this.numericalUpperLimit = this.numericalOperation.numericalUpperLimit;
+        }
+        else {
+            this.maxValueLimit = +this.fractionDigitService.movePoint(this.dataTypeService.getMaxValue(option.version, this.dataType, this.fBoxDataType), -this.fractionDigits);
+            this.minValueLimit = +this.fractionDigitService.movePoint(this.dataTypeService.getMinValue(option.version, this.dataType, this.fBoxDataType), -this.fractionDigits);
+            this.numericalLowerLimit = +this.fractionDigitService.movePoint(this.numericalOperation.numericalLowerLimit, -this.fractionDigits);
+            this.numericalUpperLimit = +this.fractionDigitService.movePoint(this.numericalOperation.numericalUpperLimit, -this.fractionDigits);
+        }
+        const minValue = this.numericalOperationService.getWriteMinValue(this.minValueLimit, this.numericalOperation);
+        const maxValue = this.numericalOperationService.getWriteMaxValue(this.maxValueLimit, this.numericalOperation);
+        const lowerLimitValue = this.numericalOperationService.getWriteMinValue(this.numericalLowerLimit, this.numericalOperation);
+        const upperLimitValue = this.numericalOperationService.getWriteMaxValue(this.numericalUpperLimit, this.numericalOperation);
+        const realMinValue = minValue < maxValue ? minValue : maxValue;
+        const realMaxValue = minValue < maxValue ? maxValue : minValue;
+        const realLowerLimitValue = lowerLimitValue < upperLimitValue ? lowerLimitValue : upperLimitValue;
+        const realUpperLimitValue = lowerLimitValue < upperLimitValue ? upperLimitValue : lowerLimitValue;
+        this.writeMinValue = realMinValue > realLowerLimitValue ? realMinValue : realLowerLimitValue;
+        this.writeMaxValue = realMaxValue < realUpperLimitValue ? realMaxValue : realUpperLimitValue;
+    }
+    getWriteValueRangeText() {
+        let minValue = '';
+        let maxValue = '';
+        if (this.dataTypeService.isHexOrBinaryType(this.args.version, this.dataType)) {
+            minValue = this.writeMinValue.toString(16);
+            maxValue = this.writeMaxValue.toString(16);
+        }
+        else {
+            if (this.args.enableDataParsed && this.fractionDigits > 0) {
+                minValue = this.writeMinValue.toFixed(this.fractionDigits).toString();
+                maxValue = this.writeMaxValue.toFixed(this.fractionDigits).toString();
             }
-
-            sunburst.width(availableWidth).height(availableHeight).margin(margin);
-            container.call(sunburst);
+            else {
+                minValue = this.writeMinValue.toString();
+                maxValue = this.writeMaxValue.toString();
+            }
+        }
+        return minValue + '~' + maxValue;
+    }
+    save() {
+        this.isSubmitting = true;
+        let value = this.value;
+        const showValue = this.value;
+        if (this.args.enableDataParsed) {
+            if (this.enableNumericalOperation) {
+                value = this.numericalOperationService.getWriteValue(this.args.version, this.value, this.numericalOperation, this.dataType, this.fractionDigits);
+            }
+            else {
+                value = this.formatWriteValue();
+            }
+        }
+        // 处理系统变量"当前语种ID"
+        if (this.variableName === '当前语种ID') {
+            this.handleCurrentLanguageIdSave(value);
+            return;
+        }
+        if (!this.args.releasedVariableService) {
+            this.onClosed({
+                value: value,
+                showValue: showValue,
+                enableNumericalOperation: false,
+                isNumericalOperation: this.isNumericalOperation,
+                variableRwType: 6
+            });
+            return;
+        }
+        this.args.releasedVariableService.getVariableWithValueTransform(this.variableName).subscribe(result => {
+            const valueTransform = JSON.parse(result.valueTransform);
+            if ((valueTransform === null || valueTransform === void 0 ? void 0 : valueTransform.Type) !== 0) {
+                this.isNumericalOperation = true;
+            }
+            this.onClosed({
+                value: value,
+                showValue: showValue,
+                enableNumericalOperation: this.enableNumericalOperation,
+                isNumericalOperation: this.isNumericalOperation,
+                variableRwType: result.variableRwType
+            });
         });
-
-        renderWatch.renderEnd('sunburstChart immediate');
-        return chart;
     }
-
-    //============================================================
-    // Event Handling/Dispatching (out of chart's scope)
-    //------------------------------------------------------------
-
-    sunburst.dispatch.on('elementMouseover.tooltip', function(evt) {
-        evt.series = {
-            key: evt.data.name,
-            value: (evt.data.value || evt.data.size),
-            color: evt.color,
-            percent: evt.percent
-        };
-        if (!showTooltipPercent) {
-            delete evt.percent;
-            delete evt.series.percent;
+    /**
+     * 处理"当前语种ID"系统变量的保存
+     */
+    handleCurrentLanguageIdSave(value) {
+        if (!this.args.guiContext || !this.args.guiContext.updateCurrentLanguageId) {
+            this.showValidationErrorInfo(this.localization.loadFailed);
+            this.isSubmitting = false;
+            return;
         }
-        tooltip.data(evt).hidden(false);
-    });
-
-    sunburst.dispatch.on('elementMouseout.tooltip', function(evt) {
-        tooltip.hidden(true);
-    });
-
-    sunburst.dispatch.on('elementMousemove.tooltip', function(evt) {
-        tooltip();
-    });
-
-    //============================================================
-    // Expose Public Variables
-    //------------------------------------------------------------
+        // 转换为数字类型
+        const languageId = value === '' || value == null ? null : Number(value);
+        // 调用 GuiContext 的语种切换方法
+        this.args.guiContext.updateCurrentLanguageId(languageId).then(() => {
+            // 语种切换成功，调用 onClosed 回调，让数字显示元件也能更新
+            this.onClosed({
+                value: value,
+                showValue: value,
+                enableNumericalOperation: false,
+                isNumericalOperation: false,
+                variableRwType: 6
+            });
+        }).catch(() => {
+            this.showValidationErrorInfo(this.localization.loadFailed);
+            this.isSubmitting = false;
+        });
+    }
+    close() {
+        this.bsModalRef.hide();
+    }
+    validate(event = null) {
+        if (event && event.keyCode === 13 && !this.validationError) {
+            this.save();
+            return;
+        }
+        // 校验数值必填
+        if (null == this.value || '' === this.value.trim()) {
+            return this.showValidationErrorInfo(this.localization.numericalValueRequired);
+        }
+        // 校验格式
+        if (!new RegExp(this.pattern).test(this.value)) {
+            return this.showValidationErrorInfo(this.localization.invalidNumericalValue);
+        }
+        // 校验小数点位数
+        if (!this.enableNumericalOperation && this.dataTypeService.isSupportFractionDigit(this.args.version, this.dataType)
+            && this.getFractionDigits(this.value) > this.fractionDigits) {
+            return this.showValidationErrorInfo(`${this.localization.fractionDigitsMustLessThan}${this.fractionDigits}`);
+        }
+        // 校验负号
+        if (Object(lodash__WEBPACK_IMPORTED_MODULE_2__["isNil"])(this.args.version) || (!Object(lodash__WEBPACK_IMPORTED_MODULE_2__["isNil"])(this.args.version) && this.args.version < 5)) {
+            if (!this.enableNumericalOperation && !this.dataTypeService.isSignedType(this.args.version, this.dataType) && this.value.startsWith('-')) {
+                return this.showValidationErrorInfo(this.localization.canNotBeNegative);
+            }
+        }
+        if (this.dataTypeService.isBinaryType(this.args.version, this.dataType) || this.dataTypeService.isHexType(this.args.version, this.dataType)) {
+            // 校验数值最大长度
+            const valueMaxLength = this.dataTypeService.getValueMaxLength(this.args.version, this.dataType, this.fBoxDataType);
+            const maxLength = this.integerDigits ? Math.min(this.integerDigits, valueMaxLength) : valueMaxLength;
+            if (this.value.length > maxLength) {
+                return this.showValidationErrorInfo(this.localization.numericalValueTooLong);
+            }
+        }
+        let transportValue;
+        if (this.dataTypeService.isHexOrBinaryType(this.args.version, this.dataType)) {
+            transportValue = this.dataTypeService.formatToDecimal(this.args.version, this.value, this.dataType);
+        }
+        else {
+            transportValue = Number(this.value);
+        }
+        if (Number(transportValue) > this.writeMaxValue || Number(transportValue) < this.writeMinValue) {
+            return this.showValidationErrorInfo(this.localization.valueOutOfRange);
+        }
+        // 没有错误则隐藏错误框
+        this.hideValidationErrorInfo();
+    }
+    showValidationErrorInfo(errorText) {
+        this.validationError = true;
+        this.validationErrorText = errorText;
+    }
+    hideValidationErrorInfo() {
+        this.validationError = false;
+        this.validationErrorText = '';
+    }
+    getFractionDigits(number) {
+        if (number && number.indexOf('.') > 0) {
+            return number.split('.')[1].length;
+        }
+        return 0;
+    }
+    /**
+     * 格式化写入的值
+     * 因为有小数点的数值类型，会被按照小数点位数移位，所以需要在修改前右移小数点位数
+     */
+    formatWriteValue() {
+        if (this.dataTypeService.isSupportFractionDigit(this.args.version, this.dataType) &&
+            !this.dataTypeService.isFloat(this.args.version, this.dataType) && this.fractionDigits) {
+            return this.fractionDigitService.movePoint(this.value, this.fractionDigits);
+        }
+        if (this.dataTypeService.isSupportNumericalOperation(this.args.version, this.dataType)) {
+            this.value = Number(this.value).toString();
+        }
+        return this.value;
+    }
+};
+__decorate([
+    Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])()
+], WriteValueModalComponent.prototype, "invalidErrorText", null);
+WriteValueModalComponent = __decorate([
+    Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
+        selector: 'writeValueModal',
+        template: "<form #writeValueForm=\"ngForm\" novalidate (ngSubmit)=\"save()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.setting}}</span> <span>{{variableName}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <span class=\"write-value-range\">{{localization.writeValueRange}}：</span> <div class=\"write-value-range\"> {{writeValueRangeText}} <span *ngIf=\"valueType\">({{valueType}})</span> </div> <input type=\"text\" name=\"valueInput\" autoFocus class=\"form-control write-value\" [(ngModel)]=\"value\" (keyup)=\"validate($event)\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!validationError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\"> <button type=\"submit\" class=\"btn md-skip btn-primary btn-block\" [disabled]=\"validationError || isSubmitting\"> <ng-container *ngIf=\"!isSubmitting\">{{localization.submit}}</ng-container> <ng-container *ngIf=\"isSubmitting\">{{localization.submitting}}</ng-container> </button> </div> </form> ",
+        styles: [".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; padding-top: 10px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 5px 0px 0px 15px; } .btn-primary { background-color: #3B97FC; border-color: #3B97FC; padding: 5px 30px; width: 90%; margin: 0 5%; height: 32px; } .write-value-range { color: #7f939e; font-size: 14px; margin-left: 15px; } .write-value { padding-left: 8px; margin-left: 16px; height: 32px; } "]
+    }),
+    __param(0, Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Inject"])(_localization__WEBPACK_IMPORTED_MODULE_1__[/* LOCALIZATION */ "b"]))
+], WriteValueModalComponent);
 
-    // expose chart's sub-components
-    chart.dispatch = dispatch;
-    chart.sunburst = sunburst;
-    chart.tooltip = tooltip;
-    chart.options = nv.utils.optionsFunc.bind(chart);
+
+
+/***/ }),
+/* 39 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return WriteCharacterModalComponent; });
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(40);
+/* harmony import */ var _localization__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __param = (undefined && undefined.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
 
-    // use Object get/set functionality to map between vars and chart functions
-    chart._options = Object.create({}, {
-        // simple options, just get/set the necessary values
-        noData:             {get: function(){return noData;},               set: function(_){noData=_;}},
-        defaultState:       {get: function(){return defaultState;},         set: function(_){defaultState=_;}},
-        showTooltipPercent: {get: function(){return showTooltipPercent;},   set: function(_){showTooltipPercent=_;}},
 
-        // options that require extra logic in the setter
-        color: {get: function(){return color;}, set: function(_){
-            color = _;
-            sunburst.color(color);
-        }},
-        duration: {get: function(){return duration;}, set: function(_){
-            duration = _;
-            renderWatch.reset(duration);
-            sunburst.duration(duration);
-        }},
-        margin: {get: function(){return margin;}, set: function(_){
-            margin.top    = _.top    !== undefined ? _.top    : margin.top;
-            margin.right  = _.right  !== undefined ? _.right  : margin.right;
-            margin.bottom = _.bottom !== undefined ? _.bottom : margin.bottom;
-            margin.left   = _.left   !== undefined ? _.left   : margin.left;
-            sunburst.margin(margin);
-        }}
-    });
-    nv.utils.inheritOptions(chart, sunburst);
-    nv.utils.initOptions(chart);
-    return chart;
 
+let WriteCharacterModalComponent = class WriteCharacterModalComponent {
+    constructor(localization) {
+        this.localization = localization;
+        this._onClosed = new rxjs__WEBPACK_IMPORTED_MODULE_1__[/* Subject */ "a"]();
+    }
+    get onClosed() {
+        return this._onClosed;
+    }
+    get invalidErrorText() {
+        return this.localization.loadFailed;
+    }
+    ngOnInit() {
+        this.variableName = this.args.variableName;
+        this.isPassword = this.args.isPassword ? this.args.isPassword : false;
+        this.charCount = this.args.charCount;
+        this.value = '';
+        this.validate();
+    }
+    validate() {
+        // 校验数值必填
+        if (null == this.value || '' === this.value.trim()) {
+            return this.showValidationErrorInfo(this.localization.characterInputRequired);
+        }
+        if (this.value.length > this.charCount) {
+            return this.showValidationErrorInfo(this.localization.characterOutofRange);
+        }
+        this.hideValidationErrorInfo();
+    }
+    showValidationErrorInfo(errorText) {
+        this.validationError = true;
+        this.validationErrorText = errorText;
+    }
+    hideValidationErrorInfo() {
+        this.validationError = false;
+        this.validationErrorText = '';
+    }
+    save() {
+        this.close({ value: this.value });
+    }
+    close(modalResult) {
+        this._onClosed.next(modalResult);
+        this._onClosed.complete();
+    }
 };
+__decorate([
+    Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])()
+], WriteCharacterModalComponent.prototype, "invalidErrorText", null);
+WriteCharacterModalComponent = __decorate([
+    Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
+        selector: 'writeCharacterModal',
+        template: "<form #writeValueForm=\"ngForm\" novalidate (ngSubmit)=\"save()\" bs-modal-drag> <div class=\"modal-header\"> <h4 class=\"modal-title\"> <span>{{localization.setting}}</span> <span>{{variableName}}</span> </h4> <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"close()\"> <span aria-hidden=\"true\">&times;</span> </button> </div> <div class=\"modal-body\"> <input type=\"text\" name=\"characterInput\" autoFocus class=\"form-control write-character-value\" [(ngModel)]=\"value\" (keyup)=\"validate()\" *ngIf=\"!isPassword\" autocomplete=\"off\"> <input type=\"password\" name=\"passwordInput\" autoFocus class=\"form-control write-character-value\" [(ngModel)]=\"value\" (keyup)=\"validate()\" *ngIf=\"isPassword\" autocomplete=\"off\"> <span class=\"help-block text-danger\" [hidden]=\"!validationError\">{{validationErrorText}}</span> </div> <div class=\"modal-footer\"> <button type=\"submit\" class=\"btn md-skip btn-primary btn-block\" [disabled]=\"validationError\">{{localization.submit}}</button> </div> </form> ",
+        styles: [".modal-header { padding: 10px; border-color: transparent; } .modal-body { position: relative; padding: 0px 5px !important; } .modal-title { display: unset; margin-left: -6px; font-size: 16px !important; } .form-control { margin: 0 5%; float: none; width: 90%; } .modal-footer { padding: 10px 4px 20px 5px !important; text-align: right; border-color: transparent; } .text-danger { display: block; color: #ed6b75; font-size: 14px; margin: 10px 0px 0px 15px; } .btn-primary { background-color: #3B97FC; border-color: #3B97FC; padding: 5px 30px; width: 90%; margin: 0 5%; height: 32px; } .write-character-value { padding-left: 8px; height: 32px; margin-left: 16px; } "]
+    }),
+    __param(0, Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Inject"])(_localization__WEBPACK_IMPORTED_MODULE_2__[/* LOCALIZATION */ "b"]))
+], WriteCharacterModalComponent);
 
-nv.version = "1.8.6-dev";
-})();
-//# sourceMappingURL=nv.d3.js.map
+
 
 /***/ }),
 /* 40 */
@@ -65042,7 +65134,7 @@ var $$rxSubscriber = rxSubscriber;
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return empty; });
 /* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(24);
-/* harmony import */ var _util_hostReportError__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(35);
+/* harmony import */ var _util_hostReportError__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(36);
 /** PURE_IMPORTS_START _config,_util_hostReportError PURE_IMPORTS_END */
 
 
@@ -67717,7 +67809,7 @@ var InnerSubscriber_InnerSubscriber = /*@__PURE__*/ (function (_super) {
 var subscribeToArray = __webpack_require__(275);
 
 // EXTERNAL MODULE: ./node_modules/rxjs/_esm5/internal/util/hostReportError.js
-var hostReportError = __webpack_require__(35);
+var hostReportError = __webpack_require__(36);
 
 // CONCATENATED MODULE: ./node_modules/rxjs/_esm5/internal/util/subscribeToPromise.js
 /** PURE_IMPORTS_START _hostReportError PURE_IMPORTS_END */
@@ -73451,7 +73543,7 @@ var ngx_bootstrap_tooltip_TooltipModule = /** @class */ (function () {
 //# sourceMappingURL=ngx-bootstrap-tooltip.js.map
 
 // EXTERNAL MODULE: ./.tmp/gui/gui.component.ts + 1 modules
-var gui_component = __webpack_require__(36);
+var gui_component = __webpack_require__(37);
 
 // EXTERNAL MODULE: ./.tmp/localization/localization.service.ts
 var localization_service = __webpack_require__(19);
@@ -73463,10 +73555,10 @@ var alert_modal_component = __webpack_require__(22);
 var confirm_operation_modal_component = __webpack_require__(21);
 
 // EXTERNAL MODULE: ./.tmp/modal/write-character/write-character-modal.component.ts
-var write_character_modal_component = __webpack_require__(38);
+var write_character_modal_component = __webpack_require__(39);
 
 // EXTERNAL MODULE: ./.tmp/modal/write-value/write-value-modal.component.ts
-var write_value_modal_component = __webpack_require__(37);
+var write_value_modal_component = __webpack_require__(38);
 
 // EXTERNAL MODULE: ./.tmp/settings/global-settings.ts
 var global_settings = __webpack_require__(49);
@@ -86202,7 +86294,7 @@ module.exports = g;
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _gui_gui_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(36);
+/* harmony import */ var _gui_gui_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(37);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GuiComponent", function() { return _gui_gui_component__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
 /* harmony import */ var _gui_gui_view__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(32);
@@ -86226,21 +86318,23 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GraphStore", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["h"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ViewStore", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["p"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ViewStore", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["q"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ViewModel", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["p"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ViewModel", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["o"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ImageStore", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["n"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ImageStore", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["m"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HistoryDataStore", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["l"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HistoryDataStore", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["k"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HistoryDataModel", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["k"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HistoryDataModel", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["j"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HistoryDataItemModel", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["j"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HistoryDataValue", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["l"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "HistoryDataValue", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["m"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GetHistoryDataArgs", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["d"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VariableStore", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["n"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VariableStore", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["o"]; });
 
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GetVariableNameArgs", function() { return _config__WEBPACK_IMPORTED_MODULE_4__["e"]; });
 
@@ -86260,7 +86354,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VariableStateEnum", function() { return _communication__WEBPACK_IMPORTED_MODULE_5__["d"]; });
 
 /* harmony import */ var _model__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3);
-/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _model__WEBPACK_IMPORTED_MODULE_6__) if(["GuiComponent","GuiView","GuiContext","GuiModule","LOGGER_SERVICE_TOKEN","LoggerService","ConsoleLoggerService","StringifyingMap","ConfigStore","Graph","GraphResult","GraphType","GraphStore","ViewStore","ViewModel","ImageStore","HistoryDataStore","HistoryDataModel","HistoryDataValue","GetHistoryDataArgs","VariableStore","GetVariableNameArgs","AlarmsStore","GetAlarmsArgs","VariableCommunicator","VariableValue","VariableState","VariableDefinition","VariableStateEnum","default"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _model__WEBPACK_IMPORTED_MODULE_6__[key]; }) }(__WEBPACK_IMPORT_KEY__));
+/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _model__WEBPACK_IMPORTED_MODULE_6__) if(["GuiComponent","GuiView","GuiContext","GuiModule","LOGGER_SERVICE_TOKEN","LoggerService","ConsoleLoggerService","StringifyingMap","ConfigStore","Graph","GraphResult","GraphType","GraphStore","ViewStore","ViewModel","ImageStore","HistoryDataStore","HistoryDataModel","HistoryDataItemModel","HistoryDataValue","GetHistoryDataArgs","VariableStore","GetVariableNameArgs","AlarmsStore","GetAlarmsArgs","VariableCommunicator","VariableValue","VariableState","VariableDefinition","VariableStateEnum","default"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _model__WEBPACK_IMPORTED_MODULE_6__[key]; }) }(__WEBPACK_IMPORT_KEY__));
 /* harmony import */ var _localization__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(9);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Localization", function() { return _localization__WEBPACK_IMPORTED_MODULE_7__["c"]; });
 
@@ -86317,7 +86411,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RemoteVariableProtocol", function() { return _remote__WEBPACK_IMPORTED_MODULE_11__["k"]; });
 
 /* harmony import */ var _service__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(14);
-/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _service__WEBPACK_IMPORTED_MODULE_12__) if(["GuiComponent","GuiView","GuiContext","GuiModule","LOGGER_SERVICE_TOKEN","LoggerService","ConsoleLoggerService","StringifyingMap","ConfigStore","Graph","GraphResult","GraphType","GraphStore","ViewStore","ViewModel","ImageStore","HistoryDataStore","HistoryDataModel","HistoryDataValue","GetHistoryDataArgs","VariableStore","GetVariableNameArgs","AlarmsStore","GetAlarmsArgs","VariableCommunicator","VariableValue","VariableState","VariableDefinition","VariableStateEnum","Localization","LOCALIZATION","DefaultLocalization","Localization_zh_CN","SecurityChecker","Disposable","ConfigIsEmptyError","OperationHelper","GuiConsts","GraphExtendedStyle","GetReleasedGraphStateResult","GraphStateResult","GetReleasedGraphStates","GraphStateKey","GraphState","RemoteGraphProtocol","RemoteGraphStore","RemoteViewProtocol","RemoteViewStore","ViewResult","RemoteImageProtocol","RemoteImageStore","RemoteVariableCommunicator","RemoteVariableProtocol","default"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _service__WEBPACK_IMPORTED_MODULE_12__[key]; }) }(__WEBPACK_IMPORT_KEY__));
+/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _service__WEBPACK_IMPORTED_MODULE_12__) if(["GuiComponent","GuiView","GuiContext","GuiModule","LOGGER_SERVICE_TOKEN","LoggerService","ConsoleLoggerService","StringifyingMap","ConfigStore","Graph","GraphResult","GraphType","GraphStore","ViewStore","ViewModel","ImageStore","HistoryDataStore","HistoryDataModel","HistoryDataItemModel","HistoryDataValue","GetHistoryDataArgs","VariableStore","GetVariableNameArgs","AlarmsStore","GetAlarmsArgs","VariableCommunicator","VariableValue","VariableState","VariableDefinition","VariableStateEnum","Localization","LOCALIZATION","DefaultLocalization","Localization_zh_CN","SecurityChecker","Disposable","ConfigIsEmptyError","OperationHelper","GuiConsts","GraphExtendedStyle","GetReleasedGraphStateResult","GraphStateResult","GetReleasedGraphStates","GraphStateKey","GraphState","RemoteGraphProtocol","RemoteGraphStore","RemoteViewProtocol","RemoteViewStore","ViewResult","RemoteImageProtocol","RemoteImageStore","RemoteVariableCommunicator","RemoteVariableProtocol","default"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _service__WEBPACK_IMPORTED_MODULE_12__[key]; }) }(__WEBPACK_IMPORT_KEY__));
 /* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(7);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LOGGER_SERVICE_TOKEN", function() { return _logger__WEBPACK_IMPORTED_MODULE_13__["b"]; });