Nuria has submitted this change and it was merged.
Change subject: Make number format configurable
......................................................................
Make number format configurable
Right now, this only makes sense for the timeseries graphs, since the
other ones transform the numbers and are formatting on their own.
Bug: T131965
Change-Id: I9059496a50df5f68235ce273cf9d07d8af7f5848
---
M src/app/utils/numbers.js
M src/components/a-b-compare/compare-timeseries.html
M src/components/compare-layout/compare-layout.html
M src/components/compare-layout/compare-layout.js
M src/components/visualizers/dygraphs-timeseries/bindings.js
M src/components/visualizers/dygraphs-timeseries/dygraphs-timeseries.html
M src/components/visualizers/filter-timeseries/filter-timeseries.html
M src/components/visualizers/filter-timeseries/filter-timeseries.js
M src/components/visualizers/sunburst/bindings.js
M src/components/visualizers/table-timeseries/table-timeseries.html
M src/components/visualizers/table-timeseries/table-timeseries.js
M src/components/visualizers/visualizer/visualizer.js
M src/components/visualizers/wikimetrics/wikimetrics.html
M src/components/visualizers/wikimetrics/wikimetrics.js
14 files changed, 56 insertions(+), 18 deletions(-)
Approvals:
Nuria: Verified; Looks good to me, approved
diff --git a/src/app/utils/numbers.js b/src/app/utils/numbers.js
index 3ca6ba0..17fd871 100644
--- a/src/app/utils/numbers.js
+++ b/src/app/utils/numbers.js
@@ -11,12 +11,19 @@
numberFormatter: function (numeralFormatter) {
var niceNames = {
'percent': '0.0%',
+ // thousands / millions / billions formatter
'kmb': '0.0a',
};
numeralFormatter = niceNames[numeralFormatter] || numeralFormatter;
return function (n) {
+ if (typeof n === 'string') {
+ return n;
+ }
+ if(!numeralFormatter) {
+ numeralFormatter = n <= 1 ? '0.0%' : '0.0a';
+ }
return numeral(n).format(numeralFormatter);
};
},
diff --git a/src/components/a-b-compare/compare-timeseries.html
b/src/components/a-b-compare/compare-timeseries.html
index 26b5b6b..9947d0b 100644
--- a/src/components/a-b-compare/compare-timeseries.html
+++ b/src/components/a-b-compare/compare-timeseries.html
@@ -1 +1,6 @@
-<filter-timeseries params="data: data, colors: colors, annotations:
annotations"></filter-timeseries>
+<filter-timeseries params="
+ data: data,
+ colors: colors,
+ annotations: annotations,
+ format: format
+"></filter-timeseries>
diff --git a/src/components/compare-layout/compare-layout.html
b/src/components/compare-layout/compare-layout.html
index c802d3f..3026366 100644
--- a/src/components/compare-layout/compare-layout.html
+++ b/src/components/compare-layout/compare-layout.html
@@ -21,7 +21,13 @@
<span class="ui small label" data-bind="text:
$parent.timespan"></span>
</div>
<div class="ui attached raised segment">
- <a-b-compare params="type: type, data: data, colors: $data.colors,
annotations: $data.annotations"/>
+ <a-b-compare params="
+ type: type,
+ data: data,
+ colors: $data.colors,
+ annotations: $data.annotations,
+ format: format
+ "/>
</div>
<!-- /ko -->
</comparisons>
diff --git a/src/components/compare-layout/compare-layout.js
b/src/components/compare-layout/compare-layout.js
index a1d6353..fbf2fb2 100644
--- a/src/components/compare-layout/compare-layout.js
+++ b/src/components/compare-layout/compare-layout.js
@@ -12,6 +12,7 @@
moment = require('moment'),
dateUtils = require('utils.datetime'),
colorUtils = require('utils.colors'),
+ numberUtils = require('utils.numbers'),
asyncObs = require('observables.async'),
TimeseriesData = require('converters.timeseries');
@@ -194,6 +195,8 @@
}
c.colors = colorScale;
+ c.format = numberUtils.numberFormatter(c.format ||
'percent');
+
return c;
}, this));
diff --git a/src/components/visualizers/dygraphs-timeseries/bindings.js
b/src/components/visualizers/dygraphs-timeseries/bindings.js
index 18dff84..963d794 100644
--- a/src/components/visualizers/dygraphs-timeseries/bindings.js
+++ b/src/components/visualizers/dygraphs-timeseries/bindings.js
@@ -39,14 +39,10 @@
axisLabelWidth: 77,
},
y: {
- valueFormatter: function(d) {
- return numeral(d).format(d < 1 ? '0.00' :
'0.0a');
- },
+ valueFormatter: val.format,
},
},
labels: ['Date'],
- labelsKMB: true,
- // labelsDivStyles: defined as CSS in
dygraphs-timeseries.html
strokeWidth: 1.8,
gridLineColor: '#cacaca',
gridLinePattern: [10, 5],
diff --git
a/src/components/visualizers/dygraphs-timeseries/dygraphs-timeseries.html
b/src/components/visualizers/dygraphs-timeseries/dygraphs-timeseries.html
index 27db935..93e7dd2 100644
--- a/src/components/visualizers/dygraphs-timeseries/dygraphs-timeseries.html
+++ b/src/components/visualizers/dygraphs-timeseries/dygraphs-timeseries.html
@@ -33,5 +33,6 @@
data: data,
annotations: $data.annotations,
colors: colors,
+ format: format,
}">
</div>
diff --git
a/src/components/visualizers/filter-timeseries/filter-timeseries.html
b/src/components/visualizers/filter-timeseries/filter-timeseries.html
index 4686ca3..a5b4f63 100644
--- a/src/components/visualizers/filter-timeseries/filter-timeseries.html
+++ b/src/components/visualizers/filter-timeseries/filter-timeseries.html
@@ -16,4 +16,10 @@
</div>
</div>
-<dygraphs-timeseries params="height: 500, data: filteredData, colors: colors,
annotations: annotations" />
+<dygraphs-timeseries params="
+ height: 500,
+ data: filteredData,
+ colors: colors,
+ annotations: annotations,
+ format: format
+"/>
diff --git a/src/components/visualizers/filter-timeseries/filter-timeseries.js
b/src/components/visualizers/filter-timeseries/filter-timeseries.js
index c78353a..33053ab 100644
--- a/src/components/visualizers/filter-timeseries/filter-timeseries.js
+++ b/src/components/visualizers/filter-timeseries/filter-timeseries.js
@@ -63,6 +63,7 @@
this.colors = params.colors;
this.annotations = params.annotations;
+ this.format = params.format;
}
return {
diff --git a/src/components/visualizers/sunburst/bindings.js
b/src/components/visualizers/sunburst/bindings.js
index 9fd4428..2a45bfc 100644
--- a/src/components/visualizers/sunburst/bindings.js
+++ b/src/components/visualizers/sunburst/bindings.js
@@ -1,9 +1,16 @@
+'use strict';
define(function (require) {
var d3 = require('d3'),
- ko = require('knockout');
+ ko = require('knockout'),
+ numberUtils = require('utils.numbers');
require('lib.polyfills');
+
+ // thousands / millions / billions formatter
+ var kmb = numberUtils.numberFormatter('kmb'),
+ // percent formatter
+ pct = numberUtils.numberFormatter('0.0%');
// Given a node in a partition layout, return an array of all of its
ancestor
// nodes, highest first, but excluding the root.
@@ -19,8 +26,8 @@
function hoverPath (d) {
- var percentage = (100 * d.value / this.totalSize).toPrecision(3);
- var percentageString = percentage + '%';
+ var percentage = d.value / this.totalSize;
+ var percentageString = pct(percentage);
if (percentage < 0.1) {
percentageString = '< 0.1%';
}
@@ -28,15 +35,15 @@
var sequenceArray = getAncestors(d);
this.bindingContext.steps(sequenceArray);
this.bindingContext.percentage(percentageString);
- this.bindingContext.ratio('(' + d.value + ' out of ' + this.totalSize
+ ')');
+ this.bindingContext.ratio('(' + kmb(d.value) + ' out of ' +
kmb(this.totalSize) + ')');
// Highlight only those that are an ancestor of the current segment.
// The transition is necessary because it allows d3 to resolve the
hoverOut
// transition properly. Without it, race conditions would create an
// inconsistent state
this.container.selectAll('path').transition().duration(50)
- .style('opacity', function (d) {
- return sequenceArray.indexOf(d) >= 0 ? 1 : 0.2;
+ .style('opacity', function (d1) {
+ return sequenceArray.indexOf(d1) >= 0 ? 1 : 0.2;
});
}
@@ -63,7 +70,7 @@
.attr('width', width)
.attr('height', height)
.append('g')
- .attr('transform', 'translate(' + width/2 + ',' +
height/2 + ')'),
+ .attr('transform', 'translate(' + width / 2 + ',' +
height / 2 + ')'),
partition = d3.layout.partition()
.size([2 * Math.PI, radius * radius])
diff --git a/src/components/visualizers/table-timeseries/table-timeseries.html
b/src/components/visualizers/table-timeseries/table-timeseries.html
index 28666b4..24c47f9 100644
--- a/src/components/visualizers/table-timeseries/table-timeseries.html
+++ b/src/components/visualizers/table-timeseries/table-timeseries.html
@@ -13,11 +13,11 @@
<!-- /ko -->
</tr>
</thead>
- <tbody>
+ <tbody class="right aligned">
<!-- ko foreach: rows -->
<tr>
<!-- ko foreach: $data -->
- <td data-bind="text: $data"></td>
+ <td data-bind="text: $parents[1].format($data)"></td>
<!-- /ko -->
</tr>
<!-- /ko -->
diff --git a/src/components/visualizers/table-timeseries/table-timeseries.js
b/src/components/visualizers/table-timeseries/table-timeseries.js
index 037472d..cb741ef 100644
--- a/src/components/visualizers/table-timeseries/table-timeseries.js
+++ b/src/components/visualizers/table-timeseries/table-timeseries.js
@@ -23,6 +23,7 @@
return ko.unwrap(this.data).header;
}, this);
this.colors = params.colors;
+ this.format = params.format;
this.containerHeight = params.height + 'px';
}
diff --git a/src/components/visualizers/visualizer/visualizer.js
b/src/components/visualizers/visualizer/visualizer.js
index ec0e348..fb59095 100644
--- a/src/components/visualizers/visualizer/visualizer.js
+++ b/src/components/visualizers/visualizer/visualizer.js
@@ -6,6 +6,7 @@
_ = require('lodash'),
apiFinder = require('api-finder'),
colorUtils = require('utils.colors'),
+ numberUtils = require('utils.numbers'),
TimeseriesData = require('converters.timeseries');
require('datepicker-binding');
@@ -99,6 +100,7 @@
this.params = {
data: this.filteredData,
colors: colorScale,
+ format: numberUtils.numberFormatter(graph.format),
height: 500,
id: _.kebabCase([graph.metric, graph.submetric].join('-')),
};
diff --git a/src/components/visualizers/wikimetrics/wikimetrics.html
b/src/components/visualizers/wikimetrics/wikimetrics.html
index 7f62d92..b8d6e99 100644
--- a/src/components/visualizers/wikimetrics/wikimetrics.html
+++ b/src/components/visualizers/wikimetrics/wikimetrics.html
@@ -11,6 +11,7 @@
data: mergedData,
colors: colorScale,
annotations: annotations,
+ format: format,
"></dygraphs-timeseries>
<!-- /ko -->
diff --git a/src/components/visualizers/wikimetrics/wikimetrics.js
b/src/components/visualizers/wikimetrics/wikimetrics.js
index ec47866..6c76776 100644
--- a/src/components/visualizers/wikimetrics/wikimetrics.js
+++ b/src/components/visualizers/wikimetrics/wikimetrics.js
@@ -18,7 +18,8 @@
TimeseriesData = require('converters.timeseries'),
templateMarkup = require('text!./wikimetrics.html'),
annotationsApi = require('apis.annotations'),
- apiFinder = require('app/apis/api-finder');
+ apiFinder = require('app/apis/api-finder'),
+ numberUtils = require('utils.numbers');
function WikimetricsVisualizer(params) {
var visualizer = this;
@@ -77,6 +78,7 @@
}
return visualizer.colors[i % visualizer.colors.length];
};
+ this.format = numberUtils.numberFormatter('kmb');
this.applyColors = function (projects) {
projects.forEach(function (project) {
--
To view, visit https://gerrit.wikimedia.org/r/282200
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I9059496a50df5f68235ce273cf9d07d8af7f5848
Gerrit-PatchSet: 3
Gerrit-Project: analytics/dashiki
Gerrit-Branch: master
Gerrit-Owner: Milimetric <[email protected]>
Gerrit-Reviewer: Mforns <[email protected]>
Gerrit-Reviewer: Nuria <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
