sea-chart 2.0.25 → 2.0.26

package/dist/assets/css/sea-chart-d3-tooltip.css

@@ -1,7 +1,7 @@
 .sea-chart-d3-tooltip-container {
   position: absolute;
   transform: translate(-9999px, -9999px);
-  transition: transform 0.2s;
+  transition: transform 0.1s;
   background-color: rgb(255, 255, 255);
   box-shadow: rgba(196, 175, 175, 0.1) 0px 0px 1px 1px;
   border-radius: 3px;

package/dist/components/tooltip/index.js

@@ -68,7 +68,8 @@ const ToolTip = _ref => {
     ref: tooltipRef,
     className: "sea-chart-d3-tooltip-container",
     style: {
-      transform: "translate(".concat(position.offsetX, "px, ").concat(position.offsetY, "px)")
+      transform: "translate(".concat(position.offsetX, "px, ").concat(position.offsetY, "px)"),
+      display: position.offsetX === -9999 ? 'none' : 'block'
     }
   }, title && /*#__PURE__*/_react.default.createElement("div", {
     className: "sea-chart-d3-tooltip-title"

package/dist/components/types-dialog/index.js

@@ -69,7 +69,9 @@ const TypesDialog = _ref => {
   }, [onChange, selectedType, onToggle]);
   const handleFilterTypes = (0, _react.useCallback)(() => {
     if (hideTypeToggle) {
-      const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram', 'Bar_chart', 'Line_chart', 'Area', 'Pie_chart', 'Scatter_chart', 'Combination_chart'].includes(item.name));
+      const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram', 'Bar_chart', 'Line_chart', 'Area', 'Pie_chart', 'Scatter_chart', 'Combination_chart', 'Map'].includes(item.name));
+      const newMapChildren = newChartTypes[newChartTypes.length - 1].children.slice(0, 2);
+      newChartTypes[newChartTypes.length - 1].children = newMapChildren;
       return newChartTypes;
     }
     return _constants.CHART_TYPES;

package/dist/services/map-json.js

@@ -75,7 +75,7 @@ function getMapJsonQueryUrl(mapLevel, mapLocation) {
   }
 }
 function handleLoadedMapJson(url, mapJson) {
-  const isValid = mapJson && mapJson.features;
+  const isValid = mapJson && ((mapJson === null || mapJson === void 0 ? void 0 : mapJson.type) === 'Topology' && (mapJson === null || mapJson === void 0 ? void 0 : mapJson.objects) || (mapJson === null || mapJson === void 0 ? void 0 : mapJson.type) === 'FeatureCollection' && (mapJson === null || mapJson === void 0 ? void 0 : mapJson.features));
   if (isValid) {
     setMapJson(url, mapJson);
     return mapJson;

package/dist/view/wrapper/chart-component.js

@@ -645,22 +645,62 @@ class ChartComponent extends _react.Component {
         return _intl.default.get(name) || name;
       }
     };
-    this.sortLegend = (result, groupColumn, legendName) => {
-      result.forEach(item => {
-        const option = groupColumn.data.options.find(option => option.name === item[legendName]);
-        if (option !== null && option !== void 0 && option.id) {
-          item['group_name_id'] = option.id;
-          item['oldName'] = item.name;
-          item.name = item['group_name_id'];
+    // set continuous legend
+    this.setContinuousLegend = _ref => {
+      var _this$chart$node2;
+      let {
+        previewType,
+        theme,
+        colorRange = [],
+        legendDirection,
+        legendSize,
+        legendTextRange,
+        bubbleColor,
+        type
+      } = _ref;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      const legendRectWidth = legendDirection === 'vertical' ? 12 : Math.min(legendSize * 100, chartWidth - insertPadding * 2);
+      const legendRectHeight = legendDirection === 'vertical' ? Math.min(legendSize * 100, chartHeight - insertPadding * 2) : 12;
+      const legendTextOffset = 2;
+      const legendTextHeightSpace = legendDirection === 'vertical' ? 0 : 14 + legendTextOffset;
+      if (type !== _constants.CHART_TYPE.MAP_BUBBLE) {
+        var _this$chart$node;
+        // add linearGradient
+        const gradient = this.chart.append('defs').attr('class', 'linear-gradient-wrapper').append('linearGradient').attr("id", "gradient-".concat((_this$chart$node = this.chart.node()) === null || _this$chart$node === void 0 ? void 0 : _this$chart$node.id, "-").concat(previewType)).attr("x1", '0%').attr("y1", '0%').attr("x2", legendDirection === 'vertical' ? '0%' : '100%').attr("y2", legendDirection === 'vertical' ? '100%' : '0%');
+        gradient.append('stop').attr('offset', '0%').attr('stop-color', "".concat(colorRange[0]));
+        gradient.append('stop').attr('offset', '50%').attr('stop-color', "".concat(colorRange[4]));
+        gradient.append('stop').attr('offset', '100%').attr('stop-color', "".concat(colorRange[8]));
+      }
+
+      // add legend
+      const continuousLegendWrapper = this.chart.append('g').attr('class', 'legend-continuous-wrapper').attr('transform', "translate(".concat(insertPadding, ", ").concat(chartHeight - legendRectHeight - legendTextHeightSpace, ")"));
+      continuousLegendWrapper.append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('fill', type === _constants.CHART_TYPE.MAP_BUBBLE ? bubbleColor : "url(#gradient-".concat((_this$chart$node2 = this.chart.node()) === null || _this$chart$node2 === void 0 ? void 0 : _this$chart$node2.id, "-").concat(previewType, ")")).call(g => {
+        if (type === _constants.CHART_TYPE.MAP_BUBBLE) {
+          continuousLegendWrapper.append('polygon').attr('points', "0,0  ".concat(legendRectWidth - 0.5, ",0  0,").concat(legendRectHeight - 0.5)).attr('fill', '#fff').attr('stroke', '#fff');
         }
       });
-      _utils.BaseUtils.sortCharts(result, groupColumn, 'name');
-      result.forEach(item => {
-        item.name = item['oldName'];
+      continuousLegendWrapper.append('text').attr('class', 'range-start').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).text(legendTextRange[0]).call(g => {
+        const {
+          height
+        } = g.node().getBoundingClientRect();
+        g.attr('x', legendDirection === 'vertical' ? legendRectWidth + legendTextOffset : legendTextOffset);
+        g.attr('y', legendDirection === 'vertical' ? height : height + legendRectHeight);
+      });
+      continuousLegendWrapper.append('text').attr('class', 'range-end').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).text(legendTextRange[1]).call(g => {
+        const {
+          width,
+          height
+        } = g.node().getBoundingClientRect();
+        g.attr('x', legendDirection === 'vertical' ? legendRectWidth + legendTextOffset : legendRectWidth - width);
+        g.attr('y', legendDirection === 'vertical' ? legendRectHeight - legendTextOffset : height + legendRectHeight);
       });
     };
     // set legend
-    this.setLegend = _ref => {
+    this.setLegend = _ref2 => {
       var _chart$config, _chart$config2, _chart$config3;
       let {
         legendName,
@@ -670,7 +710,7 @@ class ChartComponent extends _react.Component {
         colorScale,
         groupColumn,
         chart
-      } = _ref;
+      } = _ref2;
       if (!this.chart) return;
       this.legendConfig = {
         legendRectWidth: (chart === null || chart === void 0 ? void 0 : (_chart$config = chart.config) === null || _chart$config === void 0 ? void 0 : _chart$config.type) === _constants.CHART_TYPE.SCATTER ? 8 : 20,
@@ -698,6 +738,7 @@ class ChartComponent extends _react.Component {
         bottomLegendSpace
       } = this.chartBoundingClientRect;
       const groupsData = this.getLegendDataGroups(legendData);
+      if (groupsData.length === 0) return;
       const legendWrapper = this.chart.append('g').attr('class', 'legend-wrapper');
 
       // legend offset bottom and When there is only one line of legend, it is displayed in the center (for scatter chart)
@@ -788,14 +829,14 @@ class ChartComponent extends _react.Component {
         });
       }
     };
-    this.renderLegend = _ref2 => {
+    this.renderLegend = _ref3 => {
       let {
         legendWrapper,
         groupData,
         colorScale,
         theme,
         text
-      } = _ref2;
+      } = _ref3;
       const {
         legendItemPaddingTop,
         legendItemTextPaddingTop,
@@ -821,15 +862,15 @@ class ChartComponent extends _react.Component {
           d3.select(item).remove();
         });
       }
-      legendWrapper.selectAll().data(groupData).join('g').attr('data-groupName', _ref3 => {
-        let [groupName] = _ref3;
-        return groupName;
-      }).append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('y', legendItemPaddingTop).attr('rx', r).attr('fill', _ref4 => {
+      legendWrapper.selectAll().data(groupData).join('g').attr('data-groupName', _ref4 => {
         let [groupName] = _ref4;
+        return groupName;
+      }).append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('y', legendItemPaddingTop).attr('rx', r).attr('fill', _ref5 => {
+        let [groupName] = _ref5;
         if (colorScale) return colorScale(groupName);
         return this.colorMap[groupName] || _constants.CHART_STYLE_COLORS[0];
-      }).attr('data-text', _ref5 => {
-        let [groupName] = _ref5;
+      }).attr('data-text', _ref6 => {
+        let [groupName] = _ref6;
         return groupName;
       }).call(g => {
         // Add text
@@ -1021,6 +1062,20 @@ class ChartComponent extends _react.Component {
         d3.select(legendItem).attr('opacity', 1);
       });
     };
+    this.sortLegend = (result, groupColumn, legendName) => {
+      result.forEach(item => {
+        const option = groupColumn.data.options.find(option => option.name === item[legendName]);
+        if (option !== null && option !== void 0 && option.id) {
+          item['group_name_id'] = option.id;
+          item['oldName'] = item.name;
+          item.name = item['group_name_id'];
+        }
+      });
+      _utils.BaseUtils.sortCharts(result, groupColumn, 'name');
+      result.forEach(item => {
+        item.name = item['oldName'];
+      });
+    };
     // theta is pie or ring chart
     this.setLegendForTheta = function (legendName) {
       let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.CHART_THEME_COLOR['light'];
@@ -1080,6 +1135,30 @@ class ChartComponent extends _react.Component {
       });
       this.formatedDataByName = formattedItems;
     };
+    this.formatMapStatisticData = (statisticData, mapData, type) => {
+      if (!statisticData) return [];
+      if (!mapData.features) return [];
+      let statisticNewData = [];
+      let sum = 0;
+      statisticData.forEach((item, index) => {
+        if (item && item.name) {
+          let matchFeature = mapData.features.find(feature => feature.properties.name.indexOf(item.name) > -1);
+          if (matchFeature) {
+            statisticNewData.push({
+              name: matchFeature.properties.name,
+              value: item.value || 0
+            });
+            if (type === 'map_bubble') {
+              sum += item.value;
+            }
+          }
+        }
+      });
+      if (type === 'map_bubble') {
+        statisticNewData.sum = sum;
+      }
+      return statisticNewData;
+    };
     this.getToolTipSettings = (isGroup, summaryColumn, y_axis_summary_method, useSingleSelectColumnColor) => {
       const obj = {
         showMarkers: false,
@@ -1235,7 +1314,7 @@ class ChartComponent extends _react.Component {
         annotationWrapper.append('text').attr('x', chartWidth - insertPadding - 30).attr('y', yScale(goal_value) - 10).attr('fill', '#666').text(goal_label);
       });
     };
-    this.addLabelToRectTop = _ref6 => {
+    this.addLabelToRectTop = _ref7 => {
       let {
         container,
         x,
@@ -1244,7 +1323,7 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref6;
+      } = _ref7;
       d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('y', Number(y) - 10).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         const {
           width
@@ -1252,7 +1331,7 @@ class ChartComponent extends _react.Component {
         g.attr('x', Number(x) + Number(xWidth) / 2 - width / 2);
       });
     };
-    this.addLabelToRectRight = _ref7 => {
+    this.addLabelToRectRight = _ref8 => {
       let {
         container,
         x,
@@ -1262,7 +1341,7 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref7;
+      } = _ref8;
       d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('x', Number(x) + Number(xWidth) + 10).attr('y', Number(y)).attr('fill', theme.labelColor).attr('dominant-baseline', 'hanging').attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         if (g.node()) {
           var _g$node;
@@ -1273,7 +1352,7 @@ class ChartComponent extends _react.Component {
         }
       });
     };
-    this.addLabelToRectCenter = _ref8 => {
+    this.addLabelToRectCenter = _ref9 => {
       let {
         chartType,
         container,
@@ -1284,7 +1363,7 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref8;
+      } = _ref9;
       d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         const {
           width,
@@ -1326,13 +1405,13 @@ class ChartComponent extends _react.Component {
       }
     };
     // Use clipPath to make rectangle rounded corners
-    this.addClipPath = _ref9 => {
+    this.addClipPath = _ref10 => {
       let {
         rect,
         parentNode,
         attr,
         rectId
-      } = _ref9;
+      } = _ref10;
       const {
         borderRadius
       } = this.chartBoundingClientRect;

package/dist/view/wrapper/index.js

@@ -30,6 +30,8 @@ var _ring = _interopRequireDefault(require("./ring"));
 var _scatter = _interopRequireDefault(require("./scatter"));
 var _basicNumberCard = _interopRequireDefault(require("./basic-number-card"));
 var _combination = _interopRequireDefault(require("./combination"));
+var _map = _interopRequireDefault(require("./map"));
+var _mapBubble = _interopRequireDefault(require("./map-bubble"));
 var _trend = _interopRequireDefault(require("./trend"));
 var _tableElement = _interopRequireDefault(require("./table-element"));
 const Wrapper = _ref => {
@@ -251,6 +253,18 @@ const Wrapper = _ref => {
             canvasStyle: canvasStyle
           }));
         }
+      case _constants.CHART_TYPE.MAP:
+        {
+          return /*#__PURE__*/_react.default.createElement(_map.default, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
+      case _constants.CHART_TYPE.MAP_BUBBLE:
+        {
+          return /*#__PURE__*/_react.default.createElement(_mapBubble.default, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
       case _constants.CHART_TYPE.BASIC_NUMBER_CARD:
         {
           return /*#__PURE__*/_react.default.createElement(_basicNumberCard.default, Object.assign({}, baseProps, {

package/dist/view/wrapper/map-bubble.js

@@ -0,0 +1,268 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _lodashEs = require("lodash-es");
+var d3 = _interopRequireWildcard(require("d3"));
+var _topojson = require("topojson");
+var _dtableUtils = require("dtable-utils");
+var _constants = require("../../constants");
+var _utils = require("../../utils");
+var _context = _interopRequireDefault(require("../../context"));
+var _mapJson = _interopRequireDefault(require("../../services/map-json"));
+var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
+var _chartComponent = _interopRequireDefault(require("./chart-component"));
+class MapBubble extends _chartComponent.default {
+  constructor(props) {
+    super(props);
+    this.handleResize = () => {
+      this.chart.node() && this.chart.node().remove();
+      this.createChart();
+      this.drawChart();
+    };
+    this.createChart = () => {
+      const {
+        chart
+      } = this.props;
+      const initConfig = {
+        insertPadding: 30
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+    };
+    this.drawChart = async () => {
+      let {
+        result: data,
+        chart
+      } = this.props;
+      if (!Array.isArray(data)) return;
+      const {
+        map_location,
+        map_level = _constants.MAP_LEVEL.COUNTRY,
+        type
+      } = chart.config;
+      const mediaUrl = _context.default.getSetting('mediaUrl');
+      const mapJson = await (0, _mapJson.default)(map_level, map_location, mediaUrl);
+      if (!mapJson) return;
+      const statisticNewData = this.formatMapStatisticData(data, mapJson, type);
+      this.draw(statisticNewData, mapJson);
+    };
+    this.showTooltip = event => {
+      const title = event.currentTarget.getAttribute('data-name');
+      const value = Number(event.currentTarget.getAttribute('data-value'));
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      const newTooltipData = {
+        title,
+        items: [{
+          color: '',
+          name: '数量',
+          value
+        }]
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.moveTooltip = event => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    this.draw = (data, mapJson) => {
+      const {
+        chart,
+        globalTheme,
+        canvasStyle
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const {
+        map_level = _constants.MAP_LEVEL.COUNTRY,
+        legend_size,
+        legend_direction,
+        summary_method,
+        type,
+        bubble_color = '#2a67d1'
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      const newMapData = map_level === _constants.MAP_LEVEL.COUNTRY ? (0, _topojson.feature)(mapJson, mapJson.objects) : mapJson;
+
+      // 1. Setting up projection
+      const projection = d3.geoMercator().fitSize([chartWidth - insertPadding, chartHeight - insertPadding], newMapData);
+
+      // 2. Generate a path based on projection
+      const pathGenerator = d3.geoPath(projection);
+
+      // 3. Rendering map
+      this.chart.append('g').attr('class', 'map-wrapper').selectAll().data(newMapData.features).join('g').append('path').attr('d', d => {
+        return pathGenerator(d);
+      }).attr('stroke-width', 1).attr('stroke', '#bdbdbd').attr('stroke-opacity', 1).attr('fill', '#e2e2e2').attr('opacity', 1).attr('data-name', d => d.properties.name);
+
+      // draw bubble circle
+      this.drawCircle(data, newMapData, pathGenerator);
+
+      // draw legend
+      const columnData = this.getColumnData();
+      this.setContinuousLegend({
+        previewType: canvasStyle.previewType,
+        theme,
+        legendDirection: legend_direction,
+        legendSize: legend_size,
+        legendTextRange: [_utils.BaseUtils.getSummaryValueDisplayString(columnData, d3.min(data, d => d.value), summary_method), _utils.BaseUtils.getSummaryValueDisplayString(columnData, d3.max(data, d => d.value), summary_method)],
+        type,
+        bubbleColor: bubble_color
+      });
+    };
+    this.handleAcitveAndInActiveState = (state, event, highlightedBorderColor) => {
+      if (state === 'active') {
+        d3.select(event.currentTarget).transition().duration(this.transitionDuration).attr('fill-opacity', 0.9);
+        return;
+      }
+      d3.select(event.currentTarget).transition().duration(this.transitionDuration).attr('fill-opacity', 0.6);
+    };
+    this.getColumnData = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        summary_type,
+        summary_column_key,
+        table_id
+      } = chart.config;
+      let columnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      if (summary_type === _constants.CHART_SUMMARY_TYPE.ADVANCED) {
+        const table = (0, _dtableUtils.getTableById)(table_id);
+        const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column_key) || {};
+        columnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      }
+      return columnData;
+    };
+    this.drawCircle = (data, mapData, geoPath) => {
+      const {
+        chart
+      } = this.props;
+      const {
+        bubble_color = '#2a67d1'
+      } = chart.config;
+      const circleData = [];
+      mapData.features.forEach(item => {
+        const curName = item.properties.name;
+        const curData = data.find(item => item.name.includes(curName));
+        if (curData) {
+          circleData.push({
+            feature: item,
+            value: curData.value,
+            name: curName
+          });
+        }
+      });
+      const bubbleWrapper = this.chart.append('g').attr('class', 'bubble-wrapper');
+      circleData.forEach(_ref => {
+        let {
+          feature,
+          value,
+          name
+        } = _ref;
+        const centroid = geoPath.centroid(feature);
+        if (centroid && centroid[0] && centroid[1]) {
+          bubbleWrapper.append('circle').attr('cx', centroid[0]).attr('cy', centroid[1]).attr('r', () => {
+            const percent = value / data.sum;
+            let size = percent * 100;
+            return size;
+          }).attr('fill', bubble_color).attr('fill-opacity', 0.6).attr('stroke', bubble_color).attr('stroke-opacity', 0.9).attr('data-value', value).attr('data-name', name).on('click', event => {
+            const name = event.target.getAttribute('data-name');
+            const newData = data.find(item => item.name.includes(name));
+            newData && this.props.toggleRecords(newData);
+          }).on('mouseover', event => {
+            this.showTooltip(event);
+            this.handleAcitveAndInActiveState('active', event);
+          }).on('mousemove', event => {
+            this.moveTooltip(event);
+          }).on('mouseleave', event => {
+            this.hiddenTooltip(event);
+            this.handleAcitveAndInActiveState('inActive', event);
+          });
+        }
+      });
+    };
+    this.chart = null;
+    this.state = {
+      tooltipData: null,
+      toolTipPosition: null
+    };
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
+    window.addEventListener('resize', this.debouncedHandleResize);
+  }
+  componentDidUpdate(prevProps) {
+    super.componentDidUpdate(prevProps);
+    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.chart.node() && this.chart.node().remove();
+    window.removeEventListener('resize', this.debouncedHandleResize);
+  }
+  render() {
+    const {
+      tooltipData,
+      toolTipPosition
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.container = ref,
+      className: "sea-chart-container"
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
+  }
+}
+MapBubble.propTypes = {
+  canvasStyle: _propTypes.default.object,
+  chart: _propTypes.default.object,
+  groupbyColumn: _propTypes.default.object,
+  columnGroupbyColumn: _propTypes.default.object,
+  summaryColumn: _propTypes.default.object,
+  result: _propTypes.default.array,
+  tables: _propTypes.default.array,
+  globalTheme: _propTypes.default.string,
+  chartColorTheme: _propTypes.default.string,
+  toggleRecords: _propTypes.default.func,
+  customRender: _propTypes.default.func
+};
+var _default = exports.default = MapBubble;

package/dist/view/wrapper/map.js

@@ -0,0 +1,268 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _lodashEs = require("lodash-es");
+var d3 = _interopRequireWildcard(require("d3"));
+var _topojson = require("topojson");
+var _dtableUtils = require("dtable-utils");
+var _constants = require("../../constants");
+var _utils = require("../../utils");
+var _colorRules = require("../../constants/color-rules");
+var _context = _interopRequireDefault(require("../../context"));
+var _mapJson = _interopRequireDefault(require("../../services/map-json"));
+var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
+var _chartComponent = _interopRequireDefault(require("./chart-component"));
+class Map extends _chartComponent.default {
+  constructor(props) {
+    super(props);
+    this.handleResize = () => {
+      this.chart.node() && this.chart.node().remove();
+      this.createChart();
+      this.drawChart();
+    };
+    this.createChart = () => {
+      const {
+        chart
+      } = this.props;
+      const initConfig = {
+        insertPadding: 30
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+    };
+    this.drawChart = async () => {
+      let {
+        result: data,
+        chart
+      } = this.props;
+      if (!Array.isArray(data)) return;
+      const {
+        map_location,
+        map_level = _constants.MAP_LEVEL.COUNTRY,
+        type
+      } = chart.config;
+      const mediaUrl = _context.default.getSetting('mediaUrl');
+      const mapJson = await (0, _mapJson.default)(map_level, map_location, mediaUrl);
+      if (!mapJson) return;
+      const statisticNewData = this.formatMapStatisticData(data, mapJson, type);
+      this.draw(statisticNewData, mapJson);
+    };
+    this.showTooltip = event => {
+      const title = event.target.getAttribute('data-name');
+      const value = Number(event.target.getAttribute('data-value'));
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      const newTooltipData = {
+        title,
+        items: [{
+          color: '',
+          name: '数量',
+          value
+        }]
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.moveTooltip = event => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    this.draw = (data, mapJson) => {
+      const {
+        chart,
+        globalTheme,
+        canvasStyle
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const {
+        map_level = _constants.MAP_LEVEL.COUNTRY,
+        data_color,
+        legend_size,
+        legend_direction,
+        summary_method
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      const newMapData = map_level === _constants.MAP_LEVEL.COUNTRY ? (0, _topojson.feature)(mapJson, mapJson.objects) : mapJson;
+      const currentColorOption = _colorRules.COLOR_OPTIONS.filter(item => item.name === data_color)[0] || _colorRules.COLOR_OPTIONS[0];
+      const {
+        exampleColors,
+        highlightedBorderColor
+      } = currentColorOption;
+
+      // Color scale
+      const minVal = d3.min(data, d => d.value);
+      const maxVal = d3.max(data, d => d.value);
+      const color = d3.scaleSequential([minVal, maxVal], d3.interpolateRgbBasis(exampleColors)).unknown('#e2e2e2');
+
+      // 1. Setting up projection
+      const projection = d3.geoMercator().fitSize([chartWidth - insertPadding, chartHeight - insertPadding], newMapData);
+
+      // 2. Generate a path based on projection
+      const pathGenerator = d3.geoPath(projection);
+
+      // 3. Rendering map
+      this.chart.append('g').attr('class', 'map-wrapper').on('click', event => {
+        const value = Number(event.target.getAttribute('data-value'));
+        if (value) {
+          const name = event.target.getAttribute('data-name');
+          const newData = data.find(item => item.name.includes(name));
+          newData && this.props.toggleRecords(newData);
+        }
+      }).on('mousemove', event => {
+        const value = Number(event.target.getAttribute('data-value'));
+        if (value) {
+          this.curElement = event.target.parentNode;
+          this.showTooltip(event);
+          this.handleAcitveAndInActiveState('active', event, highlightedBorderColor);
+        } else {
+          if (this.curElement) {
+            this.hiddenTooltip(event);
+            this.handleAcitveAndInActiveState('inActive', event, highlightedBorderColor);
+            this.curElement = null;
+          }
+        }
+      }).on('mouseleave', event => {
+        if (this.curElement) {
+          this.hiddenTooltip(event);
+          this.handleAcitveAndInActiveState('inActive', event, highlightedBorderColor);
+          this.curElement = null;
+        }
+      }).selectAll().data(newMapData.features).join('g').append('path').attr('d', d => {
+        return pathGenerator(d);
+      }).attr('stroke-width', 1).attr('stroke', '#bdbdbd').attr('stroke-opacity', 1).attr('opacity', 1).attr('data-name', d => d.properties.name).call(g => {
+        g.nodes().forEach(item => {
+          const curName = item.getAttribute('data-name');
+          const curItemData = data.find(item => item.name.includes(curName));
+          if (curItemData) {
+            d3.select(item).attr('fill', color(curItemData.value));
+            d3.select(item).attr('data-value', curItemData.value);
+          } else {
+            d3.select(item).attr('fill', color());
+          }
+        });
+      });
+      const columnData = this.getColumnData();
+      this.setContinuousLegend({
+        previewType: canvasStyle.previewType,
+        theme,
+        colorRange: exampleColors,
+        legendDirection: legend_direction,
+        legendSize: legend_size,
+        legendTextRange: [_utils.BaseUtils.getSummaryValueDisplayString(columnData, minVal, summary_method), _utils.BaseUtils.getSummaryValueDisplayString(columnData, maxVal, summary_method)]
+      });
+    };
+    this.handleAcitveAndInActiveState = (state, event, highlightedBorderColor) => {
+      if (state === 'active') {
+        const lastElement = Array.from(event.target.parentNode.parentNode.children).at(-1);
+
+        // Add element to the end
+        d3.select(this.curElement).select('path').transition().duration(this.transitionDuration).attr('stroke-opacity', 0.7).attr('stroke-width', 0.5).attr('stroke', highlightedBorderColor);
+        lastElement.after(this.curElement);
+        return;
+      }
+      if (this.curElement) {
+        d3.select(this.curElement).select('path').transition().duration(this.transitionDuration).attr('stroke-opacity', 1).attr('stroke-width', 1).attr('stroke', '#bdbdbd');
+      }
+    };
+    this.getColumnData = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        summary_type,
+        summary_column_key,
+        table_id
+      } = chart.config;
+      let columnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      if (summary_type === _constants.CHART_SUMMARY_TYPE.ADVANCED) {
+        const table = (0, _dtableUtils.getTableById)(table_id);
+        const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column_key) || {};
+        columnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      }
+      return columnData;
+    };
+    this.chart = null;
+    this.state = {
+      tooltipData: null,
+      toolTipPosition: null
+    };
+    this.curElement = null; // Regions that currently contain data
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
+    window.addEventListener('resize', this.debouncedHandleResize);
+  }
+  componentDidUpdate(prevProps) {
+    super.componentDidUpdate(prevProps);
+    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.chart.node() && this.chart.node().remove();
+    window.removeEventListener('resize', this.debouncedHandleResize);
+  }
+  render() {
+    const {
+      tooltipData,
+      toolTipPosition
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.container = ref,
+      className: "sea-chart-container"
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
+  }
+}
+Map.propTypes = {
+  canvasStyle: _propTypes.default.object,
+  chart: _propTypes.default.object,
+  groupbyColumn: _propTypes.default.object,
+  columnGroupbyColumn: _propTypes.default.object,
+  summaryColumn: _propTypes.default.object,
+  result: _propTypes.default.array,
+  tables: _propTypes.default.array,
+  globalTheme: _propTypes.default.string,
+  chartColorTheme: _propTypes.default.string,
+  toggleRecords: _propTypes.default.func,
+  customRender: _propTypes.default.func
+};
+var _default = exports.default = Map;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "2.0.25",
+  "version": "2.0.26",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
@@ -17,7 +17,8 @@
     "rc-slider": "^10.5.0",
     "reactstrap": "~9.2.3",
     "shallowequal": "^1.1.0",
-    "slugid": "~5.0.1"
+    "slugid": "~5.0.1",
+    "topojson": "^3.0.2"
   },
   "peerDependencies": {
     "dtable-ui-component": "~6.0.15",