[MediaWiki-commits] [Gerrit] analytics/wikistats2[master]: Use B instead of G to represent billion in the detail page

[Fdans (Code Review)]

Fdans has uploaded a new change for review. ( 
https://gerrit.wikimedia.org/r/383071 )

Change subject: Use B instead of G to represent billion in the detail page
......................................................................

Use B instead of G to represent billion in the detail page

Until now the axes in the detail page were showing G as the
suffix for billion (giga). Replacing it with B makes is clearer to
non-techy folks. When we start working with internationalisation we'll have
to rethink this strategy, as billion doesn't mean the same in every country.

Bug: T170940
Change-Id: I745c2f0a4f38c5cb90e1b2fd2f345df13b3f91e0
---
M src/components/detail/chart/BarChart.vue
M src/components/detail/chart/LineChart.vue
M src/utils.js
3 files changed, 17 insertions(+), 3 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/analytics/wikistats2 
refs/changes/71/383071/1

diff --git a/src/components/detail/chart/BarChart.vue 
b/src/components/detail/chart/BarChart.vue
index d07cd15..ba5f478 100644
--- a/src/components/detail/chart/BarChart.vue
+++ b/src/components/detail/chart/BarChart.vue
@@ -11,6 +11,7 @@
 import * as format from 'd3-format';
 import * as time from 'd3-time';
 import _ from 'lodash';
+import utils from '../../../utils';
 
 import config from '../../../config';
 
@@ -73,7 +74,7 @@
                 let y = scales.scaleLinear().range([height, 0]);
                 y.domain([0, max]);
                 const yAxis = axes.axisLeft(y).ticks(7)
-                                .tickFormat(format.format('.2s'));
+                                .tickFormat(utils.modifiedSIFormat);
                 const yAxisContainer = g.append('g')
                     .call(yAxis)
                     .style('font-size', '13px')
diff --git a/src/components/detail/chart/LineChart.vue 
b/src/components/detail/chart/LineChart.vue
index a2dcb39..c9f46cb 100644
--- a/src/components/detail/chart/LineChart.vue
+++ b/src/components/detail/chart/LineChart.vue
@@ -25,11 +25,11 @@
 import * as scales from 'd3-scale'
 import * as arr from 'd3-array'
 import * as axes from 'd3-axis'
-import * as format from 'd3-format'
 import * as time from 'd3-time'
 import * as shape from 'd3-shape'
 
 import dateformat from 'dateformat';
+import utils from '../../../utils';
 
 import _ from 'lodash';
 
@@ -202,7 +202,7 @@
             const height = y.range()[0];
             const xAxis = axes.axisBottom(x),
                   yAxis = axes.axisLeft(y).ticks(7)
-                            .tickFormat(format.format('.2s'));
+                            .tickFormat(utils.modifiedSIFormat);
             g.append('g')
                 .call(yAxis)
                 .attr('class', 'yAxis')
diff --git a/src/utils.js b/src/utils.js
index cd7f695..a9106b1 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,3 +1,5 @@
+import * as format from 'd3-format'
+
 function labeledCrossProduct (obj) {
     let explodedKeys = Object.keys(obj).map(k => obj[k].map(o => {
         let keyed = {};
@@ -12,6 +14,17 @@
     }, [{}]);
 };
 
+const formatSi = format.format(".2s");
+
+function modifiedSI(x) {
+    var s = formatSi(x);
+    switch (s[s.length - 1]) {
+        case "G": return s.slice(0, -1) + "B";
+    }
+    return s;
+}
+
 export default {
     labeledCrossProduct,
+    modifiedSIFormat
 };

-- 
To view, visit https://gerrit.wikimedia.org/r/383071
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I745c2f0a4f38c5cb90e1b2fd2f345df13b3f91e0
Gerrit-PatchSet: 1
Gerrit-Project: analytics/wikistats2
Gerrit-Branch: master
Gerrit-Owner: Fdans <fd...@wikimedia.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits