sea-chart 2.0.12 → 2.0.13

package/dist/components/types-dialog/index.js

@@ -70,7 +70,7 @@ const TypesDialog = _ref => {
   const handleFilterTypes = (0, _react.useCallback)(() => {
     if (hideTypeToggle) {
       const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram', 'Bar_chart'].includes(item.name));
-      newChartTypes[1].children = newChartTypes[1].children.slice(0, 2);
+      newChartTypes[1].children = newChartTypes[1].children.slice(0, 4);
       return newChartTypes;
     }
     return _constants.CHART_TYPES;

package/dist/utils/chart-utils/base-utils.js

@@ -560,6 +560,9 @@ BaseUtils.formatEmptyName = (dataList, column_groupby_column_key, emptyName) =>
     if (!item.slugId) {
       item.slugId = _slugid.default.nice();
     }
+    if (!item.value) {
+      item.value = 0;
+    }
     updatedStatistics.push(item);
   }
   return updatedStatistics;

package/dist/view/wrapper/chart-component.js

@@ -1081,6 +1081,7 @@ class ChartComponent extends _react.Component {
     this.addLabelToRectRight = _ref7 => {
       let {
         container,
+        x,
         y,
         xWidth,
         yHeight,
@@ -1088,11 +1089,14 @@ class ChartComponent extends _react.Component {
         label_font_size,
         text
       } = _ref7;
-      d3.select(container).append('text').attr('x', Number(xWidth) + 10).attr('y', Number(y)).attr('fill', theme.labelColor).attr('dominant-baseline', 'hanging').attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
-        const {
-          height
-        } = g.node().getBoundingClientRect();
-        g.attr('y', Number(y) + Number(yHeight) / 2 - height / 2);
+      d3.select(container).append('text').attr('x', Number(x) + Number(xWidth) + 10).attr('y', Number(y)).attr('fill', theme.labelColor).attr('dominant-baseline', 'hanging').attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
+        if (g.node()) {
+          var _g$node;
+          const {
+            height
+          } = (_g$node = g.node()) === null || _g$node === void 0 ? void 0 : _g$node.getBoundingClientRect();
+          g.attr('y', Number(y) + Number(yHeight) / 2 - height / 2);
+        }
       });
     };
     this.addLabelToRectCenter = _ref8 => {
@@ -1203,64 +1207,112 @@ class ChartComponent extends _react.Component {
         this.horizontalOverflowOffset = offset;
       }
     };
-    this.checkTickOverlap = g => {
+    this.checkTickOverlap = (g, axis) => {
       const allTicks = g.selectAll('.tick').nodes();
+      if (axis === 'yAxis') {
+        allTicks.reverse();
+      }
+
       // Hide overlapping ticks
       for (let i = 0; i < allTicks.length; i++) {
         const curText = d3.select(allTicks[i]).select('text').node();
         const {
-          right: curRight
+          right: curRight,
+          bottom: curBottom
         } = curText.getBoundingClientRect();
         for (let j = i + 1; j < allTicks.length; j++) {
           const nextText = d3.select(allTicks[j]).select('text').node();
           if (curText && nextText) {
             const {
-              left: nextLeft
+              left: nextLeft,
+              top: nextTop
             } = nextText.getBoundingClientRect();
-            if (curRight >= nextLeft) {
-              i = j;
-              d3.select(nextText.parentNode).attr('opacity', 0);
+            if (axis === 'yAxis') {
+              if (curBottom >= nextTop) {
+                i = j;
+                d3.select(nextText.parentNode).attr('opacity', 0);
+              }
+            } else {
+              if (curRight >= nextLeft) {
+                i = j;
+                d3.select(nextText.parentNode).attr('opacity', 0);
+              }
             }
           }
         }
       }
       const {
-        width: maxWidth
+        width: maxWidth,
+        height: maxHeight
       } = g.node().getBoundingClientRect();
-      let allWidth = 0;
-      // Can't fit tilted text
-      for (let tick of allTicks) {
+      const {
+        insertPadding
+      } = this.chartBoundingClientRect;
+      const viewBox = this.chart.node().getAttribute('viewBox').split(',');
+      if (axis === 'yAxis') {
+        let allHeight = 0;
+        // Can't fit tilted text, Italic text
+        for (let tick of allTicks) {
+          const {
+            height
+          } = tick.getBoundingClientRect();
+          allHeight = allHeight + height;
+          if (allHeight > maxHeight) {
+            allTicks.forEach(tick => {
+              const opacityVal = tick.getAttribute('opacity');
+              if (Number(opacityVal) !== 0) {
+                // roate 
+                d3.select(tick).select('text').attr('transform', 'rotate(30)').style('text-anchor', 'end').attr('dy', '1em').attr('dx', '-0.5em');
+              }
+            });
+            break;
+          }
+        }
+
+        // Text overflow scale view box
         const {
           width
-        } = tick.getBoundingClientRect();
-        allWidth = allWidth + width;
-        if (allWidth > maxWidth) break;
-      }
-      if (allWidth > maxWidth) {
-        allTicks.forEach(tick => {
-          const opacityVal = tick.getAttribute('opacity');
-          if (Number(opacityVal) !== 0) {
-            // roate 
-            d3.select(tick).select('text').attr('transform', 'rotate(45)').style('text-anchor', 'start').attr('dy', '0.4em').attr('dx', '0.4em');
+        } = g.node().getBoundingClientRect();
+        if (width > insertPadding) {
+          const viewWidth = viewBox[viewBox.length - 2];
+          viewBox[0] = "-".concat(width - insertPadding);
+          viewBox[viewBox.length - 2] = "".concat(Number(viewWidth) + (width - insertPadding));
+          queueMicrotask(() => {
+            this.chart.attr('viewBox', viewBox.join(','));
+          });
+        }
+      } else {
+        let allWidth = 0;
+        // Can't fit tilted text, Italic text
+        for (let tick of allTicks) {
+          const {
+            width
+          } = tick.getBoundingClientRect();
+          allWidth = allWidth + width;
+          if (allWidth > maxWidth) {
+            allTicks.forEach(tick => {
+              const opacityVal = tick.getAttribute('opacity');
+              if (Number(opacityVal) !== 0) {
+                // roate 
+                d3.select(tick).select('text').attr('transform', 'rotate(45)').style('text-anchor', 'start').attr('dy', '0.4em').attr('dx', '0.4em');
+              }
+            });
+            break;
           }
-        });
-      }
+          ;
+        }
 
-      // Text overflow
-      const {
-        height
-      } = g.node().getBoundingClientRect();
-      const {
-        insertPadding
-      } = this.chartBoundingClientRect;
-      if (height > insertPadding) {
-        const viewBox = this.chart.node().getAttribute('viewBox').split(',');
-        const viewHeight = viewBox[viewBox.length - 1];
-        const newViewHeight = Number(viewHeight) + (height - insertPadding);
-        viewBox[viewBox.length - 1] = "".concat(newViewHeight);
-        queueMicrotask(() => {
-          this.chart.attr('viewBox', viewBox.join(','));
-        });
+        // Text overflow scale view box
+        const {
+          height
+        } = g.node().getBoundingClientRect();
+        if (height > insertPadding) {
+          const viewHeight = viewBox[viewBox.length - 1];
+          viewBox[viewBox.length - 1] = "".concat(Number(viewHeight) + (height - insertPadding));
+          queueMicrotask(() => {
+            this.chart.attr('viewBox', viewBox.join(','));
+          });
+        }
       }
     };
     this.initLabelStroke(props === null || props === void 0 ? void 0 : props.globalTheme);

package/dist/view/wrapper/completeness.js

@@ -0,0 +1,344 @@
+"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 {
+  constructor(props) {
+    super(props);
+    this.handleResize = () => {
+      this.chart.node() && this.chart.node().remove();
+      this.createChart();
+      this.drawChart();
+    };
+    this.createChart = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        show_percentage
+      } = chart.config;
+      const initConfig = {
+        insertPadding: 30,
+        borderRadius: 0.2,
+        marginRight: show_percentage ? 35 : 0
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+    };
+    this.drawChart = () => {
+      let {
+        result: data
+      } = this.props;
+      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      if (!Array.isArray(data)) return;
+      this.draw(data);
+    };
+    this.draw = data => {
+      const {
+        chart,
+        globalTheme,
+        chartColorTheme
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const {
+        y_axis_auto_range,
+        y_axis_min,
+        y_axis_max,
+        show_percentage,
+        label_font_size
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding,
+        marginRight
+      } = this.chartBoundingClientRect;
+      const colors = _utils.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;
+        let [_, group] = _ref;
+        return ((_group$get = group.get(String(key))) === null || _group$get === void 0 ? void 0 : _group$get.value) || 0;
+      })(d3.index(data, d => d.name, d => d.group_name));
+      const newSeries = this.handleSeries(series, data);
+
+      // Y axis
+      const y = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const yAxis = this.chart.append('g').call(d3.axisLeft(y).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {
+        g.selectAll('.domain').attr('stroke', theme.XAxisColor);
+        g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
+        g.selectAll('text').attr('font-size', theme.fontSize);
+        g.selectAll('text').attr('fill', theme.textColor);
+        // Update axis transform
+        const {
+          width: axisWidth
+        } = g.node().getBoundingClientRect();
+        g.attr('transform', "translate(".concat(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('transform', "translate(0, ".concat(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');
+        g.selectAll('text').attr('font-size', theme.fontSize);
+        g.selectAll('text').attr('fill', theme.textColor);
+      });
+
+      // Rect group
+      const rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id)).attr('transform', "translate(".concat(Number(yAxis.node().getAttribute('data-axisWidth')), ", 0)"));
+      rectsWrapper.selectAll().data(newSeries).join('g').attr('data-completedRate', d => {
+        const restData = d[1].find(item => item.key === 'rest');
+        const completedRate = restData.data.completedRate;
+        if (completedRate === 'empty') return '';
+        return completedRate + '%';
+      }).selectAll().data(_ref2 => {
+        let [groupKey, d] = _ref2;
+        d.forEach(item => item['groupKey'] = groupKey);
+        return d;
+      }).join('rect').attr('x', (d, index) => {
+        return x(d[0]) - Number(yAxis.node().getAttribute('data-axisWidth'));
+      }).attr('y', (d, index) => y(d.groupKey)).attr('width', d => x(d[1]) - x(d[0])).attr('height', y.bandwidth()).attr('fill', d => {
+        return d.key === 'rest' ? '#bdbdbd' : colors[0];
+      }).attr('data-value', d => d.data.value).attr('data-groupName', d => d.data.slugId).attr('data-tooltipTitle', d => d.groupKey).attr('data-tooltipName', d => d.key).call(g => {
+        // add rect borderRadius
+        const allGroup = this.getAllGroup(rectsWrapper);
+        allGroup.forEach(group => {
+          const firstEl = group[0];
+          firstEl && this.addMaskRect(firstEl === null || firstEl === void 0 ? void 0 : firstEl.parentNode, firstEl, yAxis);
+        });
+
+        // Add label
+        if (show_percentage) {
+          const newAllGroup = this.getAllGroup(rectsWrapper);
+          newAllGroup.forEach(group => {
+            const firstEl = group[0];
+            firstEl && this.addLabelToRectRight({
+              container: firstEl === null || firstEl === void 0 ? void 0 : firstEl.parentNode,
+              xWidth: Number(firstEl.getAttribute('width')),
+              yHeight: Number(firstEl.getAttribute('height')),
+              x: Number(firstEl.getAttribute('x')),
+              y: Number(firstEl.getAttribute('y')),
+              theme,
+              label_font_size,
+              text: firstEl === null || firstEl === void 0 ? void 0 : firstEl.parentNode.getAttribute('data-completedRate')
+            });
+          });
+        }
+      }).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: 'group_name',
+        theme,
+        legendPosition: 'top-right',
+        data,
+        colorScale: group_name => group_name === 'rest' ? '#bdbdbd' : colors[0]
+      });
+    };
+    this.handleAcitveAndInActiveState = (state, event) => {
+      const allGroup = Array.from(event.currentTarget.parentNode.parentNode.children);
+      const curGroupName = event.currentTarget.getAttribute('data-groupName');
+      this.setActiveAndInActiveState(state, allGroup, curGroupName);
+    };
+    this.showTooltip = (event, isDiv) => {
+      let {
+        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 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')),
+          value: event.currentTarget.getAttribute('data-value')
+        }]
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.moveTooltip = (event, isDiv) => {
+      let {
+        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,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    this.handleSeries = (series, data) => {
+      const newSeries = d3.groups(data, d => d.name);
+      newSeries.forEach(item => item[1] = []);
+      newSeries.forEach(_ref3 => {
+        let [key, dataArr] = _ref3;
+        series.forEach(itemSeries => {
+          itemSeries.forEach(jtem => {
+            const curName = jtem.data[0];
+            if (curName === key) {
+              jtem['key'] = itemSeries.key;
+              jtem['data'] = jtem.data[1].get(jtem['key']) || {
+                value: 0
+              };
+              dataArr.push(jtem);
+            }
+          });
+        });
+        let sumValue = 0;
+        dataArr.forEach(item => {
+          sumValue = sumValue + Number(item.data.value);
+        });
+        dataArr['sumValue'] = sumValue;
+      });
+      return newSeries;
+    };
+    this.getAllGroup = rectsWrapper => {
+      const allGroup = [];
+      Array.from(rectsWrapper.node().children).forEach(item => {
+        const group = [];
+        Array.from(item.children).forEach(child => {
+          if (Number(child.getAttribute('width')) !== 0) {
+            group.push(child);
+          }
+        });
+        group.reverse();
+        allGroup.push(group);
+      });
+      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('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: ".concat(rect.getAttribute('fill'), "; border-radius: 0px ").concat(xWidth * borderRadius, "px ").concat(xWidth * borderRadius, "px 0px"));
+
+      // Remove old rect
+      d3.select(rect).remove();
+    };
+    this.chart = null;
+    this.state = {
+      tooltipData: null,
+      toolTipPosition: null
+    };
+  }
+  componentDidMount() {
+    super.componentDidMount();
+    this.createChart();
+    this.drawChart();
+    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
+    window.addEventListener('resize', this.debouncedHandleResize);
+  }
+  componentDidUpdate(prevProps) {
+    super.componentDidUpdate(prevProps);
+    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    super.componentWillUnmount();
+    this.chart.node() && this.chart.node().remove();
+    window.removeEventListener('resize', this.debouncedHandleResize);
+  }
+  render() {
+    const {
+      chart
+    } = this.props;
+    const {
+      tooltipData,
+      toolTipPosition
+    } = this.state;
+    return /*#__PURE__*/_react.default.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, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
+  }
+}
+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
+};
+var _default = exports.default = Completeness;

package/dist/view/wrapper/horizontal-bar-group.js

@@ -103,6 +103,7 @@ class HorizontalBarGroup extends _chartComponent.default {
           width: axisWidth
         } = g.node().getBoundingClientRect();
         g.attr('transform', "translate(".concat(axisWidth, ", 0)")).attr('data-axisWidth', axisWidth);
+        this.checkTickOverlap(g, 'yAxis');
       });
       const niceEnd = d3.nice(0, d3.max(data, d => d.value), 5)[1];
       const x = d3.scaleLinear().domain(horizontal_axis_auto_range ? [0, niceEnd] : [horizontal_axis_min || 0, horizontal_axis_max || niceEnd]).range([Number(yAxis.node().getAttribute('data-axisWidth')), chartWidth - insertPadding - marginRight]);
@@ -145,6 +146,7 @@ class HorizontalBarGroup extends _chartComponent.default {
               container: rect.parentNode,
               xWidth: Number(rect.getAttribute('width')),
               yHeight: Number(rect.getAttribute('height')),
+              x: Number(rect.getAttribute('x')),
               y: Number(rect.getAttribute('y')),
               theme,
               label_font_size,

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

@@ -0,0 +1,361 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var d3 = _interopRequireWildcard(require("d3"));
+var _dtableUtils = require("dtable-utils");
+var _constants = require("../../constants");
+var _utils = require("../../utils");
+var _intl = _interopRequireDefault(require("../../intl"));
+var _colorRules = require("../../constants/color-rules");
+var _columnUtils = require("../../utils/column-utils");
+var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
+var _chartComponent = _interopRequireDefault(require("./chart-component"));
+class HorizontalBarStack extends _chartComponent.default {
+  constructor(props) {
+    super(props);
+    this.handleResize = (0, _lodashEs.debounce)(() => {
+      this.chart.node() && this.chart.node().remove();
+      this.createChart();
+      this.drawChart();
+    }, 300);
+    this.createChart = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        show_horizontal_axis_label,
+        show_vertical_axis_label
+      } = chart.config;
+      const initConfig = {
+        insertPadding: 30,
+        borderRadius: 0.2,
+        marginLeft: show_vertical_axis_label ? 20 : 0,
+        marginBottom: show_horizontal_axis_label ? 20 : 0
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+    };
+    this.drawChart = () => {
+      let {
+        result: data,
+        customRender,
+        chart
+      } = this.props;
+      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      if (!Array.isArray(data)) return;
+      const {
+        sort_type,
+        type
+      } = chart.config;
+      if (type === _constants.CHART_TYPE.STACKED_HORIZONTAL_BAR && sort_type) {
+        data = (0, _columnUtils.sortDataByGroupSum)(data, sort_type);
+      }
+      this.draw(data);
+      (0, _utils.isFunction)(customRender) && customRender(this.chart);
+      this.renderHorizontalLabel(this.props.chart, this.props.tables, this.container);
+    };
+    this.draw = data => {
+      const {
+        chart,
+        globalTheme,
+        chartColorTheme,
+        tables
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const {
+        display_data,
+        label_font_size,
+        column_groupby_column_key,
+        table_id,
+        color_theme,
+        horizontal_axis_auto_range,
+        horizontal_axis_min,
+        horizontal_axis_max
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      const groupByColumn = this.getColumn(tables, table_id, column_groupby_column_key);
+      const useSingleSelectColumnColor = (groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
+      const series = d3.stack().keys(d3.union(data.map(d => d.group_name))).value((_ref, key) => {
+        var _group$get;
+        let [_, group] = _ref;
+        return ((_group$get = group.get(String(key))) === null || _group$get === void 0 ? void 0 : _group$get.value) || 0;
+      })(d3.index(data, d => d.name, d => d.group_name));
+      const newSeries = this.handleSeries(series, data);
+      const y = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+
+      // Y axis
+      const yAxis = this.chart.append('g').call(d3.axisLeft(y).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {
+        g.selectAll('.domain').attr('stroke', theme.XAxisColor);
+        g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
+        g.selectAll('text').attr('font-size', theme.fontSize);
+        g.selectAll('text').attr('fill', theme.textColor);
+        // Update axis transform
+        const {
+          width: axisWidth
+        } = g.node().getBoundingClientRect();
+        g.attr('transform', "translate(".concat(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(horizontal_axis_auto_range ? [0, niceEnd] : [horizontal_axis_min || 0, horizontal_axis_max || niceEnd]).range([Number(yAxis.node().getAttribute('data-axisWidth')), chartWidth - insertPadding]);
+      this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeInner(0).ticks(5).tickFormat(d => d)).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');
+        g.selectAll('text').attr('font-size', theme.fontSize);
+        g.selectAll('text').attr('fill', theme.textColor);
+      });
+
+      // Rect group
+      const rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id)).attr('transform', "translate(".concat(Number(yAxis.node().getAttribute('data-axisWidth')), ", 0)"));
+      rectsWrapper.selectAll().data(newSeries).join('g')
+      // rect item
+      .selectAll().data(_ref2 => {
+        let [groupKey, d] = _ref2;
+        d.forEach(item => item['groupKey'] = groupKey);
+        return d;
+      }).join('rect').attr('x', (d, index) => {
+        return x(d[0]) - Number(yAxis.node().getAttribute('data-axisWidth'));
+      }).attr('y', (d, index) => y(d.groupKey)).attr('width', d => x(d[1]) - x(d[0])).attr('height', y.bandwidth()).attr('fill', d => {
+        return this.colorMap[d.data.group_name] || _constants.CHART_STYLE_COLORS[0];
+      }).attr('data-value', d => d.data.value).attr('data-slugid', d => d.data.slugId).attr('data-groupName', d => d.data.name).attr('data-stackKey', d => d.key).call(g => {
+        // add rect borderRadius
+        const allGroup = this.getAllGroup(rectsWrapper);
+        allGroup.forEach(group => {
+          const firstEl = group[0];
+          firstEl && this.addMaskRect(firstEl === null || firstEl === void 0 ? void 0 : firstEl.parentNode, firstEl, yAxis);
+        });
+
+        // Add label
+        if (display_data) {
+          const newAllGroup = this.getAllGroup(rectsWrapper);
+          newAllGroup.forEach(group => {
+            group.forEach(rect => {
+              this.addLabelToRectCenter({
+                container: rect.parentNode,
+                x: Number(rect.getAttribute('x')),
+                y: Number(rect.getAttribute('y')),
+                xWidth: Number(rect.getAttribute('width')),
+                yheight: Number(rect.getAttribute('height')),
+                theme,
+                label_font_size,
+                text: 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 => {
+        this.hiddenTooltip();
+        this.handleAcitveAndInActiveState('active', event);
+      });
+      this.setLegend({
+        legendName: 'group_name',
+        theme,
+        legendPosition: 'top-right',
+        data
+      });
+    };
+    this.handleAcitveAndInActiveState = (state, event) => {
+      const allGroup = Array.from(event.currentTarget.parentNode.parentNode.children);
+      const curGroupName = event.currentTarget.getAttribute('data-groupName');
+      this.setActiveAndInActiveState(state, allGroup, curGroupName);
+    };
+    this.showTooltip = (event, isDiv) => {
+      let {
+        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 title = event.currentTarget.getAttribute('data-groupName');
+      const stackName = event.currentTarget.getAttribute('data-stackKey');
+      const stackValue = event.currentTarget.getAttribute('data-value');
+      const newTooltipData = {
+        title: !title && typeof title !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : title,
+        items: [{
+          color: this.colorMap[stackName] || _constants.CHART_STYLE_COLORS[0],
+          name: stackName,
+          value: stackValue
+        }]
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.moveTooltip = (event, isDiv) => {
+      let {
+        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,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    this.handleSeries = (series, data) => {
+      const newSeries = d3.groups(data, d => d.name);
+      newSeries.forEach(item => item[1] = []);
+      newSeries.forEach(_ref3 => {
+        let [key, dataArr] = _ref3;
+        series.forEach(itemSeries => {
+          itemSeries.forEach(jtem => {
+            const curName = jtem.data[0];
+            if (curName === key) {
+              jtem['key'] = itemSeries.key;
+              jtem['data'] = jtem.data[1].get(jtem['key']) || {
+                value: 0
+              };
+              dataArr.push(jtem);
+            }
+          });
+        });
+        let sumValue = 0;
+        dataArr.forEach(item => {
+          sumValue = sumValue + Number(item.data.value);
+        });
+        dataArr['sumValue'] = sumValue;
+      });
+      return newSeries;
+    };
+    this.getAllGroup = rectsWrapper => {
+      const allGroup = [];
+      Array.from(rectsWrapper.node().children).forEach(item => {
+        const group = [];
+        Array.from(item.children).forEach(child => {
+          if (Number(child.getAttribute('width')) !== 0) {
+            group.push(child);
+          }
+        });
+        group.reverse();
+        allGroup.push(group);
+      });
+      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('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-stackKey', rect.getAttribute('data-stackKey')).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: ".concat(rect.getAttribute('fill'), "; border-radius: 0px ").concat(xWidth * borderRadius, "px ").concat(xWidth * borderRadius, "px 0px"));
+
+      // Remove old rect
+      d3.select(rect).remove();
+    };
+    this.chart = null;
+    this.state = {
+      tooltipData: null,
+      toolTipPosition: null
+    };
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+    window.addEventListener('resize', this.handleResize);
+  }
+  componentDidUpdate(prevProps) {
+    super.componentDidUpdate(prevProps);
+    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.chart.node() && this.chart.node().remove();
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    var _this$chart;
+    ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
+    window.removeEventListener('resize', this.handleResize);
+  }
+  render() {
+    const {
+      chart
+    } = this.props;
+    const {
+      tooltipData,
+      toolTipPosition
+    } = this.state;
+    return /*#__PURE__*/_react.default.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, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
+  }
+}
+HorizontalBarStack.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
+};
+var _default = exports.default = HorizontalBarStack;

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

@@ -99,6 +99,7 @@ class HorizontalBar extends _chartComponent.default {
           width: axisWidth
         } = g.node().getBoundingClientRect();
         g.attr('transform', "translate(".concat(axisWidth, ", 0)")).attr('data-axisWidth', axisWidth);
+        this.checkTickOverlap(g, 'yAxis');
       });
       const niceEnd = d3.nice(0, d3.max(data, d => d.value), 5)[1];
       const x = d3.scaleLinear().domain(horizontal_axis_auto_range ? [0, niceEnd] : [horizontal_axis_min || 0, horizontal_axis_max || niceEnd]).range([Number(yAxis.node().getAttribute('data-axisWidth')), chartWidth - insertPadding - marginRight]);
@@ -135,6 +136,7 @@ class HorizontalBar extends _chartComponent.default {
               container: g._parents[0],
               xWidth: Number(rect.getAttribute('width')),
               yHeight: Number(rect.getAttribute('height')),
+              x: Number(rect.getAttribute('x')),
               y: Number(rect.getAttribute('y')),
               theme,
               label_font_size,

package/dist/view/wrapper/index.js

@@ -18,6 +18,8 @@ var _barCompare = _interopRequireDefault(require("./bar-compare"));
 var _barCustomStack = _interopRequireDefault(require("./bar-custom-stack"));
 var _horizontalBar = _interopRequireDefault(require("./horizontal-bar"));
 var _horizontalBarGroup = _interopRequireDefault(require("./horizontal-bar-group"));
+var _horizontalBarStack = _interopRequireDefault(require("./horizontal-bar-stack"));
+var _completeness = _interopRequireDefault(require("./completeness"));
 var _basicNumberCard = _interopRequireDefault(require("./basic-number-card"));
 var _trend = _interopRequireDefault(require("./trend"));
 var _tableElement = _interopRequireDefault(require("./table-element"));
@@ -157,6 +159,35 @@ const Wrapper = _ref => {
             chart: newChart
           }));
         }
+      case _constants.CHART_TYPE.STACKED_HORIZONTAL_BAR:
+        {
+          const {
+            config,
+            id,
+            style_config
+          } = chart;
+          const newConfig = _utils.BaseUtils.convertConfig(config);
+          const newChart = {
+            id,
+            config: newConfig,
+            style_config
+          };
+          const {
+            column_groupby_column_key,
+            column_groupby_multiple_numeric_column
+          } = config;
+          const HorizontalComponent = column_groupby_column_key || column_groupby_multiple_numeric_column ? _horizontalBarStack.default : _horizontalBar.default;
+          return /*#__PURE__*/_react.default.createElement(HorizontalComponent, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle,
+            chart: newChart
+          }));
+        }
+      case _constants.CHART_TYPE.COMPLETENESS:
+        {
+          return /*#__PURE__*/_react.default.createElement(_completeness.default, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
       case _constants.CHART_TYPE.BASIC_NUMBER_CARD:
         {
           return /*#__PURE__*/_react.default.createElement(_basicNumberCard.default, Object.assign({}, baseProps, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "2.0.12",
+  "version": "2.0.13",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",