[charts] Filter item outside the drawing area for perf

packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx

@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import type {} from '../typeOverloads';
 import { Watermark } from '@mui/x-license/Watermark';
 import { ChartContainerProps } from '@mui/x-charts/ChartContainer';
 import { ResizableContainer } from '@mui/x-charts/internals';

packages/x-charts/src/BarChart/BarPlot.tsx

@@ -7,7 +7,7 @@ import { BarElement, BarElementSlotProps, BarElementSlots } from './BarElement';
 import { AxisDefaultized } from '../models/axis';
 import { BarItemIdentifier } from '../models';
 import getColor from './getColor';
-import { useChartId } from '../hooks';
+import { useChartId, useDrawingArea } from '../hooks';
 import { AnimationData, CompletedBarData, MaskData } from './types';
 import { BarClipPath } from './BarClipPath';
 import { BarLabelItemProps, BarLabelSlotProps, BarLabelSlots } from './BarLabel/BarLabelItem';
@@ -92,6 +92,7 @@ const useAggregatedData = (): {
     useBarSeries() ??
     ({ series: {}, stackingGroups: [], seriesOrder: [] } as SeriesFormatterResult<'bar'>);
   const axisData = useCartesianContext();
+  const drawingArea = useDrawingArea();
   const chartId = useChartId();
 
   const { series, stackingGroups } = seriesData;
@@ -102,6 +103,12 @@ const useAggregatedData = (): {
   const masks: Record<string, MaskData> = {};
 
   const data = stackingGroups.flatMap(({ ids: groupIds }, groupIndex) => {
+    const xMin = drawingArea.left;
+    const xMax = drawingArea.left + drawingArea.width;
+
+    const yMin = drawingArea.top;
+    const yMax = drawingArea.top + drawingArea.height;
+
     return groupIds.flatMap((seriesId) => {
       const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
       const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
@@ -132,54 +139,69 @@ const useAggregatedData = (): {
 
       const { stackedData } = series[seriesId];
 
-      return stackedData.map((values, dataIndex: number) => {
-        const valueCoordinates = values.map((v) => (verticalLayout ? yScale(v)! : xScale(v)!));
-
-        const minValueCoord = Math.round(Math.min(...valueCoordinates));
-        const maxValueCoord = Math.round(Math.max(...valueCoordinates));
-
-        const stackId = series[seriesId].stack;
-
-        const result = {
-          seriesId,
-          dataIndex,
-          layout: series[seriesId].layout,
-          x: verticalLayout ? xScale(xAxis[xAxisId].data?.[dataIndex])! + barOffset : minValueCoord,
-          y: verticalLayout ? minValueCoord : yScale(yAxis[yAxisId].data?.[dataIndex])! + barOffset,
-          xOrigin: xScale(0)!,
-          yOrigin: yScale(0)!,
-          height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
-          width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
-          color: colorGetter(dataIndex),
-          value: series[seriesId].data[dataIndex],
-          maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`,
-        };
-
-        if (!masks[result.maskId]) {
-          masks[result.maskId] = {
-            id: result.maskId,
-            width: 0,
-            height: 0,
-            hasNegative: false,
-            hasPositive: false,
-            layout: result.layout,
+      return stackedData
+        .map((values, dataIndex: number) => {
+          const valueCoordinates = values.map((v) => (verticalLayout ? yScale(v)! : xScale(v)!));
+
+          const minValueCoord = Math.round(Math.min(...valueCoordinates));
+          const maxValueCoord = Math.round(Math.max(...valueCoordinates));
+
+          const stackId = series[seriesId].stack;
+
+          const result = {
+            seriesId,
+            dataIndex,
+            layout: series[seriesId].layout,
+            x: verticalLayout
+              ? xScale(xAxis[xAxisId].data?.[dataIndex])! + barOffset
+              : minValueCoord,
+            y: verticalLayout
+              ? minValueCoord
+              : yScale(yAxis[yAxisId].data?.[dataIndex])! + barOffset,
             xOrigin: xScale(0)!,
             yOrigin: yScale(0)!,
-            x: 0,
-            y: 0,
+            height: verticalLayout ? maxValueCoord - minValueCoord : barWidth,
+            width: verticalLayout ? barWidth : maxValueCoord - minValueCoord,
+            color: colorGetter(dataIndex),
+            value: series[seriesId].data[dataIndex],
+            maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`,
           };
-        }
 
-        const mask = masks[result.maskId];
-        mask.width = result.layout === 'vertical' ? result.width : mask.width + result.width;
-        mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
-        mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
-        mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
-        mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
-        mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
-
-        return result;
-      });
+          if (
+            result.x > xMax ||
+            result.x + result.width < xMin ||
+            result.y > yMax ||
+            result.y + result.height < yMin
+          ) {
+            return null;
+          }
+
+          if (!masks[result.maskId]) {
+            masks[result.maskId] = {
+              id: result.maskId,
+              width: 0,
+              height: 0,
+              hasNegative: false,
+              hasPositive: false,
+              layout: result.layout,
+              xOrigin: xScale(0)!,
+              yOrigin: yScale(0)!,
+              x: 0,
+              y: 0,
+            };
+          }
+
+          const mask = masks[result.maskId];
+          mask.width = result.layout === 'vertical' ? result.width : mask.width + result.width;
+          mask.height = result.layout === 'vertical' ? mask.height + result.height : result.height;
+          mask.x = Math.min(mask.x === 0 ? Infinity : mask.x, result.x);
+          mask.y = Math.min(mask.y === 0 ? Infinity : mask.y, result.y);
+          mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
+          mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
+
+          return result;
+        })
+        .filter((rectangle) => rectangle !== null);
     });
   });
 

test/performance-charts/tests/BarChartPro.bench.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { render, cleanup } from '@testing-library/react';
+import { afterEach, bench, describe } from 'vitest';
+import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';
+import { options } from '../utils/options';
+
+describe('BarChartPro', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  const dataLength = 500;
+  const data = Array.from({ length: dataLength + 1 }).map((_, i) => ({
+    x: i,
+    y: 50 + Math.sin(i / 5) * 25,
+  }));
+
+  const xData = data.map((d) => d.x);
+  const yData = data.map((d) => d.y);
+
+  bench(
+    'BarChartPro with big data amount',
+    async () => {
+      const { findByText } = render(
+        <BarChartPro
+          xAxis={[{ id: 'x', scaleType: 'band', data: xData, zoom: { filterMode: 'discard' } }]}
+          zoom={[{ axisId: 'x', start: 0.25, end: 0.75 }]}
+          series={[
+            {
+              data: yData,
+            },
+          ]}
+          width={500}
+          height={300}
+        />,
+      );
+
+      await findByText('60', { ignore: 'span' });
+    },
+    options,
+  );
+});

test/performance-charts/tests/LineChartPro.bench.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { render, cleanup } from '@testing-library/react';
+import { afterEach, bench, describe } from 'vitest';
+import { LineChartPro } from '@mui/x-charts-pro/LineChartPro';
+import { options } from '../utils/options';
+
+describe('LineChartPro', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  const dataLength = 600;
+  const data = Array.from({ length: dataLength }).map((_, i) => ({
+    x: i,
+    y: 50 + Math.sin(i / 5) * 25,
+  }));
+
+  const xData = data.map((d) => d.x);
+  const yData = data.map((d) => d.y);
+
+  bench(
+    'LineChartPro with big data amount',
+    async () => {
+      const { findByText } = render(
+        <LineChartPro
+          xAxis={[{ id: 'x', data: xData, zoom: { filterMode: 'discard' } }]}
+          zoom={[{ axisId: 'x', start: 0.25, end: 0.75 }]}
+          series={[
+            {
+              data: yData,
+            },
+          ]}
+          width={500}
+          height={300}
+        />,
+      );
+
+      await findByText('60', { ignore: 'span' });
+    },
+    options,
+  );
+});

test/performance-charts/tests/ScatterChart.bench.tsx

@@ -24,7 +24,7 @@ describe('ScatterChart', () => {
     async () => {
       const { findByText } = render(
         <ScatterChart
-          xAxis={[{ data: xData }]}
+          xAxis={[{ data: xData, valueFormatter: (v) => v.toLocaleString('en-US') }]}
           series={[
             {
               data,
@@ -35,7 +35,7 @@ describe('ScatterChart', () => {
         />,
       );
 
-      await findByText(dataLength.toLocaleString(), { ignore: 'span' });
+      await findByText(dataLength.toLocaleString('en-US'), { ignore: 'span' });
     },
     options,
   );

test/performance-charts/tests/ScatterChartPro.bench.tsx

@@ -0,0 +1,43 @@
+// import * as React from 'react';
+// // eslint-disable-next-line no-restricted-imports
+// import { render, cleanup } from '@testing-library/react';
+// import { afterEach, bench, describe } from 'vitest';
+// import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
+// import { options } from '../utils/options';
+
+// describe('ScatterChartPro', () => {
+//   afterEach(() => {
+//     cleanup();
+//   });
+
+//   const dataLength = 1_000;
+//   const data = Array.from({ length: dataLength }).map((_, i) => ({
+//     id: i,
+//     x: i,
+//     y: 50 + Math.sin(i / 5) * 25,
+//   }));
+
+//   const xData = data.map((d) => d.x);
+
+//   bench(
+//     'ScatterChartPro with big data amount',
+//     async () => {
+//       const { findByText } = render(
+//         <ScatterChartPro
+//           xAxis={[{ id: 'x', data: xData, zoom: { filterMode: 'discard' } }]}
+//           zoom={[{ axisId: 'x', start: 0.25, end: 0.75 }]}
+//           series={[
+//             {
+//               data,
+//             },
+//           ]}
+//           width={500}
+//           height={300}
+//         />,
+//       );
+
+//       await findByText('70', { ignore: 'span' });
+//     },
+//     options,
+//   );
+// });