sea-chart 2.0.36 → 2.0.37

package/dist/utils/index.js

@@ -98,7 +98,7 @@ Object.defineProperty(exports, "getDateColumnFormat", {
     return _columnUtils.getDateColumnFormat;
   }
 });
-exports.getGeoGranularityByLevel = exports.getFirstDayOfWeekForGroupby = exports.getEventClassName = exports.getErrorMessage = void 0;
+exports.getGeoGranularityByLevel = exports.getEventClassName = exports.getErrorMessage = void 0;
 Object.defineProperty(exports, "getKnownCollaboratorByEmail", {
   enumerable: true,
   get: function () {
@@ -155,7 +155,7 @@ Object.defineProperty(exports, "translateCalendar", {
     return _dateTranslate.translateCalendar;
   }
 });
-var _lodash = require("lodash");
+var _lodashEs = require("lodash-es");
 var _constants = require("../constants");
 var _intl = _interopRequireDefault(require("../intl"));
 var _error = require("../constants/error");
@@ -251,7 +251,7 @@ const getSortedDataByGivenOrder = (data, x_axis_option_list) => {
   let sortedData = [];
   data.forEach(item => {
     const index = idIndexMap[item.group_name];
-    sortedData[index] = (0, _lodash.cloneDeep)(item);
+    sortedData[index] = (0, _lodashEs.cloneDeep)(item);
   });
   sortedData = sortedData.filter(Boolean);
   return sortedData;
@@ -396,25 +396,4 @@ const getEventClassName = e => {
   if (!e || !e.target) return '';
   return e.target.getAttribute('class') || '';
 };
-exports.getEventClassName = getEventClassName;
-const getFirstDayOfWeekForGroupby = source => {
-  let firstDayOfWeek = 'Sunday';
-  if (source === 'base') {
-    const {
-      settings
-    } = window.app.state.value;
-    const {
-      date_settings
-    } = settings || {};
-    firstDayOfWeek = date_settings === null || date_settings === void 0 ? void 0 : date_settings.first_day_of_week;
-  } else if (source === 'app') {
-    var _window$app, _window$app$dtableUti;
-    const dtableSettings = (_window$app = window.app) === null || _window$app === void 0 ? void 0 : (_window$app$dtableUti = _window$app.dtableUtils) === null || _window$app$dtableUti === void 0 ? void 0 : _window$app$dtableUti.settings;
-    const {
-      date_settings
-    } = dtableSettings || {};
-    firstDayOfWeek = date_settings === null || date_settings === void 0 ? void 0 : date_settings.first_day_of_week;
-  }
-  return firstDayOfWeek || 'Sunday';
-};
-exports.getFirstDayOfWeekForGroupby = getFirstDayOfWeekForGroupby;
+exports.getEventClassName = getEventClassName;

package/dist/utils/row-record-utils.js

@@ -20,7 +20,6 @@ var _digitalSignUtils = _interopRequireDefault(require("../utils/digital-sign-ut
 var _columnUtils = require("../utils/column-utils");
 var _context = _interopRequireDefault(require("../context"));
 var _constants = require("../constants");
-var _type = require("../constants/type");
 var _sql = require("./sql");
 var _chartUtils = require("./chart-utils");
 const UNSHOW_COLUMN_TYPE = exports.UNSHOW_COLUMN_TYPE = [_dtableUtils.CellType.LINK, _dtableUtils.CellType.LONG_TEXT, _dtableUtils.CellType.FORMULA, _dtableUtils.CellType.LINK_FORMULA];
@@ -513,8 +512,7 @@ const filterPredicateMap = {
   [_dtableUtils.CellType.URL]: 'is',
   [_dtableUtils.CellType.STRING]: 'is',
   [_dtableUtils.CellType.BOOL]: 'is',
-  [_dtableUtils.CellType.LINK_FORMULA]: 'is',
-  [_dtableUtils.CellType.LINK]: 'is'
+  [_dtableUtils.CellType.LINK_FORMULA]: 'has_any_of'
 };
 const USE_OPTION_ID_CELL_TYPES = [_dtableUtils.CellType.SINGLE_SELECT, _dtableUtils.CellType.MULTIPLE_SELECT];
 const getFilterByColumnTypeForPivot = (columnKey, columns, value, rows) => {
@@ -528,38 +526,11 @@ const getFilterByColumnTypeForPivot = (columnKey, columns, value, rows) => {
   }
   let type = column.type;
   const columnType = column.type;
-  const {
-    result_type,
-    array_type
-  } = column.data || {};
-
-  // get the actual type for formula columns
   if (type === _dtableUtils.CellType.FORMULA) {
-    if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY && array_type) {
-      type = array_type;
-    } else {
-      type = result_type;
-    }
+    type = column.data.result_type;
   }
   if (type === _dtableUtils.CellType.LINK_FORMULA) {
-    type = array_type;
-    // extract display_value from link formula column value
-    if (Array.isArray(value) && value.length > 0) {
-      value = value[0];
-    }
-  }
-
-  // handle link column based on array_type
-  if (columnType === _dtableUtils.CellType.LINK) {
-    var _column$data, _value$;
-    const linkArrayType = (_column$data = column.data) === null || _column$data === void 0 ? void 0 : _column$data.array_type;
-    if (linkArrayType) {
-      type = linkArrayType;
-    }
-    // extract display_value from link column value
-    if (Array.isArray(value) && value.length > 0 && ((_value$ = value[0]) === null || _value$ === void 0 ? void 0 : _value$.display_value) !== undefined) {
-      value = value[0].display_value;
-    }
+    type = column.data.array_type;
   }
   if (column && [_dtableUtils.CellType.GEOLOCATION, _dtableUtils.CellType.DATE, _dtableUtils.CellType.MTIME, _dtableUtils.CellType.CTIME].includes(type)) {
     filter['value'] = value;
@@ -568,24 +539,19 @@ const getFilterByColumnTypeForPivot = (columnKey, columns, value, rows) => {
   if (typeof value === 'string') {
     value = value.trim();
   }
-
-  // handle collaborator type for formula/link_formula columns
-  const isFormulaCollaborator = (columnType === _dtableUtils.CellType.FORMULA || columnType === _dtableUtils.CellType.LINK_FORMULA) && result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY && _dtableUtils.COLLABORATOR_COLUMN_TYPES.includes(array_type);
   if (USE_OPTION_ID_CELL_TYPES.includes(column.type)) {
     const options = (0, _dtableUtils.getColumnOptions)(column);
     // name may contains spaces
     // value maybe id or name, find option by name or id
     const selectedOption = options.find(o => o.name.trim() === value || o.id === value);
     filter['filter_term'] = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id;
-  } else if (isFormulaCollaborator) {
-    filter['filter_term'] = Array.isArray(value) ? value : [value];
   } else {
     // value may contains spaces
     filter['filter_term'] = value;
   }
-  if (isFormulaCollaborator) {
-    filter['filter_predicate'] = filterPredicateMap[_dtableUtils.CellType.COLLABORATOR];
-  } else if ([_dtableUtils.CellType.LINK_FORMULA, _dtableUtils.CellType.LINK].includes(columnType)) {
+
+  // link_formula use has_any_of
+  if (columnType === _dtableUtils.CellType.LINK_FORMULA) {
     filter['filter_predicate'] = filterPredicateMap[columnType];
   } else {
     filter['filter_predicate'] = filterPredicateMap[type];
@@ -608,40 +574,13 @@ const getFilterByColumnType = (columnKey, columns, rows, sqlColumnKey) => {
   let value;
   let type = column.type;
   let columnType = column.type;
-  const {
-    result_type,
-    array_type
-  } = column.data || {};
   const correctRow = rows.find(r => sqlColumnKey in r);
   value = correctRow && correctRow[sqlColumnKey];
-
-  // get the actual type for formula columns
   if (type === _dtableUtils.CellType.FORMULA) {
-    if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY && array_type) {
-      type = array_type;
-    } else {
-      type = result_type;
-    }
+    type = column.data.result_type;
   }
   if (type === _dtableUtils.CellType.LINK_FORMULA) {
-    type = array_type;
-    // extract display_value from link formula column value
-    if (Array.isArray(value) && value.length > 0) {
-      value = value[0];
-    }
-  }
-
-  // handle link column based on array_type
-  if (columnType === _dtableUtils.CellType.LINK) {
-    var _column$data2, _value$2;
-    const linkArrayType = (_column$data2 = column.data) === null || _column$data2 === void 0 ? void 0 : _column$data2.array_type;
-    if (linkArrayType) {
-      type = linkArrayType;
-    }
-    // extract display_value from link column value
-    if (Array.isArray(value) && value.length > 0 && ((_value$2 = value[0]) === null || _value$2 === void 0 ? void 0 : _value$2.display_value) !== undefined) {
-      value = value[0].display_value;
-    }
+    type = column.data.array_type;
   }
   if (column && [_dtableUtils.CellType.GEOLOCATION, _dtableUtils.CellType.DATE, _dtableUtils.CellType.MTIME, _dtableUtils.CellType.CTIME].includes(type)) {
     // link_formula result is an array, but can't pass the value directly as an array here
@@ -650,21 +589,14 @@ const getFilterByColumnType = (columnKey, columns, rows, sqlColumnKey) => {
     return filter;
   }
 
-  // handle collaborator type for formula/link_formula columns
-  const isFormulaCollaborator = (columnType === _dtableUtils.CellType.FORMULA || columnType === _dtableUtils.CellType.LINK_FORMULA) && result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY && _dtableUtils.COLLABORATOR_COLUMN_TYPES.includes(array_type);
-
   // value may contains spaces
   if (typeof value === 'string') {
     value = value.trim();
   }
-  if (isFormulaCollaborator) {
-    filter['filter_term'] = Array.isArray(value) ? value : [value];
-  } else {
-    filter['filter_term'] = value;
-  }
-  if (isFormulaCollaborator) {
-    filter['filter_predicate'] = filterPredicateMap[_dtableUtils.CellType.COLLABORATOR];
-  } else if ([_dtableUtils.CellType.LINK_FORMULA, _dtableUtils.CellType.LINK].includes(columnType)) {
+  filter['filter_term'] = value;
+
+  // link_formula use has_any_of
+  if (columnType === _dtableUtils.CellType.LINK_FORMULA) {
     filter['filter_predicate'] = filterPredicateMap[columnType];
   } else {
     filter['filter_predicate'] = filterPredicateMap[type];
@@ -689,18 +621,10 @@ const getFilterConditions = (statisticRecord, chart, table) => {
   const groupColumnKey = _constants.groupAxisMap[type];
   chart.config = _chartUtils.BaseUtils.convertConfig(config);
   const chartSQLMap = (0, _sql.chartColumn2SqlColumn)(chart, table);
-  let {
+  const {
     sqlColumnGroupbyColumnKey,
-    sqlGroupbyColumnKey,
-    sqlXColumnKey,
-    sqlYColumnKey
+    sqlGroupbyColumnKey
   } = chartSQLMap;
-  if (type === _type.CHART_TYPE.COMPLETENESS_GROUP || type === _type.CHART_TYPE.COMPLETENESS) {
-    const {
-      sqlColumns
-    } = chartSQLMap;
-    sqlGroupbyColumnKey = sqlColumns.name_column.key;
-  }
   if (isPivot && rows.length) {
     const xValueList = [];
     const yValueList = [];
@@ -724,23 +648,19 @@ const getFilterConditions = (statisticRecord, chart, table) => {
     });
   } else {
     if (name === '_Others') {
-      const flters = rows.map(row => getFilterByColumnType(config[columnKey], columns, [row], sqlGroupbyColumnKey));
-      filters.push(...flters);
+      const columnFilters = rows.map(row => getFilterByColumnType(config[columnKey], columns, [row], sqlGroupbyColumnKey));
+      filters.push(...columnFilters);
     } else {
+      let columnFilter;
       if (['map', 'map_bubble'].includes(type)) {
-        const filter = {
+        columnFilter = {
           column_key: config[columnKey],
           value: name
         };
-        filters.push(filter);
-      } else if (type === _type.CHART_TYPE.SCATTER) {
-        const filterX = getFilterByColumnType(config['x_axis_column_key'], columns, rows, sqlXColumnKey);
-        const filterY = getFilterByColumnType(config['y_axis_column_key'], columns, rows, sqlYColumnKey);
-        filters.push(filterX, filterY);
       } else {
-        const filter = getFilterByColumnType(config[columnKey], columns, rows, sqlGroupbyColumnKey);
-        filters.push(filter);
+        columnFilter = getFilterByColumnType(config[columnKey], columns, rows, sqlGroupbyColumnKey);
       }
+      filters.push(columnFilter);
     }
     if (sqlColumnGroupbyColumnKey) {
       const groupColumnFilter = getFilterByColumnType(config[groupColumnKey], columns, rows, sqlColumnGroupbyColumnKey);

package/dist/utils/sql/column-2-sql-column.js

@@ -11,7 +11,6 @@ var _baseUtils = _interopRequireDefault(require("../chart-utils/base-utils"));
 var _map = require("../map");
 var _columnUtils = require("../column-utils");
 var _intl = _interopRequireDefault(require("../../intl"));
-var _index = require("../index");
 const column2SqlColumn = function (column) {
   let {
     dateGranularity,
@@ -19,13 +18,14 @@ const column2SqlColumn = function (column) {
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const {
     name,
+    type,
     key
   } = column;
   const validColumnName = "`".concat(name, "`");
-  const startOfWeek = (0, _index.getFirstDayOfWeekForGroupby)('app').toLowerCase();
-  switch (true) {
-    case (0, _columnUtils.isDateColumn)(column):
-    case (0, _columnUtils.isDateFormulaColumn)(column):
+  switch (type) {
+    case _dtableUtils.CellType.DATE:
+    case _dtableUtils.CellType.MTIME:
+    case _dtableUtils.CellType.CTIME:
       {
         const validDateGranularity = dateGranularity && dateGranularity.toUpperCase();
         if (['DAY', 'DAYS_7', 'DAYS_30'].includes(validDateGranularity)) {
@@ -36,7 +36,7 @@ const column2SqlColumn = function (column) {
           };
         }
         if (validDateGranularity === 'WEEK') {
-          const sqlColumnName = "ISODATE(STARTOFWEEK(".concat(validColumnName, ", \"").concat(startOfWeek, "\"))");
+          const sqlColumnName = "ISODATE(STARTOFWEEK(".concat(validColumnName, ", \"monday\"))");
           return {
             name: sqlColumnName,
             key: sqlColumnName
@@ -76,7 +76,7 @@ const column2SqlColumn = function (column) {
           key: sqlColumnName
         };
       }
-    case column.type === _dtableUtils.CellType.GEOLOCATION:
+    case _dtableUtils.CellType.GEOLOCATION:
       {
         const validGeolocationGranularity = geolocationGranularity && geolocationGranularity.toUpperCase();
         if (validGeolocationGranularity === 'PROVINCE') {
@@ -805,12 +805,12 @@ const chartColumn2SqlColumn = (chartElement, table) => {
     case _constants.CHART_TYPE.COMPLETENESS_GROUP:
       {
         const sqlColumns = getCompletenessSettingColumn(chart, table);
-        const sqlColumnGroupbyColumnKey = completenessColumn2SqlColumn(chart, table);
-        // only has columnGroupbyColumn key need maped to sql key
+        const sqlColumnGroupByColumnKey = completenessColumn2SqlColumn(chart, table);
+        // only has columnGroupByColumn key need maped to sql key
         // for example: 'xxx' => 'ISODATE(xxxx)'
         return {
           sqlColumns,
-          sqlColumnGroupbyColumnKey
+          sqlColumnGroupByColumnKey
         };
       }
     case _constants.CHART_TYPE.SCATTER:

package/dist/utils/trend-utils.js

@@ -10,18 +10,8 @@ var _dayjs = _interopRequireDefault(require("dayjs"));
 var _quarterOfYear = _interopRequireDefault(require("dayjs/plugin/quarterOfYear"));
 var _constants = require("../constants");
 var _chartUtils = require("./chart-utils");
-var _index = require("./index");
 _dayjs.default.extend(_quarterOfYear.default);
-const dayOfWeekMap = {
-  'Sunday': 0,
-  'Monday': 1,
-  'Tuesday': 2,
-  'Wednesday': 3,
-  'Thursday': 4,
-  'Friday': 5,
-  'Saturday': 6
-};
-function getCompareDate(dateGranularity, source) {
+function getCompareDate(dateGranularity) {
   const currentDate = (0, _dayjs.default)();
   switch (dateGranularity) {
     case _constants.CHART_SUMMARY_TYPE.DAY:
@@ -35,10 +25,7 @@ function getCompareDate(dateGranularity, source) {
       }
     case _constants.CHART_SUMMARY_TYPE.WEEK:
       {
-        var _dayOfWeekMap$firstDa;
-        const firstDayOfWeek = (0, _index.getFirstDayOfWeekForGroupby)(source);
-        const startDayIndex = (_dayOfWeekMap$firstDa = dayOfWeekMap[firstDayOfWeek]) !== null && _dayOfWeekMap$firstDa !== void 0 ? _dayOfWeekMap$firstDa : 0; // default to Sunday
-        const currentWeek = (0, _dayjs.default)().day(startDayIndex);
+        const currentWeek = (0, _dayjs.default)().day(1);
         const compareDate = (0, _dayjs.default)(currentWeek).subtract(1, 'weeks').format('YYYY-MM-DD');
         const comparedDate = (0, _dayjs.default)(currentWeek).subtract(2, 'weeks').format('YYYY-MM-DD');
         return {

package/dist/view/index.css

@@ -30,6 +30,10 @@
   height: 100%
 }
 
+.sea-chart-formatter .sea-chart-cavans-container.has-title {
+  height: calc(100% - 41px);
+}
+
 .sea-chart-formatter .sea-chart-table-formatter-container:hover {
   overflow: auto;
 }
@@ -45,8 +49,10 @@
 .sea-chart-formatter .sea-chart-container {
   font-size: 12px;
   position: absolute;
-  width: 100%;
-  height: 100%;
+  left: 2%;
+  right: 2%;
+  top: 2%;
+  bottom: 8%;
 }
 
 .sea-chart-formatter .sea-chart-container.plugin-number-card,

package/dist/view/index.js

@@ -248,7 +248,7 @@ class View extends _react.default.PureComponent {
     });
   }
   render() {
-    var _chart$config3;
+    var _title$text, _chart$config3;
     const {
       // style
       className,
@@ -283,6 +283,10 @@ class View extends _react.default.PureComponent {
     const {
       type: chartType
     } = config;
+    const {
+      title
+    } = style_config;
+    const hasTitle = title && ((_title$text = title.text) === null || _title$text === void 0 ? void 0 : _title$text.length);
     const validClassName = (0, _classnames.default)('sea-chart-formatter', className);
     const tipBackgroundColorClassName = 'sea-chart-formatter-tip';
     if (!isCalculated) {
@@ -315,7 +319,9 @@ class View extends _react.default.PureComponent {
       chart: chart
     }), /*#__PURE__*/_react.default.createElement("div", {
       id: "sea-chart-cavans-container-".concat(chart.id),
-      className: (0, _classnames.default)('sea-chart-cavans-container')
+      className: (0, _classnames.default)('sea-chart-cavans-container', {
+        'has-title': hasTitle
+      })
     }, /*#__PURE__*/_react.default.createElement(_wrapper.default, {
       chart: chart,
       data: data,
@@ -333,18 +339,6 @@ class View extends _react.default.PureComponent {
     }))));
   }
 }
-View.defaultProps = {
-  canvasStyle: {},
-  tables: [],
-  chart: {
-    id: '',
-    config: {},
-    style_config: {}
-  },
-  collaborators: [],
-  globalTheme: _constants.THEME_NAME_MAP.LIGHT,
-  isCalculateByView: false
-};
 const propTypes = exports.propTypes = {
   // style
   className: _propTypes.default.string,
@@ -383,4 +377,5 @@ const defaultProps = exports.defaultProps = {
   globalTheme: _constants.THEME_NAME_MAP.LIGHT,
   isCalculateByView: false
 };
+View.defaultProps = defaultProps;
 var _default = exports.default = View;

package/dist/view/wrapper/area-group.js

@@ -48,7 +48,7 @@ class AreaGroup extends _chartComponent.default {
         result: data,
         customRender
       } = this.props;
-      data = _utils.BaseUtils.formatEmptyName(data, 'group_name', _intl.default.get('Empty'));
+      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
       if (!Array.isArray(data)) return;
       this.draw(data);
       (0, _utils.isFunction)(customRender) && customRender(this.chart);
@@ -300,16 +300,12 @@ class AreaGroup extends _chartComponent.default {
       const newTooltipData = {
         title: title,
         items: data.map(item => {
-          const groupName = item.group_name || _intl.default.get('Empty');
           return {
-            color: this.colorMap[groupName],
-            name: groupName,
+            color: this.colorMap[item.group_name],
+            name: item.group_name,
             value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, item.value, y_axis_summary_method)
           };
-        }).sort((a, b) => String(a.name).localeCompare(String(b.name), undefined, {
-          numeric: true,
-          sensitivity: 'base'
-        }))
+        })
       };
       this.setState({
         tooltipData: newTooltipData
@@ -336,16 +332,12 @@ class AreaGroup extends _chartComponent.default {
       const newTooltipData = {
         title: title,
         items: data.map(item => {
-          const groupName = item.group_name || _intl.default.get('Empty');
           return {
-            color: this.colorMap[groupName],
-            name: groupName,
+            color: this.colorMap[item.group_name],
+            name: item.group_name,
             value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, item.value, y_axis_summary_method)
           };
-        }).sort((a, b) => String(a.name).localeCompare(String(b.name), undefined, {
-          numeric: true,
-          sensitivity: 'base'
-        }))
+        })
       };
       this.setState({
         tooltipData: newTooltipData

package/dist/view/wrapper/bar-compare.js

@@ -196,6 +196,7 @@ class BarCompare extends _chartComponent.default {
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const {
         label_font_size,
+        y_axis_auto_range,
         y_axis_min,
         y_axis_max,
         increase_line_color,
@@ -206,26 +207,9 @@ class BarCompare extends _chartComponent.default {
         height: chartHeight,
         insertPadding
       } = this.chartBoundingClientRect;
-      if (!Array.isArray(increaseData) || increaseData.length === 0) return;
       const circleData = increaseData.map(() => ({}));
       const lineX = d3.scaleBand().domain(increaseData.map(d => d.name)).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
-      const autoMin = d3.min(increaseData, d => d.value);
-      const autoMax = d3.max(increaseData, d => d.value);
-      let min, max;
-      if (!(y_axis_min && y_axis_max)) {
-        min = autoMin;
-        max = autoMax;
-      } else {
-        min = y_axis_min;
-        max = y_axis_max;
-      }
-      let yDomain = [min, max];
-      // avoid y axis range is invalid
-      if (min === max) {
-        const padding = min === 0 ? 1 : Math.max(Math.abs(min) * 0.1, 0.1);
-        yDomain = [min - padding, max + padding];
-      }
-      const lineY = d3.scaleLinear().domain(yDomain).range([chartHeight - insertPadding, insertPadding]);
+      const lineY = d3.scaleLinear().domain(y_axis_auto_range ? [d3.min(increaseData, d => d.value), d3.max(increaseData, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding]);
       const line = d3.line().x((d, index) => {
         const x = lineX(d.name) + lineX.bandwidth() / 2;
         circleData[index]['x'] = x;

package/dist/view/wrapper/bar-custom-stack.js

@@ -182,39 +182,16 @@ class BarCustom extends _chartComponent.default {
         const height = y(d[0][0]) - y(d[0][1]);
         return isNaN(height) ? 0 : height;
       }).attr('fill', d => color(d.key)).attr('data-value', d => d.stackData.value).attr('data-rectId', d => d.stackData.slugId).attr('data-groupName', d => d.stackData.group_name).attr('data-title', d => d.stackData.name).call(g => {
-        const {
-          borderRadius
-        } = this.chartBoundingClientRect;
-        const xWidth = x.bandwidth();
-        const stackGroupNodes = Array.from(g._parents);
-        const nameGroups = [];
-        stackGroupNodes.forEach(stackGroup => {
-          const nameGroup = stackGroup.parentNode;
-          if (nameGroup && !nameGroups.includes(nameGroup)) {
-            nameGroups.push(nameGroup);
+        // add rect borderRadius
+        Array.from(g._parents).forEach(group => {
+          const topRect = Array.from(group.children).reverse().find(rect => Number(rect.getAttribute('height')) !== 0);
+          // Add mask rect
+          if (topRect) {
+            this.addMaskRect(group, topRect, x.bandwidth(), color);
           }
         });
-        nameGroups.forEach(nameGroup => {
-          const stackGroups = Array.from(nameGroup.children);
-          let groupBorderRadius = Infinity;
-          stackGroups.forEach(stackGroup => {
-            const topRect = Array.from(stackGroup.children).reverse().find(rect => Number(rect.getAttribute('height')) !== 0);
-            if (!topRect) return;
-            const rectHeight = Number(topRect.getAttribute('height'));
-            const computedBorderRadius = Math.min(xWidth * borderRadius, rectHeight / 2, xWidth / 2);
-            groupBorderRadius = Math.min(groupBorderRadius, computedBorderRadius);
-          });
-          if (!Number.isFinite(groupBorderRadius)) {
-            groupBorderRadius = 0;
-          }
-          stackGroups.forEach(stackGroup => {
-            const topRect = Array.from(stackGroup.children).reverse().find(rect => Number(rect.getAttribute('height')) !== 0);
-            if (!topRect) return;
-            this.addMaskRect(stackGroup, topRect, xWidth, color, groupBorderRadius);
-          });
-        });
         if (display_each_block_data) {
-          this.handleLabelToRectCenter(g, xWidth);
+          this.handleLabelToRectCenter(g, x.bandwidth());
         }
       }).on('click', (event, data) => {
         this.props.toggleRecords(data);
@@ -264,13 +241,10 @@ class BarCustom extends _chartComponent.default {
         });
       });
     };
-    this.addMaskRect = (topG, rect, xWidth, colorScale, borderRadiusVal) => {
+    this.addMaskRect = (topG, rect, xWidth, colorScale) => {
       const {
         borderRadius
       } = this.chartBoundingClientRect;
-      const rectHeight = Number(rect.getAttribute('height'));
-      const computedBorderRadius = Math.min(xWidth * borderRadius, rectHeight / 2, xWidth / 2);
-      const safeBorderRadius = Math.min(borderRadiusVal !== null && borderRadiusVal !== void 0 ? borderRadiusVal : computedBorderRadius, rectHeight / 2, xWidth / 2);
       // Add mask rect
       d3.select(topG).append('foreignObject').attr('class', 'stack-wrapper').attr('opacity', rect.getAttribute('opacity')).attr('x', rect.getAttribute('x')).attr('data-x', topG.parentNode.getAttribute('data-transform')).attr('y', rect.getAttribute('y')).attr('width', xWidth).attr('height', rect.getAttribute('height')).attr('data-groupName', rect.getAttribute('data-groupName')).attr('data-value', rect.getAttribute('data-value')).attr('data-title', rect.getAttribute('data-title')).attr('data-rectId', rect.getAttribute('data-rectId')).on('click', (event, data) => {
         this.props.toggleRecords(data);
@@ -282,7 +256,7 @@ class BarCustom extends _chartComponent.default {
       }).on('mouseleave', (event, data) => {
         this.hiddenTooltip();
         this.handleStacksAcitveAndInActiveState('active', event);
-      }).append('xhtml:div').attr('class', 'stack').attr('data-rectId', rect.getAttribute('data-rectId')).attr('style', "width: 100%; height: 100%; background-color: ".concat(rect.getAttribute('fill'), "; border-radius: ").concat(safeBorderRadius, "px ").concat(safeBorderRadius, "px 0px 0px"));
+      }).append('xhtml:div').attr('class', 'stack').attr('data-rectId', rect.getAttribute('data-rectId')).attr('style', "width: 100%; height: 100%; background-color: ".concat(rect.getAttribute('fill'), "; border-radius: ").concat(xWidth * borderRadius, "px ").concat(xWidth * borderRadius, "px 0px 0px"));
 
       // Remove old rect
       d3.select(rect).remove();