@agorapulse/ui-charts 2.2.17 → 13.0.1

package/fesm2015/agorapulse-ui-charts.js

@@ -1,981 +0,0 @@
-import * as Highcharts from 'highcharts';
-import { dateFormat, Chart } from 'highcharts';
-import { Component, ViewChild, Input, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatListModule } from '@angular/material/list';
-import { HighchartsChartModule } from 'highcharts-angular';
-import { mapChart } from 'highcharts/highmaps';
-
-const borderRadiusPlugin = function (H) {
-    if (H.borderRadiusPlugininitialized) {
-        return;
-    }
-    H.borderRadiusPlugininitialized = true;
-    H.wrap(H.seriesTypes.column.prototype, 'translate', function (proceed) {
-        const options = this.options;
-        const topMargin = options.topMargin || 0;
-        const bottomMargin = options.bottomMargin || 0;
-        const borderRadiusTopLeftSettings = options.borderRadiusTopLeft;
-        const borderRadiusTopRightSettings = options.borderRadiusTopRight;
-        const borderRadiusBottomLeftSettings = options.borderRadiusBottomLeft;
-        const borderRadiusBottomRightSettings = options.borderRadiusBottomRight;
-        proceed.call(this);
-        if (!this.points) {
-            return;
-        }
-        this.points.forEach(function (point) {
-            if (borderRadiusTopLeftSettings || borderRadiusTopRightSettings || borderRadiusBottomLeftSettings || borderRadiusBottomRightSettings) {
-                const w = point.shapeArgs.width;
-                const h = point.shapeArgs.height;
-                const x = point.shapeArgs.x;
-                const y = point.shapeArgs.y;
-                const borderRadiusTopLeft = (borderRadiusTopLeftSettings && borderRadiusTopLeftSettings.length) ? borderRadiusTopLeftSettings[point.index] : borderRadiusTopLeftSettings || 0;
-                const borderRadiusTopRight = (borderRadiusTopRightSettings && borderRadiusTopRightSettings.length) ? borderRadiusTopRightSettings[point.index] : borderRadiusTopRightSettings || 0;
-                const borderRadiusBottomLeft = (borderRadiusBottomLeftSettings && borderRadiusBottomLeftSettings.length) ? borderRadiusBottomLeftSettings[point.index] : borderRadiusBottomLeftSettings || 0;
-                const borderRadiusBottomRight = (borderRadiusBottomRightSettings && borderRadiusBottomRightSettings.length) ? borderRadiusBottomRightSettings[point.index] : borderRadiusBottomRightSettings || 0;
-                let radiusTopLeft = H.relativeLength(borderRadiusTopLeft, w);
-                let radiusTopRight = H.relativeLength(borderRadiusTopRight, w);
-                let radiusBottomRight = H.relativeLength(borderRadiusBottomRight, w);
-                let radiusBottomLeft = H.relativeLength(borderRadiusBottomLeft, w);
-                const maxR = Math.min(w, h) / 2;
-                radiusTopLeft = radiusTopLeft > maxR ? maxR : radiusTopLeft;
-                radiusTopRight = radiusTopRight > maxR ? maxR : radiusTopRight;
-                radiusBottomRight = radiusBottomRight > maxR ? maxR : radiusBottomRight;
-                radiusBottomLeft = radiusBottomLeft > maxR ? maxR : radiusBottomLeft;
-                point.dlBox = point.shapeArgs;
-                point.shapeType = 'path';
-                point.shapeArgs = {
-                    d: [
-                        'M', x + radiusTopLeft, y + topMargin,
-                        'L', x + w - radiusTopRight, y + topMargin,
-                        'C', x + w - radiusTopRight / 2, y, x + w, y + radiusTopRight / 2, x + w, y + radiusTopRight,
-                        'L', x + w, y + h - radiusBottomRight,
-                        'C', x + w, y + h - radiusBottomRight / 2, x + w - radiusBottomRight / 2, y + h, x + w - radiusBottomRight, y + h + bottomMargin,
-                        'L', x + radiusBottomLeft, y + h + bottomMargin,
-                        'C', x + radiusBottomLeft / 2, y + h, x, y + h - radiusBottomLeft / 2, x, y + h - radiusBottomLeft,
-                        'L', x, y + radiusTopLeft,
-                        'C', x, y + radiusTopLeft / 2, x + radiusTopLeft / 2, y, x + radiusTopLeft, y,
-                        'Z'
-                    ]
-                };
-            }
-        });
-    });
-};
-
-var ChartColor;
-(function (ChartColor) {
-    ChartColor[ChartColor["Grey"] = 0] = "Grey";
-    ChartColor[ChartColor["Orange"] = 1] = "Orange";
-    ChartColor[ChartColor["SoftBlue"] = 2] = "SoftBlue";
-    ChartColor[ChartColor["ElectricBlue"] = 3] = "ElectricBlue";
-    ChartColor[ChartColor["Purple"] = 4] = "Purple";
-    ChartColor[ChartColor["Green"] = 5] = "Green";
-})(ChartColor || (ChartColor = {}));
-class ChartColors {
-    static getChartColors(color) {
-        switch (color) {
-            case ChartColor.Orange:
-                return this.ORANGE_COLORS;
-            case ChartColor.SoftBlue:
-                return this.SOFT_BLUE_COLORS;
-            case ChartColor.ElectricBlue:
-                return this.ELECTRIC_BLUE_COLORS;
-            case ChartColor.Purple:
-                return this.PURPLE_COLORS;
-            case ChartColor.Green:
-                return this.GREEN_COLORS;
-            default:
-                return this.GREY_COLORS;
-        }
-    }
-    static getColors(seriesCount, color) {
-        let colors = this.getChartColors(color);
-        switch (seriesCount) {
-            case 1:
-                return [colors[100]];
-            case 2:
-                return [colors[40], colors[100]];
-            case 3:
-                return [colors[20], colors[60], colors[100]];
-            case 4:
-                return [colors[20], colors[40], colors[60], colors[100]];
-            case 5:
-                return [colors[10], colors[20], colors[40], colors[60], colors[100]];
-            default:
-                return [colors[20], colors[40], colors[60], colors[100]];
-        }
-    }
-}
-ChartColors.SOFT_BLUE_COLORS = {
-    '10': '#EFF5FC',
-    '20': '#DFEDFA',
-    '40': '#C0DBF4',
-    '60': '#A0C8EF',
-    '85': '#78B1E8',
-    '100': '#61A4E4'
-};
-ChartColors.ELECTRIC_BLUE_COLORS = {
-    '10': '#e8f4ff',
-    '20': '#d1e8ff',
-    '40': '#a2d1ff',
-    '60': '#74bbfe',
-    '85': '#3a9efe',
-    '100': '#178dfe'
-};
-ChartColors.ORANGE_COLORS = {
-    '10': '#FFEFE9',
-    '20': '#FFE1D4',
-    '40': '#FFC2A8',
-    '60': '#FFA47D',
-    '85': '#FF7E46',
-    '100': '#FF6726'
-};
-ChartColors.GREEN_COLORS = {
-    '10': '#ECF7ED',
-    '20': '#DAF1DD',
-    '40': '#B5E3BB',
-    '60': '#8FD498',
-    '85': '#61C26D',
-    '100': '#45B854'
-};
-ChartColors.PURPLE_COLORS = {
-    '10': '#EFEDF8',
-    '20': '#E0DDF2',
-    '40': '#C1BBE6',
-    '60': '#A398D9',
-    '85': '#7C6DC9',
-    '100': '#6554C0'
-};
-ChartColors.GREY_COLORS = {
-    '10': '#EAECEF',
-    '20': '#D6DAE0',
-    '40': '#AEB5C1',
-    '60': '#858FA1',
-    '85': '#5D6A82',
-    '100': '#344563'
-};
-ChartColors.BLACK_COLOR = '#000000';
-ChartColors.LIMIT_COLOR = '#E81313';
-ChartColors.WHITE_COLOR = '#FFFFFF';
-
-class ChartOptions {
-    static build(options) {
-        return mergeDeep(ChartOptions.DEFAULT_OPTIONS, options);
-    }
-    static configure(series, options, color, labelDateFormat) {
-        // Configure axis
-        options.xAxis = mergeDeep({
-            labels: {
-                formatter: function () {
-                    return dateFormat(labelDateFormat ? labelDateFormat : '%m/%d', this.value);
-                }
-            },
-            //minTickInterval: 24 * 60 * 60 * 1000 // One day
-        }, options.xAxis);
-        // Configure series
-        if (series && series.length) {
-            options.series = series;
-            options.legend.enabled = series.length >= 2;
-            options.colors = ChartColors.getColors(series.length, color);
-        }
-    }
-}
-ChartOptions.DEFAULT_DATE_FORMAT = '%A, %b %e, %Y';
-ChartOptions.DEFAULT_OPTIONS = {
-    /*lang: {
-        decimalPoint: (manager && manager.locale !== 'en') ? ',' : '.',
-        resetZoom: resetZoomLabel,
-        resetZoomTitle: resetZoomHtmlTitle,
-        shortMonths: [
-            shortJanuary, shortFebruary, shortMarch, shortApril, shortMay, shortJune,
-            shortJuly, shortAugust, shortSeptember, shortOctober, shortNovember, shortDecember
-        ],
-        thousandsSep: (manager && manager.locale !== 'en') ? ' ' : ',',
-        weekdays: this.weekDays,
-        zoomIn: zoomInHtmlTitle,
-        zoomOut: zoomOutHtmlTitle
-    },*/
-    chart: {
-        spacingRight: 20,
-        zoomType: 'xy',
-        panning: {
-            enabled: true
-        },
-        panKey: 'shift',
-        style: {
-            fontFamily: 'Averta, \'Open Sans\', Helvetica, sans-serif'
-        },
-        resetZoomButton: {
-            theme: {
-                fill: ChartColors.WHITE_COLOR,
-                r: 4,
-                style: {
-                    color: ChartColors.GREY_COLORS[100],
-                    fontSize: '12px'
-                },
-                states: {
-                    hover: {
-                        fill: ChartColors.GREY_COLORS[5]
-                    }
-                }
-            }
-        }
-    },
-    colorAxis: {
-        labels: {
-            style: {
-                color: ChartColors.GREY_COLORS[60]
-            }
-        }
-    },
-    credits: {
-        enabled: false
-    },
-    legend: {
-        borderWidth: 0,
-        itemStyle: {
-            color: ChartColors.GREY_COLORS[60],
-            fontSize: '14px',
-            fontWeight: 'normal'
-        },
-        itemHoverStyle: {
-            color: ChartColors.GREY_COLORS[100],
-            fontWeight: 'bold'
-        }
-    },
-    plotOptions: {
-        series: {
-            states: {
-                hover: {
-                    brightness: 0
-                }
-            },
-            connectNulls: true,
-            lineWidth: 4
-        }
-    },
-    navigation: {
-        buttonOptions: {
-            y: 0
-        }
-    },
-    title: {
-        text: null
-    },
-    tooltip: {
-        backgroundColor: ChartColors.WHITE_COLOR,
-        borderRadius: 4,
-        borderWidth: 0,
-        dateTimeLabelFormats: {
-            day: ChartOptions.DEFAULT_DATE_FORMAT,
-            week: ChartOptions.DEFAULT_DATE_FORMAT
-        },
-        shadow: {
-            color: ChartColors.BLACK_COLOR,
-            offsetX: 0,
-            offsetY: 2,
-            opacity: 0.02,
-            width: 6
-        },
-        split: false,
-        shared: true,
-        useHTML: true,
-        headerFormat: `<div style="border-bottom: 1px solid ${ChartColors.GREY_COLORS[10]}; padding: 0 8px 7px">`
-            + `<span style="font-size: 12px; color: ${ChartColors.GREY_COLORS[60]}">{point.key}</span></div>`,
-        pointFormat: `<div style="font-size: 14px; color: ${ChartColors.GREY_COLORS[100]}; margin: 6px 8px 0 8px;">`
-            + '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b></div>'
-    },
-    xAxis: {
-        gridLineColor: ChartColors.GREY_COLORS[10],
-        lineColor: ChartColors.GREY_COLORS[10],
-        tickColor: ChartColors.GREY_COLORS[10],
-        gridLineWidth: 1,
-        title: {
-            text: null
-        },
-        labels: {
-            style: {
-                color: ChartColors.GREY_COLORS[40],
-                fontSize: '12px'
-            }
-        }
-    },
-    yAxis: {
-        allowDecimals: false,
-        gridLineColor: ChartColors.GREY_COLORS[10],
-        lineColor: ChartColors.GREY_COLORS[10],
-        gridLineWidth: 1,
-        title: {
-            text: null
-        },
-        labels: {
-            style: {
-                color: ChartColors.GREY_COLORS[40],
-                fontSize: '12px'
-            }
-        }
-    }
-};
-function isObject(item) {
-    return (item && typeof item === 'object' && !Array.isArray(item));
-}
-function mergeDeep(target, source) {
-    let output = deepCopy(target);
-    if (isObject(target) && isObject(source)) {
-        Object.keys(source).forEach(key => {
-            if (isObject(source[key])) {
-                if (!(key in target))
-                    Object.assign(output, { [key]: source[key] });
-                else
-                    output[key] = mergeDeep(target[key], source[key]);
-            }
-            else {
-                Object.assign(output, { [key]: source[key] });
-            }
-        });
-    }
-    return output;
-}
-function deepCopy(source) {
-    if (typeof source !== "object" || source === null) {
-        return source; // Return the value if source is not an object
-    }
-    // Create an array or object to hold the values
-    const newObject = Array.isArray(source) ? [] : {};
-    for (let key in source) {
-        if (source.hasOwnProperty(key)) {
-            // Recursively (deep) copy for nested objects, including arrays
-            newObject[key] = deepCopy(source[key]);
-        }
-    }
-    return newObject;
-}
-
-class ChartBarOptions extends ChartOptions {
-    static build(options) {
-        const seriesOptions = {
-            borderRadiusTopLeft: 100,
-            borderRadiusTopRight: 100,
-            borderWidth: 0
-        };
-        const defaultColumnOptions = {
-            chart: {
-                type: 'bar'
-            },
-            xAxis: {
-                categories: undefined,
-                gridLineWidth: 0,
-                lineWidth: 0,
-                reversed: false,
-                tickWidth: 0,
-                labels: {
-                    align: 'center',
-                    formatter: function () {
-                        if (this.value && this.value.toString().length > 16) {
-                            return this.value.toString().substring(0, 15) + "...";
-                        }
-                        return this.value.toString();
-                    },
-                    style: {
-                        width: 100
-                    }
-                },
-                type: 'category'
-            },
-            yAxis: {
-                type: 'linear',
-                minTickInterval: 1
-            },
-            plotOptions: {
-                bar: {
-                    maxPointWidth: 18,
-                    pointWidth: 20
-                },
-                series: seriesOptions
-            }
-        };
-        return super.build(mergeDeep(defaultColumnOptions, options));
-    }
-    static configureBar(series, categories, options, opposite, color, labelDateFormat) {
-        ChartOptions.configure(series, options, color, labelDateFormat);
-        if (categories && categories.length) {
-            options.xAxis.categories = categories;
-        }
-        if (opposite && series.length === 2) {
-            const negativeSerie = series[0];
-            negativeSerie.borderRadiusBottomLeft = 100;
-            negativeSerie.borderRadiusBottomRight = 100;
-            negativeSerie.borderRadiusTopLeft = 0;
-            negativeSerie.borderRadiusTopRight = 0;
-            negativeSerie.data = negativeSerie.data.map((point) => {
-                if (point && isNaN(point)) {
-                    return Object.assign(Object.assign({}, point), { y: -Math.abs(point.y) });
-                }
-                else if (!isNaN(point)) {
-                    return -Math.abs(point);
-                }
-                return point;
-            });
-            options.plotOptions.series.stacking = 'normal';
-            options.yAxis.labels.formatter = function () {
-                return Math.abs(this.value) + '%';
-            };
-            options.tooltip.pointFormatter = function () {
-                return `<div style="font-size: 14px; color: #344563; margin: 6px 8px 0 8px;"><span style="color:${this.color};">\u25CF</span> ${this.series.name}: <b>${Math.abs(this.y) + '%'}</b></div>`;
-            };
-        }
-    }
-}
-
-class ChartBarComponent {
-    constructor() {
-        this.categories = [];
-        this.chartOptions = {}; // https://api.highcharts.com/highcharts/
-        this.color = ChartColor.ElectricBlue;
-        this.lastWidth = 0;
-    }
-    ngOnChanges(changes) {
-        if ((changes.series && !changes.series.firstChange) || (changes.color && !changes.color.firstChange)) {
-            this.initChart();
-        }
-    }
-    ngAfterViewChecked() {
-        if (this.chartRef && this.chartRef.nativeElement.clientWidth != this.lastWidth) {
-            this.lastWidth = this.chartRef.nativeElement.clientWidth;
-            if (this.chart) {
-                this.chart.reflow();
-            }
-            else if (this.series && this.series.length) {
-                this.initChart();
-            }
-        }
-    }
-    initChart() {
-        if (this.series) {
-            this.chartOptions = ChartBarOptions.build(this.chartOptions);
-            ChartBarOptions.configureBar(this.series, this.categories, this.chartOptions, this.opposite, this.color, this.labelDateFormat);
-            this.chart = new Chart(this.chartRef.nativeElement, this.chartOptions);
-        }
-    }
-}
-ChartBarComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ap-chart-bar',
-                template: "<div #chart></div>\n",
-                styles: [""]
-            },] }
-];
-ChartBarComponent.propDecorators = {
-    chartRef: [{ type: ViewChild, args: ['chart',] }],
-    categories: [{ type: Input }],
-    chartOptions: [{ type: Input }],
-    color: [{ type: Input }],
-    labelDateFormat: [{ type: Input }],
-    opposite: [{ type: Input }],
-    series: [{ type: Input }]
-};
-
-class ChartColumnOptions extends ChartOptions {
-    static buildColumn(options, simple) {
-        const defaultColumnOptions = {
-            chart: {
-                type: 'column'
-            },
-            legend: {
-                symbolHeight: 10
-            },
-            plotOptions: {
-                column: {
-                    stacking: 'normal',
-                    borderWidth: 0,
-                    maxPointWidth: 20,
-                    events: {
-                        hide: function () {
-                            ChartColumnOptions.redrawWithRoundedColumns(this.chart);
-                        },
-                        show: function () {
-                            ChartColumnOptions.redrawWithRoundedColumns(this.chart);
-                        }
-                    }
-                }
-            },
-            xAxis: {
-                type: 'datetime'
-            }
-        };
-        const simpleColumnOptions = {
-            chart: {
-                type: 'column',
-                height: '80px'
-            },
-            credits: {
-                enabled: false
-            },
-            plotOptions: {
-                column: {
-                    events: {
-                        hide: function () {
-                            ChartColumnOptions.redrawWithRoundedColumns(this.chart);
-                        },
-                        show: function () {
-                            ChartColumnOptions.redrawWithRoundedColumns(this.chart);
-                        }
-                    },
-                }
-            },
-            xAxis: {
-                type: 'datetime',
-                crosshair: true,
-                labels: {
-                    enabled: false,
-                    formatter: function () {
-                        return dateFormat('%m/%d', this.value);
-                    }
-                },
-                lineWidth: 0,
-                tickWidth: 0,
-                gridLineWidth: 0
-            },
-            yAxis: {
-                min: 0,
-                labels: {
-                    enabled: false
-                },
-                gridLineWidth: 0
-            }
-        };
-        return super.build(mergeDeep(simple ? simpleColumnOptions : defaultColumnOptions, options));
-    }
-    static redrawWithRoundedColumns(chart) {
-        chart.series.map((serie, serieIndex, arr) => {
-            ChartColumnOptions.roundSerie(arr, serie.options, serieIndex);
-        });
-        chart.redraw(true);
-    }
-    static roundSerie(series, serie, serieIndex) {
-        const roundedOptionMap = [];
-        let borderRadius = 0;
-        if (serie.data) {
-            serie.data.forEach((point, columnIndex) => {
-                // Check if all previous stacked data at the same abscissa (located higher on the graph) are missing or have a value of 0
-                // if so, it means that this point is the visual top of the column, so we should round it
-                const roundedColumnEnabled = series.slice(0, serieIndex)
-                    .every(otherSerie => {
-                    if (otherSerie.visible === false) {
-                        return true;
-                    }
-                    const pointAtSameAbscissa = otherSerie.options.data.find(otherPoint => otherPoint[0] === point[0]);
-                    return !pointAtSameAbscissa || pointAtSameAbscissa[1] === 0;
-                });
-                borderRadius = roundedColumnEnabled ? 100 : 0;
-                roundedOptionMap[columnIndex] = borderRadius;
-            });
-            serie.borderRadiusTopLeft = roundedOptionMap;
-            serie.borderRadiusTopRight = roundedOptionMap;
-        }
-    }
-}
-
-class ChartColumnComponent {
-    constructor() {
-        this.chartOptions = {}; // https://api.highcharts.com/highcharts/
-        this.color = ChartColor.ElectricBlue;
-        this.simple = false;
-        this.lastWidth = 0;
-    }
-    ngOnChanges(changes) {
-        if ((changes.series && !changes.series.firstChange) || (changes.color && !changes.color.firstChange)) {
-            this.initChart();
-        }
-    }
-    ngAfterViewChecked() {
-        if (this.chartRef && this.chartRef.nativeElement.clientWidth != this.lastWidth) {
-            this.lastWidth = this.chartRef.nativeElement.clientWidth;
-            if (this.chart) {
-                this.chart.reflow();
-            }
-            else if (this.series && this.series.length) {
-                this.initChart();
-            }
-        }
-    }
-    initChart() {
-        if (this.series) {
-            this.chartOptions = ChartColumnOptions.buildColumn(this.chartOptions, this.simple);
-            ChartColumnOptions.configure(this.series, this.chartOptions, this.color, this.labelDateFormat);
-            this.chart = new Chart(this.chartRef.nativeElement, this.chartOptions);
-            if (this.chart) {
-                ChartColumnOptions.redrawWithRoundedColumns(this.chart);
-            }
-        }
-    }
-}
-ChartColumnComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ap-chart-column',
-                template: "<div #chart></div>\n",
-                styles: [""]
-            },] }
-];
-ChartColumnComponent.propDecorators = {
-    chartRef: [{ type: ViewChild, args: ['chart',] }],
-    chartOptions: [{ type: Input }],
-    color: [{ type: Input }],
-    labelDateFormat: [{ type: Input }],
-    series: [{ type: Input }],
-    simple: [{ type: Input }]
-};
-
-var ChartMetricType;
-(function (ChartMetricType) {
-    ChartMetricType[ChartMetricType["default"] = 0] = "default";
-    ChartMetricType[ChartMetricType["total"] = 1] = "total";
-})(ChartMetricType || (ChartMetricType = {}));
-class ChartMetric {
-}
-
-class ChartMetricsListComponent {
-    constructor() {
-        this.ChartMetricType = ChartMetricType;
-        this.digitsInfo = '1.0-1';
-    }
-}
-ChartMetricsListComponent.decorators = [
-    { type: Component, args: [{
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                selector: "ap-chart-metrics-list",
-                template: "<mat-list>\n    <ng-container *ngIf=\"metrics\">\n        <mat-list-item *ngFor=\"let metric of metrics; let i = index\"\n                       [ngClass]=\"{'chart-metric-total': metric.type == ChartMetricType.total}\">\n            <div class=\"chart-metric-name metric-label\"\n                 *ngIf=\"!metric.children\">\n                {{metric.name}}\n            </div>\n            <div class=\"chart-metric-name\"\n                 *ngIf=\"metric.children\">\n                <span class=\"metric-label\">\n                    {{metric.name}}\n                </span>\n                <span class=\"chart-metric-children\">\n                    <span *ngFor=\"let item of metric.children\">\n                        <span class=\"child-label\">{{item.name}}</span>: <span class=\"child-value\">{{item.value}}</span>\n                    </span>\n                </span>\n            </div>\n            <div class=\"chart-metric-value metric-label\">\n                {{metric.value | number: digitsInfo: locale}}\n            </div>\n            <mat-divider *ngIf=\"i < metrics.length - 1\"></mat-divider>\n        </mat-list-item>\n    </ng-container>\n</mat-list>\n",
-                styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid red}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #fff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:#0000}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:initial}[border=transparent]{border:1px solid #0000}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}.metric-label{font-size:14px;color:#5d6a82}.chart-metric-total .metric-label{font-size:16px;color:#344563!important;font-weight:700}.chart-metric-name .chart-metric-children{color:#aeb5c1;font-size:14px}.chart-metric-name .chart-metric-children .child-label{margin-left:16px}.chart-metric-value{justify-content:left;flex:1 0 0;flex-direction:row;text-align:end;color:#344563}.mat-list-item{height:35px}.mat-list-item ::ng-deep .mat-list-item-content{padding:0}"]
-            },] }
-];
-ChartMetricsListComponent.propDecorators = {
-    metrics: [{ type: Input }],
-    locale: [{ type: Input }]
-};
-
-class ChartHeatmapOptions extends ChartOptions {
-    static build(options) {
-        const defaultHeatmapOptions = {
-            chart: {
-                type: 'heatmap',
-                height: 600
-            },
-            colorAxis: {
-                allowDecimals: false,
-                gridLineWidth: 2,
-                gridLineColor: 'white',
-                min: 0,
-                labels: {
-                    style: {
-                        fontSize: '12px'
-                    }
-                }
-            },
-            legend: {
-                enabled: false
-            },
-            plotOptions: {
-                heatmap: {
-                    borderColor: ChartColors.GREY_COLORS[10],
-                    borderWidth: 1,
-                    nullColor: 'white'
-                }
-            },
-            tooltip: {
-                headerFormat: '',
-                pointFormat: `<div style="border-bottom: 1px solid ${ChartColors.GREY_COLORS[10]}; padding: 0 8px 7px">`
-                    + `<span style="font-size: 12px; color: ${ChartColors.GREY_COLORS[60]}">{point.tooltipHeaderLabel}</span></div>`
-                    + `<div style="font-size: 14px; color: ${ChartColors.GREY_COLORS[100]}; margin: 6px 8px 0 8px;">`
-                    + `<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.value}</b></div>`,
-            },
-            xAxis: {
-                labels: {
-                    formatter: function () {
-                        return this.value.toString();
-                    }
-                },
-                lineWidth: 1,
-                tickWidth: 0,
-                visible: true
-            },
-            yAxis: {
-                lineWidth: 0,
-                tickInterval: 3,
-                reversed: true,
-                visible: true
-            }
-        };
-        return super.build(mergeDeep(defaultHeatmapOptions, options));
-    }
-    static configureHeatmap(categoriesX, categoriesY, series, options, labelDateFormat) {
-        super.configure(series, options, null, labelDateFormat);
-        if (categoriesX && categoriesX.length) {
-            options.xAxis.categories = categoriesX;
-        }
-        if (categoriesY && categoriesY.length) {
-            options.yAxis.categories = categoriesY;
-        }
-    }
-}
-
-class ChartHeatmapComponent {
-    constructor() {
-        this.categoriesX = [];
-        this.categoriesY = [];
-        this.chartOptions = {}; // https://api.highcharts.com/highcharts/
-        this.lastWidth = 0;
-    }
-    ngOnChanges(changes) {
-        if ((changes.series && !changes.series.firstChange)) {
-            this.initChart();
-        }
-    }
-    ngAfterViewChecked() {
-        if (this.chartRef && this.chartRef.nativeElement.clientWidth != this.lastWidth) {
-            this.lastWidth = this.chartRef.nativeElement.clientWidth;
-            if (this.chart) {
-                this.chart.reflow();
-            }
-            else if (this.series && this.series.length) {
-                this.initChart();
-            }
-        }
-    }
-    initChart() {
-        if (this.series) {
-            this.chartOptions = ChartHeatmapOptions.build(this.chartOptions);
-            ChartHeatmapOptions.configureHeatmap(this.categoriesX, this.categoriesY, this.series, this.chartOptions, this.labelDateFormat);
-            mapChart(this.chartRef.nativeElement, this.chartOptions);
-        }
-    }
-}
-ChartHeatmapComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ap-chart-heatmap',
-                template: "<div #chart></div>\n",
-                styles: [""]
-            },] }
-];
-ChartHeatmapComponent.propDecorators = {
-    chartRef: [{ type: ViewChild, args: ['chart',] }],
-    categoriesX: [{ type: Input }],
-    categoriesY: [{ type: Input }],
-    chartOptions: [{ type: Input }],
-    labelDateFormat: [{ type: Input }],
-    series: [{ type: Input }]
-};
-
-class ChartSplineOptions extends ChartOptions {
-    static build(options) {
-        const defaultSplineOptions = {
-            chart: {
-                type: 'spline'
-            },
-            plotOptions: {
-                series: {
-                    marker: {
-                        enabled: false,
-                        radius: 2,
-                        symbol: 'circle'
-                    }
-                }
-            },
-            xAxis: {
-                type: 'datetime'
-            }
-        };
-        return super.build(mergeDeep(defaultSplineOptions, options));
-    }
-}
-
-class ChartSplineComponent {
-    constructor() {
-        this.chartOptions = {}; // https://api.highcharts.com/highcharts/
-        this.color = ChartColor.ElectricBlue;
-        this.lastWidth = 0;
-    }
-    ngOnChanges(changes) {
-        if ((changes.series && !changes.series.firstChange) || (changes.color && !changes.color.firstChange)) {
-            this.initChart();
-        }
-    }
-    ngAfterViewChecked() {
-        if (this.chartRef && this.chartRef.nativeElement.clientWidth !== this.lastWidth) {
-            this.lastWidth = this.chartRef.nativeElement.clientWidth;
-            if (this.chart) {
-                this.chart.reflow();
-            }
-            else if (this.series && this.series.length) {
-                this.initChart();
-            }
-        }
-    }
-    initChart() {
-        var _a;
-        if (this.series) {
-            this.chartOptions = ChartSplineOptions.build(this.chartOptions);
-            if (((_a = this.series[0].data) === null || _a === void 0 ? void 0 : _a.length) === 1) {
-                this.chartOptions.plotOptions.series.marker.enabled = true;
-                this.chartOptions.plotOptions.series.marker.radius = 5;
-            }
-            ChartSplineOptions.configure(this.series, this.chartOptions, this.color, this.labelDateFormat);
-            this.chart = new Chart(this.chartRef.nativeElement, this.chartOptions);
-        }
-    }
-}
-ChartSplineComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ap-chart-spline',
-                template: "<div #chart></div>\n",
-                styles: [""]
-            },] }
-];
-ChartSplineComponent.propDecorators = {
-    chartRef: [{ type: ViewChild, args: ['chart',] }],
-    chartOptions: [{ type: Input }],
-    color: [{ type: Input }],
-    labelDateFormat: [{ type: Input }],
-    series: [{ type: Input }]
-};
-
-class ChartPieOptions extends ChartOptions {
-    static buildPie(options, innerLabels) {
-        const defaultPieOptions = {
-            chart: {
-                type: 'pie',
-                plotBackgroundColor: null,
-                plotBorderWidth: null,
-                plotShadow: false
-            },
-            plotOptions: {
-                pie: {
-                    dataLabels: {
-                        distance: innerLabels ? -40 : 30,
-                        useHTML: true
-                    },
-                    innerSize: '50%'
-                },
-                series: {
-                    allowPointSelect: !innerLabels,
-                    dataLabels: innerLabels ? {
-                        format: '{point.percentage:.1f}%',
-                        style: {
-                            fontSize: '16px',
-                            color: 'white',
-                            textOutline: '0'
-                        }
-                    } : {
-                        style: {
-                            fontSize: '12px',
-                            color: ChartColors.GREY_COLORS[60]
-                        }
-                    },
-                    showInLegend: innerLabels
-                }
-            },
-            legend: innerLabels ? {
-                symbolHeight: 10,
-                enabled: true
-            } : {}
-        };
-        return super.build(mergeDeep(defaultPieOptions, options));
-    }
-    static configurePie(series, options, color, labelDateFormat, innerLabels) {
-        super.configure(series, options, color, labelDateFormat);
-        if (innerLabels) {
-            options.legend.enabled = true;
-        }
-        if (series && series.length > 0 && series[0]) {
-            options.colors = ChartColors.getColors(series[0].data.length, color);
-        }
-    }
-}
-
-class ChartPieComponent {
-    constructor() {
-        this.chartOptions = {}; // https://api.highcharts.com/highcharts/
-        this.color = ChartColor.ElectricBlue;
-        this.innerLabels = false;
-        this.lastWidth = 0;
-    }
-    ngOnChanges(changes) {
-        if ((changes.series && !changes.series.firstChange) || (changes.color && !changes.color.firstChange)) {
-            this.initChart();
-        }
-    }
-    ngAfterViewChecked() {
-        if (this.chartRef && this.chartRef.nativeElement.clientWidth !== this.lastWidth) {
-            this.lastWidth = this.chartRef.nativeElement.clientWidth;
-            if (this.chart) {
-                this.chart.reflow();
-            }
-            else if (this.series && this.series.length) {
-                this.initChart();
-            }
-        }
-    }
-    initChart() {
-        if (this.series) {
-            this.chartOptions = ChartPieOptions.buildPie(this.chartOptions, this.innerLabels);
-            ChartPieOptions.configurePie(this.series, this.chartOptions, this.color, this.labelDateFormat, this.innerLabels);
-            this.chart = new Chart(this.chartRef.nativeElement, this.chartOptions);
-        }
-    }
-}
-ChartPieComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'ap-chart-pie',
-                template: "<div #chart></div>\n",
-                styles: [""]
-            },] }
-];
-ChartPieComponent.propDecorators = {
-    chartRef: [{ type: ViewChild, args: ['chart',] }],
-    chartOptions: [{ type: Input }],
-    color: [{ type: Input }],
-    innerLabels: [{ type: Input }],
-    labelDateFormat: [{ type: Input }],
-    series: [{ type: Input }]
-};
-
-class AgorapulseUiChartsModule {
-}
-AgorapulseUiChartsModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    ChartBarComponent,
-                    ChartColumnComponent,
-                    ChartHeatmapComponent,
-                    ChartMetricsListComponent,
-                    ChartSplineComponent,
-                    ChartPieComponent
-                ],
-                imports: [
-                    CommonModule,
-                    HighchartsChartModule,
-                    MatListModule
-                ],
-                exports: [
-                    ChartBarComponent,
-                    ChartColumnComponent,
-                    ChartHeatmapComponent,
-                    ChartMetricsListComponent,
-                    ChartSplineComponent,
-                    ChartPieComponent
-                ],
-                providers: []
-            },] }
-];
-
-/*
- * Public API Surface of ui-charts
- */
-borderRadiusPlugin(Highcharts);
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AgorapulseUiChartsModule, ChartBarComponent, ChartColor, ChartColors, ChartColumnComponent, ChartHeatmapComponent, ChartMetric, ChartMetricType, ChartMetricsListComponent, ChartOptions, ChartPieComponent, ChartSplineComponent, borderRadiusPlugin, mergeDeep };
-//# sourceMappingURL=agorapulse-ui-charts.js.map