sea-chart 2.0.22 → 2.0.23

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

@@ -699,6 +699,21 @@ class ChartComponent extends _react.Component {
       const groupsData = this.getLegendDataGroups(legendData);
       const legendWrapper = this.chart.append('g').attr('class', 'legend-wrapper');
 
+      // legend offset bottom and When there is only one line of legend, it is displayed in the center (for scatter chart)
+      if (bottomLegendSpace) {
+        queueMicrotask(() => {
+          let curTranslateX = 0;
+          const curTranslateY = bottomLegendSpace ? chartHeight - bottomLegendSpace : 0;
+          if (groupsData.length === 1) {
+            const {
+              width
+            } = legendWrapper.node().getBoundingClientRect();
+            curTranslateX = (chartWidth - width - insertPadding * 2) / 2;
+          }
+          legendWrapper.attr('transform', "translate(".concat(curTranslateX, ",").concat(curTranslateY, ")"));
+        });
+      }
+
       // Render first group legend
       this.renderLegend({
         legendWrapper,
@@ -768,8 +783,7 @@ class ChartComponent extends _react.Component {
             } = g.node().parentNode.getBoundingClientRect();
             groupTranslateY = groupTranslateY + height + legendItemMargin;
           }
-          const curTranslateY = bottomLegendSpace ? chartHeight - bottomLegendSpace : groupTranslateY; // pageNavigator offset bottom
-          g.attr('transform', "translate(".concat(groupTranslateX, ", ").concat(curTranslateY, ")"));
+          g.attr('transform', "translate(".concat(groupTranslateX, ", ").concat(groupTranslateY, ")"));
         });
       }
     };
@@ -994,20 +1008,15 @@ 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, ", ").concat(curTranslateY, ")")).attr('data-translateX', curTranslateX);
+        d3.select(legendItem).attr('transform', "translate(".concat(curTranslateX, ", 0)")).attr('data-translateX', curTranslateX);
         d3.select(legendItem).attr('opacity', 1);
       });
     };

package/dist/view/wrapper/scatter.js

@@ -268,7 +268,7 @@ class Scatter extends _chartComponent.default {
       this.setLegend({
         legendName: 'groupby',
         theme,
-        legendPosition: 'top-right',
+        legendPosition: 'top-left',
         data,
         groupColumn: this.props.columnGroupbyColumn,
         chart,

package/package.json

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