Package: dse-do-dashboard
DSE_DO_DashboardPlotly/Dash-based dashboard for Decision Optimization projects in IBM Cloud Pak for Data.Source (GitHub)Documentation (GitHubPages)This repository contains the packagedse_do_dashboard. This can be installed using pip.IntroductionThis 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 classesDoDashApp. Main class that contains the framework code for the dashboard. Subclass to define your dashboard.VisualizationPage. Subclass for each visualization page in your dashboard.UsageMain steps:In your CPD project, define subclasses fordse_do_utils.DataManager,dse_do_utils.ScenarioDbManager, anddse_do_utils.PlotlyManagerSubclassdse_do_dashboard.DoDashApp.For each custom visualization page, define a subclass ofdse_do_dashboard.VisualizationPage.Provision a database (DB2 or Db2-on-cloud), get the credentials.Use thedse_do_utils.ScenarioDbManagerin your CPD project to insert one or more scenarios in the DB.Create anindex.pyfile that creates and instance of the DoDashApp and runs the server.Runindex.pyto start the dashboard. Open link with browser.DoDashApp UI structureAn instance of a DoDashApp will have the following UI layout:A top-menu bar with the logo and a drop-down menu to select the scenario.A left side-bar menu with 5 'main' pages:Home: Select reference scenarios. To be further developed.Prepare Data: Out-of-the-box UI to review the input tables.Run Model: run a deployed DO. To be further developed.Explore Solution: Out-of-the-box UI to review the output tables.Visualization: A tabbed-view of the custom VisualizationPages.In the left side-bar a collapsable menu with the custom VisualizationPagesDoDashApp ExampleAn example of a dashboard class that contains 2 custom VisualizationPages: KpiPage and DemandPage.
Most important:Create instances of the VisualizationPagesSpecify the class names of the DataManager, ScenarioDbManager and PlotlyManagerclass 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)VisualizationPage exampleExample of a custom VisualizationPage.
It uses the Plotly1ColumnVisualizationPage that creates a one-column vertical layout of a set of Plotly figures.
Most important:Create a subclass of VisualizationPage (in this case of a Plotly1ColumnVisualizationPage). Specify the name, url and id.Specify the names of the input and output tables that need to be loaded for the visualizations on this page.Define methods on the PlotlyManager that create Plotly Figures and add to methodget_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(),
        ]