sea-chart 1.1.62 → 1.1.63-alpha.0

package/dist/services/map-json.js

@@ -69,7 +69,8 @@ function getMapJsonQueryUrl(mapLevel, mapLocation) {
   }
 }
 function handleLoadedMapJson(url, mapJson) {
-  const isValid = mapJson && mapJson.features;
+  // geo json and topology json
+  const isValid = mapJson && mapJson.features || mapJson && mapJson.type === 'Topology';
   if (isValid) {
     setMapJson(url, mapJson);
     return mapJson;
@@ -89,6 +90,7 @@ export default async function fetchMapJson(mapLevel, mapLocation, mediaUrl) {
   let mapJson;
   try {
     const res = await fetch("".concat(mediaUrl, "dtable-statistic/geolocation/").concat(url, ".json"));
+    // const res = await fetch('https://geojson.cn/api/china/china.topo.json');
     mapJson = await res.json();
   } catch (error) {
     console.error('on fetchMapJson: fetch error', error);

package/dist/utils/chart-utils/base-utils.js

@@ -1,6 +1,7 @@
 var _BaseUtils;
 import shallowEqual from 'shallowequal';
 import dayjs from 'dayjs';
+import slugid from 'slugid';
 import { CellType, COLLABORATOR_COLUMN_TYPES, FORMULA_COLUMN_TYPES_MAP, FORMULA_RESULT_TYPE, getDateDisplayString, getNumberDisplayString, getOption, getPrecisionNumber, getTableById, getTableColumnByKey, isNumber, isNumericColumn, isDateColumn, sortText, sortNumber, sortDate, sortSingleSelect, sortFormula, getColumnOptions, DateUtils, getGeolocationDisplayString, getFormulaDisplayString, isArchiveView, getViewById, MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP } from 'dtable-utils';
 import { PIE_CHART_COLORS, CHART_SUMMARY_TYPE, CHART_SUPPORT_SORT_COLUMNS, CHART_TYPE, CHART_STYLE_SETTING_KEYS, DEFAULT_LABEL_FONT_SIZE, DEFAULT_NUMBER_FORMAT_OBJECT, X_AXIS_IS_GROUPBY_COLUMN_KEY_CHART_TYPES, STYLE_COLORS, CHART_DATA_SORT_TYPE, CHART_Y_GROUP_TYPE, HORIZONTAL_BAR_CHART_TYPES, COMPLTETELESS_CHART_TYPES, CHART_STYLE_CONFIG_SETTING_KEYS } from '../../constants';
 import { getClientFormulaDisplayString } from '../cell-format-utils';
@@ -543,6 +544,9 @@ BaseUtils.formatEmptyName = (dataList, column_groupby_column_key, emptyName) =>
     if (!item.name) {
       item.name = emptyName;
     }
+    if (!item.slugid) {
+      item.slugId = slugid.nice();
+    }
     if (column_groupby_column_key && !item.group_name) {
       item.group_name = emptyName;
     }

package/dist/view/index.css

@@ -49,10 +49,14 @@
 .sea-chart-formatter .sea-chart-container {
   font-size: 12px;
   position: absolute;
-  left: 2%;
+  left: 0;
+  top: 0;
+  /* left: 2%;
   right: 2%;
   top: 2%;
-  bottom: 8%;
+  bottom: 8%; */
+  width: 100%;
+  height: 100%;
 }
 
 .sea-chart-formatter .sea-chart-container.plugin-number-card,

package/dist/view/wrapper/area.js

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import classNames from 'classnames';
 import { CellType } from 'dtable-ui-component/lib/constants';
-import { CHART_LINE_TYPES, CHART_STYLE_COLORS, CHART_THEME_COLOR, CHART_TYPE, EMPTY_NAME, TYPE_COLOR_USING } from '../../constants';
+import { CHART_LINE_TYPES, CHART_STYLE_COLORS, CHART_THEME_COLOR, TYPE_COLOR_USING, TITLE_AMOUNT } from '../../constants';
 import intl from '../../intl';
 import { BaseUtils, isFunction } from '../../utils';
 import { SUPPORT_SINGLE_SELECT_THEMES_OPTIONS } from '../../constants/color-rules';
@@ -28,7 +27,13 @@ class Area extends ChartComponent {
       const {
         y_axis_show_value
       } = chart.config;
-      const appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0];
+      const appendPadding = {
+        insetRight: 50,
+        insetLeft: 50
+      };
+      if (y_axis_show_value) {
+        appendPadding['paddingTop'] = 17;
+      }
       this.initChart(this.container, {
         appendPadding
       });
@@ -37,7 +42,6 @@ class Area extends ChartComponent {
       });
     };
     this.clearChart = () => {
-      this.chart.annotation().clear(true);
       this.chart.clear(true);
     };
     this.drawChart = () => {
@@ -47,16 +51,12 @@ class Area extends ChartComponent {
       } = this.props;
       data = BaseUtils.formatEmptyName(data, '', intl.get('Empty'));
       if (!Array.isArray(data)) return;
-      if (this.isGroupChart) {
-        this.chart.scale(this.groupName, {
-          type: 'cat'
-        });
-      }
       this.loadData(data);
       this.draw(data);
       isFunction(customRender) && customRender(this.chart);
       requestAnimationFrame(() => {
         this.chart.render();
+        this.renderAxisLabel(this.props.chart, this.props.tables);
       });
     };
     this.draw = data => {
@@ -65,20 +65,18 @@ class Area extends ChartComponent {
         summaryColumn,
         columnGroupbyColumn,
         globalTheme,
-        customRender,
         chartColorTheme
       } = this.props;
       const theme = CHART_THEME_COLOR[globalTheme];
       const {
-        y_axis_summary_type,
         y_axis_summary_method,
         y_axis_label_color,
         line_type,
         y_axis_show_value,
         label_font_size,
-        summary_columns = [],
         color_option,
-        color_theme
+        color_theme,
+        column_groupby_multiple_numeric_column
       } = chart.config;
       const {
         display_goal_line,
@@ -87,20 +85,11 @@ class Area extends ChartComponent {
       } = chart.style_config || {};
       const chartWidth = this.chart.width - 6 - 10; // 10 is y-axis number width and 6 is gap between number and y axis line
 
-      const newData = this.getChartGroupData(data);
       const isSmooth = line_type === CHART_LINE_TYPES[1];
-      const isMultipleSummary = summary_columns && summary_columns.length;
-      const isAreaGroup = chart.config.type === CHART_TYPE.AREA_GROUP;
       const useSingleSelectColumnColor = (columnGroupbyColumn === null || columnGroupbyColumn === void 0 ? void 0 : columnGroupbyColumn.type) === CellType.SINGLE_SELECT && color_theme === SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
       let chartBarColor;
-      let colorCallBack = null;
       if (this.isGroupChart) {
         useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
-        chartBarColor = this.groupName;
-        colorCallBack = group_name => {
-          return this.colorMap[group_name];
-        };
-        this.drawLabels(newData);
       } else {
         // default color
         chartBarColor = CHART_STYLE_COLORS[0];
@@ -112,114 +101,96 @@ class Area extends ChartComponent {
         if (color_option === TYPE_COLOR_USING.USE_SPECIFIC_COLORS && y_axis_label_color) {
           chartBarColor = y_axis_label_color;
         }
-        this.drawLabels(newData);
-      }
-      const title = this.getTitle(this.props.tables, chart.config.table_id, y_axis_summary_type, chart.config.y_axis_column_key || chart.config.y_axis_summary_column_key);
-
-      // set Coord type
-      this.chart.coordinate('rect');
-      this.autoAdjustDataOptions(chart, data, summaryColumn);
-
-      // if area group
-      if (this.isGroupChart) {
-        this.chart.scale({
-          group_name: {
-            type: 'cat'
-          }
-        });
       }
-
-      // line
-      const line = this.chart.line().label(y_axis_show_value ? 'value' : false, {
+      const scaleOptions = this.getYaxisAutoAdjustScaleOptions(chart, data, summaryColumn);
+      const line = this.chart.line().encode('x', 'name').encode('y', 'value').style('shape', isSmooth ? 'smooth' : 'line').style('lineWidth', 2).animate('enter', {
+        type: 'fadeIn',
+        duration: 1000,
+        easing: 'linear'
+      }).label({
+        text: y_axis_show_value ? 'value' : '',
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
           fill: theme.labelColor,
+          dy: -15,
           ...this.labelStroke
         }
-      }).position('name*value').animate({
-        appear: {
-          animation: 'fadeIn',
-          duration: 1000,
-          easing: 'easeLinear'
-        }
-      }).color(chartBarColor, colorCallBack).shape(isSmooth ? 'smooth' : 'line').tooltip(false).style({
-        lineWidth: 2,
-        opacity: 1
-      });
-      const area = this.chart.area().position('name*value').animate({
-        appear: {
-          animation: 'fadeIn',
-          duration: 1000,
-          easing: 'easeLinear'
-        }
-      }).shape(isSmooth ? 'smooth' : 'area').color(chartBarColor, colorCallBack).tooltip('group_name*name*value', (group_name, name, value) => {
+      }).tooltip(false);
+      const area = this.chart.area().encode('x', 'name').encode('y', 'value').axis('x', {
+        ...this.getAxisStyle(theme, 'x'),
+        labelAutoRotate: false
+      }).axis('y', this.getAxisStyle(theme, 'y')).scale('y', {
+        type: 'linear',
+        ...scaleOptions
+      }).style('shape', isSmooth ? 'smooth' : 'area').style('opacity', 0.3).animate('enter', {
+        type: 'fadeIn',
+        duration: 1000,
+        easing: 'linear'
+      }).tooltip(data => {
+        const {
+          name,
+          value,
+          group_name
+        } = data;
         return {
-          title: isAreaGroup && isMultipleSummary ? !name && typeof name !== 'number' ? intl.get('Empty') : name : title,
           value: BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
-          name: isAreaGroup && isMultipleSummary ? !group_name && typeof group_name !== 'number' ? intl.get(EMPTY_NAME) : group_name : name
+          xName: column_groupby_multiple_numeric_column ? group_name : name
         };
-      }).style({
-        fillOpacity: 0.3
+      }).interaction('tooltip', {
+        css: this.getToolTipCss(),
+        render: (event, tooltipData) => {
+          tooltipData.items.forEach(item => {
+            item.name = item.xName;
+          });
+          tooltipData['title'] = this.getTooltipTitle(tooltipData);
+          return this.getToolTipDom(tooltipData);
+        },
+        markerStroke: '',
+        markerR: 5
       });
-
-      // point
-      let point;
-      point = this.chart.point().animate({
-        appear: {
-          animation: 'fadeIn',
-          duration: 1000,
-          easing: 'easeLinear'
-        }
-      }).position('name*value').color(chartBarColor, colorCallBack).shape('circle').size(4).style({
-        stroke: 0,
-        fillOpacity: 1,
-        opacity: y_axis_show_value ? 1 : 0
+      const point = this.chart.point().encode('x', 'name').encode('y', 'value').style('shape', 'circle').style('r', 3).style('opacity', y_axis_show_value ? 1 : 0).animate('enter', {
+        type: 'fadeIn',
+        duration: 1000,
+        easing: 'linear'
       }).tooltip(false);
-      this.chart.on('tooltip:show', () => {
-        if (line.styleOption.cfg.opacity === 0.3) return;
-        line.style({
-          opacity: 0.3,
-          lineWidth: 2
-        });
-        area.style({
-          fillOpacity: 0.1
-        });
-        if (point) point.style({
-          fillOpacity: 0.3,
-          stroke: 0,
-          opacity: 1
-        });
-        this.chart.render();
-      });
-      this.chart.on('tooltip:hide', () => {
-        if (line.styleOption.cfg.opacity === 1) return;
-        line.style({
-          opacity: 1,
-          lineWidth: 2
-        });
-        area.style({
-          fillOpacity: 0.3
-        });
-        if (point) point.style({
-          fillOpacity: 1,
-          stroke: 0,
-          opacity: 0
+      if (this.isGroupChart) {
+        line.encode('color', 'group_name');
+        area.encode('color', 'group_name').legend({
+          color: this.getLegendConfigNew('group_name', theme)
         });
-        this.chart.render();
-      });
+        point.encode('color', 'group_name');
+      } else {
+        line.style('stroke', chartBarColor);
+        area.style('fill', chartBarColor);
+        point.style('fill', chartBarColor);
+      }
       if (display_goal_line && goal_label && goal_value) {
         this.setDispalyGoalLine(goal_label, goal_value, chartWidth);
       }
-      this.setToolTipForArea();
-      isFunction(customRender) && customRender(this.chart);
-      this.setNameLabelAndTooltip(theme, this.labelCount);
-      this.setValueLabel(theme);
-      if (this.isGroupChart) {
-        this.setLegend(this.groupName, theme, 'top-right');
+    };
+    this.getTooltipTitle = tooltipData => {
+      const {
+        chart,
+        summaryColumn
+      } = this.props;
+      const {
+        y_axis_summary_type,
+        column_groupby_multiple_numeric_column
+      } = chart.config;
+      const {
+        title
+      } = tooltipData;
+      if (column_groupby_multiple_numeric_column) {
+        return title;
+      }
+      if (y_axis_summary_type === 'count') {
+        return intl.get(TITLE_AMOUNT);
+      }
+      if (y_axis_summary_type === 'advanced') {
+        return summaryColumn === null || summaryColumn === void 0 ? void 0 : summaryColumn.name;
       }
     };
     this.chart = null;
-    this.groupName = 'group_name';
     this.isGroupChart = false;
     this.needRenderAxisLabel = true;
   }
@@ -227,7 +198,6 @@ class Area extends ChartComponent {
     this.initChartType();
     this.createChart();
     this.drawChart();
-    this.renderAxisLabel(this.props.chart, this.props.tables);
     super.componentDidMount();
   }
   componentDidUpdate(prevProps) {
@@ -238,7 +208,6 @@ class Area extends ChartComponent {
       ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
       this.createChart();
       this.drawChart();
-      this.renderAxisLabel(prevProps.chart, prevProps.tables);
     }
   }
   componentWillUnmount() {
@@ -247,14 +216,8 @@ class Area extends ChartComponent {
     super.componentWillUnmount();
   }
   render() {
-    const {
-      chart
-    } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames('sea-chart-container', {
-        'show-x-axis-label': this.isShowXAxisLabel(chart),
-        'show-y-axis-label': this.isShowYAxisLabel(chart)
-      }),
+      className: "sea-chart-container",
       ref: ref => this.container = ref
     });
   }

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

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import DataSet from '@antv/data-set';
 import { debounce, maxBy } from 'lodash-es';
-import classNames from 'classnames';
 import intl from '../../intl';
 import { BaseUtils } from '../../utils/chart-utils';
 import { EMPTY_NAME, CHART_THEME_COLOR } from '../../constants';
@@ -16,22 +15,12 @@ class BarCustom extends ChartComponent {
       this.drawChart();
     }, 300);
     this.createChart = () => {
-      const {
-        chart
-      } = this.props;
-      const {
-        y_axis_show_value
-      } = chart.config;
-      const appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0]; // used to display value on the top
-      this.initChart(this.container, {
-        appendPadding
-      });
+      this.initChart(this.container);
       this.chart.on('interval:click', e => {
         this.props.toggleRecords(e.data.data);
       });
     };
     this.clearChart = () => {
-      this.chart.annotation().clear(true);
       this.chart.clear(true);
     };
     this.drawChart = () => {
@@ -45,6 +34,43 @@ class BarCustom extends ChartComponent {
       requestAnimationFrame(() => {
         this.chart.render();
         this.renderAxisLabel(this.props.chart, this.props.tables);
+        setTimeout(() => {
+          const {
+            canvas
+          } = this.chart.getContext();
+          const elements = canvas.document.getElementsByClassName('element').filter(el => el.config.type === 'rect');
+          // update x position
+          elements.forEach((element, index) => {
+            const {
+              y_axis_type,
+              x,
+              width
+            } = element.attributes;
+            if (y_axis_type !== '__y_axis__0') {
+              const offsetX = y_axis_type.slice(-1) * width;
+              const marginX = y_axis_type.slice(-1) * 8;
+              element.attr('x', x + offsetX + marginX);
+            }
+          });
+          // update y position
+          const yAxisTypes = new Set([]);
+          elements.forEach(el => yAxisTypes.add(el.attributes.y_axis_type));
+          Array.from(yAxisTypes).forEach(type => {
+            const rects = elements.filter(item => item.attributes.y_axis_type === type);
+            this.handleRectPosition(rects);
+          });
+
+          // Adjust the position of the label
+          const labels = canvas.document.getElementsByClassName('label');
+          labels.forEach(label => {
+            const {
+              y,
+              height
+            } = label.attributes.dependentElement.attributes;
+            const yPosition = y + height / 2;
+            label.attr('y', yPosition - 8); // 8 is font height
+          });
+        }, 0);
       });
     };
     this.organizeData = data => {
@@ -86,33 +112,8 @@ class BarCustom extends ChartComponent {
         goal_value,
         goal_label
       } = chart.style_config || {};
-      const displayData = display_each_block_data;
-      this.chart.scale('group_name', {
-        type: 'cat'
-      });
       const organizedData = this.organizeData(data);
-      const chartWidth = this.chart.width;
-      // item nums in a group
-      const groupCountSums = Object.entries(organizedData).map(_ref => {
-        let [name, group] = _ref;
-        const groupCount = Object.keys(group).length;
-        return [name, groupCount];
-      });
-      // e.g. [ 'a', 3], name "a" has 3 different y_axis_type
-      const mostCommonCountGroup = maxBy(groupCountSums, 1)[1];
-      const singleBarWidth = Math.round(chartWidth / (2 * groupCountSums.length * mostCommonCountGroup));
-      // borderRadius of each bar is designed to be 1/5 of singleBarWidth
-      const singleBarRadius = Math.min(singleBarWidth / 5, 10);
-      this.drawLabels(data);
-
-      // set Coord type
-      this.chart.coordinate('rect');
-      this.chart.scale({
-        // Set the type of the name column so that g2 can draw correctly
-        name: {
-          type: 'cat'
-        }
-      });
+      this.singleBarWidth = this.getSingleBarWidth(organizedData);
 
       // get the total value of each stack
       const dv = new DataSet.DataView().source(data);
@@ -123,65 +124,119 @@ class BarCustom extends ChartComponent {
         as: ['value_sum'],
         groupBy: ['name', 'y_axis_type']
       });
-      this.chart.scale({
-        group_name: {
-          type: 'cat'
-        }
-      });
-      let labelCfg = {
+      this.chart.interval().label({
+        text: display_each_block_data ? 'formatted_value' : '',
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
           fill: theme.labelColor,
           stroke: '#fff',
           lineWidth: 1
-        }
-      };
-      if (displayData) {
-        labelCfg.position = 'middle';
-      }
-      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) => {
+        },
+        transform: [{
+          type: 'overlapHide'
+        }]
+      }).encode('x', 'name').encode('y', 'value').encode('color', 'group_name').axis('x', this.getAxisStyle(theme, 'x')).axis('y', this.getAxisStyle(theme, 'y')).transform({
+        type: 'stackY',
+        groupBy: 'group_name'
+      }).scale('color', {
+        type: 'ordinal',
+        range: BaseUtils.getCurrentTheme(chartColorTheme).colors
+      }).scale('y', {
+        type: 'linear',
+        domainMax: this.getDomainMax(dv)
+      }).style('slugId', 'slugId').style('x_axis_name', 'name').style('y_axis_type', 'y_axis_type').style('maxWidth', this.singleBarWidth).state('active', {
+        fillOpacity: 1,
+        stroke: null
+      }).state('inactive', {
+        fillOpacity: 0.3
+      }).interaction('elementHighlight').tooltip(data => {
+        const {
+          group_name,
+          value
+        } = data;
         let nameContent = group_name;
         if (!group_name && typeof group_name !== 'number') {
           nameContent = intl.get(EMPTY_NAME);
         }
-        const title = !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name;
         return {
-          value,
-          title,
-          name: nameContent
+          name: nameContent,
+          value
         };
-      }).adjust([{
-        type: 'dodge',
-        dodgeBy: 'y_axis_type',
-        // width bewteen bars is designed to be 1/3 of singleBarWidth
-        dodgePadding: singleBarWidth / 3
-      }, {
-        type: 'stack'
-      }]).state({
-        active: {
-          style: {
-            stroke: null
-          }
-        }
-      }).style('isFirst', isFirst => {
-        if (isFirst) {
-          return {
-            radius: [singleBarRadius, singleBarRadius, 0, 0]
-          };
-        } else {
-          return {
-            radius: [0, 0, 0, 0]
-          };
+      }).interaction('tooltip', {
+        series: true,
+        css: this.getToolTipCss(),
+        render: (event, tooltipData) => {
+          return this.getToolTipDom(tooltipData);
         }
+      }).legend({
+        color: this.getLegendConfigNew('group_name', theme)
       });
       if (display_goal_line && goal_label && goal_value) {
-        this.setDispalyGoalLine(goal_label, goal_value, chartWidth);
+        this.setDispalyGoalLine(goal_label, goal_value, this.chart.value.width);
       }
-      this.setToolTip();
-      this.setNameLabelAndTooltip(theme, this.labelCount);
-      this.setValueLabel(theme);
-      this.setLegend('group_name', theme, 'top-right');
-      this.chart.interaction('element-highlight');
+    };
+    this.handleRectPosition = rects => {
+      const {
+        layout
+      } = this.chart.getView();
+      rects.forEach((rect, index) => {
+        const {
+          height,
+          x_axis_name,
+          slugId
+        } = rect.attributes;
+        const bottomY = layout.innerHeight - height; // Bottom position of the axis
+        const yAxisStackRects = rects.filter(item => item.attributes.x_axis_name === x_axis_name);
+        // Multiple stacks
+        if (yAxisStackRects.length > 1) {
+          const stackIndex = yAxisStackRects.findIndex(item => item.attributes.slugId === slugId);
+          if (stackIndex !== -1) {
+            if (stackIndex === 0) {
+              rect.attr('y', bottomY);
+            } else {
+              let offsetY = 0;
+              yAxisStackRects.slice(0, stackIndex).forEach(item => {
+                offsetY = offsetY + item.attributes.height;
+              });
+              rect.attr('y', bottomY - offsetY);
+            }
+          }
+          // the top rect
+          if (stackIndex === yAxisStackRects.length - 1) {
+            // update radius
+            const singleBarRadius = Math.min(this.singleBarWidth / 5, 10); // borderRadius of each bar is designed to be 1/5 of singleBarWidth
+            rect.attr('radius', [singleBarRadius, singleBarRadius, 0, 0]);
+          }
+        } else {
+          // Single stack
+          rect.attr('y', bottomY);
+          // update radius
+          const singleBarRadius = Math.min(this.singleBarWidth / 5, 10); // borderRadius of each bar is designed to be 1/5 of singleBarWidth
+          rect.attr('radius', [singleBarRadius, singleBarRadius, 0, 0]);
+        }
+      });
+    };
+    this.getSingleBarWidth = organizedData => {
+      const chartWidth = this.chart.value.width;
+      // item nums in a group
+      const groupCountSums = Object.entries(organizedData).map(_ref => {
+        let [name, group] = _ref;
+        const groupCount = Object.keys(group).length;
+        return [name, groupCount];
+      });
+      // e.g. [ 'a', 3], name "a" has 3 different y_axis_type
+      const mostCommonCountGroup = maxBy(groupCountSums, 1)[1];
+      const singleBarWidth = Math.round(chartWidth / (2 * groupCountSums.length * mostCommonCountGroup));
+      return singleBarWidth;
+    };
+    this.getDomainMax = dv => {
+      let domainMax = 0;
+      dv.rows.forEach(item => {
+        if (item.value_sum > domainMax) {
+          domainMax = item.value_sum;
+        }
+      });
+      return domainMax;
     };
     this.chart = null;
   }
@@ -205,14 +260,8 @@ class BarCustom extends ChartComponent {
     window.removeEventListener('resize', this.handleResize);
   }
   render() {
-    const {
-      chart
-    } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames('sea-chart-container', {
-        'show-x-axis-label': this.isShowXAxisLabel(chart),
-        'show-y-axis-label': this.isShowYAxisLabel(chart)
-      }),
+      className: "sea-chart-container",
       ref: ref => this.container = ref
     });
   }