let several dataviz be used as dashlet
Created by: tttp
Quick analysis: the code for the dashboard is weird and a pita to debug (lots of caches, lots of unuseful ajax requests...). it ajax loads separately every dashlet as html blobs and adds them to the dom of the page (directly, not as iframe). When the dashlet generates the code, it isn't aware of the context of where the code will be embeded (eg it doesn't know in which column/position, the container div...). At least, I haven't found out that information.
so we have 3 issues with the way dashlets are done:
-
if you have a global js variable in the html you embed, it becomes a global variable for all the other dashlets. so if you use the same global variable into two different dashlets, you got collision and bad stuffs happen.
-
if you have the same dom id in two dashlets and use them in your js, you got collission and bad stuffs happen
-
it has to be designed for the size of the column, that we don't know in advance. beside doing it responsive (and that's not trivial with dc.js) don't know how to solve that one.
for the rest, I'd suggest the following conventions:
- by convention, wrap all the html into a global div with id="dataviz-nameofthetemplate" eg. in Contact.tpl
<div id="dataviz-contact">
<div id="xyz">that's where a graph will be inserted </div>
<div id="graph2">that's where another graph will be inserted...</div>
</div>
- wrap all the js into a big
;(function(guid) {
//...
var chart= dc.pieChart(guid+"#xyz",guid); //we explicitely put the graphs into a group
var chart2=dc.barChart(guid+"#graph2",guid);
dc.renderAll(guid);
}("#dataviz-contact "));
that way no global variables.
problems left
- it makes it a bit harder to debug, not sure how to solve that one
- if we were to allow in the future to insert the same dataviz twice (eg for two separate events) it would not work
- some graphs are just too wide to fit into the narrow columns of the dashboard