fix: removed redundant reinit after full update + fixed batch series …

…update (#84)

* fix: fixed dynamic updates of series in case if changed only data
* fix: removed redundant reinit after full update + fixed batch series update

demo/examples/dynamic-updates.html

@@ -65,6 +65,8 @@ <h1>Dynamic updates</h1>
             <div class="container">
                 <div id="chart8"></div>
                 <button id="changeForTooltip">Tooltip update</button>
+                <button id="removeLines">Remove lines</button>
+                <button id="addLines">Add lines</button>
             </div>
         </div>
 
@@ -376,6 +378,11 @@ <h1>Dynamic updates</h1>
                         color: 'green',
                         id: '1',
                     },
+                    {
+                        data: [200, 100],
+                        color: 'red',
+                        id: '2',
+                    },
                 ],
             });
 
@@ -392,6 +399,27 @@ <h1>Dynamic updates</h1>
                     ],
                 });
             };
+
+            window.removeLines.onclick = () => {
+                yagr8.setConfig({
+                    timeline: [100000, 200000],
+                    series: [],
+                });
+            };
+
+            window.addLines.onclick = () => {
+                yagr8.setConfig({
+                    timeline: [100000, 200000],
+                    series: [
+                        ...yagr8.config.series,
+                        {
+                            data: [(Math.random() * 100) >> 0, (Math.random() * 100) >> 0],
+                            color: randomColor(),
+                            id: ('1' + Math.random() * 100) >> 0,
+                        },
+                    ],
+                });
+            };
         </script>
     </body>
 </html>

demo/examples/shared-crosshairs.html

@@ -30,6 +30,13 @@ <h1>Shared crosshairs</h1>
             <div id="chart4" class="container right"></div>
         </div>
 
+        <h2>Sync on dynamic update</h2>
+        <div class="grid">
+            <div id="chart5" class="container left"></div>
+            <div id="chart6" class="container right"></div>
+        </div>
+        <button id="update">Update</button>
+
         <script>
             const showTooltip = (y) => y.state.isMouseOver;
 
@@ -68,6 +75,34 @@ <h1>Shared crosshairs</h1>
 
             y4.subscribe();
             y3.subscribe();
+
+            const y5 = new Yagr(chart5, {
+                title: {text: 'Example 5'},
+                timeline: [1, 2, 3],
+                series: [{data: [1, 2, 3], color: 'red'}],
+                cursor: {sync: 'c'},
+            });
+
+            const y6 = new Yagr(chart6, {
+                title: {text: 'Example 6'},
+                timeline: [1, 2, 3],
+                series: [{data: [3, 2, 1], color: 'green'}],
+                cursor: {sync: 'c'},
+            });
+
+            y5.subscribe();
+            y6.subscribe();
+
+            update.onclick = () => {
+                y5.setConfig({
+                    timeline: [1, 2, 3, 4],
+                    series: [{data: [1, 2, 3, 4], color: 'red'}],
+                });
+                y6.setConfig({
+                    timeline: [1, 2, 3, 4],
+                    series: [{data: [1, 2, 3, 4], color: 'green'}],
+                });
+            };
         </script>
     </body>
 </html>

src/YagrCore/mixins/batch-updates.ts

@@ -95,7 +95,6 @@ export class BatchMixin<T extends MinimalValidConfig> {
                 this.uplot.destroy();
                 this.uplot = new UPlot(this.options, this.series, this.initRender);
                 this.plugins.legend?.redraw();
-                this.init();
             })
             .inStage('listen');
     }

src/YagrCore/mixins/dynamic-updates.ts

@@ -347,8 +347,9 @@ function setSeriesImpl(
             this.config.timeline.splice(0, timeline.length);
         }
     } else {
-        /** If we're adding new series */
+        /** If we're adding new series or removing */
         if (
+            series.length !== this.config.series.length ||
             series.some(({id}) => {
                 return this.config.series.find((s) => s.id !== id);
             })