Merge pull request #208 from zauberzeug/chart-series-changes

Fix for changes to chart series

nicegui/elements/chart.js

@@ -8,6 +8,8 @@ export default {
   },
   methods: {
     update_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);
       this.chart.update(this.options);
     },
   },

tests/test_chart.py

@@ -5,13 +5,8 @@ from nicegui import ui
 from .screen import Screen
 
 
-def get_series_0(selenium):
-    return selenium.find_elements(By.CSS_SELECTOR, '.highcharts-series-0 .highcharts-point')
-
-
-def test_change_chart_data(screen: Screen):
+def test_change_chart_series(screen: Screen):
     chart = ui.chart({
-        'title': False,
         'chart': {'type': 'bar'},
         'xAxis': {'categories': ['A', 'B']},
         'series': [
@@ -26,11 +21,53 @@ def test_change_chart_data(screen: Screen):
 
     ui.button('Update', on_click=update)
 
+    def get_series_0():
+        return screen.selenium.find_elements(By.CSS_SELECTOR, '.highcharts-series-0 .highcharts-point')
+
     screen.open('/')
     screen.wait(0.5)
-    before = [bar.size['width'] for bar in get_series_0(screen.selenium)]
+    before = [bar.size['width'] for bar in get_series_0()]
     screen.click('Update')
     screen.wait(0.5)
-    after = [bar.size['width'] for bar in get_series_0(screen.selenium)]
+    after = [bar.size['width'] for bar in get_series_0()]
     assert before[0] < after[0]
     assert before[1] < after[1]
+
+
+def test_adding_chart_series(screen: Screen):
+    chart = ui.chart({
+        'chart': {'type': 'bar'},
+        'xAxis': {'categories': ['A', 'B']},
+        'series': [],
+    }).classes('w-full h-64')
+
+    def add():
+        chart.options['series'].append({'name': 'X', 'data': [0.1, 0.2]})
+        chart.update()
+    ui.button('Add', on_click=add)
+
+    screen.open('/')
+    screen.click('Add')
+    screen.wait(0.5)
+    assert len(screen.selenium.find_elements(By.CSS_SELECTOR, '.highcharts-point')) == 3
+
+
+def test_removing_chart_series(screen: Screen):
+    chart = ui.chart({
+        'chart': {'type': 'bar'},
+        'xAxis': {'categories': ['A', 'B']},
+        'series': [
+            {'name': 'Alpha', 'data': [0.1, 0.2]},
+            {'name': 'Beta', 'data': [0.3, 0.4]},
+        ],
+    }).classes('w-full h-64')
+
+    def remove():
+        chart.options['series'].pop(0)
+        chart.update()
+    ui.button('Remove', on_click=remove)
+
+    screen.open('/')
+    screen.click('Remove')
+    screen.wait(0.5)
+    assert len(screen.selenium.find_elements(By.CSS_SELECTOR, '.highcharts-point')) == 3