Milimetric has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/339114 )
Change subject: Fix style on worldmap
......................................................................
Fix style on worldmap
NOTE: addition of large files in lib/data/ made the build super long.
We should exclude these files from the lint, hence .jshintignore
Change-Id: I52b5f0fdb3add8408c15b324f61252451c510984
---
A .jshintignore
M src/app/apis/wikimetrics.js
M src/components/visualizers/worldmap/bindings.js
M src/components/visualizers/worldmap/worldmap.js
4 files changed, 96 insertions(+), 96 deletions(-)
Approvals:
Milimetric: Verified; Looks good to me, approved
Fdans: Looks good to me, approved
diff --git a/.jshintignore b/.jshintignore
new file mode 100644
index 0000000..9c3ec60
--- /dev/null
+++ b/.jshintignore
@@ -0,0 +1,2 @@
+node_modules/**
+src/lib/data/**
diff --git a/src/app/apis/wikimetrics.js b/src/app/apis/wikimetrics.js
index a12644d..f6bb8d5 100644
--- a/src/app/apis/wikimetrics.js
+++ b/src/app/apis/wikimetrics.js
@@ -6,7 +6,6 @@
define(function (require) {
var siteConfig = require('config'),
- configApi = require('apis.config'),
converterFinder = require('finders.converter'),
uri = require('uri/URI'),
TimeseriesData = require('models.timeseries');
diff --git a/src/components/visualizers/worldmap/bindings.js
b/src/components/visualizers/worldmap/bindings.js
index c272fb3..9fb0280 100644
--- a/src/components/visualizers/worldmap/bindings.js
+++ b/src/components/visualizers/worldmap/bindings.js
@@ -1,30 +1,21 @@
-'use strict'
+'use strict';
define(function (require) {
var d3 = require('d3'),
d3_color = require('d3-scale-chromatic'),
ko = require('knockout'),
topojson = require('topojson'),
borders = require('data.world-50m'),
- isoCodes = require('data.country-codes');
+ isoCodes = require('data.country-codes'),
+ _ = require('lodash');
- ko.bindingHandlers.worldmap = {
- init: function (element) {
- initMap(element);
- },
- update: function (element, valueAccessor) {
- var values = ko.unwrap(valueAccessor());
- var data = values.data;
- var date = values.date;
- var buckets = 9;
- var palette = d3_color.schemeBlues[buckets];
- removeErrorBox(element);
- try {
- var currentData = getDataValues(data, date);
- drawMap(element, currentData, buckets, palette);
- } catch (error) {
- showError(element, error);
- }
- }
+ function getZoomBehavior (features, path, projection) {
+ return d3.behavior.zoom()
+ .on('zoom',function() {
+ features.attr('transform','translate(' +
+ d3.event.translate.join(',') + ')scale(' + d3.event.scale +
')');
+ features.selectAll('path')
+ .attr('d', path.projection(projection));
+ });
}
function initMap (container) {
@@ -32,7 +23,7 @@
var projection = path.projection(d3.geo.mercator());
var svg = d3.select(container).append('svg');
var g = svg.append('g');
- var features = g.selectAll('path').data(topojson.feature(borders,
borders.objects.countries).features)
+ var features = g.selectAll('path').data(topojson.feature(borders,
borders.objects.countries).features);
features.enter().append('path')
.attr('stroke', '#aaa')
.attr('stroke-width', '1px')
@@ -45,49 +36,14 @@
svg.call(getZoomBehavior(features, path, projection));
}
- function drawMap (container, currentData, buckets, palette) {
- var values = currentData.map(function(row) {
- // Temporarily assuming that the value we're after is the second
column
- return row[1];
- });
- var min = d3.min(values);
- var max = d3.max(values);
- var scale = d3.scale.linear().domain([min, max]).range([0, buckets -
1]);
- var dataByCountry = currentData.reduce(function(p,c) {
- p[c[0]] = c[1];
- return p;
- }, {})
- borders.objects.countries.geometries =
borders.objects.countries.geometries.map(function (f) {
- f.properties = {
- color: getColor(dataByCountry, f, scale, palette)
- }
- return f;
- });
- _.defer(function () {
- var svg = d3.select(container).select('svg');
- var g = svg.select('g')
- var features = g.selectAll('path').data(topojson.feature(borders,
borders.objects.countries).features)
- features.attr('fill', function (feature) {
- return feature.properties.color;
- });
- addLegend(container, palette, min, max);
- });
- }
-
- function getZoomBehavior (features, path, projection) {
- return d3.behavior.zoom()
- .on('zoom',function() {
- features.attr('transform','translate(' +
- d3.event.translate.join(',') + ')scale(' + d3.event.scale +
')');
- features.selectAll('path')
- .attr('d', path.projection(projection))
- });
+ function removeErrorBox(container) {
+ d3.select(container).select('.map-errorBox').remove();
}
function getColor (dataByCountry, feature, scale, palette) {
var country = isoCodes[feature.id];
var value = dataByCountry[country];
- if (isNaN(value)) return '#fff';
+ if (isNaN(value)) { return '#fff'; }
return palette[Math.floor(scale(value))];
}
@@ -102,16 +58,26 @@
errorBox.text(errorMessage);
}
- function removeErrorBox(container) {
- d3.select(container).select('.map-errorBox').remove();
- }
-
function getDataValues (data, date) {
var currentData = data[date];
if (!currentData || currentData.length === 0) {
- throw 'There is no data for this selection'
+ throw 'There is no data for this selection';
}
return currentData;
+ }
+
+ function kFormat (num) {
+ num = parseInt(num);
+ if (num >= 1000000000) {
+ return (num / 1000000000).toFixed(1).replace(/\.0$/, '') + 'G';
+ }
+ if (num >= 1000000) {
+ return (num / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+ }
+ if (num >= 1000) {
+ return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+ }
+ return num;
}
function addLegend (container, palette, min, max) {
@@ -131,23 +97,23 @@
var svg = legendBox.append('svg');
var boxHeight = 15;
- svg.style('height', 3 * boxHeight + 'px')
+ svg.style('height', 3 * boxHeight + 'px');
var boxSize = (width - padding * 2) / palette.length;
palette.forEach(function (color, i) {
- svg.append('rect')
- .style('fill', color)
- .style('x', (padding + i * boxSize) + 'px')
- .style('width', boxSize + 'px')
- .style('height', boxHeight + 'px');
- var bucketMin = min + i * (max - min) / palette.length;
- svg.append('text')
- .attr('y', (boxHeight + 10))
- .attr('x', padding + i * boxSize)
- .style('font-size', '8px')
- .style('text-anchor', 'middle')
- .text(kFormat(bucketMin));
- })
+ svg.append('rect')
+ .style('fill', color)
+ .style('x', (padding + i * boxSize) + 'px')
+ .style('width', boxSize + 'px')
+ .style('height', boxHeight + 'px');
+ var bucketMin = min + i * (max - min) / palette.length;
+ svg.append('text')
+ .attr('y', (boxHeight + 10))
+ .attr('x', padding + i * boxSize)
+ .style('font-size', '8px')
+ .style('text-anchor', 'middle')
+ .text(kFormat(bucketMin));
+ });
// Last number in legend
svg.append('text')
@@ -158,18 +124,53 @@
.text(kFormat(max));
}
- function kFormat (num) {
- num = parseInt(num)
- if (num >= 1000000000) {
- return (num / 1000000000).toFixed(1).replace(/\.0$/, '') + 'G';
+ ko.bindingHandlers.worldmap = {
+ init: function (element) {
+ initMap(element);
+ },
+ update: function (element, valueAccessor) {
+ var values = ko.unwrap(valueAccessor());
+ var data = values.data;
+ var date = values.date;
+ var buckets = 9;
+ var palette = d3_color.schemeBlues[buckets];
+ removeErrorBox(element);
+ try {
+ var currentData = getDataValues(data, date);
+ drawMap(element, currentData, buckets, palette);
+ } catch (error) {
+ showError(element, error);
+ }
}
- if (num >= 1000000) {
- return (num / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
- }
- if (num >= 1000) {
- return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
- }
- return num;
+ };
+
+ function drawMap (container, currentData, buckets, palette) {
+ var values = currentData.map(function(row) {
+ // Temporarily assuming that the value we're after is the second
column
+ return row[1];
+ });
+ var min = d3.min(values);
+ var max = d3.max(values);
+ var scale = d3.scale.linear().domain([min, max]).range([0, buckets -
1]);
+ var dataByCountry = currentData.reduce(function(p,c) {
+ p[c[0]] = c[1];
+ return p;
+ }, {});
+ borders.objects.countries.geometries =
borders.objects.countries.geometries.map(function (f) {
+ f.properties = {
+ color: getColor(dataByCountry, f, scale, palette)
+ };
+ return f;
+ });
+ _.defer(function () {
+ var svg = d3.select(container).select('svg');
+ var g = svg.select('g');
+ var features = g.selectAll('path').data(topojson.feature(borders,
borders.objects.countries).features);
+ features.attr('fill', function (feature) {
+ return feature.properties.color;
+ });
+ addLegend(container, palette, min, max);
+ });
}
-})
\ No newline at end of file
+});
diff --git a/src/components/visualizers/worldmap/worldmap.js
b/src/components/visualizers/worldmap/worldmap.js
index 51eb895..2e7661e 100644
--- a/src/components/visualizers/worldmap/worldmap.js
+++ b/src/components/visualizers/worldmap/worldmap.js
@@ -1,8 +1,6 @@
+'use strict';
define(function(require) {
- var ko = require('knockout'),
- d3 = require('d3'),
- _ = require('lodash'),
- template = require('text!./worldmap.html');
+ var template = require('text!./worldmap.html');
require('./bindings');
@@ -15,4 +13,4 @@
viewModel: WorldmapVisualizer,
template: template
};
-})
\ No newline at end of file
+});
--
To view, visit https://gerrit.wikimedia.org/r/339114
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I52b5f0fdb3add8408c15b324f61252451c510984
Gerrit-PatchSet: 2
Gerrit-Project: analytics/dashiki
Gerrit-Branch: master
Gerrit-Owner: Milimetric <dandree...@wikimedia.org>
Gerrit-Reviewer: Fdans <fd...@wikimedia.org>
Gerrit-Reviewer: Milimetric <dandree...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
