RuBAN has built-in modules which can help you develop custom panels. This page should document these.

How to use these modules in ExtJS?

/wiki/spaces/CN/pages/55017476

Label dropper

var linechart = this.body.dom;
require(["ruban/utils/LabelDropper"], function(labeldropper) {
    labeldropper.drop_labels_from(linechart);
});

Label dropper drops labels which would overlap on the screen from the D3-generated x axes found amongst the decendants of it's parameters (the dom element can refer to the x axis itself as well).

Time bucketiser

This plugin helps you make aggregate API queries which show relevant information based on the time scale (as in if the selected time scale is a year, it will aggregate data points on a per-month basis; but if you selected a week, then it will aggregate on a per-day basis).

You can use this by declaring ruban/utils/TimeBucketiser as a dependency for your class:

define(["dojo/_base/declare", "jquery", "d3", "underscore", "ruban/utils/TimeBucketiser"], 
    function(declare, $, no, _, timebucketiser) { }

and then you can use it like this:

var bucketSize = timebucketiser.bucketSize(filterValue.start_absolute, filterValue.end_absolute, 120);
_.each(this.query.metrics, function(metric){
    metric.aggregators = [
       {
           "name": "avg",
           "sampling": {
               "value": bucketSize,
               "unit": "milliseconds"
           }
       }
    ];
});

In the above snippet, we asked the timebucketiser to calculate the bucket sizes between filterValue.start_absolute and filterValue.end_absolute, when we wanted to show at most 120 data points. This dynamic bucket size was then used to add the appropriate aggregators to all the metrics for a timeseriesData query.

Please note that the parameters should be in the format of "milliseconds since 1 Jan 1970" and not Date instances!