@agorapulse/ui-charts 2.2.16 → 13.0.0

package/fesm2020/agorapulse-ui-charts.mjs

@@ -0,0 +1,1089 @@
+import * as Highcharts from 'highcharts';
+import { dateFormat, Chart } from 'highcharts';
+import * as i0 from '@angular/core';
+import { Component, ViewChild, Input, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import { HighchartsChartModule } from 'highcharts-angular';
+import * as i2 from '@angular/material/divider';
+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) {
+        const 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 = {
+    '5': '#F5F5F7',
+    '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() {
+                        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 {
+                        ...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) {
+            const chartOptions = ChartBarOptions.build(this.chartOptions);
+            ChartBarOptions.configureBar(this.series, this.categories, chartOptions, this.opposite, this.color, this.labelDateFormat);
+            this.chart = new Chart(this.chartRef.nativeElement, chartOptions);
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ ChartBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ChartBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ ChartBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: ChartBarComponent, selector: "ap-chart-bar", inputs: { categories: "categories", chartOptions: "chartOptions", color: "color", labelDateFormat: "labelDateFormat", opposite: "opposite", series: "series" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #chart></div>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ChartBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-chart-bar', template: "<div #chart></div>\n" }]
+        }], 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() {
+                            ChartColumnOptions.redrawWithRoundedColumns(this.chart);
+                        },
+                        show() {
+                            ChartColumnOptions.redrawWithRoundedColumns(this.chart);
+                        }
+                    }
+                }
+            },
+            xAxis: {
+                type: 'datetime'
+            }
+        };
+        const simpleColumnOptions = {
+            chart: {
+                type: 'column',
+                height: '80px'
+            },
+            credits: {
+                enabled: false
+            },
+            plotOptions: {
+                column: {
+                    events: {
+                        hide() {
+                            ChartColumnOptions.redrawWithRoundedColumns(this.chart);
+                        },
+                        show() {
+                            ChartColumnOptions.redrawWithRoundedColumns(this.chart);
+                        }
+                    },
+                }
+            },
+            xAxis: {
+                type: 'datetime',
+                crosshair: true,
+                labels: {
+                    enabled: false,
+                    formatter() {
+                        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) {
+            const chartOptions = ChartColumnOptions.buildColumn(this.chartOptions, this.simple);
+            ChartColumnOptions.configure(this.series, chartOptions, this.color, this.labelDateFormat);
+            this.chart = new Chart(this.chartRef.nativeElement, chartOptions);
+            if (this.chart) {
+                ChartColumnOptions.redrawWithRoundedColumns(this.chart);
+            }
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ ChartColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ChartColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ ChartColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: ChartColumnComponent, selector: "ap-chart-column", inputs: { chartOptions: "chartOptions", color: "color", labelDateFormat: "labelDateFormat", series: "series", simple: "simple" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #chart></div>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ChartColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-chart-column', template: "<div #chart></div>\n" }]
+        }], 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';
+    }
+}
+/** @nocollapse */ /** @nocollapse */ ChartMetricsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ChartMetricsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ ChartMetricsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: ChartMetricsListComponent, selector: "ap-chart-metrics-list", inputs: { metrics: "metrics", locale: "locale" }, ngImport: i0, 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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}\n"], components: [{ type: i1.MatList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { type: i1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "number": i3.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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}\n"] }]
+        }], 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) {
+            const chartOptions = ChartHeatmapOptions.build(this.chartOptions);
+            ChartHeatmapOptions.configureHeatmap(this.categoriesX, this.categoriesY, this.series, chartOptions, this.labelDateFormat);
+            mapChart(this.chartRef.nativeElement, chartOptions);
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ ChartHeatmapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ChartHeatmapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ ChartHeatmapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: ChartHeatmapComponent, selector: "ap-chart-heatmap", inputs: { categoriesX: "categoriesX", categoriesY: "categoriesY", chartOptions: "chartOptions", labelDateFormat: "labelDateFormat", series: "series" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #chart></div>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ChartHeatmapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-chart-heatmap', template: "<div #chart></div>\n" }]
+        }], 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 buildSpline(options, singleDayEnabled) {
+        const defaultSplineOptions = {
+            chart: {
+                type: 'spline'
+            },
+            plotOptions: {
+                series: {
+                    marker: {
+                        enabled: singleDayEnabled,
+                        radius: singleDayEnabled ? 5 : 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() {
+        if (this.series) {
+            const chartOptions = ChartSplineOptions.buildSpline(this.chartOptions, this.series[0].data?.length === 1);
+            ChartSplineOptions.configure(this.series, chartOptions, this.color, this.labelDateFormat);
+            this.chart = new Chart(this.chartRef.nativeElement, chartOptions);
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ ChartSplineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ChartSplineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ ChartSplineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: ChartSplineComponent, selector: "ap-chart-spline", inputs: { chartOptions: "chartOptions", color: "color", labelDateFormat: "labelDateFormat", series: "series" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #chart></div>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ChartSplineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-chart-spline', template: "<div #chart></div>\n" }]
+        }], 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,
+                    states: {
+                        inactive: {
+                            opacity: 1
+                        }
+                    }
+                }
+            },
+            legend: innerLabels ? {
+                symbolHeight: 10,
+                enabled: true
+            } : {}
+        };
+        return super.build(mergeDeep(defaultPieOptions, options));
+    }
+    static configurePie(series, options, color, labelDateFormat, innerLabels) {
+        var _a, _b, _c;
+        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);
+            (_a = options.plotOptions.pie).point ?? (_a.point = {});
+            (_b = options.plotOptions.pie.point).events ?? (_b.events = {});
+            // entering a slice
+            options.plotOptions.pie.point.events.mouseOver = function () {
+                this.series.chart.series[0].points.forEach(point => {
+                    if (point.index !== this.index) {
+                        point.update({
+                            color: ChartColors.GREY_COLORS[5]
+                        }, false);
+                        if (innerLabels) {
+                            point.update({
+                                dataLabels: {
+                                    style: {
+                                        color: ChartColors.GREY_COLORS[20]
+                                    }
+                                }
+                            }, false);
+                        }
+                    }
+                });
+                this.series.chart.redraw(false);
+            };
+            // leaving a slice
+            options.plotOptions.pie.point.events.mouseOut = function () {
+                this.series.chart.series[0].points.forEach((point, i) => {
+                    if (point.index !== this.index) {
+                        point.update({
+                            color: options.colors[i % options.colors.length]
+                        }, false);
+                        if (innerLabels) {
+                            point.update({
+                                dataLabels: {
+                                    style: {
+                                        color: 'white'
+                                    }
+                                }
+                            }, false);
+                        }
+                    }
+                });
+            };
+            (_c = options.plotOptions.pie).events ?? (_c.events = {});
+            // leaving the whole pie
+            options.plotOptions.pie.events.mouseOut = function () {
+                this.chart.series[0].points.forEach((point, i) => {
+                    point.update({
+                        color: options.colors[i % options.colors.length]
+                    }, false);
+                    if (innerLabels) {
+                        point.update({
+                            dataLabels: {
+                                style: {
+                                    color: 'white'
+                                }
+                            }
+                        }, false);
+                    }
+                });
+                this.chart.redraw();
+            };
+        }
+    }
+}
+
+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) {
+            const chartOptions = ChartPieOptions.buildPie(this.chartOptions, this.innerLabels);
+            ChartPieOptions.configurePie(this.series, chartOptions, this.color, this.labelDateFormat, this.innerLabels);
+            this.chart = new Chart(this.chartRef.nativeElement, chartOptions);
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ ChartPieComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ChartPieComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ ChartPieComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: ChartPieComponent, selector: "ap-chart-pie", inputs: { chartOptions: "chartOptions", color: "color", innerLabels: "innerLabels", labelDateFormat: "labelDateFormat", series: "series" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #chart></div>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ChartPieComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-chart-pie', template: "<div #chart></div>\n" }]
+        }], propDecorators: { chartRef: [{
+                type: ViewChild,
+                args: ['chart']
+            }], chartOptions: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], innerLabels: [{
+                type: Input
+            }], labelDateFormat: [{
+                type: Input
+            }], series: [{
+                type: Input
+            }] } });
+
+class AgorapulseUiChartsModule {
+}
+/** @nocollapse */ /** @nocollapse */ AgorapulseUiChartsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AgorapulseUiChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ AgorapulseUiChartsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AgorapulseUiChartsModule, declarations: [ChartBarComponent,
+        ChartColumnComponent,
+        ChartHeatmapComponent,
+        ChartMetricsListComponent,
+        ChartSplineComponent,
+        ChartPieComponent], imports: [CommonModule,
+        HighchartsChartModule,
+        MatListModule], exports: [ChartBarComponent,
+        ChartColumnComponent,
+        ChartHeatmapComponent,
+        ChartMetricsListComponent,
+        ChartSplineComponent,
+        ChartPieComponent] });
+/** @nocollapse */ /** @nocollapse */ AgorapulseUiChartsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AgorapulseUiChartsModule, providers: [], imports: [[
+            CommonModule,
+            HighchartsChartModule,
+            MatListModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: 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.mjs.map