Merge pull request zauberzeug#1346 from natankeddem/echarts

Adding ECharts Element

DEPENDENCIES.md

@@ -6,6 +6,7 @@
 - socket.io: 4.7.1
 - es-module-shims: 1.7.3
 - aggrid: 30.0.3
+- echarts: 5.4.3
 - highcharts: 11.1.0
 - mermaid: 10.2.4
 - nipplejs: 0.10.1

nicegui/elements/echart.js

@@ -0,0 +1,31 @@
+export default {
+  template: "<div></div>",
+  mounted() {
+    setTimeout(() => {
+      this.chart = echarts.init(this.$el);
+      this.chart.setOption(this.options);
+      this.chart.resize();
+    }, 0); // NOTE: wait for window.path_prefix to be set in app.mounted()
+  },
+  beforeDestroy() {
+    this.destroyChart();
+  },
+  beforeUnmount() {
+    this.destroyChart();
+  },
+  methods: {
+    update_chart() {
+      if (this.chart) {
+        this.chart.setOption(this.options);
+      }
+    },
+    destroyChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
+    },
+  },
+  props: {
+    options: Object,
+  },
+};

nicegui/elements/echart.py

@@ -0,0 +1,27 @@
+from typing import Dict
+
+from ..element import Element
+
+
+class EChart(Element, component='echart.js', libraries=['lib/echarts/echarts.min.js']):
+
+    def __init__(self, options: Dict) -> None:
+        """Apache EChart
+
+        An element to create a chart using `ECharts <https://echarts.apache.org/>`_.
+        Updates can be pushed to the chart by changing the `options` property.
+        After data has changed, call the `update` method to refresh the chart.
+
+        :param options: dictionary of EChart options
+        """
+        super().__init__()
+        self._props['options'] = options
+        self._classes = ['nicegui-echart']
+
+    @property
+    def options(self) -> Dict:
+        return self._props['options']
+
+    def update(self) -> None:
+        super().update()
+        self.run_method('update_chart')

nicegui/static/nicegui.css

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

nicegui/ui.py

@@ -20,6 +20,7 @@
     'dark_mode',
     'date',
     'dialog',
+    'echart',
     'expansion',
     'grid',
     'html',
@@ -111,6 +112,7 @@
 from .elements.dark_mode import DarkMode as dark_mode
 from .elements.date import Date as date
 from .elements.dialog import Dialog as dialog
+from .elements.echart import EChart as echart
 from .elements.expansion import Expansion as expansion
 from .elements.grid import Grid as grid
 from .elements.html import Html as html

npm.json

@@ -45,6 +45,13 @@
       "package/dist/": ""
     }
   },
+  "echarts": {
+    "destination": "elements/lib",
+    "keep": ["package/dist/echarts\\.min\\.js", "package/dist/echarts\\.js\\.map"],
+    "rename": {
+      "package/dist/": ""
+    }
+  },
   "highcharts": {
     "destination": "elements/lib",
     "keep": [

website/documentation.py

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

website/more_documentation/echart_documentation.py

@@ -0,0 +1,21 @@
+from nicegui import ui
+
+
+def main_demo() -> None:
+    from random import random
+
+    echart = ui.echart({
+        'xAxis': {'type': 'value'},
+        'yAxis': {'type': 'category', 'data': ['A', 'B'], 'inverse': True},
+        'legend': {'textStyle': {'color': 'gray'}},
+        'series': [
+            {'type': 'bar', 'name': 'Alpha', 'data': [0.1, 0.2]},
+            {'type': 'bar', 'name': 'Beta', 'data': [0.3, 0.4]},
+        ],
+    })
+
+    def update():
+        echart.options['series'][0]['data'][0] = random()
+        echart.update()
+
+    ui.button('Update', on_click=update)