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/lineChart.html CHANGED
@@ -1,211 +1,211 @@
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>Line Chart - 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
- </style>
84
- </head>
85
- <body>
86
- <div class="container">
87
- <h1>Line Chart with Labeled Trendlines</h1>
88
- <p class="subtitle">Multiple datasets with different trendline styles and custom labels</p>
89
-
90
- <div class="chart-container">
91
- <div class="chart-wrapper">
92
- <canvas id="line-chart"></canvas>
93
- </div>
94
- </div>
95
-
96
- <div class="info-section">
97
- <h3>Configuration Features</h3>
98
- <p>This example demonstrates advanced trendline features on line chart data:</p>
99
- <ul>
100
- <li><strong>Multiple datasets:</strong> Each with unique trendline configurations</li>
101
- <li><strong>Custom labels:</strong> Asia dataset shows custom label positioning with offset</li>
102
- <li><strong>Legend integration:</strong> Custom legend text for trendlines</li>
103
- <li><strong>Line styles:</strong> Solid, dashed, and dotted trendlines</li>
104
- <li><strong>Color gradients:</strong> Asia trendline uses colorMin/colorMax for gradient effect</li>
105
- </ul>
106
- </div>
107
-
108
- <div class="nav-links">
109
- <a href="../index.html">← Back to Examples</a>
110
- <a href="barChartWithNullValues.html">← Bar Chart with Null Values</a>
111
- <a href="lineChartProjection.html">Line Chart Projection →</a>
112
- </div>
113
- </div>
114
-
115
- <script>
116
- document.addEventListener('DOMContentLoaded', function (event) {
117
- new Chart(document.getElementById('line-chart'), {
118
- type: 'line',
119
- data: {
120
- labels: [
121
- 1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950,
122
- 1999, 2050,
123
- ],
124
- datasets: [
125
- {
126
- data: [
127
- 86, 114, 106, 106, 107, 111, 133, 221, 783,
128
- 2478,
129
- ],
130
- label: 'Africa',
131
- borderColor: '#3e95cd',
132
- fill: false,
133
- trendlineLinear: {
134
- colorMin: '#3e95cd',
135
- width: 1,
136
- lineStyle: 'solid',
137
- },
138
- },
139
- {
140
- data: [
141
- 282, 350, 411, 502, 635, 809, 947, 1402,
142
- 3700, 5267,
143
- ],
144
- label: 'Asia',
145
- borderColor: '#8e5ea2',
146
- fill: false,
147
- trendlineLinear: {
148
- colorMin: 'red',
149
- colorMax: 'green',
150
- lineStyle: 'dashed',
151
- width: 1,
152
- label: {
153
- font: {
154
- size: 12,
155
- },
156
- color: 'red',
157
- text: 'Asia',
158
- displayValue: false,
159
- offset: 10,
160
- },
161
- legend: {
162
- color: 'red',
163
- text: 'Asian trendline',
164
- display: true,
165
- lineDash: [8, 3],
166
- },
167
- },
168
- },
169
- {
170
- data: [
171
- 168, 170, 178, 190, 203, 276, 408, 547, 675,
172
- 734,
173
- ],
174
- label: 'Europe',
175
- borderColor: '#3cba9f',
176
- fill: false,
177
- },
178
- {
179
- data: [
180
- 40, 20, 10, 16, 24, 38, 74, 167, 508, 784,
181
- ],
182
- label: 'Latin America',
183
- borderColor: '#e8c3b9',
184
- fill: false,
185
- },
186
- {
187
- data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
188
- label: 'North America',
189
- borderColor: '#c45850',
190
- fill: false,
191
- },
192
- ],
193
- },
194
- options: {
195
- responsive: true,
196
- maintainAspectRatio: false,
197
- plugins: {
198
- title: {
199
- display: true,
200
- text: 'World population per region (in millions)',
201
- font: {
202
- size: 16
203
- }
204
- },
205
- },
206
- },
207
- });
208
- });
209
- </script>
210
- </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
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
+ <title>Line Chart - 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
+ </style>
84
+ </head>
85
+ <body>
86
+ <div class="container">
87
+ <h1>Line Chart with Labeled Trendlines</h1>
88
+ <p class="subtitle">Multiple datasets with different trendline styles and custom labels</p>
89
+
90
+ <div class="chart-container">
91
+ <div class="chart-wrapper">
92
+ <canvas id="line-chart"></canvas>
93
+ </div>
94
+ </div>
95
+
96
+ <div class="info-section">
97
+ <h3>Configuration Features</h3>
98
+ <p>This example demonstrates advanced trendline features on line chart data:</p>
99
+ <ul>
100
+ <li><strong>Multiple datasets:</strong> Each with unique trendline configurations</li>
101
+ <li><strong>Custom labels:</strong> Asia dataset shows custom label positioning with offset</li>
102
+ <li><strong>Legend integration:</strong> Custom legend text for trendlines</li>
103
+ <li><strong>Line styles:</strong> Solid, dashed, and dotted trendlines</li>
104
+ <li><strong>Color gradients:</strong> Asia trendline uses colorMin/colorMax for gradient effect</li>
105
+ </ul>
106
+ </div>
107
+
108
+ <div class="nav-links">
109
+ <a href="../index.html">← Back to Examples</a>
110
+ <a href="barChartWithNullValues.html">← Bar Chart with Null Values</a>
111
+ <a href="lineChartProjection.html">Line Chart Projection →</a>
112
+ </div>
113
+ </div>
114
+
115
+ <script>
116
+ document.addEventListener('DOMContentLoaded', function (event) {
117
+ new Chart(document.getElementById('line-chart'), {
118
+ type: 'line',
119
+ data: {
120
+ labels: [
121
+ 1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950,
122
+ 1999, 2050,
123
+ ],
124
+ datasets: [
125
+ {
126
+ data: [
127
+ 86, 114, 106, 106, 107, 111, 133, 221, 783,
128
+ 2478,
129
+ ],
130
+ label: 'Africa',
131
+ borderColor: '#3e95cd',
132
+ fill: false,
133
+ trendlineLinear: {
134
+ colorMin: '#3e95cd',
135
+ width: 1,
136
+ lineStyle: 'solid',
137
+ },
138
+ },
139
+ {
140
+ data: [
141
+ 282, 350, 411, 502, 635, 809, 947, 1402,
142
+ 3700, 5267,
143
+ ],
144
+ label: 'Asia',
145
+ borderColor: '#8e5ea2',
146
+ fill: false,
147
+ trendlineLinear: {
148
+ colorMin: 'red',
149
+ colorMax: 'green',
150
+ lineStyle: 'dashed',
151
+ width: 1,
152
+ label: {
153
+ font: {
154
+ size: 12,
155
+ },
156
+ color: 'red',
157
+ text: 'Asia',
158
+ displayValue: false,
159
+ offset: 10,
160
+ },
161
+ legend: {
162
+ color: 'red',
163
+ text: 'Asian trendline',
164
+ display: true,
165
+ lineDash: [8, 3],
166
+ },
167
+ },
168
+ },
169
+ {
170
+ data: [
171
+ 168, 170, 178, 190, 203, 276, 408, 547, 675,
172
+ 734,
173
+ ],
174
+ label: 'Europe',
175
+ borderColor: '#3cba9f',
176
+ fill: false,
177
+ },
178
+ {
179
+ data: [
180
+ 40, 20, 10, 16, 24, 38, 74, 167, 508, 784,
181
+ ],
182
+ label: 'Latin America',
183
+ borderColor: '#e8c3b9',
184
+ fill: false,
185
+ },
186
+ {
187
+ data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
188
+ label: 'North America',
189
+ borderColor: '#c45850',
190
+ fill: false,
191
+ },
192
+ ],
193
+ },
194
+ options: {
195
+ responsive: true,
196
+ maintainAspectRatio: false,
197
+ plugins: {
198
+ title: {
199
+ display: true,
200
+ text: 'World population per region (in millions)',
201
+ font: {
202
+ size: 16
203
+ }
204
+ },
205
+ },
206
+ },
207
+ });
208
+ });
209
+ </script>
210
+ </body>
211
211
  </html>