dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

@@ -0,0 +1,582 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+var _dataSet = _interopRequireDefault(require("@antv/data-set"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _dtableUtils = require("dtable-utils");
+var _baseChart = _interopRequireDefault(require("./base-chart"));
+var _customG = require("../custom-g2");
+var _commonUtils = require("../utils/common-utils");
+var _basicChartUtils = require("../utils/basic-chart-utils");
+var _colorUtils = require("../utils/color-utils");
+var _constants = require("../constants");
+const propTypes = {
+  isPreview: _propTypes.default.bool,
+  isEdit: _propTypes.default.bool,
+  colorThemeName: _propTypes.default.string,
+  statItem: _propTypes.default.object,
+  chartCalculator: _propTypes.default.object,
+  eventBus: _propTypes.default.object,
+  getTableById: _propTypes.default.func,
+  toggleStatisticRecordsDialog: _propTypes.default.func
+};
+class BarChart extends _baseChart.default {
+  constructor(props) {
+    super(props);
+    this.drawChart = originalData => {
+      const {
+        getTableById,
+        statItem,
+        colorThemeName
+      } = this.props;
+      const {
+        type,
+        table_id,
+        summary_type,
+        y_axis_column_key,
+        y_axis_summary_type,
+        summary_method,
+        y_axis_summary_method,
+        column_groupby_column_key,
+        column_groupby_multiple_numeric_column,
+        sort_type
+      } = statItem;
+      let data = originalData;
+      if (type === _constants.STAT_TYPE.BAR_STACK && sort_type) {
+        data = (0, _commonUtils.sortDataByGroupSum)(originalData, sort_type);
+      }
+      this.initChartHandler();
+      this.chart.on('interval:click', e => {
+        this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
+      });
+      const isGroupBar = column_groupby_column_key || column_groupby_multiple_numeric_column;
+      const currentTheme = (0, _commonUtils.getCurrentTheme)(colorThemeName);
+      let summaryColumnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      let summaryType = summary_type;
+      let summaryMethod = summary_method;
+      if (y_axis_summary_type === _constants.SUMMARY_TYPE.ADVANCED) {
+        const table = getTableById(table_id);
+        const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_column_key) || {};
+        summaryColumnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
+      }
+      if (!summaryType && y_axis_summary_type) {
+        summaryType = y_axis_summary_type;
+      }
+      if (!summaryMethod && y_axis_summary_method) {
+        summaryMethod = y_axis_summary_method;
+      }
+      let chartBarColor = '#2a67d1';
+      if (isGroupBar) {
+        chartBarColor = 'group_name';
+        this.chart.scale('group_name', {
+          type: 'cat'
+        });
+      } else if (currentTheme && currentTheme.colors) {
+        chartBarColor = currentTheme.colors[0];
+      }
+      this.chart.data(data, {
+        'name': {
+          type: 'cat',
+          nice: false
+        }
+      });
+      const {
+        width
+      } = this.chart.coordinateBBox;
+      const chartData = isGroupBar ? (0, _basicChartUtils.getChartGroups)(data) : data;
+      const themeColors = this.getThemeColors();
+      const ticks = this.getTicks(chartData, width);
+      if (ticks.length > 0) {
+        this.chart.scale('name', {
+          ticks
+        });
+      }
+
+      // set Coord type
+      this.chart.coordinate('rect');
+      this.handleAutoRange(data, summaryColumnData, summaryMethod);
+      if (isGroupBar) {
+        this.drawBarGroup({
+          data,
+          themeColors,
+          currentTheme,
+          summaryColumnData,
+          summaryType,
+          summaryMethod
+        });
+      } else {
+        this.drawBar({
+          themeColors,
+          chartBarColor,
+          summaryType,
+          summaryMethod
+        });
+      }
+      this.setTooltip();
+      this.setAxis(themeColors);
+      this.setLegend(themeColors);
+      this.chart.interaction('active-region');
+      this.chart.render();
+      this.renderAxisLabel();
+    };
+    this.initChartHandler = () => {
+      const {
+        isPreview,
+        statItem
+      } = this.props;
+      const {
+        display_data
+      } = statItem;
+      let config = {
+        container: this.container,
+        autoFit: true,
+        appendPadding: [display_data ? 17 : 0, 0, 0, 0]
+      };
+      if (!isPreview) {
+        config.height = 400;
+        config.width = 700;
+      }
+      this.chart = new _customG.Chart(config);
+    };
+    this.drawBar = _ref => {
+      let {
+        themeColors,
+        chartBarColor,
+        summaryType,
+        summaryMethod
+      } = _ref;
+      const {
+        statItem
+      } = this.props;
+      const {
+        color_option,
+        display_data
+      } = statItem;
+      const colorRules = color_option === _constants.TYPE_COLOR_USING.USE_RULES && statItem.y_axis_label_color_rules && (0, _colorUtils.getConvertedColorRules)(statItem.y_axis_label_color_rules);
+      this.chart.interval().label(display_data ? 'formatted_value' : false, {
+        style: {
+          fontSize: this.getLabelFontSize(),
+          fill: themeColors.textColor
+        }
+      }).position('name*value').tooltip('name*formatted_value', (name, value) => {
+        return {
+          value,
+          title: summaryType === _constants.STATISTICS_COUNT_TYPE.COUNT ? _reactIntlUniversal.default.get(_constants.TITLE_AMOUNT) : _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[summaryMethod]),
+          name: !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name
+        };
+      }).state({
+        active: {
+          style: {
+            stroke: null
+          }
+        }
+      }).style('value', value => {
+        const color = (0, _colorUtils.getLabelColor)({
+          chart: statItem,
+          colorRules,
+          value
+        });
+        return {
+          fill: color || chartBarColor
+        };
+      });
+    };
+    this.drawBarGroup = _ref2 => {
+      let {
+        data,
+        themeColors,
+        summaryColumnData,
+        summaryType,
+        summaryMethod,
+        currentTheme
+      } = _ref2;
+      const {
+        statItem
+      } = this.props;
+      const {
+        type: chartType,
+        color_option,
+        display_data,
+        y_axis_use_stack,
+        display_each_block_data
+      } = statItem;
+      let labelCfg = {
+        style: {
+          fontSize: this.getLabelFontSize(),
+          fill: themeColors.textColor
+        }
+      };
+      let displayData = display_data;
+      if (chartType === _constants.STAT_TYPE.BAR_STACK) {
+        displayData = display_each_block_data;
+        if (displayData) {
+          labelCfg.position = 'middle';
+        }
+
+        // get the total value of each stack
+        const dv = new _dataSet.default.DataView().source(data);
+        dv.transform({
+          type: 'aggregate',
+          fields: ['value'],
+          operations: ['sum'],
+          as: ['value_sum'],
+          groupBy: ['name']
+        });
+        if (display_data) {
+          dv.rows.forEach(item => {
+            this.chart.annotation().text({
+              content: this.getNumberDisplayString(item.value_sum, summaryColumnData, summaryMethod),
+              position: {
+                name: item.name,
+                value: item.value_sum
+              },
+              offsetY: -10,
+              offsetX: -5
+            });
+          });
+        }
+      }
+      let groupColorCallback = currentTheme && currentTheme.colors;
+
+      // when the 'Group by' column is a 'single-select' column,
+      // and the user chooses to use the colors from the column.
+      if (color_option === _constants.TYPE_COLOR_USING.USE_COLUMN_COLORS) {
+        const groupColorMapping = {};
+        data.forEach(item => {
+          if (!groupColorMapping[item.group_name]) {
+            groupColorMapping[item.group_name] = item.color;
+          }
+        });
+        groupColorCallback = group_name => {
+          return groupColorMapping[group_name];
+        };
+      }
+      this.chart.scale({
+        group_name: {
+          type: 'cat'
+        }
+      });
+      this.chart.interval().label(displayData ? 'formatted_value' : false, labelCfg).position('name*value').color('group_name', groupColorCallback).tooltip('name*formatted_value*group_name*raw_name', (name, value, group_name, raw_name) => {
+        const nameContent = !group_name && typeof group_name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : group_name;
+        const titleContent = !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name;
+        return {
+          value,
+          title: titleContent,
+          name: nameContent
+        };
+      }).adjust([{
+        type: y_axis_use_stack ? 'stack' : 'dodge'
+      }]).state({
+        active: {
+          style: {
+            stroke: null
+          }
+        }
+      });
+    };
+    this.handleAutoRange = (data, summaryColumnData, summaryMethod) => {
+      const {
+        y_axis_auto_range,
+        y_axis_min,
+        y_axis_max
+      } = this.props.statItem;
+      let valueScaleOptions = {
+        formatter: value => {
+          return this.getNumberDisplayString(value, summaryColumnData, summaryMethod);
+        }
+      };
+
+      // eslint-disable-next-line
+      if (y_axis_auto_range === undefined || y_axis_auto_range) {
+        valueScaleOptions = Object.assign(valueScaleOptions, {
+          nice: true
+        });
+      } else {
+        valueScaleOptions = Object.assign(valueScaleOptions, {
+          min: y_axis_min,
+          max: y_axis_max
+        });
+
+        // set the filter rule
+        this.chart.filter('value', value => {
+          return value >= y_axis_min;
+        });
+
+        // filter the data
+        this.chart.filterData(data);
+      }
+      this.chart.scale({
+        // Set the type of the name column so that g2 can draw correctly
+        name: {
+          type: 'cat'
+        },
+        value: valueScaleOptions
+      });
+    };
+    this.setTooltip = () => {
+      this.chart.tooltip({
+        showTitle: true,
+        showMarkers: false,
+        containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
+        itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{title}<div><div class="tooltip-item">{name}: {value}<div></div>',
+        domStyles: {
+          'g2-tooltip': this.getDefaultChartStyleByKey('g2-tooltip'),
+          'tooltip-item': this.getDefaultChartStyleByKey('tooltip-item')
+        }
+      });
+    };
+    this.setAxis = themeColors => {
+      this.chart.axis('name', {
+        line: {
+          style: themeColors.gridColor
+        },
+        label: {
+          autoRotate: true,
+          style: {
+            fill: themeColors.textColor
+          },
+          formatter: this.labelFormatter
+        }
+      });
+      this.chart.axis('value', {
+        label: {
+          style: {
+            fill: themeColors.textColor
+          }
+        },
+        grid: {
+          line: {
+            style: {
+              stroke: themeColors.gridColor
+            }
+          }
+        }
+      });
+    };
+    this.setLegend = themeColors => {
+      let legendPosition = 'bottom';
+      this.chart.legend('group_name', {
+        position: legendPosition,
+        itemName: {
+          style: {
+            fill: themeColors.textColor
+          },
+          formatter: name => {
+            return !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name;
+          }
+        },
+        pageNavigator: {
+          text: {
+            style: {
+              fill: themeColors.textColor
+            }
+          },
+          marker: {
+            style: {
+              fill: themeColors.legendPageNavigatorMarkerColor,
+              inactiveFill: themeColors.legendPageNavigatorMarkerColor,
+              inactiveOpacity: 0.45
+            }
+          }
+        }
+      });
+    };
+    this.renderAxisLabel = newStatItem => {
+      let {
+        getTableById,
+        statItem
+      } = this.props;
+      if (newStatItem && newStatItem._id !== statItem._id) {
+        return;
+      }
+      if (!this.chart) return;
+      statItem = newStatItem || statItem;
+      const {
+        type,
+        table_id,
+        x_axis_column_key,
+        y_axis_column_key,
+        show_y_axis_label,
+        show_x_axis_label,
+        y_axis_label_position,
+        x_axis_label_position,
+        y_axis_summary_type,
+        title_name
+      } = statItem;
+      const table = getTableById(table_id);
+      const autoPadding = this.chart.autoPadding;
+      const textColor = this.getAxisLabelColor();
+      const xAxisID = "chart-x-axis-label_".concat(statItem._id);
+      const chartContainer = this.chart.getCanvas().get('container');
+      const xLabel = chartContainer.querySelector("#".concat(xAxisID));
+      if (!xLabel && show_x_axis_label) {
+        const div = document.createElement('div');
+        div.id = xAxisID;
+        div.className = 'statistic-chart-axis-label';
+        const column = (0, _dtableUtils.getTableColumnByKey)(table, x_axis_column_key);
+        div.innerHTML = "".concat(column ? column.name : '');
+        div.setAttribute('style', "color:".concat(textColor, "; width: 100%; padding-left: ").concat(autoPadding.left, "px; text-align: ").concat(x_axis_label_position, "; bottom: -20px"));
+        chartContainer.appendChild(div);
+      }
+      if (xLabel && show_x_axis_label) {
+        xLabel.setAttribute('style', "color:".concat(textColor, "; width: 100%; padding-left: ").concat(autoPadding.left, "px; text-align: ").concat(x_axis_label_position, "; bottom: -20px"));
+      }
+      if (xLabel && !show_x_axis_label) {
+        xLabel.parentNode.removeChild(xLabel);
+      }
+      const yAxisID = "chart-y-axis-label_".concat(statItem._id);
+      const yLabel = chartContainer.querySelector("#".concat(yAxisID));
+      let paddingLeft = autoPadding.bottom + (show_x_axis_label ? 10 : 0);
+      if (!yLabel && show_y_axis_label) {
+        const div = document.createElement('div');
+        div.id = yAxisID;
+        div.className = 'statistic-chart-axis-label';
+        if (y_axis_summary_type === _constants.SUMMARY_TYPE.COUNT) {
+          div.innerHTML = _reactIntlUniversal.default.get(_constants.TITLE_AMOUNT);
+        } else {
+          const column = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_column_key) || {};
+          div.innerHTML = column.name || '';
+          if (type === _constants.STAT_TYPE.BAR_STACK) {
+            div.innerHTML = title_name || '';
+          }
+        }
+        const containerHeight = chartContainer.offsetHeight;
+        let textAlign = 'center';
+        if (y_axis_label_position === 'bottom') textAlign = 'left';
+        if (y_axis_label_position === 'top') textAlign = 'right';
+        div.setAttribute('style', "color:".concat(textColor, "; padding-right: ").concat(autoPadding.top, "px; padding-left: ").concat(paddingLeft, "px; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0px; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+        chartContainer.appendChild(div);
+      }
+      if (yLabel && show_y_axis_label) {
+        const containerHeight = chartContainer.offsetHeight;
+        let textAlign = 'center';
+        if (y_axis_label_position === 'bottom') textAlign = 'left';
+        if (y_axis_label_position === 'top') textAlign = 'right';
+        yLabel.setAttribute('style', "color:".concat(textColor, "; padding-right: ").concat(autoPadding.top, "px; padding-left: ").concat(paddingLeft, "px; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0px; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+      }
+      if (yLabel && !show_y_axis_label) {
+        yLabel.parentNode.removeChild(yLabel);
+      }
+    };
+    this.destroyChart = () => {
+      this.chart.destroy();
+      this.chart = null;
+    };
+    this.state = {
+      isCalculatingData: true,
+      showResultDescription: true
+    };
+    this.calculateData = null;
+  }
+  componentDidMount() {
+    const {
+      statItem,
+      chartCalculator,
+      eventBus
+    } = this.props;
+    this.unsubscribeStyleChange = eventBus.subscribe(_constants.LABEL_CONFIG_CHANGED, newStatItem => {
+      this.renderAxisLabel(newStatItem);
+    });
+    if (this.container) {
+      chartCalculator.calculate(statItem).then(data => {
+        if (!data) return;
+        let showResultDescription = data.length > 0 ? false : true;
+        this.setState({
+          isCalculatingData: false,
+          showResultDescription
+        }, () => {
+          if (!showResultDescription) {
+            this.drawChart(data);
+            this.calculateData = data;
+          }
+        });
+      });
+    }
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    const {
+      colorThemeName
+    } = this.props;
+    if (this.canUpdate(this.props, nextProps)) {
+      return true;
+    }
+    if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+      return true;
+    }
+    if (nextProps.colorThemeName !== colorThemeName) {
+      return true;
+    }
+    return false;
+  }
+  componentDidUpdate(preProps, preState) {
+    const {
+      statItem,
+      chartCalculator
+    } = this.props;
+    const {
+      isCalculatingData
+    } = this.state;
+    if (isCalculatingData !== preState.isCalculatingData) return;
+    if (this.shouldCalculateStatItem(preProps, this.props)) {
+      this.setState({
+        isCalculatingData: true
+      });
+      if (this.container) {
+        chartCalculator.calculate(statItem).then(data => {
+          const showResultDescription = data.length > 0 ? false : true;
+          this.chart && this.destroyChart();
+          this.calculateData = data;
+          this.setState({
+            isCalculatingData: false,
+            showResultDescription
+          }, () => {
+            if (!showResultDescription) {
+              this.drawChart(data);
+              if (this.props.isPreview) this.chart.forceFit();
+            }
+          });
+        });
+      }
+    } else {
+      if (!this.state.showResultDescription) {
+        this.chart && this.destroyChart();
+        this.drawChart(this.calculateData);
+        if (this.props.isPreview) {
+          this.chart.forceFit();
+        }
+      }
+    }
+  }
+  componentWillUnmount() {
+    this.container = null;
+    this.unsubscribeStyleChange();
+  }
+  render() {
+    const {
+      statItem
+    } = this.props;
+    const {
+      isCalculatingData,
+      showResultDescription
+    } = this.state;
+    const {
+      show_y_axis_label,
+      show_x_axis_label
+    } = statItem;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.container = ref,
+      style: {
+        padding: show_y_axis_label || show_x_axis_label ? 30 : 20
+      },
+      className: "statistic-chart-container"
+    }));
+  }
+}
+BarChart.propTypes = propTypes;
+var _default = exports.default = BarChart;

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

@@ -0,0 +1,132 @@
+"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 _dtableUtils = require("dtable-utils");
+var _Loading = _interopRequireDefault(require("dtable-ui-component/lib/Loading"));
+var _commonUtils = require("../utils/common-utils");
+var _basicChartUtils = require("../utils/basic-chart-utils");
+var _constants = require("../constants");
+const CHART_STYLE_CONFIG = {
+  'g2-tooltip': {
+    borderRadius: '2px',
+    backgroundColor: '#fff',
+    padding: '10px'
+  },
+  'tooltip-item': {
+    marginTop: '5px'
+  }
+};
+class BaseChart extends _react.Component {
+  constructor() {
+    var _this;
+    super(...arguments);
+    _this = this;
+    this.needRefresh = (preProps, nextProps) => {
+      const {
+        dtableChangedTime
+      } = nextProps;
+      return dtableChangedTime !== preProps.dtableChangedTime;
+    };
+    this.canUpdate = (preProps, nextProps) => {
+      const {
+        statItem,
+        theme
+      } = preProps;
+      const {
+        statItem: nextStatItem,
+        theme: nextTheme
+      } = nextProps;
+      return !(0, _commonUtils.isStatItemEqual)(statItem, nextStatItem) || this.needRefresh(preProps, nextProps) || nextTheme !== theme;
+    };
+    this.shouldCalculateStatItem = (preProps, nextProps) => {
+      const {
+        statItem
+      } = preProps;
+      const {
+        statItem: nextStatItem
+      } = nextProps;
+      return (0, _commonUtils.shouldCalculateStatItem)(statItem, nextStatItem) || this.needRefresh(preProps, nextProps);
+    };
+    this.getTicks = (data, width) => {
+      const labelCount = data.length;
+      if (Math.floor(width / labelCount) > 20) {
+        return [];
+      }
+      return (0, _basicChartUtils.getChartDisplayLabels)(width, 20, data);
+    };
+    this.getLabelCount = (ticks, data) => {
+      const ticksLen = ticks.length;
+      return ticksLen > 0 ? ticksLen : data.length;
+    };
+    this.getThemeColors = function () {
+      let themeColors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      // dark->custom->light
+      const {
+        isPreview,
+        isEnlarge,
+        theme
+      } = _this.props;
+      if (theme === _constants.THEME_NAME_MAP.DARK && !isEnlarge && isPreview) {
+        themeColors = _constants.STAT_ITEM_THEME_COLORS.dark;
+      }
+      return themeColors || _constants.STAT_ITEM_THEME_COLORS[_constants.THEME_NAME_MAP.LIGHT];
+    };
+    this.getAxisLabelColor = textColor => {
+      const {
+        isPreview,
+        isEnlarge,
+        theme
+      } = this.props;
+      if (theme === _constants.THEME_NAME_MAP.DARK && !isEnlarge && isPreview) {
+        return '#ffffff';
+      }
+      return textColor || '#999999';
+    };
+    this.getDefaultChartStyleByKey = key => {
+      return CHART_STYLE_CONFIG[key] || {};
+    };
+    this.labelFormatter = name => {
+      let label = name;
+      if (name.length > 10) {
+        label = "".concat(name.slice(0, 10), "...");
+      }
+      if (name === '' || name === 'undefined') {
+        label = _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
+      }
+      return label;
+    };
+    this.getLabelFontSize = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        label_font_size
+      } = statItem;
+      return (0, _commonUtils.getLabelFontSize)(label_font_size);
+    };
+    this.getNumberDisplayString = (value, columnData, summaryMethod) => {
+      if (summaryMethod === _constants.SUMMARY_METHOD_MAP.Distinct_values) {
+        return value;
+      }
+      return (0, _dtableUtils.getNumberDisplayString)(value, columnData);
+    };
+    this.renderLoading = () => {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: 'statistic-chart-loading-container'
+      }, /*#__PURE__*/_react.default.createElement(_Loading.default, null));
+    };
+    this.renderEmpty = () => {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: 'statistic-chart-text'
+      }, _reactIntlUniversal.default.get(_constants.NO_STATISTIC_RESULTS));
+    };
+  }
+}
+var _default = exports.default = BaseChart;