Perf dashboard should show relative change in values

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

Reviewed by Antti Koivisto.

When a range of values are selected, show the percentage difference between the start and the end
in addition to the absolute value difference. When a single point is selected, show the relative
difference with respect to the previous point. Use two significant figures and always show plus sign
when the difference is positive.

* public/v2/app.js: Compute and format the relative difference.
* public/v2/chart-pane.css: Don't let commits view shrink itself when they're all collapsed.
* public/v2/index.html: Show the relative difference.

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

diff --git a/Websites/perf.webkit.org/ChangeLog b/Websites/perf.webkit.org/ChangeLog
index 35b3abd..bf4c3a3 100644 (file)
--- a/Websites/perf.webkit.org/ChangeLog
+++ b/Websites/perf.webkit.org/ChangeLog
@@ -1,5 +1,21 @@
 2015-03-31  Ryosuke Niwa  <rniwa@webkit.org>
 
+        Perf dashboard should show relative change in values
+        https://bugs.webkit.org/show_bug.cgi?id=143252
+
+        Reviewed by Antti Koivisto.
+
+        When a range of values are selected, show the percentage difference between the start and the end
+        in addition to the absolute value difference. When a single point is selected, show the relative
+        difference with respect to the previous point. Use two significant figures and always show plus sign
+        when the difference is positive.
+
+        * public/v2/app.js: Compute and format the relative difference.
+        * public/v2/chart-pane.css: Don't let commits view shrink itself when they're all collapsed.
+        * public/v2/index.html: Show the relative difference.
+
+2015-03-31  Ryosuke Niwa  <rniwa@webkit.org>
+
         REGRESSION(r180000): Changing moving average or enveloping strategy doesn't update the graph
         https://bugs.webkit.org/show_bug.cgi?id=143254
 

diff --git a/Websites/perf.webkit.org/public/v2/app.js b/Websites/perf.webkit.org/public/v2/app.js
index 0f75449..58f8288 100755 (executable)
--- a/Websites/perf.webkit.org/public/v2/app.js
+++ b/Websites/perf.webkit.org/public/v2/app.js
@@ -424,7 +424,13 @@ App.Pane = Ember.Object.extend({
             label = formatter(Math.abs(diffFromTarget)) + ' until target';
 
         var valueDelta = previousPoint ? chartData.deltaFormatter(currentPoint.value - previousPoint.value) : null;
-        return {className: className, label: label, currentValue: chartData.formatter(currentPoint.value), valueDelta: valueDelta};
+        return {
+            className: className,
+            label: label,
+            currentValue: chartData.formatter(currentPoint.value),
+            valueDelta: valueDelta,
+            relativeDelta: d3.format('+.2p')((currentPoint.value - previousPoint.value) / previousPoint.value),
+        };
     },
     _relativeDifferentToLaterPointInTimeSeries: function (currentPoint, timeSeries)
     {

diff --git a/Websites/perf.webkit.org/public/v2/chart-pane.css b/Websites/perf.webkit.org/public/v2/chart-pane.css
index e6d1f86..8e5bf8c 100755 (executable)
--- a/Websites/perf.webkit.org/public/v2/chart-pane.css
+++ b/Websites/perf.webkit.org/public/v2/chart-pane.css
@@ -241,6 +241,10 @@
     border-collapse: collapse;
 }
 
+.chart-pane .commits-viewer {
+    width: 100%;
+}
+
 .chart-pane .details-table td:last-child {
     padding-right: 1px;
 }

diff --git a/Websites/perf.webkit.org/public/v2/index.html b/Websites/perf.webkit.org/public/v2/index.html
index eb32ae2..e6d9250 100755 (executable)
--- a/Websites/perf.webkit.org/public/v2/index.html
+++ b/Websites/perf.webkit.org/public/v2/index.html
@@ -270,7 +270,7 @@
                     <td>
                         {{details.status.currentValue}} {{chartData.unit}}
                         {{#if details.status.valueDelta}}
-                            ({{details.status.valueDelta}} {{chartData.unit}})
+                            ({{details.status.valueDelta}} {{chartData.unit}} / {{details.status.relativeDelta}})
                         {{/if}}
                         {{#if details.status.label}}
                             <br>