sea-chart 2.0.42 → 2.0.44

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { CellType } from 'dtable-utils';
-import { debounce, isNaN, cloneDeep } from 'lodash-es';
+import { isNaN, cloneDeep } from 'lodash-es';
 import * as d3 from 'd3';
-import classNames from 'classnames';
 import intl from '../../intl';
 import { sortDataByGroupSum } from '../../utils/column-utils';
 import { EMPTY_NAME, CHART_THEME_COLOR, CHART_STYLE_COLORS } from '../../constants';
@@ -14,11 +13,6 @@ import ChartComponent from './chart-component';
 class BarStack extends ChartComponent {
   constructor(props) {
     super(props);
-    this.handleResize = () => {
-      this.destroyChart();
-      this.createChart();
-      this.drawChart();
-    };
     this.createChart = () => {
       const {
         chart
@@ -31,8 +25,8 @@ class BarStack extends ChartComponent {
       const initConfig = {
         insertPadding: 30,
         borderRadius: 0.2,
-        marginLeft: y_axis_show_label ? 20 : 0,
-        marginBottom: x_axis_show_label ? 20 : 0,
+        marginLeft: y_axis_show_label ? this.getAxisTitleHeight(chart.config.y_axis_label_font_size) : 0,
+        marginBottom: x_axis_show_label ? this.getAxisTitleHeight(chart.config.x_axis_label_font_size) : 0,
         marginTop: display_each_block_data ? 15 : 0
       };
       this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
@@ -145,7 +139,6 @@ class BarStack extends ChartComponent {
           if (Number(firstEl.getAttribute('height')) === 0) {
             firstEl = reverseGroup.slice(1).find(item => Number(item.getAttribute('height')) !== 0);
           }
-          // Add mask rect
           firstEl && this.addMaskRect((_firstEl = firstEl) === null || _firstEl === void 0 ? void 0 : _firstEl.parentNode, firstEl, x.bandwidth());
         });
         const [topG] = g._parents.slice(-1);
@@ -159,8 +152,11 @@ class BarStack extends ChartComponent {
         if (y_axis_show_value) {
           this.handleLabelToRectCenter(g, x.bandwidth());
         }
+        this.animateFadeIn(this.contentWrapper.selectAll('text'), this.transitionDuration, this.transitionDuration * 0.5);
+        this.animateStackGrowInY(g);
       }).on('click', (event, data) => {
-        this.props.toggleRecords(data);
+        const resultItem = data.data[1].get(data.key);
+        this.toggleRecords(resultItem);
       }).on('mouseover', event => {
         this.showTooltip(event);
         this.handleAcitveAndInActiveState('inActive', event);
@@ -202,7 +198,7 @@ class BarStack extends ChartComponent {
       } = this.props;
       const {
         y_axis_summary_method
-      } = chart;
+      } = chart.config;
       const offsetX = d3.pointer(event)[0];
       const offsetY = d3.pointer(event)[1];
       const curRect = event.currentTarget;
@@ -247,24 +243,7 @@ class BarStack extends ChartComponent {
       this.setActiveAndInActiveState(state, allGroup, curGroupName);
     };
     this.addMaskRect = (topG, rect, xWidth) => {
-      const {
-        borderRadius
-      } = this.chartBoundingClientRect;
-      // Add mask rect
-      d3.select(topG).append('foreignObject').attr('x', rect.getAttribute('x')).attr('y', rect.getAttribute('y')).attr('opacity', rect.getAttribute('opacity')).attr('width', xWidth).attr('height', rect.getAttribute('height')).attr('data-groupName', rect.getAttribute('data-groupName')).attr('data-value', rect.getAttribute('data-value')).on('click', (event, data) => {
-        this.props.toggleRecords(data);
-      }).on('mouseover', event => {
-        this.showTooltip(event);
-        this.handleAcitveAndInActiveState('inActive', event);
-      }).on('mousemove', event => {
-        this.moveTooltip(event);
-      }).on('mouseleave', (event, data) => {
-        this.hiddenTooltip();
-        this.handleAcitveAndInActiveState('active', event);
-      }).append('xhtml:div').attr('style', `width: 100%; height: 100%; background-color: ${rect.getAttribute('fill')}; border-radius: ${xWidth * borderRadius}px ${xWidth * borderRadius}px 0px 0px`);
-
-      // Remove old rect
-      d3.select(rect).remove();
+      return this.addRoundedClip(rect, 'y', xWidth);
     };
     this.addLabelByEachStack = (data, topG, rect, x) => {
       const {
@@ -328,8 +307,7 @@ class BarStack extends ChartComponent {
   componentDidMount() {
     this.createChart();
     this.drawChart();
-    this.debouncedHandleResize = debounce(this.handleResize, 300);
-    window.addEventListener('resize', this.debouncedHandleResize);
+    super.componentDidMount();
   }
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
@@ -341,22 +319,16 @@ class BarStack extends ChartComponent {
   }
   componentWillUnmount() {
     this.destroyChart();
-    window.removeEventListener('resize', this.debouncedHandleResize);
+    super.componentWillUnmount();
   }
   render() {
-    const {
-      chart
-    } = this.props;
     const {
       tooltipData,
       toolTipPosition
     } = this.state;
     return /*#__PURE__*/React.createElement("div", {
       ref: ref => this.container = ref,
-      className: classNames('sea-chart-container', {
-        'show-x-axis-label': this.isShowXAxisLabel(chart),
-        'show-y-axis-label': this.isShowYAxisLabel(chart)
-      })
+      className: "sea-chart-container"
     }, /*#__PURE__*/React.createElement(ToolTip, {
       tooltipData: tooltipData,
       toolTipPosition: toolTipPosition,

package/dist/view/wrapper/bar.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { debounce } from 'lodash-es';
 import * as d3 from 'd3';
-import classNames from 'classnames';
 import { TYPE_COLOR_USING, CHART_STYLE_COLORS, CHART_THEME_COLOR } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
 import { getLabelColor, getConvertedColorRules } from '../../utils/color-utils';
@@ -12,11 +10,6 @@ import ChartComponent from './chart-component';
 class Bar extends ChartComponent {
   constructor(props) {
     super(props);
-    this.handleResize = () => {
-      this.destroyChart();
-      this.createChart();
-      this.drawChart();
-    };
     this.createChart = () => {
       const {
         chart
@@ -29,8 +22,8 @@ class Bar extends ChartComponent {
       const initConfig = {
         insertPadding: 30,
         borderRadius: 0.2,
-        marginLeft: y_axis_show_label ? 20 : 0,
-        marginBottom: x_axis_show_label ? 20 : 0,
+        marginLeft: y_axis_show_label ? this.getAxisTitleHeight(chart.config.y_axis_label_font_size) : 0,
+        marginBottom: x_axis_show_label ? this.getAxisTitleHeight(chart.config.x_axis_label_font_size) : 0,
         marginTop: y_axis_show_value ? 15 : 0
       };
       this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
@@ -169,7 +162,7 @@ class Bar extends ChartComponent {
         this.checkTickOverlap(g);
       });
       const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper');
-      contentWrapper.selectAll().data(data).join('rect').attr('opacity', 1).attr('fill', d => d3.color(this.getFillColor(d))).attr('data-x', d => x(d.name)).attr('data-y', d => y(d.value)).attr('data-width', x.bandwidth()).attr('data-value', d => d.value).attr('data-groupName', d => d.name).attr('data-slugid', d => d.slugId).attr('x', d => x(d.name)).attr('y', d => y(d.value)).attr('width', x.bandwidth()).attr('height', d => y(0) - y(d.value)).call(g => {
+      contentWrapper.selectAll().data(data).join('rect').attr('opacity', 1).attr('fill', d => d3.color(this.getFillColor(d))).attr('data-x', d => x(d.name)).attr('data-y', d => y(d.value)).attr('data-width', x.bandwidth()).attr('data-value', d => d.value).attr('data-groupName', d => d.name).attr('x', d => x(d.name)).attr('y', d => y(d.value)).attr('width', x.bandwidth()).attr('height', d => y(0) - y(d.value)).call(g => {
         g.nodes().forEach(path => {
           // Add label
           if (y_axis_show_value) {
@@ -185,9 +178,7 @@ class Bar extends ChartComponent {
           }
           // add rect borderRadius
           this.addClipPath({
-            rect: path,
-            parentNode: path.parentNode,
-            rectId: path.getAttribute('data-slugid')
+            rect: path
           });
         });
       }).on('click', (event, data) => {
@@ -200,6 +191,9 @@ class Bar extends ChartComponent {
       }).on('mouseleave', event => {
         this.hiddenTooltip(event);
         this.handleAcitveAndInActiveState('active', event);
+      }).call(g => {
+        this.animateRectGrowInY(g);
+        this.animateFadeIn(contentWrapper.selectAll('text'), this.transitionDuration, this.transitionDuration * 0.5);
       });
       if (display_goal_line && goal_label && goal_value) {
         this.setDispalyGoalLine(goal_label, goal_value, insertPadding, y);
@@ -214,8 +208,7 @@ class Bar extends ChartComponent {
   componentDidMount() {
     this.createChart();
     this.drawChart();
-    this.debouncedHandleResize = debounce(this.handleResize, 300);
-    window.addEventListener('resize', this.debouncedHandleResize);
+    super.componentDidMount();
   }
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
@@ -227,22 +220,16 @@ class Bar extends ChartComponent {
   }
   componentWillUnmount() {
     this.destroyChart();
-    window.removeEventListener('resize', this.debouncedHandleResize);
+    super.componentWillUnmount();
   }
   render() {
-    const {
-      chart
-    } = this.props;
     const {
       tooltipData,
       toolTipPosition
     } = this.state;
     return /*#__PURE__*/React.createElement("div", {
       ref: ref => this.container = ref,
-      className: classNames('sea-chart-container', {
-        'show-x-axis-label': this.isShowXAxisLabel(chart),
-        'show-y-axis-label': this.isShowYAxisLabel(chart)
-      })
+      className: "sea-chart-container"
     }, /*#__PURE__*/React.createElement(ToolTip, {
       tooltipData: tooltipData,
       toolTipPosition: toolTipPosition,

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

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { isNumber } from 'dtable-utils';
+import { isNumber, isEmpty } from 'dtable-utils';
 import { BaseUtils } from '../../utils';
 import intl from '../../intl';
 import { BASIC_NUMBER_CARD_CALCULATION_METHOD, EMPTY_NAME, CHART_THEME_COLOR } from '../../constants';
@@ -43,7 +43,7 @@ class BasicNumericCard extends Component {
       }
     };
     this.formatData = data => {
-      if (!data && data !== 0) return intl.get(EMPTY_NAME);
+      if (isEmpty(data)) return intl.get(EMPTY_NAME);
       const {
         chart,
         summaryColumn
@@ -58,6 +58,10 @@ class BasicNumericCard extends Component {
         return formattedContent;
       }
       let string = data + '';
+      const isNegative = string.startsWith('-');
+      if (isNegative) {
+        string = string.slice(1);
+      }
       const isFloat = string.indexOf('.') > 0;
       if (isFloat) {
         string = string.slice(0, string.indexOf('.'));
@@ -76,6 +80,9 @@ class BasicNumericCard extends Component {
       if (content[0] === ',') {
         content = content.slice(1);
       }
+      if (isNegative) {
+        content = '-' + content;
+      }
       if (isFloat) {
         const initString = data + '';
         content = content + initString.slice(initString.indexOf('.'));