sea-chart 2.0.8 → 2.0.9

package/dist/components/tooltip/index.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+const ToolTip = _ref => {
+  let {
+    tooltipData,
+    toolTipPosition,
+    chart
+  } = _ref;
+  const tooltipRef = (0, _react.useRef)(null);
+  const [position, setPosition] = (0, _react.useState)({
+    offsetX: -9999,
+    offsetY: -9999
+  });
+  const {
+    title,
+    items
+  } = tooltipData || {
+    title: '',
+    items: []
+  };
+  (0, _react.useEffect)(() => {
+    if (!toolTipPosition) {
+      setPosition({
+        offsetX: -9999,
+        offsetY: -9999
+      });
+      return;
+    }
+    if (chart && toolTipPosition) {
+      const width = Number(chart.node().getAttribute('width'));
+      const height = Number(chart.node().getAttribute('height'));
+      const {
+        height: tooltipHeight,
+        width: tooltipWidth
+      } = tooltipRef.current.getBoundingClientRect();
+      const {
+        offsetX,
+        offsetY
+      } = toolTipPosition;
+      const distance = 30;
+      const insertPadding = 30;
+      let translateX = offsetX + distance;
+      let translateY = offsetY;
+      const endOffsetX = offsetX + distance + tooltipWidth + insertPadding;
+      const endOffsetY = offsetY + tooltipHeight + insertPadding;
+      // Right overflow
+      if (endOffsetX > width) {
+        translateX = offsetX - distance - tooltipWidth - insertPadding;
+      }
+      // Bottom overflow
+      if (endOffsetY > height) {
+        translateY = offsetY - (endOffsetY - height);
+      }
+      setPosition({
+        offsetX: translateX,
+        offsetY: translateY
+      });
+    }
+  }, [chart, toolTipPosition, tooltipRef]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: tooltipRef,
+    className: "sea-chart-d3-tooltip-container",
+    style: {
+      transform: "translate(".concat(position.offsetX, "px, ").concat(position.offsetY, "px)")
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-chart-d3-tooltip-title"
+  }, title), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "sea-chart-d3-tooltip-list"
+  }, items.map((item, index) => {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      className: "sea-chart-d3-tooltip-list-item",
+      key: index
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "sea-chart-d3-tooltip-marker",
+      style: {
+        backgroundColor: item.color
+      }
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "sea-chart-d3-tooltip-name"
+    }, item.name), /*#__PURE__*/_react.default.createElement("span", {
+      className: "sea-chart-d3-tooltip-value"
+    }, item.value));
+  })));
+};
+var _default = exports.default = ToolTip;

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

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

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

@@ -0,0 +1,326 @@
+"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 d3 = _interopRequireWildcard(require("d3"));
+var _dtableUtils = require("dtable-utils");
+var _constants = require("../../constants");
+var _chartUtils = require("../../utils/chart-utils");
+var _intl = _interopRequireDefault(require("../../intl"));
+var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
+var _chartComponent = _interopRequireDefault(require("./chart-component"));
+class BarCompare extends _chartComponent.default {
+  constructor(props) {
+    super(props);
+    this.createChart = () => {
+      const {
+        chart
+      } = this.props;
+      const initConfig = {
+        insertPadding: 30,
+        borderRadius: 10,
+        overflowHeight: 20 // Fillet the bottom corner beyond the axis and then cover it with a mask
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+      this.initDefs();
+    };
+    this.drawChart = () => {
+      let {
+        result: data
+      } = this.props;
+      data = _chartUtils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      if (!Array.isArray(data)) return;
+      this.draw(data);
+      this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
+    };
+    this.draw = data => {
+      const {
+        chart,
+        globalTheme,
+        chartColorTheme,
+        canvasStyle
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const {
+        previewType
+      } = canvasStyle || {};
+      const {
+        display_increase,
+        y_axis_auto_range,
+        y_axis_min,
+        y_axis_max
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding,
+        borderRadius,
+        overflowHeight
+      } = this.chartBoundingClientRect;
+      data = data.sort((a, b) => d3.ascending(a.name, b.name));
+      const fx = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const color = d3.scaleOrdinal().domain(d3.group(data, d => d.group_name).keys()).range(_chartUtils.BaseUtils.getCurrentTheme(chartColorTheme).colors).unknown('#ccc');
+      const x = d3.scaleBand().domain(d3.group(data, d => d.group_name).keys()).range([0, fx.bandwidth()]);
+      const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, d3.max(data, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding]);
+
+      // X axis
+      this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(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);
+      });
+
+      // Y axis
+      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => {
+        g.select('.domain').remove();
+        g.selectAll('line').node() && g.selectAll('line').node().remove(); // delete the first line
+        g.selectAll('.tick line').clone().attr('x2', chartWidth - 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
+      this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id)).attr('mask', "url(#mask-wrapper-".concat(previewType, "-").concat(chart === null || chart === void 0 ? void 0 : chart.id, ")")).selectAll().data(() => d3.group(data, d => d.name)).join('g').attr('transform', _ref => {
+        let [name, dum] = _ref;
+        // Each group is horizontally centered
+        const offset = (fx.bandwidth() - dum.length * x.bandwidth()) / 2;
+        return "translate(".concat(fx(name) + offset, ",0)");
+      })
+      // rect item
+      .selectAll().data(_ref2 => {
+        let [a, d] = _ref2;
+        return d;
+      }).join('rect').attr('x', (d, index) => index * x.bandwidth()).attr('y', d => y(d.value)).attr('width', x.bandwidth()).attr('height', d => y(0) - y(d.value) === 0 ? 0 : y(0) - y(d.value) + overflowHeight).attr('rx', borderRadius).attr('fill', d => color(d.group_name)).attr('data-value', d => d.value).attr('data-groupName', d => d.name).on('click', (event, data) => {
+        this.props.toggleRecords(data);
+      }).on('mouseover', event => {
+        this.showTooltip(event, color);
+        this.handleAcitveAndInActiveState('inActive', event);
+      }).on('mousemove', event => {
+        this.moveTooltip(event, color);
+      }).on('mouseleave', event => {
+        this.hiddenTooltip();
+        this.handleAcitveAndInActiveState('active', event);
+      });
+      if (display_increase) {
+        const increaseData = this.getIncreaseData(data);
+        this.drawIncreaseLine(increaseData);
+      }
+      this.setColorMap(data, chartColorTheme);
+      this.setLegend('group_name', theme, 'top-right', data);
+    };
+    this.showTooltip = (event, colorScale, isCircle) => {
+      const {
+        y_axis_summary_type,
+        y_axis_summary_method,
+        increase_line_color
+      } = this.props.chart.config;
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      let newTooltipData = {};
+      if (isCircle) {
+        const circleEl = event.target;
+        newTooltipData = {
+          title: _intl.default.get(_constants.TITLE_INCREASE),
+          items: [{
+            color: increase_line_color || '#fbd44a',
+            name: circleEl.getAttribute('data-name'),
+            value: circleEl.getAttribute('data-text')
+          }]
+        };
+      } else {
+        const curGroup = event.target.parentNode;
+        const [, data] = curGroup.__data__;
+        newTooltipData = {
+          title: y_axis_summary_type === 'count' ? _intl.default.get(_constants.TITLE_AMOUNT) : _intl.default.get(_constants.CHART_SUMMARY_SHOW[y_axis_summary_method]),
+          items: data.map(item => {
+            return {
+              color: colorScale(item.group_name),
+              name: item.group_name,
+              value: item.value
+            };
+          })
+        };
+      }
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.moveTooltip = event => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    this.drawIncreaseLine = increaseData => {
+      const {
+        chart,
+        globalTheme
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const {
+        label_font_size,
+        y_axis_auto_range,
+        y_axis_min,
+        y_axis_max,
+        increase_line_color,
+        display_increase_percentage
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      const circleData = increaseData.map(() => ({}));
+      const lineX = d3.scaleBand().domain(increaseData.map(d => d.name)).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const lineY = d3.scaleLinear().domain(y_axis_auto_range ? [d3.min(increaseData, d => d.value), d3.max(increaseData, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding]);
+      const line = d3.line().x((d, index) => {
+        const x = lineX(d.name) + lineX.bandwidth() / 2;
+        circleData[index]['x'] = x;
+        circleData[index]['name'] = d.name;
+        return x;
+      }).y((d, index) => {
+        const y = lineY(d.value);
+        circleData[index]['y'] = y;
+        circleData[index]['value'] = d.formatValue;
+        return y;
+      }).curve(d3.curveBumpX);
+      const wrapper = this.chart.append('g').attr('class', "increase-line-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
+
+      // line
+      wrapper.append('path').attr('fill', 'none').attr('stroke', increase_line_color || '#fbd44a').attr('stroke-width', 2).attr('d', () => line(increaseData));
+
+      // circle
+      console.log('wrapper', wrapper);
+      circleData.forEach(item => {
+        wrapper.append('circle').attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', increase_line_color || '#fbd44a').attr('data-text', item.value).attr('data-name', item.name).call(g => {
+          // circle label
+          if (display_increase_percentage) {
+            const curCircleEl = g.node();
+            wrapper.append('text').attr('fill', theme.labelColor).attr('font-size', _chartUtils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
+              const {
+                width
+              } = g.node().getBoundingClientRect();
+              const translateX = Number(curCircleEl.getAttribute('cx')) - width / 2;
+              const translateY = Number(curCircleEl.getAttribute('cy')) - 10;
+              g.attr('transform', "translate(".concat(translateX, ", ").concat(translateY, ")"));
+            });
+          }
+        }).on('mouseover', event => {
+          this.updateCircleStyle(event, 'zoomIn');
+          this.showTooltip(event, '', true);
+        }).on('mousemove', event => {
+          this.moveTooltip(event);
+        }).on('mouseleave', event => {
+          this.hiddenTooltip();
+          this.updateCircleStyle(event, 'zoomOut');
+        });
+      });
+    };
+    this.getIncreaseData = data => {
+      const increaseData = [];
+      d3.group(data, d => d.name).forEach((value, key) => {
+        var _increaseValue$, _increaseValue$2;
+        const increaseValue = value.filter(d => (d === null || d === void 0 ? void 0 : d.increase_value) !== undefined) || [{
+          increaseValue: 0
+        }];
+        const formatValue = (0, _dtableUtils.getNumberDisplayString)((_increaseValue$ = increaseValue[0]) === null || _increaseValue$ === void 0 ? void 0 : _increaseValue$.increase_value, {
+          format: 'percent'
+        });
+        const data = {
+          name: key,
+          value: ((_increaseValue$2 = increaseValue[0]) === null || _increaseValue$2 === void 0 ? void 0 : _increaseValue$2.increase_value) || 0,
+          formatValue: formatValue || '0%',
+          rowData: value
+        };
+        increaseData.push(data);
+      });
+      return increaseData;
+    };
+    this.updateCircleStyle = (event, state) => {
+      if (state === 'zoomIn') {
+        d3.select(event.currentTarget).attr('r', 5);
+        return;
+      }
+      const circles = d3.select(event.currentTarget.parentNode).selectAll('circle').nodes();
+      circles.forEach(circle => d3.select(circle).attr('r', 3));
+    };
+    this.handleAcitveAndInActiveState = (state, event) => {
+      const curGroup = event.target.parentNode;
+      const allGroup = Array.from(curGroup.parentNode.children);
+      const [curGroupName] = curGroup.__data__;
+      this.setActiveAndInActiveState(state, allGroup, curGroupName);
+    };
+    this.chart = null;
+    this.state = {
+      tooltipData: null,
+      toolTipPosition: null
+    };
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+  }
+  componentDidUpdate(prevProps) {
+    super.componentDidUpdate(prevProps);
+    if (_chartUtils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.chart.node() && this.chart.node().remove();
+  }
+  render() {
+    const {
+      tooltipData,
+      toolTipPosition
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "sea-chart-container",
+      ref: ref => this.container = ref
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
+  }
+}
+BarCompare.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 = BarCompare;

package/dist/view/wrapper/bar-custom-stack.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 _slugid = _interopRequireDefault(require("slugid"));
+var _intl = _interopRequireDefault(require("../../intl"));
+var _chartUtils = require("../../utils/chart-utils");
+var _constants = require("../../constants");
+var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
+var _chartComponent = _interopRequireDefault(require("./chart-component"));
+class BarCustom 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 initConfig = {
+        insertPadding: 30,
+        borderRadius: 5
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+    };
+    this.drawChart = () => {
+      let {
+        result: data
+      } = this.props;
+      data = _chartUtils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      if (!Array.isArray(data)) return;
+      this.draw(data);
+      this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
+    };
+    this.organizeData = data => {
+      const dataMap = {};
+      // values is not 0
+      data.forEach(item => {
+        // name
+        if (!dataMap[item.name]) {
+          item.isFirst = 1;
+          dataMap[item.name] = {
+            [item.y_axis_type]: [item]
+          };
+        } else {
+          // same name but different y_axis_type
+          if (!dataMap[item.name][item.y_axis_type]) {
+            item.isFirst = 1;
+            dataMap[item.name][item.y_axis_type] = [item];
+          } else {
+            item.isFirst = 0;
+            dataMap[item.name][item.y_axis_type].push(item);
+          }
+        }
+      });
+      const stacksData = this.handleStacks(dataMap);
+      return stacksData;
+    };
+    this.handleStacks = organizedData => {
+      const stacksData = [];
+      Object.keys(organizedData).forEach(key => {
+        const item = organizedData[key];
+        const stacks = [];
+        Object.keys(item).forEach(itemKey => {
+          const value = item[itemKey];
+
+          // stack data
+          const series = d3.stack().keys(d3.union(value.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;
+          })(d3.index(value, d => d.name, d => d.group_name));
+
+          //  add custom key
+          series.forEach(s => {
+            s['stackKey'] = itemKey;
+            s['stackData'] = value.find(d => d.group_name === s.key);
+          });
+          stacks.push({
+            key: itemKey,
+            value,
+            series,
+            slugid: _slugid.default.nice()
+          });
+        });
+        stacksData.push({
+          name: key,
+          stacks
+        });
+      });
+      return stacksData;
+    };
+    this.getAllSeries = organizedData => {
+      const allSeries = [];
+      organizedData.forEach(item => {
+        item.stacks.forEach(stack => {
+          stack.series.forEach(s => {
+            allSeries.push(s[0]);
+          });
+        });
+      });
+      return allSeries;
+    };
+    this.draw = data => {
+      const {
+        chart,
+        globalTheme,
+        chartColorTheme
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const {
+        display_each_block_data
+      } = chart.config;
+      const {
+        display_goal_line,
+        goal_value,
+        goal_label
+      } = chart.style_config || {};
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding,
+        borderRadius
+      } = this.chartBoundingClientRect;
+      const organizedData = this.organizeData(data);
+      const color = d3.scaleOrdinal().domain(d3.group(data, d => d.group_name).keys()).range(_chartUtils.BaseUtils.getCurrentTheme(chartColorTheme).colors).unknown('#ccc');
+      const fx = d3.scaleBand().domain(new Set(organizedData.map(d => d.name))).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const x = d3.scaleBand().domain(new Set(data.map(d => d.y_axis_type))).range([0, fx.bandwidth()]);
+      const allSeries = this.getAllSeries(organizedData);
+      const niceEnd = d3.nice(0, d3.max(allSeries, d => d[1]), 5)[1];
+      const y = d3.scaleLinear().domain([0, niceEnd]).range([chartHeight - insertPadding, insertPadding]);
+
+      // X axis
+      this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(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);
+      });
+
+      // Y axis
+      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => {
+        g.select('.domain').remove();
+        g.selectAll('line').node() && g.selectAll('line').node().remove(); // delete the first line
+        g.selectAll('.tick line').clone().attr('x2', chartWidth - 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
+      this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id)).selectAll().data(organizedData).join('g').attr('transform', d => {
+        const {
+          name
+        } = d;
+        return "translate(".concat(fx(name), ",0)");
+      }).selectAll().data(d => d.stacks).join('g').attr('class', 'stackGroup').attr('data-slugid', d => d.slugid).selectAll().data(d => d.series).join('rect').attr('class', 'stack').attr('data-isTop', (_, index, arr) => {
+        return index === arr.length - 1;
+      }).attr('x', d => x(d.stackKey)).attr('y', d => y(d[0][1])).attr('width', x.bandwidth()).attr('height', d => {
+        const height = y(d[0][0]) - y(d[0][1]);
+        return isNaN(height) ? 0 : height;
+      }).attr('fill', d => color(d.key)).attr('data-value', d => d.stackData.value).attr('data-rectId', d => d.stackData.slugId).attr('data-groupName', d => d.stackData.group_name).attr('data-title', d => d.stackData.name).call(g => {
+        // add rect borderRadius
+        Array.from(g._parents).forEach(group => {
+          const topRect = Array.from(group.children).find(rect => rect.getAttribute('data-isTop') === 'true');
+          // use clipPath
+          const clipRect = d3.select(topRect.cloneNode()).attr('rx', borderRadius).attr('height', Number(topRect.getAttribute('height')) + borderRadius);
+          const clipPath = d3.select(group).append('clipPath').attr('id', group.getAttribute('data-slugid'));
+          clipPath.node().appendChild(clipRect.node());
+          d3.select(topRect).attr('clip-path', "url(#".concat(group.getAttribute('data-slugid'), ")"));
+        });
+        if (display_each_block_data) {
+          this.handleLabelToRectCenter(g, x.bandwidth());
+        }
+      }).on('click', (event, data) => {
+        this.props.toggleRecords(data);
+      }).on('mouseover', event => {
+        this.showTooltip(event, color);
+        this.handleStacksAcitveAndInActiveState('inActive', event);
+      }).on('mousemove', event => {
+        this.moveTooltip(event);
+      }).on('mouseleave', event => {
+        this.hiddenTooltip();
+        this.handleStacksAcitveAndInActiveState('active', event);
+      });
+      if (display_goal_line && goal_label && goal_value) {
+        this.setDispalyGoalLine(goal_label, goal_value, insertPadding, y);
+      }
+      this.setLegend('group_name', theme, 'top-right', data, color);
+    };
+    this.handleLabelToRectCenter = (g, xWidth) => {
+      const {
+        globalTheme,
+        chart
+      } = this.props;
+      const {
+        label_font_size
+      } = chart.config;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const rects = g.nodes();
+      rects.forEach(rect => {
+        this.addLabelToRectCenter({
+          container: rect.parentNode,
+          x: Number(rect.getAttribute('x')),
+          y: Number(rect.getAttribute('y')),
+          xWidth,
+          yheight: Number(rect.getAttribute('height')),
+          theme,
+          label_font_size,
+          text: rect.getAttribute('data-value')
+        });
+      });
+    };
+    this.handleStacksAcitveAndInActiveState = (state, event) => {
+      const rectsWrapper = event.currentTarget.parentNode.parentNode.parentNode;
+      const allGroup = Array.from(rectsWrapper.children);
+      if (state === 'active') {
+        allGroup.forEach(group => {
+          Array.from(group.children).forEach(rectGroup => {
+            Array.from(rectGroup.children).forEach(rect => {
+              if (rect.getAttribute('class') === 'stack') {
+                d3.select(rect).attr('opacity', 1);
+              }
+            });
+          });
+        });
+      }
+      if (state === 'inActive') {
+        const curRectId = event.currentTarget.getAttribute('data-rectId');
+        allGroup.forEach(group => {
+          Array.from(group.children).forEach(rectGroup => {
+            Array.from(rectGroup.children).forEach(rect => {
+              if (rect.getAttribute('class') === 'stack' && rect.getAttribute('data-rectId') !== curRectId) {
+                d3.select(rect).attr('opacity', 0.3);
+              }
+            });
+          });
+        });
+      }
+    };
+    this.showTooltip = (event, colorScale) => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      const title = event.currentTarget.getAttribute('data-title');
+      const name = event.currentTarget.getAttribute('data-groupName');
+      const value = event.currentTarget.getAttribute('data-value');
+      const newTooltipData = {
+        title: !title && typeof title !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : title,
+        items: [{
+          color: colorScale(name),
+          name: !name && typeof name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : name,
+          value
+        }]
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.moveTooltip = event => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    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 (_chartUtils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.chart.node() && this.chart.node().remove();
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.chart.node() && this.chart.node().remove();
+    window.removeEventListener('resize', this.handleResize);
+  }
+  render() {
+    const {
+      tooltipData,
+      toolTipPosition
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "sea-chart-container",
+      ref: ref => this.container = ref
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
+  }
+}
+BarCustom.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 = BarCustom;

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

@@ -16,6 +16,7 @@ var _columnUtils = require("../../utils/column-utils");
 var _constants = require("../../constants");
 var _utils = require("../../utils");
 var _colorRules = require("../../constants/color-rules");
+var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
 var _chartComponent = _interopRequireDefault(require("./chart-component"));
 class BarGroup extends _chartComponent.default {
   constructor(props) {
@@ -273,7 +274,11 @@ class BarGroup extends _chartComponent.default {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "sea-chart-container",
       ref: ref => this.container = ref
-    }, this.getToolTipContainer(tooltipData, toolTipPosition));
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
   }
 }
 BarGroup.propTypes = {

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

@@ -16,6 +16,7 @@ var _columnUtils = require("../../utils/column-utils");
 var _constants = require("../../constants");
 var _utils = require("../../utils");
 var _colorRules = require("../../constants/color-rules");
+var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
 var _chartComponent = _interopRequireDefault(require("./chart-component"));
 class BarStack extends _chartComponent.default {
   constructor(props) {
@@ -117,7 +118,8 @@ class BarStack extends _chartComponent.default {
       });
 
       // Rect group
-      this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id)).selectAll().data(series).join('g').attr('data-key', d => d.key).selectAll('rect').data(D => {
+      this.rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
+      this.rectsWrapper.selectAll().data(series).join('g').attr('data-key', d => d.key).selectAll('rect').data(D => {
         const data = D.map(d => {
           d.key = D.key;
           return d;
@@ -208,11 +210,7 @@ class BarStack extends _chartComponent.default {
       });
     };
     this.handleAcitveAndInActiveState = (state, event) => {
-      const {
-        chart
-      } = this.props;
-      const rectsWrapper = d3.selectAll(".rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
-      const allGroup = Array.from(rectsWrapper.node().children);
+      const allGroup = Array.from(this.rectsWrapper.node().children);
       const curGroupName = event.currentTarget.getAttribute('data-groupName');
       this.setActiveAndInActiveState(state, allGroup, curGroupName);
     };
@@ -313,7 +311,11 @@ class BarStack extends _chartComponent.default {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "sea-chart-container",
       ref: ref => this.container = ref
-    }, this.getToolTipContainer(tooltipData, toolTipPosition));
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
   }
 }
 BarStack.propTypes = {

package/dist/view/wrapper/bar.js

@@ -14,6 +14,7 @@ var _constants = require("../../constants");
 var _utils = require("../../utils");
 var _colorUtils = require("../../utils/color-utils");
 var _intl = _interopRequireDefault(require("../../intl"));
+var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
 var _chartComponent = _interopRequireDefault(require("./chart-component"));
 class Bar extends _chartComponent.default {
   constructor(props) {
@@ -158,7 +159,8 @@ class Bar extends _chartComponent.default {
         g.selectAll('text').attr('font-size', theme.fontSize);
         g.selectAll('text').attr('fill', theme.textColor);
       });
-      this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id)).selectAll().data(data).join('path').attr('fill', d => d3.color(this.getFillColor(d))).attr('data-x', d => x(d.name)).attr('data-y', d => y(d.value)).attr('data-width', x.bandwidth()).attr('data-value', d => d.value).attr('data-groupName', d => d.name).attr('id', (d, index) => d.slugId).attr('d', d => {
+      const rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
+      rectsWrapper.selectAll().data(data).join('path').attr('fill', d => d3.color(this.getFillColor(d))).attr('data-x', d => x(d.name)).attr('data-y', d => y(d.value)).attr('data-width', x.bandwidth()).attr('data-value', d => d.value).attr('data-groupName', d => d.name).attr('id', (d, index) => d.slugId).attr('d', d => {
         // Do not draw if the range is smaller than the minimum
         if (!y_axis_auto_range && d.value <= y_axis_min) {
           return '';
@@ -175,12 +177,11 @@ class Bar extends _chartComponent.default {
         path.closePath();
         return path.toString();
       }).call(g => {
-        const parentNode = d3.select(".rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
         g.nodes().forEach(path => {
           // Add label
           if (y_axis_show_value) {
             this.addLabelToRectTop({
-              container: parentNode.node(),
+              container: rectsWrapper.node(),
               xWidth: Number(path.dataset.width),
               x: Number(path.dataset.x),
               y: Number(path.dataset.y),
@@ -236,7 +237,11 @@ class Bar extends _chartComponent.default {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "sea-chart-container",
       ref: ref => this.container = ref
-    }, this.getToolTipContainer(tooltipData, toolTipPosition));
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
   }
 }
 Bar.propTypes = {

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

@@ -504,6 +504,7 @@ class ChartComponent extends _react.Component {
       let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.CHART_THEME_COLOR['light'];
       let legendPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'top-left';
       let data = arguments.length > 3 ? arguments[3] : undefined;
+      let colorScale = arguments.length > 4 ? arguments[4] : undefined;
       if (!_this.chart) return;
       const {
         width: chartWidth,
@@ -527,16 +528,16 @@ class ChartComponent extends _react.Component {
         legendData = d3.group(data, d => d[legendName]);
         direction = -1;
       }
-      _this.chart.append('g').attr('class', "legend-wrapper-".concat((_this$chart$node = _this.chart.node()) === null || _this$chart$node === void 0 ? void 0 : _this$chart$node.id)).attr('transform', "translate(".concat(translateX, ", 0)")).selectAll().data(legendData).join('g').append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('rx', r).attr('fill', _ref => {
+      const legendWrapper = _this.chart.append('g').attr('class', "legend-wrapper-".concat((_this$chart$node = _this.chart.node()) === null || _this$chart$node === void 0 ? void 0 : _this$chart$node.id)).attr('transform', "translate(".concat(translateX, ", 0)"));
+      legendWrapper.selectAll().data(legendData).join('g').append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('rx', r).attr('fill', _ref => {
         let [groupName] = _ref;
+        if (colorScale) return colorScale(groupName);
         return _this.colorMap[groupName] || _constants.CHART_STYLE_COLORS[0];
       }).attr('data-text', _ref2 => {
         let [groupName] = _ref2;
         return groupName;
       }).call(g => {
-        var _this$chart$node2;
-        const legendWrapper = d3.selectAll(".legend-wrapper-".concat((_this$chart$node2 = _this.chart.node()) === null || _this$chart$node2 === void 0 ? void 0 : _this$chart$node2.id)).node();
-        const legendItems = Array.from(legendWrapper.children);
+        const legendItems = Array.from(legendWrapper.node().children);
         const legendItemCount = legendItems.length;
 
         // Add text
@@ -689,47 +690,6 @@ class ChartComponent extends _react.Component {
       const settings = this.getToolTipSettings(isGroup, summaryColumn, y_axis_summary_method, useSingleSelectColumnColor);
       this.chart.tooltip(settings);
     };
-    this.getToolTipContainer = (tooltipData, position) => {
-      const {
-        offsetX,
-        offsetY
-      } = position || {
-        offsetX: -9999,
-        offsetY: -9999
-      };
-      const {
-        title,
-        items
-      } = tooltipData || {
-        title: '',
-        items: []
-      };
-      const dom = /*#__PURE__*/_react.default.createElement("div", {
-        className: "sea-chart-d3-tooltip-container",
-        style: {
-          transform: "translate(".concat(offsetX + 50, "px, ").concat(offsetY, "px)")
-        }
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "sea-chart-d3-tooltip-title"
-      }, title), /*#__PURE__*/_react.default.createElement("ul", {
-        className: "sea-chart-d3-tooltip-list"
-      }, items.map((item, index) => {
-        return /*#__PURE__*/_react.default.createElement("li", {
-          className: "sea-chart-d3-tooltip-list-item",
-          key: index
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "sea-chart-d3-tooltip-marker",
-          style: {
-            backgroundColor: item.color
-          }
-        }), /*#__PURE__*/_react.default.createElement("span", {
-          className: "sea-chart-d3-tooltip-name"
-        }, item.name), /*#__PURE__*/_react.default.createElement("span", {
-          className: "sea-chart-d3-tooltip-value"
-        }, item.value));
-      })));
-      return dom;
-    };
     this.setToolTipForLine = () => {
       const settings = this.getToolTipSettings();
       const lineToolTipSettings = {
@@ -797,14 +757,13 @@ class ChartComponent extends _react.Component {
       return themeColors || _constants.CHART_THEME_COLOR[_constants.THEME_NAME_MAP.LIGHT];
     };
     this.setDispalyGoalLine = (goal_label, goal_value, insertPadding, yScale) => {
-      var _this$chart$node3;
+      var _this$chart$node2;
       const {
         width: chartWidth
       } = this.chartBoundingClientRect;
-      this.chart.append('g').attr('class', "annotation-wrapper-".concat((_this$chart$node3 = this.chart.node()) === null || _this$chart$node3 === void 0 ? void 0 : _this$chart$node3.id)).append('line').attr('stroke', '#aaa').attr('x1', insertPadding).attr('y1', yScale(goal_value)).attr('x2', chartWidth - insertPadding).attr('y2', yScale(goal_value)).call(g => {
-        var _this$chart$node4;
-        const parentNode = d3.select(".annotation-wrapper-".concat((_this$chart$node4 = this.chart.node()) === null || _this$chart$node4 === void 0 ? void 0 : _this$chart$node4.id));
-        parentNode.append('text').attr('x', chartWidth - insertPadding - 30).attr('y', yScale(goal_value) - 10).attr('fill', '#666').text(goal_label);
+      const annotationWrapper = this.chart.append('g').attr('class', "annotation-wrapper-".concat((_this$chart$node2 = this.chart.node()) === null || _this$chart$node2 === void 0 ? void 0 : _this$chart$node2.id));
+      annotationWrapper.append('line').attr('stroke', '#aaa').attr('x1', insertPadding).attr('y1', yScale(goal_value)).attr('x2', chartWidth - insertPadding).attr('y2', yScale(goal_value)).call(g => {
+        annotationWrapper.append('text').attr('x', chartWidth - insertPadding - 30).attr('y', yScale(goal_value) - 10).attr('fill', '#666').text(goal_label);
       });
     };
     this.addLabelToRectTop = _ref3 => {

package/dist/view/wrapper/index.js

@@ -13,6 +13,8 @@ var _table = _interopRequireDefault(require("./table"));
 var _bar = _interopRequireDefault(require("./bar"));
 var _barGroup = _interopRequireDefault(require("./bar-group"));
 var _barStack = _interopRequireDefault(require("./bar-stack"));
+var _barCompare = _interopRequireDefault(require("./bar-compare"));
+var _barCustomStack = _interopRequireDefault(require("./bar-custom-stack"));
 var _basicNumberCard = _interopRequireDefault(require("./basic-number-card"));
 var _trend = _interopRequireDefault(require("./trend"));
 var _tableElement = _interopRequireDefault(require("./table-element"));
@@ -115,6 +117,18 @@ const Wrapper = _ref => {
             canvasStyle: canvasStyle
           }));
         }
+      case _constants.CHART_TYPE.COMPARE_BAR:
+        {
+          return /*#__PURE__*/_react.default.createElement(_barCompare.default, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
+      case _constants.CHART_TYPE.BAR_CUSTOM:
+        {
+          return /*#__PURE__*/_react.default.createElement(_barCustomStack.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.8",
+  "version": "2.0.9",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
@@ -135,6 +135,7 @@
     "react-cookies": "0.1.1",
     "react-dev-utils": "^12.0.1",
     "react-dom": "~18.3.1",
+    "react-i18next": "12.1.4",
     "regenerator-runtime": "^0.14.1",
     "release-it": "16.2.1",
     "resolve": "1.12.0",