sea-chart 0.0.48 → 0.0.49

package/dist/utils/chart-utils/sql-statistics-utils.js

@@ -1,8 +1,8 @@
 var _SQLStatisticsUtils;
 import dayjs from 'dayjs';
-import { CellType, MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP, getFormulaDisplayString, getPrecisionNumber, getTableById, getTableColumnByKey, isNumber } from 'dtable-utils';
+import { CellType, MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP, getFormulaDisplayString, getPrecisionNumber, getTableById, getTableColumnByKey, isNumber, DateUtils } from 'dtable-utils';
 import { isObject } from 'lodash';
-import { CHART_SUMMARY_TYPE, CHART_TYPE, SUPPORT_DATA_SORT_CHART_TYPES, LABEL_COLORS, TABLE_DIMENSIONS, Y_AXIS_TYPE_PREFIX, STYLE_COLORS } from '../../constants';
+import { CHART_SUMMARY_TYPE, CHART_TYPE, SUPPORT_DATA_SORT_CHART_TYPES, TABLE_DIMENSIONS, Y_AXIS_TYPE_PREFIX, STYLE_COLORS } from '../../constants';
 import { chartColumn2SqlColumn, summaryMethodColumn2SqlColumn } from '../sql';
 import { getClientLinkDisplayString } from '../cell-format-utils';
 import context from '../../context';
@@ -14,7 +14,7 @@ import BaseUtils from './base-utils';
 class SQLStatisticsUtils {}
 _SQLStatisticsUtils = SQLStatisticsUtils;
 SQLStatisticsUtils.dataSources = 'sql_statistics';
-SQLStatisticsUtils.getGroupLabelFromDB = (cellValue, column, tables) => {
+SQLStatisticsUtils.getGroupLabelFromDB = (cellValue, column, tables, dateGranularity) => {
   const collaborators = context.getCollaboratorsFromCache();
   const {
     type,
@@ -22,11 +22,21 @@ SQLStatisticsUtils.getGroupLabelFromDB = (cellValue, column, tables) => {
   } = column;
   switch (type) {
     case CellType.TEXT:
+      {
+        return cellValue || null;
+      }
     case CellType.DATE:
     case CellType.CTIME:
     case CellType.MTIME:
       {
-        return cellValue || null;
+        if (!dateGranularity) {
+          return cellValue || null;
+        }
+        if (dateGranularity.toUpperCase() === 'QUARTER') {
+          // TODO: fix the unknown word 'QUARTAR'
+          return DateUtils.getDateByGranularity(cellValue, 'QUARTAR');
+        }
+        return DateUtils.getDateByGranularity(cellValue, dateGranularity);
       }
     case CellType.NUMBER:
       {
@@ -830,7 +840,8 @@ SQLStatisticsUtils.compareSQLResult2Javascript = (chart, sqlRows, chartSQLMap, c
     x_axis_compared_date_range_end,
     y_axis_summary_type,
     y_axis_summary_method,
-    display_increase
+    display_increase,
+    x_axis_date_granularity
   } = config;
   const groupName1 = "".concat(x_axis_date_range_start, " - ").concat(x_axis_date_range_end);
   const groupName2 = "".concat(x_axis_compared_date_range_start, " - ").concat(x_axis_compared_date_range_end);
@@ -839,7 +850,7 @@ SQLStatisticsUtils.compareSQLResult2Javascript = (chart, sqlRows, chartSQLMap, c
   const isAdvanced = y_axis_summary_type === CHART_SUMMARY_TYPE.ADVANCED;
   sqlRows.forEach(item => {
     const name = item[sqlGroupbyColumnKey];
-    const label = _SQLStatisticsUtils.getGroupLabelFromDB(name, groupbyColumn, tables);
+    const label = _SQLStatisticsUtils.getGroupLabelFromDB(name, groupbyColumn, tables, x_axis_date_granularity);
     const value = item[sqlSummaryColumnKey];
     if (name >= x_axis_date_range_start && name <= x_axis_date_range_end) {
       const currentValue = dateRangeResult.get(label);

package/dist/utils/event-bus.js

@@ -0,0 +1,28 @@
+class EventBus {
+  constructor() {
+    this.subscribers = {};
+  }
+  subscribe(type, handler) {
+    if (!this.subscribers[type]) {
+      this.subscribers[type] = [];
+    }
+    const handlers = this.subscribers[type];
+    handlers.push(handler);
+    return () => {
+      const index = handlers.indexOf(handler);
+      if (index > -1) {
+        handlers.splice(index, 1);
+      }
+    };
+  }
+  dispatch(type) {
+    for (var _len = arguments.length, data = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      data[_key - 1] = arguments[_key];
+    }
+    const handlers = this.subscribers[type];
+    if (Array.isArray(handlers)) {
+      handlers.forEach(handler => handler(...data));
+    }
+  }
+}
+export default new EventBus();

package/dist/utils/row-utils.js

@@ -32,7 +32,7 @@ export const getFormattedLabel = (column, name, collaborators) => {
   let {
     type: columnType,
     data: columnData
-  } = column;
+  } = column || {};
   if (columnType === CellType.SINGLE_SELECT || columnType === CellType.MULTIPLE_SELECT) {
     let options = columnData ? columnData.options : [];
     let selectedOption = options.find(o => {

package/dist/utils/sql/chart-data-sql.js

@@ -1,4 +1,5 @@
 import { CellType, filter2SqlCondition, isNumericColumn, isDateColumn } from 'dtable-utils';
+import dayjs from 'dayjs';
 import { getSqlGroup } from '../column-utils';
 import { CHART_TYPE, DTABLE_DB_SUMMARY_METHOD, CHART_SUMMARY_TYPE, CHART_Y_GROUP_TYPE } from '../../constants';
 import { fixGeoGranularity } from '../map';
@@ -311,11 +312,14 @@ class ChartDataSQL {
     this._compare_chart_statistic_2_sql = () => {
       const {
         x_axis_column_key,
-        x_axis_date_granularity,
         x_axis_geolocation_granularity,
         y_axis_summary_type,
         y_axis_summary_column_key,
-        y_axis_summary_method
+        y_axis_summary_method,
+        x_axis_date_range_start,
+        x_axis_date_range_end,
+        x_axis_compared_date_range_start,
+        x_axis_compared_date_range_end
       } = this.chart;
       const groupby_column = this._get_column_by_key(x_axis_column_key);
       if (!groupby_column) {
@@ -324,7 +328,7 @@ class ChartDataSQL {
       }
       this._update_filter_sql(true, groupby_column);
       const groupby_column_name = this._chart_column_name_to_sql(groupby_column, {
-        'date_granularity': x_axis_date_granularity,
+        'date_granularity': 'day',
         'geolocation_granularity': x_axis_geolocation_granularity
       });
       let summary_column_name = this._summary_column_2_sql('COUNT', groupby_column);
@@ -336,7 +340,16 @@ class ChartDataSQL {
         }
         summary_column_name = this._summary_column_2_sql(y_axis_summary_method.toUpperCase(), summary_column);
       }
-      return "SELECT ".concat(groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(this.filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
+
+      // filter
+      let filter_sql = this.filter_sql;
+      if (x_axis_date_range_start && x_axis_date_range_end && x_axis_compared_date_range_start && x_axis_compared_date_range_end) {
+        filter_sql = this.filter_sql.length === 0 ? 'where ' : this.filter_sql + ' AND';
+        const formattedXAxisDateRangeEnd = dayjs(x_axis_date_range_end).add(1, 'days').format('YYYY-MM-DD');
+        const formattedXAxisComparedDateRangeEnd = dayjs(x_axis_compared_date_range_end).add(1, 'days').format('YYYY-MM-DD');
+        filter_sql = filter_sql + " ((".concat(groupby_column.name, " >= '").concat(x_axis_date_range_start, "' AND ").concat(groupby_column.name, " < '").concat(formattedXAxisDateRangeEnd, "') Or (").concat(groupby_column.name, " >= '").concat(x_axis_compared_date_range_start, "' AND ").concat(groupby_column.name, " < '").concat(formattedXAxisComparedDateRangeEnd, "'))");
+      }
+      return "SELECT ".concat(groupby_column_name, ", ").concat(summary_column_name, " FROM ").concat(this.table_name, " ").concat(filter_sql, " GROUP BY ").concat(groupby_column_name, " LIMIT 0, 5000");
     };
     this._combination_chart_statistic_2_sql = () => {
       const x_axis_column_key = this.chart['x_axis_column_key'] || '';

package/dist/utils/sql/column-2-sql-column.js

@@ -281,16 +281,22 @@ const pieChartStatisticColumn2sqlColumn = (chart, table) => {
   };
 };
 const basicChartStatisticColumn2sqlColumn = (chart, table) => {
+  let {
+    x_axis_date_granularity
+  } = chart;
   const {
+    type,
     x_axis_column_key,
     y_axis_summary_type,
     y_axis_summary_method,
     y_axis_summary_column_key,
-    x_axis_date_granularity,
     x_axis_geolocation_granularity
   } = chart;
   const groupbyColumn = getTableColumnByKey(table, x_axis_column_key);
   if (!groupbyColumn) return {};
+  if (type === CHART_TYPE.COMPARE_BAR) {
+    x_axis_date_granularity = 'DAY';
+  }
   const {
     key: sqlGroupbyColumnKey
   } = column2SqlColumn(groupbyColumn, {

package/dist/view/index.css

@@ -86,7 +86,7 @@
 
 .sea-chart-formatter .statistic-chart-loading-container {
   position: absolute;
-  width: calc(100% - 318px);
+  width: 100%;
   height: 100%;
   z-index: 101;
   display: flex;

package/dist/view/index.js

@@ -6,6 +6,7 @@ import context from '../context';
 import intl from '../intl';
 import { Loading } from '../components';
 import { ChartUtils, BaseUtils } from '../utils/chart-utils';
+import { THEME_NAME_MAP } from '../constants';
 import Title from './title';
 import Wrapper from './wrapper';
 import './index.css';
@@ -51,19 +52,41 @@ class View extends React.PureComponent {
     };
     this.calculateStatistic = function () {
       let isNeedRequestData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      let data_sources = arguments.length > 1 ? arguments[1] : undefined;
       const {
         tables,
-        chart
+        chart,
+        isCalculateByView
       } = _this.props;
       const {
         data
       } = _this.state;
       const collaborators = context.getCollaboratorsFromCache();
+      if (isCalculateByView) {
+        if (BaseUtils.isArchiveView(chart.config, tables)) {
+          ChartUtils.calculateChart(chart, {
+            tables,
+            collaborators
+          }, _this.callback);
+        } else {
+          ChartUtils.calculateStaticChart(chart, {
+            tables,
+            collaborators
+          }, {
+            ...data,
+            data_sources: 'original_data'
+          }, _this.callback);
+        }
+        return;
+      }
       if (!isNeedRequestData) {
         ChartUtils.calculateStaticChart(chart, {
           tables,
           collaborators
-        }, data, _this.callback);
+        }, {
+          ...data,
+          data_sources
+        }, _this.callback);
         return;
       }
       ChartUtils.calculateChart(chart, {
@@ -78,6 +101,7 @@ class View extends React.PureComponent {
       tipMessage: ''
     };
     context.init(props);
+    props.onViewRef && props.onViewRef(this);
     const lang = context.getSetting('lang') || 'zh-cn';
     intl.setLang(lang);
   }
@@ -99,6 +123,10 @@ class View extends React.PureComponent {
         this.calculateStatistic();
         return;
       }
+      if (BaseUtils.isChartViewChange(chart, oldChart)) {
+        this.calculateStatistic();
+        return;
+      }
       if (BaseUtils.isChartStyleChange(chart, oldChart)) {
         this.setState({
           isCalculated: true
@@ -119,7 +147,10 @@ class View extends React.PureComponent {
       className,
       tables,
       canvasStyle,
-      render
+      render,
+      hideTitle = false,
+      globalTheme,
+      chartColorTheme
     } = this.props;
     const {
       data,
@@ -154,7 +185,7 @@ class View extends React.PureComponent {
       className: validClassName
     }, /*#__PURE__*/React.createElement("div", {
       className: classnames('sea-chart-formatter-container', "sea-chart-".concat(chart === null || chart === void 0 ? void 0 : (_chart$config2 = chart.config) === null || _chart$config2 === void 0 ? void 0 : _chart$config2.type, "-formatter-container"))
-    }, /*#__PURE__*/React.createElement(Title, {
+    }, !hideTitle && /*#__PURE__*/React.createElement(Title, {
       chart: chart
     }), /*#__PURE__*/React.createElement("div", {
       className: "sea-chart-cavans-container"
@@ -163,7 +194,9 @@ class View extends React.PureComponent {
       data: data,
       tables: tables,
       canvasStyle: canvasStyle,
-      customRender: render
+      customRender: render,
+      globalTheme: globalTheme ? globalTheme : THEME_NAME_MAP.LIGHT,
+      chartColorTheme: chartColorTheme
     }))));
   }
 }
@@ -175,7 +208,14 @@ const propTypes = {
   tables: PropTypes.array.isRequired,
   className: PropTypes.string,
   collaboratorManager: PropTypes.object,
-  render: PropTypes.func // User-defined rendering content
+  hideTitle: PropTypes.bool,
+  globalTheme: PropTypes.string,
+  // light or dark
+  chartColorTheme: PropTypes.string,
+  isCalculateByView: PropTypes.bool,
+  render: PropTypes.func,
+  // User-defined rendering content
+  onViewRef: PropTypes.func
 };
 const defaultProps = {
   canvasStyle: {},
@@ -185,7 +225,9 @@ const defaultProps = {
     config: {},
     style_config: {}
   },
-  collaborators: []
+  collaborators: [],
+  globalTheme: THEME_NAME_MAP.LIGHT,
+  isCalculateByView: false
 };
 View.defaultProps = defaultProps;
 export default View;

package/dist/view/wrapper/area.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import { CHART_LINE_TYPES, CHART_SUMMARY_SHOW, CHART_SUMMARY_TYPE } from '../../constants';
+import { CHART_LINE_TYPES, CHART_SUMMARY_SHOW, CHART_SUMMARY_TYPE, CHART_THEME_COLOR } from '../../constants';
 import intl from '../../intl';
 import { BaseUtils, isFunction } from '../../utils';
 import ChartComponent from './chart-component';
@@ -57,10 +57,11 @@ class Area extends ChartComponent {
       const {
         chart,
         summaryColumn,
-        theme,
+        globalTheme,
         customRender,
-        themeName
+        chartColorTheme
       } = this.props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       const {
         y_axis_summary_type,
         y_axis_summary_method,
@@ -72,12 +73,17 @@ class Area extends ChartComponent {
       const newData = this.getChartGroupData(data);
       const isSmooth = line_type === CHART_LINE_TYPES[1];
       let chartBarColor;
+      let colorCallBack = null;
       if (this.isGroupChart) {
+        this.setColorMap(data, chartColorTheme);
         chartBarColor = this.groupName;
+        colorCallBack = group_name => {
+          return this.colorMap[group_name];
+        };
         this.drawLabels(newData);
       } else {
-        if (themeName) {
-          chartBarColor = BaseUtils.getCurrentTheme(themeName).colors[0];
+        if (chartColorTheme) {
+          chartBarColor = BaseUtils.getCurrentTheme(chartColorTheme).colors[0];
         } else {
           chartBarColor = y_axis_label_color || '#5B8FF9';
         }
@@ -111,7 +117,7 @@ class Area extends ChartComponent {
           duration: 1000,
           easing: 'easeLinear'
         }
-      }).color(chartBarColor).shape(isSmooth ? 'smooth' : 'line').tooltip(false).style({
+      }).color(chartBarColor, colorCallBack).shape(isSmooth ? 'smooth' : 'line').tooltip(false).style({
         lineWidth: 2,
         opacity: 1
       });
@@ -125,7 +131,7 @@ class Area extends ChartComponent {
             duration: 1000,
             easing: 'easeLinear'
           }
-        }).position('name*value').color(chartBarColor).shape('circle').size(4).style({
+        }).position('name*value').color(chartBarColor, colorCallBack).shape('circle').size(4).style({
           stroke: 0,
           fillOpacity: 1
         });
@@ -136,7 +142,7 @@ class Area extends ChartComponent {
           duration: 1000,
           easing: 'easeLinear'
         }
-      }).shape(isSmooth ? 'smooth' : 'area').color(chartBarColor).tooltip('group_name*name*value', (group_name, name, value) => {
+      }).shape(isSmooth ? 'smooth' : 'area').color(chartBarColor, colorCallBack).tooltip('group_name*name*value', (group_name, name, value) => {
         return {
           title: y_axis_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[y_axis_summary_method]),
           value: BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
@@ -229,7 +235,8 @@ Area.propTypes = {
   summaryColumn: PropTypes.object,
   result: PropTypes.array,
   tables: PropTypes.array,
-  theme: PropTypes.object,
+  globalTheme: PropTypes.string,
+  chartColorTheme: PropTypes.string,
   toggleRecords: PropTypes.func,
   customRender: PropTypes.func
 };

package/dist/view/wrapper/bar-custom.js

@@ -5,7 +5,7 @@ import { debounce, maxBy } from 'lodash-es';
 import classNames from 'classnames';
 import intl from '../../intl';
 import { BaseUtils } from '../../utils/chart-utils';
-import { EMPTY_NAME } from '../../constants';
+import { EMPTY_NAME, CHART_THEME_COLOR } from '../../constants';
 import ChartComponent from './chart-component';
 class BarCustom extends ChartComponent {
   constructor(props) {
@@ -71,9 +71,10 @@ class BarCustom extends ChartComponent {
     this.draw = data => {
       const {
         chart,
-        theme,
-        themeName
+        globalTheme,
+        chartColorTheme
       } = this.props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       const {
         label_font_size,
         display_each_block_data
@@ -120,12 +121,10 @@ class BarCustom extends ChartComponent {
           type: 'cat'
         }
       });
-      const currentTheme = BaseUtils.getCurrentTheme(themeName);
-      const themeColors = this.getThemeColors();
       let labelCfg = {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: themeColors.labelColor,
+          fill: theme.labelColor,
           stroke: '#fff',
           lineWidth: 1
         }
@@ -133,8 +132,7 @@ class BarCustom extends ChartComponent {
       if (displayData) {
         labelCfg.position = 'middle';
       }
-      const groupColorCallback = currentTheme && currentTheme.colors;
-      this.chart.interval().label(displayData ? 'formatted_value' : false, labelCfg).position('name*value').color('group_name', groupColorCallback).size(singleBarWidth).tooltip('name*formatted_value*group_name*raw_name', (name, value, group_name, raw_name) => {
+      this.chart.interval().label(displayData ? 'formatted_value' : false, labelCfg).position('name*value').color('group_name', BaseUtils.getCurrentTheme(chartColorTheme).colors).size(singleBarWidth).tooltip('name*formatted_value*group_name*raw_name', (name, value, group_name, raw_name) => {
         let nameContent = group_name;
         if (!group_name && typeof group_name !== 'number') {
           nameContent = intl.get(EMPTY_NAME);
@@ -214,7 +212,8 @@ BarCustom.propTypes = {
   summaryColumn: PropTypes.object,
   result: PropTypes.array,
   tables: PropTypes.array,
-  theme: PropTypes.object,
+  globalTheme: PropTypes.string,
+  chartColorTheme: PropTypes.string,
   toggleRecords: PropTypes.func
 };
 export default BarCustom;

package/dist/view/wrapper/bar-group.js

@@ -6,7 +6,7 @@ import { debounce, maxBy, throttle } from 'lodash-es';
 import classNames from 'classnames';
 import intl from '../../intl';
 import { sortDataByGroupSum } from '../../utils/column-utils';
-import { EMPTY_NAME, CHART_TYPE, CHART_SUMMARY_TYPE, DEFAULT_NUMBER_FORMAT_OBJECT } from '../../constants';
+import { EMPTY_NAME, CHART_TYPE, CHART_SUMMARY_TYPE, DEFAULT_NUMBER_FORMAT_OBJECT, CHART_THEME_COLOR } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
 import ChartComponent from './chart-component';
 class BarGroup extends ChartComponent {
@@ -64,7 +64,8 @@ class BarGroup extends ChartComponent {
       const {
         chart,
         summaryColumn,
-        theme,
+        globalTheme,
+        chartColorTheme,
         customRender
       } = this.props;
       const {
@@ -75,6 +76,7 @@ class BarGroup extends ChartComponent {
         display_each_block_data,
         y_axis_summary_type
       } = chart.config;
+      const theme = CHART_THEME_COLOR[globalTheme];
       const isGroup = type === CHART_TYPE.BAR_GROUP;
       const chartBarColor = this.groupName;
       const newData = this.getChartGroupData(data);
@@ -137,7 +139,7 @@ class BarGroup extends ChartComponent {
         type: 'dodge',
         marginRatio: 0
       };
-      this.setColorMap(data);
+      this.setColorMap(data, chartColorTheme);
       this.chart.interval().animate({
         // custom update animation
         update: {
@@ -257,7 +259,8 @@ BarGroup.propTypes = {
   summaryColumn: PropTypes.object,
   result: PropTypes.array,
   tables: PropTypes.array,
-  theme: PropTypes.object,
+  globalTheme: PropTypes.string,
+  chartColorTheme: PropTypes.string,
   toggleRecords: PropTypes.func,
   customRender: PropTypes.func
 };

package/dist/view/wrapper/bar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { debounce } from 'lodash-es';
 import classNames from 'classnames';
-import { CHART_SUMMARY_TYPE, CHART_SUMMARY_SHOW, TYPE_COLOR_USING, CHART_STYLE_COLORS } from '../../constants';
+import { CHART_SUMMARY_TYPE, CHART_SUMMARY_SHOW, TYPE_COLOR_USING, CHART_STYLE_COLORS, CHART_THEME_COLOR } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
 import { getLabelColor, getConvertedColorRules } from '../../utils/color-utils';
 import intl from '../../intl';
@@ -49,10 +49,11 @@ class Bar extends ChartComponent {
       const {
         chart,
         summaryColumn,
-        theme,
+        globalTheme,
         customRender,
-        themeName
+        chartColorTheme
       } = this.props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       const {
         y_axis_summary_type,
         y_axis_summary_method,
@@ -67,8 +68,8 @@ class Bar extends ChartComponent {
       const singleBarWidth = Math.round(chartWidth / (2 * data.length));
       const singleBarRadius = Math.min(singleBarWidth / 5, 10);
       let chartBarColor = y_axis_label_color || CHART_STYLE_COLORS[0];
-      if (themeName) {
-        chartBarColor = BaseUtils.getCurrentTheme(themeName).colors[0];
+      if (chartColorTheme) {
+        chartBarColor = BaseUtils.getCurrentTheme(chartColorTheme).colors[0];
       }
       const colorRules = color_option === TYPE_COLOR_USING.USE_RULES && y_axis_label_color_rules && getConvertedColorRules(y_axis_label_color_rules);
       this.drawLabels(data);
@@ -153,7 +154,8 @@ Bar.propTypes = {
   summaryColumn: PropTypes.object,
   result: PropTypes.array,
   tables: PropTypes.array,
-  theme: PropTypes.object,
+  globalTheme: PropTypes.string,
+  chartColorTheme: PropTypes.string,
   toggleRecords: PropTypes.func,
   customRender: PropTypes.func
 };

package/dist/view/wrapper/basic-number-card.js

@@ -3,7 +3,7 @@ import { isNumber } from 'dtable-utils';
 import { Chart } from '../../utils/custom-g2';
 import { BaseUtils, isFunction } from '../../utils';
 import intl from '../../intl';
-import { BASIC_NUMBER_CARD_CALCULATION_METHOD, EMPTY_NAME } from '../../constants';
+import { BASIC_NUMBER_CARD_CALCULATION_METHOD, EMPTY_NAME, CHART_THEME_COLOR } from '../../constants';
 class BasicNumericCard extends Component {
   constructor() {
     super(...arguments);
@@ -12,11 +12,12 @@ class BasicNumericCard extends Component {
     };
     this.drawChart = () => {
       const {
-        theme,
+        globalTheme,
         chart,
         result,
         customRender
       } = this.props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       this.chart = new Chart({
         container: this.container,
         autoFit: true,

package/dist/view/wrapper/chart-component.js

@@ -438,11 +438,15 @@ export default class ChartComponent extends Component {
       basicLegendConfig.itemName.style.fontSize = theme.fontSize;
       _this.chart.legend(legendName, basicLegendConfig);
     };
-    this.setColorMap = data => {
+    this.setColorMap = (data, chartColorTheme) => {
       let currentIdx = 0;
+      let colors = CHART_STYLE_COLORS;
+      if (chartColorTheme) {
+        colors = BaseUtils.getCurrentTheme(chartColorTheme).colors;
+      }
       const colorMap = data.reduce((acc, cur) => {
         if (cur.group_name && !acc[cur.group_name]) {
-          acc[cur.group_name] = CHART_STYLE_COLORS[currentIdx++ % CHART_STYLE_COLORS.length];
+          acc[cur.group_name] = colors[currentIdx++ % colors.length];
         }
         return acc;
       }, {});

package/dist/view/wrapper/combination.js

@@ -5,7 +5,7 @@ import { getTableById, getTableColumnByKey } from 'dtable-utils';
 import { throttle } from 'lodash-es';
 import { Chart } from '../../utils/custom-g2';
 import { BaseUtils, isFunction } from '../../utils';
-import { CHART_SUMMARY_TYPE, LABEL_COLORS, CHART_SUMMARY_SHOW, LABEL_POSITION_TYPE, EMPTY_NAME, CHART_LINE_TYPES, CHART_STYLE_COLORS } from '../../constants';
+import { CHART_SUMMARY_TYPE, CHART_SUMMARY_SHOW, LABEL_POSITION_TYPE, EMPTY_NAME, CHART_LINE_TYPES, CHART_STYLE_COLORS, CHART_THEME_COLOR } from '../../constants';
 import intl from '../../intl';
 import ChartComponent from './chart-component';
 class Combination extends ChartComponent {
@@ -25,11 +25,12 @@ class Combination extends ChartComponent {
       if (!Array.isArray(data)) return;
       const {
         chart,
-        theme,
+        globalTheme,
         tables,
-        themeName,
+        chartColorTheme,
         customRender
       } = this.props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       const {
         table_id,
         y_axis_left_summary_column,
@@ -45,7 +46,6 @@ class Combination extends ChartComponent {
         y_axis_auto_range_right,
         y_axis_min_right,
         y_axis_max_right,
-        x_axis_column_key,
         display_data,
         label_font_size,
         line_type
@@ -79,7 +79,7 @@ class Combination extends ChartComponent {
       }, ['', -Infinity])[0];
       const singleBarWidth = Math.round(chartWidth / (2 * nameNums * mostCommonCount));
       const singleBarRadius = Math.min(singleBarWidth / 5, 10);
-      const currentTheme = BaseUtils.getCurrentTheme(themeName);
+      const currentTheme = BaseUtils.getCurrentTheme(chartColorTheme);
       this.colorMap = data.reduce((acc, cur, index) => {
         if (!acc[cur.group_name]) {
           acc[cur.group_name] = cur.color;
@@ -675,13 +675,13 @@ class Combination extends ChartComponent {
   }
 }
 Combination.propTypes = {
-  themeName: PropTypes.string,
   canvasStyle: PropTypes.object,
   chart: PropTypes.object,
   summaryColumn: PropTypes.object,
   result: PropTypes.array,
   tables: PropTypes.array,
-  theme: PropTypes.object,
+  globalTheme: PropTypes.string,
+  chartColorTheme: PropTypes.string,
   toggleRecords: PropTypes.func,
   customRender: PropTypes.func
 };