sea-chart 2.0.43 → 2.0.44

package/dist/view/wrapper/table-element/components/records.js

@@ -1,19 +1,11 @@
-"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 _dtableUtils = require("dtable-utils");
-var _rowUtils = require("../../../../utils/row-utils");
-var _recordsHeader = _interopRequireDefault(require("./records-header"));
-var _recordsBody = _interopRequireDefault(require("./records-body"));
-var _datasetUtils = require("./dataset-utils");
-var _verticalScrollbar = _interopRequireDefault(require("./vertical-scrollbar"));
-class Records extends _react.Component {
+import React, { Component } from 'react';
+import { CellType } from 'dtable-utils';
+import { resizeColumn } from '../../../../utils/row-utils';
+import RecordsHeader from './records-header';
+import RecordsBody from './records-body';
+import { DATASET_NOT_SUPPORT_COLUMN_TYPES, getCellRecordWidth } from './dataset-utils';
+import VerticalScrollbar from './vertical-scrollbar';
+class Records extends Component {
   constructor(props) {
     super(props);
     this.resizeColumnWidthToFitContainer = () => {
@@ -54,13 +46,13 @@ class Records extends _react.Component {
       } = this.props;
       const columnsWidthDataStr = localStorage.getItem(`statistic_${chart.id}_columns_width`);
       const columnsWidthData = columnsWidthDataStr ? JSON.parse(columnsWidthDataStr) : [];
-      const columns = shownColumns.filter(column => !_datasetUtils.DATASET_NOT_SUPPORT_COLUMN_TYPES.includes(column.type)).map(column => {
+      const columns = shownColumns.filter(column => !DATASET_NOT_SUPPORT_COLUMN_TYPES.includes(column.type)).map(column => {
         const {
           type
         } = column;
         const columnWidthData = columnsWidthData.find(item => item.key === column.key);
         const previousWidth = typeof (columnWidthData === null || columnWidthData === void 0 ? void 0 : columnWidthData.width) === 'number' && columnWidthData.width;
-        if (type === _dtableUtils.CellType.LINK) {
+        if (type === CellType.LINK) {
           const {
             data
           } = column;
@@ -71,12 +63,12 @@ class Records extends _react.Component {
           } = data;
           const display_column = {
             key: display_column_key || '0000',
-            type: array_type || _dtableUtils.CellType.TEXT,
+            type: array_type || CellType.TEXT,
             data: array_data || null
           };
           return {
             ...column,
-            width: previousWidth || (0, _datasetUtils.getCellRecordWidth)(column),
+            width: previousWidth || getCellRecordWidth(column),
             data: {
               ...data,
               display_column
@@ -85,7 +77,7 @@ class Records extends _react.Component {
         }
         return {
           ...column,
-          width: previousWidth || (0, _datasetUtils.getCellRecordWidth)(column)
+          width: previousWidth || getCellRecordWidth(column)
         };
       });
       const newColumnsWidthData = columns.map(column => {
@@ -102,7 +94,7 @@ class Records extends _react.Component {
       const {
         displayColumns
       } = this.state;
-      const newDisplayColumns = (0, _rowUtils.resizeColumn)(column.key, Math.max(width, 50), displayColumns);
+      const newDisplayColumns = resizeColumn(column.key, Math.max(width, 50), displayColumns);
       this.setState({
         headerDisplayColumns: newDisplayColumns
       });
@@ -134,13 +126,11 @@ class Records extends _react.Component {
       this.resultRef.scrollLeft += deltaX;
     };
     this.state = {
-      scrollLeft: 0
-    };
-    this.resultContainerRef = null;
-    this.state = {
+      scrollLeft: 0,
       displayColumns: [],
       headerDisplayColumns: []
     };
+    this.resultContainerRef = null;
   }
   componentDidUpdate(prevProps) {
     if (prevProps.shownColumns !== this.props.shownColumns) {
@@ -162,25 +152,25 @@ class Records extends _react.Component {
     const totalWidth = displayColumns.reduce((cur, nextItem) => {
       return cur + nextItem.width;
     }, 0);
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: "table-element-container",
       ref: ref => this.resultContainerRef = ref
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       id: "sea-chart-table-element-result-container",
       className: "table-element-result-container",
       ref: ref => this.resultRef = ref
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       id: "sea-chart-table-element-result-content",
       className: "table-element-result-content",
       style: {
         width: totalWidth
       }
-    }, /*#__PURE__*/_react.default.createElement(_recordsHeader.default, {
+    }, /*#__PURE__*/React.createElement(RecordsHeader, {
       columns: headerDisplayColumns,
       resizeColumnWidth: this.resizeColumnWidth,
       resizeColumnWidthEnd: this.resizeColumnWidthEnd,
       globalTheme: this.props.globalTheme
-    }), /*#__PURE__*/_react.default.createElement(_recordsBody.default, {
+    }), /*#__PURE__*/React.createElement(RecordsBody, {
       ref: ref => this.recordsBody = ref,
       records: records,
       columns: displayColumns,
@@ -189,11 +179,11 @@ class Records extends _react.Component {
       setVerticalScrollbarTop: this.setVerticalScrollbarTop,
       globalTheme: this.props.globalTheme,
       setHorizontalScroll: this.setHorizontalScroll
-    }))), /*#__PURE__*/_react.default.createElement(_verticalScrollbar.default, {
+    }))), /*#__PURE__*/React.createElement(VerticalScrollbar, {
       contentHeight: 33 * records.length,
       ref: ref => this.verticalScrollbar = ref,
       onScrollbarScroll: this.onVerticalScrollbarScroll
     })));
   }
 }
-var _default = exports.default = Records;
+export default Records;

package/dist/view/wrapper/table-element/components/resize-column-handle/resize-column-handle.js

@@ -1,13 +1,6 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-require("./index.css");
-class ResizeColumnHandle extends _react.Component {
+import React, { Component } from 'react';
+import './index.css';
+class ResizeColumnHandle extends Component {
   constructor() {
     super(...arguments);
     this.cleanUp = () => {
@@ -45,7 +38,7 @@ class ResizeColumnHandle extends _react.Component {
     this.cleanUp();
   }
   render() {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: "sea-chart-record-HeaderCell__draggable",
       onClick: e => e.stopPropagation(),
       onDrag: this.props.onDrag,
@@ -54,4 +47,4 @@ class ResizeColumnHandle extends _react.Component {
     });
   }
 }
-var _default = exports.default = ResizeColumnHandle;
+export default ResizeColumnHandle;

package/dist/view/wrapper/table-element/components/utils.js

@@ -1,24 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.openUrlLink = exports.isValidUrl = exports.getValidUrl = exports.getTrimmedString = void 0;
-const getTrimmedString = value => {
+export const getTrimmedString = value => {
   return typeof value === 'string' ? value.trim() : '';
 };
-exports.getTrimmedString = getTrimmedString;
-const isValidUrl = url => {
+export const isValidUrl = url => {
   const reg = /^(([-a-zA-Z0-9+.]+):\/\/)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/;
   return reg.test(url);
 };
-exports.isValidUrl = isValidUrl;
-const getValidUrl = value => {
+export const getValidUrl = value => {
   const url = getTrimmedString(value);
   return isValidUrl(url) ? url : `http://${url}`;
 };
-exports.getValidUrl = getValidUrl;
-const openUrlLink = url => {
+export const openUrlLink = url => {
   let a = document.createElement('a');
   document.body.appendChild(a);
   a.href = url;
@@ -26,5 +17,4 @@ const openUrlLink = url => {
   a.rel = 'noopener noreferrer';
   a.click();
   document.body.removeChild(a);
-};
-exports.openUrlLink = openUrlLink;
+};

package/dist/view/wrapper/table-element/components/value-display-utils.js

@@ -1,20 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getCellDisplayValue = void 0;
-var _dtableUtils = require("dtable-utils");
-const getCellDisplayValue = (record, column, collaborators) => {
+import { getCellValueDisplayString } from 'dtable-utils';
+export const getCellDisplayValue = (record, column, collaborators) => {
   const {
     type,
     data,
     key
   } = column;
-  return (0, _dtableUtils.getCellValueDisplayString)(record, type, key, {
+  return getCellValueDisplayString(record, type, key, {
     data,
     collaborators,
     geolocationHyphen: ' '
   });
-};
-exports.getCellDisplayValue = getCellDisplayValue;
+};

package/dist/view/wrapper/table-element/components/vertical-scrollbar/index.js

@@ -1,13 +1,6 @@
-"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"));
-require("./index.css");
-class VerticalScrollbar extends _react.default.Component {
+import React from 'react';
+import './index.css';
+class VerticalScrollbar extends React.Component {
   constructor() {
     super(...arguments);
     this.isSelfScroll = true;
@@ -28,11 +21,11 @@ class VerticalScrollbar extends _react.default.Component {
     const {
       contentHeight
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: "vertical-scrollbar",
       ref: ref => this.container = ref,
       onScroll: this.onScroll
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "vertical-scrollbar-inner",
       style: {
         height: contentHeight
@@ -40,4 +33,4 @@ class VerticalScrollbar extends _react.default.Component {
     }));
   }
 }
-var _default = exports.default = VerticalScrollbar;
+export default VerticalScrollbar;

package/dist/view/wrapper/table-element/index.js

@@ -1,17 +1,10 @@
-"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 _dtableUtils = require("dtable-utils");
-var _lodashEs = require("lodash-es");
-var _context = _interopRequireDefault(require("../../../context"));
-var _records = _interopRequireDefault(require("./components/records"));
-require("./css/index.css");
-class TableElement extends _react.default.Component {
+import React from 'react';
+import { getTableById } from 'dtable-utils';
+import { isEqual } from 'lodash-es';
+import context from '../../../context';
+import Records from './components/records';
+import './css/index.css';
+export default class TableElement extends React.Component {
   constructor(props) {
     super(props);
     this.getInitState = (config, tables) => {
@@ -19,7 +12,7 @@ class TableElement extends _react.default.Component {
         table_id,
         shown_column_keys
       } = config;
-      const selectedTable = (0, _dtableUtils.getTableById)(tables, table_id);
+      const selectedTable = getTableById(tables, table_id);
       // if shown_column_keys was not set, use all columns
       if (!shown_column_keys) shown_column_keys = selectedTable.columns.map(column => column.key);
       const shownColumns = selectedTable.columns.filter(column => shown_column_keys.includes(column.key));
@@ -29,7 +22,7 @@ class TableElement extends _react.default.Component {
       };
     };
     this.queryUsers = emails => {
-      const currentEmails = _context.default.getCollaboratorsFromCache().map(user => user.email);
+      const currentEmails = context.getCollaboratorsFromCache().map(user => user.email);
       let queryEmails = emails.filter(email => {
         return !currentEmails.includes(email);
       });
@@ -40,18 +33,18 @@ class TableElement extends _react.default.Component {
       }
       this.isQuerying = true;
       setTimeout(() => {
-        _context.default.queryUsers(queryEmails, this.updateRelatedUser);
+        context.queryUsers(queryEmails, this.updateRelatedUser);
       }, 500);
     };
     this.updateRelatedUser = emailUserMap => {
       this.isQuerying = false;
-      const currentEmails = _context.default.getCollaboratorsFromCache().map(user => user.email);
+      const currentEmails = context.getCollaboratorsFromCache().map(user => user.email);
       for (let email in emailUserMap) {
         if (!currentEmails.includes(email)) {
-          _context.default.updateCollaboratorsCache(email, emailUserMap[email]);
+          context.updateCollaboratorsCache(email, emailUserMap[email]);
         }
       }
-      const newUsers = _context.default.getCollaboratorsFromCache();
+      const newUsers = context.getCollaboratorsFromCache();
       this.relatedUserEmailMap = {};
       newUsers.forEach(u => {
         this.relatedUserEmailMap[u.email] = true;
@@ -68,7 +61,7 @@ class TableElement extends _react.default.Component {
       config: _config
     } = chart;
     const initState = this.getInitState(_config, _tables);
-    initState.relatedUserList = _context.default.getCollaboratorsFromCache();
+    initState.relatedUserList = context.getCollaboratorsFromCache();
     this.state = initState;
     this.relatedUserEmailMap = {};
     initState.relatedUserList.forEach(u => {
@@ -91,7 +84,7 @@ class TableElement extends _react.default.Component {
     const {
       config: oldConfig
     } = oldChart;
-    if (!(0, _lodashEs.isEqual)(config, oldConfig)) {
+    if (!isEqual(config, oldConfig)) {
       const state = this.getInitState(config, nextProps.tables, result);
       this.setState(state);
     }
@@ -108,10 +101,10 @@ class TableElement extends _react.default.Component {
       selectedTable
     } = this.state;
     const records = Array.isArray(result) ? result : [];
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: "table-element-result",
       ref: ref => this.wrapperRef = ref
-    }, /*#__PURE__*/_react.default.createElement(_records.default, {
+    }, /*#__PURE__*/React.createElement(Records, {
       chart: chart,
       selectedTable: selectedTable,
       shownColumns: shownColumns,
@@ -121,5 +114,4 @@ class TableElement extends _react.default.Component {
       globalTheme: globalTheme
     }));
   }
-}
-exports.default = TableElement;
+}

package/dist/view/wrapper/treemap.js

@@ -1,29 +1,15 @@
-"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 _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _lodashEs = require("lodash-es");
-var d3 = _interopRequireWildcard(require("d3"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _constants = require("../../constants");
-var _utils = require("../../utils");
-var _intl = _interopRequireDefault(require("../../intl"));
-var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
-var _chartComponent = _interopRequireDefault(require("./chart-component"));
-class Treemap extends _chartComponent.default {
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as d3 from 'd3';
+import { isEmpty } from 'dtable-utils';
+import { EMPTY_NAME } from '../../constants';
+import { BaseUtils, isFunction } from '../../utils';
+import intl from '../../intl';
+import ToolTip from '../../components/tooltip';
+import ChartComponent from './chart-component';
+class Treemap extends ChartComponent {
   constructor(props) {
     super(props);
-    this.handleResize = () => {
-      this.destroyChart();
-      this.createChart();
-      this.drawChart();
-    };
     this.createChart = () => {
       const {
         chart
@@ -40,10 +26,10 @@ class Treemap extends _chartComponent.default {
       let {
         result: data
       } = this.props;
-      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      data = BaseUtils.formatEmptyName(data, '', intl.get('Empty'));
       if (!Array.isArray(data)) return;
       this.draw(data);
-      (0, _utils.isFunction)(customRender) && customRender(this.chart);
+      isFunction(customRender) && customRender(this.chart);
     };
     this.showTooltip = (event, _ref) => {
       let {
@@ -64,8 +50,8 @@ class Treemap extends _chartComponent.default {
         title: data.name,
         items: [{
           color: '',
-          name: _intl.default.get('Amount'),
-          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data.value), y_axis_summary_method)
+          name: intl.get('Amount'),
+          value: BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data.value), y_axis_summary_method)
         }]
       };
       this.setState({
@@ -101,10 +87,10 @@ class Treemap extends _chartComponent.default {
         tables,
         chartColorTheme
       } = this.props;
-      const colorsTheme = _utils.BaseUtils.getCurrentTheme(chartColorTheme);
+      const colorsTheme = BaseUtils.getCurrentTheme(chartColorTheme);
       const {
         data: newData
-      } = _utils.BaseUtils.formatPieChartData(data, chart, tables, colorsTheme);
+      } = BaseUtils.formatPieChartData(data, chart, tables, colorsTheme);
       if (!Array.isArray(newData)) return;
       const {
         width: chartWidth,
@@ -143,6 +129,9 @@ class Treemap extends _chartComponent.default {
         this.moveTooltip(event);
       }).on('mouseleave', event => {
         this.hiddenTooltip(event);
+      }).call(g => {
+        this.animateFadeIn(g);
+        this.animateFadeIn(contentWrapper.selectAll('text'), this.transitionDuration, this.transitionDuration * 0.5);
       });
     };
     this.getFullData = data => {
@@ -150,9 +139,9 @@ class Treemap extends _chartComponent.default {
         name: 'root',
         children: data.map(item => {
           let name = item.name;
-          item.name = name || name === 0 ? name : _intl.default.get(_constants.EMPTY_NAME);
+          item.name = isEmpty(name) ? intl.get(EMPTY_NAME) : name;
           if (name === '_Others') {
-            item.name = _intl.default.get('Others');
+            item.name = intl.get('Others');
           }
           return item;
         })
@@ -168,12 +157,11 @@ class Treemap extends _chartComponent.default {
   componentDidMount() {
     this.createChart();
     this.drawChart();
-    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
-    window.addEventListener('resize', this.debouncedHandleResize);
+    super.componentDidMount();
   }
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
-    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+    if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
       this.destroyChart();
       this.createChart();
       this.drawChart();
@@ -181,23 +169,17 @@ class Treemap extends _chartComponent.default {
   }
   componentWillUnmount() {
     this.destroyChart();
-    window.removeEventListener('resize', this.debouncedHandleResize);
+    super.componentWillUnmount();
   }
   render() {
-    const {
-      chart
-    } = this.props;
     const {
       tooltipData,
       toolTipPosition
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       ref: ref => this.container = ref,
-      className: (0, _classnames.default)('sea-chart-container', {
-        'show-x-axis-label': this.isShowXAxisLabel(chart),
-        'show-y-axis-label': this.isShowYAxisLabel(chart)
-      })
-    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      className: "sea-chart-container"
+    }, /*#__PURE__*/React.createElement(ToolTip, {
       tooltipData: tooltipData,
       toolTipPosition: toolTipPosition,
       chart: this.chart
@@ -205,16 +187,16 @@ class Treemap extends _chartComponent.default {
   }
 }
 Treemap.propTypes = {
-  canvasStyle: _propTypes.default.object,
-  chart: _propTypes.default.object,
-  groupbyColumn: _propTypes.default.object,
-  columnGroupbyColumn: _propTypes.default.object,
-  summaryColumn: _propTypes.default.object,
-  result: _propTypes.default.array,
-  tables: _propTypes.default.array,
-  globalTheme: _propTypes.default.string,
-  chartColorTheme: _propTypes.default.string,
-  toggleRecords: _propTypes.default.func,
-  customRender: _propTypes.default.func
+  canvasStyle: PropTypes.object,
+  chart: PropTypes.object,
+  groupbyColumn: PropTypes.object,
+  columnGroupbyColumn: PropTypes.object,
+  summaryColumn: PropTypes.object,
+  result: PropTypes.array,
+  tables: PropTypes.array,
+  globalTheme: PropTypes.string,
+  chartColorTheme: PropTypes.string,
+  toggleRecords: PropTypes.func,
+  customRender: PropTypes.func
 };
-var _default = exports.default = Treemap;
+export default Treemap;