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.

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

diff --git a/Websites/perf.webkit.org/ChangeLog b/Websites/perf.webkit.org/ChangeLog
index 448388b..a10de0f 100644 (file)
--- a/Websites/perf.webkit.org/ChangeLog
+++ b/Websites/perf.webkit.org/ChangeLog
@@ -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
 2016-01-06  Ryosuke Niwa  <rniwa@webkit.org>
 
         v3 UI should use four sig-figs to label y-axis of the main charts

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 dad2544..88a944f 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
@@ -182,6 +182,9 @@ class TimeSeriesChart extends ComponentBase {
         var chartWidth = this._width - chartX;
         var chartHeight = this._height - this._options.axis.xAxisHeight * fontSize;
 
         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)
             {
         return {
             xToTime: function (x)
             {

diff --git a/Websites/perf.webkit.org/public/v3/pages/page-with-charts.js b/Websites/perf.webkit.org/public/v3/pages/page-with-charts.js
index f27d9ec..08bc3f3 100644 (file)
--- a/Websites/perf.webkit.org/public/v3/pages/page-with-charts.js
+++ b/Websites/perf.webkit.org/public/v3/pages/page-with-charts.js
@@ -108,6 +108,7 @@ class PageWithCharts extends PageWithHeading {
     static mainChartOptions(valueFormatter)
     {
         var options = this.dashboardOptions(valueFormatter);
     static mainChartOptions(valueFormatter)
     {
         var options = this.dashboardOptions(valueFormatter);

+        options.axis.xAxisEndPadding = 5;

         options.axis.yAxisWidth = 5;
         options.selection = {
             lineStyle: '#f93',
         options.axis.yAxisWidth = 5;
         options.selection = {
             lineStyle: '#f93',