sea-chart 0.0.22 → 0.0.23

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/utils/chart-utils/base-utils.js

@@ -79,7 +79,7 @@ BaseUtils.isValidExistChart = (tables, chart) => {
   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/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';
@@ -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';
@@ -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';
@@ -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');
@@ -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,13 +405,15 @@ 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,
         domStyles: {
@@ -448,11 +454,11 @@ 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,

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];
@@ -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';
@@ -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);
 
@@ -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/scatter.js

@@ -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.23",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",