@wavemaker-ai/app-ng-runtime 1.0.0-rc.309

package/components/chart/bundles/index.umd.js

@@ -0,0 +1,1747 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@wm/components/basic/spinner'), require('@angular/core'), require('@wm/core'), require('@wm/components/base'), require('lodash-es'), require('moment')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/common', '@wm/components/basic/spinner', '@angular/core', '@wm/core', '@wm/components/base', 'lodash-es', 'moment'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.chart = {}), global.ng.common, global.wm.components.basic.spinner, global.ng.core, global.wm.core, global.wm.components.base, global._, global.momentLib));
+})(this, (function (exports, i2, spinner, i0, i1, base, lodashEs, momentLib) { 'use strict';
+
+    function _interopNamespaceDefault(e) {
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
+
+    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+    var momentLib__namespace = /*#__PURE__*/_interopNamespaceDefault(momentLib);
+
+    const registerProps = () => {
+        base.register('wm-chart', new Map([
+            ['aggregation', { value: 'none', ...base.PROP_STRING }],
+            ['aggregationcolumn', base.PROP_STRING],
+            ['areaviewtype', { value: 'stack', ...base.PROP_STRING }],
+            ['barspacing', { value: 'medium', ...base.PROP_STRING }],
+            ['bubblesize', base.PROP_STRING],
+            ['centerlabel', base.PROP_STRING],
+            ['class', base.PROP_STRING],
+            ['customcolors', base.PROP_ANY],
+            ['dataset', base.PROP_ANY],
+            ['datasource', base.PROP_STRING],
+            ['donutratio', { value: 'medium', ...base.PROP_STRING }],
+            ['formattype', { value: '', PROP_STRING: base.PROP_STRING }],
+            ['groupby', base.PROP_STRING],
+            ['height', { value: '210px', PROP_STRING: base.PROP_STRING }],
+            ['highlightpoints', base.PROP_BOOLEAN],
+            ['iconclass', base.PROP_STRING],
+            ['interpolation', { value: 'linear', ...base.PROP_STRING }],
+            ['labelthreshold', { value: 0.01, ...base.PROP_NUMBER }],
+            ['labeltype', { value: 'percent', ...base.PROP_STRING }],
+            ['legendtype', { value: 'furious', ...base.PROP_STRING }],
+            ['linethickness', base.PROP_STRING],
+            ['loadingdatamsg', { value: 'Loading...', ...base.PROP_STRING }],
+            ['name', base.PROP_STRING],
+            ['nodatamessage', { value: 'No Data Available.', ...base.PROP_STRING }],
+            ['offset', base.PROP_STRING],
+            ['offsetbottom', { value: 55, ...base.PROP_NUMBER }],
+            ['offsetleft', { value: 75, ...base.PROP_NUMBER }],
+            ['offsetright', { value: 25, ...base.PROP_NUMBER }],
+            ['offsettop', { value: 25, ...base.PROP_NUMBER }],
+            ['orderby', base.PROP_STRING],
+            ['reducexticks', { value: true, ...base.PROP_BOOLEAN }],
+            ['shape', { value: 'circle', ...base.PROP_STRING }],
+            ['show', { value: true, ...base.PROP_BOOLEAN }],
+            ['showlabels', { value: 'outside', ...base.PROP_STRING }],
+            ['showlabelsoutside', { value: true, ...base.PROP_BOOLEAN }],
+            ['showlegend', { value: 'top', ...base.PROP_STRING }],
+            ['showvalues', { value: false, ...base.PROP_BOOLEAN }],
+            ['showxaxis', { value: true, ...base.PROP_BOOLEAN }],
+            ['showxdistance', { value: false, ...base.PROP_BOOLEAN }],
+            ['showyaxis', { value: true, ...base.PROP_BOOLEAN }],
+            ['showydistance', { value: false, ...base.PROP_BOOLEAN }],
+            ['staggerlabels', { value: false, ...base.PROP_BOOLEAN }],
+            ['subheading', base.PROP_STRING],
+            ['theme', base.PROP_STRING],
+            ['title', base.PROP_STRING],
+            ['tooltips', { value: true, ...base.PROP_BOOLEAN }],
+            ['type', base.PROP_STRING],
+            ['viewtype', { value: 'Grouped', ...base.PROP_STRING }],
+            ['xaxisdatakey', base.PROP_STRING],
+            ['xaxislabel', base.PROP_STRING],
+            ['xaxislabeldistance', { value: 12, ...base.PROP_NUMBER }],
+            ['xdateformat', base.PROP_STRING],
+            ['xdomain', { value: 'Default', ...base.PROP_STRING }],
+            ['xnumberformat', base.PROP_STRING],
+            ['xunits', base.PROP_STRING],
+            ['yaxisdatakey', base.PROP_STRING],
+            ['yaxislabel', base.PROP_STRING],
+            ['yaxislabeldistance', { value: 12, ...base.PROP_NUMBER }],
+            ['ydomain', { value: 'Default', ...base.PROP_STRING }],
+            ['ynumberformat', base.PROP_STRING],
+            ['yunits', base.PROP_STRING]
+        ]));
+    };
+
+    const moment = momentLib__namespace.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 = lodashEs.invert(barSpacingMap), donutRatioMapInvert = lodashEs.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 => lodashEs.includes(dataTypeJSON, type) || !lodashEs.includes(chartTypes, type);
+    // The format of chart data is array of objects in case of the following types of chart
+    const isChartDataArray = type => lodashEs.includes(dataTypeArray, type);
+    // returns true is the chart type is 'line', 'area' or 'cumulative line' else false
+    const isLineTypeChart = type => lodashEs.includes(lineTypeCharts, type);
+    // X/Y Domain properties are supported only for Column and Area charts
+    const isAxisDomainSupported = type => isColumnChart(type) || isAreaChart(type);
+    // Returns bar spacing value
+    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), lodashEs.split(widgetContext.yaxisdatakey, ',').length, widgetContext.shape);
+    // Check whether X/Y Domain was set to Min and is supported for the present chart
+    const isAxisDomainValid = (widgetContext, axis) => {
+        if (widgetContext[axis + 'domain'] === 'Min' && (isAxisDomainSupported(widgetContext.type))) {
+            return true;
+        }
+        return false;
+    };
+    // Check whether min and max values are finite or not
+    const areMinMaxValuesValid = values => {
+        if (lodashEs.isFinite(values.min) && lodashEs.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 || i1.isEmptyObject(propertyValueMap)) {
+            propertyValueMap = {};
+        }
+        lodashEs.forEach(basicProperties, prop => {
+            if (lodashEs.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;
+    };
+    // 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);
+                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 (!lodashEs.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 || i1.prettifyLabels(widgetContext.xaxisdatakey) || 'x caption';
+            yaxislabel = propertyValueMap.yaxislabel || i1.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 (lodashEs.isString(propertyValueMap.customcolors) && propertyValueMap.customcolors) {
+            colors = lodashEs.split(propertyValueMap.customcolors, ',');
+        }
+        if (lodashEs.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 = 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 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'
+    }, 
+    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 = [];
+        lodashEs.forEach(lodashEs.split(orderby, ','), function (col) {
+            columns = lodashEs.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 base.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 = lodashEs.get(dataObj, xKey);
+            // If x axis is other than number type then add indexes
+            if (isLineTypeChart(this.type) && !i1.isNumberType(this.xAxisDataType)) {
+                // Verification to get the unique data keys
+                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 = lodashEs.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 = lodashEs.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)
+             */
+            lodashEs.forEach(datum, data => {
+                minValues.push(lodashEs.minBy(data.values, function (dataObject) {
+                    return dataObject.y || dataObject[1];
+                }));
+                maxValues.push(lodashEs.maxBy(data.values, function (dataObject) {
+                    return dataObject.y || dataObject[1];
+                }));
+            });
+            // Gets the least and highest values among all the min and max values of respective series of data
+            yValues.min = lodashEs.minBy(minValues, dataObject => dataObject.y || dataObject[1]);
+            yValues.max = lodashEs.maxBy(maxValues, dataObject => dataObject.y || dataObject[1]);
+            return yValues;
+        }
+        // If the x-axis values are undefined, we return empty array else we return the values
+        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 = lodashEs.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 (lodashEs.isArray(dataSet)) {
+                if (isPieType(this.type)) {
+                    yAxisKey = yAxisKeys[0];
+                    datum = lodashEs.map(dataSet, (dataObj, index) => {
+                        if (!i1.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 = lodashEs.map(dataSet, (dataObj, index) => {
+                            if (!i1.isEmptyObject(dataSet[index])) {
+                                return this.valueFinder(dataSet[index], xAxisKey, yAxisKey, index, (lodashEs.isArray(shapes) && shapes[series]) || this.shape);
+                            }
+                        });
+                        values = this.getValidData(values);
+                        datum.push({
+                            values: values,
+                            key: i1.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 = lodashEs.first(lodashEs.split(this.yaxisdatakey, ','));
+            this.xDataKeyArr = [];
+            queryResponse = lodashEs.orderBy(queryResponse, lodashEs.split(this.groupby, ','));
+            if (this.orderby) {
+                orderByDetails = getLodashOrderByFormat(this.orderby);
+                queryResponse = lodashEs.orderBy(queryResponse, orderByDetails.columns, orderByDetails.orders);
+            }
+            queryResponse = lodashEs.groupBy(queryResponse, groupingColumn);
+            // In case of area chart all the series data should be of same length
+            if (_isAreaChart) {
+                maxLength = lodashEs.max(lodashEs.map(queryResponse, obj => obj.length));
+            }
+            lodashEs.forEach(queryResponse, (values, groupKey) => {
+                groupValues = isAreaChart ? lodashEs.fill(new Array(maxLength), [0, 0]) : [];
+                lodashEs.forEachRight(values, (value, index) => {
+                    groupValues[index] = this.valueFinder(value, this.xaxisdatakey, yAxisKey, index);
+                });
+                groupData = {
+                    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 = lodashEs.concat(columns, groupbyColumns);
+                    }
+                }
+                // If x and y axis are not included in aggregation need to be included in groupby
+                if (this.xaxisdatakey !== this.aggregationcolumn) {
+                    columns.push(this.xaxisdatakey);
+                }
+                lodashEs.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 = lodashEs.split(this.groupby, ',');
+            }
+            if (this.orderby) {
+                sortExpr = lodashEs.replace(this.orderby, /:/g, ' ');
+                columns = lodashEs.uniq(lodashEs.concat(columns, groupByFields, [this.aggregationcolumn]));
+                orderByColumns = getLodashOrderByFormat(this.orderby).columns;
+                // If the orderby column is chosen either in groupby or orderby then replace . with $ for that column
+                lodashEs.forEach(lodashEs.intersection(columns, orderByColumns), col => {
+                    colAlias = getValidAliasName(col);
+                    // @ts-ignore
+                    sortExpr = lodashEs.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)));
+                lodashEs.forEach(response.body.content, (responseContent) => {
+                    const obj = {};
+                    // Set the response in the chartData based on 'aggregationColumn', 'xAxisDataKey' & 'yAxisDataKey'.
+                    if (this.isAggregationEnabled()) {
+                        obj[this.aggregationcolumn] = responseContent[aggregationAlias];
+                        obj[this.aggregationcolumn] = lodashEs.get(responseContent, aggregationAlias) || lodashEs.get(responseContent, this.aggregationcolumn);
+                    }
+                    obj[this.xaxisdatakey] = lodashEs.get(responseContent, xAxisAliasKey) || lodashEs.get(responseContent, this.xaxisdatakey);
+                    yAxisKeys.forEach((yAxisKey, index) => {
+                        obj[yAxisKey] = responseContent[yAxisAliasKeys[index]];
+                        obj[yAxisKey] = lodashEs.get(responseContent, yAxisAliasKeys[index]) || lodashEs.get(responseContent, yAxisKey);
+                    });
+                    chartData.push(obj);
+                });
+                this.chartData = chartData;
+                i1.triggerFn(callback);
+            }, () => {
+                this.chartData = [];
+                this.setErrMsg('MESSAGE_ERROR_FETCH_DATA');
+                i1.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(i1.DataSource.Operation.GET_PROPERTIES_MAP) || [];
+            for (i = 0; i < columns.length && defaultColumns.length <= 2; i += 1) {
+                type = columns[i].type;
+                if (!columns[i].isRelated && (i1.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
+            lodashEs.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
+             * */
+            i1.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();
+                    }
+                }
+            });
+        }
+        // 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;
+            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 = i1.getClonedObject(this.scopedataset || this._processedData);
+            }
+            // get the chart object
+            chart = initChart(this, xDomainValues, yDomainValues, null, !this.binddataset);
+            if (lodashEs.isArray(this._processedData)) {
+                // WMS-19499:  To remove chart X-axis old ticks when chart data loaded dynamically.
+                const oldgTicks = $('#wmChart' + this.$id + ' svg').find('g.nv-x').find('g.tick');
+                if (oldgTicks && oldgTicks.length) {
+                    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 = lodashEs.split(this.groupby, ','), aggColumns = lodashEs.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 = lodashEs.uniq(lodashEs.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(i1.DataSource.Operation.GET_PROPERTIES_MAP);
+            this.numericColumns = [];
+            this.nonPrimaryColumns = [];
+            // Fetching all the columns
+            if (this.dataset && !lodashEs.isEmpty(propertiesMap)) {
+                columns = []; // TODO: fetchPropertiesMapColumns(propertiesMap);
+            }
+            if (columns) {
+                // Iterating through all the columns and fetching the numeric and non primary key columns
+                lodashEs.forEach(Object.keys(columns), (key) => {
+                    type = columns[key].type;
+                    if (i1.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 === '' && lodashEs.keys(newVal).length === 1) ? '' : newVal;
+            // if the data returned is an object make it an array of object
+            if (!lodashEs.isArray(this.chartData) && lodashEs.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 (lodashEs.includes(advanceDataProps, key)) {
+                this._plotChartProxy();
+            }
+        }
+        handleLoading(data) {
+            const dataSource = this.datasource;
+            if (dataSource && dataSource.execute(i1.DataSource.Operation.IS_API_AWARE) && i1.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 = lodashEs.debounce(this.plotChartProxy.bind(this), 100);
+            this.redraw = this._plotChartProxy.bind(this);
+            base.styler(this.nativeElement, this, base.APPLY_STYLES_TYPE.CONTAINER, ['fontsize', 'fontunit', 'color', 'fontfamily', 'fontweight', 'fontstyle', 'textdecoration']);
+            // generate unique id for the component
+            this.$id = this.widgetId || Math.random();
+            // remove title attribute as the element on hover shows you the hint through-out the element
+            i1.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 (!lodashEs.includes(['outside', 'inside', 'hide'], this.showlabels)) {
+                this.showlabels = getBooleanValue(this.showlabels);
+                this.showlabelsoutside = getBooleanValue(this.showlabelsoutside);
+                this.showlabels = this.showlabels ? (this.showlabelsoutside ? 'outside' : 'inside') : 'hide';
+            }
+            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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: ChartComponent, deps: [{ token: i0__namespace.Injector }, { token: i1__namespace.App }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ChartComponent, isStandalone: true, selector: "div[wmChart]", host: { properties: { "class.panel": "this.title" } }, providers: [
+                base.provideAsWidgetRef(ChartComponent)
+            ], usesInheritance: true, ngImport: i0__namespace, template: "@if (title) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\"><i class=\"app-icon panel-icon {{iconclass}}\" [class.ng-hide]=\"!iconclass\"></i></div>\n      <div class=\"heading\" [innerHTML]=\"title\"></div>\n      @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: i2.CommonModule }, { kind: "directive", type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: spinner.SpinnerComponent, selector: "[wmSpinner]", exportAs: ["wmSpinner"] }], encapsulation: i0__namespace.ViewEncapsulation.None }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: ChartComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [i2.CommonModule, spinner.SpinnerComponent], selector: 'div[wmChart]', providers: [
+                            base.provideAsWidgetRef(ChartComponent)
+                        ], encapsulation: i0.ViewEncapsulation.None, template: "@if (title) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\"><i class=\"app-icon panel-icon {{iconclass}}\" [class.ng-hide]=\"!iconclass\"></i></div>\n      <div class=\"heading\" [innerHTML]=\"title\"></div>\n      @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__namespace.Injector }, { type: i1__namespace.App }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { title: [{
+                    type: i0.HostBinding,
+                    args: ['class.panel']
+                }] } });
+
+    exports.ChartComponent = ChartComponent;
+
+}));