code review

nicegui/elements/echart.js

@@ -4,23 +4,9 @@ export default {
   template: "<div></div>",
   mounted() {
     this.chart = echarts.init(this.$el);
-    convertDynamicProperties(this.options, true);
-    this.chart.setOption(this.options);
+    this.chart.on("click", (e) => this.$emit("pointClick", e));
+    this.update_chart();
     new ResizeObserver(this.chart.resize).observe(this.$el);
-    function unpack(e) {
-      return {
-        component_type: e.componentType,
-        series_type: e.seriesType,
-        series_index: e.seriesIndex,
-        series_name: e.seriesName,
-        name: e.name,
-        data_index: e.dataIndex,
-        data: e.data,
-        data_type: e.dataType,
-        value: e.value,
-      };
-    }
-    this.chart.on("click", (e) => this.$emit("pointClick", unpack(e)));
   },
   beforeDestroy() {
     this.chart.dispose();

nicegui/elements/echart.py

@@ -1,17 +1,12 @@
-import mimetypes
 from typing import Callable, Dict, Optional
 
 from ..element import Element
-from ..events import (EChartPointClickEventArguments, GenericEventArguments, handle_event)
+from ..events import EChartPointClickEventArguments, GenericEventArguments, handle_event
 
-mimetypes.add_type('application/javascript', '.js')
-mimetypes.add_type('text/css', '.css')
 
 class EChart(Element, component='echart.js', libraries=['lib/echarts/echarts.min.js']):
 
-    def __init__(self, options: Dict,
-            on_point_click: Optional[Callable] = None,
-            ) -> None:
+    def __init__(self, options: Dict, on_point_click: Optional[Callable] = None) -> None:
         """Apache EChart
 
         An element to create a chart using `ECharts <https://echarts.apache.org/>`_.
@@ -30,29 +25,27 @@ class EChart(Element, component='echart.js', libraries=['lib/echarts/echarts.min
                 handle_event(on_point_click, EChartPointClickEventArguments(
                     sender=self,
                     client=self.client,
-                    event_type='point_click',
-                    component_type=e.args['component_type'],
-                    series_type=e.args['series_type'],
-                    series_index=e.args['series_index'],
-                    series_name=e.args['series_name'],
+                    component_type=e.args['componentType'],
+                    series_type=e.args['seriesType'],
+                    series_index=e.args['seriesIndex'],
+                    series_name=e.args['seriesName'],
                     name=e.args['name'],
-                    data_index=e.args['data_index'],
+                    data_index=e.args['dataIndex'],
                     data=e.args['data'],
-                    data_type=e.args.get('data_type'),
+                    data_type=e.args.get('dataType'),
                     value=e.args['value'],
                 ))
-            
             self.on('pointClick', handle_point_click, [
-                'component_type', 
-                'series_type',
-                'series_index', 
-                'series_name',
+                'componentType',
+                'seriesType',
+                'seriesIndex',
+                'seriesName',
                 'name',
-                'data_index', 
+                'dataIndex',
                 'data',
-                'data_type',
+                'dataType',
                 'value',
-                ])
+            ])
 
     @property
     def options(self) -> Dict:

nicegui/events.py

@@ -54,7 +54,7 @@ class ChartEventArguments(UiEventArguments):
 
 
 @dataclass(**KWONLY_SLOTS)
-class EChartPointClickEventArguments(ChartEventArguments):
+class EChartPointClickEventArguments(UiEventArguments):
     component_type: str
     series_type: str
     series_index: int

tests/test_echart.py

@@ -1,5 +1,3 @@
-from selenium.webdriver.common.by import By
-
 from nicegui import ui
 
 from .screen import Screen
@@ -10,65 +8,56 @@ def test_create_dynamically(screen: Screen):
         ui.echart({
             'xAxis': {'type': 'value'},
             'yAxis': {'type': 'category', 'data': ['A', 'B', 'C']},
-            'series': [
-                {'type': 'line', 'data': [0.1, 0.2, 0.3],},
-            ],
+            'series': [{'type': 'line', 'data': [0.1, 0.2, 0.3]}],
         })
-    ui.button('Create', on_click=lambda: create())
+    ui.button('Create', on_click=create)
 
     screen.open('/')
     screen.click('Create')
     assert screen.find_by_tag('canvas')
 
+
 def test_update(screen: Screen):
-    def update_chart():
+    def update():
         chart.options['xAxis'] = {'type': 'value'}
         chart.options['yAxis'] = {'type': 'category', 'data': ['A', 'B', 'C']}
-        chart.options['series'] = [
-                {'type': 'line', 'data': [0.1, 0.2, 0.3],},
-            ]
+        chart.options['series'] = [{'type': 'line', 'data': [0.1, 0.2, 0.3]}]
         chart.update()
     chart = ui.echart({})
-    ui.button('Update', on_click=lambda: update_chart())
+    ui.button('Update', on_click=update)
+
     screen.open('/')
-    try:
-        screen.find_by_tag('canvas')
-        raise AssertionError(f'Canvas should not be rendered')
-    except:
-        screen.click('Update')
-        assert screen.find_by_tag('canvas')
+    assert not screen.find_all_by_tag('canvas')
+    screen.click('Update')
+    assert screen.find_by_tag('canvas')
+
 
 def test_nested_card(screen: Screen):
-    def create():
+    with ui.card().style('height: 200px; width: 600px'):
         ui.echart({
             'xAxis': {'type': 'value'},
             'yAxis': {'type': 'category', 'data': ['A', 'B', 'C']},
-            'series': [
-                {'type': 'line', 'data': [0.1, 0.2, 0.3],},
-            ],
+            'series': [{'type': 'line', 'data': [0.1, 0.2, 0.3]}],
         })
-    with ui.card().style('height: 200px').style('width: 600px'):
-        create()
 
     screen.open('/')
     canvas = screen.find_by_tag('canvas')
     assert canvas.rect['height'] == 168
     assert canvas.rect['width'] == 568
 
+
 def test_nested_expansion(screen: Screen):
-    with ui.expansion() as e:
-        with ui.card().style('height: 200px').style('width: 600px'):
+    with ui.expansion() as expansion:
+        with ui.card().style('height: 200px; width: 600px'):
             ui.echart({
                 'xAxis': {'type': 'value'},
                 'yAxis': {'type': 'category', 'data': ['A', 'B', 'C']},
-                'series': [
-                    {'type': 'line', 'data': [0.1, 0.2, 0.3],},
-                ],
+                'series': [{'type': 'line', 'data': [0.1, 0.2, 0.3]}],
             })
-    ui.button('Open', on_click=e.open)
+    ui.button('Open', on_click=expansion.open)
 
     screen.open('/')
     screen.click('Open')
     canvas = screen.find_by_tag('canvas')
     assert canvas.rect['height'] == 168
-    assert canvas.rect['width'] == 568
+    assert canvas.rect['width'] == 568

website/more_documentation/echart_documentation.py

@@ -21,36 +21,26 @@ def main_demo() -> None:
         echart.update()
 
     ui.button('Update', on_click=update)
-    
+
 
 def more() -> None:
-    @text_demo('Chart with clickable points', '''
+    @text_demo('EChart with clickable points', '''
         You can register a callback for an event when a series point is clicked.
     ''')
-    def click() -> None:
-        echart = ui.echart({
+    def clickable_points() -> None:
+        ui.echart({
             'xAxis': {'type': 'category'},
-            'yAxis': {'type': 'value', 'data': 'A', 'inverse': True},
-            'legend': {'textStyle': {'color': 'gray'}},
-            'series': [
-                {'type': 'line', 'name': 'Alpha', 'data': [20, 10, 30, 50, 40, 30]},
-            ],
-        },
-        on_point_click=lambda e: ui.notify(f'Click {e}')
-        ).classes('w-full h-64')
-
+            'yAxis': {'type': 'value'},
+            'series': [{'type': 'line', 'data': [20, 10, 30, 50, 40, 30]}],
+        }, on_point_click=ui.notify)
 
-    @text_demo('Chart with dynamic properties', '''
+    @text_demo('EChart with dynamic properties', '''
         Dynamic properties can be passed to chart elements to customize them such as apply an axis label format.
-        To make a property dynamic prefix `:` to the property name.
+        To make a property dynamic, prefix a colon ":" to the property name.
     ''')
-    def dynamic() -> None:
-        echart = ui.echart({
+    def dynamic_properties() -> None:
+        ui.echart({
             'xAxis': {'type': 'category'},
-            'yAxis': {'type': 'value', 'data': 'A', 'axisLabel' : {':formatter': f'value => "$" + value.toFixed(2)'}},
-            'legend': {'textStyle': {'color': 'gray'}},
-            'series': [
-                {'type': 'line', 'name': 'Alpha', 'data': [5, 8, 13, 21, 34, 55]},
-            ],
-        },
-        ).classes('w-full h-64')
+            'yAxis': {'axisLabel': {':formatter': 'value => "$" + value'}},
+            'series': [{'type': 'line', 'data': [5, 8, 13, 21, 34, 55]}],
+        })