code review

examples/echarts/main.py

@@ -1,19 +0,0 @@
-from random import random
-
-from nicegui import ui
-
-option = {"xAxis": {"type": "value"}, "yAxis": {"type": "value"}, "series": [{"data": [[0, 0]], "type": "line"}]}
-
-echarts = ui.echarts(option).style("min-width: 100%").style("min-height: 400px")
-point = 1
-
-
-def update():
-    global point
-    echarts.options["series"][0]["data"].append([point, random()])
-    point = point + 1
-    echarts.update()
-
-
-ui.button("Update", on_click=update)
-ui.run()

nicegui/elements/echarts.js

@@ -19,7 +19,6 @@ export default {
   methods: {
     update_chart() {
       if (this.chart) {
-        console.log(this.options);
         this.chart.setOption(this.options);
       }
     },
@@ -30,7 +29,6 @@ export default {
     },
   },
   props: {
-    type: String,
     options: Object,
     extras: Array,
   },

nicegui/elements/echarts.py

@@ -3,11 +3,13 @@ from typing import Dict, List
 from ..element import Element
 
 
-class ECharts(
-    Element, component="echarts.js", libraries=["lib/echarts/*.js"], extra_libraries=["lib/echarts/extensions/*.js"]
-):
+class ECharts(Element,
+              component='echarts.js',
+              libraries=['lib/echarts/*.js'],
+              extra_libraries=['lib/echarts/extensions/*.js']):
+
     def __init__(self, options: Dict, *, extras: List[str] = []) -> None:
-        """Chart
+        """Apache ECharts
 
         An element to create a chart using `ECharts <https://echarts.apache.org/>`_.
         Updates can be pushed to the chart by changing the `options` property.
@@ -17,15 +19,15 @@ class ECharts(
         :param extras: list of extra extensions to include
         """
         super().__init__()
-        self._props["type"] = type
-        self._props["options"] = options
-        self._props["extras"] = extras
+        self._props['options'] = options
+        self._props['extras'] = extras
         self.libraries.extend(library for library in self.extra_libraries if library.path.stem in extras)
+        self._classes = ['nicegui-echarts']
 
     @property
     def options(self) -> Dict:
-        return self._props["options"]
+        return self._props['options']
 
     def update(self) -> None:
         super().update()
-        self.run_method("update_chart")
+        self.run_method('update_chart')

nicegui/static/nicegui.css

@@ -64,6 +64,10 @@
   width: 100%;
   height: 16rem;
 }
+.nicegui-echarts {
+  width: 100%;
+  height: 16rem;
+}
 .nicegui-scroll-area {
   width: 100%;
   height: 16rem;

nicegui/ui.py

@@ -20,7 +20,7 @@ __all__ = [
     'dark_mode',
     'date',
     'dialog',
-    'echarts'
+    'echarts',
     'expansion',
     'grid',
     'html',

website/documentation.py

@@ -131,6 +131,7 @@ def create_full() -> None:
     load_demo(ui.table)
     load_demo(ui.aggrid)
     load_demo(ui.chart)
+    load_demo(ui.echarts)
     if 'matplotlib' in optional_features:
         load_demo(ui.pyplot)
         load_demo(ui.line_plot)

website/more_documentation/echarts_documentation.py

@@ -0,0 +1,16 @@
+from nicegui import ui
+
+
+def main_demo() -> None:
+    chart = ui.echarts({
+        'xAxis': {'type': 'value'},
+        'yAxis': {'type': 'value'},
+        'series': [{'data': [[0, 0], [1, 1]], 'type': 'line'}],
+    })
+
+    def update():
+        x = len(chart.options['series'][0]['data'])
+        chart.options['series'][0]['data'].append([x, x**2])
+        chart.update()
+
+    ui.button('Update', on_click=update)