from awesome_panel_extensions.awesome_panel import notebook
notebook.Header(folder="examples/reference/widgets", notebook="PerspectiveViewer.ipynb")
Perspective ships with the PerspectiveViewer
, which is an awesome interactive Pivot Table + Chart webcomponent. You can even use it for streaming analytics.
The PerspectiveViewer
enables the use of the perspective-viewer
webcomponent in Panel.
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
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
# 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
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!
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.
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.