npm - chartjs-plugin-trendline - Versions diffs - 3.2.0 → 3.2.3 - Mend

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

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/scatterProjection.html CHANGED Viewed

@@ -1,141 +1,141 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Scatter Chart Projection - Chart.js Trendline Plugin</title>
-  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
-  <style>
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      margin: 0;
-      padding: 40px 20px;
-      background-color: #f8f9fa;
-      color: #333;
-      line-height: 1.6;
-    }
-    .container {
-      max-width: 1000px;
-      margin: 0 auto;
-    }
-    h1 {
-      text-align: center;
-      color: #2c3e50;
-      margin-bottom: 10px;
-      font-size: 2.5rem;
-    }
-    .subtitle {
-      text-align: center;
-      color: #7f8c8d;
-      margin-bottom: 40px;
-      font-size: 1.1rem;
-    }
-    .chart-container {
-      background: white;
-      padding: 30px;
-      border-radius: 8px;
-      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-      margin-bottom: 30px;
-    }
-    .chart-wrapper {
-      position: relative;
-      height: 400px;
-    }
-  </style>
-  <script>
-    document.addEventListener("DOMContentLoaded", function () {
-      new Chart(document.getElementById("scatter-projection-chart"), {
-        type: 'scatter',
-        data: {
-          datasets: [
-            {
-              label: 'Data Points',
-              backgroundColor: '#3e95cd',
-              borderColor: '#2980b9',
-              pointRadius: 6,
-              pointHoverRadius: 8,
-              data: [
-                {x: 2, y: 1},
-                {x: 2.5, y: 2},
-                {x: 1.5, y: 3},
-                {x: 2, y: 4}
-              ],
-              trendlineLinear: {
-                width: 2,
-                lineStyle: 'solid',
-                colorMin: '#e74c3c',
-                colorMax: '#e74c3c',
-                projection: true,
-                label: {
-                  display: true,
-                  text: 'Projected Trend',
-                  displayValue: true
-                }
-              }
-            }
-          ]
-        },
-        options: {
-          maintainAspectRatio: false,
-          responsive: true,
-          plugins: {
-            title: {
-              display: true,
-              text: 'Scatter Plot with Projected Trendline',
-              font: { size: 16 }
-            },
-            legend: {
-              display: true,
-              position: 'top'
-            },
-            tooltip: {
-              mode: 'point',
-              intersect: true
-            }
-          },
-          scales: {
-            x: {
-              type: 'linear',
-              position: 'bottom',
-              min: 0,
-              max: 4,
-              title: {
-                display: true,
-                text: 'X Value'
-              }
-            },
-            y: {
-              type: 'linear',
-              position: 'left',
-              min: 0,
-              title: {
-                display: true,
-                text: 'Y Value'
-              }
-            }
-          }
-        }
-      });
-    });
-  </script>
-</head>
-<body>
-  <div class="container">
-    <h1>Chart.js Trendline Plugin</h1>
-    <p class="subtitle">Scatter Chart with Projected Trendline</p>
-    <div class="chart-container">
-      <div class="chart-wrapper">
-        <canvas id="scatter-projection-chart"></canvas>
-      </div>
-    </div>
-    <div style="text-align: center; margin-top: 30px;">
-      <a href="../index.html" style="display: inline-block; margin: 0 10px; padding: 10px 20px; background: #3498db; color: white; text-decoration: none; border-radius: 4px; font-weight: 500;">← Back to Examples</a>
-      <a href="scatterChart.html" style="display: inline-block; margin: 0 10px; padding: 10px 20px; background: #3498db; color: white; text-decoration: none; border-radius: 4px; font-weight: 500;">← Scatter Chart</a>
-    </div>
-  </div>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Scatter Chart Projection - Chart.js Trendline Plugin</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      margin: 0;
+      padding: 40px 20px;
+      background-color: #f8f9fa;
+      color: #333;
+      line-height: 1.6;
+    }
+    .container {
+      max-width: 1000px;
+      margin: 0 auto;
+    }
+    h1 {
+      text-align: center;
+      color: #2c3e50;
+      margin-bottom: 10px;
+      font-size: 2.5rem;
+    }
+    .subtitle {
+      text-align: center;
+      color: #7f8c8d;
+      margin-bottom: 40px;
+      font-size: 1.1rem;
+    }
+    .chart-container {
+      background: white;
+      padding: 30px;
+      border-radius: 8px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+      margin-bottom: 30px;
+    }
+    .chart-wrapper {
+      position: relative;
+      height: 400px;
+    }
+  </style>
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      new Chart(document.getElementById("scatter-projection-chart"), {
+        type: 'scatter',
+        data: {
+          datasets: [
+            {
+              label: 'Data Points',
+              backgroundColor: '#3e95cd',
+              borderColor: '#2980b9',
+              pointRadius: 6,
+              pointHoverRadius: 8,
+              data: [
+                {x: 2, y: 1},
+                {x: 2.5, y: 2},
+                {x: 1.5, y: 3},
+                {x: 2, y: 4}
+              ],
+              trendlineLinear: {
+                width: 2,
+                lineStyle: 'solid',
+                colorMin: '#e74c3c',
+                colorMax: '#e74c3c',
+                projection: true,
+                label: {
+                  display: true,
+                  text: 'Projected Trend',
+                  displayValue: true
+                }
+              }
+            }
+          ]
+        },
+        options: {
+          maintainAspectRatio: false,
+          responsive: true,
+          plugins: {
+            title: {
+              display: true,
+              text: 'Scatter Plot with Projected Trendline',
+              font: { size: 16 }
+            },
+            legend: {
+              display: true,
+              position: 'top'
+            },
+            tooltip: {
+              mode: 'point',
+              intersect: true
+            }
+          },
+          scales: {
+            x: {
+              type: 'linear',
+              position: 'bottom',
+              min: 0,
+              max: 4,
+              title: {
+                display: true,
+                text: 'X Value'
+              }
+            },
+            y: {
+              type: 'linear',
+              position: 'left',
+              min: 0,
+              title: {
+                display: true,
+                text: 'Y Value'
+              }
+            }
+          }
+        }
+      });
+    });
+  </script>
+</head>
+<body>
+  <div class="container">
+    <h1>Chart.js Trendline Plugin</h1>
+    <p class="subtitle">Scatter Chart with Projected Trendline</p>
+    <div class="chart-container">
+      <div class="chart-wrapper">
+        <canvas id="scatter-projection-chart"></canvas>
+      </div>
+    </div>
+    <div style="text-align: center; margin-top: 30px;">
+      <a href="../index.html" style="display: inline-block; margin: 0 10px; padding: 10px 20px; background: #3498db; color: white; text-decoration: none; border-radius: 4px; font-weight: 500;">← Back to Examples</a>
+      <a href="scatterChart.html" style="display: inline-block; margin: 0 10px; padding: 10px 20px; background: #3498db; color: white; text-decoration: none; border-radius: 4px; font-weight: 500;">← Scatter Chart</a>
+    </div>
+  </div>
+</body>
+</html>

package/example/test-null-handling.html CHANGED Viewed

@@ -1,60 +1,60 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Test Null Handling</title>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
-</head>
-<body>
-    <canvas id="test-chart" width="400" height="200"></canvas>
-    <script>
-        // Test with the exact data structure from lineChartProjection.html Dataset 3
-        const testData = [
-            { x: 50, y: 10 },
-            { x: 55, y: 12 },
-            { x: 60, y: 15 },
-            null,
-            { x: 70, y: 18 },
-            { x: 75, y: 22 },
-            {x: 65, y: null}
-        ];
-        console.log('Test data:', testData);
-        try {
-            const chart = new Chart(document.getElementById('test-chart'), {
-                type: 'line',
-                data: {
-                    datasets: [{
-                        data: testData,
-                        label: "Test Dataset",
-                        borderColor: "#4BC0C0",
-                        trendlineLinear: {
-                            colorMin: "#4BC0C0",
-                            lineStyle: "solid",
-                            width: 2,
-                            projection: true
-                        }
-                    }]
-                },
-                options: {
-                    scales: {
-                        x: {
-                            type: 'linear',
-                            position: 'bottom'
-                        },
-                        y: {
-                            type: 'linear',
-                            position: 'left'
-                        }
-                    }
-                }
-            });
-            console.log('Chart created successfully');
-        } catch (error) {
-            console.error('Error creating chart:', error);
-        }
-    </script>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Test Null Handling</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline/dist/chartjs-plugin-trendline.min.js"></script>
+</head>
+<body>
+    <canvas id="test-chart" width="400" height="200"></canvas>
+    <script>
+        // Test with the exact data structure from lineChartProjection.html Dataset 3
+        const testData = [
+            { x: 50, y: 10 },
+            { x: 55, y: 12 },
+            { x: 60, y: 15 },
+            null,
+            { x: 70, y: 18 },
+            { x: 75, y: 22 },
+            {x: 65, y: null}
+        ];
+        console.log('Test data:', testData);
+        try {
+            const chart = new Chart(document.getElementById('test-chart'), {
+                type: 'line',
+                data: {
+                    datasets: [{
+                        data: testData,
+                        label: "Test Dataset",
+                        borderColor: "#4BC0C0",
+                        trendlineLinear: {
+                            colorMin: "#4BC0C0",
+                            lineStyle: "solid",
+                            width: 2,
+                            projection: true
+                        }
+                    }]
+                },
+                options: {
+                    scales: {
+                        x: {
+                            type: 'linear',
+                            position: 'bottom'
+                        },
+                        y: {
+                            type: 'linear',
+                            position: 'left'
+                        }
+                    }
+                }
+            });
+            console.log('Chart created successfully');
+        } catch (error) {
+            console.error('Error creating chart:', error);
+        }
+    </script>
+</body>
 </html>