chartjs-plugin-trendline 3.2.0 → 3.2.3

package/src/core/plugin.js

@@ -1,79 +1,78 @@
-import { addFitter } from '../components/trendline.js';
-import { getScales } from '../utils/drawing.js';
-
-export const pluginTrendlineLinear = {
-    id: 'chartjs-plugin-trendline',
-
-    afterDatasetsDraw: (chartInstance) => {
-        const ctx = chartInstance.ctx;
-        const { xScale, yScale } = getScales(chartInstance);
-
-        const sortedDatasets = chartInstance.data.datasets
-            .map((dataset, index) => ({ dataset, index }))
-            .filter((entry) => entry.dataset.trendlineLinear || entry.dataset.trendlineExponential)
-            .sort((a, b) => {
-                const orderA = a.dataset.order ?? 0;
-                const orderB = b.dataset.order ?? 0;
-
-                // Push 0-order datasets to the end (they draw last / on top)
-                if (orderA === 0 && orderB !== 0) return 1;
-                if (orderB === 0 && orderA !== 0) return -1;
-
-                // Otherwise, draw lower order first
-                return orderA - orderB;
-            });
-
-        sortedDatasets.forEach(({ dataset, index }) => {
-            const showTrendline =
-                dataset.alwaysShowTrendline ||
-                chartInstance.isDatasetVisible(index);
-
-            if (showTrendline && dataset.data.length > 1) {
-                const datasetMeta = chartInstance.getDatasetMeta(index);
-                addFitter(datasetMeta, ctx, dataset, xScale, yScale);
-            }
-        });
-
-        // Reset to solid line after drawing trendline
-        ctx.setLineDash([]);
-    },
-
-    beforeInit: (chartInstance) => {
-        const datasets = chartInstance.data.datasets;
-
-        datasets.forEach((dataset) => {
-            const trendlineConfig = dataset.trendlineLinear || dataset.trendlineExponential;
-            if (trendlineConfig && trendlineConfig.label) {
-                const label = trendlineConfig.label;
-
-                // Access chartInstance to update legend labels
-                const originalGenerateLabels =
-                    chartInstance.legend.options.labels.generateLabels;
-
-                chartInstance.legend.options.labels.generateLabels = function (
-                    chart
-                ) {
-                    const defaultLabels = originalGenerateLabels(chart);
-
-                    const legendConfig = trendlineConfig.legend;
-
-                    // Display the legend is it's populated and not set to hidden
-                    if (legendConfig && legendConfig.display !== false) {
-                        defaultLabels.push({
-                            text: legendConfig.text || label + ' (Trendline)',
-                            strokeStyle:
-                                legendConfig.color ||
-                                dataset.borderColor ||
-                                'rgba(169,169,169, .6)',
-                            fillStyle: legendConfig.fillStyle || 'transparent',
-                            lineCap: legendConfig.lineCap || 'butt',
-                            lineDash: legendConfig.lineDash || [],
-                            lineWidth: legendConfig.width || 1,
-                        });
-                    }
-                    return defaultLabels;
-                };
-            }
-        });
-    },
-};
+import { addFitter } from '../components/trendline.js';
+import { getScales } from '../utils/drawing.js';
+
+export const pluginTrendlineLinear = {
+    id: 'chartjs-plugin-trendline',
+
+    afterDatasetsDraw: (chartInstance) => {
+        const ctx = chartInstance.ctx;
+        const { xScale, yScale } = getScales(chartInstance);
+
+        const sortedDatasets = chartInstance.data.datasets
+            .map((dataset, index) => ({ dataset, index }))
+            .filter((entry) => entry.dataset.trendlineLinear || entry.dataset.trendlineExponential)
+            .sort((a, b) => {
+                const orderA = a.dataset.order ?? 0;
+                const orderB = b.dataset.order ?? 0;
+
+                // Push 0-order datasets to the end (they draw last / on top)
+                if (orderA === 0 && orderB !== 0) return 1;
+                if (orderB === 0 && orderA !== 0) return -1;
+
+                // Otherwise, draw lower order first
+                return orderA - orderB;
+            });
+
+        sortedDatasets.forEach(({ dataset, index }) => {
+            const showTrendline =
+                dataset.alwaysShowTrendline ||
+                chartInstance.isDatasetVisible(index);
+
+            if (showTrendline && dataset.data.length > 1) {
+                const datasetMeta = chartInstance.getDatasetMeta(index);
+                addFitter(datasetMeta, ctx, dataset, xScale, yScale);
+            }
+        });
+
+        // Reset to solid line after drawing trendline
+        ctx.setLineDash([]);
+    },
+
+    beforeInit: (chartInstance) => {
+        const datasets = chartInstance.data.datasets;
+
+        datasets.forEach((dataset) => {
+            const trendlineConfig = dataset.trendlineLinear || dataset.trendlineExponential;
+            if (trendlineConfig && (trendlineConfig.label || trendlineConfig.legend)) {
+                // Access chartInstance to update legend labels
+                const originalGenerateLabels =
+                    chartInstance.legend.options.labels.generateLabels;
+
+                chartInstance.legend.options.labels.generateLabels = function (
+                    chart
+                ) {
+                    const defaultLabels = originalGenerateLabels(chart);
+
+                    const legendConfig = trendlineConfig.legend;
+
+                    // Display the legend if it's populated and not set to hidden
+                    if (legendConfig && legendConfig.display !== false) {
+                        defaultLabels.push({
+                            text: legendConfig.text || dataset.label || 'Trendline',
+                            strokeStyle:
+                                legendConfig.strokeStyle ||
+                                legendConfig.color ||
+                                dataset.borderColor ||
+                                'rgba(169,169,169, .6)',
+                            fillStyle: legendConfig.fillStyle || 'transparent',
+                            lineCap: legendConfig.lineCap || 'butt',
+                            lineDash: legendConfig.lineDash || [],
+                            lineWidth: legendConfig.lineWidth ?? legendConfig.width ?? 1,
+                        });
+                    }
+                    return defaultLabels;
+                };
+            }
+        });
+    },
+};

package/src/core/plugin.test.js

@@ -0,0 +1,307 @@
+import { pluginTrendlineLinear } from './plugin.js';
+
+describe('pluginTrendlineLinear.beforeInit - legend generation', () => {
+    let chartInstance;
+    let originalGenerateLabels;
+
+    beforeEach(() => {
+        originalGenerateLabels = jest.fn(() => [{ text: 'Dataset 1' }]);
+        chartInstance = {
+            data: { datasets: [] },
+            legend: {
+                options: {
+                    labels: {
+                        generateLabels: originalGenerateLabels,
+                    },
+                },
+            },
+        };
+    });
+
+    /**
+     * Bug 1: Legend item must appear even when trendlineConfig.label is absent,
+     * as long as trendlineConfig.legend is configured.
+     */
+    it('adds a legend item when only trendlineConfig.legend is present (no label key)', () => {
+        chartInstance.data.datasets = [
+            {
+                label: 'My Dataset',
+                borderColor: '#2196F3',
+                trendlineLinear: {
+                    // No `label` key - this was the bug trigger
+                    legend: {
+                        text: 'Trend',
+                        strokeStyle: '#ff6b6b',
+                    },
+                },
+            },
+        ];
+
+        pluginTrendlineLinear.beforeInit(chartInstance);
+
+        const labels = chartInstance.legend.options.labels.generateLabels(chartInstance);
+        const trendlineLabel = labels.find((l) => l.text === 'Trend');
+        expect(trendlineLabel).toBeDefined();
+    });
+
+    it('does not add a legend item when neither label nor legend key is present', () => {
+        chartInstance.data.datasets = [
+            {
+                label: 'My Dataset',
+                trendlineLinear: {
+                    colorMin: 'red',
+                },
+            },
+        ];
+
+        pluginTrendlineLinear.beforeInit(chartInstance);
+
+        // generateLabels should not have been replaced
+        expect(chartInstance.legend.options.labels.generateLabels).toBe(originalGenerateLabels);
+    });
+
+    it('still adds a legend item when only trendlineConfig.label is present (backwards compat)', () => {
+        chartInstance.data.datasets = [
+            {
+                label: 'My Dataset',
+                trendlineLinear: {
+                    label: { display: false },
+                    legend: { text: 'Trend' },
+                },
+            },
+        ];
+
+        pluginTrendlineLinear.beforeInit(chartInstance);
+
+        const labels = chartInstance.legend.options.labels.generateLabels(chartInstance);
+        expect(labels.some((l) => l.text === 'Trend')).toBe(true);
+    });
+
+    /**
+     * Bug 2: legendConfig.strokeStyle should be respected.
+     */
+    it('uses legendConfig.strokeStyle for the legend item strokeStyle', () => {
+        chartInstance.data.datasets = [
+            {
+                borderColor: '#2196F3',
+                trendlineLinear: {
+                    legend: {
+                        text: 'Trend',
+                        strokeStyle: '#ff6b6b',
+                    },
+                },
+            },
+        ];
+
+        pluginTrendlineLinear.beforeInit(chartInstance);
+
+        const labels = chartInstance.legend.options.labels.generateLabels(chartInstance);
+        const trendlineLabel = labels.find((l) => l.text === 'Trend');
+        expect(trendlineLabel.strokeStyle).toBe('#ff6b6b');
+    });
+
+    it('falls back to legendConfig.color for strokeStyle when strokeStyle is absent', () => {
+        chartInstance.data.datasets = [
+            {
+                borderColor: '#2196F3',
+                trendlineLinear: {
+                    legend: {
+                        text: 'Trend',
+                        color: '#aabbcc',
+                    },
+                },
+            },
+        ];
+
+        pluginTrendlineLinear.beforeInit(chartInstance);
+
+        const labels = chartInstance.legend.options.labels.generateLabels(chartInstance);
+        const trendlineLabel = labels.find((l) => l.text === 'Trend');
+        expect(trendlineLabel.strokeStyle).toBe('#aabbcc');
+    });
+
+    it('falls back to dataset.borderColor for strokeStyle when neither strokeStyle nor color is set', () => {
+        chartInstance.data.datasets = [
+            {
+                borderColor: '#2196F3',
+                trendlineLinear: {
+                    legend: { text: 'Trend' },
+                },
+            },
+        ];
+
+        pluginTrendlineLinear.beforeInit(chartInstance);
+
+        const labels = chartInstance.legend.options.labels.generateLabels(chartInstance);
+        const trendlineLabel = labels.find((l) => l.text === 'Trend');
+        expect(trendlineLabel.strokeStyle).toBe('#2196F3');
+    });
+
+    it('falls back to default gray strokeStyle when no color source is available', () => {
+        chartInstance.data.datasets = [
+            {
+                trendlineLinear: {
+                    legend: { text: 'Trend' },
+                },
+            },
+        ];
+
+        pluginTrendlineLinear.beforeInit(chartInstance);
+
+        const labels = chartInstance.legend.options.labels.generateLabels(chartInstance);
+        const trendlineLabel = labels.find((l) => l.text === 'Trend');
+        expect(trendlineLabel.strokeStyle).toBe('rgba(169,169,169, .6)');
+    });
+
+    /**
+     * Bug 3: legendConfig.lineWidth should control the legend item line width.
+     */
+    it('uses legendConfig.lineWidth for the legend item lineWidth', () => {
+        chartInstance.data.datasets = [
+            {
+                trendlineLinear: {
+                    legend: {
+                        text: 'Trend',
+                        lineWidth: 3,
+                    },
+                },
+            },
+        ];
+
+        pluginTrendlineLinear.beforeInit(chartInstance);
+
+        const labels = chartInstance.legend.options.labels.generateLabels(chartInstance);
+        const trendlineLabel = labels.find((l) => l.text === 'Trend');
+        expect(trendlineLabel.lineWidth).toBe(3);
+    });
+
+    it('allows legendConfig.lineWidth of 0 to hide the legend border', () => {
+        chartInstance.data.datasets = [
+            {
+                trendlineLinear: {
+                    legend: {
+                        text: 'Trend',
+                        lineWidth: 0,
+                    },
+                },
+            },
+        ];
+
+        pluginTrendlineLinear.beforeInit(chartInstance);
+
+        const labels = chartInstance.legend.options.labels.generateLabels(chartInstance);
+        const trendlineLabel = labels.find((l) => l.text === 'Trend');
+        expect(trendlineLabel.lineWidth).toBe(0);
+    });
+
+    it('falls back to legendConfig.width for lineWidth when lineWidth is absent', () => {
+        chartInstance.data.datasets = [
+            {
+                trendlineLinear: {
+                    legend: {
+                        text: 'Trend',
+                        width: 2,
+                    },
+                },
+            },
+        ];
+
+        pluginTrendlineLinear.beforeInit(chartInstance);
+
+        const labels = chartInstance.legend.options.labels.generateLabels(chartInstance);
+        const trendlineLabel = labels.find((l) => l.text === 'Trend');
+        expect(trendlineLabel.lineWidth).toBe(2);
+    });
+
+    it('defaults lineWidth to 1 when neither lineWidth nor width is set', () => {
+        chartInstance.data.datasets = [
+            {
+                trendlineLinear: {
+                    legend: { text: 'Trend' },
+                },
+            },
+        ];
+
+        pluginTrendlineLinear.beforeInit(chartInstance);
+
+        const labels = chartInstance.legend.options.labels.generateLabels(chartInstance);
+        const trendlineLabel = labels.find((l) => l.text === 'Trend');
+        expect(trendlineLabel.lineWidth).toBe(1);
+    });
+
+    /**
+     * Legend text fallback behaviour.
+     */
+    it('uses dataset.label as text fallback when legendConfig.text is absent', () => {
+        chartInstance.data.datasets = [
+            {
+                label: 'Balance',
+                trendlineLinear: {
+                    legend: { strokeStyle: '#ff0000' },
+                },
+            },
+        ];
+
+        pluginTrendlineLinear.beforeInit(chartInstance);
+
+        const labels = chartInstance.legend.options.labels.generateLabels(chartInstance);
+        const trendlineLabel = labels.find((l) => l.text === 'Balance');
+        expect(trendlineLabel).toBeDefined();
+    });
+
+    it('falls back to "Trendline" text when neither legendConfig.text nor dataset.label is set', () => {
+        chartInstance.data.datasets = [
+            {
+                trendlineLinear: {
+                    legend: { strokeStyle: '#ff0000' },
+                },
+            },
+        ];
+
+        pluginTrendlineLinear.beforeInit(chartInstance);
+
+        const labels = chartInstance.legend.options.labels.generateLabels(chartInstance);
+        const trendlineLabel = labels.find((l) => l.text === 'Trendline');
+        expect(trendlineLabel).toBeDefined();
+    });
+
+    it('does not add legend item when legendConfig.display is false', () => {
+        chartInstance.data.datasets = [
+            {
+                label: 'My Dataset',
+                trendlineLinear: {
+                    legend: { text: 'Trend', display: false },
+                },
+            },
+        ];
+
+        pluginTrendlineLinear.beforeInit(chartInstance);
+
+        const labels = chartInstance.legend.options.labels.generateLabels(chartInstance);
+        expect(labels.some((l) => l.text === 'Trend')).toBe(false);
+    });
+
+    it('works with trendlineExponential config', () => {
+        chartInstance.data.datasets = [
+            {
+                label: 'Exp Dataset',
+                borderColor: '#00ff00',
+                trendlineExponential: {
+                    legend: {
+                        text: 'Exp Trend',
+                        strokeStyle: '#ff0000',
+                        lineWidth: 2,
+                    },
+                },
+            },
+        ];
+
+        pluginTrendlineLinear.beforeInit(chartInstance);
+
+        const labels = chartInstance.legend.options.labels.generateLabels(chartInstance);
+        const trendlineLabel = labels.find((l) => l.text === 'Exp Trend');
+        expect(trendlineLabel).toBeDefined();
+        expect(trendlineLabel.strokeStyle).toBe('#ff0000');
+        expect(trendlineLabel.lineWidth).toBe(2);
+    });
+});

package/src/index.js

@@ -1,13 +1,13 @@
-import { pluginTrendlineLinear } from './core/plugin.js';
-
-// If we're in the browser and have access to the global Chart obj, register plugin automatically
-if (typeof window !== 'undefined' && window.Chart) {
-    if (window.Chart.hasOwnProperty('register')) {
-        window.Chart.register(pluginTrendlineLinear);
-    } else {
-        window.Chart.plugins.register(pluginTrendlineLinear);
-    }
-}
-
-// Export the plugin
+import { pluginTrendlineLinear } from './core/plugin.js';
+
+// If we're in the browser and have access to the global Chart obj, register plugin automatically
+if (typeof window !== 'undefined' && window.Chart) {
+    if (window.Chart.hasOwnProperty('register')) {
+        window.Chart.register(pluginTrendlineLinear);
+    } else {
+        window.Chart.plugins.register(pluginTrendlineLinear);
+    }
+}
+
+// Export the plugin
 export default pluginTrendlineLinear;