dtable-statistic 4.4.24 → 5.0.0-alpha.0

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

@@ -1,582 +0,0 @@
-"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

@@ -1,132 +0,0 @@
-"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 _components = require("../components");
-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(_components.Loading, 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;