sea-chart 1.1.64 → 2.0.0

package/dist/view/wrapper/trend.js

@@ -1,13 +1,21 @@
-import React, { Component } from 'react';
-import classNames from 'classnames';
-import { BaseUtils } from '../../utils';
-import intl from '../../intl';
-import { BASIC_NUMBER_CARD_CALCULATION_METHOD, EMPTY_NAME, CHART_SUMMARY_TYPE, CHART_THEME_COLOR, TREND_TYPES } from '../../constants';
-class Trend extends Component {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _utils = require("../../utils");
+var _intl = _interopRequireDefault(require("../../intl"));
+var _constants = require("../../constants");
+class Trend extends _react.Component {
   constructor() {
     super(...arguments);
     this.formatData = data => {
-      if (!data && data !== 0) return intl.get(EMPTY_NAME);
+      if (!data && data !== 0) return _intl.default.get(_constants.EMPTY_NAME);
       const {
         chart,
         summaryColumn
@@ -15,8 +23,8 @@ class Trend extends Component {
       const {
         summary_method
       } = chart.config;
-      if (summary_method !== BASIC_NUMBER_CARD_CALCULATION_METHOD) {
-        const formattedContent = BaseUtils.getSummaryValueDisplayString(summaryColumn, data, summary_method);
+      if (summary_method !== _constants.BASIC_NUMBER_CARD_CALCULATION_METHOD) {
+        const formattedContent = _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, data, summary_method);
         return formattedContent;
       }
       let string = data + '';
@@ -55,20 +63,20 @@ class Trend extends Component {
         date_granularity
       } = config;
       let conjunctions = '';
-      if (date_granularity === CHART_SUMMARY_TYPE.YEAR) {
-        conjunctions = intl.get('The_year_before_last');
-      } else if (date_granularity === CHART_SUMMARY_TYPE.QUARTER) {
-        conjunctions = intl.get('The_quarter_before_last');
-      } else if (date_granularity === CHART_SUMMARY_TYPE.MONTH) {
-        conjunctions = intl.get('The_month_before_last');
-      } else if (date_granularity === CHART_SUMMARY_TYPE.WEEK) {
-        conjunctions = intl.get('The_week_before_last');
+      if (date_granularity === _constants.CHART_SUMMARY_TYPE.YEAR) {
+        conjunctions = _intl.default.get('The_year_before_last');
+      } else if (date_granularity === _constants.CHART_SUMMARY_TYPE.QUARTER) {
+        conjunctions = _intl.default.get('The_quarter_before_last');
+      } else if (date_granularity === _constants.CHART_SUMMARY_TYPE.MONTH) {
+        conjunctions = _intl.default.get('The_month_before_last');
+      } else if (date_granularity === _constants.CHART_SUMMARY_TYPE.WEEK) {
+        conjunctions = _intl.default.get('The_week_before_last');
       } else if (date_granularity === 'days_7') {
-        conjunctions = intl.get('Previous_7_days');
+        conjunctions = _intl.default.get('Previous_7_days');
       } else if (date_granularity === 'days_30') {
-        conjunctions = intl.get('Previous_30_days');
+        conjunctions = _intl.default.get('Previous_30_days');
       } else {
-        conjunctions = intl.get('The_day_before_yesterday');
+        conjunctions = _intl.default.get('The_day_before_yesterday');
       }
       const {
         result,
@@ -76,25 +84,25 @@ class Trend extends Component {
         previous
       } = data || {};
       let color, icon;
-      if (type === TREND_TYPES.UP) {
+      if (type === _constants.TREND_TYPES.UP) {
         color = '#34aa95';
         icon = 'dtable-icon-up1';
       }
-      if (type === TREND_TYPES.DOWN) {
+      if (type === _constants.TREND_TYPES.DOWN) {
         color = '#fa5757';
         icon = 'dtable-icon-down1';
       }
-      if (type === TREND_TYPES.EQUAL) {
+      if (type === _constants.TREND_TYPES.EQUAL) {
         color = '#666666';
         icon = 'dtable-icon-narrow';
       }
       if (labelFontSize <= 12) {
-        return /*#__PURE__*/React.createElement("span", {
+        return /*#__PURE__*/_react.default.createElement("span", {
           style: {
             fontSize: "".concat(labelFontSize, "px"),
             width: '100%'
           }
-        }, /*#__PURE__*/React.createElement("i", {
+        }, /*#__PURE__*/_react.default.createElement("i", {
           style: {
             color: "".concat(color),
             display: 'inline-block',
@@ -109,13 +117,13 @@ class Trend extends Component {
             fontSize: '10px'
           },
           className: "dtable-font ".concat(icon)
-        }), /*#__PURE__*/React.createElement("span", {
+        }), /*#__PURE__*/_react.default.createElement("span", {
           style: {
             color: "".concat(color)
           }
         }, result));
       }
-      const resultContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      const resultContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
         style: {
           display: 'flex',
           flexWrap: 'wrap',
@@ -123,12 +131,12 @@ class Trend extends Component {
           fontSize: "".concat(labelFontSize, "px"),
           width: '100%'
         }
-      }, /*#__PURE__*/React.createElement("span", {
+      }, /*#__PURE__*/_react.default.createElement("span", {
         style: {
           whiteSpace: 'nowrap',
           marginRight: '16px'
         }
-      }, /*#__PURE__*/React.createElement("i", {
+      }, /*#__PURE__*/_react.default.createElement("i", {
         style: {
           flexShrink: '0',
           flexBasis: 'auto',
@@ -145,12 +153,12 @@ class Trend extends Component {
           fontSize: '11px'
         },
         className: "dtable-font ".concat(icon)
-      }), /*#__PURE__*/React.createElement("span", {
+      }), /*#__PURE__*/_react.default.createElement("span", {
         style: {
           color: color,
           marginRight: '0px'
         }
-      }, result)), /*#__PURE__*/React.createElement("span", {
+      }, result)), /*#__PURE__*/_react.default.createElement("span", {
         style: {
           color: labelFontColor,
           fontWeight: labelFontWeight,
@@ -166,7 +174,7 @@ class Trend extends Component {
       chart,
       result
     } = this.props;
-    const theme = CHART_THEME_COLOR[globalTheme];
+    const theme = _constants.CHART_THEME_COLOR[globalTheme];
     const {
       config
     } = chart;
@@ -182,18 +190,18 @@ class Trend extends Component {
       label_font_weight
     } = config;
     const latest = result && result.latest;
-    const content = summary_method === CHART_SUMMARY_TYPE.Distinct_values ? latest : this.formatData(latest);
+    const content = summary_method === _constants.CHART_SUMMARY_TYPE.Distinct_values ? latest : this.formatData(latest);
     const labelContent = this.createLabelContent(result, label_text_align, label_font_size, label_font_color, label_font_weight);
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames('sea-chart-container', 'plugin-number-card-trend')
-    }, /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('sea-chart-container', 'plugin-number-card-trend')
+    }, /*#__PURE__*/_react.default.createElement("div", {
       style: {
         color: theme.cardColor,
         width: '100%',
         height: '100%',
         position: 'relative'
       }
-    }, /*#__PURE__*/React.createElement("p", {
+    }, /*#__PURE__*/_react.default.createElement("p", {
       style: {
         position: 'absolute',
         width: '100%',
@@ -205,7 +213,7 @@ class Trend extends Component {
         fontWeight: "".concat(num_font_weight),
         color: "".concat(num_font_color)
       }
-    }, content), /*#__PURE__*/React.createElement("p", {
+    }, content), /*#__PURE__*/_react.default.createElement("p", {
       className: "label-content",
       style: {
         position: 'absolute',
@@ -216,4 +224,4 @@ class Trend extends Component {
     }, labelContent)));
   }
 }
-export default Trend;
+var _default = exports.default = Trend;

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

@@ -1,15 +1,23 @@
-import _Loading from "dtable-ui-component/lib/Loading";
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import DataSet from '@antv/data-set/lib/index';
-import { getNumberDisplayString, getTableById, getTableColumnByKey } from 'dtable-utils';
-import classNames from 'classnames';
-import { Chart } from '../../utils/custom-g2';
-import intl from '../../intl';
-import fetchMapJson from '../../services/map-json';
-import { getMapCanvasStyle } from '../../utils';
-import { COLOR_OPTIONS } from '../../constants/color-rules';
-import { CHART_SUMMARY_TYPE, MAP_LEVEL, CHART_TYPE, DEFAULT_NUMBER_FORMAT_OBJECT, THEME_NAME_MAP, CHART_THEME_COLOR } from '../../constants';
-import context from '../../context';
+"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 _Loading2 = _interopRequireDefault(require("dtable-ui-component/lib/Loading"));
+var _react = _interopRequireWildcard(require("react"));
+var _index = _interopRequireDefault(require("@antv/data-set/lib/index"));
+var _dtableUtils = require("dtable-utils");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _customG = require("../../utils/custom-g2");
+var _intl = _interopRequireDefault(require("../../intl"));
+var _mapJson = _interopRequireDefault(require("../../services/map-json"));
+var _utils = require("../../utils");
+var _colorRules = require("../../constants/color-rules");
+var _constants = require("../../constants");
+var _context = _interopRequireDefault(require("../../context"));
 const reg = /^([A-Za-z])/;
 const fixData = (statisticData, countryMap, chartType) => {
   if (!statisticData) return [];
@@ -42,13 +50,13 @@ const fixData = (statisticData, countryMap, chartType) => {
             formatted_value: item.formatted_value + ''
           });
         }
-        if (chartType === CHART_TYPE.WORLD_MAP_BUBBLE) {
+        if (chartType === _constants.CHART_TYPE.WORLD_MAP_BUBBLE) {
           sum += item.value;
         }
       }
     }
   });
-  if (chartType === CHART_TYPE.WORLD_MAP_BUBBLE) {
+  if (chartType === _constants.CHART_TYPE.WORLD_MAP_BUBBLE) {
     statisticNewData.sum = sum;
   }
   return statisticNewData;
@@ -71,13 +79,13 @@ function createChart(container) {
   const {
     width,
     height
-  } = getMapCanvasStyle(container, 2.1);
+  } = (0, _utils.getMapCanvasStyle)(container, 2.1);
   let config = {
     container: container,
     width,
     height
   };
-  return new Chart(config);
+  return new _customG.Chart(config);
 }
 function initChart(currentChart, props) {
   const {
@@ -87,7 +95,7 @@ function initChart(currentChart, props) {
   } = props;
   if (isCalculateByView) {
     currentChart.on('element:click', e => {
-      const lang = intl.lang;
+      const lang = _intl.default.lang;
       const data = e.data.data;
       const countryName = lang === 'zh-cn' ? data.name_cn : data.name;
       const clickData = result.find(i => i.name === countryName);
@@ -118,19 +126,19 @@ function initChart(currentChart, props) {
   currentChart.axis(false);
 }
 function mapGetNumberDisplayString(value, columnData, summaryMethod) {
-  if (summaryMethod === CHART_SUMMARY_TYPE.Distinct_values) {
+  if (summaryMethod === _constants.CHART_SUMMARY_TYPE.Distinct_values) {
     return value;
   }
-  return getNumberDisplayString(value, columnData);
+  return (0, _dtableUtils.getNumberDisplayString)(value, columnData);
 }
 function getThemeColors() {
   let themeColors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   let theme = arguments.length > 1 ? arguments[1] : undefined;
   // dark->custom->light
-  if (theme === THEME_NAME_MAP.DARK) {
-    themeColors = CHART_THEME_COLOR.dark;
+  if (theme === _constants.THEME_NAME_MAP.DARK) {
+    themeColors = _constants.CHART_THEME_COLOR.dark;
   }
-  return themeColors || CHART_THEME_COLOR[THEME_NAME_MAP.LIGHT];
+  return themeColors || _constants.CHART_THEME_COLOR[_constants.THEME_NAME_MAP.LIGHT];
 }
 function WorldMap(props) {
   let {
@@ -160,12 +168,12 @@ function WorldMap(props) {
     summary_method,
     table_id
   } = chart.config;
-  const chartRef = useRef(null);
-  const chartContainerRef = useRef(null);
-  const dataSetRef = useRef(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [mapData, setMapData] = useState(null);
-  const renderCommonChart = useCallback(function (statisticNewData) {
+  const chartRef = (0, _react.useRef)(null);
+  const chartContainerRef = (0, _react.useRef)(null);
+  const dataSetRef = (0, _react.useRef)(null);
+  const [isLoading, setIsLoading] = (0, _react.useState)(true);
+  const [mapData, setMapData] = (0, _react.useState)(null);
+  const renderCommonChart = (0, _react.useCallback)(function (statisticNewData) {
     const currentDataSet = dataSetRef.current;
     const currentChart = chartRef.current;
     const userDataView = currentDataSet.getView('statisticViewModel').source(statisticNewData).transform({
@@ -174,16 +182,16 @@ function WorldMap(props) {
       type: 'geo.region',
       as: ['longitude', 'latitude']
     });
-    const currentColorOption = COLOR_OPTIONS.filter(item => item.name === data_color)[0] || COLOR_OPTIONS[0];
+    const currentColorOption = _colorRules.COLOR_OPTIONS.filter(item => item.name === data_color)[0] || _colorRules.COLOR_OPTIONS[0];
     const {
       exampleColors,
       highlightedBorderColor
     } = currentColorOption;
-    let columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
-    if (summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
-      const table = getTableById(table_id);
-      const summaryColumn = getTableColumnByKey(table, summary_column_key) || {};
-      columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+    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;
     }
     const statisticView = currentChart.createView();
     statisticView.data(userDataView.rows);
@@ -232,7 +240,7 @@ function WorldMap(props) {
     statisticView.render();
     return statisticView;
   }, [data_color, legend_direction, legend_size, summary_column_key, summary_method, summary_type, table_id]);
-  const renderBubbleChart = useCallback(function (statisticNewData) {
+  const renderBubbleChart = (0, _react.useCallback)(function (statisticNewData) {
     const currentDataSet = dataSetRef.current;
     const currentChart = chartRef.current;
     const userDv = currentDataSet.createView().source(statisticNewData).transform({
@@ -241,11 +249,11 @@ function WorldMap(props) {
       type: 'geo.centroid',
       as: ['longitude', 'latitude']
     });
-    let columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
-    if (summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
-      const table = getTableById(table_id);
-      const summaryColumn = getTableColumnByKey(table, summary_column_key) || {};
-      columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+    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;
     }
     const statisticView = currentChart.createView();
     statisticView.data(userDv.rows);
@@ -300,13 +308,13 @@ function WorldMap(props) {
     statisticView.render();
     return statisticView;
   }, [bubble_color, legend_direction, legend_size, summary_column_key, summary_method, summary_type, table_id]);
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     const handleResize = () => {
       const container = chartContainerRef.current;
       const {
         width,
         height
-      } = getMapCanvasStyle(container, 2.1);
+      } = (0, _utils.getMapCanvasStyle)(container, 2.1);
       chartRef.current.changeSize(width, height);
     };
     window.addEventListener('resize', handleResize);
@@ -317,11 +325,11 @@ function WorldMap(props) {
 
   // used to fetch mapJson data
   // only triggered once
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     (async () => {
       try {
-        const mediaUrl = context.getSetting('mediaUrl');
-        const mapJson = await fetchMapJson(MAP_LEVEL.WORLD, '', mediaUrl);
+        const mediaUrl = _context.default.getSetting('mediaUrl');
+        const mapJson = await (0, _mapJson.default)(_constants.MAP_LEVEL.WORLD, '', mediaUrl);
         setMapData(mapJson);
         setIsLoading(false);
       } catch (error) {
@@ -333,7 +341,7 @@ function WorldMap(props) {
 
   // used to init map background
   // if no statistics data, then render empty map
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     if (!chartRef.current) {
       chartRef.current = createChart(chartContainerRef.current);
     }
@@ -341,7 +349,7 @@ function WorldMap(props) {
     if (!mapData) return;
     const currentChart = chartRef.current;
     initChart(currentChart, props);
-    const dataSet = new DataSet();
+    const dataSet = new _index.default();
     dataSetRef.current = dataSet;
     // transform map data
     const data = dataSet.createView('mapDataModel').source(mapData, {
@@ -364,7 +372,7 @@ function WorldMap(props) {
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [mapData]);
-  useEffect(() => {
+  (0, _react.useEffect)(() => {
     const currentChart = chartRef.current;
     // need mapData and statisticData to render
     if (!Array.isArray(statisticData) || !mapData) return;
@@ -390,10 +398,10 @@ function WorldMap(props) {
       currentView && currentView.destroy();
     };
   }, [statisticData, mapData, type, renderCommonChart, renderBubbleChart]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading && /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isLoading && /*#__PURE__*/_react.default.createElement("div", {
     className: 'statistic-chart-loading-container'
-  }, /*#__PURE__*/React.createElement(_Loading, null)), /*#__PURE__*/React.createElement("div", {
-    className: classNames('sea-chart-container '),
+  }, /*#__PURE__*/_react.default.createElement(_Loading2.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('sea-chart-container '),
     style: {
       display: 'flex',
       justifyContent: 'center',
@@ -402,4 +410,4 @@ function WorldMap(props) {
     ref: chartContainerRef
   }));
 }
-export default WorldMap;
+var _default = exports.default = WorldMap;