dtable-statistic 4.4.24 → 5.0.0-alpha.0

package/es/stat-view/map.js

@@ -1,448 +0,0 @@
-"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;