dtable-statistic 4.4.24 → 5.0.0-alpha.2

package/es/stat-view/world-map.js

@@ -1,431 +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 _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-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");
-const WIDTH = 798;
-const HEIGHT = 394;
-class WorldMap extends _baseChart.default {
-  constructor(props) {
-    super(props);
-    this.rerenderChart = () => {
-      if (!this.chart) return;
-      this.chart.destroy();
-      this.initStatisticContext(this.geoData);
-    };
-    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 nameType, name, name_cn;
-          if (this.reg.test(item.name)) {
-            nameType = 'en';
-            name = item.name;
-            name_cn = this.countryMap.get(name);
-          } else {
-            nameType = 'zh-cn';
-            name = this.countryMap.get(item.name);
-            name_cn = item.name;
-          }
-          const value = item.value;
-          if (name_cn && name) {
-            statisticNewData.push({
-              name_cn,
-              name,
-              nameType,
-              value: value || 0,
-              formatted_value: item.formatted_value
-            });
-            if (type === _constants.STAT_TYPE.WORLD_MAP_BUBBLE) {
-              sum += item.value;
-            }
-          }
-        }
-      });
-      if (type === _constants.STAT_TYPE.WORLD_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 summaryColumnData = _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) || {};
-        summaryColumnData = 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*nameType*name_cn', (name, value, color, nameType, name_cn) => {
-        return {
-          name: nameType === 'en' ? name : name_cn,
-          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, summaryColumnData, summary_method);
-          }
-        },
-        slidable: false
-      });
-      this.statisticView.interaction('element-active');
-      this.statisticView.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 summaryColumnData = _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) || {};
-        summaryColumnData = 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, summaryColumnData, summary_method);
-          }
-        },
-        slidable: false
-      });
-      this.statisticView.interaction('element-active');
-      this.statisticView.render();
-    };
-    this.updateStatisticData = data => {
-      // 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 type = statItem.type;
-      if (!type.includes('bubble')) {
-        this.renderCommonMap(data);
-      } else {
-        this.renderBubbleMap(data);
-      }
-      this.chart.render();
-    };
-    this.getSize = () => {
-      const containerWidth = this.container.clientWidth - 40; // 40: padding
-      const containerHeight = this.container.clientHeight - 40;
-      let h = containerHeight;
-      let w = h * (WIDTH / HEIGHT);
-      if (w > containerWidth) {
-        w = containerWidth;
-        h = w * (HEIGHT / WIDTH);
-      }
-      return {
-        containerWidth,
-        containerHeight,
-        w,
-        h
-      };
-    };
-    this.initStatisticContext = geolocation => {
-      this.countryMap = new Map();
-      geolocation.features.forEach(item => {
-        this.countryMap.set(item.properties.name, item.properties.name_cn);
-        this.countryMap.set(item.properties.name_cn, item.properties.name);
-      });
-      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 lang = window.dtable ? window.dtable.lang : 'zh-cn';
-        const countryName = lang === 'zh-cn' ? data.name_cn : data.name;
-        const clickData = this.calculateData.find(i => i.name === countryName);
-        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\">".concat(_reactIntlUniversal.default.get(_constants.TITLE_AMOUNT), " : {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.getGeoLocationData = () => {
-      const {
-        mediaUrl
-      } = window.dtable;
-      return fetch("".concat(mediaUrl, "dtable-statistic/geolocation/world.json")).catch(err => {});
-    };
-    this.state = {
-      isDataLoaded: false,
-      isCalculatingData: true
-    };
-    this.reg = /^([A-Za-z])/;
-    this.calculateData = null;
-    this.countryMap = null;
-  }
-  componentDidMount() {
-    const {
-      statItem,
-      chartCalculator
-    } = this.props;
-    this.props.queryMapJson({
-      map_level: _map.MAP_LEVEL.WORLD
-    }, mapJson => {
-      this.setState({
-        isDataLoaded: true
-      });
-      if (!mapJson) return;
-      this.geoData = mapJson;
-      this.initStatisticContext(mapJson);
-      if (this.container) {
-        chartCalculator.calculate(statItem).then(calculation => {
-          this.setState({
-            isCalculatingData: false
-          });
-          this.calculateData = calculation;
-          this.updateStatisticData(this.fixData(calculation));
-        });
-      }
-    });
-  }
-  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,
-      chartCalculator
-    } = this.props;
-    const {
-      isCalculatingData
-    } = this.state;
-    if (isCalculatingData !== preState.isCalculatingData) return;
-    if (this.shouldCalculateStatItem(preProps, this.props)) {
-      this.setState({
-        isCalculatingData: true
-      });
-      if (this.container) {
-        this.rerenderChart();
-        chartCalculator.calculate(statItem).then(calculation => {
-          this.setState({
-            isCalculatingData: false
-          });
-          this.calculateData = calculation;
-          this.updateStatisticData(this.fixData(calculation));
-        });
-      }
-    } else {
-      if (this.props.isPreview) {
-        this.rerenderChart();
-      }
-      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"
-    }));
-  }
-}
-WorldMap.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 = WorldMap;

package/es/utils/basic-chart-utils.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getChartDisplayLabels = getChartDisplayLabels;
-exports.getChartGroups = getChartGroups;
-function getChartDisplayLabels(containerWidth, minItemWidth, statistics) {
-  let labels = [];
-  let labelCount = Math.floor(containerWidth / minItemWidth);
-  labelCount = labelCount % 2 ? labelCount + 1 : labelCount;
-  let avg = Math.round(statistics.length / labelCount);
-  avg = avg > 2 ? avg : 2;
-  Array.isArray(statistics) && statistics.forEach((v, i) => {
-    if (i % avg === 0) {
-      labels.push(v.name);
-    }
-  });
-  return labels;
-}
-function getChartGroups(statistics) {
-  let chartGroups = [];
-  Array.isArray(statistics) && statistics.forEach(item => {
-    if (!chartGroups.find(g => g.name === item.name)) {
-      chartGroups.push(item);
-    }
-  });
-  return chartGroups;
-}

package/es/utils/cell-format.js

@@ -1,115 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getClientFormulaDisplayString = exports.getClientCellValueDisplayString = void 0;
-var _dayjs = _interopRequireDefault(require("dayjs"));
-var _dtableUtils = require("dtable-utils");
-var _object = require("./object");
-const getClientFormulaDisplayString = function (value, columnData) {
-  let {
-    collaborators = []
-  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  if (!columnData || !value && value !== 0) return '';
-  const {
-    result_type,
-    array_type
-  } = columnData;
-  if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY) {
-    if (_dtableUtils.COLLABORATOR_COLUMN_TYPES.includes(array_type)) {
-      if (!value) {
-        return null;
-      }
-      const collaboratorList = Array.isArray(value) ? value : [value];
-      return (0, _dtableUtils.getCollaboratorsName)(collaborators, collaboratorList);
-    }
-  }
-  return (0, _dtableUtils.getFormulaDisplayString)(value, columnData);
-};
-
-/**
- * @param {array} links [
- *  {
- *    row_id,        // id of linked row
- *    display_value, // cell value from linked row
- *  }
- * ]
- */
-exports.getClientFormulaDisplayString = getClientFormulaDisplayString;
-const getClientLinkDisplayString = function (links, columnData) {
-  let {
-    tables = [],
-    collaborators = []
-  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  if (!columnData || !Array.isArray(links) || links.length === 0) {
-    return null;
-  }
-  let formulaData = {
-    ...columnData
-  };
-  if (!(0, _object.hasOwnProperty)(columnData, 'result_type')) {
-    formulaData.result_type = _dtableUtils.FORMULA_RESULT_TYPE.ARRAY;
-  }
-  const displayValue = links.map(link => link.display_value);
-  return getClientFormulaDisplayString(displayValue, formulaData, {
-    tables,
-    collaborators
-  });
-};
-const getAutoTimeDisplayString = (row, key) => {
-  let value = row[key];
-  if (value === '' || !value || typeof value !== 'string') {
-    return null;
-  }
-  const date = (0, _dayjs.default)(value);
-  if (!date.isValid()) return value;
-  return date.format('YYYY-MM-DD HH:mm:ss');
-};
-const getFileDisplayString = (row, key) => {
-  let value = row[key];
-  if (!value || !Array.isArray(value) || value.length === 0) {
-    return null;
-  }
-  let fileNameList = [];
-  value.forEach(v => {
-    fileNameList.push(v.url.split('/').slice(-3).join('/').trim());
-  });
-  return decodeURIComponent(fileNameList.join(','));
-};
-const getClientCellValueDisplayString = function (row, type, key) {
-  let {
-    formulaRows = {},
-    data,
-    collaborators = [],
-    tables = []
-  } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-  if (_dtableUtils.FORMULA_COLUMN_TYPES_MAP[type]) {
-    const formulaRow = formulaRows[row._id] || {};
-    return getClientFormulaDisplayString(formulaRow[key], data, {
-      tables,
-      collaborators
-    });
-  }
-  if (type === _dtableUtils.CellType.LINK) {
-    const formulaRow = formulaRows[row._id] || {};
-    return getClientLinkDisplayString(formulaRow[key], data, {
-      tables,
-      collaborators
-    });
-  }
-  if (type === _dtableUtils.CellType.CTIME || type === _dtableUtils.CellType.MTIME) {
-    return getAutoTimeDisplayString(row, key);
-  }
-  if (type === _dtableUtils.CellType.FILE) {
-    return getFileDisplayString(row, key);
-  }
-  return (0, _dtableUtils.getCellValueDisplayString)(row, type, key, {
-    formulaRows,
-    data,
-    collaborators,
-    tables
-  });
-};
-exports.getClientCellValueDisplayString = getClientCellValueDisplayString;

package/es/utils/collaborator.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isValidCollaboratorEmail = exports.getKnownCreatorByEmail = exports.generateDefaultUser = void 0;
-const isValidCollaboratorEmail = email => {
-  const reg = /^[A-Za-z0-9]+([-_.][A-Za-z0-9]+)*@([A-Za-z0-9]+[-.])+[A-Za-z0-9]{2,6}$/;
-  return reg.test(email);
-};
-exports.isValidCollaboratorEmail = isValidCollaboratorEmail;
-const getKnownCreatorByEmail = (collaborators, email) => {
-  let {
-    mediaUrl
-  } = window.dtable || {};
-  let defaultAvatarUrl = "".concat(mediaUrl, "avatars/default.png");
-  if (email === 'anonymous' || email === 'Automation Rule') {
-    return {
-      name: email,
-      avatar_url: defaultAvatarUrl
-    };
-  }
-  let creator = collaborators.find(collaborator => collaborator.email === email);
-  if (creator) return creator;
-  let dtableCollaborators = window.app && window.app.collaboratorsCache ? window.app.collaboratorsCache : {};
-  if (!isValidCollaboratorEmail(email)) {
-    creator = {
-      name: email,
-      avatar_url: defaultAvatarUrl
-    };
-    dtableCollaborators[email] = creator;
-    return creator;
-  }
-  creator = dtableCollaborators[email];
-  if (creator) return creator;
-  return null;
-};
-exports.getKnownCreatorByEmail = getKnownCreatorByEmail;
-const generateDefaultUser = name => {
-  if (!window || window.dtable) return {};
-  let {
-    mediaUrl
-  } = window.dtable;
-  let defaultAvatarUrl = "".concat(mediaUrl, "avatars/default.png");
-  return {
-    name,
-    avatar_url: defaultAvatarUrl
-  };
-};
-exports.generateDefaultUser = generateDefaultUser;