feat: added 'dispose' stage and fixed legend discard when chart is up…

…dating (#203) * feat: added 'dispose' stage and fixed legend discard when chart is updating * docs: added example for legend --------- Co-authored-by: dsleepo <[email protected]>
gravity-ui · Jan 18, 2024 · 990c965 · 990c965
1 parent fe9d46d
commit 990c965
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 18 deletions.
diff --git a/demo/examples/react/react.example.js b/demo/examples/react/react.example.js
@@ -138,6 +138,11 @@ function Perf() {
                 },
             ],
         },
+        legend: {
+            behaviour: 'extended',
+            position: 'bottom',
+            show: false,
+        },
     });
 
     const startPerf = React.useCallback(() => {
@@ -165,12 +170,23 @@ function Perf() {
         }));
     }, [config, setConfig]);
 
+    const toggleLegend = React.useCallback(() => {
+        setConfig((prev) => ({
+            ...prev,
+            legend: {
+                ...prev.legend,
+                show: !prev.legend.show,
+            }
+        }))
+    });
+
     return (
         <div className="container">
             <YagrComponent config={config} />
             <button onClick={startPerf}>Start</button>
             <button onClick={random}>Random</button>
             <button onClick={() => (hooktrace.innerHTML = '')}>Clear</button>
+            <button onClick={toggleLegend}>Turn legend {config.legend.show ? 'off' : 'on'}</button>
         </div>
     );
 }

diff --git a/demo/examples/react/react.html b/demo/examples/react/react.html
@@ -40,6 +40,6 @@
                 <pre id="hooktrace2"></pre>
             </div>
         </div>
-        <script src="./react.example.umd.js"></script>
+        <script src="./react.example.esm.js" type="module"></script>
     </body>
 </html>
diff --git a/src/YagrCore/index.ts b/src/YagrCore/index.ts
@@ -39,7 +39,7 @@ type CachedProps = {
 export interface YagrState {
     isEmptyDataSet: boolean;
     isMouseOver: boolean;
-    stage: 'config' | 'processing' | 'uplot' | 'render' | 'listen';
+    stage: 'config' | 'processing' | 'uplot' | 'render' | 'listen' | 'dispose';
     inBatch?: boolean;
     y2uIdx: Record<string, number>;
     subscribed: boolean;

diff --git a/src/YagrCore/mixins/batch-updates.ts b/src/YagrCore/mixins/batch-updates.ts
@@ -1,6 +1,7 @@
 import type {MinimalValidConfig} from '../types';
 import type Yagr from '..';
 import UPlot from 'uplot';
+import LegendPlugin from '../plugins/legend/legend';
 
 export interface Batch {
     active: boolean;
@@ -83,28 +84,30 @@ export class BatchMixin<T extends MinimalValidConfig> {
      * @description Full update of chart. Used when config is changed totally.
      */
     protected fullUpdate(this: Yagr<T>) {
-        this.inStage('config', () => {
-            this._batch = {active: false, fns: []};
-            this.createUplotOptions(true);
-            this.options = this.config.editUplotOptions ? this.config.editUplotOptions(this.options) : this.options;
+        let left: number | undefined;
+        let top: number | undefined;
+
+        this.inStage('dispose', () => {
+            if (this.uplot) {
+                const cursor = this.uplot.cursor;
+                left = cursor.left;
+                top = cursor.top;
+                // uplot may be undefined if chart is not rendered yet, but got update
+                this.uplot.destroy();
+            }
+            this.plugins.legend?.destroy();
         })
+            .inStage('config', () => {
+                this.plugins.legend = new LegendPlugin();
+                this._batch = {active: false, fns: []};
+                this.createUplotOptions(true);
+                this.options = this.config.editUplotOptions ? this.config.editUplotOptions(this.options) : this.options;
+            })
             .inStage('processing', () => {
                 this.transformSeries();
             })
             .inStage('uplot', () => {
-                let left: number | undefined;
-                let top: number | undefined;
-
-                if (this.uplot) {
-                    const cursor = this.uplot.cursor;
-                    left = cursor.left;
-                    top = cursor.top;
-                    // uplot may be undefined if chart is not rendered yet, but got update
-                    this.uplot.destroy();
-                }
-
                 this.uplot = new UPlot(this.options, this.series, this.initRender);
-                this.plugins.legend?.redraw();
                 if (left && top && left > 0 && top > 0) {
                     this.uplot.setCursor({left, top});
                 }