The right hand side of main chart appears to be cut off as you zoom out on v3 UI
authorrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 6 Jan 2016 20:31:41 +0000 (20:31 +0000)
committerrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 6 Jan 2016 20:31:41 +0000 (20:31 +0000)
https://bugs.webkit.org/show_bug.cgi?id=152778

Reviewed by Antti Koivisto.

Add a padding on x-axis after the end time to make the main chart more easily interactive.

* public/v3/components/time-series-chart.js:
(TimeSeriesChart.prototype._computeHorizontalRenderingMetrics):

* public/v3/pages/page-with-charts.js:
(PageWithCharts.mainChartOptions): Add a padding of 5px at the end of x-axis.

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

Websites/perf.webkit.org/ChangeLog
Websites/perf.webkit.org/public/v3/components/time-series-chart.js
Websites/perf.webkit.org/public/v3/pages/page-with-charts.js

index 448388b..a10de0f 100644 (file)
@@ -1,3 +1,18 @@
+2016-01-05  Ryosuke Niwa  <rniwa@webkit.org>
+
+        The right hand side of main chart appears to be cut off as you zoom out on v3 UI
+        https://bugs.webkit.org/show_bug.cgi?id=152778
+
+        Reviewed by Antti Koivisto.
+
+        Add a padding on x-axis after the end time to make the main chart more easily interactive.
+
+        * public/v3/components/time-series-chart.js:
+        (TimeSeriesChart.prototype._computeHorizontalRenderingMetrics):
+
+        * public/v3/pages/page-with-charts.js:
+        (PageWithCharts.mainChartOptions): Add a padding of 5px at the end of x-axis.
+
 2016-01-06  Ryosuke Niwa  <rniwa@webkit.org>
 
         v3 UI should use four sig-figs to label y-axis of the main charts
index dad2544..88a944f 100644 (file)
@@ -182,6 +182,9 @@ class TimeSeriesChart extends ComponentBase {
         var chartWidth = this._width - chartX;
         var chartHeight = this._height - this._options.axis.xAxisHeight * fontSize;
 
+        if (this._options.axis.xAxisEndPadding)
+            timeDiff += this._options.axis.xAxisEndPadding / (chartWidth / timeDiff);
+
         return {
             xToTime: function (x)
             {
index f27d9ec..08bc3f3 100644 (file)
@@ -108,6 +108,7 @@ class PageWithCharts extends PageWithHeading {
     static mainChartOptions(valueFormatter)
     {
         var options = this.dashboardOptions(valueFormatter);
+        options.axis.xAxisEndPadding = 5;
         options.axis.yAxisWidth = 5;
         options.selection = {
             lineStyle: '#f93',