]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Fix calling of onResize (#8529)
authorJukka Kurkela <jukka.kurkela@gmail.com>
Fri, 26 Feb 2021 19:55:43 +0000 (21:55 +0200)
committerGitHub <noreply@github.com>
Fri, 26 Feb 2021 19:55:43 +0000 (14:55 -0500)
* Fix calling of onResize

* Try to fix the bugging animation test

* try again

* and the actual fix

* maybe now

src/core/core.animations.js
src/core/core.controller.js
src/core/core.defaults.js
test/specs/core.animations.tests.js
test/specs/core.controller.tests.js

index 28c0830682a87e3b1f0f3ce1c9741f7697e053ef..fc1cd54e0386d9aef18f9524fd73359d29b7670a 100644 (file)
@@ -69,6 +69,7 @@ defaults.set('transitions', {
       },
       visible: {
         type: 'boolean',
+        easing: 'linear',
         fn: v => v | 0 // for keeping the dataset visible all the way through the animation
       },
     }
index 45890e0542e5ed2fecffa9fa984047330b5915ef..6d196d03243e85745a1c1c67b46f4cb811db2294 100644 (file)
@@ -242,7 +242,7 @@ class Chart {
 
     me.notifyPlugins('resize', {size: newSize});
 
-    callCallback(options.onResize, [newSize], me);
+    callCallback(options.onResize, [me, newSize], me);
 
     if (me.attached) {
       if (me._doResize()) {
index 94dc1a9ef5f4cf862c43d02535fa0c61dd0eed92..c99ab78f03935bfe9d6e1f9ddb6df07b6460f52f 100644 (file)
@@ -159,7 +159,7 @@ export class Defaults {
 
 // singleton instance
 export default new Defaults({
-  _scriptable: (name) => name !== 'onClick' && name !== 'onHover',
+  _scriptable: (name) => !name.startsWith('on'),
   _indexable: (name) => name !== 'events',
   hover: {
     _fallback: 'interaction'
index fc2cf24297ceb00780b8cc29774799d698fececa..d501b884751bc2692c08e2e0519860478ea05a94 100644 (file)
@@ -176,7 +176,6 @@ describe('Chart.animations', function() {
   describe('default transitions', function() {
     describe('hide', function() {
       it('should keep dataset visible through the animation', function(done) {
-        let test = false;
         let count = 0;
         window.acquireChart({
           type: 'line',
@@ -188,20 +187,18 @@ describe('Chart.animations', function() {
           },
           options: {
             animation: {
-              duration: 100,
+              duration: 0,
               onProgress: (args) => {
-                if (test) {
-                  if (args.currentStep < args.numSteps) {
-                    // while animating, visible should be truthly
-                    expect(args.chart.getDatasetMeta(0).visible).toBeTruthy();
-                    count++;
-                  }
+                if (!args.chart.isDatasetVisible(0) && args.currentStep / args.numSteps < 0.9) {
+                  // while animating, visible should be truthly
+                  // sometimes its not, thats why we check only up to 90% of the animation
+                  expect(args.chart.getDatasetMeta(0).visible).toBeTruthy();
+                  count++;
                 }
               },
               onComplete: (args) => {
-                if (!test) {
-                  test = true;
-                  setTimeout(() => args.chart.hide(0), 1);
+                if (args.chart.isDatasetVisible(0)) {
+                  args.chart.hide(0);
                 } else {
                   // and when finished, it should be false
                   expect(args.chart.getDatasetMeta(0).visible).toBeFalsy();
@@ -209,6 +206,13 @@ describe('Chart.animations', function() {
                   done();
                 }
               }
+            },
+            transitions: {
+              hide: {
+                animation: {
+                  duration: 100
+                }
+              }
             }
           }
         });
index 27736973b1f00c93e8d58dfc180d33f12aa703d0..e618e9c1f52f86195c922559c16ff1abbb8565a4 100644 (file)
@@ -471,6 +471,39 @@ describe('Chart', function() {
       });
     });
 
+    it('should call onResize with correct arguments and context', function() {
+      let count = 0;
+      let correctThis = false;
+      let size = {
+        width: 0,
+        height: 0
+      };
+      acquireChart({
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          onResize(chart, newSize) {
+            count++;
+            correctThis = this === chart;
+            size.width = newSize.width;
+            size.height = newSize.height;
+          }
+        }
+      }, {
+        canvas: {
+          style: 'width: 150px; height: 245px'
+        },
+        wrapper: {
+          style: 'width: 300px; height: 350px'
+        }
+      });
+
+      expect(count).toEqual(1);
+      expect(correctThis).toBeTrue();
+      expect(size).toEqual({width: 300, height: 350});
+    });
+
+
     it('should resize the canvas when parent width changes', function(done) {
       var chart = acquireChart({
         options: {