dtable-statistic 4.4.24-alpha.9 → 5.0.0

package/es/calculator/workers/scatter-calculator-worker.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _dtableUtils = require("dtable-utils");
+var _statUtils = _interopRequireDefault(require("../../utils/stat-utils"));
+var _commonUtils = require("../../utils/common-utils");
+var _rowUtils = require("../../utils/row-utils");
+var _constants = require("../../constants");
+async function calculateResult(chart, value, _ref) {
+  let {
+    getViewRows,
+    getTableFormulaResults
+  } = _ref;
+  const {
+    table_id,
+    view_id,
+    x_axis_column,
+    y_axis_column,
+    group_column
+  } = chart;
+  const table = (0, _dtableUtils.getTableById)(value.tables, table_id);
+  const view = table && (0, _dtableUtils.getViewById)(table.views, view_id);
+  if (!view) {
+    return [];
+  }
+  const selectedXAxisColumn = (0, _dtableUtils.getTableColumnByKey)(table, x_axis_column);
+  const selectedYAxisColumn = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_column);
+  const selectedGroupColumn = (0, _dtableUtils.getTableColumnByKey)(table, group_column);
+  const statRows = await getViewRows(view, table);
+  const formulaRows = await getTableFormulaResults(table, statRows);
+  const data = [];
+  statRows.forEach(row => {
+    const {
+      _id: rowId
+    } = row;
+    const formulaRow = formulaRows[rowId] || {};
+    let x_axis = (0, _rowUtils.getCellValue)(row, formulaRow, selectedXAxisColumn);
+    let y_axis = (0, _rowUtils.getCellValue)(row, formulaRow, selectedYAxisColumn);
+    x_axis = (0, _dtableUtils.isNumber)(x_axis) ? x_axis : 0;
+    y_axis = (0, _dtableUtils.isNumber)(y_axis) ? y_axis : 0;
+    const name = getColumnValue(row, formulaRow, selectedGroupColumn, value);
+    const nameIndex = data.findIndex(r => r.name === name && r.x_axis === x_axis && r.y_axis === y_axis);
+    const dataItem = {
+      x_axis,
+      y_axis,
+      group_by: name
+    };
+    updateBasicChartRows(data, nameIndex, name, dataItem, row);
+  });
+  return data;
+}
+function updateBasicChartRows(results, index, name, dataItem, row) {
+  let updatedResult;
+  if (index > -1) {
+    updatedResult = results[index];
+    updatedResult.rows.push(row);
+    results[index] = updatedResult;
+  } else {
+    updatedResult = {
+      ...dataItem,
+      name,
+      rows: [row]
+    };
+    results.push(updatedResult);
+  }
+}
+function getColumnValue(data, formulaRow, column, dtableValue) {
+  const tempValue = data[column.key];
+  let value = _statUtils.default.getGroupLabel(tempValue, formulaRow, column, _constants.DATE_GRANULARITY.DAY, '', dtableValue);
+  if ((0, _commonUtils.isArrayCellValue)(column)) {
+    value = value[0];
+  }
+  value = (0, _rowUtils.getFormattedLabel)(column, value, dtableValue.collaborators);
+  return value;
+}
+var _default = exports.default = calculateResult;

package/es/calculator/workers/trend-calculator-worker.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _quarterOfYear = _interopRequireDefault(require("dayjs/plugin/quarterOfYear"));
+var _dtableUtils = require("dtable-utils");
+var _constants = require("../../constants");
+var _statUtils = _interopRequireDefault(require("../../utils/stat-utils"));
+var _rowUtils = require("../../utils/row-utils");
+var _commonUtils = require("../../utils/common-utils");
+var _trendUtils = require("../../utils/trend-utils");
+_dayjs.default.extend(_quarterOfYear.default);
+async function calculateStatItem(chart, value, _ref) {
+  let {
+    getViewRows,
+    getTableFormulaResults
+  } = _ref;
+  const {
+    table_id,
+    view_id,
+    date_column,
+    date_granularity,
+    summary_column,
+    summary_type,
+    summary_method
+  } = chart;
+  const selectedTable = (0, _dtableUtils.getTableById)(value.tables, table_id);
+  const selectedView = selectedTable && (0, _dtableUtils.getViewById)(selectedTable.views, view_id);
+  const selectedColumn = (0, _dtableUtils.getTableColumnByKey)(selectedTable, date_column);
+  const resultMap = new Map();
+  let formulaRows = {};
+  const rows = await getViewRows(selectedView, selectedTable);
+  const numericColumn = (0, _dtableUtils.getTableColumnByKey)(selectedTable, summary_column);
+  if (summary_type === _constants.SUMMARY_TYPE.ADVANCED) {
+    if (_dtableUtils.FORMULA_COLUMN_TYPES_MAP[numericColumn.type]) {
+      formulaRows = await getTableFormulaResults(selectedTable, rows);
+    }
+  }
+  let granularity = date_granularity;
+  if (date_granularity === 'days_7' || date_granularity === 'days_30') {
+    granularity = 'day';
+  }
+  rows.forEach(row => {
+    const dateValue = row[selectedColumn.key];
+    const label = _statUtils.default.getGroupLabel(dateValue, {}, selectedColumn, granularity, '', value);
+    if (dateValue) {
+      if (summary_type === _constants.SUMMARY_TYPE.COUNT) {
+        const currentCount = resultMap.get(label) || 0;
+        resultMap.set(label, currentCount + 1);
+      } else {
+        const formulaRow = formulaRows[row._id];
+        const numericValue = (0, _rowUtils.getCellValue)(row, formulaRow, numericColumn);
+        const currentList = resultMap.get(label) || [];
+        if ((0, _dtableUtils.isNumber)(numericValue)) {
+          currentList.push(numericValue);
+        }
+        resultMap.set(label, currentList);
+      }
+    }
+  });
+  let currentValues, previousValues;
+  if (date_granularity === 'days_30' || date_granularity === 'days_7') {
+    const {
+      compareValue: value1,
+      comparedValue: value2
+    } = (0, _trendUtils.summaryDurationResult)(resultMap, date_granularity, summary_type, summary_column, false);
+    currentValues = value1;
+    previousValues = value2;
+  } else {
+    const {
+      compareDate,
+      comparedDate
+    } = (0, _trendUtils.getCompareDate)(date_granularity);
+    currentValues = resultMap.get(compareDate);
+    previousValues = resultMap.get(comparedDate);
+    if (summary_type === _constants.SUMMARY_TYPE.ADVANCED) {
+      if (currentValues) {
+        currentValues = (0, _commonUtils.getSummaryResult)(currentValues, summary_method);
+      }
+      if (previousValues) {
+        previousValues = (0, _commonUtils.getSummaryResult)(previousValues, summary_method);
+      }
+    }
+  }
+  if (!currentValues) {
+    return {
+      latest: null,
+      previous: previousValues || null
+    };
+  }
+  if (!previousValues) {
+    return {
+      latest: currentValues,
+      previous: null
+    };
+  }
+  return {
+    latest: currentValues,
+    previous: previousValues,
+    result: Math.abs(previousValues - currentValues) / previousValues,
+    type: currentValues > previousValues ? 'up' : 'down'
+  };
+}
+var _default = exports.default = calculateStatItem;

package/es/calculator/world-map-calculator.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _dtableUtils = require("dtable-utils");
+var _baseCalculator = _interopRequireDefault(require("./base-calculator"));
+var _commonUtils = require("../utils/common-utils");
+var _constants = require("../constants");
+var _statUtils = _interopRequireDefault(require("../utils/stat-utils"));
+class WorldMapCalculator extends _baseCalculator.default {
+  isValidChart(chart) {
+    if (!this.validateBaseConfigs(chart)) {
+      return false;
+    }
+    const {
+      table_id,
+      column,
+      summary_column
+    } = chart;
+    const table = this.getTableById(table_id);
+    const selectedColumn = column && (0, _dtableUtils.getTableColumnByKey)(table, column);
+    if (column && !selectedColumn) {
+      return false;
+    }
+    if (summary_column && !(0, _dtableUtils.getTableColumnByKey)(table, summary_column)) {
+      return false;
+    }
+    return true;
+  }
+  async calculate(chart) {
+    if (!this.isValidChart(chart)) return [];
+    if (this.isCalcByQueryDB(chart)) {
+      return await this.queryDb(chart);
+    }
+    const convertedChart = this.convertChart(chart);
+    return await this.calculateWithWorker(convertedChart);
+  }
+  async queryDb(chart) {
+    const {
+      table_id,
+      view_id,
+      column,
+      summary_type,
+      summary_method,
+      summary_column
+    } = chart;
+    const selectedTable = this.getTableById(table_id);
+    const selectedView = this.getViewById(view_id, selectedTable);
+    const selectedColumn = (0, _dtableUtils.getTableColumnByKey)(selectedTable, column);
+    if (!selectedColumn) return [];
+    const columnName = selectedColumn.name;
+    const isAdvanced = summary_type === 'advanced';
+    const method = isAdvanced ? _constants.DTABLE_DB_SUMMARY_METHOD[summary_method] : 'COUNT';
+    const sqlCondition = this.filter2SqlCondition(selectedTable, selectedView);
+    let summaryColumnName = '';
+    let summaryColumn;
+    let sqlString = '';
+    if (isAdvanced) {
+      summaryColumn = (0, _dtableUtils.getTableColumnByKey)(selectedTable, summary_column);
+      if (!summaryColumn) {
+        return [];
+      }
+      summaryColumnName = summaryColumn.name;
+      const summaryColumnMethod = (0, _commonUtils.getSummaryColumnMethod)(method, summaryColumnName);
+      sqlString = "select `".concat(columnName, "`, ").concat(summaryColumnMethod, " from ").concat(selectedTable.name, " ").concat(sqlCondition, " group by ").concat(columnName, " limit 5000");
+    } else {
+      sqlString = "select `".concat(columnName, "`, ").concat(method, "(").concat(columnName, ") from ").concat(selectedTable.name, " ").concat(sqlCondition, " group by ").concat(columnName, " limit 5000");
+    }
+    const result = await this.sqlQuery(sqlString);
+    if (result.status === 200 && result.data.success) {
+      const data = result.data;
+      if (!data.results) return [];
+      const newResult = [];
+      const summaryColumnMethod = (0, _commonUtils.getSummaryColumnMethod)(method, summaryColumnName);
+      const valueKey = isAdvanced ? "".concat(summaryColumnMethod) : "".concat(method, "(").concat(columnName, ")");
+      data.results.forEach(item => {
+        const currentValue = item[column];
+        let value = item[valueKey];
+        let formatted_value = value;
+        if (isAdvanced) {
+          value = (0, _commonUtils.formatNumericValue)(value, summaryColumn);
+          formatted_value = _statUtils.default.getFormattedValue(value, summaryColumn, summary_method);
+        }
+        if (currentValue) {
+          const name = typeof currentValue === 'string' ? currentValue : currentValue.country_region;
+          newResult.push({
+            name,
+            value,
+            formatted_value
+          });
+        }
+      });
+      return newResult;
+    }
+    return [];
+  }
+  convertChart(chart) {
+    const {
+      _id,
+      type,
+      table_id,
+      view_id,
+      column,
+      summary_type,
+      summary_column,
+      summary_method
+    } = chart;
+    return {
+      _id,
+      type,
+      table_id,
+      view_id,
+      geo_column: column,
+      summary_type,
+      summary_method,
+      summary_column,
+      geolocation_granularity: 'country_region'
+    };
+  }
+}
+var _default = exports.default = WorldMapCalculator;

package/es/components/dialog/chart-addition-edit-dialog.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _reactstrap = require("reactstrap");
+var _chartSelector = _interopRequireDefault(require("./chart-addition-widgets/chart-selector"));
+var _statEditor = _interopRequireDefault(require("../../stat-editor"));
+class ChartAdditionEditDialog extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.addChart = chartType => {
+      const chart = this.props.generateChart(chartType);
+      this.setState({
+        chart
+      });
+    };
+    this.modifyChartName = name => {
+      const updatedChart = {
+        ...this.state.chart,
+        name
+      };
+      this.modifyChart(updatedChart);
+    };
+    this.modifyChart = chart => {
+      this.setState({
+        chart
+      });
+    };
+    this.state = {
+      chart: props.editingChart || null
+    };
+  }
+  componentWillUnmount() {
+    const {
+      chart
+    } = this.state;
+    if (this.props.editingChart) {
+      this.props.modifyChart(chart);
+    } else {
+      this.props.addChart(chart);
+    }
+  }
+  render() {
+    const {
+      getTableById,
+      colorThemeName,
+      labelColorConfigs,
+      chartCalculator,
+      eventBus
+    } = this.props;
+    const {
+      chart
+    } = this.state;
+    const editMode = !!chart;
+    return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+      isOpen: true,
+      toggle: this.props.hideChartAdditionDialog,
+      className: "statistic-chart-addition-dialog",
+      zIndex: 1048
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.ModalHeader, {
+      toggle: this.props.hideChartAdditionDialog
+    }, _reactIntlUniversal.default.get(editMode ? 'Edit_the_chart' : 'All_charts')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
+      className: "statistic-modal-body"
+    }, editMode ? /*#__PURE__*/_react.default.createElement(_statEditor.default, {
+      dtableChangedTime: this.props.dtableChangedTime,
+      colorThemeName: colorThemeName,
+      statItem: chart,
+      labelColorConfigs: labelColorConfigs,
+      chartCalculator: chartCalculator,
+      eventBus: eventBus,
+      getTables: this.props.getTables,
+      getViews: this.props.getViews,
+      getTableById: getTableById,
+      queryMapJson: this.props.queryMapJson,
+      getConvertedChart: this.props.getConvertedChart,
+      modifyChartName: this.modifyChartName,
+      modifyChart: this.modifyChart,
+      toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog
+    }) : /*#__PURE__*/_react.default.createElement(_chartSelector.default, {
+      addEditingChart: this.addChart
+    })));
+  }
+}
+var _default = exports.default = ChartAdditionEditDialog;

package/es/components/dialog/chart-addition-widgets/chart-selector.js

@@ -0,0 +1,259 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactstrap = require("reactstrap");
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _constants = require("../../../constants");
+var _commonUtils = require("../../../utils/common-utils");
+var _statisticChartSelectorModule = _interopRequireDefault(require("./statistic-chart-selector.module.css"));
+class ChartSelector extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.setCurrentCatIndex = (index, e) => {
+      // in `dtable` project, there is `window.addEventListener('popstate', this.onHistoryState);`
+      // don't use anchor links here to avoid triggering 'popstate' event
+      e.preventDefault();
+      this.setState({
+        currentCatIndex: index
+      });
+      document.getElementById('chart-types-container').scrollTop = document.getElementById("chart-type-".concat(index + 1)).offsetTop - 17;
+    };
+    this.state = {
+      currentCatIndex: 0
+    };
+    const lang = window.dtable && window.dtable.lang || 'zh-cn';
+    this.chartTypes = [{
+      catTitle: _reactIntlUniversal.default.get('Histogram'),
+      icon: 'dtable-icon-histogram',
+      items: [{
+        type: _constants.STAT_TYPE.BAR,
+        title: _reactIntlUniversal.default.get('Basic_histogram'),
+        image: 'bar.png'
+      }, {
+        type: _constants.STAT_TYPE.BAR_GROUP,
+        title: _reactIntlUniversal.default.get('Grouped_histogram'),
+        image: 'bar-group.png'
+      }, {
+        type: _constants.STAT_TYPE.BAR_STACK,
+        title: _reactIntlUniversal.default.get('Stacked_histogram'),
+        image: 'bar-stack.png'
+      }, {
+        type: _constants.STAT_TYPE.COMPARE_BAR,
+        title: _reactIntlUniversal.default.get('Time_comparison_histogram'),
+        image: 'compared-chart.png'
+      }, {
+        type: _constants.STAT_TYPE.CUSTOM_BAR,
+        title: _reactIntlUniversal.default.get('Custom_histogram'),
+        image: 'custom-bar.png'
+      }]
+    }, {
+      catTitle: _reactIntlUniversal.default.get('Bar_chart'),
+      icon: 'dtable-icon-bar-chart',
+      items: [{
+        type: _constants.STAT_TYPE.HORIZONTAL_BAR,
+        title: _reactIntlUniversal.default.get('Basic_bar_chart'),
+        image: 'horizontal-bar.png'
+      }, {
+        type: _constants.STAT_TYPE.HORIZONTAL_GROUP_BAR,
+        title: _reactIntlUniversal.default.get('Grouped_bar_chart'),
+        image: 'horizontal-group-bar.png'
+      }, {
+        type: _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR,
+        title: _reactIntlUniversal.default.get('Stacked_bar_chart'),
+        image: 'stacked-horizontal-bar.png'
+      }, {
+        type: _constants.STAT_TYPE.COMPLETENESS_CHART,
+        title: _reactIntlUniversal.default.get('Completeness_chart'),
+        image: 'completeness-chart.png'
+      }, {
+        type: _constants.STAT_TYPE.GROUP_COMPLETENESS_CHART,
+        title: _reactIntlUniversal.default.get('Grouped_completeness_chart'),
+        image: 'group-completeness-chart.png'
+      }]
+    }, {
+      catTitle: _reactIntlUniversal.default.get('Line_chart'),
+      icon: 'dtable-icon-line-chart',
+      items: [{
+        type: _constants.STAT_TYPE.LINE,
+        title: _reactIntlUniversal.default.get('Basic_line_chart'),
+        image: 'line.png'
+      }, {
+        type: _constants.STAT_TYPE.GROUP_LINE,
+        title: _reactIntlUniversal.default.get('Grouped_line_chart'),
+        image: 'group_line.png'
+      }]
+    }, {
+      catTitle: _reactIntlUniversal.default.get('Area_chart'),
+      icon: 'dtable-icon-area-chart',
+      items: [{
+        type: _constants.STAT_TYPE.AREA_CHART,
+        title: _reactIntlUniversal.default.get('Area_chart'),
+        image: 'area-chart.png'
+      }, {
+        type: _constants.STAT_TYPE.AREA_GROUP_CHART,
+        title: _reactIntlUniversal.default.get('Grouped_area_chart'),
+        image: 'area-group-chart.png'
+      }]
+    }, {
+      catTitle: _reactIntlUniversal.default.get('Pie_chart'),
+      icon: 'dtable-icon-pie-chart',
+      items: [{
+        type: _constants.STAT_TYPE.PIE,
+        title: _reactIntlUniversal.default.get('Basic_pie_chart'),
+        image: 'pie.png'
+      }, {
+        type: _constants.STAT_TYPE.RING,
+        title: _reactIntlUniversal.default.get('Ring_chart'),
+        image: 'ring.png'
+      }]
+    }, {
+      catTitle: _reactIntlUniversal.default.get('Scatter_chart'),
+      icon: 'dtable-icon-scatter-chart',
+      items: [{
+        type: _constants.STAT_TYPE.SCATTER,
+        title: _reactIntlUniversal.default.get('Scatter_chart'),
+        image: 'scatter.png'
+      }]
+    }, {
+      catTitle: _reactIntlUniversal.default.get('Combination_chart'),
+      icon: 'dtable-icon-combination-chart',
+      items: [{
+        type: _constants.STAT_TYPE.COMBINATION_CHART,
+        title: _reactIntlUniversal.default.get('Combination_chart'),
+        image: 'combination-chart.png'
+      }]
+    }, {
+      catTitle: _reactIntlUniversal.default.get('Map'),
+      icon: 'dtable-icon-map',
+      items: [{
+        type: _constants.STAT_TYPE.MAP,
+        title: '中国地图',
+        image: 'map.png',
+        hide: lang !== 'zh-cn'
+      }, {
+        type: _constants.STAT_TYPE.MAP_BUBBLE,
+        title: '中国地图(气泡图)',
+        image: 'map-bubble.png',
+        hide: lang !== 'zh-cn'
+      }, {
+        type: _constants.STAT_TYPE.WORLD_MAP,
+        title: _reactIntlUniversal.default.get('World_map'),
+        image: 'world-map.png'
+      }, {
+        type: _constants.STAT_TYPE.WORLD_MAP_BUBBLE,
+        title: "".concat(_reactIntlUniversal.default.get('World_map'), "(").concat(_reactIntlUniversal.default.get('Bubble'), ")"),
+        image: 'world-map-bubble.png'
+      }]
+    }, {
+      catTitle: _reactIntlUniversal.default.get('Heat_map'),
+      icon: 'dtable-icon-heat-map',
+      items: [{
+        type: _constants.STAT_TYPE.HEAT_MAP,
+        title: _reactIntlUniversal.default.get('Heat_map'),
+        image: 'heat-map.png'
+      }]
+    }, {
+      catTitle: _reactIntlUniversal.default.get('Facet_chart'),
+      icon: 'dtable-icon-facet-chart',
+      items: [{
+        type: _constants.STAT_TYPE.MIRROR,
+        title: _reactIntlUniversal.default.get('Mirror_chart'),
+        image: 'mirror.png'
+      }]
+    }, {
+      catTitle: _reactIntlUniversal.default.get('Card'),
+      icon: 'dtable-icon-card',
+      items: [{
+        type: _constants.STAT_TYPE.BASIC_NUMBER_CARD,
+        title: _reactIntlUniversal.default.get('Basic_number_card'),
+        image: 'number-card.png'
+      }, {
+        type: _constants.STAT_TYPE.TREND_CHART,
+        title: _reactIntlUniversal.default.get('Trend_card'),
+        image: 'trend-chart.png'
+      }]
+    }, {
+      catTitle: _reactIntlUniversal.default.get('Gauge'),
+      icon: 'dtable-icon-gauge',
+      items: [{
+        type: _constants.STAT_TYPE.DASHBOARD,
+        title: _reactIntlUniversal.default.get('Gauge'),
+        image: 'dashboard-chart.png'
+      }]
+    }, {
+      catTitle: _reactIntlUniversal.default.get('Treemap'),
+      icon: 'dtable-icon-rectangular-tree-diagram',
+      items: [{
+        type: _constants.STAT_TYPE.TREEMAP,
+        title: _reactIntlUniversal.default.get('Treemap'),
+        image: 'treemap.png'
+      }]
+    }, {
+      catTitle: _reactIntlUniversal.default.get('Pivot_table'),
+      icon: 'dtable-icon-dtable-logo',
+      items: [{
+        type: _constants.STAT_TYPE.PIVOT_TABLE,
+        title: _reactIntlUniversal.default.get('Pivot_table'),
+        image: 'pivot-table.png'
+      }]
+    }];
+  }
+  render() {
+    const {
+      selectedType
+    } = this.props;
+    const {
+      currentCatIndex
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(_statisticChartSelectorModule.default['statistic-types-container'], " d-flex flex-column h-100")
+    }, /*#__PURE__*/_react.default.createElement("ul", {
+      className: "".concat(_statisticChartSelectorModule.default['chart-categories-nav'], " flex-shrink-0 d-flex flex-wrap align-items-center list-unstyled")
+    }, this.chartTypes.map((item, index) => {
+      return /*#__PURE__*/_react.default.createElement("li", {
+        key: index,
+        className: 'px-4 py-2 chart-cat-nav-item'
+      }, /*#__PURE__*/_react.default.createElement("i", {
+        id: item.icon,
+        className: "".concat(_statisticChartSelectorModule.default['chart-icon'], " dtable-font ").concat(item.icon, " ").concat(currentCatIndex === index ? "".concat(_statisticChartSelectorModule.default['icon-highlight']) : ''),
+        onClick: this.setCurrentCatIndex.bind(this, index)
+      }), /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledTooltip, {
+        placement: "bottom",
+        target: item.icon
+      }, item.catTitle));
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      id: "chart-types-container",
+      className: "flex-fill o-auto ".concat(_statisticChartSelectorModule.default['statistic-type'])
+    }, this.chartTypes.map((item, index) => {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: "chart-type-".concat(index),
+        className: "mb-7"
+      }, /*#__PURE__*/_react.default.createElement("h3", {
+        className: "".concat(_statisticChartSelectorModule.default['statistic-type-title'], " m-0"),
+        id: "chart-type-".concat(index + 1)
+      }, item.catTitle), /*#__PURE__*/_react.default.createElement("div", {
+        className: 'd-flex flex-wrap'
+      }, item.items.map((chart, index) => {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: index,
+          onClick: this.props.addEditingChart.bind(this, chart.type),
+          className: "".concat(_statisticChartSelectorModule.default['statistic-type-item'], " ").concat(selectedType === chart.type ? _statisticChartSelectorModule.default['statistic-type-item-selected'] : '', " ").concat(chart.hide ? 'd-none' : '')
+        }, /*#__PURE__*/_react.default.createElement("p", {
+          className: "".concat(_statisticChartSelectorModule.default['statistic-type-description'])
+        }, chart.title), /*#__PURE__*/_react.default.createElement("div", {
+          className: "".concat(_statisticChartSelectorModule.default['statistic-type-image-container'])
+        }, /*#__PURE__*/_react.default.createElement("img", {
+          src: (0, _commonUtils.getImageUrl)(chart.image),
+          alt: "",
+          className: "".concat(_statisticChartSelectorModule.default['statistic-type-demo-chart-image'])
+        })));
+      })));
+    })));
+  }
+}
+var _default = exports.default = ChartSelector;