sea-chart 2.0.1 → 2.0.2

package/dist/view/wrapper/index.js

@@ -8,34 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _constants = require("../../constants");
-var _utils = require("../../utils");
 var _statisticRecordDialog = _interopRequireDefault(require("../../components/statistic-record-dialog"));
 var _table = _interopRequireDefault(require("./table"));
 var _bar = _interopRequireDefault(require("./bar"));
-var _barCustom = _interopRequireDefault(require("./bar-custom"));
-var _barGroup = _interopRequireDefault(require("./bar-group"));
-var _compare = _interopRequireDefault(require("./compare"));
-var _line = _interopRequireDefault(require("./line"));
-var _lineGroup = _interopRequireDefault(require("./line-group"));
-var _pie = _interopRequireDefault(require("./pie"));
-var _ring = _interopRequireDefault(require("./ring"));
-var _horizontalBar = _interopRequireDefault(require("./horizontal-bar"));
-var _horizontalBarGroup = _interopRequireDefault(require("./horizontal-bar-group"));
-var _area = _interopRequireDefault(require("./area"));
 var _basicNumberCard = _interopRequireDefault(require("./basic-number-card"));
-var _treemap = _interopRequireDefault(require("./treemap"));
-var _combination = _interopRequireDefault(require("./combination"));
-var _dashboard = _interopRequireDefault(require("./dashboard"));
-var _completeness = _interopRequireDefault(require("./completeness"));
-var _scatter = require("./scatter");
-var _map = _interopRequireDefault(require("./map"));
-var _worldMap = _interopRequireDefault(require("./world-map"));
-var _heatMap = _interopRequireDefault(require("./heat-map"));
-var _mirror = _interopRequireDefault(require("./mirror"));
 var _trend = _interopRequireDefault(require("./trend"));
-var _funnel = _interopRequireDefault(require("./funnel"));
 var _tableElement = _interopRequireDefault(require("./table-element"));
-var _bar2 = _interopRequireDefault(require("./wrappers-d3/bar"));
 const Wrapper = _ref => {
   let {
     dtableStoreValue,
@@ -45,7 +23,6 @@ const Wrapper = _ref => {
     canvasStyle,
     customRender,
     isCalculateByView,
-    isRenderByD3,
     globalTheme,
     chartColorTheme,
     integratedEventTypes,
@@ -111,237 +88,24 @@ const Wrapper = _ref => {
             chartTableColumns: chartTableColumns
           }));
         }
-      case _constants.CHART_TYPE.COMBINATION:
-        {
-          return /*#__PURE__*/_react.default.createElement(_combination.default, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
       case _constants.CHART_TYPE.BAR:
         {
           return /*#__PURE__*/_react.default.createElement(_bar.default, Object.assign({}, baseProps, {
             canvasStyle: canvasStyle
           }));
         }
-      case _constants.CHART_TYPE.BAR_CUSTOM:
-        {
-          return /*#__PURE__*/_react.default.createElement(_barCustom.default, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
-      case _constants.CHART_TYPE.BAR_STACK:
-      case _constants.CHART_TYPE.BAR_GROUP:
-        {
-          const {
-            config
-          } = chart;
-          const {
-            column_groupby_column_key,
-            column_groupby_multiple_numeric_column
-          } = config;
-          const BarGroupComponent = column_groupby_column_key || column_groupby_multiple_numeric_column ? _barGroup.default : _bar.default;
-          return /*#__PURE__*/_react.default.createElement(BarGroupComponent, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
-      case _constants.CHART_TYPE.HORIZONTAL_BAR:
-        {
-          const {
-            config,
-            id,
-            style_config
-          } = chart;
-          const newConfig = _utils.BaseUtils.convertConfig(config);
-          const newChart = {
-            id,
-            config: newConfig,
-            style_config
-          };
-          return /*#__PURE__*/_react.default.createElement(_horizontalBar.default, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle,
-            chart: newChart
-          }));
-        }
-      case _constants.CHART_TYPE.HORIZONTAL_GROUP_BAR:
-      case _constants.CHART_TYPE.STACKED_HORIZONTAL_BAR:
-        {
-          const {
-            config,
-            id,
-            style_config
-          } = chart;
-          const newConfig = _utils.BaseUtils.convertConfig(config);
-          const newChart = {
-            id,
-            config: newConfig,
-            style_config
-          };
-          const {
-            column_groupby_column_key,
-            column_groupby_multiple_numeric_column
-          } = config;
-          const HorizontalComponent = column_groupby_column_key || column_groupby_multiple_numeric_column ? _horizontalBarGroup.default : _horizontalBar.default;
-          return /*#__PURE__*/_react.default.createElement(HorizontalComponent, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle,
-            chart: newChart
-          }));
-        }
-      case _constants.CHART_TYPE.COMPLETENESS:
-      case _constants.CHART_TYPE.COMPLETENESS_GROUP:
-        {
-          return /*#__PURE__*/_react.default.createElement(_completeness.default, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
-      case _constants.CHART_TYPE.SCATTER:
-        {
-          return /*#__PURE__*/_react.default.createElement(_scatter.Scatter, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
-      case _constants.CHART_TYPE.COMPARE_BAR:
-        {
-          return /*#__PURE__*/_react.default.createElement(_compare.default, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
-      case _constants.CHART_TYPE.LINE_GROUP:
-        {
-          const {
-            config
-          } = chart;
-          const {
-            column_groupby_column_key,
-            column_groupby_multiple_numeric_column
-          } = config;
-          const LineGroupComponent = column_groupby_column_key || column_groupby_multiple_numeric_column ? _lineGroup.default : _line.default;
-          return /*#__PURE__*/_react.default.createElement(LineGroupComponent, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
-      case _constants.CHART_TYPE.LINE:
-        {
-          return /*#__PURE__*/_react.default.createElement(_line.default, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
       case _constants.CHART_TYPE.BASIC_NUMBER_CARD:
         {
           return /*#__PURE__*/_react.default.createElement(_basicNumberCard.default, Object.assign({}, baseProps, {
             canvasStyle: canvasStyle
           }));
         }
-      case _constants.CHART_TYPE.AREA:
-      case _constants.CHART_TYPE.AREA_GROUP:
-        {
-          return /*#__PURE__*/_react.default.createElement(_area.default, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
-      case _constants.CHART_TYPE.PIE:
-        {
-          return /*#__PURE__*/_react.default.createElement(_pie.default, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
-      case _constants.CHART_TYPE.RING:
-        {
-          return /*#__PURE__*/_react.default.createElement(_ring.default, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
-      case _constants.CHART_TYPE.TREE_MAP:
-        {
-          return /*#__PURE__*/_react.default.createElement(_treemap.default, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
-      case _constants.CHART_TYPE.DASHBOARD:
-        {
-          return /*#__PURE__*/_react.default.createElement(_dashboard.default, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
-      case _constants.CHART_TYPE.MAP:
-      case _constants.CHART_TYPE.MAP_BUBBLE:
-        {
-          return /*#__PURE__*/_react.default.createElement(_map.default, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
-      case _constants.CHART_TYPE.WORLD_MAP:
-      case _constants.CHART_TYPE.WORLD_MAP_BUBBLE:
-        {
-          return /*#__PURE__*/_react.default.createElement(_worldMap.default, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
-      case _constants.CHART_TYPE.HEAT_MAP:
-        {
-          return /*#__PURE__*/_react.default.createElement(_heatMap.default, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
-      case _constants.CHART_TYPE.MIRROR:
-        {
-          return /*#__PURE__*/_react.default.createElement(_mirror.default, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
       case _constants.CHART_TYPE.TREND:
         {
           return /*#__PURE__*/_react.default.createElement(_trend.default, Object.assign({}, baseProps, {
             canvasStyle: canvasStyle
           }));
         }
-      case _constants.CHART_TYPE.FUNNEL:
-        {
-          return /*#__PURE__*/_react.default.createElement(_funnel.default, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
-      default:
-        {
-          return null;
-        }
-    }
-  };
-  const renderChartByD3 = () => {
-    const {
-      result,
-      groupbyColumn,
-      columnGroupbyColumn,
-      summaryColumn,
-      summaryColumnsWithMethod,
-      chartTableColumns
-    } = data;
-    const {
-      type,
-      summary_columns,
-      summary_method
-    } = chart.config;
-    const baseProps = {
-      customRender,
-      chart,
-      result,
-      tables,
-      groupbyColumn,
-      columnGroupbyColumn,
-      summaryColumn,
-      summaryColumnsWithMethod,
-      globalTheme,
-      chartColorTheme,
-      toggleRecords: toggleStatisticRecordsDialog,
-      isCalculateByView,
-      isBigScreenPlugin
-    };
-    switch (type) {
-      case _constants.CHART_TYPE.BAR:
-        {
-          return /*#__PURE__*/_react.default.createElement(_bar2.default, Object.assign({}, baseProps, {
-            canvasStyle: canvasStyle
-          }));
-        }
       default:
         {
           return null;
@@ -357,7 +121,7 @@ const Wrapper = _ref => {
   const drillDownStatus = drill_down_status !== undefined && drill_down_status !== null ? drill_down_status : true;
   // in dtable-statistics always support drill down
   const supportDrillDown = isCalculateByView ? true : drillDownStatus;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isRenderByD3 ? renderChartByD3() : renderChart(), isStatisticRecordsDialogShow && supportDrillDown && /*#__PURE__*/_react.default.createElement(_statisticRecordDialog.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderChart(), isStatisticRecordsDialogShow && supportDrillDown && /*#__PURE__*/_react.default.createElement(_statisticRecordDialog.default, {
     chartRecordsParams: {
       statisticRecord: {
         ...statisticRecords

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

@@ -54,7 +54,7 @@ class Table extends _react.PureComponent {
       result
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: `sea-chart-table-wrapper sea-chart-${result.dimensions}-table-wrapper`
+      className: "sea-chart-table-wrapper sea-chart-".concat(result.dimensions, "-table-wrapper")
     }, this.renderContainer());
   }
 }

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-${index}`
+          key: "pivot-column-".concat(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-${cellIdx}`
+            key: "table-cell-".concat(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-${index}`
+          key: "total-cell-".concat(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, `(${_intl.default.get('Empty')})`);
+    let displayName = value ? this.getDisplayName(value, column) : /*#__PURE__*/_react.default.createElement("div", null, "(".concat(_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-${index}`
+          key: "pivot-column-".concat(index)
         }, /*#__PURE__*/_react.default.createElement(_pivotTableDisplayName.default, {
           value: original_key,
           column: columnGroupbyColumn || {},
@@ -104,7 +104,7 @@ class TwoDimensionTable extends _react.PureComponent {
         }, summary_columns.map((column, idx) => {
           return /*#__PURE__*/_react.default.createElement("div", {
             className: (0, _classnames.default)('pivot-table-header'),
-            key: `pivot-column-${idx}`
+            key: "pivot-column-".concat(idx)
           }, /*#__PURE__*/_react.default.createElement(_pivotTableDisplayName.default, {
             value: column.name,
             column: column || {},
@@ -141,7 +141,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-${item === null || item === void 0 ? void 0 : item.key}`,
+            key: "table-cell-".concat(item === null || item === void 0 ? void 0 : item.key),
             className: (0, _classnames.default)('pivot-cell', {
               'pivot-empty-cell': true
             })
@@ -149,7 +149,7 @@ class TwoDimensionTable extends _react.PureComponent {
         });
       }
       return /*#__PURE__*/_react.default.createElement("div", {
-        key: `table-cell-${cellIdx}`,
+        key: "table-cell-".concat(cellIdx),
         className: (0, _classnames.default)('pivot-cell', {
           'pivot-empty-cell': true
         })
@@ -251,7 +251,7 @@ class TwoDimensionTable extends _react.PureComponent {
                 'selected-pivot-cell-top': isSelectedCellTop,
                 'selected-pivot-cell-left': isSelectedCellLeft
               }),
-              key: `table-cell-${cellIdx}`,
+              key: "table-cell-".concat(cellIdx),
               onClick: () => this.toggleRecords({
                 ...c,
                 name: rowItem === null || rowItem === void 0 ? void 0 : rowItem.name
@@ -268,7 +268,7 @@ class TwoDimensionTable extends _react.PureComponent {
           }
           return /*#__PURE__*/_react.default.createElement("td", {
             className: (0, _classnames.default)('pivot-cell'),
-            key: `table-cell-${cellIdx}`
+            key: "table-cell-".concat(cellIdx)
           }, /*#__PURE__*/_react.default.createElement("div", {
             className: (0, _classnames.default)('pivot-cells-container')
           }, total && total.map && total.map((summaryCell, idx) => {
@@ -278,7 +278,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-${cellIdx}-${idx}`,
+              key: "table-cell-".concat(cellIdx, "-").concat(idx),
               className: (0, _classnames.default)('pivot-cell', {
                 'pivot-empty-cell': !isValidDisplayValue,
                 'selected-pivot-cell': isSelectedCell,
@@ -328,7 +328,7 @@ class TwoDimensionTable extends _react.PureComponent {
             'selected-pivot-cell': isSelectRowTotalCell,
             'selected-pivot-cell-left': isSelectRowTotalCellLeft
           }),
-          key: `total-cell-${index}`,
+          key: "total-cell-".concat(index),
           onClick: () => this.toggleRecords({
             rows: pivotColumnCell,
             total: pivot_columns_total[c.key]

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

@@ -71,7 +71,7 @@ class Formatter extends _react.default.Component {
       }
     };
     this.onEmailClick = email => {
-      window.location.href = `mailto:${(0, _utils.getTrimmedString)(email)}`;
+      window.location.href = "mailto:".concat((0, _utils.getTrimmedString)(email));
     };
     this.renderFormatter = () => {
       let {
@@ -85,7 +85,7 @@ class Formatter extends _react.default.Component {
       const {
         type: columnType
       } = column || {};
-      const containerClassName = `table-element-${columnType}-formatter`;
+      const containerClassName = "table-element-".concat(columnType, "-formatter");
       switch (columnType) {
         case _dtableUtils.CellType.TEXT:
           {

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"
-      }, `+${value.length}`));
+      }, "+".concat(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-${displayColumnType}-${index}`,
+            key: "link-".concat(displayColumnType, "-").concat(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-${displayColumnType}-${index}`,
+            key: "link-".concat(displayColumnType, "-").concat(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-${displayColumnType}-${index}`,
+            key: "link-".concat(displayColumnType, "-").concat(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-${displayColumnType}-${index}`,
+            key: "link-".concat(displayColumnType, "-").concat(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-${displayColumnType}-${index}`,
+            key: "link-".concat(displayColumnType, "-").concat(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-${displayColumnType}-${index}`,
+            key: "link-".concat(displayColumnType, "-").concat(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-${displayColumnType}-formatter`
+          containerClassName: "table-element-".concat(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-${displayColumnType}-${index}`,
+            key: "link-".concat(displayColumnType, "-").concat(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-${displayColumnType}-${index}`,
+            key: "link-".concat(displayColumnType, "-").concat(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-${displayColumnType}-${index}`,
+            key: "link-".concat(displayColumnType, "-").concat(index),
             value: Boolean(value),
-            containerClassName: `table-element-${displayColumnType}-item`
+            containerClassName: "table-element-".concat(displayColumnType, "-item")
           });
         }));
       }
@@ -218,7 +218,7 @@ function LinkFormatter(props) {
           });
           return /*#__PURE__*/_react.default.createElement("div", {
             title: displayString,
-            key: `link-${displayColumnType}-${index}`,
+            key: "link-".concat(displayColumnType, "-").concat(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-${displayColumnType}-${index}`,
+            key: "link-".concat(displayColumnType, "-").concat(index),
             value: value,
-            containerClassName: `table-element-${displayColumnType}-item`
+            containerClassName: "table-element-".concat(displayColumnType, "-item")
           });
         }));
       }
@@ -248,7 +248,7 @@ function LinkFormatter(props) {
           }, displayColumn, collaborators);
           return /*#__PURE__*/_react.default.createElement("div", {
             title: displayString,
-            key: `link-${displayColumnType}-${index}`,
+            key: "link-".concat(displayColumnType, "-").concat(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-${displayColumnType}-${index}`,
+            key: "link-".concat(displayColumnType, "-").concat(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-${displayColumnType}-${index}`,
+            key: "link-".concat(displayColumnType, "-").concat(index),
             className: "table-element-link-item"
           }, value);
         }));