sea-chart 2.0.43 → 2.0.45

package/dist/view/wrapper/completeness.js

@@ -1,29 +1,14 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _lodashEs = require("lodash-es");
-var d3 = _interopRequireWildcard(require("d3"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _constants = require("../../constants");
-var _utils = require("../../utils");
-var _intl = _interopRequireDefault(require("../../intl"));
-var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
-var _chartComponent = _interopRequireDefault(require("./chart-component"));
-class Completeness extends _chartComponent.default {
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as d3 from 'd3';
+import { CHART_THEME_COLOR } from '../../constants';
+import { BaseUtils } from '../../utils';
+import intl from '../../intl';
+import ToolTip from '../../components/tooltip';
+import ChartComponent from './chart-component';
+class Completeness extends ChartComponent {
   constructor(props) {
     super(props);
-    this.handleResize = () => {
-      this.destroyChart();
-      this.createChart();
-      this.drawChart();
-    };
     this.createChart = () => {
       const {
         chart
@@ -42,17 +27,19 @@ class Completeness extends _chartComponent.default {
       let {
         result: data
       } = this.props;
-      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      data = BaseUtils.formatEmptyName(data, '', intl.get('Empty'));
       if (!Array.isArray(data)) return;
       this.draw(data);
     };
     this.draw = data => {
+      const fullData = data;
+      data = this.getVisibleLegendData(data, 'group_name');
       const {
         chart,
         globalTheme,
         chartColorTheme
       } = this.props;
-      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const theme = CHART_THEME_COLOR[globalTheme];
       const {
         y_axis_auto_range,
         y_axis_min,
@@ -66,7 +53,7 @@ class Completeness extends _chartComponent.default {
         insertPadding,
         marginRight
       } = this.chartBoundingClientRect;
-      const colors = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors;
+      const colors = BaseUtils.getCurrentTheme(chartColorTheme).colors;
       this.markFirstOrLast(data, 'last');
       const series = d3.stack().keys(d3.union(data.map(d => d.group_name))).value((_ref, key) => {
         var _group$get;
@@ -91,7 +78,7 @@ class Completeness extends _chartComponent.default {
       });
 
       // X axis
-      const niceEnd = d3.nice(0, d3.max(newSeries, d => d[1].sumValue), 5)[1];
+      const niceEnd = d3.nice(0, d3.max(newSeries, d => d[1].sumValue) || 0, 5)[1];
       const x = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min || 0, y_axis_max || niceEnd]).range([Number(yAxis.node().getAttribute('data-axisWidth')), chartWidth - insertPadding - marginRight]);
       this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0, ${chartHeight - insertPadding})`).call(d3.axisBottom(x).tickSizeInner(0).ticks(5)).call(g => {
         g.selectAll('.domain').remove();
@@ -142,7 +129,7 @@ class Completeness extends _chartComponent.default {
           });
         }
       }).on('click', (event, data) => {
-        this.props.toggleRecords(data);
+        this.toggleRecords(data.data);
       }).on('mouseover', event => {
         this.showTooltip(event);
         this.handleAcitveAndInActiveState('inActive', event);
@@ -151,12 +138,15 @@ class Completeness extends _chartComponent.default {
       }).on('mouseleave', (event, data) => {
         this.hiddenTooltip();
         this.handleAcitveAndInActiveState('active', event);
+      }).call(g => {
+        this.animateStackGrowInX(g);
+        this.animateFadeIn(contentWrapper.selectAll('text'), this.transitionDuration, this.transitionDuration * 0.5);
       });
       this.setLegend({
         legendName: 'group_name',
         theme,
         legendPosition: 'top-right',
-        data,
+        data: fullData,
         colorScale: group_name => group_name === 'rest' ? '#bdbdbd' : colors[0]
       });
     };
@@ -165,26 +155,20 @@ class Completeness extends _chartComponent.default {
       const curGroupName = event.currentTarget.getAttribute('data-groupName');
       this.setActiveAndInActiveState(state, allGroup, curGroupName);
     };
-    this.showTooltip = (event, isDiv) => {
-      let {
+    this.showTooltip = event => {
+      const {
         offsetX,
         offsetY
       } = event;
-      if (isDiv) {
-        const initX = Number(event.currentTarget.getAttribute('data-x'));
-        const initY = Number(event.currentTarget.getAttribute('y'));
-        offsetX = offsetX + initX;
-        offsetY = offsetY + initY;
-      }
       const {
         chartColorTheme
       } = this.props;
-      const colors = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors;
+      const colors = BaseUtils.getCurrentTheme(chartColorTheme).colors;
       const newTooltipData = {
         title: event.currentTarget.getAttribute('data-tooltipTitle'),
         items: [{
-          color: event.currentTarget.getAttribute('data-tooltipTitle') === 'rest' ? '#bdbdbd' : colors[0],
-          name: _intl.default.get(event.currentTarget.getAttribute('data-tooltipName')),
+          color: event.currentTarget.getAttribute('data-tooltipName') === 'rest' ? '#bdbdbd' : colors[0],
+          name: intl.get(event.currentTarget.getAttribute('data-tooltipName')),
           value: event.currentTarget.getAttribute('data-value')
         }]
       };
@@ -198,17 +182,11 @@ class Completeness extends _chartComponent.default {
         }
       });
     };
-    this.moveTooltip = (event, isDiv) => {
-      let {
+    this.moveTooltip = event => {
+      const {
         offsetX,
         offsetY
       } = event;
-      if (isDiv) {
-        const initX = Number(event.currentTarget.getAttribute('data-x'));
-        const initY = Number(event.currentTarget.getAttribute('y'));
-        offsetX = offsetX + initX;
-        offsetY = offsetY + initY;
-      }
       this.setState({
         toolTipPosition: {
           offsetX,
@@ -261,28 +239,7 @@ class Completeness extends _chartComponent.default {
       return allGroup;
     };
     this.addMaskRect = (topG, rect, yAxis) => {
-      const xWidth = Number(rect.getAttribute('height'));
-      const {
-        borderRadius
-      } = this.chartBoundingClientRect;
-      // Add mask rect
-      d3.select(topG).append('foreignObject').attr('opacity', rect.getAttribute('opacity')).attr('x', rect.getAttribute('x')).attr('y', rect.getAttribute('y')).attr('width', rect.getAttribute('width')).attr('height', rect.getAttribute('height')).attr('data-groupName', rect.getAttribute('data-groupName')).attr('data-value', rect.getAttribute('data-value')).attr('data-tooltipTitle', rect.getAttribute('data-tooltipTitle')).attr('data-tooltipName', rect.getAttribute('data-tooltipName')).attr('data-x', () => {
-        const x = Number(rect.getAttribute('x'));
-        return x + Number(yAxis.node().getAttribute('data-axisWidth'));
-      }).on('click', (event, data) => {
-        this.props.toggleRecords(data);
-      }).on('mouseover', event => {
-        this.showTooltip(event, true);
-        this.handleAcitveAndInActiveState('inActive', event);
-      }).on('mousemove', event => {
-        this.moveTooltip(event, true);
-      }).on('mouseleave', event => {
-        this.hiddenTooltip();
-        this.handleAcitveAndInActiveState('active', event);
-      }).append('xhtml:div').attr('style', `width: 100%; height: 100%; background-color: ${rect.getAttribute('fill')}; border-radius: 0px ${xWidth * borderRadius}px ${xWidth * borderRadius}px 0px`);
-
-      // Remove old rect
-      d3.select(rect).remove();
+      return this.addRoundedClip(rect, 'x');
     };
     this.chart = null;
     this.state = {
@@ -291,40 +248,31 @@ class Completeness extends _chartComponent.default {
     };
   }
   componentDidMount() {
-    super.componentDidMount();
     this.createChart();
     this.drawChart();
-    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
-    window.addEventListener('resize', this.debouncedHandleResize);
+    super.componentDidMount();
   }
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
-    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+    if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
       this.destroyChart();
       this.createChart();
       this.drawChart();
     }
   }
   componentWillUnmount() {
-    super.componentWillUnmount();
     this.destroyChart();
-    window.removeEventListener('resize', this.debouncedHandleResize);
+    super.componentWillUnmount();
   }
   render() {
-    const {
-      chart
-    } = this.props;
     const {
       tooltipData,
       toolTipPosition
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       ref: ref => this.container = ref,
-      className: (0, _classnames.default)('sea-chart-container', {
-        'show-x-axis-label': this.isShowHorizontalAxisLabel(chart),
-        'show-y-axis-label': this.isShowVerticalAxisLabel(chart)
-      })
-    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      className: "sea-chart-container"
+    }, /*#__PURE__*/React.createElement(ToolTip, {
       tooltipData: tooltipData,
       toolTipPosition: toolTipPosition,
       chart: this.chart
@@ -332,15 +280,15 @@ class Completeness extends _chartComponent.default {
   }
 }
 Completeness.propTypes = {
-  canvasStyle: _propTypes.default.object,
-  chart: _propTypes.default.object,
-  groupbyColumn: _propTypes.default.object,
-  columnGroupbyColumn: _propTypes.default.object,
-  summaryColumn: _propTypes.default.object,
-  result: _propTypes.default.array,
-  tables: _propTypes.default.array,
-  globalTheme: _propTypes.default.string,
-  chartColorTheme: _propTypes.default.string,
-  toggleRecords: _propTypes.default.func
+  canvasStyle: PropTypes.object,
+  chart: PropTypes.object,
+  groupbyColumn: PropTypes.object,
+  columnGroupbyColumn: PropTypes.object,
+  summaryColumn: PropTypes.object,
+  result: PropTypes.array,
+  tables: PropTypes.array,
+  globalTheme: PropTypes.string,
+  chartColorTheme: PropTypes.string,
+  toggleRecords: PropTypes.func
 };
-var _default = exports.default = Completeness;
+export default Completeness;

package/dist/view/wrapper/dashboard.js

@@ -1,20 +1,11 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _lodashEs = require("lodash-es");
-var d3 = _interopRequireWildcard(require("d3"));
-var _constants = require("../../constants");
-var _utils = require("../../utils");
-var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
-var _chartComponent = _interopRequireDefault(require("./chart-component"));
-class Dashboard extends _chartComponent.default {
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as d3 from 'd3';
+import { CHART_THEME_COLOR } from '../../constants';
+import { BaseUtils, isFunction } from '../../utils';
+import ToolTip from '../../components/tooltip';
+import ChartComponent from './chart-component';
+class Dashboard extends ChartComponent {
   constructor(props) {
     super(props);
     this.handleClickNumber = () => {
@@ -33,17 +24,6 @@ class Dashboard extends _chartComponent.default {
         });
       }
     };
-    this.componentDidMount = () => {
-      this.createChart();
-      this.drawChart();
-      this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
-      window.addEventListener('resize', this.debouncedHandleResize);
-    };
-    this.handleResize = () => {
-      this.destroyChart();
-      this.createChart();
-      this.drawChart();
-    };
     this.createChart = () => {
       const {
         chart
@@ -59,7 +39,7 @@ class Dashboard extends _chartComponent.default {
         customRender
       } = this.props;
       this.draw(data);
-      (0, _utils.isFunction)(customRender) && customRender(this.chart);
+      isFunction(customRender) && customRender(this.chart);
     };
     this.draw = data => {
       const {
@@ -67,7 +47,7 @@ class Dashboard extends _chartComponent.default {
         height: chartHeight,
         insertPadding
       } = this.chartBoundingClientRect;
-      const value = Number(data) * 100;
+      const value = (Number(data) || 0) * 100;
       const formatValue = value >= 100 ? 100 : value.toFixed(1);
       const innerRadius = Math.min(chartWidth, chartHeight) / 2 * 0.7;
       const outerRadius = Math.min(chartWidth, chartHeight) / 2 * 0.75;
@@ -106,12 +86,13 @@ class Dashboard extends _chartComponent.default {
         // Draw total
         this.drawTotal(g.node().parentNode, formatValue);
       });
+      this.animateFadeIn(this.chart.selectAll('path, circle, rect, line, text'));
     };
     this.drawTicks = (left, offsetX, top, offsetY, startAngle, endAngle, arc) => {
       const {
         globalTheme
       } = this.props;
-      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const theme = CHART_THEME_COLOR[globalTheme];
       const ticks = Array.from({
         length: 51
       }, (_, i) => i);
@@ -173,7 +154,7 @@ class Dashboard extends _chartComponent.default {
       const {
         name
       } = chart.config;
-      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const theme = CHART_THEME_COLOR[globalTheme];
       const {
         height: chartHeight
       } = this.chartBoundingClientRect;
@@ -234,9 +215,14 @@ class Dashboard extends _chartComponent.default {
       toolTipPosition: null
     };
   }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+    super.componentDidMount();
+  }
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
-    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+    if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
       this.destroyChart();
       this.createChart();
       this.drawChart();
@@ -244,17 +230,17 @@ class Dashboard extends _chartComponent.default {
   }
   componentWillUnmount() {
     this.destroyChart();
-    window.removeEventListener('resize', this.debouncedHandleResize);
+    super.componentWillUnmount();
   }
   render() {
     const {
       tooltipData,
       toolTipPosition
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       ref: ref => this.container = ref,
       className: "sea-chart-container"
-    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    }, /*#__PURE__*/React.createElement(ToolTip, {
       tooltipData: tooltipData,
       toolTipPosition: toolTipPosition,
       chart: this.chart
@@ -262,15 +248,15 @@ class Dashboard extends _chartComponent.default {
   }
 }
 Dashboard.propTypes = {
-  canvasStyle: _propTypes.default.object,
-  chart: _propTypes.default.object,
-  groupbyColumn: _propTypes.default.object,
-  summaryColumn: _propTypes.default.object,
-  result: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.object]),
-  tables: _propTypes.default.array,
-  globalTheme: _propTypes.default.string,
-  chartColorTheme: _propTypes.default.string,
-  toggleRecords: _propTypes.default.func,
-  customRender: _propTypes.default.func
+  canvasStyle: PropTypes.object,
+  chart: PropTypes.object,
+  groupbyColumn: PropTypes.object,
+  summaryColumn: PropTypes.object,
+  result: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
+  tables: PropTypes.array,
+  globalTheme: PropTypes.string,
+  chartColorTheme: PropTypes.string,
+  toggleRecords: PropTypes.func,
+  customRender: PropTypes.func
 };
-var _default = exports.default = Dashboard;
+export default Dashboard;

package/dist/view/wrapper/funnel.js

@@ -1,28 +1,13 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _lodashEs = require("lodash-es");
-var d3 = _interopRequireWildcard(require("d3"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _constants = require("../../constants");
-var _utils = require("../../utils");
-var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
-var _chartComponent = _interopRequireDefault(require("./chart-component"));
-class Funnel extends _chartComponent.default {
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as d3 from 'd3';
+import { FUNNEL_LABEL_FORMAT, FUNNEL_LABEL_POSITIONS, CHART_THEME_COLOR } from '../../constants';
+import { BaseUtils, getSortedDataByGivenOrder } from '../../utils';
+import ToolTip from '../../components/tooltip';
+import ChartComponent from './chart-component';
+class Funnel extends ChartComponent {
   constructor(props) {
     super(props);
-    this.handleResize = () => {
-      this.destroyChart();
-      this.createChart();
-      this.drawChart();
-    };
     this.createChart = () => {
       const {
         chart
@@ -42,7 +27,7 @@ class Funnel extends _chartComponent.default {
         funnel_accumulate_values
       } = chart.config;
       if (!x_axis_option_list.length) return;
-      const sortedData = (0, _utils.getSortedDataByGivenOrder)(data, x_axis_option_list);
+      const sortedData = getSortedDataByGivenOrder(data, x_axis_option_list);
       const formatSortedData = this.formatSortedData(sortedData, funnel_accumulate_values);
       this.draw(formatSortedData);
     };
@@ -63,7 +48,7 @@ class Funnel extends _chartComponent.default {
         items: [{
           color: colorScale(data === null || data === void 0 ? void 0 : data.name),
           name: data === null || data === void 0 ? void 0 : data.name,
-          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data === null || data === void 0 ? void 0 : data.value), y_axis_summary_method)
+          value: BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data === null || data === void 0 ? void 0 : data.value), y_axis_summary_method)
         }]
       };
       this.setState({
@@ -116,33 +101,54 @@ class Funnel extends _chartComponent.default {
         height: chartHeight,
         insertPadding
       } = this.chartBoundingClientRect;
-      const theme = _constants.CHART_THEME_COLOR[globalTheme];
-      const isInside = funnel_label_position === _constants.FUNNEL_LABEL_POSITIONS.INSIDE;
+      const theme = CHART_THEME_COLOR[globalTheme];
+      const isInside = funnel_label_position === FUNNEL_LABEL_POSITIONS.INSIDE;
       const title = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
+
+      // Only the visible stages are laid out; the legend still shows every stage.
+      const fullData = data;
+      data = this.getVisibleLegendData(data, 'name');
       const nameDomain = new Set(data.map(item => item.name));
 
-      // Color scale
-      const colorScale = d3.scaleOrdinal().domain(nameDomain).range(['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF']);
+      // Color scale keeps the full domain so stage colors stay stable when toggling.
+      const colorScale = d3.scaleOrdinal().domain(new Set(fullData.map(item => item.name))).range(['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF']);
 
       // Y scale
       const y = d3.scaleBand().domain(nameDomain).range([insertPadding, chartHeight - insertPadding]).paddingInner(0).paddingOuter(0);
 
+      // Reserve horizontal space on both sides for outside labels, otherwise the
+      // widest (top) layer spans nearly the full width and its label is clipped off
+      // the left edge.
+      let labelSpace = 0;
+      if (funnel_show_labels && !isInside) {
+        const measureWrapper = this.chart.append('g').attr('opacity', 0);
+        data.forEach(_ref => {
+          let {
+            name
+          } = _ref;
+          measureWrapper.append('text').attr('font-size', funnel_label_font_size).text(name);
+        });
+        const maxNameWidth = d3.max(measureWrapper.selectAll('text').nodes(), node => node.getBoundingClientRect().width) || 0;
+        measureWrapper.remove();
+        labelSpace = Math.min(maxNameWidth + 10, (chartWidth - insertPadding * 2) * 0.35);
+      }
+
       // X scale
-      const x = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).range([insertPadding, chartWidth - insertPadding]);
+      const x = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).range([insertPadding + labelSpace, chartWidth - insertPadding - labelSpace]);
 
       // Content
       const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper');
-      const allWidth = chartWidth - insertPadding * 2;
-      data.forEach((_ref, index) => {
+      const allWidth = chartWidth - insertPadding * 2 - labelSpace * 2;
+      data.forEach((_ref2, index) => {
         let {
           name: curName,
           value: curValue
-        } = _ref;
+        } = _ref2;
         const curOffsetX = (allWidth - (x(curValue) - x(0))) / 2;
         let points3X = x(curValue) + curOffsetX;
         let points3Y = y(curName) + y.bandwidth();
         let points4X = x(0) + curOffsetX;
-        let points4Y = y(curName) + +y.bandwidth();
+        let points4Y = y(curName) + y.bandwidth();
         const nextD = data[index + 1];
         if (nextD) {
           const {
@@ -178,7 +184,7 @@ class Funnel extends _chartComponent.default {
                   width,
                   height
                 } = g.node().getBoundingClientRect();
-                const x = isInside ? left + gWidth / 2 - width / 2 : left - width - 5; // add offsetX is 5
+                const x = isInside ? left + gWidth / 2 - width / 2 : Math.max(left - width - 5, 2); // add offsetX is 5
                 const y = isInside ? top + height + 10 : top + gHeight / 2 + height / 2; // add offsetY is 10
                 g.attr('x', x);
                 g.attr('y', y);
@@ -218,12 +224,14 @@ class Funnel extends _chartComponent.default {
           this.hiddenTooltip(event);
         });
       });
+      this.animateFadeIn(contentWrapper.selectAll('polygon'));
+      this.animateFadeIn(contentWrapper.selectAll('text'), this.transitionDuration, this.transitionDuration * 0.5);
       if (funnel_show_legend) {
         this.setLegend({
           legendName: 'name',
           theme,
           legendPosition: 'top-right',
-          data,
+          data: fullData,
           chart,
           colorScale
         });
@@ -250,20 +258,19 @@ class Funnel extends _chartComponent.default {
       toolTipPosition: null
     };
     this.contentFormatterMap = {
-      [_constants.FUNNEL_LABEL_FORMAT.NUMBER]: obj => obj === null || obj === void 0 ? void 0 : obj.value,
-      [_constants.FUNNEL_LABEL_FORMAT.PERCENTAGE]: obj => ((obj === null || obj === void 0 ? void 0 : obj.percent) || 0) + '%',
-      [_constants.FUNNEL_LABEL_FORMAT.NUMBER_AND_PERCENTAGE]: obj => `${obj === null || obj === void 0 ? void 0 : obj.value} (${(obj === null || obj === void 0 ? void 0 : obj.percent) || 0}%)`
+      [FUNNEL_LABEL_FORMAT.NUMBER]: obj => obj === null || obj === void 0 ? void 0 : obj.value,
+      [FUNNEL_LABEL_FORMAT.PERCENTAGE]: obj => ((obj === null || obj === void 0 ? void 0 : obj.percent) || 0) + '%',
+      [FUNNEL_LABEL_FORMAT.NUMBER_AND_PERCENTAGE]: obj => `${obj === null || obj === void 0 ? void 0 : obj.value} (${(obj === null || obj === void 0 ? void 0 : obj.percent) || 0}%)`
     };
   }
   componentDidMount() {
     this.createChart();
     this.drawChart();
-    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
-    window.addEventListener('resize', this.debouncedHandleResize);
+    super.componentDidMount();
   }
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
-    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+    if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
       this.destroyChart();
       this.createChart();
       this.drawChart();
@@ -271,23 +278,17 @@ class Funnel extends _chartComponent.default {
   }
   componentWillUnmount() {
     this.destroyChart();
-    window.removeEventListener('resize', this.debouncedHandleResize);
+    super.componentWillUnmount();
   }
   render() {
-    const {
-      chart
-    } = this.props;
     const {
       tooltipData,
       toolTipPosition
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       ref: ref => this.container = ref,
-      className: (0, _classnames.default)('sea-chart-container', {
-        'show-x-axis-label': this.isShowXAxisLabel(chart),
-        'show-y-axis-label': this.isShowYAxisLabel(chart)
-      })
-    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      className: "sea-chart-container"
+    }, /*#__PURE__*/React.createElement(ToolTip, {
       tooltipData: tooltipData,
       toolTipPosition: toolTipPosition,
       chart: this.chart
@@ -295,16 +296,16 @@ class Funnel extends _chartComponent.default {
   }
 }
 Funnel.propTypes = {
-  canvasStyle: _propTypes.default.object,
-  chart: _propTypes.default.object,
-  groupbyColumn: _propTypes.default.object,
-  columnGroupbyColumn: _propTypes.default.object,
-  summaryColumn: _propTypes.default.object,
-  result: _propTypes.default.array,
-  tables: _propTypes.default.array,
-  globalTheme: _propTypes.default.string,
-  chartColorTheme: _propTypes.default.string,
-  toggleRecords: _propTypes.default.func,
-  customRender: _propTypes.default.func
+  canvasStyle: PropTypes.object,
+  chart: PropTypes.object,
+  groupbyColumn: PropTypes.object,
+  columnGroupbyColumn: PropTypes.object,
+  summaryColumn: PropTypes.object,
+  result: PropTypes.array,
+  tables: PropTypes.array,
+  globalTheme: PropTypes.string,
+  chartColorTheme: PropTypes.string,
+  toggleRecords: PropTypes.func,
+  customRender: PropTypes.func
 };
-var _default = exports.default = Funnel;
+export default Funnel;