sea-chart 0.0.48 → 0.0.49

package/dist/view/wrapper/compare.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { getTableById, getTableColumnByKey, getNumberDisplayString } from 'dtable-utils';
-import { CHART_SUMMARY_TYPE, CHART_SUMMARY_SHOW, DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, TITLE_AMOUNT, TITLE_INCREASE } from '../../constants';
+import { CHART_SUMMARY_TYPE, CHART_SUMMARY_SHOW, DEFAULT_NUMBER_FORMAT_OBJECT, EMPTY_NAME, TITLE_AMOUNT, TITLE_INCREASE, CHART_THEME_COLOR } from '../../constants';
 import { BaseUtils } from '../../utils/chart-utils';
 import intl from '../../intl';
 import ChartComponent from './chart-component';
@@ -42,8 +42,10 @@ class Compare extends ChartComponent {
     this.draw = data => {
       const {
         chart,
-        theme
+        globalTheme,
+        chartColorTheme
       } = this.props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       const {
         table_id,
         y_axis_summary_type,
@@ -78,16 +80,14 @@ class Compare extends ChartComponent {
           type: 'cat'
         }
       });
-      const currentTheme = BaseUtils.getCurrentTheme();
-      const themeColors = this.getThemeColors(theme);
       this.chart.interval().label(display_data ? 'formatted_value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: themeColors.textColor,
+          fill: theme.textColor,
           stroke: '#fff',
           lineWidth: 1
         }
-      }).position('name*value').color('group_name', currentTheme && currentTheme.colors).tooltip('name*formatted_value*raw_name', (name, value, raw_name) => {
+      }).position('name*value').color('group_name', BaseUtils.getCurrentTheme(chartColorTheme).colors).tooltip('name*formatted_value*raw_name', (name, value, raw_name) => {
         const nameContent = !raw_name && typeof raw_name !== 'number' ? intl.get(EMPTY_NAME) : raw_name;
         const titleContent = y_axis_summary_type === 'count' ? intl.get(TITLE_AMOUNT) : intl.get(CHART_SUMMARY_SHOW[y_axis_summary_method]);
         return {
@@ -105,17 +105,17 @@ class Compare extends ChartComponent {
       this.setNameLabelAndTooltip(theme, this.labelCount);
       if (display_increase) {
         this.drawIncreaseLine({
-          themeColors
+          theme
         });
       }
-      this.setAxis(themeColors);
-      this.setLegend('group_name', themeColors);
+      this.setAxis(theme);
+      this.setLegend('group_name', theme);
       this.chart.interaction('active-region');
       this.chart.removeInteraction('legend-filter');
     };
     this.drawIncreaseLine = _ref => {
       let {
-        themeColors
+        theme
       } = _ref;
       const {
         chart
@@ -139,7 +139,7 @@ class Compare extends ChartComponent {
             format: 'percent'
           }),
           style: {
-            fill: themeColors.textColor
+            fill: theme.textColor
           }
         };
       }).color(increase_line_color || '#fbd44a').position('name*increase_value').size(3).tooltip('name*increase_value', (name, value) => {
@@ -156,15 +156,15 @@ class Compare extends ChartComponent {
         grid: null
       });
     };
-    this.setAxis = themeColors => {
+    this.setAxis = theme => {
       this.chart.axis('name', {
         line: {
-          style: themeColors.gridColor
+          style: theme.gridColor
         },
         label: {
           autoRotate: true,
           style: {
-            fill: themeColors.textColor
+            fill: theme.textColor
           },
           formatter: this.labelFormatter
         }
@@ -172,13 +172,13 @@ class Compare extends ChartComponent {
       this.chart.axis('value', {
         label: {
           style: {
-            fill: themeColors.textColor
+            fill: theme.textColor
           }
         },
         grid: {
           line: {
             style: {
-              stroke: themeColors.gridColor
+              stroke: theme.gridColor
             }
           }
         }
@@ -269,7 +269,8 @@ Compare.propTypes = {
   summaryColumn: PropTypes.object,
   result: PropTypes.array,
   tables: PropTypes.array,
-  theme: PropTypes.object,
+  globalTheme: PropTypes.string,
+  chartColorTheme: PropTypes.string,
   toggleRecords: PropTypes.func
 };
 export default Compare;

package/dist/view/wrapper/completeness.js

@@ -3,7 +3,7 @@ import React, { useEffect, useRef } from 'react';
 import { maxBy } from 'lodash-es';
 import { BaseUtils, isBoolean } from '../../utils';
 import intl from '../../intl';
-import { CHART_STYLE_COLORS, CHART_TYPE } from '../../constants';
+import { CHART_STYLE_COLORS, CHART_TYPE, CHART_THEME_COLOR } from '../../constants';
 import ChartComponent from './chart-component';
 export default function Completeness(props) {
   var _chartRef$current, _chartRef$current2;
@@ -50,8 +50,10 @@ export default function Completeness(props) {
       const {
         chart,
         summaryColumn,
-        theme
+        globalTheme,
+        chartColorTheme
       } = props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       const {
         label_font_size,
         column_groupby_column_key,
@@ -59,14 +61,15 @@ export default function Completeness(props) {
       } = chart.config;
       const isGroup = type === CHART_TYPE.COMPLETENESS_GROUP ? true : false;
       let currentIdx = 0;
+      const colors = BaseUtils.getCurrentTheme(chartColorTheme).colors;
       const colorMap = data.reduce((acc, cur) => {
         if (cur.groupby && !acc[cur.groupby]) {
-          acc[cur.groupby] = CHART_STYLE_COLORS[currentIdx++ % CHART_STYLE_COLORS.length];
+          acc[cur.groupby] = colors[currentIdx++ % colors.length];
         }
         return acc;
       }, {});
       const cb1 = group_name => {
-        return group_name === 'rest' ? '#bdbdbd' : undefined;
+        return group_name === 'rest' ? '#bdbdbd' : colors[0];
       };
       const cb2 = (groupby, group_name) => {
         if (group_name === 'rest') {
@@ -75,7 +78,7 @@ export default function Completeness(props) {
         if (isGroup && column_groupby_column_key) {
           return colorMap[groupby];
         }
-        return CHART_STYLE_COLORS[0];
+        return colors[0];
       };
       const colorField = isGroup ? 'groupby*group_name' : 'group_name';
       const colorFieldCb = isGroup ? cb2 : cb1;

package/dist/view/wrapper/dashboard.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { isNumber } from 'dtable-utils';
 import { Chart, registerShape } from '../../utils/custom-g2';
 import { BaseUtils, isFunction } from '../../utils';
+import { CHART_THEME_COLOR } from '../../constants';
 class Dashboard extends Component {
   constructor() {
     super(...arguments);
@@ -11,11 +12,12 @@ class Dashboard extends Component {
     this.drawChart = () => {
       const {
         chart,
-        theme,
+        globalTheme,
         canvasStyle,
         result,
         customRender
       } = this.props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       const value = isNumber(result) ? result : 0;
       const {
         config

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { debounce, maxBy, throttle } from 'lodash-es';
 import classNames from 'classnames';
-import { CHART_TYPE, EMPTY_NAME } from '../../constants';
+import { CHART_TYPE, EMPTY_NAME, CHART_THEME_COLOR } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
 import intl from '../../intl';
 import HorizontalComponent from './horizontal-component';
@@ -54,8 +54,10 @@ class HorizontalBarGroup extends HorizontalComponent {
       const {
         chart,
         summaryColumn,
-        theme
+        globalTheme,
+        chartColorTheme
       } = this.props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       const {
         horizontal_axis_summary_method,
         display_data,
@@ -88,7 +90,7 @@ class HorizontalBarGroup extends HorizontalComponent {
         type: 'dodge',
         marginRatio: 0
       };
-      this.setColorMap(data);
+      this.setColorMap(data, chartColorTheme);
       this.chart.interval().animate({
         // custom update animation
         update: {
@@ -206,7 +208,8 @@ HorizontalBarGroup.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/horizontal-bar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 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';
@@ -45,9 +45,10 @@ class HorizontalBar extends HorizontalComponent {
       const {
         chart,
         summaryColumn,
-        theme,
-        themeName
+        globalTheme,
+        chartColorTheme
       } = this.props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       const {
         horizontal_axis_summary_type,
         horizontal_axis_summary_method,
@@ -63,8 +64,8 @@ class HorizontalBar extends HorizontalComponent {
       const singleBarWidth = Math.round(chartHeight / (2 * data.length));
       const singleBarRadius = Math.min(singleBarWidth / 5, 10);
       let chartBarColor = horizontal_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 && horizontal_axis_label_color_rules && getConvertedColorRules(horizontal_axis_label_color_rules);
       data.reverse();
@@ -150,7 +151,8 @@ HorizontalBar.propTypes = {
   summaryColumn: PropTypes.object,
   result: PropTypes.array,
   tables: PropTypes.array,
-  theme: PropTypes.object,
+  globalTheme: PropTypes.string,
+  chartColorTheme: PropTypes.string,
   toggleRecords: PropTypes.func
 };
 export default HorizontalBar;

package/dist/view/wrapper/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { CHART_TYPE, CHART_THEME_COLOR } from '../../constants';
+import { CHART_TYPE, THEME_NAME_MAP } from '../../constants';
 import { BaseUtils } from '../../utils';
 import Table from './table';
 import Bar from './bar';
@@ -30,7 +30,9 @@ const Wrapper = _ref => {
     chart,
     tables,
     customRender,
-    canvasStyle
+    canvasStyle,
+    globalTheme,
+    chartColorTheme
   } = _ref;
   // const [statisticRecords, setStatisticRecords] = useState({});
   // const [isStatisticRecordsDialogShow, setIsStatisticRecordsDialogShow] = useState(false);
@@ -61,7 +63,8 @@ const Wrapper = _ref => {
     groupbyColumn,
     columnGroupbyColumn,
     summaryColumn,
-    theme: CHART_THEME_COLOR['light'],
+    globalTheme,
+    chartColorTheme,
     toggleRecords: toggleStatisticRecordsDialog
   };
   switch (type) {

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { BaseUtils, isFunction } from '../../utils';
 import intl from '../../intl';
-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 ChartComponent from './chart-component';
 class LineGroup extends ChartComponent {
   constructor(props) {
@@ -46,8 +46,10 @@ class LineGroup extends ChartComponent {
       const {
         chart,
         summaryColumn,
-        theme
+        globalTheme,
+        chartColorTheme
       } = this.props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       const {
         y_axis_show_value,
         label_font_size,
@@ -58,6 +60,7 @@ class LineGroup extends ChartComponent {
       const chartBarColor = this.groupName;
       const newData = this.getChartGroupData(data);
       this.drawLabels(newData);
+      this.setColorMap(data, chartColorTheme);
       const isSmooth = line_type === CHART_LINE_TYPES[1];
 
       // set Coord type
@@ -81,7 +84,9 @@ class LineGroup extends ChartComponent {
           duration: 1000,
           easing: 'easeLinear'
         }
-      }).position('name*value').color(chartBarColor).shape(isSmooth ? 'smooth' : 'line').style({
+      }).position('name*value').color(chartBarColor, group_name => {
+        return this.colorMap[group_name];
+      }).shape(isSmooth ? 'smooth' : 'line').style({
         lineWidth: 2,
         opacity: 1
       }).tooltip('group_name*name*value', (group_name, name, value) => {
@@ -93,7 +98,9 @@ class LineGroup extends ChartComponent {
       });
       let point;
       if (y_axis_show_value) {
-        point = this.chart.point().position('name*value').color(chartBarColor).animate({
+        point = this.chart.point().position('name*value').color(chartBarColor, group_name => {
+          return this.colorMap[group_name];
+        }).animate({
           appear: {
             animation: 'fadeIn',
             duration: 1000,
@@ -179,7 +186,8 @@ LineGroup.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/line.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { BaseUtils, isFunction } from '../../utils';
 import intl from '../../intl';
-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 ChartComponent from './chart-component';
 class Line extends ChartComponent {
   constructor(props) {
@@ -45,10 +45,11 @@ class Line extends ChartComponent {
     this.draw = data => {
       const {
         chart,
-        theme,
-        themeName,
+        globalTheme,
+        chartColorTheme,
         summaryColumn
       } = this.props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       const {
         y_axis_label_color,
         y_axis_show_value,
@@ -58,8 +59,8 @@ class Line extends ChartComponent {
         y_axis_summary_method
       } = chart.config;
       let chartBarColor = y_axis_label_color || '#5B8FF9';
-      if (themeName) {
-        chartBarColor = BaseUtils.getCurrentTheme(themeName).colors[0];
+      if (chartColorTheme) {
+        chartBarColor = BaseUtils.getCurrentTheme(chartColorTheme).colors[0];
       }
       this.drawLabels(data);
       const isSmooth = line_type === CHART_LINE_TYPES[1];
@@ -176,7 +177,8 @@ Line.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/pie.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CHART_LABEL_POSITIONS, CHART_LABEL_FORMATS } from '../../constants';
+import { CHART_LABEL_POSITIONS, CHART_LABEL_FORMATS, CHART_THEME_COLOR } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
 import intl from '../../intl';
 import ChartComponent from './chart-component';
@@ -31,10 +31,12 @@ class Pie extends ChartComponent {
         result: data,
         chart,
         tables,
-        theme,
+        globalTheme,
+        chartColorTheme,
         summaryColumn,
         customRender
       } = this.props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       if (data.length === 0) return;
       this.chart.coordinate('theta', {
         radius: 0.7
@@ -46,10 +48,11 @@ class Pie extends ChartComponent {
         label_font_size,
         summary_method
       } = chart.config;
+      const currentTheme = BaseUtils.getCurrentTheme(chartColorTheme);
       const {
         data: newData,
         colorSet
-      } = BaseUtils.formatPieChartData(data, chart, tables);
+      } = BaseUtils.formatPieChartData(data, chart, tables, currentTheme);
       if (!Array.isArray(newData)) return;
       this.loadData(newData);
       this.chart.on('interval:click', e => {
@@ -131,8 +134,9 @@ class Pie extends ChartComponent {
         label_font_size
       } = this.props.chart.config;
       const {
-        theme
+        globalTheme
       } = this.props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       const item = evt.data.data;
       this.currentChart.label('name*value*percent', (name, value, percent) => {
         let displayValue;
@@ -165,8 +169,9 @@ class Pie extends ChartComponent {
         label_font_size
       } = this.props.chart.config;
       const {
-        theme
+        globalTheme
       } = this.props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       this.currentChart.label('value*percent', (value, percent) => {
         let displayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, value, summary_method);
         return {
@@ -232,7 +237,8 @@ Pie.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/ring.js

@@ -28,10 +28,12 @@ class Ring extends ChartComponent {
         result: data,
         chart,
         tables,
-        theme,
+        globalTheme,
+        chartColorTheme,
         summaryColumn,
         customRender
       } = this.props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       const radius = 0.7;
       const innerRadius = 0.8;
       if (data.length === 0) return;
@@ -48,11 +50,12 @@ class Ring extends ChartComponent {
         summary_method,
         label_format
       } = chart.config;
+      const colorTheme = BaseUtils.getCurrentTheme(chartColorTheme);
       const {
         data: newData,
         colorSet,
         total
-      } = BaseUtils.formatPieChartData(data, chart, tables);
+      } = BaseUtils.formatPieChartData(data, chart, tables, colorTheme);
       if (!Array.isArray(newData)) return;
       this.sum = total;
       this.loadData(newData);
@@ -135,7 +138,7 @@ class Ring extends ChartComponent {
       this.setAnnotation({
         name: intl.get('Total'),
         value: BaseUtils.getSummaryValueDisplayString(summaryColumn, this.sum, summary_method)
-      });
+      }, '', theme);
       this.chart.on('interval:mouseenter', evt => this.onEnterRingChart(evt, {
         summaryColumn,
         summaryMethod: summary_method
@@ -209,8 +212,9 @@ class Ring extends ChartComponent {
         label_font_size
       } = this.props.chart.config;
       const {
-        theme
+        globalTheme
       } = this.props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       const item = evt.data.data;
       this.chart.annotation().clear(true);
       this.currentChart.label('name*value*percent', (name, value, percent) => {
@@ -235,7 +239,7 @@ class Ring extends ChartComponent {
       this.setAnnotation(item, {
         summaryColumn,
         summaryMethod
-      });
+      }, theme);
       this.chart.render(true);
     };
     this.onLeaveRingChart = (evt, _ref2) => {
@@ -248,8 +252,9 @@ class Ring extends ChartComponent {
         label_font_size
       } = this.props.chart.config;
       const {
-        theme
+        globalTheme
       } = this.props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       this.chart.annotation().clear(true);
       this.currentChart.label('value*percent', (value, percent) => {
         let displayValue = BaseUtils.getSummaryValueDisplayString(summaryColumn, value, summary_method);
@@ -271,7 +276,7 @@ class Ring extends ChartComponent {
       }, {
         summaryColumn,
         summaryMethod
-      });
+      }, theme);
       this.chart.render(true);
     };
     this.sum = 0;
@@ -307,6 +312,8 @@ Ring.propTypes = {
   summaryColumn: PropTypes.object,
   result: PropTypes.array,
   tables: PropTypes.array,
+  globalTheme: PropTypes.string,
+  chartColorTheme: PropTypes.string,
   toggleRecords: PropTypes.func,
   customRender: PropTypes.func
 };

package/dist/view/wrapper/scatter.js

@@ -3,7 +3,7 @@ import React, { useEffect, useRef } from 'react';
 import { getTableById, getTableColumnByKey } from 'dtable-utils';
 import { BaseUtils } from '../../utils';
 import intl from '../../intl';
-import { CHART_STYLE_COLORS } from '../../constants';
+import { CHART_THEME_COLOR } from '../../constants';
 import ChartComponent from './chart-component';
 const chartComponent = new ChartComponent();
 export function Scatter(props) {
@@ -38,9 +38,11 @@ export function Scatter(props) {
     function draw(data) {
       const {
         chart,
-        theme,
+        globalTheme,
+        chartColorTheme,
         tables
       } = props;
+      const theme = CHART_THEME_COLOR[globalTheme];
       const {
         label_font_size,
         x_axis_column_key,
@@ -53,9 +55,10 @@ export function Scatter(props) {
       const selectedYAxisColumn = getTableColumnByKey(selectedTable, y_axis_column_key);
       currentChart.drawLabels(data);
       let currentIdx = 0;
+      let colors = BaseUtils.getCurrentTheme(chartColorTheme).colors;
       const colorMap = data.reduce((acc, cur) => {
         if (cur.groupby && !acc[cur.groupby]) {
-          acc[cur.groupby] = CHART_STYLE_COLORS[currentIdx++ % CHART_STYLE_COLORS.length];
+          acc[cur.groupby] = colors[currentIdx++ % colors.length];
         }
         return acc;
       }, {});
@@ -89,7 +92,7 @@ export function Scatter(props) {
         }
       }).color('groupby', groupby => {
         if (groupby && groupby[0] === 'groupby') {
-          return CHART_STYLE_COLORS[0];
+          return colors[0];
         }
         return colorMap[groupby];
       }).shape('circle').tooltip('groupby*name*value', (groupby, name, value) => {

package/dist/view/wrapper/treemap.js

@@ -47,6 +47,7 @@ class Treemap extends ChartComponent {
         result: data,
         chart,
         tables,
+        chartColorTheme,
         summaryColumn,
         customRender
       } = this.props;
@@ -54,10 +55,11 @@ class Treemap extends ChartComponent {
         summary_type,
         summary_method
       } = chart.config;
+      let colorsTheme = BaseUtils.getCurrentTheme(chartColorTheme);
       const {
         data: newData,
         colorSet
-      } = BaseUtils.formatPieChartData(data, chart, tables);
+      } = BaseUtils.formatPieChartData(data, chart, tables, colorsTheme);
       if (!Array.isArray(newData)) return;
       const {
         DataView
@@ -183,7 +185,8 @@ Treemap.propTypes = {
   summaryColumn: PropTypes.object,
   result: PropTypes.array,
   tables: PropTypes.array,
-  theme: PropTypes.object,
+  globalTheme: PropTypes.string,
+  chartColorTheme: PropTypes.string,
   customRender: PropTypes.func
 };
 export default Treemap;