sea-chart 2.0.1 → 2.0.2-alpha.3

package/dist/view/wrapper/chart-component.js

@@ -7,10 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _dtableUtils = require("dtable-utils");
 var d3 = _interopRequireWildcard(require("d3"));
 var _lodashEs = require("lodash-es");
-var _customG = require("../../utils/custom-g2");
+var _dtableUtils = require("dtable-utils");
 var _utils = require("../../utils");
 var _constants = require("../../constants");
 var _intl = _interopRequireDefault(require("../../intl"));
@@ -49,25 +48,7 @@ class ChartComponent extends _react.Component {
       const column = this.getColumn(tables, tableId, columnKey);
       return column.name || '';
     };
-    this.initChart = (container, _ref) => {
-      let {
-        appendPadding,
-        autoFit = true,
-        height = '100%',
-        width = '100%'
-      } = _ref;
-      let config = {
-        container: container,
-        autoFit: autoFit,
-        width,
-        height
-      };
-      if (appendPadding) {
-        config.appendPadding = appendPadding;
-      }
-      this.chart = new _customG.Chart(config);
-    };
-    this.initD3Chart = container => {
+    this.initChart = container => {
       const {
         width,
         height
@@ -76,14 +57,6 @@ class ChartComponent extends _react.Component {
       this.container.appendChild(this.chart.node());
       this.chartBoundingClientRect = this.chart.node().getBoundingClientRect();
     };
-    this.loadData = data => {
-      this.chart.data(data, {
-        'name': {
-          type: 'cat',
-          nice: false
-        }
-      });
-    };
     this.getChartDisplayLabels = (containerWidth, minItemWidth, charts) => {
       let labels = [];
       let labelCount = Math.floor(containerWidth / minItemWidth);
@@ -225,7 +198,7 @@ class ChartComponent extends _react.Component {
         });
       }
     };
-    this.renderAxisLabel = (chart, tables, container) => {
+    this.renderAxisLabel = (chart, tables, chartContainer) => {
       var _this$chart2;
       if (!this.chart || !chart) return;
       let {
@@ -252,26 +225,25 @@ class ChartComponent extends _react.Component {
       };
       let textColor;
       this.globalTheme === _constants.THEME_NAME_MAP.DARK ? textColor = '#fff' : textColor = '#999';
-      const xAxisID = `chart-x-axis-label_${chart.id}`;
-      const chartContainer = container || this.chart.getCanvas().get('container');
-      const xLabel = chartContainer === null || chartContainer === void 0 ? void 0 : chartContainer.querySelector(`#${xAxisID}`);
+      const xAxisID = "chart-x-axis-label_".concat(chart.id);
+      const xLabel = chartContainer === null || chartContainer === void 0 ? void 0 : chartContainer.querySelector("#".concat(xAxisID));
       if (!xLabel && x_axis_show_label) {
         const div = document.createElement('div');
         div.id = xAxisID;
         div.className = 'chart-axis-label';
         const column = (0, _dtableUtils.getTableColumnByKey)(table, x_axis_column_key);
-        div.innerHTML = `${column ? column.name : ''}`;
-        div.setAttribute('style', `color:${textColor}; width: 100%; text-align: ${x_axis_label_position}; bottom: -20px; position: absolute`);
+        div.innerHTML = "".concat(column ? column.name : '');
+        div.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
         chartContainer.appendChild(div);
       }
       if (xLabel && x_axis_show_label) {
-        xLabel.setAttribute('style', `color:${textColor}; width: 100%; text-align: ${x_axis_label_position}; bottom: -20px; position: absolute`);
+        xLabel.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
       }
       if (xLabel && !x_axis_show_label) {
         xLabel.parentNode.removeChild(xLabel);
       }
-      const yAxisID = `chart-y-axis-label_${chart.id}`;
-      const yLabel = chartContainer.querySelector(`#${yAxisID}`);
+      const yAxisID = "chart-y-axis-label_".concat(chart.id);
+      const yLabel = chartContainer.querySelector("#".concat(yAxisID));
       if (!yLabel && y_axis_show_label) {
         const div = document.createElement('div');
         div.id = yAxisID;
@@ -289,7 +261,7 @@ class ChartComponent extends _react.Component {
         let textAlign = 'center';
         if (y_axis_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
         if (y_axis_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        div.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 + 12}px, ${(containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4}px) rotate(-90deg)`);
+        div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
         chartContainer.appendChild(div);
       }
       if (yLabel && y_axis_show_label) {
@@ -297,7 +269,7 @@ class ChartComponent extends _react.Component {
         let textAlign = 'center';
         if (y_axis_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
         if (y_axis_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        yLabel.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 + 12}px, ${(containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4}px) rotate(-90deg)`);
+        yLabel.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
       }
       if (yLabel && !y_axis_show_label) {
         yLabel.parentNode.removeChild(yLabel);
@@ -406,7 +378,7 @@ class ChartComponent extends _react.Component {
     this.labelFormatter = name => {
       let label = name;
       if (name.length > 10) {
-        label = `${name.slice(0, 10)}...`;
+        label = "".concat(name.slice(0, 10), "...");
       }
       if (name === '' || name === 'undefined') {
         label = _intl.default.get(_constants.EMPTY_NAME);
@@ -542,15 +514,8 @@ class ChartComponent extends _react.Component {
     this.getToolTipSettings = (isGroup, summaryColumn, y_axis_summary_method, useSingleSelectColumnColor) => {
       const obj = {
         showMarkers: false,
-        containerTpl: `<div class="g2-tooltip">
-        <div class="g2-tooltip-title">{title}</div>
-        <ul class="g2-tooltip-list"></ul>
-      </div>`,
-        itemTpl: `<li class="g2-tooltip-list-item">
-         <span class="g2-tooltip-marker" style="background-color:{color};display:inline-block;"></span>
-         <span class="g2-tooltip-name">{name}</span>
-         <span class="g2-tooltip-value">{value}</span>
-      </li>`,
+        containerTpl: "<div class=\"g2-tooltip\">\n        <div class=\"g2-tooltip-title\">{title}</div>\n        <ul class=\"g2-tooltip-list\"></ul>\n      </div>",
+        itemTpl: "<li class=\"g2-tooltip-list-item\">\n         <span class=\"g2-tooltip-marker\" style=\"background-color:{color};display:inline-block;\"></span>\n         <span class=\"g2-tooltip-name\">{name}</span>\n         <span class=\"g2-tooltip-value\">{value}</span>\n      </li>",
         domStyles: {
           'g2-tooltip': {
             boxSizing: 'border-box',
@@ -638,7 +603,7 @@ class ChartComponent extends _react.Component {
       const dom = /*#__PURE__*/_react.default.createElement("div", {
         className: "sea-chart-d3-tooltip-container",
         style: {
-          transform: `translate(${offsetX + 50}px, ${offsetY}px)`
+          transform: "translate(".concat(offsetX + 50, "px, ").concat(offsetY, "px)")
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "sea-chart-d3-tooltip-title"
@@ -709,9 +674,7 @@ class ChartComponent extends _react.Component {
     this.setToolTipForTheta = () => {
       const settings = this.getToolTipSettings();
       settings.showTitle = false;
-      settings.containerTpl = `<div class="g2-tooltip">
-      <ul class="g2-tooltip-list"></ul>
-    </div>`;
+      settings.containerTpl = "<div class=\"g2-tooltip\">\n      <ul class=\"g2-tooltip-list\"></ul>\n    </div>";
       this.chart.tooltip(settings);
     };
     this.isShowXAxisLabel = chart => {

package/dist/view/wrapper/index.js

@@ -8,34 +8,13 @@ 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 +24,6 @@ const Wrapper = _ref => {
     canvasStyle,
     customRender,
     isCalculateByView,
-    isRenderByD3,
     globalTheme,
     chartColorTheme,
     integratedEventTypes,
@@ -111,117 +89,15 @@ 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, {
+          return /*#__PURE__*/_react.default.createElement(_barGroup.default, Object.assign({}, baseProps, {
             canvasStyle: canvasStyle
           }));
         }
@@ -231,117 +107,12 @@ const Wrapper = _ref => {
             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 +128,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