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.

Prerequisites

Before you start, ensure you have Dash installed as it is a required dependency for creating dashboards. If you haven’t installed Dash yet, you can do so by running:

pip install dash

Getting Started

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.

Example: Recent Active Users Dashboard

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 dash.dependencies import Input, Output
from django.contrib.auth.models import User
from django.utils import timezone
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, # in milliseconds
            n_intervals=0
        ),
        material.InnerRow([
            material.Span4([
                material.Card(
                    value_id='id_active_users',
                    title='Active Users',
                    icon='person'
                )
            ]),
        ])
    ])
)

@viewflowDashboard.callback(
    Output('id_active_users', 'children'),
     [Input('interval-component', 'n_intervals')],
)
def update_active_users(n):
    today = timezone.now().date()
    active_users = User.objects.filter(last_login__date=today).count()
    return active_users

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

URL Configuration

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="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)