Dashboards¶

Django-controlcenter supports unlimited number of dashboards. You can access them by passing those slugs in settings.CONTROLCENTER_DASHBOARDS to url: /admin/dashboards/<slugs>/.

Dashboard options¶

Dashboard class has only two properties:

title: By default the class name is used as title.
widgets: A list of widgets. To group multiple widgets in one single block pass them in a list or wrap with a special Group class for additional options.

Here is an example:

from controlcenter import Dashboard, widgets

class OrdersDashboard(Dashboard):
    title = 'Orders'
    widgets = (
        NewOrders,
        (OrdersInProgress, FinishedOrders),
        Group([FinishedOrdersChart, ThisWeekOrdersChart],
              # Makes whole block larger
              width=widgets.LARGE,
              # Add html attribute class
              attrs={'class': 'my_fancy_group'})
    )

The grid¶

Dashboard is a responsive grid that appropriately scales up to 6 columns as the viewport size increases. It uses Masonry.js to make a better grid layout.

Viewport/column width	1	2	3	4	5	6
initial	100%
> 768px	50%			100%
> 1000px	25%	33%	50%	66%	75%	100%

Most useful sizes are available in widgets module:

SMALL = 1
MEDIUM = 2
LARGE = 3
LARGER = 4
LARGEST = 5
FULL = 6

Media class¶

Dashboard uses Media class from django to include static files on page:

class OrdersDashboard(Dashboard):
    title = 'Orders'
    widgets = (
        NewOrders,
        ...
    )

    class Media:
        css = {
            'all': 'my.css'
        }

Group options¶

Every element in Dashboard.widgets is automatically wrapped with a Group instance even if it’s a single widget. This is the necessary process to make possible stack widgets together in one single block. You can define Group manually to control it’s html attributes or override widget’s width and height properties. For example:

class MyWidget(widgets.ItemList):
    model = Pizza
    values_list = ('name', 'price')
    width = widgets.LARGE

class MyDashboard(Dashboard):
    widgets = (
        widgets.Group([MyWidget], width=widgets.LARGER, height=300),
    )

attrs: A dictionary of html attributes to set to the group (class, id, data-foo, etc.).
width: An integer specifying the width in columns. By default the biggest value within the group is chosen.
height: An integer specifying the max-height of the block in pixels. If necessary a scroll appears.

Note

By default Group has the height of the biggest widget within group. Switching tabs (widgets) won’t change it, because that will make the whole grid float.

Group supports the following methods:

get_id: Returns id from attrs or a joined string of widget slugs (names) with _and_ separator.
get_class: Returns class from attrs.
get_attrs: Returns attrs without id and class keys.
get_width: Returns width if provided or biggest value in the group.
get_height: Returns height if provided or biggest value in the group.