mirror of https://github.com/apache/superset.git
Fixing country maps (#2801)
This commit is contained in:
parent
b308a3eb4e
commit
69685b9dcc
|
@ -580,6 +580,7 @@ const visTypes = {
|
||||||
['select_country'],
|
['select_country'],
|
||||||
['entity'],
|
['entity'],
|
||||||
['metric'],
|
['metric'],
|
||||||
|
['linear_color_scheme'],
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
@ -6,27 +6,31 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.background {
|
.country_map .background {
|
||||||
fill: rgba(255,255,255,0);
|
fill: rgba(255,255,255,0);
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.map-layer {
|
.country_map .map-layer {
|
||||||
fill: #fff;
|
fill: #fff;
|
||||||
stroke: #aaa;
|
stroke: #aaa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.effect-layer {
|
.country_map .effect-layer {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
text {
|
.country_map text {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
text.big-text {
|
.country_map text.big-text {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.country_map path.region {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
|
@ -4,19 +4,21 @@ import { colorScalerFactory } from '../javascripts/modules/colors';
|
||||||
|
|
||||||
|
|
||||||
function countryMapChart(slice, payload) {
|
function countryMapChart(slice, payload) {
|
||||||
// CONSTANTES
|
// CONSTANTS
|
||||||
|
const fd = payload.form_data;
|
||||||
let path;
|
let path;
|
||||||
let g;
|
let g;
|
||||||
let mapLayer;
|
|
||||||
let bigText;
|
let bigText;
|
||||||
let resultText;
|
let resultText;
|
||||||
const color = d3.scale.category20();
|
|
||||||
const container = slice.container;
|
const container = slice.container;
|
||||||
const data = payload.data;
|
const data = payload.data;
|
||||||
const colorForScaler = ['#90eb9d', '#ffff8c', '#f9d057', '#f29e2e', '#e76818', '#d7191c'];
|
|
||||||
const colorsByMetrics = colorScalerFactory(colorForScaler, data, function (value) {
|
const colorScaler = colorScalerFactory(fd.linear_color_scheme, data, v => v.metric);
|
||||||
return value.metric;
|
const colorMap = {};
|
||||||
|
data.forEach((d) => {
|
||||||
|
colorMap[d.country_id] = colorScaler(d.metric);
|
||||||
});
|
});
|
||||||
|
const colorFn = d => colorMap[d.properties.ISO] || 'none';
|
||||||
|
|
||||||
let centered;
|
let centered;
|
||||||
path = d3.geo.path();
|
path = d3.geo.path();
|
||||||
|
@ -30,20 +32,7 @@ function countryMapChart(slice, payload) {
|
||||||
container.css('height', slice.height());
|
container.css('height', slice.height());
|
||||||
container.css('width', slice.width());
|
container.css('width', slice.width());
|
||||||
|
|
||||||
const getIdOfCountry = function getIdOfCountry(feature) {
|
const clicked = function (d) {
|
||||||
return feature && feature.properties && feature.properties.NAME_0 ? feature.properties.ID_0 : 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
const nameLength = function nameLength(feature) {
|
|
||||||
const idOfPays = getIdOfCountry(feature);
|
|
||||||
return idOfPays;
|
|
||||||
};
|
|
||||||
|
|
||||||
const fillFn = function fillFn(d) {
|
|
||||||
return color(getIdOfCountry(d));
|
|
||||||
};
|
|
||||||
|
|
||||||
const clicked = function clicked(d) {
|
|
||||||
let x;
|
let x;
|
||||||
let y;
|
let y;
|
||||||
let k;
|
let k;
|
||||||
|
@ -88,7 +77,7 @@ function countryMapChart(slice, payload) {
|
||||||
.attr('transform', 'translate(0,0)translate(' + resultTextX + ',' + resultTextY + ')');
|
.attr('transform', 'translate(0,0)translate(' + resultTextX + ',' + resultTextY + ')');
|
||||||
};
|
};
|
||||||
|
|
||||||
const selectAndDisplayNameOfRegion = function selectAndDisplayNameOfRegion(feature) {
|
const selectAndDisplayNameOfRegion = function (feature) {
|
||||||
let name = '';
|
let name = '';
|
||||||
if (feature && feature.properties) {
|
if (feature && feature.properties) {
|
||||||
if (feature.properties.ID_2) {
|
if (feature.properties.ID_2) {
|
||||||
|
@ -100,27 +89,26 @@ function countryMapChart(slice, payload) {
|
||||||
bigText.text(name);
|
bigText.text(name);
|
||||||
};
|
};
|
||||||
|
|
||||||
const updateMetrics = function updateMetrics(region) {
|
const updateMetrics = function (region) {
|
||||||
if (region.length > 0) {
|
if (region.length > 0) {
|
||||||
resultText.text(d3.format(',')(region[0].metric));
|
resultText.text(d3.format(',')(region[0].metric));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const mouseenter = function (d) {
|
||||||
const mouseover = function mouseover(d) {
|
// Darken color
|
||||||
const result = data.filter(function (region) {
|
let c = colorFn(d);
|
||||||
if (region.country_id === d.properties.ISO) {
|
if (c !== 'none') {
|
||||||
return region;
|
c = d3.rgb(c).darker().toString();
|
||||||
}
|
}
|
||||||
return undefined;
|
d3.select(this).style('fill', c);
|
||||||
});
|
|
||||||
d3.select(this).style('fill', d3.rgb(colorsByMetrics(result[0].metric)));
|
|
||||||
selectAndDisplayNameOfRegion(d);
|
selectAndDisplayNameOfRegion(d);
|
||||||
|
const result = data.filter(region => region.country_id === d.properties.ISO);
|
||||||
updateMetrics(result);
|
updateMetrics(result);
|
||||||
};
|
};
|
||||||
|
|
||||||
const mouseout = function mouseout() {
|
const mouseout = function () {
|
||||||
mapLayer.selectAll('path').style('fill', function (d) { return centered && d === centered ? '#D5708B' : fillFn(d); });
|
d3.select(this).style('fill', colorFn);
|
||||||
bigText.text('');
|
bigText.text('');
|
||||||
resultText.text('');
|
resultText.text('');
|
||||||
};
|
};
|
||||||
|
@ -132,7 +120,7 @@ function countryMapChart(slice, payload) {
|
||||||
.on('click', clicked);
|
.on('click', clicked);
|
||||||
|
|
||||||
g = div.append('g');
|
g = div.append('g');
|
||||||
mapLayer = g.append('g')
|
const mapLayer = g.append('g')
|
||||||
.classed('map-layer', true);
|
.classed('map-layer', true);
|
||||||
bigText = g.append('text')
|
bigText = g.append('text')
|
||||||
.classed('big-text', true)
|
.classed('big-text', true)
|
||||||
|
@ -143,7 +131,8 @@ function countryMapChart(slice, payload) {
|
||||||
.attr('x', 20)
|
.attr('x', 20)
|
||||||
.attr('y', 60);
|
.attr('y', 60);
|
||||||
|
|
||||||
d3.json('/static/assets/visualizations/countries/' + payload.form_data.select_country.toLowerCase() + '.geojson', function (error, mapData) {
|
const url = `/static/assets/visualizations/countries/${fd.select_country.toLowerCase()}.geojson`;
|
||||||
|
d3.json(url, function (error, mapData) {
|
||||||
const features = mapData.features;
|
const features = mapData.features;
|
||||||
const center = d3.geo.centroid(mapData);
|
const center = d3.geo.centroid(mapData);
|
||||||
let scale = 150;
|
let scale = 150;
|
||||||
|
@ -162,16 +151,16 @@ function countryMapChart(slice, payload) {
|
||||||
offset = [offsetWidth, offsetHeigth];
|
offset = [offsetWidth, offsetHeigth];
|
||||||
projection = d3.geo.mercator().center(center).scale(scale).translate(offset);
|
projection = d3.geo.mercator().center(center).scale(scale).translate(offset);
|
||||||
path = path.projection(projection);
|
path = path.projection(projection);
|
||||||
color.domain([0, d3.max(features, nameLength)]);
|
|
||||||
|
|
||||||
// Draw each province as a path
|
// Draw each province as a path
|
||||||
mapLayer.selectAll('path')
|
mapLayer.selectAll('path')
|
||||||
.data(features)
|
.data(features)
|
||||||
.enter().append('path')
|
.enter().append('path')
|
||||||
.attr('d', path)
|
.attr('d', path)
|
||||||
|
.attr('class', 'region')
|
||||||
.attr('vector-effect', 'non-scaling-stroke')
|
.attr('vector-effect', 'non-scaling-stroke')
|
||||||
.style('fill', fillFn)
|
.style('fill', colorFn)
|
||||||
.on('mouseover', mouseover)
|
.on('mouseenter', mouseenter)
|
||||||
.on('mouseout', mouseout)
|
.on('mouseout', mouseout)
|
||||||
.on('click', clicked);
|
.on('click', clicked);
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue