sea-chart 2.0.59 → 2.0.60

package/dist/view/wrapper/pie.js

@@ -22,12 +22,9 @@ class Pie extends _chartComponent.default {
       const {
         chart
       } = this.props;
-      const {
-        show_legend
-      } = chart.config;
       const initConfig = {
         insertPadding: 30,
-        rightLegendSpace: show_legend ? 50 : 0
+        rightLegendSpace: 0
       };
       this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
     };
@@ -57,8 +54,7 @@ class Pie extends _chartComponent.default {
       const {
         width: chartWidth,
         height: chartHeight,
-        insertPadding,
-        rightLegendSpace
+        insertPadding
       } = this.chartBoundingClientRect;
       this.isInnerLabel = !label_position || label_position === _constants.CHART_LABEL_POSITIONS[0];
       const currentTheme = _utils.BaseUtils.getCurrentTheme(chartColorTheme);
@@ -68,6 +64,17 @@ class Pie extends _chartComponent.default {
         colorMap
       } = _utils.BaseUtils.formatPieChartData(data, chart, tables, currentTheme, useSingleSelectColumnColor);
       if (!Array.isArray(newData) || newData.length === 0) return;
+      const {
+        rightLegendSpace = 0,
+        chartLegendGap = 0
+      } = show_legend ? this.getRightLegendLayout({
+        data: newData,
+        legendName: 'name',
+        theme
+      }) : {};
+      this.chartBoundingClientRect.rightLegendSpace = rightLegendSpace;
+      const plotWidth = Math.max(0, chartWidth - insertPadding * 2 - rightLegendSpace - chartLegendGap);
+      const radiusWidth = show_legend ? plotWidth : chartWidth;
 
       // Only the visible categories are laid out; the legend still shows every category.
       const visibleData = this.getVisibleLegendData(newData, 'name');
@@ -80,7 +87,7 @@ class Pie extends _chartComponent.default {
       // Pie and Arc
       const pie = d3.pie().sort(null).value(d => d.value);
       const arcs = pie(visibleData);
-      const arc = d3.arc().innerRadius(0).outerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7);
+      const arc = d3.arc().innerRadius(0).outerRadius(Math.min(radiusWidth, chartHeight) / 2 * 0.7);
 
       // Draw Pie
       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 => {
@@ -91,7 +98,7 @@ class Pie extends _chartComponent.default {
         } = (_g$node$parentNode = g.node().parentNode) === null || _g$node$parentNode === void 0 ? void 0 : _g$node$parentNode.getBoundingClientRect();
         const left = width / 2 + insertPadding;
         const top = height / 2 + insertPadding;
-        const offsetX = (chartWidth - (insertPadding + rightLegendSpace) - insertPadding - width) / 2;
+        const offsetX = (plotWidth - width) / 2;
         const offsetY = (chartHeight - insertPadding - insertPadding - height) / 2;
         d3.select(g.node().parentNode).attr('transform', `translate(${left + offsetX}, ${top + offsetY})`);
 

package/dist/view/wrapper/ring.js

@@ -22,12 +22,9 @@ class Ring extends _chartComponent.default {
       const {
         chart
       } = this.props;
-      const {
-        show_legend
-      } = chart.config;
       const initConfig = {
         insertPadding: 30,
-        rightLegendSpace: show_legend ? 50 : 0
+        rightLegendSpace: 0
       };
       this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
     };
@@ -57,8 +54,7 @@ class Ring extends _chartComponent.default {
       const {
         width: chartWidth,
         height: chartHeight,
-        insertPadding,
-        rightLegendSpace
+        insertPadding
       } = this.chartBoundingClientRect;
       this.isInnerLabel = !label_position || label_position === _constants.CHART_LABEL_POSITIONS[0];
       const currentTheme = _utils.BaseUtils.getCurrentTheme(chartColorTheme);
@@ -69,6 +65,17 @@ class Ring extends _chartComponent.default {
         total: fullTotal
       } = _utils.BaseUtils.formatPieChartData(data, chart, tables, currentTheme, useSingleSelectColumnColor);
       if (!Array.isArray(newData) || newData.length === 0) return;
+      const {
+        rightLegendSpace = 0,
+        chartLegendGap = 0
+      } = show_legend ? this.getRightLegendLayout({
+        data: newData,
+        legendName: 'name',
+        theme
+      }) : {};
+      this.chartBoundingClientRect.rightLegendSpace = rightLegendSpace;
+      const plotWidth = Math.max(0, chartWidth - insertPadding * 2 - rightLegendSpace - chartLegendGap);
+      const radiusWidth = show_legend ? plotWidth : chartWidth;
 
       // Only the visible categories are laid out; the legend still shows every category.
       const visibleData = this.getVisibleLegendData(newData, 'name');
@@ -82,7 +89,8 @@ class Ring extends _chartComponent.default {
       // Ring and Arc
       const pie = d3.pie().sort(null).value(d => d.value);
       const arcs = pie(visibleData);
-      const arc = d3.arc().innerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.5).outerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7);
+      const radius = Math.min(radiusWidth, chartHeight) / 2;
+      const arc = d3.arc().innerRadius(radius * 0.5).outerRadius(radius * 0.7);
 
       // Draw Ring
       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 => {
@@ -93,7 +101,7 @@ class Ring extends _chartComponent.default {
         } = (_g$node$parentNode = g.node().parentNode) === null || _g$node$parentNode === void 0 ? void 0 : _g$node$parentNode.getBoundingClientRect();
         const left = width / 2 + insertPadding;
         const top = height / 2 + insertPadding;
-        const offsetX = (chartWidth - (insertPadding + rightLegendSpace) - insertPadding - width) / 2;
+        const offsetX = (plotWidth - width) / 2;
         const offsetY = (chartHeight - insertPadding - insertPadding - height) / 2;
         d3.select(g.node().parentNode).attr('transform', `translate(${left + offsetX}, ${top + offsetY})`);
 

package/package.json

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