ng-prime-tools 1.0.95 → 1.0.96

package/fesm2022/ng-prime-tools.mjs

@@ -7724,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,
             ],
@@ -7771,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: [{