sea-chart 2.0.44 → 2.0.45

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

@@ -40,6 +40,8 @@ class AreaGroup extends ChartComponent {
       this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
     };
     this.draw = data => {
+      const fullData = data;
+      data = this.getVisibleLegendData(data, 'group_name');
       const {
         chart,
         globalTheme,
@@ -75,7 +77,7 @@ class AreaGroup extends ChartComponent {
         marginTop
       } = this.chartBoundingClientRect;
       const useSingleSelectColumnColor = (columnGroupbyColumn === null || columnGroupbyColumn === void 0 ? void 0 : columnGroupbyColumn.type) === CellType.SINGLE_SELECT && color_theme === SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
-      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme, 'group_name', columnGroupbyColumn, chart);
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(fullData) : this.setColorMap(fullData, 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
@@ -198,7 +200,7 @@ class AreaGroup extends ChartComponent {
         legendName: 'group_name',
         theme,
         legendPosition: 'top-right',
-        data,
+        data: fullData,
         groupColumn: this.props.columnGroupbyColumn,
         chart
       });

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

@@ -36,6 +36,8 @@ class BarCompare extends ChartComponent {
       this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
     };
     this.draw = data => {
+      const fullData = data;
+      data = this.getVisibleLegendData(data, 'group_name');
       const {
         chart,
         globalTheme,
@@ -109,12 +111,12 @@ class BarCompare extends ChartComponent {
         const increaseData = this.getIncreaseData(data);
         this.drawIncreaseLine(increaseData);
       }
-      this.setColorMap(data, chartColorTheme);
+      this.setColorMap(fullData, chartColorTheme);
       this.setLegend({
         legendName: 'group_name',
         theme,
         legendPosition: 'top-right',
-        data
+        data: fullData
       });
     };
     this.showTooltip = (event, colorScale, isCircle) => {

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

@@ -113,6 +113,8 @@ class BarCustom extends ChartComponent {
       return allSeries;
     };
     this.draw = data => {
+      const fullData = data;
+      data = this.getVisibleLegendData(data, 'group_name');
       const {
         chart,
         globalTheme,
@@ -133,7 +135,7 @@ class BarCustom extends ChartComponent {
         insertPadding
       } = this.chartBoundingClientRect;
       const organizedData = this.organizeData(data);
-      const color = d3.scaleOrdinal().domain(d3.group(data, d => d.group_name).keys()).range(BaseUtils.getCurrentTheme(chartColorTheme).colors).unknown('#ccc');
+      const color = d3.scaleOrdinal().domain(d3.group(fullData, d => d.group_name).keys()).range(BaseUtils.getCurrentTheme(chartColorTheme).colors).unknown('#ccc');
       const allSeries = this.getAllSeries(organizedData);
       const niceEnd = d3.nice(0, d3.max(allSeries, d => d[1]), 5)[1];
       const y = d3.scaleLinear().domain([0, niceEnd]).range([chartHeight - insertPadding, insertPadding]);
@@ -207,7 +209,7 @@ class BarCustom extends ChartComponent {
         legendName: 'group_name',
         theme,
         legendPosition: 'top-right',
-        data,
+        data: fullData,
         colorScale: color
       });
     };

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

@@ -49,6 +49,8 @@ class BarGroup extends ChartComponent {
       isFunction(customRender) && customRender(this.chart);
     };
     this.draw = data => {
+      const fullData = data;
+      data = this.getVisibleLegendData(data, 'group_name');
       const {
         chart,
         globalTheme,
@@ -82,7 +84,7 @@ class BarGroup extends ChartComponent {
       const theme = 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) === CellType.SINGLE_SELECT && color_theme === SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
-      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme, 'group_name', columnGroupbyColumn, chart); // use single select column color
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(fullData) : this.setColorMap(fullData, 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]);
 
@@ -155,7 +157,7 @@ class BarGroup extends ChartComponent {
         legendName: 'group_name',
         theme,
         legendPosition: 'top-right',
-        data,
+        data: fullData,
         groupColumn: this.props.columnGroupbyColumn,
         chart
       });

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

@@ -50,6 +50,8 @@ class BarStack extends ChartComponent {
       isFunction(customRender) && customRender(this.chart);
     };
     this.draw = data => {
+      const fullData = data;
+      data = this.getVisibleLegendData(data, 'group_name');
       const {
         chart,
         globalTheme,
@@ -78,7 +80,7 @@ class BarStack extends ChartComponent {
       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) === CellType.SINGLE_SELECT && color_theme === SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
       // use single select column color
-      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme, 'group_name', columnGroupbyColumn, chart);
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(fullData) : this.setColorMap(fullData, chartColorTheme, 'group_name', columnGroupbyColumn, chart);
       const {
         width: chartWidth,
         height: chartHeight,
@@ -173,7 +175,7 @@ class BarStack extends ChartComponent {
         legendName: 'group_name',
         theme,
         legendPosition: 'top-right',
-        data,
+        data: fullData,
         groupColumn: this.props.columnGroupbyColumn,
         chart
       });

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

@@ -13,6 +13,38 @@ export default class ChartComponent extends Component {
     var _this;
     super(props);
     _this = this;
+    // Filter out the data whose legend group has been toggled off, so the chart
+    // body can be re-laid out without the hidden categories. The full data set is
+    // still passed to setLegend so every legend item (including hidden ones) shows.
+    this.getVisibleLegendData = (data, legendName) => {
+      if (!Array.isArray(data) || !this.hiddenLegendGroups || this.hiddenLegendGroups.size === 0) {
+        return data;
+      }
+      const filtered = data.filter(d => !this.hiddenLegendGroups.has(String(d === null || d === void 0 ? void 0 : d[legendName])));
+      // Never hide everything, keep the original data as a fallback.
+      return filtered.length ? filtered : data;
+    };
+    this.handleLegendClick = groupName => {
+      if (!this.hiddenLegendGroups) this.hiddenLegendGroups = new Set();
+      const key = String(groupName);
+      const isHidden = this.hiddenLegendGroups.has(key);
+      if (isHidden) {
+        this.hiddenLegendGroups.delete(key);
+      } else {
+        // Keep at least one visible group so the chart is never fully empty.
+        const total = this.legendGroupNames ? this.legendGroupNames.size : 0;
+        const visibleCount = total - this.hiddenLegendGroups.size;
+        if (visibleCount <= 1) return;
+        this.hiddenLegendGroups.add(key);
+      }
+      this.redrawChart();
+    };
+    this.redrawChart = () => {
+      if (!this.createChart || !this.drawChart) return;
+      this.destroyChart();
+      this.createChart();
+      this.drawChart();
+    };
     this.initLabelStroke = theme => {
       this.globalTheme = theme || THEME_NAME_MAP.LIGHT;
       this.labelStroke = theme === THEME_NAME_MAP.DARK ? {} : {
@@ -546,8 +578,13 @@ export default class ChartComponent extends Component {
         legendItemTextPaddingTop: 13,
         legendItemMargin: 20,
         legendRecTextGap: 8,
-        legendPageNavWrapperWidth: 100,
-        legendPageNavWrapperHeight: 18,
+        // Space reserved for the page navigator. Start at 0 and only reserve it when
+        // pagination is actually needed, so a legend that fits is not pushed onto a
+        // hidden page (which made the legend look incomplete/clipped).
+        legendPageNavWrapperWidth: 0,
+        legendPageNavWrapperHeight: 0,
+        legendPageNavMaxWidth: 100,
+        legendPageNavMaxHeight: 18,
         legendPosition,
         legendName,
         theme
@@ -557,6 +594,9 @@ export default class ChartComponent extends Component {
       const clonedData = cloneDeep(data);
       clonedData.forEach(item => item[legendName] = String(item[legendName]));
       const legendData = BaseUtils.sortDataByGroupName(clonedData, legendName, groupColumn, chart);
+
+      // Record every legend group name so legend click can keep at least one visible.
+      this.legendGroupNames = new Set(legendData.map(item => String(item[legendName])));
       const {
         width: chartWidth,
         height: chartHeight,
@@ -564,7 +604,14 @@ export default class ChartComponent extends Component {
         rightLegendSpace,
         bottomLegendSpace
       } = this.chartBoundingClientRect;
-      const groupsData = this.getLegendDataGroups(legendData);
+      let groupsData = this.getLegendDataGroups(legendData);
+      // If more than one page is required, reserve room for the page navigator and
+      // re-paginate against the reduced space.
+      if (groupsData.length > 1) {
+        this.legendConfig.legendPageNavWrapperWidth = this.legendConfig.legendPageNavMaxWidth;
+        this.legendConfig.legendPageNavWrapperHeight = this.legendConfig.legendPageNavMaxHeight;
+        groupsData = this.getLegendDataGroups(legendData);
+      }
       if (groupsData.length === 0) return;
       const legendWrapper = this.chart.append('g').attr('class', 'legend-wrapper');
 
@@ -727,6 +774,7 @@ export default class ChartComponent extends Component {
               translateY = prevTranslateY + height + legendItemMargin;
             }
             d3.select(item).attr('transform', `translate(${start},${translateY})`).attr('data-translateY', translateY);
+            this.bindLegendItemInteraction(item);
           });
         } else {
           // update g translateX
@@ -741,6 +789,7 @@ export default class ChartComponent extends Component {
               translateX = prevTranslateX + width + legendItemMargin;
             }
             d3.select(item).attr('transform', `translate(${translateX},0)`).attr('data-translateX', translateX);
+            this.bindLegendItemInteraction(item);
 
             // legend items add offset 
             if (legendPosition === 'top-right') {
@@ -888,9 +937,16 @@ export default class ChartComponent extends Component {
       legendItems.forEach(legendItem => {
         const curTranslateX = Number(legendItem.getAttribute('data-translateX')) + offset;
         d3.select(legendItem).attr('transform', `translate(${curTranslateX}, 0)`).attr('data-translateX', curTranslateX);
-        d3.select(legendItem).attr('opacity', 1);
+        const isHidden = this.hiddenLegendGroups && this.hiddenLegendGroups.has(String(legendItem.getAttribute('data-groupName')));
+        d3.select(legendItem).attr('opacity', isHidden ? 0.35 : 1);
       });
     };
+    this.bindLegendItemInteraction = item => {
+      if (!item) return;
+      const groupName = item.getAttribute('data-groupName');
+      const isHidden = this.hiddenLegendGroups && this.hiddenLegendGroups.has(String(groupName));
+      d3.select(item).style('cursor', 'pointer').attr('opacity', isHidden ? 0.35 : 1).on('click', () => this.handleLegendClick(groupName));
+    };
     this.sortLegend = (result, groupColumn, legendName) => {
       result.forEach(item => {
         const option = groupColumn.data.options.find(option => option.name === item[legendName]);
@@ -1698,6 +1754,7 @@ export default class ChartComponent extends Component {
     this.enterTransitionName = 'enter';
     this._defs = null;
     this._clipMaskByRect = new Map();
+    this.hiddenLegendGroups = new Set();
   }
   componentDidMount() {
     window.addEventListener('resize', this.handleResize);

package/dist/view/wrapper/combination.js

@@ -93,6 +93,16 @@ class Combination extends ChartComponent {
         showRightValue = true;
       }
       this.setCombinationColorMap(data, leftSummaryColumn, rightSummaryColumn);
+
+      // Legend toggle: keep the shared x scale on the full data, but re-lay out the
+      // left bars (and hide the right line) for the categories toggled off in the legend.
+      const rightHidden = this.hiddenLegendGroups && this.hiddenLegendGroups.has(String(rightSummaryColumn === null || rightSummaryColumn === void 0 ? void 0 : rightSummaryColumn.name) + ' ');
+      let dataLeft = data;
+      if (y_axis_left_group_by_multiple_numeric_column) {
+        dataLeft = this.getVisibleLegendData(data, 'group_name');
+      } else if (this.hiddenLegendGroups && this.hiddenLegendGroups.has(String(leftSummaryColumn === null || leftSummaryColumn === void 0 ? void 0 : leftSummaryColumn.name))) {
+        dataLeft = [];
+      }
       const rightNiceEnd = d3.nice(0, d3.max(data, d => d.value_right) || 0, 5)[1];
       const rightY = d3.scaleLinear().domain(y_axis_auto_range_right ? [d3.min(data, d => d.value_right), rightNiceEnd] : [y_axis_min_right, y_axis_max_right]).range([chartHeight - insertPadding, insertPadding + marginTop]);
 
@@ -103,13 +113,13 @@ class Combination extends ChartComponent {
         g.selectAll('text').attr('fill', theme.textColor);
       });
       const rightAxisOffset = this.getRightAxisOffset(rightAxisWrapper);
-      const leftNiceEnd = d3.nice(0, d3.max(data, d => d.value_left), 5)[1];
+      const leftNiceEnd = d3.nice(0, d3.max(dataLeft, d => d.value_left) || 0, 5)[1];
       const leftY = d3.scaleLinear().domain(y_axis_auto_range_left ? [0, leftNiceEnd] : [y_axis_min_left, y_axis_max_left]).range([chartHeight - insertPadding, insertPadding + marginTop]);
 
       // Y axis (left)
       this.chart.append('g').attr('class', 'y-axis-wrapper-left').attr('transform', `translate(${insertPadding},0)`).call(d3.axisLeft(leftY).tickSizeInner(0).ticks(5).tickFormat(d => BaseUtils.getSummaryValueDisplayString(leftSummaryColumn, d, y_axis_left_summary_method))).call(g => this.drawYaxis(g, theme, rightAxisOffset));
       const fx = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding - rightAxisOffset]).paddingInner(0.5).paddingOuter(0.1);
-      const x = d3.scaleBand().domain(y_axis_left_group_by_multiple_numeric_column ? new Set(data.map(d => d.group_name)) : new Set([data[0]])).range([0, fx.bandwidth()]).paddingInner(y_axis_left_group_by_multiple_numeric_column ? 0.2 : 0).paddingOuter(0);
+      const x = d3.scaleBand().domain(y_axis_left_group_by_multiple_numeric_column ? new Set(dataLeft.map(d => d.group_name)) : new Set([data[0]])).range([0, fx.bandwidth()]).paddingInner(y_axis_left_group_by_multiple_numeric_column ? 0.2 : 0).paddingOuter(0);
 
       // X axis
       this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0,${chartHeight - insertPadding})`).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
@@ -121,7 +131,7 @@ class Combination extends ChartComponent {
       });
 
       // Rect group
-      this.chart.append('g').attr('class', 'content-wrapper').selectAll().data(d3.group(data, d => d.name)).join('g').attr('transform', _ref => {
+      this.chart.append('g').attr('class', 'content-wrapper').selectAll().data(d3.group(dataLeft, d => d.name)).join('g').attr('transform', _ref => {
         let [name, dum] = _ref;
         return `translate(${fx(name)},0)`;
       })
@@ -182,7 +192,9 @@ class Combination extends ChartComponent {
       });
 
       // Line group
-      this.drawRightContent(data, fx, rightY, showRightValue, rightSummaryColumn, rightTitle);
+      if (!rightHidden) {
+        this.drawRightContent(data, fx, rightY, showRightValue, rightSummaryColumn, rightTitle);
+      }
       if (display_goal_line && goal_label && goal_value) {
         this.setDispalyGoalLine(goal_label, goal_value, insertPadding, rightY);
       }

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

@@ -63,7 +63,9 @@ class Completeness extends ChartComponent {
           item.groupby = item.groupby.join(', ');
         }
       });
-      this.setColorMap(data, chartColorTheme, 'groupby', columnGroupbyColumn, chart);
+      const fullData = data;
+      data = this.getVisibleLegendData(data, 'groupby');
+      this.setColorMap(fullData, chartColorTheme, 'groupby', columnGroupbyColumn, chart);
       const newSeries = this.getGroupSeries(data, columnGroupbyColumn, chart);
 
       // Y axis
@@ -191,7 +193,7 @@ class Completeness extends ChartComponent {
         legendName: 'groupby',
         theme,
         legendPosition: 'top-right',
-        data,
+        data: fullData,
         groupColumn: columnGroupbyColumn,
         chart
       });

package/dist/view/wrapper/completeness.js

@@ -32,6 +32,8 @@ class Completeness extends ChartComponent {
       this.draw(data);
     };
     this.draw = data => {
+      const fullData = data;
+      data = this.getVisibleLegendData(data, 'group_name');
       const {
         chart,
         globalTheme,
@@ -144,7 +146,7 @@ class Completeness extends ChartComponent {
         legendName: 'group_name',
         theme,
         legendPosition: 'top-right',
-        data,
+        data: fullData,
         colorScale: group_name => group_name === 'rest' ? '#bdbdbd' : colors[0]
       });
     };

package/dist/view/wrapper/funnel.js

@@ -104,25 +104,46 @@ class Funnel extends ChartComponent {
       const theme = CHART_THEME_COLOR[globalTheme];
       const isInside = funnel_label_position === FUNNEL_LABEL_POSITIONS.INSIDE;
       const title = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
+
+      // Only the visible stages are laid out; the legend still shows every stage.
+      const fullData = data;
+      data = this.getVisibleLegendData(data, 'name');
       const nameDomain = new Set(data.map(item => item.name));
 
-      // Color scale
-      const colorScale = d3.scaleOrdinal().domain(nameDomain).range(['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF']);
+      // Color scale keeps the full domain so stage colors stay stable when toggling.
+      const colorScale = d3.scaleOrdinal().domain(new Set(fullData.map(item => item.name))).range(['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF']);
 
       // Y scale
       const y = d3.scaleBand().domain(nameDomain).range([insertPadding, chartHeight - insertPadding]).paddingInner(0).paddingOuter(0);
 
+      // Reserve horizontal space on both sides for outside labels, otherwise the
+      // widest (top) layer spans nearly the full width and its label is clipped off
+      // the left edge.
+      let labelSpace = 0;
+      if (funnel_show_labels && !isInside) {
+        const measureWrapper = this.chart.append('g').attr('opacity', 0);
+        data.forEach(_ref => {
+          let {
+            name
+          } = _ref;
+          measureWrapper.append('text').attr('font-size', funnel_label_font_size).text(name);
+        });
+        const maxNameWidth = d3.max(measureWrapper.selectAll('text').nodes(), node => node.getBoundingClientRect().width) || 0;
+        measureWrapper.remove();
+        labelSpace = Math.min(maxNameWidth + 10, (chartWidth - insertPadding * 2) * 0.35);
+      }
+
       // X scale
-      const x = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).range([insertPadding, chartWidth - insertPadding]);
+      const x = d3.scaleLinear().domain([0, d3.max(data, d => d.value)]).range([insertPadding + labelSpace, chartWidth - insertPadding - labelSpace]);
 
       // Content
       const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper');
-      const allWidth = chartWidth - insertPadding * 2;
-      data.forEach((_ref, index) => {
+      const allWidth = chartWidth - insertPadding * 2 - labelSpace * 2;
+      data.forEach((_ref2, index) => {
         let {
           name: curName,
           value: curValue
-        } = _ref;
+        } = _ref2;
         const curOffsetX = (allWidth - (x(curValue) - x(0))) / 2;
         let points3X = x(curValue) + curOffsetX;
         let points3Y = y(curName) + y.bandwidth();
@@ -163,7 +184,7 @@ class Funnel extends ChartComponent {
                   width,
                   height
                 } = g.node().getBoundingClientRect();
-                const x = isInside ? left + gWidth / 2 - width / 2 : left - width - 5; // add offsetX is 5
+                const x = isInside ? left + gWidth / 2 - width / 2 : Math.max(left - width - 5, 2); // add offsetX is 5
                 const y = isInside ? top + height + 10 : top + gHeight / 2 + height / 2; // add offsetY is 10
                 g.attr('x', x);
                 g.attr('y', y);
@@ -210,7 +231,7 @@ class Funnel extends ChartComponent {
           legendName: 'name',
           theme,
           legendPosition: 'top-right',
-          data,
+          data: fullData,
           chart,
           colorScale
         });

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

@@ -97,8 +97,10 @@ class HorizontalBarGroup extends ChartComponent {
           };
         });
       }
+      const fullData = data;
+      data = this.getVisibleLegendData(data, 'group_name');
       const useSingleSelectColumnColor = (groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type) === CellType.SINGLE_SELECT && color_theme === SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
-      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(fullData) : this.setColorMap(fullData, chartColorTheme);
       const fy = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.3).paddingOuter(0.1);
       const sortedData = BaseUtils.sortDataByGroupName(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);
@@ -185,7 +187,7 @@ class HorizontalBarGroup extends ChartComponent {
         legendName: 'group_name',
         theme,
         legendPosition: 'top-right',
-        data,
+        data: fullData,
         groupColumn: this.props.columnGroupbyColumn,
         chart
       });

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

@@ -49,6 +49,8 @@ class HorizontalBarStack extends ChartComponent {
       this.renderHorizontalLabel(this.props.chart, this.props.tables, this.container);
     };
     this.draw = data => {
+      const fullData = data;
+      data = this.getVisibleLegendData(data, 'group_name');
       const {
         chart,
         globalTheme,
@@ -76,7 +78,7 @@ class HorizontalBarStack extends ChartComponent {
       } = this.chartBoundingClientRect;
       const groupByColumn = this.getColumn(tables, table_id, column_groupby_column_key);
       const useSingleSelectColumnColor = (groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type) === CellType.SINGLE_SELECT && color_theme === SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
-      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme, 'group_name', columnGroupbyColumn, chart);
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(fullData) : this.setColorMap(fullData, chartColorTheme, 'group_name', columnGroupbyColumn, chart);
       const sortedData = BaseUtils.sortDataByGroupName(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;
@@ -165,7 +167,7 @@ class HorizontalBarStack extends ChartComponent {
         legendName: 'group_name',
         theme,
         legendPosition: 'top-right',
-        data,
+        data: fullData,
         groupColumn: this.props.columnGroupbyColumn,
         chart
       });

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

@@ -121,6 +121,8 @@ class LineGroup extends ChartComponent {
       };
     };
     this.draw = data => {
+      const fullData = data;
+      data = this.getVisibleLegendData(data, 'group_name');
       const {
         chart,
         globalTheme,
@@ -151,7 +153,7 @@ class LineGroup extends ChartComponent {
         marginTop
       } = this.chartBoundingClientRect;
       const useSingleSelectColumnColor = (columnGroupbyColumn === null || columnGroupbyColumn === void 0 ? void 0 : columnGroupbyColumn.type) === CellType.SINGLE_SELECT && color_theme === SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
-      useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme, 'group_name', columnGroupbyColumn, chart);
+      useSingleSelectColumnColor ? this.setSingleSelectColorMap(fullData) : this.setColorMap(fullData, chartColorTheme, 'group_name', columnGroupbyColumn, chart);
 
       // Y axis
       const niceEnd = d3.nice(0, d3.max(data, d => d.value), 5)[1];
@@ -265,7 +267,7 @@ class LineGroup extends ChartComponent {
         legendName: 'group_name',
         theme,
         legendPosition: 'top-right',
-        data,
+        data: fullData,
         groupColumn: this.props.columnGroupbyColumn,
         chart
       });

package/dist/view/wrapper/mirror.js

@@ -84,6 +84,8 @@ class Mirror extends ChartComponent {
         data,
         colorSet
       } = _ref;
+      const fullData = data;
+      data = this.getVisibleLegendData(data, 'group_name');
       const {
         chart,
         tables
@@ -236,12 +238,12 @@ class Mirror extends ChartComponent {
         legendName: 'group_name',
         theme: themeColors,
         legendPosition: 'top-left',
-        data,
+        data: fullData,
         groupColumn: this.props.columnGroupbyColumn,
         chart,
         colorScale: key => {
-          const curD = data.find(item => item.group_name === key);
-          return curD.color || '';
+          const curD = fullData.find(item => item.group_name === key);
+          return (curD === null || curD === void 0 ? void 0 : curD.color) || '';
         }
       });
     };

package/dist/view/wrapper/pie.js

@@ -61,6 +61,9 @@ class Pie extends ChartComponent {
       } = BaseUtils.formatPieChartData(data, chart, tables, currentTheme, useSingleSelectColumnColor);
       if (!Array.isArray(newData) || newData.length === 0) return;
 
+      // Only the visible categories are laid out; the legend still shows every category.
+      const visibleData = this.getVisibleLegendData(newData, 'name');
+
       // Color
       const colorDomain = new Set(newData.map(d => d.name));
       const colorRange = Array.from(colorDomain).map(name => colorMap[name === null || name === void 0 ? void 0 : name.trim()]);
@@ -68,7 +71,7 @@ class Pie extends ChartComponent {
 
       // Pie and Arc
       const pie = d3.pie().sort(null).value(d => d.value);
-      const arcs = pie(newData);
+      const arcs = pie(visibleData);
       const arc = d3.arc().innerRadius(0).outerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7);
 
       // Draw Pie

package/dist/view/wrapper/ring.js

@@ -58,10 +58,14 @@ class Ring extends ChartComponent {
       const {
         data: newData,
         colorMap,
-        total
+        total: fullTotal
       } = BaseUtils.formatPieChartData(data, chart, tables, currentTheme, useSingleSelectColumnColor);
       if (!Array.isArray(newData) || newData.length === 0) return;
 
+      // Only the visible categories are laid out; the legend still shows every category.
+      const visibleData = this.getVisibleLegendData(newData, 'name');
+      const total = visibleData === newData ? fullTotal : d3.sum(visibleData, d => Number(d.value) || 0);
+
       // Color
       const colorDomain = new Set(newData.map(d => d.name));
       const colorRange = Array.from(colorDomain).map(name => colorMap[name === null || name === void 0 ? void 0 : name.trim()]);
@@ -69,7 +73,7 @@ class Ring extends ChartComponent {
 
       // Ring and Arc
       const pie = d3.pie().sort(null).value(d => d.value);
-      const arcs = pie(newData);
+      const arcs = pie(visibleData);
       const arc = d3.arc().innerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.5).outerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7);
 
       // Draw Ring

package/dist/view/wrapper/scatter.js

@@ -167,6 +167,8 @@ class Scatter extends ChartComponent {
       }
     };
     this.draw = data => {
+      const fullData = data;
+      data = this.getVisibleLegendData(data, 'groupby');
       const {
         chart,
         globalTheme,
@@ -191,7 +193,7 @@ class Scatter extends ChartComponent {
         marginTop,
         bottomLegendSpace
       } = this.chartBoundingClientRect;
-      const colorMap = this.getFillColor(data);
+      const colorMap = this.getFillColor(fullData);
       const selectedTable = getTableById(tables, table_id);
       const selectedXAxisColumn = getTableColumnByKey(selectedTable, x_axis_column_key);
       const selectedYAxisColumn = getTableColumnByKey(selectedTable, y_axis_column_key);
@@ -260,7 +262,7 @@ class Scatter extends ChartComponent {
         legendName: 'groupby',
         theme,
         legendPosition: 'top-right',
-        data,
+        data: fullData,
         groupColumn: this.props.columnGroupbyColumn,
         chart,
         colorScale: key => colorMap[key]

package/package.json

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