dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

@@ -0,0 +1,431 @@
+"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/tabs/tab.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _components = require("../components");
+var _ModalPortal = _interopRequireDefault(require("dtable-ui-component/lib/ModalPortal"));
 var _utils = require("../utils");
 var _constants = require("../constants");
 var _statisticTabsModule = _interopRequireDefault(require("./statistic-tabs.module.css"));
@@ -135,7 +135,7 @@ class DashBoardTab extends _react.Component {
       className: "".concat(_statisticTabsModule.default['btn-view-dropdown'])
     }, /*#__PURE__*/_react.default.createElement("i", {
       className: "".concat(_statisticTabsModule.default['icon'], " dtable-font dtable-icon-drop-down")
-    }), isShowViewDropdown && /*#__PURE__*/_react.default.createElement(_components.ModalPortal, null, /*#__PURE__*/_react.default.createElement("div", {
+    }), isShowViewDropdown && /*#__PURE__*/_react.default.createElement(_ModalPortal.default, null, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(theme === _constants.THEME_NAME_MAP.DARK ? 'statistic-tabs-dropdown-dark' : 'statistic-tabs-dropdown-light', " statistic-dropdown-menu dropdown-menu large show"),
       style: {
         ...dropdownMenuPosition,

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

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

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

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