dtable-statistic 4.0.2-test-2

package/es/stat-view/pie-chart.js

@@ -0,0 +1,326 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import PropTypes from 'prop-types';
+import intl from 'react-intl-universal';
+import { TableUtils, getNumberDisplayString } from 'dtable-store';
+import BaseChart from './base-chart';
+import { Chart } from '../custom-g2';
+import { Loading } from '../components';
+import { formatPieChartData, getCurrentTheme, getLabelFontSize } from '../utils/common-utils';
+import { DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, LABEL_FORMATS, LABEL_POSITIONS, NO_STATISTIC_RESULTS, STAT_ITEM_THEME_COLORS, SUMMARY_TYPE } from '../constants';
+import chartStyles from '../assets/css/statistic-chart.module.css';
+var propTypes = {
+  isPreview: PropTypes.bool,
+  isEnlarge: PropTypes.bool,
+  theme: PropTypes.string,
+  colorThemeName: PropTypes.string,
+  statItem: PropTypes.object,
+  chartCalculator: PropTypes.object,
+  getTableById: PropTypes.func,
+  toggleStatisticRecordsDialog: PropTypes.func
+};
+var PieChart = /*#__PURE__*/function (_BaseChart) {
+  _inherits(PieChart, _BaseChart);
+  var _super = _createSuper(PieChart);
+  function PieChart(props) {
+    var _this;
+    _classCallCheck(this, PieChart);
+    _this = _super.call(this, props);
+    _this.drawChart = function (data) {
+      var isPreview = _this.props.isPreview;
+      if (isPreview) {
+        _this.chart = new Chart({
+          container: _this.container,
+          autoFit: true,
+          padding: [20, 0]
+        });
+      } else {
+        _this.chart = new Chart({
+          container: _this.container,
+          autoFit: true,
+          height: 400,
+          width: 700
+        });
+      }
+      _this.drawPieChart(data, !isPreview);
+      _this.chart.render();
+    };
+    _this.drawPieChart = function (data, isCreating) {
+      if (data.length === 0) return;
+      var _this$props = _this.props,
+        getTableById = _this$props.getTableById,
+        theme = _this$props.theme,
+        isEnlarge = _this$props.isEnlarge,
+        isPreview = _this$props.isPreview,
+        statItem = _this$props.statItem,
+        colorThemeName = _this$props.colorThemeName;
+      _this.chart.coordinate('theta', {
+        radius: isCreating ? 0.75 : 0.95
+      });
+      var summary_type = statItem.summary_type,
+        summary_column_key = statItem.summary_column_key,
+        table_id = statItem.table_id,
+        show_legend = statItem.show_legend,
+        show_percent = statItem.show_percent,
+        display_label = statItem.display_label,
+        label_position = statItem.label_position;
+      var currentTheme = getCurrentTheme(colorThemeName);
+      var columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      var table = getTableById(table_id);
+      if (summary_type === SUMMARY_TYPE.ADVANCED) {
+        var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column_key) || {};
+        columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+      }
+      var themeColors = STAT_ITEM_THEME_COLORS.light;
+      if (theme === 'dark' && !isEnlarge && isPreview) {
+        themeColors = STAT_ITEM_THEME_COLORS.dark;
+      }
+      var newData = formatPieChartData(data, statItem, table, currentTheme);
+      _this.chart.data(newData, {
+        'name': {
+          type: 'cat',
+          nice: false
+        }
+      });
+      _this.chart.on('element:click', function (e) {
+        _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
+      });
+      var colorSet = newData.colorSet;
+      if (show_legend) {
+        _this.chart.legend('name', {
+          position: 'right',
+          custom: true,
+          itemName: {
+            style: {
+              fill: themeColors.textColor
+            }
+          },
+          items: newData.map(function (obj, index) {
+            var sIndex = String(index);
+            var colorIndex = sIndex.charAt(sIndex.length - 1);
+            var name = obj.name;
+            if (!obj.name && typeof obj.name !== 'number') {
+              name = intl.get(EMPTY_NAME);
+            } else if (obj.name === 'Others') {
+              name = intl.get('Others');
+            }
+            return {
+              name: name,
+              value: obj.value,
+              marker: {
+                symbol: 'circle',
+                style: {
+                  r: 5,
+                  fill: colorSet[colorIndex]
+                }
+              }
+            };
+          })
+        });
+      } else {
+        _this.chart.legend(false);
+      }
+
+      // Do not automatically adjust the maximum and minimum values in pie chart
+      _this.chart.scale({
+        value: {
+          nice: false
+        }
+      });
+      _this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('value*percent', function (value, percent) {
+        var displayedValue = getNumberDisplayString(value, columnData);
+        return {
+          content: _this.getLabel(displayedValue, percent)
+        };
+      }, {
+        offset: !label_position || label_position == LABEL_POSITIONS[0] ? isCreating ? -10 : -2 : undefined,
+        style: {
+          fill: themeColors.labelColor,
+          fontSize: _this.getLabelFontSize(),
+          shadowBlur: 2,
+          shadowColor: 'rgba(0, 0, 0, .45)'
+        }
+      }).tooltip('name*value*percent', function (name, value, percent) {
+        var title = name;
+        if (!name || name === 'undefined') {
+          title = intl.get(EMPTY_NAME);
+        } else if (name === 'Others') {
+          title = intl.get('Others');
+        }
+        var displayedValue = getNumberDisplayString(value, columnData);
+        return show_percent || display_label ? {
+          name: title,
+          value: _this.getLabel(displayedValue, percent)
+        } : {
+          name: title,
+          value: displayedValue
+        };
+      }).state({
+        active: {
+          style: {
+            fillOpacity: 0.7,
+            border: 'none',
+            stroke: 0
+          }
+        }
+      });
+      _this.chart.tooltip({
+        showTitle: false,
+        showMarkers: false,
+        itemTpl: '<div class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</div>'
+      });
+      _this.chart.interaction('element-active');
+    };
+    _this.getLabel = function (value, percent) {
+      var _this$props$statItem = _this.props.statItem,
+        show_percent = _this$props$statItem.show_percent,
+        display_label = _this$props$statItem.display_label,
+        label_format = _this$props$statItem.label_format;
+      var content;
+      if (show_percent) {
+        content = percent;
+        return content;
+      } else {
+        if (!display_label) {
+          content = '';
+          return content;
+        }
+      }
+      switch (label_format) {
+        case LABEL_FORMATS[0]:
+          content = percent;
+          break;
+        case LABEL_FORMATS[1]:
+          content = value;
+          break;
+        case LABEL_FORMATS[2]:
+          content = "".concat(value, " (").concat(percent, ")");
+          break;
+        default:
+          content = percent;
+      }
+      return content;
+    };
+    _this.destroyChart = function () {
+      _this.chart.destroy();
+      _this.chart = null;
+    };
+    _this.getLabelFontSize = function () {
+      var statItem = _this.props.statItem;
+      var label_font_size = statItem.label_font_size;
+      return getLabelFontSize(label_font_size);
+    };
+    _this.state = {
+      isCalculatingData: true,
+      showResultDescription: true
+    };
+    _this.calculateData = null;
+    return _this;
+  }
+  _createClass(PieChart, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      var _this$props2 = this.props,
+        statItem = _this$props2.statItem,
+        chartCalculator = _this$props2.chartCalculator;
+      if (this.container) {
+        chartCalculator.calculate(statItem).then(function (data) {
+          var showResultDescription = data.length > 0 ? false : true;
+          _this2.setState({
+            isCalculatingData: false,
+            showResultDescription: showResultDescription
+          }, function () {
+            if (!showResultDescription) {
+              _this2.drawChart(data);
+              _this2.calculateData = data;
+            }
+          });
+        });
+      }
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      var colorThemeName = this.props.colorThemeName;
+      if (this.canUpdate(this.props, nextProps)) {
+        return true;
+      }
+      if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+        return true;
+      }
+      if (nextProps.colorThemeName !== colorThemeName) {
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(preProps, preState) {
+      var _this3 = this;
+      var _this$props3 = this.props,
+        statItem = _this$props3.statItem,
+        chartCalculator = _this$props3.chartCalculator;
+      var isCalculatingData = this.state.isCalculatingData;
+      if (isCalculatingData !== preState.isCalculatingData) return;
+      if (this.shouldCalculateStatItem(preProps, this.props)) {
+        this.setState({
+          isCalculatingData: true
+        });
+        if (this.container) {
+          chartCalculator.calculate(statItem).then(function (data) {
+            var showResultDescription = data.length > 0 ? false : true;
+            _this3.chart && _this3.destroyChart();
+            _this3.calculateData = data;
+            _this3.setState({
+              isCalculatingData: false,
+              showResultDescription: showResultDescription
+            }, function () {
+              if (!showResultDescription) {
+                _this3.drawChart(data);
+                if (_this3.props.isPreview) _this3.chart.forceFit();
+              }
+            });
+          });
+        }
+      } else {
+        if (!this.state.showResultDescription) {
+          this.chart && this.destroyChart();
+          this.drawChart(this.calculateData);
+          if (this.props.isPreview) {
+            this.chart.forceFit();
+          }
+        }
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.container = null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+      var _this$state = this.state,
+        isCalculatingData = _this$state.isCalculatingData,
+        showResultDescription = _this$state.showResultDescription;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && /*#__PURE__*/React.createElement("div", {
+        className: 'statistic-chart-loading-container'
+      }, /*#__PURE__*/React.createElement(Loading, null)), showResultDescription && /*#__PURE__*/React.createElement("div", {
+        className: 'statistic-chart-text'
+      }, intl.get(NO_STATISTIC_RESULTS)), /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref) {
+          return _this4.container = _ref;
+        },
+        className: "".concat(chartStyles['statistic-pie-chart-container'], " statistic-chart-container")
+      }));
+    }
+  }]);
+  return PieChart;
+}(BaseChart);
+PieChart.propTypes = propTypes;
+export default PieChart;

package/es/stat-view/pivot-table/index.js

@@ -0,0 +1,206 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import PropTypes from 'prop-types';
+import intl from 'react-intl-universal';
+import { getDateDisplayString, getNumberDisplayString, TableUtils } from 'dtable-store';
+import BaseChart from '../base-chart';
+import OneDimensionTableNoNumericColumns from './one-dimension-table-no-numeric-columns';
+import TwoDimensionTable from './two-dimension-table';
+import OneDimensionTableWithNumericColumns from './one-dimension-table-with-numeric-columns';
+import { Loading } from '../../components';
+import { TIME_COLUMN_LIST, STAT_ITEM_THEME_COLORS, DEFAULT_NUMBER_FORMAT_OBJECT, SUMMARY_TYPE, NO_STATISTIC_RESULTS, TOO_MANY_STATISTIC_ENTRIES } from '../../constants';
+import styles from './statistic-pivot-table.module.css';
+var PivotTable = /*#__PURE__*/function (_BaseChart) {
+  _inherits(PivotTable, _BaseChart);
+  var _super = _createSuper(PivotTable);
+  function PivotTable(props) {
+    var _this;
+    _classCallCheck(this, PivotTable);
+    _this = _super.call(this, props);
+    _this.isValidValue = function (value) {
+      if (value === 0) return true;
+      return Boolean(value);
+    };
+    _this.renderPivotTable = function () {
+      var _this$props = _this.props,
+        statItem = _this$props.statItem,
+        isPreview = _this$props.isPreview,
+        theme = _this$props.theme,
+        isEnlarge = _this$props.isEnlarge,
+        getTableById = _this$props.getTableById;
+      var statData = _this.state.statData;
+      if (!Object.keys(statData).length > 0) return '';
+      var pivot_columns = statData.pivot_columns;
+      var column_groupby_column_key = statItem.column_groupby_column_key;
+      var themeColors = '#212529';
+      if (theme === 'dark' && !isEnlarge && isPreview) {
+        themeColors = STAT_ITEM_THEME_COLORS.dark;
+      }
+      if (Array.isArray(pivot_columns) && pivot_columns.length > 100) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: 'statistic-chart-text'
+        }, intl.get(TOO_MANY_STATISTIC_ENTRIES));
+      }
+      if (column_groupby_column_key) {
+        return /*#__PURE__*/React.createElement(TwoDimensionTable, {
+          pivotResult: _this.state.statData,
+          statItem: statItem,
+          isPreview: isPreview,
+          textColor: themeColors.textColor,
+          getTableById: getTableById,
+          isValidValue: _this.isValidValue,
+          getSummaryValueDisplayString: _this.getSummaryValueDisplayString,
+          toggleStatisticRecordsDialog: _this.props.toggleStatisticRecordsDialog
+        });
+      }
+      if (pivot_columns.length < 2) {
+        return /*#__PURE__*/React.createElement(OneDimensionTableNoNumericColumns, {
+          pivotResult: _this.state.statData,
+          statItem: statItem,
+          isPreview: isPreview,
+          textColor: themeColors.textColor,
+          getTableById: getTableById,
+          isValidValue: _this.isValidValue,
+          getSummaryValueDisplayString: _this.getSummaryValueDisplayString,
+          toggleStatisticRecordsDialog: _this.props.toggleStatisticRecordsDialog
+        });
+      }
+      return /*#__PURE__*/React.createElement(OneDimensionTableWithNumericColumns, {
+        getSummaryValueDisplayString: _this.getSummaryValueDisplayString,
+        pivotResult: _this.state.statData,
+        statItem: statItem,
+        isPreview: isPreview,
+        textColor: themeColors.textColor,
+        getTableById: getTableById,
+        isValidValue: _this.isValidValue,
+        toggleStatisticRecordsDialog: _this.props.toggleStatisticRecordsDialog
+      });
+    };
+    _this.getSummaryValueDisplayString = function (summaryColumn, summaryValue) {
+      var summaryMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : SUMMARY_TYPE.COUNT;
+      if (!summaryColumn || !summaryColumn.type) return summaryValue;
+      if (!summaryValue && summaryValue !== 0) return summaryValue;
+      if (summaryMethod.toUpperCase() === 'DISTINCT_VALUES') return summaryValue;
+      var data = summaryColumn.data;
+      if (TIME_COLUMN_LIST.includes(summaryColumn.type)) {
+        if (typeof summaryValue !== 'string') return summaryValue;
+        // The date returned by db carries T and Z, so that there is a time difference in data formatting
+        var _ref = data || {},
+          format = _ref.format;
+        return getDateDisplayString(summaryValue.replace(/[T|Z]/g, ' '), format);
+      }
+      if (typeof summaryValue !== 'number') return summaryValue;
+      return getNumberDisplayString(summaryValue, data || DEFAULT_NUMBER_FORMAT_OBJECT);
+    };
+    _this.getStatData = function () {
+      var _this$props2 = _this.props,
+        getTableById = _this$props2.getTableById,
+        statItem = _this$props2.statItem;
+      var table_id = statItem.table_id,
+        groupby_column_key = statItem.groupby_column_key,
+        column_groupby_column_key = statItem.column_groupby_column_key,
+        summary_column_key = statItem.summary_column_key;
+      var table = getTableById(table_id);
+      var groupbyColumn = groupby_column_key && TableUtils.getTableColumnByKey(table, groupby_column_key);
+      var columnGroupbyColumn = column_groupby_column_key && TableUtils.getTableColumnByKey(table, column_groupby_column_key);
+      var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column_key) || {};
+      return {
+        pivotResult: _this.state.statData,
+        statisticTableColumns: table.columns,
+        groupbyColumn: groupbyColumn,
+        columnGroupbyColumn: columnGroupbyColumn,
+        summaryColumn: summaryColumn
+      };
+    };
+    _this.state = {
+      isCalculatingData: true,
+      showResultDescription: true,
+      statData: null
+    };
+    _this.calculateData = null;
+    return _this;
+  }
+  _createClass(PivotTable, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      var _this$props3 = this.props,
+        statItem = _this$props3.statItem,
+        chartCalculator = _this$props3.chartCalculator;
+      chartCalculator.calculate(statItem).then(function (data) {
+        var showResultDescription = Object.keys(data).length > 0 ? false : true;
+        _this2.setState({
+          isCalculatingData: false,
+          showResultDescription: showResultDescription,
+          statData: data
+        });
+      });
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      if (this.canUpdate(this.props, nextProps) || nextState.isCalculatingData !== this.state.isCalculatingData || nextState.showResultDescription !== this.state.showResultDescription) {
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      var _this3 = this;
+      var nextStatItem = nextProps.statItem,
+        chartCalculator = nextProps.chartCalculator;
+      if (this.shouldCalculateStatItem(this.props, nextProps)) {
+        this.setState({
+          isCalculatingData: true
+        }, function () {
+          chartCalculator.calculate(nextStatItem).then(function (data) {
+            var showResultDescription = Object.keys(data).length > 0 ? false : true;
+            _this3.setState({
+              statData: data,
+              isCalculatingData: false,
+              showResultDescription: showResultDescription
+            });
+          });
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+      var isEdit = this.props.isEdit;
+      var _this$state = this.state,
+        isCalculatingData = _this$state.isCalculatingData,
+        showResultDescription = _this$state.showResultDescription;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData ? /*#__PURE__*/React.createElement("div", {
+        className: 'statistic-chart-loading-container'
+      }, /*#__PURE__*/React.createElement(Loading, null)) : /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref2) {
+          return _this4.container = _ref2;
+        },
+        style: isEdit ? {
+          padding: '15px 30px'
+        } : null,
+        className: "statistic-chart-container ".concat(styles['pivot-table-container'])
+      }, this.renderPivotTable()), showResultDescription && /*#__PURE__*/React.createElement("div", {
+        className: 'statistic-chart-text'
+      }, intl.get(NO_STATISTIC_RESULTS)));
+    }
+  }]);
+  return PivotTable;
+}(BaseChart);
+PivotTable.propTypes = {
+  isPreview: PropTypes.bool,
+  isEnlarge: PropTypes.bool,
+  isEdit: PropTypes.bool,
+  theme: PropTypes.string,
+  statItem: PropTypes.object,
+  chartCalculator: PropTypes.object,
+  getTableById: PropTypes.func,
+  toggleStatisticRecordsDialog: PropTypes.func
+};
+export default PivotTable;

package/es/stat-view/pivot-table/one-dimension-table-no-numeric-columns.js

@@ -0,0 +1,133 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { PureComponent } from 'react';
+import intl from 'react-intl-universal';
+import { TableUtils, Views } from 'dtable-store';
+import { isMobile } from '../../utils';
+import { EMPTY_NAME, TITLE_TOTAL } from '../../constants';
+import styles from './statistic-pivot-table.module.css';
+var OneDimensionTableNoNumericColumns = /*#__PURE__*/function (_PureComponent) {
+  _inherits(OneDimensionTableNoNumericColumns, _PureComponent);
+  var _super = _createSuper(OneDimensionTableNoNumericColumns);
+  function OneDimensionTableNoNumericColumns() {
+    var _this;
+    _classCallCheck(this, OneDimensionTableNoNumericColumns);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.toggleRecords = function (cell) {
+      if (isMobile) return;
+      _this.props.toggleStatisticRecordsDialog(cell, _this.props.statItem);
+    };
+    _this.onClickTotals = function (recordsList) {
+      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        isCurrentView = _ref.isCurrentView;
+      if (isMobile) return;
+      var _this$props = _this.props,
+        getTableById = _this$props.getTableById,
+        statItem = _this$props.statItem;
+      var rows = [];
+      var table_id = statItem.table_id,
+        view_id = statItem.view_id;
+      var table = getTableById(table_id);
+      var view = Views.getViewById(table.views, view_id);
+      if (!Views.isArchiveView(view)) {
+        rows = recordsList.flat();
+      }
+      _this.props.toggleStatisticRecordsDialog({
+        rows: rows
+      }, _this.props.statItem, {
+        isCurrentView: isCurrentView
+      });
+    };
+    _this.renderHeader = function (_ref2) {
+      var table = _ref2.table;
+      var statItem = _this.props.statItem;
+      var groupby_column_key = statItem.groupby_column_key,
+        _statItem$display_tot = statItem.display_total,
+        display_total = _statItem$display_tot === void 0 ? true : _statItem$display_tot;
+      var groupByColumn = TableUtils.getTableColumnByKey(table, groupby_column_key);
+      var _ref3 = groupByColumn || {},
+        groupName = _ref3.name;
+      return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+        className: "pivot-table-header"
+      }, /*#__PURE__*/React.createElement("div", null, groupName)), display_total && /*#__PURE__*/React.createElement("th", {
+        className: 'pivot-table-header'
+      }, /*#__PURE__*/React.createElement("div", null, intl.get(TITLE_TOTAL)))));
+    };
+    _this.renderRows = function (_ref4) {
+      var table = _ref4.table;
+      var _this$props2 = _this.props,
+        pivotResult = _this$props2.pivotResult,
+        statItem = _this$props2.statItem,
+        getSummaryValueDisplayString = _this$props2.getSummaryValueDisplayString;
+      var pivot_rows = pivotResult.pivot_rows,
+        pivot_columns_total = pivotResult.pivot_columns_total;
+      var summary_column_key = statItem.summary_column_key,
+        summary_method = statItem.summary_method,
+        _statItem$display_tot2 = statItem.display_total,
+        display_total = _statItem$display_tot2 === void 0 ? true : _statItem$display_tot2;
+      var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column_key) || {};
+      var columnTotal = getSummaryValueDisplayString(summaryColumn, pivot_columns_total['total'], summary_method);
+      var isValidTColumnTotal = _this.props.isValidValue(columnTotal);
+      var pivotColumnCells = [];
+      return /*#__PURE__*/React.createElement("tbody", null, pivot_rows.map(function (rowItem, rowIdx) {
+        var name = rowItem.name,
+          total = rowItem.total,
+          rows = rowItem.rows;
+        var totalDisplayValue = getSummaryValueDisplayString(summaryColumn, total.total, summary_method);
+        var isValidTotalDisplayValue = _this.props.isValidValue(totalDisplayValue);
+        pivotColumnCells[rowIdx] = rows;
+        return /*#__PURE__*/React.createElement("tr", {
+          key: 'table-row-' + rowIdx
+        }, /*#__PURE__*/React.createElement("td", {
+          className: 'pivot-row-name'
+        }, /*#__PURE__*/React.createElement("div", null, !name || name === 0 ? intl.get(EMPTY_NAME) : name)), display_total && /*#__PURE__*/React.createElement("td", {
+          className: "".concat(styles['pivot-cell'], " ").concat(isValidTotalDisplayValue ? '' : styles['pivot-empty-cell']),
+          title: isValidTotalDisplayValue ? totalDisplayValue : '',
+          onClick: function onClick() {
+            return _this.toggleRecords(rowItem);
+          }
+        }, isValidTotalDisplayValue ? /*#__PURE__*/React.createElement("div", null, totalDisplayValue) : /*#__PURE__*/React.createElement("i", null)));
+      }), display_total && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+        className: 'pivot-column-total'
+      }, /*#__PURE__*/React.createElement("div", null, intl.get(TITLE_TOTAL))), /*#__PURE__*/React.createElement("td", {
+        className: "".concat(styles['pivot-cell'], " pivot-table-total ").concat(isValidTColumnTotal ? '' : styles['pivot-empty-cell']),
+        onClick: function onClick() {
+          return _this.onClickTotals(pivotColumnCells, {
+            isCurrentView: true
+          });
+        },
+        title: isValidTColumnTotal ? columnTotal : ''
+      }, isValidTColumnTotal ? /*#__PURE__*/React.createElement("div", null, columnTotal) : /*#__PURE__*/React.createElement("i", null))));
+    };
+    return _this;
+  }
+  _createClass(OneDimensionTableNoNumericColumns, [{
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+        isPreview = _this$props3.isPreview,
+        textColor = _this$props3.textColor,
+        statItem = _this$props3.statItem,
+        getTableById = _this$props3.getTableById;
+      var table_id = statItem.table_id;
+      var table = getTableById(table_id);
+      return /*#__PURE__*/React.createElement("table", {
+        style: {
+          color: textColor
+        },
+        className: "".concat(isPreview ? styles['preview-pivot-table'] : styles['large-pivot-table'], " ").concat(styles['pivot-table'])
+      }, this.renderHeader({
+        table: table
+      }), this.renderRows({
+        table: table
+      }));
+    }
+  }]);
+  return OneDimensionTableNoNumericColumns;
+}(PureComponent);
+export default OneDimensionTableNoNumericColumns;