ng-prime-tools 1.0.96 → 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);
         }
@@ -7765,7 +7793,11 @@ class PTChartComparisonComponent {
         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);
+        /*
+         * Do not register ChartDataLabels here.
+         * PTChartComparison is a line/comparison chart and does not use it.
+         */
+        Chart.register(...registerables);
     }
     ngAfterViewInit() {
         this.viewInitialized = true;
@@ -7807,19 +7839,19 @@ class PTChartComparisonComponent {
         if (!this.chartConfig || !this.canvasRef) {
             return;
         }
-        const canvas = this.canvasRef.nativeElement;
         this.destroyChart();
         const configuration = {
             type: this.chartConfig.type || 'line',
             data: this.getFormattedChartData(),
             options: this.getChartOptions(),
         };
-        this.chart = new Chart(canvas, configuration);
+        this.chart = new Chart(this.canvasRef.nativeElement, configuration);
         this.scheduleResize();
     }
     getFormattedChartData() {
+        const sourceDatasets = this.chartConfig.data.datasets ?? [];
         return {
-            labels: this.chartConfig.data.labels,
+            labels: [...(this.chartConfig.data.labels ?? [])],
             datasets: [
                 {
                     label: this.chartConfig.medianTitle?.trim() ||
@@ -7828,7 +7860,10 @@ class PTChartComparisonComponent {
                     data: this.calculateMedian(),
                     ...PT_CHART_COMPARISON_MEDIAN_DATASET,
                 },
-                ...this.chartConfig.data.datasets,
+                ...sourceDatasets.map((dataset) => ({
+                    ...dataset,
+                    data: [...(dataset.data ?? [])],
+                })),
             ],
         };
     }
@@ -7837,7 +7872,7 @@ class PTChartComparisonComponent {
         const labels = this.chartConfig.data.labels ?? [];
         return labels.map((_, index) => {
             const valuesAtTime = datasets
-                .map((dataset) => dataset.data[index])
+                .map((dataset) => dataset.data?.[index])
                 .filter((value) => typeof value === 'number' && Number.isFinite(value))
                 .sort((left, right) => left - right);
             if (!valuesAtTime.length) {
@@ -7862,6 +7897,11 @@ class PTChartComparisonComponent {
             ...externalOptions,
             responsive: true,
             maintainAspectRatio: false,
+            interaction: {
+                mode: 'index',
+                intersect: false,
+                ...(externalOptions.interaction ?? {}),
+            },
             plugins: {
                 ...externalPlugins,
                 legend: {
@@ -7870,13 +7910,10 @@ class PTChartComparisonComponent {
                     ...(externalPlugins.legend ?? {}),
                 },
                 tooltip: {
+                    enabled: true,
                     ...PT_CHART_COMPARISON_DEFAULT_TOOLTIP,
                     ...(externalPlugins.tooltip ?? {}),
                 },
-                datalabels: {
-                    display: false,
-                    ...(externalPlugins.datalabels ?? {}),
-                },
             },
             scales: {
                 x: {