Reporting Dashboards

Reporting Dashboards with Viewflow allow you to quickly implement interactive reports based on your Django models. This integration with Plotly makes it easy to create custom dashboards and visualizations for your application data.

To get started, you can create a new Dashboard Viewset object. As any viewset the Dashboard object takes a number of parameters to customize its appearance and behavior, including a title, app_name, and dashboard_template_name.

The layout parameter allows you to define the layout of your dashboard using a material.PageGrid object, which consists of one or more material.InnerRow objects. Within each InnerRow, you can place one or more dashboard elements such as material.Span or material.Card objects.

Here’s an example of a Dashboard with a single Card element that displays the number of new flows started today:

from dash import dcc
from viewflow.contrib.plotly import Dashboard, material

viewflowDashboard = Dashboard(
    title='Viewflow Demo Stats',
    app_name='vf_stats',
    dashboard_template_name='viewflow/contrib/plotly.html',
    layout=material.PageGrid([
        dcc.Interval(
            id='interval-component',
            interval=2500,
            n_intervals=0
        ),
        material.InnerRow([
            material.Span4([
                material.Card(
                    value_id='id_flows_started',
                    title='New Flows',
                    icon='assignment'
                )
            ]),
        ])
    ])
)

@viewflowDashboard.callback(Output('id_flows_started', 'children'),
def update_badges(n):
    today = timezone.now().date()
    flows_started = Process.objects.filter(created__gte=today).count()
    return flows_started

This example defines a single Card element with the value_id of id_flows_started, which is used in the update_badges function to update the value displayed in the Card. The update_badges function is called automatically when the dashboard is loaded or refreshed.

To use your Dashboard, you need to include it in your URL configuration. You can do this by adding the Dashboard object to your Viewset and including it in your urlpatterns:

site = Site(
    title="Workflow 101 Demo",
    primary_color="#01579b",
    secondary_color="#0097a7",
    viewsets=[
        Application(
            app_name="Reports",
            icon=Icon("account_balance"),
            menu_template_name=None,
            viewsets=[viewflowDashboard],
        )
    ]
)

urlpatterns = [
        path("", site.urls),
]

Once your Dashboard is defined and included in your URL configuration, you can navigate to it in your application and see your data visualized in real-time.

API

class viewflow.contrib.plotly.material.PageGrid(children, **kwargs)

class viewflow.contrib.plotly.material.InnerGrid(children, **kwargs)

class viewflow.contrib.plotly.material.Span(children, desktop=12, tablet=8, mobile=4, **kwargs)

class viewflow.contrib.plotly.material.Card(value_id=None, title=None, icon=None, color=None)