Merge pull request #13 from zauberzeug/feature/highchart-element

Feature/highchart element

main.py

@@ -177,7 +177,7 @@ with example(ui.checkbox):
         checkbox_state = ui.label('False')
 
 with example(ui.switch):
-    ui.switch('switch me', on_change=lambda e: switch_state.set_text("ON" if e.value else'OFF'))
+    ui.switch('switch me', on_change=lambda e: switch_state.set_text('ON' if e.value else'OFF'))
     with ui.row():
         ui.label('the switch is:')
         switch_state = ui.label('OFF')
@@ -262,6 +262,24 @@ with example(ui.scene):
         teapot = 'https://upload.wikimedia.org/wikipedia/commons/9/93/Utah_teapot_(solid).stl'
         scene.stl(teapot).scale(0.2).move(-3, 4)
 
+with example(ui.chart):
+    from numpy.random import random
+
+    def update():
+        chart.view.options.series[0].data[:] = random(2)
+
+    options = {
+        'title': False,
+        'chart': {'type': 'bar'},
+        'xAxis': {'categories': ['A', 'B']},
+        'series': [
+            {'name': 'Alpha', 'data': [0.1, 0.2]},
+            {'name': 'Beta', 'data': [0.3, 0.4]},
+        ],
+    }
+    chart = ui.chart(options).classes('max-w-full h-64')
+    ui.button('Update', on_click=update)
+
 with example(ui.joystick):
     ui.joystick(
         color='blue',

nicegui/elements/chart.py

@@ -0,0 +1,16 @@
+import justpy as jp
+from typing import Dict
+from .element import Element
+
+
+class Chart(Element):
+    def __init__(self, options: Dict):
+        """Chart
+
+        An element to create a chart using `Highcharts <https://www.highcharts.com/>`_.
+
+        :param options: dictionary of highcharts options
+        """
+        view = jp.HighCharts(classes='m-2 p-2 border', style='width: 600px')
+        view.options = self.options = jp.Dict(**options)
+        super().__init__(view)

nicegui/ui.py

@@ -4,6 +4,7 @@ class Ui:
 
     from .elements.annotation_tool import AnnotationTool as annotation_tool
     from .elements.button import Button as button
+    from .elements.chart import Chart as chart
     from .elements.checkbox import Checkbox as checkbox
     from .elements.colors import Colors as colors
     from .elements.custom_example import CustomExample as custom_example