Don't show unit (bytes) separaetly from SI suffixes (K, M, etc...)
authorrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 19 May 2015 21:39:46 +0000 (21:39 +0000)
committerrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 19 May 2015 21:39:46 +0000 (21:39 +0000)
https://bugs.webkit.org/show_bug.cgi?id=145181

Rubber-stamped by Chris Dumez.

Show 'MB' in each y-axis label instead of showing 'bytes' separately and suffixing each label with just 'M'
for clarity. This change also reduces the code complexity.

* public/index.html:
* public/v2/app.js:
(App.AnalysisTaskController._chartDataChanged):
(App.TestGroupPane._createConfigurationSummary):
* public/v2/data.js:
(RunsData.unitFromMetricName): Use 'B' instead of 'bytes' as the unit.

* public/v2/interactive-chart.js: Removed the support for showing units separately.
(App.InteractiveChartComponent._constructGraphIfPossible):
(App.InteractiveChartComponent._relayoutDataAndAxes)

* public/v2/manifest.js:
(App.Manifest._makeFormatter): Renamed from _formatBytes. Support more SI suffixes such as micro and mili.
Now takes the unit as the first argument. Adjust the base unit if it's 'ms'.
(App.Manifest._formatFetchedData): Removed unit and formatWithUnit now that all all formatters would
automatically include unit.

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

Websites/perf.webkit.org/ChangeLog
Websites/perf.webkit.org/public/index.html
Websites/perf.webkit.org/public/v2/app.js
Websites/perf.webkit.org/public/v2/data.js
Websites/perf.webkit.org/public/v2/interactive-chart.js
Websites/perf.webkit.org/public/v2/manifest.js

index b9cd65b..14e90c0 100644 (file)
@@ -1,3 +1,30 @@
+2015-05-19  Ryosuke Niwa  <rniwa@webkit.org>
+
+        Don't show unit (bytes) separaetly from SI suffixes (K, M, etc...)
+        https://bugs.webkit.org/show_bug.cgi?id=145181
+
+        Rubber-stamped by Chris Dumez.
+
+        Show 'MB' in each y-axis label instead of showing 'bytes' separately and suffixing each label with just 'M'
+        for clarity. This change also reduces the code complexity.
+
+        * public/index.html:
+        * public/v2/app.js:
+        (App.AnalysisTaskController._chartDataChanged):
+        (App.TestGroupPane._createConfigurationSummary):
+        * public/v2/data.js:
+        (RunsData.unitFromMetricName): Use 'B' instead of 'bytes' as the unit.
+
+        * public/v2/interactive-chart.js: Removed the support for showing units separately.
+        (App.InteractiveChartComponent._constructGraphIfPossible):
+        (App.InteractiveChartComponent._relayoutDataAndAxes)
+
+        * public/v2/manifest.js:
+        (App.Manifest._makeFormatter): Renamed from _formatBytes. Support more SI suffixes such as micro and mili.
+        Now takes the unit as the first argument. Adjust the base unit if it's 'ms'.
+        (App.Manifest._formatFetchedData): Removed unit and formatWithUnit now that all all formatters would
+        automatically include unit.
+
 2015-05-18  Ryosuke Niwa  <rniwa@webkit.org>
 
         REGRESSION: v2 UI reports a higher memory usage
index 6e69333..62a7cd9 100644 (file)
@@ -188,19 +188,6 @@ td, th {
     left: 5px;
 }
 
-#dashboard .unit {
-    display: none;
-}
-
-#charts .unit {
-    font-size: small;
-    width: 50px;
-    text-align: center;
-    position: absolute;
-    bottom: 10px;
-    left: 245px;
-}
-
 #charts .arrow {
     width: 20px;
     height: 40px;
@@ -530,7 +517,6 @@ td, th {
             section.addClass(status.class);
             section.find('.status tbody').html(buildLabelWithLinks(results.lastResult().build()));
             section.find('.summaryTable tbody').html(summaryRows);
-            section.find('.unit').html(results.unit());
             if (results.smallerIsBetter()) {
                 section.find('.arrow .downwardArrowHead').show();
                 section.find('.arrow .upwardArrowHead').hide();
index 8100d43..99fa16a 100755 (executable)
@@ -1228,7 +1228,7 @@ App.AnalysisTaskController = Ember.Controller.extend({
                 id: point.measurement.id(),
                 measurement: point.measurement,
                 label: 'Point ' + (index + 1),
-                value: chartData.formatWithUnit(point.value),
+                value: chartData.formatter(point.value),
             };
         });
 
@@ -1529,7 +1529,7 @@ App.TestGroupPane = Ember.ObjectProxy.extend({
                 }),
                 value: point ? point.value : null,
                 valueRange: range,
-                formattedValue: point ? testResults.formatWithUnit(point.value) : null,
+                formattedValue: point ? testResults.formatter(point.value) : null,
                 buildLabel: point ? 'Build ' + point.measurement.buildNumber() : null,
             });
         });
index 3d19195..c6417a7 100755 (executable)
@@ -407,9 +407,9 @@ RunsData.unitFromMetricName = function (metricName)
         'Runs': '/s',
         'Time': 'ms',
         'Duration': 'ms',
-        'Malloc': 'bytes',
-        'Heap': 'bytes',
-        'Allocations': 'bytes',
+        'Malloc': 'B',
+        'Heap': 'B',
+        'Allocations': 'B',
         'Score': 'pt',
     }[suffix];
     return unit;
index 6eaeac3..6653ac4 100644 (file)
@@ -113,8 +113,6 @@ App.InteractiveChartComponent = Ember.Component.extend({
         this._targetTimeSeries = chartData.target;
         this._movingAverageTimeSeries = chartData.movingAverage;
 
-        this._yAxisUnit = chartData.unit;
-
         if (this._baselineTimeSeries) {
             this._paths.push(this._clippedContainer
                 .append("path")
@@ -312,14 +310,8 @@ App.InteractiveChartComponent = Ember.Component.extend({
             return;
 
         this._yAxisLabels.call(this._yAxis);
-        if (this._yAxisUnitContainer)
-            this._yAxisUnitContainer.remove();
         var x = - 3.2 * this._rem;
         var y = this._contentHeight / 2;
-        this._yAxisUnitContainer = this._yAxisLabels.append("text")
-            .attr("transform", "rotate(90 0 0) translate(" + y + ", " + (-x) + ")")
-            .style("text-anchor", "middle")
-            .text(this._yAxisUnit);
     },
     _updateHighlightPositions: function () {
         if (!this._highlights)
index 556f51e..35b4787 100755 (executable)
@@ -315,28 +315,33 @@ App.Manifest = Ember.Controller.extend({
             };
         });
     },
-    _formatBytes: function (sigFig, alwaysShowSign)
+    _makeFormatter: function (unit, sigFig, alwaysShowSign)
     {
-        var units = ['', 'K', 'M', 'G', 'T', 'P', 'E'];
-        var threshold = sigFig >= 3 ? 1024 : 102.4;
+        var isMiliseconds = false;
+        if (unit == 'ms') {
+            isMiliseconds = true;
+            unit = 's';
+        }
+        var divisor = unit == 'bytes' ? 1024 : 1000;
+
+        var suffix = ['\u03BC', 'm', '', 'K', 'M', 'G', 'T', 'P', 'E'];
+        var threshold = sigFig >= 3 ? divisor : (divisor / 10);
         return function (bytes) {
             var i;
             var sign = bytes >= 0 ? (alwaysShowSign ? '+' : '') : '-';
             bytes = Math.abs(bytes);
-
-            for (i = 0; bytes >= threshold; i++)
-                bytes /= 1024;
-            return sign + bytes.toPrecision(Math.max(2, sigFig)) + units[i];
+            for (i = isMiliseconds ? 1 : 2; bytes < 1; i--)
+                bytes *= divisor;
+            for (; bytes >= threshold; i++)
+                bytes /= divisor;
+            return sign + bytes.toPrecision(Math.max(2, sigFig)) + ' ' + suffix[i] + (unit || '');
         }
     },
     _formatFetchedData: function (metricName, configurations)
     {
         var unit = RunsData.unitFromMetricName(metricName);
         var smallerIsBetter = RunsData.isSmallerBetter(unit);
-
-        var isBytes = unit == 'bytes';
-        var unitSuffix = unit ? ' ' + unit : '';
-        var deltaFormatterWithoutSign = isBytes ? this._formatBytes(2, false) : d3.format('.2g');
+        var deltaFormatterWithoutSign = this._makeFormatter(unit, 2, false);
 
         var currentTimeSeries = configurations.current.timeSeriesByCommitTime(false);
         var baselineTimeSeries = configurations.baseline ? configurations.baseline.timeSeriesByCommitTime(false) : null;
@@ -347,14 +352,12 @@ App.Manifest = Ember.Controller.extend({
             current: currentTimeSeries,
             baseline: baselineTimeSeries,
             target: targetTimeSeries,
-            unit: unit,
-            formatWithUnit: function (value) { return this.formatter(value) + unitSuffix; },
             formatWithDeltaAndUnit: function (value, delta)
             {
-                return this.formatter(value) + (delta && !isNaN(delta) ? ' \u00b1 ' + deltaFormatterWithoutSign(delta) : '') + unitSuffix;
+                return this.formatter(value) + (delta && !isNaN(delta) ? ' \u00b1 ' + deltaFormatterWithoutSign(delta) : '');
             },
-            formatter: isBytes ? this._formatBytes(4, false) : d3.format('.4g'),
-            deltaFormatter: isBytes ? this._formatBytes(2, true) : d3.format('+.2g'),
+            formatter: this._makeFormatter(unit, 4, false),
+            deltaFormatter: this._makeFormatter(unit, 2, true),
             smallerIsBetter: smallerIsBetter,
             showOutlier: function (show)
             {