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

# In[1]:


from awesome_panel_extensions.awesome_panel import notebook
notebook.Header(folder="examples/reference/widgets", notebook="PerspectiveViewer.ipynb")


# # PerspectiveViewer - Reference Guide
# 
# [Perspective](https://github.com/finos/perspective) ships with the `PerspectiveViewer`, which is an awesome **interactive Pivot Table + Chart** webcomponent.  You can even use it for **streaming analytics**.
# 
# <img src="https://raw.githubusercontent.com/MarcSkovMadsen/awesome-panel-extensions/master/assets/videos/perspective-viewer-finos.gif" style="max-height:400px">
# 
# The `PerspectiveViewer` enables the use of the `perspective-viewer` webcomponent in Panel.
# 
# #### Parameters:
# 
# * **``data``** (DataFrame): The data loaded to the viewer.
# 
# 
# * **``columns``** (list): A list of source columns to show as columns. For example `["x", "y"]`.
# * **``columns_computed``** (list): A list of computed columns. For example [{"name":"x+y","func":"add","inputs":["x","y"]}].
# * **``columns_pivot``** (list): A list of source columns to pivot by. For example `["x", "y"]`.
# * **``rows_pivot``** (list): A list of source columns to group by. For example `["x", "y"]`.
# * **``aggregates``** (dict): How to aggregate. For example `{x: "distinct count"}`.
# * **``sort``** (list): How to sort. For example `[["x","desc"]]`.
# * **``filter``** (list): How to filter. For example `[["x", "<", 3],["y", "contains", "abc"]]`.
# 
# 
# * **``plugin``** (str): Determines how to display the data. One of `hypergrid`, `datagrid`, `d3_y_bar`, `d3_x_bar`, `d3_y_line`, `d3_y_area`, `d3_y_scatter`, `d3_xy_scatter`, `d3_treemap`, `d3_sunburst`, `d3_heatmap`, `d3_candlestick`, `d3_ohlc`.
# * **``theme``** (str): Determines the style. One of `perspective-viewer-material` (default), `perspective-viewer-material-dark`, `perspective-viewer-material-dense`, `perspective-viewer-material-dense-dark`, `perspective-viewer-vaporwave`.
# 
# The `PerspectiveViewer` has the same layout and styling parameters as most other widgets. For example `width` and `sizing_mode`.
# 
# ___
# 
# Let's start by importing the **dependencies**

# In[2]:


import param
import panel as pn
import pandas as pd
import panel as pn
import time
from awesome_panel_extensions.widgets.perspective_viewer import PerspectiveViewer

PerspectiveViewer.config() # Imports the .js and .css files of the perspective-viewer web component
pn.extension() # Please note that pn.extension must come after PerspectiveViewer.config() when used in Notebook.

DARK_BACKGROUND = "rgb(42, 44, 47)"
DARK_COLOR = "white"
PERSPECTIVE_LOGO = "https://perspective.finos.org/img/logo.png"
PANEL_LOGO = "https://panel.holoviz.org/_static/logo_horizontal.png"


# Let's load **S&P500 financials data**

# In[3]:


# Source: https://datahub.io/core/s-and-p-500-companies-financials
DATA = "https://raw.githubusercontent.com/MarcSkovMadsen/awesome-panel/master/application/pages/awesome_panel_express_tests/PerspectiveViewerData.csv"
dataframe = pd.read_csv(DATA)


# Let's create a **PerspectiveViewer app** to display the data

# In[4]:


perspective_viewer = PerspectiveViewer(
    data=dataframe,
    theme="perspective-viewer-material-dark",
    columns=['Name', 'Sector', 'Price'],
    sizing_mode="stretch_both",)

top_app_bar = pn.Row(
    pn.pane.PNG(PERSPECTIVE_LOGO, height=50, margin=(10, 25, 10, 10)),
    pn.layout.HSpacer(),
    margin=0,
    background=DARK_BACKGROUND,
)

settings_parameters = [
    "theme",
    "row_pivots",
    "plugin",
    "columns",
    "aggregates",
    "filters",
    "sort",
    "rows",
    "column_pivots",
]

settings_pane = pn.WidgetBox(pn.Param(
    perspective_viewer,
    parameters=settings_parameters,
    width=200,
    sizing_mode="stretch_height",
),background="#9E9E9E",)

app = pn.Column(
    pn.pane.Markdown(__doc__),
    top_app_bar,
    pn.Row(
        perspective_viewer,
        pn.layout.VSpacer(width=10),
        settings_pane,
        sizing_mode="stretch_both",
        margin=0,
        background=DARK_BACKGROUND,
    ),
    notebook.Style(container_width="90%"),
    pn.layout.HSpacer(height=50),
    height=800, sizing_mode="stretch_width",
)


app


# **Click the three dots in the upper left corner** to start the interactive exploration!

# ## Known Issues
# 
# In a Jupyter Notebook setting parameters like `columns` and `column_pivots` on construction or from code does not work. Please **click** the button below to see what happens.

# In[5]:


button = pn.widgets.Button(name="CUSTOM REPORT", button_type="success")
@param.depends(button.param.clicks, watch=True)
def set_custom_report(*events):
    perspective_viewer.columns=["name", "sector", "price"]
    
button


# If you're primary usage is Notebook then you should checkout the **Perspective IPyWidget**.
# 
# There are no known issues on the server though.
# 
# ## Roadmap
# 
# - Fix issues above
# - Convert from WebComponent extension to Bokeh extension.
# - Support other Dataframe types than Pandas.
# - Support update of data for streaming use case.
# - Include in Panel package
# 
# ## Resources
# 
# - [Perspective Github](https://github.com/finos/perspective)
# - [Perspective IPyWidget Docs](https://perspective-python.readthedocs.io/en/latest/quickstart.html)

# In[ ]: