From a8facf949445da4e9b88b93ffcf32519ca8a9916 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Mon, 26 Aug 2024 19:17:56 +0200 Subject: [PATCH 01/12] useTransition instead of useSpring --- .../x-charts/src/LineChart/AnimatedLine.tsx | 10 +++++-- .../x-charts/src/hooks/useReducedMotion.ts | 29 ++++++++++--------- 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/packages/x-charts/src/LineChart/AnimatedLine.tsx b/packages/x-charts/src/LineChart/AnimatedLine.tsx index 968f44652d01..dce099d5131a 100644 --- a/packages/x-charts/src/LineChart/AnimatedLine.tsx +++ b/packages/x-charts/src/LineChart/AnimatedLine.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { animated, useSpring } from '@react-spring/web'; +import { animated, useTransition } from '@react-spring/web'; import { color as d3Color } from '@mui/x-charts-vendor/d3-color'; import { styled } from '@mui/material/styles'; import { useAnimatedPath } from '../internals/useAnimatedPath'; @@ -52,9 +52,11 @@ function AnimatedLine(props: AnimatedLineProps) { const path = useAnimatedPath(d, skipAnimation); - const { animatedWidth } = useSpring({ + const transitions = useTransition([1], { from: { animatedWidth: left }, to: { animatedWidth: width + left + right }, + enter: { animatedWidth: width + left + right }, + leave: { animatedWidth: left }, reset: false, immediate: skipAnimation, }); @@ -63,7 +65,9 @@ function AnimatedLine(props: AnimatedLineProps) { return ( - + {transitions((style) => ( + + ))} diff --git a/packages/x-charts/src/hooks/useReducedMotion.ts b/packages/x-charts/src/hooks/useReducedMotion.ts index b95f28d4a9da..724e2da21fbe 100644 --- a/packages/x-charts/src/hooks/useReducedMotion.ts +++ b/packages/x-charts/src/hooks/useReducedMotion.ts @@ -1,5 +1,12 @@ import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web'; +const handleMediaChange = (e: { matches: boolean | undefined }) => { + Globals.assign({ + // Modification such the react-spring implementation such that this hook can remove animation but never activate animation. + skipAnimation: e.matches || undefined, + }); +}; + /** * Returns `boolean` or `null`, used to automatically * set skipAnimations to the value of the user's @@ -8,24 +15,18 @@ import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web'; * The return value, post-effect, is the value of their preferred setting */ export const useReducedMotion = () => { - // Taken from: https://github.com/pmndrs/react-spring/blob/02ec877bbfab0df46da0e4a47d5f68d3e731206a/packages/shared/src/hooks/useReducedMotion.ts#L13 + // Taken from: https://github.com/pmndrs/react-spring/blob/fd65b605b85c3a24143c4ce9dd322fdfca9c66be/packages/shared/src/hooks/useReducedMotion.ts useIsomorphicLayoutEffect(() => { - if (!window.matchMedia) { - // skip animation in environments where `window.matchMedia` would not be available (i.e. test/jsdom) - Globals.assign({ - skipAnimation: true, - }); - return () => {}; + // Skip animation test/jsdom + const shouldSkipAnimation = !window?.matchMedia; + + if (shouldSkipAnimation) { + handleMediaChange({ matches: true }); + return undefined; } - const mql = window.matchMedia('(prefers-reduced-motion)'); - const handleMediaChange = (event: MediaQueryListEvent | MediaQueryList) => { - Globals.assign({ - // Modification such the react-spring implementation such that this hook can remove animation but never activate animation. - skipAnimation: event.matches || undefined, - }); - }; + const mql = window.matchMedia('(prefers-reduced-motion)'); handleMediaChange(mql); From 857a19b1ccc8f3c6d0e6e881787f1230a12b23c2 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Mon, 26 Aug 2024 19:56:56 +0200 Subject: [PATCH 02/12] Update Area --- packages/x-charts/src/LineChart/AnimatedArea.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/x-charts/src/LineChart/AnimatedArea.tsx b/packages/x-charts/src/LineChart/AnimatedArea.tsx index adebfc0ac866..2befa5c9f78e 100644 --- a/packages/x-charts/src/LineChart/AnimatedArea.tsx +++ b/packages/x-charts/src/LineChart/AnimatedArea.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { styled } from '@mui/material/styles'; -import { animated, useSpring } from '@react-spring/web'; +import { animated, useTransition } from '@react-spring/web'; import { color as d3Color } from '@mui/x-charts-vendor/d3-color'; import { useAnimatedPath } from '../internals/useAnimatedPath'; import { cleanId } from '../internals/cleanId'; @@ -49,9 +49,11 @@ function AnimatedArea(props: AnimatedAreaProps) { const path = useAnimatedPath(d, skipAnimation); - const { animatedWidth } = useSpring({ + const transitions = useTransition([1], { from: { animatedWidth: left }, to: { animatedWidth: width + left + right }, + enter: { animatedWidth: width + left + right }, + leave: { animatedWidth: left }, reset: false, immediate: skipAnimation, }); @@ -60,7 +62,9 @@ function AnimatedArea(props: AnimatedAreaProps) { return ( - + {transitions((style) => ( + + ))} From 3354098e6913fc643627037a126f159445b1d886 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Mon, 26 Aug 2024 23:10:24 +0200 Subject: [PATCH 03/12] From 5400e44f3eae341c5cba5253878b6ec78ffb1111 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Mon, 26 Aug 2024 23:12:30 +0200 Subject: [PATCH 04/12] pnpm dedupe --- pnpm-lock.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e83bccf13076..2edcde4b95be 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3057,7 +3057,7 @@ packages: resolution: {integrity: sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==} engines: {node: '>=12.0.0'} peerDependencies: - '@types/react': ^17.0.0 || ^18.0.0 + '@types/react': 18.3.3 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 peerDependenciesMeta: From 6ac651364ee5be267e1b95bf9366a74476278e8f Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Tue, 27 Aug 2024 11:25:43 +0200 Subject: [PATCH 05/12] https://github.com/netlify/next-runtime/blob/733a0219e5413aa1eea790af48c745322dbce917/src/index.ts#L7 --- packages/netlify-plugin-cache-docs/index.js | 60 ++++++++++++++++++++- 1 file changed, 59 insertions(+), 1 deletion(-) diff --git a/packages/netlify-plugin-cache-docs/index.js b/packages/netlify-plugin-cache-docs/index.js index e8530f898af3..6a1ff85af02e 100644 --- a/packages/netlify-plugin-cache-docs/index.js +++ b/packages/netlify-plugin-cache-docs/index.js @@ -1 +1,59 @@ -module.exports = require('@mui/monorepo/packages/netlify-plugin-cache-docs'); +/* eslint-disable no-console */ +const path = require('path'); +const fse = require('fs-extra'); + +const CACHE_OUTPUT_FILE = 'cache-output.json'; + +function generateAbsolutePaths(context) { + const { constants } = context; + + const workspaceRoot = path.dirname(constants.CONFIG_PATH); + const docsWorkspacePath = path.join(workspaceRoot, 'docs'); + + const nextjsBuildDir = path.join(docsWorkspacePath, '.next', 'cache'); + + return { nextjsBuildDir }; +} + +module.exports = { + async onPreBuild(context) { + const { constants, utils } = context; + const { nextjsBuildDir } = generateAbsolutePaths({ constants }); + + const cacheExists = fse.existsSync(nextjsBuildDir); + console.log("'%s' exists: %s", nextjsBuildDir, String(cacheExists)); + + const success = await utils.cache.restore(nextjsBuildDir); + + console.log("Restored the cached '%s' folder: %s", nextjsBuildDir, String(success)); + }, + async onBuild(context) { + const { constants, utils } = context; + const { nextjsBuildDir } = generateAbsolutePaths({ constants }); + + const cacheExists = fse.existsSync(nextjsBuildDir); + + if (cacheExists) { + console.log("'%s' exists: %s", nextjsBuildDir, String(cacheExists)); + + const success = await utils.cache.save(nextjsBuildDir); + + console.log("Cached '%s' folder: %s", nextjsBuildDir, String(success)); + } + }, + // debug + // based on: https://github.com/netlify-labs/netlify-plugin-debug-cache/blob/v1.0.3/index.js + async onEnd({ constants, utils }) { + const { PUBLISH_DIR } = constants; + const cacheManifestFileName = CACHE_OUTPUT_FILE; + const cacheManifestPath = path.join(PUBLISH_DIR, cacheManifestFileName); + console.log('Saving cache file manifest for debugging...'); + const files = await utils.cache.list(); + await fse.mkdirp(PUBLISH_DIR); + await fse.writeJSON(cacheManifestPath, files, { spaces: 2 }); + console.log(`Cache file count: ${files.length}`); + console.log(`Cache manifest saved to ${cacheManifestPath}`); + console.log(`Please download the build files to inspect ${cacheManifestFileName}.`); + console.log('Instructions => http://bit.ly/netlify-dl-cache'); + }, +}; From 6331aa5b0ba21ba3e242ee9755926509e02d6fcf Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Tue, 27 Aug 2024 11:51:32 +0200 Subject: [PATCH 06/12] Revert "https://github.com/netlify/next-runtime/blob/733a0219e5413aa1eea790af48c745322dbce917/src/index.ts#L7" This reverts commit 6ac651364ee5be267e1b95bf9366a74476278e8f. --- packages/netlify-plugin-cache-docs/index.js | 60 +-------------------- 1 file changed, 1 insertion(+), 59 deletions(-) diff --git a/packages/netlify-plugin-cache-docs/index.js b/packages/netlify-plugin-cache-docs/index.js index 6a1ff85af02e..e8530f898af3 100644 --- a/packages/netlify-plugin-cache-docs/index.js +++ b/packages/netlify-plugin-cache-docs/index.js @@ -1,59 +1 @@ -/* eslint-disable no-console */ -const path = require('path'); -const fse = require('fs-extra'); - -const CACHE_OUTPUT_FILE = 'cache-output.json'; - -function generateAbsolutePaths(context) { - const { constants } = context; - - const workspaceRoot = path.dirname(constants.CONFIG_PATH); - const docsWorkspacePath = path.join(workspaceRoot, 'docs'); - - const nextjsBuildDir = path.join(docsWorkspacePath, '.next', 'cache'); - - return { nextjsBuildDir }; -} - -module.exports = { - async onPreBuild(context) { - const { constants, utils } = context; - const { nextjsBuildDir } = generateAbsolutePaths({ constants }); - - const cacheExists = fse.existsSync(nextjsBuildDir); - console.log("'%s' exists: %s", nextjsBuildDir, String(cacheExists)); - - const success = await utils.cache.restore(nextjsBuildDir); - - console.log("Restored the cached '%s' folder: %s", nextjsBuildDir, String(success)); - }, - async onBuild(context) { - const { constants, utils } = context; - const { nextjsBuildDir } = generateAbsolutePaths({ constants }); - - const cacheExists = fse.existsSync(nextjsBuildDir); - - if (cacheExists) { - console.log("'%s' exists: %s", nextjsBuildDir, String(cacheExists)); - - const success = await utils.cache.save(nextjsBuildDir); - - console.log("Cached '%s' folder: %s", nextjsBuildDir, String(success)); - } - }, - // debug - // based on: https://github.com/netlify-labs/netlify-plugin-debug-cache/blob/v1.0.3/index.js - async onEnd({ constants, utils }) { - const { PUBLISH_DIR } = constants; - const cacheManifestFileName = CACHE_OUTPUT_FILE; - const cacheManifestPath = path.join(PUBLISH_DIR, cacheManifestFileName); - console.log('Saving cache file manifest for debugging...'); - const files = await utils.cache.list(); - await fse.mkdirp(PUBLISH_DIR); - await fse.writeJSON(cacheManifestPath, files, { spaces: 2 }); - console.log(`Cache file count: ${files.length}`); - console.log(`Cache manifest saved to ${cacheManifestPath}`); - console.log(`Please download the build files to inspect ${cacheManifestFileName}.`); - console.log('Instructions => http://bit.ly/netlify-dl-cache'); - }, -}; +module.exports = require('@mui/monorepo/packages/netlify-plugin-cache-docs'); From aebcf5a4f7b22963c963586798845abac69fea38 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Wed, 28 Aug 2024 13:05:00 +0200 Subject: [PATCH 07/12] revert dedupe --- pnpm-lock.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1c356fd20f21..91a7006a09dc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3045,7 +3045,7 @@ packages: resolution: {integrity: sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==} engines: {node: '>=12.0.0'} peerDependencies: - '@types/react': 18.3.3 + '@types/react': ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 peerDependenciesMeta: From dac29e3d5662a6704515cf4f6c067094ffbcaa25 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Wed, 28 Aug 2024 14:30:04 +0200 Subject: [PATCH 08/12] remove useAnimatedPath in favour of useStringInterpolator + useTransition --- .../x-charts/src/LineChart/AnimatedArea.tsx | 20 ++++++++++++++----- .../x-charts/src/LineChart/AnimatedLine.tsx | 20 ++++++++++++++----- ...imatedPath.ts => useStringInterpolator.ts} | 15 ++------------ 3 files changed, 32 insertions(+), 23 deletions(-) rename packages/x-charts/src/internals/{useAnimatedPath.ts => useStringInterpolator.ts} (68%) diff --git a/packages/x-charts/src/LineChart/AnimatedArea.tsx b/packages/x-charts/src/LineChart/AnimatedArea.tsx index 2befa5c9f78e..0a1c8ec420b3 100644 --- a/packages/x-charts/src/LineChart/AnimatedArea.tsx +++ b/packages/x-charts/src/LineChart/AnimatedArea.tsx @@ -3,10 +3,10 @@ import PropTypes from 'prop-types'; import { styled } from '@mui/material/styles'; import { animated, useTransition } from '@react-spring/web'; import { color as d3Color } from '@mui/x-charts-vendor/d3-color'; -import { useAnimatedPath } from '../internals/useAnimatedPath'; import { cleanId } from '../internals/cleanId'; import type { AreaElementOwnerState } from './AreaElement'; import { useChartId, useDrawingArea } from '../hooks'; +import { useStringInterpolator } from '../internals/useStringInterpolator'; export const AreaElementPath = styled(animated.path, { name: 'MuiAreaElement', @@ -47,9 +47,9 @@ function AnimatedArea(props: AnimatedAreaProps) { const { left, top, right, bottom, width, height } = useDrawingArea(); const chartId = useChartId(); - const path = useAnimatedPath(d, skipAnimation); + const stringInterpolator = useStringInterpolator(d); - const transitions = useTransition([1], { + const transitionAppear = useTransition([1], { from: { animatedWidth: left }, to: { animatedWidth: width + left + right }, enter: { animatedWidth: width + left + right }, @@ -58,16 +58,26 @@ function AnimatedArea(props: AnimatedAreaProps) { immediate: skipAnimation, }); + const transitionChange = useTransition([stringInterpolator], { + from: { value: 0 }, + to: { value: 1 }, + enter: { value: 1 }, + reset: false, + immediate: skipAnimation, + }); + const clipId = cleanId(`${chartId}-${ownerState.id}-area-clip`); return ( - {transitions((style) => ( + {transitionAppear((style) => ( ))} - + {transitionChange((style, interpolator) => ( + + ))} ); diff --git a/packages/x-charts/src/LineChart/AnimatedLine.tsx b/packages/x-charts/src/LineChart/AnimatedLine.tsx index dce099d5131a..50c09474ba44 100644 --- a/packages/x-charts/src/LineChart/AnimatedLine.tsx +++ b/packages/x-charts/src/LineChart/AnimatedLine.tsx @@ -3,11 +3,11 @@ import PropTypes from 'prop-types'; import { animated, useTransition } from '@react-spring/web'; import { color as d3Color } from '@mui/x-charts-vendor/d3-color'; import { styled } from '@mui/material/styles'; -import { useAnimatedPath } from '../internals/useAnimatedPath'; import { cleanId } from '../internals/cleanId'; import type { LineElementOwnerState } from './LineElement'; import { useChartId } from '../hooks/useChartId'; import { useDrawingArea } from '../hooks/useDrawingArea'; +import { useStringInterpolator } from '../internals/useStringInterpolator'; export const LineElementPath = styled(animated.path, { name: 'MuiLineElement', @@ -50,9 +50,9 @@ function AnimatedLine(props: AnimatedLineProps) { const { left, top, bottom, width, height, right } = useDrawingArea(); const chartId = useChartId(); - const path = useAnimatedPath(d, skipAnimation); + const stringInterpolator = useStringInterpolator(d); - const transitions = useTransition([1], { + const transitionAppear = useTransition([1], { from: { animatedWidth: left }, to: { animatedWidth: width + left + right }, enter: { animatedWidth: width + left + right }, @@ -61,16 +61,26 @@ function AnimatedLine(props: AnimatedLineProps) { immediate: skipAnimation, }); + const transitionChange = useTransition([stringInterpolator], { + from: { value: 0 }, + to: { value: 1 }, + enter: { value: 1 }, + reset: false, + immediate: skipAnimation, + }); + const clipId = cleanId(`${chartId}-${ownerState.id}-line-clip`); return ( - {transitions((style) => ( + {transitionAppear((style) => ( ))} - + {transitionChange((style, interpolator) => ( + + ))} ); diff --git a/packages/x-charts/src/internals/useAnimatedPath.ts b/packages/x-charts/src/internals/useStringInterpolator.ts similarity index 68% rename from packages/x-charts/src/internals/useAnimatedPath.ts rename to packages/x-charts/src/internals/useStringInterpolator.ts index 03b0470b0db0..2b0faa3cd851 100644 --- a/packages/x-charts/src/internals/useAnimatedPath.ts +++ b/packages/x-charts/src/internals/useStringInterpolator.ts @@ -1,6 +1,5 @@ import * as React from 'react'; import { interpolateString } from '@mui/x-charts-vendor/d3-interpolate'; -import { useSpring } from '@react-spring/web'; function usePrevious(value: T) { const ref = React.useRef<{ currentPath: T; previousPath?: T }>({ @@ -17,7 +16,7 @@ function usePrevious(value: T) { return ref.current; } -export const useAnimatedPath = (path: string, skipAnimation?: boolean) => { +export const useStringInterpolator = (path: string) => { const memoryRef = usePrevious(path); const interpolator = React.useMemo( @@ -28,15 +27,5 @@ export const useAnimatedPath = (path: string, skipAnimation?: boolean) => { [memoryRef.currentPath, memoryRef.previousPath], ); - const [{ value }] = useSpring( - { - from: { value: 0 }, - to: { value: 1 }, - reset: true, - immediate: skipAnimation, - }, - [memoryRef.currentPath], - ); - - return value.to(interpolator); + return interpolator; }; From fa84808ac5b22798309da0764f90b1466ae94695 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Wed, 28 Aug 2024 17:00:45 +0200 Subject: [PATCH 09/12] Move area components to Area folder --- .../src/LineChart/{ => Area}/AnimatedArea.tsx | 6 +++--- .../src/LineChart/{ => Area}/AreaElement.tsx | 8 ++++---- .../src/LineChart/{ => Area}/AreaPlot.tsx | 16 ++++++++-------- packages/x-charts/src/LineChart/Area/index.ts | 3 +++ packages/x-charts/src/LineChart/LineChart.tsx | 2 +- packages/x-charts/src/LineChart/index.ts | 4 +--- .../x-charts/src/LineChart/useLineChartProps.ts | 2 +- .../src/SparkLineChart/SparkLineChart.tsx | 2 +- 8 files changed, 22 insertions(+), 21 deletions(-) rename packages/x-charts/src/LineChart/{ => Area}/AnimatedArea.tsx (94%) rename packages/x-charts/src/LineChart/{ => Area}/AreaElement.tsx (93%) rename packages/x-charts/src/LineChart/{ => Area}/AreaPlot.tsx (92%) create mode 100644 packages/x-charts/src/LineChart/Area/index.ts diff --git a/packages/x-charts/src/LineChart/AnimatedArea.tsx b/packages/x-charts/src/LineChart/Area/AnimatedArea.tsx similarity index 94% rename from packages/x-charts/src/LineChart/AnimatedArea.tsx rename to packages/x-charts/src/LineChart/Area/AnimatedArea.tsx index 0a1c8ec420b3..60006c41ab1f 100644 --- a/packages/x-charts/src/LineChart/AnimatedArea.tsx +++ b/packages/x-charts/src/LineChart/Area/AnimatedArea.tsx @@ -3,10 +3,10 @@ import PropTypes from 'prop-types'; import { styled } from '@mui/material/styles'; import { animated, useTransition } from '@react-spring/web'; import { color as d3Color } from '@mui/x-charts-vendor/d3-color'; -import { cleanId } from '../internals/cleanId'; +import { cleanId } from '../../internals/cleanId'; import type { AreaElementOwnerState } from './AreaElement'; -import { useChartId, useDrawingArea } from '../hooks'; -import { useStringInterpolator } from '../internals/useStringInterpolator'; +import { useChartId, useDrawingArea } from '../../hooks'; +import { useStringInterpolator } from '../../internals/useStringInterpolator'; export const AreaElementPath = styled(animated.path, { name: 'MuiAreaElement', diff --git a/packages/x-charts/src/LineChart/AreaElement.tsx b/packages/x-charts/src/LineChart/Area/AreaElement.tsx similarity index 93% rename from packages/x-charts/src/LineChart/AreaElement.tsx rename to packages/x-charts/src/LineChart/Area/AreaElement.tsx index ab692866824a..616fe9346c70 100644 --- a/packages/x-charts/src/LineChart/AreaElement.tsx +++ b/packages/x-charts/src/LineChart/Area/AreaElement.tsx @@ -4,11 +4,11 @@ import composeClasses from '@mui/utils/composeClasses'; import useSlotProps from '@mui/utils/useSlotProps'; import generateUtilityClass from '@mui/utils/generateUtilityClass'; import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; -import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps'; -import { useInteractionItemProps } from '../hooks/useInteractionItemProps'; +import { SlotComponentPropsFromProps } from '../../internals/SlotComponentPropsFromProps'; +import { useInteractionItemProps } from '../../hooks/useInteractionItemProps'; import { AnimatedArea, AnimatedAreaProps } from './AnimatedArea'; -import { SeriesId } from '../models/seriesType/common'; -import { useItemHighlighted } from '../context'; +import { SeriesId } from '../../models/seriesType/common'; +import { useItemHighlighted } from '../../context/HighlightedProvider'; export interface AreaElementClasses { /** Styles applied to the root element. */ diff --git a/packages/x-charts/src/LineChart/AreaPlot.tsx b/packages/x-charts/src/LineChart/Area/AreaPlot.tsx similarity index 92% rename from packages/x-charts/src/LineChart/AreaPlot.tsx rename to packages/x-charts/src/LineChart/Area/AreaPlot.tsx index 01956e3b847b..d8ea245a5748 100644 --- a/packages/x-charts/src/LineChart/AreaPlot.tsx +++ b/packages/x-charts/src/LineChart/Area/AreaPlot.tsx @@ -1,20 +1,20 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { area as d3Area } from '@mui/x-charts-vendor/d3-shape'; -import { useCartesianContext } from '../context/CartesianProvider'; +import { useCartesianContext } from '../../context/CartesianProvider'; import { AreaElement, AreaElementProps, AreaElementSlotProps, AreaElementSlots, } from './AreaElement'; -import { getValueToPositionMapper } from '../hooks/useScale'; -import getCurveFactory from '../internals/getCurve'; -import { DEFAULT_X_AXIS_KEY } from '../constants'; -import { LineItemIdentifier } from '../models/seriesType/line'; -import { useChartGradient } from '../internals/components/ChartsAxesGradients'; -import { useLineSeries } from '../hooks/useSeries'; -import { AxisId } from '../models/axis'; +import { getValueToPositionMapper } from '../../hooks/useScale'; +import getCurveFactory from '../../internals/getCurve'; +import { DEFAULT_X_AXIS_KEY } from '../../constants'; +import { LineItemIdentifier } from '../../models/seriesType/line'; +import { useChartGradient } from '../../internals/components/ChartsAxesGradients'; +import { useLineSeries } from '../../hooks/useSeries'; +import { AxisId } from '../../models/axis'; export interface AreaPlotSlots extends AreaElementSlots {} diff --git a/packages/x-charts/src/LineChart/Area/index.ts b/packages/x-charts/src/LineChart/Area/index.ts new file mode 100644 index 000000000000..354e26534233 --- /dev/null +++ b/packages/x-charts/src/LineChart/Area/index.ts @@ -0,0 +1,3 @@ +export * from './AnimatedArea'; +export * from './AreaElement'; +export * from './AreaPlot'; diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index 0bd258bfd715..83c32351f609 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { useThemeProps } from '@mui/material/styles'; -import { AreaPlot, AreaPlotProps, AreaPlotSlotProps, AreaPlotSlots } from './AreaPlot'; +import { AreaPlot, AreaPlotProps, AreaPlotSlotProps, AreaPlotSlots } from './Area'; import { LinePlot, LinePlotProps, LinePlotSlotProps, LinePlotSlots } from './LinePlot'; import { ResponsiveChartContainer, diff --git a/packages/x-charts/src/LineChart/index.ts b/packages/x-charts/src/LineChart/index.ts index 6ac814459035..836e9f9f1cc3 100644 --- a/packages/x-charts/src/LineChart/index.ts +++ b/packages/x-charts/src/LineChart/index.ts @@ -1,12 +1,10 @@ export * from './LineChart'; export * from './LinePlot'; -export * from './AreaPlot'; +export * from './Area'; export * from './MarkPlot'; export * from './LineHighlightPlot'; -export * from './AreaElement'; -export * from './AnimatedArea'; export * from './LineElement'; export * from './AnimatedLine'; export * from './MarkElement'; diff --git a/packages/x-charts/src/LineChart/useLineChartProps.ts b/packages/x-charts/src/LineChart/useLineChartProps.ts index 6841c5e927cd..82ad6bc1e882 100644 --- a/packages/x-charts/src/LineChart/useLineChartProps.ts +++ b/packages/x-charts/src/LineChart/useLineChartProps.ts @@ -5,7 +5,7 @@ import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer'; import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler'; import { ChartsGridProps } from '../ChartsGrid'; import { ChartsClipPathProps } from '../ChartsClipPath'; -import { AreaPlotProps } from './AreaPlot'; +import { AreaPlotProps } from './Area'; import { LinePlotProps } from './LinePlot'; import { MarkPlotProps } from './MarkPlot'; import { ChartsOverlayProps } from '../ChartsOverlay'; diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx index 5a1ba89889c8..feef32382981 100644 --- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx +++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx @@ -18,7 +18,7 @@ import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../mo import { MakeOptional } from '../models/helpers'; import { LineSeriesType } from '../models/seriesType/line'; import { CardinalDirections } from '../models/layout'; -import { AreaPlotSlots, AreaPlotSlotProps } from '../LineChart/AreaPlot'; +import { AreaPlotSlots, AreaPlotSlotProps } from '../LineChart/Area'; import { LinePlotSlots, LinePlotSlotProps } from '../LineChart/LinePlot'; import { MarkPlotSlots, MarkPlotSlotProps } from '../LineChart/MarkPlot'; import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from '../LineChart/LineHighlightPlot'; From 3d2b2be16d0d4c8b2bfb7d6e745600843fa3bd7c Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Thu, 29 Aug 2024 14:19:23 +0200 Subject: [PATCH 10/12] Memo area/line plot --- .../x-charts/src/LineChart/Area/AreaPlot.tsx | 184 +++++++++--------- packages/x-charts/src/LineChart/LinePlot.tsx | 142 +++++++------- 2 files changed, 168 insertions(+), 158 deletions(-) diff --git a/packages/x-charts/src/LineChart/Area/AreaPlot.tsx b/packages/x-charts/src/LineChart/Area/AreaPlot.tsx index d8ea245a5748..357926a38637 100644 --- a/packages/x-charts/src/LineChart/Area/AreaPlot.tsx +++ b/packages/x-charts/src/LineChart/Area/AreaPlot.tsx @@ -38,99 +38,103 @@ const useAggregatedData = () => { const seriesData = useLineSeries(); const axisData = useCartesianContext(); - if (seriesData === undefined) { - return []; - } - - const { series, stackingGroups } = seriesData; - const { xAxis, yAxis, xAxisIds, yAxisIds } = axisData; - const defaultXAxisId = xAxisIds[0]; - const defaultYAxisId = yAxisIds[0]; - - return stackingGroups.flatMap(({ ids: groupIds }) => { - return [...groupIds] - .reverse() // Revert stacked area for a more pleasant animation - .map((seriesId) => { - const { - xAxisId: xAxisIdProp, - yAxisId: yAxisIdProp, - xAxisKey = defaultXAxisId, - yAxisKey = defaultYAxisId, - stackedData, - data, - connectNulls, - baseline, - } = series[seriesId]; - - const xAxisId = xAxisIdProp ?? xAxisKey; - const yAxisId = yAxisIdProp ?? yAxisKey; - - const xScale = getValueToPositionMapper(xAxis[xAxisId].scale); - const yScale = yAxis[yAxisId].scale; - const xData = xAxis[xAxisId].data; - - const gradientUsed: [AxisId, 'x' | 'y'] | undefined = - (yAxis[yAxisId].colorScale && [yAxisId, 'y']) || - (xAxis[xAxisId].colorScale && [xAxisId, 'x']) || - undefined; - - if (process.env.NODE_ENV !== 'production') { - if (xData === undefined) { - throw new Error( - `MUI X: ${ - xAxisId === DEFAULT_X_AXIS_KEY - ? 'The first `xAxis`' - : `The x-axis with id "${xAxisId}"` - } should have data property to be able to display a line plot.`, - ); - } - if (xData.length < stackedData.length) { - throw new Error( - `MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, - ); - } - } - - const areaPath = d3Area<{ - x: any; - y: [number, number]; - }>() - .x((d) => xScale(d.x)) - .defined((_, i) => connectNulls || data[i] != null) - .y0((d) => { - if (typeof baseline === 'number') { - return yScale(baseline)!; - } - if (baseline === 'max') { - return yScale.range()[1]; + const allData = React.useMemo(() => { + if (seriesData === undefined) { + return []; + } + + const { series, stackingGroups } = seriesData; + const { xAxis, yAxis, xAxisIds, yAxisIds } = axisData; + const defaultXAxisId = xAxisIds[0]; + const defaultYAxisId = yAxisIds[0]; + + return stackingGroups.flatMap(({ ids: groupIds }) => { + return [...groupIds] + .reverse() // Revert stacked area for a more pleasant animation + .map((seriesId) => { + const { + xAxisId: xAxisIdProp, + yAxisId: yAxisIdProp, + xAxisKey = defaultXAxisId, + yAxisKey = defaultYAxisId, + stackedData, + data, + connectNulls, + baseline, + } = series[seriesId]; + + const xAxisId = xAxisIdProp ?? xAxisKey; + const yAxisId = yAxisIdProp ?? yAxisKey; + + const xScale = getValueToPositionMapper(xAxis[xAxisId].scale); + const yScale = yAxis[yAxisId].scale; + const xData = xAxis[xAxisId].data; + + const gradientUsed: [AxisId, 'x' | 'y'] | undefined = + (yAxis[yAxisId].colorScale && [yAxisId, 'y']) || + (xAxis[xAxisId].colorScale && [xAxisId, 'x']) || + undefined; + + if (process.env.NODE_ENV !== 'production') { + if (xData === undefined) { + throw new Error( + `MUI X: ${ + xAxisId === DEFAULT_X_AXIS_KEY + ? 'The first `xAxis`' + : `The x-axis with id "${xAxisId}"` + } should have data property to be able to display a line plot.`, + ); } - if (baseline === 'min') { - return yScale.range()[0]; + if (xData.length < stackedData.length) { + throw new Error( + `MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, + ); } + } - const value = d.y && yScale(d.y[0])!; - if (Number.isNaN(value)) { - return yScale.range()[0]; - } - return value; - }) - .y1((d) => d.y && yScale(d.y[1])!); - - const curve = getCurveFactory(series[seriesId].curve); - const formattedData = xData?.map((x, index) => ({ x, y: stackedData[index] })) ?? []; - const d3Data = connectNulls - ? formattedData.filter((_, i) => data[i] != null) - : formattedData; - - const d = areaPath.curve(curve)(d3Data) || ''; - return { - ...series[seriesId], - gradientUsed, - d, - seriesId, - }; - }); - }); + const areaPath = d3Area<{ + x: any; + y: [number, number]; + }>() + .x((d) => xScale(d.x)) + .defined((_, i) => connectNulls || data[i] != null) + .y0((d) => { + if (typeof baseline === 'number') { + return yScale(baseline)!; + } + if (baseline === 'max') { + return yScale.range()[1]; + } + if (baseline === 'min') { + return yScale.range()[0]; + } + + const value = d.y && yScale(d.y[0])!; + if (Number.isNaN(value)) { + return yScale.range()[0]; + } + return value; + }) + .y1((d) => d.y && yScale(d.y[1])!); + + const curve = getCurveFactory(series[seriesId].curve); + const formattedData = xData?.map((x, index) => ({ x, y: stackedData[index] })) ?? []; + const d3Data = connectNulls + ? formattedData.filter((_, i) => data[i] != null) + : formattedData; + + const d = areaPath.curve(curve)(d3Data) || ''; + return { + ...series[seriesId], + gradientUsed, + d, + seriesId, + }; + }); + }); + }, [seriesData, axisData]); + + return allData; }; /** diff --git a/packages/x-charts/src/LineChart/LinePlot.tsx b/packages/x-charts/src/LineChart/LinePlot.tsx index 96603b232d98..70450378256a 100644 --- a/packages/x-charts/src/LineChart/LinePlot.tsx +++ b/packages/x-charts/src/LineChart/LinePlot.tsx @@ -38,76 +38,82 @@ const useAggregatedData = () => { const seriesData = useLineSeries(); const axisData = useCartesianContext(); - if (seriesData === undefined) { - return []; - } - - const { series, stackingGroups } = seriesData; - const { xAxis, yAxis, xAxisIds, yAxisIds } = axisData; - const defaultXAxisId = xAxisIds[0]; - const defaultYAxisId = yAxisIds[0]; - - return stackingGroups.flatMap(({ ids: groupIds }) => { - return groupIds.flatMap((seriesId) => { - const { - xAxisId: xAxisIdProp, - yAxisId: yAxisIdProp, - xAxisKey = defaultXAxisId, - yAxisKey = defaultYAxisId, - stackedData, - data, - connectNulls, - } = series[seriesId]; - - const xAxisId = xAxisIdProp ?? xAxisKey; - const yAxisId = yAxisIdProp ?? yAxisKey; - - const xScale = getValueToPositionMapper(xAxis[xAxisId].scale); - const yScale = yAxis[yAxisId].scale; - const xData = xAxis[xAxisId].data; - - const gradientUsed: [AxisId, 'x' | 'y'] | undefined = - (yAxis[yAxisId].colorScale && [yAxisId, 'y']) || - (xAxis[xAxisId].colorScale && [xAxisId, 'x']) || - undefined; - - if (process.env.NODE_ENV !== 'production') { - if (xData === undefined) { - throw new Error( - `MUI X: ${ - xAxisId === DEFAULT_X_AXIS_KEY - ? 'The first `xAxis`' - : `The x-axis with id "${xAxisId}"` - } should have data property to be able to display a line plot.`, - ); + const allData = React.useMemo(() => { + if (seriesData === undefined) { + return []; + } + + const { series, stackingGroups } = seriesData; + const { xAxis, yAxis, xAxisIds, yAxisIds } = axisData; + const defaultXAxisId = xAxisIds[0]; + const defaultYAxisId = yAxisIds[0]; + + return stackingGroups.flatMap(({ ids: groupIds }) => { + return groupIds.flatMap((seriesId) => { + const { + xAxisId: xAxisIdProp, + yAxisId: yAxisIdProp, + xAxisKey = defaultXAxisId, + yAxisKey = defaultYAxisId, + stackedData, + data, + connectNulls, + } = series[seriesId]; + + const xAxisId = xAxisIdProp ?? xAxisKey; + const yAxisId = yAxisIdProp ?? yAxisKey; + + const xScale = getValueToPositionMapper(xAxis[xAxisId].scale); + const yScale = yAxis[yAxisId].scale; + const xData = xAxis[xAxisId].data; + + const gradientUsed: [AxisId, 'x' | 'y'] | undefined = + (yAxis[yAxisId].colorScale && [yAxisId, 'y']) || + (xAxis[xAxisId].colorScale && [xAxisId, 'x']) || + undefined; + + if (process.env.NODE_ENV !== 'production') { + if (xData === undefined) { + throw new Error( + `MUI X: ${ + xAxisId === DEFAULT_X_AXIS_KEY + ? 'The first `xAxis`' + : `The x-axis with id "${xAxisId}"` + } should have data property to be able to display a line plot.`, + ); + } + if (xData.length < stackedData.length) { + throw new Error( + `MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, + ); + } } - if (xData.length < stackedData.length) { - throw new Error( - `MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, - ); - } - } - - const linePath = d3Line<{ - x: any; - y: [number, number]; - }>() - .x((d) => xScale(d.x)) - .defined((_, i) => connectNulls || data[i] != null) - .y((d) => yScale(d.y[1])!); - - const formattedData = xData?.map((x, index) => ({ x, y: stackedData[index] })) ?? []; - const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData; - - const d = linePath.curve(getCurveFactory(series[seriesId].curve))(d3Data) || ''; - return { - ...series[seriesId], - gradientUsed, - d, - seriesId, - }; + + const linePath = d3Line<{ + x: any; + y: [number, number]; + }>() + .x((d) => xScale(d.x)) + .defined((_, i) => connectNulls || data[i] != null) + .y((d) => yScale(d.y[1])!); + + const formattedData = xData?.map((x, index) => ({ x, y: stackedData[index] })) ?? []; + const d3Data = connectNulls + ? formattedData.filter((_, i) => data[i] != null) + : formattedData; + + const d = linePath.curve(getCurveFactory(series[seriesId].curve))(d3Data) || ''; + return { + ...series[seriesId], + gradientUsed, + d, + seriesId, + }; + }); }); - }); + }, [seriesData, axisData]); + + return allData; }; /** From 871e1c2b79cc9faf597324eb0ffef27ebffdeda0 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Thu, 29 Aug 2024 14:19:38 +0200 Subject: [PATCH 11/12] Revert "Move area components to Area folder" This reverts commit fa84808ac5b22798309da0764f90b1466ae94695. --- .../src/LineChart/{Area => }/AnimatedArea.tsx | 6 +++--- packages/x-charts/src/LineChart/Area/index.ts | 3 --- .../src/LineChart/{Area => }/AreaElement.tsx | 8 ++++---- .../src/LineChart/{Area => }/AreaPlot.tsx | 16 ++++++++-------- packages/x-charts/src/LineChart/LineChart.tsx | 2 +- packages/x-charts/src/LineChart/index.ts | 4 +++- .../x-charts/src/LineChart/useLineChartProps.ts | 2 +- .../src/SparkLineChart/SparkLineChart.tsx | 2 +- 8 files changed, 21 insertions(+), 22 deletions(-) rename packages/x-charts/src/LineChart/{Area => }/AnimatedArea.tsx (94%) delete mode 100644 packages/x-charts/src/LineChart/Area/index.ts rename packages/x-charts/src/LineChart/{Area => }/AreaElement.tsx (93%) rename packages/x-charts/src/LineChart/{Area => }/AreaPlot.tsx (92%) diff --git a/packages/x-charts/src/LineChart/Area/AnimatedArea.tsx b/packages/x-charts/src/LineChart/AnimatedArea.tsx similarity index 94% rename from packages/x-charts/src/LineChart/Area/AnimatedArea.tsx rename to packages/x-charts/src/LineChart/AnimatedArea.tsx index 60006c41ab1f..0a1c8ec420b3 100644 --- a/packages/x-charts/src/LineChart/Area/AnimatedArea.tsx +++ b/packages/x-charts/src/LineChart/AnimatedArea.tsx @@ -3,10 +3,10 @@ import PropTypes from 'prop-types'; import { styled } from '@mui/material/styles'; import { animated, useTransition } from '@react-spring/web'; import { color as d3Color } from '@mui/x-charts-vendor/d3-color'; -import { cleanId } from '../../internals/cleanId'; +import { cleanId } from '../internals/cleanId'; import type { AreaElementOwnerState } from './AreaElement'; -import { useChartId, useDrawingArea } from '../../hooks'; -import { useStringInterpolator } from '../../internals/useStringInterpolator'; +import { useChartId, useDrawingArea } from '../hooks'; +import { useStringInterpolator } from '../internals/useStringInterpolator'; export const AreaElementPath = styled(animated.path, { name: 'MuiAreaElement', diff --git a/packages/x-charts/src/LineChart/Area/index.ts b/packages/x-charts/src/LineChart/Area/index.ts deleted file mode 100644 index 354e26534233..000000000000 --- a/packages/x-charts/src/LineChart/Area/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './AnimatedArea'; -export * from './AreaElement'; -export * from './AreaPlot'; diff --git a/packages/x-charts/src/LineChart/Area/AreaElement.tsx b/packages/x-charts/src/LineChart/AreaElement.tsx similarity index 93% rename from packages/x-charts/src/LineChart/Area/AreaElement.tsx rename to packages/x-charts/src/LineChart/AreaElement.tsx index 616fe9346c70..ab692866824a 100644 --- a/packages/x-charts/src/LineChart/Area/AreaElement.tsx +++ b/packages/x-charts/src/LineChart/AreaElement.tsx @@ -4,11 +4,11 @@ import composeClasses from '@mui/utils/composeClasses'; import useSlotProps from '@mui/utils/useSlotProps'; import generateUtilityClass from '@mui/utils/generateUtilityClass'; import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; -import { SlotComponentPropsFromProps } from '../../internals/SlotComponentPropsFromProps'; -import { useInteractionItemProps } from '../../hooks/useInteractionItemProps'; +import { SlotComponentPropsFromProps } from '../internals/SlotComponentPropsFromProps'; +import { useInteractionItemProps } from '../hooks/useInteractionItemProps'; import { AnimatedArea, AnimatedAreaProps } from './AnimatedArea'; -import { SeriesId } from '../../models/seriesType/common'; -import { useItemHighlighted } from '../../context/HighlightedProvider'; +import { SeriesId } from '../models/seriesType/common'; +import { useItemHighlighted } from '../context'; export interface AreaElementClasses { /** Styles applied to the root element. */ diff --git a/packages/x-charts/src/LineChart/Area/AreaPlot.tsx b/packages/x-charts/src/LineChart/AreaPlot.tsx similarity index 92% rename from packages/x-charts/src/LineChart/Area/AreaPlot.tsx rename to packages/x-charts/src/LineChart/AreaPlot.tsx index 357926a38637..c2ee13f837e3 100644 --- a/packages/x-charts/src/LineChart/Area/AreaPlot.tsx +++ b/packages/x-charts/src/LineChart/AreaPlot.tsx @@ -1,20 +1,20 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { area as d3Area } from '@mui/x-charts-vendor/d3-shape'; -import { useCartesianContext } from '../../context/CartesianProvider'; +import { useCartesianContext } from '../context/CartesianProvider'; import { AreaElement, AreaElementProps, AreaElementSlotProps, AreaElementSlots, } from './AreaElement'; -import { getValueToPositionMapper } from '../../hooks/useScale'; -import getCurveFactory from '../../internals/getCurve'; -import { DEFAULT_X_AXIS_KEY } from '../../constants'; -import { LineItemIdentifier } from '../../models/seriesType/line'; -import { useChartGradient } from '../../internals/components/ChartsAxesGradients'; -import { useLineSeries } from '../../hooks/useSeries'; -import { AxisId } from '../../models/axis'; +import { getValueToPositionMapper } from '../hooks/useScale'; +import getCurveFactory from '../internals/getCurve'; +import { DEFAULT_X_AXIS_KEY } from '../constants'; +import { LineItemIdentifier } from '../models/seriesType/line'; +import { useChartGradient } from '../internals/components/ChartsAxesGradients'; +import { useLineSeries } from '../hooks/useSeries'; +import { AxisId } from '../models/axis'; export interface AreaPlotSlots extends AreaElementSlots {} diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index 83c32351f609..0bd258bfd715 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { useThemeProps } from '@mui/material/styles'; -import { AreaPlot, AreaPlotProps, AreaPlotSlotProps, AreaPlotSlots } from './Area'; +import { AreaPlot, AreaPlotProps, AreaPlotSlotProps, AreaPlotSlots } from './AreaPlot'; import { LinePlot, LinePlotProps, LinePlotSlotProps, LinePlotSlots } from './LinePlot'; import { ResponsiveChartContainer, diff --git a/packages/x-charts/src/LineChart/index.ts b/packages/x-charts/src/LineChart/index.ts index 836e9f9f1cc3..6ac814459035 100644 --- a/packages/x-charts/src/LineChart/index.ts +++ b/packages/x-charts/src/LineChart/index.ts @@ -1,10 +1,12 @@ export * from './LineChart'; export * from './LinePlot'; -export * from './Area'; +export * from './AreaPlot'; export * from './MarkPlot'; export * from './LineHighlightPlot'; +export * from './AreaElement'; +export * from './AnimatedArea'; export * from './LineElement'; export * from './AnimatedLine'; export * from './MarkElement'; diff --git a/packages/x-charts/src/LineChart/useLineChartProps.ts b/packages/x-charts/src/LineChart/useLineChartProps.ts index 82ad6bc1e882..6841c5e927cd 100644 --- a/packages/x-charts/src/LineChart/useLineChartProps.ts +++ b/packages/x-charts/src/LineChart/useLineChartProps.ts @@ -5,7 +5,7 @@ import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer'; import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler'; import { ChartsGridProps } from '../ChartsGrid'; import { ChartsClipPathProps } from '../ChartsClipPath'; -import { AreaPlotProps } from './Area'; +import { AreaPlotProps } from './AreaPlot'; import { LinePlotProps } from './LinePlot'; import { MarkPlotProps } from './MarkPlot'; import { ChartsOverlayProps } from '../ChartsOverlay'; diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx index feef32382981..5a1ba89889c8 100644 --- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx +++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx @@ -18,7 +18,7 @@ import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../mo import { MakeOptional } from '../models/helpers'; import { LineSeriesType } from '../models/seriesType/line'; import { CardinalDirections } from '../models/layout'; -import { AreaPlotSlots, AreaPlotSlotProps } from '../LineChart/Area'; +import { AreaPlotSlots, AreaPlotSlotProps } from '../LineChart/AreaPlot'; import { LinePlotSlots, LinePlotSlotProps } from '../LineChart/LinePlot'; import { MarkPlotSlots, MarkPlotSlotProps } from '../LineChart/MarkPlot'; import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from '../LineChart/LineHighlightPlot'; From dc352049d460fa79e710829ee99a656018e4b8bd Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Thu, 29 Aug 2024 15:45:35 +0200 Subject: [PATCH 12/12] add comment --- packages/x-charts/src/LineChart/AreaPlot.tsx | 1 + packages/x-charts/src/LineChart/LinePlot.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/x-charts/src/LineChart/AreaPlot.tsx b/packages/x-charts/src/LineChart/AreaPlot.tsx index c2ee13f837e3..e87e4581e119 100644 --- a/packages/x-charts/src/LineChart/AreaPlot.tsx +++ b/packages/x-charts/src/LineChart/AreaPlot.tsx @@ -38,6 +38,7 @@ const useAggregatedData = () => { const seriesData = useLineSeries(); const axisData = useCartesianContext(); + // This memo prevents odd line chart behavior when hydrating. const allData = React.useMemo(() => { if (seriesData === undefined) { return []; diff --git a/packages/x-charts/src/LineChart/LinePlot.tsx b/packages/x-charts/src/LineChart/LinePlot.tsx index 70450378256a..d4e1e579ff2e 100644 --- a/packages/x-charts/src/LineChart/LinePlot.tsx +++ b/packages/x-charts/src/LineChart/LinePlot.tsx @@ -38,6 +38,7 @@ const useAggregatedData = () => { const seriesData = useLineSeries(); const axisData = useCartesianContext(); + // This memo prevents odd line chart behavior when hydrating. const allData = React.useMemo(() => { if (seriesData === undefined) { return [];