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 e5e7512..c2dcc0f 100644 (file)
--- a/Websites/perf.webkit.org/ChangeLog
+++ b/Websites/perf.webkit.org/ChangeLog
@@ -1,5 +1,23 @@
 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
         https://bugs.webkit.org/show_bug.cgi?id=154212
 

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 9cd4d9e..de66c28 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;
     }
@@ -593,6 +615,16 @@ class TimeSeriesChart extends ComponentBase {
         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) {
                     if (date.getUTCHours() >= 12) {