@wavemaker/app-ng-runtime 12.0.0-next.45002 → 12.0.0-next.45006

app-ng-runtime/components/basic/tree/tree.component.d.ts

@@ -25,7 +25,7 @@ export declare class TreeComponent extends StylableComponent implements OnInit {
     nodechildren: string;
     orderby: string;
     private setting;
-    constructor(inj: Injector, binddatavalue: any, bindnodelabel: any, bindnodeicon: any, bindnodechildren: any, bindnodeid: any);
+    constructor(inj: Injector, binddatavalue: any, bindnodelabel: any, bindnodeicon: any, bindnodechildren: any, bindnodeid: any, explicitContext: any);
     onPropertyChange(key: string, nv: any, ov?: any): void;
     private expandTree;
     private setTreeTemplate;
@@ -45,6 +45,6 @@ export declare class TreeComponent extends StylableComponent implements OnInit {
     private postRenderTree;
     private selectById;
     private deselectById;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TreeComponent, [null, { attribute: "datavalue.bind"; }, { attribute: "nodelabel.bind"; }, { attribute: "nodeicon.bind"; }, { attribute: "nodechildren.bind"; }, { attribute: "nodeid.bind"; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TreeComponent, [null, { attribute: "datavalue.bind"; }, { attribute: "nodelabel.bind"; }, { attribute: "nodeicon.bind"; }, { attribute: "nodechildren.bind"; }, { attribute: "nodeid.bind"; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TreeComponent, "ul[wmTree]", never, {}, {}, never, never, false, never>;
 }

app-ng-runtime/components/chart/.npmignore

@@ -0,0 +1,2 @@
+# Nested package.json's are only needed for development.
+**/package.json

app-ng-runtime/components/chart/bundles/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@wm/components/base'), require('@wm/components/basic'), require('@wm/core')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@wm/components/base', '@wm/components/basic', '@wm/core'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.chart = {}), global.ng.core, global.ng.common, global.wm.components.base, global.wm.components.basic, global.wm.core));
-})(this, (function (exports, i0, i3, base, i2, i1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@wm/components/base'), require('@wm/components/basic'), require('@wm/core'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@wm/components/base', '@wm/components/basic', '@wm/core', 'lodash-es'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.chart = {}), global.ng.core, global.ng.common, global.wm.components.base, global.wm.components.basic, global.wm.core, global._));
+})(this, (function (exports, i0, i3, base, i2, i1, lodashEs) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -168,7 +168,7 @@
         'small': 0.3,
         'medium': 0.6,
         'large': 0.7
-    }, barSpacingMapInvert = _.invert(barSpacingMap), donutRatioMapInvert = _.invert(donutRatioMap), tickformats = {
+    }, barSpacingMapInvert = lodashEs.invert(barSpacingMap), donutRatioMapInvert = lodashEs.invert(donutRatioMap), tickformats = {
         'Thousand': {
             'prefix': 'K',
             'divider': 1000
@@ -207,11 +207,11 @@
     // returns true if chart type is area
     const isPieType = type => isPieChart(type) || isDonutChart(type);
     // The format of chart data is array of json objects in case of the following types of chart
-    const isChartDataJSON = type => _.includes(dataTypeJSON, type) || !_.includes(chartTypes, type);
+    const isChartDataJSON = type => lodashEs.includes(dataTypeJSON, type) || !lodashEs.includes(chartTypes, type);
     // The format of chart data is array of objects in case of the following types of chart
-    const isChartDataArray = type => _.includes(dataTypeArray, type);
+    const isChartDataArray = type => lodashEs.includes(dataTypeArray, type);
     // returns true is the chart type is 'line', 'area' or 'cumulative line' else false
-    const isLineTypeChart = type => _.includes(lineTypeCharts, type);
+    const isLineTypeChart = type => lodashEs.includes(lineTypeCharts, type);
     // X/Y Domain properties are supported only for Column and Area charts
     const isAxisDomainSupported = type => isColumnChart(type) || isAreaChart(type);
     // Returns bar spacing value
@@ -412,7 +412,7 @@
         return isChartDataJSON(type) ? 'jsonFormat' : 'arrayFormat';
     };
     // Sample data to populate when no data is bound
-    const getSampleData = widgetContext => constructSampleData(getDataType(widgetContext), _.split(widgetContext.yaxisdatakey, ',').length, widgetContext.shape);
+    const getSampleData = widgetContext => constructSampleData(getDataType(widgetContext), lodashEs.split(widgetContext.yaxisdatakey, ',').length, widgetContext.shape);
     // Check whether X/Y Domain was set to Min and is supported for the present chart
     const isAxisDomainValid = (widgetContext, axis) => {
         if (widgetContext[axis + 'domain'] === 'Min' && (isAxisDomainSupported(widgetContext.type))) {
@@ -422,7 +422,7 @@
     };
     // Check whether min and max values are finite or not
     const areMinMaxValuesValid = values => {
-        if (_.isFinite(values.min) && _.isFinite(values.max)) {
+        if (lodashEs.isFinite(values.min) && lodashEs.isFinite(values.max)) {
             return true;
         }
         return false;
@@ -462,8 +462,8 @@
         if (!propertyValueMap || i1.isEmptyObject(propertyValueMap)) {
             propertyValueMap = {};
         }
-        _.forEach(basicProperties, prop => {
-            if (_.isUndefined(propertyValueMap[prop])) {
+        lodashEs.forEach(basicProperties, prop => {
+            if (lodashEs.isUndefined(propertyValueMap[prop])) {
                 propertyValueMap[prop] = widgetContext[prop];
             }
         });
@@ -668,7 +668,7 @@
         }
         // Setting the legend type choosen by user or default it will be furious
         chart.legend.vers((propertyValueMap.legendtype && propertyValueMap.legendtype.toLowerCase()) || 'furious');
-        if (!_.includes(chartTypes, widgetContext.type)) {
+        if (!lodashEs.includes(chartTypes, widgetContext.type)) {
             chart = nv.models.multiBarChart()
                 .x(d => d.x)
                 .y(d => d.y);
@@ -738,10 +738,10 @@
             }
         }
         // Support for custom colors if user gives direct string of colors in text box
-        if (_.isString(propertyValueMap.customcolors) && propertyValueMap.customcolors) {
-            colors = _.split(propertyValueMap.customcolors, ',');
+        if (lodashEs.isString(propertyValueMap.customcolors) && propertyValueMap.customcolors) {
+            colors = lodashEs.split(propertyValueMap.customcolors, ',');
         }
-        if (_.isArray(propertyValueMap.customcolors)) {
+        if (lodashEs.isArray(propertyValueMap.customcolors)) {
             colors = propertyValueMap.customcolors;
         }
         showLegend = isShowLegend(propertyValueMap.showlegend);
@@ -766,7 +766,7 @@
     };
     // @ts-ignore
     const postPlotChartProcess = (widgetContext, isPreview) => {
-        const id = isPreview ? null : widgetContext.$id;
+        const id = widgetContext.$id;
         // If user sets to highlight the data points and increase the thickness of the line
         if (isLineTypeChart(widgetContext.type)) {
             setLineThickness(id, widgetContext.linethickness);
@@ -781,11 +781,13 @@
     const getDateList = () => dateList;
 
     const _c0 = ["wmChart", ""];
+    const _c1 = (a0, a1) => ({ "loading": a0, "panel-body": a1 });
+    const _c2 = a0 => ({ "error": a0 });
     function ChartComponent_div_0_div_5_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "div", 9);
     } if (rf & 2) {
-        const ctx_r2 = i0__namespace.ɵɵnextContext(2);
-        i0__namespace.ɵɵproperty("innerHTML", ctx_r2.subheading, i0__namespace.ɵɵsanitizeHtml);
+        const ctx_r0 = i0__namespace.ɵɵnextContext(2);
+        i0__namespace.ɵɵproperty("innerHTML", ctx_r0.subheading, i0__namespace.ɵɵsanitizeHtml);
     } }
     function ChartComponent_div_0_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementStart(0, "div", 4)(1, "h3", 5)(2, "div", 6);
@@ -799,24 +801,20 @@
         i0__namespace.ɵɵadvance(3);
         i0__namespace.ɵɵclassMapInterpolate1("app-icon panel-icon ", ctx_r0.iconclass, "");
         i0__namespace.ɵɵclassProp("ng-hide", !ctx_r0.iconclass);
-        i0__namespace.ɵɵadvance(1);
+        i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("innerHTML", ctx_r0.title, i0__namespace.ɵɵsanitizeHtml);
-        i0__namespace.ɵɵadvance(1);
+        i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("ngIf", ctx_r0.subheading);
     } }
-    const _c1 = function (a0) { return { "error": a0 }; };
     function ChartComponent_div_3_Template(rf, ctx) { if (rf & 1) {
-        i0__namespace.ɵɵnamespaceSVG();
-        i0__namespace.ɵɵnamespaceHTML();
         i0__namespace.ɵɵelementStart(0, "div", 10);
         i0__namespace.ɵɵelement(1, "p", 11);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("title", ctx_r1.hintMsg)("ngClass", i0__namespace.ɵɵpureFunction1(3, _c1, ctx_r1.invalidConfig))("innerText", ctx_r1.errMsg);
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("title", ctx_r0.hintMsg)("ngClass", i0__namespace.ɵɵpureFunction1(3, _c2, ctx_r0.invalidConfig))("innerText", ctx_r0.errMsg);
     } }
-    const _c2 = function (a0, a1) { return { "loading": a0, "panel-body": a1 }; };
     const WIDGET_CONFIG = { widgetType: 'wm-chart', hostClass: 'app-chart' };
     const NONE = 'none', advanceDataProps = ['aggregation', 'aggregationcolumn', 'groupby', 'orderby'], 
     // XPaths to get actual data of data points in charts
@@ -860,8 +858,8 @@
     const getLodashOrderByFormat = orderby => {
         let columns;
         const orderByColumns = [], orders = [];
-        _.forEach(_.split(orderby, ','), function (col) {
-            columns = _.split(col, ':');
+        lodashEs.forEach(lodashEs.split(orderby, ','), function (col) {
+            columns = lodashEs.split(col, ':');
             orderByColumns.push(columns[0]);
             orders.push(columns[1]);
         });
@@ -909,7 +907,7 @@
             other than integer unlike the column and bar.It is a nvd3 issue. Inorder to
             support that this is a fix*/
         getxAxisVal(dataObj, xKey, index) {
-            const value = _.get(dataObj, xKey);
+            const value = lodashEs.get(dataObj, xKey);
             // If x axis is other than number type then add indexes
             if (isLineTypeChart(this.type) && !i1.isNumberType(this.xAxisDataType)) {
                 // Verification to get the unique data keys
@@ -939,7 +937,7 @@
                 input: [[10, 20], [20, 30], [30, 40]];
                 min x: 10
             */
-            xValues.min = _.minBy(datum.values, dataObject => dataObject.x || dataObject[0]);
+            xValues.min = lodashEs.minBy(datum.values, dataObject => dataObject.x || dataObject[0]);
             /*
              compute the max x value
              eg: When data has objects
@@ -949,7 +947,7 @@
                 input: [[10, 20], [20, 30], [30, 40]];
                 max x: 30
              */
-            xValues.max = _.maxBy(datum.values, dataObject => dataObject.x || dataObject[0]);
+            xValues.max = lodashEs.maxBy(datum.values, dataObject => dataObject.x || dataObject[0]);
             return xValues;
         }
         // Getting the min and max values among all the y values
@@ -971,13 +969,17 @@
                 min y values : '20'(among first set) & '30'(among second set)
                 max y values : '40'(among first set) & '50'(among second set)
              */
-            _.forEach(datum, data => {
-                minValues.push(_.minBy(data.values, function (dataObject) { return dataObject.y || dataObject[1]; }));
-                maxValues.push(_.maxBy(data.values, function (dataObject) { return dataObject.y || dataObject[1]; }));
+            lodashEs.forEach(datum, data => {
+                minValues.push(lodashEs.minBy(data.values, function (dataObject) {
+                    return dataObject.y || dataObject[1];
+                }));
+                maxValues.push(lodashEs.maxBy(data.values, function (dataObject) {
+                    return dataObject.y || dataObject[1];
+                }));
             });
             // Gets the least and highest values among all the min and max values of respective series of data
-            yValues.min = _.minBy(minValues, dataObject => dataObject.y || dataObject[1]);
-            yValues.max = _.maxBy(maxValues, dataObject => dataObject.y || dataObject[1]);
+            yValues.min = lodashEs.minBy(minValues, dataObject => dataObject.y || dataObject[1]);
+            yValues.max = lodashEs.maxBy(maxValues, dataObject => dataObject.y || dataObject[1]);
             return yValues;
         }
         // If the x-axis values are undefined, we return empty array else we return the values
@@ -986,7 +988,7 @@
         }
         // Returns the single data point based on the type of the data chart accepts
         valueFinder(dataObj, xKey, yKey, index, shape) {
-            const xVal = this.getxAxisVal(dataObj, xKey, index), value = _.get(dataObj, yKey), yVal = parseFloat(value) || value, size = parseFloat(dataObj[this.bubblesize]) || 2;
+            const xVal = this.getxAxisVal(dataObj, xKey, index), value = lodashEs.get(dataObj, yKey), yVal = parseFloat(value) || value, size = parseFloat(dataObj[this.bubblesize]) || 2;
             let dataPoint = {};
             if (isChartDataJSON(this.type)) {
                 dataPoint.x = xVal;
@@ -1027,10 +1029,10 @@
             }
             let datum = [], yAxisKey, shapes = [], values = [];
             const xAxisKey = this.xaxisdatakey, yAxisKeys = this.yaxisdatakey ? this.yaxisdatakey.split(',') : [], dataSet = this.chartData;
-            if (_.isArray(dataSet)) {
+            if (lodashEs.isArray(dataSet)) {
                 if (isPieType(this.type)) {
                     yAxisKey = yAxisKeys[0];
-                    datum = _.map(dataSet, (dataObj, index) => {
+                    datum = lodashEs.map(dataSet, (dataObj, index) => {
                         if (!i1.isEmptyObject(dataSet[index])) {
                             return this.valueFinder(dataSet[index], xAxisKey, yAxisKey);
                         }
@@ -1042,9 +1044,9 @@
                         shapes = this.shape === 'random' ? allShapes : this.shape;
                     }
                     yAxisKeys.forEach((yAxisKey, series) => {
-                        values = _.map(dataSet, (dataObj, index) => {
+                        values = lodashEs.map(dataSet, (dataObj, index) => {
                             if (!i1.isEmptyObject(dataSet[index])) {
-                                return this.valueFinder(dataSet[index], xAxisKey, yAxisKey, index, (_.isArray(shapes) && shapes[series]) || this.shape);
+                                return this.valueFinder(dataSet[index], xAxisKey, yAxisKey, index, (lodashEs.isArray(shapes) && shapes[series]) || this.shape);
                             }
                         });
                         values = this.getValidData(values);
@@ -1068,21 +1070,21 @@
         // constructing the grouped data based on the selection of orderby, x & y axis
         getVisuallyGroupedData(queryResponse, groupingColumn) {
             let groupData = {}, groupValues = [], orderByDetails, maxLength;
-            const chartData = [], _isAreaChart = isAreaChart(this.type), yAxisKey = _.first(_.split(this.yaxisdatakey, ','));
+            const chartData = [], _isAreaChart = isAreaChart(this.type), yAxisKey = lodashEs.first(lodashEs.split(this.yaxisdatakey, ','));
             this.xDataKeyArr = [];
-            queryResponse = _.orderBy(queryResponse, _.split(this.groupby, ','));
+            queryResponse = lodashEs.orderBy(queryResponse, lodashEs.split(this.groupby, ','));
             if (this.orderby) {
                 orderByDetails = getLodashOrderByFormat(this.orderby);
-                queryResponse = _.orderBy(queryResponse, orderByDetails.columns, orderByDetails.orders);
+                queryResponse = lodashEs.orderBy(queryResponse, orderByDetails.columns, orderByDetails.orders);
             }
-            queryResponse = _.groupBy(queryResponse, groupingColumn);
+            queryResponse = lodashEs.groupBy(queryResponse, groupingColumn);
             // In case of area chart all the series data should be of same length
             if (_isAreaChart) {
-                maxLength = _.max(_.map(queryResponse, obj => obj.length));
+                maxLength = lodashEs.max(lodashEs.map(queryResponse, obj => obj.length));
             }
-            _.forEach(queryResponse, (values, groupKey) => {
-                groupValues = isAreaChart ? _.fill(new Array(maxLength), [0, 0]) : [];
-                _.forEachRight(values, (value, index) => {
+            lodashEs.forEach(queryResponse, (values, groupKey) => {
+                groupValues = isAreaChart ? lodashEs.fill(new Array(maxLength), [0, 0]) : [];
+                lodashEs.forEachRight(values, (value, index) => {
                     groupValues[index] = this.valueFinder(value, this.xaxisdatakey, yAxisKey, index);
                 });
                 groupData = {
@@ -1116,14 +1118,14 @@
                         columns.push(visualGroupingColumn);
                     }
                     if (groupbyColumns.length) {
-                        columns = _.concat(columns, groupbyColumns);
+                        columns = lodashEs.concat(columns, groupbyColumns);
                     }
                 }
                 // If x and y axis are not included in aggregation need to be included in groupby
                 if (this.xaxisdatakey !== this.aggregationcolumn) {
                     columns.push(this.xaxisdatakey);
                 }
-                _.forEach(yAxisKeys, key => {
+                lodashEs.forEach(yAxisKeys, key => {
                     if (key !== this.aggregationcolumn) {
                         columns.push(key);
                     }
@@ -1151,16 +1153,17 @@
                 return;
             }
             if (this.isGroupByEnabled()) {
-                groupByFields = _.split(this.groupby, ',');
+                groupByFields = lodashEs.split(this.groupby, ',');
             }
             if (this.orderby) {
-                sortExpr = _.replace(this.orderby, /:/g, ' ');
-                columns = _.uniq(_.concat(columns, groupByFields, [this.aggregationcolumn]));
+                sortExpr = lodashEs.replace(this.orderby, /:/g, ' ');
+                columns = lodashEs.uniq(lodashEs.concat(columns, groupByFields, [this.aggregationcolumn]));
                 orderByColumns = getLodashOrderByFormat(this.orderby).columns;
                 // If the orderby column is chosen either in groupby or orderby then replace . with $ for that column
-                _.forEach(_.intersection(columns, orderByColumns), col => {
+                lodashEs.forEach(lodashEs.intersection(columns, orderByColumns), col => {
                     colAlias = getValidAliasName(col);
-                    sortExpr = _.replace(sortExpr, col, colAlias);
+                    // @ts-ignore
+                    sortExpr = lodashEs.replace(sortExpr, col, colAlias);
                 });
             }
             if (this.isAggregationEnabled()) {
@@ -1182,17 +1185,17 @@
                 // Transform the result into a format supported by the chart.
                 const chartData = [], aggregationAlias = getValidAliasName(this.aggregationcolumn), xAxisAliasKey = getValidAliasName(this.xaxisdatakey), yAxisAliasKeys = [];
                 yAxisKeys.forEach(yAxisKey => yAxisAliasKeys.push(getValidAliasName(yAxisKey)));
-                _.forEach(response.body.content, (responseContent) => {
+                lodashEs.forEach(response.body.content, (responseContent) => {
                     const obj = {};
                     // Set the response in the chartData based on 'aggregationColumn', 'xAxisDataKey' & 'yAxisDataKey'.
                     if (this.isAggregationEnabled()) {
                         obj[this.aggregationcolumn] = responseContent[aggregationAlias];
-                        obj[this.aggregationcolumn] = _.get(responseContent, aggregationAlias) || _.get(responseContent, this.aggregationcolumn);
+                        obj[this.aggregationcolumn] = lodashEs.get(responseContent, aggregationAlias) || lodashEs.get(responseContent, this.aggregationcolumn);
                     }
-                    obj[this.xaxisdatakey] = _.get(responseContent, xAxisAliasKey) || _.get(responseContent, this.xaxisdatakey);
+                    obj[this.xaxisdatakey] = lodashEs.get(responseContent, xAxisAliasKey) || lodashEs.get(responseContent, this.xaxisdatakey);
                     yAxisKeys.forEach((yAxisKey, index) => {
                         obj[yAxisKey] = responseContent[yAxisAliasKeys[index]];
-                        obj[yAxisKey] = _.get(responseContent, yAxisAliasKeys[index]) || _.get(responseContent, yAxisKey);
+                        obj[yAxisKey] = lodashEs.get(responseContent, yAxisAliasKeys[index]) || lodashEs.get(responseContent, yAxisKey);
                     });
                     chartData.push(obj);
                 });
@@ -1318,7 +1321,11 @@
                         break;
                 }
                 this.selecteditem = dataObj;
-                this.invokeEventCallback('select', { $event: d3.event, selectedChartItem: data, selectedItem: this.selecteditem });
+                this.invokeEventCallback('select', {
+                    $event: event,
+                    selectedChartItem: data,
+                    selectedItem: this.selecteditem
+                });
             });
         }
         /*  Returns Y Scale min value
@@ -1357,7 +1364,7 @@
                 }
             }
             // prepare text style props object and set
-            _.forEach(styleProps, (value, key) => {
+            lodashEs.forEach(styleProps, (value, key) => {
                 if (key === 'fontsize' || key === 'fontunit') {
                     styleObj[value] = this.fontsize + this.fontunit;
                 }
@@ -1402,7 +1409,7 @@
             }
             // get the chart object
             chart = initChart(this, xDomainValues, yDomainValues, null, !this.binddataset);
-            if (_.isArray(this._processedData)) {
+            if (lodashEs.isArray(this._processedData)) {
                 // WMS-19499:  To remove chart X-axis old ticks when chart data loaded dynamically.
                 const oldgTicks = $('#wmChart' + this.$id + ' svg').find('g.nv-x').find('g.tick');
                 if (oldgTicks && oldgTicks.length) {
@@ -1493,7 +1500,7 @@
             this.yaxisdatakey = defaultColumns[1] || null;
         }
         getCutomizedOptions(prop, fields) {
-            const groupByColumns = _.split(this.groupby, ','), aggColumns = _.split(this.aggregationcolumn, ',');
+            const groupByColumns = lodashEs.split(this.groupby, ','), aggColumns = lodashEs.split(this.aggregationcolumn, ',');
             if (!this.binddataset) {
                 return fields;
             }
@@ -1533,7 +1540,7 @@
                 case 'orderby':
                     // Set the 'aggregationColumn' to show all keys in case of aggregation function is count or to numeric keys in all other cases.
                     if (this.isLiveVariable && this.isAggregationEnabled()) {
-                        newOptions = _.uniq(_.concat(groupByColumns, aggColumns));
+                        newOptions = lodashEs.uniq(lodashEs.concat(groupByColumns, aggColumns));
                     }
                     break;
                 case 'bubblesize':
@@ -1551,12 +1558,12 @@
             this.numericColumns = [];
             this.nonPrimaryColumns = [];
             // Fetching all the columns
-            if (this.dataset && !_.isEmpty(propertiesMap)) {
+            if (this.dataset && !lodashEs.isEmpty(propertiesMap)) {
                 columns = []; // TODO: fetchPropertiesMapColumns(propertiesMap);
             }
             if (columns) {
                 // Iterating through all the columns and fetching the numeric and non primary key columns
-                _.forEach(Object.keys(columns), (key) => {
+                lodashEs.forEach(Object.keys(columns), (key) => {
                     type = columns[key].type;
                     if (i1.isNumberType(type)) {
                         this.numericColumns.push(key);
@@ -1579,9 +1586,9 @@
                 this.axisoptions = null;
             }
             // liveVariables contain data in 'data' property' of the variable
-            this.chartData = this.isLiveVariable ? newVal || '' : (newVal && newVal.dataValue === '' && _.keys(newVal).length === 1) ? '' : newVal;
+            this.chartData = this.isLiveVariable ? newVal || '' : (newVal && newVal.dataValue === '' && lodashEs.keys(newVal).length === 1) ? '' : newVal;
             // if the data returned is an object make it an array of object
-            if (!_.isArray(this.chartData) && _.isObject(this.chartData)) {
+            if (!lodashEs.isArray(this.chartData) && lodashEs.isObject(this.chartData)) {
                 this.chartData = [this.chartData];
             }
             if (newVal && newVal.filterFields) {
@@ -1651,7 +1658,7 @@
                     this._plotChartProxy();
                     break;
             }
-            if (_.includes(advanceDataProps, key)) {
+            if (lodashEs.includes(advanceDataProps, key)) {
                 this._plotChartProxy();
             }
         }
@@ -1681,8 +1688,8 @@
                     break;
             }
         }
-        constructor(inj, app) {
-            super(inj, WIDGET_CONFIG);
+        constructor(inj, app, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
             this.app = app;
             this.iconclass = '';
             this.nonPrimaryColumns = [];
@@ -1690,7 +1697,7 @@
             this.chartData = [];
             this._processedData = [];
             this._subsciptions = [];
-            this._plotChartProxy = _.debounce(this.plotChartProxy.bind(this), 100);
+            this._plotChartProxy = lodashEs.debounce(this.plotChartProxy.bind(this), 100);
             this.redraw = this._plotChartProxy.bind(this);
             base.styler(this.nativeElement, this, base.APPLY_STYLES_TYPE.CONTAINER, ['fontsize', 'fontunit', 'color', 'fontfamily', 'fontweight', 'fontstyle', 'textdecoration']);
             // generate unique id for the component
@@ -1707,7 +1714,7 @@
         ngAfterViewInit() {
             super.ngAfterViewInit();
             // For old projects
-            if (!_.includes(['outside', 'inside', 'hide'], this.showlabels)) {
+            if (!lodashEs.includes(['outside', 'inside', 'hide'], this.showlabels)) {
                 this.showlabels = getBooleanValue(this.showlabels);
                 this.showlabelsoutside = getBooleanValue(this.showlabelsoutside);
                 this.showlabels = this.showlabels ? (this.showlabelsoutside ? 'outside' : 'inside') : 'hide';
@@ -1730,7 +1737,7 @@
             });
             super.ngOnDestroy();
         }
-        static { this.ɵfac = function ChartComponent_Factory(t) { return new (t || ChartComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.App)); }; }
+        static { this.ɵfac = function ChartComponent_Factory(t) { return new (t || ChartComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.App), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: ChartComponent, selectors: [["div", "wmChart", ""]], hostVars: 2, hostBindings: function ChartComponent_HostBindings(rf, ctx) { if (rf & 2) {
                 i0__namespace.ɵɵclassProp("panel", ctx.title);
             } }, features: [i0__namespace.ɵɵProvidersFeature([
@@ -1746,21 +1753,27 @@
                 i0__namespace.ɵɵelementEnd();
             } if (rf & 2) {
                 i0__namespace.ɵɵproperty("ngIf", ctx.title);
-                i0__namespace.ɵɵadvance(1);
-                i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(3, _c2, ctx.isLoadInProgress, ctx.title));
+                i0__namespace.ɵɵadvance();
+                i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(3, _c1, ctx.isLoadInProgress, ctx.title));
                 i0__namespace.ɵɵadvance(2);
                 i0__namespace.ɵɵproperty("ngIf", ctx.showContentLoadError && ctx.showNoDataMsg);
-            } }, dependencies: [i2__namespace.SpinnerComponent, i3__namespace.NgClass, i3__namespace.NgIf], styles: [".nvtooltip h3,.nvtooltip p{margin:0;text-align:center}.nv-distx,.nv-disty,.nv-noninteractive,.nvd3 .nv-axis,.nvd3 .nv-interactiveGuideLine,.nvd3.nv-pie .nv-label,.nvd3.nv-sparklineplus g.nv-hoverValue,.nvtooltip{pointer-events:none}.nvd3 .nv-axis{opacity:1}.nvd3 .nv-axis path{fill:none;stroke:#000;stroke-opacity:.75;shape-rendering:crispEdges}.nvd3 .nv-axis .zero line,.nvd3 .nv-axis line.zero,.nvd3 .nv-axis path.domain{stroke-opacity:.75}.nvd3 .nv-axis.nv-x path.domain{stroke-opacity:0}.nvd3 .nv-axis line{fill:none;stroke:#e5e5e5;shape-rendering:crispEdges}.nvd3 .nv-axis .nv-axisMaxMin text,.nvtooltip table td.key.total{font-weight:700}.nvd3 .x .nv-axis .nv-axisMaxMin text,.nvd3 .x2 .nv-axis .nv-axisMaxMin text,.nvd3 .x3 .nv-axis .nv-axisMaxMin text{text-anchor:middle}.nvd3 .nv-axis.nv-disabled,.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check{opacity:0}.nvd3 .nv-bars rect{fill-opacity:.75;transition:fill-opacity .25s linear}.nvd3 .nv-bars rect.hover,.nvd3 .nv-boxplot circle:hover,.nvd3 .nv-boxplot rect:hover,.nvd3 .nv-candlestickBar .nv-ticks rect:hover,.nvd3 .nv-discretebar .nv-groups rect:hover,.nvd3 .nv-multibar .nv-groups rect:hover,.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,.nvd3 .nv-scatter .nv-point.hover,.nvd3.nv-bullet .nv-measure:hover,.nvd3.nv-linePlusBar .nv-bar rect:hover,.nvd3.nv-pie .hover path{fill-opacity:1}.nvd3 .nv-bars .hover rect{fill:#add8e6}.nvd3 .nv-bars text{fill:#0000}.nvd3 .nv-bars .hover text{fill:#000}.nvd3 .nv-discretebar .nv-groups rect,.nvd3 .nv-multibar .nv-groups rect,.nvd3 .nv-multibarHorizontal .nv-groups rect{stroke-opacity:0;transition:fill-opacity .25s linear}.nvd3 .nv-discretebar .nv-groups text,.nvd3 .nv-multibarHorizontal .nv-groups text{font-weight:700;fill:#000;stroke:#0000}.nvd3 .nv-boxplot circle{fill-opacity:.5}.nvd3 line.nv-boxplot-median{stroke:#000}.nv-boxplot-tick:hover{stroke-width:2.5px}.nvd3.nv-bullet{font:10px sans-serif}.nvd3.nv-bullet .nv-measure{fill-opacity:.8}.nvd3.nv-bullet .nv-marker{stroke:#000;stroke-width:2px}.nvd3.nv-bullet .nv-markerTriangle{stroke:#000;fill:#fff;stroke-width:1.5px}.nvd3.nv-bullet .nv-markerLine{stroke:#000;stroke-width:1.5px}.nvd3.nv-bullet .nv-tick line{stroke:#666;stroke-width:.5px}.nvd3.nv-bullet .nv-range.nv-s0{fill:#eee}.nvd3.nv-bullet .nv-range.nv-s1{fill:#ddd}.nvd3.nv-bullet .nv-range.nv-s2{fill:#ccc}.nvd3.nv-bullet .nv-title{font-size:14px;font-weight:700}.nvd3.nv-bullet .nv-subtitle{fill:#999}.nvd3.nv-bullet .nv-range{fill:#bababa;fill-opacity:.4}.nvd3.nv-bullet .nv-range:hover{fill-opacity:.7}.nvd3.nv-candlestickBar .nv-ticks .nv-tick,.nvd3.nv-ohlcBar .nv-ticks .nv-tick{stroke-width:1px}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover,.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover{stroke-width:2px}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect,.nvd3.nv-sparklineplus .nv-maxValue{stroke:#2ca02c;fill:#2ca02c}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect,.nvd3.nv-sparklineplus .nv-minValue{stroke:#d62728;fill:#d62728}.with-transitions .nv-candlestickBar .nv-ticks .nv-tick,.with-transitions .nvd3 .nv-groups .nv-point{transition:stroke-width .25s linear,stroke-opacity .25s linear}.nvd3.nv-candlestickBar .nv-ticks line{stroke:#333}.nv-force-node{stroke:#fff;stroke-width:1.5px}.nv-force-link{stroke:#999;stroke-opacity:.6}.nv-force-node text{stroke-width:0}.nvd3 .nv-check-box .nv-box{fill-opacity:0;stroke-width:2}.nvd3 .nv-check-box .nv-check{fill-opacity:0;stroke-width:4}.nvd3 .nv-hoverArea,.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check,.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point,.nvd3.nv-pie .nv-label rect{fill-opacity:0;stroke-opacity:0}.nvd3.nv-linePlusBar .nv-bar rect{fill-opacity:.75}.nvd3 .nv-groups path.nv-line,.nvd3.nv-sparkline path{fill:none}.nvd3 .nv-groups path.nv-area{stroke:none}.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point{fill-opacity:.5!important;stroke-opacity:.5!important}.nvd3 .nv-groups .nv-point.hover,.nvd3.nv-scatter .nv-groups .nv-point.hover{stroke-width:7px;fill-opacity:.95!important;stroke-opacity:.95!important}.nvd3 .nv-point-paths path{stroke:#aaa;stroke-opacity:0;fill:#eee;fill-opacity:0}.nvd3 .nv-indexLine{cursor:ew-resize}svg.nvd3-svg{-webkit-user-select:none;-moz-user-select:none;user-select:none;display:block;width:100%;height:100%}.nvtooltip.with-3d-shadow,.with-3d-shadow .nvtooltip{box-shadow:0 5px 10px #0003;border-radius:5px}.nvd3 text{font:12px Arial,sans-serif}.nvtooltip h3,.nvtooltip table td.key{font-weight:400}.nvd3 .title{font:700 14px Arial,sans-serif}.nvd3 .nv-background{fill:#fff;fill-opacity:0}.nvd3.nv-noData{font-size:18px;font-weight:700}.nv-brush .selection{fill-opacity:.125;shape-rendering:crispEdges}.nv-brush .handle path{fill:#eee;stroke:#666}.nvd3 .nv-legend .nv-series{cursor:pointer}.nvd3 .nv-legend .nv-disabled circle{fill-opacity:0}.nvd3 .nv-brush .selection{fill-opacity:0!important}.nvd3 .nv-brushBackground rect{stroke:#000;stroke-width:.4;fill:#fff;fill-opacity:.7}@media print{.nvd3 text{stroke-width:0;fill-opacity:1}}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive{stroke:#2ca02c}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative{stroke:#d62728}.nvd3 .background path{fill:none;stroke:#eee;stroke-opacity:.4;shape-rendering:crispEdges}.nvd3 .foreground path{fill:none;stroke-opacity:.7}.nvd3 .nv-parallelCoordinates-brush .selection{fill:#fff;fill-opacity:.6;stroke:gray;shape-rendering:crispEdges}.nvd3 .nv-parallelCoordinates .hover{fill-opacity:1;stroke-width:3px}.nvd3 .missingValuesline line{fill:none;stroke:#000;stroke-width:1;stroke-opacity:1;stroke-dasharray:5,5}.nvd3.nv-pie path{stroke-opacity:0;transition:fill-opacity .25s linear,stroke-width .25s linear,stroke-opacity .25s linear;stroke:#fff;stroke-width:1px;stroke-opacity:1;fill-opacity:.7}.nvd3.nv-pie .nv-pie-title{font-size:24px;fill:#13c4f996}.nvd3.nv-pie .nv-slice text{stroke:#000;stroke-width:0}.nvd3 .nv-groups .nv-point.hover{stroke-width:20px;stroke-opacity:.5}.nvd3.nv-sparklineplus .nv-hoverValue line{stroke:#333;stroke-width:1.5px}.nvd3.nv-sparklineplus,.nvd3.nv-sparklineplus g{pointer-events:all}.nvd3.nv-sparklineplus .nv-xValue,.nvd3.nv-sparklineplus .nv-yValue{stroke-width:0;font-size:.9em;font-weight:400}.nvd3.nv-sparklineplus .nv-yValue{stroke:#f66}.nvd3.nv-sparklineplus .nv-currentValue{font-weight:700;font-size:1.1em}.nvd3.nv-stackedarea path.nv-area{fill-opacity:.7;stroke-opacity:0;transition:fill-opacity .25s linear,stroke-opacity .25s linear}.nvd3.nv-stackedarea path.nv-area.hover{fill-opacity:.9}.nvd3.nv-stackedarea .nv-groups .nv-point{stroke-opacity:0;fill-opacity:0}.nvtooltip{position:absolute;background-color:#fff;color:#000;padding:1px;border:1px solid rgba(0,0,0,.5);z-index:10000;display:block;font-family:Arial,sans-serif;font-size:13px;text-align:left;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#fffc;border-radius:4px}.nvtooltip.with-transitions,.with-transitions .nvtooltip{transition:opacity 50ms linear .2s}.nvtooltip.x-nvtooltip,.nvtooltip.y-nvtooltip{padding:8px}.nvtooltip h3{padding:4px 14px;line-height:18px;background-color:#f7f7f7bf;color:#000;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.nvtooltip p{padding:5px 14px}.nvtooltip span{display:inline-block;margin:2px 0}.nvtooltip table{margin:6px;border-spacing:0}.nvtooltip table td{padding:2px 9px 2px 0;vertical-align:middle}.nvtooltip table td.value{text-align:right;font-weight:700}.nvtooltip table td.percent{color:#a9a9a9}.nvtooltip table tr.highlight td{padding:1px 9px 1px 0;border-bottom-style:solid;border-bottom-width:1px;border-top-style:solid;border-top-width:1px}.nvtooltip table td.legend-color-guide div{vertical-align:middle;width:12px;height:12px;border:1px solid #999}.nvtooltip .footer{padding:3px;text-align:center}.nvtooltip-pending-removal{pointer-events:none;display:none}.nvd3 line.nv-guideline{stroke:#ccc}\n"], encapsulation: 2 }); }
+            } }, dependencies: [i2__namespace.SpinnerComponent, i3__namespace.NgClass, i3__namespace.NgIf], styles: [".nvtooltip h3,.nvtooltip p{margin:0;text-align:center}.nv-distx,.nv-disty,.nv-noninteractive,.nvd3 .nv-axis,.nvd3 .nv-interactiveGuideLine,.nvd3.nv-pie .nv-label,.nvd3.nv-sparklineplus g.nv-hoverValue,.nvtooltip{pointer-events:none}.nvd3 .nv-axis{opacity:1}.nvd3 .nv-axis path{fill:none;stroke:#000;stroke-opacity:.75;shape-rendering:crispEdges}.nvd3 .nv-axis .zero line,.nvd3 .nv-axis line.zero,.nvd3 .nv-axis path.domain{stroke-opacity:.75}.nvd3 .nv-axis.nv-x path.domain{stroke-opacity:0}.nvd3 .nv-axis line{fill:none;stroke:#e5e5e5;shape-rendering:crispEdges}.nvd3 .nv-axis .nv-axisMaxMin text,.nvtooltip table td.key.total{font-weight:700}.nvd3 .x .nv-axis .nv-axisMaxMin text,.nvd3 .x2 .nv-axis .nv-axisMaxMin text,.nvd3 .x3 .nv-axis .nv-axisMaxMin text{text-anchor:middle}.nvd3 .nv-axis.nv-disabled,.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check{opacity:0}.nvd3 .nv-bars rect{fill-opacity:.75;-webkit-transition:fill-opacity .25s linear;transition:fill-opacity .25s linear}.nvd3 .nv-bars rect.hover,.nvd3 .nv-boxplot circle:hover,.nvd3 .nv-boxplot rect:hover,.nvd3 .nv-candlestickBar .nv-ticks rect:hover,.nvd3 .nv-discretebar .nv-groups rect:hover,.nvd3 .nv-multibar .nv-groups rect:hover,.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,.nvd3 .nv-scatter .nv-point.hover,.nvd3.nv-bullet .nv-measure:hover,.nvd3.nv-linePlusBar .nv-bar rect:hover,.nvd3.nv-pie .hover path{fill-opacity:1}.nvd3 .nv-bars .hover rect{fill:#add8e6}.nvd3 .nv-bars text{fill:#0000}.nvd3 .nv-bars .hover text{fill:#000}.nvd3 .nv-discretebar .nv-groups rect,.nvd3 .nv-multibar .nv-groups rect,.nvd3 .nv-multibarHorizontal .nv-groups rect{stroke-opacity:0;-webkit-transition:fill-opacity .25s linear;transition:fill-opacity .25s linear}.nvd3 .nv-discretebar .nv-groups text,.nvd3 .nv-multibarHorizontal .nv-groups text{font-weight:700;fill:#000;stroke:#0000}.nvd3 .nv-boxplot circle{fill-opacity:.5}.nvd3 line.nv-boxplot-median{stroke:#000}.nv-boxplot-tick:hover{stroke-width:2.5px}.nvd3.nv-bullet{font:10px sans-serif}.nvd3.nv-bullet .nv-measure{fill-opacity:.8}.nvd3.nv-bullet .nv-marker{stroke:#000;stroke-width:2px}.nvd3.nv-bullet .nv-markerTriangle{stroke:#000;fill:#fff;stroke-width:1.5px}.nvd3.nv-bullet .nv-markerLine{stroke:#000;stroke-width:1.5px}.nvd3.nv-bullet .nv-tick line{stroke:#666;stroke-width:.5px}.nvd3.nv-bullet .nv-range.nv-s0{fill:#eee}.nvd3.nv-bullet .nv-range.nv-s1{fill:#ddd}.nvd3.nv-bullet .nv-range.nv-s2{fill:#ccc}.nvd3.nv-bullet .nv-title{font-size:14px;font-weight:700}.nvd3.nv-bullet .nv-subtitle{fill:#999}.nvd3.nv-bullet .nv-range{fill:#bababa;fill-opacity:.4}.nvd3.nv-bullet .nv-range:hover{fill-opacity:.7}.nvd3.nv-candlestickBar .nv-ticks .nv-tick,.nvd3.nv-ohlcBar .nv-ticks .nv-tick{stroke-width:1px}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover,.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover{stroke-width:2px}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect,.nvd3.nv-sparklineplus .nv-maxValue{stroke:#2ca02c;fill:#2ca02c}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect,.nvd3.nv-sparklineplus .nv-minValue{stroke:#d62728;fill:#d62728}.with-transitions .nv-candlestickBar .nv-ticks .nv-tick,.with-transitions .nvd3 .nv-groups .nv-point{-webkit-transition:stroke-width .25s linear,stroke-opacity .25s linear;transition:stroke-width .25s linear,stroke-opacity .25s linear}.nvd3.nv-candlestickBar .nv-ticks line{stroke:#333}.nv-force-node{stroke:#fff;stroke-width:1.5px}.nv-force-link{stroke:#999;stroke-opacity:.6}.nv-force-node text{stroke-width:0}.nvd3 .nv-check-box .nv-box{fill-opacity:0;stroke-width:2}.nvd3 .nv-check-box .nv-check{fill-opacity:0;stroke-width:4}.nvd3 .nv-hoverArea,.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check,.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point,.nvd3.nv-pie .nv-label rect{fill-opacity:0;stroke-opacity:0}.nvd3.nv-linePlusBar .nv-bar rect{fill-opacity:.75}.nvd3 .nv-groups path.nv-line,.nvd3.nv-sparkline path{fill:none}.nvd3 .nv-groups path.nv-area{stroke:none}.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point{fill-opacity:.5!important;stroke-opacity:.5!important}.nvd3 .nv-groups .nv-point.hover,.nvd3.nv-scatter .nv-groups .nv-point.hover{stroke-width:7px;fill-opacity:.95!important;stroke-opacity:.95!important}.nvd3 .nv-point-paths path{stroke:#aaa;stroke-opacity:0;fill:#eee;fill-opacity:0}.nvd3 .nv-indexLine{cursor:ew-resize}svg.nvd3-svg{-webkit-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;height:100%}.nvtooltip.with-3d-shadow,.with-3d-shadow .nvtooltip{-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px #0003;border-radius:5px}.nvd3 text{font:12px Arial,sans-serif}.nvtooltip h3,.nvtooltip table td.key{font-weight:400}.nvd3 .title{font:700 14px Arial,sans-serif}.nvd3 .nv-background{fill:#fff;fill-opacity:0}.nvd3.nv-noData{font-size:18px;font-weight:700}.nv-brush .selection{fill-opacity:.125;shape-rendering:crispEdges}.nv-brush .handle path{fill:#eee;stroke:#666}.nvd3 .nv-legend .nv-series{cursor:pointer}.nvd3 .nv-legend .nv-disabled circle{fill-opacity:0}.nvd3 .nv-brush .selection{fill-opacity:0!important}.nvd3 .nv-brushBackground rect{stroke:#000;stroke-width:.4;fill:#fff;fill-opacity:.7}@media print{.nvd3 text{stroke-width:0;fill-opacity:1}}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive{stroke:#2ca02c}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative{stroke:#d62728}.nvd3 .background path{fill:none;stroke:#eee;stroke-opacity:.4;shape-rendering:crispEdges}.nvd3 .foreground path{fill:none;stroke-opacity:.7}.nvd3 .nv-parallelCoordinates-brush .selection{fill:#fff;fill-opacity:.6;stroke:gray;shape-rendering:crispEdges}.nvd3 .nv-parallelCoordinates .hover{fill-opacity:1;stroke-width:3px}.nvd3 .missingValuesline line{fill:none;stroke:#000;stroke-width:1;stroke-opacity:1;stroke-dasharray:5,5}.nvd3.nv-pie path{stroke-opacity:0;-webkit-transition:fill-opacity .25s linear,stroke-width .25s linear,stroke-opacity .25s linear;transition:fill-opacity .25s linear,stroke-width .25s linear,stroke-opacity .25s linear;stroke:#fff;stroke-width:1px;stroke-opacity:1;fill-opacity:.7}.nvd3.nv-pie .nv-pie-title{font-size:24px;fill:#13c4f996}.nvd3.nv-pie .nv-slice text{stroke:#000;stroke-width:0}.nvd3 .nv-groups .nv-point.hover{stroke-width:20px;stroke-opacity:.5}.nvd3.nv-sparklineplus .nv-hoverValue line{stroke:#333;stroke-width:1.5px}.nvd3.nv-sparklineplus,.nvd3.nv-sparklineplus g{pointer-events:all}.nvd3.nv-sparklineplus .nv-xValue,.nvd3.nv-sparklineplus .nv-yValue{stroke-width:0;font-size:.9em;font-weight:400}.nvd3.nv-sparklineplus .nv-yValue{stroke:#f66}.nvd3.nv-sparklineplus .nv-currentValue{font-weight:700;font-size:1.1em}.nvd3.nv-stackedarea path.nv-area{fill-opacity:.7;stroke-opacity:0;-webkit-transition:fill-opacity .25s linear,stroke-opacity .25s linear;transition:fill-opacity .25s linear,stroke-opacity .25s linear}.nvd3.nv-stackedarea path.nv-area.hover{fill-opacity:.9}.nvd3.nv-stackedarea .nv-groups .nv-point{stroke-opacity:0;fill-opacity:0}.nvtooltip{position:absolute;background-color:#fff;color:#000;padding:1px;border:1px solid rgba(0,0,0,.5);z-index:10000;display:block;font-family:Arial,sans-serif;font-size:13px;text-align:left;white-space:nowrap;-webkit-user-select:none;-ms-user-select:none;user-select:none;background:#fffc;border-radius:4px}.nvtooltip.with-transitions,.with-transitions .nvtooltip{-webkit-transition:opacity 50ms linear .2s;transition:opacity 50ms linear .2s}.nvtooltip.x-nvtooltip,.nvtooltip.y-nvtooltip{padding:8px}.nvtooltip h3{padding:4px 14px;line-height:18px;background-color:#f7f7f7bf;color:#000;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.nvtooltip p{padding:5px 14px}.nvtooltip span{display:inline-block;margin:2px 0}.nvtooltip table{margin:6px;border-spacing:0}.nvtooltip table td{padding:2px 9px 2px 0;vertical-align:middle}.nvtooltip table td.value{text-align:right;font-weight:700}.nvtooltip table td.percent{color:#a9a9a9}.nvtooltip table tr.highlight td{padding:1px 9px 1px 0;border-bottom-style:solid;border-bottom-width:1px;border-top-style:solid;border-top-width:1px}.nvtooltip table td.legend-color-guide div{vertical-align:middle;width:12px;height:12px;border:1px solid #999}.nvtooltip .footer{padding:3px;text-align:center}.nvtooltip-pending-removal{pointer-events:none;display:none}.nvd3 line.nv-guideline{stroke:#ccc}\n"], encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ChartComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ChartComponent, [{
             type: i0.Component,
             args: [{ selector: 'div[wmChart]', providers: [
                         base.provideAsWidgetRef(ChartComponent)
-                    ], encapsulation: i0.ViewEncapsulation.None, template: "<div class=\"panel-heading\" *ngIf=\"title\">\n    <h3 class=\"panel-title\">\n        <div class=\"pull-left\"><i class=\"app-icon panel-icon {{iconclass}}\" [class.ng-hide]=\"!iconclass\"></i></div>\n        <div class=\"heading\" [innerHTML]=\"title\"></div>\n        <div class=\"description\" *ngIf=\"subheading\" [innerHTML]=\"subheading\"></div>\n    </h3>\n</div>\n<div class=\"app-chart-inner\" [ngClass]=\"{'loading':isLoadInProgress, 'panel-body': title}\">\n    <svg></svg>\n    <div class=\"wm-content-info readonly-wrapper\" *ngIf=\"showContentLoadError && showNoDataMsg\">\n        <p class=\"wm-message\" [title]=\"hintMsg\" [ngClass]=\"{'error': invalidConfig}\" [innerText]=\"errMsg\"></p>\n    </div>\n    <div wmSpinner show.bind=\"isLoadInProgress\" caption.bind=\"loadingdatamsg\"></div>\n</div>\n", styles: [".nvtooltip h3,.nvtooltip p{margin:0;text-align:center}.nv-distx,.nv-disty,.nv-noninteractive,.nvd3 .nv-axis,.nvd3 .nv-interactiveGuideLine,.nvd3.nv-pie .nv-label,.nvd3.nv-sparklineplus g.nv-hoverValue,.nvtooltip{pointer-events:none}.nvd3 .nv-axis{opacity:1}.nvd3 .nv-axis path{fill:none;stroke:#000;stroke-opacity:.75;shape-rendering:crispEdges}.nvd3 .nv-axis .zero line,.nvd3 .nv-axis line.zero,.nvd3 .nv-axis path.domain{stroke-opacity:.75}.nvd3 .nv-axis.nv-x path.domain{stroke-opacity:0}.nvd3 .nv-axis line{fill:none;stroke:#e5e5e5;shape-rendering:crispEdges}.nvd3 .nv-axis .nv-axisMaxMin text,.nvtooltip table td.key.total{font-weight:700}.nvd3 .x .nv-axis .nv-axisMaxMin text,.nvd3 .x2 .nv-axis .nv-axisMaxMin text,.nvd3 .x3 .nv-axis .nv-axisMaxMin text{text-anchor:middle}.nvd3 .nv-axis.nv-disabled,.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check{opacity:0}.nvd3 .nv-bars rect{fill-opacity:.75;transition:fill-opacity .25s linear}.nvd3 .nv-bars rect.hover,.nvd3 .nv-boxplot circle:hover,.nvd3 .nv-boxplot rect:hover,.nvd3 .nv-candlestickBar .nv-ticks rect:hover,.nvd3 .nv-discretebar .nv-groups rect:hover,.nvd3 .nv-multibar .nv-groups rect:hover,.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,.nvd3 .nv-scatter .nv-point.hover,.nvd3.nv-bullet .nv-measure:hover,.nvd3.nv-linePlusBar .nv-bar rect:hover,.nvd3.nv-pie .hover path{fill-opacity:1}.nvd3 .nv-bars .hover rect{fill:#add8e6}.nvd3 .nv-bars text{fill:#0000}.nvd3 .nv-bars .hover text{fill:#000}.nvd3 .nv-discretebar .nv-groups rect,.nvd3 .nv-multibar .nv-groups rect,.nvd3 .nv-multibarHorizontal .nv-groups rect{stroke-opacity:0;transition:fill-opacity .25s linear}.nvd3 .nv-discretebar .nv-groups text,.nvd3 .nv-multibarHorizontal .nv-groups text{font-weight:700;fill:#000;stroke:#0000}.nvd3 .nv-boxplot circle{fill-opacity:.5}.nvd3 line.nv-boxplot-median{stroke:#000}.nv-boxplot-tick:hover{stroke-width:2.5px}.nvd3.nv-bullet{font:10px sans-serif}.nvd3.nv-bullet .nv-measure{fill-opacity:.8}.nvd3.nv-bullet .nv-marker{stroke:#000;stroke-width:2px}.nvd3.nv-bullet .nv-markerTriangle{stroke:#000;fill:#fff;stroke-width:1.5px}.nvd3.nv-bullet .nv-markerLine{stroke:#000;stroke-width:1.5px}.nvd3.nv-bullet .nv-tick line{stroke:#666;stroke-width:.5px}.nvd3.nv-bullet .nv-range.nv-s0{fill:#eee}.nvd3.nv-bullet .nv-range.nv-s1{fill:#ddd}.nvd3.nv-bullet .nv-range.nv-s2{fill:#ccc}.nvd3.nv-bullet .nv-title{font-size:14px;font-weight:700}.nvd3.nv-bullet .nv-subtitle{fill:#999}.nvd3.nv-bullet .nv-range{fill:#bababa;fill-opacity:.4}.nvd3.nv-bullet .nv-range:hover{fill-opacity:.7}.nvd3.nv-candlestickBar .nv-ticks .nv-tick,.nvd3.nv-ohlcBar .nv-ticks .nv-tick{stroke-width:1px}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover,.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover{stroke-width:2px}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect,.nvd3.nv-sparklineplus .nv-maxValue{stroke:#2ca02c;fill:#2ca02c}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect,.nvd3.nv-sparklineplus .nv-minValue{stroke:#d62728;fill:#d62728}.with-transitions .nv-candlestickBar .nv-ticks .nv-tick,.with-transitions .nvd3 .nv-groups .nv-point{transition:stroke-width .25s linear,stroke-opacity .25s linear}.nvd3.nv-candlestickBar .nv-ticks line{stroke:#333}.nv-force-node{stroke:#fff;stroke-width:1.5px}.nv-force-link{stroke:#999;stroke-opacity:.6}.nv-force-node text{stroke-width:0}.nvd3 .nv-check-box .nv-box{fill-opacity:0;stroke-width:2}.nvd3 .nv-check-box .nv-check{fill-opacity:0;stroke-width:4}.nvd3 .nv-hoverArea,.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check,.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point,.nvd3.nv-pie .nv-label rect{fill-opacity:0;stroke-opacity:0}.nvd3.nv-linePlusBar .nv-bar rect{fill-opacity:.75}.nvd3 .nv-groups path.nv-line,.nvd3.nv-sparkline path{fill:none}.nvd3 .nv-groups path.nv-area{stroke:none}.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point{fill-opacity:.5!important;stroke-opacity:.5!important}.nvd3 .nv-groups .nv-point.hover,.nvd3.nv-scatter .nv-groups .nv-point.hover{stroke-width:7px;fill-opacity:.95!important;stroke-opacity:.95!important}.nvd3 .nv-point-paths path{stroke:#aaa;stroke-opacity:0;fill:#eee;fill-opacity:0}.nvd3 .nv-indexLine{cursor:ew-resize}svg.nvd3-svg{-webkit-user-select:none;-moz-user-select:none;user-select:none;display:block;width:100%;height:100%}.nvtooltip.with-3d-shadow,.with-3d-shadow .nvtooltip{box-shadow:0 5px 10px #0003;border-radius:5px}.nvd3 text{font:12px Arial,sans-serif}.nvtooltip h3,.nvtooltip table td.key{font-weight:400}.nvd3 .title{font:700 14px Arial,sans-serif}.nvd3 .nv-background{fill:#fff;fill-opacity:0}.nvd3.nv-noData{font-size:18px;font-weight:700}.nv-brush .selection{fill-opacity:.125;shape-rendering:crispEdges}.nv-brush .handle path{fill:#eee;stroke:#666}.nvd3 .nv-legend .nv-series{cursor:pointer}.nvd3 .nv-legend .nv-disabled circle{fill-opacity:0}.nvd3 .nv-brush .selection{fill-opacity:0!important}.nvd3 .nv-brushBackground rect{stroke:#000;stroke-width:.4;fill:#fff;fill-opacity:.7}@media print{.nvd3 text{stroke-width:0;fill-opacity:1}}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive{stroke:#2ca02c}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative{stroke:#d62728}.nvd3 .background path{fill:none;stroke:#eee;stroke-opacity:.4;shape-rendering:crispEdges}.nvd3 .foreground path{fill:none;stroke-opacity:.7}.nvd3 .nv-parallelCoordinates-brush .selection{fill:#fff;fill-opacity:.6;stroke:gray;shape-rendering:crispEdges}.nvd3 .nv-parallelCoordinates .hover{fill-opacity:1;stroke-width:3px}.nvd3 .missingValuesline line{fill:none;stroke:#000;stroke-width:1;stroke-opacity:1;stroke-dasharray:5,5}.nvd3.nv-pie path{stroke-opacity:0;transition:fill-opacity .25s linear,stroke-width .25s linear,stroke-opacity .25s linear;stroke:#fff;stroke-width:1px;stroke-opacity:1;fill-opacity:.7}.nvd3.nv-pie .nv-pie-title{font-size:24px;fill:#13c4f996}.nvd3.nv-pie .nv-slice text{stroke:#000;stroke-width:0}.nvd3 .nv-groups .nv-point.hover{stroke-width:20px;stroke-opacity:.5}.nvd3.nv-sparklineplus .nv-hoverValue line{stroke:#333;stroke-width:1.5px}.nvd3.nv-sparklineplus,.nvd3.nv-sparklineplus g{pointer-events:all}.nvd3.nv-sparklineplus .nv-xValue,.nvd3.nv-sparklineplus .nv-yValue{stroke-width:0;font-size:.9em;font-weight:400}.nvd3.nv-sparklineplus .nv-yValue{stroke:#f66}.nvd3.nv-sparklineplus .nv-currentValue{font-weight:700;font-size:1.1em}.nvd3.nv-stackedarea path.nv-area{fill-opacity:.7;stroke-opacity:0;transition:fill-opacity .25s linear,stroke-opacity .25s linear}.nvd3.nv-stackedarea path.nv-area.hover{fill-opacity:.9}.nvd3.nv-stackedarea .nv-groups .nv-point{stroke-opacity:0;fill-opacity:0}.nvtooltip{position:absolute;background-color:#fff;color:#000;padding:1px;border:1px solid rgba(0,0,0,.5);z-index:10000;display:block;font-family:Arial,sans-serif;font-size:13px;text-align:left;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#fffc;border-radius:4px}.nvtooltip.with-transitions,.with-transitions .nvtooltip{transition:opacity 50ms linear .2s}.nvtooltip.x-nvtooltip,.nvtooltip.y-nvtooltip{padding:8px}.nvtooltip h3{padding:4px 14px;line-height:18px;background-color:#f7f7f7bf;color:#000;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.nvtooltip p{padding:5px 14px}.nvtooltip span{display:inline-block;margin:2px 0}.nvtooltip table{margin:6px;border-spacing:0}.nvtooltip table td{padding:2px 9px 2px 0;vertical-align:middle}.nvtooltip table td.value{text-align:right;font-weight:700}.nvtooltip table td.percent{color:#a9a9a9}.nvtooltip table tr.highlight td{padding:1px 9px 1px 0;border-bottom-style:solid;border-bottom-width:1px;border-top-style:solid;border-top-width:1px}.nvtooltip table td.legend-color-guide div{vertical-align:middle;width:12px;height:12px;border:1px solid #999}.nvtooltip .footer{padding:3px;text-align:center}.nvtooltip-pending-removal{pointer-events:none;display:none}.nvd3 line.nv-guideline{stroke:#ccc}\n"] }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i1__namespace.App }]; }, { title: [{
+                    ], encapsulation: i0.ViewEncapsulation.None, template: "<div class=\"panel-heading\" *ngIf=\"title\">\n    <h3 class=\"panel-title\">\n        <div class=\"pull-left\"><i class=\"app-icon panel-icon {{iconclass}}\" [class.ng-hide]=\"!iconclass\"></i></div>\n        <div class=\"heading\" [innerHTML]=\"title\"></div>\n        <div class=\"description\" *ngIf=\"subheading\" [innerHTML]=\"subheading\"></div>\n    </h3>\n</div>\n<div class=\"app-chart-inner\" [ngClass]=\"{'loading':isLoadInProgress, 'panel-body': title}\">\n    <svg></svg>\n    <div class=\"wm-content-info readonly-wrapper\" *ngIf=\"showContentLoadError && showNoDataMsg\">\n        <p class=\"wm-message\" [title]=\"hintMsg\" [ngClass]=\"{'error': invalidConfig}\" [innerText]=\"errMsg\"></p>\n    </div>\n    <div wmSpinner show.bind=\"isLoadInProgress\" caption.bind=\"loadingdatamsg\"></div>\n</div>\n", styles: [".nvtooltip h3,.nvtooltip p{margin:0;text-align:center}.nv-distx,.nv-disty,.nv-noninteractive,.nvd3 .nv-axis,.nvd3 .nv-interactiveGuideLine,.nvd3.nv-pie .nv-label,.nvd3.nv-sparklineplus g.nv-hoverValue,.nvtooltip{pointer-events:none}.nvd3 .nv-axis{opacity:1}.nvd3 .nv-axis path{fill:none;stroke:#000;stroke-opacity:.75;shape-rendering:crispEdges}.nvd3 .nv-axis .zero line,.nvd3 .nv-axis line.zero,.nvd3 .nv-axis path.domain{stroke-opacity:.75}.nvd3 .nv-axis.nv-x path.domain{stroke-opacity:0}.nvd3 .nv-axis line{fill:none;stroke:#e5e5e5;shape-rendering:crispEdges}.nvd3 .nv-axis .nv-axisMaxMin text,.nvtooltip table td.key.total{font-weight:700}.nvd3 .x .nv-axis .nv-axisMaxMin text,.nvd3 .x2 .nv-axis .nv-axisMaxMin text,.nvd3 .x3 .nv-axis .nv-axisMaxMin text{text-anchor:middle}.nvd3 .nv-axis.nv-disabled,.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check{opacity:0}.nvd3 .nv-bars rect{fill-opacity:.75;-webkit-transition:fill-opacity .25s linear;transition:fill-opacity .25s linear}.nvd3 .nv-bars rect.hover,.nvd3 .nv-boxplot circle:hover,.nvd3 .nv-boxplot rect:hover,.nvd3 .nv-candlestickBar .nv-ticks rect:hover,.nvd3 .nv-discretebar .nv-groups rect:hover,.nvd3 .nv-multibar .nv-groups rect:hover,.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,.nvd3 .nv-scatter .nv-point.hover,.nvd3.nv-bullet .nv-measure:hover,.nvd3.nv-linePlusBar .nv-bar rect:hover,.nvd3.nv-pie .hover path{fill-opacity:1}.nvd3 .nv-bars .hover rect{fill:#add8e6}.nvd3 .nv-bars text{fill:#0000}.nvd3 .nv-bars .hover text{fill:#000}.nvd3 .nv-discretebar .nv-groups rect,.nvd3 .nv-multibar .nv-groups rect,.nvd3 .nv-multibarHorizontal .nv-groups rect{stroke-opacity:0;-webkit-transition:fill-opacity .25s linear;transition:fill-opacity .25s linear}.nvd3 .nv-discretebar .nv-groups text,.nvd3 .nv-multibarHorizontal .nv-groups text{font-weight:700;fill:#000;stroke:#0000}.nvd3 .nv-boxplot circle{fill-opacity:.5}.nvd3 line.nv-boxplot-median{stroke:#000}.nv-boxplot-tick:hover{stroke-width:2.5px}.nvd3.nv-bullet{font:10px sans-serif}.nvd3.nv-bullet .nv-measure{fill-opacity:.8}.nvd3.nv-bullet .nv-marker{stroke:#000;stroke-width:2px}.nvd3.nv-bullet .nv-markerTriangle{stroke:#000;fill:#fff;stroke-width:1.5px}.nvd3.nv-bullet .nv-markerLine{stroke:#000;stroke-width:1.5px}.nvd3.nv-bullet .nv-tick line{stroke:#666;stroke-width:.5px}.nvd3.nv-bullet .nv-range.nv-s0{fill:#eee}.nvd3.nv-bullet .nv-range.nv-s1{fill:#ddd}.nvd3.nv-bullet .nv-range.nv-s2{fill:#ccc}.nvd3.nv-bullet .nv-title{font-size:14px;font-weight:700}.nvd3.nv-bullet .nv-subtitle{fill:#999}.nvd3.nv-bullet .nv-range{fill:#bababa;fill-opacity:.4}.nvd3.nv-bullet .nv-range:hover{fill-opacity:.7}.nvd3.nv-candlestickBar .nv-ticks .nv-tick,.nvd3.nv-ohlcBar .nv-ticks .nv-tick{stroke-width:1px}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover,.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover{stroke-width:2px}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect,.nvd3.nv-sparklineplus .nv-maxValue{stroke:#2ca02c;fill:#2ca02c}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect,.nvd3.nv-sparklineplus .nv-minValue{stroke:#d62728;fill:#d62728}.with-transitions .nv-candlestickBar .nv-ticks .nv-tick,.with-transitions .nvd3 .nv-groups .nv-point{-webkit-transition:stroke-width .25s linear,stroke-opacity .25s linear;transition:stroke-width .25s linear,stroke-opacity .25s linear}.nvd3.nv-candlestickBar .nv-ticks line{stroke:#333}.nv-force-node{stroke:#fff;stroke-width:1.5px}.nv-force-link{stroke:#999;stroke-opacity:.6}.nv-force-node text{stroke-width:0}.nvd3 .nv-check-box .nv-box{fill-opacity:0;stroke-width:2}.nvd3 .nv-check-box .nv-check{fill-opacity:0;stroke-width:4}.nvd3 .nv-hoverArea,.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check,.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point,.nvd3.nv-pie .nv-label rect{fill-opacity:0;stroke-opacity:0}.nvd3.nv-linePlusBar .nv-bar rect{fill-opacity:.75}.nvd3 .nv-groups path.nv-line,.nvd3.nv-sparkline path{fill:none}.nvd3 .nv-groups path.nv-area{stroke:none}.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point{fill-opacity:.5!important;stroke-opacity:.5!important}.nvd3 .nv-groups .nv-point.hover,.nvd3.nv-scatter .nv-groups .nv-point.hover{stroke-width:7px;fill-opacity:.95!important;stroke-opacity:.95!important}.nvd3 .nv-point-paths path{stroke:#aaa;stroke-opacity:0;fill:#eee;fill-opacity:0}.nvd3 .nv-indexLine{cursor:ew-resize}svg.nvd3-svg{-webkit-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;height:100%}.nvtooltip.with-3d-shadow,.with-3d-shadow .nvtooltip{-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px #0003;border-radius:5px}.nvd3 text{font:12px Arial,sans-serif}.nvtooltip h3,.nvtooltip table td.key{font-weight:400}.nvd3 .title{font:700 14px Arial,sans-serif}.nvd3 .nv-background{fill:#fff;fill-opacity:0}.nvd3.nv-noData{font-size:18px;font-weight:700}.nv-brush .selection{fill-opacity:.125;shape-rendering:crispEdges}.nv-brush .handle path{fill:#eee;stroke:#666}.nvd3 .nv-legend .nv-series{cursor:pointer}.nvd3 .nv-legend .nv-disabled circle{fill-opacity:0}.nvd3 .nv-brush .selection{fill-opacity:0!important}.nvd3 .nv-brushBackground rect{stroke:#000;stroke-width:.4;fill:#fff;fill-opacity:.7}@media print{.nvd3 text{stroke-width:0;fill-opacity:1}}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive{stroke:#2ca02c}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative{stroke:#d62728}.nvd3 .background path{fill:none;stroke:#eee;stroke-opacity:.4;shape-rendering:crispEdges}.nvd3 .foreground path{fill:none;stroke-opacity:.7}.nvd3 .nv-parallelCoordinates-brush .selection{fill:#fff;fill-opacity:.6;stroke:gray;shape-rendering:crispEdges}.nvd3 .nv-parallelCoordinates .hover{fill-opacity:1;stroke-width:3px}.nvd3 .missingValuesline line{fill:none;stroke:#000;stroke-width:1;stroke-opacity:1;stroke-dasharray:5,5}.nvd3.nv-pie path{stroke-opacity:0;-webkit-transition:fill-opacity .25s linear,stroke-width .25s linear,stroke-opacity .25s linear;transition:fill-opacity .25s linear,stroke-width .25s linear,stroke-opacity .25s linear;stroke:#fff;stroke-width:1px;stroke-opacity:1;fill-opacity:.7}.nvd3.nv-pie .nv-pie-title{font-size:24px;fill:#13c4f996}.nvd3.nv-pie .nv-slice text{stroke:#000;stroke-width:0}.nvd3 .nv-groups .nv-point.hover{stroke-width:20px;stroke-opacity:.5}.nvd3.nv-sparklineplus .nv-hoverValue line{stroke:#333;stroke-width:1.5px}.nvd3.nv-sparklineplus,.nvd3.nv-sparklineplus g{pointer-events:all}.nvd3.nv-sparklineplus .nv-xValue,.nvd3.nv-sparklineplus .nv-yValue{stroke-width:0;font-size:.9em;font-weight:400}.nvd3.nv-sparklineplus .nv-yValue{stroke:#f66}.nvd3.nv-sparklineplus .nv-currentValue{font-weight:700;font-size:1.1em}.nvd3.nv-stackedarea path.nv-area{fill-opacity:.7;stroke-opacity:0;-webkit-transition:fill-opacity .25s linear,stroke-opacity .25s linear;transition:fill-opacity .25s linear,stroke-opacity .25s linear}.nvd3.nv-stackedarea path.nv-area.hover{fill-opacity:.9}.nvd3.nv-stackedarea .nv-groups .nv-point{stroke-opacity:0;fill-opacity:0}.nvtooltip{position:absolute;background-color:#fff;color:#000;padding:1px;border:1px solid rgba(0,0,0,.5);z-index:10000;display:block;font-family:Arial,sans-serif;font-size:13px;text-align:left;white-space:nowrap;-webkit-user-select:none;-ms-user-select:none;user-select:none;background:#fffc;border-radius:4px}.nvtooltip.with-transitions,.with-transitions .nvtooltip{-webkit-transition:opacity 50ms linear .2s;transition:opacity 50ms linear .2s}.nvtooltip.x-nvtooltip,.nvtooltip.y-nvtooltip{padding:8px}.nvtooltip h3{padding:4px 14px;line-height:18px;background-color:#f7f7f7bf;color:#000;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.nvtooltip p{padding:5px 14px}.nvtooltip span{display:inline-block;margin:2px 0}.nvtooltip table{margin:6px;border-spacing:0}.nvtooltip table td{padding:2px 9px 2px 0;vertical-align:middle}.nvtooltip table td.value{text-align:right;font-weight:700}.nvtooltip table td.percent{color:#a9a9a9}.nvtooltip table tr.highlight td{padding:1px 9px 1px 0;border-bottom-style:solid;border-bottom-width:1px;border-top-style:solid;border-top-width:1px}.nvtooltip table td.legend-color-guide div{vertical-align:middle;width:12px;height:12px;border:1px solid #999}.nvtooltip .footer{padding:3px;text-align:center}.nvtooltip-pending-removal{pointer-events:none;display:none}.nvd3 line.nv-guideline{stroke:#ccc}\n"] }]
+        }], () => [{ type: i0__namespace.Injector }, { type: i1__namespace.App }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { title: [{
                 type: i0.HostBinding,
                 args: ['class.panel']
             }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(ChartComponent, { className: "ChartComponent", filePath: "chart.component.ts", lineNumber: 139 }); })();
 
     const components = [
         ChartComponent
@@ -1772,7 +1785,7 @@
                 i3.CommonModule,
                 base.WmComponentsModule] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ChartModule, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(ChartModule, [{
             type: i0.NgModule,
             args: [{
                     imports: [

app-ng-runtime/components/chart/chart.component.d.ts

@@ -84,16 +84,16 @@ export declare class ChartComponent extends StylableComponent implements AfterVi
     getCutomizedOptions(prop: any, fields: any): any;
     setNumericandNonPrimaryColumns(): void;
     handleDataSet(newVal: any): void;
-    _plotChartProxy: any;
+    _plotChartProxy: import("lodash").DebouncedFunc<any>;
     setDonutCenterLabel(labelValue: any): void;
     onPropertyChange(key: any, newVal: any, oldVal?: any): void;
     handleLoading(data: any): void;
     hideTooltip(): void;
     onStyleChange(key: any, newVal: any, oldVal: any): void;
-    constructor(inj: Injector, app: App);
+    constructor(inj: Injector, app: App, explicitContext: any);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     redraw: any;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ChartComponent, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChartComponent, [null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ChartComponent, "div[wmChart]", never, {}, {}, never, never, false, never>;
 }

app-ng-runtime/components/chart/chart.utils.d.ts

@@ -7,9 +7,9 @@ export declare const isBubbleChart: (type: any) => boolean;
 export declare const isColumnChart: (type: any) => boolean;
 export declare const isAreaChart: (type: any) => boolean;
 export declare const isPieType: (type: any) => boolean;
-export declare const isChartDataJSON: (type: any) => any;
-export declare const isChartDataArray: (type: any) => any;
-export declare const isLineTypeChart: (type: any) => any;
+export declare const isChartDataJSON: (type: any) => boolean;
+export declare const isChartDataArray: (type: any) => boolean;
+export declare const isLineTypeChart: (type: any) => boolean;
 export declare const isAxisDomainSupported: (type: any) => boolean;
 export declare const getBarSpacingValue: (value: any, prop: any) => any;
 export declare const getRadiusValue: (value: any, prop: any) => any;