sea-chart 2.0.13 → 2.0.15

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

@@ -69,8 +69,7 @@ const TypesDialog = _ref => {
   }, [onChange, selectedType, onToggle]);
   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, 4);
+      const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram', 'Bar_chart', 'Line_chart'].includes(item.name));
       return newChartTypes;
     }
     return _constants.CHART_TYPES;

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

@@ -595,6 +595,7 @@ class ChartComponent extends _react.Component {
         groupColumn
       } = _ref;
       if (!this.chart) return;
+      data.forEach(item => item[legendName] = String(item[legendName]));
       const legendData = (0, _lodashEs.cloneDeep)(data);
       this.legendConfig = {
         legendRectWidth: 20,
@@ -876,7 +877,8 @@ class ChartComponent extends _react.Component {
       }
       return [[cx, cy - height / 2], [cx - size / 2, cy + height / 2], [cx + size / 2, cy + height / 2]];
     };
-    this.setColorMap = (data, chartColorTheme) => {
+    this.setColorMap = function (data, chartColorTheme) {
+      let groupName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'group_name';
       let currentIdx = 0;
       const defaultColors = _constants.CHART_STYLE_COLORS;
       let colors = defaultColors;
@@ -884,12 +886,12 @@ class ChartComponent extends _react.Component {
         colors = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors;
       }
       const colorMap = data.reduce((acc, cur) => {
-        if (cur.group_name && !acc[cur.group_name]) {
-          acc[cur.group_name] = colors[currentIdx++ % colors.length];
+        if (cur[groupName] && !acc[cur[groupName]]) {
+          acc[cur[groupName]] = colors[currentIdx++ % colors.length];
         }
         return acc;
       }, {});
-      this.colorMap = colorMap;
+      _this.colorMap = colorMap;
     };
     this.setSingleSelectColorMap = data => {
       const colorMap = {};
@@ -1250,6 +1252,7 @@ class ChartComponent extends _react.Component {
       } = this.chartBoundingClientRect;
       const viewBox = this.chart.node().getAttribute('viewBox').split(',');
       if (axis === 'yAxis') {
+        let isRoateText = false;
         let allHeight = 0;
         // Can't fit tilted text, Italic text
         for (let tick of allTicks) {
@@ -1265,6 +1268,7 @@ class ChartComponent extends _react.Component {
                 d3.select(tick).select('text').attr('transform', 'rotate(30)').style('text-anchor', 'end').attr('dy', '1em').attr('dx', '-0.5em');
               }
             });
+            isRoateText = true;
             break;
           }
         }
@@ -1273,7 +1277,7 @@ class ChartComponent extends _react.Component {
         const {
           width
         } = g.node().getBoundingClientRect();
-        if (width > insertPadding) {
+        if (isRoateText && width > insertPadding) {
           const viewWidth = viewBox[viewBox.length - 2];
           viewBox[0] = "-".concat(width - insertPadding);
           viewBox[viewBox.length - 2] = "".concat(Number(viewWidth) + (width - insertPadding));
@@ -1315,6 +1319,26 @@ class ChartComponent extends _react.Component {
         }
       }
     };
+    this.ticksAddName = g => {
+      if (g.selectAll('.tick')) {
+        const ticks = g.selectAll('.tick').nodes();
+        ticks.forEach(tick => {
+          var _d3$select$select;
+          const text = (_d3$select$select = d3.select(tick).select('text')) === null || _d3$select$select === void 0 ? void 0 : _d3$select$select.node();
+          d3.select(tick).select('line').attr('data-name', text.innerHTML);
+        });
+      }
+    };
+    this.getMinDistanceItem = (offsetX, allData) => {
+      // allData = [{x: number}]
+      const newAllData = allData.filter(item => Object.keys(item).length !== 0);
+      newAllData.forEach(item => {
+        item['distance'] = Math.abs(item.x - offsetX);
+      });
+      const minIndex = d3.minIndex(newAllData, d => d.distance);
+      const minItem = newAllData[minIndex];
+      return minItem;
+    };
     this.initLabelStroke(props === null || props === void 0 ? void 0 : props.globalTheme);
     this.chartBoundingClientRect = {};
   }

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

@@ -0,0 +1,397 @@
+"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,
+        column_groupby_column_key
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding,
+        marginRight
+      } = this.chartBoundingClientRect;
+      this.markLastForCompleteness(data);
+      const colors = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors;
+      this.setColorMap(data, chartColorTheme, 'groupby');
+      const newSeries = this.getGroupSeries(data);
+
+      // Y axis
+      const fy = d3.scaleBand().domain(newSeries.map(item => item[0])).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const y = d3.scaleBand().domain(new Set(data.map(d => d.groupby))).range([0, fy.bandwidth()]);
+      const yAxis = this.chart.append('g').call(d3.axisLeft(fy).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {
+        g.selectAll('.domain').attr('stroke', theme.XAxisColor);
+        g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
+        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 allSeries = this.getAllSeries(newSeries);
+      const niceEnd = d3.nice(0, d3.max(allSeries, d => d.sumValue), 5)[1];
+      const x = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min || 0, y_axis_max || niceEnd]).range([Number(yAxis.node().getAttribute('data-axisWidth')), chartWidth - insertPadding - marginRight]);
+      this.chart.append('g').attr('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('transform', _ref => {
+        let [name, dum] = _ref;
+        const offset = (fy.bandwidth() - dum.length * y.bandwidth()) / 2;
+        return "translate(0, ".concat(fy(name) + offset, ")");
+      }).attr('data-transform', _ref2 => {
+        let [name, dum] = _ref2;
+        const offset = (fy.bandwidth() - dum.length * y.bandwidth()) / 2;
+        return "".concat(fy(name) + offset);
+      }).selectAll().data(_ref3 => {
+        let [groupKey] = _ref3;
+        const curSeriesData = newSeries.find(item => item[0] === groupKey);
+        return curSeriesData[1];
+      }).join('g').attr('data-completedRate', _ref4 => {
+        let [_, d] = _ref4;
+        const restData = d.find(item => item.rawData.group_name === 'rest');
+        const completedRate = restData.rawData.completedRate;
+        if (completedRate === 'empty') return '';
+        return completedRate + '%';
+      }).selectAll().data(_ref5 => {
+        let [_, d] = _ref5;
+        return d;
+      }).join('rect').attr('class', 'rect').attr('x', d => x(d[0]) - Number(yAxis.node().getAttribute('data-axisWidth'))).attr('y', d => y.bandwidth() * d.serieIndex).attr('data-y', d => y.bandwidth() * d.serieIndex).attr('width', d => x(d[1]) - x(d[0])).attr('height', y.bandwidth()).attr('fill', d => {
+        const key = d.key;
+        const groupby = d.rawData.groupby;
+        if (key === 'rest') {
+          return '#bdbdbd';
+        }
+        if (column_groupby_column_key) {
+          return this.colorMap[groupby];
+        }
+        return colors[0];
+      }).attr('data-value', d => d.rawData.value).attr('data-groupName', d => d.rawData.slugId).attr('data-tooltipTitle', d => d.rawData.name).attr('data-tooltipName', d => d.key).attr('data-groupBy', d => d.rawData.groupby).call(g => {
+        // add rect borderRadius
+        const allGroup = this.getAllGroup(rectsWrapper);
+        allGroup.forEach(group => {
+          group.forEach(rects => {
+            const firstEl = rects[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 => {
+            group.forEach(rects => {
+              const firstEl = rects[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: 'groupby',
+        theme,
+        legendPosition: 'top-right',
+        data
+      });
+    };
+    this.handleAcitveAndInActiveState = (state, event) => {
+      const rectsWrapper = Array.from(event.currentTarget.parentNode.parentNode.parentNode.children);
+      const allGroup = [];
+      rectsWrapper.forEach(g => {
+        const groups = Array.from(g.children);
+        groups.forEach(groupRect => {
+          const rects = Array.from(groupRect.children);
+          rects.forEach(rect => {
+            if (rect.getAttribute('class') === 'rect') {
+              allGroup.push(rect.parentNode);
+            }
+          });
+        });
+      });
+      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('data-y'));
+        offsetX = offsetX + initX;
+        offsetY = offsetY + initY;
+      }
+      const groupby = event.currentTarget.getAttribute('data-groupBy');
+      const newTooltipData = {
+        title: event.currentTarget.getAttribute('data-tooltipTitle'),
+        items: [{
+          color: event.currentTarget.getAttribute('data-tooltipName') === 'rest' ? '#bdbdbd' : this.colorMap[groupby],
+          name: _intl.default.get(event.currentTarget.getAttribute('data-tooltipName')),
+          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('data-y'));
+        offsetX = offsetX + initX;
+        offsetY = offsetY + initY;
+      }
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    this.getGroupSeries = data => {
+      const groups = d3.groups(data, d => d.name);
+      groups.forEach((item, index) => {
+        const itemData = (0, _lodashEs.cloneDeep)(item[1]);
+
+        // get series
+        const series = d3.stack().keys(d3.union(itemData.map(d => d.group_name))).value((_ref6, key) => {
+          var _group$get;
+          let [_, group] = _ref6;
+          return ((_group$get = group.get(String(key))) === null || _group$get === void 0 ? void 0 : _group$get.value) || 0;
+        })(d3.index(itemData, d => d.groupby, d => d.group_name));
+        item[1] = d3.groups(itemData, d => d.groupby);
+        item[1].forEach((group, index) => {
+          const groupKey = group[0];
+          group[1] = [];
+          series.forEach(serie => {
+            const serieKey = serie.key;
+            serie.forEach(item => {
+              if (item.data[0] === groupKey) {
+                const newItem = {
+                  ...item,
+                  key: serieKey,
+                  serieIndex: index,
+                  rawData: item.data[1].get(serieKey)
+                };
+                group[1].push(newItem);
+              }
+            });
+          });
+          let sumValue = 0;
+          group[1].forEach(g => {
+            sumValue = sumValue + g[1];
+          });
+          group.sumValue = sumValue;
+        });
+      });
+      return groups;
+    };
+    this.getAllSeries = newSeries => {
+      const allSeries = [];
+      newSeries.forEach(series => {
+        allSeries.push(...series[1]);
+      });
+      return allSeries;
+    };
+    this.getAllGroup = rectsWrapper => {
+      const allGroup = [];
+      Array.from(rectsWrapper.node().children).forEach(item => {
+        const group = [];
+        Array.from(item.children).forEach(jtem => {
+          const childGroup = [];
+          Array.from(jtem.children).forEach(child => {
+            if (Number(child.getAttribute('width')) !== 0) {
+              childGroup.push(child);
+            }
+          });
+          childGroup.reverse();
+          group.push(childGroup);
+        });
+        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('class', rect.getAttribute('class')).attr('x', rect.getAttribute('x')).attr('y', rect.getAttribute('y')).attr('data-y', rect.parentNode.parentNode.getAttribute('data-transform')).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-groupBy', rect.getAttribute('data-groupBy')).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/index.js

@@ -20,6 +20,9 @@ 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 _completenessGroup = _interopRequireDefault(require("./completeness-group"));
+var _line = _interopRequireDefault(require("./line"));
+var _lineGroup = _interopRequireDefault(require("./line-group"));
 var _basicNumberCard = _interopRequireDefault(require("./basic-number-card"));
 var _trend = _interopRequireDefault(require("./trend"));
 var _tableElement = _interopRequireDefault(require("./table-element"));
@@ -188,6 +191,24 @@ const Wrapper = _ref => {
             canvasStyle: canvasStyle
           }));
         }
+      case _constants.CHART_TYPE.COMPLETENESS_GROUP:
+        {
+          return /*#__PURE__*/_react.default.createElement(_completenessGroup.default, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
+      case _constants.CHART_TYPE.LINE:
+        {
+          return /*#__PURE__*/_react.default.createElement(_line.default, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
+      case _constants.CHART_TYPE.LINE_GROUP:
+        {
+          return /*#__PURE__*/_react.default.createElement(_lineGroup.default, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
       case _constants.CHART_TYPE.BASIC_NUMBER_CARD:
         {
           return /*#__PURE__*/_react.default.createElement(_basicNumberCard.default, Object.assign({}, baseProps, {

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

@@ -0,0 +1,403 @@
+"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 _dtableUtils = require("dtable-utils");
+var _constants = require("../../constants");
+var _colorRules = require("../../constants/color-rules");
+var _utils = require("../../utils");
+var _intl = _interopRequireDefault(require("../../intl"));
+var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
+var _chartComponent = _interopRequireDefault(require("./chart-component"));
+class LineGroup 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 {
+        y_axis_show_label,
+        x_axis_show_label,
+        y_axis_show_value
+      } = chart.config;
+      const initConfig = {
+        insertPadding: 30,
+        marginLeft: y_axis_show_label ? 20 : 0,
+        marginBottom: x_axis_show_label ? 20 : 0,
+        marginTop: y_axis_show_value ? 15 : 0
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+    };
+    this.drawChart = () => {
+      const {
+        customRender
+      } = this.props;
+      let {
+        result: data
+      } = this.props;
+      data = _utils.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);
+      (0, _utils.isFunction)(customRender) && customRender(this.chart);
+    };
+    this.showTooltip = (event, data, rectsWrapper) => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      const {
+        title,
+        items
+      } = this.getTooltipItems(data, rectsWrapper);
+      const newTooltipData = {
+        title,
+        items
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.moveTooltip = (event, data, rectsWrapper) => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      const {
+        title,
+        items
+      } = this.getTooltipItems(data, rectsWrapper);
+      const newTooltipData = {
+        title,
+        items
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    this.getTooltipItems = (data, rectsWrapper) => {
+      var _rectsWrapper$selectA;
+      const title = !data.name && typeof data.name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : data.name;
+      const circleList = (_rectsWrapper$selectA = rectsWrapper.selectAll('circle')) === null || _rectsWrapper$selectA === void 0 ? void 0 : _rectsWrapper$selectA.nodes();
+      const items = circleList.filter(circle => circle.getAttribute('data-name') === title).map(circle => {
+        return {
+          color: this.colorMap[circle.getAttribute('data-groupName')],
+          name: circle.getAttribute('data-groupName'),
+          value: circle.getAttribute('data-text')
+        };
+      });
+      return {
+        title,
+        items
+      };
+    };
+    this.draw = data => {
+      const {
+        chart,
+        globalTheme,
+        columnGroupbyColumn,
+        chartColorTheme
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const {
+        display_goal_line,
+        goal_value,
+        goal_label
+      } = chart.style_config || {};
+      const {
+        y_axis_show_value,
+        label_font_size,
+        line_type,
+        y_axis_max,
+        y_axis_min,
+        y_axis_auto_range,
+        color_theme
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding,
+        marginTop
+      } = this.chartBoundingClientRect;
+      const useSingleSelectColumnColor = (columnGroupbyColumn === null || columnGroupbyColumn === void 0 ? void 0 : columnGroupbyColumn.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);
+
+      // Y axis
+      const niceEnd = d3.nice(0, d3.max(data, d => d.value), 5)[1];
+      const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min || 0, y_axis_max || niceEnd]).range([chartHeight - insertPadding, insertPadding + marginTop]);
+      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => this.drawYaxis(g, theme));
+
+      // X axis
+      const xDomain = data.map(item => item.name);
+      const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
+      this.ticksWrapper = this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+        this.ticksAddName(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);
+        this.checkTickOverlap(g);
+      });
+
+      // Line
+      const rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
+      const circleDatas = [];
+      const groupData = d3.groups(data, d => d.group_name);
+      groupData.forEach(item => {
+        const circleData = xDomain.map(() => ({}));
+        const line = d3.line().x((d, index) => {
+          const xVal = x(d.name) + x.bandwidth() / 2;
+          circleData[index]['x'] = xVal;
+          circleData[index]['name'] = d.name;
+          return xVal;
+        }).y((d, index) => {
+          const yVal = y(d.value);
+          circleData[index]['y'] = yVal;
+          circleData[index]['value'] = d.value;
+          return yVal;
+        }).curve(line_type === _constants.CHART_LINE_TYPES[1] ? d3.curveBumpX : d3.curveLinear);
+        const group_name = item[0];
+        const data = item[1];
+        rectsWrapper.append('path').attr('fill', 'none').attr('stroke', this.colorMap[group_name]).attr('stroke-width', 2).attr('d', () => line(data));
+        circleDatas.push({
+          group_name,
+          circleData
+        });
+      });
+
+      // circle
+      circleDatas.forEach(_ref => {
+        let {
+          group_name,
+          circleData
+        } = _ref;
+        circleData.forEach(item => {
+          if (Object.keys(item).length > 0) {
+            rectsWrapper.append('circle').attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', this.colorMap[group_name]).attr('opacity', y_axis_show_value ? 1 : 0).attr('data-groupName', group_name).attr('data-text', item.value).attr('data-name', item.name).call(g => {
+              // circle label
+              if (y_axis_show_value) {
+                const curCircleEl = g.node();
+                rectsWrapper.append('text').attr('fill', theme.labelColor).attr('font-size', _utils.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('click', (event, data) => {
+              this.props.toggleRecords(data);
+            });
+          }
+        });
+      });
+      this.chart.on('mouseover', event => {
+        this.updateCircleAndTickStyle({
+          event,
+          state: 'zoomIn',
+          circleDatas,
+          rectsWrapper,
+          eventState: 'over'
+        });
+      }).on('mousemove', event => {
+        this.updateCircleAndTickStyle({
+          event,
+          state: 'zoomIn',
+          circleDatas,
+          rectsWrapper,
+          eventState: 'move'
+        });
+      }).on('mouseleave', event => {
+        this.updateCircleAndTickStyle({
+          event,
+          state: 'zoomOut',
+          circleDatas,
+          rectsWrapper,
+          eventState: 'leave'
+        });
+      });
+      if (display_goal_line && goal_label && goal_value) {
+        this.setDispalyGoalLine(goal_label, goal_value, insertPadding, y);
+      }
+      this.setLegend({
+        legendName: 'group_name',
+        theme,
+        legendPosition: 'top-right',
+        data
+      });
+    };
+    this.updateCircleAndTickStyle = _ref2 => {
+      var _rectsWrapper$selectA2, _this$ticksWrapper$se;
+      let {
+        event,
+        state,
+        circleDatas,
+        rectsWrapper,
+        eventState
+      } = _ref2;
+      const {
+        y_axis_show_value
+      } = this.props.chart.config;
+      const {
+        height: chartHeight,
+        insertPadding,
+        marginTop
+      } = this.chartBoundingClientRect;
+      const {
+        offsetX
+      } = event;
+      const minDistanceArr = [];
+      circleDatas.forEach(_ref3 => {
+        let {
+          group_name,
+          circleData
+        } = _ref3;
+        const item = this.getMinDistanceItem(offsetX, circleData);
+        minDistanceArr.push(item);
+      });
+      const minIndex = d3.minIndex(minDistanceArr, d => d.distance);
+      const minDistanceItem = minDistanceArr[minIndex];
+
+      // circle
+      const circleList = (_rectsWrapper$selectA2 = rectsWrapper.selectAll('circle')) === null || _rectsWrapper$selectA2 === void 0 ? void 0 : _rectsWrapper$selectA2.nodes();
+      if (circleList.length !== 0) {
+        if (state === 'zoomIn') {
+          circleList.forEach(circle => {
+            const name = circle.getAttribute('data-name');
+            if (name === minDistanceItem.name) {
+              d3.select(circle).attr('opacity', 1);
+              d3.select(circle).attr('r', 5);
+            } else {
+              d3.select(circle).attr('opacity', 0);
+              d3.select(circle).attr('r', 3);
+            }
+          });
+        } else {
+          circleList.forEach(circle => {
+            !y_axis_show_value && d3.select(circle).attr('opacity', 0);
+            d3.select(circle).attr('r', 3);
+          });
+        }
+      }
+
+      // tick
+      const ticks = (_this$ticksWrapper$se = this.ticksWrapper.selectAll('.tick line')) === null || _this$ticksWrapper$se === void 0 ? void 0 : _this$ticksWrapper$se.nodes();
+      if (ticks.length !== 0) {
+        if (state === 'zoomIn') {
+          ticks.forEach(tick => {
+            const name = tick.getAttribute('data-name');
+            if (name === minDistanceItem.name) {
+              d3.select(tick).attr('y2', -(chartHeight - insertPadding * 2 - marginTop));
+            } else {
+              d3.select(tick).attr('y2', 0);
+            }
+          });
+        } else {
+          ticks.forEach(tick => {
+            d3.select(tick).attr('y2', 0);
+          });
+        }
+      }
+
+      // tooltip
+      if (eventState === 'over') {
+        this.showTooltip(event, minDistanceItem, rectsWrapper);
+      }
+      if (eventState === 'move') {
+        this.moveTooltip(event, minDistanceItem, rectsWrapper);
+      }
+      if (eventState === 'leave') {
+        this.hiddenTooltip();
+      }
+    };
+    this.chart = null;
+    this.state = {
+      tooltipData: null,
+      toolTipPosition: null
+    };
+  }
+  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.createChart();
+      this.drawChart();
+    }
+  }
+  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.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      })
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
+  }
+}
+LineGroup.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 = LineGroup;

package/dist/view/wrapper/line.js

@@ -0,0 +1,371 @@
+"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 Line 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 {
+        y_axis_show_label,
+        x_axis_show_label,
+        y_axis_show_value
+      } = chart.config;
+      const initConfig = {
+        insertPadding: 30,
+        marginLeft: y_axis_show_label ? 20 : 0,
+        marginBottom: x_axis_show_label ? 20 : 0,
+        marginTop: y_axis_show_value ? 15 : 0
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+    };
+    this.drawChart = () => {
+      const {
+        customRender
+      } = this.props;
+      let {
+        result: data
+      } = this.props;
+      data = _utils.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);
+      (0, _utils.isFunction)(customRender) && customRender(this.chart);
+    };
+    this.showTooltip = (event, data, title) => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      const newTooltipData = {
+        title: title,
+        items: [{
+          color: this.getChartBarColor(),
+          name: data.name,
+          value: data.value
+        }]
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.moveTooltip = (event, data, title) => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      const newTooltipData = {
+        title: title,
+        items: [{
+          color: this.getChartBarColor(),
+          name: data.name,
+          value: data.value
+        }]
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    this.draw = data => {
+      const {
+        chart,
+        globalTheme,
+        tables
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const {
+        display_goal_line,
+        goal_value,
+        goal_label
+      } = chart.style_config || {};
+      const {
+        table_id,
+        y_axis_column_key,
+        y_axis_summary_column_key,
+        y_axis_show_value,
+        label_font_size,
+        line_type,
+        y_axis_summary_type,
+        y_axis_max,
+        y_axis_min,
+        y_axis_auto_range
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding,
+        marginTop
+      } = this.chartBoundingClientRect;
+      const chartBarColor = this.getChartBarColor();
+      const tooltipTitle = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
+
+      // Y axis
+      const niceEnd = d3.nice(0, d3.max(data, d => d.value), 5)[1];
+      const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min || 0, y_axis_max || niceEnd]).range([chartHeight - insertPadding, insertPadding + marginTop]);
+      this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => this.drawYaxis(g, theme));
+
+      // X axis
+      const xDomain = data.map(item => item.name);
+      const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
+      this.ticksWrapper = this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+        this.ticksAddName(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);
+        this.checkTickOverlap(g);
+      });
+
+      // Line
+      const circleData = xDomain.map(() => ({}));
+      const line = d3.line().x((d, index) => {
+        const xVal = x(d.name) + x.bandwidth() / 2;
+        circleData[index]['x'] = xVal;
+        circleData[index]['name'] = d.name;
+        return xVal;
+      }).y((d, index) => {
+        const yVal = y(d.value);
+        circleData[index]['y'] = yVal;
+        circleData[index]['value'] = d.value;
+        return yVal;
+      }).curve(line_type === _constants.CHART_LINE_TYPES[1] ? d3.curveBumpX : d3.curveLinear);
+      const rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
+      rectsWrapper.append('path').attr('fill', 'none').attr('stroke', chartBarColor).attr('stroke-width', 2).attr('d', () => line(data));
+
+      // circle
+      circleData.forEach(item => {
+        rectsWrapper.append('circle').attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', chartBarColor).attr('opacity', y_axis_show_value ? 1 : 0).attr('data-text', item.value).attr('data-name', item.name).call(g => {
+          // circle label
+          if (y_axis_show_value) {
+            const curCircleEl = g.node();
+            rectsWrapper.append('text').attr('fill', theme.labelColor).attr('font-size', _utils.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('click', (event, data) => {
+          this.props.toggleRecords(data);
+        });
+      });
+      this.chart.on('mouseover', event => {
+        this.updateCircleAndTickStyle({
+          event,
+          state: 'zoomIn',
+          circleData,
+          rectsWrapper,
+          eventState: 'over',
+          tooltipTitle
+        });
+      }).on('mousemove', event => {
+        this.updateCircleAndTickStyle({
+          event,
+          state: 'zoomIn',
+          circleData,
+          rectsWrapper,
+          eventState: 'move',
+          tooltipTitle
+        });
+      }).on('mouseleave', event => {
+        this.updateCircleAndTickStyle({
+          event,
+          state: 'zoomOut',
+          circleData,
+          rectsWrapper,
+          eventState: 'leave',
+          tooltipTitle
+        });
+      });
+      if (display_goal_line && goal_label && goal_value) {
+        this.setDispalyGoalLine(goal_label, goal_value, insertPadding, y);
+      }
+    };
+    this.updateCircleAndTickStyle = _ref => {
+      var _rectsWrapper$selectA, _this$ticksWrapper$se;
+      let {
+        event,
+        state,
+        circleData,
+        rectsWrapper,
+        eventState,
+        tooltipTitle
+      } = _ref;
+      const {
+        y_axis_show_value
+      } = this.props.chart.config;
+      const {
+        height: chartHeight,
+        insertPadding,
+        marginTop
+      } = this.chartBoundingClientRect;
+      const {
+        offsetX
+      } = event;
+      const minDistanceItem = this.getMinDistanceItem(offsetX, circleData);
+      const circleList = (_rectsWrapper$selectA = rectsWrapper.selectAll('circle')) === null || _rectsWrapper$selectA === void 0 ? void 0 : _rectsWrapper$selectA.nodes();
+      if (circleList.length !== 0) {
+        if (state === 'zoomIn') {
+          circleList.forEach(circle => {
+            const name = circle.getAttribute('data-name');
+            if (name === minDistanceItem.name) {
+              d3.select(circle).attr('opacity', 1);
+              d3.select(circle).attr('r', 5);
+            } else {
+              d3.select(circle).attr('opacity', 0);
+              d3.select(circle).attr('r', 3);
+            }
+          });
+        } else {
+          circleList.forEach(circle => {
+            !y_axis_show_value && d3.select(circle).attr('opacity', 0);
+            d3.select(circle).attr('r', 3);
+          });
+        }
+      }
+      const ticks = (_this$ticksWrapper$se = this.ticksWrapper.selectAll('.tick line')) === null || _this$ticksWrapper$se === void 0 ? void 0 : _this$ticksWrapper$se.nodes();
+      if (ticks.length !== 0) {
+        if (state === 'zoomIn') {
+          ticks.forEach(tick => {
+            const name = tick.getAttribute('data-name');
+            if (name === minDistanceItem.name) {
+              d3.select(tick).attr('y2', -(chartHeight - insertPadding * 2 - marginTop));
+            } else {
+              d3.select(tick).attr('y2', 0);
+            }
+          });
+        } else {
+          ticks.forEach(tick => {
+            d3.select(tick).attr('y2', 0);
+          });
+        }
+      }
+
+      // tooltip
+      if (eventState === 'over') {
+        this.showTooltip(event, minDistanceItem, tooltipTitle);
+      }
+      if (eventState === 'move') {
+        this.moveTooltip(event, minDistanceItem, tooltipTitle);
+      }
+      if (eventState === 'leave') {
+        this.hiddenTooltip();
+      }
+    };
+    this.getChartBarColor = () => {
+      const {
+        chart,
+        chartColorTheme
+      } = this.props;
+      const {
+        y_axis_label_color,
+        color_option
+      } = chart.config;
+      let chartBarColor = _constants.CHART_STYLE_COLORS[0];
+      if (chartColorTheme) {
+        chartBarColor = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors[0];
+      }
+      if (color_option === _constants.TYPE_COLOR_USING.USE_SPECIFIC_COLORS && y_axis_label_color) {
+        chartBarColor = y_axis_label_color;
+      }
+      return chartBarColor;
+    };
+    this.chart = null;
+    this.state = {
+      tooltipData: null,
+      toolTipPosition: null
+    };
+  }
+  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.createChart();
+      this.drawChart();
+    }
+  }
+  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.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      })
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
+  }
+}
+Line.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 = Line;

package/package.json

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