ng-prime-tools 1.0.94 → 1.0.96

package/fesm2022/ng-prime-tools.mjs

@@ -4093,6 +4093,228 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+const PT_CHART_DEFAULT_WIDTH = '100%';
+const PT_CHART_DEFAULT_HEIGHT = '100%';
+const PT_CHART_DEFAULT_RESIZE_DELAY = 100;
+const PT_CHART_DEFAULT_ANIMATION = {
+    duration: 450,
+    easing: 'easeOutQuart',
+};
+const PT_CHART_DEFAULT_LAYOUT_PADDING = {
+    top: 12,
+    right: 12,
+    bottom: 8,
+    left: 12,
+};
+const PT_CHART_LEGEND_LABELS = {
+    usePointStyle: true,
+    pointStyle: 'circle',
+    boxWidth: 9,
+    boxHeight: 9,
+    padding: 18,
+};
+const PT_CHART_TOOLTIP_STYLE = {
+    borderWidth: 1,
+    cornerRadius: 10,
+    caretSize: 7,
+    caretPadding: 8,
+    padding: 12,
+    boxPadding: 6,
+    usePointStyle: true,
+    displayColors: true,
+};
+const PT_CHART_FONT_SIZES = {
+    legend: 12,
+    title: 16,
+    tooltipTitle: 13,
+    tooltipBody: 12,
+    axisTicks: 11,
+    axisTitle: 12,
+    dataLabel: 11,
+};
+const PT_CHART_FONT_WEIGHTS = {
+    regular: 400,
+    medium: 500,
+    semiBold: 600,
+    bold: 'bold',
+};
+const PT_CHART_CARTESIAN_TYPES = [
+    'bar',
+    'line',
+    'scatter',
+    'bubble',
+];
+const PT_CHART_CIRCULAR_TYPES = [
+    'pie',
+    'doughnut',
+    'polarArea',
+];
+const buildAxisTickFont = (fontFamily) => ({
+    family: fontFamily,
+    size: PT_CHART_FONT_SIZES.axisTicks,
+    weight: PT_CHART_FONT_WEIGHTS.regular,
+});
+const isCartesianChartType = (chartType) => PT_CHART_CARTESIAN_TYPES.includes(chartType);
+const isCircularChartType = (chartType) => PT_CHART_CIRCULAR_TYPES.includes(chartType);
+const createDefaultChartOptions = (chartType, theme, config) => {
+    const isCartesianChart = isCartesianChartType(chartType);
+    const isCircularChart = isCircularChartType(chartType);
+    const options = {
+        responsive: true,
+        maintainAspectRatio: false,
+        resizeDelay: PT_CHART_DEFAULT_RESIZE_DELAY,
+        interaction: {
+            intersect: false,
+            mode: isCartesianChart ? 'index' : 'nearest',
+        },
+        animation: PT_CHART_DEFAULT_ANIMATION,
+        layout: {
+            padding: PT_CHART_DEFAULT_LAYOUT_PADDING,
+        },
+        plugins: {
+            legend: {
+                display: true,
+                position: 'bottom',
+                align: 'center',
+                labels: {
+                    color: theme.textColor,
+                    ...PT_CHART_LEGEND_LABELS,
+                    font: {
+                        family: config.fontFamily,
+                        size: PT_CHART_FONT_SIZES.legend,
+                        weight: PT_CHART_FONT_WEIGHTS.medium,
+                    },
+                },
+            },
+            title: {
+                display: Boolean(config.medianTitle?.trim()),
+                text: config.medianTitle?.trim() || '',
+                align: 'start',
+                color: theme.textColor,
+                padding: {
+                    top: 4,
+                    bottom: 18,
+                },
+                font: {
+                    family: config.fontFamily,
+                    size: PT_CHART_FONT_SIZES.title,
+                    weight: PT_CHART_FONT_WEIGHTS.semiBold,
+                },
+            },
+            tooltip: {
+                enabled: true,
+                backgroundColor: theme.tooltipBackgroundColor,
+                titleColor: theme.tooltipTextColor,
+                bodyColor: theme.tooltipTextColor,
+                footerColor: theme.secondaryTextColor,
+                borderColor: theme.tooltipBorderColor,
+                ...PT_CHART_TOOLTIP_STYLE,
+                titleFont: {
+                    family: config.fontFamily,
+                    size: PT_CHART_FONT_SIZES.tooltipTitle,
+                    weight: PT_CHART_FONT_WEIGHTS.semiBold,
+                },
+                bodyFont: {
+                    family: config.fontFamily,
+                    size: PT_CHART_FONT_SIZES.tooltipBody,
+                    weight: PT_CHART_FONT_WEIGHTS.regular,
+                },
+                callbacks: {
+                    label: (context) => config.tooltipLabel(context, isCircularChart),
+                },
+            },
+            datalabels: {
+                display: isCircularChart,
+                color: theme.textColor,
+                anchor: isCircularChart ? 'center' : 'end',
+                align: isCircularChart ? 'center' : 'top',
+                clamp: true,
+                clip: false,
+                formatter: (value, context) => config.dataLabel(value, context, isCircularChart),
+                font: {
+                    family: config.fontFamily,
+                    size: PT_CHART_FONT_SIZES.dataLabel,
+                    weight: PT_CHART_FONT_WEIGHTS.bold,
+                },
+                textStrokeColor: theme.surfaceColor,
+                textStrokeWidth: isCircularChart ? 2 : 0,
+            },
+        },
+    };
+    if (isCartesianChart) {
+        options.scales = {
+            x: {
+                display: true,
+                beginAtZero: false,
+                border: {
+                    display: false,
+                },
+                grid: {
+                    display: false,
+                    color: theme.gridColor,
+                    drawTicks: false,
+                },
+                ticks: {
+                    color: theme.secondaryTextColor,
+                    padding: 10,
+                    maxRotation: 0,
+                    autoSkip: true,
+                    font: buildAxisTickFont(config.fontFamily),
+                },
+                title: {
+                    display: Boolean(config.xAxisTitle?.trim()),
+                    text: config.xAxisTitle?.trim() || '',
+                    color: theme.textColor,
+                    padding: {
+                        top: 12,
+                    },
+                    font: {
+                        family: config.fontFamily,
+                        size: PT_CHART_FONT_SIZES.axisTitle,
+                        weight: PT_CHART_FONT_WEIGHTS.semiBold,
+                    },
+                },
+            },
+            y: {
+                display: true,
+                beginAtZero: config.yAxisBeginAtZero ?? true,
+                min: config.yAxisMin,
+                max: config.yAxisMax,
+                border: {
+                    display: false,
+                },
+                grid: {
+                    display: true,
+                    color: theme.gridColor,
+                    drawTicks: false,
+                    lineWidth: 1,
+                },
+                ticks: {
+                    color: theme.secondaryTextColor,
+                    padding: 10,
+                    stepSize: config.yAxisStepSize,
+                    font: buildAxisTickFont(config.fontFamily),
+                },
+                title: {
+                    display: Boolean(config.yAxisTitle?.trim()),
+                    text: config.yAxisTitle?.trim() || '',
+                    color: theme.textColor,
+                    padding: {
+                        bottom: 12,
+                    },
+                    font: {
+                        family: config.fontFamily,
+                        size: PT_CHART_FONT_SIZES.axisTitle,
+                        weight: PT_CHART_FONT_WEIGHTS.semiBold,
+                    },
+                },
+            },
+        };
+    }
+    return options;
+};
+
+// ng-prime-tools/projects/ng-prime-tools/src/lib/pt-chart/pt-chart.component.ts
 class PTChartComponent {
     constructor(document) {
         this.document = document;
@@ -4107,6 +4329,7 @@ class PTChartComponent {
         this.initializeChart();
         this.observeContainerResize();
         this.observeThemeChanges();
+        this.scheduleChartResize();
     }
     ngOnChanges(changes) {
         if (this.viewInitialized && changes['chartConfig'] && this.chartConfig) {
@@ -4121,8 +4344,8 @@ class PTChartComponent {
     }
     get chartContainerStyle() {
         return {
-            width: this.chartConfig?.chartWidth?.trim() || '100%',
-            height: this.chartConfig?.chartHeight?.trim() || '100%',
+            width: this.chartConfig?.chartWidth?.trim() || PT_CHART_DEFAULT_WIDTH,
+            height: this.chartConfig?.chartHeight?.trim() || PT_CHART_DEFAULT_HEIGHT,
         };
     }
     get chartAriaLabel() {
@@ -4137,6 +4360,7 @@ class PTChartComponent {
         const configuration = this.buildChartConfiguration();
         this.chart = new Chart(canvas, configuration);
         this.currentChartType = this.chartConfig.type;
+        this.scheduleChartResize();
     }
     updateChart() {
         if (!this.viewInitialized || !this.chartConfig) {
@@ -4147,10 +4371,6 @@ class PTChartComponent {
             return;
         }
         const requestedType = this.chartConfig.type;
-        /*
-         * Chart.js does not safely support changing the root chart type
-         * dynamically. Recreate the chart when the requested type changes.
-         */
         if (this.currentChartType !== requestedType) {
             this.initializeChart();
             return;
@@ -4161,6 +4381,7 @@ class PTChartComponent {
             this.chart.options = configuration.options;
         }
         this.chart.update();
+        this.scheduleChartResize();
     }
     buildChartConfiguration() {
         const chartType = this.chartConfig.type;
@@ -4174,192 +4395,18 @@ class PTChartComponent {
         };
     }
     buildDefaultOptions(chartType, theme) {
-        const isCartesianChart = this.isCartesianChart(chartType);
-        const isCircularChart = this.isCircularChart(chartType);
-        const options = {
-            responsive: true,
-            maintainAspectRatio: false,
-            resizeDelay: 100,
-            interaction: {
-                intersect: false,
-                mode: isCartesianChart ? 'index' : 'nearest',
-            },
-            animation: {
-                duration: 450,
-                easing: 'easeOutQuart',
-            },
-            layout: {
-                padding: {
-                    top: 12,
-                    right: 12,
-                    bottom: 8,
-                    left: 12,
-                },
-            },
-            plugins: {
-                legend: {
-                    display: true,
-                    position: 'bottom',
-                    align: 'center',
-                    labels: {
-                        color: theme.textColor,
-                        usePointStyle: true,
-                        pointStyle: 'circle',
-                        boxWidth: 9,
-                        boxHeight: 9,
-                        padding: 18,
-                        font: {
-                            family: this.resolveFontFamily(),
-                            size: 12,
-                            weight: 500,
-                        },
-                    },
-                },
-                title: {
-                    display: Boolean(this.chartConfig.medianTitle?.trim()),
-                    text: this.chartConfig.medianTitle?.trim() || '',
-                    align: 'start',
-                    color: theme.textColor,
-                    padding: {
-                        top: 4,
-                        bottom: 18,
-                    },
-                    font: {
-                        family: this.resolveFontFamily(),
-                        size: 16,
-                        weight: 600,
-                    },
-                },
-                tooltip: {
-                    enabled: true,
-                    backgroundColor: theme.tooltipBackgroundColor,
-                    titleColor: theme.tooltipTextColor,
-                    bodyColor: theme.tooltipTextColor,
-                    footerColor: theme.secondaryTextColor,
-                    borderColor: theme.tooltipBorderColor,
-                    borderWidth: 1,
-                    cornerRadius: 10,
-                    caretSize: 7,
-                    caretPadding: 8,
-                    padding: 12,
-                    boxPadding: 6,
-                    usePointStyle: true,
-                    displayColors: true,
-                    titleFont: {
-                        family: this.resolveFontFamily(),
-                        size: 13,
-                        weight: 600,
-                    },
-                    bodyFont: {
-                        family: this.resolveFontFamily(),
-                        size: 12,
-                        weight: 400,
-                    },
-                    callbacks: {
-                        label: (context) => {
-                            return this.buildTooltipLabel(context, isCircularChart);
-                        },
-                    },
-                },
-                datalabels: {
-                    display: isCircularChart,
-                    color: theme.textColor,
-                    anchor: isCircularChart ? 'center' : 'end',
-                    align: isCircularChart ? 'center' : 'top',
-                    clamp: true,
-                    clip: false,
-                    formatter: (value, context) => {
-                        return this.formatDataLabel(value, context.chart, context.datasetIndex, isCircularChart);
-                    },
-                    font: {
-                        family: this.resolveFontFamily(),
-                        size: 11,
-                        weight: 'bold',
-                    },
-                    textStrokeColor: theme.surfaceColor,
-                    textStrokeWidth: isCircularChart ? 2 : 0,
-                },
-            },
-        };
-        if (isCartesianChart) {
-            options.scales = this.buildDefaultScales(theme);
-        }
-        return options;
-    }
-    buildDefaultScales(theme) {
-        const commonTickFont = {
-            family: this.resolveFontFamily(),
-            size: 11,
-            weight: 400,
-        };
-        return {
-            x: {
-                display: true,
-                beginAtZero: false,
-                border: {
-                    display: false,
-                },
-                grid: {
-                    display: false,
-                    color: theme.gridColor,
-                    drawTicks: false,
-                },
-                ticks: {
-                    color: theme.secondaryTextColor,
-                    padding: 10,
-                    maxRotation: 0,
-                    autoSkip: true,
-                    font: commonTickFont,
-                },
-                title: {
-                    display: Boolean(this.chartConfig.xAxisTitle?.trim()),
-                    text: this.chartConfig.xAxisTitle?.trim() || '',
-                    color: theme.textColor,
-                    padding: {
-                        top: 12,
-                    },
-                    font: {
-                        family: this.resolveFontFamily(),
-                        size: 12,
-                        weight: 600,
-                    },
-                },
-            },
-            y: {
-                display: true,
-                beginAtZero: this.chartConfig.scales?.y?.ticks?.beginAtZero ?? true,
-                min: this.chartConfig.scales?.y?.min,
-                max: this.chartConfig.scales?.y?.max,
-                border: {
-                    display: false,
-                },
-                grid: {
-                    display: true,
-                    color: theme.gridColor,
-                    drawTicks: false,
-                    lineWidth: 1,
-                },
-                ticks: {
-                    color: theme.secondaryTextColor,
-                    padding: 10,
-                    stepSize: this.chartConfig.scales?.y?.ticks?.stepSize,
-                    font: commonTickFont,
-                },
-                title: {
-                    display: Boolean(this.chartConfig.yAxisTitle?.trim()),
-                    text: this.chartConfig.yAxisTitle?.trim() || '',
-                    color: theme.textColor,
-                    padding: {
-                        bottom: 12,
-                    },
-                    font: {
-                        family: this.resolveFontFamily(),
-                        size: 12,
-                        weight: 600,
-                    },
-                },
-            },
-        };
+        return createDefaultChartOptions(chartType, theme, {
+            medianTitle: this.chartConfig.medianTitle,
+            xAxisTitle: this.chartConfig.xAxisTitle,
+            yAxisTitle: this.chartConfig.yAxisTitle,
+            yAxisBeginAtZero: this.chartConfig.scales?.y?.ticks?.beginAtZero,
+            yAxisMin: this.chartConfig.scales?.y?.min,
+            yAxisMax: this.chartConfig.scales?.y?.max,
+            yAxisStepSize: this.chartConfig.scales?.y?.ticks?.stepSize,
+            fontFamily: this.resolveFontFamily(),
+            tooltipLabel: (context, includePercentage) => this.buildTooltipLabel(context, includePercentage),
+            dataLabel: (value, context, isCircularChart) => this.formatDataLabel(value, context.chart, context.datasetIndex, isCircularChart),
+        });
     }
     mergeChartOptions(defaultOptions, consumerOptions, chartType) {
         const defaultPlugins = defaultOptions.plugins;
@@ -4395,10 +4442,6 @@ class PTChartComponent {
                     labels: {
                         ...defaultPlugins?.legend?.labels,
                         ...consumerPlugins?.legend?.labels,
-                        /*
-                         * Chart.js font options may be scriptable callbacks.
-                         * Keep the complete consumer value rather than spreading it.
-                         */
                         font: consumerPlugins?.legend?.labels?.font ??
                             defaultPlugins?.legend?.labels?.font,
                     },
@@ -4428,7 +4471,7 @@ class PTChartComponent {
                 },
             },
         };
-        if (this.isCartesianChart(chartType)) {
+        if (isCartesianChartType(chartType)) {
             mergedOptions.scales = this.mergeScales(defaultOptions.scales, consumerOptions.scales);
         }
         else if (consumerOptions.scales) {
@@ -4552,14 +4595,34 @@ class PTChartComponent {
         if (typeof ResizeObserver === 'undefined') {
             return;
         }
-        const container = this.canvasRef.nativeElement.parentElement;
-        if (!container) {
+        const canvas = this.canvasRef.nativeElement;
+        const chartContainer = canvas.closest('.pt-chart');
+        const canvasContainer = canvas.parentElement;
+        const hostElement = chartContainer?.parentElement;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.scheduleChartResize();
+        });
+        if (chartContainer) {
+            this.resizeObserver.observe(chartContainer);
+        }
+        if (canvasContainer) {
+            this.resizeObserver.observe(canvasContainer);
+        }
+        if (hostElement) {
+            this.resizeObserver.observe(hostElement);
+        }
+    }
+    scheduleChartResize() {
+        if (!this.chart) {
             return;
         }
-        this.resizeObserver = new ResizeObserver(() => {
-            this.chart?.resize();
+        requestAnimationFrame(() => {
+            if (!this.chart) {
+                return;
+            }
+            this.chart.resize();
+            this.chart.update('none');
         });
-        this.resizeObserver.observe(container);
     }
     observeThemeChanges() {
         const documentElement = this.document.documentElement;
@@ -4592,6 +4655,7 @@ class PTChartComponent {
             this.chart.options = configuration.options;
         }
         this.chart.update('none');
+        this.scheduleChartResize();
     }
     resolveTheme() {
         const rootStyles = getComputedStyle(this.document.documentElement);
@@ -4664,28 +4728,17 @@ class PTChartComponent {
             ? value
             : {};
     }
-    isCircularChart(chartType) {
-        return (chartType === 'pie' ||
-            chartType === 'doughnut' ||
-            chartType === 'polarArea');
-    }
-    isCartesianChart(chartType) {
-        return (chartType === 'bar' ||
-            chartType === 'line' ||
-            chartType === 'scatter' ||
-            chartType === 'bubble');
-    }
     destroyChart() {
         this.chart?.destroy();
         this.chart = undefined;
         this.currentChartType = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTChartComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: PTChartComponent, isStandalone: false, selector: "pt-chart", inputs: { chartConfig: "chartConfig" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["chartCanvas"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"pt-chart\"\n  [ngStyle]=\"chartContainerStyle\"\n  role=\"img\"\n  [attr.aria-label]=\"chartAriaLabel\"\n>\n  <div class=\"pt-chart__canvas-container\">\n    <canvas #chartCanvas></canvas>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;height:100%;min-height:0}.pt-chart{position:relative;display:block;box-sizing:border-box;min-width:0;min-height:18rem;overflow:hidden;color:var(--p-text-color, var(--text-color, #0f172a));background:linear-gradient(145deg,color-mix(in srgb,var(--p-content-background, var(--surface-card, #ffffff)) 97%,var(--p-primary-color, #3b82f6) 3%),var(--p-content-background, var(--surface-card, #ffffff)));border:1px solid var(--p-content-border-color, var(--surface-border, rgba(15, 23, 42, .1)));border-radius:var(--p-content-border-radius, .875rem);box-shadow:0 1px 2px #0f172a0a,0 8px 24px #0f172a0d;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}.pt-chart:before{position:absolute;top:0;right:12%;left:12%;z-index:0;height:1px;pointer-events:none;content:\"\";background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--p-primary-color, #3b82f6) 45%,transparent),transparent)}.pt-chart__canvas-container{position:relative;z-index:1;width:100%;height:100%;min-width:0;min-height:inherit;padding:clamp(.75rem,1.5vw,1.25rem);box-sizing:border-box}.pt-chart canvas{display:block;width:100%!important;max-width:100%;height:100%!important;max-height:100%;outline:none}.pt-chart:focus-within{border-color:var(--p-primary-color, #3b82f6);box-shadow:0 0 0 3px color-mix(in srgb,var(--p-primary-color, #3b82f6) 18%,transparent),0 10px 30px #0f172a14}:host-context(.p-dark) .pt-chart,:host-context(.dark) .pt-chart,:host-context(.dark-mode) .pt-chart,:host-context([data-theme=\"dark\"]) .pt-chart{background:linear-gradient(145deg,color-mix(in srgb,var(--p-content-background, var(--surface-card, #0f172a)) 96%,var(--p-primary-color, #60a5fa) 4%),var(--p-content-background, var(--surface-card, #0f172a)));border-color:var( --p-content-border-color, var(--surface-border, rgba(148, 163, 184, .2)) );box-shadow:0 1px 2px #0000002e,0 12px 32px #00000038}@media(prefers-color-scheme:dark){.pt-chart{box-shadow:0 1px 2px #0000002e,0 12px 32px #0000002e}}@media(max-width:768px){.pt-chart{min-height:16rem;border-radius:.75rem}.pt-chart__canvas-container{padding:.75rem .625rem}}@media(max-width:480px){.pt-chart{min-height:15rem}.pt-chart__canvas-container{padding:.625rem .375rem}}@media(prefers-reduced-motion:reduce){.pt-chart{transition:none}}@media print{.pt-chart{overflow:visible;background:#fff;border:1px solid #d1d5db;box-shadow:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: PTChartComponent, isStandalone: false, selector: "pt-chart", inputs: { chartConfig: "chartConfig" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["chartCanvas"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"pt-chart\"\n  [ngStyle]=\"chartContainerStyle\"\n  role=\"img\"\n  [attr.aria-label]=\"chartAriaLabel\"\n>\n  <div class=\"pt-chart__canvas-container\">\n    <canvas #chartCanvas></canvas>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0}.pt-chart{position:relative;display:block;width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box;overflow:hidden;color:var(--p-text-color, var(--text-color, #0f172a));background:linear-gradient(145deg,color-mix(in srgb,var(--p-content-background, var(--surface-card, #ffffff)) 97%,var(--p-primary-color, #3b82f6) 3%),var(--p-content-background, var(--surface-card, #ffffff)));border:1px solid var(--p-content-border-color, var(--surface-border, rgba(15, 23, 42, .1)));border-radius:var(--p-content-border-radius, .875rem);box-shadow:0 1px 2px #0f172a0a,0 8px 24px #0f172a0d;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}.pt-chart:before{position:absolute;top:0;right:12%;left:12%;z-index:0;height:1px;pointer-events:none;content:\"\";background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--p-primary-color, #3b82f6) 45%,transparent),transparent)}.pt-chart__canvas-container{position:relative;z-index:1;width:100%;height:100%;min-width:0;min-height:0;padding:clamp(.75rem,1.5vw,1.25rem);box-sizing:border-box}.pt-chart canvas{display:block;width:100%!important;height:100%!important;max-width:none;max-height:none;outline:none}.pt-chart:focus-within{border-color:var(--p-primary-color, #3b82f6);box-shadow:0 0 0 3px color-mix(in srgb,var(--p-primary-color, #3b82f6) 18%,transparent),0 10px 30px #0f172a14}:host-context(.p-dark) .pt-chart,:host-context(.dark) .pt-chart,:host-context(.dark-mode) .pt-chart,:host-context([data-theme=\"dark\"]) .pt-chart{background:linear-gradient(145deg,color-mix(in srgb,var(--p-content-background, var(--surface-card, #0f172a)) 96%,var(--p-primary-color, #60a5fa) 4%),var(--p-content-background, var(--surface-card, #0f172a)));border-color:var( --p-content-border-color, var(--surface-border, rgba(148, 163, 184, .2)) );box-shadow:0 1px 2px #0000002e,0 12px 32px #00000038}@media(max-width:768px){.pt-chart{border-radius:.75rem}.pt-chart__canvas-container{padding:.75rem .625rem}}@media(max-width:480px){.pt-chart__canvas-container{padding:.625rem .375rem}}@media(prefers-reduced-motion:reduce){.pt-chart{transition:none}}@media print{.pt-chart{overflow:visible;background:#fff;border:1px solid #d1d5db;box-shadow:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-chart', standalone: false, template: "<div\n  class=\"pt-chart\"\n  [ngStyle]=\"chartContainerStyle\"\n  role=\"img\"\n  [attr.aria-label]=\"chartAriaLabel\"\n>\n  <div class=\"pt-chart__canvas-container\">\n    <canvas #chartCanvas></canvas>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;height:100%;min-height:0}.pt-chart{position:relative;display:block;box-sizing:border-box;min-width:0;min-height:18rem;overflow:hidden;color:var(--p-text-color, var(--text-color, #0f172a));background:linear-gradient(145deg,color-mix(in srgb,var(--p-content-background, var(--surface-card, #ffffff)) 97%,var(--p-primary-color, #3b82f6) 3%),var(--p-content-background, var(--surface-card, #ffffff)));border:1px solid var(--p-content-border-color, var(--surface-border, rgba(15, 23, 42, .1)));border-radius:var(--p-content-border-radius, .875rem);box-shadow:0 1px 2px #0f172a0a,0 8px 24px #0f172a0d;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}.pt-chart:before{position:absolute;top:0;right:12%;left:12%;z-index:0;height:1px;pointer-events:none;content:\"\";background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--p-primary-color, #3b82f6) 45%,transparent),transparent)}.pt-chart__canvas-container{position:relative;z-index:1;width:100%;height:100%;min-width:0;min-height:inherit;padding:clamp(.75rem,1.5vw,1.25rem);box-sizing:border-box}.pt-chart canvas{display:block;width:100%!important;max-width:100%;height:100%!important;max-height:100%;outline:none}.pt-chart:focus-within{border-color:var(--p-primary-color, #3b82f6);box-shadow:0 0 0 3px color-mix(in srgb,var(--p-primary-color, #3b82f6) 18%,transparent),0 10px 30px #0f172a14}:host-context(.p-dark) .pt-chart,:host-context(.dark) .pt-chart,:host-context(.dark-mode) .pt-chart,:host-context([data-theme=\"dark\"]) .pt-chart{background:linear-gradient(145deg,color-mix(in srgb,var(--p-content-background, var(--surface-card, #0f172a)) 96%,var(--p-primary-color, #60a5fa) 4%),var(--p-content-background, var(--surface-card, #0f172a)));border-color:var( --p-content-border-color, var(--surface-border, rgba(148, 163, 184, .2)) );box-shadow:0 1px 2px #0000002e,0 12px 32px #00000038}@media(prefers-color-scheme:dark){.pt-chart{box-shadow:0 1px 2px #0000002e,0 12px 32px #0000002e}}@media(max-width:768px){.pt-chart{min-height:16rem;border-radius:.75rem}.pt-chart__canvas-container{padding:.75rem .625rem}}@media(max-width:480px){.pt-chart{min-height:15rem}.pt-chart__canvas-container{padding:.625rem .375rem}}@media(prefers-reduced-motion:reduce){.pt-chart{transition:none}}@media print{.pt-chart{overflow:visible;background:#fff;border:1px solid #d1d5db;box-shadow:none}}\n"] }]
+            args: [{ selector: 'pt-chart', standalone: false, template: "<div\n  class=\"pt-chart\"\n  [ngStyle]=\"chartContainerStyle\"\n  role=\"img\"\n  [attr.aria-label]=\"chartAriaLabel\"\n>\n  <div class=\"pt-chart__canvas-container\">\n    <canvas #chartCanvas></canvas>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0}.pt-chart{position:relative;display:block;width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box;overflow:hidden;color:var(--p-text-color, var(--text-color, #0f172a));background:linear-gradient(145deg,color-mix(in srgb,var(--p-content-background, var(--surface-card, #ffffff)) 97%,var(--p-primary-color, #3b82f6) 3%),var(--p-content-background, var(--surface-card, #ffffff)));border:1px solid var(--p-content-border-color, var(--surface-border, rgba(15, 23, 42, .1)));border-radius:var(--p-content-border-radius, .875rem);box-shadow:0 1px 2px #0f172a0a,0 8px 24px #0f172a0d;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}.pt-chart:before{position:absolute;top:0;right:12%;left:12%;z-index:0;height:1px;pointer-events:none;content:\"\";background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--p-primary-color, #3b82f6) 45%,transparent),transparent)}.pt-chart__canvas-container{position:relative;z-index:1;width:100%;height:100%;min-width:0;min-height:0;padding:clamp(.75rem,1.5vw,1.25rem);box-sizing:border-box}.pt-chart canvas{display:block;width:100%!important;height:100%!important;max-width:none;max-height:none;outline:none}.pt-chart:focus-within{border-color:var(--p-primary-color, #3b82f6);box-shadow:0 0 0 3px color-mix(in srgb,var(--p-primary-color, #3b82f6) 18%,transparent),0 10px 30px #0f172a14}:host-context(.p-dark) .pt-chart,:host-context(.dark) .pt-chart,:host-context(.dark-mode) .pt-chart,:host-context([data-theme=\"dark\"]) .pt-chart{background:linear-gradient(145deg,color-mix(in srgb,var(--p-content-background, var(--surface-card, #0f172a)) 96%,var(--p-primary-color, #60a5fa) 4%),var(--p-content-background, var(--surface-card, #0f172a)));border-color:var( --p-content-border-color, var(--surface-border, rgba(148, 163, 184, .2)) );box-shadow:0 1px 2px #0000002e,0 12px 32px #00000038}@media(max-width:768px){.pt-chart{border-radius:.75rem}.pt-chart__canvas-container{padding:.75rem .625rem}}@media(max-width:480px){.pt-chart__canvas-container{padding:.625rem .375rem}}@media(prefers-reduced-motion:reduce){.pt-chart{transition:none}}@media print{.pt-chart{overflow:visible;background:#fff;border:1px solid #d1d5db;box-shadow:none}}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -7671,46 +7724,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+const PT_CHART_COMPARISON_DEFAULT_WIDTH = '100%';
+const PT_CHART_COMPARISON_DEFAULT_HEIGHT = '100%';
+const PT_CHART_COMPARISON_DEFAULT_MEDIAN_TITLE = 'Médiane';
+const PT_CHART_COMPARISON_DEFAULT_X_AXIS_TITLE = 'Time';
+const PT_CHART_COMPARISON_DEFAULT_Y_AXIS_TITLE = 'Value';
+const PT_CHART_COMPARISON_DEFAULT_RESIZE_DELAY = 100;
+const PT_CHART_COMPARISON_MEDIAN_DATASET = {
+    borderColor: '#0000ff',
+    borderWidth: 3,
+    backgroundColor: 'transparent',
+    pointRadius: 0,
+    pointHoverRadius: 0,
+    fill: false,
+    tension: 0.1,
+    borderDash: [],
+};
+const PT_CHART_COMPARISON_DEFAULT_TOOLTIP = {
+    mode: 'index',
+    intersect: false,
+    position: 'nearest',
+};
+const PT_CHART_COMPARISON_DEFAULT_X_TICK_FONT_SIZE = 12;
+const PT_CHART_COMPARISON_DEFAULT_Y_TICK_FONT = {
+    size: 16,
+    weight: 'bold',
+};
+const PT_CHART_COMPARISON_DEFAULT_Y_TICK_COLOR = '#333333';
+const PT_CHART_COMPARISON_DEFAULT_Y_GRID_COLOR = 'rgba(0, 0, 0, 0.10)';
+const PT_CHART_COMPARISON_DEFAULT_Y_BORDER_COLOR = '#000000';
+const createComparisonChartBaseOptions = () => ({
+    responsive: true,
+    maintainAspectRatio: false,
+    resizeDelay: PT_CHART_COMPARISON_DEFAULT_RESIZE_DELAY,
+});
+
 class PTChartComparisonComponent {
     constructor() {
-        this.medianTitle = 'Médiane';
-        this.xAxisTitle = 'Time';
-        this.yAxisTitle = 'Value';
-        this.chartHeight = '400px';
-        this.chartWidth = '1200px';
+        this.medianTitle = PT_CHART_COMPARISON_DEFAULT_MEDIAN_TITLE;
+        this.xAxisTitle = PT_CHART_COMPARISON_DEFAULT_X_AXIS_TITLE;
+        this.yAxisTitle = PT_CHART_COMPARISON_DEFAULT_Y_AXIS_TITLE;
+        this.viewInitialized = false;
         Chart.register(...registerables, ChartDataLabels);
     }
-    ngOnInit() {
+    ngAfterViewInit() {
+        this.viewInitialized = true;
         this.initializeChart();
+        this.observeResize();
+        this.scheduleResize();
+    }
+    ngOnChanges(changes) {
+        if (!this.viewInitialized) {
+            return;
+        }
+        if (changes['chartConfig'] ||
+            changes['chartHeight'] ||
+            changes['chartWidth'] ||
+            changes['medianTitle'] ||
+            changes['xAxisTitle'] ||
+            changes['yAxisTitle'] ||
+            changes['yMin'] ||
+            changes['yMax'] ||
+            changes['yStepSize']) {
+            this.initializeChart();
+        }
     }
     ngOnDestroy() {
+        this.resizeObserver?.disconnect();
         this.destroyChart();
     }
+    get resolvedChartWidth() {
+        return (this.chartConfig?.chartWidth?.trim() ||
+            this.chartWidth?.trim() ||
+            PT_CHART_COMPARISON_DEFAULT_WIDTH);
+    }
+    get resolvedChartHeight() {
+        return (this.chartConfig?.chartHeight?.trim() ||
+            this.chartHeight?.trim() ||
+            PT_CHART_COMPARISON_DEFAULT_HEIGHT);
+    }
     initializeChart() {
+        if (!this.chartConfig || !this.canvasRef) {
+            return;
+        }
         const canvas = this.canvasRef.nativeElement;
         this.destroyChart();
-        const config = {
+        const configuration = {
             type: this.chartConfig.type || 'line',
             data: this.getFormattedChartData(),
             options: this.getChartOptions(),
         };
-        this.chart = new Chart(canvas, config);
+        this.chart = new Chart(canvas, configuration);
+        this.scheduleResize();
     }
     getFormattedChartData() {
-        const medianValues = this.calculateMedian();
         return {
             labels: this.chartConfig.data.labels,
             datasets: [
                 {
-                    label: this.chartConfig.medianTitle || this.medianTitle || 'Médiane',
-                    data: medianValues,
-                    borderColor: '#0000FF',
-                    borderWidth: 3,
-                    backgroundColor: 'transparent',
-                    pointRadius: 0,
-                    fill: false,
-                    tension: 0.1,
-                    borderDash: [], // ✅ médiane continue
+                    label: this.chartConfig.medianTitle?.trim() ||
+                        this.medianTitle ||
+                        PT_CHART_COMPARISON_DEFAULT_MEDIAN_TITLE,
+                    data: this.calculateMedian(),
+                    ...PT_CHART_COMPARISON_MEDIAN_DATASET,
                 },
                 ...this.chartConfig.data.datasets,
             ],
@@ -7718,75 +7834,134 @@ class PTChartComparisonComponent {
     }
     calculateMedian() {
         const datasets = this.chartConfig.data.datasets;
-        return this.chartConfig.data.labels.map((_, index) => {
+        const labels = this.chartConfig.data.labels ?? [];
+        return labels.map((_, index) => {
             const valuesAtTime = datasets
                 .map((dataset) => dataset.data[index])
-                .filter((val) => typeof val === 'number' && !Number.isNaN(val));
-            if (valuesAtTime.length === 0)
+                .filter((value) => typeof value === 'number' && Number.isFinite(value))
+                .sort((left, right) => left - right);
+            if (!valuesAtTime.length) {
                 return 0;
-            valuesAtTime.sort((a, b) => a - b);
-            const middle = Math.floor(valuesAtTime.length / 2);
-            return valuesAtTime.length % 2 === 0
-                ? (valuesAtTime[middle - 1] + valuesAtTime[middle]) / 2
-                : valuesAtTime[middle];
+            }
+            const middleIndex = Math.floor(valuesAtTime.length / 2);
+            if (valuesAtTime.length % 2 !== 0) {
+                return valuesAtTime[middleIndex];
+            }
+            return (valuesAtTime[middleIndex - 1] + valuesAtTime[middleIndex]) / 2;
         });
     }
     getChartOptions() {
         const externalOptions = this.chartConfig.options ?? {};
+        const externalPlugins = externalOptions.plugins ?? {};
+        const externalScales = externalOptions.scales;
+        const configuredYMin = this.chartConfig.scales?.y?.min ?? this.yMin;
+        const configuredYMax = this.chartConfig.scales?.y?.max ?? this.yMax;
+        const configuredYStepSize = this.chartConfig.scales?.y?.ticks?.stepSize ?? this.yStepSize;
         return {
+            ...createComparisonChartBaseOptions(),
+            ...externalOptions,
             responsive: true,
             maintainAspectRatio: false,
             plugins: {
-                legend: { display: true, position: 'top' },
-                tooltip: { mode: 'index', intersect: false },
+                ...externalPlugins,
+                legend: {
+                    display: true,
+                    position: 'top',
+                    ...(externalPlugins.legend ?? {}),
+                },
+                tooltip: {
+                    ...PT_CHART_COMPARISON_DEFAULT_TOOLTIP,
+                    ...(externalPlugins.tooltip ?? {}),
+                },
                 datalabels: {
-                    display: false, // ✅ supprime les nombres au-dessus des lignes
+                    display: false,
+                    ...(externalPlugins.datalabels ?? {}),
                 },
-                ...(externalOptions.plugins ?? {}),
             },
             scales: {
                 x: {
-                    title: { display: true, text: this.chartConfig.xAxisTitle || 'Time' },
-                    ticks: { font: { size: 12 } },
-                    ...externalOptions.scales?.x,
+                    title: {
+                        display: true,
+                        text: this.chartConfig.xAxisTitle?.trim() ||
+                            this.xAxisTitle ||
+                            PT_CHART_COMPARISON_DEFAULT_X_AXIS_TITLE,
+                    },
+                    ticks: {
+                        font: {
+                            size: PT_CHART_COMPARISON_DEFAULT_X_TICK_FONT_SIZE,
+                        },
+                    },
+                    ...(externalScales?.['x'] ?? {}),
                 },
                 y: {
                     title: {
                         display: true,
-                        text: this.chartConfig.yAxisTitle || 'Value',
+                        text: this.chartConfig.yAxisTitle?.trim() ||
+                            this.yAxisTitle ||
+                            PT_CHART_COMPARISON_DEFAULT_Y_AXIS_TITLE,
                     },
-                    min: this.chartConfig.scales?.y?.min,
-                    max: this.chartConfig.scales?.y?.max,
+                    min: configuredYMin,
+                    max: configuredYMax,
                     ticks: {
-                        stepSize: this.chartConfig.scales?.y?.ticks?.stepSize,
-                        font: { size: 16, weight: 'bold' },
-                        color: '#333',
+                        stepSize: configuredYStepSize,
+                        font: PT_CHART_COMPARISON_DEFAULT_Y_TICK_FONT,
+                        color: PT_CHART_COMPARISON_DEFAULT_Y_TICK_COLOR,
                     },
                     grid: {
-                        color: 'rgba(0,0,0,0.1)',
+                        color: PT_CHART_COMPARISON_DEFAULT_Y_GRID_COLOR,
                     },
                     border: {
                         display: true,
-                        color: '#000',
+                        color: PT_CHART_COMPARISON_DEFAULT_Y_BORDER_COLOR,
                     },
-                    ...externalOptions.scales?.y,
+                    ...(externalScales?.['y'] ?? {}),
                 },
             },
-            ...externalOptions,
         };
     }
-    destroyChart() {
-        if (this.chart) {
-            this.chart.destroy();
-            this.chart = undefined;
+    observeResize() {
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const canvas = this.canvasRef.nativeElement;
+        const chartInner = canvas.parentElement;
+        const chartScrollContainer = chartInner?.parentElement;
+        const hostElement = chartScrollContainer?.parentElement;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.scheduleResize();
+        });
+        if (chartInner) {
+            this.resizeObserver.observe(chartInner);
+        }
+        if (chartScrollContainer) {
+            this.resizeObserver.observe(chartScrollContainer);
+        }
+        if (hostElement) {
+            this.resizeObserver.observe(hostElement);
+        }
+    }
+    scheduleResize() {
+        if (!this.chart) {
+            return;
         }
+        requestAnimationFrame(() => {
+            if (!this.chart) {
+                return;
+            }
+            this.chart.resize();
+            this.chart.update('none');
+        });
+    }
+    destroyChart() {
+        this.chart?.destroy();
+        this.chart = undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTChartComparisonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: PTChartComparisonComponent, isStandalone: false, selector: "pt-chart-comparison", inputs: { chartConfig: "chartConfig", medianTitle: "medianTitle", xAxisTitle: "xAxisTitle", yAxisTitle: "yAxisTitle", yMin: "yMin", yMax: "yMax", yStepSize: "yStepSize", chartHeight: "chartHeight", chartWidth: "chartWidth" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["chartCanvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"chart-scroll-container\">\n  <div\n    class=\"chart-inner\"\n    [style.width]=\"chartConfig.chartWidth || '1200px'\"\n    [style.height]=\"chartConfig.chartHeight || '400px'\"\n  >\n    <canvas #chartCanvas></canvas>\n  </div>\n</div>\n", styles: [".chart-scroll-container{width:100%;overflow-x:auto;white-space:nowrap;padding-bottom:10px}.chart-inner{display:inline-block}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: PTChartComparisonComponent, isStandalone: false, selector: "pt-chart-comparison", inputs: { chartConfig: "chartConfig", medianTitle: "medianTitle", xAxisTitle: "xAxisTitle", yAxisTitle: "yAxisTitle", yMin: "yMin", yMax: "yMax", yStepSize: "yStepSize", chartHeight: "chartHeight", chartWidth: "chartWidth" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["chartCanvas"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"chart-scroll-container\">\n  <div\n    class=\"chart-inner\"\n    [style.width]=\"resolvedChartWidth\"\n    [style.height]=\"resolvedChartHeight\"\n  >\n    <canvas #chartCanvas></canvas>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0}.chart-scroll-container{width:100%;height:100%;min-width:0;min-height:0;overflow-x:auto;overflow-y:hidden;box-sizing:border-box;padding-bottom:.625rem}.chart-inner{display:block;min-width:0;min-height:0;box-sizing:border-box}.chart-inner canvas{display:block;width:100%!important;height:100%!important;max-width:none;max-height:none}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTChartComparisonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-chart-comparison', standalone: false, template: "<div class=\"chart-scroll-container\">\n  <div\n    class=\"chart-inner\"\n    [style.width]=\"chartConfig.chartWidth || '1200px'\"\n    [style.height]=\"chartConfig.chartHeight || '400px'\"\n  >\n    <canvas #chartCanvas></canvas>\n  </div>\n</div>\n", styles: [".chart-scroll-container{width:100%;overflow-x:auto;white-space:nowrap;padding-bottom:10px}.chart-inner{display:inline-block}\n"] }]
+            args: [{ selector: 'pt-chart-comparison', standalone: false, template: "<div class=\"chart-scroll-container\">\n  <div\n    class=\"chart-inner\"\n    [style.width]=\"resolvedChartWidth\"\n    [style.height]=\"resolvedChartHeight\"\n  >\n    <canvas #chartCanvas></canvas>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0}.chart-scroll-container{width:100%;height:100%;min-width:0;min-height:0;overflow-x:auto;overflow-y:hidden;box-sizing:border-box;padding-bottom:.625rem}.chart-inner{display:block;min-width:0;min-height:0;box-sizing:border-box}.chart-inner canvas{display:block;width:100%!important;height:100%!important;max-width:none;max-height:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { chartConfig: [{
                 type: Input
             }], medianTitle: [{