93 lines
2.8 KiB
JavaScript
93 lines
2.8 KiB
JavaScript
function render_charts() {
|
|
$('.chart').map(function() {
|
|
render_chart($(this));
|
|
});
|
|
}
|
|
|
|
var chart_colors_full = ['#edc240', '#afd8f8', '#cb4b4b', '#4da74d', '#9440ed', '#666666', '#aaaaaa'];
|
|
|
|
var chart_chrome_full = {
|
|
series: { lines: { show: true } },
|
|
grid: { borderWidth: 2, borderColor: "#aaa" },
|
|
xaxis: { tickColor: "#fff", mode: "time", timezone: "browser" },
|
|
yaxis: { tickColor: "#eee", min: 0 },
|
|
legend: { show: false }
|
|
};
|
|
|
|
var chart_colors_node = ['#6ae26a', '#e24545'];
|
|
|
|
var chart_chrome_node = {
|
|
series: { lines: { show: true, lineWidth: 2, fill: true } },
|
|
grid: { borderWidth: 0 },
|
|
xaxis: { show: false },
|
|
yaxis: { show: false, min: 0 },
|
|
legend: { show: false }
|
|
};
|
|
|
|
function render_chart(div) {
|
|
var id = div.attr('id').substring('chart-'.length);
|
|
var rate_mode = div.hasClass('chart-rates');
|
|
var out_data = [];
|
|
var data = chart_data[id]['data'];
|
|
var fmt = chart_data[id]['fmt'];
|
|
|
|
var colors;
|
|
var chrome;
|
|
if (div.hasClass('chart-full')) {
|
|
colors = chart_colors_full;
|
|
chrome = chart_chrome_full;
|
|
}
|
|
else {
|
|
colors = chart_colors_node;
|
|
chrome = chart_chrome_node;
|
|
}
|
|
|
|
for (var name in data) {
|
|
var series = data[name];
|
|
var samples = series.samples;
|
|
var i = series.ix;
|
|
var d = [];
|
|
for (var j = 1; j < samples.length; j++) {
|
|
var x = samples[j].timestamp;
|
|
var y;
|
|
if (rate_mode) {
|
|
// TODO This doesn't work well if you are looking at
|
|
// stuff in the browser that is finer granularity than
|
|
// the data we have in the DB (and thus we get
|
|
// duplicated entries). Do we care? We should just
|
|
// never allow that...
|
|
y = (samples[j - 1].sample - samples[j].sample) * 1000 /
|
|
(samples[j - 1].timestamp - samples[j].timestamp);
|
|
}
|
|
else {
|
|
y = samples[j].sample;
|
|
}
|
|
d.push([x, y]);
|
|
}
|
|
out_data.push({data: d, color: colors[i], shadowSize: 0});
|
|
}
|
|
chart_data[id] = {};
|
|
|
|
chrome.yaxis.tickFormatter = fmt_y_axis(fmt);
|
|
$.plot(div, out_data, chrome);
|
|
}
|
|
|
|
function fmt_y_axis(fmt) {
|
|
return function (val, axis) {
|
|
// axis.ticks seems to include the bottom value but not the top
|
|
if (axis.max == 1 && axis.ticks.length > 1) {
|
|
var newTicks = [axis.ticks[0]];
|
|
axis.ticks = newTicks;
|
|
}
|
|
return fmt(val, axis.max);
|
|
}
|
|
}
|
|
|
|
function update_rate_options(sammy) {
|
|
var id = sammy.params['id'];
|
|
store_pref('rate-mode-' + id, sammy.params['mode']);
|
|
store_pref('chart-size-' + id, sammy.params['size']);
|
|
store_pref('chart-range-' + id, sammy.params['range']);
|
|
partial_update();
|
|
}
|