Plotly/Dash-based dashboard for Decision Optimization projects in IBM Cloud Pak for Data.
Source (GitHub)
Documentation (GitHubPages)
This repository contains the package dse_do_dashboard
. This can be installed using pip.
This re-usable and extendable framework allows a data-scientist to quickly configure a Plotly/Dash-based dashboard for a project in IBM Cloud Pak for Data. This package is mainly focussed on Decision Optimization projects, but can be used for any CPD project.
Data exchange between the CPD project and the dashboard is through a (DB2/DB2WH/DB-on-cloud) database. The database contains one or more 'scenarios'. A scenario is a set of named DataFrames, divided in 2 sets: inputs and outputs.
A user would typically define a set of custom VisualizationPages, each containing one or more Plotly plots. In addition, Folium maps are supported.
Main steps:
dse_do_utils.DataManager
, dse_do_utils.ScenarioDbManager
, and dse_do_utils.PlotlyManager
dse_do_dashboard.DoDashApp
.dse_do_dashboard.VisualizationPage
.dse_do_utils.ScenarioDbManager
in your CPD project to insert one or more scenarios in the DB.index.py
file that creates and instance of the DoDashApp and runs the server.index.py
to start the dashboard. Open link with browser.An instance of a DoDashApp will have the following UI layout:
An example of a dashboard class that contains 2 custom VisualizationPages: KpiPage and DemandPage. Most important:
class FruitDashApp(DoDashApp):
def __init__(self, db_credentials: Dict, schema: str = None, cache_config: Dict = None,
port: int = 8050, debug: bool = False, host_env: str = None):
visualization_pages = [
KpiPage(self),
DemandPage(self),
]
logo_file_name = "logistics.jpg"
database_manager_class = FruitScenarioDbManager
data_manager_class = FruitDataManager
plotly_manager_class = FruitPlotlyManager
super().__init__(db_credentials, schema,
logo_file_name=logo_file_name,
cache_config=cache_config,
visualization_pages = visualization_pages,
database_manager_class=database_manager_class,
data_manager_class=data_manager_class,
plotly_manager_class=plotly_manager_class,
port=port, debug=debug, host_env=host_env)
Example of a custom VisualizationPage. It uses the Plotly1ColumnVisualizationPage that creates a one-column vertical layout of a set of Plotly figures. Most important:
get_plotly_figures
.class DemandPage(Plotly1ColumnVisualizationPage):
def __init__(self, dash_app: DoDashApp):
super().__init__(dash_app=dash_app,
page_name='Demand',
page_id='demand_tab',
url='demand',
input_table_names=['Demand','Inventory'], # Use ['*'] to include all tables
output_table_names=[],
)
def get_plotly_figures(self, pm: PlotlyManager) -> List[Figure]:
return [
pm.plotly_demand_pie(),
pm.plotly_demand_vs_inventory_bar(),
]