3. Django-dashing에 커스텀 위젯 추가

Django-dashing의 커스텀 대시보드를 통해 원하는 대시보드 생성이 가능합니다.

커스텀 대시보드의 생성은 아래 링크에서 확인이 가능합니다.

2017/01/30 - [Programming/Python] - 2. Django-dashing 커스텀 대시보드 만들기

커스텀 위젯의 추가로 다양한 정보를 대시보드에 추가할 수 있습니다.

1. 커스텀 위젯 생성

커스텀 위젯을 생성하기 위해 먼저 widgets.py 파일을 생성합니다.

Django Dashing이 제공하는 기본 위젯을 상속받아 새로운 위젯 생성이 가능합니다.

기본적으로 제공되는 위젯을 임포트하고 내용을 작성하면 됩니다.

# -*- encoding: utf-8 -*-
from dashing.widgets import NumberWidget
from random import randint

users = randint(50, 100)

class MyCustomWidget(NumberWidget):
    title = 'New Users'

    def get_value(self):
        global users
        users += 1
        return users

    def get_detail(self):
        global users
        return '{} actives'.format(users * 2)

    def get_more_info(self):
        global users
        return '{} fakes'.format(users * 3)

기본적으로 제공되는 NumberWidget을 상속받아서 메소드 오버라이딩을 통해 새롭게 정의했습니다.

원하는 형태로 작성하고 url.py을 다음 내용으로 변경합니다.

from django.conf.urls import include, url
from django.contrib import admin

from django.views.generic.base import RedirectView

from .view import CustomDashboard
from .widgets import MyCustomWidget

dashboard_patterns = [
    url(r'dashboard/$', CustomDashboard.as_view()),
    url(r'dashboard/widgets/new_users_widget/', MyCustomWidget.as_view(), name='widget_new_users_widget'),
    url(r'^$', RedirectView.as_view(url='dashboard/'), name='index'),
]

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'', include(dashboard_patterns), name='index'),
]

별도의 url 패턴을 생성해서 dashboard와 관련된 내용을 추가하고 위젯 역시 패턴에 추가합니다.

추가적인 커스텀 위젯도 계속 등록이 가능합니다.

다음으로 dashing-config.js에 커스텀 위젯을 추가합니다.

dashboard.addWidget('degree_widget', 'Number', {
    getData: function () {
        var self = this;
        Dashing.utils.get('new_users_widget', function(scope) {
            $.extend(self.scope, scope);
        });
    },
    interval: 5000
});

대시보드의 addWidget()을 호출하면 쉽게 커스텀 위젯 추가가 가능합니다.

변경 내용을 저장하고 웹서버를 다시 시작합니다.

python manage.py runserver

아래와 같이 표시되면 정상적으로 커스텀 위젯이 반영된 것입니다.

좌측 상단의 위젯이 추가한 커스텀 위젯입니다.

커스텀 위젯으로 다양한 내용을 대시보드에 추가할 수 있습니다.