sea-chart 1.1.53-alpha.3 → 1.1.54

package/dist/components/row-card/row-card.js

@@ -110,7 +110,7 @@ class RowCard extends Component {
   componentDidMount() {
     this.currentDisplayRowMaxIndex = Math.floor((0 + this.recordsList.offsetHeight) / CARD_RECORD_ITEM_HEIGHT);
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     let {
       rows,
       highlightRowIndex

package/dist/components/types-dialog/index.js

@@ -1,5 +1,6 @@
+import _DTableModalHeader from "dtable-ui-component/lib/DTableModalHeader";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Modal, ModalHeader, ModalBody, ModalFooter, UncontrolledTooltip, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, UncontrolledTooltip, Button } from 'reactstrap';
 import classnames from 'classnames';
 import { CHART_TYPE, CHART_TYPES, CHART_TYPE_SHOW, ZH_CN_SUPPORT_CHARTS } from '../../constants';
 import { eventStopPropagation } from '../../utils';
@@ -62,7 +63,7 @@ const TypesDialog = _ref => {
     toggle: onToggle,
     className: "sea-chart-types-dialog",
     zIndex: 1048
-  }, /*#__PURE__*/React.createElement(ModalHeader, {
+  }, /*#__PURE__*/React.createElement(_DTableModalHeader, {
     toggle: onToggle
   }, type ? intl.get('Edit_type') : intl.get('All_charts')), /*#__PURE__*/React.createElement(ModalBody, {
     className: "sea-chart-types-body"

package/dist/utils/index.js

@@ -14,7 +14,7 @@ export { getDateColumnFormat, isCheckboxColumn, getColumnByKey, isStatisticMapCo
 export { generatorKey } from './key-generator';
 export { translateCalendar } from './date-translate';
 export { isFunction } from './common-utils';
-export function formatXAxisLabel(label) {
+const splitLabelWithoutEnglish = label => {
   let newLabel = '';
   while (label.length > 0) {
     if (label.length > 12) {
@@ -26,6 +26,48 @@ export function formatXAxisLabel(label) {
     }
   }
   return newLabel;
+};
+export function formatXAxisLabel(label) {
+  let maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 12;
+  const regex = /\b[a-zA-Z0-9'.,-]+\b/g;
+  const words = label.match(regex);
+  if (!words || words.length === 0) {
+    return splitLabelWithoutEnglish(label);
+  }
+  let currentLine = '';
+  let result = [];
+  for (let i = 0; i < words.length; i++) {
+    const word = words[i];
+    const index = label.indexOf(word);
+    if (!currentLine) {
+      currentLine = label.slice(0, index);
+      label = label.slice(index + word.length);
+    } else {
+      currentLine = currentLine + label.slice(0, index);
+      label = label.slice(index + word.length);
+    }
+    if (currentLine.length > maxLength) {
+      while (currentLine.length > maxLength) {
+        result.push(currentLine.slice(0, maxLength));
+        currentLine = currentLine.slice(maxLength);
+      }
+    }
+    currentLine = currentLine + word;
+    if (currentLine.length > maxLength) {
+      while (currentLine.length > maxLength) {
+        result.push(currentLine.slice(0, maxLength) + '-');
+        currentLine = currentLine.slice(maxLength);
+      }
+    }
+    if (currentLine.length === maxLength || currentLine.length + 1 === maxLength) {
+      result.push(currentLine.slice(0, maxLength));
+      currentLine = '';
+    }
+    if (i === words.length - 1 && currentLine) {
+      result.push(currentLine);
+    }
+  }
+  return result.join('\n');
 }
 export function formatRowTotal(rowTotal) {
   const rowTotalNum = parseFloat(rowTotal);

package/dist/view/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { isEqual } from 'lodash-es';
 import shallowEqual from 'shallowequal';
 import context from '../context';
 import intl from '../intl';
@@ -169,7 +168,7 @@ class View extends React.PureComponent {
     this.unsubscribeReFreshChart();
     this.refreshTimer && clearInterval(this.refreshTimer);
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     const {
       chart: oldChart,
       hasUnSaved,
@@ -306,6 +305,7 @@ class View extends React.PureComponent {
     }, !hideTitle && /*#__PURE__*/React.createElement(Title, {
       chart: chart
     }), /*#__PURE__*/React.createElement("div", {
+      id: "sea-chart-cavans-container-".concat(chart.id),
       className: classnames('sea-chart-cavans-container', {
         'has-title': hasTitle
       })

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

@@ -1,6 +1,8 @@
 import _ButtonFormatter from "dtable-ui-component/lib/ButtonFormatter";
 import _RateFormatter from "dtable-ui-component/lib/RateFormatter";
 import _DurationFormatter from "dtable-ui-component/lib/DurationFormatter";
+import _EmailFormatter from "dtable-ui-component/lib/EmailFormatter";
+import _UrlFormatter from "dtable-ui-component/lib/UrlFormatter";
 import _AutoNumberFormatter from "dtable-ui-component/lib/AutoNumberFormatter";
 import _LastModifierFormatter from "dtable-ui-component/lib/LastModifierFormatter";
 import _CreatorFormatter from "dtable-ui-component/lib/CreatorFormatter";
@@ -24,8 +26,8 @@ import intl from '../../../../intl';
 import DtableFormulaFormatter from './formatters/formula-formatter';
 import LinkFormatter from './formatters/link-formatter';
 import FileFormatter from './formatters/FileFormatter/index';
-import UrlFormatter from './formatters/UrlFormatter/index';
-import EmailFormatter from './formatters/EmailFormatter/index';
+// import UrlFormatter from './formatters/UrlFormatter/index';
+// import EmailFormatter from './formatters/EmailFormatter/index';
 import { getTrimmedString, getValidUrl, openUrlLink } from './utils';
 class Formatter extends React.Component {
   constructor() {
@@ -247,20 +249,22 @@ class Formatter extends React.Component {
         case CellType.URL:
           {
             if (!cellValue) return this.renderEmptyFormatter();
-            return /*#__PURE__*/React.createElement(UrlFormatter, {
-              onClick: () => this.onUrlClick(cellValue),
+            return /*#__PURE__*/React.createElement("div", {
+              onClick: () => this.onUrlClick(cellValue)
+            }, /*#__PURE__*/React.createElement(_UrlFormatter, {
               value: cellValue,
               containerClassName: containerClassName
-            });
+            }), ";");
           }
         case CellType.EMAIL:
           {
             if (!cellValue) return this.renderEmptyFormatter();
-            return /*#__PURE__*/React.createElement(EmailFormatter, {
-              onClick: () => this.onEmailClick(cellValue),
+            return /*#__PURE__*/React.createElement("div", {
+              onClick: () => this.onEmailClick(cellValue)
+            }, /*#__PURE__*/React.createElement(_EmailFormatter, {
               value: cellValue,
               containerClassName: containerClassName
-            });
+            }), ";");
           }
         case CellType.DURATION:
           {

package/dist/view/wrapper/table-element/components/formatters/FileFormatter/index.css

@@ -1,4 +1,8 @@
-@import url('../css/cell-formatter.css');
+.dtable-ui.cell-formatter-container {
+  overflow: hidden;
+  line-height: 1;
+  width: 100%;
+}
 
 .dtable-ui.file-formatter {
   display: flex;
@@ -30,4 +34,4 @@
   background-color: #999;
   -webkit-transform: translate(-50%, 8px) scale(.8);
   transform: translate(-50%, 8px) scale(.8);
-}
+}

package/dist/view/wrapper/table-element/components/formatters/FileFormatter/index.js

@@ -1,11 +1,10 @@
+import _ImagePreviewerLightbox from "dtable-ui-component/lib/ImagePreviewerLightbox";
 import _FileItemFormatter from "dtable-ui-component/lib/FileItemFormatter";
 import React, { Fragment } from 'react';
 import classnames from 'classnames';
 import { imageCheck } from '../../../../../../utils/common-utils';
-import ImagePreviewerLightbox from './image-previewer-lightbox';
+import context from '../../../../../../context';
 import './index.css';
-// import FileItemFormatter from '../FileItemFormatter';
-
 export default class FileFormatter extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -72,6 +71,9 @@ export default class FileFormatter extends React.PureComponent {
         largeImageIndex: -1
       });
     };
+    this.server = context.getSetting('server');
+    this.workspaceID = context.getSetting('workspaceID');
+    this.dtableUuid = context.getSetting('dtableUuid');
     this.state = {
       isShowLargeImage: false,
       largeImageIndex: -1,
@@ -81,7 +83,7 @@ export default class FileFormatter extends React.PureComponent {
   componentDidMount() {
     this.getFileItemImageUrlList(this.props.value);
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (JSON.stringify(this.props.value) !== JSON.stringify(nextProps.value)) {
       this.getFileItemImageUrlList(nextProps.value);
     }
@@ -116,7 +118,10 @@ export default class FileFormatter extends React.PureComponent {
       }, /*#__PURE__*/React.createElement(_FileItemFormatter, {
         file: item
       })));
-    }), this.state.isShowLargeImage && /*#__PURE__*/React.createElement(ImagePreviewerLightbox, {
+    }), this.state.isShowLargeImage && /*#__PURE__*/React.createElement(_ImagePreviewerLightbox, {
+      server: this.server,
+      workspaceID: this.workspaceID,
+      dtableUuid: this.dtableUuid,
       readOnly: true,
       imageItems: this.state.fileImageUrlList,
       imageIndex: this.state.largeImageIndex,

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

@@ -8,11 +8,50 @@ import VerticalScrollbar from './vertical-scrollbar';
 class Records extends Component {
   constructor(props) {
     super(props);
+    this.resizeColumnWidthToFitContainer = () => {
+      const {
+        chart
+      } = this.props;
+      const displayColumns = this.calcuteDisplayColumns(this.props.shownColumns);
+      const container = document.querySelector("#sea-chart-cavans-container-".concat(chart.id));
+      let resultTotalwidth = displayColumns.reduce((cur, nextItem) => {
+        return cur + nextItem.width;
+      }, 0);
+      // padding 15px for vertical scrollbar
+      const containerWidth = container.clientWidth - 15;
+      if (!container || resultTotalwidth >= containerWidth) {
+        this.setState({
+          displayColumns,
+          headerDisplayColumns: displayColumns
+        });
+        return;
+      }
+      // enlarge the column width to fit the container
+      let i = 0;
+      while (resultTotalwidth < containerWidth) {
+        displayColumns[i % displayColumns.length].width += 1;
+        i++;
+        resultTotalwidth = displayColumns.reduce((cur, nextItem) => {
+          return cur + nextItem.width;
+        }, 0);
+      }
+      this.setState({
+        displayColumns,
+        headerDisplayColumns: displayColumns
+      });
+    };
     this.calcuteDisplayColumns = shownColumns => {
-      return shownColumns.filter(column => !DATASET_NOT_SUPPORT_COLUMN_TYPES.includes(column.type)).map(column => {
+      const {
+        chart
+      } = this.props;
+      const columnsWidthDataStr = localStorage.getItem("statistic_".concat(chart.id, "_columns_width"));
+      const columnsWidthData = columnsWidthDataStr ? JSON.parse(columnsWidthDataStr) : [];
+      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 === CellType.LINK) {
           const {
             data
@@ -29,7 +68,7 @@ class Records extends Component {
           };
           return {
             ...column,
-            width: getCellRecordWidth(column),
+            width: previousWidth || getCellRecordWidth(column),
             data: {
               ...data,
               display_column
@@ -38,9 +77,18 @@ class Records extends Component {
         }
         return {
           ...column,
-          width: getCellRecordWidth(column)
+          width: previousWidth || getCellRecordWidth(column)
+        };
+      });
+      const newColumnsWidthData = columns.map(column => {
+        return {
+          key: column.key,
+          width: column.width
         };
       });
+      // clear old data if there are new columns and not matched with the old data
+      localStorage.setItem("statistic_".concat(chart.id, "_columns_width"), JSON.stringify(newColumnsWidthData));
+      return columns;
     };
     this.resizeColumnWidth = (column, width) => {
       const {
@@ -51,10 +99,20 @@ class Records extends Component {
         headerDisplayColumns: newDisplayColumns
       });
     };
-    this.resizeColumnWidthEnd = (column, width) => {
+    this.resizeColumnWidthEnd = () => {
       this.setState({
         displayColumns: this.state.headerDisplayColumns
       });
+      const columnsWidthData = this.state.headerDisplayColumns.map(column => {
+        return {
+          key: column.key,
+          width: column.width
+        };
+      });
+      const {
+        chart
+      } = this.props;
+      localStorage.setItem("statistic_".concat(chart.id, "_columns_width"), JSON.stringify(columnsWidthData));
     };
     this.setVerticalScrollbarTop = scrollTop => {
       if (this.verticalScrollbar) {
@@ -68,12 +126,19 @@ class Records extends Component {
       scrollLeft: 0
     };
     this.resultContainerRef = null;
-    const _displayColumns = this.calcuteDisplayColumns(props.shownColumns);
     this.state = {
-      displayColumns: _displayColumns,
-      headerDisplayColumns: _displayColumns
+      displayColumns: [],
+      headerDisplayColumns: []
     };
   }
+  componentDidUpdate(prevProps) {
+    if (prevProps.shownColumns !== this.props.shownColumns) {
+      this.resizeColumnWidthToFitContainer();
+    }
+  }
+  componentDidMount() {
+    this.resizeColumnWidthToFitContainer();
+  }
   render() {
     const {
       records,

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

@@ -1,12 +1,19 @@
 .vertical-scrollbar {
   width: 15px;
-  overflow: auto;
   position: absolute;
   top: 33px;
   right: 5px;
   height: calc(100% - 33px - 6px);
 }
 
+.table-element-container .vertical-scrollbar {
+  overflow: hidden;
+}
+
+.table-element-container:hover .vertical-scrollbar {
+  overflow: auto;
+}
+
 .vertical-scrollbar-inner {
   width: 1px;
 }

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

@@ -12,6 +12,13 @@
 .table-element-result-container {
   height: 100%;
   width: 100%;
+}
+
+.table-element-container .table-element-result-container {
+  overflow: hidden;
+}
+
+.table-element-container:hover .table-element-result-container  {
   overflow: auto;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "1.1.53-alpha.3",
+  "version": "1.1.54",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",
@@ -27,7 +27,7 @@
   },
   "peerDependencies": {
     "@antv/scale": "0.3.14",
-    "dtable-ui-component": "^5.1.10",
+    "dtable-ui-component": "^5.2.13",
     "dtable-utils": "~5.0.*",
     "prop-types": "15.8.1",
     "react": "^17.0.0",
@@ -165,4 +165,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/dist/view/wrapper/table-element/components/formatters/EmailFormatter/index.css

@@ -1,6 +0,0 @@
-@import url('../css/cell-formatter.css');
-
-.dtable-ui.email-formatter {
-  text-decoration: underline;
-  cursor: pointer;
-}

package/dist/view/wrapper/table-element/components/formatters/EmailFormatter/index.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import './index.css';
-class EmailFormatter extends React.Component {
-  render() {
-    const {
-      containerClassName,
-      value,
-      onClick
-    } = this.props;
-    let classname = classnames('dtable-ui cell-formatter-container email-formatter', containerClassName);
-    const props = {
-      title: value
-    };
-    if (onClick) {
-      props.onClick = onClick;
-    }
-    return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-      className: classname
-    }), value);
-  }
-}
-export default EmailFormatter;

package/dist/view/wrapper/table-element/components/formatters/FileFormatter/image-previewer-lightbox.js

@@ -1,14 +0,0 @@
-import _ImagePreviewerLightbox from "dtable-ui-component/lib/ImagePreviewerLightbox";
-import React from 'react';
-import context from '../../../../../../context';
-function ImagePreviewerLightbox(props) {
-  const server = context.getSetting('server');
-  const workspaceID = context.getSetting('workspaceID');
-  const dtableUuid = context.getSetting('dtableUuid');
-  return /*#__PURE__*/React.createElement(_ImagePreviewerLightbox, Object.assign({}, props, {
-    server: server,
-    workspaceID: workspaceID,
-    dtableUuid: dtableUuid
-  }));
-}
-export default ImagePreviewerLightbox;

package/dist/view/wrapper/table-element/components/formatters/UrlFormatter/index.css

@@ -1,6 +0,0 @@
-@import url('../css/cell-formatter.css');
-
-.dtable-ui.url-formatter {
-  text-decoration: underline;
-  cursor: pointer;
-}

package/dist/view/wrapper/table-element/components/formatters/UrlFormatter/index.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import './index.css';
-class UrlFormatter extends React.Component {
-  render() {
-    const {
-      containerClassName,
-      value,
-      onClick
-    } = this.props;
-    let classname = classnames('dtable-ui cell-formatter-container url-formatter', containerClassName);
-    const props = {
-      title: value
-    };
-    if (onClick) {
-      props.onClick = onClick;
-    }
-    return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-      className: classname
-    }), value);
-  }
-}
-export default UrlFormatter;

package/dist/view/wrapper/table-element/components/formatters/css/cell-formatter.css

@@ -1,5 +0,0 @@
-.dtable-ui.cell-formatter-container {
-  overflow: hidden;
-  line-height: 1;
-  width: 100%;
-}