sea-chart 2.0.40 → 2.0.43

package/dist/view/wrapper/table/one-dimension-table-with-numeric-columns.js

@@ -77,7 +77,7 @@ class OneDimensionTableWithNumericColumns extends _react.PureComponent {
           className: (0, _classnames.default)('pivot-table-header', {
             'selected-pivot-cell-top': isSelectedHeaderBottom
           }),
-          key: "pivot-column-".concat(index)
+          key: `pivot-column-${index}`
         }, /*#__PURE__*/_react.default.createElement("div", null, column.name));
       }), display_total && /*#__PURE__*/_react.default.createElement("th", {
         className: (0, _classnames.default)('pivot-table-header', {
@@ -186,7 +186,7 @@ class OneDimensionTableWithNumericColumns extends _react.PureComponent {
               'selected-pivot-cell-top': isSelectedCellTop,
               'selected-pivot-cell-left': isSelectedCellLeft
             }),
-            key: "table-cell-".concat(cellIdx)
+            key: `table-cell-${cellIdx}`
             // onClick={() => this.toggleRecords({ rows, name: rowItem?.name, total: total[key] }, { rowIdx, cellIdx })}
             ,
             title: isValidDisplayValue ? displayValue : ''
@@ -227,7 +227,7 @@ class OneDimensionTableWithNumericColumns extends _react.PureComponent {
             'selected-pivot-cell': isSelectRowTotalCell,
             'selected-pivot-cell-left': isSelectRowTotalCellLeft
           }),
-          key: "total-cell-".concat(index)
+          key: `total-cell-${index}`
           // onClick={() => this.toggleRecords({ rows: pivotColumnCell, total: pivot_columns_total[c.key] }, { rowIdx: pivot_rows.length, cellIdx: index })}
           ,
           title: totalDisplayValue

package/dist/view/wrapper/table/pivot-table-display-name.js

@@ -401,7 +401,7 @@ class PivotTableDisplayName extends _react.default.Component {
     } = this.props;
     const AlwaysDisplayLightThemeTypes = [_dtableUtils.CellType.CREATOR, _dtableUtils.CellType.LAST_MODIFIER, _dtableUtils.CellType.SINGLE_SELECT, _dtableUtils.CellType.MULTIPLE_SELECT, _dtableUtils.CellType.COLLABORATOR];
     const isAlwaysLightTheme = AlwaysDisplayLightThemeTypes.includes(column.type);
-    let displayName = value ? this.getDisplayName(value, column) : /*#__PURE__*/_react.default.createElement("div", null, "(".concat(_intl.default.get('Empty'), ")"));
+    let displayName = value ? this.getDisplayName(value, column) : /*#__PURE__*/_react.default.createElement("div", null, `(${_intl.default.get('Empty')})`);
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
       style: {
         color: isAlwaysLightTheme ? _constants.CHART_THEME_COLOR['light'].pivotTextColor : _constants.CHART_THEME_COLOR[globalTheme].pivotTextColor

package/dist/view/wrapper/table/two-dimension-table.js

@@ -83,7 +83,7 @@ class TwoDimensionTable extends _react.PureComponent {
           className: (0, _classnames.default)('pivot-table-header', {
             'selected-pivot-cell-top': isSelectedHeaderBottom
           }),
-          key: "pivot-column-".concat(index)
+          key: `pivot-column-${index}`
         }, /*#__PURE__*/_react.default.createElement(_pivotTableDisplayName.default, {
           value: original_key,
           column: columnGroupbyColumn || {},
@@ -98,14 +98,14 @@ class TwoDimensionTable extends _react.PureComponent {
         className: "pivot-table-header"
       }), Array.isArray(pivot_columns) && pivot_columns.map((item, index) => {
         return /*#__PURE__*/_react.default.createElement("th", {
-          key: "pivot-column-".concat(index),
+          key: `pivot-column-${index}`,
           className: "pivot-table-header summary-columns-header"
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: "pivot-table-header-summary-columns-container"
         }, summary_columns.map((column, idx) => {
           return /*#__PURE__*/_react.default.createElement("div", {
             className: (0, _classnames.default)('pivot-table-header'),
-            key: "pivot-summary-column-".concat(idx)
+            key: `pivot-summary-column-${idx}`
           }, /*#__PURE__*/_react.default.createElement(_pivotTableDisplayName.default, {
             value: column.name,
             column: column || {},
@@ -142,7 +142,7 @@ class TwoDimensionTable extends _react.PureComponent {
       if (summaryColumns && (summaryColumns === null || summaryColumns === void 0 ? void 0 : summaryColumns.length) !== 0) {
         return summaryColumns.map(item => {
           return /*#__PURE__*/_react.default.createElement("div", {
-            key: "table-cell-".concat(item === null || item === void 0 ? void 0 : item.key),
+            key: `table-cell-${item === null || item === void 0 ? void 0 : item.key}`,
             className: (0, _classnames.default)('pivot-cell', {
               'pivot-empty-cell': true
             })
@@ -150,7 +150,7 @@ class TwoDimensionTable extends _react.PureComponent {
         });
       }
       return /*#__PURE__*/_react.default.createElement("div", {
-        key: "table-cell-".concat(cellIdx),
+        key: `table-cell-${cellIdx}`,
         className: (0, _classnames.default)('pivot-cell', {
           'pivot-empty-cell': true
         })
@@ -252,7 +252,7 @@ class TwoDimensionTable extends _react.PureComponent {
                 'selected-pivot-cell-top': isSelectedCellTop,
                 'selected-pivot-cell-left': isSelectedCellLeft
               }),
-              key: "table-cell-".concat(cellIdx),
+              key: `table-cell-${cellIdx}`,
               onClick: () => this.toggleRecords({
                 ...c,
                 name: rowItem === null || rowItem === void 0 ? void 0 : rowItem.name
@@ -269,7 +269,7 @@ class TwoDimensionTable extends _react.PureComponent {
           }
           return /*#__PURE__*/_react.default.createElement("td", {
             className: (0, _classnames.default)('pivot-cell'),
-            key: "table-cell-".concat(cellIdx)
+            key: `table-cell-${cellIdx}`
           }, /*#__PURE__*/_react.default.createElement("div", {
             className: (0, _classnames.default)('pivot-cells-container')
           }, total && total.map && total.map((summaryCell, idx) => {
@@ -279,7 +279,7 @@ class TwoDimensionTable extends _react.PureComponent {
             const isValidDisplayValue = _utils.BaseUtils.isValidValue(displayValue, display_empty);
             rowTotal = this.getRowTotal(rowTotal, summaryCell[1]);
             return /*#__PURE__*/_react.default.createElement("div", {
-              key: "table-cell-".concat(cellIdx, "-").concat(idx),
+              key: `table-cell-${cellIdx}-${idx}`,
               className: (0, _classnames.default)('pivot-cell', {
                 'pivot-empty-cell': !isValidDisplayValue,
                 'selected-pivot-cell': isSelectedCell,
@@ -329,7 +329,7 @@ class TwoDimensionTable extends _react.PureComponent {
             'selected-pivot-cell': isSelectRowTotalCell,
             'selected-pivot-cell-left': isSelectRowTotalCellLeft
           }),
-          key: "total-cell-".concat(index),
+          key: `total-cell-${index}`,
           onClick: () => this.toggleRecords({
             rows: pivotColumnCell,
             total: pivot_columns_total[c.key]

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

@@ -26,6 +26,7 @@ var _GeolocationFormatter2 = _interopRequireDefault(require("dtable-ui-component
 var _ImageFormatter2 = _interopRequireDefault(require("dtable-ui-component/lib/ImageFormatter"));
 var _LongTextFormatter2 = _interopRequireDefault(require("dtable-ui-component/lib/LongTextFormatter"));
 var _CollaboratorFormatter2 = _interopRequireDefault(require("dtable-ui-component/lib/CollaboratorFormatter"));
+var _PhoneNumberLink2 = _interopRequireDefault(require("dtable-ui-component/lib/PhoneNumberLink"));
 var _TextFormatter2 = _interopRequireDefault(require("dtable-ui-component/lib/TextFormatter"));
 var _toaster2 = _interopRequireDefault(require("dtable-ui-component/lib/toaster"));
 var _react = _interopRequireWildcard(require("react"));
@@ -71,7 +72,7 @@ class Formatter extends _react.default.Component {
       }
     };
     this.onEmailClick = email => {
-      window.location.href = "mailto:".concat((0, _utils.getTrimmedString)(email));
+      window.location.href = `mailto:${(0, _utils.getTrimmedString)(email)}`;
     };
     this.renderFormatter = () => {
       let {
@@ -85,11 +86,22 @@ class Formatter extends _react.default.Component {
       const {
         type: columnType
       } = column || {};
-      const containerClassName = "table-element-".concat(columnType, "-formatter");
+      const containerClassName = `table-element-${columnType}-formatter`;
       switch (columnType) {
         case _dtableUtils.CellType.TEXT:
           {
             if (!cellValue) return this.renderEmptyFormatter();
+            if ((0, _dtableUtils.checkIsDisplayAsPhoneNumberColumn)(column) && !!(0, _utils.getTrimmedString)(cellValue)) {
+              return /*#__PURE__*/_react.default.createElement("div", {
+                className: "table-element-link-value-wrapper"
+              }, /*#__PURE__*/_react.default.createElement(_TextFormatter2.default, {
+                value: cellValue,
+                containerClassName: "table-element-phone-number-formatter"
+              }), /*#__PURE__*/_react.default.createElement(_PhoneNumberLink2.default, {
+                phoneNumber: (0, _utils.getTrimmedString)(cellValue),
+                className: "table-element-cell-jump-link"
+              }));
+            }
             return /*#__PURE__*/_react.default.createElement(_TextFormatter2.default, {
               value: cellValue,
               containerClassName: containerClassName

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

@@ -114,7 +114,7 @@ class FileFormatter extends _react.default.PureComponent {
         file: item
       }), value.length !== 1 && /*#__PURE__*/_react.default.createElement("span", {
         className: "file-item-count"
-      }, "+".concat(value.length)));
+      }, `+${value.length}`));
     }
     return /*#__PURE__*/_react.default.createElement("div", {
       className: className

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

@@ -51,7 +51,7 @@ function LinkFormatter(props) {
           if (!value) return null;
           return /*#__PURE__*/_react.default.createElement("div", {
             title: value,
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             className: "table-element-link-item"
           }, value);
         }));
@@ -63,7 +63,7 @@ function LinkFormatter(props) {
         }, cellValue.map((value, index) => {
           if (!value && value !== 0) return null;
           return /*#__PURE__*/_react.default.createElement(_NumberFormatter2.default, {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             containerClassName: "table-element-link-item",
             data: displayColumnData || {},
             value: value
@@ -80,7 +80,7 @@ function LinkFormatter(props) {
             format
           } = displayColumnData || {};
           return /*#__PURE__*/_react.default.createElement(_DateFormatter2.default, {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             value: value,
             format: format,
             containerClassName: "table-element-link-item"
@@ -94,7 +94,7 @@ function LinkFormatter(props) {
         }, cellValue.map((value, index) => {
           if (!value) return null;
           return /*#__PURE__*/_react.default.createElement(_CTimeFormatter2.default, {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             value: value,
             containerClassName: "table-element-link-item"
           });
@@ -107,7 +107,7 @@ function LinkFormatter(props) {
         }, cellValue.map((value, index) => {
           if (!value) return null;
           return /*#__PURE__*/_react.default.createElement(_MTimeFormatter2.default, {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             value: value,
             containerClassName: "table-element-link-item"
           });
@@ -122,7 +122,7 @@ function LinkFormatter(props) {
           const displayValue = (0, _dtableUtils.getDurationDisplayString)(value, displayColumnData);
           return /*#__PURE__*/_react.default.createElement("div", {
             title: displayValue,
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             className: "table-element-link-item"
           }, displayValue);
         }));
@@ -152,7 +152,7 @@ function LinkFormatter(props) {
         return /*#__PURE__*/_react.default.createElement(_MultipleSelectFormatter2.default, {
           value: cellValue,
           options: options || [],
-          containerClassName: "table-element-".concat(displayColumnType, "-formatter")
+          containerClassName: `table-element-${displayColumnType}-formatter`
         });
       }
     case _dtableUtils.CellType.MULTIPLE_SELECT:
@@ -168,7 +168,7 @@ function LinkFormatter(props) {
           const valueDisplayString = Array.isArray(value) ? (0, _dtableUtils.getMultipleOptionName)(options, value) : (0, _dtableUtils.getMultipleOptionName)(options, [value]);
           return /*#__PURE__*/_react.default.createElement("div", {
             title: valueDisplayString,
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             className: "table-element-link-item"
           }, valueDisplayString);
         }));
@@ -190,7 +190,7 @@ function LinkFormatter(props) {
           }, displayColumn, collaborators);
           return /*#__PURE__*/_react.default.createElement("div", {
             title: valueDisplayString,
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             className: "table-element-link-item"
           }, valueDisplayString);
         }));
@@ -201,9 +201,9 @@ function LinkFormatter(props) {
           className: containerClassName
         }, cellValue.map((value, index) => {
           return /*#__PURE__*/_react.default.createElement(_CheckboxFormatter2.default, {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             value: Boolean(value),
-            containerClassName: "table-element-".concat(displayColumnType, "-item")
+            containerClassName: `table-element-${displayColumnType}-item`
           });
         }));
       }
@@ -218,7 +218,7 @@ function LinkFormatter(props) {
           });
           return /*#__PURE__*/_react.default.createElement("div", {
             title: displayString,
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             className: "table-element-link-item"
           }, displayString);
         }));
@@ -230,9 +230,9 @@ function LinkFormatter(props) {
         }, cellValue.map((value, index) => {
           if (!value) return null;
           return /*#__PURE__*/_react.default.createElement(_LongTextFormatter2.default, {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             value: value,
-            containerClassName: "table-element-".concat(displayColumnType, "-item")
+            containerClassName: `table-element-${displayColumnType}-item`
           });
         }));
       }
@@ -248,7 +248,7 @@ function LinkFormatter(props) {
           }, displayColumn, collaborators);
           return /*#__PURE__*/_react.default.createElement("div", {
             title: displayString,
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             className: "table-element-link-item"
           }, displayString);
         }));
@@ -260,7 +260,7 @@ function LinkFormatter(props) {
         }, cellValue.map((value, index) => {
           return /*#__PURE__*/_react.default.createElement("div", {
             title: value + '',
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             className: "table-element-link-item"
           }, value + '');
         }));
@@ -274,7 +274,7 @@ function LinkFormatter(props) {
           return /*#__PURE__*/_react.default.createElement("div", {
             title: value,
             value: value,
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             className: "table-element-link-item"
           }, value);
         }));

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

@@ -50,7 +50,7 @@ function LinkFormatter(props) {
         }, cellValue.map((value, index) => {
           if (!value) return null;
           return /*#__PURE__*/_react.default.createElement("div", {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             className: "table-element-link-item"
           }, value);
         }));
@@ -62,7 +62,7 @@ function LinkFormatter(props) {
         }, cellValue.map((value, index) => {
           if (!value && value !== 0) return null;
           return /*#__PURE__*/_react.default.createElement(_NumberFormatter2.default, {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             containerClassName: "table-element-link-item",
             data: displayColumnData || {},
             value: value
@@ -79,7 +79,7 @@ function LinkFormatter(props) {
             format
           } = displayColumnData || {};
           return /*#__PURE__*/_react.default.createElement(_DateFormatter2.default, {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             value: value,
             format: format,
             containerClassName: "table-element-link-item"
@@ -93,7 +93,7 @@ function LinkFormatter(props) {
         }, cellValue.map((value, index) => {
           if (!value) return null;
           return /*#__PURE__*/_react.default.createElement(_CTimeFormatter2.default, {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             value: value,
             containerClassName: "table-element-link-item"
           });
@@ -106,7 +106,7 @@ function LinkFormatter(props) {
         }, cellValue.map((value, index) => {
           if (!value) return null;
           return /*#__PURE__*/_react.default.createElement(_MTimeFormatter2.default, {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             value: value,
             containerClassName: "table-element-link-item"
           });
@@ -119,7 +119,7 @@ function LinkFormatter(props) {
         }, cellValue.map((value, index) => {
           if (!value) return null;
           return /*#__PURE__*/_react.default.createElement("div", {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             className: "table-element-link-item"
           }, (0, _dtableUtils.getDurationDisplayString)(value, displayColumnData));
         }));
@@ -149,7 +149,7 @@ function LinkFormatter(props) {
         return /*#__PURE__*/_react.default.createElement(_MultipleSelectFormatter2.default, {
           value: cellValue,
           options: options || [],
-          containerClassName: "table-element-".concat(displayColumnType, "-formatter")
+          containerClassName: `table-element-${displayColumnType}-formatter`
         });
       }
     case _dtableUtils.CellType.MULTIPLE_SELECT:
@@ -164,7 +164,7 @@ function LinkFormatter(props) {
           if (!value) return null;
           const valueDisplayString = Array.isArray(value) ? (0, _dtableUtils.getMultipleOptionName)(options, value) : (0, _dtableUtils.getMultipleOptionName)(options, [value]);
           return /*#__PURE__*/_react.default.createElement("div", {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             className: "table-element-link-item"
           }, valueDisplayString);
         }));
@@ -185,7 +185,7 @@ function LinkFormatter(props) {
             [displayColumn.key]: [value]
           }, displayColumn, collaborators);
           return /*#__PURE__*/_react.default.createElement("div", {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             className: "table-element-link-item"
           }, valueDisplayString);
         }));
@@ -196,9 +196,9 @@ function LinkFormatter(props) {
           className: containerClassName
         }, cellValue.map((value, index) => {
           return /*#__PURE__*/_react.default.createElement(_CheckboxFormatter2.default, {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             value: Boolean(value),
-            containerClassName: "table-element-".concat(displayColumnType, "-item")
+            containerClassName: `table-element-${displayColumnType}-item`
           });
         }));
       }
@@ -209,7 +209,7 @@ function LinkFormatter(props) {
         }, cellValue.map((value, index) => {
           if (!value) return null;
           return /*#__PURE__*/_react.default.createElement("div", {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             className: "table-element-link-item"
           }, (0, _dtableUtils.getGeolocationDisplayString)(value, displayColumnData, {
             hyphen: ' '
@@ -223,9 +223,9 @@ function LinkFormatter(props) {
         }, cellValue.map((value, index) => {
           if (!value) return null;
           return /*#__PURE__*/_react.default.createElement(_LongTextFormatter2.default, {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             value: value,
-            containerClassName: "table-element-".concat(displayColumnType, "-item")
+            containerClassName: `table-element-${displayColumnType}-item`
           });
         }));
       }
@@ -237,7 +237,7 @@ function LinkFormatter(props) {
         }, cellValue.map((value, index) => {
           if (!value) return null;
           return /*#__PURE__*/_react.default.createElement("div", {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             className: "table-element-link-item"
           }, (0, _valueDisplayUtils.getCellDisplayValue)({
             [displayColumn.key]: value
@@ -250,7 +250,7 @@ function LinkFormatter(props) {
           className: containerClassName
         }, cellValue.map((value, index) => {
           return /*#__PURE__*/_react.default.createElement("div", {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             className: "table-element-link-item"
           }, value + '');
         }));
@@ -262,7 +262,7 @@ function LinkFormatter(props) {
         }, cellValue.map((value, index) => {
           if (!value) return null;
           return /*#__PURE__*/_react.default.createElement("div", {
-            key: "link-".concat(displayColumnType, "-").concat(index),
+            key: `link-${displayColumnType}-${index}`,
             className: "table-element-link-item"
           }, value);
         }));

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

@@ -37,12 +37,12 @@ function Record(_ref) {
         className += 'table-element-result-table-formula-image-cell';
       }
     } else {
-      className += "table-element-result-table-".concat(type, "-cell");
+      className += `table-element-result-table-${type}-cell`;
     }
     return /*#__PURE__*/_react.default.createElement("div", {
-      key: "".concat(key, "-").concat({
+      key: `${key}-${{
         index
-      }),
+      }}`,
       className: className,
       style: {
         width,

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

@@ -21,7 +21,7 @@ class Records extends _react.Component {
         chart
       } = this.props;
       const displayColumns = this.calcuteDisplayColumns(this.props.shownColumns);
-      const container = document.querySelector("#sea-chart-cavans-container-".concat(chart.id));
+      const container = document.querySelector(`#sea-chart-cavans-container-${chart.id}`);
       let resultTotalwidth = displayColumns.reduce((cur, nextItem) => {
         return cur + nextItem.width;
       }, 0);
@@ -52,7 +52,7 @@ class Records extends _react.Component {
       const {
         chart
       } = this.props;
-      const columnsWidthDataStr = localStorage.getItem("statistic_".concat(chart.id, "_columns_width"));
+      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 {
@@ -95,7 +95,7 @@ class Records extends _react.Component {
         };
       });
       // 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));
+      localStorage.setItem(`statistic_${chart.id}_columns_width`, JSON.stringify(newColumnsWidthData));
       return columns;
     };
     this.resizeColumnWidth = (column, width) => {
@@ -120,7 +120,7 @@ class Records extends _react.Component {
       const {
         chart
       } = this.props;
-      localStorage.setItem("statistic_".concat(chart.id, "_columns_width"), JSON.stringify(columnsWidthData));
+      localStorage.setItem(`statistic_${chart.id}_columns_width`, JSON.stringify(columnsWidthData));
     };
     this.setVerticalScrollbarTop = scrollTop => {
       if (this.verticalScrollbar) {

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

@@ -15,7 +15,7 @@ const isValidUrl = url => {
 exports.isValidUrl = isValidUrl;
 const getValidUrl = value => {
   const url = getTrimmedString(value);
-  return isValidUrl(url) ? url : "http://".concat(url);
+  return isValidUrl(url) ? url : `http://${url}`;
 };
 exports.getValidUrl = getValidUrl;
 const openUrlLink = url => {

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

@@ -140,6 +140,21 @@
   text-align: left !important;
 }
 
+.table-element-result-table-cell .dtable-ui.table-element-phone-number-formatter,
+.table-element-result-table-cell .dtable-ui.table-element-url-formatter,
+.table-element-result-table-cell .dtable-ui.table-element-email-formatter {
+  width: auto;
+}
+
+.table-element-result-table-cell .table-element-image-formatter,
+.table-element-result-table-cell .table-element-file-formatter {
+  height: 28px;
+  line-height: 28px;
+  display: flex;
+  align-items: center;
+  overflow: visible;
+}
+
 .table-element-result-table-cell .multiple-select-formatter,
 .table-element-result-table-cell .single-select-formatter {
   line-height: 1;
@@ -162,6 +177,7 @@
 }
 
 .table-element-result-table-cell .table-element-text-formatter,
+.table-element-result-table-cell .table-element-phone-number-formatter,
 .table-element-result-table-cell .table-element-url-formatter,
 .table-element-result-table-cell .table-element-email-formatter,
 .table-element-result-table-cell .table-element-long-text-formatter .long-text-content {
@@ -170,6 +186,69 @@
   white-space: nowrap;
 }
 
+.table-element-result-table-cell .table-element-link-value-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
+
+.table-element-result-table-cell .table-element-link-value-wrapper .table-element-phone-number-formatter,
+.table-element-result-table-cell .table-element-link-value-wrapper .table-element-url-formatter,
+.table-element-result-table-cell .table-element-link-value-wrapper .table-element-email-formatter {
+  min-width: 0;
+}
+
+.table-element-result-table-cell .table-element-cell-jump-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  line-height: 20px;
+  margin-left: 8px;
+  border: 1px solid #eee;
+  padding: 0 2px;
+  color: #999;
+  border-radius: 2px;
+  background: #fff;
+  cursor: pointer;
+  box-shadow: 0 0 1px;
+}
+
+.table-element-result-table-cell .table-element-cell-jump-link:hover {
+  background: #f5f5f5;
+  border: 1px solid #c9c9c9;
+}
+
+.table-element-result-table-cell .table-element-cell-jump-link .dtable-font,
+.table-element-result-table-cell .table-element-cell-jump-link .jump-link-icon {
+  color: #999;
+}
+
+.table-element-result-table-cell .table-element-image-formatter .image-item {
+  height: 28px;
+  width: auto;
+  max-width: 100%;
+  object-fit: contain;
+  border: 1px solid #f0f0f0;
+  box-sizing: border-box;
+}
+
+.table-element-result-table-cell .table-element-image-formatter .image-item:hover {
+  border: 1px solid #c9c9c9;
+  cursor: pointer;
+}
+
+.table-element-result-table-cell .table-element-file-formatter .file-item-icon {
+  border: 1px solid #f0f0f0;
+  box-sizing: border-box;
+}
+
+.table-element-result-table-cell .table-element-file-formatter .file-item-icon:hover {
+  border: 1px solid #c9c9c9;
+  cursor: pointer;
+}
+
 .table-element-result-table-cell .dtable-ui.long-text-formatter {
   height: 100%;
 }

package/dist/view/wrapper/treemap.js

@@ -113,8 +113,8 @@ class Treemap extends _chartComponent.default {
       } = this.chartBoundingClientRect;
       const fullData = this.getFullData(newData);
       const root = d3.treemap().size([chartWidth - insertPadding * 2, chartHeight - insertPadding * 2]).padding(1)(d3.hierarchy(fullData).sum(d => d.value)).sort((a, b) => a.value - b.value);
-      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', "translate(".concat(insertPadding, ",").concat(insertPadding, ")"));
-      contentWrapper.selectAll().data(root.leaves()).join('g').attr('transform', d => "translate(".concat(d.x0, ",").concat(d.y0, ")")).append('rect').attr('opacity', 1).attr('fill', d => {
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', `translate(${insertPadding},${insertPadding})`);
+      contentWrapper.selectAll().data(root.leaves()).join('g').attr('transform', d => `translate(${d.x0},${d.y0})`).append('rect').attr('opacity', 1).attr('fill', d => {
         const {
           data
         } = d;