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
|
@@ -1,169 +1,169 @@
|
|
|
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 with Null Values - 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 Null Values</h1>
|
|
88
|
-
<p class="subtitle">Demonstrates how trendlines handle missing data points (null/undefined)</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 how the trendline plugin handles datasets containing <code>null</code> and <code>undefined</code> values. The trendline automatically excludes these values from calculations:</p>
|
|
99
|
-
<ul>
|
|
100
|
-
<li><strong>Data points:</strong> Includes <code>undefined</code> and <code>null</code> values that are ignored</li>
|
|
101
|
-
<li><strong>colorMin:</strong> <code>"rgba(255,105,180, .8)"</code> - Pink semi-transparent color</li>
|
|
102
|
-
<li><strong>lineStyle:</strong> <code>"dotted"</code> - Dotted line pattern</li>
|
|
103
|
-
<li><strong>width:</strong> <code>2</code> - Line width of 2 pixels</li>
|
|
104
|
-
</ul>
|
|
105
|
-
<p><strong>Note:</strong> The trendline calculation only uses valid numeric data points, automatically filtering out null/undefined values.</p>
|
|
106
|
-
</div>
|
|
107
|
-
|
|
108
|
-
<div class="nav-links">
|
|
109
|
-
<a href="../index.html">← Back to Examples</a>
|
|
110
|
-
<a href="barChart_label.html">← Bar Chart with Label</a>
|
|
111
|
-
<a href="lineChart.html">Line Chart →</a>
|
|
112
|
-
</div>
|
|
113
|
-
</div>
|
|
114
|
-
|
|
115
|
-
<script>
|
|
116
|
-
document.addEventListener("DOMContentLoaded", function () {
|
|
117
|
-
new Chart(document.getElementById("bar-chart"), {
|
|
118
|
-
type: 'bar',
|
|
119
|
-
data: {
|
|
120
|
-
labels: ["Africa", "Asia", "Europe", "Latin America", "Undefined", "null", "North America"],
|
|
121
|
-
datasets: [
|
|
122
|
-
{
|
|
123
|
-
label: "Population (millions)",
|
|
124
|
-
backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#666666", "#ff6b6b"],
|
|
125
|
-
data: [2478, 5267, 734, 784, undefined, null, 433],
|
|
126
|
-
trendlineLinear: {
|
|
127
|
-
colorMin: "rgba(255,105,180, .8)",
|
|
128
|
-
lineStyle: "dotted",
|
|
129
|
-
width: 2
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
]
|
|
133
|
-
},
|
|
134
|
-
options: {
|
|
135
|
-
responsive: true,
|
|
136
|
-
maintainAspectRatio: false,
|
|
137
|
-
plugins: {
|
|
138
|
-
legend: {
|
|
139
|
-
display: false
|
|
140
|
-
},
|
|
141
|
-
title: {
|
|
142
|
-
display: true,
|
|
143
|
-
text: 'Population Data with Missing Values',
|
|
144
|
-
font: {
|
|
145
|
-
size: 16
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
},
|
|
149
|
-
scales: {
|
|
150
|
-
y: {
|
|
151
|
-
beginAtZero: true,
|
|
152
|
-
title: {
|
|
153
|
-
display: true,
|
|
154
|
-
text: 'Population (millions)'
|
|
155
|
-
}
|
|
156
|
-
},
|
|
157
|
-
x: {
|
|
158
|
-
title: {
|
|
159
|
-
display: true,
|
|
160
|
-
text: 'Regions'
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
});
|
|
166
|
-
});
|
|
167
|
-
</script>
|
|
168
|
-
</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 with Null Values - 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 Null Values</h1>
|
|
88
|
+
<p class="subtitle">Demonstrates how trendlines handle missing data points (null/undefined)</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 how the trendline plugin handles datasets containing <code>null</code> and <code>undefined</code> values. The trendline automatically excludes these values from calculations:</p>
|
|
99
|
+
<ul>
|
|
100
|
+
<li><strong>Data points:</strong> Includes <code>undefined</code> and <code>null</code> values that are ignored</li>
|
|
101
|
+
<li><strong>colorMin:</strong> <code>"rgba(255,105,180, .8)"</code> - Pink semi-transparent color</li>
|
|
102
|
+
<li><strong>lineStyle:</strong> <code>"dotted"</code> - Dotted line pattern</li>
|
|
103
|
+
<li><strong>width:</strong> <code>2</code> - Line width of 2 pixels</li>
|
|
104
|
+
</ul>
|
|
105
|
+
<p><strong>Note:</strong> The trendline calculation only uses valid numeric data points, automatically filtering out null/undefined values.</p>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<div class="nav-links">
|
|
109
|
+
<a href="../index.html">← Back to Examples</a>
|
|
110
|
+
<a href="barChart_label.html">← Bar Chart with Label</a>
|
|
111
|
+
<a href="lineChart.html">Line Chart →</a>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
<script>
|
|
116
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
117
|
+
new Chart(document.getElementById("bar-chart"), {
|
|
118
|
+
type: 'bar',
|
|
119
|
+
data: {
|
|
120
|
+
labels: ["Africa", "Asia", "Europe", "Latin America", "Undefined", "null", "North America"],
|
|
121
|
+
datasets: [
|
|
122
|
+
{
|
|
123
|
+
label: "Population (millions)",
|
|
124
|
+
backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#666666", "#ff6b6b"],
|
|
125
|
+
data: [2478, 5267, 734, 784, undefined, null, 433],
|
|
126
|
+
trendlineLinear: {
|
|
127
|
+
colorMin: "rgba(255,105,180, .8)",
|
|
128
|
+
lineStyle: "dotted",
|
|
129
|
+
width: 2
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
]
|
|
133
|
+
},
|
|
134
|
+
options: {
|
|
135
|
+
responsive: true,
|
|
136
|
+
maintainAspectRatio: false,
|
|
137
|
+
plugins: {
|
|
138
|
+
legend: {
|
|
139
|
+
display: false
|
|
140
|
+
},
|
|
141
|
+
title: {
|
|
142
|
+
display: true,
|
|
143
|
+
text: 'Population Data with Missing Values',
|
|
144
|
+
font: {
|
|
145
|
+
size: 16
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
},
|
|
149
|
+
scales: {
|
|
150
|
+
y: {
|
|
151
|
+
beginAtZero: true,
|
|
152
|
+
title: {
|
|
153
|
+
display: true,
|
|
154
|
+
text: 'Population (millions)'
|
|
155
|
+
}
|
|
156
|
+
},
|
|
157
|
+
x: {
|
|
158
|
+
title: {
|
|
159
|
+
display: true,
|
|
160
|
+
text: 'Regions'
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
});
|
|
166
|
+
});
|
|
167
|
+
</script>
|
|
168
|
+
</body>
|
|
169
169
|
</html>
|