@agorapulse/ui-charts 20.1.16 → 20.1.18

package/fesm2022/agorapulse-ui-charts.mjs

@@ -1,123 +1,8 @@
-import * as Highcharts from 'highcharts';
-import { numberFormat, setOptions, dateFormat, Chart } from 'highcharts';
 import * as i0 from '@angular/core';
-import { Input, ViewChild, Directive, Component, input, EventEmitter, Output, effect, ChangeDetectionStrategy, signal, afterNextRender } from '@angular/core';
+import { inject, DestroyRef, ElementRef, input, signal, afterNextRender, effect, Directive, ChangeDetectionStrategy, Component, output } from '@angular/core';
+import { setOptions, Chart, numberFormat } from 'highcharts';
+import { isPlainObject, cloneDeep, round } from 'es-toolkit';
 import { mapChart } from 'highcharts/highmaps';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { MatDividerModule } from '@angular/material/divider';
-import * as i2 from '@angular/material/list';
-import { MatListModule } from '@angular/material/list';
-
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-const borderRadiusPlugin = function (H) {
-    if (H.borderRadiusPlugininitialized) {
-        return;
-    }
-    H.borderRadiusPlugininitialized = true;
-    H.wrap(H.seriesTypes.column.prototype, 'translate', function (proceed) {
-        // @ts-ignore
-        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;
-        // @ts-ignore
-        proceed.call(this);
-        // @ts-ignore
-        if (!this.points) {
-            return;
-        }
-        if (borderRadiusTopLeftSettings ||
-            borderRadiusTopRightSettings ||
-            borderRadiusBottomLeftSettings ||
-            borderRadiusBottomRightSettings) {
-            // @ts-ignore
-            this.points.forEach(function (point) {
-                roundPoint(borderRadiusTopLeftSettings, borderRadiusTopRightSettings, borderRadiusBottomLeftSettings, borderRadiusBottomRightSettings, point, H, topMargin, bottomMargin);
-            });
-        }
-    });
-};
-function roundPoint(borderRadiusTopLeftSettings, borderRadiusTopRightSettings, borderRadiusBottomLeftSettings, borderRadiusBottomRightSettings, point, H, topMargin, bottomMargin) {
-    const w = point.shapeArgs.width;
-    const h = point.shapeArgs.height;
-    const x = point.shapeArgs.x;
-    const y = point.shapeArgs.y;
-    const borderRadiusTopLeft = borderRadiusTopLeftSettings?.length
-        ? borderRadiusTopLeftSettings[point.index]
-        : borderRadiusTopLeftSettings || 0;
-    const borderRadiusTopRight = borderRadiusTopRightSettings?.length
-        ? borderRadiusTopRightSettings[point.index]
-        : borderRadiusTopRightSettings || 0;
-    const borderRadiusBottomLeft = borderRadiusBottomLeftSettings?.length
-        ? borderRadiusBottomLeftSettings[point.index]
-        : borderRadiusBottomLeftSettings || 0;
-    const borderRadiusBottomRight = 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) {
@@ -233,121 +118,72 @@ class ChartColors {
 }
 
 class AbstractChartComponent {
-    chartRef;
-    chartOptions = {}; // https://api.highcharts.com/highcharts/
-    color = ChartColor.ElectricBlue;
-    labelDateFormat = '%m/%d';
-    locale = 'en';
-    series = [];
+    destroyRef = inject(DestroyRef);
+    /** Highcharts renders into the host element directly. */
+    hostElement = inject(ElementRef).nativeElement;
+    chartOptions = input({}, ...(ngDevMode ? [{ debugName: "chartOptions" }] : []));
+    color = input(ChartColor.ElectricBlue, ...(ngDevMode ? [{ debugName: "color" }] : []));
+    labelDateFormat = input('%m/%d', ...(ngDevMode ? [{ debugName: "labelDateFormat" }] : []));
+    locale = input('en', ...(ngDevMode ? [{ debugName: "locale" }] : []));
     chart;
+    viewReady = signal(false, ...(ngDevMode ? [{ debugName: "viewReady" }] : []));
     resizeObserver;
-    ngOnChanges(changes) {
-        if ((changes.series && !changes.series.firstChange) ||
-            (changes.color && !changes.color.firstChange) ||
-            (changes.chartOptions && !changes.chartOptions.firstChange) ||
-            (changes.locale && !changes.locale.firstChange) ||
-            (changes.metricFormat && !changes.metricFormat.firstChange)) {
-            this.initChart();
-        }
-    }
-    ngAfterViewInit() {
-        this.resizeObserver = new ResizeObserver(() => {
-            const el = this.chartRef?.nativeElement;
-            if (!el || el.clientWidth === 0) {
+    constructor() {
+        afterNextRender(() => {
+            this.resizeObserver = new ResizeObserver(() => this.onResize());
+            this.resizeObserver.observe(this.hostElement);
+            this.viewReady.set(true);
+        });
+        // Eager init on view-ready; ResizeObserver reflows as the container grows.
+        effect(() => {
+            if (!this.viewReady())
                 return;
-            }
-            if (this.chart) {
-                this.chart.reflow();
-            }
-            else if (this.series?.length) {
-                this.initChart();
-            }
+            this.rebuild();
         });
-        this.resizeObserver.observe(this.chartRef.nativeElement);
+        this.destroyRef.onDestroy(() => {
+            this.resizeObserver?.disconnect();
+            this.chart?.destroy();
+        });
+    }
+    onResize() {
+        if (this.chart) {
+            this.chart.reflow();
+        }
+        else if (this.hostElement.clientWidth > 0 && this.series().length) {
+            this.rebuild();
+        }
     }
-    ngOnDestroy() {
-        this.resizeObserver?.disconnect();
+    rebuild() {
         this.chart?.destroy();
+        this.chart = undefined;
+        this.initChart();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AbstractChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: AbstractChartComponent, isStandalone: true, inputs: { chartOptions: "chartOptions", color: "color", labelDateFormat: "labelDateFormat", locale: "locale", series: "series" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", type: AbstractChartComponent, isStandalone: true, inputs: { chartOptions: { classPropertyName: "chartOptions", publicName: "chartOptions", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, labelDateFormat: { classPropertyName: "labelDateFormat", publicName: "labelDateFormat", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AbstractChartComponent, decorators: [{
             type: Directive
-        }], propDecorators: { chartRef: [{
-                type: ViewChild,
-                args: ['chart']
-            }], chartOptions: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], labelDateFormat: [{
-                type: Input
-            }], locale: [{
-                type: Input
-            }], series: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { chartOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartOptions", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], labelDateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelDateFormat", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }] } });
 
-/**
- * Builds Highcharts locale options (lang + tooltip date formats) from a locale string.
- * Uses the browser's Intl API to generate translated month/weekday names and number formatting rules.
- */
+/** `lang.locale` drives Intl-based weekday/month/number formatting; we only override the tooltip date order. */
 function buildHighchartsLocaleOptions(locale) {
-    const { decimalPoint, thousandsSep } = buildNumberSeparators(locale);
+    const dayFormat = locale === 'en' ? '%A, %b %e, %Y' : '%A %e %b %Y';
     return {
-        lang: {
-            decimalPoint,
-            thousandsSep,
-            weekdays: buildWeekdays(locale),
-            shortMonths: buildShortMonths(locale),
-        },
+        lang: { locale },
         tooltip: {
             dateTimeLabelFormats: {
-                day: locale === 'en' ? '%A, %b %e, %Y' : '%A %e %b %Y',
-                week: locale === 'en' ? '%A, %b %e, %Y' : '%A %e %b %Y',
+                day: dayFormat,
+                week: dayFormat,
             },
         },
     };
 }
-function buildNumberSeparators(locale) {
-    const parts = new Intl.NumberFormat(locale).formatToParts(12345.6);
-    const decimalPoint = parts.find(p => p.type === 'decimal')?.value ?? '.';
-    const thousandsSep = parts.find(p => p.type === 'group')?.value ?? ',';
-    return { decimalPoint, thousandsSep };
-}
-function buildWeekdays(locale) {
-    const formatter = new Intl.DateTimeFormat(locale, { weekday: 'long' });
-    // Jan 4, 1970 is a Sunday
-    return Array.from({ length: 7 }, (_, i) => {
-        const name = formatter.format(new Date(1970, 0, 4 + i));
-        return name.charAt(0).toUpperCase() + name.slice(1);
-    });
-}
-function buildShortMonths(locale) {
-    const formatter = new Intl.DateTimeFormat(locale, { month: 'short' });
-    return Array.from({ length: 12 }, (_, i) => {
-        const name = formatter.format(new Date(2000, i, 1));
-        return name.charAt(0).toUpperCase() + name.slice(1);
-    });
-}
 
+const FONT_FAMILY = "Averta, 'Open Sans', Helvetica, sans-serif";
+const LABEL_FONT_SIZE = '12px';
 class ChartOptions {
     static DEFAULT_DATE_FORMAT = '%A, %b %e, %Y';
     static 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,
             zooming: {
@@ -358,34 +194,22 @@ class ChartOptions {
                         r: 4,
                         style: {
                             color: ChartColors.GREY_COLORS[100],
-                            fontSize: '12px',
+                            fontSize: LABEL_FONT_SIZE,
                         },
                         states: {
-                            hover: {
-                                fill: ChartColors.GREY_COLORS[5],
-                            },
+                            hover: { fill: ChartColors.GREY_COLORS[5] },
                         },
                     },
                 },
             },
-            panning: {
-                enabled: true,
-            },
+            panning: { enabled: true },
             panKey: 'shift',
-            style: {
-                fontFamily: "Averta, 'Open Sans', Helvetica, sans-serif",
-            },
+            style: { fontFamily: FONT_FAMILY },
         },
         colorAxis: {
-            labels: {
-                style: {
-                    color: ChartColors.GREY_COLORS[60],
-                },
-            },
-        },
-        credits: {
-            enabled: false,
+            labels: { style: { color: ChartColors.GREY_COLORS[60] } },
         },
+        credits: { enabled: false },
         legend: {
             borderWidth: 0,
             itemStyle: {
@@ -401,21 +225,15 @@ class ChartOptions {
         plotOptions: {
             series: {
                 states: {
-                    hover: {
-                        brightness: 0,
-                    },
+                    hover: { brightness: 0 },
                 },
                 connectNulls: true,
             },
         },
         navigation: {
-            buttonOptions: {
-                y: 0,
-            },
-        },
-        title: {
-            text: undefined,
+            buttonOptions: { y: 0 },
         },
+        title: { text: undefined },
         tooltip: {
             backgroundColor: ChartColors.WHITE_COLOR,
             borderRadius: 4,
@@ -432,22 +250,20 @@ class ChartOptions {
             shared: true,
             useHTML: true,
             headerFormat: `<div style="border-bottom: 1px solid ${ChartColors.GREY_COLORS[10]}; padding: 0 8px 7px">` +
-                `<div style="white-space: wrap; font-size: 12px; color: ${ChartColors.GREY_COLORS[60]}">{point.key}</div></div>`,
+                `<div style="white-space: wrap; font-size: ${LABEL_FONT_SIZE}; color: ${ChartColors.GREY_COLORS[60]}">{point.key}</div></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> {point.custom.details}</div>',
+                '<span style="color:{point.color}">●</span> {series.name}: <b>{point.y}</b> {point.custom.details}</div>',
         },
         xAxis: {
             gridLineColor: ChartColors.GREY_COLORS[10],
             lineColor: ChartColors.GREY_COLORS[10],
             tickColor: ChartColors.GREY_COLORS[10],
             gridLineWidth: 1,
-            title: {
-                text: null,
-            },
+            title: { text: null },
             labels: {
                 style: {
                     color: ChartColors.GREY_COLORS[85],
-                    fontSize: '12px',
+                    fontSize: LABEL_FONT_SIZE,
                 },
             },
         },
@@ -456,19 +272,12 @@ class ChartOptions {
             gridLineColor: ChartColors.GREY_COLORS[10],
             lineColor: ChartColors.GREY_COLORS[10],
             gridLineWidth: 1,
-            title: {
-                text: undefined,
-            },
+            title: { text: undefined },
             labels: {
-                formatter: function () {
-                    if (typeof this.value === 'string') {
-                        return this.value;
-                    }
-                    return numberFormat(this.value, -1);
-                },
+                // Highcharts auto-formats per `lang.locale`.
                 style: {
                     color: ChartColors.GREY_COLORS[85],
-                    fontSize: '12px',
+                    fontSize: LABEL_FONT_SIZE,
                 },
             },
         },
@@ -479,18 +288,7 @@ class ChartOptions {
         return mergeDeep(mergeDeep(ChartOptions.DEFAULT_OPTIONS, localeOptions), options);
     }
     static configure(series, options, color, labelDateFormat) {
-        // Configure axis
-        options.xAxis = mergeDeep({
-            labels: {
-                formatter: function () {
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore
-                    return dateFormat(labelDateFormat ?? '%m/%d', this.value);
-                },
-            },
-            //minTickInterval: 24 * 60 * 60 * 1000 // One day
-        }, options.xAxis);
-        // Configure series
+        options.xAxis = mergeDeep({ labels: { format: `{value:${labelDateFormat ?? '%m/%d'}}` } }, options.xAxis);
         if (series?.length) {
             options.series = series;
             if (options.legend) {
@@ -499,114 +297,23 @@ class ChartOptions {
             options.colors = ChartColors.getColors(series.length, color);
         }
     }
-    static redrawWithHighestEdgesRounded(chart) {
-        chart.series.forEach((serie, serieIndex, arr) => {
-            ChartOptions.roundHighestSerie(arr, serie.options, serieIndex);
-        });
-        chart.redraw(true);
-    }
-    static roundHighestSerie(series, serie, serieIndex) {
-        const roundedTopMap = [];
-        const roundedBottomMap = [];
-        if (serie.data) {
-            serie.data.forEach((point, columnIndex) => {
-                const pointValue = ChartOptions.getPointValue(point);
-                const pointX = ChartOptions.getPointX(point);
-                const isNegative = pointValue !== null && pointValue < 0;
-                if (isNegative) {
-                    // Negative bars go downward: the visual tip is the physical bottom.
-                    // Round bottom corners if no higher-index visible series has a negative value here
-                    // (meaning this series is the bottommost segment of the negative stack).
-                    const isBottommost = series.slice(serieIndex + 1).every(otherSerie => {
-                        if (!otherSerie.visible)
-                            return true;
-                        const otherPoint = ChartOptions.findPointAtAbscissa(otherSerie.options.data, pointX, columnIndex);
-                        if (otherPoint === undefined)
-                            return true;
-                        const val = ChartOptions.getPointValue(otherPoint);
-                        return val === null || val >= 0;
-                    });
-                    roundedTopMap[columnIndex] = 0;
-                    roundedBottomMap[columnIndex] = isBottommost ? 100 : 0;
-                }
-                else {
-                    // Positive bars go upward: the visual tip is the physical top.
-                    // Round top corners if all lower-index visible series are 0/missing here
-                    // (meaning this series is the topmost segment of the positive stack).
-                    const isTopmost = series.slice(0, serieIndex).every(otherSerie => {
-                        if (!otherSerie.visible)
-                            return true;
-                        const otherPoint = ChartOptions.findPointAtAbscissa(otherSerie.options.data, pointX, columnIndex);
-                        return otherPoint === undefined || ChartOptions.getPointValue(otherPoint) === 0;
-                    });
-                    roundedTopMap[columnIndex] = isTopmost ? 100 : 0;
-                    roundedBottomMap[columnIndex] = 0;
-                }
-            });
-            serie.borderRadiusTopLeft = roundedTopMap;
-            serie.borderRadiusTopRight = roundedTopMap;
-            serie.borderRadiusBottomLeft = roundedBottomMap;
-            serie.borderRadiusBottomRight = roundedBottomMap;
-        }
-    }
-    static getPointX(point) {
-        if (Array.isArray(point))
-            return point[0];
-        if (point && typeof point === 'object')
-            return point.x ?? null;
-        return null;
-    }
-    static findPointAtAbscissa(data, x, fallbackIndex) {
-        if (!data)
-            return undefined;
-        if (x !== null) {
-            return data.find(p => ChartOptions.getPointX(p) === x);
-        }
-        return data[fallbackIndex];
-    }
-    static getPointValue(point) {
-        if (typeof point === 'number')
-            return point;
-        if (Array.isArray(point))
-            return point[1];
-        if (point && typeof point === 'object')
-            return point.y ?? null;
-        return null;
-    }
-}
-function isObject(item) {
-    return item && typeof item === 'object' && !Array.isArray(item);
 }
+/** Deep-merge clone (immutable). Arrays are replaced wholesale, not element-merged like `es-toolkit`'s `toMerged`. */
 function mergeDeep(target, source) {
-    const 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 (const key in source) {
-        if (source.hasOwnProperty(key)) {
-            // Recursively (deep) copy for nested objects, including arrays
-            newObject[key] = deepCopy(source[key]);
+    if (!isPlainObject(target) || !isPlainObject(source)) {
+        return target;
+    }
+    const output = cloneDeep(target);
+    for (const key of Object.keys(source)) {
+        const sourceValue = source[key];
+        if (isPlainObject(sourceValue)) {
+            output[key] = key in target ? mergeDeep(target[key], sourceValue) : cloneDeep(sourceValue);
+        }
+        else {
+            output[key] = sourceValue;
         }
     }
-    return newObject;
+    return output;
 }
 
 class ChartBarOptions extends ChartOptions {
@@ -614,19 +321,13 @@ class ChartBarOptions extends ChartOptions {
         const bar = {
             maxPointWidth: 20,
         };
-        if (stacked && !opposite) {
+        if (stacked || opposite) {
+            // `opposite` = diverging left/right bars (one series flipped to negative).
             bar.stacking = 'normal';
-            bar.events = {
-                hide() {
-                    ChartOptions.redrawWithHighestEdgesRounded(this.chart);
-                },
-                show() {
-                    ChartOptions.redrawWithHighestEdgesRounded(this.chart);
-                },
-            };
+            bar.borderRadius = { radius: '50%', scope: 'stack', where: 'end' };
         }
         else {
-            bar.borderRadius = 100;
+            bar.borderRadius = '50%';
         }
         const defaultBarOptions = {
             chart: {
@@ -663,37 +364,28 @@ class ChartBarOptions extends ChartOptions {
                 bar,
                 series: {
                     borderWidth: 0,
-                }
+                },
             },
         };
         return super.build(mergeDeep(defaultBarOptions, options), locale);
     }
     static configureBar(series, categories, options, opposite, color, labelDateFormat) {
         ChartOptions.configure(series, options, color, labelDateFormat);
-        if (categories && categories.length) {
+        if (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;
+            // Flip the first series negative so it stacks left of zero.
             negativeSerie.data = negativeSerie.data?.map((point) => {
                 if (point && isNaN(point)) {
-                    return {
-                        ...point,
-                        y: -Math.abs(point.y),
-                    };
+                    return { ...point, y: -Math.abs(point.y) };
                 }
-                else if (!isNaN(point)) {
+                if (!isNaN(point)) {
                     return -Math.abs(point);
                 }
                 return point;
             });
-            if (options.plotOptions?.series) {
-                options.plotOptions.series.stacking = 'normal';
-            }
             const yAxisLabels = options.yAxis.labels;
             if (yAxisLabels) {
                 yAxisLabels.formatter = function () {
@@ -702,7 +394,7 @@ class ChartBarOptions extends ChartOptions {
             }
             if (options.tooltip) {
                 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 ?? 0) + '%'}</b></div>`;
+                    return `<div style="font-size: 14px; color: #344563; margin: 6px 8px 0 8px;"><span style="color:${this.color};">●</span> ${this.series.name}: <b>${Math.abs(this.y ?? 0) + '%'}</b></div>`;
                 };
             }
         }
@@ -710,35 +402,27 @@ class ChartBarOptions extends ChartOptions {
 }
 
 class ChartBarComponent extends AbstractChartComponent {
-    categories = [];
-    opposite = false;
-    stacked = false;
-    series = [];
+    categories = input([], ...(ngDevMode ? [{ debugName: "categories" }] : []));
+    opposite = input(false, ...(ngDevMode ? [{ debugName: "opposite" }] : []));
+    stacked = input(false, ...(ngDevMode ? [{ debugName: "stacked" }] : []));
+    series = input([], ...(ngDevMode ? [{ debugName: "series" }] : []));
     initChart() {
-        if (this.series) {
-            const chartOptions = ChartBarOptions.buildBars(this.chartOptions, this.stacked, this.opposite, this.locale);
-            ChartBarOptions.configureBar(this.series, this.categories, chartOptions, this.opposite, this.color, this.labelDateFormat);
-            this.chart = new Chart(this.chartRef.nativeElement, chartOptions);
-            if (this.chart && this.stacked && !this.opposite) {
-                ChartOptions.redrawWithHighestEdgesRounded(this.chart);
-            }
-        }
+        const options = ChartBarOptions.buildBars(this.chartOptions(), this.stacked(), this.opposite(), this.locale());
+        ChartBarOptions.configureBar(this.series(), this.categories(), options, this.opposite(), this.color(), this.labelDateFormat());
+        this.chart = new Chart(this.hostElement, options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ChartBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ChartBarComponent, isStandalone: true, selector: "ap-chart-bar", inputs: { categories: "categories", opposite: "opposite", stacked: "stacked", series: "series" }, usesInheritance: true, ngImport: i0, template: "<div #chart></div>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: ChartBarComponent, isStandalone: true, selector: "ap-chart-bar", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, opposite: { classPropertyName: "opposite", publicName: "opposite", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: block" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ChartBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-chart-bar', standalone: true, template: "<div #chart></div>\n" }]
-        }], propDecorators: { categories: [{
-                type: Input
-            }], opposite: [{
-                type: Input
-            }], stacked: [{
-                type: Input
-            }], series: [{
-                type: Input
-            }] } });
+            args: [{
+                    selector: 'ap-chart-bar',
+                    template: '',
+                    host: { style: 'display: block' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }], opposite: [{ type: i0.Input, args: [{ isSignal: true, alias: "opposite", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }] } });
 
 class ChartColumnOptions extends ChartOptions {
     static buildColumn(options, stacked, locale) {
@@ -746,20 +430,11 @@ class ChartColumnOptions extends ChartOptions {
             borderWidth: 0,
             crisp: false,
             maxPointWidth: 20,
+            // Round only the value-side end; `scope: 'stack'` keeps middle segments square.
+            borderRadius: stacked ? { radius: '50%', scope: 'stack', where: 'end' } : '50%',
         };
         if (stacked) {
             column.stacking = 'normal';
-            column.events = {
-                hide() {
-                    ChartOptions.redrawWithHighestEdgesRounded(this.chart);
-                },
-                show() {
-                    ChartOptions.redrawWithHighestEdgesRounded(this.chart);
-                },
-            };
-        }
-        else {
-            column.borderRadius = 100;
         }
         const defaultColumnOptions = {
             chart: {
@@ -781,31 +456,27 @@ class ChartColumnOptions extends ChartOptions {
 }
 
 class ChartColumnComponent extends AbstractChartComponent {
-    series = [];
     stacked = input(false, ...(ngDevMode ? [{ debugName: "stacked" }] : []));
-    chartInitialized = new EventEmitter();
+    series = input([], ...(ngDevMode ? [{ debugName: "series" }] : []));
+    chartInitialized = output();
     initChart() {
-        if (this.series) {
-            const chartOptions = ChartColumnOptions.buildColumn(this.chartOptions, this.stacked(), this.locale);
-            ChartColumnOptions.configure(this.series, chartOptions, this.color, this.labelDateFormat);
-            this.chart = new Chart(this.chartRef.nativeElement, chartOptions);
-            if (this.chart && this.stacked()) {
-                ChartOptions.redrawWithHighestEdgesRounded(this.chart);
-            }
-            this.chartInitialized.emit(this.chart);
-        }
+        const options = ChartColumnOptions.buildColumn(this.chartOptions(), this.stacked(), this.locale());
+        ChartColumnOptions.configure(this.series(), options, this.color(), this.labelDateFormat());
+        this.chart = new Chart(this.hostElement, options);
+        this.chartInitialized.emit(this.chart);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ChartColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: ChartColumnComponent, isStandalone: true, selector: "ap-chart-column", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: false, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartInitialized: "chartInitialized" }, usesInheritance: true, ngImport: i0, template: "<div #chart></div>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: ChartColumnComponent, isStandalone: true, selector: "ap-chart-column", inputs: { stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartInitialized: "chartInitialized" }, host: { styleAttribute: "display: block" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ChartColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-chart-column', standalone: true, template: "<div #chart></div>\n" }]
-        }], propDecorators: { series: [{
-                type: Input
-            }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], chartInitialized: [{
-                type: Output
-            }] } });
+            args: [{
+                    selector: 'ap-chart-column',
+                    template: '',
+                    host: { style: 'display: block' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], chartInitialized: [{ type: i0.Output, args: ["chartInitialized"] }] } });
 
 const HEATMAP_CONSTANTS = {
     CHART_HEIGHT: 680,
@@ -816,7 +487,6 @@ const HEATMAP_CONSTANTS = {
     TOOLTIP_FONT_SIZE: '14px',
     LEGEND_SYMBOL_WIDTH: 300,
     LEGEND_SYMBOL_HEIGHT: 10,
-    TICK_INTERVAL: 3,
     DEFAULT_TICK_AMOUNT: 6,
     DEFAULT_MAX_VALUE: 3,
     MIN_VALUE: 0,
@@ -870,155 +540,83 @@ class ChartHeatmapOptions extends ChartOptions {
                 pointFormat: `<div style="border-bottom: 1px solid ${ChartColors.GREY_COLORS[10]}; padding: 0 8px 7px">` +
                     `<span style="font-size: ${HEATMAP_CONSTANTS.HEADER_FONT_SIZE}; color: ${ChartColors.GREY_COLORS[60]}">{point.tooltipHeaderLabel}</span></div>` +
                     `<div style="font-size: ${HEATMAP_CONSTANTS.TOOLTIP_FONT_SIZE}; color: ${ChartColors.GREY_COLORS[100]}; margin: 6px 8px 0 8px;">` +
-                    `<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.value}{point.unit}</b></div>`,
+                    `<span style="color:{point.color}">●</span> {series.name}: <b>{point.value}{point.unit}</b></div>`,
             },
             xAxis: {
-                labels: {
-                    formatter: this.createXAxisFormatter(),
-                },
                 lineWidth: 1,
                 tickWidth: 0,
                 visible: true,
             },
             yAxis: {
                 lineWidth: 0,
-                labels: {
-                    step: 3,
-                },
+                labels: { step: 3 },
                 reversed: true,
                 visible: true,
             },
         };
         return super.build(mergeDeep(defaultHeatmapOptions, options), locale);
     }
-    static createColorAxisFormatter(leastLabel, mostLabel) {
-        return function () {
-            if (this.value === this.axis.min) {
-                return leastLabel;
-            }
-            if (this.value === this.axis.max) {
-                return mostLabel;
-            }
-            return '';
-        };
-    }
-    static createXAxisFormatter() {
-        return function () {
-            return this.value.toString();
-        };
-    }
     static configureHeatmap(categoriesX, categoriesY, series, options, color, leastLabel, mostLabel, labelDateFormat) {
         super.configure(series, options, color, labelDateFormat);
-        this.setAxisCategories(options, categoriesX, categoriesY);
-        const points = series[0].data;
-        const maxValue = points.reduce((max, point) => Math.max(max, point.value), 0) || HEATMAP_CONSTANTS.DEFAULT_MAX_VALUE;
-        this.configureColorAxis(options, color, maxValue, leastLabel, mostLabel);
-        this.configureLegend(options);
-    }
-    static setAxisCategories(options, categoriesX, categoriesY) {
         if (categoriesX?.length) {
             options.xAxis.categories = categoriesX;
         }
         if (categoriesY?.length) {
             options.yAxis.categories = categoriesY;
         }
-    }
-    static configureColorAxis(options, color, maxValue, leastLabel, mostLabel) {
-        const tickPositions = this.buildTickPositions(maxValue);
+        const data = (series[0].data ?? []);
+        const maxValue = data.reduce((max, point) => Math.max(max, point.value ?? 0), 0) || HEATMAP_CONSTANTS.DEFAULT_MAX_VALUE;
         const labelsEnabled = !!(leastLabel && mostLabel);
+        // `tickAmount` spreads ticks evenly between min and max.
         options.colorAxis = {
-            ...(options.colorAxis || {}),
+            ...(options.colorAxis ?? {}),
             visible: labelsEnabled,
             min: HEATMAP_CONSTANTS.MIN_VALUE,
-            max: HEATMAP_CONSTANTS.DEFAULT_MAX_VALUE,
-            tickPositions,
+            max: maxValue,
+            tickAmount: HEATMAP_CONSTANTS.DEFAULT_TICK_AMOUNT,
             maxColor: ChartColors.getChartColors(color)[100],
         };
         if (labelsEnabled) {
             options.colorAxis.labels = {
-                ...(options.colorAxis?.labels || {}),
-                formatter: this.createColorAxisFormatter(leastLabel, mostLabel),
+                ...(options.colorAxis?.labels ?? {}),
+                formatter: createColorAxisFormatter(leastLabel, mostLabel),
             };
         }
     }
-    static configureLegend(options) {
-        options.legend = {
-            ...options.legend,
-            enabled: true,
-        };
-    }
-    static buildTickPositions(maxValue) {
-        const tickAmount = HEATMAP_CONSTANTS.DEFAULT_TICK_AMOUNT;
-        // Calculate the step between each tick
-        // We subtract 1 from tickAmount so that the last tick is exactly at maxValue
-        const step = maxValue / (tickAmount - 1);
-        // Generate an array of positions for the ticks
-        // Each position is calculated as i * step and rounded to 2 decimal places
-        return Array.from({ length: tickAmount }, (_, i) => parseFloat((i * step).toFixed(2)));
-    }
+}
+function createColorAxisFormatter(leastLabel, mostLabel) {
+    return function () {
+        if (this.value === this.axis.min)
+            return leastLabel;
+        if (this.value === this.axis.max)
+            return mostLabel;
+        return '';
+    };
 }
 
 class ChartHeatmapComponent extends AbstractChartComponent {
-    categoriesX = [];
-    categoriesY = [];
-    series = [];
+    categoriesX = input([], ...(ngDevMode ? [{ debugName: "categoriesX" }] : []));
+    categoriesY = input([], ...(ngDevMode ? [{ debugName: "categoriesY" }] : []));
+    series = input([], ...(ngDevMode ? [{ debugName: "series" }] : []));
     legendLabels = input(...(ngDevMode ? [undefined, { debugName: "legendLabels" }] : []));
-    legendLabelsEffect = effect(() => {
-        this.legendLabels();
-        this.initChart();
-    }, ...(ngDevMode ? [{ debugName: "legendLabelsEffect" }] : []));
     initChart() {
-        if (this.series && this.chartRef) {
-            const chartOptions = ChartHeatmapOptions.build(this.chartOptions, this.locale);
-            ChartHeatmapOptions.configureHeatmap(this.categoriesX, this.categoriesY, this.series, chartOptions, this.color, this.legendLabels()?.least, this.legendLabels()?.most, this.labelDateFormat);
-            mapChart(this.chartRef.nativeElement, chartOptions);
-        }
+        const labels = this.legendLabels();
+        const options = ChartHeatmapOptions.build(this.chartOptions(), this.locale());
+        ChartHeatmapOptions.configureHeatmap(this.categoriesX(), this.categoriesY(), this.series(), options, this.color(), labels?.least, labels?.most, this.labelDateFormat());
+        this.chart = mapChart(this.hostElement, options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ChartHeatmapComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: ChartHeatmapComponent, isStandalone: true, selector: "ap-chart-heatmap", inputs: { categoriesX: { classPropertyName: "categoriesX", publicName: "categoriesX", isSignal: false, isRequired: false, transformFunction: null }, categoriesY: { classPropertyName: "categoriesY", publicName: "categoriesY", isSignal: false, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: false, isRequired: false, transformFunction: null }, legendLabels: { classPropertyName: "legendLabels", publicName: "legendLabels", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div #chart></div>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: ChartHeatmapComponent, isStandalone: true, selector: "ap-chart-heatmap", inputs: { categoriesX: { classPropertyName: "categoriesX", publicName: "categoriesX", isSignal: true, isRequired: false, transformFunction: null }, categoriesY: { classPropertyName: "categoriesY", publicName: "categoriesY", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, legendLabels: { classPropertyName: "legendLabels", publicName: "legendLabels", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: block" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ChartHeatmapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-chart-heatmap', standalone: true, template: "<div #chart></div>\n" }]
-        }], propDecorators: { categoriesX: [{
-                type: Input
-            }], categoriesY: [{
-                type: Input
-            }], series: [{
-                type: Input
-            }], legendLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendLabels", required: false }] }] } });
-
-var ChartMetricType;
-(function (ChartMetricType) {
-    ChartMetricType[ChartMetricType["default"] = 0] = "default";
-    ChartMetricType[ChartMetricType["total"] = 1] = "total";
-})(ChartMetricType || (ChartMetricType = {}));
-class ChartMetric {
-    children;
-    name = '';
-    type;
-    value = 0;
-}
-
-class ChartMetricsListComponent {
-    metrics = [];
-    locale = 'en';
-    ChartMetricType = ChartMetricType;
-    digitsInfo = '1.0-1';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ChartMetricsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ChartMetricsListComponent, isStandalone: true, selector: "ap-chart-metrics-list", inputs: { metrics: "metrics", locale: "locale" }, ngImport: i0, template: "<mat-list>\n    @if (metrics) {\n        @for (metric of metrics; track metric; let i = $index) {\n            <mat-list-item [ngClass]=\"{ 'chart-metric-total': metric.type === ChartMetricType.total }\">\n                @if (!metric.children) {\n                    <div class=\"chart-metric-name metric-label\">\n                        {{ metric.name }}\n                    </div>\n                }\n                @if (metric.children) {\n                    <div class=\"chart-metric-name\">\n                        <span class=\"metric-label\">\n                            {{ metric.name }}\n                        </span>\n                        <span class=\"chart-metric-children\">\n                            @for (item of metric.children; track item) {\n                                <span>\n                                    <span class=\"child-label\">{{ item.name }}</span>\n                                    :\n                                    <span class=\"child-value\">{{ item.value }}</span>\n                                </span>\n                            }\n                        </span>\n                    </div>\n                }\n                <div class=\"chart-metric-value metric-label\">\n                    {{ metric.value | number: digitsInfo : locale }}\n                </div>\n            </mat-list-item>\n        }\n    }\n</mat-list>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[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=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[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-mdc-list-item{height:35px}.mat-mdc-list-item ::ng-deep .mdc-list-item__content{padding:0}.mat-mdc-list-item ::ng-deep .mdc-list-item__content .mdc-list-item__primary-text{display:flex;align-items:center}.mat-mdc-list-item:not(:last-child){border-bottom:1px solid var(--sys-border-color-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ChartMetricsListComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-chart-metrics-list', imports: [CommonModule, MatListModule, MatDividerModule], template: "<mat-list>\n    @if (metrics) {\n        @for (metric of metrics; track metric; let i = $index) {\n            <mat-list-item [ngClass]=\"{ 'chart-metric-total': metric.type === ChartMetricType.total }\">\n                @if (!metric.children) {\n                    <div class=\"chart-metric-name metric-label\">\n                        {{ metric.name }}\n                    </div>\n                }\n                @if (metric.children) {\n                    <div class=\"chart-metric-name\">\n                        <span class=\"metric-label\">\n                            {{ metric.name }}\n                        </span>\n                        <span class=\"chart-metric-children\">\n                            @for (item of metric.children; track item) {\n                                <span>\n                                    <span class=\"child-label\">{{ item.name }}</span>\n                                    :\n                                    <span class=\"child-value\">{{ item.value }}</span>\n                                </span>\n                            }\n                        </span>\n                    </div>\n                }\n                <div class=\"chart-metric-value metric-label\">\n                    {{ metric.value | number: digitsInfo : locale }}\n                </div>\n            </mat-list-item>\n        }\n    }\n</mat-list>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[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=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[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-mdc-list-item{height:35px}.mat-mdc-list-item ::ng-deep .mdc-list-item__content{padding:0}.mat-mdc-list-item ::ng-deep .mdc-list-item__content .mdc-list-item__primary-text{display:flex;align-items:center}.mat-mdc-list-item:not(:last-child){border-bottom:1px solid var(--sys-border-color-default)}\n"] }]
-        }], propDecorators: { metrics: [{
-                type: Input,
-                args: [{
-                        required: true,
-                    }]
-            }], locale: [{
-                type: Input
-            }] } });
+            args: [{
+                    selector: 'ap-chart-heatmap',
+                    template: '',
+                    host: { style: 'display: block' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { categoriesX: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoriesX", required: false }] }], categoriesY: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoriesY", required: false }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], legendLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendLabels", required: false }] }] } });
 
 class ChartMixedOptions extends ChartOptions {
     static buildMixed(options, singleDayEnabled, locale) {
@@ -1036,20 +634,13 @@ class ChartMixedOptions extends ChartOptions {
                         radius: singleDayEnabled ? 5 : 2,
                         symbol: 'circle',
                     },
-                    lineWidth: 4
+                    lineWidth: 4,
                 },
                 column: {
                     stacking: 'normal',
                     borderWidth: 0,
                     maxPointWidth: 20,
-                    events: {
-                        hide() {
-                            ChartOptions.redrawWithHighestEdgesRounded(this.chart);
-                        },
-                        show() {
-                            ChartOptions.redrawWithHighestEdgesRounded(this.chart);
-                        },
-                    },
+                    borderRadius: { radius: '50%', scope: 'stack', where: 'end' },
                 },
             },
             xAxis: {
@@ -1061,31 +652,32 @@ class ChartMixedOptions extends ChartOptions {
 }
 
 class ChartMixedComponent extends AbstractChartComponent {
-    series = [];
+    series = input([], ...(ngDevMode ? [{ debugName: "series" }] : []));
     initChart() {
-        if (this.series) {
-            const singleDayEnabled = this.series.find(serie => serie.type === 'spline')?.data?.length === 1;
-            const chartOptions = ChartMixedOptions.buildMixed(this.chartOptions, singleDayEnabled, this.locale);
-            ChartMixedOptions.configure(this.series, chartOptions, this.color, this.labelDateFormat);
-            this.chart = new Chart(this.chartRef.nativeElement, chartOptions);
-            if (this.chart) {
-                ChartOptions.redrawWithHighestEdgesRounded(this.chart);
-            }
-        }
+        const series = this.series();
+        const splineSeries = series.find(serie => serie.type === 'spline');
+        const singleDayEnabled = splineSeries?.data?.length === 1;
+        const options = ChartMixedOptions.buildMixed(this.chartOptions(), singleDayEnabled, this.locale());
+        ChartMixedOptions.configure(series, options, this.color(), this.labelDateFormat());
+        this.chart = new Chart(this.hostElement, options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ChartMixedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ChartMixedComponent, isStandalone: true, selector: "ap-chart-mixed", inputs: { series: "series" }, usesInheritance: true, ngImport: i0, template: "<div #chart></div>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: ChartMixedComponent, isStandalone: true, selector: "ap-chart-mixed", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: block" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ChartMixedComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-chart-mixed', standalone: true, template: "<div #chart></div>\n" }]
-        }], propDecorators: { series: [{
-                type: Input
-            }] } });
+            args: [{
+                    selector: 'ap-chart-mixed',
+                    template: '',
+                    host: { style: 'display: block' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }] } });
 
 const NAME_MAX_LENGTH = 30;
-const RIGHT_TO_LEFT_CHARACTERS = /[\p{Script=Arabic}\p{Script=Hebrew}\p{Script=Syriac}\p{Script=Thaana}\p{Script=Nko}\p{Script=Samaritan}\p{Script=Mandaic}]/u; // Hebrew, Arabic, and other RTL characters
-const RIGHT_TO_LEFT_EMBEDDING_CHARACTER = '\u202B'; // Right-to-left embedding character
+// RTL scripts (Hebrew, Arabic, …).
+const RIGHT_TO_LEFT_CHARACTERS = /[\p{Script=Arabic}\p{Script=Hebrew}\p{Script=Syriac}\p{Script=Thaana}\p{Script=Nko}\p{Script=Samaritan}\p{Script=Mandaic}]/u;
+const RIGHT_TO_LEFT_EMBEDDING_CHARACTER = '‫';
 class ChartPieOptions extends ChartOptions {
     static buildPie(options, innerLabels, metricFormat, locale) {
         const defaultPieOptions = {
@@ -1105,51 +697,14 @@ class ChartPieOptions extends ChartOptions {
                 },
                 series: {
                     allowPointSelect: !innerLabels,
-                    dataLabels: innerLabels
-                        ? {
-                            format: metricFormat === 'percentage' ? '{point.percentage:.1f}%' : '{point.y}',
-                            style: {
-                                fontSize: '16px',
-                                color: 'white',
-                                textOutline: '0',
-                            },
-                        }
-                        : {
-                            formatter: function () {
-                                const name = this.name.length > NAME_MAX_LENGTH
-                                    ? this.name.substring(0, NAME_MAX_LENGTH) + '...'
-                                    : this.name;
-                                const displayValue = metricFormat === 'percentage'
-                                    ? numberFormat(Math.round((this.percentage ?? 0) * 10) / 10, -1) + '%'
-                                    : numberFormat(this.y ?? 0, -1);
-                                // Add right-to-left embedding character only if the first character is a right-to-left character
-                                const prefix = RIGHT_TO_LEFT_CHARACTERS.test(this.name.charAt(0))
-                                    ? RIGHT_TO_LEFT_EMBEDDING_CHARACTER
-                                    : '';
-                                return prefix + name + ': ' + displayValue;
-                            },
-                            style: {
-                                fontSize: '12px',
-                                color: ChartColors.GREY_COLORS[60],
-                            },
-                        },
+                    dataLabels: innerLabels ? buildInnerLabels(metricFormat) : buildOuterLabels(metricFormat),
                     showInLegend: innerLabels,
-                    states: {
-                        inactive: {
-                            opacity: 1,
-                        },
-                    },
                 },
             },
             tooltip: {
                 outside: true,
             },
-            legend: innerLabels
-                ? {
-                    symbolHeight: 10,
-                    enabled: true,
-                }
-                : {},
+            legend: innerLabels ? { symbolHeight: 10, enabled: true } : {},
         };
         return super.build(mergeDeep(defaultPieOptions, options), locale);
     }
@@ -1158,159 +713,81 @@ class ChartPieOptions extends ChartOptions {
         if (innerLabels && options.legend) {
             options.legend.enabled = true;
         }
-        if (series && series.length > 0 && series[0]) {
-            options.colors = colors;
-            if (mouseEventEnabled && options.plotOptions?.pie) {
-                this.resetColors(series[0].data, innerLabels);
-                options.plotOptions.pie.point ??= {};
-                options.plotOptions.pie.point.events ??= {};
-                options.plotOptions.pie.events ??= {};
-                this.configureEnteringASlice(options, innerLabels);
-                this.configureLeavingASlice(options, innerLabels);
-                this.configureLeavingTheWholePie(options, innerLabels);
-            }
-        }
-    }
-    static resetColors(points, innerLabels) {
-        points?.forEach(point => {
-            delete point?.color;
-            if (innerLabels) {
-                delete point.dataLabels?.style?.color;
-            }
-        });
-    }
-    static configureEnteringASlice(options, innerLabels) {
-        if (options.plotOptions?.pie?.point?.events) {
-            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);
-            };
-        }
-    }
-    static configureLeavingASlice(options, innerLabels) {
-        if (options.plotOptions?.pie?.point?.events) {
-            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);
-                        }
-                    }
-                });
-            };
+        if (!series?.[0]) {
+            return;
         }
-    }
-    static configureLeavingTheWholePie(options, innerLabels) {
-        if (options.plotOptions?.pie?.events) {
-            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();
-            };
+        options.colors = colors;
+        // Otherwise we rely on Highcharts' default `states.inactive.opacity` to fade non-hovered slices.
+        if (!mouseEventEnabled) {
+            options.plotOptions ??= {};
+            options.plotOptions.pie ??= {};
+            options.plotOptions.pie.enableMouseTracking = false;
         }
     }
 }
+function buildInnerLabels(metricFormat) {
+    return {
+        format: metricFormat === 'percentage' ? '{point.percentage:.1f}%' : '{point.y}',
+        style: {
+            fontSize: '16px',
+            color: 'white',
+            textOutline: '0',
+        },
+    };
+}
+function buildOuterLabels(metricFormat) {
+    return {
+        formatter() {
+            const truncatedName = this.name.length > NAME_MAX_LENGTH ? this.name.substring(0, NAME_MAX_LENGTH) + '...' : this.name;
+            const displayValue = metricFormat === 'percentage' ? numberFormat(round(this.percentage ?? 0, 1), -1) + '%' : numberFormat(this.y ?? 0, -1);
+            const prefix = RIGHT_TO_LEFT_CHARACTERS.test(this.name.charAt(0)) ? RIGHT_TO_LEFT_EMBEDDING_CHARACTER : '';
+            return prefix + truncatedName + ': ' + displayValue;
+        },
+        style: {
+            fontSize: '12px',
+            color: ChartColors.GREY_COLORS[60],
+        },
+    };
+}
 
 class ChartPieComponent extends AbstractChartComponent {
-    innerLabels = false;
-    mouseEventEnabled = true;
-    series = [];
+    innerLabels = input(false, ...(ngDevMode ? [{ debugName: "innerLabels" }] : []));
+    mouseEventEnabled = input(true, ...(ngDevMode ? [{ debugName: "mouseEventEnabled" }] : []));
+    series = input([], ...(ngDevMode ? [{ debugName: "series" }] : []));
     colors = input(...(ngDevMode ? [undefined, { debugName: "colors" }] : []));
     metricFormat = input('percentage', ...(ngDevMode ? [{ debugName: "metricFormat" }] : []));
-    domReady = signal(false, ...(ngDevMode ? [{ debugName: "domReady" }] : []));
-    constructor() {
-        super();
-        effect(() => {
-            if (this.domReady()) {
-                this.colors();
-                this.initChart();
-            }
-        });
-        afterNextRender(() => {
-            this.domReady.set(true);
-        });
-    }
     initChart() {
-        if (this.series) {
-            const dataAvailable = this.series[0]?.data && this.series[0].data.length > 0;
-            const chartOptions = ChartPieOptions.buildPie(this.chartOptions, this.innerLabels, this.metricFormat(), this.locale);
-            // Add placeholder series when there's no data
-            const updatedSeries = dataAvailable
-                ? this.series
-                : [
-                    {
-                        type: 'pie',
-                        data: [
-                            {
-                                y: 1,
-                                dataLabels: {
-                                    enabled: false,
-                                },
-                            },
-                        ],
-                        enableMouseTracking: false,
-                    },
-                ];
-            let colors = this.colors();
-            if (!dataAvailable) {
-                colors = [ChartColors.GREY_COLORS[10]];
-            }
-            else if (!colors?.length) {
-                colors = ChartColors.getColors(this.series[0]?.data?.length ?? 0, this.color);
-            }
-            ChartPieOptions.configurePie(updatedSeries, chartOptions, colors, this.labelDateFormat, this.innerLabels, this.mouseEventEnabled);
-            this.chart = new Chart(this.chartRef.nativeElement, chartOptions);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ChartPieComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: ChartPieComponent, isStandalone: true, selector: "ap-chart-pie", inputs: { innerLabels: { classPropertyName: "innerLabels", publicName: "innerLabels", isSignal: false, isRequired: false, transformFunction: null }, mouseEventEnabled: { classPropertyName: "mouseEventEnabled", publicName: "mouseEventEnabled", isSignal: false, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: false, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, metricFormat: { classPropertyName: "metricFormat", publicName: "metricFormat", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div #chart></div>\n" });
+        const series = this.series();
+        const innerLabels = this.innerLabels();
+        const dataAvailable = !!series[0]?.data?.length;
+        const options = ChartPieOptions.buildPie(this.chartOptions(), innerLabels, this.metricFormat(), this.locale());
+        const effectiveSeries = dataAvailable
+            ? series
+            : [
+                {
+                    type: 'pie',
+                    data: [{ y: 1, dataLabels: { enabled: false } }],
+                    enableMouseTracking: false,
+                },
+            ];
+        const effectiveColors = !dataAvailable
+            ? [ChartColors.GREY_COLORS[10]]
+            : (this.colors() ?? ChartColors.getColors(series[0]?.data?.length ?? 0, this.color()));
+        ChartPieOptions.configurePie(effectiveSeries, options, effectiveColors, this.labelDateFormat(), innerLabels, this.mouseEventEnabled());
+        this.chart = new Chart(this.hostElement, options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ChartPieComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: ChartPieComponent, isStandalone: true, selector: "ap-chart-pie", inputs: { innerLabels: { classPropertyName: "innerLabels", publicName: "innerLabels", isSignal: true, isRequired: false, transformFunction: null }, mouseEventEnabled: { classPropertyName: "mouseEventEnabled", publicName: "mouseEventEnabled", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, metricFormat: { classPropertyName: "metricFormat", publicName: "metricFormat", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: block" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ChartPieComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-chart-pie', standalone: true, template: "<div #chart></div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { innerLabels: [{
-                type: Input
-            }], mouseEventEnabled: [{
-                type: Input
-            }], series: [{
-                type: Input
-            }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], metricFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricFormat", required: false }] }] } });
+            args: [{
+                    selector: 'ap-chart-pie',
+                    template: '',
+                    host: { style: 'display: block' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { innerLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "innerLabels", required: false }] }], mouseEventEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "mouseEventEnabled", required: false }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], metricFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricFormat", required: false }] }] } });
 
 class ChartSplineOptions extends ChartOptions {
     static buildSpline(options, singleDayEnabled, locale) {
@@ -1337,36 +814,32 @@ class ChartSplineOptions extends ChartOptions {
 }
 
 class ChartSplineComponent extends AbstractChartComponent {
-    series = [];
-    chartInitialized = new EventEmitter();
+    series = input([], ...(ngDevMode ? [{ debugName: "series" }] : []));
+    chartInitialized = output();
     initChart() {
-        if (this.series) {
-            const chartOptions = ChartSplineOptions.buildSpline(this.chartOptions, this.series[0]?.data?.length === 1, this.locale);
-            ChartSplineOptions.configure(this.series, chartOptions, this.color, this.labelDateFormat);
-            this.chart = new Chart(this.chartRef.nativeElement, chartOptions);
-            this.chartInitialized.emit(this.chart);
-        }
+        const series = this.series();
+        const singleDayEnabled = series[0]?.data?.length === 1;
+        const options = ChartSplineOptions.buildSpline(this.chartOptions(), singleDayEnabled, this.locale());
+        ChartSplineOptions.configure(series, options, this.color(), this.labelDateFormat());
+        this.chart = new Chart(this.hostElement, options);
+        this.chartInitialized.emit(this.chart);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ChartSplineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ChartSplineComponent, isStandalone: true, selector: "ap-chart-spline", inputs: { series: "series" }, outputs: { chartInitialized: "chartInitialized" }, usesInheritance: true, ngImport: i0, template: "<div #chart></div>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: ChartSplineComponent, isStandalone: true, selector: "ap-chart-spline", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartInitialized: "chartInitialized" }, host: { styleAttribute: "display: block" }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ChartSplineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-chart-spline', standalone: true, template: "<div #chart></div>\n" }]
-        }], propDecorators: { series: [{
-                type: Input
-            }], chartInitialized: [{
-                type: Output
-            }] } });
-
-/*
- * Public API Surface of ui-charts
- */
-borderRadiusPlugin(Highcharts);
+            args: [{
+                    selector: 'ap-chart-spline',
+                    template: '',
+                    host: { style: 'display: block' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], chartInitialized: [{ type: i0.Output, args: ["chartInitialized"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractChartComponent, ChartBarComponent, ChartColor, ChartColors, ChartColumnComponent, ChartHeatmapComponent, ChartMetric, ChartMetricType, ChartMetricsListComponent, ChartMixedComponent, ChartOptions, ChartPieComponent, ChartSplineComponent, borderRadiusPlugin, mergeDeep };
+export { AbstractChartComponent, ChartBarComponent, ChartColor, ChartColors, ChartColumnComponent, ChartHeatmapComponent, ChartMixedComponent, ChartOptions, ChartPieComponent, ChartSplineComponent, mergeDeep };
 //# sourceMappingURL=agorapulse-ui-charts.mjs.map