williaster commented on a change in pull request #5721: [SIP-5] Repair and
refactor CountryMap
URL:
https://github.com/apache/incubator-superset/pull/5721#discussion_r213817459
##########
File path: superset/assets/src/visualizations/country_map.js
##########
@@ -1,83 +1,112 @@
import d3 from 'd3';
-import './country_map.css';
+import PropTypes from 'prop-types';
import { colorScalerFactory } from '../modules/colors';
+import './country_map.css';
+const propTypes = {
+ data: PropTypes.arrayOf(PropTypes.shape({
+ country_id: PropTypes.string,
+ metric: PropTypes.number,
+ })),
+ width: PropTypes.number,
+ height: PropTypes.number,
+ country: PropTypes.string,
+ linearColorScheme: PropTypes.string,
+ mapBaseUrl: PropTypes.string,
+ numberFormat: PropTypes.string,
+};
+
+const maps = {};
+
+function CountryMap(element, props) {
+ PropTypes.checkPropTypes(propTypes, props, 'prop', 'CountryMap');
+
+ const {
+ data,
+ width,
+ height,
+ country,
+ linearColorScheme,
+ mapBaseUrl = '/static/assets/src/visualizations/countries',
+ numberFormat,
+ } = props;
-function countryMapChart(slice, payload) {
- // CONSTANTS
- const fd = payload.form_data;
let path;
- let g;
- let bigText;
- let resultText;
- const container = slice.container;
- const data = payload.data;
- const format = d3.format(fd.number_format);
-
- const colorScaler = colorScalerFactory(fd.linear_color_scheme, data, v =>
v.metric);
+
+ const container = element;
+ const format = d3.format(numberFormat);
+ const colorScaler = colorScalerFactory(linearColorScheme, data, v =>
v.metric);
const colorMap = {};
data.forEach((d) => {
colorMap[d.country_id] = colorScaler(d.metric);
});
const colorFn = d => colorMap[d.properties.ISO] || 'none';
- let centered;
path = d3.geo.path();
- d3.select(slice.selector).selectAll('*').remove();
- const div = d3.select(slice.selector)
- .append('svg:svg')
- .attr('width', slice.width())
- .attr('height', slice.height())
+ const div = d3.select(container);
+ div.selectAll('*').remove();
+ container.style.height = `${height}px`;
+ container.style.width = `${width}px`;
+ const svg = div.append('svg:svg')
+ .attr('width', width)
+ .attr('height', height)
.attr('preserveAspectRatio', 'xMidYMid meet');
+ const backgroundRect = svg.append('rect')
+ .attr('class', 'background')
+ .attr('width', width)
+ .attr('height', height);
+ const g = svg.append('g');
+ const mapLayer = g.append('g')
+ .classed('map-layer', true);
+ const textLayer = g.append('g')
+ .classed('text-layer', true)
+ .attr('transform', `translate(${width / 2}, 45)`);
+ const bigText = textLayer.append('text')
+ .classed('big-text', true);
+ const resultText = textLayer.append('text')
+ .classed('result-text', true)
+ .attr('dy', '1em');
- container.css('height', slice.height());
- container.css('width', slice.width());
+ let centered;
const clicked = function (d) {
+ const hasCenter = d && centered !== d;
let x;
let y;
let k;
- let bigTextX;
- let bigTextY;
- let bigTextSize;
- let resultTextX;
- let resultTextY;
- if (d && centered !== d) {
+ if (hasCenter) {
const centroid = path.centroid(d);
x = centroid[0];
y = centroid[1];
- bigTextX = centroid[0];
- bigTextY = centroid[1] - 40;
- resultTextX = centroid[0];
- resultTextY = centroid[1] - 40;
- bigTextSize = '6px';
k = 4;
centered = d;
} else {
- x = slice.width() / 2;
- y = slice.height() / 2;
- bigTextX = 0;
- bigTextY = 0;
- resultTextX = 0;
- resultTextY = 0;
- bigTextSize = '30px';
+ x = width / 2;
+ y = height / 2;
k = 1;
centered = null;
}
g.transition()
.duration(750)
- .attr('transform', 'translate(' + slice.width() / 2 + ',' +
slice.height() / 2 + ')scale(' + k + ')translate(' + -x + ',' + -y + ')');
+ .attr('transform', 'translate(' + width / 2 + ',' + height / 2 +
')scale(' + k + ')translate(' + -x + ',' + -y + ')');
Review comment:
could use template literals here to be consistent with `transform` below
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
