pomgui · xTCry · Jun 6, 2021 · Jun 6, 2021 · Jun 6, 2021 · Jun 6, 2021
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-[![NPM version](https://img.shields.io/npm/v/chartjs-plugin-regression.svg)](https://npmjs.org/package/chartjs-plugin-regression) 
+[![NPM version](https://img.shields.io/npm/v/chartjs-plugin-regression.svg)](https://npmjs.com/package/chartjs-plugin-regression) 
 [![License](http://img.shields.io/badge/license-ISC-blue.svg)](https://github.com/pomgui/chartjs-plugin-regression/blob/master/LICENSE)
-[![NPM downloads](https://img.shields.io/npm/dm/chartjs-plugin-regression.svg)](https://npmjs.org/package/chartjs-plugin-regression)
+[![NPM downloads](https://img.shields.io/npm/dm/chartjs-plugin-regression.svg)](https://npmjs.com/package/chartjs-plugin-regression)
 
 # chartjs-plugin-regression
 Chart.js plugin to calculate and draw statistical linear, exponential, power, 
@@ -11,20 +11,22 @@ npm package as its calculation engine.
 
 ### Important
 - Only `bar`, `line`, and `scatter` chart types are supported.
-- The plugin works just fine with chart.js@2.5.0, however that version may have some problems handling certain color configuration (not related with the plugin). No problems have been found with chart.js@^2.6.0.
-- The plugin does not work with chart.js@3.x
+- The plugin works with chart.js@3.x
+- To use the plugin for chart.js@2.x, then use [this version](https://www.npmjs.com/package/chartjs-plugin-regression/v/0.2.1) of the plugin
 
 ## Demo
 For a better understanding of the capabilities of this plugin, please see this 
 [Live Demo](https://pomgui.github.io/chartjs-plugin-regression/demo/).
 
 ## Download
-The [compressed](https://pomgui.github.io/chartjs-plugin-regression/dist/chartjs-plugin-regression-0.2.1.js)
+The [compressed](https://pomgui.github.io/chartjs-plugin-regression/dist/chartjs-plugin-regression-3.0.0.js)
 version includes the regression package.
 
 ## Installation
 
-    npm install --save chartjs-plugin-regression
+```sh
+npm install --save chartjs-plugin-regression
+```
 
 ## Usage
 

diff --git a/demo/demo.js b/demo/demo.js
@@ -55,9 +55,10 @@ function piChart_LinkFn($scope, element) {
       options: {
         plugins: {
           // Global configuration of the plugin for all the datasets
-          regressions: Object.assign({
-            onCompleteCalculation: showRegressionResults
-          },
+          regressions: Object.assign(
+            {
+              onCompleteCalculation: showRegressionResults
+            },
             $scope.sample.optionsCfg
           )
         },

diff --git a/demo/demoHelpers.js b/demo/demoHelpers.js
@@ -83,8 +83,45 @@ var helpers = new (function () {
   };
 
   this.color = function (id, alpha) {
-    const c = new Color({ h: id * 16, s: 100, l: 50 });
-    c.alpha(alpha);
-    return c.rgbaString();
+    var [r, g, b] = hslToRgb(id / 100, 1, 0.5);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  };
+
+  /**
+   * Converts an HSL color value to RGB. Conversion formula
+   * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+   * Assumes h, s, and l are contained in the set [0, 1] and
+   * returns r, g, and b in the set [0, 255].
+   *
+   * Source: https://stackoverflow.com/a/29316972/8524080
+   * 
+   * @param   {number}  h       The hue
+   * @param   {number}  s       The saturation
+   * @param   {number}  l       The lightness
+   * @return  {Array}           The RGB representation
+   */
+  function hslToRgb(h, s, l) {
+    var r, g, b;
+
+    if (s == 0) {
+      r = g = b = l; // achromatic
+    } else {
+      var hue2rgb = function hue2rgb(p, q, t) {
+        if (t < 0) t += 1;
+        if (t > 1) t -= 1;
+        if (t < 1 / 6) return p + (q - p) * 6 * t;
+        if (t < 1 / 2) return q;
+        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+      }
+
+      var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      var p = 2 * l - q;
+      r = hue2rgb(p, q, h + 1 / 3);
+      g = hue2rgb(p, q, h);
+      b = hue2rgb(p, q, h - 1 / 3);
+    }
+
+    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
   }
 })();
diff --git a/demo/index.html b/demo/index.html
@@ -4,13 +4,11 @@
 <head>
     <meta charset="UTF-8">
     <title>chartjs-plugin-regression</title>
-    <script
-        src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
     <link rel="stylesheet" href="demo.css">
-    <script
-        src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
-    <script type="text/javascript"
-        src="../dist/chartjs-plugin-regression-0.2.1.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.js"></script>
+
+    <script type="text/javascript" src="../dist/chartjs-plugin-regression-3.0.0.js"></script>
     <script type="text/javascript" src="./demoData.js"></script>
     <script type="text/javascript" src="./demoHelpers.js"></script>
     <script type="text/javascript" src="./demo.js"></script>
@@ -31,13 +29,11 @@ <h2 ng-bind="sample.subtitle"></h2>
                         <div>
                             <div ng-if="sample.optionsCfg">
                                 <h3>Global Options Config</h3>
-                                <pre
-                                    ng-bind="$ctrl.format(sample.optionsCfg)"></pre>
+                                <pre ng-bind="$ctrl.format(sample.optionsCfg)"></pre>
                             </div>
                             <div ng-if="sample.datasetCfg">
                                 <h3>Dataset Config</h3>
-                                <pre
-                                    ng-bind="$ctrl.format(sample.datasetCfg)"></pre>
+                                <pre ng-bind="$ctrl.format(sample.datasetCfg)"></pre>
                             </div>
                         </div>
                     </div>

diff --git a/dist/chartjs-plugin-regression-3.0.0.js b/dist/chartjs-plugin-regression-3.0.0.js
diff --git a/package.json b/package.json
@@ -1,17 +1,18 @@
 {
   "name": "chartjs-plugin-regression",
-  "version": "0.2.1",
+  "version": "3.0.0",
   "description": "Plugin to draw a regression line",
   "main": "lib/index.js",
   "scripts": {
+    "watch": "./node_modules/.bin/tsc-watch --onSuccess \"webpack -w --mode development\"",
     "build": "tsc && webpack --mode development",
     "format": "prettier --write \"src/**/*.ts\" \"demo/**/*.js\"",
     "lint": "tslint -p tsconfig.json",
     "test": "echo \"Warning: no test specified\"",
     "preversion": "npm test",
     "version": "node bin/setversion.js && npm run prepare && git add -A",
     "postversion": "git push && git push --tags",
-    "prepare": "find . -name '*.map' -delete; tsc && webpack --mode production"
+    "prepare": "tsc && webpack --mode production"
   },
   "repository": {
     "type": "git",
@@ -32,10 +33,10 @@
   "author": "Wilfredo Pomier ([email protected])",
   "license": "ISC",
   "devDependencies": {
-    "@types/chart.js": "^2.9.22",
     "@types/regression": "^2.0.0",
     "prettier": "^2.0.5",
     "source-map-loader": "^1.0.1",
+    "tsc-watch": "^4.4.0",
     "tslint": "^6.1.2",
     "tslint-config-prettier": "^1.18.0",
     "typescript": "^3.9.6"
@@ -44,7 +45,7 @@
     "regression": "^2.0.1"
   },
   "peerDependencies": {
-    "chart.js": "^2.6.0"
+    "chart.js": "3.1.0"
   },
   "files": [
     "lib/**/*"

diff --git a/src/MetaData.ts b/src/MetaData.ts
@@ -1,7 +1,7 @@
-import { Options, DataPoint } from 'regression';
-import { Section, LineOptions, ChartDataSetsEx, DatasetConfig } from './types';
-import { Point } from 'chart.js';
+import { DataPoint } from 'regression';
+import { Point, Chart } from 'chart.js';
 import { MetaSection } from './MetaSection';
+import { Section, ChartDataSetsEx, DatasetConfig } from './types';
 
 type GetXY = (x: number, y: number) => Point;
 
@@ -78,7 +78,7 @@ export class MetaDataSet {
   }
 
   drawRegressions() {
-    const ctx: CanvasRenderingContext2D = (this.chart as any).chart.ctx;
+    const ctx: CanvasRenderingContext2D = this.chart.ctx;
     ctx.save();
     try {
       this.sections.forEach(section => section.drawRegressions(ctx));
@@ -88,7 +88,7 @@ export class MetaDataSet {
   }
 
   drawRightBorders() {
-    const ctx: CanvasRenderingContext2D = (this.chart as any).chart.ctx;
+    const ctx: CanvasRenderingContext2D = this.chart.ctx;
     ctx.save();
     try {
       for (let i = 0; i < this.sections.length - 1; i++)

diff --git a/src/MetaSection.ts b/src/MetaSection.ts
@@ -138,15 +138,18 @@ export class MetaSection implements Section, BasicOptions {
   }
 
   private _calculateCopySection(sectionData: regression.DataPoint[]) {
-    const from = this._meta.sections[this.copy.fromSectionIndex!],
-      r = (this.result = Object.assign({}, from.result)),
-      overwrite = this.copy.overwriteData,
-      data = this._meta.normalizedData;
+    const from = this._meta.sections[this.copy.fromSectionIndex!];
+    const r = (this.result = Object.assign({}, from.result));
+    const overwrite = this.copy.overwriteData;
+    const data = this._meta.normalizedData;
+
     r.points = sectionData.map(p => r.predict(p[0])) as any;
-    delete r.r2;
+    delete (r as any).r2;
+
     if (overwrite != 'none') {
-      const dsdata = this._meta.dataset.data!,
-        isXY = this._meta.isXY;
+      const dsdata = this._meta.dataset.data!;
+      const isXY = this._meta.isXY;
+
       r.points.forEach(([x, y], i) => {
         const index = i + this.startIndex;
         if (