update tests and documentation

nicegui/elements/highchart.py

@@ -1,5 +1,8 @@
+from .. import optional_features
+
 try:
     from nicegui_highcharts import highchart
+    optional_features.register('highcharts')
     __all__ = ['highchart']
 except ImportError:
     class highchart:  # type: ignore

tests/test_chart.py → tests/test_highchart.py

@@ -6,7 +6,7 @@ from .screen import Screen
 
 
 def test_change_chart_series(screen: Screen):
-    chart = ui.chart({
+    chart = ui.highchart({
         'chart': {'type': 'bar'},
         'xAxis': {'categories': ['A', 'B']},
         'series': [
@@ -35,7 +35,7 @@ def test_change_chart_series(screen: Screen):
 
 
 def test_adding_chart_series(screen: Screen):
-    chart = ui.chart({
+    chart = ui.highchart({
         'chart': {'type': 'bar'},
         'xAxis': {'categories': ['A', 'B']},
         'series': [],
@@ -53,7 +53,7 @@ def test_adding_chart_series(screen: Screen):
 
 
 def test_removing_chart_series(screen: Screen):
-    chart = ui.chart({
+    chart = ui.highchart({
         'chart': {'type': 'bar'},
         'xAxis': {'categories': ['A', 'B']},
         'series': [
@@ -75,21 +75,21 @@ def test_removing_chart_series(screen: Screen):
 
 def test_missing_extra(screen: Screen):
     # NOTE: This test does not work after test_extra() has been run, because conftest won't reset libraries correctly.
-    ui.chart({'chart': {'type': 'solidgauge'}})
+    ui.highchart({'chart': {'type': 'solidgauge'}})
 
     screen.open('/')
     assert not screen.selenium.find_elements(By.CSS_SELECTOR, '.highcharts-pane')
 
 
 def test_extra(screen: Screen):
-    ui.chart({'chart': {'type': 'solidgauge'}}, extras=['solid-gauge'])
+    ui.highchart({'chart': {'type': 'solidgauge'}}, extras=['solid-gauge'])
 
     screen.open('/')
     assert screen.selenium.find_elements(By.CSS_SELECTOR, '.highcharts-pane')
 
 
 def test_stock_chart(screen: Screen):
-    ui.chart({}, type='stockChart', extras=['stock'])
+    ui.highchart({}, type='stockChart', extras=['stock'])
 
     screen.open('/')
     assert screen.selenium.find_elements(By.CSS_SELECTOR, '.highcharts-range-selector-buttons')
@@ -97,12 +97,12 @@ def test_stock_chart(screen: Screen):
 
 def test_replace_chart(screen: Screen):
     with ui.row() as container:
-        ui.chart({'series': [{'name': 'A'}]})
+        ui.highchart({'series': [{'name': 'A'}]})
 
     def replace():
         container.clear()
         with container:
-            ui.chart({'series': [{'name': 'B'}]})
+            ui.highchart({'series': [{'name': 'B'}]})
     ui.button('Replace', on_click=replace)
 
     screen.open('/')
@@ -114,7 +114,7 @@ def test_replace_chart(screen: Screen):
 
 def test_updating_stock_chart(screen: Screen):
     """https://github.com/zauberzeug/nicegui/discussions/948"""
-    chart = ui.chart({'legend': {'enabled': True}, 'series': []}, type='stockChart', extras=['stock'])
+    chart = ui.highchart({'legend': {'enabled': True}, 'series': []}, type='stockChart', extras=['stock'])
     ui.button('update', on_click=lambda: (
         chart.options['series'].extend([{'name': 'alice'}, {'name': 'bob'}]),
         chart.update(),
@@ -135,7 +135,7 @@ def test_updating_stock_chart(screen: Screen):
 
 
 def test_create_dynamically(screen: Screen):
-    ui.button('Create', on_click=lambda: ui.chart({}))
+    ui.button('Create', on_click=lambda: ui.highchart({}))
 
     screen.open('/')
     screen.click('Create')

website/documentation.py

@@ -129,7 +129,8 @@ def create_full() -> None:
 
     load_demo(ui.table)
     load_demo(ui.aggrid)
-    load_demo(ui.chart)
+    if optional_features.has('highcharts'):
+        load_demo(ui.highchart)
     load_demo(ui.echart)
     if optional_features.has('matplotlib'):
         load_demo(ui.pyplot)
@@ -320,17 +321,22 @@ def create_full() -> None:
     load_demo('bindings')
 
     @text_demo('UI Updates', '''
-        NiceGUI tries to automatically synchronize the state of UI elements with the client, e.g. when a label text, an input value or style/classes/props of an element have changed.
+        NiceGUI tries to automatically synchronize the state of UI elements with the client,
+        e.g. when a label text, an input value or style/classes/props of an element have changed.
         In other cases, you can explicitly call `element.update()` or `ui.update(*elements)` to update.
-        The demo code shows both methods for a `ui.chart`, where it is difficult to automatically detect changes in the `options` dictionary.
+        The demo code shows both methods for a `ui.echart`, where it is difficult to automatically detect changes in the `options` dictionary.
     ''')
     def ui_updates_demo():
-        from random import randint
+        from random import random
 
-        chart = ui.chart({'title': False, 'series': [{'data': [1, 2]}]}).classes('w-full h-64')
+        chart = ui.echart({
+            'xAxis': {'type': 'value'},
+            'yAxis': {'type': 'value'},
+            'series': [{'type': 'line', 'data': [[0, 0], [1, 1]]}],
+        })
 
         def add():
-            chart.options['series'][0]['data'].append(randint(0, 100))
+            chart.options['series'][0]['data'].append([random(), random()])
             chart.update()
 
         def clear():

website/more_documentation/chart_documentation.py → website/more_documentation/highchart_documentation.py

@@ -6,7 +6,7 @@ from ..documentation_tools import text_demo
 def main_demo() -> None:
     from random import random
 
-    chart = ui.chart({
+    chart = ui.highchart({
         'title': False,
         'chart': {'type': 'bar'},
         'xAxis': {'categories': ['A', 'B']},
@@ -29,7 +29,7 @@ def more() -> None:
         This demo shows a solid gauge chart.
     ''')
     def extra_dependencies() -> None:
-        ui.chart({
+        ui.highchart({
             'title': False,
             'chart': {'type': 'solidgauge'},
             'yAxis': {
@@ -51,7 +51,7 @@ def more() -> None:
         - `on_point_drop`: called when a point is dropped
     ''')
     def drag() -> None:
-        ui.chart(
+        ui.highchart(
             {
                 'title': False,
                 'plotOptions': {