@wavemaker/app-ng-runtime 12.0.0-next.45001 → 12.0.0-next.45005

app-ng-runtime/components/chart/fesm2022/index.mjs

@@ -1,12 +1,13 @@
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, HostBinding, NgModule } from '@angular/core';
+import { Component, ViewEncapsulation, Inject, Optional, HostBinding, NgModule } from '@angular/core';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { register, PROP_STRING, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, StylableComponent, styler, APPLY_STYLES_TYPE, provideAsWidgetRef, WmComponentsModule } from '@wm/components/base';
+import { PROP_STRING, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, register, StylableComponent, APPLY_STYLES_TYPE, styler, provideAsWidgetRef, WmComponentsModule } from '@wm/components/base';
 import * as i2 from '@wm/components/basic';
 import { BasicModule } from '@wm/components/basic';
 import * as i1 from '@wm/core';
 import { isEmptyObject, prettifyLabels, isNumberType, triggerFn, DataSource, getClonedObject, isDataSourceEqual, removeAttr } from '@wm/core';
+import { invert, includes, split, isFinite, isUndefined, forEach, isString, isArray, get, minBy, maxBy, map, first, orderBy, groupBy, max, fill, forEachRight, concat, replace, uniq, intersection, isEmpty, keys, isObject, debounce } from 'lodash-es';
 
 const registerProps = () => {
     register('wm-chart', new Map([
@@ -150,7 +151,7 @@ const dateList = ['01/01/2001', '01/01/2002', '01/01/2003'], themes = {
     'small': 0.3,
     'medium': 0.6,
     'large': 0.7
-}, barSpacingMapInvert = _.invert(barSpacingMap), donutRatioMapInvert = _.invert(donutRatioMap), tickformats = {
+}, barSpacingMapInvert = invert(barSpacingMap), donutRatioMapInvert = invert(donutRatioMap), tickformats = {
     'Thousand': {
         'prefix': 'K',
         'divider': 1000
@@ -189,11 +190,11 @@ const isAreaChart = type => type === 'Area';
 // 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 => includes(dataTypeJSON, type) || !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 => 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 => 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
@@ -394,7 +395,7 @@ const getDataType = widgetContext => {
     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), 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))) {
@@ -404,7 +405,7 @@ const isAxisDomainValid = (widgetContext, axis) => {
 };
 // Check whether min and max values are finite or not
 const areMinMaxValuesValid = values => {
-    if (_.isFinite(values.min) && _.isFinite(values.max)) {
+    if (isFinite(values.min) && isFinite(values.max)) {
         return true;
     }
     return false;
@@ -444,8 +445,8 @@ const initProperties = (widgetContext, propertyValueMap) => {
     if (!propertyValueMap || isEmptyObject(propertyValueMap)) {
         propertyValueMap = {};
     }
-    _.forEach(basicProperties, prop => {
-        if (_.isUndefined(propertyValueMap[prop])) {
+    forEach(basicProperties, prop => {
+        if (isUndefined(propertyValueMap[prop])) {
             propertyValueMap[prop] = widgetContext[prop];
         }
     });
@@ -680,7 +681,7 @@ const initChart = (widgetContext, xDomainValues, yDomainValues, propertyValueMap
     }
     // 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 (!includes(chartTypes, widgetContext.type)) {
         chart = nv.models.multiBarChart()
             .x(d => d.x)
             .y(d => d.y);
@@ -750,10 +751,10 @@ const initChart = (widgetContext, xDomainValues, yDomainValues, propertyValueMap
         }
     }
     // 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 (isString(propertyValueMap.customcolors) && propertyValueMap.customcolors) {
+        colors = split(propertyValueMap.customcolors, ',');
     }
-    if (_.isArray(propertyValueMap.customcolors)) {
+    if (isArray(propertyValueMap.customcolors)) {
         colors = propertyValueMap.customcolors;
     }
     showLegend = isShowLegend(propertyValueMap.showlegend);
@@ -793,11 +794,13 @@ const postPlotChartProcess = (widgetContext, isPreview) => {
 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.ɵɵelement(0, "div", 9);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("innerHTML", ctx_r2.subheading, i0.ɵɵsanitizeHtml);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("innerHTML", ctx_r0.subheading, i0.ɵɵsanitizeHtml);
 } }
 function ChartComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4)(1, "h3", 5)(2, "div", 6);
@@ -811,24 +814,20 @@ function ChartComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵclassMapInterpolate1("app-icon panel-icon ", ctx_r0.iconclass, "");
     i0.ɵɵclassProp("ng-hide", !ctx_r0.iconclass);
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("innerHTML", ctx_r0.title, i0.ɵɵsanitizeHtml);
-    i0.ɵɵadvance(1);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r0.subheading);
 } }
-const _c1 = function (a0) { return { "error": a0 }; };
 function ChartComponent_div_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(0, "div", 10);
     i0.ɵɵelement(1, "p", 11);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("title", ctx_r1.hintMsg)("ngClass", i0.ɵɵpureFunction1(3, _c1, ctx_r1.invalidConfig))("innerText", ctx_r1.errMsg);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", ctx_r0.hintMsg)("ngClass", i0.ɵɵ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 options = {
     'Bubble': ['bubblesize', 'shape']
@@ -875,8 +874,8 @@ const getBooleanValue = val => {
 const getLodashOrderByFormat = orderby => {
     let columns;
     const orderByColumns = [], orders = [];
-    _.forEach(_.split(orderby, ','), function (col) {
-        columns = _.split(col, ':');
+    forEach(split(orderby, ','), function (col) {
+        columns = split(col, ':');
         orderByColumns.push(columns[0]);
         orders.push(columns[1]);
     });
@@ -924,7 +923,7 @@ class ChartComponent extends StylableComponent {
         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 = get(dataObj, xKey);
         // If x axis is other than number type then add indexes
         if (isLineTypeChart(this.type) && !isNumberType(this.xAxisDataType)) {
             // Verification to get the unique data keys
@@ -954,7 +953,7 @@ class ChartComponent extends StylableComponent {
             input: [[10, 20], [20, 30], [30, 40]];
             min x: 10
         */
-        xValues.min = _.minBy(datum.values, dataObject => dataObject.x || dataObject[0]);
+        xValues.min = minBy(datum.values, dataObject => dataObject.x || dataObject[0]);
         /*
          compute the max x value
          eg: When data has objects
@@ -964,7 +963,7 @@ class ChartComponent extends StylableComponent {
             input: [[10, 20], [20, 30], [30, 40]];
             max x: 30
          */
-        xValues.max = _.maxBy(datum.values, dataObject => dataObject.x || dataObject[0]);
+        xValues.max = maxBy(datum.values, dataObject => dataObject.x || dataObject[0]);
         return xValues;
     }
     // Getting the min and max values among all the y values
@@ -986,13 +985,17 @@ class ChartComponent extends StylableComponent {
             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]; }));
+        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];
+            }));
         });
         // 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 = minBy(minValues, dataObject => dataObject.y || dataObject[1]);
+        yValues.max = 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
@@ -1001,7 +1004,7 @@ class ChartComponent extends StylableComponent {
     }
     // 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 = get(dataObj, yKey), yVal = parseFloat(value) || value, size = parseFloat(dataObj[this.bubblesize]) || 2;
         let dataPoint = {};
         if (isChartDataJSON(this.type)) {
             dataPoint.x = xVal;
@@ -1042,10 +1045,10 @@ class ChartComponent extends StylableComponent {
         }
         let datum = [], yAxisKey, shapes = [], values = [];
         const xAxisKey = this.xaxisdatakey, yAxisKeys = this.yaxisdatakey ? this.yaxisdatakey.split(',') : [], dataSet = this.chartData;
-        if (_.isArray(dataSet)) {
+        if (isArray(dataSet)) {
             if (isPieType(this.type)) {
                 yAxisKey = yAxisKeys[0];
-                datum = _.map(dataSet, (dataObj, index) => {
+                datum = map(dataSet, (dataObj, index) => {
                     if (!isEmptyObject(dataSet[index])) {
                         return this.valueFinder(dataSet[index], xAxisKey, yAxisKey);
                     }
@@ -1057,9 +1060,9 @@ class ChartComponent extends StylableComponent {
                     shapes = this.shape === 'random' ? allShapes : this.shape;
                 }
                 yAxisKeys.forEach((yAxisKey, series) => {
-                    values = _.map(dataSet, (dataObj, index) => {
+                    values = map(dataSet, (dataObj, index) => {
                         if (!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, (isArray(shapes) && shapes[series]) || this.shape);
                         }
                     });
                     values = this.getValidData(values);
@@ -1083,21 +1086,21 @@ class ChartComponent extends StylableComponent {
     // 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 = first(split(this.yaxisdatakey, ','));
         this.xDataKeyArr = [];
-        queryResponse = _.orderBy(queryResponse, _.split(this.groupby, ','));
+        queryResponse = orderBy(queryResponse, split(this.groupby, ','));
         if (this.orderby) {
             orderByDetails = getLodashOrderByFormat(this.orderby);
-            queryResponse = _.orderBy(queryResponse, orderByDetails.columns, orderByDetails.orders);
+            queryResponse = orderBy(queryResponse, orderByDetails.columns, orderByDetails.orders);
         }
-        queryResponse = _.groupBy(queryResponse, groupingColumn);
+        queryResponse = 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 = max(map(queryResponse, obj => obj.length));
         }
-        _.forEach(queryResponse, (values, groupKey) => {
-            groupValues = isAreaChart ? _.fill(new Array(maxLength), [0, 0]) : [];
-            _.forEachRight(values, (value, index) => {
+        forEach(queryResponse, (values, groupKey) => {
+            groupValues = isAreaChart ? fill(new Array(maxLength), [0, 0]) : [];
+            forEachRight(values, (value, index) => {
                 groupValues[index] = this.valueFinder(value, this.xaxisdatakey, yAxisKey, index);
             });
             groupData = {
@@ -1131,14 +1134,14 @@ class ChartComponent extends StylableComponent {
                     columns.push(visualGroupingColumn);
                 }
                 if (groupbyColumns.length) {
-                    columns = _.concat(columns, groupbyColumns);
+                    columns = 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 => {
+            forEach(yAxisKeys, key => {
                 if (key !== this.aggregationcolumn) {
                     columns.push(key);
                 }
@@ -1166,16 +1169,17 @@ class ChartComponent extends StylableComponent {
             return;
         }
         if (this.isGroupByEnabled()) {
-            groupByFields = _.split(this.groupby, ',');
+            groupByFields = split(this.groupby, ',');
         }
         if (this.orderby) {
-            sortExpr = _.replace(this.orderby, /:/g, ' ');
-            columns = _.uniq(_.concat(columns, groupByFields, [this.aggregationcolumn]));
+            sortExpr = replace(this.orderby, /:/g, ' ');
+            columns = uniq(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 => {
+            forEach(intersection(columns, orderByColumns), col => {
                 colAlias = getValidAliasName(col);
-                sortExpr = _.replace(sortExpr, col, colAlias);
+                // @ts-ignore
+                sortExpr = replace(sortExpr, col, colAlias);
             });
         }
         if (this.isAggregationEnabled()) {
@@ -1197,17 +1201,17 @@ class ChartComponent extends StylableComponent {
             // 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) => {
+            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] = get(responseContent, aggregationAlias) || get(responseContent, this.aggregationcolumn);
                 }
-                obj[this.xaxisdatakey] = _.get(responseContent, xAxisAliasKey) || _.get(responseContent, this.xaxisdatakey);
+                obj[this.xaxisdatakey] = get(responseContent, xAxisAliasKey) || get(responseContent, this.xaxisdatakey);
                 yAxisKeys.forEach((yAxisKey, index) => {
                     obj[yAxisKey] = responseContent[yAxisAliasKeys[index]];
-                    obj[yAxisKey] = _.get(responseContent, yAxisAliasKeys[index]) || _.get(responseContent, yAxisKey);
+                    obj[yAxisKey] = get(responseContent, yAxisAliasKeys[index]) || get(responseContent, yAxisKey);
                 });
                 chartData.push(obj);
             });
@@ -1333,7 +1337,11 @@ class ChartComponent extends StylableComponent {
                     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
@@ -1372,7 +1380,7 @@ class ChartComponent extends StylableComponent {
             }
         }
         // prepare text style props object and set
-        _.forEach(styleProps, (value, key) => {
+        forEach(styleProps, (value, key) => {
             if (key === 'fontsize' || key === 'fontunit') {
                 styleObj[value] = this.fontsize + this.fontunit;
             }
@@ -1425,7 +1433,7 @@ class ChartComponent extends StylableComponent {
         }
         // get the chart object
         chart = initChart(this, xDomainValues, yDomainValues, null, !this.binddataset);
-        if (_.isArray(this._processedData)) {
+        if (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) {
@@ -1516,7 +1524,7 @@ class ChartComponent extends StylableComponent {
         this.yaxisdatakey = defaultColumns[1] || null;
     }
     getCutomizedOptions(prop, fields) {
-        const groupByColumns = _.split(this.groupby, ','), aggColumns = _.split(this.aggregationcolumn, ',');
+        const groupByColumns = split(this.groupby, ','), aggColumns = split(this.aggregationcolumn, ',');
         if (!this.binddataset) {
             return fields;
         }
@@ -1556,7 +1564,7 @@ class ChartComponent extends StylableComponent {
             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 = uniq(concat(groupByColumns, aggColumns));
                 }
                 break;
             case 'bubblesize':
@@ -1574,12 +1582,12 @@ class ChartComponent extends StylableComponent {
         this.numericColumns = [];
         this.nonPrimaryColumns = [];
         // Fetching all the columns
-        if (this.dataset && !_.isEmpty(propertiesMap)) {
+        if (this.dataset && !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) => {
+            forEach(Object.keys(columns), (key) => {
                 type = columns[key].type;
                 if (isNumberType(type)) {
                     this.numericColumns.push(key);
@@ -1602,9 +1610,9 @@ class ChartComponent extends StylableComponent {
             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 === '' && 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 (!isArray(this.chartData) && isObject(this.chartData)) {
             this.chartData = [this.chartData];
         }
         if (newVal && newVal.filterFields) {
@@ -1674,7 +1682,7 @@ class ChartComponent extends StylableComponent {
                 this._plotChartProxy();
                 break;
         }
-        if (_.includes(advanceDataProps, key)) {
+        if (includes(advanceDataProps, key)) {
             this._plotChartProxy();
         }
     }
@@ -1704,8 +1712,8 @@ class ChartComponent extends StylableComponent {
                 break;
         }
     }
-    constructor(inj, app) {
-        super(inj, WIDGET_CONFIG);
+    constructor(inj, app, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
         this.app = app;
         this.iconclass = '';
         this.nonPrimaryColumns = [];
@@ -1713,7 +1721,7 @@ class ChartComponent extends StylableComponent {
         this.chartData = [];
         this._processedData = [];
         this._subsciptions = [];
-        this._plotChartProxy = _.debounce(this.plotChartProxy.bind(this), 100);
+        this._plotChartProxy = debounce(this.plotChartProxy.bind(this), 100);
         this.redraw = this._plotChartProxy.bind(this);
         styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER, ['fontsize', 'fontunit', 'color', 'fontfamily', 'fontweight', 'fontstyle', 'textdecoration']);
         // generate unique id for the component
@@ -1730,7 +1738,7 @@ class ChartComponent extends StylableComponent {
     ngAfterViewInit() {
         super.ngAfterViewInit();
         // For old projects
-        if (!_.includes(['outside', 'inside', 'hide'], this.showlabels)) {
+        if (!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';
@@ -1753,7 +1761,7 @@ class ChartComponent extends StylableComponent {
         });
         super.ngOnDestroy();
     }
-    static { this.ɵfac = function ChartComponent_Factory(t) { return new (t || ChartComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.App)); }; }
+    static { this.ɵfac = function ChartComponent_Factory(t) { return new (t || ChartComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.App), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ChartComponent, selectors: [["div", "wmChart", ""]], hostVars: 2, hostBindings: function ChartComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassProp("panel", ctx.title);
         } }, features: [i0.ɵɵProvidersFeature([
@@ -1769,21 +1777,27 @@ class ChartComponent extends StylableComponent {
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.title);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(3, _c2, ctx.isLoadInProgress, ctx.title));
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(3, _c1, ctx.isLoadInProgress, ctx.title));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.showContentLoadError && ctx.showNoDataMsg);
-        } }, dependencies: [i2.SpinnerComponent, i3.NgClass, i3.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.SpinnerComponent, i3.NgClass, i3.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.ɵsetClassMetadata(ChartComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChartComponent, [{
         type: Component,
         args: [{ selector: 'div[wmChart]', providers: [
                     provideAsWidgetRef(ChartComponent)
-                ], encapsulation: 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.Injector }, { type: i1.App }]; }, { title: [{
+                ], encapsulation: 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.Injector }, { type: i1.App }, { type: undefined, decorators: [{
+                type: Inject,
+                args: ['EXPLICIT_CONTEXT']
+            }, {
+                type: Optional
+            }] }], { title: [{
             type: HostBinding,
             args: ['class.panel']
         }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ChartComponent, { className: "ChartComponent", filePath: "chart.component.ts", lineNumber: 139 }); })();
 
 const components = [
     ChartComponent
@@ -1795,7 +1809,7 @@ class ChartModule {
             CommonModule,
             WmComponentsModule] }); }
 }
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChartModule, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChartModule, [{
         type: NgModule,
         args: [{
                 imports: [