chartjs-plugin-trendline 3.1.1 → 3.2.3

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,4 +1,4 @@
-import { pluginTrendlineLinear } from './core/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) {

package/src/utils/drawing.test.js

@@ -1,4 +1,4 @@
-import { getScales, setLineStyle, drawTrendline, fillBelowTrendline } from './drawing';
+import { getScales, setLineStyle, drawTrendline, fillBelowTrendline } from './drawing.js';
 
 describe('getScales', () => {
   it('should correctly identify x and y scales', () => {

package/src/utils/exponentialFitter.test.js

@@ -1,4 +1,4 @@
-import { ExponentialFitter } from './exponentialFitter';
+import { ExponentialFitter } from './exponentialFitter.js';
 
 describe('ExponentialFitter', () => {
   describe('constructor', () => {

package/src/utils/lineFitter.test.js

@@ -1,4 +1,4 @@
-import { LineFitter } from './lineFitter';
+import { LineFitter } from './lineFitter.js';
 
 describe('LineFitter', () => {
   test('constructor should initialize values correctly', () => {

package/dist/chartjs-plugin-trendline.min.js.LICENSE.txt

@@ -1,11 +0,0 @@
-/*!
- * chartjs-plugin-trendline.js
- * Version: 3.0.0
- *
- * Copyright 2025 Marcus Alsterfjord
- * Released under the MIT license
- * https://github.com/Makanz/chartjs-plugin-trendline/blob/master/README.md
- *
- * Modified by @vesal: accept xy-data from scatter,
- * Modified by @Megaemce: add label and basic legend to trendline, add JSDoc,
- */

package/webpack.config.js

@@ -1,9 +0,0 @@
-const path = require('path');
-
-module.exports = {
-    entry: './src/index.js',
-    output: {
-        filename: 'chartjs-plugin-trendline.min.js',
-        path: path.resolve(__dirname, 'dist'),
-    },
-};