sea-chart 2.0.19 → 2.0.21

package/dist/components/tooltip/index.js

@@ -19,7 +19,8 @@ const ToolTip = _ref => {
   });
   const {
     title,
-    items
+    items,
+    titleMarkColor
   } = tooltipData || {
     title: '',
     items: []
@@ -71,13 +72,22 @@ const ToolTip = _ref => {
     }
   }, title && /*#__PURE__*/_react.default.createElement("div", {
     className: "sea-chart-d3-tooltip-title"
-  }, title), /*#__PURE__*/_react.default.createElement("ul", {
+  }, titleMarkColor && /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      width: '8px',
+      height: '8px',
+      borderRadius: '50%',
+      backgroundColor: titleMarkColor,
+      display: 'inline-block',
+      marginRight: '12px'
+    }
+  }), 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", {
+    }, item.color && /*#__PURE__*/_react.default.createElement("span", {
       className: "sea-chart-d3-tooltip-marker",
       style: {
         backgroundColor: item.color

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

@@ -69,7 +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', 'Line_chart', 'Area', 'Pie_chart'].includes(item.name));
+      const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram', 'Bar_chart', 'Line_chart', 'Area', 'Pie_chart', 'Scatter_chart'].includes(item.name));
       return newChartTypes;
     }
     return _constants.CHART_TYPES;

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

@@ -61,7 +61,7 @@ class ChartComponent extends _react.Component {
       } = initConfig;
       const width = containerWidth - marginLeft;
       const height = containerHeight - marginBottom;
-      _this.chart = d3.create('svg').attr('id', id).attr('class', "svg-wrapper-".concat(id)).attr('width', width).attr('height', height).attr('viewBox', [0, 0, width, height]);
+      _this.chart = d3.create('svg').attr('id', id).attr('width', width).attr('height', height).attr('viewBox', [0, 0, width, height]);
       _this.container.appendChild(_this.chart.node());
       _this.chartBoundingClientRect = {
         ...JSON.parse(JSON.stringify(_this.chart.node().getBoundingClientRect())),
@@ -585,7 +585,6 @@ class ChartComponent extends _react.Component {
     };
     // set legend
     this.setLegend = _ref => {
-      var _this$chart$node;
       let {
         legendName,
         theme = _constants.CHART_THEME_COLOR['light'],
@@ -615,11 +614,13 @@ class ChartComponent extends _react.Component {
       const legendData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), legendName, groupColumn, chart);
       const {
         width: chartWidth,
+        height: chartHeight,
         insertPadding,
-        rightLegendSpace
+        rightLegendSpace,
+        bottomLegendSpace
       } = this.chartBoundingClientRect;
       const groupsData = this.getLegendDataGroups(legendData);
-      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));
+      const legendWrapper = this.chart.append('g').attr('class', 'legend-wrapper');
 
       // Render first group legend
       this.renderLegend({
@@ -689,7 +690,8 @@ class ChartComponent extends _react.Component {
             } = g.node().parentNode.getBoundingClientRect();
             groupTranslateY = groupTranslateY + height + legendItemMargin;
           }
-          g.attr('transform', "translate(".concat(groupTranslateX, ", ").concat(groupTranslateY, ")"));
+          const curTranslateY = bottomLegendSpace ? chartHeight - bottomLegendSpace : groupTranslateY; // pageNavigator offset bottom
+          g.attr('transform', "translate(".concat(groupTranslateX, ", ").concat(curTranslateY, ")"));
         });
       }
     };
@@ -913,15 +915,20 @@ class ChartComponent extends _react.Component {
       }
     };
     this.setLegendItemOffset = (legendItems, end) => {
+      const {
+        height: chartHeight,
+        bottomLegendSpace
+      } = this.chartBoundingClientRect;
       const endItem = legendItems[legendItems.length - 1];
       const endTranslateX = Number(endItem.getAttribute('data-translateX'));
       const {
         width: endWidth
       } = endItem.getBoundingClientRect();
       const offset = end - (endTranslateX + endWidth);
+      const curTranslateY = bottomLegendSpace ? chartHeight - bottomLegendSpace : 0; // legend offset bottom
       legendItems.forEach(legendItem => {
         const curTranslateX = Number(legendItem.getAttribute('data-translateX')) + offset;
-        d3.select(legendItem).attr('transform', "translate(".concat(curTranslateX, ",0)")).attr('data-translateX', curTranslateX);
+        d3.select(legendItem).attr('transform', "translate(".concat(curTranslateX, ", ").concat(curTranslateY, ")")).attr('data-translateX', curTranslateX);
         d3.select(legendItem).attr('opacity', 1);
       });
     };
@@ -1125,11 +1132,11 @@ 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$node2;
+      var _this$chart$node;
       const {
         width: chartWidth
       } = this.chartBoundingClientRect;
-      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));
+      const annotationWrapper = this.chart.append('g').attr('class', "annotation-wrapper-".concat((_this$chart$node = this.chart.node()) === null || _this$chart$node === void 0 ? void 0 : _this$chart$node.id));
       annotationWrapper.append('line').attr('stroke', '#aaa').attr('x1', insertPadding).attr('y1', yScale(goal_value)).attr('x2', chartWidth - insertPadding).attr('y2', yScale(goal_value)).attr('stroke-dasharray', '8,3').call(g => {
         annotationWrapper.append('text').attr('x', chartWidth - insertPadding - 30).attr('y', yScale(goal_value) - 10).attr('fill', '#666').text(goal_label);
       });
@@ -1197,12 +1204,15 @@ class ChartComponent extends _react.Component {
         g.attr('transform', "translate(".concat(translateX, ", ").concat(translateY, ")"));
       });
     };
-    this.setActiveAndInActiveState = (state, allGroup, curGroupName) => {
+    this.setActiveAndInActiveState = (state, allGroup, curGroupName, chartType) => {
       if (state === 'active') {
         allGroup.forEach(g => {
           const rects = Array.from(g.children);
           rects.forEach(item => {
-            d3.select(item).transition().duration(200).attr('opacity', 1);
+            d3.select(item).transition().duration(500).attr('opacity', 1);
+            if ([_constants.CHART_TYPE.PIE, _constants.CHART_TYPE.RING].includes(chartType)) {
+              d3.select(item).attr('stroke-width', 2);
+            }
           });
         });
       }
@@ -1211,7 +1221,11 @@ class ChartComponent extends _react.Component {
           const rects = Array.from(g.children);
           rects.forEach(item => {
             if (item.getAttribute('data-groupName') !== curGroupName) {
-              d3.select(item).transition().duration(200).attr('opacity', 0.3);
+              d3.selectAll([item]).transition().duration(500).attr('opacity', 0.3);
+            } else {
+              if ([_constants.CHART_TYPE.PIE, _constants.CHART_TYPE.RING].includes(chartType)) {
+                d3.select(item).attr('stroke-width', 0.5);
+              }
             }
           });
         });
@@ -1410,20 +1424,22 @@ class ChartComponent extends _react.Component {
       const minItem = newAllData[minIndex];
       return minItem;
     };
-    this.clearOldVerticalAnnotation = rectsWrapper => {
-      const oldAnnotationWrapper = rectsWrapper.selectAll('.vertical-annotation-wrapper');
+    this.clearOldVerticalAnnotation = contentWrapper => {
+      const oldAnnotationWrapper = contentWrapper.selectAll('.vertical-annotation-wrapper');
       oldAnnotationWrapper.node() && oldAnnotationWrapper.node().remove();
     };
-    this.addVerticalAnnotation = (rectsWrapper, minDistanceItem, theme) => {
+    this.addVerticalAnnotation = (contentWrapper, minDistanceItem, theme) => {
       const {
         height: chartHeight,
         insertPadding,
         marginTop
       } = this.chartBoundingClientRect;
       const {
-        x
+        x,
+        y
       } = minDistanceItem;
-      rectsWrapper.append('g').attr('class', 'vertical-annotation-wrapper').append('line').attr('x1', x).attr('y1', insertPadding + marginTop).attr('x2', x).attr('y2', chartHeight - insertPadding).attr('stroke', theme.XAxisColor);
+      const annotationWrapper = contentWrapper.insert('g', ':first-child').attr('class', 'vertical-annotation-wrapper');
+      annotationWrapper.append('line').attr('x1', x).attr('y1', insertPadding + marginTop).attr('x2', x).attr('y2', chartHeight - insertPadding).attr('stroke', theme.XAxisColor);
     };
     this.initLabelStroke(props === null || props === void 0 ? void 0 : props.globalTheme);
     this.chartBoundingClientRect = {};

package/dist/view/wrapper/index.js

@@ -27,6 +27,7 @@ var _area = _interopRequireDefault(require("./area"));
 var _areaGroup = _interopRequireDefault(require("./area-group"));
 var _pie = _interopRequireDefault(require("./pie"));
 var _ring = _interopRequireDefault(require("./ring"));
+var _scatter = _interopRequireDefault(require("./scatter"));
 var _basicNumberCard = _interopRequireDefault(require("./basic-number-card"));
 var _trend = _interopRequireDefault(require("./trend"));
 var _tableElement = _interopRequireDefault(require("./table-element"));
@@ -237,6 +238,12 @@ const Wrapper = _ref => {
             canvasStyle: canvasStyle
           }));
         }
+      case _constants.CHART_TYPE.SCATTER:
+        {
+          return /*#__PURE__*/_react.default.createElement(_scatter.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

@@ -56,7 +56,7 @@ class LineGroup extends _chartComponent.default {
       this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
       (0, _utils.isFunction)(customRender) && customRender(this.chart);
     };
-    this.showTooltip = (event, data, rectsWrapper) => {
+    this.showTooltip = (event, data, contentWrapper) => {
       const {
         offsetX,
         offsetY
@@ -64,7 +64,7 @@ class LineGroup extends _chartComponent.default {
       const {
         title,
         items
-      } = this.getTooltipItems(data, rectsWrapper);
+      } = this.getTooltipItems(data, contentWrapper);
       const newTooltipData = {
         title,
         items
@@ -79,7 +79,7 @@ class LineGroup extends _chartComponent.default {
         }
       });
     };
-    this.moveTooltip = (event, data, rectsWrapper) => {
+    this.moveTooltip = (event, data, contentWrapper) => {
       const {
         offsetX,
         offsetY
@@ -87,7 +87,7 @@ class LineGroup extends _chartComponent.default {
       const {
         title,
         items
-      } = this.getTooltipItems(data, rectsWrapper);
+      } = this.getTooltipItems(data, contentWrapper);
       const newTooltipData = {
         title,
         items
@@ -107,8 +107,8 @@ class LineGroup extends _chartComponent.default {
         toolTipPosition: null
       });
     };
-    this.getTooltipItems = (data, rectsWrapper) => {
-      var _rectsWrapper$selectA;
+    this.getTooltipItems = (data, contentWrapper) => {
+      var _contentWrapper$selec;
       const {
         summaryColumn,
         chart
@@ -117,7 +117,7 @@ class LineGroup extends _chartComponent.default {
         y_axis_summary_method
       } = chart.config;
       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 circleList = (_contentWrapper$selec = contentWrapper.selectAll('circle')) === null || _contentWrapper$selec === void 0 ? void 0 : _contentWrapper$selec.nodes();
       const items = circleList.filter(circle => circle.getAttribute('data-name') === title).map(circle => {
         return {
           color: this.colorMap[circle.getAttribute('data-groupName')],
@@ -166,12 +166,12 @@ class LineGroup extends _chartComponent.default {
       // 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 => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
+      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).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.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').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);
@@ -181,7 +181,7 @@ class LineGroup extends _chartComponent.default {
       });
 
       // Line
-      const rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper');
       const circleDatas = [];
       const groupData = d3.groups(data, d => d.group_name);
       groupData.forEach(item => {
@@ -199,7 +199,7 @@ class LineGroup extends _chartComponent.default {
         }).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));
+        contentWrapper.append('path').attr('fill', 'none').attr('stroke', this.colorMap[group_name]).attr('stroke-width', 2).attr('d', () => line(data));
         circleDatas.push({
           group_name,
           circleData
@@ -214,11 +214,11 @@ class LineGroup extends _chartComponent.default {
         } = _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 => {
+            contentWrapper.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('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(_utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(curCircleEl.getAttribute('data-text')), y_axis_summary_method)).call(g => {
+                contentWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(_utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(curCircleEl.getAttribute('data-text')), y_axis_summary_method)).call(g => {
                   const {
                     width
                   } = g.node().getBoundingClientRect();
@@ -238,7 +238,7 @@ class LineGroup extends _chartComponent.default {
           event,
           state: 'zoomIn',
           circleDatas,
-          rectsWrapper,
+          contentWrapper,
           eventState: 'over'
         });
       }).on('mousemove', event => {
@@ -246,7 +246,7 @@ class LineGroup extends _chartComponent.default {
           event,
           state: 'zoomIn',
           circleDatas,
-          rectsWrapper,
+          contentWrapper,
           eventState: 'move'
         });
       }).on('mouseleave', event => {
@@ -254,7 +254,7 @@ class LineGroup extends _chartComponent.default {
           event,
           state: 'zoomOut',
           circleDatas,
-          rectsWrapper,
+          contentWrapper,
           eventState: 'leave'
         });
       });
@@ -271,12 +271,12 @@ class LineGroup extends _chartComponent.default {
       });
     };
     this.updateCircleAndTickStyle = _ref2 => {
-      var _rectsWrapper$selectA2;
+      var _contentWrapper$selec2;
       let {
         event,
         state,
         circleDatas,
-        rectsWrapper,
+        contentWrapper,
         eventState
       } = _ref2;
       const {
@@ -300,7 +300,7 @@ class LineGroup extends _chartComponent.default {
       });
       const minIndex = d3.minIndex(minDistanceArr, d => d.distance);
       const minDistanceItem = minDistanceArr[minIndex];
-      const circleList = (_rectsWrapper$selectA2 = rectsWrapper.selectAll('circle')) === null || _rectsWrapper$selectA2 === void 0 ? void 0 : _rectsWrapper$selectA2.nodes();
+      const circleList = (_contentWrapper$selec2 = contentWrapper.selectAll('circle')) === null || _contentWrapper$selec2 === void 0 ? void 0 : _contentWrapper$selec2.nodes();
       if (state === 'zoomIn') {
         // circle
         circleList && circleList.forEach(circle => {
@@ -309,14 +309,14 @@ class LineGroup extends _chartComponent.default {
             d3.select(circle).attr('opacity', 1);
             d3.select(circle).attr('r', 5);
           } else {
-            d3.select(circle).attr('opacity', 0);
+            !y_axis_show_value && d3.select(circle).attr('opacity', 0);
             d3.select(circle).attr('r', 3);
           }
         });
         // line
         const theme = _constants.CHART_THEME_COLOR[globalTheme];
-        this.clearOldVerticalAnnotation(rectsWrapper);
-        this.addVerticalAnnotation(rectsWrapper, minDistanceItem, theme);
+        this.clearOldVerticalAnnotation(contentWrapper);
+        this.addVerticalAnnotation(contentWrapper, minDistanceItem, theme);
       } else {
         // circle
         circleList && circleList.forEach(circle => {
@@ -324,15 +324,15 @@ class LineGroup extends _chartComponent.default {
           d3.select(circle).attr('r', 3);
         });
         // line
-        this.clearOldVerticalAnnotation(rectsWrapper);
+        this.clearOldVerticalAnnotation(contentWrapper);
       }
 
       // tooltip
       if (eventState === 'over') {
-        this.showTooltip(event, minDistanceItem, rectsWrapper);
+        this.showTooltip(event, minDistanceItem, contentWrapper);
       }
       if (eventState === 'move') {
-        this.moveTooltip(event, minDistanceItem, rectsWrapper);
+        this.moveTooltip(event, minDistanceItem, contentWrapper);
       }
       if (eventState === 'leave') {
         this.hiddenTooltip();

package/dist/view/wrapper/line.js

@@ -157,12 +157,12 @@ class Line extends _chartComponent.default {
       // 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 => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
+      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).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.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').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);
@@ -184,16 +184,16 @@ class Line extends _chartComponent.default {
         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));
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper');
+      contentWrapper.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 => {
+        contentWrapper.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('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(_utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(curCircleEl.getAttribute('data-text')), y_axis_summary_method)).call(g => {
+            contentWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(_utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(curCircleEl.getAttribute('data-text')), y_axis_summary_method)).call(g => {
               const {
                 width
               } = g.node().getBoundingClientRect();
@@ -211,7 +211,7 @@ class Line extends _chartComponent.default {
           event,
           state: 'zoomIn',
           circleData,
-          rectsWrapper,
+          contentWrapper,
           eventState: 'over',
           tooltipTitle
         });
@@ -220,7 +220,7 @@ class Line extends _chartComponent.default {
           event,
           state: 'zoomIn',
           circleData,
-          rectsWrapper,
+          contentWrapper,
           eventState: 'move',
           tooltipTitle
         });
@@ -229,7 +229,7 @@ class Line extends _chartComponent.default {
           event,
           state: 'zoomOut',
           circleData,
-          rectsWrapper,
+          contentWrapper,
           eventState: 'leave',
           tooltipTitle
         });
@@ -239,12 +239,12 @@ class Line extends _chartComponent.default {
       }
     };
     this.updateCircleAndTickStyle = _ref => {
-      var _rectsWrapper$selectA;
+      var _contentWrapper$selec;
       let {
         event,
         state,
         circleData,
-        rectsWrapper,
+        contentWrapper,
         eventState,
         tooltipTitle
       } = _ref;
@@ -259,7 +259,7 @@ class Line extends _chartComponent.default {
         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();
+      const circleList = (_contentWrapper$selec = contentWrapper.selectAll('circle')) === null || _contentWrapper$selec === void 0 ? void 0 : _contentWrapper$selec.nodes();
       if (state === 'zoomIn') {
         // circle
         circleList && circleList.forEach(circle => {
@@ -268,14 +268,14 @@ class Line extends _chartComponent.default {
             d3.select(circle).attr('opacity', 1);
             d3.select(circle).attr('r', 5);
           } else {
-            d3.select(circle).attr('opacity', 0);
+            !y_axis_show_value && d3.select(circle).attr('opacity', 0);
             d3.select(circle).attr('r', 3);
           }
         });
         // line
         const theme = _constants.CHART_THEME_COLOR[globalTheme];
-        this.clearOldVerticalAnnotation(rectsWrapper);
-        this.addVerticalAnnotation(rectsWrapper, minDistanceItem, theme);
+        this.clearOldVerticalAnnotation(contentWrapper);
+        this.addVerticalAnnotation(contentWrapper, minDistanceItem, theme);
       } else {
         // circle
         circleList && circleList.forEach(circle => {
@@ -283,7 +283,7 @@ class Line extends _chartComponent.default {
           d3.select(circle).attr('r', 3);
         });
         // line
-        this.clearOldVerticalAnnotation(rectsWrapper);
+        this.clearOldVerticalAnnotation(contentWrapper);
       }
 
       // tooltip

package/dist/view/wrapper/pie.js

@@ -86,7 +86,7 @@ class Pie extends _chartComponent.default {
       const arc = d3.arc().innerRadius(0).outerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7);
 
       // Draw Pie
-      this.chart.append('g').attr('stroke', 'white').attr('stroke-width', 2).selectAll().data(arcs).join('path').attr('fill', d => color(d.data.name)).attr('d', arc).attr('data-groupName', d => d.data.name).call(g => {
+      this.chart.append('g').attr('class', 'content-wrapper').attr('stroke', 'white').selectAll().data(arcs).join('path').attr('stroke-width', 2).attr('opacity', 1).attr('fill', d => color(d.data.name)).attr('d', arc).attr('data-groupName', d => d.data.name).call(g => {
         var _g$node$parentNode;
         const {
           width,
@@ -185,7 +185,7 @@ class Pie extends _chartComponent.default {
     this.handleAcitveAndInActiveState = (state, event) => {
       const allGroup = [event.currentTarget.parentNode];
       const curGroupName = event.currentTarget.getAttribute('data-groupName');
-      this.setActiveAndInActiveState(state, allGroup, curGroupName);
+      this.setActiveAndInActiveState(state, allGroup, curGroupName, _constants.CHART_TYPE.PIE);
     };
     this.getLabel = (val, percent) => {
       const {

package/dist/view/wrapper/ring.js

@@ -87,7 +87,7 @@ class Ring extends _chartComponent.default {
       const arc = d3.arc().innerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7).outerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.5);
 
       // Draw Ring
-      this.chart.append('g').selectAll().data(arcs).join('path').attr('stroke', 'white').attr('stroke-width', 2).attr('fill', d => color(d.data.name)).attr('d', arc).attr('data-groupName', d => d.data.name).call(g => {
+      this.chart.append('g').attr('class', 'content-wrapper').selectAll().data(arcs).join('path').attr('stroke', 'white').attr('stroke-width', 2).attr('opacity', 1).attr('fill', d => color(d.data.name)).attr('d', arc).attr('data-groupName', d => d.data.name).call(g => {
         var _g$node$parentNode;
         const {
           width,
@@ -108,7 +108,7 @@ class Ring extends _chartComponent.default {
         if (display_label) {
           const labelRadius = this.isInnerLabel ? arc.outerRadius()() * 1.2 : arc.outerRadius()() * 1.65;
           const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius);
-          this.chart.append('g').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).attr('text-anchor', 'middle').selectAll().data(arcs).join('text').attr('class', 'label').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('transform', d => "translate(".concat(arcLabel.centroid(d), ")")).text(d => {
+          this.chart.append('g').attr('class', 'label-wrapper').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).attr('text-anchor', 'middle').selectAll().data(arcs).join('text').attr('class', 'label').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('transform', d => "translate(".concat(arcLabel.centroid(d), ")")).text(d => {
             const {
               value,
               percent
@@ -199,7 +199,7 @@ class Ring extends _chartComponent.default {
     this.handleAcitveAndInActiveState = (state, event) => {
       const allGroup = [event.currentTarget.parentNode];
       const curGroupName = event.currentTarget.getAttribute('data-groupName');
-      this.setActiveAndInActiveState(state, allGroup, curGroupName);
+      this.setActiveAndInActiveState(state, allGroup, curGroupName, _constants.CHART_TYPE.RING);
     };
     this.getLabel = (val, percent) => {
       const {

package/dist/view/wrapper/scatter.js

@@ -0,0 +1,335 @@
+"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 _utils = require("../../utils");
+var _intl = _interopRequireDefault(require("../../intl"));
+var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
+var _chartComponent = _interopRequireDefault(require("./chart-component"));
+class Scatter extends _chartComponent.default {
+  constructor(props) {
+    super(props);
+    this.handleResize = () => {
+      this.chart.node() && this.chart.node().remove();
+      this.createChart();
+      this.drawChart();
+    };
+    this.createChart = () => {
+      const {
+        chart,
+        columnGroupbyColumn
+      } = 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,
+        bottomLegendSpace: columnGroupbyColumn ? 20 : 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;
+      data = this.transformStringToNumber(data);
+      this.draw(data);
+      this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
+      (0, _utils.isFunction)(customRender) && customRender(this.chart);
+    };
+    this.transformStringToNumber = data => {
+      const newData = (0, _lodashEs.cloneDeep)(data);
+      newData.forEach(item => {
+        item.name = item.original_value.name;
+        item.value = item.original_value.value;
+      });
+      return newData;
+    };
+    this.getFillColor = data => {
+      const {
+        chartColorTheme
+      } = this.props;
+      let currentIdx = 0;
+      let colors = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors;
+      const colorMap = data.reduce((acc, cur) => {
+        if (cur.groupby && !acc[cur.groupby]) {
+          acc[cur.groupby] = colors[currentIdx++ % colors.length];
+        }
+        return acc;
+      }, {});
+      return colorMap;
+    };
+    this.showTooltip = (event, data, selectedXAxisColumn, selectedYAxisColumn) => {
+      const {
+        groupby,
+        name,
+        value
+      } = data;
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      const newTooltipData = {
+        titleMarkColor: event.currentTarget.getAttribute('fill'),
+        title: groupby || groupby === 0 ? groupby : _intl.default.get('Empty'),
+        items: [{
+          name: selectedXAxisColumn.name,
+          value: name
+        }, {
+          name: selectedYAxisColumn.name,
+          value: 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.handleAcitveAndInActiveState = (state, event) => {
+      const {
+        globalTheme
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const contentWrapper = event.currentTarget.parentNode;
+
+      // Remove old mark line wrapper
+      const markLineWrapper = d3.select(contentWrapper).select('.mark-line-wrapper');
+      markLineWrapper.node() && markLineWrapper.node().remove();
+      if (state === 'inActive') {
+        // Remove stroke
+        d3.select(event.currentTarget).attr('stroke', '').attr('storke-width', '');
+        return;
+      }
+      if (state === 'active') {
+        const {
+          width: chartWidth,
+          height: chartHeight,
+          insertPadding,
+          marginTop,
+          bottomLegendSpace
+        } = this.chartBoundingClientRect;
+        const x = Number(event.currentTarget.getAttribute('data-x'));
+        const y = Number(event.currentTarget.getAttribute('data-y'));
+        const r = Number(event.currentTarget.getAttribute('r'));
+
+        // Add stroke and shadow
+        d3.select(event.currentTarget).attr('stroke', 'white').attr('stroke-width', 1.5).attr('style', 'filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.1));');
+        const markLineWrapper = d3.select(contentWrapper).append('g').attr('class', 'mark-line-wrapper');
+        // X axis
+        if (x - r >= insertPadding) {
+          // The length of the line must be a positive number
+          markLineWrapper.append('line').attr('x1', insertPadding).attr('y1', y).attr('x2', x - r).attr('y2', y).attr('stroke', theme.XAxisColor);
+        }
+        if (chartWidth - insertPadding >= x + r) {
+          // The length of the line must be a positive number
+          markLineWrapper.append('line').attr('x1', x + r).attr('y1', y).attr('x2', chartWidth - insertPadding).attr('y2', y).attr('stroke', theme.XAxisColor);
+        }
+        // Y axis
+        if (y - r >= insertPadding) {
+          // The length of the line must be a positive number
+          markLineWrapper.append('line').attr('x1', x).attr('y1', insertPadding + marginTop).attr('x2', x).attr('y2', y - r).attr('stroke', theme.XAxisColor);
+        }
+        if (chartHeight - insertPadding >= y + r) {
+          // The length of the line must be a positive number
+          markLineWrapper.append('line').attr('x1', x).attr('y1', y + r).attr('x2', x).attr('y2', chartHeight - insertPadding - bottomLegendSpace).attr('stroke', theme.XAxisColor);
+        }
+      }
+    };
+    this.draw = data => {
+      const {
+        chart,
+        globalTheme,
+        tables,
+        chartColorTheme
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const {
+        label_font_size,
+        x_axis_column_key,
+        y_axis_column_key,
+        table_id,
+        y_axis_show_value,
+        y_axis_max,
+        y_axis_min,
+        y_axis_auto_range
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding,
+        marginTop,
+        bottomLegendSpace
+      } = this.chartBoundingClientRect;
+      const colorMap = this.getFillColor(data);
+      const selectedTable = (0, _dtableUtils.getTableById)(tables, table_id);
+      const selectedXAxisColumn = (0, _dtableUtils.getTableColumnByKey)(selectedTable, x_axis_column_key);
+      const selectedYAxisColumn = (0, _dtableUtils.getTableColumnByKey)(selectedTable, y_axis_column_key);
+
+      // Y axis
+      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 - bottomLegendSpace, insertPadding + marginTop]);
+      this.chart.append('g').attr('class', 'y-axis-wrapper').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 niceEnd = d3.nice(0, d3.max(data, d => d.name), 5)[1];
+      const x = d3.scaleLinear().domain([0, niceEnd]).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]);
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0, ".concat(chartHeight - insertPadding - bottomLegendSpace, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5).ticks(5).tickFormat(d => d)).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);
+        const allLineNode = g.selectAll('line').nodes();
+        if (Array.isArray(allLineNode)) {
+          // delete the first line and last line
+          allLineNode[0] && allLineNode[0].remove();
+          allLineNode[allLineNode.length - 1] && allLineNode[allLineNode.length - 1].remove();
+        }
+        this.checkTickOverlap(g);
+      });
+
+      // Circle
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper');
+      contentWrapper.selectAll().data(data).join('circle').attr('fill', d => {
+        const {
+          groupby
+        } = d;
+        if (groupby && groupby[0] === 'groupby') {
+          return _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors[0];
+        }
+        return colorMap[d.groupby];
+      }).attr('data-x', d => x(d.name)).attr('data-y', d => y(d.value)).attr('data-value', d => d.value).attr('data-width', 3.5).attr('data-groupName', d => d.name).attr('cx', d => x(d.name)).attr('cy', d => y(d.value)).attr('r', 3.5).attr('opacity', 0.85).call(g => {
+        g.nodes().forEach(path => {
+          // Add label
+          if (y_axis_show_value) {
+            this.addLabelToRectTop({
+              container: contentWrapper.node(),
+              xWidth: Number(path.dataset.width),
+              x: Number(path.dataset.x),
+              y: Number(path.dataset.y),
+              theme,
+              label_font_size,
+              text: path.dataset.value
+            });
+          }
+        });
+      }).on('click', (event, data) => {
+        this.props.toggleRecords(data);
+      }).on('mouseover', (event, data) => {
+        this.showTooltip(event, data, selectedXAxisColumn, selectedYAxisColumn);
+        this.handleAcitveAndInActiveState('active', event);
+      }).on('mousemove', (event, data) => {
+        this.moveTooltip(event, data, selectedXAxisColumn, selectedYAxisColumn);
+      }).on('mouseleave', (event, data) => {
+        this.hiddenTooltip();
+        this.handleAcitveAndInActiveState('inActive', event);
+      });
+      this.setLegend({
+        legendName: 'groupby',
+        theme,
+        legendPosition: 'top-right',
+        data,
+        groupColumn: this.props.columnGroupbyColumn,
+        chart,
+        colorScale: key => colorMap[key]
+      });
+    };
+    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
+    }));
+  }
+}
+Scatter.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 = Scatter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "2.0.19",
+  "version": "2.0.21",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
@@ -157,4 +157,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}