Reuse root element ShadowRoot if possible.

fixes #13
huww98 · Nov 12, 2020 · c6a11f6 · c6a11f6
1 parent 927809b
commit c6a11f6
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -183,6 +183,7 @@ const chart = new TimeChart(el, {
 
 * `chart.dispose()`: Dispose all the resources used by this chart instance.
   Note: We use shadow root to protect the chart from unintended style conflict. However, there is no easy way to remove the shadow root after dispose.
+  But you can reuse the same HTML element to create another TimeChart. [Example](https://huww98.github.io/TimeChart/demo/reset.html)
 
 * `chart.onResize()`: Calculate size after layout changes.
   This method is automatically called when window size changed.

diff --git a/demo/reset.html b/demo/reset.html
@@ -0,0 +1,45 @@
+<!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>TimeChart Demo (Reset)</title>
+</head>
+<body>
+    <p>
+        Demostrate how to dispose a chart, and reuse the same HTML element to create another TimeChart.
+    </p>
+    <div id="chart" style="width: 100%; height: 640px;"></div>
+
+    <script src="https://d3js.org/d3-array.v2.min.js"></script>
+    <script src="https://d3js.org/d3-color.v2.min.js"></script>
+    <script src="https://d3js.org/d3-format.v2.min.js"></script>
+    <script src="https://d3js.org/d3-interpolate.v2.min.js"></script>
+    <script src="https://d3js.org/d3-time.v2.min.js"></script>
+    <script src="https://d3js.org/d3-time-format.v3.min.js"></script>
+    <script src="https://d3js.org/d3-scale.v3.min.js"></script>
+    <script src="https://d3js.org/d3-selection.v2.min.js"></script>
+    <script src="https://d3js.org/d3-axis.v2.min.js"></script>
+
+    <script src="../dist/timechart.min.js"></script>
+    <script>
+        const el = document.getElementById('chart');
+        function createChart() {
+            const data = [];
+            for (let x = 0; x < 100; x++) {
+                data.push({x, y: Math.random()});
+            }
+            const chart = new TimeChart(el, {
+                series: [{ data, name: 'Random' }],
+            });
+
+            setTimeout(() => {
+                chart.dispose();
+                createChart()
+            }, 200)
+        }
+        createChart()
+    </script>
+</body>
+</html>
diff --git a/src/index.ts b/src/index.ts
@@ -62,7 +62,7 @@ export default class TimeChart {
         };
 
         this.model = new RenderModel(renderOptions);
-        const shadowRoot = el.attachShadow({ mode: 'open' });
+        const shadowRoot = el.shadowRoot ?? el.attachShadow({ mode: 'open' });
         const style = document.createElement('style');
         style.innerText = `
 :host {