sea-chart 2.0.35 → 2.0.36

package/dist/utils/index.js

@@ -98,7 +98,7 @@ Object.defineProperty(exports, "getDateColumnFormat", {
     return _columnUtils.getDateColumnFormat;
   }
 });
-exports.getGeoGranularityByLevel = exports.getEventClassName = exports.getErrorMessage = void 0;
+exports.getGeoGranularityByLevel = exports.getFirstDayOfWeekForGroupby = 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 _lodashEs = require("lodash-es");
+var _lodash = require("lodash");
 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, _lodashEs.cloneDeep)(item);
+    sortedData[index] = (0, _lodash.cloneDeep)(item);
   });
   sortedData = sortedData.filter(Boolean);
   return sortedData;
@@ -396,4 +396,25 @@ const getEventClassName = e => {
   if (!e || !e.target) return '';
   return e.target.getAttribute('class') || '';
 };
-exports.getEventClassName = getEventClassName;
+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;

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

@@ -20,6 +20,7 @@ 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];
@@ -512,7 +513,8 @@ const filterPredicateMap = {
   [_dtableUtils.CellType.URL]: 'is',
   [_dtableUtils.CellType.STRING]: 'is',
   [_dtableUtils.CellType.BOOL]: 'is',
-  [_dtableUtils.CellType.LINK_FORMULA]: 'has_any_of'
+  [_dtableUtils.CellType.LINK_FORMULA]: 'is',
+  [_dtableUtils.CellType.LINK]: 'is'
 };
 const USE_OPTION_ID_CELL_TYPES = [_dtableUtils.CellType.SINGLE_SELECT, _dtableUtils.CellType.MULTIPLE_SELECT];
 const getFilterByColumnTypeForPivot = (columnKey, columns, value, rows) => {
@@ -526,11 +528,38 @@ 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) {
-    type = column.data.result_type;
+    if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY && array_type) {
+      type = array_type;
+    } else {
+      type = result_type;
+    }
   }
   if (type === _dtableUtils.CellType.LINK_FORMULA) {
-    type = column.data.array_type;
+    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;
+    }
   }
   if (column && [_dtableUtils.CellType.GEOLOCATION, _dtableUtils.CellType.DATE, _dtableUtils.CellType.MTIME, _dtableUtils.CellType.CTIME].includes(type)) {
     filter['value'] = value;
@@ -539,19 +568,24 @@ 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;
   }
-
-  // link_formula use has_any_of
-  if (columnType === _dtableUtils.CellType.LINK_FORMULA) {
+  if (isFormulaCollaborator) {
+    filter['filter_predicate'] = filterPredicateMap[_dtableUtils.CellType.COLLABORATOR];
+  } else if ([_dtableUtils.CellType.LINK_FORMULA, _dtableUtils.CellType.LINK].includes(columnType)) {
     filter['filter_predicate'] = filterPredicateMap[columnType];
   } else {
     filter['filter_predicate'] = filterPredicateMap[type];
@@ -574,13 +608,40 @@ 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) {
-    type = column.data.result_type;
+    if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY && array_type) {
+      type = array_type;
+    } else {
+      type = result_type;
+    }
   }
   if (type === _dtableUtils.CellType.LINK_FORMULA) {
-    type = column.data.array_type;
+    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;
+    }
   }
   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
@@ -589,14 +650,21 @@ 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();
   }
-  filter['filter_term'] = value;
-
-  // link_formula use has_any_of
-  if (columnType === _dtableUtils.CellType.LINK_FORMULA) {
+  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_predicate'] = filterPredicateMap[columnType];
   } else {
     filter['filter_predicate'] = filterPredicateMap[type];
@@ -621,10 +689,18 @@ const getFilterConditions = (statisticRecord, chart, table) => {
   const groupColumnKey = _constants.groupAxisMap[type];
   chart.config = _chartUtils.BaseUtils.convertConfig(config);
   const chartSQLMap = (0, _sql.chartColumn2SqlColumn)(chart, table);
-  const {
+  let {
     sqlColumnGroupbyColumnKey,
-    sqlGroupbyColumnKey
+    sqlGroupbyColumnKey,
+    sqlXColumnKey,
+    sqlYColumnKey
   } = 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 = [];
@@ -648,19 +724,23 @@ const getFilterConditions = (statisticRecord, chart, table) => {
     });
   } else {
     if (name === '_Others') {
-      const columnFilters = rows.map(row => getFilterByColumnType(config[columnKey], columns, [row], sqlGroupbyColumnKey));
-      filters.push(...columnFilters);
+      const flters = rows.map(row => getFilterByColumnType(config[columnKey], columns, [row], sqlGroupbyColumnKey));
+      filters.push(...flters);
     } else {
-      let columnFilter;
       if (['map', 'map_bubble'].includes(type)) {
-        columnFilter = {
+        const filter = {
           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 {
-        columnFilter = getFilterByColumnType(config[columnKey], columns, rows, sqlGroupbyColumnKey);
+        const filter = getFilterByColumnType(config[columnKey], columns, rows, sqlGroupbyColumnKey);
+        filters.push(filter);
       }
-      filters.push(columnFilter);
     }
     if (sqlColumnGroupbyColumnKey) {
       const groupColumnFilter = getFilterByColumnType(config[groupColumnKey], columns, rows, sqlColumnGroupbyColumnKey);

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

@@ -11,6 +11,7 @@ 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,
@@ -18,14 +19,13 @@ const column2SqlColumn = function (column) {
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const {
     name,
-    type,
     key
   } = column;
   const validColumnName = "`".concat(name, "`");
-  switch (type) {
-    case _dtableUtils.CellType.DATE:
-    case _dtableUtils.CellType.MTIME:
-    case _dtableUtils.CellType.CTIME:
+  const startOfWeek = (0, _index.getFirstDayOfWeekForGroupby)('app').toLowerCase();
+  switch (true) {
+    case (0, _columnUtils.isDateColumn)(column):
+    case (0, _columnUtils.isDateFormulaColumn)(column):
       {
         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, ", \"monday\"))");
+          const sqlColumnName = "ISODATE(STARTOFWEEK(".concat(validColumnName, ", \"").concat(startOfWeek, "\"))");
           return {
             name: sqlColumnName,
             key: sqlColumnName
@@ -76,7 +76,7 @@ const column2SqlColumn = function (column) {
           key: sqlColumnName
         };
       }
-    case _dtableUtils.CellType.GEOLOCATION:
+    case column.type === _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,8 +10,18 @@ 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);
-function getCompareDate(dateGranularity) {
+const dayOfWeekMap = {
+  'Sunday': 0,
+  'Monday': 1,
+  'Tuesday': 2,
+  'Wednesday': 3,
+  'Thursday': 4,
+  'Friday': 5,
+  'Saturday': 6
+};
+function getCompareDate(dateGranularity, source) {
   const currentDate = (0, _dayjs.default)();
   switch (dateGranularity) {
     case _constants.CHART_SUMMARY_TYPE.DAY:
@@ -25,7 +35,10 @@ function getCompareDate(dateGranularity) {
       }
     case _constants.CHART_SUMMARY_TYPE.WEEK:
       {
-        const currentWeek = (0, _dayjs.default)().day(1);
+        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 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,10 +30,6 @@
   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;
 }
@@ -49,10 +45,8 @@
 .sea-chart-formatter .sea-chart-container {
   font-size: 12px;
   position: absolute;
-  left: 2%;
-  right: 2%;
-  top: 2%;
-  bottom: 8%;
+  width: 100%;
+  height: 100%;
 }
 
 .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 _title$text, _chart$config3;
+    var _chart$config3;
     const {
       // style
       className,
@@ -283,10 +283,6 @@ 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) {
@@ -319,9 +315,7 @@ 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', {
-        'has-title': hasTitle
-      })
+      className: (0, _classnames.default)('sea-chart-cavans-container')
     }, /*#__PURE__*/_react.default.createElement(_wrapper.default, {
       chart: chart,
       data: data,
@@ -339,6 +333,18 @@ 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,
@@ -377,5 +383,4 @@ 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, '', _intl.default.get('Empty'));
+      data = _utils.BaseUtils.formatEmptyName(data, 'group_name', _intl.default.get('Empty'));
       if (!Array.isArray(data)) return;
       this.draw(data);
       (0, _utils.isFunction)(customRender) && customRender(this.chart);
@@ -300,12 +300,16 @@ 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[item.group_name],
-            name: item.group_name,
+            color: this.colorMap[groupName],
+            name: groupName,
             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
@@ -332,12 +336,16 @@ 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[item.group_name],
-            name: item.group_name,
+            color: this.colorMap[groupName],
+            name: groupName,
             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,7 +196,6 @@ 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,
@@ -207,9 +206,26 @@ 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 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 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 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,16 +182,39 @@ 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 => {
-        // 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);
+        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);
           }
         });
+        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, x.bandwidth());
+          this.handleLabelToRectCenter(g, xWidth);
         }
       }).on('click', (event, data) => {
         this.props.toggleRecords(data);
@@ -241,10 +264,13 @@ class BarCustom extends _chartComponent.default {
         });
       });
     };
-    this.addMaskRect = (topG, rect, xWidth, colorScale) => {
+    this.addMaskRect = (topG, rect, xWidth, colorScale, borderRadiusVal) => {
       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);
@@ -256,7 +282,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(xWidth * borderRadius, "px ").concat(xWidth * borderRadius, "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(safeBorderRadius, "px ").concat(safeBorderRadius, "px 0px 0px"));
 
       // Remove old rect
       d3.select(rect).remove();