v2 UI should adjust the number of ticks on dashboards based on screen size

https://bugs.webkit.org/show_bug.cgi?id=141502

Reviewed by Chris Dumez.

* public/v2/interactive-chart.js:
(App.InteractiveChartComponent._updateDimensionsIfNeeded): Compute the number of ticks based on the
content size.

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

diff --git a/Websites/perf.webkit.org/ChangeLog b/Websites/perf.webkit.org/ChangeLog
index 9a46307c6460afc7535d1e8382b36b88090d6814..9a95fd768ffad6c9a034cbc6563b456b326476da 100644 (file)
--- a/Websites/perf.webkit.org/ChangeLog
+++ b/Websites/perf.webkit.org/ChangeLog
@@ -1,3 +1,14 @@
+2015-02-12  Ryosuke Niwa  <rniwa@webkit.org>
+
+        v2 UI should adjust the number of ticks on dashboards based on screen size
+        https://bugs.webkit.org/show_bug.cgi?id=141502
+
+        Reviewed by Chris Dumez.
+
+        * public/v2/interactive-chart.js:
+        (App.InteractiveChartComponent._updateDimensionsIfNeeded): Compute the number of ticks based on the
+        content size.
+
 2015-02-11  Ryosuke Niwa  <rniwa@webkit.org>
 
         New perf dashboard shows too much space around interesting data points

diff --git a/Websites/perf.webkit.org/public/v2/interactive-chart.js b/Websites/perf.webkit.org/public/v2/interactive-chart.js
index 1b65626a186786881e699400f3f454863f53ba1e..68c44cd32fb1ec96fd6ef1ebb0638f0dbc6998df 100644 (file)
--- a/Websites/perf.webkit.org/public/v2/interactive-chart.js
+++ b/Websites/perf.webkit.org/public/v2/interactive-chart.js
@@ -249,12 +249,15 @@ App.InteractiveChartComponent = Ember.Component.extend({
         this._y.range([this._contentHeight, 0]);
 
         if (this._xAxis) {
+            this._xAxis.ticks(Math.round(this._contentWidth / 4 / rem));
             this._xAxis.tickSize(-this._contentHeight);
             this._xAxisLabels.attr("transform", "translate(0," + this._contentHeight + ")");
         }
 
-        if (this._yAxis)
+        if (this._yAxis) {
+            this._yAxis.ticks(Math.round(this._contentHeight / 2 / rem));
             this._yAxis.tickSize(-this._contentWidth);
+        }
 
         if (this._currentItemLine) {
             this._currentItemLine