sea-chart 2.0.36 → 2.0.37

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

@@ -37,7 +37,7 @@ class ChartComponent extends _react.Component {
       }
     }, 300);
     this.destroyChart = () => {
-      this.chart && this.chart.node() && this.chart.node().remove();
+      this.chart.node() && this.chart.node().remove();
     };
     this.getTitle = (tables, table_id, yAxisType, yAxisKey) => {
       return yAxisType === _constants.CHART_SUMMARY_TYPE.COUNT ? _intl.default.get('Amount') : this.getAxisLabel(tables, table_id, yAxisKey);
@@ -213,6 +213,22 @@ class ChartComponent extends _react.Component {
         });
       });
     };
+    this.drawLabels = function () {
+      let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      if (!_this.chart) return;
+      const {
+        width
+      } = _this.chart.coordinateBBox;
+      _this.labelCount = data.length;
+      if (Math.floor(width / _this.labelCount) <= 20) {
+        let displayLabels = _this.getChartDisplayLabels(width, 20, data);
+        _this.labelCount = displayLabels.length;
+        _this.chart.scale('name', {
+          type: 'cat',
+          ticks: displayLabels
+        });
+      }
+    };
     this.renderAxisLabel = (chart, tables, chartContainer) => {
       if (!this.chart || !chart) return;
       let {
@@ -277,8 +293,7 @@ class ChartComponent extends _react.Component {
         const div = document.createElement('div');
         div.id = yAxisID;
         div.className = 'chart-axis-label';
-        // SCATTER always has y_axis_column_key
-        if (y_axis_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT && type !== _constants.CHART_TYPE.SCATTER) {
+        if (y_axis_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
           div.innerHTML = _intl.default.get('Amount');
         } else {
           const column = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_column_key) || {};
@@ -446,6 +461,186 @@ class ChartComponent extends _react.Component {
     this.isShowHorizontalAxisLabel = chart => {
       return !!(chart && chart.config && chart.config.show_horizontal_axis_label);
     };
+    // Automatic adjustment of maximum and minimum values
+    this.autoAdjustDataOptions = function (chart) {
+      let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      let summaryColumn = arguments.length > 2 ? arguments[2] : undefined;
+      if (!_this.chart || !chart) return;
+      let valueScaleOptions = {};
+      const {
+        config
+      } = chart;
+      const {
+        y_axis_auto_range,
+        y_axis_min,
+        y_axis_max,
+        y_axis_summary_method
+      } = config;
+      if (summaryColumn) {
+        valueScaleOptions['formatter'] = value => {
+          return _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method);
+        };
+      }
+      if (y_axis_auto_range === undefined || y_axis_auto_range) {
+        valueScaleOptions['nice'] = true;
+      } else {
+        valueScaleOptions['min'] = y_axis_min;
+        valueScaleOptions['max'] = y_axis_max;
+        // set the filter rule
+        _this.chart.filter('value', value => {
+          return value >= y_axis_min;
+        });
+        // filter the data
+        _this.chart.filterData(data);
+      }
+      _this.chart.scale({
+        name: {
+          type: 'cat'
+        },
+        value: valueScaleOptions
+      });
+    };
+    // set axis label and tooltip
+    this.setNameLabelAndTooltip = function () {
+      let theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _constants.CHART_THEME_COLOR['light'];
+      let labelCount = arguments.length > 1 ? arguments[1] : undefined;
+      if (!_this.chart) return;
+      _this.chart.axis('name', {
+        line: {
+          style: {
+            stroke: theme.XAxisColor,
+            lineWidth: 1
+          }
+        },
+        tickLine: {
+          length: 5,
+          // color of the tick line
+          stroke: theme.XAxisColor
+        },
+        label: {
+          style: {
+            fill: theme.textColor,
+            fontSize: theme.fontSize
+          },
+          offset: 10,
+          autoRotate: true,
+          rotate: labelCount > 11 ? 0.3 : 0,
+          formatter: name => {
+            const isString = typeof name === 'string';
+            if (!isString) name = String(name);
+            if (name === 'undefined') {
+              return _intl.default.get(_constants.EMPTY_NAME);
+            }
+            if (name.length > 10) {
+              return (0, _utils.formatXAxisLabel)(name);
+            }
+            return name;
+          }
+        }
+      });
+    };
+    // set value label
+    this.setValueLabel = function () {
+      let theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _constants.CHART_THEME_COLOR['light'];
+      if (!_this.chart) return;
+      _this.chart.axis('value', {
+        label: {
+          offset: 6,
+          style: {
+            fontSize: theme.fontSize,
+            fill: theme.textColor
+          }
+        },
+        grid: {
+          line: {
+            style: {
+              stroke: theme.gridColor,
+              lineDash: [8, 3]
+            }
+          }
+        }
+      });
+    };
+    this.labelFormatter = name => {
+      let label = name;
+      if (name.length > 10) {
+        label = "".concat(name.slice(0, 10), "...");
+      }
+      if (name === '' || name === 'undefined') {
+        label = _intl.default.get(_constants.EMPTY_NAME);
+      }
+      return label;
+    };
+    this.getLegendConfig = function () {
+      let theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _constants.CHART_THEME_COLOR['light'];
+      let legendPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top-right';
+      return {
+        // custom: true,
+        position: legendPosition,
+        itemName: {
+          style: {
+            // fill: theme.textColor,
+            fill: theme.legendTextColor,
+            fontSize: theme.legendFontSize
+          },
+          formatter: name => {
+            if (!name && typeof name !== 'number' || name.trim() === 'undefined' || name.trim() === 'null') {
+              return _intl.default.get(_constants.EMPTY_NAME);
+            } else if (name === '_Others') {
+              return _intl.default.get('Others');
+            } else {
+              return _intl.default.get(name) || name;
+            }
+          }
+        },
+        pageNavigator: {
+          text: {
+            style: {
+              fill: theme.legendTextColor
+            }
+          },
+          marker: {
+            style: {
+              fill: theme.legendPageNavigatorMarkerColor,
+              inactiveFill: theme.legendPageNavigatorMarkerColor,
+              inactiveOpacity: 0.45
+            }
+          }
+        },
+        itemHeight: 30,
+        marker: {
+          symbol:
+          // 'square',
+          // use cavans to custom legend，returns a path command array
+          (x, y) => {
+            x = x + 6;
+            y = y - 1;
+            // The total width of the capsule is 20px, and its height is 6px. Thus, the radius of the semi-circle is half the height, which is 3px.
+            const r = 3;
+            // The width of the rectangular part in the middle of the capsule is the total width minus the diameters of the two semi-circles, which is 14px.
+            const rectWidth = 14;
+            return [['M', x - rectWidth / 2, y - r],
+            // Start from the left edge of the left semi-circle
+            ['L', x + rectWidth / 2, y - r],
+            // Draw the top line to the left edge of the right semi-circle
+            ['A', r, r, 0, 0, 1, x + rectWidth / 2, y + r],
+            // Draw the right semi-circle
+            ['L', x - rectWidth / 2, y + r],
+            // Draw the bottom line back to the right edge of the left semi-circle
+            ['A', r, r, 0, 0, 1, x - rectWidth / 2, y - r] // Draw the left semi-circle
+            ];
+          },
+          style: style => {
+            // fill legend with stroke color
+            if (style.stroke) {
+              style.fill = style.stroke;
+            }
+            return style;
+          },
+          spacing: 15
+        }
+      };
+    };
     this.formatterLegendName = name => {
       if (!name && typeof name !== 'number' || name.trim() === 'undefined' || name.trim() === 'null') {
         return _intl.default.get(_constants.EMPTY_NAME);
@@ -455,7 +650,85 @@ class ChartComponent extends _react.Component {
         return _intl.default.get(name) || name;
       }
     };
-    this.setLegend = _ref => {
+    // set legend for heat map
+    this.setLegendForHeatMap = _ref => {
+      let {
+        exampleColors,
+        themeColors
+      } = _ref;
+      const legendOffsetY = 3;
+      const legendItemTextWidth = 32;
+      const legendItemWidth = 12;
+      const legendItemHeight = 12;
+      const legendItemGap = 3;
+      const legendItemRadius = 2;
+      const legendWrapper = this.chart.append('g').attr('class', 'legend-heat-map-wrapper').attr('transform', "translate(0, ".concat(legendOffsetY, ")"));
+
+      // less
+      legendWrapper.append('text').attr('y', 10).attr('fill', themeColors.textColor).attr('font-size', 12).attr('font-weight', 'bold').text(_intl.default.get('Less'));
+      // rect
+      exampleColors.forEach((color, index) => {
+        legendWrapper.append('rect').attr('x', legendItemTextWidth + index * legendItemWidth + index * legendItemGap).attr('width', legendItemWidth).attr('height', legendItemHeight).attr('rx', legendItemRadius).attr('fill', color).attr('stroke', _style.FILL_BORDER_COLOR_MAP[color]).attr('stroke-width', 1);
+      });
+      // more
+      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'));
+    };
+    // set continuous legend
+    this.setContinuousLegend = _ref2 => {
+      var _this$chart$node2;
+      let {
+        previewType,
+        theme,
+        colorRange = [],
+        legendDirection,
+        legendSize,
+        legendTextRange,
+        bubbleColor,
+        type
+      } = _ref2;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      const legendRectWidth = legendDirection === 'vertical' ? 12 : Math.min(legendSize * 100, chartWidth - insertPadding * 2);
+      const legendRectHeight = legendDirection === 'vertical' ? Math.min(legendSize * 100, chartHeight - insertPadding * 2) : 12;
+      const legendTextOffset = 2;
+      const legendTextHeightSpace = legendDirection === 'vertical' ? 0 : 14 + legendTextOffset;
+      if (![_constants.CHART_TYPE.MAP_BUBBLE, _constants.CHART_TYPE.WORLD_MAP_BUBBLE].includes(type)) {
+        var _this$chart$node;
+        // add linearGradient
+        const gradient = this.chart.append('defs').attr('class', 'linear-gradient-wrapper').append('linearGradient').attr("id", "gradient-".concat((_this$chart$node = this.chart.node()) === null || _this$chart$node === void 0 ? void 0 : _this$chart$node.id, "-").concat(previewType)).attr("x1", '0%').attr("y1", '0%').attr("x2", legendDirection === 'vertical' ? '0%' : '100%').attr("y2", legendDirection === 'vertical' ? '100%' : '0%');
+        gradient.append('stop').attr('offset', '0%').attr('stop-color', "".concat(colorRange[0]));
+        gradient.append('stop').attr('offset', '50%').attr('stop-color', "".concat(colorRange[4]));
+        gradient.append('stop').attr('offset', '100%').attr('stop-color', "".concat(colorRange[8]));
+      }
+
+      // add legend
+      const continuousLegendWrapper = this.chart.append('g').attr('class', 'legend-continuous-wrapper').attr('transform', "translate(0, ".concat(chartHeight - legendRectHeight - legendTextHeightSpace, ")"));
+      continuousLegendWrapper.append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('fill', [_constants.CHART_TYPE.MAP_BUBBLE, _constants.CHART_TYPE.WORLD_MAP_BUBBLE].includes(type) ? bubbleColor : "url(#gradient-".concat((_this$chart$node2 = this.chart.node()) === null || _this$chart$node2 === void 0 ? void 0 : _this$chart$node2.id, "-").concat(previewType, ")")).call(g => {
+        if ([_constants.CHART_TYPE.MAP_BUBBLE, _constants.CHART_TYPE.WORLD_MAP_BUBBLE].includes(type)) {
+          continuousLegendWrapper.append('polygon').attr('points', "0,0  ".concat(legendRectWidth - 0.5, ",0  0,").concat(legendRectHeight - 0.5)).attr('fill', '#fff').attr('stroke', '#fff');
+        }
+      });
+      continuousLegendWrapper.append('text').attr('class', 'range-start').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).text(legendTextRange[0]).call(g => {
+        const {
+          height
+        } = g.node().getBoundingClientRect();
+        g.attr('x', legendDirection === 'vertical' ? legendRectWidth + legendTextOffset : legendTextOffset);
+        g.attr('y', legendDirection === 'vertical' ? height : height + legendRectHeight);
+      });
+      continuousLegendWrapper.append('text').attr('class', 'range-end').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).text(legendTextRange[1]).call(g => {
+        const {
+          width,
+          height
+        } = g.node().getBoundingClientRect();
+        g.attr('x', legendDirection === 'vertical' ? legendRectWidth + legendTextOffset : legendRectWidth - width);
+        g.attr('y', legendDirection === 'vertical' ? legendRectHeight - legendTextOffset : height + legendRectHeight);
+      });
+    };
+    // set legend
+    this.setLegend = _ref3 => {
       var _chart$config, _chart$config2;
       let {
         legendName,
@@ -465,7 +738,7 @@ class ChartComponent extends _react.Component {
         colorScale,
         groupColumn,
         chart
-      } = _ref;
+      } = _ref3;
       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,
@@ -499,7 +772,6 @@ class ChartComponent extends _react.Component {
       // legend offset bottom and When there is only one line of legend, it is displayed in the center (for scatter chart)
       if (bottomLegendSpace) {
         queueMicrotask(() => {
-          if (!legendWrapper.node()) return;
           const {
             width,
             height
@@ -582,18 +854,18 @@ class ChartComponent extends _react.Component {
             } = g.node().parentNode.getBoundingClientRect();
             groupTranslateY = groupTranslateY + height + legendItemMargin;
           }
-          g.attr('transform', "translate(".concat(groupTranslateX, ",").concat(groupTranslateY, ")"));
+          g.attr('transform', "translate(".concat(groupTranslateX, ", ").concat(groupTranslateY, ")"));
         });
       }
     };
-    this.renderLegend = _ref2 => {
+    this.renderLegend = _ref4 => {
       let {
         legendWrapper,
         groupData,
         colorScale,
         theme,
         text
-      } = _ref2;
+      } = _ref4;
       const {
         legendItemPaddingTop,
         legendItemTextPaddingTop,
@@ -619,15 +891,15 @@ class ChartComponent extends _react.Component {
           d3.select(item).remove();
         });
       }
-      legendWrapper.selectAll().data(groupData).join('g').attr('data-groupName', _ref3 => {
-        let [groupName] = _ref3;
+      legendWrapper.selectAll().data(groupData).join('g').attr('data-groupName', _ref5 => {
+        let [groupName] = _ref5;
         return groupName;
-      }).append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('y', legendItemPaddingTop).attr('rx', r).attr('fill', _ref4 => {
-        let [groupName] = _ref4;
+      }).append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('y', legendItemPaddingTop).attr('rx', r).attr('fill', _ref6 => {
+        let [groupName] = _ref6;
         if (colorScale) return colorScale(groupName);
         return this.colorMap[groupName] || _constants.CHART_STYLE_COLORS[0];
-      }).attr('data-text', _ref5 => {
-        let [groupName] = _ref5;
+      }).attr('data-text', _ref7 => {
+        let [groupName] = _ref7;
         return groupName;
       }).call(g => {
         // Add text
@@ -845,6 +1117,19 @@ class ChartComponent extends _react.Component {
       if (type === _constants.CHART_TYPE.MIRROR) return 0;
       return 3;
     };
+    // theta is pie or ring chart
+    this.setLegendForTheta = function (legendName) {
+      let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.CHART_THEME_COLOR['light'];
+      let legendPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'bottom';
+      let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+      if (!_this.chart) return;
+      const basicLegendConfig = _this.getLegendConfig(theme, legendPosition);
+      if (offsetX) {
+        basicLegendConfig.offsetX = offsetX;
+      }
+      basicLegendConfig.itemName.style.fontSize = theme.fontSize;
+      _this.chart.legend(legendName, basicLegendConfig);
+    };
     this.calcEquilateralTriangle = (cx, cy, size, direction) => {
       const height = size * Math.sqrt(3) / 2;
       if (direction === 'bottom') {
@@ -971,6 +1256,131 @@ class ChartComponent extends _react.Component {
       }
       return statisticNewData;
     };
+    this.getToolTipSettings = (isGroup, summaryColumn, y_axis_summary_method, useSingleSelectColumnColor) => {
+      const obj = {
+        showMarkers: false,
+        containerTpl: "<div class=\"g2-tooltip\">\n        <div class=\"g2-tooltip-title\">{title}</div>\n        <ul class=\"g2-tooltip-list\"></ul>\n      </div>",
+        itemTpl: "<li class=\"g2-tooltip-list-item\">\n         <span class=\"g2-tooltip-marker\" style=\"background-color:{color};display:inline-block;\"></span>\n         <span class=\"g2-tooltip-name\">{name}</span>\n         <span class=\"g2-tooltip-value\">{value}</span>\n      </li>",
+        domStyles: {
+          'g2-tooltip': {
+            boxSizing: 'border-box',
+            minWidth: '178px',
+            borderRadius: '3px',
+            border: '1px solid #e2e2e2',
+            backgroundColor: '#fff',
+            padding: '16px',
+            paddingTop: '8px',
+            paddingBottom: '8px',
+            marginLeft: '20px',
+            boxShadow: '0px 0px 1px 1px rgba(0,0,0,0.1)'
+          },
+          'g2-tooltip-title': {
+            color: '#333333',
+            fontSize: '14px',
+            paddingBottom: '10px',
+            maxWidth: '160px',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            lineHeight: '14px',
+            textOverflow: 'ellipsis'
+          },
+          'g2-tooltip-list-item': {
+            marginTop: '8px',
+            marginBottom: '8px',
+            display: 'flex'
+          },
+          'g2-tooltip-marker': {
+            width: '12px',
+            height: '12px',
+            borderRadius: '2px',
+            marginRight: '8px'
+          },
+          'g2-tooltip-name': {
+            display: 'inline-block',
+            fontSize: '12px',
+            minWidth: '80px',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            lineHeight: '12px',
+            textOverflow: 'ellipsis'
+          },
+          'g2-tooltip-value': {
+            fontSize: '12px'
+          }
+        }
+      };
+      if (isGroup) {
+        obj.customItems = items => {
+          const activeItem = items[0];
+          const name = activeItem.data.name;
+          return this.formatedDataByName[name].map(item => {
+            return {
+              color: useSingleSelectColumnColor ? item.group_color : this.colorMap[item.group_name] || _constants.CHART_STYLE_COLORS[0],
+              data: item,
+              name: !item.group_name && typeof item.group_name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : item.group_name,
+              title: item.name,
+              value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, item.value, y_axis_summary_method)
+            };
+          });
+        };
+      }
+      return obj;
+    };
+    this.setToolTip = (isGroup, summaryColumn, y_axis_summary_method, useSingleSelectColumnColor) => {
+      const settings = this.getToolTipSettings(isGroup, summaryColumn, y_axis_summary_method, useSingleSelectColumnColor);
+      this.chart.tooltip(settings);
+    };
+    this.setToolTipForLine = () => {
+      const settings = this.getToolTipSettings();
+      const lineToolTipSettings = {
+        showCrosshairs: true,
+        showTitle: true,
+        shared: true,
+        showMarkers: true,
+        marker: {
+          strokeOpacity: 0,
+          r: 5
+        },
+        crosshairs: {
+          line: {
+            fill: '#F3F3F3'
+          }
+        }
+      };
+      this.chart.tooltip({
+        ...settings,
+        ...lineToolTipSettings
+      });
+    };
+    this.setToolTipForArea = () => {
+      const settings = this.getToolTipSettings();
+      const lineToolTipSettings = {
+        showCrosshairs: true,
+        showTitle: true,
+        shared: true,
+        showMarkers: true,
+        marker: {
+          strokeOpacity: 0,
+          r: 6
+        },
+        crosshairs: {
+          line: {
+            fill: '#F3F3F3'
+          }
+        }
+      };
+      this.chart.tooltip({
+        ...settings,
+        ...lineToolTipSettings
+      });
+    };
+    // theta is pie or ring chart
+    this.setToolTipForTheta = () => {
+      const settings = this.getToolTipSettings();
+      settings.showTitle = false;
+      settings.containerTpl = "<div class=\"g2-tooltip\">\n      <ul class=\"g2-tooltip-list\"></ul>\n    </div>";
+      this.chart.tooltip(settings);
+    };
     this.isShowXAxisLabel = chart => {
       return !!(chart && chart.config && chart.config.x_axis_show_label);
     };
@@ -1001,7 +1411,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 = _ref8 => {
       let {
         container,
         x,
@@ -1010,16 +1420,15 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref6;
+      } = _ref8;
       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 {
           width
         } = g.node().getBoundingClientRect();
         g.attr('x', Number(x) + Number(xWidth) / 2 - width / 2);
       });
     };
-    this.addLabelToRectRight = _ref7 => {
+    this.addLabelToRectRight = _ref9 => {
       let {
         container,
         x,
@@ -1029,7 +1438,7 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref7;
+      } = _ref9;
       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;
@@ -1040,7 +1449,7 @@ class ChartComponent extends _react.Component {
         }
       });
     };
-    this.addLabelToRectCenter = _ref8 => {
+    this.addLabelToRectCenter = _ref10 => {
       let {
         chartType,
         container,
@@ -1051,9 +1460,8 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref8;
+      } = _ref10;
       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 {
           width,
           height
@@ -1094,32 +1502,25 @@ class ChartComponent extends _react.Component {
       }
     };
     // Use clipPath to make rectangle rounded corners
-    this.addClipPath = _ref9 => {
+    this.addClipPath = _ref11 => {
       let {
         rect,
         parentNode,
         attr,
-        rectId,
-        borderRadiusVal
-      } = _ref9;
+        rectId
+      } = _ref11;
       const {
         borderRadius
       } = this.chartBoundingClientRect;
       const clipRect = d3.select(rect.cloneNode());
       if (attr === 'x') {
-        const rectHeight = Number(rect.getAttribute('height'));
-        const rectWidth = Number(rect.getAttribute('width'));
-        const computedBorderRadius = Math.min(rectHeight * borderRadius, rectWidth / 2);
-        const safeBorderRadius = Math.min(borderRadiusVal !== null && borderRadiusVal !== void 0 ? borderRadiusVal : computedBorderRadius, rectWidth / 2, rectHeight / 2);
-        clipRect.attr('rx', safeBorderRadius);
-        clipRect.attr('x', Number(rect.getAttribute('x')) - safeBorderRadius).attr('width', rectWidth + safeBorderRadius);
+        const borderRadiusVal = Number(rect.getAttribute('height')) * borderRadius;
+        clipRect.attr('rx', borderRadiusVal);
+        clipRect.attr('x', Number(rect.getAttribute('x')) - borderRadiusVal).attr('width', Number(rect.getAttribute('width')) + borderRadiusVal);
       } else {
-        const rectWidth = Number(rect.getAttribute('width'));
-        const rectHeight = Number(rect.getAttribute('height'));
-        const computedBorderRadius = Math.min(rectWidth * borderRadius, rectHeight / 2);
-        const safeBorderRadius = Math.min(borderRadiusVal !== null && borderRadiusVal !== void 0 ? borderRadiusVal : computedBorderRadius, rectWidth / 2, rectHeight / 2);
-        clipRect.attr('rx', safeBorderRadius);
-        clipRect.attr('height', rectHeight + safeBorderRadius);
+        const borderRadiusVal = Number(rect.getAttribute('width')) * borderRadius;
+        clipRect.attr('rx', borderRadiusVal);
+        clipRect.attr('height', Number(rect.getAttribute('height')) + borderRadiusVal);
       }
       const clipPath = d3.select(parentNode).append('clipPath').attr('opacity', 1).attr('id', rectId);
       clipPath.node().appendChild(clipRect.node());
@@ -1173,7 +1574,6 @@ class ChartComponent extends _react.Component {
       // Hide overlapping ticks
       for (let i = 0; i < allTicks.length; i++) {
         const curText = d3.select(allTicks[i]).select('text').node();
-        if (!curText) continue;
         const {
           right: curRight,
           bottom: curBottom
@@ -1238,7 +1638,6 @@ class ChartComponent extends _react.Component {
           viewBox[0] = "-".concat(width - insertPadding);
           viewBox[viewBox.length - 2] = "".concat(Number(viewWidth) + (width - insertPadding));
           queueMicrotask(() => {
-            if (!this.chart) return;
             this.chart.attr('viewBox', viewBox.join(','));
           });
         }
@@ -1271,7 +1670,6 @@ class ChartComponent extends _react.Component {
           const viewHeight = viewBox[viewBox.length - 1];
           viewBox[viewBox.length - 1] = "".concat(Number(viewHeight) + (height - insertPadding));
           queueMicrotask(() => {
-            if (!this.chart) return;
             this.chart.attr('viewBox', viewBox.join(','));
           });
         }
@@ -1283,7 +1681,6 @@ class ChartComponent extends _react.Component {
         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();
-          if (!text) return;
           d3.select(tick).select('line').attr('data-name', text.innerHTML);
         });
       }