@wavemaker-ai/app-ng-runtime 1.0.0-next.27766

package/components/chart/fesm2022/index.mjs

@@ -0,0 +1,1775 @@
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { SpinnerComponent } from '@wm/components/basic/spinner';
+import * as i0 from '@angular/core';
+import { HostBinding, Inject, Optional, ViewEncapsulation, Component } from '@angular/core';
+import * as i1 from '@wm/core';
+import { isEmptyObject, prettifyLabels, isNumberType, triggerFn, DataSource, getClonedObject, isDataSourceEqual, removeAttr } from '@wm/core';
+import { register, PROP_STRING, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, StylableComponent, styler, APPLY_STYLES_TYPE, WmAppIconComponent, provideAsWidgetRef } from '@wm/components/base';
+import { invert, includes, split, isFinite, forEach, isUndefined, isString, isArray, get, minBy, maxBy, map, first, orderBy, groupBy, max, fill, forEachRight, concat, replace, uniq, intersection, isEmpty, keys, isObject, debounce } from 'lodash-es';
+import * as momentLib from 'moment';
+
+const registerProps = () => {
+    register('wm-chart', new Map([
+        ['aggregation', { value: 'none', ...PROP_STRING }],
+        ['aggregationcolumn', PROP_STRING],
+        ['areaviewtype', { value: 'stack', ...PROP_STRING }],
+        ['barspacing', { value: 'medium', ...PROP_STRING }],
+        ['bubblesize', PROP_STRING],
+        ['centerlabel', PROP_STRING],
+        ['class', PROP_STRING],
+        ['customcolors', PROP_ANY],
+        ['dataset', PROP_ANY],
+        ['datasource', PROP_STRING],
+        ['donutratio', { value: 'medium', ...PROP_STRING }],
+        ['formattype', { value: '', PROP_STRING }],
+        ['groupby', PROP_STRING],
+        ['height', { value: '210px', PROP_STRING }],
+        ['highlightpoints', PROP_BOOLEAN],
+        ['iconclass', PROP_STRING],
+        ['iconurl', PROP_STRING],
+        ['interpolation', { value: 'linear', ...PROP_STRING }],
+        ['labelthreshold', { value: 0.01, ...PROP_NUMBER }],
+        ['labeltype', { value: 'percent', ...PROP_STRING }],
+        ['legendtype', { value: 'furious', ...PROP_STRING }],
+        ['linethickness', PROP_STRING],
+        ['loadingdatamsg', { value: 'Loading...', ...PROP_STRING }],
+        ['name', PROP_STRING],
+        ['nodatamessage', { value: 'No Data Available.', ...PROP_STRING }],
+        ['offset', PROP_STRING],
+        ['offsetbottom', { value: 55, ...PROP_NUMBER }],
+        ['offsetleft', { value: 75, ...PROP_NUMBER }],
+        ['offsetright', { value: 25, ...PROP_NUMBER }],
+        ['offsettop', { value: 25, ...PROP_NUMBER }],
+        ['orderby', PROP_STRING],
+        ['reducexticks', { value: true, ...PROP_BOOLEAN }],
+        ['shape', { value: 'circle', ...PROP_STRING }],
+        ['show', { value: true, ...PROP_BOOLEAN }],
+        ['showlabels', { value: 'outside', ...PROP_STRING }],
+        ['showlabelsoutside', { value: true, ...PROP_BOOLEAN }],
+        ['showlegend', { value: 'top', ...PROP_STRING }],
+        ['showvalues', { value: false, ...PROP_BOOLEAN }],
+        ['showxaxis', { value: true, ...PROP_BOOLEAN }],
+        ['showxdistance', { value: false, ...PROP_BOOLEAN }],
+        ['showyaxis', { value: true, ...PROP_BOOLEAN }],
+        ['showydistance', { value: false, ...PROP_BOOLEAN }],
+        ['staggerlabels', { value: false, ...PROP_BOOLEAN }],
+        ['subheading', PROP_STRING],
+        ['theme', PROP_STRING],
+        ['title', PROP_STRING],
+        ['tooltips', { value: true, ...PROP_BOOLEAN }],
+        ['type', PROP_STRING],
+        ['viewtype', { value: 'Grouped', ...PROP_STRING }],
+        ['xaxisdatakey', PROP_STRING],
+        ['xaxislabel', PROP_STRING],
+        ['xaxislabeldistance', { value: 12, ...PROP_NUMBER }],
+        ['xdateformat', PROP_STRING],
+        ['xdomain', { value: 'Default', ...PROP_STRING }],
+        ['xnumberformat', PROP_STRING],
+        ['xunits', PROP_STRING],
+        ['yaxisdatakey', PROP_STRING],
+        ['yaxislabel', PROP_STRING],
+        ['yaxislabeldistance', { value: 12, ...PROP_NUMBER }],
+        ['ydomain', { value: 'Default', ...PROP_STRING }],
+        ['ynumberformat', PROP_STRING],
+        ['yunits', PROP_STRING]
+    ]));
+};
+
+const moment = momentLib.default || window['moment'];
+const chartTypes = ['Column', 'Line', 'Area', 'Cumulative Line', 'Bar', 'Pie', 'Donut', 'Bubble'], allShapes = ['circle', 'square', 'diamond', 'cross', 'triangle-up', 'triangle-down'];
+const dateList = ['01/01/2001', '01/01/2002', '01/01/2003'], themes = {
+    'Terrestrial': {
+        colors: ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5'],
+        tooltip: {
+            'backgroundColor': '#de7d28',
+            'textColor': '#FFFFFF'
+        }
+    },
+    'Annabelle': {
+        colors: ['#393b79', '#5254a3', '#6b6ecf', '#9c9ede', '#637939', '#8ca252', '#b5cf6b', '#cedb9c', '#8c6d31', '#bd9e39', '#e7ba52', '#e7cb94', '#843c39', '#ad494a', '#d6616b', '#e7969c', '#7b4173', '#a55194', '#ce6dbd', '#de9ed6'],
+        tooltip: {
+            'backgroundColor': '#2e306f',
+            'textColor': '#FFFFFF'
+        }
+    },
+    'Azure': {
+        colors: ['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#e6550d', '#fd8d3c', '#fdae6b', '#fdd0a2', '#31a354', '#74c476', '#a1d99b', '#c7e9c0', '#756bb1', '#9e9ac8', '#bcbddc', '#dadaeb', '#636363', '#969696', '#bdbdbd', '#d9d9d9'],
+        tooltip: {
+            'backgroundColor': '#3182bd',
+            'textColor': '#FFFFFF'
+        }
+    },
+    'Retro': {
+        colors: ['#0ca7a1', '#ffa615', '#334957', '#acc5c2', '#988f90', '#8accc9', '#515151', '#f27861', '#36c9fd', '#794668', '#0f709d', '#0d2738', '#44be78', '#4a1839', '#6a393f', '#557d8b', '#6c331c', '#1c1c1c', '#861500', '#09562a'],
+        tooltip: {
+            'backgroundColor': '#80513a',
+            'textColor': '#FFFFFF'
+        }
+    },
+    'Mellow': {
+        colors: ['#f0dcbf', '#88c877', '#aeb918', '#2e2c23', '#ddddd2', '#dfe956', '#4c963b', '#5d3801', '#e1eec3', '#cd8472', '#fcfab3', '#9a4635', '#9295ad', '#2e3f12', '#565677', '#557d8b', '#4f4d02', '#0c0c1b', '#833324', '#24120e'],
+        tooltip: {
+            'backgroundColor': '#7c9e73',
+            'textColor': '#FFFFFF'
+        }
+    },
+    'Orient': {
+        colors: ['#a80000', '#cc6c3c', '#f0e400', '#000084', '#fccc6c', '#009c6c', '#cc309c', '#78cc00', '#fc84e4', '#48e4fc', '#4878d8', '#186c0c', '#606060', '#a8a8a8', '#000000', '#d7d7d7', '#75a06e', '#190d0b', '#888888', '#694b84'],
+        tooltip: {
+            'backgroundColor': '#c14242',
+            'textColor': '#FFFFFF'
+        }
+    },
+    'GrayScale': {
+        colors: ['#141414', '#353535', '#5b5b5b', '#848484', '#a8a8a8', '#c3c3c3', '#e0e0e0', '#c8c8c8', '#a5a5a5', '#878787', '#656565', '#4e4e4e', '#303030', '#1c1c1c', '#4f4f4f', '#3b3b3b', '#757575', '#606060', '#868686', '#c1c1c1'],
+        tooltip: {
+            'backgroundColor': '#575757',
+            'textColor': '#FFFFFF'
+        }
+    },
+    'Flyer': {
+        colors: ['#3f454c', '#5a646e', '#848778', '#cededf', '#74c4dd', '#0946ed', '#380bb1', '#000ff0', '#f54a23', '#1db262', '#bca3aa', '#ffa500', '#a86b32', '#63a18c', '#56795e', '#934343', '#b75f5f', '#752d2d', '#4e1111', '#920606'],
+        tooltip: {
+            'backgroundColor': '#47637c',
+            'textColor': '#FFFFFF'
+        }
+    },
+    'Luminosity': {
+        colors: ['#FFFFFF', '#e4e4e4', '#00bcd4', '#f0dd2f', '#00aabf', '#018376', '#e91e63', '#39e5d4', '#ff6d6d', '#00ff76', '#ff9800', '#969696', '#ff4200', '#e00000', '#95cbe5', '#5331ff', '#fff4a7', '#e7a800', '#0061e4', '#d5e7ff'],
+        tooltip: {
+            'backgroundColor': '#47637c',
+            'textColor': '#FFFFFF'
+        }
+    }
+}, basicProperties = ['xaxislabel', 'yaxislabel', 'xunits', 'yunits', 'xnumberformat', 'xdateformat', 'ynumberformat',
+    'showvalues', 'showlabels', 'viewtype', 'areaviewtype', 'staggerlabels', 'reducexticks', 'offsettop', 'offsetbottom', 'offsetright', 'offsetleft',
+    'barspacing', 'xaxislabeldistance', 'yaxislabeldistance', 'theme', 'labeltype', 'donutratio', 'showlabelsoutside', 'showxdistance', 'showydistance', 'shape', 'nodatamessage', 'captions', 'showxaxis', 'showyaxis',
+    'centerlabel', 'customcolors', 'showlegend', 'legendtype', 'xdomain', 'ydomain', 'tooltips', 'linethickness', 'highlightpoints', 'interpolation', 'labelthreshold'], barSpacingMap = {
+    'small': 0.3,
+    'medium': 0.5,
+    'large': 0.8
+}, donutRatioMap = {
+    'small': 0.3,
+    'medium': 0.6,
+    'large': 0.7
+}, barSpacingMapInvert = invert(barSpacingMap), donutRatioMapInvert = invert(donutRatioMap), tickformats = {
+    'Thousand': {
+        'prefix': 'K',
+        'divider': 1000
+    },
+    'Million': {
+        'prefix': 'M',
+        'divider': 1000000
+    },
+    'Billion': {
+        'prefix': 'B',
+        'divider': 1000000000
+    }
+}, chartId = '#preview-chart', dataTypeJSON = ['Column', 'Line', 'Pie', 'Bar', 'Donut', 'Bubble'], // Charts that supports the data to be JSON;
+lineTypeCharts = ['Line', 'Area', 'Cumulative Line'], // Charts that does not supports the string type of data in the xaxis in the nvd3;
+dataTypeArray = ['Cumulative Line', 'Area'], // Charts that supports the data to be Array
+SAMPLE_DATA = {
+    'group1': 'Europe',
+    'group2': 'Asia',
+    'group3': 'America',
+    'group4': 'Australia'
+};
+// returns true if chart type is pie
+const isPieChart = type => type === 'Pie';
+// returns true if chart type is line
+const isLineChart = type => type === 'Line';
+// returns true if chart type is bar
+const isBarChart = type => type === 'Bar';
+// returns true if chart type is donut
+const isDonutChart = type => type === 'Donut';
+// returns true if chart type is bubble
+const isBubbleChart = type => type === 'Bubble';
+// returns true if chart type is column
+const isColumnChart = type => type === 'Column';
+// returns true if chart type is area
+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);
+// The format of chart data is array of objects in case of the following types of chart
+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);
+// X/Y Domain properties are supported only for Column and Area charts
+const isAxisDomainSupported = type => isColumnChart(type) || isAreaChart(type);
+// Returns bar spacing value
+const getBarSpacingValue = (value, prop) => {
+    if (prop === 'value') {
+        return barSpacingMap[value];
+    }
+    if (prop === 'key') {
+        return barSpacingMapInvert[value];
+    }
+};
+// Returns radius value
+const getRadiusValue = (value, prop) => {
+    if (prop === 'value') {
+        return donutRatioMap[value];
+    }
+    if (prop === 'key') {
+        return donutRatioMapInvert[value];
+    }
+};
+// Returns labels config
+const getLabelValues = (showlabels, showlabelsoutside, prop) => {
+    const labelsConfig = {};
+    switch (showlabels) {
+        case 'hide':
+            labelsConfig.showlabels = false;
+            break;
+        case 'inside':
+            labelsConfig.showlabels = true;
+            labelsConfig.showlabelsoutside = false;
+            break;
+        case 'outside':
+            labelsConfig.showlabels = true;
+            labelsConfig.showlabelsoutside = true;
+            break;
+    }
+    return labelsConfig;
+};
+// Construct the sample data
+const constructSampleData = (dataType, yaxisLength, shape) => {
+    let first_series = [], second_series = [], third_series = [], first_series_array = [], second_series_array = [], third_series_array = [], first_series_bubble = [], second_series_bubble = [], third_series_bubble = [], data = [];
+    switch (dataType) {
+        case 'jsonFormat':
+            first_series = [
+                { 'x': '01/01/2001', 'y': 4000000 },
+                { 'x': '01/01/2002', 'y': 1000000 },
+                { 'x': '01/01/2003', 'y': 5000000 }
+            ];
+            second_series = [
+                { 'x': '01/01/2001', 'y': 3000000 },
+                { 'x': '01/01/2002', 'y': 4000000 },
+                { 'x': '01/01/2003', 'y': 7000000 }
+            ];
+            third_series = [
+                { 'x': '01/01/2001', 'y': 2000000 },
+                { 'x': '01/01/2002', 'y': 8000000 },
+                { 'x': '01/01/2003', 'y': 6000000 }
+            ];
+            data[0] = {
+                values: first_series,
+                key: SAMPLE_DATA.group1
+            };
+            if (yaxisLength >= 2) {
+                data[1] = {
+                    values: second_series,
+                    key: SAMPLE_DATA.group2
+                };
+            }
+            if (yaxisLength >= 3) {
+                data[2] = {
+                    values: third_series,
+                    key: SAMPLE_DATA.group3
+                };
+            }
+            break;
+        case 'lineChartFormat':
+            first_series = [
+                { 'x': 1, 'y': 4000000 },
+                { 'x': 2, 'y': 1000000 },
+                { 'x': 3, 'y': 5000000 }
+            ];
+            second_series = [
+                { 'x': 1, 'y': 3000000 },
+                { 'x': 2, 'y': 4000000 },
+                { 'x': 3, 'y': 7000000 }
+            ];
+            third_series = [
+                { 'x': 1, 'y': 2000000 },
+                { 'x': 2, 'y': 8000000 },
+                { 'x': 3, 'y': 6000000 }
+            ];
+            data[0] = {
+                values: first_series,
+                key: SAMPLE_DATA.group1
+            };
+            if (yaxisLength >= 2) {
+                data[1] = {
+                    values: second_series,
+                    key: SAMPLE_DATA.group2
+                };
+            }
+            if (yaxisLength >= 3) {
+                data[2] = {
+                    values: third_series,
+                    key: SAMPLE_DATA.group3
+                };
+            }
+            break;
+        case 'arrayFormat':
+            first_series_array = [
+                [1, 4000000],
+                [2, 1000000],
+                [3, 5000000]
+            ];
+            second_series_array = [
+                [1, 3000000],
+                [2, 4000000],
+                [3, 7000000]
+            ];
+            third_series_array = [
+                [1, 2000000],
+                [2, 8000000],
+                [3, 6000000]
+            ];
+            data[0] = {
+                values: first_series_array,
+                key: SAMPLE_DATA.group1
+            };
+            if (yaxisLength >= 2) {
+                data[1] = {
+                    values: second_series_array,
+                    key: SAMPLE_DATA.group2
+                };
+            }
+            if (yaxisLength >= 3) {
+                data[2] = {
+                    values: third_series_array,
+                    key: SAMPLE_DATA.group3
+                };
+            }
+            break;
+        case 'bubbleFormat':
+            shape = shape === 'random' ? allShapes[Math.floor(Math.random() * allShapes.length)] : shape;
+            first_series_bubble = [
+                { 'x': 80.66, 'y': 33739900, 'size': 78, 'shape': shape },
+                { 'x': 79.84, 'y': 81902300, 'size': 90, 'shape': shape },
+                { 'x': 78.6, 'y': 5523100, 'size': 45, 'shape': shape }
+            ];
+            second_series_bubble = [
+                { 'x': 72.73, 'y': 79716200, 'size': 98, 'shape': shape },
+                { 'x': 80.05, 'y': 61801600, 'size': 20, 'shape': shape },
+                { 'x': 72.49, 'y': 73137200, 'size': 34, 'shape': shape }
+            ];
+            third_series_bubble = [
+                { 'x': 68.09, 'y': 33739900, 'size': 45, 'shape': shape },
+                { 'x': 81.55, 'y': 7485600, 'size': 78, 'shape': shape },
+                { 'x': 68.60, 'y': 141850000, 'size': 56, 'shape': shape }
+            ];
+            data[0] = {
+                values: first_series_bubble,
+                key: SAMPLE_DATA.group1
+            };
+            if (yaxisLength >= 2) {
+                data[1] = {
+                    values: second_series_bubble,
+                    key: SAMPLE_DATA.group2
+                };
+            }
+            if (yaxisLength >= 3) {
+                data[2] = {
+                    values: third_series_bubble,
+                    key: SAMPLE_DATA.group3
+                };
+            }
+            break;
+        case 'pieChartFormat':
+            data = [
+                { 'x': SAMPLE_DATA.group1, 'y': 1000000 },
+                { 'x': SAMPLE_DATA.group2, 'y': 2000000 },
+                { 'x': SAMPLE_DATA.group3, 'y': 3000000 },
+                { 'x': SAMPLE_DATA.group4, 'y': 4000000 }
+            ];
+            break;
+    }
+    return data;
+};
+const getDataType = widgetContext => {
+    const type = widgetContext.type;
+    if (isLineChart(type)) {
+        return 'lineChartFormat';
+    }
+    if (isPieType(type)) {
+        return 'pieChartFormat';
+    }
+    if (isBubbleChart(type)) {
+        return 'bubbleFormat';
+    }
+    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);
+// 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))) {
+        return true;
+    }
+    return false;
+};
+// Check whether min and max values are finite or not
+const areMinMaxValuesValid = values => {
+    if (isFinite(values.min) && isFinite(values.max)) {
+        return true;
+    }
+    return false;
+};
+const getYScaleMinValue = value => {
+    const _min = Math.floor(value);
+    /* If the number has a) decimal part returning floor value - 0.1
+     b) no decimal part returning floor value - 1 */
+    return Math.abs(value) - _min > 0 ? value - 0.1 : _min - 1;
+};
+// Chooses the data points of line/cumulative line/area chart and highlights them
+const highlightPoints = (id, highlightpoints) => {
+    const chartSvg = id ? d3.select('#wmChart' + id + ' svg') : d3.select(chartId + ' svg');
+    if (highlightpoints) {
+        chartSvg.selectAll('.nv-point')
+            .style('stroke-width', '6px')
+            .style('fill-opacity', '0.95')
+            .style('stroke-opacity', '0.95');
+    }
+    else {
+        chartSvg.selectAll('.nv-point')
+            .style('stroke-width', '0px')
+            .style('fill-opacity', '0');
+    }
+};
+// Chooses the line of line/cumulative line and increases the thickness of it
+const setLineThickness = (id, thickness) => {
+    const chartSvg = id ? d3.select('#wmChart' + id + ' svg') : d3.select(chartId + ' svg');
+    thickness = thickness || 1.5;
+    const lines = chartSvg.selectAll('.nv-line');
+    if (lines.size() !== 0) {
+        lines.style('stroke-width', thickness);
+    }
+};
+// Constructing a common key value map for preview and canvas mode
+const initProperties = (widgetContext, propertyValueMap) => {
+    if (!propertyValueMap || isEmptyObject(propertyValueMap)) {
+        propertyValueMap = {};
+    }
+    forEach(basicProperties, prop => {
+        if (isUndefined(propertyValueMap[prop])) {
+            propertyValueMap[prop] = widgetContext[prop];
+        }
+    });
+    return propertyValueMap;
+};
+const getNumberValue = (value, callback) => {
+    return isNaN(parseInt(value, 10)) ? callback(value, 'value') : value;
+};
+// Formats the given value according to date format
+const getDateFormatedData = (dateFormat, d) => {
+    dateFormat = dateFormat || '%x';
+    /**
+     * if date value is string "20-05-2019" then new Date(value) return 20May2019 with current time in India,
+     * whereas this will return 19May2019 with time lagging for few hours.
+     * This is because it returns UTC time i.e. Coordinated Universal Time (UTC).
+     * To create date in local time use moment
+     */
+    if (dateFormat == '%c') {
+        dateFormat = '%a %b %e %X %Y';
+    }
+    return d3.timeFormat(dateFormat)(new Date(moment(moment(d).format()).valueOf()));
+};
+const removeTrailingZeros = value => {
+    if (!value) {
+        return value;
+    }
+    // Convert value to a string if it's a number
+    const stringValue = typeof value === 'number' ? value.toString() : value;
+    // Remove trailing zeros
+    return stringValue.replace(/\.0+([A-Za-z]*)$/, '$1').replace(/\.([1-9]+)0+([A-Za-z]*)$/, '.$1$2');
+};
+// Formats the given value according to number format
+const getNumberFormatedData = (numberFormat, d) => {
+    let formattedData, divider, prefix;
+    // formatting the data based on number format selected
+    if (numberFormat) {
+        let numberFormatter;
+        if (numberFormat == 'Thousand' || numberFormat == 'Million' || numberFormat == 'Billion') {
+            numberFormatter = d3.format(',.2s');
+        }
+        else if (numberFormat == '%') {
+            numberFormatter = d3.format('.2%');
+        }
+        else if (numberFormat == '.f') {
+            numberFormatter = d3.format('.2f');
+        }
+        else {
+            numberFormatter = d3.format(numberFormat);
+        }
+        formattedData = numberFormatter(d);
+        // Getting the respective divider[1000,1000000,1000000000] based on the number format choosen
+        divider = (tickformats[numberFormat] && tickformats[numberFormat].divider) || 0;
+        prefix = tickformats[numberFormat] && tickformats[numberFormat].prefix;
+        if (prefix && divider !== 0) {
+            formattedData = d3.format('.2f')(d / divider) + prefix;
+        }
+    }
+    else {
+        // Auto formatting the data when no formating option is chosen
+        formattedData = d >= 1000 ? d3.format('.1s')(d) : d;
+    }
+    formattedData = removeTrailingZeros(formattedData);
+    return formattedData;
+};
+// Set the visibility property of the chart x,y axis due to a bug in the nvd3
+const toggleAxisShow = (property, value) => {
+    const $xAxis = d3.select(chartId + ' g.nv-axis.nv-x'), $yAxis = d3.select(chartId + ' g.nv-axis.nv-y');
+    if (property === 'showxaxis') {
+        $xAxis.style('visibility', value ? 'visible' : 'hidden');
+    }
+    else {
+        $yAxis.style('visibility', value ? 'visible' : 'hidden');
+    }
+};
+const modifyLegendPosition = (widgetContext, position, id) => {
+    const showLegend = isShowLegend(widgetContext.showlegend), chart_Id = id ? '#wmChart' + id : chartId, legendWrap = d3.select(chart_Id + ' .nv-legendWrap'), legendPadding = 5;
+    // Return when showlegend is false
+    if (!showLegend || !legendWrap['_groups'][0][0]) {
+        return;
+    }
+    if (position === 'bottom') {
+        const legendWrapHeight = legendWrap['_groups'][0][0].getBoundingClientRect().height, wrap = d3.select(chart_Id + ' .nv-wrap'), wrapTransform = (wrap && wrap.attr('transform')) ? wrap.attr('transform').replace(/, /g, ',') : '', coordinates = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(wrapTransform), getChartHeight = () => {
+            let chartHeight = $(chart_Id + ' svg>.nvd3.nv-wrap')[0].getBoundingClientRect().height;
+            if (chartHeight === 0) { // fix for IE
+                chartHeight = ($(chart_Id + ' svg')[0].getBoundingClientRect().height - (legendWrapHeight + 15));
+            }
+            return chartHeight;
+        };
+        legendWrap.attr('transform', 'translate(0 , ' + (getChartHeight() - legendWrapHeight - legendPadding) + ')');
+        if (coordinates) {
+            wrap.attr('transform', 'translate(' + coordinates[1] + ',' + legendPadding + ')');
+        }
+    }
+};
+// Returns value if legend need to shown or not
+const isShowLegend = value => {
+    // Old projects will have either true or false
+    if (value === 'false' || value === false) {
+        return false;
+    }
+    if (value === 'true' || value === true) {
+        return true;
+    }
+    // New projects will have either 'Hide Legend', 'Show Top', 'Show Bottom'
+    return value === 'hide' ? false : true;
+};
+/**
+ * Customise the tooltip for donut & pie charts and also for charts having only one value attached to yaxis
+ * @param key
+ * @param label
+ */
+const customiseTooltip = (chart, propertyValueMap, widgetContext, label) => {
+    d3.selectAll('.nvtooltip').style('opacity', 0);
+    chart.tooltip.contentGenerator((key, propValueMap) => {
+        let xValue = key.data.x, yValue;
+        yValue = getNumberFormatedData(propValueMap?.ynumberformat || widgetContext?.ynumberformat || propertyValueMap?.ynumberformat, key.data.y);
+        if (isPieType(widgetContext.type)) {
+            label = key.data.x;
+            xValue = '';
+        }
+        return '<table>' +
+            '<tbody>' +
+            '<tr class="value"><b>' + xValue +
+            '</b></tr>' +
+            '<tr>' +
+            '<td class="legend-color-guide"><div style="background-color:' + key.color + ';"></div></td>' +
+            '<td class="key">' + label + '</td>' +
+            '<td class="value">' + yValue + '</td>' +
+            '</tr>' +
+            '</tbody>' +
+            '</table>';
+    });
+};
+// intializes the chart obejct
+const initChart = (widgetContext, xDomainValues, yDomainValues, propertyValueMap, isPreview) => {
+    propertyValueMap = initProperties(widgetContext, propertyValueMap);
+    let chart, colors = [], xaxislabel, yaxislabel, labelConfig, radius, barSpacing, showLegend, xAxisValue, hasMultipleYValues;
+    const xValue = {}, yValue = {};
+    switch (widgetContext.type) {
+        case 'Column':
+            barSpacing = getNumberValue(propertyValueMap.barspacing, getBarSpacingValue) || barSpacingMap.medium;
+            chart = nv.models.multiBarChart()
+                .x(d => d.x)
+                .y(d => d.y)
+                .reduceXTicks(propertyValueMap.reducexticks)
+                .rotateLabels(0)
+                .showControls(false)
+                .stacked(propertyValueMap.viewtype === 'Stacked' ? true : false)
+                .groupSpacing(barSpacing);
+            break;
+        case 'Cumulative Line':
+            chart = nv.models.cumulativeLineChart()
+                .x(d => d[0])
+                .y(d => d[1])
+                .showControls(false)
+                .useInteractiveGuideline(propertyValueMap.tooltips)
+                .interpolate(propertyValueMap.interpolation);
+            break;
+        case 'Line':
+            chart = nv.models.lineChart()
+                .useInteractiveGuideline(propertyValueMap.tooltips)
+                .interpolate(propertyValueMap.interpolation);
+            break;
+        case 'Area':
+            chart = nv.models.stackedAreaChart()
+                .x(d => d.x)
+                .y(d => d.y)
+                .clipEdge(true)
+                .showControls(false)
+                .style(propertyValueMap.areaviewtype)
+                .useInteractiveGuideline(propertyValueMap.tooltips)
+                .interpolate(propertyValueMap.interpolation);
+            break;
+        case 'Bar':
+            barSpacing = getNumberValue(propertyValueMap.barspacing, getBarSpacingValue) || barSpacingMap.medium;
+            chart = nv.models.multiBarHorizontalChart()
+                .x(d => d.x)
+                .y(d => d.y)
+                .showControls(false)
+                .stacked(propertyValueMap.viewtype === 'Stacked' ? true : false)
+                .showValues(propertyValueMap.showvalues)
+                .groupSpacing(barSpacing);
+            break;
+        case 'Pie':
+        case 'Donut':
+            labelConfig = getLabelValues(propertyValueMap.showlabels, propertyValueMap.showlabelsoutside, 'value');
+            radius = getNumberValue(propertyValueMap.donutratio, getRadiusValue) || donutRatioMap.medium;
+            chart = nv.models.pieChart()
+                .x(d => d.x)
+                .y(d => d.y)
+                .showLabels(labelConfig.showlabels)
+                .labelType(propertyValueMap.labeltype)
+                .valueFormat(d3.format('%'))
+                .title(propertyValueMap.centerlabel)
+                .labelThreshold(propertyValueMap.labelthreshold || 0.01)
+                .labelsOutside(labelConfig.showlabelsoutside);
+            if (isDonutChart(widgetContext.type)) {
+                chart.donut(true)
+                    .donutRatio(radius);
+            }
+            if (propertyValueMap.labeltype === 'key-value') {
+                chart.labelType(d => d.data.x + ' ' + d.data.y);
+            }
+            break;
+        case 'Bubble':
+            chart = nv.models.scatterChart()
+                .x(d => d.x)
+                .y(d => d.y)
+                .showDistX(propertyValueMap.showxdistance)
+                .showDistY(propertyValueMap.showydistance);
+            break;
+    }
+    if (xDomainValues) {
+        xValue.min = xDomainValues.min.x || xDomainValues.min[0];
+        xValue.max = xDomainValues.max.x || xDomainValues.max[0];
+        // If the values on the x axis are string then min max values gives Infinity
+        if (areMinMaxValuesValid(xValue)) {
+            // Reducing the min value to 0.1 so the min value is not missed out
+            xValue.min = getYScaleMinValue(xValue.min);
+            chart.xDomain([xValue.min, xValue.max]);
+        }
+    }
+    if (yDomainValues) {
+        // Reducing the min value to 1 so the min value is not missed out
+        yValue.min = yDomainValues.min.y || yDomainValues.min[1];
+        yValue.max = yDomainValues.max.y || yDomainValues.max[1];
+        // If the values on the y axis are string or invalid then min max values gives Infinity
+        if (areMinMaxValuesValid(yValue)) {
+            // Reducing the min value to 1 so the min value is not missed out
+            yValue.min = getYScaleMinValue(yValue.min);
+            chart.yDomain([yValue.min, yValue.max]);
+        }
+    }
+    // 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)) {
+        chart = nv.models.multiBarChart()
+            .x(d => d.x)
+            .y(d => d.y);
+    }
+    if (isPieType(widgetContext.type)) {
+        // In case of pie/donut chart formatting the values of it
+        if (propertyValueMap.labeltype === 'percent') {
+            chart.valueFormat(d3.format('%'));
+        }
+        else {
+            chart.valueFormat(d => getNumberFormatedData(propertyValueMap.ynumberformat, d));
+        }
+        // Customizing the tooltips in case of the pie and donut when labelType is value
+        customiseTooltip(chart, propertyValueMap, widgetContext);
+    }
+    else {
+        chart.showXAxis(propertyValueMap.showxaxis)
+            .showYAxis(propertyValueMap.showyaxis);
+        chart.legendPosition(propertyValueMap.showlegend);
+        // Setting the labels if they are specified explicitly or taking the axiskeys chosen
+        xaxislabel = propertyValueMap.xaxislabel || prettifyLabels(widgetContext.xaxisdatakey) || 'x caption';
+        yaxislabel = propertyValueMap.yaxislabel || prettifyLabels(widgetContext.yaxisdatakey) || 'y caption';
+        // Checking if y axis has multiple values
+        if (widgetContext.yaxisdatakey && widgetContext.yaxisdatakey.split(',').length > 1) {
+            hasMultipleYValues = true;
+        }
+        // Customizing the tooltip to show yaxislabel, only if the y axis contains one value
+        if (!hasMultipleYValues && !isBubbleChart(widgetContext.type)) {
+            customiseTooltip(chart, propertyValueMap, widgetContext, yaxislabel);
+        }
+        // Adding the units to the captions if they are specified
+        xaxislabel += propertyValueMap.xunits ? '(' + propertyValueMap.xunits + ')' : '';
+        yaxislabel += propertyValueMap.yunits ? '(' + propertyValueMap.yunits + ')' : '';
+        chart.xAxis
+            .axisLabel(xaxislabel)
+            .axisLabelDistance(propertyValueMap.xaxislabeldistance)
+            .staggerLabels(propertyValueMap.staggerlabels);
+        // If date format set format based date format
+        if (propertyValueMap.xdateformat || (isPreview && !isBubbleChart(widgetContext.type))) {
+            if (isLineTypeChart(widgetContext.type)) {
+                chart.xAxis.tickFormat(d => {
+                    // get the actual value
+                    xAxisValue = isPreview ? dateList[d - 1] : widgetContext.xDataKeyArr[d];
+                    return getDateFormatedData(propertyValueMap.xdateformat, xAxisValue);
+                });
+            }
+            else {
+                chart.xAxis.tickFormat(d => getDateFormatedData(propertyValueMap.xdateformat, d));
+            }
+        }
+        else if (propertyValueMap.xnumberformat) {
+            chart.xAxis.tickFormat(d => getNumberFormatedData(propertyValueMap.xnumberformat, d));
+        }
+        else {
+            if (isLineTypeChart(widgetContext.type)) {
+                // get the actual value
+                chart.xAxis.tickFormat(d => widgetContext.xDataKeyArr[d]);
+            }
+        }
+        chart.yAxis
+            .axisLabel(yaxislabel)
+            .axisLabelDistance(propertyValueMap.yaxislabeldistance)
+            .staggerLabels(propertyValueMap.staggerlabels)
+            .tickFormat(d => getNumberFormatedData(propertyValueMap?.ynumberformat, d));
+        if (isBarChart(widgetContext.type)) {
+            chart.valueFormat(d => getNumberFormatedData(propertyValueMap?.ynumberformat, d));
+        }
+    }
+    // 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 (isArray(propertyValueMap.customcolors)) {
+        colors = propertyValueMap.customcolors;
+    }
+    showLegend = isShowLegend(propertyValueMap.showlegend);
+    chart.showLegend(showLegend)
+        .margin({ top: propertyValueMap.offsettop, right: propertyValueMap.offsetright, bottom: propertyValueMap.offsetbottom, left: propertyValueMap.offsetleft })
+        .color(colors.length ? colors : themes[propertyValueMap.theme].colors);
+    chart.tooltip.enabled(propertyValueMap.tooltips);
+    widgetContext.message = propertyValueMap.nodatamessage || 'No data found';
+    // setting the no data message
+    chart.noData(widgetContext.message);
+    if (isLineTypeChart(widgetContext.type) && widgetContext.highlightpoints) {
+        chart.dispatch.on('stateChange', () => {
+            setTimeout(() => postPlotChartProcess(widgetContext), 100);
+        });
+    }
+    if (widgetContext.showlegend && (widgetContext.type === 'Donut' || widgetContext.type === 'Pie')) {
+        if (widgetContext.showlegend === 'right') {
+            chart.legendPosition('right');
+        }
+    }
+    return chart;
+};
+// @ts-ignore
+const postPlotChartProcess = (widgetContext, isPreview) => {
+    const id = isPreview ? null : 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);
+        highlightPoints(id, widgetContext.highlightpoints);
+    }
+    // Modifying the legend position only when legend is shown
+    // if (widgetContext.showlegend) {
+    //     modifyLegendPosition(widgetContext, widgetContext.showlegend, id);
+    // }
+};
+// @ts-ignore
+const getDateList = () => dateList;
+
+const WIDGET_CONFIG = { widgetType: 'wm-chart', hostClass: 'app-chart' };
+const options = {
+    'Bubble': ['bubblesize', 'shape']
+}, NONE = 'none', advanceDataProps = ['aggregation', 'aggregationcolumn', 'groupby', 'orderby'], 
+// XPaths to get actual data of data points in charts
+chartDataPointXpath = {
+    'Column': 'rect.nv-bar',
+    'Bar': 'g.nv-bar',
+    'Area': '.nv-stackedarea .nv-point',
+    'Cumulative Line': '.nv-cumulativeLine .nv-scatterWrap path.nv-point',
+    'Line': '.nv-lineChart .nv-scatterWrap path.nv-point',
+    'Pie': '.nv-pieChart .nv-slice path',
+    'Donut': '.nv-pieChart .nv-slice path',
+    'Bubble': '.nv-scatterChart .nv-point-paths path'
+}, 
+// all properties of the chart
+allOptions = ['bubblesize', 'shape'], styleProps = {
+    'fontunit': 'font-size',
+    'fontsize': 'font-size',
+    'color': 'fill',
+    'fontfamily': 'font-family',
+    'fontweight': 'font-weight',
+    'fontstyle': 'font-style',
+    'textdecoration': 'text-decoration'
+}, 
+// Getting the relevant aggregation function based on the selected option
+aggregationFnMap = {
+    'average': 'AVG',
+    'count': 'COUNT',
+    'maximum': 'MAX',
+    'minimum': 'MIN',
+    'sum': 'SUM'
+};
+const getBooleanValue = val => {
+    if (val === true || val === 'true') {
+        return true;
+    }
+    if (val === false || val === 'false') {
+        return false;
+    }
+    return val;
+};
+// returns orderby columns and their orders in two separate arrays
+const getLodashOrderByFormat = orderby => {
+    let columns;
+    const orderByColumns = [], orders = [];
+    forEach(split(orderby, ','), function (col) {
+        columns = split(col, ':');
+        orderByColumns.push(columns[0]);
+        orders.push(columns[1]);
+    });
+    return {
+        'columns': orderByColumns,
+        'orders': orders
+    };
+};
+// Replacing the '.' by the '$' because '.' is not supported in the alias names
+const getValidAliasName = aliasName => aliasName ? aliasName.replace(/\./g, '$') : null;
+// Applying the font related styles for the chart
+const setTextStyle = (properties, id) => {
+    const charttext = d3.select('#wmChart' + id + ' svg').selectAll('text');
+    if (!charttext.empty()) {
+        charttext.style(properties);
+    }
+};
+const angle = d => {
+    const a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
+    return a > 90 ? a - 180 : a;
+};
+class ChartComponent extends StylableComponent {
+    static { this.initializeProps = registerProps(); }
+    isGroupByEnabled() {
+        return !!(this.groupby && this.groupby !== NONE);
+    }
+    // Check if x and y axis that are chosen are valid to plot chart
+    isValidAxis() {
+        // Check if x axis and y axis are chosen and are not equal
+        return this.binddataset ? (this.xaxisdatakey && this.yaxisdatakey) : true;
+    }
+    // Check if aggregation is chosen
+    isAggregationEnabled() {
+        return !!((this.isGroupByEnabled() && this.aggregation !== NONE && this.aggregationcolumn));
+    }
+    // Check if either groupby, aggregation or orderby is chosen
+    isDataFilteringEnabled() {
+        /*Query need to be triggered if any of the following cases satisfy
+        * 1. Group By and aggregation both chosen
+        * 2. Only Order By is chosen
+        * */
+        return this.isAggregationEnabled() || (!this.isVisuallyGrouped && this.orderby);
+    }
+    /*Charts like Line,Area,Cumulative Line does not support any other datatype
+        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);
+        // 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
+            this.xDataKeyArr.push(value);
+            // Check if it is of type Date
+            if (value instanceof Date) {
+                return value;
+            }
+            else {
+                return index;
+            }
+        }
+        return value;
+    }
+    // Getting the min and max values among all the x values
+    getXMinMaxValues(datum) {
+        if (!datum) {
+            return;
+        }
+        const xValues = {};
+        /*
+         compute the min x value
+         eg: When data has objects
+            input: [{x:1, y:2}, {x:2, y:3}, {x:3, y:4}]
+            min x: 1
+         eg: When data has arrays
+            input: [[10, 20], [20, 30], [30, 40]];
+            min x: 10
+        */
+        xValues.min = minBy(datum.values, dataObject => dataObject.x || dataObject[0]);
+        /*
+         compute the max x value
+         eg: When data has objects
+            input: [{x:1, y:2}, {x:2, y:3}, {x:3, y:4}]
+            max x: 3
+         eg: When data has arrays
+            input: [[10, 20], [20, 30], [30, 40]];
+            max x: 30
+         */
+        xValues.max = maxBy(datum.values, dataObject => dataObject.x || dataObject[0]);
+        return xValues;
+    }
+    // Getting the min and max values among all the y values
+    getYMinMaxValues(datum) {
+        const yValues = {}, minValues = [], maxValues = [];
+        if (!datum) {
+            return;
+        }
+        /*
+         Getting the min and max y values among all the series of data
+         compute the min y value
+         eg: When data has objects
+            input: [[{x:1, y:2}, {x:2, y:3}, {x:3, y:4}], [{x:2, y:3}, {x:3, y:4}, {x:4, y:5}]]
+            min y values : '2'(among first set) & '3'(among second set)
+            max y values : '4'(among first set) & '5'(among second set)
+
+         eg: When data has arrays
+            input: [[[10, 20], [20, 30], [30, 40]], [[20, 30], [30, 40], [40, 50]]]
+            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];
+            }));
+        });
+        // 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]);
+        return yValues;
+    }
+    // If the x-axis values are undefined, we return empty array else we return the values
+    getValidData(values) {
+        return (values.length === 1 && values[0] === undefined) ? [] : values;
+    }
+    // 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;
+        let dataPoint = {};
+        if (isChartDataJSON(this.type)) {
+            dataPoint.x = xVal;
+            dataPoint.y = yVal;
+            // only Bubble chart has the third dimension
+            if (isBubbleChart(this.type)) {
+                dataPoint.size = size;
+                dataPoint.shape = shape || 'circle';
+            }
+        }
+        else if (isChartDataArray(this.type)) {
+            dataPoint = [xVal, yVal];
+        }
+        // Adding actual unwrapped data to chart data to use at the time of selected data point of chart event
+        dataPoint._dataObj = dataObj;
+        return dataPoint;
+    }
+    // Setting appropriate error messages
+    setErrMsg(message) {
+        if (this.showNoDataMsg) {
+            this.showContentLoadError = true;
+            this.invalidConfig = true;
+            // TODO: Set the locale from the message
+            this.errMsg = ''; // $rootScope.locale[message];
+        }
+    }
+    processChartData() {
+        this.sampleData = getSampleData(this);
+        // scope variables used to keep the actual key values for x-axis
+        this.xDataKeyArr = [];
+        // Plotting the chart with sample data when the chart dataset is not bound
+        if (!this.binddataset) {
+            this.xDataKeyArr = getDateList();
+            return this.sampleData;
+        }
+        if (!this.chartData || !this.chartData.length) {
+            return [];
+        }
+        let datum = [], yAxisKey, shapes = [], values = [];
+        const xAxisKey = this.xaxisdatakey, yAxisKeys = this.yaxisdatakey ? this.yaxisdatakey.split(',') : [], dataSet = this.chartData;
+        if (isArray(dataSet)) {
+            if (isPieType(this.type)) {
+                yAxisKey = yAxisKeys[0];
+                datum = map(dataSet, (dataObj, index) => {
+                    if (!isEmptyObject(dataSet[index])) {
+                        return this.valueFinder(dataSet[index], xAxisKey, yAxisKey);
+                    }
+                });
+                datum = this.getValidData(datum);
+            }
+            else {
+                if (isBubbleChart(this.type)) {
+                    shapes = this.shape === 'random' ? allShapes : this.shape;
+                }
+                yAxisKeys.forEach((yAxisKey, series) => {
+                    values = map(dataSet, (dataObj, index) => {
+                        if (!isEmptyObject(dataSet[index])) {
+                            return this.valueFinder(dataSet[index], xAxisKey, yAxisKey, index, (isArray(shapes) && shapes[series]) || this.shape);
+                        }
+                    });
+                    values = this.getValidData(values);
+                    datum.push({
+                        values: values,
+                        key: prettifyLabels(yAxisKey)
+                    });
+                });
+            }
+        }
+        return datum;
+    }
+    setChartData(data) {
+        if (data) {
+            this._processedData = data;
+        }
+    }
+    getChartData() {
+        return this._processedData;
+    }
+    // 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, ','));
+        this.xDataKeyArr = [];
+        queryResponse = orderBy(queryResponse, split(this.groupby, ','));
+        if (this.orderby) {
+            orderByDetails = getLodashOrderByFormat(this.orderby);
+            queryResponse = orderBy(queryResponse, orderByDetails.columns, orderByDetails.orders);
+        }
+        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));
+        }
+        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 = {
+                key: groupKey,
+                values: groupValues
+            };
+            chartData.push(groupData);
+        });
+        return chartData;
+    }
+    /*Decides whether the data should be visually grouped or not
+            Visually grouped when a different column is choosen in the group by other than x and y axis and aggregation is not chosen*/
+    getGroupingDetails() {
+        if (this.isGroupByEnabled() && !this.isAggregationEnabled()) {
+            let isVisuallyGrouped = false, visualGroupingColumn, groupingExpression, columns = [], groupingColumnIndex;
+            const groupbyColumns = this.groupby && this.groupby !== NONE ? this.groupby.split(',') : [], yAxisKeys = this.yaxisdatakey ? this.yaxisdatakey.split(',') : [];
+            if (groupbyColumns.length > 1) {
+                /*Getting the group by column which is not selected either in x or y axis*/
+                groupbyColumns.every((column, index) => {
+                    if (this.xaxisdatakey !== column && $.inArray(column, yAxisKeys) === -1) {
+                        isVisuallyGrouped = true;
+                        visualGroupingColumn = column;
+                        groupingColumnIndex = index;
+                        groupbyColumns.splice(groupingColumnIndex, 1);
+                        return false;
+                    }
+                    return true;
+                });
+                // Constructing the groupby expression
+                if (visualGroupingColumn) {
+                    columns.push(visualGroupingColumn);
+                }
+                if (groupbyColumns.length) {
+                    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 => {
+                if (key !== this.aggregationcolumn) {
+                    columns.push(key);
+                }
+            });
+            groupingExpression = columns.join(',');
+            // set isVisuallyGrouped flag in scope for later use
+            this.isVisuallyGrouped = isVisuallyGrouped;
+            return {
+                expression: groupingExpression,
+                isVisuallyGrouped: isVisuallyGrouped,
+                visualGroupingColumn: visualGroupingColumn
+            };
+        }
+        return {
+            expression: '',
+            isVisuallyGrouped: false,
+            visualGroupingColumn: ''
+        };
+    }
+    // Function to get the aggregated data after applying the aggregation & group by or order by operations.
+    getAggregatedData(callback) {
+        const variable = this.datasource, yAxisKeys = this.yaxisdatakey ? this.yaxisdatakey.split(',') : [], data = {};
+        let sortExpr, columns = [], colAlias, orderByColumns, groupByFields = [];
+        if (!variable) {
+            return;
+        }
+        if (this.isGroupByEnabled()) {
+            groupByFields = split(this.groupby, ',');
+        }
+        if (this.orderby) {
+            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 => {
+                colAlias = getValidAliasName(col);
+                // @ts-ignore
+                sortExpr = replace(sortExpr, col, colAlias);
+            });
+        }
+        if (this.isAggregationEnabled()) {
+            // Send the group by in the aggregations api only if aggregation is also chosen
+            data.groupByFields = groupByFields;
+            data.aggregations = [
+                {
+                    'field': this.aggregationcolumn,
+                    'type': aggregationFnMap[this.aggregation],
+                    'alias': getValidAliasName(this.aggregationcolumn)
+                }
+            ];
+        }
+        // Execute the query.
+        variable.execute('getAggregatedData', {
+            'aggregations': data,
+            'sort': sortExpr
+        }).then(response => {
+            // 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) => {
+                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.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);
+                });
+                chartData.push(obj);
+            });
+            this.chartData = chartData;
+            triggerFn(callback);
+        }, () => {
+            this.chartData = [];
+            this.setErrMsg('MESSAGE_ERROR_FETCH_DATA');
+            triggerFn(callback);
+        });
+    }
+    // This function sets maximum width for the labels that can be displayed.This will helpful when they are overlapping
+    setLabelsMaxWidth() {
+        let xTicks, tickWidth, maxLength, xDist, yDist, totalHeight, maxNoLabels, nthElement, labelsAvailableWidth, barWrapper, yAxisWrapper, svgWrapper;
+        const fontsize = parseInt(this.fontsize, 10) || 12, isBarchart = isBarChart(this.type);
+        // getting the x ticks in the chart
+        xTicks = $('#wmChart' + this.$id + ' svg').find('g.nv-x').find('g.tick').find('text');
+        // getting the distance between the two visible ticks associated with visible text
+        xTicks.each(function () {
+            const xTick = $(this);
+            let xTransform, tickDist;
+            if (xTick.text() && xTick.css('opacity') === '1') {
+                xTransform = xTick.parent().attr('transform').split(',');
+                xDist = parseFloat(xTransform[0].substr(10));
+                yDist = parseFloat(xTransform[1] || '0');
+                if (!isBarchart && xDist > 0) {
+                    tickDist = xDist;
+                }
+                else if (yDist > 0) {
+                    tickDist = yDist;
+                }
+                if (tickWidth) {
+                    tickWidth = tickDist - tickWidth;
+                    return false;
+                }
+                tickWidth = tickDist;
+                return true;
+            }
+        });
+        // In case of bar chart getting the available space for the labels to be displayed
+        if (isBarchart) {
+            barWrapper = $('#wmChart' + this.$id + ' svg>g.nv-wrap>g>g.nv-barsWrap')[0];
+            yAxisWrapper = $('#wmChart' + this.$id + ' svg>g.nv-wrap>g>g.nv-y')[0];
+            svgWrapper = $('#wmChart' + this.$id + ' svg')[0];
+            // getting the total height of the chart
+            totalHeight = barWrapper ? barWrapper.getBoundingClientRect().height : 0;
+            // getting the labels available space
+            labelsAvailableWidth = yAxisWrapper ? svgWrapper.getBoundingClientRect().width - yAxisWrapper.getBoundingClientRect().width : svgWrapper.getBoundingClientRect().width;
+            // Setting the max length for the label
+            maxLength = Math.round(labelsAvailableWidth / fontsize);
+            // if available space for each label is less than the font-size
+            // then limiting the labels to be displayed
+            if (tickWidth < fontsize) {
+                // calculate the maximum no of labels to be fitted
+                maxNoLabels = totalHeight / fontsize;
+                // showing only the nth element
+                nthElement = Math.ceil(this.chartData.length / maxNoLabels);
+                // showing up only some labels
+                d3.select('#wmChart' + this.$id + ' svg').select('g.nv-x').selectAll('g.tick').select('text').each(function (text, i) {
+                    // hiding every non nth element
+                    if (i % nthElement !== 0) {
+                        d3.select(this).attr('opacity', 0);
+                    }
+                });
+            }
+        }
+        else {
+            // Setting the max length for the label
+            maxLength = Math.round(tickWidth / fontsize);
+        }
+        // maxLength should always be a positive number
+        maxLength = Math.abs(maxLength);
+        // Validating if every label exceeds the max length and if so limiting the length and adding ellipsis
+        xTicks.each(function () {
+            if (this.textContent.length > maxLength) {
+                this.textContent = this.textContent.substr(0, maxLength) + '...';
+            }
+        });
+    }
+    // Returns the columns of that can be choosen in the x and y axis
+    getDefaultColumns() {
+        let type, stringColumn, i, temp;
+        const defaultColumns = [], columns = this.datasource.execute(DataSource.Operation.GET_PROPERTIES_MAP) || [];
+        for (i = 0; i < columns.length && defaultColumns.length <= 2; i += 1) {
+            type = columns[i].type;
+            if (!columns[i].isRelated && (isNumberType(type))) {
+                defaultColumns.push(columns[i].fieldName);
+            }
+            else if (type === 'string' && !stringColumn) {
+                stringColumn = columns[i].fieldName;
+            }
+        }
+        // Other than bubble chart x: string type y: number type
+        // Bubble chart x: number type y: number type
+        if (stringColumn && defaultColumns.length > 0 && !isBubbleChart(this.type)) {
+            temp = defaultColumns[0];
+            defaultColumns[0] = stringColumn;
+            defaultColumns[1] = temp;
+        }
+        return defaultColumns;
+    }
+    // Call user defined javascript function when user links it to click event of the widget.
+    attachClickEvent() {
+        let dataObj;
+        d3.select('#wmChart' + this.$id + ' svg').selectAll(chartDataPointXpath[this.type]).style('pointer-events', 'all')
+            .on('click', (event, data, index) => {
+            switch (this.type) {
+                case 'Column':
+                case 'Bar':
+                    dataObj = data._dataObj;
+                    break;
+                case 'Pie':
+                case 'Donut':
+                    dataObj = data.data._dataObj;
+                    break;
+                case 'Area':
+                case 'Cumulative Line':
+                case 'Line':
+                    dataObj = data[0]._dataObj;
+                    break;
+                case 'Bubble':
+                    dataObj = data;
+                    break;
+            }
+            this.selecteditem = dataObj;
+            this.invokeEventCallback('select', {
+                $event: event,
+                selectedChartItem: data,
+                selectedItem: this.selecteditem
+            });
+        });
+    }
+    /*  Returns Y Scale min value
+           Ex: Input   : 8.97
+               Output  : 8.87
+
+               Input   : 8
+               Output  : 7
+       */
+    postPlotProcess(chart) {
+        let chartSvg, pieLabels, pieGroups, angleArray;
+        const styleObj = {};
+        const element = this.$element;
+        postPlotChartProcess(this);
+        if (!isPieType(this.type)) {
+            this.setLabelsMaxWidth();
+        }
+        else if (!this.showlabelsoutside) {
+            /** Nvd3 has a issue in rotating text. So we will use this as a temp fix.
+             * If the issue is resolved there, we can remove this.*/
+            /* If it is a donut chart, then rotate the text and position them*/
+            chartSvg = d3.select('#wmChart' + this.$id + ' svg');
+            pieLabels = chartSvg.select('.nv-pieLabels').selectAll('.nv-label');
+            pieGroups = chartSvg.select('.nv-pie').selectAll('.nv-slice');
+            angleArray = [];
+            if (pieGroups && pieGroups.length) {
+                pieGroups.each(function () {
+                    d3.select(this).attr('transform', function (d) {
+                        angleArray.push(angle(d));
+                    });
+                });
+                pieLabels.each(function (d, i) {
+                    const group = d3.select(this);
+                    $(group[0][0]).find('text').attr('transform', 'rotate(' + angleArray[i] + ')');
+                });
+            }
+        }
+        // prepare text style props object and set
+        forEach(styleProps, (value, key) => {
+            if (key === 'fontsize' || key === 'fontunit') {
+                styleObj[value] = this.fontsize + this.fontunit;
+            }
+            else {
+                styleObj[value] = this[key];
+            }
+        });
+        setTextStyle(styleObj, this.$id);
+        /*
+         * allow window-resize functionality, for only-run mode as
+         * updating chart is being handled by watchers of height & width in studio-mode
+         * */
+        triggerFn(this._resizeFn && this._resizeFn.clear);
+        this._resizeFn = nv.utils.windowResize(() => {
+            if (element[0].getBoundingClientRect().height) {
+                chart.update();
+                postPlotChartProcess(this);
+                if (!isPieType(this.type)) {
+                    this.setLabelsMaxWidth();
+                }
+            }
+            else {
+                // TODO: get parents of accordion type
+                /*let parent = element.closest('.app-accordion-panel, .tab-pane').isolateScope();
+                if (parent) {
+                    parent.initialized = false;
+                }*/
+            }
+        });
+    }
+    // prepares and configures the chart properties
+    configureChart() {
+        // Copy the data only in case of pie chart with default data
+        // Reason : when multiple pie charts are bound to same data, first chart theme will be applied to all charts
+        let xDomainValues;
+        let yDomainValues;
+        let chart;
+        let beforeRenderVal;
+        const yformatOptions = {};
+        if (this._processedData.length > 0) {
+            if (isAxisDomainValid(this, 'x')) {
+                xDomainValues = this.binddataset ? this.getXMinMaxValues(this._processedData[0]) : { 'min': { 'x': 1 }, 'max': { 'x': 5 } };
+            }
+            if (isAxisDomainValid(this, 'y')) {
+                yDomainValues = this.binddataset ? this.getYMinMaxValues(this._processedData) : { 'min': { 'y': 1 }, 'max': { 'y': 5 } };
+            }
+        }
+        if (isPieType(this.type) && (!this.binddataset || !this.scopedataset)) {
+            this._processedData = getClonedObject(this.scopedataset || this._processedData);
+        }
+        // get the chart object
+        chart = initChart(this, xDomainValues, yDomainValues, null, !this.binddataset);
+        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) {
+                oldgTicks.remove();
+            }
+            beforeRenderVal = this.invokeEventCallback('beforerender', { 'chartInstance': chart });
+            if (beforeRenderVal) {
+                chart = beforeRenderVal;
+            }
+            this.chart = chart;
+            // changing the default no data message
+            d3.select('#wmChart' + this.$id + ' svg')
+                .datum(this._processedData)
+                .call(this.chart);
+            this.postPlotProcess(chart);
+            return chart;
+        }
+    }
+    // Plotting the chart with set of the properties set to it
+    plotChart() {
+        const element = this.$element;
+        // call user-transformed function
+        this.chartData = (this.invokeEventCallback('transform')) || this.chartData;
+        // Getting the order by data only in run mode. The order by applies for all the charts other than pie and donut charts
+        if (this.isVisuallyGrouped && !isPieType(this.type)) {
+            this._processedData = this.chartData;
+        }
+        else {
+            this._processedData = this.processChartData();
+        }
+        // checking the parent container before plotting the chart
+        if (!element[0].getBoundingClientRect().height) {
+            return;
+        }
+        if (this.clearCanvas) {
+            // empty svg to add-new chart
+            element.find('svg').replaceWith('<svg></svg>');
+            this.clearCanvas = false;
+        }
+        // In case of invalid axis show no data available message
+        if (!this.isValidAxis()) {
+            this._processedData = [];
+        }
+        nv.addGraph(() => this.configureChart(), () => {
+            /*Bubble chart has an time out delay of 300ms in their implementation due to which we
+            * won't be getting required data points on attaching events
+            * hence delaying it 600ms*/
+            setTimeout(() => {
+                this.attachClickEvent();
+            }, 600);
+        });
+        this.isLoadInProgress = false;
+    }
+    // TODO: Need way to figure out if the datasource is a live source
+    get isLiveVariable() {
+        // setting the flag for the live variable in the scope for the checks
+        const variableObj = this.datasource;
+        return variableObj && variableObj.category === 'wm.LiveVariable';
+    }
+    plotChartProxy() {
+        this.showContentLoadError = false;
+        this.invalidConfig = false;
+        // Checking if x and y axis are chosen
+        this.isLoadInProgress = true;
+        const groupingDetails = this.getGroupingDetails();
+        // If aggregation/group by/order by properties have been set, then get the aggregated data and plot the result in the chart.
+        // TODO: datasource for live variable detection
+        if (this.binddataset && this.isLiveVariable && (this.filterFields || this.isDataFilteringEnabled())) {
+            this.getAggregatedData(() => this.plotChart());
+        }
+        else { // Else, simply plot the chart.
+            // In case of live variable resetting the aggregated data to the normal dataset when the aggregation has been removed
+            if (this.dataset && this.isLiveVariable) {
+                this.chartData = this.dataset;
+                if (this.isGroupByEnabled() && groupingDetails.isVisuallyGrouped) {
+                    this.chartData = this.getVisuallyGroupedData(this.chartData, groupingDetails.visualGroupingColumn);
+                }
+            }
+            this.plotChart();
+        }
+    }
+    // sets the default x and y axis options
+    setDefaultAxisOptions() {
+        const defaultColumns = this.getDefaultColumns();
+        // If we get the valid default columns then assign them as the x and y axis
+        // In case of service variable we may not get the valid columns because we cannot know the datatypes
+        this.xaxisdatakey = defaultColumns[0] || null;
+        this.yaxisdatakey = defaultColumns[1] || null;
+    }
+    getCutomizedOptions(prop, fields) {
+        const groupByColumns = split(this.groupby, ','), aggColumns = split(this.aggregationcolumn, ',');
+        if (!this.binddataset) {
+            return fields;
+        }
+        if (!this.axisoptions) {
+            this.axisoptions = fields;
+        }
+        let newOptions;
+        switch (prop) {
+            case 'xaxisdatakey':
+                // If group by enabled, columns chosen in groupby will be populated in x axis options
+                if (this.isGroupByEnabled()) {
+                    newOptions = groupByColumns;
+                }
+                break;
+            case 'yaxisdatakey':
+                // If aggregation by enabled, columns chosen in aggregation will be populated in y axis options
+                if (this.isAggregationEnabled()) {
+                    newOptions = aggColumns;
+                }
+                else if (this.isLiveVariable) {
+                    // In case of live variable populating only numeric columns
+                    newOptions = this.numericColumns;
+                }
+                break;
+            case 'groupby':
+                // Filtering only non primary key columns
+                if (this.isLiveVariable && this.nonPrimaryColumns && this.nonPrimaryColumns.length) {
+                    newOptions = this.nonPrimaryColumns;
+                }
+                break;
+            case 'aggregationcolumn':
+                // 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() && this.aggregation !== 'count') {
+                    newOptions = this.numericColumns;
+                }
+                break;
+            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));
+                }
+                break;
+            case 'bubblesize':
+                if (this.numericColumns && this.numericColumns.length) {
+                    newOptions = this.numericColumns;
+                }
+                break;
+        }
+        return newOptions || fields || this.axisoptions;
+    }
+    // Function that iterates through all the columns and then fetching the numeric and non primary columns among them
+    setNumericandNonPrimaryColumns() {
+        let columns, type;
+        const propertiesMap = this.datasource.execute(DataSource.Operation.GET_PROPERTIES_MAP);
+        this.numericColumns = [];
+        this.nonPrimaryColumns = [];
+        // Fetching all the columns
+        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) => {
+                type = columns[key].type;
+                if (isNumberType(type)) {
+                    this.numericColumns.push(key);
+                }
+                // Hiding only table's primary key
+                if (columns[key].isRelatedPk === 'true' || !columns[key].isPrimaryKey) {
+                    this.nonPrimaryColumns.push(key);
+                }
+            });
+            this.numericColumns = this.numericColumns.sort();
+            this.nonPrimaryColumns = this.nonPrimaryColumns.sort();
+        }
+    }
+    // plot the chart
+    handleDataSet(newVal) {
+        this.errMsg = '';
+        // Resetting the flag to false when the binding was removed
+        if (!newVal && !this.binddataset) {
+            this.isVisuallyGrouped = false;
+            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;
+        // if the data returned is an object make it an array of object
+        if (!isArray(this.chartData) && isObject(this.chartData)) {
+            this.chartData = [this.chartData];
+        }
+        if (newVal && newVal.filterFields) {
+            this.filterFields = newVal.filterFields;
+        }
+        // plotchart for only valid data and only after bound variable returns data
+        if (this.chartData) {
+            this._plotChartProxy();
+        }
+    }
+    // sets the center label for donut chart type
+    setDonutCenterLabel(labelValue) {
+        let chartSvg, pieGroups;
+        chartSvg = d3.select('#wmChart' + this.$id + ' svg');
+        pieGroups = chartSvg.select('.nv-wrap.nv-pie').select('.nv-pie');
+        pieGroups.text('');
+        pieGroups.append('text')
+            .attr('dy', '.35em')
+            .attr('text-anchor', 'middle')
+            .attr('class', 'nv-pie-title')
+            .text(labelValue)
+            .each(function (d) {
+            var d3text = d3.select(this), circ = d3.select(this.parentElement), totalWidth = Number(circ.node().getBoundingClientRect().width), 
+            // minus the ring width from total width
+            availWidth = totalWidth - 30, textWidth = this.getComputedTextLength();
+            d3text.attr("data-scale", availWidth / textWidth);
+        }).style("font-size", function () {
+            // 16 is the default font size to multiply with the scaled value and 24 is the maximum font size that can be applied
+            var fontSize = 16 * d3.select(this).attr("data-scale");
+            return fontSize > 24 ? 24 : fontSize + "px";
+        });
+    }
+    onPropertyChange(key, newVal, oldVal) {
+        super.onPropertyChange(key, newVal, oldVal);
+        switch (key) {
+            case 'dataset':
+                this.handleDataSet(newVal);
+                break;
+            case 'centerlabel':
+                if (this.chart) {
+                    this.chart.title(newVal);
+                    this.setDonutCenterLabel(newVal);
+                }
+                break;
+            case 'type':
+                // Based on the change in type deciding the default margins
+                if (isPieType(this.type)) {
+                    this.offsettop = 20;
+                    this.offsetright = 0;
+                    this.offsetbottom = 0;
+                    this.offsetleft = 0;
+                }
+                else if (oldVal === 'Pie' || oldVal === 'Donut') {
+                    this.offsettop = 25;
+                    this.offsetright = 25;
+                    this.offsetbottom = 55;
+                    this.offsetleft = 75;
+                }
+                if (oldVal !== newVal) {
+                    this.clearCanvas = true;
+                }
+                // In studio mode, configure properties dependent on chart type
+                this._plotChartProxy();
+                break;
+            default:
+                // In RunMode, the plotchart method will not be called for all property change
+                this._plotChartProxy();
+                break;
+        }
+        if (includes(advanceDataProps, key)) {
+            this._plotChartProxy();
+        }
+    }
+    handleLoading(data) {
+        const dataSource = this.datasource;
+        if (dataSource && dataSource.execute(DataSource.Operation.IS_API_AWARE) && isDataSourceEqual(data.variable, dataSource)) {
+            this.variableInflight = data.active;
+            this.isLoadInProgress = data.active;
+        }
+    }
+    hideTooltip() {
+        d3.selectAll('.nvtooltip').style('opacity', 0);
+    }
+    onStyleChange(key, newVal, oldVal) {
+        const styleObj = {};
+        super.onStyleChange(key, newVal, oldVal);
+        switch (key) {
+            case 'fontsize':
+            case 'fontunit':
+            case 'color':
+            case 'fontfamily':
+            case 'fontweight':
+            case 'fontstyle':
+            case 'textdecoration':
+                styleObj[styleProps[key]] = (key === 'fontsize' || key === 'fontunit') ? this.fontsize + this.fontunit : newVal;
+                setTextStyle(styleObj, this.$id);
+                break;
+        }
+    }
+    constructor(inj, app, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
+        this.app = app;
+        this.iconclass = '';
+        this.nonPrimaryColumns = [];
+        this.xDataKeyArr = [];
+        this.chartData = [];
+        this._processedData = [];
+        this._subsciptions = [];
+        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
+        this.$id = this.widgetId || Math.random();
+        // remove title attribute as the element on hover shows you the hint through-out the element
+        removeAttr(this.nativeElement, 'title');
+        this.chartReady = false;
+        this.binddataset = this.nativeElement.getAttribute('dataset.bind');
+        // Show loading status based on the variable life cycle
+        this._subsciptions.push(this.app.subscribe('toggle-variable-state', this.handleLoading.bind(this)));
+        // Will hide tolltip of a chart in mobile when the user scrolls.
+        this._subsciptions.push(this.app.subscribe('iscroll-start', () => { this.hideTooltip(); }));
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        // For old projects
+        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';
+        }
+        if (!this.theme) {
+            // Default theme for pie/donut is Azure and for other it is Terrestrial
+            this.theme = isPieType(this.type) ? 'Azure' : 'Terrestrial';
+        }
+        this.nativeElement.setAttribute('id', 'wmChart' + this.$id);
+        // When there is not value binding, then plot the chart with sample data
+        if (!this.binddataset && !this.nativeElement.getAttribute('scopedataset')) {
+            this._plotChartProxy();
+        }
+    }
+    ngOnDestroy() {
+        // destroy all subscriptions to prevent memory leak.
+        this.hideTooltip();
+        // MEMORY LEAK FIX: Unsubscribe from all subscriptions
+        if (this._subsciptions) {
+            this._subsciptions.forEach((subscription) => {
+                subscription();
+            });
+            this._subsciptions = [];
+        }
+        // MEMORY LEAK FIX: Clear chart instance
+        if (this.chart) {
+            this.chart = null;
+        }
+        // MEMORY LEAK FIX: Remove resize handler if exists
+        if (this._resizeFn) {
+            this._resizeFn = null;
+        }
+        // MEMORY LEAK FIX: Clear array references
+        this.chartData = [];
+        this._processedData = [];
+        this.sampleData = [];
+        this.xDataKeyArr = [];
+        this.nonPrimaryColumns = [];
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ChartComponent, deps: [{ token: i0.Injector }, { token: i1.App }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ChartComponent, isStandalone: true, selector: "div[wmChart]", host: { properties: { "class.panel": "this.title" } }, providers: [
+            provideAsWidgetRef(ChartComponent)
+        ], usesInheritance: true, ngImport: i0, template: "@if (title) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\">\n        <wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" iconClasses=\"panel-icon\" alt=\"Chart icon\"></wm-app-icon>\n      </div>\n      <div class=\"heading\" [innerHTML]=\"title\"></div>\n      @if (subheading) {\n        <div class=\"description\" [innerHTML]=\"subheading\"></div>\n      }\n    </h3>\n  </div>\n}\n<div class=\"app-chart-inner\" [ngClass]=\"{'loading':isLoadInProgress, 'panel-body': title}\">\n  <svg></svg>\n  @if (showContentLoadError && showNoDataMsg) {\n    <div class=\"wm-content-info readonly-wrapper\">\n      <p class=\"wm-message\" [title]=\"hintMsg\" [ngClass]=\"{'error': invalidConfig}\" [innerText]=\"errMsg\"></p>\n    </div>\n  }\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SpinnerComponent, selector: "[wmSpinner]", exportAs: ["wmSpinner"] }, { kind: "component", type: WmAppIconComponent, selector: "wm-app-icon", inputs: ["icon", "iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ChartComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, SpinnerComponent, WmAppIconComponent], selector: 'div[wmChart]', providers: [
+                        provideAsWidgetRef(ChartComponent)
+                    ], encapsulation: ViewEncapsulation.None, template: "@if (title) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\">\n        <wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" iconClasses=\"panel-icon\" alt=\"Chart icon\"></wm-app-icon>\n      </div>\n      <div class=\"heading\" [innerHTML]=\"title\"></div>\n      @if (subheading) {\n        <div class=\"description\" [innerHTML]=\"subheading\"></div>\n      }\n    </h3>\n  </div>\n}\n<div class=\"app-chart-inner\" [ngClass]=\"{'loading':isLoadInProgress, 'panel-body': title}\">\n  <svg></svg>\n  @if (showContentLoadError && showNoDataMsg) {\n    <div class=\"wm-content-info readonly-wrapper\">\n      <p class=\"wm-message\" [title]=\"hintMsg\" [ngClass]=\"{'error': invalidConfig}\" [innerText]=\"errMsg\"></p>\n    </div>\n  }\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"] }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.App }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }], propDecorators: { title: [{
+                type: HostBinding,
+                args: ['class.panel']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChartComponent };
+//# sourceMappingURL=index.mjs.map