ng-prime-tools 1.0.95 → 1.0.97

package/fesm2022/ng-prime-tools.mjs

@@ -4223,14 +4223,24 @@ const createDefaultChartOptions = (chartType, theme, config) => {
                     label: (context) => config.tooltipLabel(context, isCircularChart),
                 },
             },
+            /*
+             * Do not use `display: isCircularChart`.
+             * For non-circular charts, this plugin version can still enter
+             * its drawing lifecycle and throw `undefined.length`.
+             */
             datalabels: {
-                display: isCircularChart,
+                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),
+                formatter: (value, context) => {
+                    if (!isCircularChart) {
+                        return '';
+                    }
+                    return config.dataLabel(value, context, true);
+                },
                 font: {
                     family: config.fontFamily,
                     size: PT_CHART_FONT_SIZES.dataLabel,
@@ -4322,7 +4332,11 @@ class PTChartComponent {
         this.colorSchemeChangeListener = () => {
             this.refreshTheme();
         };
-        Chart.register(...registerables, ChartDataLabels);
+        /*
+         * Do not register ChartDataLabels globally.
+         * It must only be enabled for pie, doughnut and polar-area charts.
+         */
+        Chart.register(...registerables);
     }
     ngAfterViewInit() {
         this.viewInitialized = true;
@@ -4355,10 +4369,9 @@ class PTChartComponent {
         if (!this.viewInitialized || !this.chartConfig) {
             return;
         }
-        const canvas = this.canvasRef.nativeElement;
         this.destroyChart();
         const configuration = this.buildChartConfiguration();
-        this.chart = new Chart(canvas, configuration);
+        this.chart = new Chart(this.canvasRef.nativeElement, configuration);
         this.currentChartType = this.chartConfig.type;
         this.scheduleChartResize();
     }
@@ -4392,6 +4405,12 @@ class PTChartComponent {
             type: chartType,
             data: this.cloneChartData(this.chartConfig.data),
             options: this.mergeChartOptions(defaultOptions, consumerOptions, chartType),
+            /*
+             * ChartDataLabels is attached only for circular charts.
+             * It is not registered globally, so it cannot break line,
+             * bar, scatter, bubble or comparison charts.
+             */
+            plugins: isCircularChartType(chartType) ? [ChartDataLabels] : [],
         };
     }
     buildDefaultOptions(chartType, theme) {
@@ -4465,12 +4484,21 @@ class PTChartComponent {
                         ...consumerPlugins?.tooltip?.callbacks,
                     },
                 },
+            },
+        };
+        /*
+         * Add datalabel options only to circular charts.
+         * For Cartesian charts, the plugin is not installed at all.
+         */
+        if (isCircularChartType(chartType)) {
+            mergedOptions.plugins = {
+                ...mergedOptions.plugins,
                 datalabels: {
                     ...defaultPlugins?.datalabels,
                     ...consumerPlugins?.datalabels,
                 },
-            },
-        };
+            };
+        }
         if (isCartesianChartType(chartType)) {
             mergedOptions.scales = this.mergeScales(defaultOptions.scales, consumerOptions.scales);
         }
@@ -7724,122 +7752,253 @@ 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';
-        Chart.register(...registerables, ChartDataLabels);
+        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;
+        /*
+         * Do not register ChartDataLabels here.
+         * PTChartComparison is a line/comparison chart and does not use it.
+         */
+        Chart.register(...registerables);
     }
-    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() {
-        const canvas = this.canvasRef.nativeElement;
+        if (!this.chartConfig || !this.canvasRef) {
+            return;
+        }
         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(this.canvasRef.nativeElement, configuration);
+        this.scheduleResize();
     }
     getFormattedChartData() {
-        const medianValues = this.calculateMedian();
+        const sourceDatasets = this.chartConfig.data.datasets ?? [];
         return {
-            labels: this.chartConfig.data.labels,
+            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,
+                ...sourceDatasets.map((dataset) => ({
+                    ...dataset,
+                    data: [...(dataset.data ?? [])],
+                })),
             ],
         };
     }
     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)
+                .map((dataset) => dataset.data?.[index])
+                .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,
+            interaction: {
+                mode: 'index',
+                intersect: false,
+                ...(externalOptions.interaction ?? {}),
+            },
             plugins: {
-                legend: { display: true, position: 'top' },
-                tooltip: { mode: 'index', intersect: false },
-                datalabels: {
-                    display: false, // ✅ supprime les nombres au-dessus des lignes
+                ...externalPlugins,
+                legend: {
+                    display: true,
+                    position: 'top',
+                    ...(externalPlugins.legend ?? {}),
+                },
+                tooltip: {
+                    enabled: true,
+                    ...PT_CHART_COMPARISON_DEFAULT_TOOLTIP,
+                    ...(externalPlugins.tooltip ?? {}),
                 },
-                ...(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: [{