dtable-statistic 4.4.24-alpha.9 → 5.0.0

package/es/stat-view/map.js

@@ -0,0 +1,448 @@
+"use strict";
+
+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 _index = _interopRequireDefault(require("@antv/data-set/lib/index"));
+var _dtableUtils = require("dtable-utils");
+var _baseChart = _interopRequireDefault(require("./base-chart"));
+var _customG = require("../custom-g2");
+var _constants = require("../constants");
+var _map = require("../constants/map");
+var _commonUtils = require("../utils/common-utils");
+var _map2 = require("../utils/map");
+class Map extends _baseChart.default {
+  constructor(props) {
+    super(props);
+    this.hasMapChanged = (preStatItem, statItem) => {
+      const {
+        map_level: preMapLevel,
+        map_location: prevMapLocation
+      } = preStatItem;
+      const {
+        map_level,
+        map_location
+      } = statItem;
+      return map_level !== preMapLevel || !(0, _commonUtils.shallowEqual)(map_location, prevMapLocation);
+    };
+    this.reCalculateChart = statItem => {
+      this.rerenderChart();
+      this.props.chartCalculator.calculate(statItem).then(statData => {
+        this.calculateData = statData;
+        this.setState({
+          isCalculatingData: false
+        });
+        this.updateStatisticData(this.fixData(statData));
+      });
+    };
+    this.rerenderChart = () => {
+      if (!this.chart) return;
+      this.chart.destroy();
+      this.initStatisticContext(this.geoData);
+    };
+    this.getMapLevel = statItem => {
+      const {
+        map_level
+      } = statItem;
+      return map_level || _map.MAP_LEVEL.COUNTRY;
+    };
+    this.fixData = statisticData => {
+      if (!statisticData) return [];
+      let statisticNewData = [];
+      let sum = 0;
+      const {
+        statItem
+      } = this.props;
+      const type = statItem.type;
+      statisticData.forEach((item, index) => {
+        if (item && item.name) {
+          let matchFeature = this.mapData.features.find(feature => feature.properties.name.indexOf(item.name) > -1);
+          if (matchFeature) {
+            statisticNewData.push({
+              name: matchFeature.properties.name,
+              value: item.value || 0,
+              formatted_value: item.formatted_value
+            });
+            if (type === 'map_bubble') {
+              sum += item.value;
+            }
+          }
+        }
+      });
+      if (type === 'map_bubble') {
+        statisticNewData.sum = sum;
+      }
+      return statisticNewData;
+    };
+    this.renderCommonMap = data => {
+      const {
+        getTableById,
+        statItem
+      } = this.props;
+      const userDataView = this.dataSet.getView('statisticViewModel').source(data).transform({
+        geoDataView: this.dataSet.getView('mapDataModel'),
+        field: 'name',
+        type: 'geo.region',
+        as: ['longitude', 'latitude']
+      });
+      const {
+        table_id,
+        data_color,
+        summary_type,
+        summary_method,
+        summary_column
+      } = this.props.statItem;
+      const currentColorOption = _constants.COLOR_OPTIONS.filter(item => item.name === data_color)[0] || _constants.COLOR_OPTIONS[0];
+      const {
+        exampleColors,
+        highlightedBorderColor
+      } = currentColorOption;
+      let columnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      if (summary_type === _constants.SUMMARY_TYPE.ADVANCED) {
+        const table = getTableById(table_id);
+        const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column) || {};
+        columnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      }
+      this.statisticView = this.chart.createView();
+      this.statisticView.data(userDataView.rows);
+      this.statisticView.polygon().position('longitude*latitude').color('value', "".concat(exampleColors[0], "-").concat(exampleColors[4], "-").concat(exampleColors[8])).style({
+        lineWidth: 1,
+        stroke: '#bdbdbd',
+        strokeOpacity: 0.5
+      }).state({
+        active: {
+          style: {
+            lineWidth: 1,
+            stroke: highlightedBorderColor
+          }
+        }
+      }).tooltip('name*formatted_value*color', (name, value, color) => {
+        return {
+          name,
+          color,
+          value
+        };
+      });
+      const themeColors = this.getThemeColors();
+      const legendDirection = statItem.legend_direction || 'vertical';
+      const size = statItem.legend_size || 1;
+      this.chart.legend({
+        layout: legendDirection,
+        position: legendDirection === 'vertical' ? 'left-bottom' : 'bottom-left',
+        rail: {
+          type: 'color',
+          defaultLength: 100 * size
+        },
+        label: {
+          spacing: 2,
+          style: {
+            fill: themeColors.textColor
+          },
+          align: legendDirection === 'vertical' ? 'right' : 'bottom',
+          formatter: value => {
+            return this.getNumberDisplayString(value, columnData, summary_method);
+          }
+        },
+        slidable: false
+      });
+      this.statisticView.interaction('element-active');
+      this.statisticView.render();
+    };
+    this.updateStatisticData = data => {
+      this.rerenderChart();
+
+      // re-render statistic data view;
+      if (this.statisticView) {
+        this.statisticView.destroy();
+      }
+      if (data.length === 0) {
+        this.chart.legend(false);
+        this.chart.render();
+        return;
+      }
+      const {
+        statItem
+      } = this.props;
+      const mapType = statItem.type;
+      if (!mapType.includes('bubble')) {
+        this.renderCommonMap(data);
+      } else {
+        this.renderBubbleMap(data);
+      }
+      this.chart.render();
+    };
+    this.renderBubbleMap = data => {
+      const {
+        getTableById,
+        statItem,
+        isPreview
+      } = this.props;
+      const userDv = this.dataSet.createView().source(data).transform({
+        geoDataView: this.dataSet.getView('mapDataModel'),
+        field: 'name',
+        type: 'geo.centroid',
+        as: ['longitude', 'latitude']
+      });
+      const {
+        table_id,
+        summary_type,
+        summary_method,
+        summary_column
+      } = this.props.statItem;
+      let columnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      if (summary_type === _constants.SUMMARY_TYPE.ADVANCED) {
+        const table = getTableById(table_id);
+        const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column) || {};
+        columnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      }
+      this.statisticView = this.chart.createView();
+      this.statisticView.data(userDv.rows);
+      this.chart.theme({
+        defaultColor: statItem.bubble_color || '#2a67d1'
+      });
+      this.statisticView.point().position('longitude*latitude').size('value', value => {
+        const percent = value / data.sum;
+        let size = percent * 100;
+        if (isPreview && size > 60) {
+          size = 60;
+        }
+        return size;
+      }).shape('circle').color(statItem.bubble_color || '#2a67d1').tooltip('name*formatted_value*color', (name, value, color) => {
+        return {
+          name,
+          color,
+          value
+        };
+      }).style({
+        fillOpacity: 0.6,
+        stroke: statItem.bubble_color || '#2a67d1'
+      }).state({
+        active: {
+          style: {
+            lineWidth: 1,
+            stroke: statItem.bubble_color || '#2a67d1',
+            fillOpacity: 0.9
+          }
+        }
+      });
+      const themeColors = this.getThemeColors();
+      const legendDirection = statItem.legend_direction || 'vertical';
+      const size = statItem.legend_size || 1;
+      this.chart.legend({
+        layout: legendDirection,
+        position: legendDirection === 'vertical' ? 'left-bottom' : 'bottom-left',
+        rail: {
+          type: 'size',
+          defaultLength: 100 * size
+        },
+        label: {
+          style: {
+            fill: themeColors.textColor
+          },
+          align: legendDirection === 'vertical' ? 'right' : 'bottom',
+          formatter: value => {
+            return this.getNumberDisplayString(value, columnData, summary_method);
+          }
+        },
+        slidable: false
+      });
+      this.statisticView.interaction('element-active');
+      this.statisticView.render();
+    };
+    this.getSize = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        map_level,
+        map_location
+      } = statItem;
+      const containerWidth = this.container.clientWidth - 40; // 40: padding
+      const containerHeight = this.container.clientHeight - 40;
+      const {
+        scale_w,
+        scale_h
+      } = (0, _map2.getRegionScaleOffsets)(map_level, map_location);
+      let h = containerHeight;
+      let w = h * (scale_w / scale_h);
+      if (w > containerWidth) {
+        w = containerWidth;
+        h = w * (scale_h / scale_w);
+      }
+      return {
+        containerWidth,
+        containerHeight,
+        w,
+        h
+      };
+    };
+    this.initStatisticContext = geolocation => {
+      this.mapData = geolocation;
+      if (!this.container) return;
+
+      // create chart
+      const {
+        containerWidth,
+        containerHeight,
+        w: mapWidth
+      } = this.getSize();
+      const horizontalPadding = (containerWidth - mapWidth) / 4;
+      const leftPadding = horizontalPadding < 20 ? 20 : horizontalPadding;
+      this.chart = new _customG.Chart({
+        container: this.container,
+        width: containerWidth,
+        height: containerHeight,
+        padding: [0, horizontalPadding, 0, leftPadding]
+      });
+      this.chart.on('element:click', e => {
+        const {
+          statItem
+        } = this.props;
+        const data = e.data.data;
+        const clickData = this.calculateData.find(i => i.name === data.name);
+        if (clickData) {
+          this.props.toggleStatisticRecordsDialog(clickData, statItem);
+        }
+      });
+      this.chart.tooltip({
+        showTitle: false,
+        showMarkers: false,
+        shared: true,
+        containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
+        itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{name}<div><div class="tooltip-item">数量: {value}<div></div>',
+        domStyles: {
+          'g2-tooltip': this.getDefaultChartStyleByKey('g2-tooltip'),
+          'tooltip-item': this.getDefaultChartStyleByKey('tooltip-item')
+        }
+      });
+      this.chart.scale({
+        longitude: {
+          sync: true
+        },
+        latitude: {
+          sync: true
+        }
+      });
+      this.chart.axis(false);
+      this.dataSet = new _index.default();
+
+      // transform map data
+      const mapData = this.dataSet.createView('mapDataModel').source(geolocation, {
+        type: 'GeoJSON'
+      });
+      const mapView = this.chart.createView();
+
+      // draw background map
+      mapView.data(mapData.rows);
+      mapView.tooltip(false);
+      mapView.polygon().position('longitude*latitude').style({
+        fill: '#e2e2e2',
+        stroke: '#bdbdbd',
+        lineWidth: 1
+      });
+      this.dataSet.createView('statisticViewModel');
+      mapView.render();
+    };
+    this.state = {
+      isDataLoaded: false,
+      isCalculatingData: true
+    };
+    this.calculateData = null;
+  }
+  componentDidMount() {
+    const {
+      statItem,
+      chartCalculator
+    } = this.props;
+    const {
+      map_location
+    } = statItem;
+    const mapLevel = this.getMapLevel(statItem);
+    this.props.queryMapJson({
+      map_level: mapLevel,
+      map_location
+    }, mapJson => {
+      this.setState({
+        isDataLoaded: true
+      }, () => {
+        if (!mapJson) return;
+        this.geoData = mapJson;
+        this.initStatisticContext(mapJson);
+        if (this.container) {
+          chartCalculator.calculate(statItem).then(data => {
+            this.calculateData = data;
+            this.updateStatisticData(this.fixData(data));
+            this.setState({
+              isCalculatingData: false
+            });
+          });
+        }
+      });
+    });
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    if (this.canUpdate(this.props, nextProps) && nextState.isDataLoaded === this.state.isDataLoaded) {
+      return true;
+    }
+    if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+      return true;
+    }
+    return false;
+  }
+  componentDidUpdate(preProps, preState) {
+    if (!this.chart || !this.dataSet) return;
+    const {
+      statItem
+    } = this.props;
+    const {
+      isCalculatingData
+    } = this.state;
+    if (isCalculatingData !== preState.isCalculatingData) return;
+    if (this.shouldCalculateStatItem(preProps, this.props)) {
+      this.setState({
+        isCalculatingData: true
+      });
+      if (this.hasMapChanged(preProps.statItem, statItem)) {
+        this.props.queryMapJson({
+          map_level: this.getMapLevel(statItem),
+          map_location: statItem.map_location
+        }, mapJson => {
+          if (!mapJson) return;
+          this.geoData = mapJson;
+          this.reCalculateChart(statItem);
+        });
+      } else {
+        this.container && this.reCalculateChart(statItem);
+      }
+    } else {
+      this.updateStatisticData(this.fixData(this.calculateData));
+    }
+  }
+  componentWillUnmount() {
+    this.container = null;
+    this.setState = () => {};
+  }
+  render() {
+    const {
+      isDataLoaded,
+      isCalculatingData
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (!isDataLoaded || isCalculatingData) && this.renderLoading(), /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.container = ref,
+      className: "statistic-chart-container map d-flex justify-content-around align-items-center w-100 h-100"
+    }));
+  }
+}
+Map.propTypes = {
+  isPreview: _propTypes.default.bool,
+  statItem: _propTypes.default.object,
+  chartCalculator: _propTypes.default.object,
+  getTableById: _propTypes.default.func,
+  queryMapJson: _propTypes.default.func.isRequired,
+  toggleStatisticRecordsDialog: _propTypes.default.func
+};
+var _default = exports.default = Map;