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

@@ -1,191 +1,191 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Time Scale Line Chart - Chart.js Trendline Plugin</title>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <!-- Include Chart.js and the Trendline plugin -->
-    <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-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.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>
-</head>
-<body>
-    <div class="container">
-        <h1>Chart.js Trendline Plugin</h1>
-        <p class="subtitle">Time Scale Line Chart with Trendline</p>
-        <div class="chart-container">
-            <div class="chart-wrapper">
-                <canvas id="chartjs"></canvas>
-            </div>
-        </div>
-    </div>
-<script type="text/javascript">
-    // Get the context of the canvas element we want to select
-    const ctx = document.getElementById("chartjs").getContext('2d');
-    const chartDynamics = [
-  {
-    datepost: "2025-03-01T00:00:00",
-    quantity: 75,
-  },
-  {
-    datepost: "2025-03-02T00:00:00",
-    quantity: 64,
-  },
-  {
-    datepost: "2025-03-03T00:00:00",
-    quantity: 52,
-  },
-  {
-    datepost: "2025-03-04T00:00:00",
-    quantity: 23,
-  },
-  {
-    datepost: "2025-03-05T00:00:00",
-    quantity: 44,
-  },
-  {
-    datepost: "2025-03-06T00:00:00",
-    quantity: 38,
-  },
-  {
-    datepost: "2025-03-07T00:00:00",
-    quantity: 44,
-  },
-  {
-    datepost: "2025-03-08T00:00:00",
-    quantity: 41,
-  },
-  {
-    datepost: "2025-03-09T00:00:00",
-    quantity: 78,
-  },
-  {
-    datepost: "2025-03-10T00:00:00",
-    quantity: 31,
-  },
-];
-    // Create a new Chart instance
-    const myChart1 = new Chart(ctx, {
-        type: "line",
-        data: {
-            labels: chartDynamics.map((o) => o.datepost),
-            datasets: [
-            {
-                label: "Daily Quantity",
-                data: chartDynamics.map((o) => o.quantity),
-                borderColor: '#3e95cd',
-                backgroundColor: 'rgba(62,149,205,0.1)',
-                borderWidth: 2,
-                pointStyle: 'circle',
-                pointRadius: 4,
-                pointHoverRadius: 6,
-                fill: false,
-                trendlineLinear: {
-                    colorMin: '#e74c3c',
-                    lineStyle: "dotted",
-                    width: 2,
-                    label: {
-                        display: true,
-                        text: "Trend",
-                        displayValue: true
-                    }
-                },
-            },
-            ],
-        },
-        options: {
-            maintainAspectRatio: false,
-            responsive: true,
-            plugins: {
-                title: {
-                    display: true,
-                    text: 'Time Series Data with Linear Trendline',
-                    font: { size: 16 }
-                },
-                legend: {
-                    display: true,
-                    position: 'top'
-                },
-                tooltip: {
-                    mode: 'index',
-                    intersect: false
-                }
-            },
-            scales: {
-                x: {
-                    type: "time",
-                    time: {
-                        tooltipFormat: "MMM d, yyyy",
-                        displayFormats: {
-                            day: 'MMM d'
-                        },
-                        minUnit: "day"
-                    },
-                    title: {
-                        display: true,
-                        text: 'Date'
-                    }
-                },
-                y: {
-                    title: {
-                        display: true,
-                        text: 'Quantity'
-                    }
-                }
-            },
-            interaction: { mode: "nearest", intersect: false }
-        },
-    });
-</script>
-    <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="lineChartProjection.html" style="display: inline-block; margin: 0 10px; padding: 10px 20px; background: #3498db; color: white; text-decoration: none; border-radius: 4px; font-weight: 500;">← Line Chart Projection</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>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Time Scale Line Chart - Chart.js Trendline Plugin</title>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <!-- Include Chart.js and the Trendline plugin -->
+    <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-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.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>
+</head>
+<body>
+    <div class="container">
+        <h1>Chart.js Trendline Plugin</h1>
+        <p class="subtitle">Time Scale Line Chart with Trendline</p>
+        <div class="chart-container">
+            <div class="chart-wrapper">
+                <canvas id="chartjs"></canvas>
+            </div>
+        </div>
+    </div>
+<script type="text/javascript">
+    // Get the context of the canvas element we want to select
+    const ctx = document.getElementById("chartjs").getContext('2d');
+    const chartDynamics = [
+  {
+    datepost: "2025-03-01T00:00:00",
+    quantity: 75,
+  },
+  {
+    datepost: "2025-03-02T00:00:00",
+    quantity: 64,
+  },
+  {
+    datepost: "2025-03-03T00:00:00",
+    quantity: 52,
+  },
+  {
+    datepost: "2025-03-04T00:00:00",
+    quantity: 23,
+  },
+  {
+    datepost: "2025-03-05T00:00:00",
+    quantity: 44,
+  },
+  {
+    datepost: "2025-03-06T00:00:00",
+    quantity: 38,
+  },
+  {
+    datepost: "2025-03-07T00:00:00",
+    quantity: 44,
+  },
+  {
+    datepost: "2025-03-08T00:00:00",
+    quantity: 41,
+  },
+  {
+    datepost: "2025-03-09T00:00:00",
+    quantity: 78,
+  },
+  {
+    datepost: "2025-03-10T00:00:00",
+    quantity: 31,
+  },
+];
+    // Create a new Chart instance
+    const myChart1 = new Chart(ctx, {
+        type: "line",
+        data: {
+            labels: chartDynamics.map((o) => o.datepost),
+            datasets: [
+            {
+                label: "Daily Quantity",
+                data: chartDynamics.map((o) => o.quantity),
+                borderColor: '#3e95cd',
+                backgroundColor: 'rgba(62,149,205,0.1)',
+                borderWidth: 2,
+                pointStyle: 'circle',
+                pointRadius: 4,
+                pointHoverRadius: 6,
+                fill: false,
+                trendlineLinear: {
+                    colorMin: '#e74c3c',
+                    lineStyle: "dotted",
+                    width: 2,
+                    label: {
+                        display: true,
+                        text: "Trend",
+                        displayValue: true
+                    }
+                },
+            },
+            ],
+        },
+        options: {
+            maintainAspectRatio: false,
+            responsive: true,
+            plugins: {
+                title: {
+                    display: true,
+                    text: 'Time Series Data with Linear Trendline',
+                    font: { size: 16 }
+                },
+                legend: {
+                    display: true,
+                    position: 'top'
+                },
+                tooltip: {
+                    mode: 'index',
+                    intersect: false
+                }
+            },
+            scales: {
+                x: {
+                    type: "time",
+                    time: {
+                        tooltipFormat: "MMM d, yyyy",
+                        displayFormats: {
+                            day: 'MMM d'
+                        },
+                        minUnit: "day"
+                    },
+                    title: {
+                        display: true,
+                        text: 'Date'
+                    }
+                },
+                y: {
+                    title: {
+                        display: true,
+                        text: 'Quantity'
+                    }
+                }
+            },
+            interaction: { mode: "nearest", intersect: false }
+        },
+    });
+</script>
+    <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="lineChartProjection.html" style="display: inline-block; margin: 0 10px; padding: 10px 20px; background: #3498db; color: white; text-decoration: none; border-radius: 4px; font-weight: 500;">← Line Chart Projection</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>
+</body>
 </html>

package/example/scatterChart.html CHANGED Viewed

@@ -1,136 +1,136 @@
-<!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 - 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-chart"), {
-        type: 'scatter',
-        data: {
-          datasets: [
-            {
-              label: "Sample Data Points",
-              data: [
-                {x: 12.39, y: 130},
-                {x: 12.39, y: 142},
-                {x: 11.39, y: 170},
-                {x: 13.14, y: 12268},
-                {x: 13.14, y: 9947}
-              ],
-              backgroundColor: "#3e95cd",
-              borderColor: "#2980b9",
-              pointRadius: 6,
-              pointHoverRadius: 8,
-              trendlineLinear: {
-                colorMin: "#e74c3c",
-                lineStyle: "dotted",
-                width: 2,
-                label: {
-                  display: true,
-                  text: "Linear Trend",
-                  displayValue: true
-                }
-              }
-            }
-          ]
-        },
-        options: {
-          maintainAspectRatio: false,
-          responsive: true,
-          plugins: {
-            title: {
-              display: true,
-              text: 'Scatter Plot with Linear Trendline',
-              font: { size: 16 }
-            },
-            legend: {
-              display: true,
-              position: 'top'
-            },
-            tooltip: {
-              mode: 'point',
-              intersect: true
-            }
-          },
-          scales: {
-            x: {
-              type: 'linear',
-              position: 'bottom',
-              title: {
-                display: true,
-                text: 'X Value'
-              }
-            },
-            y: {
-              title: {
-                display: true,
-                text: 'Y Value'
-              }
-            }
-          }
-        }
-      });
-    });
-  </script>
-</head>
-<body>
-  <div class="container">
-    <h1>Chart.js Trendline Plugin</h1>
-    <p class="subtitle">Scatter Chart with Linear Trendline</p>
-    <div class="chart-container">
-      <div class="chart-wrapper">
-        <canvas id="scatter-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="lineChartTypeTime.html" style="display: inline-block; margin: 0 10px; padding: 10px 20px; background: #3498db; color: white; text-decoration: none; border-radius: 4px; font-weight: 500;">← Time Series Line Chart</a>
-      <a href="scatterProjection.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 Projection →</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 - 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-chart"), {
+        type: 'scatter',
+        data: {
+          datasets: [
+            {
+              label: "Sample Data Points",
+              data: [
+                {x: 12.39, y: 130},
+                {x: 12.39, y: 142},
+                {x: 11.39, y: 170},
+                {x: 13.14, y: 12268},
+                {x: 13.14, y: 9947}
+              ],
+              backgroundColor: "#3e95cd",
+              borderColor: "#2980b9",
+              pointRadius: 6,
+              pointHoverRadius: 8,
+              trendlineLinear: {
+                colorMin: "#e74c3c",
+                lineStyle: "dotted",
+                width: 2,
+                label: {
+                  display: true,
+                  text: "Linear Trend",
+                  displayValue: true
+                }
+              }
+            }
+          ]
+        },
+        options: {
+          maintainAspectRatio: false,
+          responsive: true,
+          plugins: {
+            title: {
+              display: true,
+              text: 'Scatter Plot with Linear Trendline',
+              font: { size: 16 }
+            },
+            legend: {
+              display: true,
+              position: 'top'
+            },
+            tooltip: {
+              mode: 'point',
+              intersect: true
+            }
+          },
+          scales: {
+            x: {
+              type: 'linear',
+              position: 'bottom',
+              title: {
+                display: true,
+                text: 'X Value'
+              }
+            },
+            y: {
+              title: {
+                display: true,
+                text: 'Y Value'
+              }
+            }
+          }
+        }
+      });
+    });
+  </script>
+</head>
+<body>
+  <div class="container">
+    <h1>Chart.js Trendline Plugin</h1>
+    <p class="subtitle">Scatter Chart with Linear Trendline</p>
+    <div class="chart-container">
+      <div class="chart-wrapper">
+        <canvas id="scatter-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="lineChartTypeTime.html" style="display: inline-block; margin: 0 10px; padding: 10px 20px; background: #3498db; color: white; text-decoration: none; border-radius: 4px; font-weight: 500;">← Time Series Line Chart</a>
+      <a href="scatterProjection.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 Projection →</a>
+    </div>
+  </div>
+</body>
+</html>