#317 start to implement ui.plotly

nicegui/elements/plotly.js

@@ -0,0 +1,19 @@
+export default {
+  template: `<div></div>`,
+  mounted() {
+    setTimeout(() => {
+      import(window.path_prefix + this.lib).then(() => {
+        this.chart = Plotly.newPlot(this.$el.id, this.options);
+      });
+    }, 0); // NOTE: wait for window.path_prefix to be set in app.mounted()
+  },
+  methods: {
+    update(options) {
+      this.chart.update(options);
+    },
+  },
+  props: {
+    options: Object,
+    lib: String,
+  },
+};

nicegui/elements/plotly.py

@@ -0,0 +1,29 @@
+import json
+
+import plotly.graph_objects as go
+
+from ..dependencies import js_dependencies, register_component
+from ..element import Element
+
+register_component('plotly', __file__, 'plotly.js', [], ['lib/plotly.min.js'])
+
+
+class Plotly(Element):
+
+    def __init__(self, figure: go.Figure) -> None:
+        """Plotly Element
+
+        Renders a plotly figure onto the page.
+
+        See `plotly documentation <https://plotly.com/python/>`_ for more information.
+
+        :param figure: the plotly figure to be displayed
+        """
+        super().__init__('plotly')
+        self.figure = figure
+        self._props['lib'] = [d.import_path for d in js_dependencies.values() if d.path.name == 'plotly.min.js'][0]
+        self.update()
+
+    def update(self) -> None:
+        self._props['options'] = json.loads(self.figure.to_json())
+        self.run_method('update', self._props['options'])

nicegui/ui.py

@@ -32,6 +32,7 @@ from .elements.menu import Menu as menu
 from .elements.menu import MenuItem as menu_item
 from .elements.mermaid import Mermaid as mermaid
 from .elements.number import Number as number
+from .elements.plotly import Plotly as plotly
 from .elements.progress import CircularProgress as circular_progress
 from .elements.progress import LinearProgress as linear_progress
 from .elements.radio import Radio as radio