{
  "cells": [
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "%matplotlib inline"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "# GUI integrated\n\nThis demo shows how to render to output of the Python ``plotly`` library in\ncustom user interfaces.\n\nIn the given '.ui' file, a widget of the class type ``PlotlyPlot`` is placed.\nIf the ``ItomPlotlyRenderer`` renderer class is loaded and assigned as renderer\nto ``ploty``, the ``show`` method of the ``plotly.graph_objects.Figure`` class has\nanother optional keyword argument ``plotHandle``, where you can pass the\n``itom.plotHandle`` object of the corresponding widget in the ui file. Then\nthe output is rendered in this widget.\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "collapsed": false
      },
      "outputs": [],
      "source": [
        "# this module must be imported in order to load an itom specific renderer\n# for plotly and assign it as default.\nimport itomPlotlyRenderer\n\nimport plotly.express as px\n\n# import the base class ItomUi from the module itomUi in the itom-packages subfolder\nfrom itomUi import ItomUi\nfrom itom import ui\n\n\nclass PlotlyGuiDemo(ItomUi):\n    def __init__(self):\n        \"\"\"Constructor.\"\"\"\n        ItomUi.__init__(self, \"plotlyGuiDemo.ui\", ui.TYPEWINDOW, deleteOnClose=True)\n        self.plotlyPlot = self.gui.plotlyPlot\n\n    @ItomUi.autoslot(\"\")\n    def on_btnClear_clicked(self):\n        \"\"\"Clear the canvas.\"\"\"\n        self.plotlyPlot.call(\"setHtml\", \"\")\n\n    @ItomUi.autoslot(\"\")\n    def on_btnPlot1_clicked(self):\n        \"\"\"From the bar plot demo of plotly.\n\n        https://plotly.com/python/bar-charts/\n        \"\"\"\n        with self.disableGui(disableItems=[self.gui.groupActions]):\n            long_df = px.data.medals_long()\n    \n            fig = px.bar(long_df, x=\"nation\", y=\"count\", color=\"medal\", title=\"Long-Form Input\")\n            fig.show(plotHandle=self.plotlyPlot)\n\n    @ItomUi.autoslot(\"\")\n    def on_btnPlot2_clicked(self):\n        \"\"\"From the distplot demo of plotly.\n\n        https://plotly.com/python/distplot/\n        \"\"\"\n        with self.disableGui(disableItems=[self.gui.groupActions]):\n            df = px.data.tips()\n            fig = px.histogram(df, x=\"total_bill\", y=\"tip\", color=\"sex\", marginal=\"rug\", hover_data=df.columns)\n            fig.show(plotHandle=self.plotlyPlot)\n\n    @ItomUi.autoslot(\"\")\n    def on_btnPlot3_clicked(self):\n        \"\"\"From the animations demo of plotly.\n\n        https://plotly.com/python/animations/\n        \"\"\"\n        with self.disableGui(disableItems=[self.gui.groupActions]):\n            df = px.data.gapminder()\n    \n            fig = px.bar(\n                df,\n                x=\"continent\",\n                y=\"pop\",\n                color=\"continent\",\n                animation_frame=\"year\",\n                animation_group=\"country\",\n                range_y=[0, 4000000000],\n            )\n            fig.show(plotHandle=self.plotlyPlot)\n\n    @ItomUi.autoslot(\"\")\n    def on_btnPlot4_clicked(self):\n        \"\"\"From the parallel coordinates plot demo of plotly.\n\n        https://plotly.com/python/parallel-coordinates-plot/\n        \"\"\"\n        with self.disableGui(disableItems=[self.gui.groupActions]):\n            df = px.data.iris()\n            fig = px.parallel_coordinates(\n                df,\n                color=\"species_id\",\n                labels={\n                    \"species_id\": \"Species\",\n                    \"sepal_width\": \"Sepal Width\",\n                    \"sepal_length\": \"Sepal Length\",\n                    \"petal_width\": \"Petal Width\",\n                    \"petal_length\": \"Petal Length\",\n                },\n                color_continuous_scale=px.colors.diverging.Tealrose,\n                color_continuous_midpoint=2,\n            )\n            fig.show(plotHandle=self.plotlyPlot)\n    \n    \nif __name__ == \"__main__\":\n    win = PlotlyGuiDemo()\n    win.show()"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
        "<img src=\"file://../../_static/demoPlotlyGUI_1.png\" width=\"100%\">\n"
      ]
    }
  ],
  "metadata": {
    "kernelspec": {
      "display_name": "Python 3",
      "language": "python",
      "name": "python3"
    },
    "language_info": {
      "codemirror_mode": {
        "name": "ipython",
        "version": 3
      },
      "file_extension": ".py",
      "mimetype": "text/x-python",
      "name": "python",
      "nbconvert_exporter": "python",
      "pygments_lexer": "ipython3",
      "version": "3.8.10"
    }
  },
  "nbformat": 4,
  "nbformat_minor": 0
}