Merge pull request #951 from zauberzeug/stockchart

#948 correctly track count of chart series

nicegui/elements/chart.js

@@ -4,6 +4,7 @@ export default {
     setTimeout(() => {
       const imports = this.extras.map((extra) => import(window.path_prefix + extra));
       Promise.allSettled(imports).then(() => {
+        this.seriesCount = this.options.series ? this.options.series.length : 0;
         this.chart = Highcharts[this.type](this.$el, this.options);
         this.chart.reflow();
       });
@@ -18,16 +19,22 @@ export default {
   methods: {
     update_chart() {
       if (this.chart) {
-        while (this.chart.series.length > this.options.series.length) this.chart.series[0].remove();
-        while (this.chart.series.length < this.options.series.length) this.chart.addSeries({}, false);
+        while (this.seriesCount > this.options.series.length) {
+          this.chart.series[0].remove();
+          this.seriesCount--;
+        }
+        while (this.seriesCount < this.options.series.length) {
+          this.chart.addSeries({}, false);
+          this.seriesCount++;
+        }
         this.chart.update(this.options);
       }
     },
-    destroyChart () {
+    destroyChart() {
       if (this.chart) {
-        this.chart.destroy()
+        this.chart.destroy();
       }
-    }
+    },
   },
   props: {
     type: String,

tests/test_chart.py

@@ -109,3 +109,25 @@ def test_replace_chart(screen: Screen):
     screen.click('Replace')
     screen.should_contain('B')
     screen.should_not_contain('A')
+
+
+def test_stock_chart(screen: Screen):
+    """https://github.com/zauberzeug/nicegui/discussions/948"""
+    chart = ui.chart({'legend': {'enabled': True}, 'series': []}, type='stockChart', extras=['stock'])
+    ui.button('update', on_click=lambda: (
+        chart.options['series'].extend([{'name': 'alice'}, {'name': 'bob'}]),
+        chart.update(),
+    ))
+    ui.button('clear', on_click=lambda: (
+        chart.options['series'].clear(),
+        chart.update(),
+    ))
+
+    screen.open('/')
+    screen.click('update')
+    screen.should_contain('alice')
+    screen.should_contain('bob')
+    screen.click('clear')
+    screen.wait(0.5)
+    screen.should_not_contain('alice')
+    screen.should_not_contain('bob')