dtable-statistic 4.0.2-test-2

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

@@ -0,0 +1,93 @@
+import dayjs from 'dayjs';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+import { FORMULA_COLUMN_TYPES_MAP, isNumber, TableUtils, Views } from 'dtable-store';
+import { SUMMARY_TYPE } from '../../constants';
+import StatUtils from '../../utils/stat-utils';
+import { getCellValue } from '../../utils/row-utils';
+import { getSummaryResult } from '../../utils/common-utils';
+import { getCompareDate, summaryDurationResult } from '../../utils/trend-utils';
+dayjs.extend(quarterOfYear);
+function calculateStatItem(chart, value, username, userId) {
+  var table_id = chart.table_id,
+    view_id = chart.view_id,
+    date_column = chart.date_column,
+    date_granularity = chart.date_granularity,
+    summary_column = chart.summary_column,
+    summary_type = chart.summary_type,
+    summary_method = chart.summary_method;
+  var selectedTable = TableUtils.getTableById(value.tables, table_id);
+  var selectedView = selectedTable && Views.getViewById(selectedTable.views, view_id);
+  var selectedColumn = TableUtils.getTableColumnByKey(selectedTable, date_column);
+  var resultMap = new Map();
+  var formulaRows = {};
+  var rows = Views.getViewRows(selectedView, selectedTable, value, username, userId);
+  var numericColumn = TableUtils.getTableColumnByKey(selectedTable, summary_column);
+  if (summary_type === SUMMARY_TYPE.ADVANCED) {
+    if (FORMULA_COLUMN_TYPES_MAP[numericColumn.type]) {
+      formulaRows = Views.getTableFormulaResults(selectedTable, rows, value);
+    }
+  }
+  var granularity = date_granularity;
+  if (date_granularity === 'days_7' || date_granularity === 'days_30') {
+    granularity = 'day';
+  }
+  rows.forEach(function (row) {
+    var dateValue = row[selectedColumn.key];
+    var label = StatUtils.getGroupLabel(dateValue, {}, selectedColumn, granularity, '', value);
+    if (dateValue) {
+      if (summary_type === SUMMARY_TYPE.COUNT) {
+        var currentCount = resultMap.get(label) || 0;
+        resultMap.set(label, currentCount + 1);
+      } else {
+        var formulaRow = formulaRows[row._id];
+        var numericValue = getCellValue(row, formulaRow, numericColumn);
+        var currentList = resultMap.get(label) || [];
+        if (isNumber(numericValue)) {
+          currentList.push(numericValue);
+        }
+        resultMap.set(label, currentList);
+      }
+    }
+  });
+  var currentValues, previousValues;
+  if (date_granularity === 'days_30' || date_granularity === 'days_7') {
+    var _summaryDurationResul = summaryDurationResult(resultMap, date_granularity, summary_type, summary_column, false),
+      value1 = _summaryDurationResul.compareValue,
+      value2 = _summaryDurationResul.comparedValue;
+    currentValues = value1;
+    previousValues = value2;
+  } else {
+    var _getCompareDate = getCompareDate(date_granularity),
+      compareDate = _getCompareDate.compareDate,
+      comparedDate = _getCompareDate.comparedDate;
+    currentValues = resultMap.get(compareDate);
+    previousValues = resultMap.get(comparedDate);
+    if (summary_type === SUMMARY_TYPE.ADVANCED) {
+      if (currentValues) {
+        currentValues = getSummaryResult(currentValues, summary_method);
+      }
+      if (previousValues) {
+        previousValues = 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'
+  };
+}
+export default calculateStatItem;

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

@@ -0,0 +1,193 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+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 { filter2SqlCondition, TableUtils } from 'dtable-store';
+import BaseCalculator from './base-calculator';
+import { formatNumericValue, getSummaryColumnMethod } from '../utils/common-utils';
+import { DTABLE_DB_SUMMARY_METHOD } from '../constants';
+var WorldMapCalculator = /*#__PURE__*/function (_BaseCalculator) {
+  _inherits(WorldMapCalculator, _BaseCalculator);
+  var _super = _createSuper(WorldMapCalculator);
+  function WorldMapCalculator(_ref) {
+    var value = _ref.value,
+      statisticThreadManager = _ref.statisticThreadManager,
+      username = _ref.username,
+      userId = _ref.userId;
+    _classCallCheck(this, WorldMapCalculator);
+    return _super.call(this, {
+      value: value,
+      statisticThreadManager: statisticThreadManager,
+      username: username,
+      userId: userId
+    });
+  }
+  _createClass(WorldMapCalculator, [{
+    key: "isValidChart",
+    value: function isValidChart(chart) {
+      if (!this.validateBaseConfigs(chart)) {
+        return false;
+      }
+      var table_id = chart.table_id,
+        column = chart.column,
+        summary_column = chart.summary_column;
+      var table = this.getTableById(table_id);
+      var selectedColumn = column && TableUtils.getTableColumnByKey(table, column);
+      if (column && !selectedColumn) {
+        return false;
+      }
+      if (summary_column && !TableUtils.getTableColumnByKey(table, summary_column)) {
+        return false;
+      }
+      return true;
+    }
+  }, {
+    key: "calculate",
+    value: function () {
+      var _calculate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(chart) {
+        var convertedChart;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (this.isValidChart(chart)) {
+                  _context.next = 2;
+                  break;
+                }
+                return _context.abrupt("return", []);
+              case 2:
+                if (!this.isCalcByQueryDB(chart)) {
+                  _context.next = 6;
+                  break;
+                }
+                _context.next = 5;
+                return this.queryDb(chart);
+              case 5:
+                return _context.abrupt("return", _context.sent);
+              case 6:
+                convertedChart = this.convertChart(chart);
+                _context.next = 9;
+                return this.calculateWithWorker(convertedChart);
+              case 9:
+                return _context.abrupt("return", _context.sent);
+              case 10:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+      function calculate(_x) {
+        return _calculate.apply(this, arguments);
+      }
+      return calculate;
+    }()
+  }, {
+    key: "queryDb",
+    value: function () {
+      var _queryDb = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(chart) {
+        var table_id, view_id, column, summary_type, summary_method, summary_column, selectedTable, selectedView, selectedColumn, columnName, isAdvanced, method, sqlCondition, summaryColumnName, summaryColumn, sqlString, summaryColumnMethod, result, data, newResult, _summaryColumnMethod, valueKey;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                table_id = chart.table_id, view_id = chart.view_id, column = chart.column, summary_type = chart.summary_type, summary_method = chart.summary_method, summary_column = chart.summary_column;
+                selectedTable = this.getTableById(table_id);
+                selectedView = this.getViewById(view_id, selectedTable);
+                selectedColumn = TableUtils.getTableColumnByKey(selectedTable, column);
+                if (selectedColumn) {
+                  _context2.next = 6;
+                  break;
+                }
+                return _context2.abrupt("return", []);
+              case 6:
+                columnName = selectedColumn.name;
+                isAdvanced = summary_type === 'advanced';
+                method = isAdvanced ? DTABLE_DB_SUMMARY_METHOD[summary_method] : 'COUNT';
+                sqlCondition = filter2SqlCondition(selectedTable, selectedView);
+                summaryColumnName = '';
+                sqlString = '';
+                if (isAdvanced) {
+                  summaryColumn = TableUtils.getTableColumnByKey(selectedTable, summary_column);
+                  summaryColumnName = summaryColumn.name;
+                  summaryColumnMethod = 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");
+                }
+                _context2.next = 15;
+                return this.sqlQuery(sqlString);
+              case 15:
+                result = _context2.sent;
+                if (!(result.status === 200 && result.data.success)) {
+                  _context2.next = 25;
+                  break;
+                }
+                data = result.data;
+                if (data.results) {
+                  _context2.next = 20;
+                  break;
+                }
+                return _context2.abrupt("return", []);
+              case 20:
+                newResult = [];
+                _summaryColumnMethod = getSummaryColumnMethod(method, summaryColumnName);
+                valueKey = isAdvanced ? "".concat(_summaryColumnMethod) : "".concat(method, "(").concat(columnName, ")");
+                data.results.forEach(function (item) {
+                  var currentValue = item[column];
+                  var value = item[valueKey];
+                  if (isAdvanced) {
+                    value = formatNumericValue(value, summaryColumn);
+                  }
+                  if (currentValue) {
+                    var name = typeof currentValue === 'string' ? currentValue : currentValue.country_region;
+                    newResult.push({
+                      name: name,
+                      value: value
+                    });
+                  }
+                });
+                return _context2.abrupt("return", newResult);
+              case 25:
+                return _context2.abrupt("return", []);
+              case 26:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+      function queryDb(_x2) {
+        return _queryDb.apply(this, arguments);
+      }
+      return queryDb;
+    }()
+  }, {
+    key: "convertChart",
+    value: function convertChart(chart) {
+      var _id = chart._id,
+        type = chart.type,
+        table_id = chart.table_id,
+        view_id = chart.view_id,
+        column = chart.column,
+        summary_type = chart.summary_type,
+        summary_column = chart.summary_column,
+        summary_method = chart.summary_method;
+      return {
+        _id: _id,
+        type: type,
+        table_id: table_id,
+        view_id: view_id,
+        geo_column: column,
+        summary_type: summary_type,
+        summary_method: summary_method,
+        summary_column: summary_column,
+        geolocation_granularity: 'country_region'
+      };
+    }
+  }]);
+  return WorldMapCalculator;
+}(BaseCalculator);
+export default WorldMapCalculator;

package/es/components/common-add-tool.js

@@ -0,0 +1,19 @@
+import React from 'react';
+function CommonAddTool(props) {
+  var callBack = props.callBack,
+    footerName = props.footerName,
+    className = props.className,
+    addIconClassName = props.addIconClassName;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "add-item-btn ".concat(className ? className : ''),
+    onClick: function onClick(e) {
+      callBack(e);
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "dtable-font dtable-icon-add-table ".concat(addIconClassName || '')
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "add-new-option text-truncate",
+    title: footerName
+  }, footerName));
+}
+export default CommonAddTool;

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

@@ -0,0 +1,89 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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, { Component } from 'react';
+import intl from 'react-intl-universal';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import ChartSelector from './chart-addition-widgets/chart-selector';
+import StatEditor from '../../stat-editor';
+var ChartAdditionEditDialog = /*#__PURE__*/function (_Component) {
+  _inherits(ChartAdditionEditDialog, _Component);
+  var _super = _createSuper(ChartAdditionEditDialog);
+  function ChartAdditionEditDialog(props) {
+    var _this;
+    _classCallCheck(this, ChartAdditionEditDialog);
+    _this = _super.call(this, props);
+    _this.addChart = function (chartType) {
+      var chart = _this.props.generateChart(chartType);
+      _this.setState({
+        chart: chart
+      });
+    };
+    _this.modifyChartName = function (name) {
+      var updatedChart = _objectSpread(_objectSpread({}, _this.state.chart), {}, {
+        name: name
+      });
+      _this.modifyChart(updatedChart);
+    };
+    _this.modifyChart = function (chart) {
+      _this.setState({
+        chart: chart
+      });
+    };
+    _this.state = {
+      chart: props.editingChart || null
+    };
+    return _this;
+  }
+  _createClass(ChartAdditionEditDialog, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var chart = this.state.chart;
+      if (this.props.editingChart) {
+        this.props.modifyChart(chart);
+      } else {
+        this.props.addChart(chart);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        getTableById = _this$props.getTableById,
+        colorThemeName = _this$props.colorThemeName,
+        labelColorConfigs = _this$props.labelColorConfigs,
+        chartCalculator = _this$props.chartCalculator,
+        eventBus = _this$props.eventBus;
+      var chart = this.state.chart;
+      var editMode = !!chart;
+      return /*#__PURE__*/React.createElement(Modal, {
+        isOpen: true,
+        toggle: this.props.hideChartAdditionDialog,
+        className: "statistic-chart-addition-dialog",
+        zIndex: 1048
+      }, /*#__PURE__*/React.createElement(ModalHeader, {
+        toggle: this.props.hideChartAdditionDialog
+      }, intl.get(editMode ? 'Edit_the_chart' : 'Choose_a_chart')), /*#__PURE__*/React.createElement(ModalBody, {
+        className: "statistic-modal-body"
+      }, editMode ? /*#__PURE__*/React.createElement(StatEditor, {
+        colorThemeName: colorThemeName,
+        statItem: chart,
+        labelColorConfigs: labelColorConfigs,
+        chartCalculator: chartCalculator,
+        eventBus: eventBus,
+        getTables: this.props.getTables,
+        getViews: this.props.getViews,
+        getTableById: getTableById,
+        modifyChartName: this.modifyChartName,
+        modifyChart: this.modifyChart,
+        toggleStatisticRecordsDialog: this.props.toggleStatisticRecordsDialog
+      }) : /*#__PURE__*/React.createElement(ChartSelector, {
+        addEditingChart: this.addChart
+      })));
+    }
+  }]);
+  return ChartAdditionEditDialog;
+}(Component);
+export default ChartAdditionEditDialog;

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

@@ -0,0 +1,261 @@
+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 { UncontrolledTooltip } from 'reactstrap';
+import intl from 'react-intl-universal';
+import { STAT_TYPE } from '../../../constants';
+import { getImageUrl } from '../../../utils/common-utils';
+import styles from './statistic-chart-selector.module.css';
+var ChartSelector = /*#__PURE__*/function (_React$Component) {
+  _inherits(ChartSelector, _React$Component);
+  var _super = _createSuper(ChartSelector);
+  function ChartSelector(props) {
+    var _this;
+    _classCallCheck(this, ChartSelector);
+    _this = _super.call(this, props);
+    _this.setCurrentCatIndex = function (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
+    };
+    var lang = window.dtable && window.dtable.lang || 'zh-cn';
+    _this.chartTypes = [{
+      catTitle: intl.get('Histogram'),
+      icon: 'dtable-icon-histogram',
+      items: [{
+        type: STAT_TYPE.BAR,
+        title: intl.get('Basic_histogram'),
+        image: 'bar.png'
+      }, {
+        type: STAT_TYPE.BAR_GROUP,
+        title: intl.get('Grouped_histogram'),
+        image: 'bar-group.png'
+      }, {
+        type: STAT_TYPE.BAR_STACK,
+        title: intl.get('Stacked_histogram'),
+        image: 'bar-stack.png'
+      }, {
+        type: STAT_TYPE.COMPARE_BAR,
+        title: intl.get('Time_comparison_histogram'),
+        image: 'compared-chart.png'
+      }, {
+        type: STAT_TYPE.CUSTOM_BAR,
+        title: intl.get('Custom_histogram'),
+        image: 'custom-bar.png'
+      }]
+    }, {
+      catTitle: intl.get('Bar_chart'),
+      icon: 'dtable-icon-bar-chart',
+      items: [{
+        type: STAT_TYPE.HORIZONTAL_BAR,
+        title: intl.get('Basic_bar_chart'),
+        image: 'horizontal-bar.png'
+      }, {
+        type: STAT_TYPE.HORIZONTAL_GROUP_BAR,
+        title: intl.get('Grouped_bar_chart'),
+        image: 'horizontal-group-bar.png'
+      }, {
+        type: STAT_TYPE.STACKED_HORIZONTAL_BAR,
+        title: intl.get('Stacked_bar_chart'),
+        image: 'stacked-horizontal-bar.png'
+      }, {
+        type: STAT_TYPE.COMPLETENESS_CHART,
+        title: intl.get('Completeness_chart'),
+        image: 'completeness-chart.png'
+      }, {
+        type: STAT_TYPE.GROUP_COMPLETENESS_CHART,
+        title: intl.get('Grouped_completeness_chart'),
+        image: 'group-completeness-chart.png'
+      }]
+    }, {
+      catTitle: intl.get('Line_chart'),
+      icon: 'dtable-icon-line-chart',
+      items: [{
+        type: STAT_TYPE.LINE,
+        title: intl.get('Basic_line_chart'),
+        image: 'line.png'
+      }, {
+        type: STAT_TYPE.GROUP_LINE,
+        title: intl.get('Grouped_line_chart'),
+        image: 'group_line.png'
+      }]
+    }, {
+      catTitle: intl.get('Area_chart'),
+      icon: 'dtable-icon-area-chart',
+      items: [{
+        type: STAT_TYPE.AREA_CHART,
+        title: intl.get('Area_chart'),
+        image: 'area-chart.png'
+      }, {
+        type: STAT_TYPE.AREA_GROUP_CHART,
+        title: intl.get('Grouped_area_chart'),
+        image: 'area-group-chart.png'
+      }]
+    }, {
+      catTitle: intl.get('Pie_chart'),
+      icon: 'dtable-icon-pie-chart',
+      items: [{
+        type: STAT_TYPE.PIE,
+        title: intl.get('Basic_pie_chart'),
+        image: 'pie.png'
+      }, {
+        type: STAT_TYPE.RING,
+        title: intl.get('Ring_chart'),
+        image: 'ring.png'
+      }]
+    }, {
+      catTitle: intl.get('Scatter_chart'),
+      icon: 'dtable-icon-scatter-chart',
+      items: [{
+        type: STAT_TYPE.SCATTER,
+        title: intl.get('Scatter_chart'),
+        image: 'scatter.png'
+      }]
+    }, {
+      catTitle: intl.get('Combination_chart'),
+      icon: 'dtable-icon-combination-chart',
+      items: [{
+        type: STAT_TYPE.COMBINATION_CHART,
+        title: intl.get('Combination_chart'),
+        image: 'combination-chart.png'
+      }]
+    }, {
+      catTitle: intl.get('Map'),
+      icon: 'dtable-icon-map',
+      items: [{
+        type: STAT_TYPE.MAP,
+        title: '中国地图',
+        image: 'map.png',
+        hide: lang != 'zh-cn'
+      }, {
+        type: STAT_TYPE.MAP_BUBBLE,
+        title: '中国地图(气泡图)',
+        image: 'map-bubble.png',
+        hide: lang != 'zh-cn'
+      }, {
+        type: STAT_TYPE.WORLD_MAP,
+        title: intl.get('World_map'),
+        image: 'world-map.png'
+      }, {
+        type: STAT_TYPE.WORLD_MAP_BUBBLE,
+        title: "".concat(intl.get('World_map'), "(").concat(intl.get('Bubble'), ")"),
+        image: 'world-map-bubble.png'
+      }]
+    }, {
+      catTitle: intl.get('Heat_map'),
+      icon: 'dtable-icon-heat-map',
+      items: [{
+        type: STAT_TYPE.HEAT_MAP,
+        title: intl.get('Heat_map'),
+        image: 'heat-map.png'
+      }]
+    }, {
+      catTitle: intl.get('Facet_chart'),
+      icon: 'dtable-icon-facet-chart',
+      items: [{
+        type: STAT_TYPE.MIRROR,
+        title: intl.get('Mirror_chart'),
+        image: 'mirror.png'
+      }]
+    }, {
+      catTitle: intl.get('Card'),
+      icon: 'dtable-icon-card',
+      items: [{
+        type: STAT_TYPE.BASIC_NUMBER_CARD,
+        title: intl.get('Basic_number_card'),
+        image: 'number-card.png'
+      }, {
+        type: STAT_TYPE.TREND_CHART,
+        title: intl.get('Trend_chart'),
+        image: 'trend-chart.png'
+      }]
+    }, {
+      catTitle: intl.get('Gauge'),
+      icon: 'dtable-icon-gauge',
+      items: [{
+        type: STAT_TYPE.DASHBOARD,
+        title: intl.get('Gauge'),
+        image: 'dashboard-chart.png'
+      }]
+    }, {
+      catTitle: intl.get('Treemap'),
+      icon: 'dtable-icon-rectangular-tree-diagram',
+      items: [{
+        type: STAT_TYPE.TREEMAP,
+        title: intl.get('Treemap'),
+        image: 'treemap.png'
+      }]
+    }, {
+      catTitle: intl.get('Pivot_table'),
+      icon: 'dtable-icon-dtable-logo',
+      items: [{
+        type: STAT_TYPE.PIVOT_TABLE,
+        title: intl.get('Pivot_table'),
+        image: 'pivot-table.png'
+      }]
+    }];
+    return _this;
+  }
+  _createClass(ChartSelector, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var currentCatIndex = this.state.currentCatIndex;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(styles['statistic-types-container'], " d-flex flex-column h-100")
+      }, /*#__PURE__*/React.createElement("ul", {
+        className: "".concat(styles['chart-categories-nav'], " flex-shrink-0 d-flex flex-wrap align-items-center list-unstyled")
+      }, this.chartTypes.map(function (item, index) {
+        return /*#__PURE__*/React.createElement("li", {
+          key: index,
+          className: 'px-4 py-2 chart-cat-nav-item'
+        }, /*#__PURE__*/React.createElement("i", {
+          id: item.icon,
+          className: "".concat(styles['chart-icon'], " dtable-font ").concat(item.icon, " ").concat(currentCatIndex === index ? "".concat(styles['icon-highlight']) : ''),
+          onClick: _this2.setCurrentCatIndex.bind(_this2, index)
+        }), /*#__PURE__*/React.createElement(UncontrolledTooltip, {
+          placement: "bottom",
+          target: item.icon
+        }, item.catTitle));
+      })), /*#__PURE__*/React.createElement("div", {
+        id: "chart-types-container",
+        className: "flex-fill o-auto ".concat(styles['statistic-type'])
+      }, this.chartTypes.map(function (item, index) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: "chart-type-".concat(index),
+          className: "mb-7"
+        }, /*#__PURE__*/React.createElement("h3", {
+          className: "".concat(styles['statistic-type-title'], " m-0"),
+          id: "chart-type-".concat(index + 1)
+        }, item.catTitle), /*#__PURE__*/React.createElement("div", {
+          className: 'd-flex flex-wrap'
+        }, item.items.map(function (chart, index) {
+          return /*#__PURE__*/React.createElement("div", {
+            key: index,
+            onClick: _this2.props.addEditingChart.bind(_this2, chart.type),
+            className: "".concat(styles['statistic-type-item'], " ").concat(chart.hide ? 'd-none' : '')
+          }, /*#__PURE__*/React.createElement("p", {
+            className: "".concat(styles['statistic-type-description'])
+          }, chart.title), /*#__PURE__*/React.createElement("div", {
+            className: "".concat(styles['statistic-type-image-container'])
+          }, /*#__PURE__*/React.createElement("img", {
+            src: getImageUrl(chart.image),
+            alt: "",
+            className: "".concat(styles['statistic-type-demo-chart-image'])
+          })));
+        })));
+      })));
+    }
+  }]);
+  return ChartSelector;
+}(React.Component);
+export default ChartSelector;