sea-chart 0.0.22 → 0.0.24

package/dist/constants/index.js

@@ -171,7 +171,8 @@ export const CHART_THEME_COLOR = {
   light: {
     textColor: '#666666',
     fontSize: 13,
-    gridColor: '#e2e2e2',
+    gridColor: '#F3F3F3',
+    XAxisColor: '#CCCCCC',
     labelColor: '#999999',
     cardColor: '#545454',
     legendTextColor: '#333333',

package/dist/model/bar-stack.js

@@ -1,6 +1,6 @@
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
 import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import BaseModel from './base-model';
 class BarStack extends BaseModel {
   constructor(options) {
     super({

package/dist/model/bar.js

@@ -1,6 +1,6 @@
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
 import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import BaseModel from './base-model';
 class Bar extends BaseModel {
   constructor(options) {
     super({

package/dist/model/combination.js

@@ -1,6 +1,6 @@
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
 import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import BaseModel from './base-model';
 class Combination extends BaseModel {
   constructor(options) {
     super({

package/dist/model/compare-bar.js

@@ -1,7 +1,7 @@
 import { isDateColumn, getTableById, getTableColumnByKey } from 'dtable-utils';
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
 import { CHART_TYPE } from '../constants';
+import BaseModel from './base-model';
 class CompareBar extends BaseModel {
   constructor(options, tables) {
     super({

package/dist/model/completeness.js

@@ -1,6 +1,6 @@
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
 import { CHART_TYPE } from '../constants';
+import BaseModel from './base-model';
 class Completeness extends BaseModel {
   constructor(options) {
     super({

package/dist/model/dashboard.js

@@ -1,5 +1,5 @@
-import BaseModel from './base-model';
 import { CHART_SUMMARY_TYPE, CHART_TYPE } from '../constants';
+import BaseModel from './base-model';
 class Dashboard extends BaseModel {
   constructor(options) {
     super({

package/dist/model/generic-model.js

@@ -1,7 +1,7 @@
 import { isNumber } from 'dtable-utils';
-import BaseModel from './base-model';
 import { isBoolean, getChartConfigValueByKey } from '../utils';
 import { DATE_GRANULATES, DEFAULT_LABEL_FONT_SIZE, GEOLOCATION_GRANULATES, LABEL_POSITION_TYPE, CHART_SUMMARY_TYPE, GENERIC_KEY, CHART_KEY, LEGEND_DIRECTION } from '../constants';
+import BaseModel from './base-model';
 export default class GenericModel extends BaseModel {
   constructor(object) {
     const options = object || {};

package/dist/model/heat-map.js

@@ -1,6 +1,6 @@
 import { isDateColumn, getTableById, getTableColumnByKey } from 'dtable-utils';
-import BaseModel from './base-model';
 import { CHART_TYPE } from '../constants';
+import BaseModel from './base-model';
 class HeatMap extends BaseModel {
   constructor(options, tables) {
     super({

package/dist/model/horizontal-bar.js

@@ -1,6 +1,6 @@
-import BaseModel from './base-model';
 import { isBoolean } from '../utils';
 import { CHART_TYPE, CHART_SUMMARY_TYPE } from '../constants';
+import BaseModel from './base-model';
 class HorizontalBar extends BaseModel {
   constructor(options) {
     super({

package/dist/model/index.js

@@ -1,7 +1,7 @@
+import { CHART_TYPE } from '../constants';
 import ChartModel from './chart';
 import User from './user';
 import GenericModel from './generic-model';
-import { CHART_TYPE } from '../constants';
 import Bar from './bar';
 import BarGroup from './bar-group';
 import BarStack from './bar-stack';

package/dist/settings/widgets/numeric-summary-item.js

@@ -36,15 +36,13 @@ class NumericSummaryItem extends Component {
         setCurrentSelectedOptions,
         currentAxisesIndex
       } = this.props;
-      if (!currentSelectedOptions) {
-        currentSelectedOptions = [];
-      }
       let selectedColumnOption;
-      const availableOptions = numericColumnOptions.filter(option => {
+      const availableOptions = currentSelectedOptions && numericColumnOptions.filter(option => {
+        var _option$column;
         const index = currentSelectedOptions.findIndex(o => Object.values(o)[0] && Object.values(o)[0].key === option.column.key);
         //  find current option
         //  even index === -1 still return true case it's current selected option
-        if (option.column.key === value.column_key) {
+        if (((_option$column = option.column) === null || _option$column === void 0 ? void 0 : _option$column.key) === value.column_key) {
           //  "addCurrentSelectedOptions" is an async action in react, won't effect loops here
           if (index === -1) {
             addCurrentSelectedOptions(option.column, currentAxisesIndex);
@@ -88,13 +86,20 @@ class NumericSummaryItem extends Component {
       index,
       value,
       numericColumnOptions,
+      currentSelectedOptions,
       currentAxisesIndex
     } = this.props;
     const {
       column_key,
       summary_method
     } = value;
-    const [selectedColumnOption, availableOptions] = this.getAvailableOptions();
+    let selectedColumnOption, availableOptions;
+    if (currentSelectedOptions) {
+      [selectedColumnOption, availableOptions] = this.getAvailableOptions();
+    } else {
+      selectedColumnOption = numericColumnOptions.find(option => option.value.key === column_key);
+      availableOptions = numericColumnOptions;
+    }
     const selectedSummaryMethodOption = this.summaryMethodOptions.find(option => option.value === summary_method);
     const {
       isExpand

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

@@ -75,11 +75,11 @@ BaseUtils.isValidExistChart = (tables, chart) => {
 
   // if current chart is using "groupby_column_key" as key
   // if groupby_column_key is null, still return false
-  let groupByColumnKey = config.groupby_column_key;
+  let groupByColumnKey = config.groupby_column_key || config.x_axis_column_key || config.vertical_axis_column_key || config.columnKey || config.date_column_key;
   if ([CHART_TYPE.BAR, CHART_TYPE.BAR_GROUP, CHART_TYPE.BAR_CUSTOM, CHART_TYPE.BAR_STACK, CHART_TYPE.LINE, CHART_TYPE.LINE_GROUP, CHART_TYPE.AREA, CHART_TYPE.AREA_GROUP].includes(config.type)) {
     groupByColumnKey = config.x_axis_column_key;
   }
-  if ([CHART_TYPE.HORIZONTAL_BAR, CHART_TYPE.HORIZONTAL_GROUP_BAR].includes(config.type)) {
+  if ([CHART_TYPE.HORIZONTAL_BAR, CHART_TYPE.HORIZONTAL_GROUP_BAR, CHART_TYPE.STACKED_HORIZONTAL_BAR].includes(config.type)) {
     groupByColumnKey = config.vertical_axis_column_key;
   }
   if ([CHART_TYPE.MAP, CHART_TYPE.MAP_BUBBLE, CHART_TYPE.WORLD_MAP, CHART_TYPE.WORLD_MAP_BUBBLE].includes(config.type)) {

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

@@ -7,8 +7,9 @@ import { getClientLinkDisplayString } from '../cell-format-utils';
 import context from '../../context';
 import { column2SqlColumn } from '../sql/column-2-sql-column';
 import { formatNumericValue, getFormattedValue, getColumnByKey, getSqlGroup, getSummaryResult } from '../column-utils';
-import BaseUtils from './base-utils';
 import { getCompareDate } from '../trend-utils';
+import intl from '../../intl';
+import BaseUtils from './base-utils';
 class SQLStatisticsUtils {}
 _class = SQLStatisticsUtils;
 SQLStatisticsUtils.dataSources = 'sql_statistics';
@@ -1475,7 +1476,7 @@ SQLStatisticsUtils.completenessSQlResult = (chart, sqlRows, sqlStatistics, table
     if (sqlColumnGroupByColumnKey) {
       targetValue = row["SUM(".concat(target_column.name, ")")];
       completedValue = row["SUM(".concat(completed_column.name, ")")];
-      groupby = row[sqlColumnGroupByColumnKey];
+      groupby = row[sqlColumnGroupByColumnKey] || intl.get('Empty');
     } else {
       completedValue = getFormatedKey(row, completed_column);
       targetValue = getFormatedKey(row, target_column);

package/dist/utils/column-utils.js

@@ -1,9 +1,9 @@
 import { CellType, DEFAULT_DATE_FORMAT, FORMULA_COLUMN_TYPES_MAP, FORMULA_RESULT_TYPE, isNumber, isNumericColumn, getNumberDisplayString } from 'dtable-utils';
+import { COLUMNS_ICON_CONFIG } from 'dtable-utils';
+import React from 'react';
+import { MIRROR_COLUMN_LIST, CHART_SUMMARY_TYPE } from '../constants';
 import { getClientFormulaDisplayString } from './cell-format-utils';
 import { ChartUtils } from './chart-utils';
-import { MIRROR_COLUMN_LIST, CHART_SUMMARY_TYPE } from '../constants';
-/* eslint-disable react/react-in-jsx-scope */
-import { COLUMNS_ICON_CONFIG } from 'dtable-utils';
 
 // get dtable column options
 export function getColumnOptions(columns) {

package/dist/view/wrapper/area.js

@@ -1,5 +1,6 @@
 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 intl from '../../intl';
 import { BaseUtils, isFunction } from '../../utils';
@@ -172,7 +173,7 @@ class Area extends ChartComponent {
         });
         this.chart.render();
       });
-      this.setToolTipForLine();
+      this.setToolTipForArea();
       isFunction(customRender) && customRender(this.chart);
       this.setNameLabelAndTooltip(theme, this.labelCount);
       this.setValueLabel(theme);
@@ -206,8 +207,14 @@ class Area extends ChartComponent {
     super.componentWillUnmount();
   }
   render() {
+    const {
+      chart
+    } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: 'sea-chart-container',
+      className: classNames('sea-chart-container', {
+        'show-x-axis-label': this.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      }),
       ref: ref => this.container = ref
     });
   }

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

@@ -2,6 +2,7 @@ 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 } from '../../constants';
@@ -124,7 +125,7 @@ class BarCustom extends ChartComponent {
       let labelCfg = {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: themeColors.textColor
+          fill: themeColors.labelColor
         }
       };
       if (displayData) {
@@ -191,8 +192,14 @@ class BarCustom extends ChartComponent {
     window.removeEventListener('resize', this.handleResize);
   }
   render() {
+    const {
+      chart
+    } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: 'sea-chart-container ',
+      className: classNames('sea-chart-container', {
+        'show-x-axis-label': this.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      }),
       ref: ref => this.container = ref
     });
   }

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import DataSet from '@antv/data-set';
 import { getNumberDisplayString } from 'dtable-utils';
 import { debounce, maxBy } 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';
@@ -145,7 +146,7 @@ class BarGroup extends ChartComponent {
         },
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.textColor
+          fill: theme.labelColor
         },
         position: type === CHART_TYPE.BAR_STACK ? 'middle' : ''
       }).position('name*value').size(singleBarWidth).color(chartBarColor).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
@@ -208,8 +209,14 @@ class BarGroup extends ChartComponent {
     window.removeEventListener('resize', this.debouncedHandleResize);
   }
   render() {
+    const {
+      chart
+    } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: 'sea-chart-container',
+      className: classNames('sea-chart-container', {
+        'show-x-axis-label': this.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      }),
       ref: ref => this.container = ref
     });
   }

package/dist/view/wrapper/bar.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { debounce } from 'lodash-es';
-import { CHART_SUMMARY_TYPE, CHART_SUMMARY_SHOW, TYPE_COLOR_USING } from '../../constants';
+import classNames from 'classnames';
+import { CHART_SUMMARY_TYPE, CHART_SUMMARY_SHOW } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
-import { getConvertedColorRules } from '../../utils/color-utils';
 import intl from '../../intl';
 import ChartComponent from './chart-component';
 class Bar extends ChartComponent {
@@ -67,11 +67,12 @@ class Bar extends ChartComponent {
       const singleBarRadius = singleBarWidth / 5;
 
       // #8B99EA is designed color, don't change it unless design is changed
-      let chartBarColor = y_axis_label_color || '#8B99EA';
-      if (themeName) {
-        chartBarColor = BaseUtils.getCurrentTheme(themeName).colors[0];
-      }
-      const colorRules = color_option === TYPE_COLOR_USING.USE_RULES && y_axis_label_color_rules && getConvertedColorRules(y_axis_label_color_rules);
+      // let chartBarColor = y_axis_label_color || '#8B99EA';
+      // if (themeName) {
+      //   chartBarColor = BaseUtils.getCurrentTheme(themeName).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);
       // set Coord type
       this.chart.coordinate('rect');
@@ -79,7 +80,7 @@ class Bar extends ChartComponent {
       this.chart.interval().label(y_axis_show_value ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.textColor
+          fill: theme.labelColor
         }
       }).position('name*value').size(singleBarWidth).tooltip('name*value', (name, value) => {
         return {
@@ -101,7 +102,6 @@ class Bar extends ChartComponent {
         // });
         return {
           // fill: color || chartBarColor,
-          fill: chartBarColor,
           radius: [singleBarRadius, singleBarRadius, 0, 0]
         };
       });
@@ -131,8 +131,14 @@ class Bar extends ChartComponent {
     window.removeEventListener('resize', this.debouncedHandleResize);
   }
   render() {
+    const {
+      chart
+    } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: 'sea-chart-container ',
+      className: classNames('sea-chart-container', {
+        'show-x-axis-label': this.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      }),
       ref: ref => this.container = ref
     });
   }

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

@@ -195,11 +195,11 @@ export default class ChartComponent extends Component {
         div.className = 'chart-axis-label';
         const column = getTableColumnByKey(table, x_axis_column_key);
         div.innerHTML = "".concat(column ? column.name : '');
-        div.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -25px; position: absolute"));
+        div.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
         chartContainer.appendChild(div);
       }
       if (xLabel && x_axis_show_label) {
-        xLabel.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -25px; position: absolute"));
+        xLabel.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
       }
       if (xLabel && !x_axis_show_label) {
         xLabel.parentNode.removeChild(xLabel);
@@ -283,12 +283,15 @@ export default class ChartComponent extends Component {
       if (!_this.chart) return;
       _this.chart.axis('name', {
         line: {
-          style: theme.gridColor
+          style: {
+            stroke: theme.XAxisColor,
+            lineWidth: 1
+          }
         },
         tickLine: {
           length: 5,
           // color of the tick line
-          stroke: theme.gridColor
+          stroke: theme.XAxisColor
         },
         label: {
           style: {
@@ -327,7 +330,8 @@ export default class ChartComponent extends Component {
         grid: {
           line: {
             style: {
-              stroke: theme.gridColor
+              stroke: theme.gridColor,
+              lineDash: [8, 3]
             }
           }
         }
@@ -401,15 +405,19 @@ export default class ChartComponent extends Component {
           },
           style: style => {
             // fill legend with stroke color
-            style.fill = style.stroke;
+            if (style.stroke) {
+              style.fill = style.stroke;
+            }
             return style;
           }
         }
       });
     };
-    this.getToolSettings = () => {
+    this.getToolTipSettings = () => {
       return {
         showMarkers: false,
+        containerTpl: "<div class=\"g2-tooltip\">\n        <div class=\"g2-tooltip-title\">{title}</div>\n        <ul class=\"g2-tooltip-list\"></ul>\n      </div>",
+        itemTpl: "<li class=\"g2-tooltip-list-item\">\n         <span class=\"g2-tooltip-marker\" style=\"background-color:{color};display:inline-block;\"></span>\n         <span class=\"g2-tooltip-name\">{name}</span>\n         <span class=\"g2-tooltip-value\">{value}</span>\n      </li>",
         domStyles: {
           'g2-tooltip': {
             boxSizing: 'border-box',
@@ -426,7 +434,12 @@ export default class ChartComponent extends Component {
           'g2-tooltip-title': {
             color: '#333333',
             fontSize: '14px',
-            paddingBottom: '10px'
+            paddingBottom: '10px',
+            maxWidth: '160px',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            lineHeight: '14px',
+            textOverflow: 'ellipsis'
           },
           'g2-tooltip-list-item': {
             marginBottom: '8px'
@@ -435,11 +448,16 @@ export default class ChartComponent extends Component {
             width: '12px',
             height: '12px',
             borderRadius: '2px',
-            marginBottom: '-1.5px',
             marginRight: '8px'
           },
           'g2-tooltip-name': {
-            fontSize: '12px'
+            display: 'inline-block',
+            fontSize: '12px',
+            maxWidth: '80px',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            lineHeight: '12px',
+            textOverflow: 'ellipsis'
           },
           'g2-tooltip-value': {
             fontSize: '12px'
@@ -448,11 +466,33 @@ export default class ChartComponent extends Component {
       };
     };
     this.setToolTip = () => {
-      const settings = this.getToolSettings();
+      const settings = this.getToolTipSettings();
       this.chart.tooltip(settings);
     };
     this.setToolTipForLine = () => {
-      const settings = this.getToolSettings();
+      const settings = this.getToolTipSettings();
+      const lineToolTipSettings = {
+        showCrosshairs: true,
+        showTitle: true,
+        shared: true,
+        showMarkers: true,
+        marker: {
+          strokeOpacity: 0,
+          r: 6
+        },
+        crosshairs: {
+          line: {
+            fill: '#F3F3F3'
+          }
+        }
+      };
+      this.chart.tooltip({
+        ...settings,
+        ...lineToolTipSettings
+      });
+    };
+    this.setToolTipForArea = () => {
+      const settings = this.getToolTipSettings();
       const lineToolTipSettings = {
         showCrosshairs: true,
         showTitle: true,
@@ -464,7 +504,7 @@ export default class ChartComponent extends Component {
         },
         crosshairs: {
           line: {
-            fill: '#e2e2e2'
+            fill: '#F3F3F3'
           }
         }
       };

package/dist/view/wrapper/completeness.js

@@ -6,6 +6,7 @@ import intl from '../../intl';
 import { CHART_STYLE_COLORS, CHART_TYPE } from '../../constants';
 import ChartComponent from './chart-component';
 export default function Completeness(props) {
+  var _chartRef$current, _chartRef$current2;
   const chartRef = useRef(null);
   const chartContainerRef = useRef(null);
   useEffect(() => {
@@ -77,7 +78,7 @@ export default function Completeness(props) {
         if (group_name === 'rest') {
           return '#bdbdbd';
         }
-        if (isGroup) {
+        if (isGroup && column_groupby_column_key) {
           return colorMap[groupby];
         }
         return CHART_STYLE_COLORS[0];
@@ -122,7 +123,7 @@ export default function Completeness(props) {
         },
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.textColor
+          fill: theme.labelColor
         }
       }).position('name*value').size(singleBarWidth).color(colorField, colorFieldCb).adjust(adjustType).tooltip('name*group_name*value', (name, group_name, value) => {
         return {
@@ -156,8 +157,14 @@ export default function Completeness(props) {
       window.removeEventListener('resize', handleReize);
     };
   }, [props]);
+  const {
+    chart
+  } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames('sea-chart-completeness-chart sea-chart-container '),
+    className: classnames('sea-chart-completeness-chart sea-chart-container', {
+      'show-x-axis-label': (_chartRef$current = chartRef.current) === null || _chartRef$current === void 0 ? void 0 : _chartRef$current.isShowXAxisLabel(chart),
+      'show-y-axis-label': (_chartRef$current2 = chartRef.current) === null || _chartRef$current2 === void 0 ? void 0 : _chartRef$current2.isShowYAxisLabel(chart)
+    }),
     ref: chartContainerRef
   });
 }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { debounce, maxBy } from 'lodash-es';
+import classNames from 'classnames';
 import { CHART_TYPE, EMPTY_NAME } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
 import intl from '../../intl';
@@ -92,7 +93,7 @@ class HorizontalBarGroup extends HorizontalComponent {
         },
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.textColor
+          fill: theme.labelColor
         }
       }).position('name*value').size(singleBarWidth).color(chartBarColor).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
         return {
@@ -153,8 +154,14 @@ class HorizontalBarGroup extends HorizontalComponent {
     window.removeEventListener('resize', this.handleResize);
   }
   render() {
+    const {
+      chart
+    } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: 'sea-chart-container ',
+      className: classNames('sea-chart-container', {
+        'show-x-axis-label': this.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      }),
       ref: ref => this.container = ref
     });
   }

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

@@ -1,6 +1,6 @@
 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 } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
 import intl from '../../intl';
@@ -50,6 +50,8 @@ class HorizontalBar extends HorizontalComponent {
       const {
         horizontal_axis_summary_type,
         horizontal_axis_summary_method,
+        color_option,
+        y_axis_label_color_rules,
         horizontal_axis_label_color,
         display_data,
         label_font_size
@@ -59,10 +61,13 @@ class HorizontalBar extends HorizontalComponent {
       const chartHeight = this.chart.height - 6 - 10;
       const singleBarWidth = Math.round(chartHeight / (2 * data.length));
       const singleBarRadius = singleBarWidth / 5;
-      let chartBarColor = horizontal_axis_label_color || '#8B99EA';
-      if (themeName) {
-        chartBarColor = BaseUtils.getCurrentTheme(themeName).colors[0];
-      }
+
+      // let chartBarColor = horizontal_axis_label_color || '#8B99EA';
+      // if (themeName) {
+      //   chartBarColor = BaseUtils.getCurrentTheme(themeName).colors[0];
+      // }
+      // const colorRules = color_option === TYPE_COLOR_USING.USE_RULES && y_axis_label_color_rules && getConvertedColorRules(y_axis_label_color_rules);
+
       data.reverse();
       this.drawLabels(data);
 
@@ -72,7 +77,7 @@ class HorizontalBar extends HorizontalComponent {
       this.chart.interval().label(display_data ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.textColor
+          fill: theme.labelColor
         }
       }).position('name*value')
       // .color(chartBarColor)
@@ -96,7 +101,6 @@ class HorizontalBar extends HorizontalComponent {
         // });
         return {
           // fill: color || chartBarColor,
-          fill: chartBarColor,
           radius: [singleBarRadius, singleBarRadius, 0, 0]
         };
       });
@@ -125,8 +129,14 @@ class HorizontalBar extends HorizontalComponent {
     super.componentWillUnmount();
   }
   render() {
+    const {
+      chart
+    } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: 'sea-chart-container',
+      className: classNames('sea-chart-container', {
+        'show-x-axis-label': this.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      }),
       ref: ref => this.container = ref
     });
   }

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

@@ -71,7 +71,7 @@ class LineGroup extends ChartComponent {
       const line = this.chart.line().label(y_axis_show_value ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.textColor
+          fill: theme.labelColor
         }
       }).animate({
         appear: {

package/dist/view/wrapper/mirror.js

@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { getTableById, getTableColumnByKey, getNumberDisplayString } from 'dtable-utils';
-import ChartComponent from './chart-component';
 import intl from '../../intl';
 import { BaseUtils } from '../../utils';
 import { CHART_SUMMARY_TYPE, TITLE_AMOUNT, DEFAULT_NUMBER_FORMAT_OBJECT, CHART_SUMMARY_SHOW } from '../../constants';
+import ChartComponent from './chart-component';
 class Mirror extends ChartComponent {
   constructor(props) {
     super(props);
@@ -71,7 +71,7 @@ class Mirror extends ChartComponent {
         },
         label: {
           style: {
-            fill: themeColors.textColor
+            fill: themeColors.labelColor
           },
           formatter: name => {
             let label = name;

package/dist/view/wrapper/pie.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { CHART_LABEL_POSITIONS, CHART_LABEL_FORMATS } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
-import ChartComponent from './chart-component';
 import intl from '../../intl';
+import ChartComponent from './chart-component';
 class Pie extends ChartComponent {
   constructor(props) {
     super(props);
@@ -56,7 +56,7 @@ class Pie extends ChartComponent {
           custom: true,
           itemName: {
             style: {
-              fill: theme.textColor
+              fill: theme.labelColor
             }
           },
           items: newData.map((obj, index) => {

package/dist/view/wrapper/scatter.js

@@ -83,7 +83,7 @@ export function Scatter(props) {
       currentChart.chart.point().position('name*value').label(y_axis_show_value ? 'value' : false, {
         style: {
           fontSize: BaseUtils.getLabelFontSize(label_font_size),
-          fill: '#6e6e6e'
+          fill: theme.labelColor
         }
       }).color('groupby', groupby => {
         if (groupby[0] === 'groupby') {
@@ -121,7 +121,7 @@ export function Scatter(props) {
   const showXLabel = chartRef.current.isShowXAxisLabel(chart);
   const showYLabel = chartRef.current.isShowYAxisLabel(chart);
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames('sea-chart-container ', {
+    className: classnames('sea-chart-container', {
       'show-x-axis-label': showXLabel,
       'show-y-axis-label': showYLabel
     }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",