sea-chart 2.0.42 → 2.0.44

package/dist/view/wrapper/line-group.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 { CellType } from 'dtable-utils';
 import { EMPTY_NAME, CHART_THEME_COLOR, CHART_LINE_TYPES } from '../../constants';
 import { SUPPORT_SINGLE_SELECT_THEMES_OPTIONS } from '../../constants/color-rules';
@@ -13,11 +11,6 @@ import ChartComponent from './chart-component';
 class LineGroup extends ChartComponent {
   constructor(props) {
     super(props);
-    this.handleResize = () => {
-      this.destroyChart();
-      this.createChart();
-      this.drawChart();
-    };
     this.createChart = () => {
       const {
         chart
@@ -29,8 +22,8 @@ class LineGroup extends ChartComponent {
       } = chart.config;
       const initConfig = {
         insertPadding: 30,
-        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);
@@ -187,6 +180,7 @@ class LineGroup extends ChartComponent {
           const xVal = x(d.name) + x.bandwidth() / 2;
           circleData[index]['x'] = xVal;
           circleData[index]['name'] = d.name;
+          circleData[index]['originalData'] = d;
           return xVal;
         }).y((d, index) => {
           const yVal = y(d.value);
@@ -214,7 +208,7 @@ class LineGroup extends ChartComponent {
         } = _ref;
         circleData.forEach(item => {
           if (Object.keys(item).length > 0) {
-            contentWrapper.append('circle').attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', () => {
+            contentWrapper.append('circle').datum(item).attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', () => {
               const colorKey = group_name || group_name === 0 ? group_name : '';
               return this.colorMap[colorKey];
             }).attr('opacity', y_axis_show_value ? 1 : 0).attr('data-groupName', group_name).attr('data-text', item.value).attr('data-name', item.name).call(g => {
@@ -231,11 +225,14 @@ class LineGroup extends ChartComponent {
                 });
               }
             }).on('click', (event, data) => {
-              this.props.toggleRecords(data);
+              this.props.toggleRecords(data.originalData || data);
             });
           }
         });
       });
+      this.animateFadeIn(contentWrapper.selectAll('path'), this.transitionDuration);
+      this.animateFadeIn(contentWrapper.selectAll('circle'), this.transitionDuration, this.transitionDuration * 0.5);
+      this.animateFadeIn(contentWrapper.selectAll('text'), this.transitionDuration, this.transitionDuration * 0.5);
       this.chart.on('mouseover', event => {
         this.updateCircleAndTickStyle({
           event,
@@ -350,8 +347,7 @@ class LineGroup 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);
@@ -363,22 +359,16 @@ class LineGroup 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/line.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, CHART_LINE_TYPES } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
 import intl from '../../intl';
@@ -11,11 +9,6 @@ import ChartComponent from './chart-component';
 class Line extends ChartComponent {
   constructor(props) {
     super(props);
-    this.handleResize = () => {
-      this.destroyChart();
-      this.createChart();
-      this.drawChart();
-    };
     this.createChart = () => {
       const {
         chart
@@ -27,8 +20,8 @@ class Line extends ChartComponent {
       } = chart.config;
       const initConfig = {
         insertPadding: 30,
-        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,6 +162,7 @@ class Line extends ChartComponent {
         const xVal = x(d.name) + x.bandwidth() / 2;
         circleData[index]['x'] = xVal;
         circleData[index]['name'] = d.name;
+        circleData[index]['originalData'] = d;
         return xVal;
       }).y((d, index) => {
         const yVal = y(d.value);
@@ -177,12 +171,11 @@ class Line extends ChartComponent {
         return yVal;
       }).curve(line_type === CHART_LINE_TYPES[1] ? d3.curveBumpX : d3.curveLinear);
       const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper');
-      contentWrapper.append('path').attr('fill', 'none').attr('stroke', chartBarColor).attr('stroke-width', 2).attr('d', () => line(data));
+      contentWrapper.append('path').attr('fill', 'none').attr('stroke', chartBarColor).attr('stroke-width', 2).attr('d', () => line(data)).call(g => this.animateFadeIn(g));
 
       // circle
       circleData.forEach(item => {
-        contentWrapper.append('circle').attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', chartBarColor).attr('opacity', y_axis_show_value ? 1 : 0).attr('data-text', item.value).attr('data-name', item.name).call(g => {
-          // circle label
+        contentWrapper.append('circle').datum(item).attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', chartBarColor).attr('opacity', y_axis_show_value ? 1 : 0).attr('data-text', item.value).attr('data-name', item.name).call(g => {
           if (y_axis_show_value) {
             const curCircleEl = g.node();
             contentWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', BaseUtils.getLabelFontSize(label_font_size)).text(BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(curCircleEl.getAttribute('data-text')), y_axis_summary_method)).call(g => {
@@ -195,9 +188,11 @@ class Line extends ChartComponent {
             });
           }
         }).on('click', (event, data) => {
-          this.props.toggleRecords(data);
+          this.props.toggleRecords(data.originalData || data);
         });
       });
+      this.animateFadeIn(contentWrapper.selectAll('circle'), this.transitionDuration, this.transitionDuration * 0.5);
+      this.animateFadeIn(contentWrapper.selectAll('text'), this.transitionDuration, this.transitionDuration * 0.5);
       this.chart.on('mouseover', event => {
         this.updateCircleAndTickStyle({
           event,
@@ -316,8 +311,7 @@ class Line 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);
@@ -329,22 +323,16 @@ class Line 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/map-bubble.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { debounce } from 'lodash-es';
 import * as d3 from 'd3';
 import { feature } from 'topojson';
 import { getTableById, getTableColumnByKey } from 'dtable-utils';
@@ -13,11 +12,6 @@ import ChartComponent from './chart-component';
 class MapBubble extends ChartComponent {
   constructor(props) {
     super(props);
-    this.handleResize = () => {
-      this.destroyChart();
-      this.createChart();
-      this.drawChart();
-    };
     this.createChart = () => {
       const {
         chart
@@ -116,7 +110,7 @@ class MapBubble extends ChartComponent {
       // 3. Rendering map
       this.chart.append('g').attr('class', 'map-wrapper').selectAll().data(mapJson.features).join('g').append('path').attr('d', d => {
         return pathGenerator(d);
-      }).attr('stroke-width', 1).attr('stroke', '#bdbdbd').attr('stroke-opacity', 1).attr('fill', '#e2e2e2').attr('opacity', 1).attr('data-name', d => d.properties.name);
+      }).attr('stroke-width', 1).attr('stroke', '#bdbdbd').attr('stroke-opacity', 1).attr('fill', '#e2e2e2').attr('opacity', 1).attr('data-name', d => d.properties.name).call(g => this.animateFadeIn(g));
 
       // draw bubble circle
       this.drawCircle(data, mapJson, pathGenerator);
@@ -135,14 +129,15 @@ class MapBubble extends ChartComponent {
     };
     this.handleAcitveAndInActiveState = (state, event, highlightedBorderColor) => {
       if (state === 'active') {
-        d3.select(event.currentTarget).transition().duration(this.transitionDuration).attr('fill-opacity', 0.9);
+        d3.select(event.currentTarget).transition().duration(this.interactionDuration).attr('fill-opacity', 0.9);
         return;
       }
-      d3.select(event.currentTarget).transition().duration(this.transitionDuration).attr('fill-opacity', 0.6);
+      d3.select(event.currentTarget).transition().duration(this.interactionDuration).attr('fill-opacity', 0.6);
     };
     this.getColumnData = () => {
       const {
-        chart
+        chart,
+        tables
       } = this.props;
       const {
         summary_type,
@@ -151,7 +146,7 @@ class MapBubble extends ChartComponent {
       } = chart.config;
       let columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
       if (summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
-        const table = getTableById(table_id);
+        const table = getTableById(tables, table_id);
         const summaryColumn = getTableColumnByKey(table, summary_column_key) || {};
         columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
@@ -204,6 +199,7 @@ class MapBubble extends ChartComponent {
           });
         }
       });
+      this.animateCircleZoomIn(bubbleWrapper.selectAll('circle'));
     };
     this.chart = null;
     this.state = {
@@ -214,8 +210,7 @@ class MapBubble 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,7 +222,7 @@ class MapBubble extends ChartComponent {
   }
   componentWillUnmount() {
     this.destroyChart();
-    window.removeEventListener('resize', this.debouncedHandleResize);
+    super.componentWillUnmount();
   }
   render() {
     const {

package/dist/view/wrapper/map-world-bubble.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { debounce } from 'lodash-es';
 import * as d3 from 'd3';
 import { feature } from 'topojson';
 import { getTableById, getTableColumnByKey } from 'dtable-utils';
@@ -13,11 +12,6 @@ import ChartComponent from './chart-component';
 class MapBubble extends ChartComponent {
   constructor(props) {
     super(props);
-    this.handleResize = () => {
-      this.destroyChart();
-      this.createChart();
-      this.drawChart();
-    };
     this.createChart = () => {
       const {
         chart
@@ -116,7 +110,7 @@ class MapBubble extends ChartComponent {
       // 3. Rendering map
       this.chart.append('g').attr('class', 'map-wrapper').selectAll().data(mapJson.features).join('g').append('path').attr('d', d => {
         return pathGenerator(d);
-      }).attr('stroke-width', 1).attr('stroke', '#bdbdbd').attr('stroke-opacity', 1).attr('fill', '#e2e2e2').attr('opacity', 1).attr('data-name', d => d.properties.name);
+      }).attr('stroke-width', 1).attr('stroke', '#bdbdbd').attr('stroke-opacity', 1).attr('fill', '#e2e2e2').attr('opacity', 1).attr('data-name', d => d.properties.name).call(g => this.animateFadeIn(g));
 
       // draw bubble circle
       this.drawCircle(data, mapJson, pathGenerator);
@@ -135,14 +129,15 @@ class MapBubble extends ChartComponent {
     };
     this.handleAcitveAndInActiveState = (state, event, highlightedBorderColor) => {
       if (state === 'active') {
-        d3.select(event.currentTarget).transition().duration(this.transitionDuration).attr('fill-opacity', 0.9);
+        d3.select(event.currentTarget).transition().duration(this.interactionDuration).attr('fill-opacity', 0.9);
         return;
       }
-      d3.select(event.currentTarget).transition().duration(this.transitionDuration).attr('fill-opacity', 0.6);
+      d3.select(event.currentTarget).transition().duration(this.interactionDuration).attr('fill-opacity', 0.6);
     };
     this.getColumnData = () => {
       const {
-        chart
+        chart,
+        tables
       } = this.props;
       const {
         summary_type,
@@ -151,7 +146,7 @@ class MapBubble extends ChartComponent {
       } = chart.config;
       let columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
       if (summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
-        const table = getTableById(table_id);
+        const table = getTableById(tables, table_id);
         const summaryColumn = getTableColumnByKey(table, summary_column_key) || {};
         columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
@@ -204,6 +199,7 @@ class MapBubble extends ChartComponent {
           });
         }
       });
+      this.animateCircleZoomIn(bubbleWrapper.selectAll('circle'));
     };
     this.chart = null;
     this.state = {
@@ -214,8 +210,7 @@ class MapBubble 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,7 +222,7 @@ class MapBubble extends ChartComponent {
   }
   componentWillUnmount() {
     this.destroyChart();
-    window.removeEventListener('resize', this.debouncedHandleResize);
+    super.componentWillUnmount();
   }
   render() {
     const {

package/dist/view/wrapper/map-world.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { debounce } from 'lodash-es';
 import * as d3 from 'd3';
 import { feature } from 'topojson';
 import { getTableById, getTableColumnByKey } from 'dtable-utils';
@@ -14,11 +13,6 @@ import ChartComponent from './chart-component';
 class Map extends ChartComponent {
   constructor(props) {
     super(props);
-    this.handleResize = () => {
-      this.destroyChart();
-      this.createChart();
-      this.drawChart();
-    };
     this.createChart = () => {
       const {
         chart
@@ -135,7 +129,6 @@ class Map extends ChartComponent {
           }
         }
       }).on('mousemove', event => {
-        console.log(data);
         const value = Number(event.target.parentNode.getAttribute('data-value'));
         if (this.curElement) {
           this.handleAcitveAndInActiveState('inActive', event, highlightedBorderColor);
@@ -176,7 +169,7 @@ class Map extends ChartComponent {
             d3.select(curGroup).attr('fill', color());
           }
         });
-      });
+      }).call(g => this.animateFadeIn(g));
       const columnData = this.getColumnData();
       this.setContinuousLegend({
         previewType: canvasStyle.previewType,
@@ -192,12 +185,12 @@ class Map extends ChartComponent {
         const lastElement = Array.from(event.target.parentNode.parentNode.children).at(-1);
 
         // Add element to the end
-        d3.select(this.curElement).transition().duration(this.transitionDuration).attr('stroke-opacity', 0.7).attr('stroke-width', 0.5).attr('stroke', highlightedBorderColor);
+        d3.select(this.curElement).transition().duration(this.interactionDuration).attr('stroke-opacity', 0.7).attr('stroke-width', 0.5).attr('stroke', highlightedBorderColor);
         lastElement.after(this.curElement);
         return;
       }
       if (this.curElement) {
-        d3.select(this.curElement).transition().duration(this.transitionDuration).attr('stroke-opacity', 1).attr('stroke-width', 1).attr('stroke', '#bdbdbd');
+        d3.select(this.curElement).transition().duration(this.interactionDuration).attr('stroke-opacity', 1).attr('stroke-width', 1).attr('stroke', '#bdbdbd');
       }
     };
     this.getColumnData = () => {
@@ -211,7 +204,10 @@ class Map extends ChartComponent {
       } = chart.config;
       let columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
       if (summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
-        const table = getTableById(table_id);
+        const {
+          tables
+        } = this.props;
+        const table = getTableById(tables, table_id);
         const summaryColumn = getTableColumnByKey(table, summary_column_key) || {};
         columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
@@ -227,8 +223,7 @@ class Map 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);
@@ -240,7 +235,7 @@ class Map extends ChartComponent {
   }
   componentWillUnmount() {
     this.destroyChart();
-    window.removeEventListener('resize', this.debouncedHandleResize);
+    super.componentWillUnmount();
   }
   render() {
     const {

package/dist/view/wrapper/map.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { debounce } from 'lodash-es';
 import * as d3 from 'd3';
 import { feature } from 'topojson';
 import { getTableById, getTableColumnByKey } from 'dtable-utils';
@@ -14,11 +13,6 @@ import ChartComponent from './chart-component';
 class Map extends ChartComponent {
   constructor(props) {
     super(props);
-    this.handleResize = () => {
-      this.destroyChart();
-      this.createChart();
-      this.drawChart();
-    };
     this.createChart = () => {
       const {
         chart
@@ -163,7 +157,7 @@ class Map extends ChartComponent {
             d3.select(item).attr('fill', color());
           }
         });
-      });
+      }).call(g => this.animateFadeIn(g));
       const columnData = this.getColumnData();
       this.setContinuousLegend({
         previewType: canvasStyle.previewType,
@@ -179,12 +173,12 @@ class Map extends ChartComponent {
         const lastElement = Array.from(event.target.parentNode.parentNode.children).at(-1);
 
         // Add element to the end
-        d3.select(this.curElement).select('path').transition().duration(this.transitionDuration).attr('stroke-opacity', 0.7).attr('stroke-width', 0.5).attr('stroke', highlightedBorderColor);
+        d3.select(this.curElement).select('path').transition().duration(this.interactionDuration).attr('stroke-opacity', 0.7).attr('stroke-width', 0.5).attr('stroke', highlightedBorderColor);
         lastElement.after(this.curElement);
         return;
       }
       if (this.curElement) {
-        d3.select(this.curElement).select('path').transition().duration(this.transitionDuration).attr('stroke-opacity', 1).attr('stroke-width', 1).attr('stroke', '#bdbdbd');
+        d3.select(this.curElement).select('path').transition().duration(this.interactionDuration).attr('stroke-opacity', 1).attr('stroke-width', 1).attr('stroke', '#bdbdbd');
       }
     };
     this.getColumnData = () => {
@@ -198,7 +192,10 @@ class Map extends ChartComponent {
       } = chart.config;
       let columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
       if (summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
-        const table = getTableById(table_id);
+        const {
+          tables
+        } = this.props;
+        const table = getTableById(tables, table_id);
         const summaryColumn = getTableColumnByKey(table, summary_column_key) || {};
         columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
       }
@@ -214,8 +211,7 @@ class Map 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,7 +223,7 @@ class Map extends ChartComponent {
   }
   componentWillUnmount() {
     this.destroyChart();
-    window.removeEventListener('resize', this.debouncedHandleResize);
+    super.componentWillUnmount();
   }
   render() {
     const {

package/dist/view/wrapper/mirror.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 { getTableById, getTableColumnByKey, getNumberDisplayString } from 'dtable-utils';
 import { CHART_SUMMARY_SHOW, DEFAULT_NUMBER_FORMAT_OBJECT, CHART_SUMMARY_TYPE, TITLE_AMOUNT } from '../../constants';
 import { BaseUtils } from '../../utils';
@@ -12,11 +10,6 @@ import ChartComponent from './chart-component';
 class Mirror extends ChartComponent {
   constructor(props) {
     super(props);
-    this.handleResize = () => {
-      this.destroyChart();
-      this.createChart();
-      this.drawChart();
-    };
     this.createChart = () => {
       const {
         chart
@@ -118,9 +111,10 @@ class Mirror extends ChartComponent {
       const scaleBand = d3.scaleBand().domain(scaleBandDomain).range(is_transpose ? [insertPadding, chartWidth - insertPadding] : [insertPadding, chartHeight - insertPadding - bottomLegendSpace]).paddingInner(0.1).paddingOuter(0);
 
       // ScaleLinear axis
-      const maxDomain = d3.max(data, d => d.value);
+      const maxDomain = d3.max(data, d => d.value) || 0;
       const scaleLinear1 = d3.scaleLinear().domain([maxDomain, 0]).range([scaleBand(scaleBandDomain[0]), scaleBand.bandwidth()]);
-      const scaleLinear2 = d3.scaleLinear().domain([0, maxDomain]).range([scaleBand(scaleBandDomain[1]), scaleBand(scaleBandDomain[1]) + scaleBand.bandwidth()]);
+      const secondDomainKey = scaleBandDomain[1] !== undefined ? scaleBandDomain[1] : scaleBandDomain[0];
+      const scaleLinear2 = d3.scaleLinear().domain([0, maxDomain]).range([scaleBand(secondDomainKey), scaleBand(secondDomainKey) + scaleBand.bandwidth()]);
       const scaleLinearWrapper = this.chart.append('g').attr('class', 'scale-linear-axis-wrapper');
       scaleLinearWrapper.append('g').attr('class', 'scale-linear-1').attr('transform', is_transpose ? `translate(0, ${chartHeight - insertPadding - bottomLegendSpace})` : `translate(${insertPadding}, 0)`).call(is_transpose ? d3.axisBottom(scaleLinear1).tickSizeInner(0).tickSizeOuter(0).ticks(5) : d3.axisLeft(scaleLinear1).tickSizeInner(0).tickSizeOuter(0).ticks(5)).call(g => {
         g.select('.domain').remove();
@@ -237,7 +231,7 @@ class Mirror extends ChartComponent {
         this.moveTooltip(event);
       }).on('mouseleave', event => {
         this.hiddenTooltip(event);
-      });
+      }).call(g => this.animateFadeIn(g));
       this.setLegend({
         legendName: 'group_name',
         theme: themeColors,
@@ -260,8 +254,7 @@ class Mirror 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);
@@ -273,22 +266,16 @@ class Mirror 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/pie.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { debounce } from 'lodash-es';
 import * as d3 from 'd3';
 import { CHART_LABEL_POSITIONS, CHART_LABEL_FORMATS, CHART_THEME_COLOR, CHART_TYPE } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
@@ -11,11 +10,6 @@ import ChartComponent from './chart-component';
 class Pie extends ChartComponent {
   constructor(props) {
     super(props);
-    this.handleResize = () => {
-      this.destroyChart();
-      this.createChart();
-      this.drawChart();
-    };
     this.createChart = () => {
       const {
         chart
@@ -68,13 +62,13 @@ class Pie extends ChartComponent {
       if (!Array.isArray(newData) || newData.length === 0) return;
 
       // Color
-      const colorDomain = new Set(data.map(d => d.name));
+      const colorDomain = new Set(newData.map(d => d.name));
       const colorRange = Array.from(colorDomain).map(name => colorMap[name === null || name === void 0 ? void 0 : name.trim()]);
       const color = d3.scaleOrdinal().domain(colorDomain).range(colorRange);
 
       // Pie and Arc
       const pie = d3.pie().sort(null).value(d => d.value);
-      const arcs = pie(data);
+      const arcs = pie(newData);
       const arc = d3.arc().innerRadius(0).outerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7);
 
       // Draw Pie
@@ -119,13 +113,17 @@ class Pie extends ChartComponent {
       }).on('mouseleave', (event, data) => {
         this.hiddenTooltip();
         this.handleAcitveAndInActiveState('active', event);
+      }).call(g => {
+        this.animateArcGrowIn(g, arc);
+        this.animateFadeIn(this.chart.selectAll('text'), this.transitionDuration, this.transitionDuration * 0.5);
+        this.animateFadeIn(this.chart.selectAll('line'), this.transitionDuration, this.transitionDuration * 0.5);
       });
       if (show_legend) {
         this.setLegend({
           legendName: 'name',
           theme,
           legendPosition: 'center-right',
-          data,
+          data: newData,
           colorScale: color
         });
       }
@@ -222,8 +220,7 @@ class Pie 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);
@@ -235,7 +232,7 @@ class Pie extends ChartComponent {
   }
   componentWillUnmount() {
     this.destroyChart();
-    window.removeEventListener('resize', this.debouncedHandleResize);
+    super.componentWillUnmount();
   }
   render() {
     const {