#!/usr/bin/env python
# coding: utf-8

# Jupyter-flex allows you to create interactive dashboards based on Jupyter Notebooks based on two simple concepts:
# 
# 1. Control the layout of the dashboard using markdown headers
# 2. Define the dashboard components using Jupyter Notebook cell tags
# 
# ## Your first dashboard
# 
# Let's take a very simple Jupyter Notebook with 3 cells and one plot and convert it to a dashboard.

# In[ ]:


import plotly.express as px


# In[ ]:


df = px.data.iris()


# In[ ]:


fig = px.scatter(df, x="sepal_width", y="sepal_length")
fig.show()


# All you need to do to convert this to a dashboard is to add tag with the value `body` to the that outs the plot.
# 
# <div class="admonition tip">
#     <p class="admonition-title">How to view and add tags to cells in Jupyter Notebook</p>
#     <ol>
#         <li>In the top navigation go to View > Cell Toolbar > Tags</li>
#         <li>Then type "body" in the new input of target cell and click on "Add tag" or press enter</li>
#     </ol>
# </div>

# In[ ]:


fig = px.scatter(df, x="sepal_width", y="sepal_length")
fig.show()


# ### Converting the Notebook to a dashboard 
# 
# From here there is a couple of options to convert the notebook to a html dashboard.
# 
# 1. You can execute the notebook as you normaly do in the Jupyter Notebook UI and then select: `File > Download as > Flex Dashboard (.html)`:
# ![Jupyter-flex Download As](/assets/img/getting-started/download-as.png)
# 2. You can go in a terminal and run `nbconvert`:
# 
# <p class="code-header">Terminal</p>
# 
# ```
# $ jupyter nbconvert --to flex notebook.ipynb
# ```
# 
# Optionally add the `--execute` flag to execute the notebook before converting it so the outputs are shown in the dashboard.
# 
# <p class="code-header">Terminal</p>
# 
# ```
# $ jupyter nbconvert --to flex notebook.ipynb --execute
# ```
# 
# Open the resulting `.html` file in a browser and the result will be:
# 
# [![Jupyter-flex one plot](/assets/img/screenshots/getting-started/one-plot.png)](/examples/one-plot.html)
# 
# <p class="img-footer">Click on the image to open the rendered dashboard</p>
# 
# You might notice that the default title of the dashboard is the name of the notebook file, you can customize these using [parameters](#parameters-orientation-and-title).
# 
# This is a very simple example, now let's look at the card concept of Jupyter-flex.

# ## Cards: Multiple outputs
# 
# A Card is an object that holds one or more components of the dashboard such as markdown or any output generated from the execution of a Cell such as plots, text and widgets.
# 
# To learn more about cards and its options go to [Layout > Cards](/layouts/#cards).
# 
# You define a new Card by adding a level-3 markdown header (`###`).
# 
# Any output from a tagged Cell will be added to the current Card until a new Card, Section or Page is defined.
# 
# Going back to the notebook example we can add a new plot to the by adding two new cells:
# 
# 1. One markdown cell with a level-3 markdown header (`###`)
# 2. One code cell with the `body` tag

# In[ ]:


### Second plot


# In[ ]:


fig = px.scatter(df, x="petal_width", y="petal_length")
fig.show()


# [![Jupyter-flex two plots](/assets/img/screenshots/getting-started/two-plots.png)](/examples/two-plots.html)
# 
# <p class="img-footer">Click on the image to open the rendered dashboard</p>
# 
# You will notice two things:
# 
# 1. The default layout is a single column with cards stacked vertically and sized to fill available browser height.
# 2. The value of the level-3 markdown header is added to the Card header

# ## Sections: Multiple columns
# 
# To add another column to the dashboard define a new Section using a level 2 markdown header (`##`)
# 
# In this case, the value of the header is irrelevant (since the default theme doesn't show it), it acts as an indicator to create a new Section.

# In[ ]:


## Column


# In[ ]:


fig = px.scatter(df, x="sepal_length", y="petal_length")
fig.show()


# In this case the result would be:
# 
# [![Jupyter-flex two columns](/assets/img/screenshots/getting-started/two-columns.png)](/examples/two-columns.html)
# 
# <p class="img-footer">Click on the image to open the rendered dashboard</p>
# 
# You will notice another default orientation: to have multiple sections as columns.

# ## Parameters: Orientation and title
# 
# You can control the parameters of the dashboard such as title and orientation to be based of rows instead on columns
# by tagging a code cell with `parameters`.
# 
# Let's change the orientation of the plot to `rows` and add a title of `A Flex dashboard`.

# In[ ]:


flex_title = "A flex dashboard"
flex_orientation = "rows"


# [![Jupyter-flex two rows](/assets/img/screenshots/getting-started/two-rows.png)](/examples/two-rows.html)
# 
# <p class="img-footer">Click on the image to open the rendered dashboard</p>
# 

# ## Learning more
# 
# Well done! You have created you first Flex dashboard.
# 
# The [Layouts](/layouts) page goes in depth about all the options to control the content of Jupyter-flex dashboards.
# 
# The [Plotting](/plotting) page goes through some considerations around different plotting libraries in Jupyter-flex dashboards.
# 
# The [Voila and IPywidgets](/voila-ipywidgets/) page describes how to leverage Voila to create dashboards that use a live Jupyter kernel that enable viewers to change underlying parameters and see the results immediately using [ipywidgets](https://ipywidgets.readthedocs.io/).