sea-chart 2.0.25 → 2.0.27

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

@@ -0,0 +1,266 @@
+"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 {
+        type
+      } = chart.config;
+      const mediaUrl = _context.default.getSetting('mediaUrl');
+      const mapJson = await (0, _mapJson.default)(_constants.MAP_LEVEL.WORLD, '', mediaUrl);
+      if (!mapJson) return;
+      const newMapJson = (0, _topojson.feature)(mapJson, mapJson.objects);
+      const statisticNewData = this.formatWorldMapStatisticData(data, newMapJson, type);
+      this.draw(statisticNewData, newMapJson);
+    };
+    this.showTooltip = (event, data) => {
+      const curData = data.find(item => item.name.includes(event.currentTarget.getAttribute('data-name')));
+      const title = curData.nameType === 'en' ? curData.name : curData.name_cn;
+      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 {
+        legend_size,
+        legend_direction,
+        summary_method,
+        type,
+        bubble_color
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding
+      } = this.chartBoundingClientRect;
+
+      // 1. Setting up projection
+      const projection = d3.geoMercator().fitSize([chartWidth - insertPadding, chartHeight - insertPadding], mapJson);
+
+      // 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(mapJson.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, mapJson, 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 || '#2a67d1'
+      });
+    };
+    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
+      } = 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 || '#2a67d1').attr('fill-opacity', 0.6).attr('stroke', bubble_color || '#2a67d1').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, data);
+            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-world.js

@@ -0,0 +1,279 @@
+"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 {
+        type
+      } = chart.config;
+      const mediaUrl = _context.default.getSetting('mediaUrl');
+      const mapJson = await (0, _mapJson.default)(_constants.MAP_LEVEL.WORLD, '', mediaUrl);
+      if (!mapJson) return;
+      const newMapJson = (0, _topojson.feature)(mapJson, mapJson.objects);
+      const statisticNewData = this.formatWorldMapStatisticData(data, newMapJson, type);
+      this.draw(statisticNewData, newMapJson);
+    };
+    this.showTooltip = (event, data) => {
+      const curData = data.find(item => item.name.includes(event.target.parentNode.getAttribute('data-name')));
+      const title = curData.nameType === 'en' ? curData.name : curData.name_cn;
+      const value = Number(event.target.parentNode.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,
+        isCalculateByView
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const {
+        data_color,
+        legend_size,
+        legend_direction,
+        summary_method
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      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], mapJson);
+
+      // 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 => {
+        if (isCalculateByView) {
+          const value = Number(event.target.parentNode.getAttribute('data-value'));
+          if (value) {
+            const name = event.target.parentNode.getAttribute('data-name');
+            const newData = data.find(item => item.name.includes(name));
+            newData && this.props.toggleRecords([newData]);
+          }
+        }
+      }).on('mousemove', event => {
+        console.log(data);
+        const value = Number(event.target.parentNode.getAttribute('data-value'));
+        if (this.curElement) {
+          this.handleAcitveAndInActiveState('inActive', event, highlightedBorderColor);
+          this.curElement = null;
+        }
+        if (value) {
+          this.curElement = event.target.parentNode;
+          this.showTooltip(event, data);
+          this.handleAcitveAndInActiveState('active', event, highlightedBorderColor);
+        } else {
+          this.hiddenTooltip(event);
+        }
+      }).on('mouseleave', event => {
+        if (this.curElement) {
+          this.hiddenTooltip(event);
+          this.handleAcitveAndInActiveState('inActive', event, highlightedBorderColor);
+          this.curElement = null;
+        }
+      }).selectAll().data(mapJson.features).join('g').attr('data-name', d => d.properties.name).attr('stroke-width', 1).attr('stroke', '#bdbdbd').attr('stroke-opacity', 1).attr('opacity', 1).append('path').attr('d', d => {
+        return pathGenerator(d);
+      }).attr('data-name', d => d.properties.name).call(g => {
+        var _g$nodes$find;
+        const chinaGroup = (_g$nodes$find = g.nodes().find(item => item.getAttribute('data-name').includes('China'))) === null || _g$nodes$find === void 0 ? void 0 : _g$nodes$find.parentNode;
+        const chinaTaiwan = g.nodes().find(item => item.getAttribute('data-name').includes('Taiwan'));
+        if (chinaGroup) {
+          (chinaTaiwan === null || chinaTaiwan === void 0 ? void 0 : chinaTaiwan.parentNode) && chinaTaiwan.parentNode.remove();
+          chinaGroup.append(chinaTaiwan);
+        }
+      }).call(g => {
+        g.nodes().forEach(item => {
+          const curGroup = item.parentNode;
+          const curName = curGroup.getAttribute('data-name');
+          const curItemData = data.find(d => d.name.includes(curName));
+          if (curItemData) {
+            d3.select(curGroup).attr('fill', color(curItemData.value));
+            d3.select(curGroup).attr('data-value', curItemData.value);
+          } else {
+            d3.select(curGroup).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).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).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;