Make a metric dashboard for Trello with Django Dashing

  • Jun
    25

A few weeks ago I developed a python library to display metrics for a project requirement, in this post I’ll show how to use it.

The idea is to connect django-dashing with Trello API via https://pypi.python.org/pypi/trello

First I make a new Django project and install django-dashing via pip


mkvirtualenv trello_dashboard
pip install Django django-dashing
django-admin.py startproject trello_dashboard

Now I add dashing to INSTALLED_APPS in setting.py


INSTALLED_APPS = (
...
'trello_dashboard',
'dashing',
)

And include the dashing URLconf in urls.py like this:


url(r'^dashboard/', include('dashing.urls')),

To see the dashboard you must have at least one staff user. Then I run `python manage.py syncdb` and add a superuser to view the dashboard.

Then run python manage.py runserver and go to http://127.0.0.1:8000/dashboard/ to view the example dashboard.

django-dashing

Now the interesting part of this tutorial. To personalize the dashboard we need to create an empty dashing-config.js file in the static directory, if you refresh you won’t be able to see any widget because the current configuration is empty.

We can add different types of widgets, for this example we will add a Number widget with the following code in our dashing-config.js file.


var dashboard = new Dashboard();
dashboard.addWidget('trello_widget', 'Number', {
getData: function () {
this.data = {
title: 'Trello Dev Cards',
more_info: '43 Done',
updated_at: 'In the lasts 24 hours',
change_rate: '5 inactives',
value: '125'
};
dashboard.publish('trello_widget/render');
}
});
Now will be create a NumberWidget that returns a json document with the metrics about open/close cards in a public Trello board.
First install the python wrapper for Trello:


pip install trello

And add a widget.py where we use the NumberWidget class


from django.conf import settings
from dashing.widgets import NumberWidget
from trello import TrelloApi

trello = TrelloApi(settings.TRELLO_APP_KEY)

class TrelloCards(NumberWidget):
title = 'Trello Dev Cards'
def get_more_info(self):
return '{} closed'.format(len(trello.boards.get_card_filter('closed', '4d5ea62fd76aa1136000000c')))
def get_change_rate(self):
return '{} open'.format(len(trello.boards.get_card_filter('open', '4d5ea62fd76aa1136000000c')))
def get_value(self):
return len(trello.boards.get_card_filter('all', '4d5ea62fd76aa1136000000c'))

You can get an API key from https://trello.com/1/appKey/generate, and you can get the board ID following the guide Getting Started provided by Trello.

Now add the url to the widget:


from .widgets import TrelloCards

urlpatterns = patterns('',
...
url(r'^trello_cards/$', TrelloCards.as_view(), name='trello_cards_widget'),
)

Finally replace the dummy code in the dashing-config file for an ajax based implementation


dashboard.addWidget('trello_widget', 'Number', {
getData: function () {
var self = this;
$.get('/trello_cards/', function(data) {
self.data = data;
dashboard.publish('trello_widget/render');
});
dashboard.publish('trello_widget/render');
}
});

Now we have a new widget that is updated every second with the metrics of the cards about our board.

trello django dashing

For more widgets and configuration options you can see the docs, the objective of this project is add more widgets over time, but for now only have a very basic widgets and a promise to write a guide to create customs widgets (It really is quite simple), here is the GitHub project any question, comment, suggestion or bug by the issue list.


Posted on June 25, 2014, 3:12 p.m.