chartjs-plugin-trendline 3.2.0 → 3.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/.github/copilot-instructions.md +40 -40
  2. package/.github/workflows/release.yml +64 -61
  3. package/.github/workflows/tests.yml +26 -26
  4. package/.prettierrc +5 -5
  5. package/CLAUDE.md +44 -44
  6. package/GEMINI.md +40 -40
  7. package/LICENSE +21 -21
  8. package/MIGRATION.md +126 -126
  9. package/README.md +166 -166
  10. package/babel.config.js +3 -3
  11. package/changelog.md +39 -39
  12. package/dist/chartjs-plugin-trendline.cjs +884 -885
  13. package/dist/chartjs-plugin-trendline.esm.js +882 -883
  14. package/dist/chartjs-plugin-trendline.js +890 -891
  15. package/dist/chartjs-plugin-trendline.min.js +8 -8
  16. package/dist/chartjs-plugin-trendline.min.js.map +1 -1
  17. package/example/barChart.html +165 -165
  18. package/example/barChartWithNullValues.html +168 -168
  19. package/example/barChart_label.html +174 -174
  20. package/example/exponentialChart.html +244 -244
  21. package/example/lineChart.html +210 -210
  22. package/example/lineChartProjection.html +261 -261
  23. package/example/lineChartTypeTime.html +190 -190
  24. package/example/scatterChart.html +136 -136
  25. package/example/scatterProjection.html +141 -141
  26. package/example/test-null-handling.html +59 -59
  27. package/index.html +215 -215
  28. package/jest.config.js +4 -4
  29. package/package.json +45 -40
  30. package/rollup.config.js +54 -54
  31. package/src/components/label.js +56 -56
  32. package/src/components/label.test.js +129 -129
  33. package/src/components/trendline.js +375 -375
  34. package/src/components/trendline.test.js +789 -789
  35. package/src/core/plugin.js +78 -79
  36. package/src/core/plugin.test.js +307 -0
  37. package/src/index.js +12 -12
  38. package/src/utils/drawing.js +125 -125
  39. package/src/utils/drawing.test.js +308 -308
  40. package/src/utils/exponentialFitter.js +146 -146
  41. package/src/utils/exponentialFitter.test.js +362 -362
  42. package/src/utils/lineFitter.js +86 -86
  43. package/src/utils/lineFitter.test.js +340 -340
package/index.html CHANGED
@@ -1,216 +1,216 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Chart.js Plugin Trendline - Examples</title>
7
- <style>
8
- body {
9
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
10
- margin: 0;
11
- padding: 20px;
12
- background-color: #f8f9fa;
13
- color: #333;
14
- }
15
- .container {
16
- max-width: 1200px;
17
- margin: 0 auto;
18
- }
19
- h1 {
20
- text-align: center;
21
- color: #2c3e50;
22
- margin-bottom: 10px;
23
- }
24
- .subtitle {
25
- text-align: center;
26
- color: #7f8c8d;
27
- margin-bottom: 40px;
28
- }
29
- .examples-grid {
30
- display: grid;
31
- grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
32
- gap: 30px;
33
- margin-bottom: 40px;
34
- }
35
- .example-card {
36
- background: white;
37
- border-radius: 8px;
38
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
39
- overflow: hidden;
40
- transition: transform 0.2s;
41
- }
42
- .example-card:hover {
43
- transform: translateY(-2px);
44
- box-shadow: 0 4px 8px rgba(0,0,0,0.15);
45
- }
46
- .example-header {
47
- padding: 20px;
48
- background: #34495e;
49
- color: white;
50
- }
51
- .example-title {
52
- margin: 0;
53
- font-size: 18px;
54
- }
55
- .example-description {
56
- margin: 5px 0 0 0;
57
- font-size: 14px;
58
- opacity: 0.9;
59
- }
60
- .example-preview {
61
- padding: 20px;
62
- text-align: center;
63
- }
64
- .example-link {
65
- display: inline-block;
66
- padding: 10px 20px;
67
- background: #3498db;
68
- color: white;
69
- text-decoration: none;
70
- border-radius: 4px;
71
- font-weight: 500;
72
- transition: background-color 0.2s;
73
- }
74
- .example-link:hover {
75
- background: #2980b9;
76
- }
77
- .footer {
78
- text-align: center;
79
- padding: 40px 0;
80
- border-top: 1px solid #ecf0f1;
81
- margin-top: 40px;
82
- }
83
- .footer a {
84
- color: #3498db;
85
- text-decoration: none;
86
- }
87
- .footer a:hover {
88
- text-decoration: underline;
89
- }
90
- .install-section {
91
- background: white;
92
- padding: 30px;
93
- border-radius: 8px;
94
- margin-bottom: 40px;
95
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
96
- }
97
- .install-section h2 {
98
- margin-top: 0;
99
- color: #2c3e50;
100
- }
101
- pre {
102
- background: #f8f9fa;
103
- padding: 15px;
104
- border-radius: 4px;
105
- overflow-x: auto;
106
- border-left: 4px solid #3498db;
107
- }
108
- code {
109
- font-family: 'Monaco', 'Menlo', monospace;
110
- }
111
- </style>
112
- </head>
113
- <body>
114
- <div class="container">
115
- <h1>Chart.js Plugin Trendline</h1>
116
- <p class="subtitle">Interactive examples showcasing linear trendline functionality for Chart.js</p>
117
-
118
- <div class="install-section">
119
- <h2>Quick Start</h2>
120
- <p>Add the plugin to your HTML page:</p>
121
- <pre><code>&lt;script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.min.js"&gt;&lt;/script&gt;
122
- &lt;script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"&gt;&lt;/script&gt;</code></pre>
123
- </div>
124
-
125
- <div class="examples-grid">
126
- <div class="example-card">
127
- <div class="example-header">
128
- <h3 class="example-title">Bar Chart</h3>
129
- <p class="example-description">Basic bar chart with dotted trendline</p>
130
- </div>
131
- <div class="example-preview">
132
- <a href="example/barChart.html" class="example-link">View Example</a>
133
- </div>
134
- </div>
135
-
136
- <div class="example-card">
137
- <div class="example-header">
138
- <h3 class="example-title">Bar Chart with Label</h3>
139
- <p class="example-description">Bar chart displaying trendline with custom label</p>
140
- </div>
141
- <div class="example-preview">
142
- <a href="example/barChart_label.html" class="example-link">View Example</a>
143
- </div>
144
- </div>
145
-
146
- <div class="example-card">
147
- <div class="example-header">
148
- <h3 class="example-title">Bar Chart with Null Values</h3>
149
- <p class="example-description">Handling datasets with missing data points</p>
150
- </div>
151
- <div class="example-preview">
152
- <a href="example/barChartWithNullValues.html" class="example-link">View Example</a>
153
- </div>
154
- </div>
155
-
156
- <div class="example-card">
157
- <div class="example-header">
158
- <h3 class="example-title">Line Chart</h3>
159
- <p class="example-description">Standard line chart with linear trendline</p>
160
- </div>
161
- <div class="example-preview">
162
- <a href="example/lineChart.html" class="example-link">View Example</a>
163
- </div>
164
- </div>
165
-
166
- <div class="example-card">
167
- <div class="example-header">
168
- <h3 class="example-title">Line Chart Projection</h3>
169
- <p class="example-description">Line chart with trendline projection beyond data</p>
170
- </div>
171
- <div class="example-preview">
172
- <a href="example/lineChartProjection.html" class="example-link">View Example</a>
173
- </div>
174
- </div>
175
-
176
- <div class="example-card">
177
- <div class="example-header">
178
- <h3 class="example-title">Time Series Line Chart</h3>
179
- <p class="example-description">Line chart with time-based x-axis</p>
180
- </div>
181
- <div class="example-preview">
182
- <a href="example/lineChartTypeTime.html" class="example-link">View Example</a>
183
- </div>
184
- </div>
185
-
186
- <div class="example-card">
187
- <div class="example-header">
188
- <h3 class="example-title">Scatter Chart</h3>
189
- <p class="example-description">Scatter plot with fitted trendline</p>
190
- </div>
191
- <div class="example-preview">
192
- <a href="example/scatterChart.html" class="example-link">View Example</a>
193
- </div>
194
- </div>
195
-
196
- <div class="example-card">
197
- <div class="example-header">
198
- <h3 class="example-title">Scatter Projection</h3>
199
- <p class="example-description">Scatter chart with extended trendline projection</p>
200
- </div>
201
- <div class="example-preview">
202
- <a href="example/scatterProjection.html" class="example-link">View Example</a>
203
- </div>
204
- </div>
205
- </div>
206
-
207
- <div class="footer">
208
- <p>
209
- <a href="https://github.com/Makanz/chartjs-plugin-trendline">View on GitHub</a> |
210
- <a href="https://www.npmjs.com/package/chartjs-plugin-trendline">NPM Package</a> |
211
- <a href="https://github.com/Makanz/chartjs-plugin-trendline/issues">Report Issues</a>
212
- </p>
213
- </div>
214
- </div>
215
- </body>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Chart.js Plugin Trendline - Examples</title>
7
+ <style>
8
+ body {
9
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
10
+ margin: 0;
11
+ padding: 20px;
12
+ background-color: #f8f9fa;
13
+ color: #333;
14
+ }
15
+ .container {
16
+ max-width: 1200px;
17
+ margin: 0 auto;
18
+ }
19
+ h1 {
20
+ text-align: center;
21
+ color: #2c3e50;
22
+ margin-bottom: 10px;
23
+ }
24
+ .subtitle {
25
+ text-align: center;
26
+ color: #7f8c8d;
27
+ margin-bottom: 40px;
28
+ }
29
+ .examples-grid {
30
+ display: grid;
31
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
32
+ gap: 30px;
33
+ margin-bottom: 40px;
34
+ }
35
+ .example-card {
36
+ background: white;
37
+ border-radius: 8px;
38
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
39
+ overflow: hidden;
40
+ transition: transform 0.2s;
41
+ }
42
+ .example-card:hover {
43
+ transform: translateY(-2px);
44
+ box-shadow: 0 4px 8px rgba(0,0,0,0.15);
45
+ }
46
+ .example-header {
47
+ padding: 20px;
48
+ background: #34495e;
49
+ color: white;
50
+ }
51
+ .example-title {
52
+ margin: 0;
53
+ font-size: 18px;
54
+ }
55
+ .example-description {
56
+ margin: 5px 0 0 0;
57
+ font-size: 14px;
58
+ opacity: 0.9;
59
+ }
60
+ .example-preview {
61
+ padding: 20px;
62
+ text-align: center;
63
+ }
64
+ .example-link {
65
+ display: inline-block;
66
+ padding: 10px 20px;
67
+ background: #3498db;
68
+ color: white;
69
+ text-decoration: none;
70
+ border-radius: 4px;
71
+ font-weight: 500;
72
+ transition: background-color 0.2s;
73
+ }
74
+ .example-link:hover {
75
+ background: #2980b9;
76
+ }
77
+ .footer {
78
+ text-align: center;
79
+ padding: 40px 0;
80
+ border-top: 1px solid #ecf0f1;
81
+ margin-top: 40px;
82
+ }
83
+ .footer a {
84
+ color: #3498db;
85
+ text-decoration: none;
86
+ }
87
+ .footer a:hover {
88
+ text-decoration: underline;
89
+ }
90
+ .install-section {
91
+ background: white;
92
+ padding: 30px;
93
+ border-radius: 8px;
94
+ margin-bottom: 40px;
95
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
96
+ }
97
+ .install-section h2 {
98
+ margin-top: 0;
99
+ color: #2c3e50;
100
+ }
101
+ pre {
102
+ background: #f8f9fa;
103
+ padding: 15px;
104
+ border-radius: 4px;
105
+ overflow-x: auto;
106
+ border-left: 4px solid #3498db;
107
+ }
108
+ code {
109
+ font-family: 'Monaco', 'Menlo', monospace;
110
+ }
111
+ </style>
112
+ </head>
113
+ <body>
114
+ <div class="container">
115
+ <h1>Chart.js Plugin Trendline</h1>
116
+ <p class="subtitle">Interactive examples showcasing linear trendline functionality for Chart.js</p>
117
+
118
+ <div class="install-section">
119
+ <h2>Quick Start</h2>
120
+ <p>Add the plugin to your HTML page:</p>
121
+ <pre><code>&lt;script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.min.js"&gt;&lt;/script&gt;
122
+ &lt;script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"&gt;&lt;/script&gt;</code></pre>
123
+ </div>
124
+
125
+ <div class="examples-grid">
126
+ <div class="example-card">
127
+ <div class="example-header">
128
+ <h3 class="example-title">Bar Chart</h3>
129
+ <p class="example-description">Basic bar chart with dotted trendline</p>
130
+ </div>
131
+ <div class="example-preview">
132
+ <a href="example/barChart.html" class="example-link">View Example</a>
133
+ </div>
134
+ </div>
135
+
136
+ <div class="example-card">
137
+ <div class="example-header">
138
+ <h3 class="example-title">Bar Chart with Label</h3>
139
+ <p class="example-description">Bar chart displaying trendline with custom label</p>
140
+ </div>
141
+ <div class="example-preview">
142
+ <a href="example/barChart_label.html" class="example-link">View Example</a>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="example-card">
147
+ <div class="example-header">
148
+ <h3 class="example-title">Bar Chart with Null Values</h3>
149
+ <p class="example-description">Handling datasets with missing data points</p>
150
+ </div>
151
+ <div class="example-preview">
152
+ <a href="example/barChartWithNullValues.html" class="example-link">View Example</a>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="example-card">
157
+ <div class="example-header">
158
+ <h3 class="example-title">Line Chart</h3>
159
+ <p class="example-description">Standard line chart with linear trendline</p>
160
+ </div>
161
+ <div class="example-preview">
162
+ <a href="example/lineChart.html" class="example-link">View Example</a>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="example-card">
167
+ <div class="example-header">
168
+ <h3 class="example-title">Line Chart Projection</h3>
169
+ <p class="example-description">Line chart with trendline projection beyond data</p>
170
+ </div>
171
+ <div class="example-preview">
172
+ <a href="example/lineChartProjection.html" class="example-link">View Example</a>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="example-card">
177
+ <div class="example-header">
178
+ <h3 class="example-title">Time Series Line Chart</h3>
179
+ <p class="example-description">Line chart with time-based x-axis</p>
180
+ </div>
181
+ <div class="example-preview">
182
+ <a href="example/lineChartTypeTime.html" class="example-link">View Example</a>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="example-card">
187
+ <div class="example-header">
188
+ <h3 class="example-title">Scatter Chart</h3>
189
+ <p class="example-description">Scatter plot with fitted trendline</p>
190
+ </div>
191
+ <div class="example-preview">
192
+ <a href="example/scatterChart.html" class="example-link">View Example</a>
193
+ </div>
194
+ </div>
195
+
196
+ <div class="example-card">
197
+ <div class="example-header">
198
+ <h3 class="example-title">Scatter Projection</h3>
199
+ <p class="example-description">Scatter chart with extended trendline projection</p>
200
+ </div>
201
+ <div class="example-preview">
202
+ <a href="example/scatterProjection.html" class="example-link">View Example</a>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <div class="footer">
208
+ <p>
209
+ <a href="https://github.com/Makanz/chartjs-plugin-trendline">View on GitHub</a> |
210
+ <a href="https://www.npmjs.com/package/chartjs-plugin-trendline">NPM Package</a> |
211
+ <a href="https://github.com/Makanz/chartjs-plugin-trendline/issues">Report Issues</a>
212
+ </p>
213
+ </div>
214
+ </div>
215
+ </body>
216
216
  </html>
package/jest.config.js CHANGED
@@ -1,4 +1,4 @@
1
- export default {
2
- testEnvironment: 'jsdom',
3
- setupFiles: ['jest-canvas-mock'],
4
- };
1
+ export default {
2
+ testEnvironment: 'jsdom',
3
+ setupFiles: ['jest-canvas-mock'],
4
+ };
package/package.json CHANGED
@@ -1,40 +1,45 @@
1
- {
2
- "name": "chartjs-plugin-trendline",
3
- "version": "3.2.0",
4
- "description": "Trendline for Chart.js",
5
- "type": "module",
6
- "main": "./dist/chartjs-plugin-trendline.cjs",
7
- "module": "./dist/chartjs-plugin-trendline.esm.js",
8
- "unpkg": "./dist/chartjs-plugin-trendline.min.js",
9
- "jsdelivr": "./dist/chartjs-plugin-trendline.min.js",
10
- "exports": {
11
- ".": {
12
- "import": "./dist/chartjs-plugin-trendline.esm.js",
13
- "require": "./dist/chartjs-plugin-trendline.cjs"
14
- }
15
- },
16
- "scripts": {
17
- "build": "rollup -c",
18
- "test": "jest"
19
- },
20
- "repository": {
21
- "type": "git",
22
- "url": "git+https://github.com/Makanz/chartjs-plugin-trendline.git"
23
- },
24
- "author": "Marcus Alsterfjord",
25
- "license": "MIT",
26
- "bugs": {
27
- "url": "https://github.com/Makanz/chartjs-plugin-trendline/issues"
28
- },
29
- "homepage": "https://github.com/Makanz/chartjs-plugin-trendline#readme",
30
- "devDependencies": {
31
- "@babel/core": "^7.24.7",
32
- "@babel/preset-env": "^7.24.7",
33
- "@rollup/plugin-terser": "^0.4.4",
34
- "babel-jest": "^29.7.0",
35
- "jest": "^29.7.0",
36
- "jest-canvas-mock": "^2.5.2",
37
- "jest-environment-jsdom": "^29.7.0",
38
- "rollup": "^4.52.5"
39
- }
40
- }
1
+ {
2
+ "name": "chartjs-plugin-trendline",
3
+ "version": "3.2.3",
4
+ "description": "Trendline for Chart.js",
5
+ "type": "module",
6
+ "main": "./dist/chartjs-plugin-trendline.cjs",
7
+ "module": "./dist/chartjs-plugin-trendline.esm.js",
8
+ "unpkg": "./dist/chartjs-plugin-trendline.min.js",
9
+ "jsdelivr": "./dist/chartjs-plugin-trendline.min.js",
10
+ "exports": {
11
+ ".": {
12
+ "import": "./dist/chartjs-plugin-trendline.esm.js",
13
+ "require": "./dist/chartjs-plugin-trendline.cjs"
14
+ }
15
+ },
16
+ "scripts": {
17
+ "build": "rollup -c",
18
+ "test": "jest"
19
+ },
20
+ "repository": {
21
+ "type": "git",
22
+ "url": "git+https://github.com/Makanz/chartjs-plugin-trendline.git"
23
+ },
24
+ "author": "Marcus Alsterfjord",
25
+ "license": "MIT",
26
+ "bugs": {
27
+ "url": "https://github.com/Makanz/chartjs-plugin-trendline/issues"
28
+ },
29
+ "homepage": "https://github.com/Makanz/chartjs-plugin-trendline#readme",
30
+ "devDependencies": {
31
+ "@babel/core": "^7.24.7",
32
+ "@babel/preset-env": "^7.24.7",
33
+ "@rollup/plugin-terser": "^0.4.4",
34
+ "babel-jest": "^29.7.0",
35
+ "jest": "^29.7.0",
36
+ "jest-canvas-mock": "^2.5.2",
37
+ "jest-environment-jsdom": "^29.7.0",
38
+ "rollup": "^4.52.5"
39
+ },
40
+ "pnpm": {
41
+ "overrides": {
42
+ "js-yaml": ">=3.14.2"
43
+ }
44
+ }
45
+ }
package/rollup.config.js CHANGED
@@ -1,54 +1,54 @@
1
- import terser from '@rollup/plugin-terser';
2
-
3
- const banner = `/*!
4
- * chartjs-plugin-trendline v${process.env.npm_package_version}
5
- * https://github.com/Makanz/chartjs-plugin-trendline
6
- * (c) ${new Date().getFullYear()} Marcus Alsterfjord
7
- * Released under the MIT license
8
- */`;
9
-
10
- export default [
11
- // ESM build
12
- {
13
- input: 'src/index.js',
14
- output: {
15
- file: 'dist/chartjs-plugin-trendline.esm.js',
16
- format: 'esm',
17
- banner,
18
- },
19
- },
20
- // CommonJS build
21
- {
22
- input: 'src/index.js',
23
- output: {
24
- file: 'dist/chartjs-plugin-trendline.cjs',
25
- format: 'cjs',
26
- banner,
27
- exports: 'default',
28
- },
29
- },
30
- // UMD build (unminified)
31
- {
32
- input: 'src/index.js',
33
- output: {
34
- file: 'dist/chartjs-plugin-trendline.js',
35
- format: 'umd',
36
- name: 'ChartJSTrendline',
37
- banner,
38
- exports: 'default',
39
- },
40
- },
41
- // UMD build (minified)
42
- {
43
- input: 'src/index.js',
44
- output: {
45
- file: 'dist/chartjs-plugin-trendline.min.js',
46
- format: 'umd',
47
- name: 'ChartJSTrendline',
48
- banner,
49
- exports: 'default',
50
- sourcemap: true,
51
- },
52
- plugins: [terser()],
53
- },
54
- ];
1
+ import terser from '@rollup/plugin-terser';
2
+
3
+ const banner = `/*!
4
+ * chartjs-plugin-trendline v${process.env.npm_package_version}
5
+ * https://github.com/Makanz/chartjs-plugin-trendline
6
+ * (c) ${new Date().getFullYear()} Marcus Alsterfjord
7
+ * Released under the MIT license
8
+ */`;
9
+
10
+ export default [
11
+ // ESM build
12
+ {
13
+ input: 'src/index.js',
14
+ output: {
15
+ file: 'dist/chartjs-plugin-trendline.esm.js',
16
+ format: 'esm',
17
+ banner,
18
+ },
19
+ },
20
+ // CommonJS build
21
+ {
22
+ input: 'src/index.js',
23
+ output: {
24
+ file: 'dist/chartjs-plugin-trendline.cjs',
25
+ format: 'cjs',
26
+ banner,
27
+ exports: 'default',
28
+ },
29
+ },
30
+ // UMD build (unminified)
31
+ {
32
+ input: 'src/index.js',
33
+ output: {
34
+ file: 'dist/chartjs-plugin-trendline.js',
35
+ format: 'umd',
36
+ name: 'ChartJSTrendline',
37
+ banner,
38
+ exports: 'default',
39
+ },
40
+ },
41
+ // UMD build (minified)
42
+ {
43
+ input: 'src/index.js',
44
+ output: {
45
+ file: 'dist/chartjs-plugin-trendline.min.js',
46
+ format: 'umd',
47
+ name: 'ChartJSTrendline',
48
+ banner,
49
+ exports: 'default',
50
+ sourcemap: true,
51
+ },
52
+ plugins: [terser()],
53
+ },
54
+ ];