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/example/exponentialChart.html CHANGED
@@ -1,245 +1,245 @@
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
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
- <title>Exponential Trendline - Chart.js Trendline Plugin</title>
8
- <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.js"></script>
9
- <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
10
- <style>
11
- body {
12
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
13
- margin: 0;
14
- padding: 40px 20px;
15
- background-color: #f8f9fa;
16
- color: #333;
17
- line-height: 1.6;
18
- }
19
- .container {
20
- max-width: 1000px;
21
- margin: 0 auto;
22
- }
23
- h1 {
24
- text-align: center;
25
- color: #2c3e50;
26
- margin-bottom: 10px;
27
- font-size: 2.5rem;
28
- }
29
- .subtitle {
30
- text-align: center;
31
- color: #7f8c8d;
32
- margin-bottom: 40px;
33
- font-size: 1.1rem;
34
- }
35
- .chart-container {
36
- background: white;
37
- padding: 30px;
38
- border-radius: 8px;
39
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
40
- margin-bottom: 30px;
41
- }
42
- .chart-wrapper {
43
- position: relative;
44
- height: 400px;
45
- }
46
- .info-section {
47
- background: white;
48
- padding: 25px;
49
- border-radius: 8px;
50
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
51
- margin-bottom: 20px;
52
- }
53
- .info-section h3 {
54
- margin-top: 0;
55
- color: #2c3e50;
56
- border-bottom: 2px solid #3498db;
57
- padding-bottom: 10px;
58
- }
59
- .nav-links {
60
- text-align: center;
61
- margin-top: 30px;
62
- }
63
- .nav-links a {
64
- display: inline-block;
65
- margin: 0 10px;
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
- .nav-links a:hover {
75
- background: #2980b9;
76
- }
77
- code {
78
- background: #f8f9fa;
79
- padding: 2px 6px;
80
- border-radius: 3px;
81
- font-family: 'Monaco', 'Menlo', monospace;
82
- }
83
- pre {
84
- background: #f8f9fa;
85
- padding: 15px;
86
- border-radius: 4px;
87
- overflow-x: auto;
88
- }
89
- </style>
90
- <script>
91
- document.addEventListener('DOMContentLoaded', function (event) {
92
- new Chart(document.getElementById('exponential-chart'), {
93
- type: 'line',
94
- data: {
95
- labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
96
- datasets: [
97
- {
98
- data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
99
- label: 'Exponential Growth (2^x)',
100
- borderColor: '#3e95cd',
101
- backgroundColor: 'rgba(62, 149, 205, 0.1)',
102
- fill: false,
103
- trendlineExponential: {
104
- colorMin: '#ff6b6b',
105
- colorMax: '#ff6b6b',
106
- width: 2,
107
- lineStyle: 'solid',
108
- label: {
109
- text: 'Exponential Trend',
110
- display: true,
111
- displayValue: true,
112
- color: '#ff6b6b',
113
- font: {
114
- size: 12,
115
- family: 'Arial',
116
- },
117
- offset: 10,
118
- },
119
- },
120
- },
121
- {
122
- data: [100, 50, 25, 12.5, 6.25, 3.125, 1.5625, 0.78125, 0.390625, 0.1953125, 0.09765625],
123
- label: 'Exponential Decay (100 * 0.5^x)',
124
- borderColor: '#8e5ea2',
125
- backgroundColor: 'rgba(142, 94, 162, 0.1)',
126
- fill: false,
127
- trendlineExponential: {
128
- colorMin: '#4ecdc4',
129
- colorMax: '#4ecdc4',
130
- width: 2,
131
- lineStyle: 'dashed',
132
- label: {
133
- text: 'Exponential Decay',
134
- display: true,
135
- displayValue: true,
136
- color: '#4ecdc4',
137
- font: {
138
- size: 12,
139
- family: 'Arial',
140
- },
141
- offset: 10,
142
- },
143
- },
144
- },
145
- ],
146
- },
147
- options: {
148
- responsive: true,
149
- maintainAspectRatio: false,
150
- plugins: {
151
- title: {
152
- display: true,
153
- text: 'Exponential Trendline Examples',
154
- font: {
155
- size: 16
156
- }
157
- },
158
- legend: {
159
- display: true,
160
- },
161
- },
162
- scales: {
163
- x: {
164
- display: true,
165
- title: {
166
- display: true,
167
- text: 'X Values',
168
- },
169
- },
170
- y: {
171
- display: true,
172
- title: {
173
- display: true,
174
- text: 'Y Values',
175
- },
176
- type: 'logarithmic',
177
- },
178
- },
179
- },
180
- });
181
- });
182
- </script>
183
- </head>
184
-
185
- <body>
186
- <div class="container">
187
- <h1>Exponential Trendlines</h1>
188
- <p class="subtitle">Demonstrates exponential curve fitting with growth and decay examples</p>
189
-
190
- <div class="chart-container">
191
- <div class="chart-wrapper">
192
- <canvas id="exponential-chart"></canvas>
193
- </div>
194
- </div>
195
-
196
- <div class="info-section">
197
- <h3>Configuration Features</h3>
198
- <p>This example demonstrates exponential trendline fitting using <code>trendlineExponential</code>:</p>
199
- <ul>
200
- <li><strong>Exponential Growth:</strong> Shows data following 2^x pattern with solid red trendline</li>
201
- <li><strong>Exponential Decay:</strong> Shows data following 100 * 0.5^x pattern with dashed teal trendline</li>
202
- <li><strong>Logarithmic Scale:</strong> Y-axis uses logarithmic scaling for better visualization</li>
203
- <li><strong>Custom Labels:</strong> Both trendlines include custom labels with equation parameters</li>
204
- </ul>
205
- </div>
206
-
207
- <div class="info-section">
208
- <h3>Configuration Example</h3>
209
- <p>To use exponential trendlines, configure your dataset with <code>trendlineExponential</code> instead of <code>trendlineLinear</code>:</p>
210
- <pre><code>trendlineExponential: {
211
- colorMin: '#ff6b6b',
212
- colorMax: '#ff6b6b',
213
- width: 2,
214
- lineStyle: 'solid',
215
- label: {
216
- text: 'Exponential Trend',
217
- display: true,
218
- displayValue: true,
219
- color: '#ff6b6b',
220
- font: {
221
- size: 12,
222
- family: 'Arial',
223
- },
224
- offset: 10,
225
- },
226
- }</code></pre>
227
- </div>
228
-
229
- <div class="info-section">
230
- <h3>Important Notes</h3>
231
- <ul>
232
- <li>Exponential fitting works best with positive y-values</li>
233
- <li>The label shows the exponential parameters: a (coefficient) and b (growth rate)</li>
234
- <li>The equation is: y = a * e^(b*x)</li>
235
- <li>All styling options that work for linear trendlines also work for exponential</li>
236
- </ul>
237
- </div>
238
-
239
- <div class="nav-links">
240
- <a href="../index.html">← Back to Examples</a>
241
- </div>
242
- </div>
243
- </body>
244
-
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
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
+ <title>Exponential Trendline - Chart.js Trendline Plugin</title>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
10
+ <style>
11
+ body {
12
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
13
+ margin: 0;
14
+ padding: 40px 20px;
15
+ background-color: #f8f9fa;
16
+ color: #333;
17
+ line-height: 1.6;
18
+ }
19
+ .container {
20
+ max-width: 1000px;
21
+ margin: 0 auto;
22
+ }
23
+ h1 {
24
+ text-align: center;
25
+ color: #2c3e50;
26
+ margin-bottom: 10px;
27
+ font-size: 2.5rem;
28
+ }
29
+ .subtitle {
30
+ text-align: center;
31
+ color: #7f8c8d;
32
+ margin-bottom: 40px;
33
+ font-size: 1.1rem;
34
+ }
35
+ .chart-container {
36
+ background: white;
37
+ padding: 30px;
38
+ border-radius: 8px;
39
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
40
+ margin-bottom: 30px;
41
+ }
42
+ .chart-wrapper {
43
+ position: relative;
44
+ height: 400px;
45
+ }
46
+ .info-section {
47
+ background: white;
48
+ padding: 25px;
49
+ border-radius: 8px;
50
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
51
+ margin-bottom: 20px;
52
+ }
53
+ .info-section h3 {
54
+ margin-top: 0;
55
+ color: #2c3e50;
56
+ border-bottom: 2px solid #3498db;
57
+ padding-bottom: 10px;
58
+ }
59
+ .nav-links {
60
+ text-align: center;
61
+ margin-top: 30px;
62
+ }
63
+ .nav-links a {
64
+ display: inline-block;
65
+ margin: 0 10px;
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
+ .nav-links a:hover {
75
+ background: #2980b9;
76
+ }
77
+ code {
78
+ background: #f8f9fa;
79
+ padding: 2px 6px;
80
+ border-radius: 3px;
81
+ font-family: 'Monaco', 'Menlo', monospace;
82
+ }
83
+ pre {
84
+ background: #f8f9fa;
85
+ padding: 15px;
86
+ border-radius: 4px;
87
+ overflow-x: auto;
88
+ }
89
+ </style>
90
+ <script>
91
+ document.addEventListener('DOMContentLoaded', function (event) {
92
+ new Chart(document.getElementById('exponential-chart'), {
93
+ type: 'line',
94
+ data: {
95
+ labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
96
+ datasets: [
97
+ {
98
+ data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
99
+ label: 'Exponential Growth (2^x)',
100
+ borderColor: '#3e95cd',
101
+ backgroundColor: 'rgba(62, 149, 205, 0.1)',
102
+ fill: false,
103
+ trendlineExponential: {
104
+ colorMin: '#ff6b6b',
105
+ colorMax: '#ff6b6b',
106
+ width: 2,
107
+ lineStyle: 'solid',
108
+ label: {
109
+ text: 'Exponential Trend',
110
+ display: true,
111
+ displayValue: true,
112
+ color: '#ff6b6b',
113
+ font: {
114
+ size: 12,
115
+ family: 'Arial',
116
+ },
117
+ offset: 10,
118
+ },
119
+ },
120
+ },
121
+ {
122
+ data: [100, 50, 25, 12.5, 6.25, 3.125, 1.5625, 0.78125, 0.390625, 0.1953125, 0.09765625],
123
+ label: 'Exponential Decay (100 * 0.5^x)',
124
+ borderColor: '#8e5ea2',
125
+ backgroundColor: 'rgba(142, 94, 162, 0.1)',
126
+ fill: false,
127
+ trendlineExponential: {
128
+ colorMin: '#4ecdc4',
129
+ colorMax: '#4ecdc4',
130
+ width: 2,
131
+ lineStyle: 'dashed',
132
+ label: {
133
+ text: 'Exponential Decay',
134
+ display: true,
135
+ displayValue: true,
136
+ color: '#4ecdc4',
137
+ font: {
138
+ size: 12,
139
+ family: 'Arial',
140
+ },
141
+ offset: 10,
142
+ },
143
+ },
144
+ },
145
+ ],
146
+ },
147
+ options: {
148
+ responsive: true,
149
+ maintainAspectRatio: false,
150
+ plugins: {
151
+ title: {
152
+ display: true,
153
+ text: 'Exponential Trendline Examples',
154
+ font: {
155
+ size: 16
156
+ }
157
+ },
158
+ legend: {
159
+ display: true,
160
+ },
161
+ },
162
+ scales: {
163
+ x: {
164
+ display: true,
165
+ title: {
166
+ display: true,
167
+ text: 'X Values',
168
+ },
169
+ },
170
+ y: {
171
+ display: true,
172
+ title: {
173
+ display: true,
174
+ text: 'Y Values',
175
+ },
176
+ type: 'logarithmic',
177
+ },
178
+ },
179
+ },
180
+ });
181
+ });
182
+ </script>
183
+ </head>
184
+
185
+ <body>
186
+ <div class="container">
187
+ <h1>Exponential Trendlines</h1>
188
+ <p class="subtitle">Demonstrates exponential curve fitting with growth and decay examples</p>
189
+
190
+ <div class="chart-container">
191
+ <div class="chart-wrapper">
192
+ <canvas id="exponential-chart"></canvas>
193
+ </div>
194
+ </div>
195
+
196
+ <div class="info-section">
197
+ <h3>Configuration Features</h3>
198
+ <p>This example demonstrates exponential trendline fitting using <code>trendlineExponential</code>:</p>
199
+ <ul>
200
+ <li><strong>Exponential Growth:</strong> Shows data following 2^x pattern with solid red trendline</li>
201
+ <li><strong>Exponential Decay:</strong> Shows data following 100 * 0.5^x pattern with dashed teal trendline</li>
202
+ <li><strong>Logarithmic Scale:</strong> Y-axis uses logarithmic scaling for better visualization</li>
203
+ <li><strong>Custom Labels:</strong> Both trendlines include custom labels with equation parameters</li>
204
+ </ul>
205
+ </div>
206
+
207
+ <div class="info-section">
208
+ <h3>Configuration Example</h3>
209
+ <p>To use exponential trendlines, configure your dataset with <code>trendlineExponential</code> instead of <code>trendlineLinear</code>:</p>
210
+ <pre><code>trendlineExponential: {
211
+ colorMin: '#ff6b6b',
212
+ colorMax: '#ff6b6b',
213
+ width: 2,
214
+ lineStyle: 'solid',
215
+ label: {
216
+ text: 'Exponential Trend',
217
+ display: true,
218
+ displayValue: true,
219
+ color: '#ff6b6b',
220
+ font: {
221
+ size: 12,
222
+ family: 'Arial',
223
+ },
224
+ offset: 10,
225
+ },
226
+ }</code></pre>
227
+ </div>
228
+
229
+ <div class="info-section">
230
+ <h3>Important Notes</h3>
231
+ <ul>
232
+ <li>Exponential fitting works best with positive y-values</li>
233
+ <li>The label shows the exponential parameters: a (coefficient) and b (growth rate)</li>
234
+ <li>The equation is: y = a * e^(b*x)</li>
235
+ <li>All styling options that work for linear trendlines also work for exponential</li>
236
+ </ul>
237
+ </div>
238
+
239
+ <div class="nav-links">
240
+ <a href="../index.html">← Back to Examples</a>
241
+ </div>
242
+ </div>
243
+ </body>
244
+
245
245
  </html>