CODEWITHSUNDEEP
javascriptpythondjangowidget
Chronojam
Chronojam

Reputation: 195

Django-dashing creating your own widgets

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

Answers (1)

Chronojam
Chronojam

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

Related Questions