sea-chart 2.0.17 → 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
@@ -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/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;
     };

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

@@ -62,7 +62,8 @@ class BarGroup extends _chartComponent.default {
         chart,
         globalTheme,
         chartColorTheme,
-        tables
+        tables,
+        columnGroupbyColumn
       } = this.props;
       const {
         display_goal_line,
@@ -88,14 +89,15 @@ class BarGroup extends _chartComponent.default {
       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.5).paddingOuter(0.1);
-      const x = d3.scaleBand().domain(new Set(data.map(d => d.group_name))).range([0, fx.bandwidth()]).paddingInner(0).paddingOuter(0);
+      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 => {
@@ -107,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;
@@ -159,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,18 +90,19 @@ 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]);
 
@@ -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/chart-component.js

@@ -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];
         }

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,8 +70,8 @@ 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.5).paddingOuter(0.1);
@@ -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/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 {
@@ -92,7 +93,8 @@ class HorizontalBarGroup extends _chartComponent.default {
       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.5).paddingOuter(0.1);
-      const y = d3.scaleBand().domain(new Set(data.map(d => d.group_name))).range([0, fy.bandwidth()]).paddingInner(0).paddingOuter(0);
+      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,13 +88,14 @@ 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);
+      })(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
@@ -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/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];
@@ -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/package.json

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