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
fromattrs
or a joined string of widget slugs (names) with_and_
separator. get_class
- Returns
class
fromattrs
. get_attrs
- Returns
attrs
withoutid
andclass
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.