import * as i0 from '@angular/core';
import { Component, ViewEncapsulation, Inject, Optional, HostBinding, NgModule } from '@angular/core';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import { PROP_STRING, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, register, StylableComponent, APPLY_STYLES_TYPE, styler, provideAsWidgetRef, WmComponentsModule } from '@wm/components/base';
import * as i2 from '@wm/components/basic';
import { BasicModule } from '@wm/components/basic';
import * as i1 from '@wm/core';
import { isEmptyObject, prettifyLabels, isNumberType, triggerFn, DataSource, getClonedObject, isDataSourceEqual, removeAttr } from '@wm/core';
import { invert, includes, split, isFinite, isUndefined, forEach, isString, isArray, get, minBy, maxBy, map, first, orderBy, groupBy, max, fill, forEachRight, concat, replace, uniq, intersection, isEmpty, keys, isObject, debounce } from 'lodash-es';

const registerProps = () => {
    register('wm-chart', new Map([
        ['aggregation', { value: 'none', ...PROP_STRING }],
        ['aggregationcolumn', PROP_STRING],
        ['areaviewtype', { value: 'stack', ...PROP_STRING }],
        ['barspacing', { value: 'medium', ...PROP_STRING }],
        ['bubblesize', PROP_STRING],
        ['centerlabel', PROP_STRING],
        ['class', PROP_STRING],
        ['customcolors', PROP_ANY],
        ['dataset', PROP_ANY],
        ['datasource', PROP_STRING],
        ['donutratio', { value: 'medium', ...PROP_STRING }],
        ['formattype', { value: '', PROP_STRING }],
        ['groupby', PROP_STRING],
        ['height', { value: '210px', PROP_STRING }],
        ['highlightpoints', PROP_BOOLEAN],
        ['iconclass', PROP_STRING],
        ['interpolation', { value: 'linear', ...PROP_STRING }],
        ['labelthreshold', { value: 0.01, ...PROP_NUMBER }],
        ['labeltype', { value: 'percent', ...PROP_STRING }],
        ['legendtype', { value: 'furious', ...PROP_STRING }],
        ['linethickness', PROP_STRING],
        ['loadingdatamsg', { value: 'Loading...', ...PROP_STRING }],
        ['name', PROP_STRING],
        ['nodatamessage', { value: 'No Data Available.', ...PROP_STRING }],
        ['offset', PROP_STRING],
        ['offsetbottom', { value: 55, ...PROP_NUMBER }],
        ['offsetleft', { value: 75, ...PROP_NUMBER }],
        ['offsetright', { value: 25, ...PROP_NUMBER }],
        ['offsettop', { value: 25, ...PROP_NUMBER }],
        ['orderby', PROP_STRING],
        ['reducexticks', { value: true, ...PROP_BOOLEAN }],
        ['shape', { value: 'circle', ...PROP_STRING }],
        ['show', { value: true, ...PROP_BOOLEAN }],
        ['showlabels', { value: 'outside', ...PROP_STRING }],
        ['showlabelsoutside', { value: true, ...PROP_BOOLEAN }],
        ['showlegend', { value: 'top', ...PROP_STRING }],
        ['showvalues', { value: false, ...PROP_BOOLEAN }],
        ['showxaxis', { value: true, ...PROP_BOOLEAN }],
        ['showxdistance', { value: false, ...PROP_BOOLEAN }],
        ['showyaxis', { value: true, ...PROP_BOOLEAN }],
        ['showydistance', { value: false, ...PROP_BOOLEAN }],
        ['staggerlabels', { value: false, ...PROP_BOOLEAN }],
        ['subheading', PROP_STRING],
        ['theme', PROP_STRING],
        ['title', PROP_STRING],
        ['tooltips', { value: true, ...PROP_BOOLEAN }],
        ['type', PROP_STRING],
        ['viewtype', { value: 'Grouped', ...PROP_STRING }],
        ['xaxisdatakey', PROP_STRING],
        ['xaxislabel', PROP_STRING],
        ['xaxislabeldistance', { value: 12, ...PROP_NUMBER }],
        ['xdateformat', PROP_STRING],
        ['xdomain', { value: 'Default', ...PROP_STRING }],
        ['xnumberformat', PROP_STRING],
        ['xunits', PROP_STRING],
        ['yaxisdatakey', PROP_STRING],
        ['yaxislabel', PROP_STRING],
        ['yaxislabeldistance', { value: 12, ...PROP_NUMBER }],
        ['ydomain', { value: 'Default', ...PROP_STRING }],
        ['ynumberformat', PROP_STRING],
        ['yunits', PROP_STRING]
    ]));
};

const chartTypes = ['Column', 'Line', 'Area', 'Cumulative Line', 'Bar', 'Pie', 'Donut', 'Bubble'], allShapes = ['circle', 'square', 'diamond', 'cross', 'triangle-up', 'triangle-down'];
const dateList = ['01/01/2001', '01/01/2002', '01/01/2003'], themes = {
    'Terrestrial': {
        colors: ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5'],
        tooltip: {
            'backgroundColor': '#de7d28',
            'textColor': '#FFFFFF'
        }
    },
    'Annabelle': {
        colors: ['#393b79', '#5254a3', '#6b6ecf', '#9c9ede', '#637939', '#8ca252', '#b5cf6b', '#cedb9c', '#8c6d31', '#bd9e39', '#e7ba52', '#e7cb94', '#843c39', '#ad494a', '#d6616b', '#e7969c', '#7b4173', '#a55194', '#ce6dbd', '#de9ed6'],
        tooltip: {
            'backgroundColor': '#2e306f',
            'textColor': '#FFFFFF'
        }
    },
    'Azure': {
        colors: ['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#e6550d', '#fd8d3c', '#fdae6b', '#fdd0a2', '#31a354', '#74c476', '#a1d99b', '#c7e9c0', '#756bb1', '#9e9ac8', '#bcbddc', '#dadaeb', '#636363', '#969696', '#bdbdbd', '#d9d9d9'],
        tooltip: {
            'backgroundColor': '#3182bd',
            'textColor': '#FFFFFF'
        }
    },
    'Retro': {
        colors: ['#0ca7a1', '#ffa615', '#334957', '#acc5c2', '#988f90', '#8accc9', '#515151', '#f27861', '#36c9fd', '#794668', '#0f709d', '#0d2738', '#44be78', '#4a1839', '#6a393f', '#557d8b', '#6c331c', '#1c1c1c', '#861500', '#09562a'],
        tooltip: {
            'backgroundColor': '#80513a',
            'textColor': '#FFFFFF'
        }
    },
    'Mellow': {
        colors: ['#f0dcbf', '#88c877', '#aeb918', '#2e2c23', '#ddddd2', '#dfe956', '#4c963b', '#5d3801', '#e1eec3', '#cd8472', '#fcfab3', '#9a4635', '#9295ad', '#2e3f12', '#565677', '#557d8b', '#4f4d02', '#0c0c1b', '#833324', '#24120e'],
        tooltip: {
            'backgroundColor': '#7c9e73',
            'textColor': '#FFFFFF'
        }
    },
    'Orient': {
        colors: ['#a80000', '#cc6c3c', '#f0e400', '#000084', '#fccc6c', '#009c6c', '#cc309c', '#78cc00', '#fc84e4', '#48e4fc', '#4878d8', '#186c0c', '#606060', '#a8a8a8', '#000000', '#d7d7d7', '#75a06e', '#190d0b', '#888888', '#694b84'],
        tooltip: {
            'backgroundColor': '#c14242',
            'textColor': '#FFFFFF'
        }
    },
    'GrayScale': {
        colors: ['#141414', '#353535', '#5b5b5b', '#848484', '#a8a8a8', '#c3c3c3', '#e0e0e0', '#c8c8c8', '#a5a5a5', '#878787', '#656565', '#4e4e4e', '#303030', '#1c1c1c', '#4f4f4f', '#3b3b3b', '#757575', '#606060', '#868686', '#c1c1c1'],
        tooltip: {
            'backgroundColor': '#575757',
            'textColor': '#FFFFFF'
        }
    },
    'Flyer': {
        colors: ['#3f454c', '#5a646e', '#848778', '#cededf', '#74c4dd', '#0946ed', '#380bb1', '#000ff0', '#f54a23', '#1db262', '#bca3aa', '#ffa500', '#a86b32', '#63a18c', '#56795e', '#934343', '#b75f5f', '#752d2d', '#4e1111', '#920606'],
        tooltip: {
            'backgroundColor': '#47637c',
            'textColor': '#FFFFFF'
        }
    },
    'Luminosity': {
        colors: ['#FFFFFF', '#e4e4e4', '#00bcd4', '#f0dd2f', '#00aabf', '#018376', '#e91e63', '#39e5d4', '#ff6d6d', '#00ff76', '#ff9800', '#969696', '#ff4200', '#e00000', '#95cbe5', '#5331ff', '#fff4a7', '#e7a800', '#0061e4', '#d5e7ff'],
        tooltip: {
            'backgroundColor': '#47637c',
            'textColor': '#FFFFFF'
        }
    }
}, basicProperties = ['xaxislabel', 'yaxislabel', 'xunits', 'yunits', 'xnumberformat', 'xdateformat', 'ynumberformat',
    'showvalues', 'showlabels', 'viewtype', 'areaviewtype', 'staggerlabels', 'reducexticks', 'offsettop', 'offsetbottom', 'offsetright', 'offsetleft',
    'barspacing', 'xaxislabeldistance', 'yaxislabeldistance', 'theme', 'labeltype', 'donutratio', 'showlabelsoutside', 'showxdistance', 'showydistance', 'shape', 'nodatamessage', 'captions', 'showxaxis', 'showyaxis',
    'centerlabel', 'customcolors', 'showlegend', 'legendtype', 'xdomain', 'ydomain', 'tooltips', 'linethickness', 'highlightpoints', 'interpolation', 'labelthreshold'], barSpacingMap = {
    'small': 0.3,
    'medium': 0.5,
    'large': 0.8
}, donutRatioMap = {
    'small': 0.3,
    'medium': 0.6,
    'large': 0.7
}, barSpacingMapInvert = invert(barSpacingMap), donutRatioMapInvert = invert(donutRatioMap), tickformats = {
    'Thousand': {
        'prefix': 'K',
        'divider': 1000
    },
    'Million': {
        'prefix': 'M',
        'divider': 1000000
    },
    'Billion': {
        'prefix': 'B',
        'divider': 1000000000
    }
}, chartId = '#preview-chart', dataTypeJSON = ['Column', 'Line', 'Pie', 'Bar', 'Donut', 'Bubble'], // Charts that supports the data to be JSON;
lineTypeCharts = ['Line', 'Area', 'Cumulative Line'], // Charts that does not supports the string type of data in the xaxis in the nvd3;
dataTypeArray = ['Cumulative Line', 'Area'], // Charts that supports the data to be Array
SAMPLE_DATA = {
    'group1': 'Europe',
    'group2': 'Asia',
    'group3': 'America',
    'group4': 'Australia'
};
// returns true if chart type is pie
const isPieChart = type => type === 'Pie';
// returns true if chart type is line
const isLineChart = type => type === 'Line';
// returns true if chart type is bar
const isBarChart = type => type === 'Bar';
// returns true if chart type is donut
const isDonutChart = type => type === 'Donut';
// returns true if chart type is bubble
const isBubbleChart = type => type === 'Bubble';
// returns true if chart type is column
const isColumnChart = type => type === 'Column';
// returns true if chart type is area
const isAreaChart = type => type === 'Area';
// returns true if chart type is area
const isPieType = type => isPieChart(type) || isDonutChart(type);
// The format of chart data is array of json objects in case of the following types of chart
const isChartDataJSON = type => includes(dataTypeJSON, type) || !includes(chartTypes, type);
// The format of chart data is array of objects in case of the following types of chart
const isChartDataArray = type => includes(dataTypeArray, type);
// returns true is the chart type is 'line', 'area' or 'cumulative line' else false
const isLineTypeChart = type => includes(lineTypeCharts, type);
// X/Y Domain properties are supported only for Column and Area charts
const isAxisDomainSupported = type => isColumnChart(type) || isAreaChart(type);
// Returns bar spacing value
const getBarSpacingValue = (value, prop) => {
    if (prop === 'value') {
        return barSpacingMap[value];
    }
    if (prop === 'key') {
        return barSpacingMapInvert[value];
    }
};
// Returns radius value
const getRadiusValue = (value, prop) => {
    if (prop === 'value') {
        return donutRatioMap[value];
    }
    if (prop === 'key') {
        return donutRatioMapInvert[value];
    }
};
// Returns labels config
const getLabelValues = (showlabels, showlabelsoutside, prop) => {
    const labelsConfig = {};
    switch (showlabels) {
        case 'hide':
            labelsConfig.showlabels = false;
            break;
        case 'inside':
            labelsConfig.showlabels = true;
            labelsConfig.showlabelsoutside = false;
            break;
        case 'outside':
            labelsConfig.showlabels = true;
            labelsConfig.showlabelsoutside = true;
            break;
    }
    return labelsConfig;
};
// Construct the sample data
const constructSampleData = (dataType, yaxisLength, shape) => {
    let first_series = [], second_series = [], third_series = [], first_series_array = [], second_series_array = [], third_series_array = [], first_series_bubble = [], second_series_bubble = [], third_series_bubble = [], data = [];
    switch (dataType) {
        case 'jsonFormat':
            first_series = [
                { 'x': '01/01/2001', 'y': 4000000 },
                { 'x': '01/01/2002', 'y': 1000000 },
                { 'x': '01/01/2003', 'y': 5000000 }
            ];
            second_series = [
                { 'x': '01/01/2001', 'y': 3000000 },
                { 'x': '01/01/2002', 'y': 4000000 },
                { 'x': '01/01/2003', 'y': 7000000 }
            ];
            third_series = [
                { 'x': '01/01/2001', 'y': 2000000 },
                { 'x': '01/01/2002', 'y': 8000000 },
                { 'x': '01/01/2003', 'y': 6000000 }
            ];
            data[0] = {
                values: first_series,
                key: SAMPLE_DATA.group1
            };
            if (yaxisLength >= 2) {
                data[1] = {
                    values: second_series,
                    key: SAMPLE_DATA.group2
                };
            }
            if (yaxisLength >= 3) {
                data[2] = {
                    values: third_series,
                    key: SAMPLE_DATA.group3
                };
            }
            break;
        case 'lineChartFormat':
            first_series = [
                { 'x': 1, 'y': 4000000 },
                { 'x': 2, 'y': 1000000 },
                { 'x': 3, 'y': 5000000 }
            ];
            second_series = [
                { 'x': 1, 'y': 3000000 },
                { 'x': 2, 'y': 4000000 },
                { 'x': 3, 'y': 7000000 }
            ];
            third_series = [
                { 'x': 1, 'y': 2000000 },
                { 'x': 2, 'y': 8000000 },
                { 'x': 3, 'y': 6000000 }
            ];
            data[0] = {
                values: first_series,
                key: SAMPLE_DATA.group1
            };
            if (yaxisLength >= 2) {
                data[1] = {
                    values: second_series,
                    key: SAMPLE_DATA.group2
                };
            }
            if (yaxisLength >= 3) {
                data[2] = {
                    values: third_series,
                    key: SAMPLE_DATA.group3
                };
            }
            break;
        case 'arrayFormat':
            first_series_array = [
                [1, 4000000],
                [2, 1000000],
                [3, 5000000]
            ];
            second_series_array = [
                [1, 3000000],
                [2, 4000000],
                [3, 7000000]
            ];
            third_series_array = [
                [1, 2000000],
                [2, 8000000],
                [3, 6000000]
            ];
            data[0] = {
                values: first_series_array,
                key: SAMPLE_DATA.group1
            };
            if (yaxisLength >= 2) {
                data[1] = {
                    values: second_series_array,
                    key: SAMPLE_DATA.group2
                };
            }
            if (yaxisLength >= 3) {
                data[2] = {
                    values: third_series_array,
                    key: SAMPLE_DATA.group3
                };
            }
            break;
        case 'bubbleFormat':
            shape = shape === 'random' ? allShapes[Math.floor(Math.random() * allShapes.length)] : shape;
            first_series_bubble = [
                { 'x': 80.66, 'y': 33739900, 'size': 78, 'shape': shape },
                { 'x': 79.84, 'y': 81902300, 'size': 90, 'shape': shape },
                { 'x': 78.6, 'y': 5523100, 'size': 45, 'shape': shape }
            ];
            second_series_bubble = [
                { 'x': 72.73, 'y': 79716200, 'size': 98, 'shape': shape },
                { 'x': 80.05, 'y': 61801600, 'size': 20, 'shape': shape },
                { 'x': 72.49, 'y': 73137200, 'size': 34, 'shape': shape }
            ];
            third_series_bubble = [
                { 'x': 68.09, 'y': 33739900, 'size': 45, 'shape': shape },
                { 'x': 81.55, 'y': 7485600, 'size': 78, 'shape': shape },
                { 'x': 68.60, 'y': 141850000, 'size': 56, 'shape': shape }
            ];
            data[0] = {
                values: first_series_bubble,
                key: SAMPLE_DATA.group1
            };
            if (yaxisLength >= 2) {
                data[1] = {
                    values: second_series_bubble,
                    key: SAMPLE_DATA.group2
                };
            }
            if (yaxisLength >= 3) {
                data[2] = {
                    values: third_series_bubble,
                    key: SAMPLE_DATA.group3
                };
            }
            break;
        case 'pieChartFormat':
            data = [
                { 'x': SAMPLE_DATA.group1, 'y': 1000000 },
                { 'x': SAMPLE_DATA.group2, 'y': 2000000 },
                { 'x': SAMPLE_DATA.group3, 'y': 3000000 },
                { 'x': SAMPLE_DATA.group4, 'y': 4000000 }
            ];
            break;
    }
    return data;
};
const getDataType = widgetContext => {
    const type = widgetContext.type;
    if (isLineChart(type)) {
        return 'lineChartFormat';
    }
    if (isPieType(type)) {
        return 'pieChartFormat';
    }
    if (isBubbleChart(type)) {
        return 'bubbleFormat';
    }
    return isChartDataJSON(type) ? 'jsonFormat' : 'arrayFormat';
};
// Sample data to populate when no data is bound
const getSampleData = widgetContext => constructSampleData(getDataType(widgetContext), split(widgetContext.yaxisdatakey, ',').length, widgetContext.shape);
// Check whether X/Y Domain was set to Min and is supported for the present chart
const isAxisDomainValid = (widgetContext, axis) => {
    if (widgetContext[axis + 'domain'] === 'Min' && (isAxisDomainSupported(widgetContext.type))) {
        return true;
    }
    return false;
};
// Check whether min and max values are finite or not
const areMinMaxValuesValid = values => {
    if (isFinite(values.min) && isFinite(values.max)) {
        return true;
    }
    return false;
};
const getYScaleMinValue = value => {
    const _min = Math.floor(value);
    /* If the number has a) decimal part returning floor value - 0.1
     b) no decimal part returning floor value - 1 */
    return Math.abs(value) - _min > 0 ? value - 0.1 : _min - 1;
};
// Chooses the data points of line/cumulative line/area chart and highlights them
const highlightPoints = (id, highlightpoints) => {
    const chartSvg = id ? d3.select('#wmChart' + id + ' svg') : d3.select(chartId + ' svg');
    if (highlightpoints) {
        chartSvg.selectAll('.nv-point')
            .style('stroke-width', '6px')
            .style('fill-opacity', '0.95')
            .style('stroke-opacity', '0.95');
    }
    else {
        chartSvg.selectAll('.nv-point')
            .style('stroke-width', '0px')
            .style('fill-opacity', '0');
    }
};
// Chooses the line of line/cumulative line and increases the thickness of it
const setLineThickness = (id, thickness) => {
    const chartSvg = id ? d3.select('#wmChart' + id + ' svg') : d3.select(chartId + ' svg');
    thickness = thickness || 1.5;
    const lines = chartSvg.selectAll('.nv-line');
    if (lines.size() !== 0) {
        lines.style('stroke-width', thickness);
    }
};
// Constructing a common key value map for preview and canvas mode
const initProperties = (widgetContext, propertyValueMap) => {
    if (!propertyValueMap || isEmptyObject(propertyValueMap)) {
        propertyValueMap = {};
    }
    forEach(basicProperties, prop => {
        if (isUndefined(propertyValueMap[prop])) {
            propertyValueMap[prop] = widgetContext[prop];
        }
    });
    return propertyValueMap;
};
const getNumberValue = (value, callback) => {
    return isNaN(parseInt(value, 10)) ? callback(value, 'value') : value;
};
// Formats the given value according to date format
const getDateFormatedData = (dateFormat, d) => {
    dateFormat = dateFormat || '%x';
    /**
     * if date value is string "20-05-2019" then new Date(value) return 20May2019 with current time in India,
     * whereas this will return 19May2019 with time lagging for few hours.
     * This is because it returns UTC time i.e. Coordinated Universal Time (UTC).
     * To create date in local time use moment
     */
    if (dateFormat == '%c') {
        dateFormat = '%a %b %e %X %Y';
    }
    return d3.timeFormat(dateFormat)(new Date(moment(moment(d).format()).valueOf()));
};
const removeTrailingZeros = value => {
    if (!value) {
        return value;
    }
    // Convert value to a string if it's a number
    const stringValue = typeof value === 'number' ? value.toString() : value;
    // Remove trailing zeros
    return stringValue.replace(/\.0+([A-Za-z]*)$/, '$1').replace(/\.([1-9]+)0+([A-Za-z]*)$/, '.$1$2');
};
// Formats the given value according to number format
const getNumberFormatedData = (numberFormat, d) => {
    let formattedData, divider, prefix;
    // formatting the data based on number format selected
    if (numberFormat) {
        let numberFormatter;
        if (numberFormat == 'Thousand' || numberFormat == 'Million' || numberFormat == 'Billion') {
            numberFormatter = d3.format(',.2s');
        }
        else if (numberFormat == '%') {
            numberFormatter = d3.format('.2%');
        }
        else if (numberFormat == '.f') {
            numberFormatter = d3.format('.2f');
        }
        else {
            numberFormatter = d3.format(numberFormat);
        }
        formattedData = numberFormatter(d);
        // Getting the respective divider[1000,1000000,1000000000] based on the number format choosen
        divider = (tickformats[numberFormat] && tickformats[numberFormat].divider) || 0;
        prefix = tickformats[numberFormat] && tickformats[numberFormat].prefix;
        if (prefix && divider !== 0) {
            formattedData = d3.format('.2f')(d / divider) + prefix;
        }
    }
    else {
        // Auto formatting the data when no formating option is chosen
        formattedData = d >= 1000 ? d3.format('.1s')(d) : d;
    }
    formattedData = removeTrailingZeros(formattedData);
    return formattedData;
};
// Set the visibility property of the chart x,y axis due to a bug in the nvd3
const toggleAxisShow = (property, value) => {
    const $xAxis = d3.select(chartId + ' g.nv-axis.nv-x'), $yAxis = d3.select(chartId + ' g.nv-axis.nv-y');
    if (property === 'showxaxis') {
        $xAxis.style('visibility', value ? 'visible' : 'hidden');
    }
    else {
        $yAxis.style('visibility', value ? 'visible' : 'hidden');
    }
};
const modifyLegendPosition = (widgetContext, position, id) => {
    const showLegend = isShowLegend(widgetContext.showlegend), chart_Id = id ? '#wmChart' + id : chartId, legendWrap = d3.select(chart_Id + ' .nv-legendWrap'), legendPadding = 5;
    // Return when showlegend is false
    if (!showLegend || !legendWrap['_groups'][0][0]) {
        return;
    }
    if (position === 'bottom') {
        const legendWrapHeight = legendWrap['_groups'][0][0].getBoundingClientRect().height, wrap = d3.select(chart_Id + ' .nv-wrap'), wrapTransform = (wrap && wrap.attr('transform')) ? wrap.attr('transform').replace(/, /g, ',') : '', coordinates = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(wrapTransform), getChartHeight = () => {
            let chartHeight = $(chart_Id + ' svg>.nvd3.nv-wrap')[0].getBoundingClientRect().height;
            if (chartHeight === 0) { // fix for IE
                chartHeight = ($(chart_Id + ' svg')[0].getBoundingClientRect().height - (legendWrapHeight + 15));
            }
            return chartHeight;
        };
        legendWrap.attr('transform', 'translate(0 , ' + (getChartHeight() - legendWrapHeight - legendPadding) + ')');
        if (coordinates) {
            wrap.attr('transform', 'translate(' + coordinates[1] + ',' + legendPadding + ')');
        }
    }
};
// Returns value if legend need to shown or not
const isShowLegend = value => {
    // Old projects will have either true or false
    if (value === 'false' || value === false) {
        return false;
    }
    if (value === 'true' || value === true) {
        return true;
    }
    // New projects will have either 'Hide Legend', 'Show Top', 'Show Bottom'
    return value === 'hide' ? false : true;
};
/**
 * Customise the tooltip for donut & pie charts and also for charts having only one value attached to yaxis
 * @param key
 * @param label
 */
const customiseTooltip = (chart, propertyValueMap, widgetContext, label) => {
    d3.selectAll('.nvtooltip').style('opacity', 0);
    chart.tooltip.contentGenerator((key, propertyValueMap) => {
        let xValue = key.data.x, yValue;
        yValue = getNumberFormatedData(propertyValueMap.ynumberformat, key.data.y);
        if (isPieType(widgetContext.type)) {
            label = key.data.x;
            xValue = '';
        }
        return '<table>' +
            '<tbody>' +
            '<tr class="value"><b>' + xValue +
            '</b></tr>' +
            '<tr>' +
            '<td class="legend-color-guide"><div style="background-color:' + key.color + ';"></div></td>' +
            '<td class="key">' + label + '</td>' +
            '<td class="value">' + yValue + '</td>' +
            '</tr>' +
            '</tbody>' +
            '</table>';
    });
};
// intializes the chart obejct
const initChart = (widgetContext, xDomainValues, yDomainValues, propertyValueMap, isPreview) => {
    propertyValueMap = initProperties(widgetContext, propertyValueMap);
    let chart, colors = [], xaxislabel, yaxislabel, labelConfig, radius, barSpacing, showLegend, xAxisValue, hasMultipleYValues;
    const xValue = {}, yValue = {};
    switch (widgetContext.type) {
        case 'Column':
            barSpacing = getNumberValue(propertyValueMap.barspacing, getBarSpacingValue) || barSpacingMap.medium;
            chart = nv.models.multiBarChart()
                .x(d => d.x)
                .y(d => d.y)
                .reduceXTicks(propertyValueMap.reducexticks)
                .rotateLabels(0)
                .showControls(false)
                .stacked(propertyValueMap.viewtype === 'Stacked' ? true : false)
                .groupSpacing(barSpacing);
            break;
        case 'Cumulative Line':
            chart = nv.models.cumulativeLineChart()
                .x(d => d[0])
                .y(d => d[1])
                .showControls(false)
                .useInteractiveGuideline(propertyValueMap.tooltips)
                .interpolate(propertyValueMap.interpolation);
            break;
        case 'Line':
            chart = nv.models.lineChart()
                .useInteractiveGuideline(propertyValueMap.tooltips)
                .interpolate(propertyValueMap.interpolation);
            break;
        case 'Area':
            chart = nv.models.stackedAreaChart()
                .x(d => d.x)
                .y(d => d.y)
                .clipEdge(true)
                .showControls(false)
                .style(propertyValueMap.areaviewtype)
                .useInteractiveGuideline(propertyValueMap.tooltips)
                .interpolate(propertyValueMap.interpolation);
            break;
        case 'Bar':
            barSpacing = getNumberValue(propertyValueMap.barspacing, getBarSpacingValue) || barSpacingMap.medium;
            chart = nv.models.multiBarHorizontalChart()
                .x(d => d.x)
                .y(d => d.y)
                .showControls(false)
                .stacked(propertyValueMap.viewtype === 'Stacked' ? true : false)
                .showValues(propertyValueMap.showvalues)
                .groupSpacing(barSpacing);
            break;
        case 'Pie':
        case 'Donut':
            labelConfig = getLabelValues(propertyValueMap.showlabels, propertyValueMap.showlabelsoutside, 'value');
            radius = getNumberValue(propertyValueMap.donutratio, getRadiusValue) || donutRatioMap.medium;
            chart = nv.models.pieChart()
                .x(d => d.x)
                .y(d => d.y)
                .showLabels(labelConfig.showlabels)
                .labelType(propertyValueMap.labeltype)
                .valueFormat(d3.format('%'))
                .title(propertyValueMap.centerlabel)
                .labelThreshold(propertyValueMap.labelthreshold || 0.01)
                .labelsOutside(labelConfig.showlabelsoutside);
            if (isDonutChart(widgetContext.type)) {
                chart.donut(true)
                    .donutRatio(radius);
            }
            if (propertyValueMap.labeltype === 'key-value') {
                chart.labelType(d => d.data.x + ' ' + d.data.y);
            }
            break;
        case 'Bubble':
            chart = nv.models.scatterChart()
                .x(d => d.x)
                .y(d => d.y)
                .showDistX(propertyValueMap.showxdistance)
                .showDistY(propertyValueMap.showydistance);
            break;
    }
    if (xDomainValues) {
        xValue.min = xDomainValues.min.x || xDomainValues.min[0];
        xValue.max = xDomainValues.max.x || xDomainValues.max[0];
        // If the values on the x axis are string then min max values gives Infinity
        if (areMinMaxValuesValid(xValue)) {
            // Reducing the min value to 0.1 so the min value is not missed out
            xValue.min = getYScaleMinValue(xValue.min);
            chart.xDomain([xValue.min, xValue.max]);
        }
    }
    if (yDomainValues) {
        // Reducing the min value to 1 so the min value is not missed out
        yValue.min = yDomainValues.min.y || yDomainValues.min[1];
        yValue.max = yDomainValues.max.y || yDomainValues.max[1];
        // If the values on the y axis are string or invalid then min max values gives Infinity
        if (areMinMaxValuesValid(yValue)) {
            // Reducing the min value to 1 so the min value is not missed out
            yValue.min = getYScaleMinValue(yValue.min);
            chart.yDomain([yValue.min, yValue.max]);
        }
    }
    // Setting the legend type choosen by user or default it will be furious
    chart.legend.vers((propertyValueMap.legendtype && propertyValueMap.legendtype.toLowerCase()) || 'furious');
    if (!includes(chartTypes, widgetContext.type)) {
        chart = nv.models.multiBarChart()
            .x(d => d.x)
            .y(d => d.y);
    }
    if (isPieType(widgetContext.type)) {
        // In case of pie/donut chart formatting the values of it
        if (propertyValueMap.labeltype === 'percent') {
            chart.valueFormat(d3.format('%'));
        }
        else {
            chart.valueFormat(d => getNumberFormatedData(propertyValueMap.ynumberformat, d));
        }
        // Customizing the tooltips in case of the pie and donut when labelType is value
        customiseTooltip(chart, propertyValueMap, widgetContext);
    }
    else {
        chart.showXAxis(propertyValueMap.showxaxis)
            .showYAxis(propertyValueMap.showyaxis);
        chart.legendPosition(propertyValueMap.showlegend);
        // Setting the labels if they are specified explicitly or taking the axiskeys chosen
        xaxislabel = propertyValueMap.xaxislabel || prettifyLabels(widgetContext.xaxisdatakey) || 'x caption';
        yaxislabel = propertyValueMap.yaxislabel || prettifyLabels(widgetContext.yaxisdatakey) || 'y caption';
        // Checking if y axis has multiple values
        if (widgetContext.yaxisdatakey && widgetContext.yaxisdatakey.split(',').length > 1) {
            hasMultipleYValues = true;
        }
        // Customizing the tooltip to show yaxislabel, only if the y axis contains one value
        if (!hasMultipleYValues && !isBubbleChart(widgetContext.type)) {
            customiseTooltip(chart, propertyValueMap, widgetContext, yaxislabel);
        }
        // Adding the units to the captions if they are specified
        xaxislabel += propertyValueMap.xunits ? '(' + propertyValueMap.xunits + ')' : '';
        yaxislabel += propertyValueMap.yunits ? '(' + propertyValueMap.yunits + ')' : '';
        chart.xAxis
            .axisLabel(xaxislabel)
            .axisLabelDistance(propertyValueMap.xaxislabeldistance)
            .staggerLabels(propertyValueMap.staggerlabels);
        // If date format set format based date format
        if (propertyValueMap.xdateformat || (isPreview && !isBubbleChart(widgetContext.type))) {
            if (isLineTypeChart(widgetContext.type)) {
                chart.xAxis.tickFormat(d => {
                    // get the actual value
                    xAxisValue = isPreview ? dateList[d - 1] : widgetContext.xDataKeyArr[d];
                    return getDateFormatedData(propertyValueMap.xdateformat, xAxisValue);
                });
            }
            else {
                chart.xAxis.tickFormat(d => getDateFormatedData(propertyValueMap.xdateformat, d));
            }
        }
        else if (propertyValueMap.xnumberformat) {
            chart.xAxis.tickFormat(d => getNumberFormatedData(propertyValueMap.xnumberformat, d));
        }
        else {
            if (isLineTypeChart(widgetContext.type)) {
                // get the actual value
                chart.xAxis.tickFormat(d => widgetContext.xDataKeyArr[d]);
            }
        }
        chart.yAxis
            .axisLabel(yaxislabel)
            .axisLabelDistance(propertyValueMap.yaxislabeldistance)
            .staggerLabels(propertyValueMap.staggerlabels)
            .tickFormat(d => getNumberFormatedData(propertyValueMap.ynumberformat, d));
        if (isBarChart(widgetContext.type)) {
            chart.valueFormat(d => getNumberFormatedData(propertyValueMap.ynumberformat, d));
        }
    }
    // Support for custom colors if user gives direct string of colors in text box
    if (isString(propertyValueMap.customcolors) && propertyValueMap.customcolors) {
        colors = split(propertyValueMap.customcolors, ',');
    }
    if (isArray(propertyValueMap.customcolors)) {
        colors = propertyValueMap.customcolors;
    }
    showLegend = isShowLegend(propertyValueMap.showlegend);
    chart.showLegend(showLegend)
        .margin({ top: propertyValueMap.offsettop, right: propertyValueMap.offsetright, bottom: propertyValueMap.offsetbottom, left: propertyValueMap.offsetleft })
        .color(colors.length ? colors : themes[propertyValueMap.theme].colors);
    chart.tooltip.enabled(propertyValueMap.tooltips);
    widgetContext.message = propertyValueMap.nodatamessage || 'No data found';
    // setting the no data message
    chart.noData(widgetContext.message);
    if (isLineTypeChart(widgetContext.type) && widgetContext.highlightpoints) {
        chart.dispatch.on('stateChange', () => {
            setTimeout(() => postPlotChartProcess(widgetContext), 100);
        });
    }
    if (widgetContext.showlegend && (widgetContext.type === 'Donut' || widgetContext.type === 'Pie')) {
        if (widgetContext.showlegend === 'right') {
            chart.legendPosition('right');
        }
    }
    return chart;
};
// @ts-ignore
const postPlotChartProcess = (widgetContext, isPreview) => {
    const id = isPreview ? null : widgetContext.$id;
    // If user sets to highlight the data points and increase the thickness of the line
    if (isLineTypeChart(widgetContext.type)) {
        setLineThickness(id, widgetContext.linethickness);
        highlightPoints(id, widgetContext.highlightpoints);
    }
    // Modifying the legend position only when legend is shown
    // if (widgetContext.showlegend) {
    //     modifyLegendPosition(widgetContext, widgetContext.showlegend, id);
    // }
};
// @ts-ignore
const getDateList = () => dateList;

const _c0 = ["wmChart", ""];
const _c1 = (a0, a1) => ({ "loading": a0, "panel-body": a1 });
const _c2 = a0 => ({ "error": a0 });
function ChartComponent_div_0_div_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "div", 9);
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("innerHTML", ctx_r0.subheading, i0.ɵɵsanitizeHtml);
} }
function ChartComponent_div_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 4)(1, "h3", 5)(2, "div", 6);
    i0.ɵɵelement(3, "i");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(4, "div", 7);
    i0.ɵɵtemplate(5, ChartComponent_div_0_div_5_Template, 1, 1, "div", 8);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance(3);
    i0.ɵɵclassMapInterpolate1("app-icon panel-icon ", ctx_r0.iconclass, "");
    i0.ɵɵclassProp("ng-hide", !ctx_r0.iconclass);
    i0.ɵɵadvance();
    i0.ɵɵproperty("innerHTML", ctx_r0.title, i0.ɵɵsanitizeHtml);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r0.subheading);
} }
function ChartComponent_div_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 10);
    i0.ɵɵelement(1, "p", 11);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵproperty("title", ctx_r0.hintMsg)("ngClass", i0.ɵɵpureFunction1(3, _c2, ctx_r0.invalidConfig))("innerText", ctx_r0.errMsg);
} }
const WIDGET_CONFIG = { widgetType: 'wm-chart', hostClass: 'app-chart' };
const options = {
    'Bubble': ['bubblesize', 'shape']
}, NONE = 'none', advanceDataProps = ['aggregation', 'aggregationcolumn', 'groupby', 'orderby'], 
// XPaths to get actual data of data points in charts
chartDataPointXpath = {
    'Column': 'rect.nv-bar',
    'Bar': 'g.nv-bar',
    'Area': '.nv-stackedarea .nv-point',
    'Cumulative Line': '.nv-cumulativeLine .nv-scatterWrap path.nv-point',
    'Line': '.nv-lineChart .nv-scatterWrap path.nv-point',
    'Pie': '.nv-pieChart .nv-slice path',
    'Donut': '.nv-pieChart .nv-slice path',
    'Bubble': '.nv-scatterChart .nv-point-paths path'
}, 
// all properties of the chart
allOptions = ['bubblesize', 'shape'], styleProps = {
    'fontunit': 'font-size',
    'fontsize': 'font-size',
    'color': 'fill',
    'fontfamily': 'font-family',
    'fontweight': 'font-weight',
    'fontstyle': 'font-style',
    'textdecoration': 'text-decoration'
}, 
// Getting the relevant aggregation function based on the selected option
aggregationFnMap = {
    'average': 'AVG',
    'count': 'COUNT',
    'maximum': 'MAX',
    'minimum': 'MIN',
    'sum': 'SUM'
};
const getBooleanValue = val => {
    if (val === true || val === 'true') {
        return true;
    }
    if (val === false || val === 'false') {
        return false;
    }
    return val;
};
// returns orderby columns and their orders in two separate arrays
const getLodashOrderByFormat = orderby => {
    let columns;
    const orderByColumns = [], orders = [];
    forEach(split(orderby, ','), function (col) {
        columns = split(col, ':');
        orderByColumns.push(columns[0]);
        orders.push(columns[1]);
    });
    return {
        'columns': orderByColumns,
        'orders': orders
    };
};
// Replacing the '.' by the '$' because '.' is not supported in the alias names
const getValidAliasName = aliasName => aliasName ? aliasName.replace(/\./g, '$') : null;
// Applying the font related styles for the chart
const setTextStyle = (properties, id) => {
    const charttext = d3.select('#wmChart' + id + ' svg').selectAll('text');
    if (!charttext.empty()) {
        charttext.style(properties);
    }
};
const angle = d => {
    const a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
    return a > 90 ? a - 180 : a;
};
class ChartComponent extends StylableComponent {
    static { this.initializeProps = registerProps(); }
    isGroupByEnabled() {
        return !!(this.groupby && this.groupby !== NONE);
    }
    // Check if x and y axis that are chosen are valid to plot chart
    isValidAxis() {
        // Check if x axis and y axis are chosen and are not equal
        return this.binddataset ? (this.xaxisdatakey && this.yaxisdatakey) : true;
    }
    // Check if aggregation is chosen
    isAggregationEnabled() {
        return !!((this.isGroupByEnabled() && this.aggregation !== NONE && this.aggregationcolumn));
    }
    // Check if either groupby, aggregation or orderby is chosen
    isDataFilteringEnabled() {
        /*Query need to be triggered if any of the following cases satisfy
        * 1. Group By and aggregation both chosen
        * 2. Only Order By is chosen
        * */
        return this.isAggregationEnabled() || (!this.isVisuallyGrouped && this.orderby);
    }
    /*Charts like Line,Area,Cumulative Line does not support any other datatype
        other than integer unlike the column and bar.It is a nvd3 issue. Inorder to
        support that this is a fix*/
    getxAxisVal(dataObj, xKey, index) {
        const value = get(dataObj, xKey);
        // If x axis is other than number type then add indexes
        if (isLineTypeChart(this.type) && !isNumberType(this.xAxisDataType)) {
            // Verification to get the unique data keys
            this.xDataKeyArr.push(value);
            // Check if it is of type Date
            if (value instanceof Date) {
                return value;
            }
            else {
                return index;
            }
        }
        return value;
    }
    // Getting the min and max values among all the x values
    getXMinMaxValues(datum) {
        if (!datum) {
            return;
        }
        const xValues = {};
        /*
         compute the min x value
         eg: When data has objects
            input: [{x:1, y:2}, {x:2, y:3}, {x:3, y:4}]
            min x: 1
         eg: When data has arrays
            input: [[10, 20], [20, 30], [30, 40]];
            min x: 10
        */
        xValues.min = minBy(datum.values, dataObject => dataObject.x || dataObject[0]);
        /*
         compute the max x value
         eg: When data has objects
            input: [{x:1, y:2}, {x:2, y:3}, {x:3, y:4}]
            max x: 3
         eg: When data has arrays
            input: [[10, 20], [20, 30], [30, 40]];
            max x: 30
         */
        xValues.max = maxBy(datum.values, dataObject => dataObject.x || dataObject[0]);
        return xValues;
    }
    // Getting the min and max values among all the y values
    getYMinMaxValues(datum) {
        const yValues = {}, minValues = [], maxValues = [];
        if (!datum) {
            return;
        }
        /*
         Getting the min and max y values among all the series of data
         compute the min y value
         eg: When data has objects
            input: [[{x:1, y:2}, {x:2, y:3}, {x:3, y:4}], [{x:2, y:3}, {x:3, y:4}, {x:4, y:5}]]
            min y values : '2'(among first set) & '3'(among second set)
            max y values : '4'(among first set) & '5'(among second set)

         eg: When data has arrays
            input: [[[10, 20], [20, 30], [30, 40]], [[20, 30], [30, 40], [40, 50]]]
            min y values : '20'(among first set) & '30'(among second set)
            max y values : '40'(among first set) & '50'(among second set)
         */
        forEach(datum, data => {
            minValues.push(minBy(data.values, function (dataObject) {
                return dataObject.y || dataObject[1];
            }));
            maxValues.push(maxBy(data.values, function (dataObject) {
                return dataObject.y || dataObject[1];
            }));
        });
        // Gets the least and highest values among all the min and max values of respective series of data
        yValues.min = minBy(minValues, dataObject => dataObject.y || dataObject[1]);
        yValues.max = maxBy(maxValues, dataObject => dataObject.y || dataObject[1]);
        return yValues;
    }
    // If the x-axis values are undefined, we return empty array else we return the values
    getValidData(values) {
        return (values.length === 1 && values[0] === undefined) ? [] : values;
    }
    // Returns the single data point based on the type of the data chart accepts
    valueFinder(dataObj, xKey, yKey, index, shape) {
        const xVal = this.getxAxisVal(dataObj, xKey, index), value = get(dataObj, yKey), yVal = parseFloat(value) || value, size = parseFloat(dataObj[this.bubblesize]) || 2;
        let dataPoint = {};
        if (isChartDataJSON(this.type)) {
            dataPoint.x = xVal;
            dataPoint.y = yVal;
            // only Bubble chart has the third dimension
            if (isBubbleChart(this.type)) {
                dataPoint.size = size;
                dataPoint.shape = shape || 'circle';
            }
        }
        else if (isChartDataArray(this.type)) {
            dataPoint = [xVal, yVal];
        }
        // Adding actual unwrapped data to chart data to use at the time of selected data point of chart event
        dataPoint._dataObj = dataObj;
        return dataPoint;
    }
    // Setting appropriate error messages
    setErrMsg(message) {
        if (this.showNoDataMsg) {
            this.showContentLoadError = true;
            this.invalidConfig = true;
            // TODO: Set the locale from the message
            this.errMsg = ''; // $rootScope.locale[message];
        }
    }
    processChartData() {
        this.sampleData = getSampleData(this);
        // scope variables used to keep the actual key values for x-axis
        this.xDataKeyArr = [];
        // Plotting the chart with sample data when the chart dataset is not bound
        if (!this.binddataset) {
            this.xDataKeyArr = getDateList();
            return this.sampleData;
        }
        if (!this.chartData || !this.chartData.length) {
            return [];
        }
        let datum = [], yAxisKey, shapes = [], values = [];
        const xAxisKey = this.xaxisdatakey, yAxisKeys = this.yaxisdatakey ? this.yaxisdatakey.split(',') : [], dataSet = this.chartData;
        if (isArray(dataSet)) {
            if (isPieType(this.type)) {
                yAxisKey = yAxisKeys[0];
                datum = map(dataSet, (dataObj, index) => {
                    if (!isEmptyObject(dataSet[index])) {
                        return this.valueFinder(dataSet[index], xAxisKey, yAxisKey);
                    }
                });
                datum = this.getValidData(datum);
            }
            else {
                if (isBubbleChart(this.type)) {
                    shapes = this.shape === 'random' ? allShapes : this.shape;
                }
                yAxisKeys.forEach((yAxisKey, series) => {
                    values = map(dataSet, (dataObj, index) => {
                        if (!isEmptyObject(dataSet[index])) {
                            return this.valueFinder(dataSet[index], xAxisKey, yAxisKey, index, (isArray(shapes) && shapes[series]) || this.shape);
                        }
                    });
                    values = this.getValidData(values);
                    datum.push({
                        values: values,
                        key: prettifyLabels(yAxisKey)
                    });
                });
            }
        }
        return datum;
    }
    setChartData(data) {
        if (data) {
            this._processedData = data;
        }
    }
    getChartData() {
        return this._processedData;
    }
    // constructing the grouped data based on the selection of orderby, x & y axis
    getVisuallyGroupedData(queryResponse, groupingColumn) {
        let groupData = {}, groupValues = [], orderByDetails, maxLength;
        const chartData = [], _isAreaChart = isAreaChart(this.type), yAxisKey = first(split(this.yaxisdatakey, ','));
        this.xDataKeyArr = [];
        queryResponse = orderBy(queryResponse, split(this.groupby, ','));
        if (this.orderby) {
            orderByDetails = getLodashOrderByFormat(this.orderby);
            queryResponse = orderBy(queryResponse, orderByDetails.columns, orderByDetails.orders);
        }
        queryResponse = groupBy(queryResponse, groupingColumn);
        // In case of area chart all the series data should be of same length
        if (_isAreaChart) {
            maxLength = max(map(queryResponse, obj => obj.length));
        }
        forEach(queryResponse, (values, groupKey) => {
            groupValues = isAreaChart ? fill(new Array(maxLength), [0, 0]) : [];
            forEachRight(values, (value, index) => {
                groupValues[index] = this.valueFinder(value, this.xaxisdatakey, yAxisKey, index);
            });
            groupData = {
                key: groupKey,
                values: groupValues
            };
            chartData.push(groupData);
        });
        return chartData;
    }
    /*Decides whether the data should be visually grouped or not
            Visually grouped when a different column is choosen in the group by other than x and y axis and aggregation is not chosen*/
    getGroupingDetails() {
        if (this.isGroupByEnabled() && !this.isAggregationEnabled()) {
            let isVisuallyGrouped = false, visualGroupingColumn, groupingExpression, columns = [], groupingColumnIndex;
            const groupbyColumns = this.groupby && this.groupby !== NONE ? this.groupby.split(',') : [], yAxisKeys = this.yaxisdatakey ? this.yaxisdatakey.split(',') : [];
            if (groupbyColumns.length > 1) {
                /*Getting the group by column which is not selected either in x or y axis*/
                groupbyColumns.every((column, index) => {
                    if (this.xaxisdatakey !== column && $.inArray(column, yAxisKeys) === -1) {
                        isVisuallyGrouped = true;
                        visualGroupingColumn = column;
                        groupingColumnIndex = index;
                        groupbyColumns.splice(groupingColumnIndex, 1);
                        return false;
                    }
                    return true;
                });
                // Constructing the groupby expression
                if (visualGroupingColumn) {
                    columns.push(visualGroupingColumn);
                }
                if (groupbyColumns.length) {
                    columns = concat(columns, groupbyColumns);
                }
            }
            // If x and y axis are not included in aggregation need to be included in groupby
            if (this.xaxisdatakey !== this.aggregationcolumn) {
                columns.push(this.xaxisdatakey);
            }
            forEach(yAxisKeys, key => {
                if (key !== this.aggregationcolumn) {
                    columns.push(key);
                }
            });
            groupingExpression = columns.join(',');
            // set isVisuallyGrouped flag in scope for later use
            this.isVisuallyGrouped = isVisuallyGrouped;
            return {
                expression: groupingExpression,
                isVisuallyGrouped: isVisuallyGrouped,
                visualGroupingColumn: visualGroupingColumn
            };
        }
        return {
            expression: '',
            isVisuallyGrouped: false,
            visualGroupingColumn: ''
        };
    }
    // Function to get the aggregated data after applying the aggregation & group by or order by operations.
    getAggregatedData(callback) {
        const variable = this.datasource, yAxisKeys = this.yaxisdatakey ? this.yaxisdatakey.split(',') : [], data = {};
        let sortExpr, columns = [], colAlias, orderByColumns, groupByFields = [];
        if (!variable) {
            return;
        }
        if (this.isGroupByEnabled()) {
            groupByFields = split(this.groupby, ',');
        }
        if (this.orderby) {
            sortExpr = replace(this.orderby, /:/g, ' ');
            columns = uniq(concat(columns, groupByFields, [this.aggregationcolumn]));
            orderByColumns = getLodashOrderByFormat(this.orderby).columns;
            // If the orderby column is chosen either in groupby or orderby then replace . with $ for that column
            forEach(intersection(columns, orderByColumns), col => {
                colAlias = getValidAliasName(col);
                // @ts-ignore
                sortExpr = replace(sortExpr, col, colAlias);
            });
        }
        if (this.isAggregationEnabled()) {
            // Send the group by in the aggregations api only if aggregation is also chosen
            data.groupByFields = groupByFields;
            data.aggregations = [
                {
                    'field': this.aggregationcolumn,
                    'type': aggregationFnMap[this.aggregation],
                    'alias': getValidAliasName(this.aggregationcolumn)
                }
            ];
        }
        // Execute the query.
        variable.execute('getAggregatedData', {
            'aggregations': data,
            'sort': sortExpr
        }).then(response => {
            // Transform the result into a format supported by the chart.
            const chartData = [], aggregationAlias = getValidAliasName(this.aggregationcolumn), xAxisAliasKey = getValidAliasName(this.xaxisdatakey), yAxisAliasKeys = [];
            yAxisKeys.forEach(yAxisKey => yAxisAliasKeys.push(getValidAliasName(yAxisKey)));
            forEach(response.body.content, (responseContent) => {
                const obj = {};
                // Set the response in the chartData based on 'aggregationColumn', 'xAxisDataKey' & 'yAxisDataKey'.
                if (this.isAggregationEnabled()) {
                    obj[this.aggregationcolumn] = responseContent[aggregationAlias];
                    obj[this.aggregationcolumn] = get(responseContent, aggregationAlias) || get(responseContent, this.aggregationcolumn);
                }
                obj[this.xaxisdatakey] = get(responseContent, xAxisAliasKey) || get(responseContent, this.xaxisdatakey);
                yAxisKeys.forEach((yAxisKey, index) => {
                    obj[yAxisKey] = responseContent[yAxisAliasKeys[index]];
                    obj[yAxisKey] = get(responseContent, yAxisAliasKeys[index]) || get(responseContent, yAxisKey);
                });
                chartData.push(obj);
            });
            this.chartData = chartData;
            triggerFn(callback);
        }, () => {
            this.chartData = [];
            this.setErrMsg('MESSAGE_ERROR_FETCH_DATA');
            triggerFn(callback);
        });
    }
    // This function sets maximum width for the labels that can be displayed.This will helpful when they are overlapping
    setLabelsMaxWidth() {
        let xTicks, tickWidth, maxLength, xDist, yDist, totalHeight, maxNoLabels, nthElement, labelsAvailableWidth, barWrapper, yAxisWrapper, svgWrapper;
        const fontsize = parseInt(this.fontsize, 10) || 12, isBarchart = isBarChart(this.type);
        // getting the x ticks in the chart
        xTicks = $('#wmChart' + this.$id + ' svg').find('g.nv-x').find('g.tick').find('text');
        // getting the distance between the two visible ticks associated with visible text
        xTicks.each(function () {
            const xTick = $(this);
            let xTransform, tickDist;
            if (xTick.text() && xTick.css('opacity') === '1') {
                xTransform = xTick.parent().attr('transform').split(',');
                xDist = parseFloat(xTransform[0].substr(10));
                yDist = parseFloat(xTransform[1] || '0');
                if (!isBarchart && xDist > 0) {
                    tickDist = xDist;
                }
                else if (yDist > 0) {
                    tickDist = yDist;
                }
                if (tickWidth) {
                    tickWidth = tickDist - tickWidth;
                    return false;
                }
                tickWidth = tickDist;
                return true;
            }
        });
        // In case of bar chart getting the available space for the labels to be displayed
        if (isBarchart) {
            barWrapper = $('#wmChart' + this.$id + ' svg>g.nv-wrap>g>g.nv-barsWrap')[0];
            yAxisWrapper = $('#wmChart' + this.$id + ' svg>g.nv-wrap>g>g.nv-y')[0];
            svgWrapper = $('#wmChart' + this.$id + ' svg')[0];
            // getting the total height of the chart
            totalHeight = barWrapper ? barWrapper.getBoundingClientRect().height : 0;
            // getting the labels available space
            labelsAvailableWidth = yAxisWrapper ? svgWrapper.getBoundingClientRect().width - yAxisWrapper.getBoundingClientRect().width : svgWrapper.getBoundingClientRect().width;
            // Setting the max length for the label
            maxLength = Math.round(labelsAvailableWidth / fontsize);
            // if available space for each label is less than the font-size
            // then limiting the labels to be displayed
            if (tickWidth < fontsize) {
                // calculate the maximum no of labels to be fitted
                maxNoLabels = totalHeight / fontsize;
                // showing only the nth element
                nthElement = Math.ceil(this.chartData.length / maxNoLabels);
                // showing up only some labels
                d3.select('#wmChart' + this.$id + ' svg').select('g.nv-x').selectAll('g.tick').select('text').each(function (text, i) {
                    // hiding every non nth element
                    if (i % nthElement !== 0) {
                        d3.select(this).attr('opacity', 0);
                    }
                });
            }
        }
        else {
            // Setting the max length for the label
            maxLength = Math.round(tickWidth / fontsize);
        }
        // maxLength should always be a positive number
        maxLength = Math.abs(maxLength);
        // Validating if every label exceeds the max length and if so limiting the length and adding ellipsis
        xTicks.each(function () {
            if (this.textContent.length > maxLength) {
                this.textContent = this.textContent.substr(0, maxLength) + '...';
            }
        });
    }
    // Returns the columns of that can be choosen in the x and y axis
    getDefaultColumns() {
        let type, stringColumn, i, temp;
        const defaultColumns = [], columns = this.datasource.execute(DataSource.Operation.GET_PROPERTIES_MAP) || [];
        for (i = 0; i < columns.length && defaultColumns.length <= 2; i += 1) {
            type = columns[i].type;
            if (!columns[i].isRelated && (isNumberType(type))) {
                defaultColumns.push(columns[i].fieldName);
            }
            else if (type === 'string' && !stringColumn) {
                stringColumn = columns[i].fieldName;
            }
        }
        // Other than bubble chart x: string type y: number type
        // Bubble chart x: number type y: number type
        if (stringColumn && defaultColumns.length > 0 && !isBubbleChart(this.type)) {
            temp = defaultColumns[0];
            defaultColumns[0] = stringColumn;
            defaultColumns[1] = temp;
        }
        return defaultColumns;
    }
    // Call user defined javascript function when user links it to click event of the widget.
    attachClickEvent() {
        let dataObj;
        d3.select('#wmChart' + this.$id + ' svg').selectAll(chartDataPointXpath[this.type]).style('pointer-events', 'all')
            .on('click', (event, data, index) => {
            switch (this.type) {
                case 'Column':
                case 'Bar':
                    dataObj = data._dataObj;
                    break;
                case 'Pie':
                case 'Donut':
                    dataObj = data.data._dataObj;
                    break;
                case 'Area':
                case 'Cumulative Line':
                case 'Line':
                    dataObj = data[0]._dataObj;
                    break;
                case 'Bubble':
                    dataObj = data;
                    break;
            }
            this.selecteditem = dataObj;
            this.invokeEventCallback('select', {
                $event: event,
                selectedChartItem: data,
                selectedItem: this.selecteditem
            });
        });
    }
    /*  Returns Y Scale min value
           Ex: Input   : 8.97
               Output  : 8.87

               Input   : 8
               Output  : 7
       */
    postPlotProcess(chart) {
        let chartSvg, pieLabels, pieGroups, angleArray;
        const styleObj = {};
        const element = this.$element;
        postPlotChartProcess(this);
        if (!isPieType(this.type)) {
            this.setLabelsMaxWidth();
        }
        else if (!this.showlabelsoutside) {
            /** Nvd3 has a issue in rotating text. So we will use this as a temp fix.
             * If the issue is resolved there, we can remove this.*/
            /* If it is a donut chart, then rotate the text and position them*/
            chartSvg = d3.select('#wmChart' + this.$id + ' svg');
            pieLabels = chartSvg.select('.nv-pieLabels').selectAll('.nv-label');
            pieGroups = chartSvg.select('.nv-pie').selectAll('.nv-slice');
            angleArray = [];
            if (pieGroups && pieGroups.length) {
                pieGroups.each(function () {
                    d3.select(this).attr('transform', function (d) {
                        angleArray.push(angle(d));
                    });
                });
                pieLabels.each(function (d, i) {
                    const group = d3.select(this);
                    $(group[0][0]).find('text').attr('transform', 'rotate(' + angleArray[i] + ')');
                });
            }
        }
        // prepare text style props object and set
        forEach(styleProps, (value, key) => {
            if (key === 'fontsize' || key === 'fontunit') {
                styleObj[value] = this.fontsize + this.fontunit;
            }
            else {
                styleObj[value] = this[key];
            }
        });
        setTextStyle(styleObj, this.$id);
        /*
         * allow window-resize functionality, for only-run mode as
         * updating chart is being handled by watchers of height & width in studio-mode
         * */
        triggerFn(this._resizeFn && this._resizeFn.clear);
        this._resizeFn = nv.utils.windowResize(() => {
            if (element[0].getBoundingClientRect().height) {
                chart.update();
                postPlotChartProcess(this);
                if (!isPieType(this.type)) {
                    this.setLabelsMaxWidth();
                }
            }
            else {
                // TODO: get parents of accordion type
                /*let parent = element.closest('.app-accordion-panel, .tab-pane').isolateScope();
                if (parent) {
                    parent.initialized = false;
                }*/
            }
        });
    }
    // prepares and configures the chart properties
    configureChart() {
        // Copy the data only in case of pie chart with default data
        // Reason : when multiple pie charts are bound to same data, first chart theme will be applied to all charts
        let xDomainValues;
        let yDomainValues;
        let chart;
        let beforeRenderVal;
        const yformatOptions = {};
        if (this._processedData.length > 0) {
            if (isAxisDomainValid(this, 'x')) {
                xDomainValues = this.binddataset ? this.getXMinMaxValues(this._processedData[0]) : { 'min': { 'x': 1 }, 'max': { 'x': 5 } };
            }
            if (isAxisDomainValid(this, 'y')) {
                yDomainValues = this.binddataset ? this.getYMinMaxValues(this._processedData) : { 'min': { 'y': 1 }, 'max': { 'y': 5 } };
            }
        }
        if (isPieType(this.type) && (!this.binddataset || !this.scopedataset)) {
            this._processedData = getClonedObject(this.scopedataset || this._processedData);
        }
        // get the chart object
        chart = initChart(this, xDomainValues, yDomainValues, null, !this.binddataset);
        if (isArray(this._processedData)) {
            // WMS-19499:  To remove chart X-axis old ticks when chart data loaded dynamically.
            const oldgTicks = $('#wmChart' + this.$id + ' svg').find('g.nv-x').find('g.tick');
            if (oldgTicks && oldgTicks.length) {
                oldgTicks.remove();
            }
            beforeRenderVal = this.invokeEventCallback('beforerender', { 'chartInstance': chart });
            if (beforeRenderVal) {
                chart = beforeRenderVal;
            }
            this.chart = chart;
            // changing the default no data message
            d3.select('#wmChart' + this.$id + ' svg')
                .datum(this._processedData)
                .call(this.chart);
            this.postPlotProcess(chart);
            return chart;
        }
    }
    // Plotting the chart with set of the properties set to it
    plotChart() {
        const element = this.$element;
        // call user-transformed function
        this.chartData = (this.invokeEventCallback('transform')) || this.chartData;
        // Getting the order by data only in run mode. The order by applies for all the charts other than pie and donut charts
        if (this.isVisuallyGrouped && !isPieType(this.type)) {
            this._processedData = this.chartData;
        }
        else {
            this._processedData = this.processChartData();
        }
        // checking the parent container before plotting the chart
        if (!element[0].getBoundingClientRect().height) {
            return;
        }
        if (this.clearCanvas) {
            // empty svg to add-new chart
            element.find('svg').replaceWith('<svg></svg>');
            this.clearCanvas = false;
        }
        // In case of invalid axis show no data available message
        if (!this.isValidAxis()) {
            this._processedData = [];
        }
        nv.addGraph(() => this.configureChart(), () => {
            /*Bubble chart has an time out delay of 300ms in their implementation due to which we
            * won't be getting required data points on attaching events
            * hence delaying it 600ms*/
            setTimeout(() => {
                this.attachClickEvent();
            }, 600);
        });
        this.isLoadInProgress = false;
    }
    // TODO: Need way to figure out if the datasource is a live source
    get isLiveVariable() {
        // setting the flag for the live variable in the scope for the checks
        const variableObj = this.datasource;
        return variableObj && variableObj.category === 'wm.LiveVariable';
    }
    plotChartProxy() {
        this.showContentLoadError = false;
        this.invalidConfig = false;
        // Checking if x and y axis are chosen
        this.isLoadInProgress = true;
        const groupingDetails = this.getGroupingDetails();
        // If aggregation/group by/order by properties have been set, then get the aggregated data and plot the result in the chart.
        // TODO: datasource for live variable detection
        if (this.binddataset && this.isLiveVariable && (this.filterFields || this.isDataFilteringEnabled())) {
            this.getAggregatedData(() => this.plotChart());
        }
        else { // Else, simply plot the chart.
            // In case of live variable resetting the aggregated data to the normal dataset when the aggregation has been removed
            if (this.dataset && this.isLiveVariable) {
                this.chartData = this.dataset;
                if (this.isGroupByEnabled() && groupingDetails.isVisuallyGrouped) {
                    this.chartData = this.getVisuallyGroupedData(this.chartData, groupingDetails.visualGroupingColumn);
                }
            }
            this.plotChart();
        }
    }
    // sets the default x and y axis options
    setDefaultAxisOptions() {
        const defaultColumns = this.getDefaultColumns();
        // If we get the valid default columns then assign them as the x and y axis
        // In case of service variable we may not get the valid columns because we cannot know the datatypes
        this.xaxisdatakey = defaultColumns[0] || null;
        this.yaxisdatakey = defaultColumns[1] || null;
    }
    getCutomizedOptions(prop, fields) {
        const groupByColumns = split(this.groupby, ','), aggColumns = split(this.aggregationcolumn, ',');
        if (!this.binddataset) {
            return fields;
        }
        if (!this.axisoptions) {
            this.axisoptions = fields;
        }
        let newOptions;
        switch (prop) {
            case 'xaxisdatakey':
                // If group by enabled, columns chosen in groupby will be populated in x axis options
                if (this.isGroupByEnabled()) {
                    newOptions = groupByColumns;
                }
                break;
            case 'yaxisdatakey':
                // If aggregation by enabled, columns chosen in aggregation will be populated in y axis options
                if (this.isAggregationEnabled()) {
                    newOptions = aggColumns;
                }
                else if (this.isLiveVariable) {
                    // In case of live variable populating only numeric columns
                    newOptions = this.numericColumns;
                }
                break;
            case 'groupby':
                // Filtering only non primary key columns
                if (this.isLiveVariable && this.nonPrimaryColumns && this.nonPrimaryColumns.length) {
                    newOptions = this.nonPrimaryColumns;
                }
                break;
            case 'aggregationcolumn':
                // Set the 'aggregationColumn' to show all keys in case of aggregation function is count or to numeric keys in all other cases.
                if (this.isLiveVariable && this.isAggregationEnabled() && this.aggregation !== 'count') {
                    newOptions = this.numericColumns;
                }
                break;
            case 'orderby':
                // Set the 'aggregationColumn' to show all keys in case of aggregation function is count or to numeric keys in all other cases.
                if (this.isLiveVariable && this.isAggregationEnabled()) {
                    newOptions = uniq(concat(groupByColumns, aggColumns));
                }
                break;
            case 'bubblesize':
                if (this.numericColumns && this.numericColumns.length) {
                    newOptions = this.numericColumns;
                }
                break;
        }
        return newOptions || fields || this.axisoptions;
    }
    // Function that iterates through all the columns and then fetching the numeric and non primary columns among them
    setNumericandNonPrimaryColumns() {
        let columns, type;
        const propertiesMap = this.datasource.execute(DataSource.Operation.GET_PROPERTIES_MAP);
        this.numericColumns = [];
        this.nonPrimaryColumns = [];
        // Fetching all the columns
        if (this.dataset && !isEmpty(propertiesMap)) {
            columns = []; // TODO: fetchPropertiesMapColumns(propertiesMap);
        }
        if (columns) {
            // Iterating through all the columns and fetching the numeric and non primary key columns
            forEach(Object.keys(columns), (key) => {
                type = columns[key].type;
                if (isNumberType(type)) {
                    this.numericColumns.push(key);
                }
                // Hiding only table's primary key
                if (columns[key].isRelatedPk === 'true' || !columns[key].isPrimaryKey) {
                    this.nonPrimaryColumns.push(key);
                }
            });
            this.numericColumns = this.numericColumns.sort();
            this.nonPrimaryColumns = this.nonPrimaryColumns.sort();
        }
    }
    // plot the chart
    handleDataSet(newVal) {
        this.errMsg = '';
        // Resetting the flag to false when the binding was removed
        if (!newVal && !this.binddataset) {
            this.isVisuallyGrouped = false;
            this.axisoptions = null;
        }
        // liveVariables contain data in 'data' property' of the variable
        this.chartData = this.isLiveVariable ? newVal || '' : (newVal && newVal.dataValue === '' && keys(newVal).length === 1) ? '' : newVal;
        // if the data returned is an object make it an array of object
        if (!isArray(this.chartData) && isObject(this.chartData)) {
            this.chartData = [this.chartData];
        }
        if (newVal && newVal.filterFields) {
            this.filterFields = newVal.filterFields;
        }
        // plotchart for only valid data and only after bound variable returns data
        if (this.chartData) {
            this._plotChartProxy();
        }
    }
    // sets the center label for donut chart type
    setDonutCenterLabel(labelValue) {
        let chartSvg, pieGroups;
        chartSvg = d3.select('#wmChart' + this.$id + ' svg');
        pieGroups = chartSvg.select('.nv-wrap.nv-pie').select('.nv-pie');
        pieGroups.text('');
        pieGroups.append('text')
            .attr('dy', '.35em')
            .attr('text-anchor', 'middle')
            .attr('class', 'nv-pie-title')
            .text(labelValue)
            .each(function (d) {
            var d3text = d3.select(this), circ = d3.select(this.parentElement), totalWidth = Number(circ.node().getBoundingClientRect().width), 
            // minus the ring width from total width
            availWidth = totalWidth - 30, textWidth = this.getComputedTextLength();
            d3text.attr("data-scale", availWidth / textWidth);
        }).style("font-size", function () {
            // 16 is the default font size to multiply with the scaled value and 24 is the maximum font size that can be applied
            var fontSize = 16 * d3.select(this).attr("data-scale");
            return fontSize > 24 ? 24 : fontSize + "px";
        });
    }
    onPropertyChange(key, newVal, oldVal) {
        super.onPropertyChange(key, newVal, oldVal);
        switch (key) {
            case 'dataset':
                this.handleDataSet(newVal);
                break;
            case 'centerlabel':
                if (this.chart) {
                    this.chart.title(newVal);
                    this.setDonutCenterLabel(newVal);
                }
                break;
            case 'type':
                // Based on the change in type deciding the default margins
                if (isPieType(this.type)) {
                    this.offsettop = 20;
                    this.offsetright = 0;
                    this.offsetbottom = 0;
                    this.offsetleft = 0;
                }
                else if (oldVal === 'Pie' || oldVal === 'Donut') {
                    this.offsettop = 25;
                    this.offsetright = 25;
                    this.offsetbottom = 55;
                    this.offsetleft = 75;
                }
                if (oldVal !== newVal) {
                    this.clearCanvas = true;
                }
                // In studio mode, configure properties dependent on chart type
                this._plotChartProxy();
                break;
            default:
                // In RunMode, the plotchart method will not be called for all property change
                this._plotChartProxy();
                break;
        }
        if (includes(advanceDataProps, key)) {
            this._plotChartProxy();
        }
    }
    handleLoading(data) {
        const dataSource = this.datasource;
        if (dataSource && dataSource.execute(DataSource.Operation.IS_API_AWARE) && isDataSourceEqual(data.variable, dataSource)) {
            this.variableInflight = data.active;
            this.isLoadInProgress = data.active;
        }
    }
    hideTooltip() {
        d3.selectAll('.nvtooltip').style('opacity', 0);
    }
    onStyleChange(key, newVal, oldVal) {
        const styleObj = {};
        super.onStyleChange(key, newVal, oldVal);
        switch (key) {
            case 'fontsize':
            case 'fontunit':
            case 'color':
            case 'fontfamily':
            case 'fontweight':
            case 'fontstyle':
            case 'textdecoration':
                styleObj[styleProps[key]] = (key === 'fontsize' || key === 'fontunit') ? this.fontsize + this.fontunit : newVal;
                setTextStyle(styleObj, this.$id);
                break;
        }
    }
    constructor(inj, app, explicitContext) {
        super(inj, WIDGET_CONFIG, explicitContext);
        this.app = app;
        this.iconclass = '';
        this.nonPrimaryColumns = [];
        this.xDataKeyArr = [];
        this.chartData = [];
        this._processedData = [];
        this._subsciptions = [];
        this._plotChartProxy = debounce(this.plotChartProxy.bind(this), 100);
        this.redraw = this._plotChartProxy.bind(this);
        styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER, ['fontsize', 'fontunit', 'color', 'fontfamily', 'fontweight', 'fontstyle', 'textdecoration']);
        // generate unique id for the component
        this.$id = this.widgetId || Math.random();
        // remove title attribute as the element on hover shows you the hint through-out the element
        removeAttr(this.nativeElement, 'title');
        this.chartReady = false;
        this.binddataset = this.nativeElement.getAttribute('dataset.bind');
        // Show loading status based on the variable life cycle
        this._subsciptions.push(this.app.subscribe('toggle-variable-state', this.handleLoading.bind(this)));
        // Will hide tolltip of a chart in mobile when the user scrolls.
        this._subsciptions.push(this.app.subscribe('iscroll-start', () => { this.hideTooltip(); }));
    }
    ngAfterViewInit() {
        super.ngAfterViewInit();
        // For old projects
        if (!includes(['outside', 'inside', 'hide'], this.showlabels)) {
            this.showlabels = getBooleanValue(this.showlabels);
            this.showlabelsoutside = getBooleanValue(this.showlabelsoutside);
            this.showlabels = this.showlabels ? (this.showlabelsoutside ? 'outside' : 'inside') : 'hide';
        }
        if (!this.theme) {
            // Default theme for pie/donut is Azure and for other it is Terrestrial
            this.theme = isPieType(this.type) ? 'Azure' : 'Terrestrial';
        }
        this.nativeElement.setAttribute('id', 'wmChart' + this.$id);
        // When there is not value binding, then plot the chart with sample data
        if (!this.binddataset && !this.nativeElement.getAttribute('scopedataset')) {
            this._plotChartProxy();
        }
    }
    ngOnDestroy() {
        // destroy all subscriptions to prevent memory leak.
        this.hideTooltip();
        this._subsciptions.forEach((subscription) => {
            subscription();
        });
        super.ngOnDestroy();
    }
    static { this.ɵfac = function ChartComponent_Factory(t) { return new (t || ChartComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1.App), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ChartComponent, selectors: [["div", "wmChart", ""]], hostVars: 2, hostBindings: function ChartComponent_HostBindings(rf, ctx) { if (rf & 2) {
            i0.ɵɵclassProp("panel", ctx.title);
        } }, features: [i0.ɵɵProvidersFeature([
                provideAsWidgetRef(ChartComponent)
            ]), i0.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 5, vars: 6, consts: [["class", "panel-heading", 4, "ngIf"], [1, "app-chart-inner", 3, "ngClass"], ["class", "wm-content-info readonly-wrapper", 4, "ngIf"], ["wmSpinner", "", "show.bind", "isLoadInProgress", "caption.bind", "loadingdatamsg"], [1, "panel-heading"], [1, "panel-title"], [1, "pull-left"], [1, "heading", 3, "innerHTML"], ["class", "description", 3, "innerHTML", 4, "ngIf"], [1, "description", 3, "innerHTML"], [1, "wm-content-info", "readonly-wrapper"], [1, "wm-message", 3, "title", "ngClass", "innerText"]], template: function ChartComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵtemplate(0, ChartComponent_div_0_Template, 6, 7, "div", 0);
            i0.ɵɵelementStart(1, "div", 1);
            i0.ɵɵnamespaceSVG();
            i0.ɵɵelement(2, "svg");
            i0.ɵɵtemplate(3, ChartComponent_div_3_Template, 2, 5, "div", 2);
            i0.ɵɵnamespaceHTML();
            i0.ɵɵelement(4, "div", 3);
            i0.ɵɵelementEnd();
        } if (rf & 2) {
            i0.ɵɵproperty("ngIf", ctx.title);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(3, _c1, ctx.isLoadInProgress, ctx.title));
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("ngIf", ctx.showContentLoadError && ctx.showNoDataMsg);
        } }, dependencies: [i2.SpinnerComponent, i3.NgClass, i3.NgIf], styles: [".nvtooltip h3,.nvtooltip p{margin:0;text-align:center}.nv-distx,.nv-disty,.nv-noninteractive,.nvd3 .nv-axis,.nvd3 .nv-interactiveGuideLine,.nvd3.nv-pie .nv-label,.nvd3.nv-sparklineplus g.nv-hoverValue,.nvtooltip{pointer-events:none}.nvd3 .nv-axis{opacity:1}.nvd3 .nv-axis path{fill:none;stroke:#000;stroke-opacity:.75;shape-rendering:crispEdges}.nvd3 .nv-axis .zero line,.nvd3 .nv-axis line.zero,.nvd3 .nv-axis path.domain{stroke-opacity:.75}.nvd3 .nv-axis.nv-x path.domain{stroke-opacity:0}.nvd3 .nv-axis line{fill:none;stroke:#e5e5e5;shape-rendering:crispEdges}.nvd3 .nv-axis .nv-axisMaxMin text,.nvtooltip table td.key.total{font-weight:700}.nvd3 .x .nv-axis .nv-axisMaxMin text,.nvd3 .x2 .nv-axis .nv-axisMaxMin text,.nvd3 .x3 .nv-axis .nv-axisMaxMin text{text-anchor:middle}.nvd3 .nv-axis.nv-disabled,.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check{opacity:0}.nvd3 .nv-bars rect{fill-opacity:.75;-webkit-transition:fill-opacity .25s linear;transition:fill-opacity .25s linear}.nvd3 .nv-bars rect.hover,.nvd3 .nv-boxplot circle:hover,.nvd3 .nv-boxplot rect:hover,.nvd3 .nv-candlestickBar .nv-ticks rect:hover,.nvd3 .nv-discretebar .nv-groups rect:hover,.nvd3 .nv-multibar .nv-groups rect:hover,.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,.nvd3 .nv-scatter .nv-point.hover,.nvd3.nv-bullet .nv-measure:hover,.nvd3.nv-linePlusBar .nv-bar rect:hover,.nvd3.nv-pie .hover path{fill-opacity:1}.nvd3 .nv-bars .hover rect{fill:#add8e6}.nvd3 .nv-bars text{fill:#0000}.nvd3 .nv-bars .hover text{fill:#000}.nvd3 .nv-discretebar .nv-groups rect,.nvd3 .nv-multibar .nv-groups rect,.nvd3 .nv-multibarHorizontal .nv-groups rect{stroke-opacity:0;-webkit-transition:fill-opacity .25s linear;transition:fill-opacity .25s linear}.nvd3 .nv-discretebar .nv-groups text,.nvd3 .nv-multibarHorizontal .nv-groups text{font-weight:700;fill:#000;stroke:#0000}.nvd3 .nv-boxplot circle{fill-opacity:.5}.nvd3 line.nv-boxplot-median{stroke:#000}.nv-boxplot-tick:hover{stroke-width:2.5px}.nvd3.nv-bullet{font:10px sans-serif}.nvd3.nv-bullet .nv-measure{fill-opacity:.8}.nvd3.nv-bullet .nv-marker{stroke:#000;stroke-width:2px}.nvd3.nv-bullet .nv-markerTriangle{stroke:#000;fill:#fff;stroke-width:1.5px}.nvd3.nv-bullet .nv-markerLine{stroke:#000;stroke-width:1.5px}.nvd3.nv-bullet .nv-tick line{stroke:#666;stroke-width:.5px}.nvd3.nv-bullet .nv-range.nv-s0{fill:#eee}.nvd3.nv-bullet .nv-range.nv-s1{fill:#ddd}.nvd3.nv-bullet .nv-range.nv-s2{fill:#ccc}.nvd3.nv-bullet .nv-title{font-size:14px;font-weight:700}.nvd3.nv-bullet .nv-subtitle{fill:#999}.nvd3.nv-bullet .nv-range{fill:#bababa;fill-opacity:.4}.nvd3.nv-bullet .nv-range:hover{fill-opacity:.7}.nvd3.nv-candlestickBar .nv-ticks .nv-tick,.nvd3.nv-ohlcBar .nv-ticks .nv-tick{stroke-width:1px}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover,.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover{stroke-width:2px}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect,.nvd3.nv-sparklineplus .nv-maxValue{stroke:#2ca02c;fill:#2ca02c}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect,.nvd3.nv-sparklineplus .nv-minValue{stroke:#d62728;fill:#d62728}.with-transitions .nv-candlestickBar .nv-ticks .nv-tick,.with-transitions .nvd3 .nv-groups .nv-point{-webkit-transition:stroke-width .25s linear,stroke-opacity .25s linear;transition:stroke-width .25s linear,stroke-opacity .25s linear}.nvd3.nv-candlestickBar .nv-ticks line{stroke:#333}.nv-force-node{stroke:#fff;stroke-width:1.5px}.nv-force-link{stroke:#999;stroke-opacity:.6}.nv-force-node text{stroke-width:0}.nvd3 .nv-check-box .nv-box{fill-opacity:0;stroke-width:2}.nvd3 .nv-check-box .nv-check{fill-opacity:0;stroke-width:4}.nvd3 .nv-hoverArea,.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check,.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point,.nvd3.nv-pie .nv-label rect{fill-opacity:0;stroke-opacity:0}.nvd3.nv-linePlusBar .nv-bar rect{fill-opacity:.75}.nvd3 .nv-groups path.nv-line,.nvd3.nv-sparkline path{fill:none}.nvd3 .nv-groups path.nv-area{stroke:none}.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point{fill-opacity:.5!important;stroke-opacity:.5!important}.nvd3 .nv-groups .nv-point.hover,.nvd3.nv-scatter .nv-groups .nv-point.hover{stroke-width:7px;fill-opacity:.95!important;stroke-opacity:.95!important}.nvd3 .nv-point-paths path{stroke:#aaa;stroke-opacity:0;fill:#eee;fill-opacity:0}.nvd3 .nv-indexLine{cursor:ew-resize}svg.nvd3-svg{-webkit-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;height:100%}.nvtooltip.with-3d-shadow,.with-3d-shadow .nvtooltip{-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px #0003;border-radius:5px}.nvd3 text{font:12px Arial,sans-serif}.nvtooltip h3,.nvtooltip table td.key{font-weight:400}.nvd3 .title{font:700 14px Arial,sans-serif}.nvd3 .nv-background{fill:#fff;fill-opacity:0}.nvd3.nv-noData{font-size:18px;font-weight:700}.nv-brush .selection{fill-opacity:.125;shape-rendering:crispEdges}.nv-brush .handle path{fill:#eee;stroke:#666}.nvd3 .nv-legend .nv-series{cursor:pointer}.nvd3 .nv-legend .nv-disabled circle{fill-opacity:0}.nvd3 .nv-brush .selection{fill-opacity:0!important}.nvd3 .nv-brushBackground rect{stroke:#000;stroke-width:.4;fill:#fff;fill-opacity:.7}@media print{.nvd3 text{stroke-width:0;fill-opacity:1}}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive{stroke:#2ca02c}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative{stroke:#d62728}.nvd3 .background path{fill:none;stroke:#eee;stroke-opacity:.4;shape-rendering:crispEdges}.nvd3 .foreground path{fill:none;stroke-opacity:.7}.nvd3 .nv-parallelCoordinates-brush .selection{fill:#fff;fill-opacity:.6;stroke:gray;shape-rendering:crispEdges}.nvd3 .nv-parallelCoordinates .hover{fill-opacity:1;stroke-width:3px}.nvd3 .missingValuesline line{fill:none;stroke:#000;stroke-width:1;stroke-opacity:1;stroke-dasharray:5,5}.nvd3.nv-pie path{stroke-opacity:0;-webkit-transition:fill-opacity .25s linear,stroke-width .25s linear,stroke-opacity .25s linear;transition:fill-opacity .25s linear,stroke-width .25s linear,stroke-opacity .25s linear;stroke:#fff;stroke-width:1px;stroke-opacity:1;fill-opacity:.7}.nvd3.nv-pie .nv-pie-title{font-size:24px;fill:#13c4f996}.nvd3.nv-pie .nv-slice text{stroke:#000;stroke-width:0}.nvd3 .nv-groups .nv-point.hover{stroke-width:20px;stroke-opacity:.5}.nvd3.nv-sparklineplus .nv-hoverValue line{stroke:#333;stroke-width:1.5px}.nvd3.nv-sparklineplus,.nvd3.nv-sparklineplus g{pointer-events:all}.nvd3.nv-sparklineplus .nv-xValue,.nvd3.nv-sparklineplus .nv-yValue{stroke-width:0;font-size:.9em;font-weight:400}.nvd3.nv-sparklineplus .nv-yValue{stroke:#f66}.nvd3.nv-sparklineplus .nv-currentValue{font-weight:700;font-size:1.1em}.nvd3.nv-stackedarea path.nv-area{fill-opacity:.7;stroke-opacity:0;-webkit-transition:fill-opacity .25s linear,stroke-opacity .25s linear;transition:fill-opacity .25s linear,stroke-opacity .25s linear}.nvd3.nv-stackedarea path.nv-area.hover{fill-opacity:.9}.nvd3.nv-stackedarea .nv-groups .nv-point{stroke-opacity:0;fill-opacity:0}.nvtooltip{position:absolute;background-color:#fff;color:#000;padding:1px;border:1px solid rgba(0,0,0,.5);z-index:10000;display:block;font-family:Arial,sans-serif;font-size:13px;text-align:left;white-space:nowrap;-webkit-user-select:none;-ms-user-select:none;user-select:none;background:#fffc;border-radius:4px}.nvtooltip.with-transitions,.with-transitions .nvtooltip{-webkit-transition:opacity 50ms linear .2s;transition:opacity 50ms linear .2s}.nvtooltip.x-nvtooltip,.nvtooltip.y-nvtooltip{padding:8px}.nvtooltip h3{padding:4px 14px;line-height:18px;background-color:#f7f7f7bf;color:#000;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.nvtooltip p{padding:5px 14px}.nvtooltip span{display:inline-block;margin:2px 0}.nvtooltip table{margin:6px;border-spacing:0}.nvtooltip table td{padding:2px 9px 2px 0;vertical-align:middle}.nvtooltip table td.value{text-align:right;font-weight:700}.nvtooltip table td.percent{color:#a9a9a9}.nvtooltip table tr.highlight td{padding:1px 9px 1px 0;border-bottom-style:solid;border-bottom-width:1px;border-top-style:solid;border-top-width:1px}.nvtooltip table td.legend-color-guide div{vertical-align:middle;width:12px;height:12px;border:1px solid #999}.nvtooltip .footer{padding:3px;text-align:center}.nvtooltip-pending-removal{pointer-events:none;display:none}.nvd3 line.nv-guideline{stroke:#ccc}\n"], encapsulation: 2 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChartComponent, [{
        type: Component,
        args: [{ selector: 'div[wmChart]', providers: [
                    provideAsWidgetRef(ChartComponent)
                ], encapsulation: ViewEncapsulation.None, template: "<div class=\"panel-heading\" *ngIf=\"title\">\n    <h3 class=\"panel-title\">\n        <div class=\"pull-left\"><i class=\"app-icon panel-icon {{iconclass}}\" [class.ng-hide]=\"!iconclass\"></i></div>\n        <div class=\"heading\" [innerHTML]=\"title\"></div>\n        <div class=\"description\" *ngIf=\"subheading\" [innerHTML]=\"subheading\"></div>\n    </h3>\n</div>\n<div class=\"app-chart-inner\" [ngClass]=\"{'loading':isLoadInProgress, 'panel-body': title}\">\n    <svg></svg>\n    <div class=\"wm-content-info readonly-wrapper\" *ngIf=\"showContentLoadError && showNoDataMsg\">\n        <p class=\"wm-message\" [title]=\"hintMsg\" [ngClass]=\"{'error': invalidConfig}\" [innerText]=\"errMsg\"></p>\n    </div>\n    <div wmSpinner show.bind=\"isLoadInProgress\" caption.bind=\"loadingdatamsg\"></div>\n</div>\n", styles: [".nvtooltip h3,.nvtooltip p{margin:0;text-align:center}.nv-distx,.nv-disty,.nv-noninteractive,.nvd3 .nv-axis,.nvd3 .nv-interactiveGuideLine,.nvd3.nv-pie .nv-label,.nvd3.nv-sparklineplus g.nv-hoverValue,.nvtooltip{pointer-events:none}.nvd3 .nv-axis{opacity:1}.nvd3 .nv-axis path{fill:none;stroke:#000;stroke-opacity:.75;shape-rendering:crispEdges}.nvd3 .nv-axis .zero line,.nvd3 .nv-axis line.zero,.nvd3 .nv-axis path.domain{stroke-opacity:.75}.nvd3 .nv-axis.nv-x path.domain{stroke-opacity:0}.nvd3 .nv-axis line{fill:none;stroke:#e5e5e5;shape-rendering:crispEdges}.nvd3 .nv-axis .nv-axisMaxMin text,.nvtooltip table td.key.total{font-weight:700}.nvd3 .x .nv-axis .nv-axisMaxMin text,.nvd3 .x2 .nv-axis .nv-axisMaxMin text,.nvd3 .x3 .nv-axis .nv-axisMaxMin text{text-anchor:middle}.nvd3 .nv-axis.nv-disabled,.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check{opacity:0}.nvd3 .nv-bars rect{fill-opacity:.75;-webkit-transition:fill-opacity .25s linear;transition:fill-opacity .25s linear}.nvd3 .nv-bars rect.hover,.nvd3 .nv-boxplot circle:hover,.nvd3 .nv-boxplot rect:hover,.nvd3 .nv-candlestickBar .nv-ticks rect:hover,.nvd3 .nv-discretebar .nv-groups rect:hover,.nvd3 .nv-multibar .nv-groups rect:hover,.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,.nvd3 .nv-scatter .nv-point.hover,.nvd3.nv-bullet .nv-measure:hover,.nvd3.nv-linePlusBar .nv-bar rect:hover,.nvd3.nv-pie .hover path{fill-opacity:1}.nvd3 .nv-bars .hover rect{fill:#add8e6}.nvd3 .nv-bars text{fill:#0000}.nvd3 .nv-bars .hover text{fill:#000}.nvd3 .nv-discretebar .nv-groups rect,.nvd3 .nv-multibar .nv-groups rect,.nvd3 .nv-multibarHorizontal .nv-groups rect{stroke-opacity:0;-webkit-transition:fill-opacity .25s linear;transition:fill-opacity .25s linear}.nvd3 .nv-discretebar .nv-groups text,.nvd3 .nv-multibarHorizontal .nv-groups text{font-weight:700;fill:#000;stroke:#0000}.nvd3 .nv-boxplot circle{fill-opacity:.5}.nvd3 line.nv-boxplot-median{stroke:#000}.nv-boxplot-tick:hover{stroke-width:2.5px}.nvd3.nv-bullet{font:10px sans-serif}.nvd3.nv-bullet .nv-measure{fill-opacity:.8}.nvd3.nv-bullet .nv-marker{stroke:#000;stroke-width:2px}.nvd3.nv-bullet .nv-markerTriangle{stroke:#000;fill:#fff;stroke-width:1.5px}.nvd3.nv-bullet .nv-markerLine{stroke:#000;stroke-width:1.5px}.nvd3.nv-bullet .nv-tick line{stroke:#666;stroke-width:.5px}.nvd3.nv-bullet .nv-range.nv-s0{fill:#eee}.nvd3.nv-bullet .nv-range.nv-s1{fill:#ddd}.nvd3.nv-bullet .nv-range.nv-s2{fill:#ccc}.nvd3.nv-bullet .nv-title{font-size:14px;font-weight:700}.nvd3.nv-bullet .nv-subtitle{fill:#999}.nvd3.nv-bullet .nv-range{fill:#bababa;fill-opacity:.4}.nvd3.nv-bullet .nv-range:hover{fill-opacity:.7}.nvd3.nv-candlestickBar .nv-ticks .nv-tick,.nvd3.nv-ohlcBar .nv-ticks .nv-tick{stroke-width:1px}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover,.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover{stroke-width:2px}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect,.nvd3.nv-sparklineplus .nv-maxValue{stroke:#2ca02c;fill:#2ca02c}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect,.nvd3.nv-sparklineplus .nv-minValue{stroke:#d62728;fill:#d62728}.with-transitions .nv-candlestickBar .nv-ticks .nv-tick,.with-transitions .nvd3 .nv-groups .nv-point{-webkit-transition:stroke-width .25s linear,stroke-opacity .25s linear;transition:stroke-width .25s linear,stroke-opacity .25s linear}.nvd3.nv-candlestickBar .nv-ticks line{stroke:#333}.nv-force-node{stroke:#fff;stroke-width:1.5px}.nv-force-link{stroke:#999;stroke-opacity:.6}.nv-force-node text{stroke-width:0}.nvd3 .nv-check-box .nv-box{fill-opacity:0;stroke-width:2}.nvd3 .nv-check-box .nv-check{fill-opacity:0;stroke-width:4}.nvd3 .nv-hoverArea,.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check,.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point,.nvd3.nv-pie .nv-label rect{fill-opacity:0;stroke-opacity:0}.nvd3.nv-linePlusBar .nv-bar rect{fill-opacity:.75}.nvd3 .nv-groups path.nv-line,.nvd3.nv-sparkline path{fill:none}.nvd3 .nv-groups path.nv-area{stroke:none}.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point{fill-opacity:.5!important;stroke-opacity:.5!important}.nvd3 .nv-groups .nv-point.hover,.nvd3.nv-scatter .nv-groups .nv-point.hover{stroke-width:7px;fill-opacity:.95!important;stroke-opacity:.95!important}.nvd3 .nv-point-paths path{stroke:#aaa;stroke-opacity:0;fill:#eee;fill-opacity:0}.nvd3 .nv-indexLine{cursor:ew-resize}svg.nvd3-svg{-webkit-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;height:100%}.nvtooltip.with-3d-shadow,.with-3d-shadow .nvtooltip{-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px #0003;border-radius:5px}.nvd3 text{font:12px Arial,sans-serif}.nvtooltip h3,.nvtooltip table td.key{font-weight:400}.nvd3 .title{font:700 14px Arial,sans-serif}.nvd3 .nv-background{fill:#fff;fill-opacity:0}.nvd3.nv-noData{font-size:18px;font-weight:700}.nv-brush .selection{fill-opacity:.125;shape-rendering:crispEdges}.nv-brush .handle path{fill:#eee;stroke:#666}.nvd3 .nv-legend .nv-series{cursor:pointer}.nvd3 .nv-legend .nv-disabled circle{fill-opacity:0}.nvd3 .nv-brush .selection{fill-opacity:0!important}.nvd3 .nv-brushBackground rect{stroke:#000;stroke-width:.4;fill:#fff;fill-opacity:.7}@media print{.nvd3 text{stroke-width:0;fill-opacity:1}}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive{stroke:#2ca02c}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative{stroke:#d62728}.nvd3 .background path{fill:none;stroke:#eee;stroke-opacity:.4;shape-rendering:crispEdges}.nvd3 .foreground path{fill:none;stroke-opacity:.7}.nvd3 .nv-parallelCoordinates-brush .selection{fill:#fff;fill-opacity:.6;stroke:gray;shape-rendering:crispEdges}.nvd3 .nv-parallelCoordinates .hover{fill-opacity:1;stroke-width:3px}.nvd3 .missingValuesline line{fill:none;stroke:#000;stroke-width:1;stroke-opacity:1;stroke-dasharray:5,5}.nvd3.nv-pie path{stroke-opacity:0;-webkit-transition:fill-opacity .25s linear,stroke-width .25s linear,stroke-opacity .25s linear;transition:fill-opacity .25s linear,stroke-width .25s linear,stroke-opacity .25s linear;stroke:#fff;stroke-width:1px;stroke-opacity:1;fill-opacity:.7}.nvd3.nv-pie .nv-pie-title{font-size:24px;fill:#13c4f996}.nvd3.nv-pie .nv-slice text{stroke:#000;stroke-width:0}.nvd3 .nv-groups .nv-point.hover{stroke-width:20px;stroke-opacity:.5}.nvd3.nv-sparklineplus .nv-hoverValue line{stroke:#333;stroke-width:1.5px}.nvd3.nv-sparklineplus,.nvd3.nv-sparklineplus g{pointer-events:all}.nvd3.nv-sparklineplus .nv-xValue,.nvd3.nv-sparklineplus .nv-yValue{stroke-width:0;font-size:.9em;font-weight:400}.nvd3.nv-sparklineplus .nv-yValue{stroke:#f66}.nvd3.nv-sparklineplus .nv-currentValue{font-weight:700;font-size:1.1em}.nvd3.nv-stackedarea path.nv-area{fill-opacity:.7;stroke-opacity:0;-webkit-transition:fill-opacity .25s linear,stroke-opacity .25s linear;transition:fill-opacity .25s linear,stroke-opacity .25s linear}.nvd3.nv-stackedarea path.nv-area.hover{fill-opacity:.9}.nvd3.nv-stackedarea .nv-groups .nv-point{stroke-opacity:0;fill-opacity:0}.nvtooltip{position:absolute;background-color:#fff;color:#000;padding:1px;border:1px solid rgba(0,0,0,.5);z-index:10000;display:block;font-family:Arial,sans-serif;font-size:13px;text-align:left;white-space:nowrap;-webkit-user-select:none;-ms-user-select:none;user-select:none;background:#fffc;border-radius:4px}.nvtooltip.with-transitions,.with-transitions .nvtooltip{-webkit-transition:opacity 50ms linear .2s;transition:opacity 50ms linear .2s}.nvtooltip.x-nvtooltip,.nvtooltip.y-nvtooltip{padding:8px}.nvtooltip h3{padding:4px 14px;line-height:18px;background-color:#f7f7f7bf;color:#000;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.nvtooltip p{padding:5px 14px}.nvtooltip span{display:inline-block;margin:2px 0}.nvtooltip table{margin:6px;border-spacing:0}.nvtooltip table td{padding:2px 9px 2px 0;vertical-align:middle}.nvtooltip table td.value{text-align:right;font-weight:700}.nvtooltip table td.percent{color:#a9a9a9}.nvtooltip table tr.highlight td{padding:1px 9px 1px 0;border-bottom-style:solid;border-bottom-width:1px;border-top-style:solid;border-top-width:1px}.nvtooltip table td.legend-color-guide div{vertical-align:middle;width:12px;height:12px;border:1px solid #999}.nvtooltip .footer{padding:3px;text-align:center}.nvtooltip-pending-removal{pointer-events:none;display:none}.nvd3 line.nv-guideline{stroke:#ccc}\n"] }]
    }], () => [{ type: i0.Injector }, { type: i1.App }, { type: undefined, decorators: [{
                type: Inject,
                args: ['EXPLICIT_CONTEXT']
            }, {
                type: Optional
            }] }], { title: [{
            type: HostBinding,
            args: ['class.panel']
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ChartComponent, { className: "ChartComponent", filePath: "chart.component.ts", lineNumber: 139 }); })();

const components = [
    ChartComponent
];
class ChartModule {
    static { this.ɵfac = function ChartModule_Factory(t) { return new (t || ChartModule)(); }; }
    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: ChartModule }); }
    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [BasicModule,
            CommonModule,
            WmComponentsModule] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChartModule, [{
        type: NgModule,
        args: [{
                imports: [
                    BasicModule,
                    CommonModule,
                    WmComponentsModule
                ],
                declarations: [...components],
                exports: [...components]
            }]
    }], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ChartModule, { declarations: [ChartComponent], imports: [BasicModule,
        CommonModule,
        WmComponentsModule], exports: [ChartComponent] }); })();

/**
 * Generated bundle index. Do not edit.
 */

export { ChartComponent, ChartModule };
//# sourceMappingURL=index.mjs.map
