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.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@196556 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Websites/perf.webkit.org/ChangeLog b/Websites/perf.webkit.org/ChangeLog
index e5e7512aa6c9828456c212d39bd0787fb11f3c33..c2dcc0f438ca204b2242a42aa8cdd620ac507c96 100644 (file)
--- a/Websites/perf.webkit.org/ChangeLog
+++ b/Websites/perf.webkit.org/ChangeLog
@@ -1,3 +1,21 @@
+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

diff --git a/Websites/perf.webkit.org/public/v3/components/time-series-chart.js b/Websites/perf.webkit.org/public/v3/components/time-series-chart.js
index 9cd4d9eb12e3975a225a15b7b2353ba101d04032..de66c28bc59bf2532e63085bcdf34d9eb68ec648 100644 (file)
--- a/Websites/perf.webkit.org/public/v3/components/time-series-chart.js
+++ b/Websites/perf.webkit.org/public/v3/components/time-series-chart.js
@@ -283,7 +283,7 @@ class TimeSeriesChart extends ComponentBase {
 
     _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);
 
@@ -578,11 +578,33 @@ class TimeSeriesChart extends ComponentBase {
 
         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;
     }
@@ -592,6 +614,16 @@ class TimeSeriesChart extends ComponentBase {
         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) {