Switch from chartjs-color to @kurkle/color (#7059)

diff --git a/package-lock.json b/package-lock.json
index c49fdc6172c05c4d0194aebfd0e5315bbd3c1120..54d255743418238b51b252de40b0886c823c6089 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -779,6 +779,11 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@kurkle/color": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.1.1.tgz",
+      "integrity": "sha512-rpgJFEVJQNwCLSPiBbSSzR3ujRFXuwTRJEzYEto5/L5hsvEzoEHq0M72A6GJC5tWO/CF+tlS5Ii9hUb+Geiu1A=="
+    },
     "@types/estree": {
       "version": "0.0.39",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
@@ -2199,23 +2204,6 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
-    "chartjs-color": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
-      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
-      "requires": {
-        "chartjs-color-string": "^0.6.0",
-        "color-convert": "^1.9.3"
-      }
-    },
-    "chartjs-color-string": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
-      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
-      "requires": {
-        "color-name": "^1.0.0"
-      }
-    },
     "chokidar": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
@@ -2439,6 +2427,7 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       },
@@ -2446,15 +2435,11 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "dev": true
         }
       }
     },
-    "color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-    },
     "color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",

diff --git a/package.json b/package.json
index 3a145ecfa3078e0b32d71ddd85240b5fa8bdb840..477e368f00251a6e5ed7c16900dd52ab573ca003 100644 (file)
--- a/package.json
+++ b/package.json
@@ -75,6 +75,6 @@
     "yargs": "^14.0.0"
   },
   "dependencies": {
-    "chartjs-color": "^2.1.0"
+    "@kurkle/color": "^0.1.1"
   }
 }

diff --git a/src/core/core.animation.js b/src/core/core.animation.js
index a468a0abfa23e708a3a8da79d9f791d25181b605..2049234719a10f7974a2d4ba8f9952b86fc4a9bf 100644 (file)
--- a/src/core/core.animation.js
+++ b/src/core/core.animation.js
@@ -13,7 +13,7 @@ const interpolators = {
                var c0 = helpers.color(from || transparent);
                var c1 = c0.valid && helpers.color(to || transparent);
                return c1 && c1.valid
-                       ? c1.mix(c0, factor).rgbaString()
+                       ? c1.mix(c0, factor).hexString()
                        : to;
        },
        number: function(from, to, factor) {

diff --git a/src/helpers/index.js b/src/helpers/index.js
index edec7dbd0a02c54c508361339e5659e81a86124e..929b33945d8d4b44cceaf48ffd0d7236ad9fe70d 100644 (file)
--- a/src/helpers/index.js
+++ b/src/helpers/index.js
@@ -1,6 +1,6 @@
 'use strict';
 
-import color from 'chartjs-color';
+import color from '@kurkle/color';
 
 import * as coreHelpers from './helpers.core';
 import * as canvas from './helpers.canvas';
@@ -49,6 +49,6 @@ export default {
        getHoverColor: function(colorValue) {
                return (colorValue instanceof CanvasPattern || colorValue instanceof CanvasGradient) ?
                        colorValue :
-                       colorHelper(colorValue).saturate(0.5).darken(0.1).rgbString();
+                       colorHelper(colorValue).saturate(0.5).darken(0.1).hexString();
        }
 };

diff --git a/test/specs/controller.bar.tests.js b/test/specs/controller.bar.tests.js
index 5bf4318dbfe5ab66e092fd17543501528fdab2fa..4ef8026d339ce8e19bc540084ddae656bc674828 100644 (file)
--- a/test/specs/controller.bar.tests.js
+++ b/test/specs/controller.bar.tests.js
@@ -1279,8 +1279,8 @@ describe('Chart.controllers.bar', function() {
                var bar = meta.data[0];
 
                meta.controller.setHoverStyle(bar, 1, 0);
-               expect(bar.options.backgroundColor).toBe('rgb(230, 0, 0)');
-               expect(bar.options.borderColor).toBe('rgb(0, 0, 230)');
+               expect(bar.options.backgroundColor).toBe('#E60000');
+               expect(bar.options.borderColor).toBe('#0000E6');
                expect(bar.options.borderWidth).toBe(2);
 
                // Set a dataset style

diff --git a/test/specs/controller.bubble.tests.js b/test/specs/controller.bubble.tests.js
index 3c690997f004235521e45b46ce7f2e4a0a290eb9..3682e40b834c3740a7c00a3a55798e32bf33fd40 100644 (file)
--- a/test/specs/controller.bubble.tests.js
+++ b/test/specs/controller.bubble.tests.js
@@ -293,8 +293,8 @@ describe('Chart.controllers.bubble', function() {
                        var point = chart.getDatasetMeta(0).data[0];
 
                        afterEvent(chart, 'mousemove', function() {
-                               expect(point.options.backgroundColor).toBe('rgb(49, 135, 221)');
-                               expect(point.options.borderColor).toBe('rgb(22, 89, 156)');
+                               expect(point.options.backgroundColor).toBe('#3187DD');
+                               expect(point.options.borderColor).toBe('#175A9D');
                                expect(point.options.borderWidth).toBe(1);
                                expect(point.options.radius).toBe(20 + 4);
 

diff --git a/test/specs/controller.doughnut.tests.js b/test/specs/controller.doughnut.tests.js
index 19643977b625c311f3ae8a035858abf82b143cf3..09044ccedd3982b5ee510cde75030d3c40b0ac94 100644 (file)
--- a/test/specs/controller.doughnut.tests.js
+++ b/test/specs/controller.doughnut.tests.js
@@ -352,8 +352,8 @@ describe('Chart.controllers.doughnut', function() {
                        var arc = chart.getDatasetMeta(0).data[0];
 
                        afterEvent(chart, 'mousemove', function() {
-                               expect(arc.options.backgroundColor).toBe('rgb(49, 135, 221)');
-                               expect(arc.options.borderColor).toBe('rgb(22, 89, 156)');
+                               expect(arc.options.backgroundColor).toBe('#3187DD');
+                               expect(arc.options.borderColor).toBe('#175A9D');
                                expect(arc.options.borderWidth).toBe(2);
 
                                afterEvent(chart, 'mouseout', function() {

diff --git a/test/specs/controller.line.tests.js b/test/specs/controller.line.tests.js
index f2fdc10007673d27d6582e5be6acfcdf4dfa968a..3f46f145b166ab60960f1f71c62908d36ad01c59 100644 (file)
--- a/test/specs/controller.line.tests.js
+++ b/test/specs/controller.line.tests.js
@@ -795,8 +795,8 @@ describe('Chart.controllers.line', function() {
                        var point = chart.getDatasetMeta(0).data[0];
 
                        afterEvent(chart, 'mousemove', function() {
-                               expect(point.options.backgroundColor).toBe('rgb(49, 135, 221)');
-                               expect(point.options.borderColor).toBe('rgb(22, 89, 156)');
+                               expect(point.options.backgroundColor).toBe('#3187DD');
+                               expect(point.options.borderColor).toBe('#175A9D');
                                expect(point.options.borderWidth).toBe(1);
                                expect(point.options.radius).toBe(4);
 

diff --git a/test/specs/controller.polarArea.tests.js b/test/specs/controller.polarArea.tests.js
index f23bb439e817b0bbb18b5e071d64df7fa5d1218b..f74cb13b66617951b4be86b8ef53180c20696aa8 100644 (file)
--- a/test/specs/controller.polarArea.tests.js
+++ b/test/specs/controller.polarArea.tests.js
@@ -265,8 +265,8 @@ describe('Chart.controllers.polarArea', function() {
                        var arc = chart.getDatasetMeta(0).data[0];
 
                        afterEvent(chart, 'mousemove', function() {
-                               expect(arc.options.backgroundColor).toBe('rgb(49, 135, 221)');
-                               expect(arc.options.borderColor).toBe('rgb(22, 89, 156)');
+                               expect(arc.options.backgroundColor).toBe('#3187DD');
+                               expect(arc.options.borderColor).toBe('#175A9D');
                                expect(arc.options.borderWidth).toBe(2);
 
                                afterEvent(chart, 'mouseout', function() {

diff --git a/test/specs/controller.radar.tests.js b/test/specs/controller.radar.tests.js
index bdc7769c65bdc172012e4be60cbc23cc0f67fd65..abb977f7a157f2d55c2e96592ea103dc502acd6a 100644 (file)
--- a/test/specs/controller.radar.tests.js
+++ b/test/specs/controller.radar.tests.js
@@ -257,8 +257,8 @@ describe('Chart.controllers.radar', function() {
                        var point = chart.getDatasetMeta(0).data[0];
 
                        afterEvent(chart, 'mousemove', function() {
-                               expect(point.options.backgroundColor).toBe('rgb(49, 135, 221)');
-                               expect(point.options.borderColor).toBe('rgb(22, 89, 156)');
+                               expect(point.options.backgroundColor).toBe('#3187DD');
+                               expect(point.options.borderColor).toBe('#175A9D');
                                expect(point.options.borderWidth).toBe(1);
                                expect(point.options.radius).toBe(4);
 

diff --git a/test/specs/core.helpers.tests.js b/test/specs/core.helpers.tests.js
index d7fc8e30df6bd3d56d9c1fb92a7d9a58d5eb9910..794da0968786ef3cd88129512c8eeee91d202dd8 100644 (file)
--- a/test/specs/core.helpers.tests.js
+++ b/test/specs/core.helpers.tests.js
@@ -16,7 +16,7 @@ describe('Core helper tests', function() {
 
        describe('Color helper', function() {
                function isColorInstance(obj) {
-                       return typeof obj === 'object' && Object.prototype.hasOwnProperty.call(obj, 'values') && Object.prototype.hasOwnProperty.call(obj.values, 'rgb');
+                       return typeof obj === 'object' && Object.prototype.hasOwnProperty.call(obj, 'valid');
                }
 
                it('should return a color when called with a color', function() {