sea-chart 2.0.37 → 2.0.38

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

@@ -1,22 +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 { debounce, cloneDeep } from 'lodash-es';
+import * as d3 from 'd3';
+import classNames from 'classnames';
+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 = () => {
@@ -39,10 +31,11 @@ class Completeness extends _chartComponent.default {
       this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
     };
     this.drawChart = () => {
+      var _this$props$chart, _this$props$chart$con;
       let {
         result: data
       } = this.props;
-      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      data = BaseUtils.formatEmptyName(data, (_this$props$chart = this.props.chart) === null || _this$props$chart === void 0 ? void 0 : (_this$props$chart$con = _this$props$chart.config) === null || _this$props$chart$con === void 0 ? void 0 : _this$props$chart$con.column_groupby_column_key, intl.get('Empty'));
       if (!Array.isArray(data)) return;
       this.draw(data);
     };
@@ -53,7 +46,7 @@ class Completeness extends _chartComponent.default {
         chartColorTheme,
         columnGroupbyColumn
       } = this.props;
-      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const theme = CHART_THEME_COLOR[globalTheme];
       const {
         y_axis_auto_range,
         y_axis_min,
@@ -69,13 +62,21 @@ class Completeness extends _chartComponent.default {
         marginRight
       } = this.chartBoundingClientRect;
       this.markLastForCompleteness(data);
-      const colors = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors;
+      const colors = BaseUtils.getCurrentTheme(chartColorTheme).colors;
+      // Normalize groupby to string before setColorMap to ensure consistent keys
+      data.forEach(item => {
+        if (Array.isArray(item.groupby)) {
+          item.groupby = item.groupby.join(', ');
+        }
+      });
       this.setColorMap(data, chartColorTheme, 'groupby', columnGroupbyColumn, chart);
       const newSeries = this.getGroupSeries(data, columnGroupbyColumn, chart);
 
       // Y axis
       const fy = d3.scaleBand().domain(newSeries.map(item => item[0])).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
-      const y = d3.scaleBand().domain(new Set(data.map(d => d.groupby))).range([0, fy.bandwidth()]).paddingInner(0).paddingOuter(0);
+
+      // y scale will be created per main group (local) to avoid overlap
+
       const yAxis = this.chart.append('g').attr('class', 'y-axis-wrapper').call(d3.axisLeft(fy).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
@@ -85,7 +86,7 @@ class Completeness extends _chartComponent.default {
         const {
           width: axisWidth
         } = g.node().getBoundingClientRect();
-        g.attr('transform', "translate(".concat(axisWidth, ", 0)")).attr('data-axisWidth', axisWidth);
+        g.attr('transform', `translate(${axisWidth}, 0)`).attr('data-axisWidth', axisWidth);
         this.checkTickOverlap(g, 'yAxis');
       });
 
@@ -93,7 +94,7 @@ class Completeness extends _chartComponent.default {
       const allSeries = this.getAllSeries(newSeries);
       const niceEnd = d3.nice(0, d3.max(allSeries, d => d.sumValue), 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, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeInner(0).ticks(5)).call(g => {
+      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();
         g.selectAll('.tick line').node() && g.selectAll('.tick line').node().remove(); // delete the first line
         g.selectAll('.tick line').attr('y2', -(chartHeight - insertPadding * 2)).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
@@ -102,39 +103,65 @@ class Completeness extends _chartComponent.default {
       });
 
       // Rect group
-      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', "translate(".concat(Number(yAxis.node().getAttribute('data-axisWidth')), ", 0)"));
-      contentWrapper.selectAll().data(newSeries).join('g').attr('transform', _ref => {
-        let [name, dum] = _ref;
-        const offset = (fy.bandwidth() - dum.length * y.bandwidth()) / 2;
-        return "translate(0, ".concat(fy(name) + offset, ")");
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', `translate(${Number(yAxis.node().getAttribute('data-axisWidth'))}, 0)`);
+      const mainGroups = contentWrapper.selectAll().data(newSeries).join('g').attr('transform', _ref => {
+        let [name] = _ref;
+        return `translate(0, ${fy(name)})`;
       }).attr('data-transform', _ref2 => {
-        let [name, dum] = _ref2;
-        const offset = (fy.bandwidth() - dum.length * y.bandwidth()) / 2;
-        return "".concat(fy(name) + offset);
-      }).selectAll().data(_ref3 => {
-        let [groupKey] = _ref3;
-        const curSeriesData = newSeries.find(item => item[0] === groupKey);
-        return curSeriesData[1];
-      }).join('g').attr('data-completedRate', _ref4 => {
-        let [_, d] = _ref4;
-        const restData = d.find(item => item.rawData.group_name === 'rest');
-        const completedRate = restData.rawData.completedRate;
-        if (completedRate === 'empty') return '';
-        return completedRate + '%';
-      }).selectAll().data(_ref5 => {
-        let [_, d] = _ref5;
-        return d;
-      }).join('rect').attr('class', 'rect').attr('opacity', 1).attr('x', d => x(d[0]) - Number(yAxis.node().getAttribute('data-axisWidth'))).attr('y', d => y.bandwidth() * d.serieIndex).attr('data-y', d => y.bandwidth() * d.serieIndex).attr('width', d => x(d[1]) - x(d[0])).attr('height', y.bandwidth()).attr('fill', d => {
-        const key = d.key;
-        const groupby = d.rawData.groupby;
-        if (key === 'rest') {
-          return '#bdbdbd';
-        }
-        if (column_groupby_column_key) {
-          return this.colorMap[groupby];
-        }
-        return colors[0];
-      }).attr('data-value', d => d.rawData.value).attr('data-groupName', d => d.rawData.slugId).attr('data-tooltipTitle', d => d.rawData.name).attr('data-tooltipName', d => d.key).attr('data-groupBy', d => d.rawData.groupby).call(g => {
+        let [name] = _ref2;
+        return `${fy(name)}`;
+      });
+      const colorMap = this.colorMap;
+      const self = this;
+
+      // Calculate max sub group count across all main groups for uniform bar height
+      const maxSubGroupCount = Math.max(...newSeries.map(_ref3 => {
+        let [_, subGroups] = _ref3;
+        return subGroups.length;
+      }));
+      const uniformBandwidth = fy.bandwidth() / maxSubGroupCount;
+      mainGroups.each(function (_ref4) {
+        let [mainGroupName, subGroups] = _ref4;
+        const mainGroupNode = d3.select(this);
+
+        // Create local y scale for this main group, using uniform bandwidth
+        const localY = d3.scaleBand().domain(subGroups.map(sg => sg[0])).range([0, uniformBandwidth * subGroups.length]).paddingInner(0).paddingOuter(0);
+        mainGroupNode.selectAll().data(subGroups).join('g').attr('data-completedRate', _ref5 => {
+          var _restItem$rawData, _completedItem$rawDat;
+          let [_, d] = _ref5;
+          const restItem = d.find(item => item.key === 'rest');
+          const completedItem = d.find(item => item.key === 'completed');
+          const restValue = restItem ? Number(((_restItem$rawData = restItem.rawData) === null || _restItem$rawData === void 0 ? void 0 : _restItem$rawData.value) || 0) : 0;
+          const completedValue = completedItem ? Number(((_completedItem$rawDat = completedItem.rawData) === null || _completedItem$rawDat === void 0 ? void 0 : _completedItem$rawDat.value) || 0) : 0;
+          const targetValue = restValue + completedValue;
+          if (!targetValue) return '';
+          return `${Math.round(completedValue / targetValue * 100)}%`;
+        }).selectAll().data(_ref6 => {
+          let [_, d] = _ref6;
+          return d;
+        }).join('rect').attr('class', 'rect').attr('opacity', 1).attr('x', d => x(d[0]) - Number(yAxis.node().getAttribute('data-axisWidth'))).attr('y', d => localY(d.groupby)).attr('data-y', d => localY(d.groupby)).attr('width', d => x(d[1]) - x(d[0])).attr('height', localY.bandwidth()).attr('fill', d => {
+          const key = d.key;
+          const groupby = d.groupby;
+          if (key === 'rest') {
+            return '#bdbdbd';
+          }
+          if (column_groupby_column_key) {
+            return colorMap[groupby];
+          }
+          return colors[0];
+        }).attr('data-value', d => d.rawData.value).attr('data-groupName', d => d.rawData.slugId).attr('data-tooltipTitle', d => d.rawData.name).attr('data-tooltipName', d => d.key).attr('data-groupBy', d => d.groupby).on('click', (event, data) => {
+          self.props.toggleRecords(data);
+        }).on('mouseover', event => {
+          self.showTooltip(event);
+          self.handleAcitveAndInActiveState('inActive', event);
+        }).on('mousemove', event => {
+          self.moveTooltip(event);
+        }).on('mouseleave', event => {
+          self.hiddenTooltip();
+          self.handleAcitveAndInActiveState('active', event);
+        });
+      });
+      mainGroups.call(g => {
         // add rect borderRadius
         const allGroup = this.getAllGroup(contentWrapper);
         allGroup.forEach(group => {
@@ -163,16 +190,6 @@ class Completeness extends _chartComponent.default {
             });
           });
         }
-      }).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);
       });
       this.setLegend({
         legendName: 'groupby',
@@ -216,7 +233,7 @@ class Completeness extends _chartComponent.default {
         title: event.currentTarget.getAttribute('data-tooltipTitle'),
         items: [{
           color: event.currentTarget.getAttribute('data-tooltipName') === 'rest' ? '#bdbdbd' : this.colorMap[groupby],
-          name: _intl.default.get(event.currentTarget.getAttribute('data-tooltipName')),
+          name: intl.get(event.currentTarget.getAttribute('data-tooltipName')),
           value: event.currentTarget.getAttribute('data-value')
         }]
       };
@@ -254,35 +271,65 @@ class Completeness extends _chartComponent.default {
       });
     };
     this.getGroupSeries = (data, columnGroupbyColumn, chart) => {
-      const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'groupby', columnGroupbyColumn, chart);
+      const sortedData = BaseUtils.sortDataByGroupName(cloneDeep(data), 'groupby', columnGroupbyColumn, chart);
+      sortedData.forEach(item => {
+        if (Array.isArray(item.groupby)) {
+          item.groupby = item.groupby.join(', ');
+        }
+      });
       const groups = d3.groups(sortedData, d => d.name);
+      // Sort main groups by name for stable order
+      groups.sort((a, b) => String(a[0]).localeCompare(String(b[0])));
       groups.forEach((item, index) => {
-        const itemData = (0, _lodashEs.cloneDeep)(item[1]);
+        const itemData = cloneDeep(item[1]);
+        const valueMap = d3.rollup(itemData, v => d3.sum(v, d => d.value), d => d.groupby, d => d.group_name);
+        const rawDataMap = d3.rollup(itemData, v => v[0], d => d.groupby, d => d.group_name);
 
         // get series
-        const series = d3.stack().keys(d3.union(itemData.map(d => d.group_name))).value((_ref6, key) => {
-          var _group$get;
-          let [_, group] = _ref6;
-          return ((_group$get = group.get(String(key))) === null || _group$get === void 0 ? void 0 : _group$get.value) || 0;
-        })(d3.index(itemData, d => d.groupby, d => d.group_name));
+        const series = d3.stack().keys(d3.union(itemData.map(d => d.group_name))).value((_ref7, key) => {
+          let [_, group] = _ref7;
+          return group.get(key) || 0;
+        })(valueMap);
         item[1] = d3.groups(itemData, d => d.groupby);
+        // Sort sub groups by groupby for stable order
+        item[1].sort((a, b) => String(a[0]).localeCompare(String(b[0])));
         item[1].forEach((group, index) => {
+          var _completedItem$rawDat2, _restItem$rawData2;
           const groupKey = group[0];
           group[1] = [];
           series.forEach(serie => {
             const serieKey = serie.key;
             serie.forEach(item => {
               if (item.data[0] === groupKey) {
+                var _valueMap$get, _rawDataMap$get;
+                const aggregatedValue = ((_valueMap$get = valueMap.get(groupKey)) === null || _valueMap$get === void 0 ? void 0 : _valueMap$get.get(serieKey)) || 0;
+                const rawData = (_rawDataMap$get = rawDataMap.get(groupKey)) === null || _rawDataMap$get === void 0 ? void 0 : _rawDataMap$get.get(serieKey);
                 const newItem = {
                   ...item,
                   key: serieKey,
                   serieIndex: index,
-                  rawData: item.data[1].get(serieKey)
+                  groupby: groupKey,
+                  rawData: {
+                    ...(rawData || {}),
+                    value: aggregatedValue,
+                    groupby: groupKey,
+                    group_name: serieKey
+                  }
                 };
                 group[1].push(newItem);
               }
             });
           });
+          const completedItem = group[1].find(d => d.key === 'completed');
+          const restItem = group[1].find(d => d.key === 'rest');
+          const completedValue = completedItem ? Number(((_completedItem$rawDat2 = completedItem.rawData) === null || _completedItem$rawDat2 === void 0 ? void 0 : _completedItem$rawDat2.value) || 0) : 0;
+          const restValue = restItem ? Number(((_restItem$rawData2 = restItem.rawData) === null || _restItem$rawData2 === void 0 ? void 0 : _restItem$rawData2.value) || 0) : 0;
+          const targetValue = completedValue + restValue;
+          if (!targetValue) {
+            restItem && (restItem.rawData.completedRate = 'empty');
+          } else {
+            restItem && (restItem.rawData.completedRate = Math.round(completedValue / targetValue * 100));
+          }
           let sumValue = 0;
           group[1].forEach(g => {
             sumValue = sumValue + g[1];
@@ -336,7 +383,7 @@ class Completeness extends _chartComponent.default {
       }).on('mouseleave', event => {
         this.hiddenTooltip();
         this.handleAcitveAndInActiveState('active', event);
-      }).append('xhtml:div').attr('style', "width: 100%; height: 100%; background-color: ".concat(rect.getAttribute('fill'), "; border-radius: 0px ").concat(xWidth * borderRadius, "px ").concat(xWidth * borderRadius, "px 0px"));
+      }).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();
@@ -351,12 +398,12 @@ class Completeness extends _chartComponent.default {
     super.componentDidMount();
     this.createChart();
     this.drawChart();
-    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
+    this.debouncedHandleResize = debounce(this.handleResize, 300);
     window.addEventListener('resize', this.debouncedHandleResize);
   }
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
-    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+    if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
       this.destroyChart();
       this.createChart();
       this.drawChart();
@@ -375,13 +422,13 @@ class Completeness extends _chartComponent.default {
       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', {
+      className: classNames('sea-chart-container', {
         'show-x-axis-label': this.isShowHorizontalAxisLabel(chart),
         'show-y-axis-label': this.isShowVerticalAxisLabel(chart)
       })
-    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    }, /*#__PURE__*/React.createElement(ToolTip, {
       tooltipData: tooltipData,
       toolTipPosition: toolTipPosition,
       chart: this.chart
@@ -389,15 +436,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/completeness.js

@@ -1,22 +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 { debounce } from 'lodash-es';
+import * as d3 from 'd3';
+import classNames from 'classnames';
+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 = () => {
@@ -42,7 +34,7 @@ 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);
     };
@@ -52,7 +44,7 @@ class Completeness extends _chartComponent.default {
         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 +58,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;
@@ -86,14 +78,14 @@ class Completeness extends _chartComponent.default {
         const {
           width: axisWidth
         } = g.node().getBoundingClientRect();
-        g.attr('transform', "translate(".concat(axisWidth, ", 0)")).attr('data-axisWidth', axisWidth);
+        g.attr('transform', `translate(${axisWidth}, 0)`).attr('data-axisWidth', axisWidth);
         this.checkTickOverlap(g, 'yAxis');
       });
 
       // X axis
       const niceEnd = d3.nice(0, d3.max(newSeries, d => d[1].sumValue), 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, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeInner(0).ticks(5)).call(g => {
+      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();
         g.selectAll('.tick line').node() && g.selectAll('.tick line').node().remove(); // delete the first line
         g.selectAll('.tick line').attr('y2', -(chartHeight - insertPadding * 2)).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
@@ -102,7 +94,7 @@ class Completeness extends _chartComponent.default {
       });
 
       // Rect group
-      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', "translate(".concat(Number(yAxis.node().getAttribute('data-axisWidth')), ", 0)"));
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', `translate(${Number(yAxis.node().getAttribute('data-axisWidth'))}, 0)`);
       contentWrapper.selectAll().data(newSeries).join('g').attr('data-completedRate', d => {
         const restData = d[1].find(item => item.key === 'rest');
         const completedRate = restData.data.completedRate;
@@ -179,12 +171,12 @@ class Completeness extends _chartComponent.default {
       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')),
+          name: intl.get(event.currentTarget.getAttribute('data-tooltipName')),
           value: event.currentTarget.getAttribute('data-value')
         }]
       };
@@ -279,7 +271,7 @@ class Completeness extends _chartComponent.default {
       }).on('mouseleave', event => {
         this.hiddenTooltip();
         this.handleAcitveAndInActiveState('active', event);
-      }).append('xhtml:div').attr('style', "width: 100%; height: 100%; background-color: ".concat(rect.getAttribute('fill'), "; border-radius: 0px ").concat(xWidth * borderRadius, "px ").concat(xWidth * borderRadius, "px 0px"));
+      }).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();
@@ -294,12 +286,12 @@ class Completeness extends _chartComponent.default {
     super.componentDidMount();
     this.createChart();
     this.drawChart();
-    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
+    this.debouncedHandleResize = debounce(this.handleResize, 300);
     window.addEventListener('resize', this.debouncedHandleResize);
   }
   componentDidUpdate(prevProps) {
     super.componentDidUpdate(prevProps);
-    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+    if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
       this.destroyChart();
       this.createChart();
       this.drawChart();
@@ -318,13 +310,13 @@ class Completeness extends _chartComponent.default {
       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', {
+      className: classNames('sea-chart-container', {
         'show-x-axis-label': this.isShowHorizontalAxisLabel(chart),
         'show-y-axis-label': this.isShowVerticalAxisLabel(chart)
       })
-    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    }, /*#__PURE__*/React.createElement(ToolTip, {
       tooltipData: tooltipData,
       toolTipPosition: toolTipPosition,
       chart: this.chart
@@ -332,15 +324,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;