sea-chart 2.0.7 → 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

@@ -23,7 +23,8 @@ const TypesDialog = _ref => {
     lang,
     onToggle: propsOnToggle,
     onChange,
-    dataSources
+    dataSources,
+    hideTypeToggle
   } = _ref;
   const [currentCatIndex, setCurrentCatIndex] = (0, _react.useState)(0);
   const [selectedType, setType] = (0, _react.useState)(type);
@@ -66,11 +67,17 @@ const TypesDialog = _ref => {
     onChange(selectedType);
     onToggle();
   }, [onChange, selectedType, onToggle]);
+  const handleFilterTypes = (0, _react.useCallback)(() => {
+    if (hideTypeToggle) {
+      const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram'].includes(item.name));
+      return newChartTypes;
+    }
+    return _constants.CHART_TYPES;
+  }, [hideTypeToggle]);
   return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
     isOpen: true,
     toggle: onToggle,
-    className: "sea-chart-types-dialog",
-    zIndex: 1048
+    className: "sea-chart-types-dialog"
   }, /*#__PURE__*/_react.default.createElement(_DTableModalHeader2.default, {
     toggle: onToggle
   }, type ? _intl.default.get('Edit_type') : _intl.default.get('All_charts')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
@@ -79,7 +86,7 @@ const TypesDialog = _ref => {
     className: "sea-chart-types-container d-flex flex-column h-100"
   }, /*#__PURE__*/_react.default.createElement("ul", {
     className: "sea-chart-chart-categories-nav flex-shrink-0 d-flex flex-wrap align-items-center list-unstyled"
-  }, _constants.CHART_TYPES.map((item, index) => {
+  }, handleFilterTypes().map((item, index) => {
     return /*#__PURE__*/_react.default.createElement("li", {
       key: index,
       className: "px-4 py-2 sea-chart-chart-cat-nav-item"
@@ -101,7 +108,7 @@ const TypesDialog = _ref => {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "flex-fill o-auto sea-chart-type-container",
     ref: seaChartTypeContainerRef
-  }, _constants.CHART_TYPES.map((item, index) => {
+  }, handleFilterTypes().map((item, index) => {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: "sea-chart-type-".concat(index),
       className: "mb-7"

package/dist/settings/advance-bar-settings/style-settings.js

@@ -11,11 +11,11 @@ var _DTableRadioGroup2 = _interopRequireDefault(require("dtable-ui-component/lib
 var _DTableSwitch2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableSwitch"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
-var _constants = require("dtable-ui-component/lib/constants");
+var _dtableUtils = require("dtable-utils");
 var _divider = _interopRequireDefault(require("../widgets/divider"));
 var _minMaxSetting = _interopRequireDefault(require("../widgets/min-max-setting"));
 var _displayValuesSettings = _interopRequireDefault(require("../widgets/display-values-settings"));
-var _constants2 = require("../../constants");
+var _constants = require("../../constants");
 var _intl = _interopRequireDefault(require("../../intl"));
 var _selectLineType = _interopRequireDefault(require("../widgets/select-line-type"));
 var _colorSelector = _interopRequireDefault(require("../../components/chart-color-selector/color-selector"));
@@ -60,20 +60,20 @@ const StyleSettings = _ref => {
   } = style_config || {};
   const table = tables.find(table => table._id === table_id);
   const column = (0, _utils.getColumnByKey)(column_groupby_column_key, table.columns);
-  const isGroupBySingleSelectColumn = (column === null || column === void 0 ? void 0 : column.type) === _constants.CellType.SINGLE_SELECT;
+  const isGroupBySingleSelectColumn = (column === null || column === void 0 ? void 0 : column.type) === _dtableUtils.CellType.SINGLE_SELECT;
   const defaultColorTheme = _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.DEFAULT;
   const [currYaxisTitle, setCurrYaxisTitle] = (0, _react.useState)(title_name || '');
   const xAxisLabelOptions = (0, _react.useMemo)(() => {
     if (xLabel === 'Vertical_axis') {
-      return _constants2.Y_LABEL_POSITIONS;
+      return _constants.Y_LABEL_POSITIONS;
     }
-    return _constants2.X_LABEL_POSITIONS;
+    return _constants.X_LABEL_POSITIONS;
   }, [xLabel]);
   const yAxisLabelOptions = (0, _react.useMemo)(() => {
     if (yLabel === 'Horizontal_axis') {
-      return _constants2.X_LABEL_POSITIONS;
+      return _constants.X_LABEL_POSITIONS;
     }
-    return _constants2.Y_LABEL_POSITIONS;
+    return _constants.Y_LABEL_POSITIONS;
   }, [yLabel]);
   const onAxisLabelShowChange = (0, _react.useCallback)(labelKey => {
     const {
@@ -162,12 +162,12 @@ const StyleSettings = _ref => {
   }, []);
   const xAxisLabelPosition = x_axis_label_position || xAxisLabelOptions[0];
   const yAxisLabelPosition = y_axis_label_position || yAxisLabelOptions[0];
-  const isLineChart = [_constants2.CHART_TYPE.LINE, _constants2.CHART_TYPE.LINE_GROUP, _constants2.CHART_TYPE.AREA, _constants2.CHART_TYPE.AREA_GROUP].includes(type);
+  const isLineChart = [_constants.CHART_TYPE.LINE, _constants.CHART_TYPE.LINE_GROUP, _constants.CHART_TYPE.AREA, _constants.CHART_TYPE.AREA_GROUP].includes(type);
   const getLabelOptionsDisplay = options => {
     return options.reduce((optionDisplayMap, position) => {
       return {
         ...optionDisplayMap,
-        [position]: _intl.default.get(_constants2.LABEL_POSITION_TYPE_SHOW[position])
+        [position]: _intl.default.get(_constants.LABEL_POSITION_TYPE_SHOW[position])
       };
     }, {});
   };
@@ -196,7 +196,7 @@ const StyleSettings = _ref => {
       checked: y_axis_show_label || false,
       placeholder: _intl.default.get('Display_title'),
       onChange: () => onAxisLabelShowChange('y_axis_show_label')
-    }), y_axis_show_label && [_constants2.CHART_TYPE.BAR_STACK].includes(type) && /*#__PURE__*/_react.default.createElement("div", {
+    }), y_axis_show_label && [_constants.CHART_TYPE.BAR_STACK].includes(type) && /*#__PURE__*/_react.default.createElement("div", {
       className: "mt-3"
     }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
       for: "y-axis-custom-title-input"
@@ -218,7 +218,7 @@ const StyleSettings = _ref => {
       options: yAxisLabelOptions,
       optionsDisplay: getLabelOptionsDisplay(yAxisLabelOptions),
       onSelectChanged: position => onAxisLabelPositionChange(position, 'y_axis_label_position')
-    })), ![_constants2.CHART_TYPE.BAR_CUSTOM].includes(type) && /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+    })), ![_constants.CHART_TYPE.BAR_CUSTOM].includes(type) && /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
       key: "y_axis_auto_range",
       switchClassName: "mt-3",
       checked: y_axis_auto_range,
@@ -235,18 +235,18 @@ const StyleSettings = _ref => {
   }), isGroupBySingleSelectColumn && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_divider.default, null), /*#__PURE__*/_react.default.createElement(_colorSelector.default, {
     colorTheme: color_theme || defaultColorTheme,
     onChange: onChartColorChange
-  })), /*#__PURE__*/_react.default.createElement(_divider.default, null), _constants2.SUPPORT_GOAL_LINE_CHART_TYPES.includes(type) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_goalLineSetting.default, {
+  })), /*#__PURE__*/_react.default.createElement(_divider.default, null), _constants.SUPPORT_GOAL_LINE_CHART_TYPES.includes(type) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_goalLineSetting.default, {
     displayGoalLine: display_goal_line,
     goalLabel: goal_label,
     goalValue: goal_value,
     onChange: onStyleChange
-  }), /*#__PURE__*/_react.default.createElement(_divider.default, null)), ![_constants2.CHART_TYPE.BAR_CUSTOM].includes(type) && /*#__PURE__*/_react.default.createElement(_displayValuesSettings.default, {
+  }), /*#__PURE__*/_react.default.createElement(_divider.default, null)), ![_constants.CHART_TYPE.BAR_CUSTOM].includes(type) && /*#__PURE__*/_react.default.createElement(_displayValuesSettings.default, {
     isShowValueKey: "y_axis_show_value",
     isShowValue: y_axis_show_value,
     fontSizeKey: "label_font_size",
     fontSize: label_font_size,
     onChange: onDisplayValueChange
-  }), _constants2.SUPPORT_STACK_VALUE_CHART_TYPES.includes(type) && /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+  }), _constants.SUPPORT_STACK_VALUE_CHART_TYPES.includes(type) && /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
     switchClassName: "display-value-settings",
     checked: display_each_block_data,
     disabled: false,

package/dist/settings/pie-settings/style-settings.js

@@ -11,12 +11,12 @@ var _DTableSelect2 = _interopRequireDefault(require("dtable-ui-component/lib/DTa
 var _DTableSwitch2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableSwitch"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
-var _constants = require("dtable-ui-component/lib/constants");
+var _dtableUtils = require("dtable-utils");
 var _divider = _interopRequireDefault(require("../widgets/divider"));
 var _mininumSlicePercent = _interopRequireDefault(require("../widgets/mininum-slice-percent"));
 var _fontSettings = require("../widgets/font-settings");
 var _utils = require("../../utils");
-var _constants2 = require("../../constants");
+var _constants = require("../../constants");
 var _intl = _interopRequireDefault(require("../../intl"));
 var _colorRules = require("../../constants/color-rules");
 var _colorSelector = _interopRequireDefault(require("../../components/chart-color-selector/color-selector"));
@@ -27,18 +27,18 @@ const StyleSettings = _ref => {
     tables
   } = _ref;
   const labelPositionOptions = (0, _react.useMemo)(() => {
-    return _constants2.CHART_LABEL_POSITIONS.map(item => {
+    return _constants.CHART_LABEL_POSITIONS.map(item => {
       return {
         value: item,
-        label: _intl.default.get(_constants2.CHART_LABEL_POSITION_SHOW[item])
+        label: _intl.default.get(_constants.CHART_LABEL_POSITION_SHOW[item])
       };
     });
   }, []);
   const labelFormatOptions = (0, _react.useMemo)(() => {
-    return _constants2.CHART_LABEL_FORMATS.map(item => {
+    return _constants.CHART_LABEL_FORMATS.map(item => {
       return {
         value: item,
-        label: _intl.default.get(_constants2.CHART_LABEL_FORMAT_SHOW[item])
+        label: _intl.default.get(_constants.CHART_LABEL_FORMAT_SHOW[item])
       };
     });
   }, []);
@@ -122,7 +122,7 @@ const StyleSettings = _ref => {
   } = config;
   const table = tables.find(table => table._id === table_id);
   const column = (0, _utils.getColumnByKey)(groupby_column_key, table.columns);
-  const isGroupBySingleSelectColumn = (column === null || column === void 0 ? void 0 : column.type) === _constants.CellType.SINGLE_SELECT;
+  const isGroupBySingleSelectColumn = (column === null || column === void 0 ? void 0 : column.type) === _dtableUtils.CellType.SINGLE_SELECT;
   const defaultColorTheme = _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.DEFAULT;
   const selectedLabelOption = labelPositionOptions.find(item => item.value === label_position);
   const selectedLabelFormat = labelFormatOptions.find(item => item.value === label_format) || labelFormatOptions[0];

package/dist/settings/widgets/chart-type/index.js

@@ -42,10 +42,13 @@ const ChartType = _ref => {
     if (type === oldType) return;
 
     // reset these two configs to preventing new type getting into the wrong calculator
-    config.column_groupby_column_key = null;
-    config.column_groupby_multiple_numeric_column = null;
-    const convertedChart = generateChartConfig({
+    const newConfig = {
       ...config,
+      column_groupby_column_key: null,
+      column_groupby_multiple_numeric_column: null
+    };
+    const convertedChart = generateChartConfig({
+      ...newConfig,
       type
     });
     onChange && onChange(convertedChart);
@@ -60,11 +63,8 @@ const ChartType = _ref => {
     className: "sea-chart-parameter-item",
     id: "sea-chart-type-container"
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, null, _intl.default.get('Chart_type')), /*#__PURE__*/_react.default.createElement("div", {
-    className: "sea-chart-selected-type-container d-flex align-items-center",
-    style: {
-      backgroundColor: hideTypeToggle ? '#f5f5f5' : '#fff'
-    }
-  }, /*#__PURE__*/_react.default.createElement("span", null, _intl.default.get(_constants.CHART_TYPE_SHOW[type])), !hideTypeToggle && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-chart-selected-type-container d-flex align-items-center"
+  }, /*#__PURE__*/_react.default.createElement("span", null, _intl.default.get(_constants.CHART_TYPE_SHOW[type])), /*#__PURE__*/_react.default.createElement("div", {
     className: "sea-chart-type-icon-container",
     onClick: openTypesDialog
   }, /*#__PURE__*/_react.default.createElement(_components.Icon, {
@@ -74,7 +74,8 @@ const ChartType = _ref => {
     dataSources: dataSources,
     type: type,
     onToggle: closeTypesDialog,
-    onChange: onTypeChange
+    onChange: onTypeChange,
+    hideTypeToggle: hideTypeToggle
   }));
 };
 var _default = exports.default = ChartType;

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;