sea-chart 2.0.16 → 2.0.18

package/dist/utils/chart-utils/base-utils.js

@@ -1780,4 +1780,34 @@ BaseUtils.isCollaboratorColumnOrMultipleColumn = columnMap => {
   }
   return false;
 };
+BaseUtils.sortDataByGroupName = function (data, groupKey, groupColumn) {
+  let chart = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {
+    config: {}
+  };
+  const {
+    column_groupby_multiple_numeric_column
+  } = chart.config;
+  if (!column_groupby_multiple_numeric_column) {
+    if (groupColumn) {
+      if ([_dtableUtils.CellType.SINGLE_SELECT].includes(groupColumn.type)) {
+        data.forEach(item => {
+          const option = groupColumn.data.options.find(option => option.name === item[groupKey]);
+          if (option !== null && option !== void 0 && option.id) {
+            item['group_name_id'] = option.id;
+            item['oldName'] = item.name;
+            item.name = item['group_name_id'];
+          }
+        });
+        _BaseUtils.sortCharts(data, groupColumn, 'name');
+        data.forEach(item => {
+          item.name = item['oldName'];
+        });
+        return data;
+      }
+      _BaseUtils.sortCharts(data, groupColumn, groupKey);
+    }
+    return data;
+  }
+  return data;
+};
 var _default = exports.default = BaseUtils;

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

@@ -88,7 +88,7 @@ class AreaGroup extends _chartComponent.default {
         marginTop
       } = this.chartBoundingClientRect;
       const useSingleSelectColumnColor = (columnGroupbyColumn === null || columnGroupbyColumn === void 0 ? void 0 : columnGroupbyColumn.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
-      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme, 'group_name', columnGroupbyColumn, chart);
       const tooltipTitle = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
 
       // Y axis
@@ -98,7 +98,7 @@ class AreaGroup extends _chartComponent.default {
 
       // X axis
       const xDomain = data.map(item => item.name);
-      const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
+      const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
       this.ticksWrapper = this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
         this.ticksAddName(g);
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
@@ -155,7 +155,7 @@ class AreaGroup extends _chartComponent.default {
             // circle label
             if (y_axis_show_value) {
               const curCircleEl = g.node();
-              rectsWrapper.append('text').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
+              rectsWrapper.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(curCircleEl.getAttribute('data-text')).call(g => {
                 const {
                   width
                 } = g.node().getBoundingClientRect();
@@ -204,7 +204,9 @@ class AreaGroup extends _chartComponent.default {
         legendName: 'group_name',
         theme,
         legendPosition: 'top-right',
-        data
+        data,
+        groupColumn: this.props.columnGroupbyColumn,
+        chart
       });
     };
     this.updateCircleAndTickStyle = _ref4 => {

package/dist/view/wrapper/area.js

@@ -91,7 +91,7 @@ class Area extends _chartComponent.default {
 
       // X axis
       const xDomain = data.map(item => item.name);
-      const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
+      const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
       this.ticksWrapper = this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
         this.ticksAddName(g);
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
@@ -130,7 +130,7 @@ class Area extends _chartComponent.default {
           // circle label
           if (y_axis_show_value) {
             const curCircleEl = g.node();
-            rectsWrapper.append('text').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
+            rectsWrapper.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(curCircleEl.getAttribute('data-text')).call(g => {
               const {
                 width
               } = g.node().getBoundingClientRect();

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

@@ -67,9 +67,9 @@ class BarCompare extends _chartComponent.default {
 
       // Y axis
       this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => this.drawYaxis(g, theme));
-      const fx = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const fx = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
       const color = d3.scaleOrdinal().domain(d3.group(data, d => d.group_name).keys()).range(_chartUtils.BaseUtils.getCurrentTheme(chartColorTheme).colors).unknown('#ccc');
-      const x = d3.scaleBand().domain(d3.group(data, d => d.group_name).keys()).range([0, fx.bandwidth()]);
+      const x = d3.scaleBand().domain(d3.group(data, d => d.group_name).keys()).range([0, fx.bandwidth()]).paddingInner(0).paddingOuter(0);
 
       // X axis
       this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
@@ -206,7 +206,7 @@ class BarCompare extends _chartComponent.default {
         insertPadding
       } = this.chartBoundingClientRect;
       const circleData = increaseData.map(() => ({}));
-      const lineX = d3.scaleBand().domain(increaseData.map(d => d.name)).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      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 line = d3.line().x((d, index) => {
         const x = lineX(d.name) + lineX.bandwidth() / 2;
@@ -230,7 +230,7 @@ class BarCompare extends _chartComponent.default {
           // circle label
           if (display_increase_percentage) {
             const curCircleEl = g.node();
-            wrapper.append('text').attr('fill', theme.labelColor).attr('font-size', _chartUtils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
+            wrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _chartUtils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
               const {
                 width
               } = g.node().getBoundingClientRect();

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

@@ -71,6 +71,14 @@ class BarCustom extends _chartComponent.default {
           }
         }
       });
+
+      // sort Data
+      Object.keys(dataMap).forEach(key => {
+        const item = dataMap[key];
+        Object.keys(item).forEach(itemKey => {
+          item[itemKey].reverse();
+        });
+      });
       const stacksData = this.handleStacks(dataMap);
       return stacksData;
     };
@@ -147,8 +155,8 @@ class BarCustom extends _chartComponent.default {
 
       // Y axis
       this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => this.drawYaxis(g, theme));
-      const fx = d3.scaleBand().domain(new Set(organizedData.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
-      const x = d3.scaleBand().domain(new Set(data.map(d => d.y_axis_type))).range([0, fx.bandwidth()]);
+      const fx = d3.scaleBand().domain(new Set(organizedData.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
+      const x = d3.scaleBand().domain(new Set(data.map(d => d.y_axis_type))).range([0, fx.bandwidth()]).paddingInner(0).paddingOuter(0);
 
       // X axis
       this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {

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

@@ -13,7 +13,6 @@ var _lodashEs = require("lodash-es");
 var d3 = _interopRequireWildcard(require("d3"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _intl = _interopRequireDefault(require("../../intl"));
-var _columnUtils = require("../../utils/column-utils");
 var _constants = require("../../constants");
 var _utils = require("../../utils");
 var _colorRules = require("../../constants/color-rules");
@@ -34,16 +33,14 @@ class BarGroup extends _chartComponent.default {
       const {
         y_axis_show_label,
         x_axis_show_label,
-        y_axis_show_value,
-        display_each_block_data,
-        type
+        y_axis_show_value
       } = chart.config;
       const initConfig = {
         insertPadding: 30,
         borderRadius: 0.2,
         marginLeft: y_axis_show_label ? 20 : 0,
         marginBottom: x_axis_show_label ? 20 : 0,
-        marginTop: y_axis_show_value || type === _constants.CHART_TYPE.BAR_STACK && display_each_block_data ? 15 : 0
+        marginTop: y_axis_show_value ? 15 : 0
       };
       this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
     };
@@ -56,16 +53,6 @@ class BarGroup extends _chartComponent.default {
       } = this.props;
       data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
       if (!Array.isArray(data)) return;
-      const {
-        chart
-      } = this.props;
-      const {
-        sort_type,
-        type
-      } = chart.config;
-      if (type === _constants.CHART_TYPE.BAR_STACK && sort_type) {
-        data = (0, _columnUtils.sortDataByGroupSum)(data, sort_type);
-      }
       this.draw(data);
       this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
       (0, _utils.isFunction)(customRender) && customRender(this.chart);
@@ -75,7 +62,8 @@ class BarGroup extends _chartComponent.default {
         chart,
         globalTheme,
         chartColorTheme,
-        tables
+        tables,
+        columnGroupbyColumn
       } = this.props;
       const {
         display_goal_line,
@@ -89,7 +77,6 @@ class BarGroup extends _chartComponent.default {
         marginTop
       } = this.chartBoundingClientRect;
       const {
-        type,
         y_axis_show_value,
         label_font_size,
         table_id,
@@ -97,20 +84,20 @@ class BarGroup extends _chartComponent.default {
         color_theme,
         y_axis_max,
         y_axis_min,
-        y_axis_auto_range,
-        display_each_block_data
+        y_axis_auto_range
       } = chart.config;
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const column_groupby_column = this.getColumn(tables, table_id, column_groupby_column_key);
       const useSingleSelectColumnColor = (column_groupby_column === null || column_groupby_column === void 0 ? void 0 : column_groupby_column.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
-      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme); // use single select column color
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme, 'group_name', columnGroupbyColumn, chart); // use single select column color
 
       const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, d3.max(data, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding + marginTop]);
 
       // Y axis
       this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => this.drawYaxis(g, theme));
-      const fx = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
-      const x = d3.scaleBand().domain(new Set(data.map(d => d.group_name))).range([0, fx.bandwidth()]);
+      const fx = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
+      const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'group_name', columnGroupbyColumn, chart);
+      const x = d3.scaleBand().domain(new Set(sortedData.map(d => d.group_name))).range([0, fx.bandwidth()]).paddingInner(0).paddingOuter(0);
 
       // X axis
       this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
@@ -122,7 +109,7 @@ class BarGroup extends _chartComponent.default {
       });
 
       // Rect group
-      this.chart.append('g').selectAll().data(d3.group(data, d => d.name)).join('g').attr('transform', _ref => {
+      this.chart.append('g').selectAll().data(d3.group(sortedData, d => d.name)).join('g').attr('transform', _ref => {
         let [name, dum] = _ref;
         // Each group is horizontally centered
         const offset = (fx.bandwidth() - dum.length * x.bandwidth()) / 2;
@@ -143,33 +130,6 @@ class BarGroup extends _chartComponent.default {
           });
 
           // Add label
-          if (type === _constants.CHART_TYPE.BAR_STACK) {
-            if (y_axis_show_value) {
-              this.addLabelToRectCenter({
-                chartType: _constants.CHART_TYPE.BAR_STACK,
-                container: parentNode,
-                x: Number(rect.getAttribute('x')),
-                y: Number(rect.getAttribute('y')),
-                xWidth: x.bandwidth(),
-                yheight: Number(rect.getAttribute('height')),
-                theme,
-                label_font_size,
-                text: rect.getAttribute('data-value')
-              });
-            }
-            if (display_each_block_data) {
-              this.addLabelToRectTop({
-                container: parentNode,
-                xWidth: Number(x.bandwidth()),
-                x: Number(rect.getAttribute('x')),
-                y: Number(rect.getAttribute('y')),
-                theme,
-                label_font_size,
-                text: rect.dataset.value
-              });
-            }
-            return;
-          }
           if (y_axis_show_value) {
             this.addLabelToRectTop({
               container: parentNode,
@@ -201,7 +161,8 @@ class BarGroup extends _chartComponent.default {
         theme,
         legendPosition: 'top-right',
         data,
-        groupColumn: this.props.columnGroupbyColumn
+        groupColumn: this.props.columnGroupbyColumn,
+        chart
       });
     };
     this.showTooltip = event => {

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

@@ -47,23 +47,18 @@ class BarStack extends _chartComponent.default {
     };
     this.drawChart = () => {
       const {
-        customRender
+        customRender,
+        chart
       } = this.props;
+      const {
+        sort_type
+      } = chart.config;
       let {
         result: data
       } = this.props;
       data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
       if (!Array.isArray(data)) return;
-      const {
-        chart
-      } = this.props;
-      const {
-        sort_type,
-        type
-      } = chart.config;
-      if (type === _constants.CHART_TYPE.BAR_STACK && sort_type) {
-        data = (0, _columnUtils.sortDataByGroupSum)(data, sort_type);
-      }
+      sort_type && (data = (0, _columnUtils.sortDataByGroupSum)(data, sort_type));
       this.draw(data);
       this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
       (0, _utils.isFunction)(customRender) && customRender(this.chart);
@@ -73,7 +68,8 @@ class BarStack extends _chartComponent.default {
         chart,
         globalTheme,
         chartColorTheme,
-        tables
+        tables,
+        columnGroupbyColumn
       } = this.props;
       const {
         display_goal_line,
@@ -94,24 +90,25 @@ class BarStack extends _chartComponent.default {
       const column_groupby_column = this.getColumn(tables, table_id, column_groupby_column_key);
       const useSingleSelectColumnColor = (column_groupby_column === null || column_groupby_column === void 0 ? void 0 : column_groupby_column.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
       // use single select column color
-      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme, 'group_name', columnGroupbyColumn, chart);
       const {
         width: chartWidth,
         height: chartHeight,
         insertPadding,
         marginTop
       } = this.chartBoundingClientRect;
-      const series = d3.stack().keys(d3.union(data.map(d => d.group_name))).value((_ref, key) => {
+      const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'group_name', columnGroupbyColumn, chart).reverse();
+      const series = d3.stack().keys(d3.union(sortedData.map(d => d.group_name))).value((_ref, key) => {
         var _group$get;
         let [_, group] = _ref;
         return (_group$get = group.get(String(key))) === null || _group$get === void 0 ? void 0 : _group$get.value;
-      })(d3.index(data, d => d.name, d => d.group_name));
+      })(d3.index(sortedData, d => d.name, d => d.group_name));
       const niceEnd = d3.nice(0, d3.max(series, d => d3.max(d, d => d[1])), 5)[1];
       const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding + marginTop]);
 
       // Y axis
       this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => this.drawYaxis(g, theme));
-      const x = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const x = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
 
       // X axis
       this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
@@ -187,7 +184,8 @@ class BarStack extends _chartComponent.default {
         theme,
         legendPosition: 'top-right',
         data,
-        groupColumn: this.props.columnGroupbyColumn
+        groupColumn: this.props.columnGroupbyColumn,
+        chart
       });
     };
     // Horizontal stacking processing position vertical stacking

package/dist/view/wrapper/bar.js

@@ -155,7 +155,7 @@ class Bar extends _chartComponent.default {
       } = this.chartBoundingClientRect;
       const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, d3.max(data, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding + marginTop]);
       this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => this.drawYaxis(g, theme));
-      const x = d3.scaleBand().domain(data.map(item => item.name)).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
+      const x = d3.scaleBand().domain(data.map(item => item.name)).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
       this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);

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

@@ -258,11 +258,11 @@ class ChartComponent extends _react.Component {
         div.className = 'chart-axis-label';
         const column = (0, _dtableUtils.getTableColumnByKey)(table, x_axis_column_key);
         div.innerHTML = "".concat(column ? column.name : '');
-        div.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(x_axis_label_position, "; position: absolute"));
+        div.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(x_axis_label_position, "; position: absolute; bottom: 0;"));
         chartContainer.appendChild(div);
       }
       if (xLabel && x_axis_show_label) {
-        xLabel.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(x_axis_label_position, "; position: absolute"));
+        xLabel.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(x_axis_label_position, "; position: absolute; bottom: 0;"));
       }
       if (xLabel && !x_axis_show_label) {
         xLabel.parentNode.removeChild(xLabel);
@@ -592,11 +592,10 @@ class ChartComponent extends _react.Component {
         legendPosition = 'top-left',
         data,
         colorScale,
-        groupColumn
+        groupColumn,
+        chart
       } = _ref;
       if (!this.chart) return;
-      data.forEach(item => item[legendName] = String(item[legendName]));
-      const legendData = (0, _lodashEs.cloneDeep)(data);
       this.legendConfig = {
         legendRectWidth: 20,
         legendRectHeight: 6,
@@ -611,10 +610,9 @@ class ChartComponent extends _react.Component {
         theme
       };
 
-      // sort legend data
-      if (groupColumn && [_dtableUtils.CellType.SINGLE_SELECT].includes(groupColumn.type)) {
-        this.sortLegend(legendData, groupColumn, legendName);
-      }
+      // sort legend data and format data
+      data.forEach(item => item[legendName] = String(item[legendName]));
+      const legendData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), legendName, groupColumn, chart);
       const {
         width: chartWidth,
         insertPadding,
@@ -949,13 +947,16 @@ class ChartComponent extends _react.Component {
     };
     this.setColorMap = function (data, chartColorTheme) {
       let groupName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'group_name';
+      let groupColumn = arguments.length > 3 ? arguments[3] : undefined;
+      let chart = arguments.length > 4 ? arguments[4] : undefined;
+      const newData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), groupName, groupColumn, chart);
       let currentIdx = 0;
       const defaultColors = _constants.CHART_STYLE_COLORS;
       let colors = defaultColors;
       if (chartColorTheme) {
         colors = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors;
       }
-      const colorMap = data.reduce((acc, cur) => {
+      const colorMap = newData.reduce((acc, cur) => {
         if (cur[groupName] && !acc[cur[groupName]]) {
           acc[cur[groupName]] = colors[currentIdx++ % colors.length];
         }
@@ -1143,7 +1144,7 @@ class ChartComponent extends _react.Component {
         label_font_size,
         text
       } = _ref6;
-      d3.select(container).append('text').attr('y', Number(y) - 10).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
+      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 => {
         const {
           width
         } = g.node().getBoundingClientRect();
@@ -1161,7 +1162,7 @@ class ChartComponent extends _react.Component {
         label_font_size,
         text
       } = _ref7;
-      d3.select(container).append('text').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 => {
+      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;
           const {
@@ -1183,7 +1184,7 @@ class ChartComponent extends _react.Component {
         label_font_size,
         text
       } = _ref8;
-      d3.select(container).append('text').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
+      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 => {
         const {
           width,
           height

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

@@ -50,7 +50,8 @@ class Completeness extends _chartComponent.default {
       const {
         chart,
         globalTheme,
-        chartColorTheme
+        chartColorTheme,
+        columnGroupbyColumn
       } = this.props;
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const {
@@ -69,12 +70,12 @@ class Completeness extends _chartComponent.default {
       } = this.chartBoundingClientRect;
       this.markLastForCompleteness(data);
       const colors = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors;
-      this.setColorMap(data, chartColorTheme, 'groupby');
-      const newSeries = this.getGroupSeries(data);
+      this.setColorMap(data, chartColorTheme, 'groupby', columnGroupbyColumn, chart);
+      const newSeries = this.getGroupSeries(data, columnGroupbyColumn, chart);
 
       // Y axis
-      const fy = d3.scaleBand().domain(newSeries.map(item => item[0])).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.1).paddingOuter(0.1);
-      const y = d3.scaleBand().domain(new Set(data.map(d => d.groupby))).range([0, fy.bandwidth()]);
+      const fy = d3.scaleBand().domain(newSeries.map(item => item[0])).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
+      const y = d3.scaleBand().domain(new Set(data.map(d => d.groupby))).range([0, fy.bandwidth()]).paddingInner(0).paddingOuter(0);
       const yAxis = this.chart.append('g').call(d3.axisLeft(fy).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
@@ -177,7 +178,9 @@ class Completeness extends _chartComponent.default {
         legendName: 'groupby',
         theme,
         legendPosition: 'top-right',
-        data
+        data,
+        groupColumn: columnGroupbyColumn,
+        chart
       });
     };
     this.handleAcitveAndInActiveState = (state, event) => {
@@ -250,8 +253,9 @@ class Completeness extends _chartComponent.default {
         toolTipPosition: null
       });
     };
-    this.getGroupSeries = data => {
-      const groups = d3.groups(data, d => d.name);
+    this.getGroupSeries = (data, columnGroupbyColumn, chart) => {
+      const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'groupby', columnGroupbyColumn, chart);
+      const groups = d3.groups(sortedData, d => d.name);
       groups.forEach((item, index) => {
         const itemData = (0, _lodashEs.cloneDeep)(item[1]);
 

package/dist/view/wrapper/completeness.js

@@ -76,7 +76,7 @@ class Completeness extends _chartComponent.default {
       const newSeries = this.handleSeries(series, data);
 
       // Y axis
-      const y = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const y = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
       const yAxis = this.chart.append('g').call(d3.axisLeft(y).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);

package/dist/view/wrapper/horizontal-bar-group.js

@@ -69,7 +69,8 @@ class HorizontalBarGroup extends _chartComponent.default {
         chart,
         globalTheme,
         chartColorTheme,
-        tables
+        tables,
+        columnGroupbyColumn
       } = this.props;
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const {
@@ -91,8 +92,9 @@ class HorizontalBarGroup extends _chartComponent.default {
       const groupByColumn = this.getColumn(tables, table_id, column_groupby_column_key);
       const useSingleSelectColumnColor = (groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
       useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
-      const fy = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.1);
-      const y = d3.scaleBand().domain(new Set(data.map(d => d.group_name))).range([0, fy.bandwidth()]);
+      const fy = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
+      const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'group_name', columnGroupbyColumn, chart);
+      const y = d3.scaleBand().domain(new Set(sortedData.map(d => d.group_name))).range([0, fy.bandwidth()]).paddingInner(0).paddingOuter(0);
       const yAxis = this.chart.append('g').call(d3.axisLeft(fy).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
@@ -117,7 +119,7 @@ class HorizontalBarGroup extends _chartComponent.default {
 
       // Rect group
       const rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id)).attr('transform', "translate(".concat(Number(yAxis.node().getAttribute('data-axisWidth')), ", 0)"));
-      rectsWrapper.selectAll().data(d3.group(data, d => d.name)).join('g').attr('transform', _ref => {
+      rectsWrapper.selectAll().data(d3.group(sortedData, d => d.name)).join('g').attr('transform', _ref => {
         let [name, dum] = _ref;
         const offset = (fy.bandwidth() - dum.length * y.bandwidth()) / 2;
         return "translate(0, ".concat(fy(name) + offset, ")");
@@ -170,7 +172,8 @@ class HorizontalBarGroup extends _chartComponent.default {
         theme,
         legendPosition: 'top-left',
         data,
-        groupColumn: this.props.columnGroupbyColumn
+        groupColumn: this.props.columnGroupbyColumn,
+        chart
       });
     };
     this.handleAcitveAndInActiveState = (state, event) => {

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

@@ -67,7 +67,8 @@ class HorizontalBarStack extends _chartComponent.default {
         chart,
         globalTheme,
         chartColorTheme,
-        tables
+        tables,
+        columnGroupbyColumn
       } = this.props;
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const {
@@ -87,14 +88,15 @@ class HorizontalBarStack extends _chartComponent.default {
       } = this.chartBoundingClientRect;
       const groupByColumn = this.getColumn(tables, table_id, column_groupby_column_key);
       const useSingleSelectColumnColor = (groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
-      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
-      const series = d3.stack().keys(d3.union(data.map(d => d.group_name))).value((_ref, key) => {
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme, 'group_name', columnGroupbyColumn, chart);
+      const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'group_name', columnGroupbyColumn, chart);
+      const series = d3.stack().keys(d3.union(sortedData.map(d => d.group_name))).value((_ref, key) => {
         var _group$get;
         let [_, group] = _ref;
         return ((_group$get = group.get(String(key))) === null || _group$get === void 0 ? void 0 : _group$get.value) || 0;
-      })(d3.index(data, d => d.name, d => d.group_name));
-      const newSeries = this.handleSeries(series, data);
-      const y = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      })(d3.index(sortedData, d => d.name, d => d.group_name));
+      const newSeries = this.handleSeries(series, sortedData);
+      const y = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
 
       // Y axis
       const yAxis = this.chart.append('g').call(d3.axisLeft(y).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {
@@ -174,7 +176,9 @@ class HorizontalBarStack extends _chartComponent.default {
         legendName: 'group_name',
         theme,
         legendPosition: 'top-right',
-        data
+        data,
+        groupColumn: this.props.columnGroupbyColumn,
+        chart
       });
     };
     this.handleAcitveAndInActiveState = (state, event) => {

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

@@ -88,7 +88,7 @@ class HorizontalBar extends _chartComponent.default {
       const colorRules = color_option === _constants.TYPE_COLOR_USING.USE_RULES && horizontal_axis_label_color_rules && (0, _colorUtils.getConvertedColorRules)(horizontal_axis_label_color_rules);
       const tooltipTitle = this.getTitle(tables, table_id, horizontal_axis_summary_type, horizontal_axis_column_key);
       data.reverse();
-      const y = d3.scaleBand().domain(data.map(item => item.name)).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const y = d3.scaleBand().domain(data.map(item => item.name)).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
       const yAxis = this.chart.append('g').call(d3.axisLeft(y).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);

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

@@ -152,7 +152,7 @@ class LineGroup extends _chartComponent.default {
         marginTop
       } = this.chartBoundingClientRect;
       const useSingleSelectColumnColor = (columnGroupbyColumn === null || columnGroupbyColumn === void 0 ? void 0 : columnGroupbyColumn.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
-      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme, 'group_name', columnGroupbyColumn, chart);
 
       // Y axis
       const niceEnd = d3.nice(0, d3.max(data, d => d.value), 5)[1];
@@ -209,7 +209,7 @@ class LineGroup extends _chartComponent.default {
               // circle label
               if (y_axis_show_value) {
                 const curCircleEl = g.node();
-                rectsWrapper.append('text').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
+                rectsWrapper.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(curCircleEl.getAttribute('data-text')).call(g => {
                   const {
                     width
                   } = g.node().getBoundingClientRect();
@@ -256,7 +256,9 @@ class LineGroup extends _chartComponent.default {
         legendName: 'group_name',
         theme,
         legendPosition: 'top-right',
-        data
+        data,
+        groupColumn: this.props.columnGroupbyColumn,
+        chart
       });
     };
     this.updateCircleAndTickStyle = _ref2 => {

package/dist/view/wrapper/line.js

@@ -177,7 +177,7 @@ class Line extends _chartComponent.default {
           // circle label
           if (y_axis_show_value) {
             const curCircleEl = g.node();
-            rectsWrapper.append('text').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
+            rectsWrapper.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(curCircleEl.getAttribute('data-text')).call(g => {
               const {
                 width
               } = g.node().getBoundingClientRect();

package/dist/view/wrapper/pie.js

@@ -102,7 +102,7 @@ class Pie extends _chartComponent.default {
         if (display_label) {
           const labelRadius = this.isInnerLabel ? arc.outerRadius()() * 0.7 : arc.outerRadius()() * 1.2;
           const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius);
-          this.chart.append('g').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).attr('text-anchor', 'middle').selectAll().data(arcs).join('text').attr('transform', d => "translate(".concat(arcLabel.centroid(d), ")")).text(d => {
+          this.chart.append('g').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).attr('text-anchor', 'middle').selectAll().data(arcs).join('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('transform', d => "translate(".concat(arcLabel.centroid(d), ")")).text(d => {
             const {
               value,
               percent

package/dist/view/wrapper/ring.js

@@ -108,7 +108,7 @@ class Ring extends _chartComponent.default {
         if (display_label) {
           const labelRadius = this.isInnerLabel ? arc.outerRadius()() * 1.2 : arc.outerRadius()() * 1.65;
           const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius);
-          this.chart.append('g').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).attr('text-anchor', 'middle').selectAll().data(arcs).join('text').attr('class', 'label').attr('transform', d => "translate(".concat(arcLabel.centroid(d), ")")).text(d => {
+          this.chart.append('g').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).attr('text-anchor', 'middle').selectAll().data(arcs).join('text').attr('class', 'label').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('transform', d => "translate(".concat(arcLabel.centroid(d), ")")).text(d => {
             const {
               value,
               percent

package/package.json

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