[charts] Add VisibilityManager logic to allow managing series/items

packages/x-charts/src/BarChart/extremums.test.ts

@@ -5,6 +5,13 @@ const buildData = (
   data: number[],
   layout: 'vertical' | 'horizontal' = 'vertical',
 ): Parameters<CartesianExtremumGetter<'bar'>>[0] => {
+  const stackData: [number, number][] = data.length
+    ? [
+        [data[0], data[1]],
+        [data[2], data[3]],
+      ]
+    : [];
+
   return {
     series: {
       id1: {
@@ -13,13 +20,10 @@ const buildData = (
         color: 'red',
         data,
         minBarSize: 0,
-        stackedData: data.length
-          ? [
-              [data[0], data[1]],
-              [data[2], data[3]],
-            ]
-          : [],
+        stackedData: stackData,
+        visibleStackedData: stackData,
         layout,
+        hidden: false,
         valueFormatter: () => '',
       },
     },
@@ -41,7 +45,12 @@ const buildDataWithAxisId = (
     layout === 'horizontal'
       ? { yAxisId: 'axis-id', xAxisId: 'other-id' }
       : { xAxisId: 'axis-id', yAxisId: 'other-id' };
-
+  const stackData: [number, number][] = data.length
+    ? [
+        [data[0], data[1]],
+        [data[2], data[3]],
+      ]
+    : [];
   return {
     series: {
       id1: {
@@ -50,13 +59,10 @@ const buildDataWithAxisId = (
         color: 'red',
         data,
         minBarSize: 0,
-        stackedData: data.length
-          ? [
-              [data[0], data[1]],
-              [data[2], data[3]],
-            ]
-          : [],
+        stackedData: stackData,
+        visibleStackedData: stackData,
         layout,
+        hidden: false,
         valueFormatter: () => '',
         ...axesIds,
       },

packages/x-charts/src/BarChart/seriesConfig/bar/seriesProcessor.ts

@@ -11,7 +11,7 @@ type BarDataset = DatasetType<number | null>;
 const barValueFormatter = ((v) =>
   v == null ? '' : v.toLocaleString()) as DefaultizedBarSeriesType['valueFormatter'];
 
-const seriesProcessor: SeriesProcessor<'bar'> = (params, dataset) => {
+const seriesProcessor: SeriesProcessor<'bar'> = (params, dataset, isIdentifierVisible) => {
   const { seriesOrder, series } = params;
   const stackingGroups = getStackingGroups(params);
 
@@ -66,41 +66,101 @@ const seriesProcessor: SeriesProcessor<'bar'> = (params, dataset) => {
 
   const completedSeries: {
     [id: string]: DefaultizedBarSeriesType & {
+      visibleStackedData: [number, number][];
       stackedData: [number, number][];
     };
   } = {};
 
   stackingGroups.forEach((stackingGroup) => {
     const { ids, stackingOffset, stackingOrder } = stackingGroup;
-    // Get stacked values, and derive the domain
-    const stackedSeries = d3Stack<any, DatasetElementType<number | null>, SeriesId>()
-      .keys(
-        ids.map((id) => {
-          // Use dataKey if needed and available
-          const dataKey = series[id].dataKey;
-          return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
-        }),
-      )
+    const keys = ids.map((id) => {
+      // Use dataKey if needed and available
+      const dataKey = series[id].dataKey;
+      return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
+    });
+
+    const stackedData = d3Stack<any, DatasetElementType<number | null>, SeriesId>()
+      .keys(keys)
       .value((d, key) => d[key] ?? 0) // defaultize null value to 0
       .order(stackingOrder)
       .offset(stackingOffset)(d3Dataset);
 
+    // We sort the keys based on the original stacking order to ensure consistency
+    const idOrder = stackedData.sort((a, b) => a.index - b.index).map((s) => s.key);
+
+    // Compute visible stacked data
+    const visibleStackedData = d3Stack<any, DatasetElementType<number | null>, SeriesId>()
+      .keys(idOrder)
+      .value((d, key) => {
+        const keyIndex = keys.indexOf(key);
+        const seriesId = ids[keyIndex];
+
+        if (!isIdentifierVisible?.(`${seriesId}`)) {
+          // For hidden series, return 0 so they don't contribute to the stack
+          return 0;
+        }
+        return d[key] ?? 0;
+      })
+      .offset(stackingOffset)(d3Dataset);
+
+    // Post-process visibleStackedData to fix positions for hidden series
+    // Hidden series should collapse to the cumulative position of visible series before them
+    visibleStackedData.forEach((layer, layerIndex) => {
+      const key = idOrder[layerIndex];
+      const keyIndex = keys.indexOf(key);
+      const seriesId = ids[keyIndex];
+
+      if (!isIdentifierVisible?.(`${seriesId}`)) {
+        layer.forEach((point, pointIndex) => {
+          // Get the original value to determine if it's negative or positive
+          const originalValue = d3Dataset[pointIndex]?.[key] ?? 0;
+          const isNegative = originalValue < 0;
+
+          // Calculate the cumulative sum of all visible series before this one
+          // Only accumulate values with the same sign
+          let cumulativeSum = 0;
+          for (let i = 0; i < layerIndex; i += 1) {
+            const prevKey = idOrder[i];
+            const prevKeyIndex = keys.indexOf(prevKey);
+            const prevSeriesId = ids[prevKeyIndex];
+
+            if (isIdentifierVisible?.(`${prevSeriesId}`)) {
+              const value = d3Dataset[pointIndex]?.[prevKey] ?? 0;
+              const isPrevNegative = value < 0;
+
+              // Only accumulate if both have the same sign
+              if (isNegative === isPrevNegative) {
+                cumulativeSum += value;
+              }
+            }
+          }
+
+          // Set both start and end to the cumulative position (zero height/width)
+          point[0] = cumulativeSum;
+          point[1] = cumulativeSum;
+        });
+      }
+    });
+
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
+      const data = dataKey
+        ? dataset!.map((d) => {
+            const value = d[dataKey];
+            return typeof value === 'number' ? value : null;
+          })
+        : series[id].data!;
+      const hidden = !isIdentifierVisible?.(`${id}`);
       completedSeries[id] = {
         layout: 'vertical',
         labelMarkType: 'square',
         minBarSize: 0,
         valueFormatter: series[id].valueFormatter ?? barValueFormatter,
         ...series[id],
-        data: dataKey
-          ? dataset!.map((data) => {
-              const value = data[dataKey];
-
-              return typeof value === 'number' ? value : null;
-            })
-          : series[id].data!,
-        stackedData: stackedSeries[index].map(([a, b]) => [a, b]),
+        data,
+        hidden,
+        stackedData: stackedData[index] as [number, number][],
+        visibleStackedData: visibleStackedData[index] as [number, number][],
       };
     });
   });

packages/x-charts/src/BarChart/seriesConfig/bar/tooltipPosition.ts

@@ -25,6 +25,7 @@ const tooltipItemPositionGetter: TooltipItemPositionGetter<'bar'> = (params) =>
     dataIndex: identifier.dataIndex,
     numberOfGroups: series.bar.stackingGroups.length,
     groupIndex: series.bar.stackingGroups.findIndex((group) => group.ids.includes(itemSeries.id)),
+    isSeriesVisible: true,
   });
 
   if (dimensions == null) {

packages/x-charts/src/BarChart/types.ts

@@ -24,6 +24,7 @@ export interface ProcessedBarData extends AnimationData {
   color: string;
   value: number | null;
   maskId: string;
+  hidden: boolean;
 }
 
 export interface MaskData extends AnimationData {

packages/x-charts/src/BarChart/useBarPlotData.ts

@@ -75,6 +75,7 @@ export function useBarPlotData(
           dataIndex,
           numberOfGroups: stackingGroups.length,
           groupIndex,
+          isSeriesVisible: !series[seriesId].hidden,
         });
 
         if (barDimensions == null) {
@@ -86,6 +87,8 @@ export function useBarPlotData(
         const result = {
           seriesId,
           dataIndex,
+          layout: series[seriesId].layout,
+          hidden: series[seriesId].hidden,
           ...barDimensions,
           color: colorGetter(dataIndex),
           value: series[seriesId].data[dataIndex],

packages/x-charts/src/LineChart/seriesConfig/seriesProcessor.ts

@@ -1,15 +1,19 @@
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
 import { warnOnce } from '@mui/x-internals/warning';
-import { getStackingGroups } from '../../internals/stackSeries';
+import { getStackingGroups, StackOrder } from '../../internals/stackSeries';
 import {
   type ChartSeriesDefaultized,
   type DatasetElementType,
   type DatasetType,
 } from '../../models/seriesType/config';
 import { type SeriesId } from '../../models/seriesType/common';
 import { type SeriesProcessor } from '../../internals/plugins/models';
+import type { DefaultizedLineSeriesType } from '../../models';
 
-const seriesProcessor: SeriesProcessor<'line'> = (params, dataset) => {
+const lineValueFormatter = ((v) =>
+  v == null ? '' : v.toLocaleString()) as DefaultizedLineSeriesType['valueFormatter'];
+
+const seriesProcessor: SeriesProcessor<'line'> = (params, dataset, isIdentifierVisible) => {
   const { seriesOrder, series } = params;
   const stackingGroups = getStackingGroups({ ...params, defaultStrategy: { stackOffset: 'none' } });
 
@@ -65,36 +69,94 @@ const seriesProcessor: SeriesProcessor<'line'> = (params, dataset) => {
   const completedSeries: Record<SeriesId, ChartSeriesDefaultized<'line'>> = {};
 
   stackingGroups.forEach((stackingGroup) => {
-    // Get stacked values, and derive the domain
-    const { ids, stackingOrder, stackingOffset } = stackingGroup;
-    const stackedSeries = d3Stack<any, DatasetElementType<number | null>, SeriesId>()
-      .keys(
-        ids.map((id) => {
-          // Use dataKey if needed and available
-          const dataKey = series[id].dataKey;
-          return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
-        }),
-      )
+    const { ids, stackingOffset, stackingOrder } = stackingGroup;
+    const keys = ids.map((id) => {
+      // Use dataKey if needed and available
+      const dataKey = series[id].dataKey;
+      return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
+    });
+
+    const stackedData = d3Stack<any, DatasetElementType<number | null>, SeriesId>()
+      .keys(keys)
       .value((d, key) => d[key] ?? 0) // defaultize null value to 0
       .order(stackingOrder)
       .offset(stackingOffset)(d3Dataset);
 
+    // We sort the keys based on the original stacking order to ensure consistency
+    const idOrder = stackedData.sort((a, b) => a.index - b.index).map((s) => s.key);
+
+    // Compute visible stacked data
+    const visibleStackedData = d3Stack<any, DatasetElementType<number | null>, SeriesId>()
+      .keys(idOrder)
+      .value((d, key) => {
+        const keyIndex = keys.indexOf(key);
+        const seriesId = ids[keyIndex];
+
+        if (!isIdentifierVisible?.(`${seriesId}`)) {
+          // For hidden series, return 0 so they don't contribute to the stack
+          return 0;
+        }
+        return d[key] ?? 0;
+      })
+      .order(StackOrder.none)
+      .offset(stackingOffset)(d3Dataset);
+
+    // Post-process visibleStackedData to fix positions for hidden series
+    // Hidden series should collapse to the cumulative position of visible series before them
+    visibleStackedData.forEach((layer, layerIndex) => {
+      const key = idOrder[layerIndex];
+      const keyIndex = keys.indexOf(key);
+      const seriesId = ids[keyIndex];
+
+      if (!isIdentifierVisible?.(`${seriesId}`)) {
+        layer.forEach((point, pointIndex) => {
+          // Get the original value to determine if it's negative or positive
+          const originalValue = d3Dataset[pointIndex]?.[key] ?? 0;
+          const isNegative = originalValue < 0;
+
+          // Calculate the cumulative sum of all visible series before this one
+          // Only accumulate values with the same sign
+          let cumulativeSum = 0;
+          for (let i = 0; i < layerIndex; i += 1) {
+            const prevKey = idOrder[i];
+            const prevKeyIndex = keys.indexOf(prevKey);
+            const prevSeriesId = ids[prevKeyIndex];
+
+            if (isIdentifierVisible?.(`${prevSeriesId}`)) {
+              const value = d3Dataset[pointIndex]?.[prevKey] ?? 0;
+              const isPrevNegative = value < 0;
+
+              // Only accumulate if both have the same sign
+              if (isNegative === isPrevNegative) {
+                cumulativeSum += value;
+              }
+            }
+          }
+
+          // Set both start and end to the cumulative position (zero height/width)
+          point[0] = cumulativeSum;
+          point[1] = cumulativeSum;
+        });
+      }
+    });
+
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
+      const data = dataKey
+        ? dataset!.map((d) => {
+            const value = d[dataKey];
+            return typeof value === 'number' ? value : null;
+          })
+        : series[id].data!;
+      const hidden = !isIdentifierVisible?.(`${id}`);
       completedSeries[id] = {
         labelMarkType: 'line',
         ...series[id],
-        data: dataKey
-          ? dataset!.map((data) => {
-              const value = data[dataKey];
-
-              return typeof value === 'number' ? value : null;
-            })
-          : series[id].data!,
-        stackedData: stackedSeries[index].map(([a, b]) => [a, b]),
-        valueFormatter:
-          series[id]?.valueFormatter ??
-          ((v: number | null) => (v == null ? '' : v.toLocaleString())),
+        data,
+        valueFormatter: series[id].valueFormatter ?? lineValueFormatter,
+        hidden,
+        stackedData: stackedData[index] as [number, number][],
+        visibleStackedData: visibleStackedData[index] as [number, number][],
       };
     });
   });

packages/x-charts/src/LineChart/useAreaPlotData.ts

@@ -43,6 +43,7 @@ export function useAreaPlotData(
         const {
           xAxisId = defaultXAxisId,
           yAxisId = defaultYAxisId,
+          visibleStackedData,
           stackedData,
           data,
           connectNulls,
@@ -94,26 +95,26 @@ export function useAreaPlotData(
           xData?.flatMap((x, index) => {
             const nullData = data[index] == null;
             if (shouldExpand) {
-              const rep = [{ x, y: stackedData[index], nullData, isExtension: false }];
+              const rep = [{ x, y: visibleStackedData[index], nullData, isExtension: false }];
               if (!nullData && (index === 0 || data[index - 1] == null)) {
                 rep.unshift({
                   x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
-                  y: stackedData[index],
+                  y: visibleStackedData[index],
                   nullData,
                   isExtension: true,
                 });
               }
               if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
                 rep.push({
                   x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
-                  y: stackedData[index],
+                  y: visibleStackedData[index],
                   nullData,
                   isExtension: true,
                 });
               }
               return rep;
             }
-            return { x, y: stackedData[index], nullData };
+            return { x, y: visibleStackedData[index], nullData };
           }) ?? [];
 
         const d3Data = connectNulls ? formattedData.filter((d) => !d.nullData) : formattedData;