Skip to content

Commit

Permalink
Display the last day initially by default.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mitar
mitar committed Nov 21, 2015
1 parent ffb9d13 commit adfbb91
Showing 1 changed file with 144 additions and 120 deletions.
264 changes: 144 additions & 120 deletions django_datastream/static/datastream/js/datastream.js
View file
Expand Up @@ -157,6 +157,7 @@
var MAX_POINTS_NUMBER = 300;
// TODO: How much exactly do we want?
var MAX_POINTS_LOAD_LIMIT = 1000;
var INITIAL_TIMESPAN = 24 * 60 * 60 * 1000; // One day.

// The order of entries is from the lowest to the highest granularity on purpose,
// so that computing the granularity from a range is easier. Duration is in seconds.
Expand Down Expand Up @@ -399,7 +400,13 @@
Stream.prototype.valueDownsamplers = function (initial) {
var self = this;

return _.union(self.tags.visualization.value_downsamplers, initial ? _.intersection(self.value_downsamplers, ['mean']) : [])
if (initial) {
// Navigator data is always using just mean datapoints.
return _.intersection(self.value_downsamplers, ['mean']);
}
else {
return self.tags.visualization.value_downsamplers;
}
};

Stream.prototype.timeDownsamplers = function (initial) {
Expand Down Expand Up @@ -654,8 +661,7 @@
'type': 'all',
'text': "all"
}
],
'selected': 4 // All.
]
},
'xAxis': {
'id': 'x-axis',
Expand Down Expand Up @@ -739,6 +745,29 @@
});
};

// Prepending and appending null values so that all charts have the same time span.
Chart.prototype.fullRangeDatapints = function (datapoints) {
var self = this;

var startDatapoint = [self.streamManager.extremes.start, null];
var endDatapoint = [self.streamManager.extremes.end, null];

if (datapoints.length) {
if (datapoints[0][0] > self.streamManager.extremes.start) {
datapoints = [startDatapoint].concat(datapoints);
}

if (datapoints[datapoints.length - 1][0] < self.streamManager.extremes.end) {
datapoints = datapoints.concat([endDatapoint]);
}
}
else {
datapoints = [startDatapoint, endDatapoint];
}

return datapoints;
};

Chart.prototype.getYAxisTitle = function (stream) {
var title = [];

Expand Down Expand Up @@ -862,135 +891,130 @@
Chart.prototype.renderInitialData = function (callback) {
var self = this;

self.loadData(self.streamManager.extremes.start, self.streamManager.extremes.end, true, function (error, datapoints) {
self.loadData(self.streamManager.extremes.start, self.streamManager.extremes.end, true, function (error, allDatapoints) {
if (error) {
if (callback) callback(error);
return;
}

// Store datapoints array so that we can access it in the JSON exporting operation.
self.highcharts.latestDatapoints = datapoints;
self.loadData(self.streamManager.extremes.end - INITIAL_TIMESPAN, self.streamManager.extremes.end, false, function (error, datapoints) {
if (error) {
if (callback) callback(error);
return;
}

self.createYAxis(datapoints);
// Store datapoints array so that we can access it in the JSON exporting operation.
self.highcharts.latestDatapoints = datapoints;

_.each(datapoints, function (streamDatapoints, i) {
var stream = streamDatapoints.stream;
self.createYAxis(datapoints);

// We have an assumption that y-axis will be used for or range and main type, or for flag type, but not for both.
// This is because we are setting y-axis for a flag type into a different pane.
assert((stream._rangeTypes.length + stream._mainTypes.length) === 0 || ((stream._rangeTypes.length + stream._mainTypes.length) > 0 && stream._flagTypes.length === 0));

var yAxis = self.getYAxis(stream);

// The first series which was already added. If null, the current series being added is the first one.
var firstSeries = null;

// TODO: We should probably deduplicate code here.
_.each(stream._rangeTypes, function (rangeType, j) {
var s = self.highcharts.addSeries({
'id': 'range-' + j + '-' + stream.id,
'streamId': stream.id, // Our own option.
'name': stream.tags.title,
'linkedTo': firstSeries ? firstSeries.options.id : null,
'yAxis': yAxis.options.id,
'type': rangeType.type,
'color': firstSeries ? firstSeries.color : null, // To automatically choose a color.
'showRects': firstSeries ? false : true, // We want rect to be shown only for the first series (so that each color is shown only once).
'lineWidth': 0,
'fillOpacity': 0.3,
'tooltip': {
// TODO: Should be based on rangeType.
'pointFormat': '<span style="color:{series.color}">{series.name} min/max</span>: <b>{point.low}</b> - <b>{point.high}</b><br/>'
},
'visible': !stream.tags.visualization.hidden,
'data': streamDatapoints.range[j]
// Do not redraw.
}, false);
firstSeries = firstSeries || s;
});
_.each(stream._mainTypes, function (mainType, j) {
var s = self.highcharts.addSeries({
'id': 'main-' + j + '-' + stream.id,
'streamId': stream.id, // Our own option.
'name': stream.tags.title,
'linkedTo': firstSeries ? firstSeries.options.id : null,
'yAxis': yAxis.options.id,
'type': mainType.type,
'color': firstSeries ? firstSeries.color : null, // To automatically choose a color.
'showRects': firstSeries ? false : true, // We want rect to be shown only for the first series (so that each color is shown only once).
'tooltip': {
// TODO: Should be based on mainType.
'pointFormat': '<span style="color:{series.color}">{series.name} mean</span>: <b>{point.y}</b><br/>'
},
'visible': !stream.tags.visualization.hidden,
'data': streamDatapoints.main[j]
// Do not redraw.
}, false);
firstSeries = firstSeries || s;
});
_.each(stream._flagTypes, function (flagType, j) {
// There is no way to toggle flags on and off, so we do not respect "hidden" tag.
var s = self.highcharts.addSeries({
'id': 'flag-' + j + '-' + stream.id,
'streamId': stream.id, // Our own option.
'name': stream.tags.title,
'linkedTo': firstSeries ? firstSeries.options.id : null,
'yAxis': yAxis.options.id,
'type': flagType.type,
'showInLegend': false,
'showRects': false,
'color': 'black', // We force it to black, so that other series automatic color choosing is not interfered with.
'shape': 'squarepin',
'zIndex': 100, // We want flags to always be over other series.
'data': streamDatapoints.flag[j]
// Do not redraw.
}, false);
firstSeries = firstSeries || s;
});
if (streamDatapoints.main[0] || streamDatapoints.range[0]) {
var navigatorData = streamDatapoints.main[0] || streamDatapoints.range[0];

// Prepending and appending null values so that all navigators for all charts have the same time span.
if (navigatorData.length) {
if (navigatorData[0][0] > self.streamManager.extremes.start) {
navigatorData = [[self.streamManager.extremes.start, null]].concat(navigatorData);
}
_.each(datapoints, function (streamDatapoints, i) {
var stream = streamDatapoints.stream;

if (navigatorData[navigatorData.length - 1][0] < self.streamManager.extremes.end) {
navigatorData = navigatorData.concat([[self.streamManager.extremes.end, null]]);
}
}
else {
navigatorData = [[self.streamManager.extremes.start, null], [self.streamManager.extremes.end, null]];
// We have an assumption that y-axis will be used for or range and main type, or for flag type, but not for both.
// This is because we are setting y-axis for a flag type into a different pane.
assert((stream._rangeTypes.length + stream._mainTypes.length) === 0 || ((stream._rangeTypes.length + stream._mainTypes.length) > 0 && stream._flagTypes.length === 0));

var yAxis = self.getYAxis(stream);

// The first series which was already added. If null, the current series being added is the first one.
var firstSeries = null;

// TODO: We should probably deduplicate code here.
_.each(stream._rangeTypes, function (rangeType, j) {
var s = self.highcharts.addSeries({
'id': 'range-' + j + '-' + stream.id,
'streamId': stream.id, // Our own option.
'name': stream.tags.title,
'linkedTo': firstSeries ? firstSeries.options.id : null,
'yAxis': yAxis.options.id,
'type': rangeType.type,
'color': firstSeries ? firstSeries.color : null, // To automatically choose a color.
'showRects': firstSeries ? false : true, // We want rect to be shown only for the first series (so that each color is shown only once).
'lineWidth': 0,
'fillOpacity': 0.3,
'tooltip': {
// TODO: Should be based on rangeType.
'pointFormat': '<span style="color:{series.color}">{series.name} min/max</span>: <b>{point.low}</b> - <b>{point.high}</b><br/>'
},
'visible': !stream.tags.visualization.hidden,
'data': streamDatapoints.range[j]
// Do not redraw.
}, false);
firstSeries = firstSeries || s;
});
_.each(stream._mainTypes, function (mainType, j) {
var s = self.highcharts.addSeries({
'id': 'main-' + j + '-' + stream.id,
'streamId': stream.id, // Our own option.
'name': stream.tags.title,
'linkedTo': firstSeries ? firstSeries.options.id : null,
'yAxis': yAxis.options.id,
'type': mainType.type,
'color': firstSeries ? firstSeries.color : null, // To automatically choose a color.
'showRects': firstSeries ? false : true, // We want rect to be shown only for the first series (so that each color is shown only once).
'tooltip': {
// TODO: Should be based on mainType.
'pointFormat': '<span style="color:{series.color}">{series.name} mean</span>: <b>{point.y}</b><br/>'
},
'visible': !stream.tags.visualization.hidden,
'data': streamDatapoints.main[j]
// Do not redraw.
}, false);
firstSeries = firstSeries || s;
});
_.each(stream._flagTypes, function (flagType, j) {
// There is no way to toggle flags on and off, so we do not respect "hidden" tag.
var s = self.highcharts.addSeries({
'id': 'flag-' + j + '-' + stream.id,
'streamId': stream.id, // Our own option.
'name': stream.tags.title,
'linkedTo': firstSeries ? firstSeries.options.id : null,
'yAxis': yAxis.options.id,
'type': flagType.type,
'showInLegend': false,
'showRects': false,
'color': 'black', // We force it to black, so that other series automatic color choosing is not interfered with.
'shape': 'squarepin',
'zIndex': 100, // We want flags to always be over other series.
'data': streamDatapoints.flag[j]
// Do not redraw.
}, false);
firstSeries = firstSeries || s;
});
if (allDatapoints[i] && allDatapoints[i].main && allDatapoints[i].main[0]) {
// Navigator data is always using just mean datapoints.
var navigatorData = self.fullRangeDatapints(allDatapoints[i].main[0]);

var navigator = self.highcharts.get('navigator');
self.highcharts.addAxis(_.extend({}, navigator.yAxis.options, {
'id': 'navigator-y-axis-' + stream.id,
// We put y-axis of navigator, flags and other seris into into different panes. We put these
// navigator y-axis into pane 1 because in some cases putting all in the same pane made main
// y-axis too large for the data.
// See https://github.com/highslide-software/highcharts.com/issues/4523
'pane': 1
// Do not redraw.
}), false, false);
self.highcharts.addSeries(_.extend({}, navigator.options, {
'id': 'navigator-' + stream.id,
'streamId': stream.id, // Our own option.
'yAxis': 'navigator-y-axis-' + stream.id,
'color': firstSeries.color,
'data': navigatorData
// Do not redraw.
}), false);
}
});

var navigator = self.highcharts.get('navigator');
self.highcharts.addAxis(_.extend({}, navigator.yAxis.options, {
'id': 'navigator-y-axis-' + stream.id,
// We put y-axis of navigator, flags and other seris into into different panes. We put these
// navigator y-axis into pane 1 because in some cases putting all in the same pane made main
// y-axis too large for the data.
// See https://github.com/highslide-software/highcharts.com/issues/4523
'pane': 1
// Do not redraw.
}), false, false);
self.highcharts.addSeries(_.extend({}, navigator.options, {
'id': 'navigator-' + stream.id,
'streamId': stream.id, // Our own option.
'yAxis': 'navigator-y-axis-' + stream.id,
'color': firstSeries.color,
'data': navigatorData
// Do not redraw.
}), false);
}
});

// Redraw. We set eventArgs so that it is passed to afterSetExtremes. It is similar to what happens if
// you call chart.highcharts.get('x-axis').setExtremes(start, end, true, false, {'reason': 'initial'}).
self.highcharts.get('x-axis').eventArgs = {'reason': 'initial'};
self.highcharts.redraw(false);
// Redraw. We set eventArgs so that it is passed to afterSetExtremes. It is similar to what happens if
// you call chart.highcharts.get('x-axis').setExtremes(start, end, true, false, {'reason': 'initial'}).
var start = Math.max(self.streamManager.extremes.end - INITIAL_TIMESPAN, self.streamManager.extremes.start);
var end = self.streamManager.extremes.end;
self.highcharts.get('x-axis').setExtremes(start, end, true, false, {'reason': 'initial'});

if (callback) callback();
if (callback) callback();
});
});
};

Expand Down

0 comments on commit adfbb91

Please sign in to comment.