doevisualizations
Version:
Data Visualization Library based on RequireJS and D3.js (v4+)
88 lines (78 loc) • 3.1 kB
JavaScript
define(['jquery',
'underscore',
'jqueryuiwidget',
'handlebars',
'd3'
],
function($, _, ui, Handlebars, d3) {
$.widget("doe.doetext", {
// Options to be used as defaults
options: {},
_template: function() {
var arrHTML = [];
arrHTML.push('<div class="doetext">');
arrHTML.push('<div class="title">');
arrHTML.push('</div>');
arrHTML.push('<div class="subTitle">');
arrHTML.push('</div>');
arrHTML.push('</div>');
return arrHTML.join('');
},
_create: function() {
this._fetchAndRender();
},
_fetchAndRender: function() {
this._compileTemplate();
},
_compileTemplate: function() {
var compiled = Handlebars.compile(this._template());
this.element.html(compiled({}));
this.element.addClass('doetextcontainer');
this._bindEvents();
},
_generateRawTable: function() {
var arrHTML = [];
var data = this.options["Data"];
// console.log("raw table data: ", data);
if (data.length > 0) {
arrHTML.push('<div class ="doeshow">');
arrHTML.push('<table class = textTable>');
arrHTML.push('<thead>');
arrHTML.push('<tr>');
for (p in data[0]) {
arrHTML.push('<th>');
arrHTML.push(p);
arrHTML.push('</th>');
}
arrHTML.push('</tr>');
for (var i = 0; i < data.length; i++) {
arrHTML.push('<tr>');
for (prop in data[i]) {
arrHTML.push('<td>');
arrHTML.push(data[i][prop]);
arrHTML.push('</td>');
}
arrHTML.push('</tr>');
}
arrHTML.push('</thead>');
arrHTML.push('</table>');
arrHTML.push('</div>');
}
this.element.append(arrHTML.join(''));
},
_bindEvents: function() {
this.element.find('div.title').html(this.options.ChartTitle);
this.element.find('div.subTitle').html(this.options.ChartSubTitle);
this._generateRawTable();
this._trigger("complete", null, {});
},
destroy: function() {
},
_setOption: function(key, value) {
this._super(key, value);
},
_setOptions: function(options) {
this._super(options);
}
});
});