Reputation: 195
Ive been trying to create a custom widget for my dashboard which runs using the django-dashing framework
https://github.com/talpor/django-dashing
http://django-dashing.readthedocs.org/en/latest/
My CustomWidget is defined like so:
CustomWidget.py:
from dashing.widgets import Widget
class CustomWidget(Widget):
title = ''
more_info = ''
updated_at = ''
detail = ''
value = ''
def get_title(self):
return self.title
def get_more_info(self):
return self.more_info
def get_updated_at(self):
return self.updated_at
def get_detail(self):
return self.detail
def get_value(self):
return "$67"
#return self.value
def get_context(self):
return {
'title': self.get_title(),
'more_info': self.get_more_info(),
'updated_at': self.get_updated_at(),
'detail': self.get_detail(),
'value': self.get_value(),
}
static/widgets/custom_widget/custom_widget.css:
.widget-custom_widget {
background-color: #96bf48;
}
.widget-custom_widget h1 {
color: rgba(255, 255, 255, 0.7);
}
.widget-custom_widget h2 {
color: #fff;
}
.widget-custom_widget .detail {
font-weight: 500;
font-size: 30px;
color: #fff;
}
.widget-custom_widget .more-info {
color: rgba(255, 255, 255, 0.7);
}
.widget-custom_widget .updated-at {
color: rgba(0, 0, 0, 0.3);
}
static/widgets/custom_widget/custom_widget.html:
<div>
<h1>{ data.title }</h1>
<h2>{ data.value }</h2>
<p class="detail">{ data.detail }</p>
<p class="more-info">{ data.more_info }</p>
<p class="updated-at">{ data.updated_at }</p>
</div>
static/widgets/custom_widget/custom_widget.js:
/* global $, rivets, Dashing, Dashboard */
Dashing.widgets.CustomWidget = function (dashboard) {
var self = this,
widget;
this.__init__ = Dashing.utils.widgetInit(dashboard, 'custom_widget');
this.row = 1;
this.col = 1;
this.color = '#96bf48';
this.data = {};
this.getWidget = function () {
return widget;
};
this.getData = function () {};
this.interval = 1000;
};
static/dashing-config.js:
var dashboard = new Dashboard();
dashboard.addWidget('custom_widget_that_does_stuff', 'CustomWidget', {
getData: function () {
$.extend(this.data, {
title: 'Current Valuation',
more_info: 'In billions',
updated_at: 'Last updated at 14:10',
detail: '64%',
value: '$35'
});
}
});
dashboard.publish('custom_widget/getData')
My question is the following: How can i get my widget to update? (the widget itself appears, but only with the default settings)
if i hit the url: Dashboard/widgets/custom_widget - I can see the custom data that im returning from my CustomWidget class.
I read in the documentation that the correct way to do this is to call:
dashboard.publish('custom_widget/getData') However this yields nothing.
Has anyone got any ideas why this wouldnt be working? or a link to a tutorial ? (I wasnt able to find anything other than the document i linked above)
Thanks!
Upvotes: 1
Views: 1837
Reputation: 195
So i was able to correctly retrieve data by the following:
dashboard.addWidget('custom_widget', 'CustomWidget', {
getData: function () {
this.interval = 60000;
$.extend(this.data, {
title: "Something",
more_info: "",
updated_at: "",
detail: "",
});
var pineapple = this;
$.getJSON('widgets/custom_widget/render', function (data) {
console.log(data.value);
pineapple.data.value = data.value;
});
}
});
i.e dashboard.publish was a red herring :P
Upvotes: 5