sea-chart 2.0.58 → 2.0.60

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

@@ -565,27 +565,63 @@ class ChartComponent extends _react.Component {
         return _intl.default.get(name) || name;
       }
     };
+    this.getSvgTextWidth = textNode => {
+      if (!textNode) return 0;
+      if (typeof textNode.getComputedTextLength === 'function') {
+        return textNode.getComputedTextLength();
+      }
+      return textNode.getBoundingClientRect().width;
+    };
+    this.getRightLegendLayout = _ref => {
+      let {
+        data,
+        legendName,
+        theme
+      } = _ref;
+      const {
+        width: chartWidth,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      const legendRectWidth = 20;
+      const legendRecTextGap = 8;
+      const minChartWidth = 160;
+      const chartLegendGap = 30;
+      const measureText = text => {
+        const textNode = this.chart.append('text').attr('font-size', theme.legendFontSize).text(text).node();
+        const textWidth = this.getSvgTextWidth(textNode);
+        textNode.remove();
+        return textWidth;
+      };
+      const maxTextWidth = Array.from(new Set(data.map(item => item[legendName]))).reduce((maxWidth, name) => Math.max(maxWidth, measureText(this.formatterLegendName(name))), 0);
+      const desiredLegendSpace = legendRectWidth + legendRecTextGap + maxTextWidth;
+      const minLegendSpace = legendRectWidth + legendRecTextGap + measureText('...');
+      const maxLegendSpace = chartWidth - insertPadding * 2 - minChartWidth - chartLegendGap;
+      const rightLegendSpace = Math.min(desiredLegendSpace, Math.max(minLegendSpace, maxLegendSpace));
+      return {
+        rightLegendSpace,
+        chartLegendGap
+      };
+    };
     this.truncateLegendText = (textNode, maxWidth) => {
-      if (!textNode || !Number.isFinite(maxWidth) || maxWidth <= 0) return false;
+      if (!textNode || !Number.isFinite(maxWidth)) return false;
       const fullText = textNode.textContent || '';
-      const getTextWidth = () => {
-        if (typeof textNode.getComputedTextLength === 'function') {
-          return textNode.getComputedTextLength();
-        }
-        return textNode.getBoundingClientRect().width;
-      };
-      if (!fullText || getTextWidth() <= maxWidth) return false;
+      if (!fullText) return false;
+      if (maxWidth <= 0) {
+        textNode.textContent = '...';
+        return true;
+      }
+      if (this.getSvgTextWidth(textNode) <= maxWidth) return false;
       const ellipsis = '...';
       let textLength = fullText.length;
       while (textLength > 0) {
         textNode.textContent = `${fullText.slice(0, textLength)}${ellipsis}`;
-        if (getTextWidth() <= maxWidth) return true;
+        if (this.getSvgTextWidth(textNode) <= maxWidth) return true;
         textLength--;
       }
       textNode.textContent = ellipsis;
       return true;
     };
-    this.setLegend = _ref => {
+    this.setLegend = _ref2 => {
       var _chart$config, _chart$config2;
       let {
         legendName,
@@ -595,7 +631,7 @@ class ChartComponent extends _react.Component {
         colorScale,
         groupColumn,
         chart
-      } = _ref;
+      } = _ref2;
       if (!this.chart) return;
       this.legendConfig = {
         legendRectWidth: [_constants.CHART_TYPE.SCATTER, _constants.CHART_TYPE.MIRROR].includes(chart === null || chart === void 0 ? void 0 : (_chart$config = chart.config) === null || _chart$config === void 0 ? void 0 : _chart$config.type) ? 8 : 20,
@@ -732,14 +768,14 @@ class ChartComponent extends _react.Component {
         });
       }
     };
-    this.renderLegend = _ref2 => {
+    this.renderLegend = _ref3 => {
       let {
         legendWrapper,
         groupData,
         colorScale,
         theme,
         text
-      } = _ref2;
+      } = _ref3;
       const {
         legendItemPaddingTop,
         legendItemTextPaddingTop,
@@ -765,15 +801,15 @@ class ChartComponent extends _react.Component {
           d3.select(item).remove();
         });
       }
-      legendWrapper.selectAll().data(groupData).join('g').attr('data-groupName', _ref3 => {
-        let [groupName] = _ref3;
-        return groupName;
-      }).append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('y', legendItemPaddingTop).attr('rx', r).attr('fill', _ref4 => {
+      legendWrapper.selectAll().data(groupData).join('g').attr('data-groupName', _ref4 => {
         let [groupName] = _ref4;
+        return groupName;
+      }).append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('y', legendItemPaddingTop).attr('rx', r).attr('fill', _ref5 => {
+        let [groupName] = _ref5;
         if (colorScale) return colorScale(groupName);
         return this.colorMap[groupName] || _constants.CHART_STYLE_COLORS[0];
-      }).attr('data-text', _ref5 => {
-        let [groupName] = _ref5;
+      }).attr('data-text', _ref6 => {
+        let [groupName] = _ref6;
         return groupName;
       }).call(g => {
         const legendItems = Array.from(legendWrapper.node().children).filter(item => item.getAttribute('class') !== 'legend-flip-page');
@@ -783,8 +819,7 @@ class ChartComponent extends _react.Component {
           top,
           bottom
         } = this.getLegendBoundary(legendPosition);
-        const legendTranslateX = legendPosition === 'center-right' ? start - 50 : start;
-        const maxLegendTextWidth = legendPosition === 'center-right' ? end - legendTranslateX - legendRectWidth - legendRecTextGap : null;
+        const maxLegendTextWidth = legendPosition === 'center-right' ? end - start - legendRectWidth - legendRecTextGap : null;
 
         // Add text
         g.nodes().forEach(rect => {
@@ -807,8 +842,7 @@ class ChartComponent extends _react.Component {
               const prevTranslateY = Number(prevItem.getAttribute('data-translateY'));
               translateY = prevTranslateY + height + legendItemMargin;
             }
-            const translateX = legendPosition === 'center-right' ? start - 50 : start;
-            d3.select(item).attr('transform', `translate(${translateX},${translateY})`).attr('data-translateY', translateY);
+            d3.select(item).attr('transform', `translate(${start},${translateY})`).attr('data-translateY', translateY);
             this.bindLegendItemInteraction(item);
           });
         } else {
@@ -1153,7 +1187,7 @@ class ChartComponent extends _react.Component {
         annotationWrapper.append('text').attr('x', chartWidth - insertPadding - 30).attr('y', yScale(goal_value) - 10).attr('fill', '#666').text(goal_label);
       });
     };
-    this.addLabelToRectTop = _ref6 => {
+    this.addLabelToRectTop = _ref7 => {
       let {
         container,
         x,
@@ -1162,7 +1196,7 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref6;
+      } = _ref7;
       d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('y', Number(y) - 10).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         if (!g.node()) return;
         const {
@@ -1171,7 +1205,7 @@ class ChartComponent extends _react.Component {
         g.attr('x', Number(x) + Number(xWidth) / 2 - width / 2);
       });
     };
-    this.addLabelToRectRight = _ref7 => {
+    this.addLabelToRectRight = _ref8 => {
       let {
         container,
         x,
@@ -1181,7 +1215,7 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref7;
+      } = _ref8;
       d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('x', Number(x) + Number(xWidth) + 10).attr('y', Number(y)).attr('fill', theme.labelColor).attr('dominant-baseline', 'hanging').attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         if (g.node()) {
           var _g$node;
@@ -1192,7 +1226,7 @@ class ChartComponent extends _react.Component {
         }
       });
     };
-    this.addLabelToRectCenter = _ref8 => {
+    this.addLabelToRectCenter = _ref9 => {
       let {
         chartType,
         container,
@@ -1203,7 +1237,7 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref8;
+      } = _ref9;
       d3.select(container).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(text).call(g => {
         if (!g.node()) return;
         const {
@@ -1245,12 +1279,12 @@ class ChartComponent extends _react.Component {
         });
       }
     };
-    this.addClipPath = _ref9 => {
+    this.addClipPath = _ref0 => {
       let {
         rect,
         attr,
         borderRadiusVal
-      } = _ref9;
+      } = _ref0;
       return this.addRoundedClip(rect, attr === 'x' ? 'x' : 'y', null, borderRadiusVal);
     };
     this.addRoundedClip = function (rect, orient) {
@@ -1503,13 +1537,13 @@ class ChartComponent extends _react.Component {
       }).filter(Boolean).sort((a, b) => a.top - b.top);
       const keptTicks = [];
       let prevBottom = -Infinity;
-      visibleTicks.forEach(_ref0 => {
+      visibleTicks.forEach(_ref1 => {
         let {
           tick,
           index,
           top,
           bottom
-        } = _ref0;
+        } = _ref1;
         const shouldKeepFirstTick = index === 0;
         const shouldKeepLastTick = index === ticks.length - 1;
         const hasEnoughSpace = top > prevBottom + this.yAxisTickLabelGap;
@@ -1711,11 +1745,11 @@ class ChartComponent extends _react.Component {
       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.setLegendForHeatMap = _ref1 => {
+    this.setLegendForHeatMap = _ref10 => {
       let {
         exampleColors,
         themeColors
-      } = _ref1;
+      } = _ref10;
       const legendOffsetY = 3;
       const legendItemTextWidth = 32;
       const legendItemWidth = 12;
@@ -1729,7 +1763,7 @@ class ChartComponent extends _react.Component {
       });
       legendWrapper.append('text').attr('x', 182).attr('y', 10).attr('fill', themeColors.textColor).attr('font-size', 12).attr('font-weight', 'bold').text(_intl.default.get('More'));
     };
-    this.setContinuousLegend = _ref10 => {
+    this.setContinuousLegend = _ref11 => {
       var _this$chart$node2;
       let {
         previewType,
@@ -1740,7 +1774,7 @@ class ChartComponent extends _react.Component {
         legendTextRange,
         bubbleColor,
         type
-      } = _ref10;
+      } = _ref11;
       const {
         width: chartWidth,
         height: chartHeight,

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.58",
+  "version": "2.0.60",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",