123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- "use strict";
- exports.__esModule = true;
- exports.default = void 0;
- var _d = _interopRequireDefault(require("d3"));
- var _propTypes = _interopRequireDefault(require("prop-types"));
- var _datamapsWorld = _interopRequireDefault(require("datamaps/dist/datamaps.world.min"));
- var _numberFormat = require("@superset-ui/number-format");
- require("./WorldMap.css");
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
- const propTypes = {
- data: _propTypes.default.arrayOf(_propTypes.default.shape({
- country: _propTypes.default.string,
- latitude: _propTypes.default.number,
- longitude: _propTypes.default.number,
- name: _propTypes.default.string,
- m1: _propTypes.default.number,
- m2: _propTypes.default.number
- })),
- height: _propTypes.default.number,
- maxBubbleSize: _propTypes.default.number,
- showBubbles: _propTypes.default.bool
- };
- const formatter = (0, _numberFormat.getNumberFormatter)();
- function WorldMap(element, props) {
- const {
- data,
- height,
- maxBubbleSize,
- showBubbles
- } = props;
- const div = _d.default.select(element);
- div.classed('superset-legacy-chart-world-map', true);
- const container = element;
- container.style.height = height + "px";
- div.selectAll('*').remove(); // Ignore XXX's to get better normalization
- const filteredData = data.filter(d => d.country && d.country !== 'XXX');
- const ext = _d.default.extent(filteredData, d => d.m1);
- const extRadius = _d.default.extent(filteredData, d => d.m2);
- const radiusScale = _d.default.scale.linear().domain([extRadius[0], extRadius[1]]).range([1, maxBubbleSize]); // color gradient based on http://colorbrewer2.org/#type=sequential&scheme=Greens&n=9
- const colorScale = _d.default.scale.linear().domain([ext[0], ext[1]]).range(['#c7e9c0', '#00441b']);
- const processedData = filteredData.map(d => _extends({}, d, {
- radius: radiusScale(d.m2),
- fillColor: colorScale(d.m1)
- }));
- const mapData = {};
- processedData.forEach(d => {
- mapData[d.country] = d;
- });
- const map = new _datamapsWorld.default({
- element,
- data: processedData,
- fills: {
- defaultFill: '#eee'
- },
- geographyConfig: {
- popupOnHover: true,
- highlightOnHover: true,
- borderWidth: 1,
- borderColor: '#feffff',
- highlightBorderColor: '#feffff',
- highlightFillColor: '#00749A',
- highlightBorderWidth: 1,
- popupTemplate: (geo, d) => "<div class=\"hoverinfo\"><strong>" + d.name + "</strong><br>" + formatter(d.m1) + "</div>"
- },
- bubblesConfig: {
- borderWidth: 1,
- borderOpacity: 1,
- borderColor: '#00749A',
- popupOnHover: true,
- radius: null,
- popupTemplate: (geo, d) => "<div class=\"hoverinfo\"><strong>" + d.name + "</strong><br>" + formatter(d.m2) + "</div>",
- fillOpacity: 0.5,
- animate: true,
- highlightOnHover: true,
- highlightFillColor: '#00749A',
- highlightBorderColor: 'black',
- highlightBorderWidth: 2,
- highlightBorderOpacity: 1,
- highlightFillOpacity: 0.85,
- exitDelay: 100,
- key: JSON.stringify
- }
- });
- map.updateChoropleth(mapData);
- if (showBubbles) {
- map.bubbles(processedData);
- div.selectAll('circle.datamaps-bubble').style('fill', '#00749A');
- }
- }
- WorldMap.displayName = 'WorldMap';
- WorldMap.propTypes = propTypes;
- var _default = WorldMap;
- exports.default = _default;
|