+2016-02-13 Ryosuke Niwa <rniwa@webkit.org>
+
+ v3 UI sometimes shows same dates twice on the x-axis of time series charts
+ https://bugs.webkit.org/show_bug.cgi?id=154210
+
+ Reviewed by Chris Dumez.
+
+ The bug was caused by the label generation code in TimeSeriesChart.computeTimeGrid never emitting hours.
+
+ Use hours instead of dates as labels when the current time's date is same as the previous label's date.
+ Always include dates before entering this mode to avoid just having hours as labels on the entire x-axis.
+
+ * public/v3/components/time-series-chart.js:
+ (TimeSeriesChart.prototype._renderXAxis): Slightly increase the "average" width of x-axis label.
+ (TimeSeriesChart.computeTimeGrid): See above. Also assert that the number of labels we generate never
+ exceeds maxLabels as a sanity check.
+ (TimeSeriesChart._timeIterators): Added an iterator that increments by two hours for zoomed graphs.
+
2016-02-13 Ryosuke Niwa <rniwa@webkit.org>
v3 UI should show status and associated bugs on analysis task pages
_renderXAxis(context, metrics, startTime, endTime)
{
- var typicalWidth = context.measureText('12/31').width;
+ var typicalWidth = context.measureText('12/31 x').width;
var maxXAxisLabels = Math.floor(metrics.chartWidth / typicalWidth);
var xAxisGrid = TimeSeriesChart.computeTimeGrid(startTime, endTime, maxXAxisLabels);
var result = [];
+ var previousDate = null;
+ var previousHour = null;
while (currentTime <= max) {
- var label = (currentTime.getUTCMonth() + 1) + '/' + currentTime.getUTCDate();
- result.push({time: new Date(currentTime), label: label});
+ var time = new Date(currentTime);
+ var month = (time.getUTCMonth() + 1);
+ var date = time.getUTCDate();
+ var hour = time.getUTCHours();
+ var hourLabel = (hour > 12 ? hour - 12 : hour) + (hour >= 12 ? 'PM' : 'AM');
+
iterator.next(currentTime);
+
+ var label;
+ if (date == previousDate)
+ label = hourLabel;
+ else {
+ label = `${month}/${date}`;
+ if (hour && currentTime.getUTCDate() != date)
+ label += ' ' + hourLabel;
+ }
+
+ result.push({time: time, label: label});
+
+ previousDate = date;
+ previousHour = hour;
}
+
+ console.assert(result.length <= maxLabels);
return result;
}
var HOUR = 3600 * 1000;
var DAY = 24 * HOUR;
return [
+ {
+ diff: 2 * HOUR,
+ next: function (date) {
+ if (date.getUTCHours() >= 22) {
+ date.setUTCHours(0);
+ date.setUTCDate(date.getUTCDate() + 1);
+ } else
+ date.setUTCHours(Math.floor(date.getUTCHours() / 2) * 2 + 2);
+ },
+ },
{
diff: 12 * HOUR,
next: function (date) {