From: Jukka Kurkela <jukka.kurkela@gmail.com>
Date: Wed, 4 Nov 2020 19:58:53 +0000 (+0200)
Subject: Destroy example charts on unmount (#8004)
X-Git-Tag: 3.0.0-beta.6~9
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e277aa4c1fb0dffb7e59c31a4913d78687549a7e;p=thirdparty%2FChart.js.git

Destroy example charts on unmount (#8004)

* Destroy example charts on unmount
* Make scatter live
* Use spaces
---

diff --git a/.editorconfig b/.editorconfig
index efa08f801..a992ef391 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -16,3 +16,7 @@ indent_size = 2
 [*.json]
 indent_style = space
 indent_size = 2
+
+[*.mdx]
+indent_style = space
+indent_size = 2
diff --git a/docs/docs/axes/cartesian/index.mdx b/docs/docs/axes/cartesian/index.mdx
index b1d8d68f7..06b7245b8 100644
--- a/docs/docs/axes/cartesian/index.mdx
+++ b/docs/docs/axes/cartesian/index.mdx
@@ -111,7 +111,8 @@ function exampleAlignment() {
         }
       }
     };
-    new Chart(document.getElementById('chartjs-1').getContext('2d'), cfg);
+    const chart = new Chart(document.getElementById('chartjs-1').getContext('2d'), cfg);
+    return () => chart.destroy();
   });
   return <div className="chartjs-wrapper"><canvas id="chartjs-1" className="chartjs"></canvas></div>;
 }
diff --git a/docs/docs/charts/bar.mdx b/docs/docs/charts/bar.mdx
index 738931ab3..77b6d87d9 100644
--- a/docs/docs/charts/bar.mdx
+++ b/docs/docs/charts/bar.mdx
@@ -53,7 +53,8 @@ export const ExampleChart0 = () => {
         }
       }
     };
-    new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+    const chart = new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+    return () => chart.destroy();
   });
   return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
 }
@@ -335,7 +336,8 @@ export const ExampleChart1 = () => {
         }
       }
     };
-    new Chart(document.getElementById('chartjs-1').getContext('2d'), cfg);
+    const chart = new Chart(document.getElementById('chartjs-1').getContext('2d'), cfg);
+    return () => chart.destroy();
   });
   return <div className="chartjs-wrapper"><canvas id="chartjs-1" className="chartjs"></canvas></div>;
 }
diff --git a/docs/docs/charts/bubble.mdx b/docs/docs/charts/bubble.mdx
index 079172ad2..7e8953fca 100644
--- a/docs/docs/charts/bubble.mdx
+++ b/docs/docs/charts/bubble.mdx
@@ -26,7 +26,8 @@ export const ExampleChart = () => {
         }]
       }
     };
-    new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+    const chart = new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+    return () => chart.destroy();
   });
   return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
 }
diff --git a/docs/docs/charts/doughnut.mdx b/docs/docs/charts/doughnut.mdx
index 920dc8a95..6248a47e0 100644
--- a/docs/docs/charts/doughnut.mdx
+++ b/docs/docs/charts/doughnut.mdx
@@ -47,7 +47,8 @@ function example() {
         }]
       }
     };
-    new Chart(canvas.current.getContext('2d'), cfg);
+    const chart = new Chart(canvas.current.getContext('2d'), cfg);
+    return () => chart.destroy();
   });
   return <div className="chartjs-wrapper"><canvas ref={canvas} className="chartjs"></canvas></div>;
 }
@@ -81,7 +82,8 @@ function example() {
         }]
       }
     };
-    new Chart(canvas.current.getContext('2d'), cfg);
+    const chart = new Chart(canvas.current.getContext('2d'), cfg);
+    return () => chart.destroy();
   });
   return <div className="chartjs-wrapper"><canvas ref={canvas} className="chartjs"></canvas></div>;
 }
diff --git a/docs/docs/charts/line.mdx b/docs/docs/charts/line.mdx
index 8ee843a8a..bd97cffdd 100644
--- a/docs/docs/charts/line.mdx
+++ b/docs/docs/charts/line.mdx
@@ -31,7 +31,8 @@ export const ExampleChart = () => {
       options: {
       }
     };
-    new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+    const chart = new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+    return () => chart.destroy();
   });
   return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
 }
diff --git a/docs/docs/charts/mixed.mdx b/docs/docs/charts/mixed.mdx
index c7913bede..fe58df44c 100644
--- a/docs/docs/charts/mixed.mdx
+++ b/docs/docs/charts/mixed.mdx
@@ -60,7 +60,8 @@ export const ExampleChart = () => {
         }
       }
     };
-    new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+    const chart = new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+    return () => chart.destroy();
   });
   return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
 }
diff --git a/docs/docs/charts/polar.mdx b/docs/docs/charts/polar.mdx
index 680a620a3..2589c6b7b 100644
--- a/docs/docs/charts/polar.mdx
+++ b/docs/docs/charts/polar.mdx
@@ -33,7 +33,8 @@ export const ExampleChart = () => {
         }]
       }
     };
-    new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+    const chart = new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+    return () => chart.destroy();
   });
   return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
 }
diff --git a/docs/docs/charts/radar.mdx b/docs/docs/charts/radar.mdx
index 2c305a2fe..6fec0ff04 100644
--- a/docs/docs/charts/radar.mdx
+++ b/docs/docs/charts/radar.mdx
@@ -55,7 +55,8 @@ export const ExampleChart = () => {
         }
       }
     };
-    new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+    const chart = new Chart(document.getElementById('chartjs-0').getContext('2d'), cfg);
+    return () => chart.destroy();
   });
   return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs"></canvas></div>;
 }
diff --git a/docs/docs/charts/scatter.md b/docs/docs/charts/scatter.md
deleted file mode 100644
index 3eb1e73fd..000000000
--- a/docs/docs/charts/scatter.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: Scatter Chart
----
-
-Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 3 points.
-
-```javascript
-var scatterChart = new Chart(ctx, {
-    type: 'scatter',
-    data: {
-        datasets: [{
-            label: 'Scatter Dataset',
-            data: [{
-                x: -10,
-                y: 0
-            }, {
-                x: 0,
-                y: 10
-            }, {
-                x: 10,
-                y: 5
-            }]
-        }]
-    },
-    options: {
-        scales: {
-            x: {
-                type: 'linear',
-                position: 'bottom'
-            }
-        }
-    }
-});
-```
-
-## Dataset Properties
-
-The scatter chart supports all of the same properties as the [line chart](./charts/line.mdx#dataset-properties).
-
-## Data Structure
-
-Unlike the line chart where data can be supplied in two different formats, the scatter chart only accepts data in a point format.
-
-```javascript
-data: [{
-        x: 10,
-        y: 20
-    }, {
-        x: 15,
-        y: 10
-    }]
-```
-
-## Internal data format
-
-`{x, y}`
diff --git a/docs/docs/charts/scatter.mdx b/docs/docs/charts/scatter.mdx
new file mode 100644
index 000000000..7d091f7d1
--- /dev/null
+++ b/docs/docs/charts/scatter.mdx
@@ -0,0 +1,66 @@
+---
+title: Scatter Chart
+---
+
+Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 3 points.
+
+import { useEffect, useRef } from 'react';
+
+```jsx live
+function example() {
+  const canvas = useRef(null);
+  useEffect(() => {
+    const cfg = {
+        type: 'scatter',
+        data: {
+            datasets: [{
+                label: 'Scatter Dataset',
+                data: [{
+                    x: -10,
+                    y: 0
+                }, {
+                    x: 0,
+                    y: 10
+                }, {
+                    x: 10,
+                    y: 5
+                }]
+            }]
+        },
+        options: {
+            scales: {
+                x: {
+                    type: 'linear',
+                    position: 'bottom'
+                }
+            }
+        }
+    };
+    const chart = new Chart(canvas.current.getContext('2d'), cfg);
+    return () => chart.destroy();
+  });
+  return <div className="chartjs-wrapper"><canvas ref={canvas} className="chartjs"></canvas></div>;
+}
+```
+
+## Dataset Properties
+
+The scatter chart supports all of the same properties as the [line chart](./charts/line.mdx#dataset-properties).
+
+## Data Structure
+
+Unlike the line chart where data can be supplied in two different formats, the scatter chart only accepts data in a point format.
+
+```javascript
+data: [{
+        x: 10,
+        y: 20
+    }, {
+        x: 15,
+        y: 10
+    }]
+```
+
+## Internal data format
+
+`{x, y}`
diff --git a/docs/docs/configuration/animations.mdx b/docs/docs/configuration/animations.mdx
index 5088f0f15..8ef12785a 100644
--- a/docs/docs/configuration/animations.mdx
+++ b/docs/docs/configuration/animations.mdx
@@ -50,7 +50,8 @@ function example() {
           }
       }
     };
-    new Chart(ctx, cfg);
+    const chart = new Chart(ctx, cfg);
+    return () => chart.destroy();
   });
   return <div className="chartjs-wrapper"><canvas id="chartjs-a0" className="chartjs"></canvas></div>;
 }
@@ -96,7 +97,8 @@ function example() {
           }
       }
     };
-    new Chart(ctx, cfg);
+    const chart = new Chart(ctx, cfg);
+    return () => chart.destroy();
   });
   return <div className="chartjs-wrapper"><canvas id="chartjs-a1" className="chartjs"></canvas></div>;
 }
@@ -117,7 +119,7 @@ The default configuration is defined here: <a href="https://github.com/chartjs/C
 | `debug` | `boolean` | `undefined` | Running animation count + FPS display in upper left corner of the chart.
 | `delay` | `number` | `undefined` | Delay before starting the animations.
 | `loop` | `boolean` | `undefined` | If set to `true`, the animations loop endlessly.
-| [[mode]](#animation-mode-configuration) | `object` | [defaults...](#default-modes) | Option overrides for update mode. Core modes: `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'`. See **Hide and show [mode]** example above. 
+| [[mode]](#animation-mode-configuration) | `object` | [defaults...](#default-modes) | Option overrides for update mode. Core modes: `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'`. See **Hide and show [mode]** example above.
 | [[property]](#animation-property-configuration) | `object` | `undefined` | Option overrides for a single element `[property]`. These have precedence over `[collection]`. See **Looping tension [property]** example above.
 | [[collection]](#animation-properties-collection-configuration) | `object` | [defaults...](#default-collections) | Option overrides for multiple properties, identified by `properties` array.
 
@@ -125,8 +127,8 @@ These defaults can be overridden in `options.animation` or `dataset.animation` a
 
 ## Animation mode configuration
 
-Mode option configures how an update mode animates the chart. 
-The cores modes are `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'`. 
+Mode option configures how an update mode animates the chart.
+The cores modes are `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'`.
 A custom mode can be used by passing a custom `mode` to [update](../developers/api.md#updatemode).
 A mode option is defined by the same options of the main [animation configuration](#animation-configuration).
 
@@ -181,13 +183,13 @@ These default collections are overridden by most dataset controllers.
 
 ## Disabling animation
 
-To disable an animation configuration, the animation node must be set to `false`, with the exception for animation modes which can be disable setting the `duration` to `0`. 
+To disable an animation configuration, the animation node must be set to `false`, with the exception for animation modes which can be disable setting the `duration` to `0`.
 
 ```javascript
 chart.options.animation = false; // disables the whole animation
 chart.options.animation.active.duration = 0; // disables the animation for 'active' mode
 chart.options.animation.colors = false; // disables animation defined by the collection of 'colors' properties
-chart.options.animation.x = false; // disables animation defined by the 'x' property 
+chart.options.animation.x = false; // disables animation defined by the 'x' property
 ```
 
 ## Easing
diff --git a/docs/docs/getting-started/index.mdx b/docs/docs/getting-started/index.mdx
index d9830a548..c487b3dd0 100644
--- a/docs/docs/getting-started/index.mdx
+++ b/docs/docs/getting-started/index.mdx
@@ -25,25 +25,26 @@ import { useEffect } from 'react';
 ```jsx live
 function example() {
   useEffect(() => {
-	var ctx = document.getElementById('myChart').getContext('2d');
-	var chart = new Chart(ctx, {
-		// The type of chart we want to create
-		type: 'line',
-
-		// The data for our dataset
-		data: {
-			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-			datasets: [{
-				label: 'My First dataset',
-				backgroundColor: 'rgb(255, 99, 132)',
-				borderColor: 'rgb(255, 99, 132)',
-				data: [0, 10, 5, 2, 20, 30, 45]
-			}]
-		},
-
-		// Configuration options go here
-		options: {}
-	});
+    var ctx = document.getElementById('myChart').getContext('2d');
+    var chart = new Chart(ctx, {
+      // The type of chart we want to create
+      type: 'line',
+
+      // The data for our dataset
+      data: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [{
+          label: 'My First dataset',
+          backgroundColor: 'rgb(255, 99, 132)',
+          borderColor: 'rgb(255, 99, 132)',
+          data: [0, 10, 5, 2, 20, 30, 45]
+        }]
+      },
+
+      // Configuration options go here
+      options: {}
+    });
+    return () => chart.destroy();
   });
   return <div className="chartjs-wrapper"><canvas id="myChart" className="chartjs"></canvas></div>;
 }