"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;