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.
- package/.github/copilot-instructions.md +40 -40
- package/.github/workflows/release.yml +64 -61
- package/.github/workflows/tests.yml +26 -26
- package/.prettierrc +5 -5
- package/CLAUDE.md +44 -44
- package/GEMINI.md +40 -40
- package/LICENSE +21 -21
- package/MIGRATION.md +126 -126
- package/README.md +166 -166
- package/babel.config.js +3 -3
- package/changelog.md +39 -39
- package/dist/chartjs-plugin-trendline.cjs +884 -885
- package/dist/chartjs-plugin-trendline.esm.js +882 -883
- package/dist/chartjs-plugin-trendline.js +890 -891
- package/dist/chartjs-plugin-trendline.min.js +8 -8
- package/dist/chartjs-plugin-trendline.min.js.map +1 -1
- package/example/barChart.html +165 -165
- package/example/barChartWithNullValues.html +168 -168
- package/example/barChart_label.html +174 -174
- package/example/exponentialChart.html +244 -244
- package/example/lineChart.html +210 -210
- package/example/lineChartProjection.html +261 -261
- package/example/lineChartTypeTime.html +190 -190
- package/example/scatterChart.html +136 -136
- package/example/scatterProjection.html +141 -141
- package/example/test-null-handling.html +59 -59
- package/index.html +215 -215
- package/jest.config.js +4 -4
- package/package.json +45 -40
- package/rollup.config.js +54 -54
- package/src/components/label.js +56 -56
- package/src/components/label.test.js +129 -129
- package/src/components/trendline.js +375 -375
- package/src/components/trendline.test.js +789 -789
- package/src/core/plugin.js +78 -79
- package/src/core/plugin.test.js +307 -0
- package/src/index.js +12 -12
- package/src/utils/drawing.js +125 -125
- package/src/utils/drawing.test.js +308 -308
- package/src/utils/exponentialFitter.js +146 -146
- package/src/utils/exponentialFitter.test.js +362 -362
- package/src/utils/lineFitter.js +86 -86
- package/src/utils/lineFitter.test.js +340 -340
package/example/barChart.html
CHANGED
|
@@ -1,166 +1,166 @@
|
|
|
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>Bar 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>Bar Chart with Trendline</h1>
|
|
88
|
-
<p class="subtitle">Demonstrates linear trendline fitting on bar chart data</p>
|
|
89
|
-
|
|
90
|
-
<div class="chart-container">
|
|
91
|
-
<div class="chart-wrapper">
|
|
92
|
-
<canvas id="bar-chart"></canvas>
|
|
93
|
-
</div>
|
|
94
|
-
</div>
|
|
95
|
-
|
|
96
|
-
<div class="info-section">
|
|
97
|
-
<h3>Configuration Used</h3>
|
|
98
|
-
<p>This example shows a bar chart with a <code>dotted</code> trendline in pink color. The trendline is configured with:</p>
|
|
99
|
-
<ul>
|
|
100
|
-
<li><strong>colorMin:</strong> <code>"rgba(255,105,180, .8)"</code> - Pink semi-transparent color</li>
|
|
101
|
-
<li><strong>lineStyle:</strong> <code>"dotted"</code> - Dotted line pattern</li>
|
|
102
|
-
<li><strong>width:</strong> <code>2</code> - Line width of 2 pixels</li>
|
|
103
|
-
</ul>
|
|
104
|
-
</div>
|
|
105
|
-
|
|
106
|
-
<div class="nav-links">
|
|
107
|
-
<a href="../index.html">← Back to Examples</a>
|
|
108
|
-
<a href="barChart_label.html">Bar Chart with Label →</a>
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
|
|
112
|
-
<script>
|
|
113
|
-
document.addEventListener("DOMContentLoaded", function () {
|
|
114
|
-
new Chart(document.getElementById("bar-chart"), {
|
|
115
|
-
type: 'bar',
|
|
116
|
-
data: {
|
|
117
|
-
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
|
|
118
|
-
datasets: [
|
|
119
|
-
{
|
|
120
|
-
label: "Population (millions)",
|
|
121
|
-
backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
|
|
122
|
-
data: [2478, 5267, 734, 784, 433],
|
|
123
|
-
trendlineLinear: {
|
|
124
|
-
colorMin: "rgba(255,105,180, .8)",
|
|
125
|
-
lineStyle: "dotted",
|
|
126
|
-
width: 2
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
]
|
|
130
|
-
},
|
|
131
|
-
options: {
|
|
132
|
-
responsive: true,
|
|
133
|
-
maintainAspectRatio: false,
|
|
134
|
-
plugins: {
|
|
135
|
-
legend: {
|
|
136
|
-
display: false
|
|
137
|
-
},
|
|
138
|
-
title: {
|
|
139
|
-
display: true,
|
|
140
|
-
text: 'Predicted World Population (millions) in 2050',
|
|
141
|
-
font: {
|
|
142
|
-
size: 16
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
},
|
|
146
|
-
scales: {
|
|
147
|
-
y: {
|
|
148
|
-
beginAtZero: true,
|
|
149
|
-
title: {
|
|
150
|
-
display: true,
|
|
151
|
-
text: 'Population (millions)'
|
|
152
|
-
}
|
|
153
|
-
},
|
|
154
|
-
x: {
|
|
155
|
-
title: {
|
|
156
|
-
display: true,
|
|
157
|
-
text: 'Regions'
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
});
|
|
163
|
-
});
|
|
164
|
-
</script>
|
|
165
|
-
</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>Bar 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>Bar Chart with Trendline</h1>
|
|
88
|
+
<p class="subtitle">Demonstrates linear trendline fitting on bar chart data</p>
|
|
89
|
+
|
|
90
|
+
<div class="chart-container">
|
|
91
|
+
<div class="chart-wrapper">
|
|
92
|
+
<canvas id="bar-chart"></canvas>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="info-section">
|
|
97
|
+
<h3>Configuration Used</h3>
|
|
98
|
+
<p>This example shows a bar chart with a <code>dotted</code> trendline in pink color. The trendline is configured with:</p>
|
|
99
|
+
<ul>
|
|
100
|
+
<li><strong>colorMin:</strong> <code>"rgba(255,105,180, .8)"</code> - Pink semi-transparent color</li>
|
|
101
|
+
<li><strong>lineStyle:</strong> <code>"dotted"</code> - Dotted line pattern</li>
|
|
102
|
+
<li><strong>width:</strong> <code>2</code> - Line width of 2 pixels</li>
|
|
103
|
+
</ul>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<div class="nav-links">
|
|
107
|
+
<a href="../index.html">← Back to Examples</a>
|
|
108
|
+
<a href="barChart_label.html">Bar Chart with Label →</a>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
|
|
112
|
+
<script>
|
|
113
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
114
|
+
new Chart(document.getElementById("bar-chart"), {
|
|
115
|
+
type: 'bar',
|
|
116
|
+
data: {
|
|
117
|
+
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
|
|
118
|
+
datasets: [
|
|
119
|
+
{
|
|
120
|
+
label: "Population (millions)",
|
|
121
|
+
backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
|
|
122
|
+
data: [2478, 5267, 734, 784, 433],
|
|
123
|
+
trendlineLinear: {
|
|
124
|
+
colorMin: "rgba(255,105,180, .8)",
|
|
125
|
+
lineStyle: "dotted",
|
|
126
|
+
width: 2
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
]
|
|
130
|
+
},
|
|
131
|
+
options: {
|
|
132
|
+
responsive: true,
|
|
133
|
+
maintainAspectRatio: false,
|
|
134
|
+
plugins: {
|
|
135
|
+
legend: {
|
|
136
|
+
display: false
|
|
137
|
+
},
|
|
138
|
+
title: {
|
|
139
|
+
display: true,
|
|
140
|
+
text: 'Predicted World Population (millions) in 2050',
|
|
141
|
+
font: {
|
|
142
|
+
size: 16
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
scales: {
|
|
147
|
+
y: {
|
|
148
|
+
beginAtZero: true,
|
|
149
|
+
title: {
|
|
150
|
+
display: true,
|
|
151
|
+
text: 'Population (millions)'
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
x: {
|
|
155
|
+
title: {
|
|
156
|
+
display: true,
|
|
157
|
+
text: 'Regions'
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
});
|
|
163
|
+
});
|
|
164
|
+
</script>
|
|
165
|
+
</body>
|
|
166
166
|
</html>
|