diff --git a/docs/data/charts/accessibility/KeyboardActivation.js b/docs/data/charts/accessibility/KeyboardActivation.js deleted file mode 100644 index a1f682235024c..0000000000000 --- a/docs/data/charts/accessibility/KeyboardActivation.js +++ /dev/null @@ -1,77 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; -import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; - -import { LineChart } from '@mui/x-charts/LineChart'; - -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -const lineChartsParams = { - series: [ - { id: 'series-1', data: [3, 4, 1, 6, 5], label: 'A', showMark: true }, - { id: 'series-2', data: [4, 3, 1, 5, 8], label: 'B', showMark: true }, - ], - xAxis: [{ data: [0, 3, 6, 9, 12], scaleType: 'linear' }], - height: 400, -}; - -export default function KeyboardActivation() { - const [itemData, setItemData] = React.useState(); - const [axisData, setAxisData] = React.useState(); - - return ( - - - setItemData(d)} - onLineClick={(event, d) => setItemData(d)} - onMarkClick={(event, d) => setItemData(d)} - onAxisClick={(event, d) => setAxisData(d)} - /> - - - - - - Focus the chart, then press Enter - - { - setItemData(undefined); - setAxisData(null); - }} - > - - - - - - - ); -} diff --git a/docs/data/charts/accessibility/KeyboardNavigation.js b/docs/data/charts/accessibility/KeyboardNavigation.js deleted file mode 100644 index 78420dcde94e8..0000000000000 --- a/docs/data/charts/accessibility/KeyboardNavigation.js +++ /dev/null @@ -1,155 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; -import Select from '@mui/material/Select'; -import InputLabel from '@mui/material/InputLabel'; -import FormControl from '@mui/material/FormControl'; -import MenuItem from '@mui/material/MenuItem'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Switch from '@mui/material/Switch'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { LineChart } from '@mui/x-charts/LineChart'; -import { PieChart } from '@mui/x-charts/PieChart'; -import { data } from './randomData'; - -const highlightScope = { highlight: 'item', fade: 'global' }; - -const scatterSeries = [ - { - label: 'Series A', - data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })), - highlightScope, - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })), - highlightScope, - }, -]; - -const series = [ - { label: 'Series A', data: data.map((p) => p.y1), highlightScope }, - { label: 'Series B', data: data.map((p) => p.y2), highlightScope }, -]; - -export default function KeyboardNavigation() { - const [chartType, setChartType] = React.useState('line'); - const [focusItemOnClick, setFocusItemOnClick] = React.useState(false); - const chartRef = React.useRef(null); - - const handleChange = (event) => setChartType(event.target.value); - - return ( - - - - Chart Type - - - - setFocusItemOnClick(event.target.checked)} - /> - } - label="focusItemOnClick" - /> - - - - ); -} - -function Chart({ chartRef, type, focusItemOnClick }) { - switch (type) { - case 'scatter': - return ( - - ); - - case 'line': - return ( - p.x1).toSorted((a, b) => a - b) }]} - series={series} - slotProps={{ tooltip: { trigger: 'item' } }} - focusItemOnClick={focusItemOnClick} - /> - ); - - case 'bar': - return ( - Math.round(p.x1)).toSorted((a, b) => a - b) }, - ]} - slotProps={{ tooltip: { trigger: 'item' } }} - series={series} - focusItemOnClick={focusItemOnClick} - /> - ); - - case 'pie': - return ( - - ); - - default: - throw new Error(`Unknown chart type: ${type}`); - } -} diff --git a/docs/data/charts/accessibility/KeyboardNavigation.tsx b/docs/data/charts/accessibility/KeyboardNavigation.tsx deleted file mode 100644 index 6e8d922f9639d..0000000000000 --- a/docs/data/charts/accessibility/KeyboardNavigation.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; -import InputLabel from '@mui/material/InputLabel'; -import FormControl from '@mui/material/FormControl'; -import MenuItem from '@mui/material/MenuItem'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Switch from '@mui/material/Switch'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { LineChart } from '@mui/x-charts/LineChart'; -import { PieChart } from '@mui/x-charts/PieChart'; -import { data } from './randomData'; - -const highlightScope = { highlight: 'item', fade: 'global' } as const; - -const scatterSeries = [ - { - label: 'Series A', - data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })), - highlightScope, - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })), - highlightScope, - }, -]; -const series = [ - { label: 'Series A', data: data.map((p) => p.y1), highlightScope }, - { label: 'Series B', data: data.map((p) => p.y2), highlightScope }, -]; - -type ChartType = 'scatter' | 'line' | 'bar' | 'pie'; - -export default function KeyboardNavigation() { - const [chartType, setChartType] = React.useState('line'); - const [focusItemOnClick, setFocusItemOnClick] = React.useState(false); - const chartRef = React.useRef(null); - - const handleChange = (event: SelectChangeEvent) => - setChartType(event.target.value as ChartType); - - return ( - - - - Chart Type - - - - setFocusItemOnClick(event.target.checked)} - /> - } - label="focusItemOnClick" - /> - - - - ); -} - -function Chart({ - chartRef, - type, - focusItemOnClick, -}: { - chartRef: React.RefObject; - type: T; - focusItemOnClick: boolean; -}) { - switch (type) { - case 'scatter': - return ( - - ); - case 'line': - return ( - p.x1).toSorted((a, b) => a - b) }]} - series={series} - slotProps={{ tooltip: { trigger: 'item' } }} - focusItemOnClick={focusItemOnClick} - /> - ); - case 'bar': - return ( - Math.round(p.x1)).toSorted((a, b) => a - b) }, - ]} - slotProps={{ tooltip: { trigger: 'item' } }} - series={series} - focusItemOnClick={focusItemOnClick} - /> - ); - case 'pie': - return ( - - ); - - default: - throw new Error(`Unknown chart type: ${type}`); - } -} diff --git a/docs/data/charts/accessibility/accessibility.md b/docs/data/charts/accessibility/accessibility.md index 8b217c060b2c4..4f9687e67efc6 100644 --- a/docs/data/charts/accessibility/accessibility.md +++ b/docs/data/charts/accessibility/accessibility.md @@ -64,7 +64,7 @@ components: { } ``` -{{"demo": "KeyboardNavigation.js"}} +{{"component": "file://./demos/keyboard-navigation/index.ts"}} This feature is currently supported by the following charts: line, bar, pie, scatter, sparkline, funnel, radar, heatmap, sankey, map, radial bar, radial line, and range bar. @@ -167,7 +167,7 @@ import type {} from '@mui/x-charts/moduleAugmentation/keyboardActivation'; The click callbacks then receive `MouseEvent | KeyboardEvent`, and you can narrow with `event instanceof KeyboardEvent` before reading pointer-only properties such as `clientX`. Both become the default in v10. -{{"demo": "KeyboardActivation.js"}} +{{"component": "file://./demos/keyboard-activation/index.ts"}} When a chart exposes several item callbacks, activation fires the one a pointer would reach first on the focused data point: line charts try `onMarkClick`, then `onLineClick`, then `onAreaClick`; radar charts try `onMarkClick`, then `onAreaClick`; and Sankey charts call `onNodeClick` or `onLinkClick` depending on the focused element. Only one of them fires. diff --git a/docs/data/charts/accessibility/KeyboardActivation.tsx b/docs/data/charts/accessibility/demos/keyboard-activation/KeyboardActivation.tsx similarity index 95% rename from docs/data/charts/accessibility/KeyboardActivation.tsx rename to docs/data/charts/accessibility/demos/keyboard-activation/KeyboardActivation.tsx index 8573b903f5d52..8f5a63aa6a7d0 100644 --- a/docs/data/charts/accessibility/KeyboardActivation.tsx +++ b/docs/data/charts/accessibility/demos/keyboard-activation/KeyboardActivation.tsx @@ -8,7 +8,7 @@ import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; import { LineChart } from '@mui/x-charts/LineChart'; import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { ChartsAxisData, LineItemIdentifier } from '@mui/x-charts/models'; +import type { ChartsAxisData, LineItemIdentifier } from '@mui/x-charts/models'; const lineChartsParams = { series: [ @@ -20,6 +20,7 @@ const lineChartsParams = { } as const; export default function KeyboardActivation() { + // @focus-start @padding 1 const [itemData, setItemData] = React.useState(); const [axisData, setAxisData] = React.useState(); @@ -75,4 +76,5 @@ ${axisData ? JSON.stringify(axisData, null, 2) : '// The data will appear here'} ); + // @focus-end } diff --git a/docs/data/charts/accessibility/demos/keyboard-activation/client.ts b/docs/data/charts/accessibility/demos/keyboard-activation/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/accessibility/demos/keyboard-activation/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/accessibility/demos/keyboard-activation/index.ts b/docs/data/charts/accessibility/demos/keyboard-activation/index.ts new file mode 100644 index 0000000000000..a2fb76241e5a8 --- /dev/null +++ b/docs/data/charts/accessibility/demos/keyboard-activation/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import KeyboardActivation from './KeyboardActivation'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, KeyboardActivation, { ClientProvider }); diff --git a/docs/data/charts/accessibility/demos/keyboard-navigation/KeyboardNavigation.tsx b/docs/data/charts/accessibility/demos/keyboard-navigation/KeyboardNavigation.tsx new file mode 100644 index 0000000000000..5b62164a171f3 --- /dev/null +++ b/docs/data/charts/accessibility/demos/keyboard-navigation/KeyboardNavigation.tsx @@ -0,0 +1,167 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import Button from '@mui/material/Button'; +import type { SelectChangeEvent } from '@mui/material/Select'; +import Select from '@mui/material/Select'; +import InputLabel from '@mui/material/InputLabel'; +import FormControl from '@mui/material/FormControl'; +import MenuItem from '@mui/material/MenuItem'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Switch from '@mui/material/Switch'; +import { ScatterChart } from '@mui/x-charts/ScatterChart'; +import { BarChart } from '@mui/x-charts/BarChart'; +import { LineChart } from '@mui/x-charts/LineChart'; +import { PieChart } from '@mui/x-charts/PieChart'; +import { data } from '../../randomData'; + +const highlightScope = { highlight: 'item', fade: 'global' } as const; + +const scatterSeries = [ + { + label: 'Series A', + data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })), + highlightScope, + }, + { + label: 'Series B', + data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })), + highlightScope, + }, +]; +const series = [ + { label: 'Series A', data: data.map((p) => p.y1), highlightScope }, + { label: 'Series B', data: data.map((p) => p.y2), highlightScope }, +]; + +type ChartType = 'scatter' | 'line' | 'bar' | 'pie'; + +export default function KeyboardNavigation() { + // @focus-start @padding 1 + const [chartType, setChartType] = React.useState('line'); + const [focusItemOnClick, setFocusItemOnClick] = React.useState(false); + const chartRef = React.useRef(null); + + const handleChange = (event: SelectChangeEvent) => + setChartType(event.target.value as ChartType); + + return ( + + + + Chart Type + + + + setFocusItemOnClick(event.target.checked)} + /> + } + label="focusItemOnClick" + /> + + + + ); + // @focus-end +} + +function Chart({ + chartRef, + type, + focusItemOnClick, +}: { + chartRef: React.RefObject; + type: T; + focusItemOnClick: boolean; +}) { + switch (type) { + case 'scatter': + return ( + + ); + case 'line': + return ( + p.x1).toSorted((a, b) => a - b) }]} + series={series} + slotProps={{ tooltip: { trigger: 'item' } }} + focusItemOnClick={focusItemOnClick} + /> + ); + case 'bar': + return ( + Math.round(p.x1)).toSorted((a, b) => a - b) }, + ]} + slotProps={{ tooltip: { trigger: 'item' } }} + series={series} + focusItemOnClick={focusItemOnClick} + /> + ); + case 'pie': + return ( + + ); + + default: + throw new Error(`Unknown chart type: ${type}`); + } +} diff --git a/docs/data/charts/accessibility/demos/keyboard-navigation/client.ts b/docs/data/charts/accessibility/demos/keyboard-navigation/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/accessibility/demos/keyboard-navigation/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/accessibility/demos/keyboard-navigation/index.ts b/docs/data/charts/accessibility/demos/keyboard-navigation/index.ts new file mode 100644 index 0000000000000..c24218e691986 --- /dev/null +++ b/docs/data/charts/accessibility/demos/keyboard-navigation/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import KeyboardNavigation from './KeyboardNavigation'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, KeyboardNavigation, { ClientProvider }); diff --git a/docs/data/charts/animation/CSSAnimationCustomization.js b/docs/data/charts/animation/CSSAnimationCustomization.js deleted file mode 100644 index 2d52921ed12fc..0000000000000 --- a/docs/data/charts/animation/CSSAnimationCustomization.js +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import { pieClasses, PieChart } from '@mui/x-charts/PieChart'; -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; - -const data = [ - { id: 0, value: 10, label: 'series A' }, - { id: 1, value: 15, label: 'series B' }, - { id: 2, value: 20, label: 'series C' }, -]; - -export default function CSSAnimationCustomization() { - const [key, rerender] = React.useReducer((x) => x + 1, 0); - - return ( - - `${item.value}` }]} - width={200} - height={200} - hideLegend - sx={{ - [`& .${pieClasses.arcLabel}.${pieClasses.animate}`]: { - animationDuration: '2s', - }, - }} - /> - - - ); -} diff --git a/docs/data/charts/animation/CSSAnimationCustomization.tsx.preview b/docs/data/charts/animation/CSSAnimationCustomization.tsx.preview deleted file mode 100644 index 7a008baf03714..0000000000000 --- a/docs/data/charts/animation/CSSAnimationCustomization.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - `${item.value}` }]} - width={200} - height={200} - hideLegend - sx={{ - [`& .${pieClasses.arcLabel}.${pieClasses.animate}`]: { - animationDuration: '2s', - }, - }} -/> - \ No newline at end of file diff --git a/docs/data/charts/animation/JSAnimationCustomization.js b/docs/data/charts/animation/JSAnimationCustomization.js deleted file mode 100644 index e5f8997010997..0000000000000 --- a/docs/data/charts/animation/JSAnimationCustomization.js +++ /dev/null @@ -1,78 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; -import * as React from 'react'; -import { useAnimate } from '@mui/x-charts/hooks'; -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; -import { interpolateObject } from '@mui/x-charts-vendor/d3-interpolate'; - -export default function JSAnimationCustomization() { - const [key, animate] = React.useReducer((v) => v + 1, 0); - - return ( - - - - - ); -} - -function AnimatedBarLabel(props) { - const { - seriesId, - dataIndex, - color, - isFaded, - isHighlighted, - classes, - xOrigin, - yOrigin, - x, - y, - width, - height, - layout, - skipAnimation, - ...otherProps - } = props; - - const animatedProps = useAnimate( - { x: x + width / 2, y: y - 2 }, - { - initialProps: { x: x + width / 2, y: yOrigin }, - createInterpolator: interpolateObject, - transformProps: (p) => p, - applyProps: (element, p) => { - element.setAttribute('x', p.x.toString()); - element.setAttribute('y', p.y.toString()); - }, - skip: skipAnimation, - }, - ); - - return ( - - ); -} diff --git a/docs/data/charts/animation/JSDefaultAnimation.js b/docs/data/charts/animation/JSDefaultAnimation.js deleted file mode 100644 index 8938598e8f25e..0000000000000 --- a/docs/data/charts/animation/JSDefaultAnimation.js +++ /dev/null @@ -1,86 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; -import * as React from 'react'; -import { useAnimateBarLabel } from '@mui/x-charts/hooks'; -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; -import { styled } from '@mui/material/styles'; - -export default function JSDefaultAnimation() { - const [key, animate] = React.useReducer((v) => v + 1, 0); - - return ( - - - - - ); -} - -const Text = styled('text')(({ theme }) => ({ - ...theme?.typography?.body2, - stroke: 'none', - fill: (theme.vars || theme)?.palette?.text?.primary, -})); - -function AnimatedBarLabel(props) { - const { - seriesId, - dataIndex, - color, - isFaded, - isHighlighted, - classes, - xOrigin, - yOrigin, - x, - y, - width, - height, - layout, - skipAnimation, - ...otherProps - } = props; - - const animatedProps = useAnimateBarLabel({ - xOrigin, - x, - yOrigin, - y, - width, - height, - layout, - skipAnimation, - }); - - return ( - - ); -} diff --git a/docs/data/charts/animation/MotionAnimationCustomization.js b/docs/data/charts/animation/MotionAnimationCustomization.js deleted file mode 100644 index 5a9ce341c630b..0000000000000 --- a/docs/data/charts/animation/MotionAnimationCustomization.js +++ /dev/null @@ -1,67 +0,0 @@ -import { LineChart } from '@mui/x-charts/LineChart'; -import * as React from 'react'; -import { motion } from 'motion/react'; -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; - -export default function MotionAnimationCustomization() { - const [key, animate] = React.useReducer((v) => v + 1, 0); - - return ( - - - - - ); -} - -function AnimatedLine({ d, ownerState, skipAnimation }) { - return ( - - ); -} - -function AnimatedMark({ x, y, color, skipAnimation }) { - return ( - - ); -} diff --git a/docs/data/charts/animation/ReactSpringAnimationCustomization.js b/docs/data/charts/animation/ReactSpringAnimationCustomization.js deleted file mode 100644 index 46b465d0016a2..0000000000000 --- a/docs/data/charts/animation/ReactSpringAnimationCustomization.js +++ /dev/null @@ -1,77 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; -import * as React from 'react'; -import { animated, useSpring } from '@react-spring/web'; -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; - -export default function ReactSpringAnimationCustomization() { - const [key, animate] = React.useReducer((v) => v + 1, 0); - - return ( - - - - - ); -} - -function AnimatedBarLabel(props) { - const { - seriesId, - dataIndex, - color, - isFaded, - isHighlighted, - classes, - xOrigin, - yOrigin, - x, - y, - width, - height, - layout, - skipAnimation, - ...otherProps - } = props; - - const style = useSpring({ - from: { y: yOrigin }, - to: { y: y - 4 }, - config: { tension: 100, friction: 10 }, - }); - - return ( - - ); -} diff --git a/docs/data/charts/animation/animation.md b/docs/data/charts/animation/animation.md index 97aff10b7223f..65c8290a80e8b 100644 --- a/docs/data/charts/animation/animation.md +++ b/docs/data/charts/animation/animation.md @@ -20,7 +20,7 @@ To customize Chart animations, you may need to override CSS classes or implement You can override the default CSS classes to customize CSS-based animations. The demo below shows how you can increase the label's animation duration to two seconds: -{{"demo": "CSSAnimationCustomization.js"}} +{{"component": "file://./demos/css-animation-customization/index.ts"}} ## Customizing JavaScript animations @@ -37,7 +37,7 @@ The Charts package provides the following animation hooks: The demo below illustrates how to use these hooks by animating the bar labels to match the bar animation—click **Run Animation** to see it in action: -{{"demo": "JSDefaultAnimation.js"}} +{{"component": "file://./demos/js-default-animation/index.ts"}} ### The useAnimate() hook @@ -60,7 +60,7 @@ You can find more detailed explanations in the hook's JSDoc. In the example below, labels are positioned above the bars they refer to and are animated with the `useAnimate()` hook: -{{"demo": "JSAnimationCustomization.js"}} +{{"component": "file://./demos/js-animation-customization/index.ts"}} ## Third-party animation libraries @@ -75,10 +75,10 @@ It's essential to test the performance of your charts with your chosen animation The demo below shows how to integrate [React Spring](https://www.react-spring.dev/docs/getting-started) to add a bounce effect to the bar label animation: -{{"demo": "ReactSpringAnimationCustomization.js"}} +{{"component": "file://./demos/react-spring-animation-customization/index.ts"}} ### Motion The following demo uses the [Motion library](https://motion.dev/docs/react) for a fade-in effect on the points and lines in the chart: -{{"demo": "MotionAnimationCustomization.js"}} +{{"component": "file://./demos/motion-animation-customization/index.ts"}} diff --git a/docs/data/charts/animation/CSSAnimationCustomization.tsx b/docs/data/charts/animation/demos/css-animation-customization/CSSAnimationCustomization.tsx similarity index 95% rename from docs/data/charts/animation/CSSAnimationCustomization.tsx rename to docs/data/charts/animation/demos/css-animation-customization/CSSAnimationCustomization.tsx index 2d52921ed12fc..8bfa15b0164fe 100644 --- a/docs/data/charts/animation/CSSAnimationCustomization.tsx +++ b/docs/data/charts/animation/demos/css-animation-customization/CSSAnimationCustomization.tsx @@ -10,6 +10,7 @@ const data = [ ]; export default function CSSAnimationCustomization() { + // @focus-start @padding 1 const [key, rerender] = React.useReducer((x) => x + 1, 0); return ( @@ -29,4 +30,5 @@ export default function CSSAnimationCustomization() { ); + // @focus-end } diff --git a/docs/data/charts/animation/demos/css-animation-customization/client.ts b/docs/data/charts/animation/demos/css-animation-customization/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/animation/demos/css-animation-customization/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/animation/demos/css-animation-customization/index.ts b/docs/data/charts/animation/demos/css-animation-customization/index.ts new file mode 100644 index 0000000000000..5a7c240ae443c --- /dev/null +++ b/docs/data/charts/animation/demos/css-animation-customization/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CSSAnimationCustomization from './CSSAnimationCustomization'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CSSAnimationCustomization, { ClientProvider }); diff --git a/docs/data/charts/animation/JSAnimationCustomization.tsx b/docs/data/charts/animation/demos/js-animation-customization/JSAnimationCustomization.tsx similarity index 91% rename from docs/data/charts/animation/JSAnimationCustomization.tsx rename to docs/data/charts/animation/demos/js-animation-customization/JSAnimationCustomization.tsx index da37b5060df5c..dae0c51fb4d27 100644 --- a/docs/data/charts/animation/JSAnimationCustomization.tsx +++ b/docs/data/charts/animation/demos/js-animation-customization/JSAnimationCustomization.tsx @@ -1,4 +1,5 @@ -import { BarChart, BarLabelProps } from '@mui/x-charts/BarChart'; +import type { BarLabelProps } from '@mui/x-charts/BarChart'; +import { BarChart } from '@mui/x-charts/BarChart'; import * as React from 'react'; import { useAnimate } from '@mui/x-charts/hooks'; import Stack from '@mui/material/Stack'; @@ -6,6 +7,7 @@ import Button from '@mui/material/Button'; import { interpolateObject } from '@mui/x-charts-vendor/d3-interpolate'; export default function JSAnimationCustomization() { + // @focus-start @padding 1 const [key, animate] = React.useReducer((v) => v + 1, 0); return ( @@ -37,6 +39,7 @@ export default function JSAnimationCustomization() { ); + // @focus-end } function AnimatedBarLabel(props: BarLabelProps) { diff --git a/docs/data/charts/animation/demos/js-animation-customization/client.ts b/docs/data/charts/animation/demos/js-animation-customization/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/animation/demos/js-animation-customization/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/animation/demos/js-animation-customization/index.ts b/docs/data/charts/animation/demos/js-animation-customization/index.ts new file mode 100644 index 0000000000000..8f3ad39454bfd --- /dev/null +++ b/docs/data/charts/animation/demos/js-animation-customization/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import JSAnimationCustomization from './JSAnimationCustomization'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, JSAnimationCustomization, { ClientProvider }); diff --git a/docs/data/charts/animation/JSDefaultAnimation.tsx b/docs/data/charts/animation/demos/js-default-animation/JSDefaultAnimation.tsx similarity index 91% rename from docs/data/charts/animation/JSDefaultAnimation.tsx rename to docs/data/charts/animation/demos/js-default-animation/JSDefaultAnimation.tsx index e5bb5296408a3..146aed9ae8cc0 100644 --- a/docs/data/charts/animation/JSDefaultAnimation.tsx +++ b/docs/data/charts/animation/demos/js-default-animation/JSDefaultAnimation.tsx @@ -1,4 +1,5 @@ -import { BarChart, BarLabelProps } from '@mui/x-charts/BarChart'; +import type { BarLabelProps } from '@mui/x-charts/BarChart'; +import { BarChart } from '@mui/x-charts/BarChart'; import * as React from 'react'; import { useAnimateBarLabel } from '@mui/x-charts/hooks'; import Stack from '@mui/material/Stack'; @@ -6,6 +7,7 @@ import Button from '@mui/material/Button'; import { styled } from '@mui/material/styles'; export default function JSDefaultAnimation() { + // @focus-start @padding 1 const [key, animate] = React.useReducer((v) => v + 1, 0); return ( @@ -37,6 +39,7 @@ export default function JSDefaultAnimation() { ); + // @focus-end } const Text = styled('text')(({ theme }) => ({ diff --git a/docs/data/charts/animation/demos/js-default-animation/client.ts b/docs/data/charts/animation/demos/js-default-animation/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/animation/demos/js-default-animation/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/animation/demos/js-default-animation/index.ts b/docs/data/charts/animation/demos/js-default-animation/index.ts new file mode 100644 index 0000000000000..319270ae17b26 --- /dev/null +++ b/docs/data/charts/animation/demos/js-default-animation/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import JSDefaultAnimation from './JSDefaultAnimation'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, JSDefaultAnimation, { ClientProvider }); diff --git a/docs/data/charts/animation/MotionAnimationCustomization.tsx b/docs/data/charts/animation/demos/motion-animation-customization/MotionAnimationCustomization.tsx similarity index 89% rename from docs/data/charts/animation/MotionAnimationCustomization.tsx rename to docs/data/charts/animation/demos/motion-animation-customization/MotionAnimationCustomization.tsx index f70dd4d3075bf..204d4419853a7 100644 --- a/docs/data/charts/animation/MotionAnimationCustomization.tsx +++ b/docs/data/charts/animation/demos/motion-animation-customization/MotionAnimationCustomization.tsx @@ -1,14 +1,12 @@ -import { - LineChart, - type AnimatedLineProps, - type MarkElementProps, -} from '@mui/x-charts/LineChart'; +import { LineChart } from '@mui/x-charts/LineChart'; +import type { AnimatedLineProps, MarkElementProps } from '@mui/x-charts/LineChart'; import * as React from 'react'; import { motion } from 'motion/react'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; export default function MotionAnimationCustomization() { + // @focus-start @padding 1 const [key, animate] = React.useReducer((v) => v + 1, 0); return ( @@ -36,6 +34,7 @@ export default function MotionAnimationCustomization() { ); + // @focus-end } function AnimatedLine({ d, ownerState, skipAnimation }: AnimatedLineProps) { diff --git a/docs/data/charts/animation/demos/motion-animation-customization/client.ts b/docs/data/charts/animation/demos/motion-animation-customization/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/animation/demos/motion-animation-customization/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/animation/demos/motion-animation-customization/index.ts b/docs/data/charts/animation/demos/motion-animation-customization/index.ts new file mode 100644 index 0000000000000..bef4051418db6 --- /dev/null +++ b/docs/data/charts/animation/demos/motion-animation-customization/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MotionAnimationCustomization from './MotionAnimationCustomization'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MotionAnimationCustomization, { ClientProvider }); diff --git a/docs/data/charts/animation/ReactSpringAnimationCustomization.tsx b/docs/data/charts/animation/demos/react-spring-animation-customization/ReactSpringAnimationCustomization.tsx similarity index 90% rename from docs/data/charts/animation/ReactSpringAnimationCustomization.tsx rename to docs/data/charts/animation/demos/react-spring-animation-customization/ReactSpringAnimationCustomization.tsx index 998e410c8ff8d..5c8a92c4ad5a7 100644 --- a/docs/data/charts/animation/ReactSpringAnimationCustomization.tsx +++ b/docs/data/charts/animation/demos/react-spring-animation-customization/ReactSpringAnimationCustomization.tsx @@ -1,10 +1,12 @@ -import { BarChart, BarLabelProps } from '@mui/x-charts/BarChart'; +import type { BarLabelProps } from '@mui/x-charts/BarChart'; +import { BarChart } from '@mui/x-charts/BarChart'; import * as React from 'react'; import { animated, useSpring } from '@react-spring/web'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; export default function ReactSpringAnimationCustomization() { + // @focus-start @padding 1 const [key, animate] = React.useReducer((v) => v + 1, 0); return ( @@ -37,6 +39,7 @@ export default function ReactSpringAnimationCustomization() { ); + // @focus-end } function AnimatedBarLabel(props: BarLabelProps) { diff --git a/docs/data/charts/animation/demos/react-spring-animation-customization/client.ts b/docs/data/charts/animation/demos/react-spring-animation-customization/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/animation/demos/react-spring-animation-customization/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/animation/demos/react-spring-animation-customization/index.ts b/docs/data/charts/animation/demos/react-spring-animation-customization/index.ts new file mode 100644 index 0000000000000..4f53df168baf9 --- /dev/null +++ b/docs/data/charts/animation/demos/react-spring-animation-customization/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ReactSpringAnimationCustomization from './ReactSpringAnimationCustomization'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ReactSpringAnimationCustomization, { ClientProvider }); diff --git a/docs/data/charts/areas-demo/AreaChartConnectNulls.js b/docs/data/charts/areas-demo/AreaChartConnectNulls.js deleted file mode 100644 index bec1d4f8651d5..0000000000000 --- a/docs/data/charts/areas-demo/AreaChartConnectNulls.js +++ /dev/null @@ -1,23 +0,0 @@ -import Stack from '@mui/material/Stack'; -import { LineChart } from '@mui/x-charts/LineChart'; - -const data = [4000, 3000, 2000, null, 1890, 2390, 3490]; -const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G']; -const margin = { right: 24 }; - -export default function AreaChartConnectNulls() { - return ( - - - - - ); -} diff --git a/docs/data/charts/areas-demo/AreaChartConnectNulls.tsx.preview b/docs/data/charts/areas-demo/AreaChartConnectNulls.tsx.preview deleted file mode 100644 index d38e83e2beec5..0000000000000 --- a/docs/data/charts/areas-demo/AreaChartConnectNulls.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/charts/areas-demo/AreaChartFillByValue.js b/docs/data/charts/areas-demo/AreaChartFillByValue.js deleted file mode 100644 index 7b0272d9ae7f0..0000000000000 --- a/docs/data/charts/areas-demo/AreaChartFillByValue.js +++ /dev/null @@ -1,165 +0,0 @@ -import { green, red } from '@mui/material/colors'; -import Stack from '@mui/material/Stack'; -import { useYScale, useDrawingArea } from '@mui/x-charts/hooks'; -import { LineChart, lineClasses } from '@mui/x-charts/LineChart'; - -const margin = { right: 24, bottom: 0 }; -const data = [4000, 3000, -1000, 500, -2100, -250, 3490]; -const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G']; - -function ColorSwitch({ threshold, color1, color2, id }) { - const { top, height, bottom } = useDrawingArea(); - const svgHeight = top + bottom + height; - - const scale = useYScale(); // You can provide the axis Id if you have multiple ones - const y0 = scale(threshold); // The coordinate of the origin - const off = y0 !== undefined ? y0 / svgHeight : 0; - - return ( - - - - - - - ); -} - -export default function AreaChartFillByValue() { - return ( - - - - - - - - - - - ); -} - -function ColorPalette({ id }) { - const { top, height, bottom } = useDrawingArea(); - const svgHeight = top + bottom + height; - - const scale = useYScale(); // You can provide the axis Id if you have multiple ones - - return ( - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/charts/areas-demo/PercentAreaChart.js b/docs/data/charts/areas-demo/PercentAreaChart.js deleted file mode 100644 index 678069a191c58..0000000000000 --- a/docs/data/charts/areas-demo/PercentAreaChart.js +++ /dev/null @@ -1,60 +0,0 @@ -import { LineChart } from '@mui/x-charts/LineChart'; -import Box from '@mui/material/Box'; - -const time = [ - new Date(2015, 1, 0), - new Date(2015, 2, 0), - new Date(2015, 3, 0), - new Date(2015, 4, 0), - new Date(2015, 5, 0), - new Date(2015, 6, 0), - new Date(2015, 7, 0), -]; - -const a = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; -const b = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; -const c = [2400, 2210, 2290, 2000, 2181, 2500, 2100]; - -const getPercents = (array) => - array.map((v, index) => (100 * v) / (a[index] + b[index] + c[index])); - -export default function PercentAreaChart() { - return ( - - - - ); -} diff --git a/docs/data/charts/areas-demo/SimpleAreaChart.js b/docs/data/charts/areas-demo/SimpleAreaChart.js deleted file mode 100644 index 160ce578a2173..0000000000000 --- a/docs/data/charts/areas-demo/SimpleAreaChart.js +++ /dev/null @@ -1,31 +0,0 @@ -import { LineChart, lineClasses } from '@mui/x-charts/LineChart'; -import Box from '@mui/material/Box'; - -const margin = { right: 24 }; -const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function SimpleAreaChart() { - return ( - - - - ); -} diff --git a/docs/data/charts/areas-demo/SimpleAreaChart.tsx.preview b/docs/data/charts/areas-demo/SimpleAreaChart.tsx.preview deleted file mode 100644 index 5b5c61d1f17bb..0000000000000 --- a/docs/data/charts/areas-demo/SimpleAreaChart.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/areas-demo/StackedAreaChart.js b/docs/data/charts/areas-demo/StackedAreaChart.js deleted file mode 100644 index b17891e8f89da..0000000000000 --- a/docs/data/charts/areas-demo/StackedAreaChart.js +++ /dev/null @@ -1,43 +0,0 @@ -import { LineChart, lineClasses } from '@mui/x-charts/LineChart'; -import Box from '@mui/material/Box'; - -const margin = { right: 24 }; -const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; -const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; -const amtData = [2400, 2210, 0, 2000, 2181, 2500, 2100]; -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function StackedAreaChart() { - return ( - - - - ); -} diff --git a/docs/data/charts/areas-demo/TinyAreaChart.js b/docs/data/charts/areas-demo/TinyAreaChart.js deleted file mode 100644 index 79aca4b1bf4df..0000000000000 --- a/docs/data/charts/areas-demo/TinyAreaChart.js +++ /dev/null @@ -1,34 +0,0 @@ -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { AreaPlot } from '@mui/x-charts/LineChart'; - -const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function TinyAreaChart() { - return ( - - - - ); -} diff --git a/docs/data/charts/areas-demo/TinyAreaChart.tsx.preview b/docs/data/charts/areas-demo/TinyAreaChart.tsx.preview deleted file mode 100644 index 4b7024e25a0e4..0000000000000 --- a/docs/data/charts/areas-demo/TinyAreaChart.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/charts/areas-demo/areas-demo.md b/docs/data/charts/areas-demo/areas-demo.md index 7affde856ea5f..193bbe2dec1ad 100644 --- a/docs/data/charts/areas-demo/areas-demo.md +++ b/docs/data/charts/areas-demo/areas-demo.md @@ -10,23 +10,23 @@ components: LineChart, LineElement, LineHighlightElement, LineHighlightPlot, Lin ## SimpleAreaChart -{{"demo": "SimpleAreaChart.js"}} +{{"component": "file://./demos/simple-area-chart/index.ts"}} ## StackedAreaChart -{{"demo": "StackedAreaChart.js"}} +{{"component": "file://./demos/stacked-area-chart/index.ts"}} ## TinyAreaChart -{{"demo": "TinyAreaChart.js"}} +{{"component": "file://./demos/tiny-area-chart/index.ts"}} ## PercentAreaChart -{{"demo": "PercentAreaChart.js"}} +{{"component": "file://./demos/percent-area-chart/index.ts"}} ## AreaChartConnectNulls -{{"demo": "AreaChartConnectNulls.js"}} +{{"component": "file://./demos/area-chart-connect-nulls/index.ts"}} ## AreaChartFillByValue @@ -46,4 +46,4 @@ The `` offset is a ratio of gradient vector. That's why you need to divide the coordinate by the SVG height. ::: -{{"demo": "AreaChartFillByValue.js"}} +{{"component": "file://./demos/area-chart-fill-by-value/index.ts"}} diff --git a/docs/data/charts/areas-demo/AreaChartConnectNulls.tsx b/docs/data/charts/areas-demo/demos/area-chart-connect-nulls/AreaChartConnectNulls.tsx similarity index 93% rename from docs/data/charts/areas-demo/AreaChartConnectNulls.tsx rename to docs/data/charts/areas-demo/demos/area-chart-connect-nulls/AreaChartConnectNulls.tsx index bec1d4f8651d5..3df6db0ca4696 100644 --- a/docs/data/charts/areas-demo/AreaChartConnectNulls.tsx +++ b/docs/data/charts/areas-demo/demos/area-chart-connect-nulls/AreaChartConnectNulls.tsx @@ -8,6 +8,7 @@ const margin = { right: 24 }; export default function AreaChartConnectNulls() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/areas-demo/demos/area-chart-connect-nulls/client.ts b/docs/data/charts/areas-demo/demos/area-chart-connect-nulls/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/areas-demo/demos/area-chart-connect-nulls/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/areas-demo/demos/area-chart-connect-nulls/index.ts b/docs/data/charts/areas-demo/demos/area-chart-connect-nulls/index.ts new file mode 100644 index 0000000000000..019e9a43b3fd0 --- /dev/null +++ b/docs/data/charts/areas-demo/demos/area-chart-connect-nulls/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AreaChartConnectNulls from './AreaChartConnectNulls'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AreaChartConnectNulls, { ClientProvider }); diff --git a/docs/data/charts/areas-demo/AreaChartFillByValue.tsx b/docs/data/charts/areas-demo/demos/area-chart-fill-by-value/AreaChartFillByValue.tsx similarity index 97% rename from docs/data/charts/areas-demo/AreaChartFillByValue.tsx rename to docs/data/charts/areas-demo/demos/area-chart-fill-by-value/AreaChartFillByValue.tsx index e2dfb920d04a7..6d11e6556681e 100644 --- a/docs/data/charts/areas-demo/AreaChartFillByValue.tsx +++ b/docs/data/charts/areas-demo/demos/area-chart-fill-by-value/AreaChartFillByValue.tsx @@ -1,4 +1,4 @@ -import { ScaleLinear } from '@mui/x-charts-vendor/d3-scale'; +import type { ScaleLinear } from '@mui/x-charts-vendor/d3-scale'; import { green, red } from '@mui/material/colors'; import Stack from '@mui/material/Stack'; import { useYScale, useDrawingArea } from '@mui/x-charts/hooks'; @@ -43,6 +43,7 @@ function ColorSwitch({ threshold, color1, color2, id }: ColorSwitchProps) { export default function AreaChartFillByValue() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/areas-demo/demos/area-chart-fill-by-value/client.ts b/docs/data/charts/areas-demo/demos/area-chart-fill-by-value/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/areas-demo/demos/area-chart-fill-by-value/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/areas-demo/demos/area-chart-fill-by-value/index.ts b/docs/data/charts/areas-demo/demos/area-chart-fill-by-value/index.ts new file mode 100644 index 0000000000000..d8e72aea99929 --- /dev/null +++ b/docs/data/charts/areas-demo/demos/area-chart-fill-by-value/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AreaChartFillByValue from './AreaChartFillByValue'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AreaChartFillByValue, { ClientProvider }); diff --git a/docs/data/charts/areas-demo/PercentAreaChart.tsx b/docs/data/charts/areas-demo/demos/percent-area-chart/PercentAreaChart.tsx similarity index 96% rename from docs/data/charts/areas-demo/PercentAreaChart.tsx rename to docs/data/charts/areas-demo/demos/percent-area-chart/PercentAreaChart.tsx index 9f1241bc0be2c..ffdb2bf33cce7 100644 --- a/docs/data/charts/areas-demo/PercentAreaChart.tsx +++ b/docs/data/charts/areas-demo/demos/percent-area-chart/PercentAreaChart.tsx @@ -20,6 +20,7 @@ const getPercents = (array: number[]) => export default function PercentAreaChart() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/areas-demo/demos/percent-area-chart/client.ts b/docs/data/charts/areas-demo/demos/percent-area-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/areas-demo/demos/percent-area-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/areas-demo/demos/percent-area-chart/index.ts b/docs/data/charts/areas-demo/demos/percent-area-chart/index.ts new file mode 100644 index 0000000000000..c284616543dc6 --- /dev/null +++ b/docs/data/charts/areas-demo/demos/percent-area-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PercentAreaChart from './PercentAreaChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PercentAreaChart, { ClientProvider }); diff --git a/docs/data/charts/areas-demo/SimpleAreaChart.tsx b/docs/data/charts/areas-demo/demos/simple-area-chart/SimpleAreaChart.tsx similarity index 93% rename from docs/data/charts/areas-demo/SimpleAreaChart.tsx rename to docs/data/charts/areas-demo/demos/simple-area-chart/SimpleAreaChart.tsx index 160ce578a2173..7ca8ea71cd3cb 100644 --- a/docs/data/charts/areas-demo/SimpleAreaChart.tsx +++ b/docs/data/charts/areas-demo/demos/simple-area-chart/SimpleAreaChart.tsx @@ -16,6 +16,7 @@ const xLabels = [ export default function SimpleAreaChart() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/areas-demo/demos/simple-area-chart/client.ts b/docs/data/charts/areas-demo/demos/simple-area-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/areas-demo/demos/simple-area-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/areas-demo/demos/simple-area-chart/index.ts b/docs/data/charts/areas-demo/demos/simple-area-chart/index.ts new file mode 100644 index 0000000000000..38e09cde9833c --- /dev/null +++ b/docs/data/charts/areas-demo/demos/simple-area-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleAreaChart from './SimpleAreaChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleAreaChart, { ClientProvider }); diff --git a/docs/data/charts/areas-demo/StackedAreaChart.tsx b/docs/data/charts/areas-demo/demos/stacked-area-chart/StackedAreaChart.tsx similarity index 95% rename from docs/data/charts/areas-demo/StackedAreaChart.tsx rename to docs/data/charts/areas-demo/demos/stacked-area-chart/StackedAreaChart.tsx index b17891e8f89da..73f824601c4d6 100644 --- a/docs/data/charts/areas-demo/StackedAreaChart.tsx +++ b/docs/data/charts/areas-demo/demos/stacked-area-chart/StackedAreaChart.tsx @@ -18,6 +18,7 @@ const xLabels = [ export default function StackedAreaChart() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/areas-demo/demos/stacked-area-chart/client.ts b/docs/data/charts/areas-demo/demos/stacked-area-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/areas-demo/demos/stacked-area-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/areas-demo/demos/stacked-area-chart/index.ts b/docs/data/charts/areas-demo/demos/stacked-area-chart/index.ts new file mode 100644 index 0000000000000..97b9ef1ab0e01 --- /dev/null +++ b/docs/data/charts/areas-demo/demos/stacked-area-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StackedAreaChart from './StackedAreaChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StackedAreaChart, { ClientProvider }); diff --git a/docs/data/charts/areas-demo/TinyAreaChart.tsx b/docs/data/charts/areas-demo/demos/tiny-area-chart/TinyAreaChart.tsx similarity index 93% rename from docs/data/charts/areas-demo/TinyAreaChart.tsx rename to docs/data/charts/areas-demo/demos/tiny-area-chart/TinyAreaChart.tsx index 79aca4b1bf4df..4f5d7cf0cdeb0 100644 --- a/docs/data/charts/areas-demo/TinyAreaChart.tsx +++ b/docs/data/charts/areas-demo/demos/tiny-area-chart/TinyAreaChart.tsx @@ -14,6 +14,7 @@ const xLabels = [ export default function TinyAreaChart() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/areas-demo/demos/tiny-area-chart/client.ts b/docs/data/charts/areas-demo/demos/tiny-area-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/areas-demo/demos/tiny-area-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/areas-demo/demos/tiny-area-chart/index.ts b/docs/data/charts/areas-demo/demos/tiny-area-chart/index.ts new file mode 100644 index 0000000000000..ae3135477c474 --- /dev/null +++ b/docs/data/charts/areas-demo/demos/tiny-area-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TinyAreaChart from './TinyAreaChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TinyAreaChart, { ClientProvider }); diff --git a/docs/data/charts/axis-customization/AxisCustomization.js b/docs/data/charts/axis-customization/AxisCustomization.js deleted file mode 100644 index 41f0fed1d2870..0000000000000 --- a/docs/data/charts/axis-customization/AxisCustomization.js +++ /dev/null @@ -1,67 +0,0 @@ -import Box from '@mui/material/Box'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import { Chance } from 'chance'; - -const chance = new Chance(42); - -const data = Array.from({ length: 200 }, () => ({ - x: chance.floating({ min: -25, max: 25 }), - y: chance.floating({ min: -25, max: 25 }), -})).map((d, index) => ({ ...d, id: index })); - -const defaultXAxis = { - disableLine: false, - disableTicks: false, - fontSize: 12, - label: 'My axis', - tickSize: 6, -}; -export default function AxisCustomization() { - return ( - ( - - - - )} - getCode={({ - props, - }) => `import { ScatterChart } from '@mui/x-charts/ScatterChart'; - - -`} - /> - ); -} diff --git a/docs/data/charts/axis-customization/AxisIdStyling.js b/docs/data/charts/axis-customization/AxisIdStyling.js deleted file mode 100644 index 68caf346ae455..0000000000000 --- a/docs/data/charts/axis-customization/AxisIdStyling.js +++ /dev/null @@ -1,40 +0,0 @@ -import * as React from 'react'; -import { LineChart } from '@mui/x-charts/LineChart'; -import { axisClasses } from '@mui/x-charts/ChartsAxis'; - -const years = [2010, 2011, 2012, 2013, 2014, 2015]; -const revenue = [4000, 3000, 2000, 2780, 1890, 2390]; -const profit = [24, 13, 98, 39, 48, 38]; - -const chartConfig = { - xAxis: [{ data: years, scaleType: 'point' }], - yAxis: [ - { id: 'revenue-axis', label: 'Revenue ($)' }, - { id: 'profit-axis', label: 'Profit (%)', position: 'right' }, - ], - series: [ - { data: revenue, label: 'Revenue', yAxisId: 'revenue-axis', color: '#02b2af' }, - { data: profit, label: 'Profit', yAxisId: 'profit-axis', color: '#2e96ff' }, - ], - height: 300, -}; - -export default function AxisIdStyling() { - return ( - - ); -} diff --git a/docs/data/charts/axis-customization/AxisIdStyling.tsx.preview b/docs/data/charts/axis-customization/AxisIdStyling.tsx.preview deleted file mode 100644 index 11b9107ff4d92..0000000000000 --- a/docs/data/charts/axis-customization/AxisIdStyling.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/axis-customization/AxisTextCustomization.js b/docs/data/charts/axis-customization/AxisTextCustomization.js deleted file mode 100644 index b4100dde50f23..0000000000000 --- a/docs/data/charts/axis-customization/AxisTextCustomization.js +++ /dev/null @@ -1,91 +0,0 @@ -import Box from '@mui/material/Box'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { dataset, valueFormatter } from '../dataset/weather'; - -const chartSetting = { - height: 300, -}; - -export default function AxisTextCustomization() { - return ( - ( - - - - )} - getCode={({ props }) => `import { BarChart } from '@mui/x-charts/BarChart'; - -`} - /> - ); -} diff --git a/docs/data/charts/axis-customization/CustomAxisTicks.js b/docs/data/charts/axis-customization/CustomAxisTicks.js deleted file mode 100644 index 5d6555a14aa4b..0000000000000 --- a/docs/data/charts/axis-customization/CustomAxisTicks.js +++ /dev/null @@ -1,89 +0,0 @@ -import * as React from 'react'; -import { useTheme } from '@mui/material/styles'; -import { BarChart } from '@mui/x-charts/BarChart'; - -import { rainbowSurgePalette } from '@mui/x-charts/colorPalettes'; -import { useYAxes, useYAxisCoordinates, useYAxisTicks } from '@mui/x-charts/hooks'; - -const labels = [ - 'Server Products', - 'Enterprise Services', - 'M365 Commercial', - 'M365 Consumer', - 'LinkedIn', - 'Dynamics', - 'Gaming', - 'Windows & Devices', - 'Search & News Ads', -]; - -const data = [98.4, 7.7, 87.7, 7.4, 17.8, 7.8, 23.4, 17.3, 13.8]; - -const chartSetting = { - height: 400, - margin: { left: 0 }, - layout: 'horizontal', - xAxis: [{ id: 'x' }], - yAxis: [{ id: 'y', scaleType: 'band', data: labels, width: 4 }], -}; - -export default function CustomAxisTicks() { - const theme = useTheme(); - const seriesColor = rainbowSurgePalette(theme.palette.mode)[ - theme.palette.mode === 'dark' ? 0 : 1 - ]; - - return ( - - ); -} - -function YAxis(props) { - const theme = useTheme(); - const { yAxisIds } = useYAxes(); - const axisId = props.axisId ?? yAxisIds[0]; - - // The top, left, right, bottom of the axis according to the charts settings - const axisCoordinates = useYAxisCoordinates(axisId); - - // The array of ticks to place according to the settings - const ticks = useYAxisTicks(axisId); - - if (!axisCoordinates) { - return null; - } - - return ( - - - {ticks.map((tick, index) => ( - - - - {tick.formattedValue ?? ''} - - - ))} - - ); -} diff --git a/docs/data/charts/axis-customization/CustomAxisTicks.tsx.preview b/docs/data/charts/axis-customization/CustomAxisTicks.tsx.preview deleted file mode 100644 index 4be1eb2d1fe4a..0000000000000 --- a/docs/data/charts/axis-customization/CustomAxisTicks.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/axis-customization/GroupedAxesStyling.js b/docs/data/charts/axis-customization/GroupedAxesStyling.js deleted file mode 100644 index d54aaffd0c084..0000000000000 --- a/docs/data/charts/axis-customization/GroupedAxesStyling.js +++ /dev/null @@ -1,87 +0,0 @@ -import { LineChart } from '@mui/x-charts/LineChart'; -import { axisClasses } from '@mui/x-charts/ChartsAxis'; - -export default function GroupedAxesStyling() { - return ( - - ); -} -const getMonth = (date) => date.toLocaleDateString('en-US', { month: 'short' }); -const formatQuarterYear = (date) => { - const quarter = Math.floor(date.getMonth() / 3) + 1; - const year = date.getFullYear().toString().slice(-2); - return `Q${quarter} '${year}`; -}; - -const valueFormatter = (v) => - v.toLocaleDateString('en-US', { - month: 'short', - year: 'numeric', - }); - -const data = [ - new Date(2015, 0, 1), - new Date(2015, 1, 1), - new Date(2015, 2, 1), - new Date(2015, 3, 1), - new Date(2015, 4, 1), - new Date(2015, 5, 1), - new Date(2015, 6, 1), - new Date(2015, 7, 1), - new Date(2015, 8, 1), - new Date(2015, 9, 1), - new Date(2015, 10, 1), - new Date(2015, 11, 1), - new Date(2016, 0, 1), -]; - -const a = [ - 4000, 3000, 2000, 2780, 1890, 2390, 3490, 2400, 1398, 9800, 3908, 4800, 2040, -]; - -const b = [ - 2400, 1398, 9800, 3908, 4800, 3800, 4300, 2181, 2500, 2100, 3000, 2000, 2040, -]; - -const getPercents = (array) => - array.map((v, index) => (100 * v) / (a[index] + b[index])); - -const chartConfig = { - height: 200, - margin: { left: 0 }, - series: [ - { - data: getPercents(a), - label: 'Income', - valueFormatter: (value) => `${(value ?? 0).toFixed(0)}%`, - }, - { - data: getPercents(b), - label: 'Expenses', - valueFormatter: (value) => `${(value ?? 0).toFixed(0)}%`, - }, - ], - yAxis: [ - { - valueFormatter: (value) => `${(value ?? 0).toFixed(0)}%`, - }, - ], -}; diff --git a/docs/data/charts/axis-customization/GroupedAxesTickSize.js b/docs/data/charts/axis-customization/GroupedAxesTickSize.js deleted file mode 100644 index 8a0e55aaa7c47..0000000000000 --- a/docs/data/charts/axis-customization/GroupedAxesTickSize.js +++ /dev/null @@ -1,83 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; - -export default function GroupedAxesTickSize() { - return ( - - ); -} - -const getMonth = (date) => date.toLocaleDateString('en-US', { month: 'short' }); - -const formatQuarterYear = (date) => { - const quarter = Math.floor(date.getMonth() / 3) + 1; - const year = date.getFullYear().toString().slice(-2); - return `Q${quarter} '${year}`; -}; - -const valueFormatter = (v) => - v.toLocaleDateString('en-US', { - month: 'short', - year: 'numeric', - }); - -const data = [ - new Date(2015, 0, 1), - new Date(2015, 1, 1), - new Date(2015, 2, 1), - new Date(2015, 3, 1), - new Date(2015, 4, 1), - new Date(2015, 5, 1), - new Date(2015, 6, 1), - new Date(2015, 7, 1), - new Date(2015, 8, 1), - new Date(2015, 9, 1), - new Date(2015, 10, 1), - new Date(2015, 11, 1), -]; - -const a = [4000, 3000, 2000, 2780, 1890, 2390, 3490, 2400, 1398, 9800, 3908, 4800]; -const b = [2400, 1398, 9800, 3908, 4800, 3800, 4300, 2181, 2500, 2100, 3000, 2000]; - -const getPercents = (array) => - array.map((v, index) => (100 * v) / (a[index] + b[index])); - -const chartConfig = { - height: 200, - margin: { left: 0 }, - series: [ - { - data: getPercents(a), - label: 'Income', - valueFormatter: (value) => `${(value ?? 0).toFixed(0)}%`, - }, - { - data: getPercents(b), - label: 'Expenses', - valueFormatter: (value) => `${(value ?? 0).toFixed(0)}%`, - }, - ], - yAxis: [ - { - valueFormatter: (value) => `${(value ?? 0).toFixed(0)}%`, - }, - ], -}; diff --git a/docs/data/charts/axis-customization/MarginAndLabelPosition.js b/docs/data/charts/axis-customization/MarginAndLabelPosition.js deleted file mode 100644 index eb1925b6f9a28..0000000000000 --- a/docs/data/charts/axis-customization/MarginAndLabelPosition.js +++ /dev/null @@ -1,241 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import { BarChart } from '@mui/x-charts/BarChart'; - -export default function MarginAndLabelPosition() { - const [fixMargin, setFixMargin] = React.useState(true); - - return ( - - - setFixMargin(event.target.checked)} /> - } - label="Increase axes size" - labelPlacement="end" - /> - - - - context.location === 'tick' - ? value.split('').join('\n') - : usAirportPassengers.find((item) => item.code === value).fullName, - label: 'airports', - height: fixMargin ? 75 : undefined, - }, - ]} - // Other props - height={300} - dataset={usAirportPassengers} - series={[ - { dataKey: '2018', label: '2018' }, - { dataKey: '2019', label: '2019' }, - { dataKey: '2020', label: '2020' }, - { dataKey: '2021', label: '2021' }, - { dataKey: '2022', label: '2022' }, - ]} - hideLegend - yAxis={[ - { - valueFormatter: (value) => `${(value / 1000).toLocaleString()}k`, - label: 'passengers', - width: fixMargin ? 85 : undefined, - }, - ]} - /> - - ); -} - -const usAirportPassengers = [ - { - fullName: 'Hartsfield–Jackson Atlanta International Airport', - code: 'ATL', - 2022: 45396001, - 2021: 36676010, - 2020: 20559866, - 2019: 53505795, - 2018: 51865797, - }, - { - fullName: 'Dallas/Fort Worth International Airport', - code: 'DFW', - 2022: 35345138, - 2021: 30005266, - 2020: 18593421, - 2019: 35778573, - 2018: 32821799, - }, - { - fullName: 'Denver International Airport', - code: 'DEN', - 2022: 33773832, - 2021: 28645527, - 2020: 16243216, - 2019: 33592945, - 2018: 31362941, - }, - { - fullName: "O'Hare International Airport", - code: 'ORD', - 2022: 33120474, - 2021: 26350976, - 2020: 14606034, - 2019: 40871223, - 2018: 39873927, - }, - { - fullName: 'Los Angeles International Airport', - code: 'LAX', - 2022: 32326616, - 2021: 23663410, - 2020: 14055777, - 2019: 42939104, - 2018: 42624050, - }, - { - fullName: 'John F. Kennedy International Airport', - code: 'JFK', - 2022: 26919982, - 2021: 15273342, - 2020: 8269819, - 2019: 31036655, - 2018: 30620769, - }, - { - fullName: 'Harry Reid International Airport', - code: 'LAS', - 2022: 25480500, - 2021: 19160342, - 2020: 10584059, - 2019: 24728361, - 2018: 23795012, - }, - { - fullName: 'Orlando International Airport', - code: 'MCO', - 2022: 24469733, - 2021: 19618838, - 2020: 10467728, - 2019: 24562271, - 2018: 23202480, - }, - { - fullName: 'Miami International Airport', - code: 'MIA', - 2022: 23949892, - 2021: 17500096, - 2020: 8786007, - 2019: 21421031, - 2018: 21021640, - }, - { - fullName: 'Charlotte Douglas International Airport', - code: 'CLT', - 2022: 23100300, - 2021: 20900875, - 2020: 12952869, - 2019: 24199688, - 2018: 22281949, - }, - { - fullName: 'Seattle–Tacoma International Airport', - code: 'SEA', - 2022: 22157862, - 2021: 17430195, - 2020: 9462411, - 2019: 25001762, - 2018: 24024908, - }, - { - fullName: 'Phoenix Sky Harbor International Airport', - code: 'PHX', - 2022: 21852586, - 2021: 18940287, - 2020: 10531436, - 2019: 22433552, - 2018: 21622580, - }, - { - fullName: 'Newark Liberty International Airport', - code: 'EWR', - 2022: 21572147, - 2021: 14514049, - 2020: 7985474, - 2019: 23160763, - 2018: 22797602, - }, - { - fullName: 'San Francisco International Airport', - code: 'SFO', - 2022: 20411420, - 2021: 11725347, - 2020: 7745057, - 2019: 27779230, - 2018: 27790717, - }, - { - fullName: 'George Bush Intercontinental Airport', - code: 'IAH', - 2022: 19814052, - 2021: 16242821, - 2020: 8682558, - 2019: 21905309, - 2018: 21157398, - }, - { - fullName: 'Logan International Airport', - code: 'BOS', - 2022: 17443775, - 2021: 10909817, - 2020: 6035452, - 2019: 20699377, - 2018: 20006521, - }, - { - fullName: 'Fort Lauderdale–Hollywood International Airport', - code: 'FLL', - 2022: 15370165, - 2021: 13598994, - 2020: 8015744, - 2019: 17950989, - 2018: 17612331, - }, - { - fullName: 'Minneapolis–Saint Paul International Airport', - code: 'MSP', - 2022: 15242089, - 2021: 12211409, - 2020: 7069720, - 2019: 19192917, - 2018: 18361942, - }, - { - fullName: 'LaGuardia Airport', - code: 'LGA', - 2022: 14367463, - 2021: 7827307, - 2020: 4147116, - 2019: 15393601, - 2018: 15058501, - }, - { - fullName: 'Detroit Metropolitan Airport', - code: 'DTW', - 2022: 13751197, - 2021: 11517696, - 2020: 6822324, - 2019: 18143040, - 2018: 17436837, - }, -]; diff --git a/docs/data/charts/axis-customization/TickLabelImage.js b/docs/data/charts/axis-customization/TickLabelImage.js deleted file mode 100644 index 7c8fce5ef1420..0000000000000 --- a/docs/data/charts/axis-customization/TickLabelImage.js +++ /dev/null @@ -1,79 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { BarPlot } from '@mui/x-charts/BarChart'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; - -import { iconMap } from '../dataset/company.icons'; - -function CustomTick(props) { - const { x, y, text } = props; - const logo = iconMap[text]; - - return ( - - -
- - {logo && ( - {text} - )} - -
- - - ); -} - -export default function TickLabelImage() { - return ( - - - - - - - - ); -} diff --git a/docs/data/charts/axis-customization/axis-customization.md b/docs/data/charts/axis-customization/axis-customization.md index 52f4aa7c1104d..9d61227ebed75 100644 --- a/docs/data/charts/axis-customization/axis-customization.md +++ b/docs/data/charts/axis-customization/axis-customization.md @@ -17,7 +17,7 @@ This is useful when you have multiple axes and want to style them differently. In the example below, the revenue axis label is styled with a teal color and the profit axis label with a blue color to match their respective series. -{{"demo": "AxisIdStyling.js"}} +{{"component": "file://./demos/axis-id-styling/index.ts"}} ## Styling grouped axes @@ -27,14 +27,14 @@ You can customize the tick size for each [grouped axis](/x/react-charts/axis/#gr The `tickSize` also affects the tick label position. Each item in the array corresponds to a group defined in the `getValue()` function. -{{"demo": "GroupedAxesTickSize.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/grouped-axes-tick-size/index.ts", "collapseToEmpty": true}} ### Selecting groups To target a specific group, use the `data-group-index` attribute as a selector. The example below has a yellow tick color for the last group and blue text for the first group. -{{"demo": "GroupedAxesStyling.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/grouped-axes-styling/index.ts", "collapseToEmpty": true}} ## Fixing tick label overflow issues @@ -45,13 +45,13 @@ In the demo below, the size of the x- and y-axes is modified to increase the spa The first and last tick labels may bleed into the margin, and if that margin is not enough to display the label, it might be clipped. To avoid this, you can use the `margin` prop to increase the space between the chart and the edge of the container. -{{"demo": "MarginAndLabelPosition.js"}} +{{"component": "file://./demos/margin-and-label-position/index.ts"}} ## Passing props The demo below illustrates all of the props available to customize axis rendering: -{{"demo": "AxisCustomization.js", "hideToolbar": true, "bg": "playground"}} +{{"component": "file://./demos/axis-customization/index.ts", "hideToolbar": true, "bg": "playground"}} ## Text customization @@ -60,7 +60,7 @@ To customize the text elements (tick labels and axis labels), use the `tickLabel When not set, the default values for the `textAnchor` and `dominantBaseline` properties depend on the value of the `angle` property. You can test how these values behave and relate to one another in the demo below: -{{"demo": "AxisTextCustomization.js", "hideToolbar": true, "bg": "playground"}} +{{"component": "file://./demos/axis-text-customization/index.ts", "hideToolbar": true, "bg": "playground"}} ## Adding tick label icons @@ -68,7 +68,7 @@ A `foreignObject` element can be used to render non-SVG elements inside SVGs. Yo Bear in mind that using `foreignObject` might prevent charts from being [exported](/x/react-charts/export/). -{{"demo": "TickLabelImage.js"}} +{{"component": "file://./demos/tick-label-image/index.ts"}} ## Custom axis rendering @@ -77,4 +77,4 @@ For more information about how to create custom axes, refer to the [composition The same technique can move the tick labels inside the plot, as shown in [Labels on the grid](/x/react-charts/axis-ticks/#labels-on-the-grid). -{{"demo": "CustomAxisTicks.js"}} +{{"component": "file://./demos/custom-axis-ticks/index.ts"}} diff --git a/docs/data/charts/axis-customization/AxisCustomization.tsx b/docs/data/charts/axis-customization/demos/axis-customization/AxisCustomization.tsx similarity index 97% rename from docs/data/charts/axis-customization/AxisCustomization.tsx rename to docs/data/charts/axis-customization/demos/axis-customization/AxisCustomization.tsx index 41f0fed1d2870..24e33998a7339 100644 --- a/docs/data/charts/axis-customization/AxisCustomization.tsx +++ b/docs/data/charts/axis-customization/demos/axis-customization/AxisCustomization.tsx @@ -19,6 +19,7 @@ const defaultXAxis = { }; export default function AxisCustomization() { return ( + // @focus-start @padding 2 `} /> + // @focus-end ); } diff --git a/docs/data/charts/axis-customization/demos/axis-customization/client.ts b/docs/data/charts/axis-customization/demos/axis-customization/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis-customization/demos/axis-customization/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis-customization/demos/axis-customization/index.ts b/docs/data/charts/axis-customization/demos/axis-customization/index.ts new file mode 100644 index 0000000000000..bc2d2c1ef597b --- /dev/null +++ b/docs/data/charts/axis-customization/demos/axis-customization/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AxisCustomization from './AxisCustomization'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AxisCustomization, { ClientProvider }); diff --git a/docs/data/charts/axis-customization/AxisIdStyling.tsx b/docs/data/charts/axis-customization/demos/axis-id-styling/AxisIdStyling.tsx similarity index 87% rename from docs/data/charts/axis-customization/AxisIdStyling.tsx rename to docs/data/charts/axis-customization/demos/axis-id-styling/AxisIdStyling.tsx index fb7e27433abac..297e81fe42314 100644 --- a/docs/data/charts/axis-customization/AxisIdStyling.tsx +++ b/docs/data/charts/axis-customization/demos/axis-id-styling/AxisIdStyling.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { LineChart, type LineChartProps } from '@mui/x-charts/LineChart'; +import { LineChart } from '@mui/x-charts/LineChart'; +import type { LineChartProps } from '@mui/x-charts/LineChart'; import { axisClasses } from '@mui/x-charts/ChartsAxis'; const years = [2010, 2011, 2012, 2013, 2014, 2015]; @@ -21,6 +22,7 @@ const chartConfig: LineChartProps = { export default function AxisIdStyling() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/axis-customization/demos/axis-id-styling/client.ts b/docs/data/charts/axis-customization/demos/axis-id-styling/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis-customization/demos/axis-id-styling/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis-customization/demos/axis-id-styling/index.ts b/docs/data/charts/axis-customization/demos/axis-id-styling/index.ts new file mode 100644 index 0000000000000..8ff8658d97cc7 --- /dev/null +++ b/docs/data/charts/axis-customization/demos/axis-id-styling/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AxisIdStyling from './AxisIdStyling'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AxisIdStyling, { ClientProvider }); diff --git a/docs/data/charts/axis-customization/AxisTextCustomization.tsx b/docs/data/charts/axis-customization/demos/axis-text-customization/AxisTextCustomization.tsx similarity index 95% rename from docs/data/charts/axis-customization/AxisTextCustomization.tsx rename to docs/data/charts/axis-customization/demos/axis-text-customization/AxisTextCustomization.tsx index 2c448d39d48be..4e1343dd21557 100644 --- a/docs/data/charts/axis-customization/AxisTextCustomization.tsx +++ b/docs/data/charts/axis-customization/demos/axis-text-customization/AxisTextCustomization.tsx @@ -1,7 +1,7 @@ import Box from '@mui/material/Box'; import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; import { BarChart } from '@mui/x-charts/BarChart'; -import { dataset, valueFormatter } from '../dataset/weather'; +import { dataset, valueFormatter } from '../../../dataset/weather'; const chartSetting = { height: 300, @@ -9,6 +9,7 @@ const chartSetting = { export default function AxisTextCustomization() { return ( + // @focus-start @padding 2 `} /> + // @focus-end ); } diff --git a/docs/data/charts/axis-customization/demos/axis-text-customization/client.ts b/docs/data/charts/axis-customization/demos/axis-text-customization/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis-customization/demos/axis-text-customization/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis-customization/demos/axis-text-customization/index.ts b/docs/data/charts/axis-customization/demos/axis-text-customization/index.ts new file mode 100644 index 0000000000000..9319285b1c825 --- /dev/null +++ b/docs/data/charts/axis-customization/demos/axis-text-customization/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AxisTextCustomization from './AxisTextCustomization'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AxisTextCustomization, { ClientProvider }); diff --git a/docs/data/charts/axis-customization/CustomAxisTicks.tsx b/docs/data/charts/axis-customization/demos/custom-axis-ticks/CustomAxisTicks.tsx similarity index 91% rename from docs/data/charts/axis-customization/CustomAxisTicks.tsx rename to docs/data/charts/axis-customization/demos/custom-axis-ticks/CustomAxisTicks.tsx index 9e4f1b6002d4e..cbf992f4ae85c 100644 --- a/docs/data/charts/axis-customization/CustomAxisTicks.tsx +++ b/docs/data/charts/axis-customization/demos/custom-axis-ticks/CustomAxisTicks.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import { useTheme } from '@mui/material/styles'; -import { BarChart, BarChartProps } from '@mui/x-charts/BarChart'; -import { ChartsYAxisProps } from '@mui/x-charts/models'; +import type { BarChartProps } from '@mui/x-charts/BarChart'; +import { BarChart } from '@mui/x-charts/BarChart'; +import type { ChartsYAxisProps } from '@mui/x-charts/models'; import { rainbowSurgePalette } from '@mui/x-charts/colorPalettes'; import { useYAxes, useYAxisCoordinates, useYAxisTicks } from '@mui/x-charts/hooks'; @@ -28,6 +29,7 @@ const chartSetting = { } satisfies Partial; export default function CustomAxisTicks() { + // @focus-start @padding 1 const theme = useTheme(); const seriesColor = rainbowSurgePalette(theme.palette.mode)[ theme.palette.mode === 'dark' ? 0 : 1 @@ -40,6 +42,7 @@ export default function CustomAxisTicks() { series={[{ data, color: seriesColor }]} /> ); + // @focus-end } function YAxis(props: ChartsYAxisProps) { diff --git a/docs/data/charts/axis-customization/demos/custom-axis-ticks/client.ts b/docs/data/charts/axis-customization/demos/custom-axis-ticks/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis-customization/demos/custom-axis-ticks/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis-customization/demos/custom-axis-ticks/index.ts b/docs/data/charts/axis-customization/demos/custom-axis-ticks/index.ts new file mode 100644 index 0000000000000..a3637e643e3c0 --- /dev/null +++ b/docs/data/charts/axis-customization/demos/custom-axis-ticks/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomAxisTicks from './CustomAxisTicks'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomAxisTicks, { ClientProvider }); diff --git a/docs/data/charts/axis-customization/GroupedAxesStyling.tsx b/docs/data/charts/axis-customization/demos/grouped-axes-styling/GroupedAxesStyling.tsx similarity index 97% rename from docs/data/charts/axis-customization/GroupedAxesStyling.tsx rename to docs/data/charts/axis-customization/demos/grouped-axes-styling/GroupedAxesStyling.tsx index 4a18ed2fa8dbe..213295c084add 100644 --- a/docs/data/charts/axis-customization/GroupedAxesStyling.tsx +++ b/docs/data/charts/axis-customization/demos/grouped-axes-styling/GroupedAxesStyling.tsx @@ -3,6 +3,7 @@ import { axisClasses } from '@mui/x-charts/ChartsAxis'; export default function GroupedAxesStyling() { return ( + // @focus-start @padding 2 + // @focus-end ); } const getMonth = (date: Date) => diff --git a/docs/data/charts/axis-customization/demos/grouped-axes-styling/client.ts b/docs/data/charts/axis-customization/demos/grouped-axes-styling/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis-customization/demos/grouped-axes-styling/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis-customization/demos/grouped-axes-styling/index.ts b/docs/data/charts/axis-customization/demos/grouped-axes-styling/index.ts new file mode 100644 index 0000000000000..0cd0cf263d6df --- /dev/null +++ b/docs/data/charts/axis-customization/demos/grouped-axes-styling/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GroupedAxesStyling from './GroupedAxesStyling'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GroupedAxesStyling, { ClientProvider }); diff --git a/docs/data/charts/axis-customization/GroupedAxesTickSize.tsx b/docs/data/charts/axis-customization/demos/grouped-axes-tick-size/GroupedAxesTickSize.tsx similarity index 97% rename from docs/data/charts/axis-customization/GroupedAxesTickSize.tsx rename to docs/data/charts/axis-customization/demos/grouped-axes-tick-size/GroupedAxesTickSize.tsx index 497a268e8dad3..8f0dc02e153c2 100644 --- a/docs/data/charts/axis-customization/GroupedAxesTickSize.tsx +++ b/docs/data/charts/axis-customization/demos/grouped-axes-tick-size/GroupedAxesTickSize.tsx @@ -2,6 +2,7 @@ import { BarChart } from '@mui/x-charts/BarChart'; export default function GroupedAxesTickSize() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/axis-customization/demos/grouped-axes-tick-size/client.ts b/docs/data/charts/axis-customization/demos/grouped-axes-tick-size/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis-customization/demos/grouped-axes-tick-size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis-customization/demos/grouped-axes-tick-size/index.ts b/docs/data/charts/axis-customization/demos/grouped-axes-tick-size/index.ts new file mode 100644 index 0000000000000..fcba9c0779194 --- /dev/null +++ b/docs/data/charts/axis-customization/demos/grouped-axes-tick-size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GroupedAxesTickSize from './GroupedAxesTickSize'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GroupedAxesTickSize, { ClientProvider }); diff --git a/docs/data/charts/axis-customization/MarginAndLabelPosition.tsx b/docs/data/charts/axis-customization/demos/margin-and-label-position/MarginAndLabelPosition.tsx similarity index 99% rename from docs/data/charts/axis-customization/MarginAndLabelPosition.tsx rename to docs/data/charts/axis-customization/demos/margin-and-label-position/MarginAndLabelPosition.tsx index 5a616b96964b2..e17dfd443eb68 100644 --- a/docs/data/charts/axis-customization/MarginAndLabelPosition.tsx +++ b/docs/data/charts/axis-customization/demos/margin-and-label-position/MarginAndLabelPosition.tsx @@ -6,6 +6,7 @@ import Checkbox from '@mui/material/Checkbox'; import { BarChart } from '@mui/x-charts/BarChart'; export default function MarginAndLabelPosition() { + // @focus-start @padding 1 const [fixMargin, setFixMargin] = React.useState(true); return ( @@ -55,6 +56,7 @@ export default function MarginAndLabelPosition() { /> ); + // @focus-end } const usAirportPassengers = [ diff --git a/docs/data/charts/axis-customization/demos/margin-and-label-position/client.ts b/docs/data/charts/axis-customization/demos/margin-and-label-position/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis-customization/demos/margin-and-label-position/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis-customization/demos/margin-and-label-position/index.ts b/docs/data/charts/axis-customization/demos/margin-and-label-position/index.ts new file mode 100644 index 0000000000000..3f8624ac1c74b --- /dev/null +++ b/docs/data/charts/axis-customization/demos/margin-and-label-position/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MarginAndLabelPosition from './MarginAndLabelPosition'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MarginAndLabelPosition, { ClientProvider }); diff --git a/docs/data/charts/axis-customization/TickLabelImage.tsx b/docs/data/charts/axis-customization/demos/tick-label-image/TickLabelImage.tsx similarity index 92% rename from docs/data/charts/axis-customization/TickLabelImage.tsx rename to docs/data/charts/axis-customization/demos/tick-label-image/TickLabelImage.tsx index 7f5eb6150302a..17e1557ce4128 100644 --- a/docs/data/charts/axis-customization/TickLabelImage.tsx +++ b/docs/data/charts/axis-customization/demos/tick-label-image/TickLabelImage.tsx @@ -4,8 +4,8 @@ import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; import { BarPlot } from '@mui/x-charts/BarChart'; import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsTextProps } from '@mui/x-charts/ChartsText'; -import { iconMap } from '../dataset/company.icons'; +import type { ChartsTextProps } from '@mui/x-charts/ChartsText'; +import { iconMap } from '../../../dataset/company.icons.ts'; function CustomTick(props: ChartsTextProps) { const { x, y, text } = props; @@ -52,6 +52,7 @@ function CustomTick(props: ChartsTextProps) { export default function TickLabelImage() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/axis-customization/demos/tick-label-image/client.ts b/docs/data/charts/axis-customization/demos/tick-label-image/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis-customization/demos/tick-label-image/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis-customization/demos/tick-label-image/index.ts b/docs/data/charts/axis-customization/demos/tick-label-image/index.ts new file mode 100644 index 0000000000000..70ec26f16bcc1 --- /dev/null +++ b/docs/data/charts/axis-customization/demos/tick-label-image/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TickLabelImage from './TickLabelImage'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TickLabelImage, { ClientProvider }); diff --git a/docs/data/charts/axis-ticks/CustomTickFrequency.js b/docs/data/charts/axis-ticks/CustomTickFrequency.js deleted file mode 100644 index 9342ef1da00ac..0000000000000 --- a/docs/data/charts/axis-ticks/CustomTickFrequency.js +++ /dev/null @@ -1,74 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; - -import { tickFrequencies } from '@mui/x-charts/utils'; -import alphabetStock from '../dataset/GOOGL.json'; - -export default function CustomTickFrequency() { - return ( - - - - ); -} - -const quarterFormat = (d) => `Q${Math.floor(d.getMonth() / 3) + 1}`; -const weekFormat = (d) => `W${getWeekNumber(d)}`; - -const zoom = { minSpan: 1, filterMode: 'discard' }; - -const xAxis = { - id: 'date', - data: alphabetStock.map((day) => new Date(day.date)), - scaleType: 'band', - zoom, - valueFormatter: (value) => value.toLocaleDateString(), - height: 30, - tickNumber: 15, -}; - -const barSettings = { - height: 200, - hideLegend: true, - margin: { bottom: 5 }, - series: [ - { - type: 'bar', - yAxisId: 'volume', - label: 'Volume', - color: 'lightgray', - data: alphabetStock.map((day) => day.volume), - }, - ], - yAxis: [ - { - id: 'volume', - scaleType: 'linear', - position: 'left', - valueFormatter: (value) => `${(value / 1000000).toLocaleString()}M`, - width: 55, - }, - ], - grid: { vertical: true, horizontal: true }, -}; - -function getWeekNumber(date) { - const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())); - const dayNum = d.getUTCDay() || 7; - d.setUTCDate(d.getUTCDate() + 4 - dayNum); - const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1)); - return Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7); -} diff --git a/docs/data/charts/axis-ticks/CustomTickFrequency.tsx.preview b/docs/data/charts/axis-ticks/CustomTickFrequency.tsx.preview deleted file mode 100644 index 1713cc9daf976..0000000000000 --- a/docs/data/charts/axis-ticks/CustomTickFrequency.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/axis-ticks/GridDemo.js b/docs/data/charts/axis-ticks/GridDemo.js deleted file mode 100644 index 1d30b28f9fc7d..0000000000000 --- a/docs/data/charts/axis-ticks/GridDemo.js +++ /dev/null @@ -1,23 +0,0 @@ -import { chartsGridClasses } from '@mui/x-charts/ChartsGrid'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { dataset, valueFormatter } from '../dataset/weather'; - -const chartSetting = { - yAxis: [{ label: 'rainfall (mm)', width: 60 }], - height: 300, -}; - -export default function GridDemo() { - return ( - - ); -} diff --git a/docs/data/charts/axis-ticks/GridDemo.tsx b/docs/data/charts/axis-ticks/GridDemo.tsx deleted file mode 100644 index 1d30b28f9fc7d..0000000000000 --- a/docs/data/charts/axis-ticks/GridDemo.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { chartsGridClasses } from '@mui/x-charts/ChartsGrid'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { dataset, valueFormatter } from '../dataset/weather'; - -const chartSetting = { - yAxis: [{ label: 'rainfall (mm)', width: 60 }], - height: 300, -}; - -export default function GridDemo() { - return ( - - ); -} diff --git a/docs/data/charts/axis-ticks/GridDemo.tsx.preview b/docs/data/charts/axis-ticks/GridDemo.tsx.preview deleted file mode 100644 index 0790666ba08eb..0000000000000 --- a/docs/data/charts/axis-ticks/GridDemo.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/axis-ticks/GridLabels.js b/docs/data/charts/axis-ticks/GridLabels.js deleted file mode 100644 index e56f13df32020..0000000000000 --- a/docs/data/charts/axis-ticks/GridLabels.js +++ /dev/null @@ -1,63 +0,0 @@ -import * as React from 'react'; -import { LineChart, lineClasses } from '@mui/x-charts/LineChart'; -import { chartsGridClasses } from '@mui/x-charts/ChartsGrid'; - -import { useDrawingArea, useYAxes, useYAxisTicks } from '@mui/x-charts/hooks'; -import { dataset, valueFormatter } from '../dataset/weather'; - -const LABEL_GAP = 4; - -function GridLabelsYAxis(props) { - const { yAxisIds } = useYAxes(); - const axisId = props.axisId ?? yAxisIds[0]; - - const ticks = useYAxisTicks(axisId); - const { left } = useDrawingArea(); - - return ( - - {ticks.map((tick) => ( - - {tick.formattedValue} - - ))} - - ); -} - -export default function GridLabels() { - return ( - ({ - [`& .${chartsGridClasses.horizontalLine}`]: { strokeDasharray: '4 4' }, - // A lighter area keeps the grid and its labels visible behind the data. - [`& .${lineClasses.area}`]: { fillOpacity: 0.3 }, - '& .grid-label': { - fill: (theme.vars || theme).palette.text.secondary, - fontSize: 12, - // Outline the text so that it stays readable over the area. - stroke: (theme.vars || theme).palette.background.paper, - strokeWidth: 3, - paintOrder: 'stroke', - }, - })} - /> - ); -} diff --git a/docs/data/charts/axis-ticks/OrdinalTickPlacement.js b/docs/data/charts/axis-ticks/OrdinalTickPlacement.js deleted file mode 100644 index ead8e297128c6..0000000000000 --- a/docs/data/charts/axis-ticks/OrdinalTickPlacement.js +++ /dev/null @@ -1,83 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; - -import alphabetStock from '../dataset/GOOGL.json'; -import SelectTimeFrequency from './SelectTimeFrequency'; - -const tickFrequencies = [ - 'years', - 'quarterly', - 'months', - 'biweekly', - 'weeks', - 'days', -]; - -export default function OrdinalTickPlacement() { - const [ordinalTimeTicks, setOrdinalTimeTicks] = React.useState(defaultTicks); - const [tickNumber, setTickNumber] = React.useState(5); - - return ( - - - ordinalTimeTicks[frequency], - ), - }, - ]} - /> - - ); -} - -const defaultTicks = Object.fromEntries( - tickFrequencies.map((frequency) => [frequency, true]), -); - -const zoom = { minSpan: 1, filterMode: 'discard' }; - -const xAxis = { - id: 'date', - data: alphabetStock.map((day) => new Date(day.date)), - scaleType: 'band', - zoom, - valueFormatter: (value) => value.toLocaleDateString(), - height: 30, -}; - -const barSettings = { - height: 200, - hideLegend: true, - margin: { bottom: 5 }, - series: [ - { - type: 'bar', - yAxisId: 'volume', - label: 'Volume', - color: 'lightgray', - data: alphabetStock.map((day) => day.volume), - }, - ], - yAxis: [ - { - id: 'volume', - scaleType: 'linear', - position: 'left', - valueFormatter: (value) => `${(value / 1000000).toLocaleString()}M`, - width: 55, - }, - ], -}; diff --git a/docs/data/charts/axis-ticks/SelectTimeFrequency.tsx b/docs/data/charts/axis-ticks/SelectTimeFrequency.tsx index 0abcd0e5290c1..25d6cd2442a22 100644 --- a/docs/data/charts/axis-ticks/SelectTimeFrequency.tsx +++ b/docs/data/charts/axis-ticks/SelectTimeFrequency.tsx @@ -5,7 +5,7 @@ import FormLabel from '@mui/material/FormLabel'; import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; import Slider from '@mui/material/Slider'; -import { TickFrequency } from '@mui/x-charts/models'; +import type { TickFrequency } from '@mui/x-charts/models'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; diff --git a/docs/data/charts/axis-ticks/TickLabelPosition.js b/docs/data/charts/axis-ticks/TickLabelPosition.js deleted file mode 100644 index 6d404c108af3b..0000000000000 --- a/docs/data/charts/axis-ticks/TickLabelPosition.js +++ /dev/null @@ -1,96 +0,0 @@ -import Box from '@mui/material/Box'; - -import { LineChart } from '@mui/x-charts/LineChart'; - -export default function TickLabelPosition() { - return ( - - [0, 12].includes(time.getHours()), - tickLabelInterval: (time) => time.getHours() === 0, - position: 'bottom', - }, - { - ...xAxisCommon, - id: 'topAxis', - scaleType: 'point', - position: 'top', - }, - ]} - yAxis={[{ position: 'none' }]} - {...config} - /> - - ); -} - -const valueFormatter = (date) => - date.toLocaleDateString('fr-FR', { - month: '2-digit', - day: '2-digit', - }); - -const timeData = [ - new Date(2023, 7, 31), - new Date(2023, 7, 31, 3), - new Date(2023, 7, 31, 6), - new Date(2023, 7, 31, 9), - new Date(2023, 7, 31, 12), - new Date(2023, 7, 31, 15), - new Date(2023, 7, 31, 18), - new Date(2023, 8, 1), - new Date(2023, 8, 1, 3), - new Date(2023, 8, 1, 6), - new Date(2023, 8, 1, 9), - new Date(2023, 8, 1, 12), - new Date(2023, 8, 1, 15), - new Date(2023, 8, 1, 18), - new Date(2023, 8, 2), - new Date(2023, 8, 2, 3), - new Date(2023, 8, 2, 6), - new Date(2023, 8, 2, 9), - new Date(2023, 8, 2, 12), - new Date(2023, 8, 2, 15), - new Date(2023, 8, 2, 18), - new Date(2023, 8, 3), - new Date(2023, 8, 3, 3), - new Date(2023, 8, 3, 6), - new Date(2023, 8, 3, 9), - new Date(2023, 8, 3, 12), - new Date(2023, 8, 3, 15), - new Date(2023, 8, 3, 18), - new Date(2023, 8, 4), -]; - -const y1 = [ - 5, 5.5, 5.3, 4.9, 5, 6.2, 8.9, 10, 15, 30, 80, 90, 94, 93, 85, 86, 75, 70, 68, 50, - 20, 30, 35, 28, 25, 27, 30, 28, 25, -]; - -const y2 = [ - 90, 93, 89, 84, 85, 83, 73, 70, 63, 32, 30, 25, 18, 19, 23, 30, 32, 36, 40, 40, 42, - 45, 46, 42, 39, 40, 41, 43, 50, -]; - -const showMark = (params) => { - const { position } = params; - return position.getHours() === 0; -}; - -const config = { - series: [ - { data: y1, showMark }, - { data: y2, showMark }, - ], - height: 300, -}; -const xAxisCommon = { - data: timeData, - scaleType: 'time', - valueFormatter, -}; diff --git a/docs/data/charts/axis-ticks/TickNumber.js b/docs/data/charts/axis-ticks/TickNumber.js deleted file mode 100644 index 33403a8e9a4cc..0000000000000 --- a/docs/data/charts/axis-ticks/TickNumber.js +++ /dev/null @@ -1,59 +0,0 @@ -import Box from '@mui/material/Box'; -import { LineChart } from '@mui/x-charts/LineChart'; - -const timeData = [ - new Date(2023, 7, 31), - new Date(2023, 7, 31, 12), - new Date(2023, 8, 1), - new Date(2023, 8, 1, 12), - new Date(2023, 8, 2), - new Date(2023, 8, 2, 12), - new Date(2023, 8, 3), - new Date(2023, 8, 3, 12), - new Date(2023, 8, 4), -]; - -const y1 = [5, 5, 10, 90, 85, 70, 30, 25, 25]; -const y2 = [90, 85, 70, 25, 23, 40, 45, 40, 50]; - -const valueFormatter = (date) => - date.getHours() === 0 - ? date.toLocaleDateString('fr-FR', { - month: '2-digit', - day: '2-digit', - }) - : date.toLocaleTimeString('fr-FR', { - hour: '2-digit', - }); - -const config = { - series: [{ data: y1 }, { data: y2 }], - height: 300, -}; -const xAxisCommon = { - data: timeData, - scaleType: 'time', - valueFormatter, -}; -export default function TickNumber() { - return ( - - - - ); -} diff --git a/docs/data/charts/axis-ticks/TickNumber.tsx.preview b/docs/data/charts/axis-ticks/TickNumber.tsx.preview deleted file mode 100644 index 74a9c0907e28c..0000000000000 --- a/docs/data/charts/axis-ticks/TickNumber.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/axis-ticks/TickPosition.js b/docs/data/charts/axis-ticks/TickPosition.js deleted file mode 100644 index 68baba4f4cf7b..0000000000000 --- a/docs/data/charts/axis-ticks/TickPosition.js +++ /dev/null @@ -1,93 +0,0 @@ -import Box from '@mui/material/Box'; - -import { LineChart } from '@mui/x-charts/LineChart'; - -export default function TickPosition() { - return ( - - time.getHours() === 0, - position: 'bottom', - }, - { - ...xAxisCommon, - scaleType: 'point', - position: 'top', - }, - ]} - {...config} - /> - - ); -} - -const valueFormatter = (date) => - date.toLocaleDateString('fr-FR', { - month: '2-digit', - day: '2-digit', - }); - -const timeData = [ - new Date(2023, 7, 31), - new Date(2023, 7, 31, 3), - new Date(2023, 7, 31, 6), - new Date(2023, 7, 31, 9), - new Date(2023, 7, 31, 12), - new Date(2023, 7, 31, 15), - new Date(2023, 7, 31, 18), - new Date(2023, 8, 1), - new Date(2023, 8, 1, 3), - new Date(2023, 8, 1, 6), - new Date(2023, 8, 1, 9), - new Date(2023, 8, 1, 12), - new Date(2023, 8, 1, 15), - new Date(2023, 8, 1, 18), - new Date(2023, 8, 2), - new Date(2023, 8, 2, 3), - new Date(2023, 8, 2, 6), - new Date(2023, 8, 2, 9), - new Date(2023, 8, 2, 12), - new Date(2023, 8, 2, 15), - new Date(2023, 8, 2, 18), - new Date(2023, 8, 3), - new Date(2023, 8, 3, 3), - new Date(2023, 8, 3, 6), - new Date(2023, 8, 3, 9), - new Date(2023, 8, 3, 12), - new Date(2023, 8, 3, 15), - new Date(2023, 8, 3, 18), - new Date(2023, 8, 4), -]; - -const y1 = [ - 5, 5.5, 5.3, 4.9, 5, 6.2, 8.9, 10, 15, 30, 80, 90, 94, 93, 85, 86, 75, 70, 68, 50, - 20, 30, 35, 28, 25, 27, 30, 28, 25, -]; - -const y2 = [ - 90, 93, 89, 84, 85, 83, 73, 70, 63, 32, 30, 25, 18, 19, 23, 30, 32, 36, 40, 40, 42, - 45, 46, 42, 39, 40, 41, 43, 50, -]; - -const showMark = (params) => { - const { position } = params; - return position.getHours() === 0; -}; - -const config = { - series: [ - { data: y1, showMark }, - { data: y2, showMark }, - ], - height: 300, - yAxis: [{ position: 'none' }], -}; -const xAxisCommon = { - data: timeData, - scaleType: 'time', - valueFormatter, -}; diff --git a/docs/data/charts/axis-ticks/TickPosition.tsx.preview b/docs/data/charts/axis-ticks/TickPosition.tsx.preview deleted file mode 100644 index 29e40c659c5db..0000000000000 --- a/docs/data/charts/axis-ticks/TickPosition.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - time.getHours() === 0, - position: 'bottom', - }, - { - ...xAxisCommon, - scaleType: 'point', - position: 'top', - }, - ]} - {...config} -/> \ No newline at end of file diff --git a/docs/data/charts/axis-ticks/TickSpacing.js b/docs/data/charts/axis-ticks/TickSpacing.js deleted file mode 100644 index 3b2c004b3461b..0000000000000 --- a/docs/data/charts/axis-ticks/TickSpacing.js +++ /dev/null @@ -1,52 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Slider from '@mui/material/Slider'; -import Typography from '@mui/material/Typography'; -import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; -import data from '../dataset/sp500-intraday.json'; - -const tickLabelDateFormatter = new Intl.DateTimeFormat(undefined, { - month: 'short', - day: 'numeric', -}); - -export default function TickSpacing() { - const [tickSpacing, setTickSpacing] = React.useState(50); - - return ( - - - - Tick Spacing - - setTickSpacing(value)} - valueLabelDisplay="auto" - min={0} - max={100} - step={5} - sx={{ mt: 2 }} - aria-labelledby="tickSpacing" - /> - - new Date(Date.parse(d.date))), - valueFormatter: (v) => tickLabelDateFormatter.format(v), - tickSpacing, - tickPlacement: 'middle', - zoom: true, - }, - ]} - series={[{ data: data.map((d) => d.close), label: 'Close' }]} - height={300} - /> - - ); -} diff --git a/docs/data/charts/axis-ticks/axis-ticks.md b/docs/data/charts/axis-ticks/axis-ticks.md index 051d5b7a16b59..25bf01fa2afc9 100644 --- a/docs/data/charts/axis-ticks/axis-ticks.md +++ b/docs/data/charts/axis-ticks/axis-ticks.md @@ -25,7 +25,7 @@ If you use composition you can pass these as props to the `` compo In this Demo the horizontal grid is customized with some CSS selectors. -{{"demo": "GridDemo.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/grid-demo/index.ts", "collapseToEmpty": true}} ### Labels on the grid @@ -39,7 +39,7 @@ Together, they let you place one label above each grid line. Setting `position: 'none'` also frees the space, but the axis is then removed from the chart, and the `yAxis` slot is no longer rendered. ::: -{{"demo": "GridLabels.js"}} +{{"component": "file://./demos/grid-labels/index.ts"}} ## Tick position @@ -58,7 +58,7 @@ To better control how the ticks render, you can also provide `tickMinStep` and ` In the demo below, the top axis has a `tickMinStep` of half a day, and the bottom axis has a `tickMinStep` of a full day. -{{"demo": "TickNumber.js"}} +{{"component": "file://./demos/tick-number/index.ts"}} ### Tick spacing @@ -68,7 +68,7 @@ Having a minimum space between ticks improves the readability of the axis and ca This property defaults to 0 and is only available for ordinal axes, that is, axes with a band or point scale. -{{"demo": "TickSpacing.js"}} +{{"component": "file://./demos/tick-spacing/index.ts"}} ### Fixed tick position @@ -81,7 +81,7 @@ In the demo below, both axes are set to `scaleType='point'`. The top axis demonstrates the default behavior with a tick for each point. The bottom axis uses a filtering function to only display a tick at the beginning of a day. -{{"demo": "TickPosition.js"}} +{{"component": "file://./demos/tick-position/index.ts"}} ### Filtering tick labels @@ -99,7 +99,7 @@ You can override this behavior with `tickLabelInterval: () => true` which forces In the example below, the top axis is a reference for the default behavior: tick labels don't overflow. At the bottom, you can see one tick for the beginning and the middle of the day, but the tick label is only displayed for the beginning of the day. -{{"demo": "TickLabelPosition.js"}} +{{"component": "file://./demos/tick-label-position/index.ts"}} ### Ordinal tick management @@ -117,7 +117,7 @@ When using `ordinalTimeTicks` the property `tickPlacement` is ignored, and compu In the following demo, you can modify the `ordinalTimeTicks` based on built-in frequencies and see how it impacts zoom behavior. -{{"demo": "OrdinalTickPlacement.js"}} +{{"component": "file://./demos/ordinal-tick-placement/index.ts"}} The `TickFrequencyDefinition` is an object made of following properties: @@ -129,4 +129,4 @@ The built-in frequency definitions are exported as `tickFrequencies` from `'@mui In the following demo, we use the `tickFrequencies` to display quarters and weeks with different labels. -{{"demo": "CustomTickFrequency.js"}} +{{"component": "file://./demos/custom-tick-frequency/index.ts"}} diff --git a/docs/data/charts/axis-ticks/CustomTickFrequency.tsx b/docs/data/charts/axis-ticks/demos/custom-tick-frequency/CustomTickFrequency.tsx similarity index 90% rename from docs/data/charts/axis-ticks/CustomTickFrequency.tsx rename to docs/data/charts/axis-ticks/demos/custom-tick-frequency/CustomTickFrequency.tsx index a2e25a16bf36d..f3eff1fb386b4 100644 --- a/docs/data/charts/axis-ticks/CustomTickFrequency.tsx +++ b/docs/data/charts/axis-ticks/demos/custom-tick-frequency/CustomTickFrequency.tsx @@ -1,13 +1,19 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; -import { BarSeriesType, XAxis, YAxis, ZoomOptions } from '@mui/x-charts-pro/models'; +import type { + BarSeriesType, + XAxis, + YAxis, + ZoomOptions, +} from '@mui/x-charts-pro/models'; import { tickFrequencies } from '@mui/x-charts/utils'; -import alphabetStock from '../dataset/GOOGL.json'; +import alphabetStock from '../../../dataset/GOOGL.json'; export default function CustomTickFrequency() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/axis-ticks/demos/custom-tick-frequency/client.ts b/docs/data/charts/axis-ticks/demos/custom-tick-frequency/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis-ticks/demos/custom-tick-frequency/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis-ticks/demos/custom-tick-frequency/index.ts b/docs/data/charts/axis-ticks/demos/custom-tick-frequency/index.ts new file mode 100644 index 0000000000000..8b870817376b9 --- /dev/null +++ b/docs/data/charts/axis-ticks/demos/custom-tick-frequency/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomTickFrequency from './CustomTickFrequency'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomTickFrequency, { ClientProvider }); diff --git a/docs/data/charts/axis-ticks/demos/grid-demo/GridDemo.tsx b/docs/data/charts/axis-ticks/demos/grid-demo/GridDemo.tsx new file mode 100644 index 0000000000000..f2bafc1b9adb6 --- /dev/null +++ b/docs/data/charts/axis-ticks/demos/grid-demo/GridDemo.tsx @@ -0,0 +1,25 @@ +import { chartsGridClasses } from '@mui/x-charts/ChartsGrid'; +import { BarChart } from '@mui/x-charts/BarChart'; +import { dataset, valueFormatter } from '../../../dataset/weather'; + +const chartSetting = { + yAxis: [{ label: 'rainfall (mm)', width: 60 }], + height: 300, +}; + +export default function GridDemo() { + return ( + // @focus-start @padding 2 + + // @focus-end + ); +} diff --git a/docs/data/charts/axis-ticks/demos/grid-demo/client.ts b/docs/data/charts/axis-ticks/demos/grid-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis-ticks/demos/grid-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis-ticks/demos/grid-demo/index.ts b/docs/data/charts/axis-ticks/demos/grid-demo/index.ts new file mode 100644 index 0000000000000..7686107ff7e74 --- /dev/null +++ b/docs/data/charts/axis-ticks/demos/grid-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GridDemo from './GridDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GridDemo, { ClientProvider }); diff --git a/docs/data/charts/axis-ticks/GridLabels.tsx b/docs/data/charts/axis-ticks/demos/grid-labels/GridLabels.tsx similarity index 91% rename from docs/data/charts/axis-ticks/GridLabels.tsx rename to docs/data/charts/axis-ticks/demos/grid-labels/GridLabels.tsx index 6444082a7ed2c..4e57eef2474bd 100644 --- a/docs/data/charts/axis-ticks/GridLabels.tsx +++ b/docs/data/charts/axis-ticks/demos/grid-labels/GridLabels.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { LineChart, lineClasses } from '@mui/x-charts/LineChart'; import { chartsGridClasses } from '@mui/x-charts/ChartsGrid'; -import { ChartsYAxisProps } from '@mui/x-charts/models'; +import type { ChartsYAxisProps } from '@mui/x-charts/models'; import { useDrawingArea, useYAxes, useYAxisTicks } from '@mui/x-charts/hooks'; -import { dataset, valueFormatter } from '../dataset/weather'; +import { dataset, valueFormatter } from '../../../dataset/weather'; const LABEL_GAP = 4; @@ -33,6 +33,7 @@ function GridLabelsYAxis(props: ChartsYAxisProps) { export default function GridLabels() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/axis-ticks/demos/grid-labels/client.ts b/docs/data/charts/axis-ticks/demos/grid-labels/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis-ticks/demos/grid-labels/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis-ticks/demos/grid-labels/index.ts b/docs/data/charts/axis-ticks/demos/grid-labels/index.ts new file mode 100644 index 0000000000000..01863c68eb4e6 --- /dev/null +++ b/docs/data/charts/axis-ticks/demos/grid-labels/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GridLabels from './GridLabels'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GridLabels, { ClientProvider }); diff --git a/docs/data/charts/axis-ticks/OrdinalTickPlacement.tsx b/docs/data/charts/axis-ticks/demos/ordinal-tick-placement/OrdinalTickPlacement.tsx similarity index 86% rename from docs/data/charts/axis-ticks/OrdinalTickPlacement.tsx rename to docs/data/charts/axis-ticks/demos/ordinal-tick-placement/OrdinalTickPlacement.tsx index 6f0e4f2ba1e0f..dafa23da5baf8 100644 --- a/docs/data/charts/axis-ticks/OrdinalTickPlacement.tsx +++ b/docs/data/charts/axis-ticks/demos/ordinal-tick-placement/OrdinalTickPlacement.tsx @@ -1,10 +1,15 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; -import { BarSeriesType, XAxis, YAxis, ZoomOptions } from '@mui/x-charts-pro/models'; -import { TickFrequency } from '@mui/x-charts/models'; -import alphabetStock from '../dataset/GOOGL.json'; -import SelectTimeFrequency from './SelectTimeFrequency'; +import type { + BarSeriesType, + XAxis, + YAxis, + ZoomOptions, +} from '@mui/x-charts-pro/models'; +import type { TickFrequency } from '@mui/x-charts/models'; +import alphabetStock from '../../../dataset/GOOGL.json'; +import SelectTimeFrequency from '../../SelectTimeFrequency'; const tickFrequencies: TickFrequency[] = [ 'years', @@ -16,6 +21,7 @@ const tickFrequencies: TickFrequency[] = [ ]; export default function OrdinalTickPlacement() { + // @focus-start @padding 1 const [ordinalTimeTicks, setOrdinalTimeTicks] = React.useState(defaultTicks); const [tickNumber, setTickNumber] = React.useState(5); @@ -45,6 +51,7 @@ export default function OrdinalTickPlacement() { /> ); + // @focus-end } type FilteredTicksState = Record; diff --git a/docs/data/charts/axis-ticks/demos/ordinal-tick-placement/client.ts b/docs/data/charts/axis-ticks/demos/ordinal-tick-placement/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis-ticks/demos/ordinal-tick-placement/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis-ticks/demos/ordinal-tick-placement/index.ts b/docs/data/charts/axis-ticks/demos/ordinal-tick-placement/index.ts new file mode 100644 index 0000000000000..7a949aff4e64c --- /dev/null +++ b/docs/data/charts/axis-ticks/demos/ordinal-tick-placement/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import OrdinalTickPlacement from './OrdinalTickPlacement'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, OrdinalTickPlacement, { ClientProvider }); diff --git a/docs/data/charts/axis-ticks/TickLabelPosition.tsx b/docs/data/charts/axis-ticks/demos/tick-label-position/TickLabelPosition.tsx similarity index 95% rename from docs/data/charts/axis-ticks/TickLabelPosition.tsx rename to docs/data/charts/axis-ticks/demos/tick-label-position/TickLabelPosition.tsx index ed24b99a6f49b..e8778a6100644 100644 --- a/docs/data/charts/axis-ticks/TickLabelPosition.tsx +++ b/docs/data/charts/axis-ticks/demos/tick-label-position/TickLabelPosition.tsx @@ -1,10 +1,11 @@ import Box from '@mui/material/Box'; -import { ShowMarkParams } from '@mui/x-charts/models'; +import type { ShowMarkParams } from '@mui/x-charts/models'; import { LineChart } from '@mui/x-charts/LineChart'; export default function TickLabelPosition() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/axis-ticks/demos/tick-label-position/client.ts b/docs/data/charts/axis-ticks/demos/tick-label-position/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis-ticks/demos/tick-label-position/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis-ticks/demos/tick-label-position/index.ts b/docs/data/charts/axis-ticks/demos/tick-label-position/index.ts new file mode 100644 index 0000000000000..4f01e78105503 --- /dev/null +++ b/docs/data/charts/axis-ticks/demos/tick-label-position/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TickLabelPosition from './TickLabelPosition'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TickLabelPosition, { ClientProvider }); diff --git a/docs/data/charts/axis-ticks/TickNumber.tsx b/docs/data/charts/axis-ticks/demos/tick-number/TickNumber.tsx similarity index 96% rename from docs/data/charts/axis-ticks/TickNumber.tsx rename to docs/data/charts/axis-ticks/demos/tick-number/TickNumber.tsx index b46fd368c37b7..b504f98eb79c3 100644 --- a/docs/data/charts/axis-ticks/TickNumber.tsx +++ b/docs/data/charts/axis-ticks/demos/tick-number/TickNumber.tsx @@ -38,6 +38,7 @@ const xAxisCommon = { export default function TickNumber() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/axis-ticks/demos/tick-number/client.ts b/docs/data/charts/axis-ticks/demos/tick-number/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis-ticks/demos/tick-number/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis-ticks/demos/tick-number/index.ts b/docs/data/charts/axis-ticks/demos/tick-number/index.ts new file mode 100644 index 0000000000000..97994377e7537 --- /dev/null +++ b/docs/data/charts/axis-ticks/demos/tick-number/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TickNumber from './TickNumber'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TickNumber, { ClientProvider }); diff --git a/docs/data/charts/axis-ticks/TickPosition.tsx b/docs/data/charts/axis-ticks/demos/tick-position/TickPosition.tsx similarity index 95% rename from docs/data/charts/axis-ticks/TickPosition.tsx rename to docs/data/charts/axis-ticks/demos/tick-position/TickPosition.tsx index c8578c14c9399..027f6355c15b2 100644 --- a/docs/data/charts/axis-ticks/TickPosition.tsx +++ b/docs/data/charts/axis-ticks/demos/tick-position/TickPosition.tsx @@ -1,10 +1,11 @@ import Box from '@mui/material/Box'; -import { ShowMarkParams } from '@mui/x-charts/models'; +import type { ShowMarkParams } from '@mui/x-charts/models'; import { LineChart } from '@mui/x-charts/LineChart'; export default function TickPosition() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/axis-ticks/demos/tick-position/client.ts b/docs/data/charts/axis-ticks/demos/tick-position/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis-ticks/demos/tick-position/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis-ticks/demos/tick-position/index.ts b/docs/data/charts/axis-ticks/demos/tick-position/index.ts new file mode 100644 index 0000000000000..cf9e5afad44ea --- /dev/null +++ b/docs/data/charts/axis-ticks/demos/tick-position/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TickPosition from './TickPosition'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TickPosition, { ClientProvider }); diff --git a/docs/data/charts/axis-ticks/TickSpacing.tsx b/docs/data/charts/axis-ticks/demos/tick-spacing/TickSpacing.tsx similarity index 93% rename from docs/data/charts/axis-ticks/TickSpacing.tsx rename to docs/data/charts/axis-ticks/demos/tick-spacing/TickSpacing.tsx index 6938289a9442c..dac2fb98b1c75 100644 --- a/docs/data/charts/axis-ticks/TickSpacing.tsx +++ b/docs/data/charts/axis-ticks/demos/tick-spacing/TickSpacing.tsx @@ -3,7 +3,7 @@ import Stack from '@mui/material/Stack'; import Slider from '@mui/material/Slider'; import Typography from '@mui/material/Typography'; import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; -import data from '../dataset/sp500-intraday.json'; +import data from '../../../dataset/sp500-intraday.json'; const tickLabelDateFormatter = new Intl.DateTimeFormat(undefined, { month: 'short', @@ -11,6 +11,7 @@ const tickLabelDateFormatter = new Intl.DateTimeFormat(undefined, { }); export default function TickSpacing() { + // @focus-start @padding 1 const [tickSpacing, setTickSpacing] = React.useState(50); return ( @@ -49,4 +50,5 @@ export default function TickSpacing() { /> ); + // @focus-end } diff --git a/docs/data/charts/axis-ticks/demos/tick-spacing/client.ts b/docs/data/charts/axis-ticks/demos/tick-spacing/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis-ticks/demos/tick-spacing/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis-ticks/demos/tick-spacing/index.ts b/docs/data/charts/axis-ticks/demos/tick-spacing/index.ts new file mode 100644 index 0000000000000..4062ab403c45e --- /dev/null +++ b/docs/data/charts/axis-ticks/demos/tick-spacing/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TickSpacing from './TickSpacing'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TickSpacing, { ClientProvider }); diff --git a/docs/data/charts/axis/AxisAutoSize.js b/docs/data/charts/axis/AxisAutoSize.js deleted file mode 100644 index 1448bcb39389e..0000000000000 --- a/docs/data/charts/axis/AxisAutoSize.js +++ /dev/null @@ -1,65 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import { BarChart } from '@mui/x-charts/BarChart'; - -const currencyFormatter = new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD', - maximumFractionDigits: 0, -}); - -export default function AxisAutoSize() { - const [useAutoSize, setUseAutoSize] = React.useState(true); - - return ( - - - setUseAutoSize(event.target.checked)} /> - } - label="Use auto-sizing" - labelPlacement="end" - /> - - - currencyFormatter.format(value), - label: 'Revenue', - width: useAutoSize ? 'auto' : undefined, - }, - ]} - height={350} - dataset={dataset} - series={[ - { dataKey: 'q1', label: 'Q1' }, - { dataKey: 'q2', label: 'Q2' }, - { dataKey: 'q3', label: 'Q3' }, - { dataKey: 'q4', label: 'Q4' }, - ]} - /> - - ); -} - -const dataset = [ - { product: 'Electronics', q1: 125000, q2: 142000, q3: 158000, q4: 189000 }, - { product: 'Clothing', q1: 89000, q2: 95000, q3: 112000, q4: 145000 }, - { product: 'Home & Garden', q1: 67000, q2: 78000, q3: 85000, q4: 92000 }, - { product: 'Sports', q1: 45000, q2: 52000, q3: 68000, q4: 71000 }, - { product: 'Books', q1: 23000, q2: 28000, q3: 31000, q4: 42000 }, -]; diff --git a/docs/data/charts/axis/AxisAutoSizeRotated.js b/docs/data/charts/axis/AxisAutoSizeRotated.js deleted file mode 100644 index 915239b170b3c..0000000000000 --- a/docs/data/charts/axis/AxisAutoSizeRotated.js +++ /dev/null @@ -1,75 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Slider from '@mui/material/Slider'; -import Typography from '@mui/material/Typography'; -import { LineChart } from '@mui/x-charts/LineChart'; - -export default function AxisAutoSizeRotated() { - const [angle, setAngle] = React.useState(-45); - - return ( - - - Tick label angle: {angle}° - - setAngle(value)} - min={-90} - max={90} - step={5} - marks={[ - { value: -90, label: '-90°' }, - { value: -45, label: '-45°' }, - { value: 0, label: '0°' }, - { value: 45, label: '45°' }, - { value: 90, label: '90°' }, - ]} - sx={{ mb: 2, maxWidth: 400 }} - /> - - - ); -} - -const months = [ - 'January', - 'February', - 'March', - 'April', - 'May', - 'June', - 'July', - 'August', - 'September', - 'October', - 'November', - 'December', -]; - -const temperatureData = [3, 5, 10, 15, 20, 25, 28, 27, 22, 15, 8, 4]; diff --git a/docs/data/charts/axis/AxisCoordinatesDemo.js b/docs/data/charts/axis/AxisCoordinatesDemo.js deleted file mode 100644 index 3b7d24d385abf..0000000000000 --- a/docs/data/charts/axis/AxisCoordinatesDemo.js +++ /dev/null @@ -1,152 +0,0 @@ -import * as React from 'react'; -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { LinePlot } from '@mui/x-charts/LineChart'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { - useXAxis, - useXAxisCoordinates, - useYAxis, - useYAxisCoordinates, -} from '@mui/x-charts/hooks'; - -import { useTheme } from '@mui/material/styles'; - -const lineData = [2, 5, 3, 8, 4]; -const xAxisData = [1, 2, 3, 4, 5]; - -const colors = [ - '#e63946', // red - '#f4a261', // orange - '#e9c46a', // yellow - '#2a9d8f', // teal - '#264653', // dark blue - '#8338ec', // purple - '#3a86ff', // blue - '#06d6a0', // green -]; - -export default function AxisCoordinatesDemo() { - return ( - - - - - - - - - - - {/* Render the actual axes */} - - - - - - ); -} - -function XAxisPositionIndicator({ axisId, color }) { - const xPosition = useXAxisCoordinates(axisId); - const xAxis = useXAxis(axisId); - - if (!xPosition) { - return null; - } - - return ( - - ); -} - -function YAxisPositionIndicator({ axisId, color }) { - const yPosition = useYAxisCoordinates(axisId); - const yAxis = useYAxis(axisId); - - if (!yPosition) { - return null; - } - - return ( - - ); -} - -function AxisPositionIndicator({ axisId, position, direction, coordinates, color }) { - const theme = useTheme(); - - if (position === 'none') { - return null; - } - - const centerX = coordinates.left + (coordinates.right - coordinates.left) / 2; - const centerY = coordinates.top + (coordinates.bottom - coordinates.top) / 2; - - return ( - - - - {axisId} - - - ); -} diff --git a/docs/data/charts/axis/AxisWithComposition.js b/docs/data/charts/axis/AxisWithComposition.js deleted file mode 100644 index cf54703d41beb..0000000000000 --- a/docs/data/charts/axis/AxisWithComposition.js +++ /dev/null @@ -1,59 +0,0 @@ -import Box from '@mui/material/Box'; -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { LinePlot } from '@mui/x-charts/LineChart'; -import { BarPlot } from '@mui/x-charts/BarChart'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; - -export default function AxisWithComposition() { - return ( - - - - - - - - - - ); -} diff --git a/docs/data/charts/axis/CustomDomainYAxis.js b/docs/data/charts/axis/CustomDomainYAxis.js deleted file mode 100644 index 1f653151fd722..0000000000000 --- a/docs/data/charts/axis/CustomDomainYAxis.js +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { BarChart } from '@mui/x-charts/BarChart'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; - -const settings = { - height: 220, - series: [{ data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91] }], - margin: { top: 20, bottom: 10 }, -}; - -// Extend a value to match a multiple of the step. -function extend(value, step) { - if (value > 0) { - // If >0 go to the next step - return step * Math.ceil(value / step); - } - // If <0 go to the previous step - return step * Math.floor(value / step); -} - -export default function CustomDomainYAxis() { - const [domainLimit, setDomainLimit] = React.useState('nice'); - - return ( - - setDomainLimit(event.target.value)} - label="domain limit" - sx={{ minWidth: 150, mb: 2 }} - > - nice - strict - function - - ({ - min: extend(min.valueOf(), 10), - max: extend(max.valueOf(), 10), - }) - : domainLimit, - }, - ]} - {...settings} - /> - - ); -} diff --git a/docs/data/charts/axis/CustomDomainYAxis.tsx b/docs/data/charts/axis/CustomDomainYAxis.tsx deleted file mode 100644 index d790f51756de1..0000000000000 --- a/docs/data/charts/axis/CustomDomainYAxis.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { BarChart } from '@mui/x-charts/BarChart'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; - -const settings = { - height: 220, - series: [{ data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91] }], - margin: { top: 20, bottom: 10 }, -} as const; - -// Extend a value to match a multiple of the step. -function extend(value: number, step: number) { - if (value > 0) { - // If >0 go to the next step - return step * Math.ceil(value / step); - } - // If <0 go to the previous step - return step * Math.floor(value / step); -} - -export default function CustomDomainYAxis() { - const [domainLimit, setDomainLimit] = React.useState< - 'nice' | 'strict' | 'function' - >('nice'); - - return ( - - - setDomainLimit(event.target.value as 'nice' | 'strict' | 'function') - } - label="domain limit" - sx={{ minWidth: 150, mb: 2 }} - > - nice - strict - function - - ({ - min: extend(min.valueOf(), 10), - max: extend(max.valueOf(), 10), - }) - : domainLimit, - }, - ]} - {...settings} - /> - - ); -} diff --git a/docs/data/charts/axis/FormatterD3.js b/docs/data/charts/axis/FormatterD3.js deleted file mode 100644 index 43f2654b45bee..0000000000000 --- a/docs/data/charts/axis/FormatterD3.js +++ /dev/null @@ -1,59 +0,0 @@ -import { LineChart } from '@mui/x-charts/LineChart'; -import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; - -const otherSetting = { - height: 300, - grid: { horizontal: true, vertical: true }, -}; - -// https://en.wikipedia.org/wiki/Low-pass_filter -const f0 = 440; -const frequencyResponse = (f) => 5 / Math.sqrt(1 + (f / f0) ** 2); - -const dataset = [ - 0.1, 0.5, 0.8, 1, 5, 8, 10, 50, 80, 100, 500, 800, 1_000, 5_000, 8_000, 10_000, - 50_000, 80_000, 100_000, 500_000, 800_000, 1_000_000, -].map((f) => ({ frequency: f, voltage: frequencyResponse(f) })); - -export default function FormatterD3() { - return ( - { - if (context.location === 'tick') { - const d3Text = context.scale.tickFormat(context.tickNumber, 'e')(f); - - return d3Text; - } - return `${f.toLocaleString()}Hz`; - }, - }, - ]} - yAxis={[ - { - scaleType: 'log', - label: 'Vo/Vi', - width: 60, - valueFormatter: (f, context) => { - if (context.location === 'tick') { - const d3Text = context.scale.tickFormat(30, 'f')(f); - - return d3Text; - } - return f.toLocaleString(); - }, - }, - ]} - series={[{ dataKey: 'voltage' }]} - {...otherSetting} - > - - - ); -} diff --git a/docs/data/charts/axis/FormatterDemo.js b/docs/data/charts/axis/FormatterDemo.js deleted file mode 100644 index 47935608b6c5b..0000000000000 --- a/docs/data/charts/axis/FormatterDemo.js +++ /dev/null @@ -1,117 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; - -const otherSetting = { - height: 300, - yAxis: [{ label: 'rainfall (mm)', width: 60 }], - grid: { horizontal: true }, -}; - -const dataset = [ - { - london: 59, - paris: 57, - newYork: 86, - seoul: 21, - month: 'January', - }, - { - london: 50, - paris: 52, - newYork: 78, - seoul: 28, - month: 'February', - }, - { - london: 47, - paris: 53, - newYork: 106, - seoul: 41, - month: 'March', - }, - { - london: 54, - paris: 56, - newYork: 92, - seoul: 73, - month: 'April', - }, - { - london: 57, - paris: 69, - newYork: 92, - seoul: 99, - month: 'May', - }, - { - london: 60, - paris: 63, - newYork: 103, - seoul: 144, - month: 'June', - }, - { - london: 59, - paris: 60, - newYork: 105, - seoul: 319, - month: 'July', - }, - { - london: 65, - paris: 60, - newYork: 106, - seoul: 249, - month: 'August', - }, - { - london: 51, - paris: 51, - newYork: 95, - seoul: 131, - month: 'September', - }, - { - london: 60, - paris: 65, - newYork: 97, - seoul: 55, - month: 'October', - }, - { - london: 67, - paris: 64, - newYork: 76, - seoul: 48, - month: 'November', - }, - { - london: 61, - paris: 70, - newYork: 103, - seoul: 25, - month: 'December', - }, -]; - -const valueFormatter = (value) => `${value}mm`; - -export default function FormatterDemo() { - return ( - - context.location === 'tick' - ? `${month.slice(0, 3)} \n2023` - : `${month} 2023`, - height: 40, - }, - ]} - series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]} - {...otherSetting} - /> - ); -} diff --git a/docs/data/charts/axis/FormatterDemo.tsx.preview b/docs/data/charts/axis/FormatterDemo.tsx.preview deleted file mode 100644 index ac42e4e2a9ebd..0000000000000 --- a/docs/data/charts/axis/FormatterDemo.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - context.location === 'tick' - ? `${month.slice(0, 3)} \n2023` - : `${month} 2023`, - height: 40, - }, - ]} - series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]} - {...otherSetting} -/> \ No newline at end of file diff --git a/docs/data/charts/axis/GroupedAxes.js b/docs/data/charts/axis/GroupedAxes.js deleted file mode 100644 index 5e6885f36c9e8..0000000000000 --- a/docs/data/charts/axis/GroupedAxes.js +++ /dev/null @@ -1,84 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; - -export default function GroupedAxes() { - return ( - - ); -} - -const getMonth = (date) => date.toLocaleDateString('en-US', { month: 'short' }); -const getQuarter = (date) => `Q${Math.floor(date.getMonth() / 3) + 1}`; - -const getYear = (date) => date.toLocaleDateString('en-US', { year: 'numeric' }); - -const valueFormatter = (v) => - v.toLocaleDateString('en-US', { - month: 'short', - year: 'numeric', - }); - -const data = [ - new Date(2014, 11, 1), - new Date(2015, 0, 1), - new Date(2015, 1, 1), - new Date(2015, 2, 1), - new Date(2015, 3, 1), - new Date(2015, 4, 1), - new Date(2015, 5, 1), - new Date(2015, 6, 1), - new Date(2015, 7, 1), - new Date(2015, 8, 1), - new Date(2015, 9, 1), - new Date(2015, 10, 1), - new Date(2015, 11, 1), - new Date(2016, 0, 1), -]; - -const a = [ - 3190, 4000, 3000, 2000, 2780, 1890, 2390, 3490, 2400, 1398, 9800, 3908, 4800, 2040, -]; - -const b = [ - 1200, 2400, 1398, 9800, 3908, 4800, 3800, 4300, 2181, 2500, 2100, 3000, 2000, 2040, -]; - -const getPercents = (array) => - array.map((v, index) => (100 * v) / (a[index] + b[index])); - -const chartConfig = { - height: 200, - margin: { left: 0 }, - series: [ - { - data: getPercents(a), - label: 'Income', - valueFormatter: (value) => `${(value ?? 0).toFixed(0)}%`, - }, - { - data: getPercents(b), - label: 'Expenses', - valueFormatter: (value) => `${(value ?? 0).toFixed(0)}%`, - }, - ], - yAxis: [ - { - valueFormatter: (value) => `${(value ?? 0).toFixed(0)}%`, - }, - ], -}; diff --git a/docs/data/charts/axis/GroupedAxes.tsx.preview b/docs/data/charts/axis/GroupedAxes.tsx.preview deleted file mode 100644 index 261973de69a71..0000000000000 --- a/docs/data/charts/axis/GroupedAxes.tsx.preview +++ /dev/null @@ -1,17 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/axis/GroupedAxesAutoSize.js b/docs/data/charts/axis/GroupedAxesAutoSize.js deleted file mode 100644 index c3074233e9421..0000000000000 --- a/docs/data/charts/axis/GroupedAxesAutoSize.js +++ /dev/null @@ -1,166 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { - useXAxisCoordinates, - useXAxis, - useYAxisCoordinates, - useYAxis, -} from '@mui/x-charts/hooks'; - -export default function GroupedAxesAutoSize() { - const [useAutoSize, setUseAutoSize] = React.useState(true); - - return ( - - - setUseAutoSize(event.target.checked)} /> - } - label="Use auto-sizing" - labelPlacement="end" - /> - - - `${value.toFixed(0)}%`, - }, - ]} - height={300} - margin={{ bottom: 0, left: 0 }} - series={[ - { - data: getPercents(revenue), - label: 'Revenue', - valueFormatter: (value) => `${(value ?? 0).toFixed(0)}%`, - }, - { - data: getPercents(expenses), - label: 'Expenses', - valueFormatter: (value) => `${(value ?? 0).toFixed(0)}%`, - }, - ]} - > - - - - - ); -} - -const getMonth = (date) => date.toLocaleDateString('en-US', { month: 'short' }); - -const getQuarter = (date) => `Q${Math.floor(date.getMonth() / 3) + 1}`; - -const getYear = (date) => date.toLocaleDateString('en-US', { year: 'numeric' }); - -const valueFormatter = (v) => - v.toLocaleDateString('en-US', { - month: 'short', - year: 'numeric', - }); - -const data = [ - new Date(2014, 11, 1), - new Date(2015, 0, 1), - new Date(2015, 1, 1), - new Date(2015, 2, 1), - new Date(2015, 3, 1), - new Date(2015, 4, 1), - new Date(2015, 5, 1), - new Date(2015, 6, 1), - new Date(2015, 7, 1), - new Date(2015, 8, 1), - new Date(2015, 9, 1), - new Date(2015, 10, 1), - new Date(2015, 11, 1), - new Date(2016, 0, 1), -]; - -const revenue = [ - 3190, 4000, 3000, 2000, 2780, 1890, 2390, 3490, 2400, 1398, 9800, 3908, 4800, 2040, -]; - -const expenses = [ - 1200, 2400, 1398, 9800, 3908, 4800, 3800, 4300, 2181, 2500, 2100, 3000, 2000, 2040, -]; - -const getPercents = (array) => - array.map((v, index) => (100 * v) / (revenue[index] + expenses[index])); - -function XAxisPositionIndicator({ axisId, color }) { - const xPosition = useXAxisCoordinates(axisId); - const xAxis = useXAxis(axisId); - - if (!xPosition) { - return null; - } - - return ( - - ); -} - -function YAxisPositionIndicator({ axisId, color }) { - const yPosition = useYAxisCoordinates(axisId); - const yAxis = useYAxis(axisId); - - if (!yPosition) { - return null; - } - - return ( - - ); -} - -function AxisPositionIndicator({ position, coordinates, color }) { - if (position === 'none') { - return null; - } - - return ( - - ); -} diff --git a/docs/data/charts/axis/GroupedYAxes.js b/docs/data/charts/axis/GroupedYAxes.js deleted file mode 100644 index dfe4f30f11b92..0000000000000 --- a/docs/data/charts/axis/GroupedYAxes.js +++ /dev/null @@ -1,63 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; - -export default function GroupedYAxes() { - return ( - category[1] }, - // Extract subcategory - { - getValue: (category) => category[0], - tickSize: 120, - tickLabelStyle: { - angle: -90, - textAnchor: 'middle', - }, - }, - ], - valueFormatter: (value) => value.join(' - '), - }, - ]} - {...chartConfig} - /> - ); -} - -const categoryData = [ - ['Technology', 'Software'], - ['Technology', 'Hardware'], - ['Technology', 'AI/ML'], - ['Finance', 'Banking'], - ['Finance', 'Insurance'], - ['Finance', 'Investment'], - ['Healthcare', 'Pharmaceuticals'], - ['Healthcare', 'Medical Devices'], - ['Healthcare', 'Telemedicine'], -]; - -const salesData = [150, 120, 200, 180, 90, 160, 140, 110, 85]; -const profitData = [45, 35, 80, 65, 25, 55, 50, 40, 30]; - -const chartConfig = { - height: 400, - xAxis: [{ valueFormatter: (value) => `${value}K` }], - series: [ - { - data: salesData, - label: 'Sales', - valueFormatter: (value) => `${value}K`, - }, - { - data: profitData, - label: 'Profit', - valueFormatter: (value) => `${value}K`, - }, - ], -}; diff --git a/docs/data/charts/axis/GroupedYAxes.tsx.preview b/docs/data/charts/axis/GroupedYAxes.tsx.preview deleted file mode 100644 index 5efdf24a02703..0000000000000 --- a/docs/data/charts/axis/GroupedYAxes.tsx.preview +++ /dev/null @@ -1,25 +0,0 @@ - category[1] }, - // Extract subcategory - { - getValue: (category) => category[0], - tickSize: 120, - tickLabelStyle: { - angle: -90, - textAnchor: 'middle', - }, - }, - ], - valueFormatter: (value) => value.join(' - '), - }, - ]} - {...chartConfig} -/> \ No newline at end of file diff --git a/docs/data/charts/axis/HidingAxis.js b/docs/data/charts/axis/HidingAxis.js deleted file mode 100644 index 22d2ba92cf97d..0000000000000 --- a/docs/data/charts/axis/HidingAxis.js +++ /dev/null @@ -1,13 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; - -export default function HidingAxis() { - return ( - - ); -} diff --git a/docs/data/charts/axis/HidingAxis.tsx.preview b/docs/data/charts/axis/HidingAxis.tsx.preview deleted file mode 100644 index e9e7cbfe821a8..0000000000000 --- a/docs/data/charts/axis/HidingAxis.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/axis/MinMaxExample.js b/docs/data/charts/axis/MinMaxExample.js deleted file mode 100644 index be83321ddcc85..0000000000000 --- a/docs/data/charts/axis/MinMaxExample.js +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from 'react'; -import Slider from '@mui/material/Slider'; -import Box from '@mui/material/Box'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import { Chance } from 'chance'; - -const chance = new Chance(42); - -const data = Array.from({ length: 200 }, () => ({ - x: chance.floating({ min: -25, max: 25 }), - y: chance.floating({ min: -25, max: 25 }), -})).map((d, index) => ({ ...d, id: index })); - -const minDistance = 10; - -export default function MinMaxExample() { - const [value, setValue] = React.useState([-25, 25]); - - const handleChange = (event, newValue, activeThumb) => { - if (!Array.isArray(newValue)) { - return; - } - - if (newValue[1] - newValue[0] < minDistance) { - if (activeThumb === 0) { - const clamped = Math.min(newValue[0], 100 - minDistance); - setValue([clamped, clamped + minDistance]); - } else { - const clamped = Math.max(newValue[1], minDistance); - setValue([clamped - minDistance, clamped]); - } - } else { - setValue(newValue); - } - }; - - return ( - - - - - ); -} diff --git a/docs/data/charts/axis/ModifyAxisPosition.js b/docs/data/charts/axis/ModifyAxisPosition.js deleted file mode 100644 index 3d3f537cfdd89..0000000000000 --- a/docs/data/charts/axis/ModifyAxisPosition.js +++ /dev/null @@ -1,27 +0,0 @@ -import Box from '@mui/material/Box'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import { Chance } from 'chance'; - -const chance = new Chance(42); - -const data = Array.from({ length: 200 }, () => ({ - x: chance.floating({ min: -25, max: 25 }), - y: chance.floating({ min: -25, max: 25 }), -})).map((d, index) => ({ ...d, id: index })); - -const params = { - series: [{ data }], - height: 300, - margin: { top: 12, right: 12, bottom: 20, left: 12 }, -}; -export default function ModifyAxisPosition() { - return ( - - - - ); -} diff --git a/docs/data/charts/axis/ModifyAxisPosition.tsx.preview b/docs/data/charts/axis/ModifyAxisPosition.tsx.preview deleted file mode 100644 index ee5341e08a9d2..0000000000000 --- a/docs/data/charts/axis/ModifyAxisPosition.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/axis/MultipleAxes.js b/docs/data/charts/axis/MultipleAxes.js deleted file mode 100644 index 739f565d3f06e..0000000000000 --- a/docs/data/charts/axis/MultipleAxes.js +++ /dev/null @@ -1,23 +0,0 @@ -import Box from '@mui/material/Box'; -import { LineChart } from '@mui/x-charts/LineChart'; - -const sample = [1, 10, 30, 50, 70, 90, 100]; - -export default function MultipleAxes() { - return ( - - - - ); -} diff --git a/docs/data/charts/axis/MultipleAxes.tsx.preview b/docs/data/charts/axis/MultipleAxes.tsx.preview deleted file mode 100644 index 9ad6d224f9a77..0000000000000 --- a/docs/data/charts/axis/MultipleAxes.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/axis/ReferenceLine.js b/docs/data/charts/axis/ReferenceLine.js deleted file mode 100644 index 71f6a92a089ba..0000000000000 --- a/docs/data/charts/axis/ReferenceLine.js +++ /dev/null @@ -1,65 +0,0 @@ -import Box from '@mui/material/Box'; -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { LinePlot } from '@mui/x-charts/LineChart'; - -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; - -const timeData = [ - new Date(2023, 7, 31), - new Date(2023, 7, 31, 12), - new Date(2023, 8, 1), - new Date(2023, 8, 1, 12), - new Date(2023, 8, 2), - new Date(2023, 8, 2, 12), - new Date(2023, 8, 3), - new Date(2023, 8, 3, 12), - new Date(2023, 8, 4), -]; - -const y1 = [5, 5, 10, 90, 85, 70, 30, 25, 25]; -const y2 = [90, 85, 70, 25, 23, 40, 45, 40, 50]; - -const config = { - series: [ - { type: 'line', data: y1 }, - { type: 'line', data: y2 }, - ], - height: 400, - xAxis: [ - { - data: timeData, - scaleType: 'time', - valueFormatter: (date) => - date.getHours() === 0 - ? date.toLocaleDateString('fr-FR', { - month: '2-digit', - day: '2-digit', - }) - : date.toLocaleTimeString('fr-FR', { - hour: '2-digit', - }), - }, - ], -}; - -export default function ReferenceLine() { - return ( - - - - - - - - - - ); -} diff --git a/docs/data/charts/axis/ReferenceLine.tsx.preview b/docs/data/charts/axis/ReferenceLine.tsx.preview deleted file mode 100644 index f3a81ebb34ef8..0000000000000 --- a/docs/data/charts/axis/ReferenceLine.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/docs/data/charts/axis/ReverseExample.js b/docs/data/charts/axis/ReverseExample.js deleted file mode 100644 index e644616d0f742..0000000000000 --- a/docs/data/charts/axis/ReverseExample.js +++ /dev/null @@ -1,99 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; - -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; -import { BarPlot } from '@mui/x-charts/BarChart'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsGrid } from '@mui/x-charts/ChartsGrid'; -import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; - -const dataset = [ - { min: -12, max: -4, precip: 79, month: 'Jan' }, - { min: -11, max: -3, precip: 66, month: 'Feb' }, - { min: -6, max: 2, precip: 76, month: 'Mar' }, - { min: 1, max: 9, precip: 106, month: 'Apr' }, - { min: 8, max: 17, precip: 105, month: 'Mai' }, - { min: 15, max: 24, precip: 114, month: 'Jun' }, - { min: 18, max: 26, precip: 106, month: 'Jul' }, - { min: 17, max: 26, precip: 105, month: 'Aug' }, - { min: 13, max: 21, precip: 100, month: 'Sept' }, - { min: 6, max: 13, precip: 116, month: 'Oct' }, - { min: 0, max: 6, precip: 93, month: 'Nov' }, - { min: -8, max: -1, precip: 93, month: 'Dec' }, -]; - -const series = [ - { type: 'line', dataKey: 'min', color: '#577399', showMark: true }, - { type: 'line', dataKey: 'max', color: '#fe5f55', showMark: true }, - { type: 'bar', dataKey: 'precip', color: '#bfdbf7', yAxisId: 'rightAxis' }, -]; - -export default function ReverseExample() { - const [reverseX, setReverseX] = React.useState(false); - const [reverseLeft, setReverseLeft] = React.useState(false); - const [reverseRight, setReverseRight] = React.useState(false); - - return ( - - - setReverseX(event.target.checked)} /> - } - label="reverse x-axis" - labelPlacement="end" - /> - setReverseLeft(event.target.checked)} /> - } - label="reverse left axis" - labelPlacement="end" - /> - setReverseRight(event.target.checked)} /> - } - label="reverse right axis" - labelPlacement="end" - /> - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/charts/axis/ScaleExample.js b/docs/data/charts/axis/ScaleExample.js deleted file mode 100644 index 0b7f83a5a1b97..0000000000000 --- a/docs/data/charts/axis/ScaleExample.js +++ /dev/null @@ -1,23 +0,0 @@ -import Box from '@mui/material/Box'; -import { LineChart } from '@mui/x-charts/LineChart'; - -const sample = [1, 10, 30, 50, 70, 90, 100]; - -export default function ScaleExample() { - return ( - - - - ); -} diff --git a/docs/data/charts/axis/ScaleExample.tsx.preview b/docs/data/charts/axis/ScaleExample.tsx.preview deleted file mode 100644 index 8320ebde304af..0000000000000 --- a/docs/data/charts/axis/ScaleExample.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/axis/SymlogScale.js b/docs/data/charts/axis/SymlogScale.js deleted file mode 100644 index c91c919861ff0..0000000000000 --- a/docs/data/charts/axis/SymlogScale.js +++ /dev/null @@ -1,67 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import ToggleButton from '@mui/material/ToggleButton'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { LineChart } from '@mui/x-charts/LineChart'; - -export default function SymlogScale() { - const [chartType, setChartType] = React.useState('bar'); - - const handleChartType = (event, newChartType) => { - if (newChartType !== null) { - setChartType(newChartType); - } - }; - - return ( - - - {['bar', 'area'].map((type) => ( - - {type} - - ))} - - {chartType === 'bar' && } - {chartType === 'area' && } - - ); -} - -function SymlogBarChart() { - return ( - - ); -} - -function SymlogAreaChart() { - return ( - - ); -} diff --git a/docs/data/charts/axis/SymlogScale.tsx.preview b/docs/data/charts/axis/SymlogScale.tsx.preview deleted file mode 100644 index 4cf6617f27dfe..0000000000000 --- a/docs/data/charts/axis/SymlogScale.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - {['bar', 'area'].map((type) => ( - - {type} - - ))} - -{chartType === 'bar' && } -{chartType === 'area' && } \ No newline at end of file diff --git a/docs/data/charts/axis/TicksWithoutLabels.js b/docs/data/charts/axis/TicksWithoutLabels.js deleted file mode 100644 index ab7a462ef612f..0000000000000 --- a/docs/data/charts/axis/TicksWithoutLabels.js +++ /dev/null @@ -1,97 +0,0 @@ -import * as React from 'react'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import RadioGroup from '@mui/material/RadioGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Radio from '@mui/material/Radio'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; - -import { earthquakeData } from '../dataset/earthquakeData'; - -const settings = { - height: 400, - grid: { horizontal: true }, -}; -const data = Object.entries(earthquakeData).reduce((acc, [magnitude, events]) => { - acc.push({ x: Number.parseFloat(magnitude), y: events }); - - return acc; -}, []); - -const formatter = new Intl.NumberFormat('en-US', { - notation: 'compact', - maximumFractionDigits: 1, -}); - -function valueFormatterIgnoreEmpty(value, context) { - if (context.location === 'tick' && context.defaultTickLabel === '') { - return ''; - } - - return formatter.format(value); -} - -function valueFormatterShowAll(value) { - return formatter.format(value); -} - -export default function TicksWithoutLabels() { - const [tickFormatter, setTickFormatter] = React.useState( - () => valueFormatterIgnoreEmpty, - ); - - return ( - - - - Worldwide Earthquake Count and Magnitude, 2020-2024 - - - Source: US Geological Survey - - - Tick Format - - setTickFormatter(() => - event.target.value === 'empty' - ? valueFormatterIgnoreEmpty - : valueFormatterShowAll, - ) - } - > - } - label="Ignore empty ticks" - /> - } - label="Show all values" - /> - - - - ); -} diff --git a/docs/data/charts/axis/axis.md b/docs/data/charts/axis/axis.md index 0d7ba19a0c3b4..516a122fdc59f 100644 --- a/docs/data/charts/axis/axis.md +++ b/docs/data/charts/axis/axis.md @@ -21,7 +21,7 @@ One has a linear y-axis and the other has a logarithmic one. Each axis definition is identified by its property `id`. Then each series specifies the axis it uses with the `xAxisId` and `yAxisId` properties. -{{"demo": "ScaleExample.js"}} +{{"component": "file://./demos/scale-example/index.ts"}} :::info ID management, as shown in the example above, is not necessary for most common use cases. @@ -56,7 +56,7 @@ The formatter's second argument provides rendering context for advanced use case In the demo below, `valueFormatter` is used to shorten months and introduce a new line for ticks. It uses the `context.location` to determine where the value is rendered. -{{"demo": "FormatterDemo.js"}} +{{"component": "file://./demos/formatter-demo/index.ts"}} ### Ticks without labels @@ -66,14 +66,14 @@ For example, it's common to use ticks to indicate a logarithmic scale but omit t The default tick formatter achieves this by rendering an empty string for ticks that should not show labels. If you want to customize the formatting, but want to keep the default behavior for ticks without labels, you can check that the `context.defaultTickLabel` property is different from the empty string: -{{"demo": "TicksWithoutLabels.js"}} +{{"component": "file://./demos/ticks-without-labels/index.ts"}} ### Using the D3 formatter The context gives you access to the axis scale, the number of ticks (if applicable), and the default formatted value. You can use the D3 [`tickFormat(tickNumber, specifier)`](https://d3js.org/d3-scale/linear#tickFormat) method to adapt the tick format based on the scale properties as shown below: -{{"demo": "FormatterD3.js"}} +{{"component": "file://./demos/formatter-d3/index.ts"}} ## Axis subdomain @@ -89,7 +89,7 @@ xAxis={[ ]} ``` -{{"demo": "MinMaxExample.js"}} +{{"component": "file://./demos/min-max-example/index.ts"}} ### Relative axis subdomain @@ -102,14 +102,14 @@ This expects one of three possible values: The demo below illustrates these differences in behavior, showing data ranging from -15 to 92 with different domain limits: -{{"demo": "CustomDomainYAxis.js"}} +{{"component": "file://./demos/custom-domain-y-axis/index.ts"}} ## Axis direction By default, the axes run from left to right and from bottom to top. You can apply the `reverse` property to change this: -{{"demo": "ReverseExample.js"}} +{{"component": "file://./demos/reverse-example/index.ts"}} ## Position @@ -120,21 +120,21 @@ This property expects the following values: - `'left'` or `'right'` for the y-axis - `'none'` to hide the axis -{{"demo": "ModifyAxisPosition.js"}} +{{"component": "file://./demos/modify-axis-position/index.ts"}} ### Hiding axes To hide an axis, set its `position` to `'none'`. Note that the axis is still computed and used for scaling. -{{"demo": "HidingAxis.js"}} +{{"component": "file://./demos/hiding-axis/index.ts"}} ### Multiple axes on one side You can display multiple axes on one side. If two or more axes share the same `position`, they're displayed in the order they're defined from closest to farthest away from the chart. -{{"demo": "MultipleAxes.js"}} +{{"component": "file://./demos/multiple-axes/index.ts"}} ### Coordinates @@ -142,7 +142,7 @@ You can obtain the coordinates of the axis by calling the `useXAxisCoordinates() Below is an example of how to use the these hooks to get the coordinates of several axes and render rectangles delineating their area. -{{"demo": "AxisCoordinatesDemo.js"}} +{{"component": "file://./demos/axis-coordinates-demo/index.ts"}} ## Grouped axes @@ -159,26 +159,26 @@ The demos below show the feature with: - The x-axis grouped by month, quarter, and year. - The y-axis is grouped by category and subcategory. -{{"demo": "GroupedAxes.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/grouped-axes/index.ts", "collapseToEmpty": true}} -{{"demo": "GroupedYAxes.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/grouped-y-axes/index.ts", "collapseToEmpty": true}} ## Auto-sizing axes You can set the axis `height` (for x-axes) or `width` (for y-axes) to `'auto'` to automatically calculate the axis dimension based on the tick label measurements. This is useful when your tick labels have varying lengths or when you use rotated labels. -{{"demo": "AxisAutoSize.js"}} +{{"component": "file://./demos/axis-auto-size/index.ts"}} Auto-sizing works well with rotated tick labels. In the demo below, adjust the angle slider to see how the axis height automatically adapts to accommodate the rotated labels. -{{"demo": "AxisAutoSizeRotated.js"}} +{{"component": "file://./demos/axis-auto-size-rotated/index.ts"}} Auto-sizing also works with grouped axes. When an axis has `groups` defined, the auto-size calculation accounts for each group level's tick labels and tick sizes. -{{"demo": "GroupedAxesAutoSize.js"}} +{{"component": "file://./demos/grouped-axes-auto-size/index.ts"}} :::info Auto-sizing is computed on the client side after hydration. @@ -191,7 +191,7 @@ A log scale cannot plot zero because log(0) is undefined. To overcome this, you can use a symlog scale, which uses a linear scale for values close to zero and a logarithmic scale for the rest. You can customize the value where the scale switches from linear to logarithmic using the `constant` property, which defaults to 1. -{{"demo": "SymlogScale.js"}} +{{"component": "file://./demos/symlog-scale/index.ts"}} ## Composition @@ -202,7 +202,7 @@ In turn, those components require an `axisId` prop to link them to an axis you d You can choose their position with the `position` prop which accepts `'top'`/`'bottom'` for `` and `'left'`/`'right'` for ``. The props described in the [rendering playground](/x/react-charts/axis-customization/#custom-axis-rendering) are also available. -{{"demo": "AxisWithComposition.js"}} +{{"component": "file://./demos/axis-with-composition/index.ts"}} ## Reference line @@ -214,4 +214,4 @@ Elements can be styled with the `lineStyle` and `labelStyle` props. More examples are available in [docs page about references](/x/react-charts/references/). -{{"demo": "ReferenceLine.js"}} +{{"component": "file://./demos/reference-line/index.ts"}} diff --git a/docs/data/charts/axis/AxisAutoSizeRotated.tsx b/docs/data/charts/axis/demos/axis-auto-size-rotated/AxisAutoSizeRotated.tsx similarity index 97% rename from docs/data/charts/axis/AxisAutoSizeRotated.tsx rename to docs/data/charts/axis/demos/axis-auto-size-rotated/AxisAutoSizeRotated.tsx index 1b8dca350e70a..3e160991bfdd0 100644 --- a/docs/data/charts/axis/AxisAutoSizeRotated.tsx +++ b/docs/data/charts/axis/demos/axis-auto-size-rotated/AxisAutoSizeRotated.tsx @@ -5,6 +5,7 @@ import Typography from '@mui/material/Typography'; import { LineChart } from '@mui/x-charts/LineChart'; export default function AxisAutoSizeRotated() { + // @focus-start @padding 1 const [angle, setAngle] = React.useState(-45); return ( @@ -56,6 +57,7 @@ export default function AxisAutoSizeRotated() { /> ); + // @focus-end } const months = [ diff --git a/docs/data/charts/axis/demos/axis-auto-size-rotated/client.ts b/docs/data/charts/axis/demos/axis-auto-size-rotated/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/axis-auto-size-rotated/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/axis-auto-size-rotated/index.ts b/docs/data/charts/axis/demos/axis-auto-size-rotated/index.ts new file mode 100644 index 0000000000000..ea5fbbfc5d678 --- /dev/null +++ b/docs/data/charts/axis/demos/axis-auto-size-rotated/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AxisAutoSizeRotated from './AxisAutoSizeRotated'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AxisAutoSizeRotated, { ClientProvider }); diff --git a/docs/data/charts/axis/AxisAutoSize.tsx b/docs/data/charts/axis/demos/axis-auto-size/AxisAutoSize.tsx similarity index 97% rename from docs/data/charts/axis/AxisAutoSize.tsx rename to docs/data/charts/axis/demos/axis-auto-size/AxisAutoSize.tsx index b20adb7af53ca..c2a6e6d493102 100644 --- a/docs/data/charts/axis/AxisAutoSize.tsx +++ b/docs/data/charts/axis/demos/axis-auto-size/AxisAutoSize.tsx @@ -12,6 +12,7 @@ const currencyFormatter = new Intl.NumberFormat('en-US', { }); export default function AxisAutoSize() { + // @focus-start @padding 1 const [useAutoSize, setUseAutoSize] = React.useState(true); return ( @@ -54,6 +55,7 @@ export default function AxisAutoSize() { /> ); + // @focus-end } const dataset = [ diff --git a/docs/data/charts/axis/demos/axis-auto-size/client.ts b/docs/data/charts/axis/demos/axis-auto-size/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/axis-auto-size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/axis-auto-size/index.ts b/docs/data/charts/axis/demos/axis-auto-size/index.ts new file mode 100644 index 0000000000000..0887115ce1ff8 --- /dev/null +++ b/docs/data/charts/axis/demos/axis-auto-size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AxisAutoSize from './AxisAutoSize'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AxisAutoSize, { ClientProvider }); diff --git a/docs/data/charts/axis/AxisCoordinatesDemo.tsx b/docs/data/charts/axis/demos/axis-coordinates-demo/AxisCoordinatesDemo.tsx similarity index 96% rename from docs/data/charts/axis/AxisCoordinatesDemo.tsx rename to docs/data/charts/axis/demos/axis-coordinates-demo/AxisCoordinatesDemo.tsx index 5da0bdba864c0..01e9795face56 100644 --- a/docs/data/charts/axis/AxisCoordinatesDemo.tsx +++ b/docs/data/charts/axis/demos/axis-coordinates-demo/AxisCoordinatesDemo.tsx @@ -8,9 +8,9 @@ import { useXAxisCoordinates, useYAxis, useYAxisCoordinates, - type AxisCoordinates, } from '@mui/x-charts/hooks'; -import { AxisId } from '@mui/x-charts/internals'; +import type { AxisCoordinates } from '@mui/x-charts/hooks'; +import type { AxisId } from '@mui/x-charts/internals'; import { useTheme } from '@mui/material/styles'; const lineData = [2, 5, 3, 8, 4]; @@ -29,6 +29,7 @@ const colors = [ export default function AxisCoordinatesDemo() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/axis/demos/axis-coordinates-demo/client.ts b/docs/data/charts/axis/demos/axis-coordinates-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/axis-coordinates-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/axis-coordinates-demo/index.ts b/docs/data/charts/axis/demos/axis-coordinates-demo/index.ts new file mode 100644 index 0000000000000..5c741d4849021 --- /dev/null +++ b/docs/data/charts/axis/demos/axis-coordinates-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AxisCoordinatesDemo from './AxisCoordinatesDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AxisCoordinatesDemo, { ClientProvider }); diff --git a/docs/data/charts/axis/AxisWithComposition.tsx b/docs/data/charts/axis/demos/axis-with-composition/AxisWithComposition.tsx similarity index 96% rename from docs/data/charts/axis/AxisWithComposition.tsx rename to docs/data/charts/axis/demos/axis-with-composition/AxisWithComposition.tsx index cf54703d41beb..abc49eaad56d1 100644 --- a/docs/data/charts/axis/AxisWithComposition.tsx +++ b/docs/data/charts/axis/demos/axis-with-composition/AxisWithComposition.tsx @@ -8,6 +8,7 @@ import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; export default function AxisWithComposition() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/axis/demos/axis-with-composition/client.ts b/docs/data/charts/axis/demos/axis-with-composition/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/axis-with-composition/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/axis-with-composition/index.ts b/docs/data/charts/axis/demos/axis-with-composition/index.ts new file mode 100644 index 0000000000000..17b74efba976e --- /dev/null +++ b/docs/data/charts/axis/demos/axis-with-composition/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AxisWithComposition from './AxisWithComposition'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AxisWithComposition, { ClientProvider }); diff --git a/docs/data/charts/axis/demos/custom-domain-y-axis/CustomDomainYAxis.tsx b/docs/data/charts/axis/demos/custom-domain-y-axis/CustomDomainYAxis.tsx new file mode 100644 index 0000000000000..e85d2a34dba8e --- /dev/null +++ b/docs/data/charts/axis/demos/custom-domain-y-axis/CustomDomainYAxis.tsx @@ -0,0 +1,61 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { BarChart } from '@mui/x-charts/BarChart'; +import TextField from '@mui/material/TextField'; +import MenuItem from '@mui/material/MenuItem'; + +const settings = { + height: 220, + series: [{ data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91] }], + margin: { top: 20, bottom: 10 }, +} as const; + +// Extend a value to match a multiple of the step. +function extend(value: number, step: number) { + if (value > 0) { + // If >0 go to the next step + return step * Math.ceil(value / step); + } + // If <0 go to the previous step + return step * Math.floor(value / step); +} + +export default function CustomDomainYAxis() { + // @focus-start @padding 1 + const [domainLimit, setDomainLimit] = React.useState< + 'nice' | 'strict' | 'function' + >('nice'); + + return ( + + + setDomainLimit(event.target.value as 'nice' | 'strict' | 'function') + } + label="domain limit" + sx={{ minWidth: 150, mb: 2 }} + > + nice + strict + function + + ({ + min: extend(min.valueOf(), 10), + max: extend(max.valueOf(), 10), + }) + : domainLimit, + }, + ]} + {...settings} + /> + + ); + // @focus-end +} diff --git a/docs/data/charts/axis/demos/custom-domain-y-axis/client.ts b/docs/data/charts/axis/demos/custom-domain-y-axis/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/custom-domain-y-axis/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/custom-domain-y-axis/index.ts b/docs/data/charts/axis/demos/custom-domain-y-axis/index.ts new file mode 100644 index 0000000000000..22009d536a290 --- /dev/null +++ b/docs/data/charts/axis/demos/custom-domain-y-axis/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomDomainYAxis from './CustomDomainYAxis'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomDomainYAxis, { ClientProvider }); diff --git a/docs/data/charts/axis/FormatterD3.tsx b/docs/data/charts/axis/demos/formatter-d3/FormatterD3.tsx similarity index 93% rename from docs/data/charts/axis/FormatterD3.tsx rename to docs/data/charts/axis/demos/formatter-d3/FormatterD3.tsx index c7f14a4d76fa5..9e7cc46549225 100644 --- a/docs/data/charts/axis/FormatterD3.tsx +++ b/docs/data/charts/axis/demos/formatter-d3/FormatterD3.tsx @@ -1,4 +1,4 @@ -import { ScaleLogarithmic } from '@mui/x-charts-vendor/d3-scale'; +import type { ScaleLogarithmic } from '@mui/x-charts-vendor/d3-scale'; import { LineChart } from '@mui/x-charts/LineChart'; import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; @@ -18,6 +18,7 @@ const dataset = [ export default function FormatterD3() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/axis/demos/formatter-d3/client.ts b/docs/data/charts/axis/demos/formatter-d3/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/formatter-d3/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/formatter-d3/index.ts b/docs/data/charts/axis/demos/formatter-d3/index.ts new file mode 100644 index 0000000000000..c2fde8dfe92a1 --- /dev/null +++ b/docs/data/charts/axis/demos/formatter-d3/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FormatterD3 from './FormatterD3'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FormatterD3, { ClientProvider }); diff --git a/docs/data/charts/axis/FormatterDemo.tsx b/docs/data/charts/axis/demos/formatter-demo/FormatterDemo.tsx similarity index 97% rename from docs/data/charts/axis/FormatterDemo.tsx rename to docs/data/charts/axis/demos/formatter-demo/FormatterDemo.tsx index da40f70f33e66..06e10bfc86530 100644 --- a/docs/data/charts/axis/FormatterDemo.tsx +++ b/docs/data/charts/axis/demos/formatter-demo/FormatterDemo.tsx @@ -97,6 +97,7 @@ const valueFormatter = (value: number | null) => `${value}mm`; export default function FormatterDemo() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/axis/demos/formatter-demo/client.ts b/docs/data/charts/axis/demos/formatter-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/formatter-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/formatter-demo/index.ts b/docs/data/charts/axis/demos/formatter-demo/index.ts new file mode 100644 index 0000000000000..9be00da611e6b --- /dev/null +++ b/docs/data/charts/axis/demos/formatter-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FormatterDemo from './FormatterDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FormatterDemo, { ClientProvider }); diff --git a/docs/data/charts/axis/GroupedAxesAutoSize.tsx b/docs/data/charts/axis/demos/grouped-axes-auto-size/GroupedAxesAutoSize.tsx similarity index 97% rename from docs/data/charts/axis/GroupedAxesAutoSize.tsx rename to docs/data/charts/axis/demos/grouped-axes-auto-size/GroupedAxesAutoSize.tsx index 54da418579e0d..a42935388971d 100644 --- a/docs/data/charts/axis/GroupedAxesAutoSize.tsx +++ b/docs/data/charts/axis/demos/grouped-axes-auto-size/GroupedAxesAutoSize.tsx @@ -9,10 +9,11 @@ import { useXAxis, useYAxisCoordinates, useYAxis, - type AxisCoordinates, } from '@mui/x-charts/hooks'; +import type { AxisCoordinates } from '@mui/x-charts/hooks'; export default function GroupedAxesAutoSize() { + // @focus-start @padding 1 const [useAutoSize, setUseAutoSize] = React.useState(true); return ( @@ -71,6 +72,7 @@ export default function GroupedAxesAutoSize() { ); + // @focus-end } const getMonth = (date: Date) => diff --git a/docs/data/charts/axis/demos/grouped-axes-auto-size/client.ts b/docs/data/charts/axis/demos/grouped-axes-auto-size/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/grouped-axes-auto-size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/grouped-axes-auto-size/index.ts b/docs/data/charts/axis/demos/grouped-axes-auto-size/index.ts new file mode 100644 index 0000000000000..07540cc4a4c35 --- /dev/null +++ b/docs/data/charts/axis/demos/grouped-axes-auto-size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GroupedAxesAutoSize from './GroupedAxesAutoSize'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GroupedAxesAutoSize, { ClientProvider }); diff --git a/docs/data/charts/axis/GroupedAxes.tsx b/docs/data/charts/axis/demos/grouped-axes/GroupedAxes.tsx similarity index 97% rename from docs/data/charts/axis/GroupedAxes.tsx rename to docs/data/charts/axis/demos/grouped-axes/GroupedAxes.tsx index b3af0fc3ce027..9f9d5e1e46b25 100644 --- a/docs/data/charts/axis/GroupedAxes.tsx +++ b/docs/data/charts/axis/demos/grouped-axes/GroupedAxes.tsx @@ -2,6 +2,7 @@ import { BarChart } from '@mui/x-charts/BarChart'; export default function GroupedAxes() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/axis/demos/grouped-axes/client.ts b/docs/data/charts/axis/demos/grouped-axes/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/grouped-axes/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/grouped-axes/index.ts b/docs/data/charts/axis/demos/grouped-axes/index.ts new file mode 100644 index 0000000000000..4912e36145769 --- /dev/null +++ b/docs/data/charts/axis/demos/grouped-axes/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GroupedAxes from './GroupedAxes'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GroupedAxes, { ClientProvider }); diff --git a/docs/data/charts/axis/GroupedYAxes.tsx b/docs/data/charts/axis/demos/grouped-y-axes/GroupedYAxes.tsx similarity index 96% rename from docs/data/charts/axis/GroupedYAxes.tsx rename to docs/data/charts/axis/demos/grouped-y-axes/GroupedYAxes.tsx index 243413ceed05b..39c0aee2ed34b 100644 --- a/docs/data/charts/axis/GroupedYAxes.tsx +++ b/docs/data/charts/axis/demos/grouped-y-axes/GroupedYAxes.tsx @@ -2,6 +2,7 @@ import { BarChart } from '@mui/x-charts/BarChart'; export default function GroupedYAxes() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/axis/demos/grouped-y-axes/client.ts b/docs/data/charts/axis/demos/grouped-y-axes/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/grouped-y-axes/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/grouped-y-axes/index.ts b/docs/data/charts/axis/demos/grouped-y-axes/index.ts new file mode 100644 index 0000000000000..f81c8c9d595d5 --- /dev/null +++ b/docs/data/charts/axis/demos/grouped-y-axes/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GroupedYAxes from './GroupedYAxes'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GroupedYAxes, { ClientProvider }); diff --git a/docs/data/charts/axis/HidingAxis.tsx b/docs/data/charts/axis/demos/hiding-axis/HidingAxis.tsx similarity index 85% rename from docs/data/charts/axis/HidingAxis.tsx rename to docs/data/charts/axis/demos/hiding-axis/HidingAxis.tsx index 22d2ba92cf97d..59bbf6d747bbb 100644 --- a/docs/data/charts/axis/HidingAxis.tsx +++ b/docs/data/charts/axis/demos/hiding-axis/HidingAxis.tsx @@ -2,6 +2,7 @@ import { BarChart } from '@mui/x-charts/BarChart'; export default function HidingAxis() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/axis/demos/hiding-axis/client.ts b/docs/data/charts/axis/demos/hiding-axis/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/hiding-axis/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/hiding-axis/index.ts b/docs/data/charts/axis/demos/hiding-axis/index.ts new file mode 100644 index 0000000000000..1cdc8f2911125 --- /dev/null +++ b/docs/data/charts/axis/demos/hiding-axis/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HidingAxis from './HidingAxis'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HidingAxis, { ClientProvider }); diff --git a/docs/data/charts/axis/MinMaxExample.tsx b/docs/data/charts/axis/demos/min-max-example/MinMaxExample.tsx similarity index 97% rename from docs/data/charts/axis/MinMaxExample.tsx rename to docs/data/charts/axis/demos/min-max-example/MinMaxExample.tsx index 521e187f5e21a..68140db56b0e7 100644 --- a/docs/data/charts/axis/MinMaxExample.tsx +++ b/docs/data/charts/axis/demos/min-max-example/MinMaxExample.tsx @@ -14,6 +14,7 @@ const data = Array.from({ length: 200 }, () => ({ const minDistance = 10; export default function MinMaxExample() { + // @focus-start @padding 1 const [value, setValue] = React.useState([-25, 25]); const handleChange = ( @@ -60,4 +61,5 @@ export default function MinMaxExample() { /> ); + // @focus-end } diff --git a/docs/data/charts/axis/demos/min-max-example/client.ts b/docs/data/charts/axis/demos/min-max-example/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/min-max-example/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/min-max-example/index.ts b/docs/data/charts/axis/demos/min-max-example/index.ts new file mode 100644 index 0000000000000..e361d69861b9d --- /dev/null +++ b/docs/data/charts/axis/demos/min-max-example/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MinMaxExample from './MinMaxExample'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MinMaxExample, { ClientProvider }); diff --git a/docs/data/charts/axis/ModifyAxisPosition.tsx b/docs/data/charts/axis/demos/modify-axis-position/ModifyAxisPosition.tsx similarity index 93% rename from docs/data/charts/axis/ModifyAxisPosition.tsx rename to docs/data/charts/axis/demos/modify-axis-position/ModifyAxisPosition.tsx index 3d3f537cfdd89..ffc80c1377b5c 100644 --- a/docs/data/charts/axis/ModifyAxisPosition.tsx +++ b/docs/data/charts/axis/demos/modify-axis-position/ModifyAxisPosition.tsx @@ -17,11 +17,13 @@ const params = { export default function ModifyAxisPosition() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/axis/demos/modify-axis-position/client.ts b/docs/data/charts/axis/demos/modify-axis-position/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/modify-axis-position/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/modify-axis-position/index.ts b/docs/data/charts/axis/demos/modify-axis-position/index.ts new file mode 100644 index 0000000000000..6fe5fe913a9cf --- /dev/null +++ b/docs/data/charts/axis/demos/modify-axis-position/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ModifyAxisPosition from './ModifyAxisPosition'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ModifyAxisPosition, { ClientProvider }); diff --git a/docs/data/charts/axis/MultipleAxes.tsx b/docs/data/charts/axis/demos/multiple-axes/MultipleAxes.tsx similarity index 93% rename from docs/data/charts/axis/MultipleAxes.tsx rename to docs/data/charts/axis/demos/multiple-axes/MultipleAxes.tsx index 739f565d3f06e..911003c200f0b 100644 --- a/docs/data/charts/axis/MultipleAxes.tsx +++ b/docs/data/charts/axis/demos/multiple-axes/MultipleAxes.tsx @@ -6,6 +6,7 @@ const sample = [1, 10, 30, 50, 70, 90, 100]; export default function MultipleAxes() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/axis/demos/multiple-axes/client.ts b/docs/data/charts/axis/demos/multiple-axes/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/multiple-axes/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/multiple-axes/index.ts b/docs/data/charts/axis/demos/multiple-axes/index.ts new file mode 100644 index 0000000000000..8646d0708b692 --- /dev/null +++ b/docs/data/charts/axis/demos/multiple-axes/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MultipleAxes from './MultipleAxes'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MultipleAxes, { ClientProvider }); diff --git a/docs/data/charts/axis/ReferenceLine.tsx b/docs/data/charts/axis/demos/reference-line/ReferenceLine.tsx similarity index 94% rename from docs/data/charts/axis/ReferenceLine.tsx rename to docs/data/charts/axis/demos/reference-line/ReferenceLine.tsx index efe76857f2a7c..7faf6e7bd5d86 100644 --- a/docs/data/charts/axis/ReferenceLine.tsx +++ b/docs/data/charts/axis/demos/reference-line/ReferenceLine.tsx @@ -1,7 +1,7 @@ import Box from '@mui/material/Box'; import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; import { LinePlot } from '@mui/x-charts/LineChart'; -import { LineSeriesType } from '@mui/x-charts/models'; +import type { LineSeriesType } from '@mui/x-charts/models'; import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; @@ -47,6 +47,7 @@ const config = { export default function ReferenceLine() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/axis/demos/reference-line/client.ts b/docs/data/charts/axis/demos/reference-line/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/reference-line/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/reference-line/index.ts b/docs/data/charts/axis/demos/reference-line/index.ts new file mode 100644 index 0000000000000..e4eda4f9ff0e6 --- /dev/null +++ b/docs/data/charts/axis/demos/reference-line/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ReferenceLine from './ReferenceLine'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ReferenceLine, { ClientProvider }); diff --git a/docs/data/charts/axis/ReverseExample.tsx b/docs/data/charts/axis/demos/reverse-example/ReverseExample.tsx similarity index 98% rename from docs/data/charts/axis/ReverseExample.tsx rename to docs/data/charts/axis/demos/reverse-example/ReverseExample.tsx index a20195f24c04b..86a221751ebac 100644 --- a/docs/data/charts/axis/ReverseExample.tsx +++ b/docs/data/charts/axis/demos/reverse-example/ReverseExample.tsx @@ -34,6 +34,7 @@ const series = [ ] as const; export default function ReverseExample() { + // @focus-start @padding 1 const [reverseX, setReverseX] = React.useState(false); const [reverseLeft, setReverseLeft] = React.useState(false); const [reverseRight, setReverseRight] = React.useState(false); @@ -97,4 +98,5 @@ export default function ReverseExample() { ); + // @focus-end } diff --git a/docs/data/charts/axis/demos/reverse-example/client.ts b/docs/data/charts/axis/demos/reverse-example/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/reverse-example/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/reverse-example/index.ts b/docs/data/charts/axis/demos/reverse-example/index.ts new file mode 100644 index 0000000000000..9d109106f5fb4 --- /dev/null +++ b/docs/data/charts/axis/demos/reverse-example/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ReverseExample from './ReverseExample'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ReverseExample, { ClientProvider }); diff --git a/docs/data/charts/axis/ScaleExample.tsx b/docs/data/charts/axis/demos/scale-example/ScaleExample.tsx similarity index 93% rename from docs/data/charts/axis/ScaleExample.tsx rename to docs/data/charts/axis/demos/scale-example/ScaleExample.tsx index 0b7f83a5a1b97..51be96ba02461 100644 --- a/docs/data/charts/axis/ScaleExample.tsx +++ b/docs/data/charts/axis/demos/scale-example/ScaleExample.tsx @@ -6,6 +6,7 @@ const sample = [1, 10, 30, 50, 70, 90, 100]; export default function ScaleExample() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/axis/demos/scale-example/client.ts b/docs/data/charts/axis/demos/scale-example/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/scale-example/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/scale-example/index.ts b/docs/data/charts/axis/demos/scale-example/index.ts new file mode 100644 index 0000000000000..7444c7f0d6e72 --- /dev/null +++ b/docs/data/charts/axis/demos/scale-example/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScaleExample from './ScaleExample'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScaleExample, { ClientProvider }); diff --git a/docs/data/charts/axis/SymlogScale.tsx b/docs/data/charts/axis/demos/symlog-scale/SymlogScale.tsx similarity index 97% rename from docs/data/charts/axis/SymlogScale.tsx rename to docs/data/charts/axis/demos/symlog-scale/SymlogScale.tsx index 32a1f0e65bd0c..32016626d5c14 100644 --- a/docs/data/charts/axis/SymlogScale.tsx +++ b/docs/data/charts/axis/demos/symlog-scale/SymlogScale.tsx @@ -6,6 +6,7 @@ import { BarChart } from '@mui/x-charts/BarChart'; import { LineChart } from '@mui/x-charts/LineChart'; export default function SymlogScale() { + // @focus-start @padding 1 const [chartType, setChartType] = React.useState('bar'); const handleChartType = (event: any, newChartType: string) => { @@ -33,6 +34,7 @@ export default function SymlogScale() { {chartType === 'area' && } ); + // @focus-end } function SymlogBarChart() { diff --git a/docs/data/charts/axis/demos/symlog-scale/client.ts b/docs/data/charts/axis/demos/symlog-scale/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/symlog-scale/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/symlog-scale/index.ts b/docs/data/charts/axis/demos/symlog-scale/index.ts new file mode 100644 index 0000000000000..3b79762878186 --- /dev/null +++ b/docs/data/charts/axis/demos/symlog-scale/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SymlogScale from './SymlogScale'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SymlogScale, { ClientProvider }); diff --git a/docs/data/charts/axis/TicksWithoutLabels.tsx b/docs/data/charts/axis/demos/ticks-without-labels/TicksWithoutLabels.tsx similarity index 93% rename from docs/data/charts/axis/TicksWithoutLabels.tsx rename to docs/data/charts/axis/demos/ticks-without-labels/TicksWithoutLabels.tsx index af4aeed6940f1..b1294a2b66183 100644 --- a/docs/data/charts/axis/TicksWithoutLabels.tsx +++ b/docs/data/charts/axis/demos/ticks-without-labels/TicksWithoutLabels.tsx @@ -7,8 +7,11 @@ import FormControlLabel from '@mui/material/FormControlLabel'; import Radio from '@mui/material/Radio'; import FormControl from '@mui/material/FormControl'; import FormLabel from '@mui/material/FormLabel'; -import { AxisValueFormatterContext, ScatterValueType } from '@mui/x-charts/models'; -import { earthquakeData } from '../dataset/earthquakeData'; +import type { + AxisValueFormatterContext, + ScatterValueType, +} from '@mui/x-charts/models'; +import { earthquakeData } from '../../../dataset/earthquakeData'; const settings = { height: 400, @@ -41,6 +44,7 @@ function valueFormatterShowAll(value: any) { } export default function TicksWithoutLabels() { + // @focus-start @padding 1 const [tickFormatter, setTickFormatter] = React.useState( () => valueFormatterIgnoreEmpty, ); @@ -97,4 +101,5 @@ export default function TicksWithoutLabels() { ); + // @focus-end } diff --git a/docs/data/charts/axis/demos/ticks-without-labels/client.ts b/docs/data/charts/axis/demos/ticks-without-labels/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/axis/demos/ticks-without-labels/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/axis/demos/ticks-without-labels/index.ts b/docs/data/charts/axis/demos/ticks-without-labels/index.ts new file mode 100644 index 0000000000000..7b91d3b2eb25e --- /dev/null +++ b/docs/data/charts/axis/demos/ticks-without-labels/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TicksWithoutLabels from './TicksWithoutLabels'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TicksWithoutLabels, { ClientProvider }); diff --git a/docs/data/charts/bar-demo/BarChartStackedBySign.js b/docs/data/charts/bar-demo/BarChartStackedBySign.js deleted file mode 100644 index c2beb3c2a76c9..0000000000000 --- a/docs/data/charts/bar-demo/BarChartStackedBySign.js +++ /dev/null @@ -1,30 +0,0 @@ -import Box from '@mui/material/Box'; -import { BarChart } from '@mui/x-charts/BarChart'; - -const pData = [2400, 1398, -9800, 3908, 4800, -3800, 4300]; -const uData = [4000, -3000, -2000, 2780, -1890, 2390, 3490]; - -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function BarChartStackedBySign() { - return ( - - - - ); -} diff --git a/docs/data/charts/bar-demo/BarChartStackedBySign.tsx.preview b/docs/data/charts/bar-demo/BarChartStackedBySign.tsx.preview deleted file mode 100644 index 772c2a77bd731..0000000000000 --- a/docs/data/charts/bar-demo/BarChartStackedBySign.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/bar-demo/BiaxialBarChart.js b/docs/data/charts/bar-demo/BiaxialBarChart.js deleted file mode 100644 index 6f18fedbbc8b6..0000000000000 --- a/docs/data/charts/bar-demo/BiaxialBarChart.js +++ /dev/null @@ -1,43 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; -import Box from '@mui/material/Box'; - -const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; -const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; - -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function BiaxialBarChart() { - return ( - - - - ); -} diff --git a/docs/data/charts/bar-demo/HistogramBarChart.js b/docs/data/charts/bar-demo/HistogramBarChart.js deleted file mode 100644 index ff6ec4016f38e..0000000000000 --- a/docs/data/charts/bar-demo/HistogramBarChart.js +++ /dev/null @@ -1,96 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Slider from '@mui/material/Slider'; -import Typography from '@mui/material/Typography'; -import { BarChart, barClasses } from '@mui/x-charts/BarChart'; - -/** - * Split `values` into `binCount` equal-width bins. - * Each bin reports its [x0, x1) range and how many values fall into it. - * - * Feed the returned array to a BarChart whose x-axis uses - * `scaleType: 'band'` and zero gaps, so adjacent bars touch like a histogram. - */ -function computeBins(values, binCount) { - const min = Math.min(...values); - const max = Math.max(...values); - const step = (max - min) / binCount; - const bins = Array.from({ length: binCount }, (_, i) => ({ - x0: min + i * step, - x1: min + (i + 1) * step, - count: 0, - })); - for (const value of values) { - const index = Math.min(Math.floor((value - min) / step), binCount - 1); - bins[index].count += 1; - } - return bins; -} - -// --------------------------------------------------------------------------- -// Replace this section with your own data source — an array of numbers from -// your API, file, or calculation. Anything `computeBins` can iterate over. -// -// The demo synthesizes 1,000 samples from a normal distribution (μ=50, σ=12) -// with a seeded random generator so the chart is deterministic across SSR -// and client hydration. -function createSeededRandom(seed) { - let state = seed; - return () => { - state = (state * 1664525 + 1013904223) % 4294967296; - return state / 4294967296; - }; -} - -const random = createSeededRandom(42); -const data = Array.from({ length: 1000 }, () => { - const u = 1 - random(); - const v = random(); - return 50 + 12 * Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v); -}); -// --------------------------------------------------------------------------- - -export default function HistogramBarChart() { - const [binCount, setBinCount] = React.useState(20); - - const dataset = React.useMemo( - () => - computeBins(data, binCount).map((bin) => ({ - bin: `${bin.x0.toFixed(1)}–${bin.x1.toFixed(1)}`, - count: bin.count, - })), - [binCount], - ); - - return ( - - - - Bin count - - setBinCount(value)} - valueLabelDisplay="auto" - min={5} - max={60} - aria-labelledby="histogram-bin-count" - /> - - ); -} diff --git a/docs/data/charts/bar-demo/MixedBarChart.js b/docs/data/charts/bar-demo/MixedBarChart.js deleted file mode 100644 index 48ec879570244..0000000000000 --- a/docs/data/charts/bar-demo/MixedBarChart.js +++ /dev/null @@ -1,32 +0,0 @@ -import Box from '@mui/material/Box'; -import { BarChart } from '@mui/x-charts/BarChart'; - -const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; -const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; -const amtData = [2400, 2210, 2290, 2000, 2181, 2500, 2100]; - -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function MixedBarChart() { - return ( - - - - ); -} diff --git a/docs/data/charts/bar-demo/MixedBarChart.tsx.preview b/docs/data/charts/bar-demo/MixedBarChart.tsx.preview deleted file mode 100644 index 937fe69460e4a..0000000000000 --- a/docs/data/charts/bar-demo/MixedBarChart.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/bar-demo/PopulationPyramidBarChart.js b/docs/data/charts/bar-demo/PopulationPyramidBarChart.js deleted file mode 100644 index 797bc0b99bf65..0000000000000 --- a/docs/data/charts/bar-demo/PopulationPyramidBarChart.js +++ /dev/null @@ -1,107 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { BarChart } from '@mui/x-charts/BarChart'; - -const ageGroups = [ - '100+ yrs', - '95-99 yrs', - '90-94 yrs', - '85-89 yrs', - '80-84 yrs', - '75-79 yrs', - '70-74 yrs', - '65-69 yrs', - '60-64 yrs', - '55-59 yrs', - '50-54 yrs', - '45-49 yrs', - '40-44 yrs', - '35-39 yrs', - '30-34 yrs', - '25-29 yrs', - '20-24 yrs', - '15-19 yrs', - '10-14 yrs', - '5-9 yrs', - '0-4 yrs', -]; - -const male = [ - 1139, 8291, 50323, 201240, 476263, 696606, 1012668, 1478069, 2042614, 2068112, - 2258061, 2061862, 2067075, 1808706, 1796779, 1933726, 1620461, 1183580, 1189663, - 1097221, 766227, -]; - -const female = [ - 5770, 36739, 168603, 445118, 762492, 899933, 1152098, 1585781, 2105499, 2045845, - 2231491, 2000130, 1967944, 1673805, 1593655, 1695058, 1484776, 1104293, 1122176, - 1044863, 727814, -]; - -const numberFormatter = Intl.NumberFormat('en-US', { - useGrouping: true, -}); -const numberWithSuffixFormatter = new Intl.NumberFormat('en-US', { - notation: 'compact', -}); -const valueFormatter = (population) => - population ? `${numberFormatter.format(Math.abs(population))}` : ''; - -export default function PopulationPyramidBarChart() { - return ( - - - South Korea Population Pyramid - 2022 - - -population), - label: 'Male', - type: 'bar', - valueFormatter, - stack: 'stack', - }, - { - data: female, - label: 'Female', - type: 'bar', - valueFormatter, - stack: 'stack', - }, - ]} - yAxis={[ - { - data: ageGroups, - width: 60, - tickLabelInterval: (value, index) => index % 2 === 0, - disableLine: true, - disableTicks: true, - }, - ]} - xAxis={[ - { - valueFormatter: (population) => - numberWithSuffixFormatter.format(Math.abs(population)), - disableLine: true, - disableTicks: true, - domainLimit(min, max) { - const extremum = Math.max(-min.valueOf(), max.valueOf()); - const roundedExtremum = Math.ceil(extremum / 100_000) * 100_000; - return { min: -roundedExtremum, max: roundedExtremum }; - }, - }, - ]} - grid={{ vertical: true }} - /> - Source: KOSIS - - ); -} diff --git a/docs/data/charts/bar-demo/PositiveAndNegativeBarChart.js b/docs/data/charts/bar-demo/PositiveAndNegativeBarChart.js deleted file mode 100644 index fbecdb826ce69..0000000000000 --- a/docs/data/charts/bar-demo/PositiveAndNegativeBarChart.js +++ /dev/null @@ -1,30 +0,0 @@ -import Box from '@mui/material/Box'; -import { BarChart } from '@mui/x-charts/BarChart'; - -const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; -const pData = [2400, 1398, -9800, 3908, 4800, -3800, 4300]; - -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function PositiveAndNegativeBarChart() { - return ( - - - - ); -} diff --git a/docs/data/charts/bar-demo/PositiveAndNegativeBarChart.tsx.preview b/docs/data/charts/bar-demo/PositiveAndNegativeBarChart.tsx.preview deleted file mode 100644 index 10fe40be215d5..0000000000000 --- a/docs/data/charts/bar-demo/PositiveAndNegativeBarChart.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/bar-demo/SimpleBarChart.js b/docs/data/charts/bar-demo/SimpleBarChart.js deleted file mode 100644 index 1cb216754aa58..0000000000000 --- a/docs/data/charts/bar-demo/SimpleBarChart.js +++ /dev/null @@ -1,29 +0,0 @@ -import Box from '@mui/material/Box'; -import { BarChart } from '@mui/x-charts/BarChart'; - -const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; -const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function SimpleBarChart() { - return ( - - - - ); -} diff --git a/docs/data/charts/bar-demo/SimpleBarChart.tsx.preview b/docs/data/charts/bar-demo/SimpleBarChart.tsx.preview deleted file mode 100644 index 5e0944ccf8bf9..0000000000000 --- a/docs/data/charts/bar-demo/SimpleBarChart.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/bar-demo/StackedBarChart.js b/docs/data/charts/bar-demo/StackedBarChart.js deleted file mode 100644 index a561995bcd031..0000000000000 --- a/docs/data/charts/bar-demo/StackedBarChart.js +++ /dev/null @@ -1,29 +0,0 @@ -import Box from '@mui/material/Box'; -import { BarChart } from '@mui/x-charts/BarChart'; - -const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; -const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function StackedBarChart() { - return ( - - - - ); -} diff --git a/docs/data/charts/bar-demo/StackedBarChart.tsx.preview b/docs/data/charts/bar-demo/StackedBarChart.tsx.preview deleted file mode 100644 index 620f9e9b525ef..0000000000000 --- a/docs/data/charts/bar-demo/StackedBarChart.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/bar-demo/TinyBarChart.js b/docs/data/charts/bar-demo/TinyBarChart.js deleted file mode 100644 index 2cdc96f1b830d..0000000000000 --- a/docs/data/charts/bar-demo/TinyBarChart.js +++ /dev/null @@ -1,26 +0,0 @@ -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { BarPlot } from '@mui/x-charts/BarChart'; - -const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function TinyBarChart() { - return ( - - - - ); -} diff --git a/docs/data/charts/bar-demo/TinyBarChart.tsx.preview b/docs/data/charts/bar-demo/TinyBarChart.tsx.preview deleted file mode 100644 index 2711f54ce7a08..0000000000000 --- a/docs/data/charts/bar-demo/TinyBarChart.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/charts/bar-demo/WaterfallChart.js b/docs/data/charts/bar-demo/WaterfallChart.js deleted file mode 100644 index bd69afdf7ab29..0000000000000 --- a/docs/data/charts/bar-demo/WaterfallChart.js +++ /dev/null @@ -1,71 +0,0 @@ -import * as React from 'react'; -import { useTheme } from '@mui/system'; -import { rainbowSurgePalette } from '@mui/x-charts/colorPalettes'; -import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium'; - -const dollarFormatter = new Intl.NumberFormat('en-US', { - style: 'currency', - compactDisplay: 'short', - currency: 'USD', - maximumFractionDigits: 0, -}); - -export default function WaterfallChart() { - const theme = useTheme(); - const palette = rainbowSurgePalette(theme.palette.mode); - const blue = palette[0]; - const red = palette[2]; - const green = palette[4]; - - return ( - dollarFormatter.format(value), - }, - ]} - series={[ - { - type: 'rangeBar', - data: [ - [0, 500_000], - [500_000, 650_000], - [650_000, 730_000], - [730_000, 530_000], - [530_000, 455_000], - [455_000, 335_000], - [335_000, 280_000], - [0, 280_000], - ], - valueFormatter: (value) => - value === null ? null : dollarFormatter.format(value[1] - value[0]), - colorGetter: (data) => { - const value = data?.value; - - if (value == null || value[0] === 0) { - return blue; - } - - return value[1] - value[0] >= 0 ? green : red; - }, - }, - ]} - height={300} - /> - ); -} diff --git a/docs/data/charts/bar-demo/bar-demo.md b/docs/data/charts/bar-demo/bar-demo.md index 1129121a7511c..5cf2038c74289 100644 --- a/docs/data/charts/bar-demo/bar-demo.md +++ b/docs/data/charts/bar-demo/bar-demo.md @@ -10,41 +10,41 @@ components: BarChart, BarElement, BarPlot ## TinyBarChart -{{"demo": "TinyBarChart.js"}} +{{"component": "file://./demos/tiny-bar-chart/index.ts"}} ## SimpleBarChart -{{"demo": "SimpleBarChart.js"}} +{{"component": "file://./demos/simple-bar-chart/index.ts"}} ## StackedBarChart -{{"demo": "StackedBarChart.js"}} +{{"component": "file://./demos/stacked-bar-chart/index.ts"}} ## MixedBarChart -{{"demo": "MixedBarChart.js"}} +{{"component": "file://./demos/mixed-bar-chart/index.ts"}} ## PositiveAndNegativeBarChart -{{"demo": "PositiveAndNegativeBarChart.js"}} +{{"component": "file://./demos/positive-and-negative-bar-chart/index.ts"}} ## BarChartStackedBySign -{{"demo": "BarChartStackedBySign.js"}} +{{"component": "file://./demos/bar-chart-stacked-by-sign/index.ts"}} ## BiaxialBarChart -{{"demo": "BiaxialBarChart.js"}} +{{"component": "file://./demos/biaxial-bar-chart/index.ts"}} ## Population pyramid -{{"demo": "PopulationPyramidBarChart.js"}} +{{"component": "file://./demos/population-pyramid-bar-chart/index.ts"}} ## Waterfall chart [](/x/introduction/licensing/#premium-plan 'Premium plan') The following demo shows a waterfall chart built with a [range bar chart](/x/react-charts/range-bar/). -{{"demo": "WaterfallChart.js"}} +{{"component": "file://./demos/waterfall-chart/index.ts"}} ## Histogram @@ -54,4 +54,4 @@ The Bar Chart has no built-in histogram, so split your dataset into equal-width Use a `band` x-axis with `categoryGapRatio` and `barGapRatio` set to `0` so adjacent bars touch — what makes a histogram readable. To avoid artifacts between bars, set the `shape-rendering` to `'crispEdges'` for the bars. -{{"demo": "HistogramBarChart.js"}} +{{"component": "file://./demos/histogram-bar-chart/index.ts"}} diff --git a/docs/data/charts/bar-demo/BarChartStackedBySign.tsx b/docs/data/charts/bar-demo/demos/bar-chart-stacked-by-sign/BarChartStackedBySign.tsx similarity index 93% rename from docs/data/charts/bar-demo/BarChartStackedBySign.tsx rename to docs/data/charts/bar-demo/demos/bar-chart-stacked-by-sign/BarChartStackedBySign.tsx index c2beb3c2a76c9..66b1cdca4cad0 100644 --- a/docs/data/charts/bar-demo/BarChartStackedBySign.tsx +++ b/docs/data/charts/bar-demo/demos/bar-chart-stacked-by-sign/BarChartStackedBySign.tsx @@ -17,6 +17,7 @@ const xLabels = [ export default function BarChartStackedBySign() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/bar-demo/demos/bar-chart-stacked-by-sign/client.ts b/docs/data/charts/bar-demo/demos/bar-chart-stacked-by-sign/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bar-demo/demos/bar-chart-stacked-by-sign/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bar-demo/demos/bar-chart-stacked-by-sign/index.ts b/docs/data/charts/bar-demo/demos/bar-chart-stacked-by-sign/index.ts new file mode 100644 index 0000000000000..d2a0b1a012780 --- /dev/null +++ b/docs/data/charts/bar-demo/demos/bar-chart-stacked-by-sign/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BarChartStackedBySign from './BarChartStackedBySign'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BarChartStackedBySign, { ClientProvider }); diff --git a/docs/data/charts/bar-demo/BiaxialBarChart.tsx b/docs/data/charts/bar-demo/demos/biaxial-bar-chart/BiaxialBarChart.tsx similarity index 94% rename from docs/data/charts/bar-demo/BiaxialBarChart.tsx rename to docs/data/charts/bar-demo/demos/biaxial-bar-chart/BiaxialBarChart.tsx index 6cff1a84c43cf..2316aa5fed568 100644 --- a/docs/data/charts/bar-demo/BiaxialBarChart.tsx +++ b/docs/data/charts/bar-demo/demos/biaxial-bar-chart/BiaxialBarChart.tsx @@ -17,6 +17,7 @@ const xLabels = [ export default function BiaxialBarChart() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/bar-demo/demos/biaxial-bar-chart/client.ts b/docs/data/charts/bar-demo/demos/biaxial-bar-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bar-demo/demos/biaxial-bar-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bar-demo/demos/biaxial-bar-chart/index.ts b/docs/data/charts/bar-demo/demos/biaxial-bar-chart/index.ts new file mode 100644 index 0000000000000..f629c2c471441 --- /dev/null +++ b/docs/data/charts/bar-demo/demos/biaxial-bar-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BiaxialBarChart from './BiaxialBarChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BiaxialBarChart, { ClientProvider }); diff --git a/docs/data/charts/bar-demo/HistogramBarChart.tsx b/docs/data/charts/bar-demo/demos/histogram-bar-chart/HistogramBarChart.tsx similarity index 98% rename from docs/data/charts/bar-demo/HistogramBarChart.tsx rename to docs/data/charts/bar-demo/demos/histogram-bar-chart/HistogramBarChart.tsx index c55f4b101d4d2..0348be5551bc6 100644 --- a/docs/data/charts/bar-demo/HistogramBarChart.tsx +++ b/docs/data/charts/bar-demo/demos/histogram-bar-chart/HistogramBarChart.tsx @@ -53,6 +53,7 @@ const data = Array.from({ length: 1000 }, () => { // --------------------------------------------------------------------------- export default function HistogramBarChart() { + // @focus-start @padding 1 const [binCount, setBinCount] = React.useState(20); const dataset = React.useMemo( @@ -95,4 +96,5 @@ export default function HistogramBarChart() { /> ); + // @focus-end } diff --git a/docs/data/charts/bar-demo/demos/histogram-bar-chart/client.ts b/docs/data/charts/bar-demo/demos/histogram-bar-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bar-demo/demos/histogram-bar-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bar-demo/demos/histogram-bar-chart/index.ts b/docs/data/charts/bar-demo/demos/histogram-bar-chart/index.ts new file mode 100644 index 0000000000000..f46915f43e526 --- /dev/null +++ b/docs/data/charts/bar-demo/demos/histogram-bar-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HistogramBarChart from './HistogramBarChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HistogramBarChart, { ClientProvider }); diff --git a/docs/data/charts/bar-demo/MixedBarChart.tsx b/docs/data/charts/bar-demo/demos/mixed-bar-chart/MixedBarChart.tsx similarity index 93% rename from docs/data/charts/bar-demo/MixedBarChart.tsx rename to docs/data/charts/bar-demo/demos/mixed-bar-chart/MixedBarChart.tsx index 48ec879570244..2656c0aaf0c8c 100644 --- a/docs/data/charts/bar-demo/MixedBarChart.tsx +++ b/docs/data/charts/bar-demo/demos/mixed-bar-chart/MixedBarChart.tsx @@ -18,6 +18,7 @@ const xLabels = [ export default function MixedBarChart() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/bar-demo/demos/mixed-bar-chart/client.ts b/docs/data/charts/bar-demo/demos/mixed-bar-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bar-demo/demos/mixed-bar-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bar-demo/demos/mixed-bar-chart/index.ts b/docs/data/charts/bar-demo/demos/mixed-bar-chart/index.ts new file mode 100644 index 0000000000000..ba46a7d70ca71 --- /dev/null +++ b/docs/data/charts/bar-demo/demos/mixed-bar-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MixedBarChart from './MixedBarChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MixedBarChart, { ClientProvider }); diff --git a/docs/data/charts/bar-demo/PopulationPyramidBarChart.tsx b/docs/data/charts/bar-demo/demos/population-pyramid-bar-chart/PopulationPyramidBarChart.tsx similarity index 98% rename from docs/data/charts/bar-demo/PopulationPyramidBarChart.tsx rename to docs/data/charts/bar-demo/demos/population-pyramid-bar-chart/PopulationPyramidBarChart.tsx index ea148593cf099..cba00cf8e8a30 100644 --- a/docs/data/charts/bar-demo/PopulationPyramidBarChart.tsx +++ b/docs/data/charts/bar-demo/demos/population-pyramid-bar-chart/PopulationPyramidBarChart.tsx @@ -50,6 +50,7 @@ const valueFormatter = (population: number | null) => export default function PopulationPyramidBarChart() { return ( + {/* @focus-start */} Source: KOSIS + {/* @focus-end */} ); } diff --git a/docs/data/charts/bar-demo/demos/population-pyramid-bar-chart/client.ts b/docs/data/charts/bar-demo/demos/population-pyramid-bar-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bar-demo/demos/population-pyramid-bar-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bar-demo/demos/population-pyramid-bar-chart/index.ts b/docs/data/charts/bar-demo/demos/population-pyramid-bar-chart/index.ts new file mode 100644 index 0000000000000..cafb90cbe6992 --- /dev/null +++ b/docs/data/charts/bar-demo/demos/population-pyramid-bar-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PopulationPyramidBarChart from './PopulationPyramidBarChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PopulationPyramidBarChart, { ClientProvider }); diff --git a/docs/data/charts/bar-demo/PositiveAndNegativeBarChart.tsx b/docs/data/charts/bar-demo/demos/positive-and-negative-bar-chart/PositiveAndNegativeBarChart.tsx similarity index 92% rename from docs/data/charts/bar-demo/PositiveAndNegativeBarChart.tsx rename to docs/data/charts/bar-demo/demos/positive-and-negative-bar-chart/PositiveAndNegativeBarChart.tsx index fbecdb826ce69..78d1f693d9343 100644 --- a/docs/data/charts/bar-demo/PositiveAndNegativeBarChart.tsx +++ b/docs/data/charts/bar-demo/demos/positive-and-negative-bar-chart/PositiveAndNegativeBarChart.tsx @@ -17,6 +17,7 @@ const xLabels = [ export default function PositiveAndNegativeBarChart() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/bar-demo/demos/positive-and-negative-bar-chart/client.ts b/docs/data/charts/bar-demo/demos/positive-and-negative-bar-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bar-demo/demos/positive-and-negative-bar-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bar-demo/demos/positive-and-negative-bar-chart/index.ts b/docs/data/charts/bar-demo/demos/positive-and-negative-bar-chart/index.ts new file mode 100644 index 0000000000000..e835d3b76ce82 --- /dev/null +++ b/docs/data/charts/bar-demo/demos/positive-and-negative-bar-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PositiveAndNegativeBarChart from './PositiveAndNegativeBarChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PositiveAndNegativeBarChart, { ClientProvider }); diff --git a/docs/data/charts/bar-demo/SimpleBarChart.tsx b/docs/data/charts/bar-demo/demos/simple-bar-chart/SimpleBarChart.tsx similarity index 92% rename from docs/data/charts/bar-demo/SimpleBarChart.tsx rename to docs/data/charts/bar-demo/demos/simple-bar-chart/SimpleBarChart.tsx index 1cb216754aa58..9ef43e156cfd0 100644 --- a/docs/data/charts/bar-demo/SimpleBarChart.tsx +++ b/docs/data/charts/bar-demo/demos/simple-bar-chart/SimpleBarChart.tsx @@ -16,6 +16,7 @@ const xLabels = [ export default function SimpleBarChart() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/bar-demo/demos/simple-bar-chart/client.ts b/docs/data/charts/bar-demo/demos/simple-bar-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bar-demo/demos/simple-bar-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bar-demo/demos/simple-bar-chart/index.ts b/docs/data/charts/bar-demo/demos/simple-bar-chart/index.ts new file mode 100644 index 0000000000000..1a87c781036bd --- /dev/null +++ b/docs/data/charts/bar-demo/demos/simple-bar-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleBarChart from './SimpleBarChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleBarChart, { ClientProvider }); diff --git a/docs/data/charts/bar-demo/StackedBarChart.tsx b/docs/data/charts/bar-demo/demos/stacked-bar-chart/StackedBarChart.tsx similarity index 93% rename from docs/data/charts/bar-demo/StackedBarChart.tsx rename to docs/data/charts/bar-demo/demos/stacked-bar-chart/StackedBarChart.tsx index a561995bcd031..f005f80c11ef2 100644 --- a/docs/data/charts/bar-demo/StackedBarChart.tsx +++ b/docs/data/charts/bar-demo/demos/stacked-bar-chart/StackedBarChart.tsx @@ -16,6 +16,7 @@ const xLabels = [ export default function StackedBarChart() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/bar-demo/demos/stacked-bar-chart/client.ts b/docs/data/charts/bar-demo/demos/stacked-bar-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bar-demo/demos/stacked-bar-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bar-demo/demos/stacked-bar-chart/index.ts b/docs/data/charts/bar-demo/demos/stacked-bar-chart/index.ts new file mode 100644 index 0000000000000..ab510a215a684 --- /dev/null +++ b/docs/data/charts/bar-demo/demos/stacked-bar-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StackedBarChart from './StackedBarChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StackedBarChart, { ClientProvider }); diff --git a/docs/data/charts/bar-demo/TinyBarChart.tsx b/docs/data/charts/bar-demo/demos/tiny-bar-chart/TinyBarChart.tsx similarity index 91% rename from docs/data/charts/bar-demo/TinyBarChart.tsx rename to docs/data/charts/bar-demo/demos/tiny-bar-chart/TinyBarChart.tsx index 2cdc96f1b830d..3d3deb0de57f0 100644 --- a/docs/data/charts/bar-demo/TinyBarChart.tsx +++ b/docs/data/charts/bar-demo/demos/tiny-bar-chart/TinyBarChart.tsx @@ -14,6 +14,7 @@ const xLabels = [ export default function TinyBarChart() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/bar-demo/demos/tiny-bar-chart/client.ts b/docs/data/charts/bar-demo/demos/tiny-bar-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bar-demo/demos/tiny-bar-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bar-demo/demos/tiny-bar-chart/index.ts b/docs/data/charts/bar-demo/demos/tiny-bar-chart/index.ts new file mode 100644 index 0000000000000..4338e738c4d32 --- /dev/null +++ b/docs/data/charts/bar-demo/demos/tiny-bar-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TinyBarChart from './TinyBarChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TinyBarChart, { ClientProvider }); diff --git a/docs/data/charts/bar-demo/WaterfallChart.tsx b/docs/data/charts/bar-demo/demos/waterfall-chart/WaterfallChart.tsx similarity index 97% rename from docs/data/charts/bar-demo/WaterfallChart.tsx rename to docs/data/charts/bar-demo/demos/waterfall-chart/WaterfallChart.tsx index 082e7c61605db..6dbaf4835b3c4 100644 --- a/docs/data/charts/bar-demo/WaterfallChart.tsx +++ b/docs/data/charts/bar-demo/demos/waterfall-chart/WaterfallChart.tsx @@ -11,6 +11,7 @@ const dollarFormatter = new Intl.NumberFormat('en-US', { }); export default function WaterfallChart() { + // @focus-start @padding 1 const theme = useTheme(); const palette = rainbowSurgePalette(theme.palette.mode); const blue = palette[0]; @@ -68,4 +69,5 @@ export default function WaterfallChart() { height={300} /> ); + // @focus-end } diff --git a/docs/data/charts/bar-demo/demos/waterfall-chart/client.ts b/docs/data/charts/bar-demo/demos/waterfall-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bar-demo/demos/waterfall-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bar-demo/demos/waterfall-chart/index.ts b/docs/data/charts/bar-demo/demos/waterfall-chart/index.ts new file mode 100644 index 0000000000000..f843a1c95ab40 --- /dev/null +++ b/docs/data/charts/bar-demo/demos/waterfall-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import WaterfallChart from './WaterfallChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, WaterfallChart, { ClientProvider }); diff --git a/docs/data/charts/bars/BarAnimation.js b/docs/data/charts/bars/BarAnimation.js deleted file mode 100644 index b315a40e30519..0000000000000 --- a/docs/data/charts/bars/BarAnimation.js +++ /dev/null @@ -1,147 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import Slider from '@mui/material/Slider'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import { BarChart } from '@mui/x-charts/BarChart'; - -export default function BarAnimation() { - const [seriesNb, setSeriesNb] = React.useState(2); - const [itemNb, setItemNb] = React.useState(5); - const [skipAnimation, setSkipAnimation] = React.useState(false); - - const handleItemNbChange = (event, newValue) => { - if (typeof newValue !== 'number') { - return; - } - setItemNb(newValue); - }; - const handleSeriesNbChange = (event, newValue) => { - if (typeof newValue !== 'number') { - return; - } - setSeriesNb(newValue); - }; - - return ( - - ({ ...s, data: s.data.slice(0, itemNb) }))} - skipAnimation={skipAnimation} - margin={{ left: 0 }} - /> - setSkipAnimation(event.target.checked)} /> - } - label="skipAnimation" - labelPlacement="end" - /> - - Number of items - - - - Number of series - - - - ); -} - -const highlightScope = { - highlight: 'series', - fade: 'global', -}; - -const series = [ - { - label: 'series 1', - data: [ - 2423, 2210, 764, 1879, 1478, 1373, 1891, 2171, 620, 1269, 724, 1707, 1188, - 1879, 626, 1635, 2177, 516, 1793, 1598, - ], - }, - { - label: 'series 2', - data: [ - 2362, 2254, 1962, 1336, 586, 1069, 2194, 1629, 2173, 2031, 1757, 862, 2446, - 910, 2430, 2300, 805, 1835, 1684, 2197, - ], - }, - { - label: 'series 3', - data: [ - 1145, 1214, 975, 2266, 1768, 2341, 747, 1282, 1780, 1766, 2115, 1720, 1057, - 2000, 1716, 2253, 619, 1626, 1209, 1786, - ], - }, - { - label: 'series 4', - data: [ - 2361, 979, 2430, 1768, 1913, 2342, 1868, 1319, 1038, 2139, 1691, 935, 2262, - 1580, 692, 1559, 1344, 1442, 1593, 1889, - ], - }, - { - label: 'series 5', - data: [ - 968, 1371, 1381, 1060, 1327, 934, 1779, 1361, 878, 1055, 1737, 2380, 875, 2408, - 1066, 1802, 1442, 1567, 1552, 1742, - ], - }, - { - label: 'series 6', - data: [ - 2316, 1845, 2057, 1479, 1859, 1015, 1569, 1448, 1354, 1007, 799, 1748, 1454, - 1968, 1129, 1196, 2158, 540, 1482, 880, - ], - }, - { - label: 'series 7', - data: [ - 2140, 2082, 708, 2032, 554, 1365, 2121, 1639, 2430, 2440, 814, 1328, 883, 1811, - 2322, 1743, 700, 2131, 1473, 957, - ], - }, - { - label: 'series 8', - data: [ - 1074, 744, 2487, 823, 2252, 2317, 2139, 1818, 2256, 1769, 1123, 1461, 672, - 1335, 960, 1871, 2305, 1231, 2005, 908, - ], - }, - { - label: 'series 9', - data: [ - 1792, 886, 2472, 1546, 2164, 2323, 2435, 1268, 2368, 2158, 2200, 1316, 552, - 1874, 1771, 1038, 1838, 2029, 1793, 1117, - ], - }, - { - label: 'series 10', - data: [ - 1433, 1161, 1107, 1517, 1410, 1058, 676, 1280, 1936, 1774, 698, 1721, 1421, - 785, 1752, 800, 990, 1809, 1985, 665, - ], - }, -].map((s) => ({ ...s, highlightScope })); diff --git a/docs/data/charts/bars/BarBatchRenderer.js b/docs/data/charts/bars/BarBatchRenderer.js deleted file mode 100644 index 0bef9cdd92161..0000000000000 --- a/docs/data/charts/bars/BarBatchRenderer.js +++ /dev/null @@ -1,74 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; -import RadioGroup from '@mui/material/RadioGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Radio from '@mui/material/Radio'; -import data from '../dataset/sp500-intraday.json'; - -const tickLabelDateFormatter = new Intl.DateTimeFormat(undefined, { - month: 'short', - day: 'numeric', -}); - -export default function BarBatchRenderer() { - const [renderer, setRenderer] = React.useState('svg-batch'); - - return ( - - - Rendering Strategy - setRenderer(event.target.value)} - > - } - label="Individual Bars (default)" - /> - } - label="Batch Bar Rendering" - /> - - - new Date(d.date)), - valueFormatter: (v) => tickLabelDateFormatter.format(v), - zoom: true, - ordinalTimeTicks: [ - 'years', - 'quarterly', - 'months', - 'biweekly', - 'weeks', - 'days', - ], - }, - ]} - series={[ - { - data: data.map((d) => d.close), - label: 'Close', - highlightScope: { highlight: 'item', fade: 'global' }, - }, - { - data: data.map((d) => d.open), - label: 'Open', - highlightScope: { highlight: 'item', fade: 'global' }, - }, - ]} - height={300} - renderer={renderer} - /> - - ); -} diff --git a/docs/data/charts/bars/BarClick.js b/docs/data/charts/bars/BarClick.js deleted file mode 100644 index f49a2c5dec940..0000000000000 --- a/docs/data/charts/bars/BarClick.js +++ /dev/null @@ -1,97 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; -import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; - -import { BarChart } from '@mui/x-charts/BarChart'; - -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -const barChartsParams = { - series: [ - { - id: 'series-1', - data: [3, 4, 1, 6, 5], - label: 'A', - stack: 'total', - highlightScope: { - highlight: 'item', - }, - }, - { - id: 'series-2', - data: [4, 3, 1, 5, 8], - label: 'B', - stack: 'total', - highlightScope: { - highlight: 'item', - }, - }, - { - id: 'series-3', - data: [4, 2, 5, 4, 1], - label: 'C', - highlightScope: { - highlight: 'item', - }, - }, - ], - xAxis: [{ data: ['0', '3', '6', '9', '12'], id: 'axis1' }], - height: 400, - margin: { left: 0 }, -}; - -export default function BarClick() { - const [itemData, setItemData] = React.useState(); - const [axisData, setAxisData] = React.useState(); - - return ( - - - setItemData(d)} - onAxisClick={(event, d) => setAxisData(d)} - /> - - - - - Click on the chart - { - setItemData(undefined); - setAxisData(null); - }} - > - - - - - - - ); -} diff --git a/docs/data/charts/bars/BarGap.js b/docs/data/charts/bars/BarGap.js deleted file mode 100644 index 7779ab80bf8d9..0000000000000 --- a/docs/data/charts/bars/BarGap.js +++ /dev/null @@ -1,68 +0,0 @@ -import Typography from '@mui/material/Typography'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { balanceSheet, addLabels } from './netflixsBalanceSheet'; - -const series = addLabels([ - { dataKey: 'totAss' }, - { dataKey: 'totLia', stack: 'passive' }, - { dataKey: 'totEq', stack: 'passive' }, -]); - -export default function BarGap() { - return ( - ( -
- Netflix balance sheet - `$ ${v / 1000000}B` }]} - hideLegend - /> -
- )} - getCode={({ props }) => { - return `import { BarChart } from '@mui/x-charts/BarChart'; - -`; - }} - /> - ); -} diff --git a/docs/data/charts/bars/BarGradient.js b/docs/data/charts/bars/BarGradient.js deleted file mode 100644 index 99fb3d53e4594..0000000000000 --- a/docs/data/charts/bars/BarGradient.js +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import { BarChart, barClasses } from '@mui/x-charts/BarChart'; - -const settings = { - xAxis: [{ data: ['group A', 'group B', 'group C'] }], - series: [ - { id: '1', data: [4, 3, 5], barLabel: 'value' }, - { id: '2', data: [1, 6, 3], barLabel: 'value' }, - { id: '3', data: [2, 5, 6], barLabel: 'value' }, - ], - height: 300, - margin: { left: 0 }, -}; - -export default function BarGradient() { - return ( - - - - - - ); -} - -function Gradient(props) { - return ( - - - - - ); -} diff --git a/docs/data/charts/bars/BarGradient.tsx.preview b/docs/data/charts/bars/BarGradient.tsx.preview deleted file mode 100644 index 7af48b4a75696..0000000000000 --- a/docs/data/charts/bars/BarGradient.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/charts/bars/BarLabel.js b/docs/data/charts/bars/BarLabel.js deleted file mode 100644 index 6250494e67997..0000000000000 --- a/docs/data/charts/bars/BarLabel.js +++ /dev/null @@ -1,26 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; - -const dollarFormatter = new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD', - maximumFractionDigits: 0, -}); - -export default function BarLabel() { - return ( - dollarFormatter.format(item.value), - }, - { data: [2, 5, 6] }, - ]} - height={300} - margin={{ left: 0 }} - yAxis={[{ width: 30 }]} - /> - ); -} diff --git a/docs/data/charts/bars/BarLabel.tsx.preview b/docs/data/charts/bars/BarLabel.tsx.preview deleted file mode 100644 index 4c896788826ac..0000000000000 --- a/docs/data/charts/bars/BarLabel.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - dollarFormatter.format(item.value!), - }, - { data: [2, 5, 6] }, - ]} - height={300} - margin={{ left: 0 }} - yAxis={[{ width: 30 }]} -/> \ No newline at end of file diff --git a/docs/data/charts/bars/BarLabelPlacement.js b/docs/data/charts/bars/BarLabelPlacement.js deleted file mode 100644 index d7d3567ad53a2..0000000000000 --- a/docs/data/charts/bars/BarLabelPlacement.js +++ /dev/null @@ -1,16 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; - -export default function BarLabelPlacement() { - return ( - - ); -} diff --git a/docs/data/charts/bars/BarLabelPlacement.tsx.preview b/docs/data/charts/bars/BarLabelPlacement.tsx.preview deleted file mode 100644 index bf763cfc31124..0000000000000 --- a/docs/data/charts/bars/BarLabelPlacement.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/bars/BarOECDHouseholdSavings.js b/docs/data/charts/bars/BarOECDHouseholdSavings.js deleted file mode 100644 index c229c5c07b7d2..0000000000000 --- a/docs/data/charts/bars/BarOECDHouseholdSavings.js +++ /dev/null @@ -1,110 +0,0 @@ -import * as React from 'react'; -import { BarChart, barClasses } from '@mui/x-charts/BarChart'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; -import RadioGroup from '@mui/material/RadioGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Radio from '@mui/material/Radio'; -import { countryData } from '../dataset/countryData'; -import householdSavings from '../dataset/oecdHouseholdSavings2024.json'; - -/* Source: https://www.oecd.org/en/data/indicators/household-savings.html */ -const savings = Object.entries(householdSavings) - .map(([country, value]) => ({ - country, - value, - })) - .sort((a, b) => a.value - b.value); - -const percentageFormatter = new Intl.NumberFormat('en-US', { - style: 'percent', - maximumFractionDigits: 1, -}); - -const settings = { - height: 600, - xAxis: [{ label: 'Household Savings (%)' }], - layout: 'horizontal', - hideLegend: true, -}; - -export default function BarOECDHouseholdSavings() { - const [gradientUnits, setGradientUnits] = React.useState('userSpaceOnUse'); - - return ( - - - Household Savings in OECD Countries (2016) - - - Gradient Units - setGradientUnits(event.target.value)} - > - } - label="objectBoundingBox (default)" - /> - } - label="userSpaceOnUse" - /> - - - v.country), - valueFormatter: (value) => countryData[value].country, - width: 100, - }, - ]} - series={[ - { - label: 'Household Savings', - data: savings.map((v) => v.value), - color: 'url(#savings-gradient)', - valueFormatter: (value) => percentageFormatter.format(value / 100), - }, - ]} - sx={ - gradientUnits === 'userSpaceOnUse' - ? { - [`.${barClasses.element}`]: { - fill: 'url(#savings-gradient-user-space)', - }, - } - : undefined - } - > - - - - Source: Our World in Data - - ); -} - -function Gradient(props) { - return ( - - - - - - ); -} diff --git a/docs/data/charts/bars/BarScatterCompostion.js b/docs/data/charts/bars/BarScatterCompostion.js deleted file mode 100644 index de0425f7e8de2..0000000000000 --- a/docs/data/charts/bars/BarScatterCompostion.js +++ /dev/null @@ -1,110 +0,0 @@ -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import { BarPlot, FocusedBar } from '@mui/x-charts/BarChart'; -import { ScatterPlot, FocusedScatterMark } from '@mui/x-charts/ScatterChart'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsGrid } from '@mui/x-charts/ChartsGrid'; -import { ChartsDataProvider } from '@mui/x-charts/ChartsDataProvider'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; -import { legendClasses, ChartsLegend } from '@mui/x-charts/ChartsLegend'; -import { GDPdata } from '../dataset/gdpGrowth'; - -const chartSetting = { - xAxis: [ - { - id: 'bar', - label: 'GDP growth rate', - dataKey: '2024', - colorMap: { - type: 'piecewise', - thresholds: [0], - colors: ['#ff4d4f', '#1976d2'], - }, - }, - { - id: 'scatter', - label: '2010-19 Average', - dataKey: '2010_19', - color: '#FFFF00', - }, - ], - height: 800, -}; - -const valueFormatter = (value) => (value ? `${value.toFixed(2)}%` : ''); - -const scatterValueFormatter = (value) => (value ? `${value.x.toFixed(2)}%` : ''); - -function Gradient() { - return ( - - - - - - - ); -} - -export default function BarScatterCompostion() { - return ( - - - GDP growth rate comparison (2024 vs 2010-19 Avg) - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/charts/bars/BarsDataset.js b/docs/data/charts/bars/BarsDataset.js deleted file mode 100644 index be5ee89fdd40b..0000000000000 --- a/docs/data/charts/bars/BarsDataset.js +++ /dev/null @@ -1,28 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; -import { dataset, valueFormatter } from '../dataset/weather'; - -const chartSetting = { - yAxis: [ - { - label: 'rainfall (mm)', - width: 60, - }, - ], - height: 300, -}; - -export default function BarsDataset() { - return ( - - ); -} diff --git a/docs/data/charts/bars/BarsDataset.tsx.preview b/docs/data/charts/bars/BarsDataset.tsx.preview deleted file mode 100644 index 2521da3863779..0000000000000 --- a/docs/data/charts/bars/BarsDataset.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/bars/BasicBars.js b/docs/data/charts/bars/BasicBars.js deleted file mode 100644 index 84f7ec7b0acc4..0000000000000 --- a/docs/data/charts/bars/BasicBars.js +++ /dev/null @@ -1,11 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; - -export default function BasicBars() { - return ( - - ); -} diff --git a/docs/data/charts/bars/BasicBars.tsx.preview b/docs/data/charts/bars/BasicBars.tsx.preview deleted file mode 100644 index 87f1f16a3bfe8..0000000000000 --- a/docs/data/charts/bars/BasicBars.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/bars/BorderRadius.js b/docs/data/charts/bars/BorderRadius.js deleted file mode 100644 index 7c18f6e155875..0000000000000 --- a/docs/data/charts/bars/BorderRadius.js +++ /dev/null @@ -1,102 +0,0 @@ -import * as React from 'react'; -import { BarChart } from '@mui/x-charts/BarChart'; -import Stack from '@mui/material/Stack'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import Slider from '@mui/material/Slider'; -import Typography from '@mui/material/Typography'; -import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; - -export default function BorderRadius() { - const [layout, setLayout] = React.useState('vertical'); - const [radius, setRadius] = React.useState(10); - const [reverse, setReverse] = React.useState(false); - - return ( - - - - Border Radius - setRadius(value)} - valueLabelDisplay="auto" - min={0} - max={50} - sx={{ mt: 2 }} - /> - - setLayout(event.target.value)} - > - Horizontal - Vertical - - setReverse(event.target.checked)} /> - } - label="Reverse" - labelPlacement="end" - /> - - - `} - language="jsx" - copyButtonHidden - /> - - ); -} - -const dataset = [ - [3, -7, '1st'], - [0, -5, '2nd'], - [10, 0, '3rd'], - [9, 6, '4th'], -].map(([high, low, order]) => ({ - high, - low, - order, -})); - -function getChartSettings(layout, reverse) { - return { - dataset, - height: 300, - xAxis: layout === 'horizontal' ? [{ reverse }] : [{ dataKey: 'order' }], - yAxis: - layout === 'horizontal' - ? [{ scaleType: 'band', dataKey: 'order' }] - : [{ reverse }], - slotProps: { - legend: { - direction: 'horizontal', - position: { vertical: 'bottom', horizontal: 'center' }, - }, - }, - }; -} diff --git a/docs/data/charts/bars/ColorScale.js b/docs/data/charts/bars/ColorScale.js deleted file mode 100644 index b661eed8be619..0000000000000 --- a/docs/data/charts/bars/ColorScale.js +++ /dev/null @@ -1,173 +0,0 @@ -import * as React from 'react'; -import { BarChart } from '@mui/x-charts/BarChart'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -const series = [{ data: [-2, -9, 12, 11, 6, -4] }]; - -export default function ColorScale() { - const [colorX, setColorX] = React.useState('piecewise'); - const [colorY, setColorY] = React.useState('None'); - - return ( - - - setColorX(event.target.value)} - > - None - piecewise - continuous - ordinal - - setColorY(event.target.value)} - > - None - piecewise - continuous - - - - value.getFullYear().toString(), - colorMap: - (colorX === 'ordinal' && { - type: 'ordinal', - colors: [ - '#ccebc5', - '#a8ddb5', - '#7bccc4', - '#4eb3d3', - '#2b8cbe', - '#08589e', - ], - }) || - (colorX === 'continuous' && { - type: 'continuous', - min: new Date(2019, 1, 1), - max: new Date(2024, 1, 1), - color: ['green', 'orange'], - }) || - (colorX === 'piecewise' && { - type: 'piecewise', - thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)], - colors: ['blue', 'red', 'blue'], - }) || - undefined, - }, - ]} - margin={{ left: 0 }} - /> - `, - ].join('\n')} - language="jsx" - copyButtonHidden - /> - - ); -} diff --git a/docs/data/charts/bars/ColorScale.tsx b/docs/data/charts/bars/ColorScale.tsx deleted file mode 100644 index e6da10f7a1ad1..0000000000000 --- a/docs/data/charts/bars/ColorScale.tsx +++ /dev/null @@ -1,184 +0,0 @@ -import * as React from 'react'; -import { BarChart } from '@mui/x-charts/BarChart'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -const series = [{ data: [-2, -9, 12, 11, 6, -4] }]; - -export default function ColorScale() { - const [colorX, setColorX] = React.useState< - 'None' | 'piecewise' | 'continuous' | 'ordinal' - >('piecewise'); - const [colorY, setColorY] = React.useState<'None' | 'piecewise' | 'continuous'>( - 'None', - ); - - return ( - - - - setColorX( - event.target.value as 'None' | 'piecewise' | 'continuous' | 'ordinal', - ) - } - > - None - piecewise - continuous - ordinal - - - setColorY(event.target.value as 'None' | 'piecewise' | 'continuous') - } - > - None - piecewise - continuous - - - - value.getFullYear().toString(), - colorMap: - (colorX === 'ordinal' && { - type: 'ordinal', - colors: [ - '#ccebc5', - '#a8ddb5', - '#7bccc4', - '#4eb3d3', - '#2b8cbe', - '#08589e', - ], - }) || - (colorX === 'continuous' && { - type: 'continuous', - min: new Date(2019, 1, 1), - max: new Date(2024, 1, 1), - color: ['green', 'orange'], - }) || - (colorX === 'piecewise' && { - type: 'piecewise', - thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)], - colors: ['blue', 'red', 'blue'], - }) || - undefined, - }, - ]} - margin={{ left: 0 }} - /> - `, - ].join('\n')} - language="jsx" - copyButtonHidden - /> - - ); -} diff --git a/docs/data/charts/bars/CustomLabels.js b/docs/data/charts/bars/CustomLabels.js deleted file mode 100644 index dd9c6383cffd5..0000000000000 --- a/docs/data/charts/bars/CustomLabels.js +++ /dev/null @@ -1,36 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; - -function barLabel(item, context) { - if ((item.value ?? 0) > 10) { - return 'High'; - } - return context.bar.height < 60 ? null : item.value?.toString(); -} - -export default function CustomLabels() { - return ( - - ); -} diff --git a/docs/data/charts/bars/GridDemo.js b/docs/data/charts/bars/GridDemo.js deleted file mode 100644 index a6a250d30aa7d..0000000000000 --- a/docs/data/charts/bars/GridDemo.js +++ /dev/null @@ -1,21 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; -import { dataset, valueFormatter } from '../dataset/weather'; - -const chartSetting = { - xAxis: [{ label: 'rainfall (mm)' }], - height: 400, - margin: { left: 0 }, -}; - -export default function GridDemo() { - return ( - - ); -} diff --git a/docs/data/charts/bars/GridDemo.tsx b/docs/data/charts/bars/GridDemo.tsx deleted file mode 100644 index a6a250d30aa7d..0000000000000 --- a/docs/data/charts/bars/GridDemo.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; -import { dataset, valueFormatter } from '../dataset/weather'; - -const chartSetting = { - xAxis: [{ label: 'rainfall (mm)' }], - height: 400, - margin: { left: 0 }, -}; - -export default function GridDemo() { - return ( - - ); -} diff --git a/docs/data/charts/bars/GridDemo.tsx.preview b/docs/data/charts/bars/GridDemo.tsx.preview deleted file mode 100644 index 16f5e9ea3a1eb..0000000000000 --- a/docs/data/charts/bars/GridDemo.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/bars/HorizontalBars.js b/docs/data/charts/bars/HorizontalBars.js deleted file mode 100644 index fea24ab705ced..0000000000000 --- a/docs/data/charts/bars/HorizontalBars.js +++ /dev/null @@ -1,24 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; -import { dataset, valueFormatter } from '../dataset/weather'; - -const chartSetting = { - xAxis: [ - { - label: 'rainfall (mm)', - }, - ], - height: 400, - margin: { left: 0 }, -}; - -export default function HorizontalBars() { - return ( - - ); -} diff --git a/docs/data/charts/bars/HorizontalBars.tsx.preview b/docs/data/charts/bars/HorizontalBars.tsx.preview deleted file mode 100644 index a357038ab0b33..0000000000000 --- a/docs/data/charts/bars/HorizontalBars.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/bars/LabelsAboveBars.js b/docs/data/charts/bars/LabelsAboveBars.js deleted file mode 100644 index fec8812016c22..0000000000000 --- a/docs/data/charts/bars/LabelsAboveBars.js +++ /dev/null @@ -1,71 +0,0 @@ -import { useAnimate } from '@mui/x-charts/hooks'; -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { BarPlot } from '@mui/x-charts/BarChart'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { styled } from '@mui/material/styles'; -import { interpolateObject } from '@mui/x-charts-vendor/d3-interpolate'; - -export default function LabelsAboveBars() { - return ( - - - - - - ); -} - -const Text = styled('text')(({ theme }) => ({ - ...theme?.typography?.body2, - stroke: 'none', - fill: (theme.vars || theme)?.palette?.text?.primary, - transition: 'opacity 0.2s ease-in, fill 0.2s ease-in', - textAnchor: 'middle', - dominantBaseline: 'central', - pointerEvents: 'none', -})); - -function BarLabel(props) { - const { - seriesId, - dataIndex, - color, - isFaded, - isHighlighted, - classes, - xOrigin, - yOrigin, - x, - y, - width, - height, - layout, - skipAnimation, - ...otherProps - } = props; - - const animatedProps = useAnimate( - { x: x + width / 2, y: y - 8 }, - { - initialProps: { x: x + width / 2, y: yOrigin }, - createInterpolator: interpolateObject, - transformProps: (p) => p, - applyProps: (element, p) => { - element.setAttribute('x', p.x.toString()); - element.setAttribute('y', p.y.toString()); - }, - skip: skipAnimation, - }, - ); - - return ( - - ); -} diff --git a/docs/data/charts/bars/LabelsAboveBars.tsx.preview b/docs/data/charts/bars/LabelsAboveBars.tsx.preview deleted file mode 100644 index 1260850517ead..0000000000000 --- a/docs/data/charts/bars/LabelsAboveBars.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/charts/bars/MinBarSize.js b/docs/data/charts/bars/MinBarSize.js deleted file mode 100644 index 5d55c39f8e5b6..0000000000000 --- a/docs/data/charts/bars/MinBarSize.js +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import Slider from '@mui/material/Slider'; -import { BarChart } from '@mui/x-charts/BarChart'; - -// Create sparse data where some bars would be very small -const sparseData = [0.02, 5, null, 7, 0.01, 0, -0.03]; - -export default function MinBarSize() { - const [minBarSize, setMinBarSize] = React.useState(10); - - const handleChange = (event, newValue) => { - if (typeof newValue !== 'number') { - return; - } - setMinBarSize(newValue); - }; - - return ( - - - minBarSize: {minBarSize}px - - - `${v}`), scaleType: 'band' }]} - series={[{ data: sparseData, minBarSize }]} - height={300} - width={400} - /> - - ); -} diff --git a/docs/data/charts/bars/ShinyBarChartHorizontal.js b/docs/data/charts/bars/ShinyBarChartHorizontal.js deleted file mode 100644 index e36fad4d0bdb3..0000000000000 --- a/docs/data/charts/bars/ShinyBarChartHorizontal.js +++ /dev/null @@ -1,157 +0,0 @@ -import * as React from 'react'; -import { useTheme, styled } from '@mui/material/styles'; -import Typography from '@mui/material/Typography'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { useAnimate, useAnimateBar, useDrawingArea } from '@mui/x-charts/hooks'; -import { PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend'; -import { interpolateObject } from '@mui/x-charts-vendor/d3-interpolate'; -import Box from '@mui/material/Box'; -import votesTurnout from '../dataset/votes.json'; - -export default function ShinyBarChartHorizontal() { - return ( - - - European countries with lowest & highest voter turnout - - `${value}%`, - barLabel: (v) => `${v.value}%`, - }, - ]} - layout="horizontal" - xAxis={[ - { - id: 'color', - min: 0, - max: 100, - colorMap: { - type: 'piecewise', - thresholds: [50, 85], - colors: ['#d32f2f', '#78909c', '#1976d2'], - }, - valueFormatter: (value) => `${value}%`, - }, - ]} - yAxis={[ - { - scaleType: 'band', - dataKey: 'country', - width: 140, - }, - ]} - slots={{ - legend: PiecewiseColorLegend, - barLabel: BarLabelAtBase, - bar: BarShadedBackground, - }} - slotProps={{ - legend: { - axisDirection: 'x', - markType: 'square', - labelPosition: 'inline-start', - labelFormatter: ({ index }) => { - if (index === 0) { - return 'lowest turnout'; - } - if (index === 1) { - return 'average'; - } - return 'highest turnout'; - }, - }, - }} - /> - - ); -} - -export function BarShadedBackground(props) { - const { - ownerState, - skipAnimation, - id, - dataIndex, - xOrigin, - yOrigin, - seriesId, - ...other - } = props; - const theme = useTheme(); - - const animatedProps = useAnimateBar(props); - const { width } = useDrawingArea(); - return ( - - - - - ); -} - -const Text = styled('text')(({ theme }) => ({ - ...theme?.typography?.body2, - stroke: 'none', - fill: (theme.vars || theme).palette.common.white, - transition: 'opacity 0.2s ease-in, fill 0.2s ease-in', - textAnchor: 'start', - dominantBaseline: 'central', - pointerEvents: 'none', - fontWeight: 600, -})); - -function BarLabelAtBase(props) { - const { - seriesId, - dataIndex, - color, - isFaded, - isHighlighted, - classes, - xOrigin, - yOrigin, - x, - y, - width, - height, - layout, - skipAnimation, - ...otherProps - } = props; - - const animatedProps = useAnimate( - { x: xOrigin + 8, y: y + height / 2 }, - { - initialProps: { x: xOrigin, y: y + height / 2 }, - createInterpolator: interpolateObject, - transformProps: (p) => p, - applyProps: (element, p) => { - element.setAttribute('x', p.x.toString()); - element.setAttribute('y', p.y.toString()); - }, - skip: skipAnimation, - }, - ); - - return ; -} diff --git a/docs/data/charts/bars/StackBars.js b/docs/data/charts/bars/StackBars.js deleted file mode 100644 index 8bd6e801f281d..0000000000000 --- a/docs/data/charts/bars/StackBars.js +++ /dev/null @@ -1,32 +0,0 @@ -import Typography from '@mui/material/Typography'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { addLabels, balanceSheet, valueFormatter } from './netflixsBalanceSheet'; - -export default function StackBars() { - return ( -
- Netflix balance sheet - -
- ); -} - -const config = { - height: 350, - margin: { left: 0 }, - yAxis: [{ width: 50, valueFormatter }], - hideLegend: true, -}; diff --git a/docs/data/charts/bars/StackBars.tsx.preview b/docs/data/charts/bars/StackBars.tsx.preview deleted file mode 100644 index 817d37a64945b..0000000000000 --- a/docs/data/charts/bars/StackBars.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ -Netflix balance sheet - \ No newline at end of file diff --git a/docs/data/charts/bars/StackTotalLabels.js b/docs/data/charts/bars/StackTotalLabels.js deleted file mode 100644 index 061a8a45442b6..0000000000000 --- a/docs/data/charts/bars/StackTotalLabels.js +++ /dev/null @@ -1,79 +0,0 @@ -import * as React from 'react'; -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { BarPlot } from '@mui/x-charts/BarChart'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { - getValueToPositionMapper, - useBarSeries, - useXScale, - useYScale, -} from '@mui/x-charts/hooks'; -import { styled } from '@mui/material/styles'; - -export default function StackTotalLabels() { - return ( - - - - - - - ); -} - -function StackTotals() { - const xScale = useXScale(); - const yScale = useYScale(); - const barSeries = useBarSeries(); - - const xMapper = getValueToPositionMapper(xScale); - const yMapper = getValueToPositionMapper(yScale); - - return ( - - {xScale.domain().map((category, dataIndex) => { - const total = barSeries.reduce( - (acc, series) => - acc + (series.stack === 'total' ? (series.data[dataIndex] ?? 0) : 0), - 0, - ); - - return ( - - {total} - - ); - })} - - ); -} - -const TotalLabel = styled('text')(({ theme }) => ({ - ...theme?.typography?.body2, - fontWeight: 600, - stroke: 'none', - fill: (theme.vars || theme)?.palette?.text?.primary, - textAnchor: 'middle', - dominantBaseline: 'auto', - pointerEvents: 'none', -})); diff --git a/docs/data/charts/bars/TickPlacementBars.js b/docs/data/charts/bars/TickPlacementBars.js deleted file mode 100644 index 479e490bb2e65..0000000000000 --- a/docs/data/charts/bars/TickPlacementBars.js +++ /dev/null @@ -1,93 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; -import RadioGroup from '@mui/material/RadioGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Radio from '@mui/material/Radio'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { dataset, valueFormatter } from '../dataset/weather'; - -function TickParamsSelector({ - tickPlacement, - tickLabelPlacement, - setTickPlacement, - setTickLabelPlacement, -}) { - return ( - - - - tickPlacement - - setTickPlacement(event.target.value)} - > - } label="start" /> - } label="end" /> - } label="middle" /> - } - label="extremities" - /> - - - - - tickLabelPlacement - - setTickLabelPlacement(event.target.value)} - > - } label="tick" /> - } label="middle" /> - - - - ); -} - -const chartSetting = { - yAxis: [ - { - label: 'rainfall (mm)', - width: 60, - }, - ], - series: [{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }], - height: 300, - margin: { left: 0 }, -}; - -export default function TickPlacementBars() { - const [tickPlacement, setTickPlacement] = React.useState('middle'); - const [tickLabelPlacement, setTickLabelPlacement] = React.useState('middle'); - - return ( -
- - -
- ); -} diff --git a/docs/data/charts/bars/TickPlacementBars.tsx.preview b/docs/data/charts/bars/TickPlacementBars.tsx.preview deleted file mode 100644 index 046c0d6725a05..0000000000000 --- a/docs/data/charts/bars/TickPlacementBars.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/charts/bars/WebGLBars.js b/docs/data/charts/bars/WebGLBars.js deleted file mode 100644 index 21ec42a88e07a..0000000000000 --- a/docs/data/charts/bars/WebGLBars.js +++ /dev/null @@ -1,64 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; -import RadioGroup from '@mui/material/RadioGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Radio from '@mui/material/Radio'; -import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium'; - -const POINTS = 10000; - -function generateData(seed) { - const data = new Array(POINTS); - let value = 50; - for (let i = 0; i < POINTS; i += 1) { - // Deterministic pseudo-random walk. value-in-sin breaks linear predictability. - value += Math.sin(value * i * seed * 0.13) * 4; - data[i] = Math.max(0, Math.round(value)); - } - return data; -} - -const xData = Array.from({ length: POINTS }, (_, i) => i); -const seriesA = generateData(1); -const seriesB = generateData(7); - -export default function WebGLBars() { - const [renderer, setRenderer] = React.useState('webgl'); - - return ( - - - Rendering Strategy - setRenderer(event.target.value)} - > - } - label="Individual Bars (default)" - /> - } - label="Batch Bar Rendering" - /> - } label="WebGL" /> - - - - - ); -} diff --git a/docs/data/charts/bars/bars.md b/docs/data/charts/bars/bars.md index 23d1fe19e99ec..b92dfc6e4de3d 100644 --- a/docs/data/charts/bars/bars.md +++ b/docs/data/charts/bars/bars.md @@ -16,7 +16,7 @@ Categories can be progressive (for example, time periods) or independent (for ex The horizontal bar chart below compares voter turnout in several European countries. -{{"demo": "ShinyBarChartHorizontal.js"}} +{{"component": "file://./demos/shiny-bar-chart-horizontal/index.ts"}} ## Basics @@ -30,7 +30,7 @@ Bar chart series must contain a `data` property with an array of values. You can specify bar ticks with the `xAxis` prop. The category axis uses `scaleType='band'` and its `data` should have the same length as your series. -{{"demo": "BasicBars.js"}} +{{"component": "file://./demos/basic-bars/index.ts"}} ### Using a dataset @@ -40,7 +40,7 @@ It accepts an array of objects such as `dataset={[{x: 1, y: 32}, {x: 2, y: 41}, You can reuse this data when defining the series and axes by using the `dataKey` property. For example, `xAxis={[{ dataKey: 'x' }]}` or `series={[{ dataKey: 'y' }]}`. -{{"demo": "BarsDataset.js"}} +{{"component": "file://./demos/bars-dataset/index.ts"}} ## Bar size @@ -54,14 +54,14 @@ It's the size of the gap divided by the size of the bar. So a value of `1` will result in a gap between bars equal to the bar width. A value of `-1` will make bars overlap. -{{"demo": "BarGap.js", "hideToolbar": true, "bg": "playground"}} +{{"component": "file://./demos/bar-gap/index.ts", "hideToolbar": true, "bg": "playground"}} ## Stacking Bar series accept a string property called `stack`. Series with the same `stack` value are stacked on top of each other. -{{"demo": "StackBars.js"}} +{{"component": "file://./demos/stack-bars/index.ts"}} ### Stacking strategy @@ -78,7 +78,7 @@ See [Stacking](/x/react-charts/stacking/) for more details. Use the `layout="horizontal"` prop to render bar charts in a horizontal layout. If you're composing a custom component, set the `layout: 'horizontal'` property on each bar series object. -{{"demo": "HorizontalBars.js"}} +{{"component": "file://./demos/horizontal-bars/index.ts"}} ### Tick placement @@ -89,7 +89,7 @@ When using a `"band"` scale, the axis has some additional customization properti You can test all configuration options in the following demo: -{{"demo": "TickPlacementBars.js"}} +{{"component": "file://./demos/tick-placement-bars/index.ts"}} ### Date axis @@ -106,7 +106,7 @@ This property is useful when you want to ensure that bars are always visible, ev The `minBarSize` property is ignored if the series value is `null` or `0`. It also doesn't work with stacked series. -{{"demo": "MinBarSize.js"}} +{{"component": "file://./demos/min-bar-size/index.ts"}} ### Log scale @@ -122,7 +122,7 @@ You can add a grid in the background of the chart with the `grid` prop. See [Axis—Grid](/x/react-charts/axis-ticks/#grid) for details. -{{"demo": "GridDemo.js"}} +{{"component": "file://./demos/grid-demo/index.ts"}} ### Color scale @@ -137,7 +137,7 @@ Bar charts use the following, in order of priority: See [Styling—Value-based colors](/x/react-charts/styling/#value-based-colors) for the `colorMap` properties. -{{"demo": "ColorScale.js"}} +{{"component": "file://./demos/color-scale/index.ts"}} ### Border radius @@ -146,7 +146,7 @@ It works with any positive value and is properly applied to horizontal layouts, When composing a custom component, you can set the `borderRadius` prop on the `BarPlot` component. -{{"demo": "BorderRadius.js"}} +{{"component": "file://./demos/border-radius/index.ts"}} ### CSS @@ -155,7 +155,7 @@ You can customize the bar chart elements using CSS selectors. Each series renders a `g` element that contains a `data-series` attribute. You can use this attribute to target elements based on their series. -{{"demo": "BarGradient.js"}} +{{"component": "file://./demos/bar-gradient/index.ts"}} ### Gradients @@ -174,7 +174,7 @@ In the example below, there are two gradients: The first gradient is used for elements showing the whole gradient, such as tooltips and legend. The second one is shown in the bars themselves that display the part of the gradient that corresponds to their value. -{{"demo": "BarOECDHouseholdSavings.js"}} +{{"component": "file://./demos/bar-oecd-household-savings/index.ts"}} ## Labels @@ -187,7 +187,7 @@ Alternatively, the `barLabel` property accepts a function that is called with th In the example below, the value of the first series is displayed using the default formatter, and the value of the second series is formatted as US dollars. The labels of the third series are hidden. -{{"demo": "BarLabel.js"}} +{{"component": "file://./demos/bar-label/index.ts"}} ### Label placement @@ -198,7 +198,7 @@ To customize the position of the bar label, set a series' `barLabelPlacement` pr For a vertical positive bar, the label is above its top edge. For a horizontal negative bar, the label is to the left of its leftmost limit. -{{"demo": "BarLabelPlacement.js"}} +{{"component": "file://./demos/bar-label-placement/index.ts"}} :::info When using `outside` placement, if the label doesn't fit in the chart area, it will be clipped. @@ -212,12 +212,12 @@ Labels are not displayed if the function returns `null`. The example below displays the text `'High'` on values higher than 10 and hides values when the generated bar height is lower than 60px. -{{"demo": "CustomLabels.js"}} +{{"component": "file://./demos/custom-labels/index.ts"}} You can further customize the labels by providing a component to the `barLabel` slot. The example below positions the labels above the bars they refer to. -{{"demo": "LabelsAboveBars.js"}} +{{"component": "file://./demos/labels-above-bars/index.ts"}} ### Stack total labels @@ -226,7 +226,7 @@ To show it, render a custom component as a child of the chart container. The example below sums the series with the [`useBarSeries`](/x/react-charts/hooks/use-series/) hook and positions each total with the [`useXScale`](/x/react-charts/hooks/use-scale/) and [`useYScale`](/x/react-charts/hooks/use-scale/) scales. -{{"demo": "StackTotalLabels.js"}} +{{"component": "file://./demos/stack-total-labels/index.ts"}} ## Click events @@ -244,7 +244,7 @@ const clickHandler = ( ) => {}; ``` -{{"demo": "BarClick.js"}} +{{"component": "file://./demos/bar-click/index.ts"}} :::info There is a slight difference between the `event` of `onItemClick` and `onAxisClick`: @@ -280,7 +280,7 @@ When you set `skipAnimation` to `true`, the chart renders without animations. ``` -{{"demo": "BarAnimation.js"}} +{{"component": "file://./demos/bar-animation/index.ts"}} ## Performance @@ -301,7 +301,7 @@ This has some trade-offs: The example below uses the `renderer` prop to improve performance when rendering a dataset with 500 data points. -{{"demo": "BarBatchRenderer.js"}} +{{"component": "file://./demos/bar-batch-renderer/index.ts"}} ### WebGL renderer [](/x/introduction/licensing/#premium-plan 'Premium plan') @@ -314,7 +314,7 @@ The WebGL renderer has the same trade-offs as the batch renderer, plus a few add - The WebGL canvas only draws the bar shapes. Axes, grid, highlights, focus outlines, and bar labels continue to rely on SVG. - Requires a browser with WebGL 2 support. -{{"demo": "WebGLBars.js"}} +{{"component": "file://./demos/web-gl-bars/index.ts"}} ### Sampling [](/x/introduction/licensing/#pro-plan 'Pro plan') @@ -351,4 +351,4 @@ Here's how the bar chart is composed: ``` -{{"demo": "BarScatterCompostion.js"}} +{{"component": "file://./demos/bar-scatter-compostion/index.ts"}} diff --git a/docs/data/charts/bars/BarAnimation.tsx b/docs/data/charts/bars/demos/bar-animation/BarAnimation.tsx similarity index 97% rename from docs/data/charts/bars/BarAnimation.tsx rename to docs/data/charts/bars/demos/bar-animation/BarAnimation.tsx index 46018688437d1..ccdcfd1c5409f 100644 --- a/docs/data/charts/bars/BarAnimation.tsx +++ b/docs/data/charts/bars/demos/bar-animation/BarAnimation.tsx @@ -5,9 +5,10 @@ import Slider from '@mui/material/Slider'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; import { BarChart } from '@mui/x-charts/BarChart'; -import { HighlightScope } from '@mui/x-charts/context'; +import type { HighlightScope } from '@mui/x-charts/context'; export default function BarAnimation() { + // @focus-start @padding 1 const [seriesNb, setSeriesNb] = React.useState(2); const [itemNb, setItemNb] = React.useState(5); const [skipAnimation, setSkipAnimation] = React.useState(false); @@ -67,6 +68,7 @@ export default function BarAnimation() { /> ); + // @focus-end } const highlightScope: HighlightScope<'bar'> = { diff --git a/docs/data/charts/bars/demos/bar-animation/client.ts b/docs/data/charts/bars/demos/bar-animation/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/bar-animation/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/bar-animation/index.ts b/docs/data/charts/bars/demos/bar-animation/index.ts new file mode 100644 index 0000000000000..814b83ff986e5 --- /dev/null +++ b/docs/data/charts/bars/demos/bar-animation/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BarAnimation from './BarAnimation'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BarAnimation, { ClientProvider }); diff --git a/docs/data/charts/bars/BarBatchRenderer.tsx b/docs/data/charts/bars/demos/bar-batch-renderer/BarBatchRenderer.tsx similarity index 95% rename from docs/data/charts/bars/BarBatchRenderer.tsx rename to docs/data/charts/bars/demos/bar-batch-renderer/BarBatchRenderer.tsx index c280a2b95dd85..9f22bae46a39b 100644 --- a/docs/data/charts/bars/BarBatchRenderer.tsx +++ b/docs/data/charts/bars/demos/bar-batch-renderer/BarBatchRenderer.tsx @@ -6,7 +6,7 @@ import FormLabel from '@mui/material/FormLabel'; import RadioGroup from '@mui/material/RadioGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; import Radio from '@mui/material/Radio'; -import data from '../dataset/sp500-intraday.json'; +import data from '../../../dataset/sp500-intraday.json'; const tickLabelDateFormatter = new Intl.DateTimeFormat(undefined, { month: 'short', @@ -14,6 +14,7 @@ const tickLabelDateFormatter = new Intl.DateTimeFormat(undefined, { }); export default function BarBatchRenderer() { + // @focus-start @padding 1 const [renderer, setRenderer] = React.useState<'svg-single' | 'svg-batch'>( 'svg-batch', ); @@ -75,4 +76,5 @@ export default function BarBatchRenderer() { /> ); + // @focus-end } diff --git a/docs/data/charts/bars/demos/bar-batch-renderer/client.ts b/docs/data/charts/bars/demos/bar-batch-renderer/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/bar-batch-renderer/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/bar-batch-renderer/index.ts b/docs/data/charts/bars/demos/bar-batch-renderer/index.ts new file mode 100644 index 0000000000000..2ef30d78e8b74 --- /dev/null +++ b/docs/data/charts/bars/demos/bar-batch-renderer/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BarBatchRenderer from './BarBatchRenderer'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BarBatchRenderer, { ClientProvider }); diff --git a/docs/data/charts/bars/BarClick.tsx b/docs/data/charts/bars/demos/bar-click/BarClick.tsx similarity index 95% rename from docs/data/charts/bars/BarClick.tsx rename to docs/data/charts/bars/demos/bar-click/BarClick.tsx index 86de70f7607eb..4d49b71a04136 100644 --- a/docs/data/charts/bars/BarClick.tsx +++ b/docs/data/charts/bars/demos/bar-click/BarClick.tsx @@ -8,7 +8,7 @@ import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; import { BarChart } from '@mui/x-charts/BarChart'; import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { BarItemIdentifier, ChartsAxisData } from '@mui/x-charts/models'; +import type { BarItemIdentifier, ChartsAxisData } from '@mui/x-charts/models'; const barChartsParams = { series: [ @@ -45,6 +45,7 @@ const barChartsParams = { } as const; export default function BarClick() { + // @focus-start @padding 1 const [itemData, setItemData] = React.useState(); const [axisData, setAxisData] = React.useState(); @@ -95,4 +96,5 @@ ${axisData ? JSON.stringify(axisData, null, 2) : '// The data will appear here'} ); + // @focus-end } diff --git a/docs/data/charts/bars/demos/bar-click/client.ts b/docs/data/charts/bars/demos/bar-click/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/bar-click/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/bar-click/index.ts b/docs/data/charts/bars/demos/bar-click/index.ts new file mode 100644 index 0000000000000..955ca17874b1d --- /dev/null +++ b/docs/data/charts/bars/demos/bar-click/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BarClick from './BarClick'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BarClick, { ClientProvider }); diff --git a/docs/data/charts/bars/BarGap.tsx b/docs/data/charts/bars/demos/bar-gap/BarGap.tsx similarity index 93% rename from docs/data/charts/bars/BarGap.tsx rename to docs/data/charts/bars/demos/bar-gap/BarGap.tsx index 509c812d0bf1e..500f8765a6fc9 100644 --- a/docs/data/charts/bars/BarGap.tsx +++ b/docs/data/charts/bars/demos/bar-gap/BarGap.tsx @@ -1,7 +1,7 @@ import Typography from '@mui/material/Typography'; import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; import { BarChart } from '@mui/x-charts/BarChart'; -import { balanceSheet, addLabels } from './netflixsBalanceSheet'; +import { balanceSheet, addLabels } from '../../netflixsBalanceSheet'; const series = addLabels([ { dataKey: 'totAss' }, @@ -11,6 +11,7 @@ const series = addLabels([ export default function BarGap() { return ( + // @focus-start @padding 2 `; }} /> + // @focus-end ); } diff --git a/docs/data/charts/bars/demos/bar-gap/client.ts b/docs/data/charts/bars/demos/bar-gap/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/bar-gap/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/bar-gap/index.ts b/docs/data/charts/bars/demos/bar-gap/index.ts new file mode 100644 index 0000000000000..a5128426a9147 --- /dev/null +++ b/docs/data/charts/bars/demos/bar-gap/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BarGap from './BarGap'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BarGap, { ClientProvider }); diff --git a/docs/data/charts/bars/BarGradient.tsx b/docs/data/charts/bars/demos/bar-gradient/BarGradient.tsx similarity index 95% rename from docs/data/charts/bars/BarGradient.tsx rename to docs/data/charts/bars/demos/bar-gradient/BarGradient.tsx index 25a7194fec83d..6e44d49653dec 100644 --- a/docs/data/charts/bars/BarGradient.tsx +++ b/docs/data/charts/bars/demos/bar-gradient/BarGradient.tsx @@ -14,6 +14,7 @@ const settings = { export default function BarGradient() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/bars/demos/bar-gradient/client.ts b/docs/data/charts/bars/demos/bar-gradient/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/bar-gradient/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/bar-gradient/index.ts b/docs/data/charts/bars/demos/bar-gradient/index.ts new file mode 100644 index 0000000000000..3a753147ab553 --- /dev/null +++ b/docs/data/charts/bars/demos/bar-gradient/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BarGradient from './BarGradient'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BarGradient, { ClientProvider }); diff --git a/docs/data/charts/bars/BarLabelPlacement.tsx b/docs/data/charts/bars/demos/bar-label-placement/BarLabelPlacement.tsx similarity index 90% rename from docs/data/charts/bars/BarLabelPlacement.tsx rename to docs/data/charts/bars/demos/bar-label-placement/BarLabelPlacement.tsx index d7d3567ad53a2..80b87ae150757 100644 --- a/docs/data/charts/bars/BarLabelPlacement.tsx +++ b/docs/data/charts/bars/demos/bar-label-placement/BarLabelPlacement.tsx @@ -2,6 +2,7 @@ import { BarChart } from '@mui/x-charts/BarChart'; export default function BarLabelPlacement() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/bars/demos/bar-label-placement/client.ts b/docs/data/charts/bars/demos/bar-label-placement/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/bar-label-placement/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/bar-label-placement/index.ts b/docs/data/charts/bars/demos/bar-label-placement/index.ts new file mode 100644 index 0000000000000..f450b504d0f11 --- /dev/null +++ b/docs/data/charts/bars/demos/bar-label-placement/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BarLabelPlacement from './BarLabelPlacement'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BarLabelPlacement, { ClientProvider }); diff --git a/docs/data/charts/bars/BarLabel.tsx b/docs/data/charts/bars/demos/bar-label/BarLabel.tsx similarity index 92% rename from docs/data/charts/bars/BarLabel.tsx rename to docs/data/charts/bars/demos/bar-label/BarLabel.tsx index 8bb68e2bae5e9..3896dfeac2954 100644 --- a/docs/data/charts/bars/BarLabel.tsx +++ b/docs/data/charts/bars/demos/bar-label/BarLabel.tsx @@ -8,6 +8,7 @@ const dollarFormatter = new Intl.NumberFormat('en-US', { export default function BarLabel() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/bars/demos/bar-label/client.ts b/docs/data/charts/bars/demos/bar-label/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/bar-label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/bar-label/index.ts b/docs/data/charts/bars/demos/bar-label/index.ts new file mode 100644 index 0000000000000..84ee567980af2 --- /dev/null +++ b/docs/data/charts/bars/demos/bar-label/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BarLabel from './BarLabel'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BarLabel, { ClientProvider }); diff --git a/docs/data/charts/bars/BarOECDHouseholdSavings.tsx b/docs/data/charts/bars/demos/bar-oecd-household-savings/BarOECDHouseholdSavings.tsx similarity index 91% rename from docs/data/charts/bars/BarOECDHouseholdSavings.tsx rename to docs/data/charts/bars/demos/bar-oecd-household-savings/BarOECDHouseholdSavings.tsx index da10ccbe1f8d2..b928fbfef8d2a 100644 --- a/docs/data/charts/bars/BarOECDHouseholdSavings.tsx +++ b/docs/data/charts/bars/demos/bar-oecd-household-savings/BarOECDHouseholdSavings.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { BarChart, BarChartProps, barClasses } from '@mui/x-charts/BarChart'; +import type { BarChartProps } from '@mui/x-charts/BarChart'; +import { BarChart, barClasses } from '@mui/x-charts/BarChart'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import FormControl from '@mui/material/FormControl'; @@ -7,8 +8,8 @@ import FormLabel from '@mui/material/FormLabel'; import RadioGroup from '@mui/material/RadioGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; import Radio from '@mui/material/Radio'; -import { countryData } from '../dataset/countryData'; -import householdSavings from '../dataset/oecdHouseholdSavings2024.json'; +import { countryData } from '../../../dataset/countryData'; +import householdSavings from '../../../dataset/oecdHouseholdSavings2024.json'; /* Source: https://www.oecd.org/en/data/indicators/household-savings.html */ const savings = Object.entries(householdSavings) @@ -31,6 +32,7 @@ const settings = { } satisfies Partial; export default function BarOECDHouseholdSavings() { + // @focus-start @padding 1 const [gradientUnits, setGradientUnits] = React.useState< 'objectBoundingBox' | 'userSpaceOnUse' >('userSpaceOnUse'); @@ -104,6 +106,7 @@ export default function BarOECDHouseholdSavings() { Source: Our World in Data ); + // @focus-end } function Gradient(props: React.SVGProps) { diff --git a/docs/data/charts/bars/demos/bar-oecd-household-savings/client.ts b/docs/data/charts/bars/demos/bar-oecd-household-savings/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/bar-oecd-household-savings/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/bar-oecd-household-savings/index.ts b/docs/data/charts/bars/demos/bar-oecd-household-savings/index.ts new file mode 100644 index 0000000000000..7869ac863b508 --- /dev/null +++ b/docs/data/charts/bars/demos/bar-oecd-household-savings/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BarOECDHouseholdSavings from './BarOECDHouseholdSavings'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BarOECDHouseholdSavings, { ClientProvider }); diff --git a/docs/data/charts/bars/BarScatterCompostion.tsx b/docs/data/charts/bars/demos/bar-scatter-compostion/BarScatterCompostion.tsx similarity index 96% rename from docs/data/charts/bars/BarScatterCompostion.tsx rename to docs/data/charts/bars/demos/bar-scatter-compostion/BarScatterCompostion.tsx index d0aeb7b0e0259..7b119bfb80ad6 100644 --- a/docs/data/charts/bars/BarScatterCompostion.tsx +++ b/docs/data/charts/bars/demos/bar-scatter-compostion/BarScatterCompostion.tsx @@ -9,7 +9,7 @@ import { ChartsDataProvider } from '@mui/x-charts/ChartsDataProvider'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; import { legendClasses, ChartsLegend } from '@mui/x-charts/ChartsLegend'; -import { GDPdata } from '../dataset/gdpGrowth'; +import { GDPdata } from '../../../dataset/gdpGrowth'; const chartSetting = { xAxis: [ @@ -61,6 +61,7 @@ export default function BarScatterCompostion() { alignItems: 'center', }} > + {/* @focus-start */} GDP growth rate comparison (2024 vs 2010-19 Avg) @@ -107,6 +108,7 @@ export default function BarScatterCompostion() { + {/* @focus-end */} ); } diff --git a/docs/data/charts/bars/demos/bar-scatter-compostion/client.ts b/docs/data/charts/bars/demos/bar-scatter-compostion/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/bar-scatter-compostion/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/bar-scatter-compostion/index.ts b/docs/data/charts/bars/demos/bar-scatter-compostion/index.ts new file mode 100644 index 0000000000000..0a22612ebd517 --- /dev/null +++ b/docs/data/charts/bars/demos/bar-scatter-compostion/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BarScatterCompostion from './BarScatterCompostion'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BarScatterCompostion, { ClientProvider }); diff --git a/docs/data/charts/bars/BarsDataset.tsx b/docs/data/charts/bars/demos/bars-dataset/BarsDataset.tsx similarity index 83% rename from docs/data/charts/bars/BarsDataset.tsx rename to docs/data/charts/bars/demos/bars-dataset/BarsDataset.tsx index be5ee89fdd40b..c22c13cc3d44a 100644 --- a/docs/data/charts/bars/BarsDataset.tsx +++ b/docs/data/charts/bars/demos/bars-dataset/BarsDataset.tsx @@ -1,5 +1,5 @@ import { BarChart } from '@mui/x-charts/BarChart'; -import { dataset, valueFormatter } from '../dataset/weather'; +import { dataset, valueFormatter } from '../../../dataset/weather'; const chartSetting = { yAxis: [ @@ -13,6 +13,7 @@ const chartSetting = { export default function BarsDataset() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/bars/demos/bars-dataset/client.ts b/docs/data/charts/bars/demos/bars-dataset/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/bars-dataset/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/bars-dataset/index.ts b/docs/data/charts/bars/demos/bars-dataset/index.ts new file mode 100644 index 0000000000000..e566183731747 --- /dev/null +++ b/docs/data/charts/bars/demos/bars-dataset/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BarsDataset from './BarsDataset'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BarsDataset, { ClientProvider }); diff --git a/docs/data/charts/bars/BasicBars.tsx b/docs/data/charts/bars/demos/basic-bars/BasicBars.tsx similarity index 85% rename from docs/data/charts/bars/BasicBars.tsx rename to docs/data/charts/bars/demos/basic-bars/BasicBars.tsx index 84f7ec7b0acc4..50903aea5b3c3 100644 --- a/docs/data/charts/bars/BasicBars.tsx +++ b/docs/data/charts/bars/demos/basic-bars/BasicBars.tsx @@ -2,10 +2,12 @@ import { BarChart } from '@mui/x-charts/BarChart'; export default function BasicBars() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/bars/demos/basic-bars/client.ts b/docs/data/charts/bars/demos/basic-bars/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/basic-bars/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/basic-bars/index.ts b/docs/data/charts/bars/demos/basic-bars/index.ts new file mode 100644 index 0000000000000..dd62e96aaea97 --- /dev/null +++ b/docs/data/charts/bars/demos/basic-bars/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicBars from './BasicBars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicBars, { ClientProvider }); diff --git a/docs/data/charts/bars/BorderRadius.tsx b/docs/data/charts/bars/demos/border-radius/BorderRadius.tsx similarity index 95% rename from docs/data/charts/bars/BorderRadius.tsx rename to docs/data/charts/bars/demos/border-radius/BorderRadius.tsx index e37b31453df96..cb8250ff8dfec 100644 --- a/docs/data/charts/bars/BorderRadius.tsx +++ b/docs/data/charts/bars/demos/border-radius/BorderRadius.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { BarChart, BarChartProps } from '@mui/x-charts/BarChart'; +import type { BarChartProps } from '@mui/x-charts/BarChart'; +import { BarChart } from '@mui/x-charts/BarChart'; import Stack from '@mui/material/Stack'; import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; import TextField from '@mui/material/TextField'; @@ -10,6 +11,7 @@ import Checkbox from '@mui/material/Checkbox'; import FormControlLabel from '@mui/material/FormControlLabel'; export default function BorderRadius() { + // @focus-start @padding 1 const [layout, setLayout] = React.useState<'horizontal' | 'vertical'>('vertical'); const [radius, setRadius] = React.useState(10); const [reverse, setReverse] = React.useState(false); @@ -72,6 +74,7 @@ export default function BorderRadius() { /> ); + // @focus-end } const dataset = [ diff --git a/docs/data/charts/bars/demos/border-radius/client.ts b/docs/data/charts/bars/demos/border-radius/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/border-radius/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/border-radius/index.ts b/docs/data/charts/bars/demos/border-radius/index.ts new file mode 100644 index 0000000000000..238f5322bfccd --- /dev/null +++ b/docs/data/charts/bars/demos/border-radius/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BorderRadius from './BorderRadius'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BorderRadius, { ClientProvider }); diff --git a/docs/data/charts/bars/demos/color-scale/ColorScale.tsx b/docs/data/charts/bars/demos/color-scale/ColorScale.tsx new file mode 100644 index 0000000000000..6773c8cac0377 --- /dev/null +++ b/docs/data/charts/bars/demos/color-scale/ColorScale.tsx @@ -0,0 +1,186 @@ +import * as React from 'react'; +import { BarChart } from '@mui/x-charts/BarChart'; +import Stack from '@mui/material/Stack'; +import TextField from '@mui/material/TextField'; +import MenuItem from '@mui/material/MenuItem'; +import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; + +const series = [{ data: [-2, -9, 12, 11, 6, -4] }]; + +export default function ColorScale() { + // @focus-start @padding 1 + const [colorX, setColorX] = React.useState< + 'None' | 'piecewise' | 'continuous' | 'ordinal' + >('piecewise'); + const [colorY, setColorY] = React.useState<'None' | 'piecewise' | 'continuous'>( + 'None', + ); + + return ( + + + + setColorX( + event.target.value as 'None' | 'piecewise' | 'continuous' | 'ordinal', + ) + } + > + None + piecewise + continuous + ordinal + + + setColorY(event.target.value as 'None' | 'piecewise' | 'continuous') + } + > + None + piecewise + continuous + + + + value.getFullYear().toString(), + colorMap: + (colorX === 'ordinal' && { + type: 'ordinal', + colors: [ + '#ccebc5', + '#a8ddb5', + '#7bccc4', + '#4eb3d3', + '#2b8cbe', + '#08589e', + ], + }) || + (colorX === 'continuous' && { + type: 'continuous', + min: new Date(2019, 1, 1), + max: new Date(2024, 1, 1), + color: ['green', 'orange'], + }) || + (colorX === 'piecewise' && { + type: 'piecewise', + thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)], + colors: ['blue', 'red', 'blue'], + }) || + undefined, + }, + ]} + margin={{ left: 0 }} + /> + `, + ].join('\n')} + language="jsx" + copyButtonHidden + /> + + ); + // @focus-end +} diff --git a/docs/data/charts/bars/demos/color-scale/client.ts b/docs/data/charts/bars/demos/color-scale/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/color-scale/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/color-scale/index.ts b/docs/data/charts/bars/demos/color-scale/index.ts new file mode 100644 index 0000000000000..141c61df022b8 --- /dev/null +++ b/docs/data/charts/bars/demos/color-scale/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorScale from './ColorScale'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorScale, { ClientProvider }); diff --git a/docs/data/charts/bars/CustomLabels.tsx b/docs/data/charts/bars/demos/custom-labels/CustomLabels.tsx similarity index 80% rename from docs/data/charts/bars/CustomLabels.tsx rename to docs/data/charts/bars/demos/custom-labels/CustomLabels.tsx index 66025bf3f56cc..723db979afc0c 100644 --- a/docs/data/charts/bars/CustomLabels.tsx +++ b/docs/data/charts/bars/demos/custom-labels/CustomLabels.tsx @@ -1,4 +1,5 @@ -import { BarChart, BarItem, BarLabelContext } from '@mui/x-charts/BarChart'; +import type { BarItem, BarLabelContext } from '@mui/x-charts/BarChart'; +import { BarChart } from '@mui/x-charts/BarChart'; function barLabel(item: BarItem, context: BarLabelContext) { if ((item.value ?? 0) > 10) { @@ -9,6 +10,7 @@ function barLabel(item: BarItem, context: BarLabelContext) { export default function CustomLabels() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/bars/demos/custom-labels/client.ts b/docs/data/charts/bars/demos/custom-labels/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/custom-labels/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/custom-labels/index.ts b/docs/data/charts/bars/demos/custom-labels/index.ts new file mode 100644 index 0000000000000..4457184769e25 --- /dev/null +++ b/docs/data/charts/bars/demos/custom-labels/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomLabels from './CustomLabels'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomLabels, { ClientProvider }); diff --git a/docs/data/charts/bars/demos/grid-demo/GridDemo.tsx b/docs/data/charts/bars/demos/grid-demo/GridDemo.tsx new file mode 100644 index 0000000000000..dfa111171d64c --- /dev/null +++ b/docs/data/charts/bars/demos/grid-demo/GridDemo.tsx @@ -0,0 +1,23 @@ +import { BarChart } from '@mui/x-charts/BarChart'; +import { dataset, valueFormatter } from '../../../dataset/weather'; + +const chartSetting = { + xAxis: [{ label: 'rainfall (mm)' }], + height: 400, + margin: { left: 0 }, +}; + +export default function GridDemo() { + return ( + // @focus-start @padding 2 + + // @focus-end + ); +} diff --git a/docs/data/charts/bars/demos/grid-demo/client.ts b/docs/data/charts/bars/demos/grid-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/grid-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/grid-demo/index.ts b/docs/data/charts/bars/demos/grid-demo/index.ts new file mode 100644 index 0000000000000..7686107ff7e74 --- /dev/null +++ b/docs/data/charts/bars/demos/grid-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GridDemo from './GridDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GridDemo, { ClientProvider }); diff --git a/docs/data/charts/bars/HorizontalBars.tsx b/docs/data/charts/bars/demos/horizontal-bars/HorizontalBars.tsx similarity index 79% rename from docs/data/charts/bars/HorizontalBars.tsx rename to docs/data/charts/bars/demos/horizontal-bars/HorizontalBars.tsx index fea24ab705ced..42a34785ec7e3 100644 --- a/docs/data/charts/bars/HorizontalBars.tsx +++ b/docs/data/charts/bars/demos/horizontal-bars/HorizontalBars.tsx @@ -1,5 +1,5 @@ import { BarChart } from '@mui/x-charts/BarChart'; -import { dataset, valueFormatter } from '../dataset/weather'; +import { dataset, valueFormatter } from '../../../dataset/weather'; const chartSetting = { xAxis: [ @@ -13,6 +13,7 @@ const chartSetting = { export default function HorizontalBars() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/bars/demos/horizontal-bars/client.ts b/docs/data/charts/bars/demos/horizontal-bars/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/horizontal-bars/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/horizontal-bars/index.ts b/docs/data/charts/bars/demos/horizontal-bars/index.ts new file mode 100644 index 0000000000000..b00a984d678f0 --- /dev/null +++ b/docs/data/charts/bars/demos/horizontal-bars/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HorizontalBars from './HorizontalBars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HorizontalBars, { ClientProvider }); diff --git a/docs/data/charts/bars/LabelsAboveBars.tsx b/docs/data/charts/bars/demos/labels-above-bars/LabelsAboveBars.tsx similarity index 92% rename from docs/data/charts/bars/LabelsAboveBars.tsx rename to docs/data/charts/bars/demos/labels-above-bars/LabelsAboveBars.tsx index 62a504da9f4fe..19d7b304a1473 100644 --- a/docs/data/charts/bars/LabelsAboveBars.tsx +++ b/docs/data/charts/bars/demos/labels-above-bars/LabelsAboveBars.tsx @@ -1,6 +1,7 @@ import { useAnimate } from '@mui/x-charts/hooks'; import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { BarLabelProps, BarPlot } from '@mui/x-charts/BarChart'; +import type { BarLabelProps } from '@mui/x-charts/BarChart'; +import { BarPlot } from '@mui/x-charts/BarChart'; import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; import { styled } from '@mui/material/styles'; @@ -8,6 +9,7 @@ import { interpolateObject } from '@mui/x-charts-vendor/d3-interpolate'; export default function LabelsAboveBars() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/bars/demos/labels-above-bars/client.ts b/docs/data/charts/bars/demos/labels-above-bars/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/labels-above-bars/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/labels-above-bars/index.ts b/docs/data/charts/bars/demos/labels-above-bars/index.ts new file mode 100644 index 0000000000000..6245d4015b3d2 --- /dev/null +++ b/docs/data/charts/bars/demos/labels-above-bars/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LabelsAboveBars from './LabelsAboveBars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LabelsAboveBars, { ClientProvider }); diff --git a/docs/data/charts/bars/MinBarSize.tsx b/docs/data/charts/bars/demos/min-bar-size/MinBarSize.tsx similarity index 96% rename from docs/data/charts/bars/MinBarSize.tsx rename to docs/data/charts/bars/demos/min-bar-size/MinBarSize.tsx index ea184d44bcce9..b91142da85862 100644 --- a/docs/data/charts/bars/MinBarSize.tsx +++ b/docs/data/charts/bars/demos/min-bar-size/MinBarSize.tsx @@ -8,6 +8,7 @@ import { BarChart } from '@mui/x-charts/BarChart'; const sparseData: (number | null)[] = [0.02, 5, null, 7, 0.01, 0, -0.03]; export default function MinBarSize(): React.JSX.Element { + // @focus-start @padding 1 const [minBarSize, setMinBarSize] = React.useState(10); const handleChange = (event: Event, newValue: number | number[]) => { @@ -38,4 +39,5 @@ export default function MinBarSize(): React.JSX.Element { /> ); + // @focus-end } diff --git a/docs/data/charts/bars/demos/min-bar-size/client.ts b/docs/data/charts/bars/demos/min-bar-size/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/min-bar-size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/min-bar-size/index.ts b/docs/data/charts/bars/demos/min-bar-size/index.ts new file mode 100644 index 0000000000000..44e7c71fd18aa --- /dev/null +++ b/docs/data/charts/bars/demos/min-bar-size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MinBarSize from './MinBarSize'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MinBarSize, { ClientProvider }); diff --git a/docs/data/charts/bars/ShinyBarChartHorizontal.tsx b/docs/data/charts/bars/demos/shiny-bar-chart-horizontal/ShinyBarChartHorizontal.tsx similarity index 94% rename from docs/data/charts/bars/ShinyBarChartHorizontal.tsx rename to docs/data/charts/bars/demos/shiny-bar-chart-horizontal/ShinyBarChartHorizontal.tsx index 7de24d97b44f4..50431e7aab90a 100644 --- a/docs/data/charts/bars/ShinyBarChartHorizontal.tsx +++ b/docs/data/charts/bars/demos/shiny-bar-chart-horizontal/ShinyBarChartHorizontal.tsx @@ -1,16 +1,18 @@ import * as React from 'react'; import { useTheme, styled } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; -import { BarChart, type BarLabelProps, type BarProps } from '@mui/x-charts/BarChart'; +import { BarChart } from '@mui/x-charts/BarChart'; +import type { BarLabelProps, BarProps } from '@mui/x-charts/BarChart'; import { useAnimate, useAnimateBar, useDrawingArea } from '@mui/x-charts/hooks'; import { PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend'; import { interpolateObject } from '@mui/x-charts-vendor/d3-interpolate'; import Box from '@mui/material/Box'; -import votesTurnout from '../dataset/votes.json'; +import votesTurnout from '../../../dataset/votes.json'; export default function ShinyBarChartHorizontal() { return ( + {/* @focus-start */} European countries with lowest & highest voter turnout @@ -69,6 +71,7 @@ export default function ShinyBarChartHorizontal() { }, }} /> + {/* @focus-end */} ); } diff --git a/docs/data/charts/bars/demos/shiny-bar-chart-horizontal/client.ts b/docs/data/charts/bars/demos/shiny-bar-chart-horizontal/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/shiny-bar-chart-horizontal/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/shiny-bar-chart-horizontal/index.ts b/docs/data/charts/bars/demos/shiny-bar-chart-horizontal/index.ts new file mode 100644 index 0000000000000..2b7bd805215e0 --- /dev/null +++ b/docs/data/charts/bars/demos/shiny-bar-chart-horizontal/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ShinyBarChartHorizontal from './ShinyBarChartHorizontal'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ShinyBarChartHorizontal, { ClientProvider }); diff --git a/docs/data/charts/bars/StackBars.tsx b/docs/data/charts/bars/demos/stack-bars/StackBars.tsx similarity index 77% rename from docs/data/charts/bars/StackBars.tsx rename to docs/data/charts/bars/demos/stack-bars/StackBars.tsx index 9e66559074d79..30fe7cba1e4f4 100644 --- a/docs/data/charts/bars/StackBars.tsx +++ b/docs/data/charts/bars/demos/stack-bars/StackBars.tsx @@ -1,10 +1,12 @@ import Typography from '@mui/material/Typography'; -import { BarChart, BarChartProps } from '@mui/x-charts/BarChart'; -import { addLabels, balanceSheet, valueFormatter } from './netflixsBalanceSheet'; +import type { BarChartProps } from '@mui/x-charts/BarChart'; +import { BarChart } from '@mui/x-charts/BarChart'; +import { addLabels, balanceSheet, valueFormatter } from '../../netflixsBalanceSheet'; export default function StackBars() { return (
+ {/* @focus-start */} Netflix balance sheet + {/* @focus-end */}
); } diff --git a/docs/data/charts/bars/demos/stack-bars/client.ts b/docs/data/charts/bars/demos/stack-bars/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/stack-bars/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/stack-bars/index.ts b/docs/data/charts/bars/demos/stack-bars/index.ts new file mode 100644 index 0000000000000..7eaadca6918d0 --- /dev/null +++ b/docs/data/charts/bars/demos/stack-bars/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StackBars from './StackBars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StackBars, { ClientProvider }); diff --git a/docs/data/charts/bars/StackTotalLabels.tsx b/docs/data/charts/bars/demos/stack-total-labels/StackTotalLabels.tsx similarity index 97% rename from docs/data/charts/bars/StackTotalLabels.tsx rename to docs/data/charts/bars/demos/stack-total-labels/StackTotalLabels.tsx index 061a8a45442b6..7d15815414e0c 100644 --- a/docs/data/charts/bars/StackTotalLabels.tsx +++ b/docs/data/charts/bars/demos/stack-total-labels/StackTotalLabels.tsx @@ -13,6 +13,7 @@ import { styled } from '@mui/material/styles'; export default function StackTotalLabels() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/bars/demos/stack-total-labels/client.ts b/docs/data/charts/bars/demos/stack-total-labels/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/stack-total-labels/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/stack-total-labels/index.ts b/docs/data/charts/bars/demos/stack-total-labels/index.ts new file mode 100644 index 0000000000000..c0b475f5d1843 --- /dev/null +++ b/docs/data/charts/bars/demos/stack-total-labels/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StackTotalLabels from './StackTotalLabels'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StackTotalLabels, { ClientProvider }); diff --git a/docs/data/charts/bars/TickPlacementBars.tsx b/docs/data/charts/bars/demos/tick-placement-bars/TickPlacementBars.tsx similarity index 96% rename from docs/data/charts/bars/TickPlacementBars.tsx rename to docs/data/charts/bars/demos/tick-placement-bars/TickPlacementBars.tsx index 2936af6ecb439..07f909393a5b7 100644 --- a/docs/data/charts/bars/TickPlacementBars.tsx +++ b/docs/data/charts/bars/demos/tick-placement-bars/TickPlacementBars.tsx @@ -6,7 +6,7 @@ import RadioGroup from '@mui/material/RadioGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; import Radio from '@mui/material/Radio'; import { BarChart } from '@mui/x-charts/BarChart'; -import { dataset, valueFormatter } from '../dataset/weather'; +import { dataset, valueFormatter } from '../../../dataset/weather'; type TickParamsSelectorProps = { tickPlacement: 'end' | 'start' | 'middle' | 'extremities'; @@ -87,6 +87,7 @@ const chartSetting = { }; export default function TickPlacementBars() { + // @focus-start @padding 1 const [tickPlacement, setTickPlacement] = React.useState< 'start' | 'end' | 'middle' | 'extremities' >('middle'); @@ -109,4 +110,5 @@ export default function TickPlacementBars() { /> ); + // @focus-end } diff --git a/docs/data/charts/bars/demos/tick-placement-bars/client.ts b/docs/data/charts/bars/demos/tick-placement-bars/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/tick-placement-bars/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/tick-placement-bars/index.ts b/docs/data/charts/bars/demos/tick-placement-bars/index.ts new file mode 100644 index 0000000000000..6ebab4716ac98 --- /dev/null +++ b/docs/data/charts/bars/demos/tick-placement-bars/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TickPlacementBars from './TickPlacementBars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TickPlacementBars, { ClientProvider }); diff --git a/docs/data/charts/bars/WebGLBars.tsx b/docs/data/charts/bars/demos/web-gl-bars/WebGLBars.tsx similarity index 97% rename from docs/data/charts/bars/WebGLBars.tsx rename to docs/data/charts/bars/demos/web-gl-bars/WebGLBars.tsx index dafbfa9594aa5..7a7edbcfc3b63 100644 --- a/docs/data/charts/bars/WebGLBars.tsx +++ b/docs/data/charts/bars/demos/web-gl-bars/WebGLBars.tsx @@ -27,6 +27,7 @@ const seriesA = generateData(1); const seriesB = generateData(7); export default function WebGLBars() { + // @focus-start @padding 1 const [renderer, setRenderer] = React.useState('webgl'); return ( @@ -63,4 +64,5 @@ export default function WebGLBars() { /> ); + // @focus-end } diff --git a/docs/data/charts/bars/demos/web-gl-bars/client.ts b/docs/data/charts/bars/demos/web-gl-bars/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bars/demos/web-gl-bars/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bars/demos/web-gl-bars/index.ts b/docs/data/charts/bars/demos/web-gl-bars/index.ts new file mode 100644 index 0000000000000..14f9cf8eb288e --- /dev/null +++ b/docs/data/charts/bars/demos/web-gl-bars/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import WebGLBars from './WebGLBars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, WebGLBars, { ClientProvider }); diff --git a/docs/data/charts/brush/BrushBasic.js b/docs/data/charts/brush/BrushBasic.js deleted file mode 100644 index eb4779133ac62..0000000000000 --- a/docs/data/charts/brush/BrushBasic.js +++ /dev/null @@ -1,42 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; -import { ChartsBrushOverlay } from '@mui/x-charts/ChartsBrushOverlay'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; - -export default function BrushBasic() { - return ( - - - Click and drag on the chart to see the brush selection overlay. - - - - - - ); -} - -const xAxisData = [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', -]; diff --git a/docs/data/charts/brush/BrushBasic.tsx.preview b/docs/data/charts/brush/BrushBasic.tsx.preview deleted file mode 100644 index 641137696eaa6..0000000000000 --- a/docs/data/charts/brush/BrushBasic.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - Click and drag on the chart to see the brush selection overlay. - - - - \ No newline at end of file diff --git a/docs/data/charts/brush/BrushCustomOverlay.js b/docs/data/charts/brush/BrushCustomOverlay.js deleted file mode 100644 index 1478bbe1ff397..0000000000000 --- a/docs/data/charts/brush/BrushCustomOverlay.js +++ /dev/null @@ -1,200 +0,0 @@ -import { LineChart } from '@mui/x-charts/LineChart'; -import { - useBrush, - useDrawingArea, - useLineSeries, - useXScale, -} from '@mui/x-charts/hooks'; -import { useTheme } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; - -function CustomBrushOverlay() { - const theme = useTheme(); - const drawingArea = useDrawingArea(); - const brush = useBrush(); - const xScale = useXScale(); - const series = useLineSeries('marketValue'); - - if (!brush || !series) { - return null; - } - - const { left, top, width, height } = drawingArea; - - // Clamp coordinates to drawing area - const clampX = (x) => Math.max(left, Math.min(left + width, x)); - const clampedStartX = clampX(brush.start.x); - const clampedCurrentX = clampX(brush.current.x); - - const minX = Math.min(clampedStartX, clampedCurrentX); - const maxX = Math.max(clampedStartX, clampedCurrentX); - const rectWidth = maxX - minX; - - const color = theme.palette.primary.main; - - if (rectWidth < 1) { - return null; - } - - const getIndex = (x) => - Math.floor( - (x - Math.min(...xScale.range()) + xScale.step() / 2) / xScale.step(), - ); - // Calculate the approximate data indices based on x position - const startIndex = getIndex(clampedStartX); - const currentIndex = getIndex(clampedCurrentX); - - const startValue = series.data[startIndex]; - const currentValue = series.data[currentIndex]; - const difference = currentValue - startValue; - const percentChange = ((difference / startValue) * 100).toFixed(2); - - // Get the date labels - const startDate = xScale.domain()[startIndex] || ''; - const currentDate = xScale.domain()[currentIndex] || ''; - - return ( - - {/* Start line */} - - {/* Current line */} - - {/* Selection rectangle */} - - {/* Start label */} - - - {/* Date label */} - - {startDate} - - {/* Value label */} - - {startValue.toFixed(2)} - - - - {/* End label */} - - - {/* Date label */} - - {currentDate} - - {/* Value label */} - - {currentValue.toFixed(2)} - - - - {/* Difference label in the middle */} - - = 0 ? theme.palette.success.main : theme.palette.error.main - } - rx={4} - /> - - {difference >= 0 ? '+' : ''} - {difference.toFixed(2)} ({percentChange}%) - - - - ); -} - -const marketData = [ - 100, 96.56, 97.04, 98.95, 102.66, 106.18, 107.76, 109.78, 113.57, 111.54, 107.69, - 104.58, 106.62, 103.81, 104.46, 105.14, 108.94, 112.81, 112.62, 117.52, 122.17, - 122.11, 121.44, 122.5, 125.42, 127.46, 129.21, 124.71, 125.0, 125.28, 125.15, - 125.06, 120.48, 115.83, 116.47, 119.58, 118.99, 123.46, 126.83, 130.84, 131.12, - 131.31, 129.14, 133.35, 130.15, 129.02, 132.57, 136.1, 139.33, 139.66, -]; - -const dates = Array.from({ length: 50 }, (_, i) => { - const date = new Date(2024, 0, i + 1); - return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); -}); - -export default function BrushCustomOverlay() { - return ( - - - Custom brush overlay showing the values at start and end positions, and the - difference between them. - - - - - - ); -} diff --git a/docs/data/charts/brush/BrushScatterList.js b/docs/data/charts/brush/BrushScatterList.js deleted file mode 100644 index 28606b0daad15..0000000000000 --- a/docs/data/charts/brush/BrushScatterList.js +++ /dev/null @@ -1,155 +0,0 @@ -import * as React from 'react'; -import { ChartsDataProvider } from '@mui/x-charts/ChartsDataProvider'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { ScatterPlot } from '@mui/x-charts/ScatterChart'; -import { ChartsAxis } from '@mui/x-charts/ChartsAxis'; -import { - useBrush, - useScatterSeries, - useXScale, - useYScale, -} from '@mui/x-charts/hooks'; -import { ChartsBrushOverlay } from '@mui/x-charts/ChartsBrushOverlay'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import Chip from '@mui/material/Chip'; -import Stack from '@mui/material/Stack'; - -const scatterData = [ - { x: 5, y: 12, id: 1 }, - { x: 12, y: 18, id: 2 }, - { x: 18, y: 9, id: 3 }, - { x: 25, y: 22, id: 4 }, - { x: 32, y: 15, id: 5 }, - { x: 40, y: 28, id: 6 }, - { x: 48, y: 20, id: 7 }, - { x: 55, y: 35, id: 8 }, - { x: 62, y: 25, id: 9 }, - { x: 70, y: 40, id: 10 }, - { x: 78, y: 32, id: 11 }, - { x: 85, y: 45, id: 12 }, - { x: 15, y: 30, id: 13 }, - { x: 35, y: 38, id: 14 }, - { x: 50, y: 42, id: 15 }, - { x: 65, y: 36, id: 16 }, - { x: 22, y: 25, id: 17 }, - { x: 44, y: 33, id: 18 }, - { x: 58, y: 29, id: 19 }, - { x: 72, y: 37, id: 20 }, -]; - -const empty = []; - -function ChartContent() { - return ( - - - - - - ); -} - -function SelectedPointsList() { - const brush = useBrush(); - const series = useScatterSeries('data'); - const xScale = useXScale(); - const yScale = useYScale(); - - const selectedData = React.useMemo(() => { - if (!brush || !series || !xScale || !yScale) { - return empty; - } - - const { start, current } = brush; - - // Get the min/max x and y positions - const minX = Math.min(start.x, current.x); - const maxX = Math.max(start.x, current.x); - const minY = Math.min(start.y, current.y); - const maxY = Math.max(start.y, current.y); - - // Convert pixel coordinates back to data values - const minDataX = xScale.invert(minX); - const maxDataX = xScale.invert(maxX); - const minDataY = yScale.invert(maxY); - const maxDataY = yScale.invert(minY); - - // Filter data points within the brush selection - const d = series.data - .map((point, index) => ({ - x: point.x, - y: point.y, - id: point.id ?? index + 1, - })) - .filter((point) => { - return ( - point.x >= minDataX && - point.x <= maxDataX && - point.y >= minDataY && - point.y <= maxDataY - ); - }); - - return d; - }, [brush, series, xScale, yScale]); - - if (selectedData.length === 0) { - return ( - - - No points selected. Drag on the chart to select data points. - - - ); - } - - return ( - - - Selected Points ({selectedData.length}): - - - {selectedData.map((point) => ( - - ))} - - - ); -} - -export default function BrushScatterList() { - return ( - - - Drag to select points on the scatter chart. Selected points will be displayed - below. - - - - - - - - - ); -} diff --git a/docs/data/charts/brush/brush.md b/docs/data/charts/brush/brush.md index e2a5d062391dc..bf09476a58c79 100644 --- a/docs/data/charts/brush/brush.md +++ b/docs/data/charts/brush/brush.md @@ -35,7 +35,7 @@ To display the selected area, you can add the `ChartsBrushOverlay` component as To create a custom interaction, you can use the `useBrush()` hook as shown in the [Custom overlay](#custom-overlay) section below. -{{"demo": "BrushBasic.js"}} +{{"component": "file://./demos/brush-basic/index.ts"}} ## Customization examples @@ -44,14 +44,14 @@ To create a custom interaction, you can use the `useBrush()` hook as shown in th You can create a custom brush overlay by building your own component that uses the `useBrush()` hook. The example below displays the values at the start and end positions, along with the difference and percentage change between them. -{{"demo": "BrushCustomOverlay.js"}} +{{"component": "file://./demos/brush-custom-overlay/index.ts"}} ### Data selection You can use the brush to select and display data points within the selection area. The example below shows a scatter chart where you can select points by dragging, and the selected points are displayed below the chart. -{{"demo": "BrushScatterList.js"}} +{{"component": "file://./demos/brush-scatter-list/index.ts"}} ### Using the `useBrush()` hook diff --git a/docs/data/charts/brush/BrushBasic.tsx b/docs/data/charts/brush/demos/brush-basic/BrushBasic.tsx similarity index 94% rename from docs/data/charts/brush/BrushBasic.tsx rename to docs/data/charts/brush/demos/brush-basic/BrushBasic.tsx index eb4779133ac62..26434770e769b 100644 --- a/docs/data/charts/brush/BrushBasic.tsx +++ b/docs/data/charts/brush/demos/brush-basic/BrushBasic.tsx @@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography'; export default function BrushBasic() { return ( + {/* @focus-start */} Click and drag on the chart to see the brush selection overlay. @@ -22,6 +23,7 @@ export default function BrushBasic() { > + {/* @focus-end */} ); } diff --git a/docs/data/charts/brush/demos/brush-basic/client.ts b/docs/data/charts/brush/demos/brush-basic/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/brush/demos/brush-basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/brush/demos/brush-basic/index.ts b/docs/data/charts/brush/demos/brush-basic/index.ts new file mode 100644 index 0000000000000..963e85058dec5 --- /dev/null +++ b/docs/data/charts/brush/demos/brush-basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BrushBasic from './BrushBasic'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BrushBasic, { ClientProvider }); diff --git a/docs/data/charts/brush/BrushCustomOverlay.tsx b/docs/data/charts/brush/demos/brush-custom-overlay/BrushCustomOverlay.tsx similarity index 99% rename from docs/data/charts/brush/BrushCustomOverlay.tsx rename to docs/data/charts/brush/demos/brush-custom-overlay/BrushCustomOverlay.tsx index a63e0e33ee1a5..5dc2d79fca9a5 100644 --- a/docs/data/charts/brush/BrushCustomOverlay.tsx +++ b/docs/data/charts/brush/demos/brush-custom-overlay/BrushCustomOverlay.tsx @@ -174,6 +174,7 @@ const dates = Array.from({ length: 50 }, (_, i) => { export default function BrushCustomOverlay() { return ( + {/* @focus-start */} Custom brush overlay showing the values at start and end positions, and the difference between them. @@ -197,6 +198,7 @@ export default function BrushCustomOverlay() { > + {/* @focus-end */} ); } diff --git a/docs/data/charts/brush/demos/brush-custom-overlay/client.ts b/docs/data/charts/brush/demos/brush-custom-overlay/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/brush/demos/brush-custom-overlay/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/brush/demos/brush-custom-overlay/index.ts b/docs/data/charts/brush/demos/brush-custom-overlay/index.ts new file mode 100644 index 0000000000000..241a012b11bc9 --- /dev/null +++ b/docs/data/charts/brush/demos/brush-custom-overlay/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BrushCustomOverlay from './BrushCustomOverlay'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BrushCustomOverlay, { ClientProvider }); diff --git a/docs/data/charts/brush/BrushScatterList.tsx b/docs/data/charts/brush/demos/brush-scatter-list/BrushScatterList.tsx similarity index 98% rename from docs/data/charts/brush/BrushScatterList.tsx rename to docs/data/charts/brush/demos/brush-scatter-list/BrushScatterList.tsx index 8d17bd8ee3b74..c60185633a905 100644 --- a/docs/data/charts/brush/BrushScatterList.tsx +++ b/docs/data/charts/brush/demos/brush-scatter-list/BrushScatterList.tsx @@ -127,6 +127,7 @@ function SelectedPointsList() { export default function BrushScatterList() { return ( + {/* @focus-start */} Drag to select points on the scatter chart. Selected points will be displayed below. @@ -150,6 +151,7 @@ export default function BrushScatterList() { + {/* @focus-end */} ); } diff --git a/docs/data/charts/brush/demos/brush-scatter-list/client.ts b/docs/data/charts/brush/demos/brush-scatter-list/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/brush/demos/brush-scatter-list/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/brush/demos/brush-scatter-list/index.ts b/docs/data/charts/brush/demos/brush-scatter-list/index.ts new file mode 100644 index 0000000000000..067b7ca12c0d7 --- /dev/null +++ b/docs/data/charts/brush/demos/brush-scatter-list/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BrushScatterList from './BrushScatterList'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BrushScatterList, { ClientProvider }); diff --git a/docs/data/charts/bubble/BubbleChartCO2Emissions.js b/docs/data/charts/bubble/BubbleChartCO2Emissions.js deleted file mode 100644 index 4133d86a8b8b6..0000000000000 --- a/docs/data/charts/bubble/BubbleChartCO2Emissions.js +++ /dev/null @@ -1,204 +0,0 @@ -import * as React from 'react'; -import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; -import { scatterClasses } from '@mui/x-charts-pro/ScatterChart'; -import { ChartsTooltipContainer, useItemTooltip } from '@mui/x-charts/ChartsTooltip'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { globalCo2GdpPopulation } from '../dataset/globalCo2GdpPopulation'; - -const regions = [ - 'Africa', - 'Asia', - 'Europe', - 'North America', - 'Oceania', - 'South America', -]; - -const regionColors = [ - '#e6194B', - '#3cb44b', - '#4363d8', - '#f58231', - '#911eb4', - '#42d4f4', -]; - -const compactCurrencyFormatter = new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD', - notation: 'compact', - maximumFractionDigits: 1, -}); - -const compactNumberFormatter = new Intl.NumberFormat('en-US', { - notation: 'compact', -}); - -function TooltipRow({ label, value }) { - return ( - - - {label} - - - {value} - - - ); -} - -function CountryBubbleTooltipContent() { - const item = useItemTooltip(); - - if (!item) { - return null; - } - const country = globalCo2GdpPopulation[item.identifier.dataIndex]; - return ( - - - - {country.name} - - {country.region} - - - - - - - - - ); -} - -function CountryBubbleTooltip() { - return ( - - - - ); -} - -export default function BubbleChartCO2Emissions() { - return ( - - compactCurrencyFormatter.format(value), - zoom: true, - }, - ]} - yAxis={[ - { - label: 'CO₂ emissions (t per person)', - width: 50, - zoom: true, - }, - ]} - zAxis={[ - { - // Maps the population to the marker radius (continuous scale). - id: 'population', - dataKey: 'population', - sizeMap: { - type: 'continuous', - min: 1_000, - max: 1_500_000_000, - size: [3, 25], - }, - }, - { - // Maps the region to a marker color (ordinal scale). - id: 'region', - dataKey: 'region', - colorMap: { - type: 'ordinal', - values: regions, - colors: regionColors, - }, - }, - ]} - hitAreaRadius="item" - series={[ - { - datasetKeys: { x: 'gdpPerCapita', y: 'co2_emission', id: 'code' }, - sizeAxisId: 'population', - colorAxisId: 'region', - highlightScope: { highlight: 'item', fade: 'none' }, - }, - ]} - /> - - {regions.map((region, index) => ( - - - {region} - - ))} - - - Bubble size is proportional to the population · Data for 2023, Our World in - Data - - - ); -} diff --git a/docs/data/charts/bubble/ColorScale.js b/docs/data/charts/bubble/ColorScale.js deleted file mode 100644 index 29bdbe8a38dc3..0000000000000 --- a/docs/data/charts/bubble/ColorScale.js +++ /dev/null @@ -1,285 +0,0 @@ -import * as React from 'react'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; - -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import ToggleButton from '@mui/material/ToggleButton'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { Chance } from 'chance'; - -const POINTS_NUMBER = 50; -const chance = new Chance(42); - -export default function ColorScale() { - const [colorX, setColorX] = React.useState('piecewise'); - const [colorY, setColorY] = React.useState('None'); - const [colorZ, setColorZ] = React.useState('None'); - - return ( - - div': { - display: 'flex', - flexDirection: 'column', - }, - }} - > -
- x-axis colorMap - setColorX(value)} - aria-label="Platform" - > - None - piecewise - continuous - -
-
- y-axis colorMap - setColorY(value)} - aria-label="Platform" - > - None - piecewise - continuous - -
-
- z-axis colorMap - setColorZ(value)} - aria-label="Platform" - > - None - piecewise - continuous - ordinal - -
- - 'A'), - ...[...Array(POINTS_NUMBER)].map(() => 'B'), - ...[...Array(POINTS_NUMBER)].map(() => 'C'), - ...[...Array(POINTS_NUMBER)].map(() => 'D'), - ] - : undefined, - colorMap: - (colorZ === 'continuous' && { - type: 'continuous', - min: -2, - max: 2, - color: ['green', 'orange'], - }) || - (colorZ === 'piecewise' && { - type: 'piecewise', - thresholds: [-1.5, 0, 1.5], - colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'], - }) || - (colorZ === 'ordinal' && { - type: 'ordinal', - values: ['A', 'B', 'C', 'D'], - colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'], - }) || - undefined, - }, - ]} - /> - ({...point, colorValue: point.x + point.y})) }]}', - // ColorX - ...(colorX === 'None' ? [' xAxis={[{}]}'] : []), - ...(colorX === 'continuous' - ? [ - ' xAxis={[{', - ` colorMap: {`, - ` type: 'continuous',`, - ` min: -2,`, - ` max: 2,`, - ` color: ['green', 'orange']`, - ` }`, - ' }]}', - ] - : []), - ...(colorX === 'piecewise' - ? [ - ' xAxis={[{', - ` colorMap: {`, - ` type: 'piecewise',`, - ` thresholds: [-1.5, 0, 1.5],`, - ` colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],`, - ` }`, - ' }]}', - ] - : []), - // ColorY - ...(colorY === 'None' ? [' yAxis={[{}]}'] : []), - ...(colorY === 'continuous' - ? [ - ' yAxis={[{', - ` colorMap: {`, - ` type: 'continuous',`, - ` min: -2,`, - ` max: 2,`, - ` color: ['blue', 'red']`, - ` }`, - ' }]}', - ] - : []), - ...(colorY === 'piecewise' - ? [ - ' yAxis={[{', - ` colorMap: {`, - ` type: 'piecewise',`, - ` thresholds: [-1.5, 0, 1.5],`, - ` colors: ['lightblue', 'blue', 'orange', 'red'],`, - ` }`, - ' }]}', - ] - : []), - // ColorZ - ...(colorZ === 'None' ? [' zAxis={[{}]}'] : []), - ...(colorZ === 'continuous' - ? [ - ' zAxis={[{', - ` colorMap: {`, - ` type: 'continuous',`, - ` min: -2,`, - ` max: 2,`, - ` color: ['green', 'orange'],`, - ` }`, - ' }]}', - ] - : []), - ...(colorZ === 'piecewise' - ? [ - ' zAxis={[{', - ` colorMap: {`, - ` type: 'piecewise',`, - ` thresholds: [-1.5, 0, 1.5],`, - ` colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],`, - ` }`, - ' }]}', - ] - : []), - ...(colorZ === 'ordinal' - ? [ - ' zAxis={[{', - ` data: ['A', ..., 'B', ..., 'C', ..., 'D', ...],`, - ` colorMap: {`, - ` type: 'ordinal',`, - ` values: ['A', 'B', 'C', 'D'],`, - ` colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],`, - ` }`, - ' }]}', - ] - : []), - `/>`, - ].join('\n')} - language="jsx" - copyButtonHidden - /> - - ); -} - -const series = [ - { - data: [ - ...getGaussianSeriesData([-1, -1]), - ...getGaussianSeriesData([-1, 1]), - ...getGaussianSeriesData([1, 1]), - ...getGaussianSeriesData([1, -1]), - ], - }, -].map((s) => ({ - ...s, - valueFormatter: (v) => v && `(${v.x.toFixed(1)}, ${v.y.toFixed(1)})`, -})); - -function getGaussianSeriesData(mean, stdev = [0.5, 0.5], N = 50) { - return [...Array(N)].map((_, i) => { - const x = - Math.sqrt(-2.0 * Math.log(1 - chance.floating({ min: 0, max: 0.99 }))) * - Math.cos(2.0 * Math.PI * chance.floating({ min: 0, max: 0.99 })) * - stdev[0] + - mean[0]; - const y = - Math.sqrt(-2.0 * Math.log(1 - chance.floating({ min: 0, max: 0.99 }))) * - Math.cos(2.0 * Math.PI * chance.floating({ min: 0, max: 0.99 })) * - stdev[1] + - mean[1]; - return { x, y, colorValue: x + y, id: `${mean.join(',')}${i}` }; - }); -} diff --git a/docs/data/charts/bubble/ColorScale.tsx b/docs/data/charts/bubble/ColorScale.tsx deleted file mode 100644 index fb55dea2e8b48..0000000000000 --- a/docs/data/charts/bubble/ColorScale.tsx +++ /dev/null @@ -1,306 +0,0 @@ -import * as React from 'react'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import { ScatterValueType } from '@mui/x-charts/models'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import ToggleButton from '@mui/material/ToggleButton'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { Chance } from 'chance'; - -const POINTS_NUMBER = 50; -const chance = new Chance(42); - -export default function ColorScale() { - const [colorX, setColorX] = React.useState<'None' | 'piecewise' | 'continuous'>( - 'piecewise', - ); - const [colorY, setColorY] = React.useState<'None' | 'piecewise' | 'continuous'>( - 'None', - ); - const [colorZ, setColorZ] = React.useState< - 'None' | 'piecewise' | 'continuous' | 'ordinal' - >('None'); - - return ( - - div': { - display: 'flex', - flexDirection: 'column', - }, - }} - > -
- x-axis colorMap - - setColorX(value) - } - aria-label="Platform" - > - None - piecewise - continuous - -
-
- y-axis colorMap - - setColorY(value) - } - aria-label="Platform" - > - None - piecewise - continuous - -
-
- z-axis colorMap - - setColorZ(value) - } - aria-label="Platform" - > - None - piecewise - continuous - ordinal - -
- - 'A'), - ...[...Array(POINTS_NUMBER)].map(() => 'B'), - ...[...Array(POINTS_NUMBER)].map(() => 'C'), - ...[...Array(POINTS_NUMBER)].map(() => 'D'), - ] - : undefined, - colorMap: - (colorZ === 'continuous' && { - type: 'continuous', - min: -2, - max: 2, - color: ['green', 'orange'], - }) || - (colorZ === 'piecewise' && { - type: 'piecewise', - thresholds: [-1.5, 0, 1.5], - colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'], - }) || - (colorZ === 'ordinal' && { - type: 'ordinal', - - values: ['A', 'B', 'C', 'D'], - colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'], - }) || - undefined, - }, - ]} - /> - ({...point, colorValue: point.x + point.y})) }]}', - // ColorX - ...(colorX === 'None' ? [' xAxis={[{}]}'] : []), - ...(colorX === 'continuous' - ? [ - ' xAxis={[{', - ` colorMap: {`, - ` type: 'continuous',`, - ` min: -2,`, - ` max: 2,`, - ` color: ['green', 'orange']`, - ` }`, - ' }]}', - ] - : []), - ...(colorX === 'piecewise' - ? [ - ' xAxis={[{', - ` colorMap: {`, - ` type: 'piecewise',`, - ` thresholds: [-1.5, 0, 1.5],`, - ` colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],`, - ` }`, - ' }]}', - ] - : []), - - // ColorY - ...(colorY === 'None' ? [' yAxis={[{}]}'] : []), - ...(colorY === 'continuous' - ? [ - ' yAxis={[{', - ` colorMap: {`, - ` type: 'continuous',`, - ` min: -2,`, - ` max: 2,`, - ` color: ['blue', 'red']`, - ` }`, - ' }]}', - ] - : []), - ...(colorY === 'piecewise' - ? [ - ' yAxis={[{', - ` colorMap: {`, - ` type: 'piecewise',`, - ` thresholds: [-1.5, 0, 1.5],`, - ` colors: ['lightblue', 'blue', 'orange', 'red'],`, - ` }`, - ' }]}', - ] - : []), - - // ColorZ - ...(colorZ === 'None' ? [' zAxis={[{}]}'] : []), - ...(colorZ === 'continuous' - ? [ - ' zAxis={[{', - ` colorMap: {`, - ` type: 'continuous',`, - ` min: -2,`, - ` max: 2,`, - ` color: ['green', 'orange'],`, - ` }`, - ' }]}', - ] - : []), - ...(colorZ === 'piecewise' - ? [ - ' zAxis={[{', - ` colorMap: {`, - ` type: 'piecewise',`, - ` thresholds: [-1.5, 0, 1.5],`, - ` colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],`, - ` }`, - ' }]}', - ] - : []), - ...(colorZ === 'ordinal' - ? [ - ' zAxis={[{', - ` data: ['A', ..., 'B', ..., 'C', ..., 'D', ...],`, - ` colorMap: {`, - ` type: 'ordinal',`, - ` values: ['A', 'B', 'C', 'D'],`, - ` colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],`, - ` }`, - ' }]}', - ] - : []), - `/>`, - ].join('\n')} - language="jsx" - copyButtonHidden - /> - - ); -} - -const series = [ - { - data: [ - ...getGaussianSeriesData([-1, -1]), - ...getGaussianSeriesData([-1, 1]), - ...getGaussianSeriesData([1, 1]), - ...getGaussianSeriesData([1, -1]), - ], - }, -].map((s) => ({ - ...s, - valueFormatter: (v: ScatterValueType | null) => - v && `(${v.x.toFixed(1)}, ${v.y.toFixed(1)})`, -})); - -function getGaussianSeriesData( - mean: [number, number], - stdev: [number, number] = [0.5, 0.5], - N: number = 50, -) { - return [...Array(N)].map((_, i) => { - const x = - Math.sqrt(-2.0 * Math.log(1 - chance.floating({ min: 0, max: 0.99 }))) * - Math.cos(2.0 * Math.PI * chance.floating({ min: 0, max: 0.99 })) * - stdev[0] + - mean[0]; - const y = - Math.sqrt(-2.0 * Math.log(1 - chance.floating({ min: 0, max: 0.99 }))) * - Math.cos(2.0 * Math.PI * chance.floating({ min: 0, max: 0.99 })) * - stdev[1] + - mean[1]; - return { x, y, colorValue: x + y, id: `${mean.join(',')}${i}` }; - }); -} diff --git a/docs/data/charts/bubble/DifferentSizeScale.js b/docs/data/charts/bubble/DifferentSizeScale.js deleted file mode 100644 index 2f04a8b01e88f..0000000000000 --- a/docs/data/charts/bubble/DifferentSizeScale.js +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from 'react'; -import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; -import { ChartsReferenceLine } from '@mui/x-charts-pro/ChartsReferenceLine'; - -const values = [1, 2, 3, 5, 7, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]; - -const scales = ['linear', 'sqrt', 'log']; -const series = scales.map((interpolator) => ({ - data: values.map((v) => ({ x: v, y: interpolator, sizeValue: v })), - sizeAxisId: interpolator, -})); - -export default function DifferentSizeScale() { - return ( - null }} - > - - - ); -} diff --git a/docs/data/charts/bubble/ScatterZAxis.js b/docs/data/charts/bubble/ScatterZAxis.js deleted file mode 100644 index 7c12737353c33..0000000000000 --- a/docs/data/charts/bubble/ScatterZAxis.js +++ /dev/null @@ -1,207 +0,0 @@ -import * as React from 'react'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import { ChartsTooltipContainer, useItemTooltip } from '@mui/x-charts/ChartsTooltip'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import Divider from '@mui/material/Divider'; -import Paper from '@mui/material/Paper'; -import Typography from '@mui/material/Typography'; -import { useZAxis } from '@mui/x-charts/hooks'; -import { irisData } from '../dataset/irisDataset'; - -const species = ['Setosa', 'Versicolor', 'Virginica']; -const speciesColors = ['#2e7d32', '#ed6c02', '#9c27b0']; -const speciesPredictionColors = ['#5aa35e', '#be7f4b', '#ba68c9']; - -function IrisMarker(props) { - const { x, y, color, size, isHighlighted, isFaded, dataIndex, ...other } = props; - - // Get and use color/size scale to determine stroke color and width based on prediction and confidence z-axes. - const predictionAxis = useZAxis('prediction'); - const confidenceAxis = useZAxis('confidence'); - const strokeWidth = - confidenceAxis?.sizeScale?.(confidenceAxis.data?.[dataIndex]) ?? 0; - const strokeColor = - predictionAxis?.colorScale?.(predictionAxis.data?.[dataIndex]) ?? 'gray'; - - const r = (isHighlighted ? 1.2 : 1) * size; - return ( - - ); -} - -/** - * Explains how the scatter plot encodes multiple dimensions of the dataset. - */ -function IrisAnnotation() { - return ( - - Fill color represents the actual species, stroke color represents the predicted - species, bubble size represents petal length, and stroke width represents - prediction confidence. - - ); -} - -function IrisTooltip() { - return ( - - - - ); -} - -function IrisTooltipContent() { - const item = useItemTooltip(); - - function numberFormatter(value) { - if (typeof value === 'number') { - return new Intl.NumberFormat('en-US').format(value); - } - return String(value); - } - - // Get the full data item from irisData using dataIndex from identifier - const dataIndex = item?.identifier.dataIndex; - const dataItem = dataIndex !== undefined ? irisData[dataIndex] : null; - - if (!item || !dataItem) { - return null; - } - - return ( - - - - {dataItem.species} - - - - - Sepal Length: - - {numberFormatter(dataItem.sepalLength)} cm - - - - Sepal Width: - - {numberFormatter(dataItem.sepalWidth)} cm - - - - Petal Length: - - {numberFormatter(dataItem.petalLength)} cm - - - - Petal Width: - - {numberFormatter(dataItem.petalWidth)} cm - - - - - Predicted: - - {dataItem.prediction} - - - - Confidence: - - {numberFormatter(dataItem.confidence)}% - - - - - ); -} - -export default function ScatterZAxis() { - return ( - - item.confidence)), - max: 100, - size: [0.5, 3], - }, - }, - ]} - slots={{ marker: IrisMarker, tooltip: IrisTooltip }} - > - - - ); -} diff --git a/docs/data/charts/bubble/SizeScale.js b/docs/data/charts/bubble/SizeScale.js deleted file mode 100644 index fac2f4c970ab1..0000000000000 --- a/docs/data/charts/bubble/SizeScale.js +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; - -const data = [ - { x: 1, y: 2, sizeValue: 2 }, - { x: 2.4, y: 1.5, sizeValue: 8 }, - { x: 3.1, y: 3.4, sizeValue: 14 }, - { x: 1.8, y: 4.2, sizeValue: 5 }, - { x: 4.5, y: 2.8, sizeValue: 20 }, - { x: 3.7, y: 1.2, sizeValue: 11 }, - { x: 2.1, y: 3.9, sizeValue: 17 }, - { x: 4.9, y: 4.6, sizeValue: 3 }, - { x: 0.8, y: 1.1, sizeValue: 9 }, - { x: 3.3, y: 2.2, sizeValue: 25 }, - { x: 2.7, y: 4.8, sizeValue: 6 }, - { x: 4.1, y: 3.1, sizeValue: 13 }, -]; - -export default function SizeScale() { - return ( - - ); -} diff --git a/docs/data/charts/bubble/SizeScale.tsx.preview b/docs/data/charts/bubble/SizeScale.tsx.preview deleted file mode 100644 index e5e2b30217c31..0000000000000 --- a/docs/data/charts/bubble/SizeScale.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/bubble/bubble.md b/docs/data/charts/bubble/bubble.md index 5125076669127..970a0f727b4ad 100644 --- a/docs/data/charts/bubble/bubble.md +++ b/docs/data/charts/bubble/bubble.md @@ -13,7 +13,7 @@ components: ScatterChart, ScatterChartPro, ScatterChartPremium A bubble chart is a scatter chart where each point can have a variable size and color determined by data values. The x and y positions encode two variables, while the bubble size and color encode additional ones. -{{"demo": "BubbleChartCO2Emissions.js"}} +{{"component": "file://./demos/bubble-chart-co2-emissions/index.ts"}} ## Mapping data to color @@ -50,7 +50,7 @@ You can set the color value in three ways: See [Styling—Value-based colors](/x/react-charts/styling/#value-based-colors) for the `colorMap` properties. -{{"demo": "ColorScale.js"}} +{{"component": "file://./demos/color-scale/index.ts"}} ## Mapping data to size @@ -62,7 +62,7 @@ The mapped value comes from the `sizeValue` property on each data point, or from The `sizeMap` supports the same `continuous`, `piecewise`, and `ordinal` types as `colorMap`, but it maps values to a marker radius in pixels. A series can set both `colorAxisId` and `sizeAxisId` to style points by two values at once. -{{"demo": "SizeScale.js"}} +{{"component": "file://./demos/size-scale/index.ts"}} ### Using zAxis in custom components @@ -80,7 +80,7 @@ It uses 4 z-axes to map: - The petal length to the size of the mark - The confidence to the stroke width -{{"demo": "ScatterZAxis.js"}} +{{"component": "file://./demos/scatter-z-axis/index.ts"}} ### Different size scales @@ -91,4 +91,4 @@ You can change that behavior with `sizeMap.interpolator: 'log' | 'linear' | 'sqr When you do, make the choice explicit in the copy so the size encoding is not misleading. -{{"demo": "DifferentSizeScale.js"}} +{{"component": "file://./demos/different-size-scale/index.ts"}} diff --git a/docs/data/charts/bubble/BubbleChartCO2Emissions.tsx b/docs/data/charts/bubble/demos/bubble-chart-co2-emissions/BubbleChartCO2Emissions.tsx similarity index 97% rename from docs/data/charts/bubble/BubbleChartCO2Emissions.tsx rename to docs/data/charts/bubble/demos/bubble-chart-co2-emissions/BubbleChartCO2Emissions.tsx index d8ec56e365ba1..2995e37678f93 100644 --- a/docs/data/charts/bubble/BubbleChartCO2Emissions.tsx +++ b/docs/data/charts/bubble/demos/bubble-chart-co2-emissions/BubbleChartCO2Emissions.tsx @@ -6,7 +6,7 @@ import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; -import { globalCo2GdpPopulation } from '../dataset/globalCo2GdpPopulation'; +import { globalCo2GdpPopulation } from '../../../dataset/globalCo2GdpPopulation'; const regions = [ 'Africa', @@ -110,6 +110,7 @@ function CountryBubbleTooltip() { export default function BubbleChartCO2Emissions() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/bubble/demos/bubble-chart-co2-emissions/client.ts b/docs/data/charts/bubble/demos/bubble-chart-co2-emissions/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bubble/demos/bubble-chart-co2-emissions/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bubble/demos/bubble-chart-co2-emissions/index.ts b/docs/data/charts/bubble/demos/bubble-chart-co2-emissions/index.ts new file mode 100644 index 0000000000000..74ee7e24df991 --- /dev/null +++ b/docs/data/charts/bubble/demos/bubble-chart-co2-emissions/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BubbleChartCO2Emissions from './BubbleChartCO2Emissions'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BubbleChartCO2Emissions, { ClientProvider }); diff --git a/docs/data/charts/bubble/demos/color-scale/ColorScale.tsx b/docs/data/charts/bubble/demos/color-scale/ColorScale.tsx new file mode 100644 index 0000000000000..b359f18c3bb46 --- /dev/null +++ b/docs/data/charts/bubble/demos/color-scale/ColorScale.tsx @@ -0,0 +1,308 @@ +import * as React from 'react'; +import { ScatterChart } from '@mui/x-charts/ScatterChart'; +import type { ScatterValueType } from '@mui/x-charts/models'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; +import ToggleButton from '@mui/material/ToggleButton'; +import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; +import { Chance } from 'chance'; + +const POINTS_NUMBER = 50; +const chance = new Chance(42); + +export default function ColorScale() { + // @focus-start @padding 1 + const [colorX, setColorX] = React.useState<'None' | 'piecewise' | 'continuous'>( + 'piecewise', + ); + const [colorY, setColorY] = React.useState<'None' | 'piecewise' | 'continuous'>( + 'None', + ); + const [colorZ, setColorZ] = React.useState< + 'None' | 'piecewise' | 'continuous' | 'ordinal' + >('None'); + + return ( + + div': { + display: 'flex', + flexDirection: 'column', + }, + }} + > +
+ x-axis colorMap + + setColorX(value) + } + aria-label="Platform" + > + None + piecewise + continuous + +
+
+ y-axis colorMap + + setColorY(value) + } + aria-label="Platform" + > + None + piecewise + continuous + +
+
+ z-axis colorMap + + setColorZ(value) + } + aria-label="Platform" + > + None + piecewise + continuous + ordinal + +
+ + 'A'), + ...[...Array(POINTS_NUMBER)].map(() => 'B'), + ...[...Array(POINTS_NUMBER)].map(() => 'C'), + ...[...Array(POINTS_NUMBER)].map(() => 'D'), + ] + : undefined, + colorMap: + (colorZ === 'continuous' && { + type: 'continuous', + min: -2, + max: 2, + color: ['green', 'orange'], + }) || + (colorZ === 'piecewise' && { + type: 'piecewise', + thresholds: [-1.5, 0, 1.5], + colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'], + }) || + (colorZ === 'ordinal' && { + type: 'ordinal', + + values: ['A', 'B', 'C', 'D'], + colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'], + }) || + undefined, + }, + ]} + /> + ({...point, colorValue: point.x + point.y})) }]}', + // ColorX + ...(colorX === 'None' ? [' xAxis={[{}]}'] : []), + ...(colorX === 'continuous' + ? [ + ' xAxis={[{', + ` colorMap: {`, + ` type: 'continuous',`, + ` min: -2,`, + ` max: 2,`, + ` color: ['green', 'orange']`, + ` }`, + ' }]}', + ] + : []), + ...(colorX === 'piecewise' + ? [ + ' xAxis={[{', + ` colorMap: {`, + ` type: 'piecewise',`, + ` thresholds: [-1.5, 0, 1.5],`, + ` colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],`, + ` }`, + ' }]}', + ] + : []), + + // ColorY + ...(colorY === 'None' ? [' yAxis={[{}]}'] : []), + ...(colorY === 'continuous' + ? [ + ' yAxis={[{', + ` colorMap: {`, + ` type: 'continuous',`, + ` min: -2,`, + ` max: 2,`, + ` color: ['blue', 'red']`, + ` }`, + ' }]}', + ] + : []), + ...(colorY === 'piecewise' + ? [ + ' yAxis={[{', + ` colorMap: {`, + ` type: 'piecewise',`, + ` thresholds: [-1.5, 0, 1.5],`, + ` colors: ['lightblue', 'blue', 'orange', 'red'],`, + ` }`, + ' }]}', + ] + : []), + + // ColorZ + ...(colorZ === 'None' ? [' zAxis={[{}]}'] : []), + ...(colorZ === 'continuous' + ? [ + ' zAxis={[{', + ` colorMap: {`, + ` type: 'continuous',`, + ` min: -2,`, + ` max: 2,`, + ` color: ['green', 'orange'],`, + ` }`, + ' }]}', + ] + : []), + ...(colorZ === 'piecewise' + ? [ + ' zAxis={[{', + ` colorMap: {`, + ` type: 'piecewise',`, + ` thresholds: [-1.5, 0, 1.5],`, + ` colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],`, + ` }`, + ' }]}', + ] + : []), + ...(colorZ === 'ordinal' + ? [ + ' zAxis={[{', + ` data: ['A', ..., 'B', ..., 'C', ..., 'D', ...],`, + ` colorMap: {`, + ` type: 'ordinal',`, + ` values: ['A', 'B', 'C', 'D'],`, + ` colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],`, + ` }`, + ' }]}', + ] + : []), + `/>`, + ].join('\n')} + language="jsx" + copyButtonHidden + /> + + ); + // @focus-end +} + +const series = [ + { + data: [ + ...getGaussianSeriesData([-1, -1]), + ...getGaussianSeriesData([-1, 1]), + ...getGaussianSeriesData([1, 1]), + ...getGaussianSeriesData([1, -1]), + ], + }, +].map((s) => ({ + ...s, + valueFormatter: (v: ScatterValueType | null) => + v && `(${v.x.toFixed(1)}, ${v.y.toFixed(1)})`, +})); + +function getGaussianSeriesData( + mean: [number, number], + stdev: [number, number] = [0.5, 0.5], + N: number = 50, +) { + return [...Array(N)].map((_, i) => { + const x = + Math.sqrt(-2.0 * Math.log(1 - chance.floating({ min: 0, max: 0.99 }))) * + Math.cos(2.0 * Math.PI * chance.floating({ min: 0, max: 0.99 })) * + stdev[0] + + mean[0]; + const y = + Math.sqrt(-2.0 * Math.log(1 - chance.floating({ min: 0, max: 0.99 }))) * + Math.cos(2.0 * Math.PI * chance.floating({ min: 0, max: 0.99 })) * + stdev[1] + + mean[1]; + return { x, y, colorValue: x + y, id: `${mean.join(',')}${i}` }; + }); +} diff --git a/docs/data/charts/bubble/demos/color-scale/client.ts b/docs/data/charts/bubble/demos/color-scale/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bubble/demos/color-scale/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bubble/demos/color-scale/index.ts b/docs/data/charts/bubble/demos/color-scale/index.ts new file mode 100644 index 0000000000000..141c61df022b8 --- /dev/null +++ b/docs/data/charts/bubble/demos/color-scale/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorScale from './ColorScale'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorScale, { ClientProvider }); diff --git a/docs/data/charts/bubble/DifferentSizeScale.tsx b/docs/data/charts/bubble/demos/different-size-scale/DifferentSizeScale.tsx similarity index 97% rename from docs/data/charts/bubble/DifferentSizeScale.tsx rename to docs/data/charts/bubble/demos/different-size-scale/DifferentSizeScale.tsx index a80f8eeaf2829..63cce5094ea3e 100644 --- a/docs/data/charts/bubble/DifferentSizeScale.tsx +++ b/docs/data/charts/bubble/demos/different-size-scale/DifferentSizeScale.tsx @@ -12,6 +12,7 @@ const series = scales.map((interpolator) => ({ export default function DifferentSizeScale() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/bubble/demos/different-size-scale/client.ts b/docs/data/charts/bubble/demos/different-size-scale/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bubble/demos/different-size-scale/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bubble/demos/different-size-scale/index.ts b/docs/data/charts/bubble/demos/different-size-scale/index.ts new file mode 100644 index 0000000000000..46c8401df989d --- /dev/null +++ b/docs/data/charts/bubble/demos/different-size-scale/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DifferentSizeScale from './DifferentSizeScale'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DifferentSizeScale, { ClientProvider }); diff --git a/docs/data/charts/bubble/ScatterZAxis.tsx b/docs/data/charts/bubble/demos/scatter-z-axis/ScatterZAxis.tsx similarity index 96% rename from docs/data/charts/bubble/ScatterZAxis.tsx rename to docs/data/charts/bubble/demos/scatter-z-axis/ScatterZAxis.tsx index dd50950b15f56..87718a58cd211 100644 --- a/docs/data/charts/bubble/ScatterZAxis.tsx +++ b/docs/data/charts/bubble/demos/scatter-z-axis/ScatterZAxis.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { ScatterChart, ScatterMarkerProps } from '@mui/x-charts/ScatterChart'; +import type { ScatterMarkerProps } from '@mui/x-charts/ScatterChart'; +import { ScatterChart } from '@mui/x-charts/ScatterChart'; import { ChartsTooltipContainer, useItemTooltip } from '@mui/x-charts/ChartsTooltip'; import Stack from '@mui/material/Stack'; import Box from '@mui/material/Box'; @@ -7,7 +8,7 @@ import Divider from '@mui/material/Divider'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import { useZAxis } from '@mui/x-charts/hooks'; -import { irisData } from '../dataset/irisDataset'; +import { irisData } from '../../../dataset/irisDataset'; const species = ['Setosa', 'Versicolor', 'Virginica']; const speciesColors = ['#2e7d32', '#ed6c02', '#9c27b0']; @@ -144,6 +145,7 @@ function IrisTooltipContent() { export default function ScatterZAxis() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/bubble/demos/scatter-z-axis/client.ts b/docs/data/charts/bubble/demos/scatter-z-axis/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bubble/demos/scatter-z-axis/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bubble/demos/scatter-z-axis/index.ts b/docs/data/charts/bubble/demos/scatter-z-axis/index.ts new file mode 100644 index 0000000000000..b6a15c296fdde --- /dev/null +++ b/docs/data/charts/bubble/demos/scatter-z-axis/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScatterZAxis from './ScatterZAxis'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScatterZAxis, { ClientProvider }); diff --git a/docs/data/charts/bubble/SizeScale.tsx b/docs/data/charts/bubble/demos/size-scale/SizeScale.tsx similarity index 94% rename from docs/data/charts/bubble/SizeScale.tsx rename to docs/data/charts/bubble/demos/size-scale/SizeScale.tsx index fac2f4c970ab1..2b52c7f03e4e1 100644 --- a/docs/data/charts/bubble/SizeScale.tsx +++ b/docs/data/charts/bubble/demos/size-scale/SizeScale.tsx @@ -18,6 +18,7 @@ const data = [ export default function SizeScale() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/bubble/demos/size-scale/client.ts b/docs/data/charts/bubble/demos/size-scale/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/bubble/demos/size-scale/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/bubble/demos/size-scale/index.ts b/docs/data/charts/bubble/demos/size-scale/index.ts new file mode 100644 index 0000000000000..da63f2bc761c7 --- /dev/null +++ b/docs/data/charts/bubble/demos/size-scale/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SizeScale from './SizeScale'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SizeScale, { ClientProvider }); diff --git a/docs/data/charts/candlestick/BasicCandlestick.js b/docs/data/charts/candlestick/BasicCandlestick.js deleted file mode 100644 index a82ac83d4943e..0000000000000 --- a/docs/data/charts/candlestick/BasicCandlestick.js +++ /dev/null @@ -1,17 +0,0 @@ -import { CandlestickChart } from '@mui/x-charts-premium/CandlestickChart'; - -import sp500 from '../dataset/sp500-intraday.json'; - -const xData = sp500.map((entry) => new Date(Date.parse(entry.date))); - -const data = sp500.map((entry) => [entry.open, entry.high, entry.low, entry.close]); - -export default function BasicCandlestick() { - return ( - - ); -} diff --git a/docs/data/charts/candlestick/BasicCandlestick.tsx b/docs/data/charts/candlestick/BasicCandlestick.tsx deleted file mode 100644 index 1abf893cc8e14..0000000000000 --- a/docs/data/charts/candlestick/BasicCandlestick.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart'; -import { OHLCValueType } from '@mui/x-charts-premium/models'; -import sp500 from '../dataset/sp500-intraday.json'; - -const xData = sp500.map((entry) => new Date(Date.parse(entry.date))); - -const data: Array = sp500.map((entry) => [ - entry.open, - entry.high, - entry.low, - entry.close, -]); - -export default function BasicCandlestick() { - return ( - - ); -} diff --git a/docs/data/charts/candlestick/BasicCandlestick.tsx.preview b/docs/data/charts/candlestick/BasicCandlestick.tsx.preview deleted file mode 100644 index 0b6189171efcb..0000000000000 --- a/docs/data/charts/candlestick/BasicCandlestick.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/candlestick/CandlestickComposition.js b/docs/data/charts/candlestick/CandlestickComposition.js deleted file mode 100644 index 4d73c3dd0bcf4..0000000000000 --- a/docs/data/charts/candlestick/CandlestickComposition.js +++ /dev/null @@ -1,238 +0,0 @@ -import * as React from 'react'; -import { useTheme } from '@mui/material/styles'; -import Stack from '@mui/material/Stack'; -import useId from '@mui/utils/useId'; -import { ChartsClipPath } from '@mui/x-charts-premium/ChartsClipPath'; -import { CandlestickPlot } from '@mui/x-charts-premium/CandlestickChart'; -import { LinePlot } from '@mui/x-charts-premium/LineChart'; -import { BarPlot } from '@mui/x-charts-premium/BarChart'; -import { ChartsXAxis } from '@mui/x-charts-premium/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts-premium/ChartsYAxis'; -import { useAxesTooltip } from '@mui/x-charts-premium/ChartsTooltip'; -import { ChartsLegend } from '@mui/x-charts-premium/ChartsLegend'; - -import { ChartsDataProviderPremium } from '@mui/x-charts-premium/ChartsDataProviderPremium'; -import { ChartsWrapper } from '@mui/x-charts-premium/ChartsWrapper'; -import { ChartsAxisHighlight } from '@mui/x-charts-premium/ChartsAxisHighlight'; -import { ChartsGrid } from '@mui/x-charts-premium/ChartsGrid'; -import { useDrawingArea } from '@mui/x-charts-premium/hooks'; -import { ChartsWebGLLayer } from '@mui/x-charts-premium/ChartsWebGLLayer'; -import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer'; -import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer'; -import sp500ohlcv from '../dataset/sp500-2025-ohlcv.json'; // Source: Yahoo Finance - -const xData = sp500ohlcv.map((entry) => new Date(Date.parse(entry.date))); - -const ohlcData = sp500ohlcv.map((entry) => [ - entry.open, - entry.high, - entry.low, - entry.close, -]); - -// Extract volume data -const volumeData = sp500ohlcv.map((entry) => entry.volume); - -// Calculate 20-day moving average from closing prices -const movingAverage = []; -const windowSize = 20; -for (let i = 0; i < sp500ohlcv.length; i += 1) { - if (i < windowSize - 1) { - movingAverage.push(null); - } else { - const sum = sp500ohlcv - .slice(i - windowSize + 1, i + 1) - .reduce((acc, entry) => acc + entry.close, 0); - movingAverage.push(sum / windowSize); - } -} - -const formatVolume = (value) => - value.toLocaleString('en-US', { - maximumSignificantDigits: 3, - notation: 'compact', - compactDisplay: 'short', - }); - -const formatTooltipDollarValue = (value) => - value.toLocaleString('en-US', { - minimumFractionDigits: 0, - maximumFractionDigits: 2, - }); - -const formatAsDollar = (value) => - value.toLocaleString('en-US', { - currency: 'USD', - style: 'currency', - maximumFractionDigits: 0, - }); - -export default function CandlestickComposition() { - const id = useId(); - const clipPathId = `${id}-clip-path`; - const theme = useTheme(); - - const volumeBarColorGetter = ({ dataIndex }) => { - if (dataIndex === 0) { - return theme.palette.success.main; - } - - // Color the volume bar green if the closing price is higher than or equal to the previous day's close, - // red otherwise. This is how Yahoo Finance colors their volume bars. - return sp500ohlcv[dataIndex].close >= sp500ohlcv[dataIndex - 1].close - ? theme.palette.success.main - : theme.palette.error.main; - }; - - return ( - - value.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }), - zoom: { filterMode: 'discard' }, - }, - ]} - yAxis={[ - { - id: 'price', - valueFormatter: formatAsDollar, - width: 48, - position: 'right', - }, - { - id: 'volume', - // Ensures that volume bars only take up to 20% of the chart height - domainLimit: (min, max) => ({ min: 0, max: max.valueOf() * 5 }), - }, - ]} - height={400} - > - - - - - - - - - - - - - - - - - - - - - - - - ); -} - -function CandlestickTooltip() { - const drawingArea = useDrawingArea(); - const axesTooltipData = useAxesTooltip({ - directions: ['x'], - }); - - const tooltipData = axesTooltipData?.[0]; - - if (!tooltipData) { - return null; - } - - const ohlcItem = tooltipData.seriesItems.find((item) => item.seriesId === 'ohlc'); - const movingAverageItem = tooltipData.seriesItems.find( - (item) => item.seriesId === 'moving-average', - ); - const volumeItem = tooltipData.seriesItems.find( - (item) => item.seriesId === 'volume', - ); - - return ( - - ({ - ...theme.typography.caption, - pointerEvents: 'none', - marginLeft: theme.spacing(1), - marginTop: theme.spacing(1), - gap: 0.5, - })} - > - ({ - width: 'min-content', - paddingX: theme.spacing(1), - paddingY: theme.spacing(0.5), - background: theme.palette.background.paper, - gap: 1, - })} - > - O:{formatTooltipDollarValue(ohlcItem.value.open)} - H:{formatTooltipDollarValue(ohlcItem.value.high)} - L:{formatTooltipDollarValue(ohlcItem.value.low)} - C:{formatTooltipDollarValue(ohlcItem.value.close)} - V:{formatVolume(volumeItem.value)} - - {movingAverageItem.value != null && ( - ({ - width: 'min-content', - paddingX: theme.spacing(1), - paddingY: theme.spacing(0.5), - background: theme.palette.background.paper, - })} - > - MA:{formatTooltipDollarValue(movingAverageItem.value)} - - )} - - - ); -} diff --git a/docs/data/charts/candlestick/CandlestickOverview.js b/docs/data/charts/candlestick/CandlestickOverview.js deleted file mode 100644 index 43ce263158bbf..0000000000000 --- a/docs/data/charts/candlestick/CandlestickOverview.js +++ /dev/null @@ -1,452 +0,0 @@ -import * as React from 'react'; -import { useTheme } from '@mui/material/styles'; -import Stack from '@mui/material/Stack'; -import Checkbox from '@mui/material/Checkbox'; -import Menu from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; -import Select from '@mui/material/Select'; -import Typography from '@mui/material/Typography'; -import FileDownloadIcon from '@mui/icons-material/FileDownload'; -import useId from '@mui/utils/useId'; -import { ChartsClipPath } from '@mui/x-charts-premium/ChartsClipPath'; -import { CandlestickPlot } from '@mui/x-charts-premium/CandlestickChart'; -import { LinePlot } from '@mui/x-charts-premium/LineChart'; -import { BarPlot } from '@mui/x-charts-premium/BarChart'; -import { ChartsXAxis } from '@mui/x-charts-premium/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts-premium/ChartsYAxis'; -import { useAxesTooltip } from '@mui/x-charts-premium/ChartsTooltip'; - -import { ChartsDataProviderPremium } from '@mui/x-charts-premium/ChartsDataProviderPremium'; -import { ChartsWrapper } from '@mui/x-charts-premium/ChartsWrapper'; -import { ChartsAxisHighlight } from '@mui/x-charts-premium/ChartsAxisHighlight'; -import { ChartsGrid } from '@mui/x-charts-premium/ChartsGrid'; -import { useDrawingArea, useXScale } from '@mui/x-charts-premium/hooks'; -import { ChartsWebGLLayer } from '@mui/x-charts-premium/ChartsWebGLLayer'; -import { ChartsLayerContainer } from '@mui/x-charts-premium/ChartsLayerContainer'; -import { ChartsSvgLayer } from '@mui/x-charts-premium/ChartsSvgLayer'; -import { ChartsZoomSlider } from '@mui/x-charts-premium/ChartsZoomSlider'; -import { - ChartsToolbarImageExportTrigger, - ChartsToolbarPrintExportTrigger, -} from '@mui/x-charts-premium/ChartsToolbarPro'; -import { Toolbar, ToolbarButton } from '@mui/x-charts-premium/Toolbar'; -import ohlcv from '../dataset/ibkr-2025-ohlcv.json'; // Source: Yahoo Finance - -const dividends = [ - { date: '2025-02-28T00:00:00', amount: 0.0625 }, - { date: '2025-05-30T00:00:00', amount: 0.08 }, - { date: '2025-08-29T00:00:00', amount: 0.08 }, - { date: '2025-12-01T00:00:00', amount: 0.08 }, -]; - -const stockSplits = [{ date: '2025-06-18T00:00:00', ratio: 4 }]; - -const xData = ohlcv.map((entry) => new Date(Date.parse(entry.date))); - -const ohlcData = ohlcv.map((entry) => [ - entry.open, - entry.high, - entry.low, - entry.close, -]); - -// Extract volume data -const volumeData = ohlcv.map((entry) => entry.volume); - -function calcMovingAverage(windowSize) { - return ohlcv.map((_, i) => { - if (i < windowSize - 1) { - return null; - } - const sum = ohlcv - .slice(i - windowSize + 1, i + 1) - .reduce((acc, entry) => acc + entry.close, 0); - return sum / windowSize; - }); -} - -const formatVolume = (value) => - value.toLocaleString('en-US', { - maximumSignificantDigits: 3, - notation: 'compact', - compactDisplay: 'short', - }); - -const formatTooltipDollarValue = (value) => - value.toLocaleString('en-US', { - minimumFractionDigits: 0, - maximumFractionDigits: 2, - }); - -const formatAsDollar = (value) => - value.toLocaleString('en-US', { - currency: 'USD', - style: 'currency', - maximumFractionDigits: 0, - }); - -export default function CandlestickOverview() { - const id = useId(); - const clipPathId = `${id}-clip-path`; - const theme = useTheme(); - const [movingAverageWindow, setMovingAverageWindow] = React.useState(20); - const [visibleAnnotations, setVisibleAnnotations] = React.useState([ - 'dividends', - 'splits', - ]); - const movingAverageData = React.useMemo( - () => - movingAverageWindow !== null ? calcMovingAverage(movingAverageWindow) : null, - [movingAverageWindow], - ); - - const volumeBarColorGetter = ({ dataIndex }) => { - if (dataIndex === 0) { - return theme.palette.success.main; - } - - // Color the volume bar green if the closing price is higher than or equal to the previous day's close, - // red otherwise. This is how Yahoo Finance colors their volume bars. - return ohlcv[dataIndex].close >= ohlcv[dataIndex - 1].close - ? theme.palette.success.main - : theme.palette.error.main; - }; - - return ( - - - Interactive Brokers Stock Price - 2025 - - - value.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }), - zoom: { - filterMode: 'discard', - slider: { enabled: true, preview: { seriesIds: ['ohlc'] } }, - }, - }, - ]} - yAxis={[ - { - id: 'price', - valueFormatter: formatAsDollar, - width: 32, - position: 'right', - }, - { - id: 'volume', - // Ensures that volume bars only take up to 20% of the chart height - domainLimit: (min, max) => ({ min: 0, max: max.valueOf() * 5 }), - }, - ]} - height={400} - margin={{ top: 8, bottom: 0, left: 8, right: 0 }} - > - - - - - - - - - - - - - - - - - - - - - - - - - - - Source: Yahoo Finance - - ); -} - -function CandlestickToolbar({ - movingAverageWindow, - onMovingAverageWindowChange, - visibleAnnotations, - onVisibleAnnotationsChange, -}) { - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - const menuId = useId(); - const buttonId = useId(); - - const handleOpen = (event) => { - setAnchorEl(event.currentTarget); - }; - const handleClose = () => setAnchorEl(null); - - return ( - - - - - - - - } - onClick={handleClose} - > - Print - - } - options={{ type: 'image/png' }} - onClick={handleClose} - > - Download as PNG - - - - ); -} - -function CandlestickTooltip() { - const drawingArea = useDrawingArea(); - const axesTooltipData = useAxesTooltip({ - directions: ['x'], - }); - - const tooltipData = axesTooltipData?.[0]; - - if (!tooltipData) { - return null; - } - - const ohlcItem = tooltipData.seriesItems.find((item) => item.seriesId === 'ohlc'); - const movingAverageItem = tooltipData.seriesItems.find( - (item) => item.seriesId === 'moving-average', - ); - const volumeItem = tooltipData.seriesItems.find( - (item) => item.seriesId === 'volume', - ); - - return ( - - ({ - gap: 0.5, - ...theme.typography.caption, - pointerEvents: 'none', - marginLeft: theme.spacing(1), - marginTop: theme.spacing(1), - })} - > - ({ - gap: 1, - width: 'min-content', - paddingX: theme.spacing(1), - paddingY: theme.spacing(0.5), - background: theme.palette.background.paper, - })} - > - O:{formatTooltipDollarValue(ohlcItem.value.open)} - H:{formatTooltipDollarValue(ohlcItem.value.high)} - L:{formatTooltipDollarValue(ohlcItem.value.low)} - C:{formatTooltipDollarValue(ohlcItem.value.close)} - V:{formatVolume(volumeItem.value)} - - {movingAverageItem?.value != null && ( - ({ - width: 'min-content', - paddingX: theme.spacing(1), - paddingY: theme.spacing(0.5), - background: theme.palette.background.paper, - })} - > - MA:{formatTooltipDollarValue(movingAverageItem.value)} - - )} - - - ); -} - -function CandlestickAnnotations({ showDividends, showSplits }) { - const drawingArea = useDrawingArea(); - const xScale = useXScale(); - const bandwidth = xScale.bandwidth(); - - const getX = (dateStr) => { - const match = xData.find((d) => d.getTime() === Date.parse(dateStr)); - if (!match) { - return null; - } - const pos = xScale(match); - return pos === undefined ? null : pos + bandwidth / 2; - }; - - return ( - - {showDividends && - dividends.map(({ date, amount }) => { - const x = getX(date); - if (x === null) { - return null; - } - return ( - - - - D ${amount} - - - ); - })} - {showSplits && - stockSplits.map(({ date, ratio }) => { - const x = getX(date); - if (x === null) { - return null; - } - return ( - - - - Split {ratio}:1 - - - ); - })} - - ); -} diff --git a/docs/data/charts/candlestick/CandlestickValueFormatter.js b/docs/data/charts/candlestick/CandlestickValueFormatter.js deleted file mode 100644 index 77c1b2c39ea4a..0000000000000 --- a/docs/data/charts/candlestick/CandlestickValueFormatter.js +++ /dev/null @@ -1,54 +0,0 @@ -import { CandlestickChart } from '@mui/x-charts-premium/CandlestickChart'; - -import sp500 from '../dataset/sp500-intraday.json'; - -const xData = sp500.map((entry) => new Date(Date.parse(entry.date))); - -const data = [...sp500] - .reverse() - .map((entry) => [entry.open, entry.high, entry.low, entry.close]); - -const dollarFormatter = new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD', -}); - -const dateFormatter = new Intl.DateTimeFormat('en-US', { - weekday: 'short', - year: 'numeric', - month: 'short', - day: 'numeric', -}); - -const chartSettings = { - xAxis: [ - { - data: xData, - valueFormatter: (date) => dateFormatter.format(date), - zoom: { minSpan: 1, filterMode: 'discard' }, - }, - ], - series: [], - height: 400, -}; - -export default function CandlestickValueFormatter() { - return ( - // prettier-ignore - { - if (value === null) {return '';} - if (field === 'open') {return `⇒ ${dollarFormatter.format(value)}`;} - if (field === 'close') {return `⇐ ${dollarFormatter.format(value)}`;} - if (field === 'high') {return `⇗ ${dollarFormatter.format(value)}`;} - if (field === 'low') {return `⇙ ${dollarFormatter.format(value)}`;} - return dollarFormatter.format(value); - } - }] - } /> - ); -} diff --git a/docs/data/charts/candlestick/CandlestickValueFormatter.tsx.preview b/docs/data/charts/candlestick/CandlestickValueFormatter.tsx.preview deleted file mode 100644 index 0ba23f7ea880c..0000000000000 --- a/docs/data/charts/candlestick/CandlestickValueFormatter.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - { - if (value === null) { return ''; } - if (field === 'open') { return `⇒ ${dollarFormatter.format(value)}`; } - if (field === 'close') { return `⇐ ${dollarFormatter.format(value)}`; } - if (field === 'high') { return `⇗ ${dollarFormatter.format(value)}`; } - if (field === 'low') { return `⇙ ${dollarFormatter.format(value)}`; } - return dollarFormatter.format(value); - }, - }, - ]} -/> \ No newline at end of file diff --git a/docs/data/charts/candlestick/ColorCandlestick.js b/docs/data/charts/candlestick/ColorCandlestick.js deleted file mode 100644 index 87b80a2a9095b..0000000000000 --- a/docs/data/charts/candlestick/ColorCandlestick.js +++ /dev/null @@ -1,23 +0,0 @@ -import { CandlestickChart } from '@mui/x-charts-premium/CandlestickChart'; - -import sp500 from '../dataset/sp500-intraday.json'; - -const xData = sp500.map((entry) => new Date(Date.parse(entry.date))); - -const data = sp500.map((entry) => [entry.open, entry.high, entry.low, entry.close]); - -export default function ColorCandlestick() { - return ( - (mode === 'dark' ? '#f7be85' : '#F28C28'), - }, - ]} - height={400} - /> - ); -} diff --git a/docs/data/charts/candlestick/ColorCandlestick.tsx.preview b/docs/data/charts/candlestick/ColorCandlestick.tsx.preview deleted file mode 100644 index 39da34f280d47..0000000000000 --- a/docs/data/charts/candlestick/ColorCandlestick.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - mode === 'dark' ? '#f7be85' : '#F28C28', - }, - ]} - height={400} -/> \ No newline at end of file diff --git a/docs/data/charts/candlestick/CustomizedCandlestick.js b/docs/data/charts/candlestick/CustomizedCandlestick.js deleted file mode 100644 index cae81c1075955..0000000000000 --- a/docs/data/charts/candlestick/CustomizedCandlestick.js +++ /dev/null @@ -1,43 +0,0 @@ -import { CandlestickChart } from '@mui/x-charts-premium/CandlestickChart'; - -import sp500 from '../dataset/sp500-intraday.json'; - -const xData = sp500.map((entry) => new Date(Date.parse(entry.date))); - -const data = [...sp500] - .reverse() - .map((entry) => [entry.open, entry.high, entry.low, entry.close]); - -const dollarFormatter = new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD', - maximumFractionDigits: 0, -}); - -const dateFormatter = new Intl.DateTimeFormat('en-US', { - weekday: 'short', - year: 'numeric', - month: 'short', - day: 'numeric', -}); - -const chartSettings = { - series: [{ data }], - height: 400, -}; - -export default function CustomizedCandlestick() { - return ( - dateFormatter.format(date), - zoom: { minSpan: 1, filterMode: 'discard' }, - }, - ]} - yAxis={[{ valueFormatter: (value) => dollarFormatter.format(value) }]} - /> - ); -} diff --git a/docs/data/charts/candlestick/CustomizedCandlestick.tsx b/docs/data/charts/candlestick/CustomizedCandlestick.tsx deleted file mode 100644 index 5b17a14fed946..0000000000000 --- a/docs/data/charts/candlestick/CustomizedCandlestick.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { - CandlestickChart as CandlestickChart, - type CandlestickChartProps, -} from '@mui/x-charts-premium/CandlestickChart'; -import { OHLCValueType } from '@mui/x-charts-premium/models'; -import sp500 from '../dataset/sp500-intraday.json'; - -const xData = sp500.map((entry) => new Date(Date.parse(entry.date))); - -const data: Array = [...sp500] - .reverse() - .map((entry) => [entry.open, entry.high, entry.low, entry.close]); - -const dollarFormatter = new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD', - maximumFractionDigits: 0, -}); - -const dateFormatter = new Intl.DateTimeFormat('en-US', { - weekday: 'short', - year: 'numeric', - month: 'short', - day: 'numeric', -}); - -const chartSettings = { - series: [{ data }], - height: 400, -} satisfies CandlestickChartProps; - -export default function CustomizedCandlestick() { - return ( - dateFormatter.format(date), - zoom: { minSpan: 1, filterMode: 'discard' }, - }, - ]} - yAxis={[{ valueFormatter: (value: number) => dollarFormatter.format(value) }]} - /> - ); -} diff --git a/docs/data/charts/candlestick/CustomizedCandlestick.tsx.preview b/docs/data/charts/candlestick/CustomizedCandlestick.tsx.preview deleted file mode 100644 index ec0c3750c2399..0000000000000 --- a/docs/data/charts/candlestick/CustomizedCandlestick.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - dateFormatter.format(date), - zoom: { minSpan: 1, filterMode: 'discard' }, - }, - ]} - yAxis={[{ valueFormatter: (value: number) => dollarFormatter.format(value) }]} -/> \ No newline at end of file diff --git a/docs/data/charts/candlestick/DatasetCandlestick.js b/docs/data/charts/candlestick/DatasetCandlestick.js deleted file mode 100644 index 52a6f00553e98..0000000000000 --- a/docs/data/charts/candlestick/DatasetCandlestick.js +++ /dev/null @@ -1,27 +0,0 @@ -import { CandlestickChart } from '@mui/x-charts-premium/CandlestickChart'; -import GOOGL from '../dataset/GOOGL.json'; - -const dataset = GOOGL.map((entry) => ({ - ...entry, - date: new Date(Date.parse(entry.date)), -})); - -export default function DatasetCandlestick() { - return ( - - ); -} diff --git a/docs/data/charts/candlestick/DatasetCandlestick.tsx.preview b/docs/data/charts/candlestick/DatasetCandlestick.tsx.preview deleted file mode 100644 index 25e633bb4f063..0000000000000 --- a/docs/data/charts/candlestick/DatasetCandlestick.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/candlestick/candlestick.md b/docs/data/charts/candlestick/candlestick.md index b6d230dc41b52..4d16735863963 100644 --- a/docs/data/charts/candlestick/candlestick.md +++ b/docs/data/charts/candlestick/candlestick.md @@ -16,7 +16,7 @@ Each candlestick represents a time period and shows where the price started, whe This makes it easier to understand overall trends, compare price movements, and see how buying and selling activity evolves. -{{"demo": "CandlestickOverview.js"}} +{{"component": "file://./demos/candlestick-overview/index.ts"}} ## Basics @@ -36,7 +36,7 @@ const data = [ You can specify the time period with the `xAxis` prop. This axis must have a band scale and its data should have the same length as your series. -{{"demo": "BasicCandlestick.js"}} +{{"component": "file://./demos/basic-candlestick/index.ts"}} ### Using a dataset @@ -44,7 +44,7 @@ You can use the `dataset` prop to provide OHLC data and `datasetKeys` on the ser See the [Dataset](/x/react-charts/dataset/) page to learn more. -{{"demo": "DatasetCandlestick.js"}} +{{"component": "file://./demos/dataset-candlestick/index.ts"}} ## Value formatting @@ -53,7 +53,7 @@ Use the series `valueFormatter` to customize how OHLC values appear in the toolt The `valueFormatter` receives the individual field value (a number) and a context object with `dataIndex` and `field` properties. The `field` property indicates which OHLC component is being formatted: `'open'`, `'high'`, `'low'`, or `'close'`. -{{"demo": "CandlestickValueFormatter.js"}} +{{"component": "file://./demos/candlestick-value-formatter/index.ts"}} ## Customization @@ -61,7 +61,7 @@ Similarly to other chart types, you can customize the appearance and behavior of The example below shows how to define the formatting of values in both axes. -{{"demo": "CustomizedCandlestick.js"}} +{{"component": "file://./demos/customized-candlestick/index.ts"}} ### Color @@ -70,7 +70,7 @@ The `upColor` is used when the close price is greater than or equal to the open Those properties accept callback with type `(mode: 'light' | 'dark') => string`. -{{"demo": "ColorCandlestick.js"}} +{{"component": "file://./demos/color-candlestick/index.ts"}} ### Custom tooltip @@ -107,4 +107,4 @@ A candlestick series requires a band x-axis, so you need to set the `scaleType` Since the candlestick plot is a WebGL canvas, you need to render it inside a `ChartsWebGLLayer`. You can read more about layering in the [Layering](/x/react-charts/composition/#layering) documentation. -{{"demo": "CandlestickComposition.js"}} +{{"component": "file://./demos/candlestick-composition/index.ts"}} diff --git a/docs/data/charts/candlestick/demos/basic-candlestick/BasicCandlestick.tsx b/docs/data/charts/candlestick/demos/basic-candlestick/BasicCandlestick.tsx new file mode 100644 index 0000000000000..99a14c4400d34 --- /dev/null +++ b/docs/data/charts/candlestick/demos/basic-candlestick/BasicCandlestick.tsx @@ -0,0 +1,24 @@ +import { CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart'; +import type { OHLCValueType } from '@mui/x-charts-premium/models'; +import sp500 from '../../../dataset/sp500-intraday.json'; + +const xData = sp500.map((entry) => new Date(Date.parse(entry.date))); + +const data: Array = sp500.map((entry) => [ + entry.open, + entry.high, + entry.low, + entry.close, +]); + +export default function BasicCandlestick() { + return ( + // @focus-start @padding 2 + + // @focus-end + ); +} diff --git a/docs/data/charts/candlestick/demos/basic-candlestick/client.ts b/docs/data/charts/candlestick/demos/basic-candlestick/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/candlestick/demos/basic-candlestick/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/candlestick/demos/basic-candlestick/index.ts b/docs/data/charts/candlestick/demos/basic-candlestick/index.ts new file mode 100644 index 0000000000000..7661b0e485464 --- /dev/null +++ b/docs/data/charts/candlestick/demos/basic-candlestick/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicCandlestick from './BasicCandlestick'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicCandlestick, { ClientProvider }); diff --git a/docs/data/charts/candlestick/CandlestickComposition.tsx b/docs/data/charts/candlestick/demos/candlestick-composition/CandlestickComposition.tsx similarity index 95% rename from docs/data/charts/candlestick/CandlestickComposition.tsx rename to docs/data/charts/candlestick/demos/candlestick-composition/CandlestickComposition.tsx index 755116c24a1ff..5d5872b9bb61c 100644 --- a/docs/data/charts/candlestick/CandlestickComposition.tsx +++ b/docs/data/charts/candlestick/demos/candlestick-composition/CandlestickComposition.tsx @@ -8,9 +8,10 @@ import { LinePlot } from '@mui/x-charts-premium/LineChart'; import { BarPlot } from '@mui/x-charts-premium/BarChart'; import { ChartsXAxis } from '@mui/x-charts-premium/ChartsXAxis'; import { ChartsYAxis } from '@mui/x-charts-premium/ChartsYAxis'; -import { SeriesItem, useAxesTooltip } from '@mui/x-charts-premium/ChartsTooltip'; +import type { SeriesItem } from '@mui/x-charts-premium/ChartsTooltip'; +import { useAxesTooltip } from '@mui/x-charts-premium/ChartsTooltip'; import { ChartsLegend } from '@mui/x-charts-premium/ChartsLegend'; -import { OHLCValueType } from '@mui/x-charts-premium/models'; +import type { OHLCValueType } from '@mui/x-charts-premium/models'; import { ChartsDataProviderPremium } from '@mui/x-charts-premium/ChartsDataProviderPremium'; import { ChartsWrapper } from '@mui/x-charts-premium/ChartsWrapper'; import { ChartsAxisHighlight } from '@mui/x-charts-premium/ChartsAxisHighlight'; @@ -19,7 +20,7 @@ import { useDrawingArea } from '@mui/x-charts-premium/hooks'; import { ChartsWebGLLayer } from '@mui/x-charts-premium/ChartsWebGLLayer'; import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer'; import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer'; -import sp500ohlcv from '../dataset/sp500-2025-ohlcv.json'; // Source: Yahoo Finance +import sp500ohlcv from '../../../dataset/sp500-2025-ohlcv.json'; // Source: Yahoo Finance const xData = sp500ohlcv.map((entry) => new Date(Date.parse(entry.date))); @@ -68,6 +69,7 @@ const formatAsDollar = (value: number) => }); export default function CandlestickComposition() { + // @focus-start @padding 1 const id = useId(); const clipPathId = `${id}-clip-path`; const theme = useTheme(); @@ -165,6 +167,7 @@ export default function CandlestickComposition() { ); + // @focus-end } function CandlestickTooltip() { diff --git a/docs/data/charts/candlestick/demos/candlestick-composition/client.ts b/docs/data/charts/candlestick/demos/candlestick-composition/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/candlestick/demos/candlestick-composition/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/candlestick/demos/candlestick-composition/index.ts b/docs/data/charts/candlestick/demos/candlestick-composition/index.ts new file mode 100644 index 0000000000000..151b46c7480a3 --- /dev/null +++ b/docs/data/charts/candlestick/demos/candlestick-composition/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CandlestickComposition from './CandlestickComposition'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CandlestickComposition, { ClientProvider }); diff --git a/docs/data/charts/candlestick/CandlestickOverview.tsx b/docs/data/charts/candlestick/demos/candlestick-overview/CandlestickOverview.tsx similarity index 97% rename from docs/data/charts/candlestick/CandlestickOverview.tsx rename to docs/data/charts/candlestick/demos/candlestick-overview/CandlestickOverview.tsx index a61e92a28f9b2..8cd2db5f74011 100644 --- a/docs/data/charts/candlestick/CandlestickOverview.tsx +++ b/docs/data/charts/candlestick/demos/candlestick-overview/CandlestickOverview.tsx @@ -14,8 +14,9 @@ import { LinePlot } from '@mui/x-charts-premium/LineChart'; import { BarPlot } from '@mui/x-charts-premium/BarChart'; import { ChartsXAxis } from '@mui/x-charts-premium/ChartsXAxis'; import { ChartsYAxis } from '@mui/x-charts-premium/ChartsYAxis'; -import { SeriesItem, useAxesTooltip } from '@mui/x-charts-premium/ChartsTooltip'; -import { OHLCValueType } from '@mui/x-charts-premium/models'; +import type { SeriesItem } from '@mui/x-charts-premium/ChartsTooltip'; +import { useAxesTooltip } from '@mui/x-charts-premium/ChartsTooltip'; +import type { OHLCValueType } from '@mui/x-charts-premium/models'; import { ChartsDataProviderPremium } from '@mui/x-charts-premium/ChartsDataProviderPremium'; import { ChartsWrapper } from '@mui/x-charts-premium/ChartsWrapper'; import { ChartsAxisHighlight } from '@mui/x-charts-premium/ChartsAxisHighlight'; @@ -30,7 +31,7 @@ import { ChartsToolbarPrintExportTrigger, } from '@mui/x-charts-premium/ChartsToolbarPro'; import { Toolbar, ToolbarButton } from '@mui/x-charts-premium/Toolbar'; -import ohlcv from '../dataset/ibkr-2025-ohlcv.json'; // Source: Yahoo Finance +import ohlcv from '../../../dataset/ibkr-2025-ohlcv.json'; // Source: Yahoo Finance const dividends = [ { date: '2025-02-28T00:00:00', amount: 0.0625 }, @@ -85,6 +86,7 @@ const formatAsDollar = (value: number) => }); export default function CandlestickOverview() { + // @focus-start @padding 1 const id = useId(); const clipPathId = `${id}-clip-path`; const theme = useTheme(); @@ -218,6 +220,7 @@ export default function CandlestickOverview() { Source: Yahoo Finance ); + // @focus-end } function CandlestickToolbar({ diff --git a/docs/data/charts/candlestick/demos/candlestick-overview/client.ts b/docs/data/charts/candlestick/demos/candlestick-overview/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/candlestick/demos/candlestick-overview/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/candlestick/demos/candlestick-overview/index.ts b/docs/data/charts/candlestick/demos/candlestick-overview/index.ts new file mode 100644 index 0000000000000..c8d6c6f72c691 --- /dev/null +++ b/docs/data/charts/candlestick/demos/candlestick-overview/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CandlestickOverview from './CandlestickOverview'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CandlestickOverview, { ClientProvider }); diff --git a/docs/data/charts/candlestick/CandlestickValueFormatter.tsx b/docs/data/charts/candlestick/demos/candlestick-value-formatter/CandlestickValueFormatter.tsx similarity index 79% rename from docs/data/charts/candlestick/CandlestickValueFormatter.tsx rename to docs/data/charts/candlestick/demos/candlestick-value-formatter/CandlestickValueFormatter.tsx index 2e18d9f8633f7..aa0fddf59252b 100644 --- a/docs/data/charts/candlestick/CandlestickValueFormatter.tsx +++ b/docs/data/charts/candlestick/demos/candlestick-value-formatter/CandlestickValueFormatter.tsx @@ -1,9 +1,7 @@ -import { - CandlestickChart as CandlestickChart, - type CandlestickChartProps, -} from '@mui/x-charts-premium/CandlestickChart'; -import { OHLCValueType } from '@mui/x-charts-premium/models'; -import sp500 from '../dataset/sp500-intraday.json'; +import { CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart'; +import type { CandlestickChartProps } from '@mui/x-charts-premium/CandlestickChart'; +import type { OHLCValueType } from '@mui/x-charts-premium/models'; +import sp500 from '../../../dataset/sp500-intraday.json'; const xData = sp500.map((entry) => new Date(Date.parse(entry.date))); @@ -38,6 +36,7 @@ const chartSettings = { export default function CandlestickValueFormatter() { return ( // prettier-ignore + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/candlestick/demos/candlestick-value-formatter/client.ts b/docs/data/charts/candlestick/demos/candlestick-value-formatter/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/candlestick/demos/candlestick-value-formatter/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/candlestick/demos/candlestick-value-formatter/index.ts b/docs/data/charts/candlestick/demos/candlestick-value-formatter/index.ts new file mode 100644 index 0000000000000..d5d0a78e9a1ef --- /dev/null +++ b/docs/data/charts/candlestick/demos/candlestick-value-formatter/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CandlestickValueFormatter from './CandlestickValueFormatter'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CandlestickValueFormatter, { ClientProvider }); diff --git a/docs/data/charts/candlestick/ColorCandlestick.tsx b/docs/data/charts/candlestick/demos/color-candlestick/ColorCandlestick.tsx similarity index 79% rename from docs/data/charts/candlestick/ColorCandlestick.tsx rename to docs/data/charts/candlestick/demos/color-candlestick/ColorCandlestick.tsx index cd0baae98b1fc..285409a19b68f 100644 --- a/docs/data/charts/candlestick/ColorCandlestick.tsx +++ b/docs/data/charts/candlestick/demos/color-candlestick/ColorCandlestick.tsx @@ -1,6 +1,6 @@ import { CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart'; -import { OHLCValueType } from '@mui/x-charts-premium/models'; -import sp500 from '../dataset/sp500-intraday.json'; +import type { OHLCValueType } from '@mui/x-charts-premium/models'; +import sp500 from '../../../dataset/sp500-intraday.json'; const xData = sp500.map((entry) => new Date(Date.parse(entry.date))); @@ -13,6 +13,7 @@ const data: Array = sp500.map((entry) => [ export default function ColorCandlestick() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/candlestick/demos/color-candlestick/client.ts b/docs/data/charts/candlestick/demos/color-candlestick/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/candlestick/demos/color-candlestick/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/candlestick/demos/color-candlestick/index.ts b/docs/data/charts/candlestick/demos/color-candlestick/index.ts new file mode 100644 index 0000000000000..8ad7614f93e07 --- /dev/null +++ b/docs/data/charts/candlestick/demos/color-candlestick/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorCandlestick from './ColorCandlestick'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorCandlestick, { ClientProvider }); diff --git a/docs/data/charts/candlestick/demos/customized-candlestick/CustomizedCandlestick.tsx b/docs/data/charts/candlestick/demos/customized-candlestick/CustomizedCandlestick.tsx new file mode 100644 index 0000000000000..0fe3c53d108af --- /dev/null +++ b/docs/data/charts/candlestick/demos/customized-candlestick/CustomizedCandlestick.tsx @@ -0,0 +1,46 @@ +import { CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart'; +import type { CandlestickChartProps } from '@mui/x-charts-premium/CandlestickChart'; +import type { OHLCValueType } from '@mui/x-charts-premium/models'; +import sp500 from '../../../dataset/sp500-intraday.json'; + +const xData = sp500.map((entry) => new Date(Date.parse(entry.date))); + +const data: Array = [...sp500] + .reverse() + .map((entry) => [entry.open, entry.high, entry.low, entry.close]); + +const dollarFormatter = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + maximumFractionDigits: 0, +}); + +const dateFormatter = new Intl.DateTimeFormat('en-US', { + weekday: 'short', + year: 'numeric', + month: 'short', + day: 'numeric', +}); + +const chartSettings = { + series: [{ data }], + height: 400, +} satisfies CandlestickChartProps; + +export default function CustomizedCandlestick() { + return ( + // @focus-start @padding 2 + dateFormatter.format(date), + zoom: { minSpan: 1, filterMode: 'discard' }, + }, + ]} + yAxis={[{ valueFormatter: (value: number) => dollarFormatter.format(value) }]} + /> + // @focus-end + ); +} diff --git a/docs/data/charts/candlestick/demos/customized-candlestick/client.ts b/docs/data/charts/candlestick/demos/customized-candlestick/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/candlestick/demos/customized-candlestick/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/candlestick/demos/customized-candlestick/index.ts b/docs/data/charts/candlestick/demos/customized-candlestick/index.ts new file mode 100644 index 0000000000000..5555c4d6a1c06 --- /dev/null +++ b/docs/data/charts/candlestick/demos/customized-candlestick/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedCandlestick from './CustomizedCandlestick'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedCandlestick, { ClientProvider }); diff --git a/docs/data/charts/candlestick/DatasetCandlestick.tsx b/docs/data/charts/candlestick/demos/dataset-candlestick/DatasetCandlestick.tsx similarity index 85% rename from docs/data/charts/candlestick/DatasetCandlestick.tsx rename to docs/data/charts/candlestick/demos/dataset-candlestick/DatasetCandlestick.tsx index e943332b7809a..d8f82f720f6e5 100644 --- a/docs/data/charts/candlestick/DatasetCandlestick.tsx +++ b/docs/data/charts/candlestick/demos/dataset-candlestick/DatasetCandlestick.tsx @@ -1,5 +1,5 @@ import { CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart'; -import GOOGL from '../dataset/GOOGL.json'; +import GOOGL from '../../../dataset/GOOGL.json'; const dataset = GOOGL.map((entry) => ({ ...entry, @@ -8,6 +8,7 @@ const dataset = GOOGL.map((entry) => ({ export default function DatasetCandlestick() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/candlestick/demos/dataset-candlestick/client.ts b/docs/data/charts/candlestick/demos/dataset-candlestick/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/candlestick/demos/dataset-candlestick/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/candlestick/demos/dataset-candlestick/index.ts b/docs/data/charts/candlestick/demos/dataset-candlestick/index.ts new file mode 100644 index 0000000000000..319207464b2af --- /dev/null +++ b/docs/data/charts/candlestick/demos/dataset-candlestick/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DatasetCandlestick from './DatasetCandlestick'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DatasetCandlestick, { ClientProvider }); diff --git a/docs/data/charts/components/BasicScaleDemo.js b/docs/data/charts/components/BasicScaleDemo.js deleted file mode 100644 index c8e1af7482f00..0000000000000 --- a/docs/data/charts/components/BasicScaleDemo.js +++ /dev/null @@ -1,66 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { LinePlot } from '@mui/x-charts/LineChart'; -import { useDrawingArea } from '@mui/x-charts/hooks'; - -const StyledPath = styled('path')(({ theme }) => ({ - fill: 'none', - stroke: theme.palette.text.primary, - shapeRendering: 'crispEdges', - strokeWidth: 1, - pointerEvents: 'none', -})); - -const StyledText = styled('text')(({ theme }) => ({ - stroke: 'none', - fill: theme.palette.text.primary, - shapeRendering: 'crispEdges', -})); - -function DrawingAreaBox() { - const { left, top, width, height } = useDrawingArea(); - return ( - - - - - - ({left},{top}) - - - ({left + width},{top + height}) - - - ); -} -export default function BasicScaleDemo() { - return ( - - - - - ); -} diff --git a/docs/data/charts/components/BasicScaleDemo.tsx.preview b/docs/data/charts/components/BasicScaleDemo.tsx.preview deleted file mode 100644 index d76ce229c788c..0000000000000 --- a/docs/data/charts/components/BasicScaleDemo.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/data/charts/components/HtmlLegend.js b/docs/data/charts/components/HtmlLegend.js deleted file mode 100644 index be780c6459a53..0000000000000 --- a/docs/data/charts/components/HtmlLegend.js +++ /dev/null @@ -1,65 +0,0 @@ -import Box from '@mui/material/Box'; -import { useLegend } from '@mui/x-charts/hooks'; -import { ChartsDataProvider } from '@mui/x-charts/ChartsDataProvider'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { BarPlot } from '@mui/x-charts/BarChart'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; - -function MyCustomLegend() { - const { items } = useLegend(); - return ( - - - {items.map((item) => { - return ( - - - - - ); - })} - -
-
-
{`${item.label}`}
- ); -} - -const veryLongText = - "Second Series. You should always try to avoid long sentences. But oftentimes, it's not possible. So, we need to handle them gracefully. This is a very long sentence that should be fully readable."; - -export default function HtmlLegend() { - return ( - - - - - - - - - - - ); -} diff --git a/docs/data/charts/components/HtmlLegend.tsx.preview b/docs/data/charts/components/HtmlLegend.tsx.preview deleted file mode 100644 index 5f73ec35867d7..0000000000000 --- a/docs/data/charts/components/HtmlLegend.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/docs/data/charts/components/OriginDemo.js b/docs/data/charts/components/OriginDemo.js deleted file mode 100644 index 6c8a6d82fadc1..0000000000000 --- a/docs/data/charts/components/OriginDemo.js +++ /dev/null @@ -1,77 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; - -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { LinePlot } from '@mui/x-charts/LineChart'; -import { useDrawingArea, useXScale, useYScale } from '@mui/x-charts/hooks'; - -const x = Array.from({ length: 21 }, (_, index) => -1 + 0.2 * index); -const linear = x.map((v) => -1 + v); -const poly = x.map((v) => -1 + v ** 2 - v); - -const StyledPath = styled('path')(({ theme, color }) => ({ - fill: 'none', - stroke: theme.palette.text[color], - shapeRendering: 'crispEdges', - strokeWidth: 1, - pointerEvents: 'none', -})); - -function CartesianAxis() { - // Get the drawing area bounding box - const { left, top, width, height } = useDrawingArea(); - - // Get the two scale - const yAxisScale = useYScale(); - const xAxisScale = useXScale(); - - const yOrigin = yAxisScale(0); - const xOrigin = xAxisScale(0); - - const xTicks = [-2, -1, 1, 2, 3]; - const yTicks = [-2, -1, 1, 2, 3, 4, 5]; - - return ( - - {yTicks.map((value) => ( - - ))} - {xTicks.map((value) => ( - - ))} - - - - ); -} -export default function OriginDemo() { - return ( - - - - - ); -} diff --git a/docs/data/charts/components/ScaleDemo.js b/docs/data/charts/components/ScaleDemo.js deleted file mode 100644 index 4565f45ab9a0c..0000000000000 --- a/docs/data/charts/components/ScaleDemo.js +++ /dev/null @@ -1,133 +0,0 @@ -import * as React from 'react'; - -import { styled } from '@mui/material/styles'; -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { LinePlot } from '@mui/x-charts/LineChart'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { useDrawingArea, useYScale } from '@mui/x-charts/hooks'; - -const StyledPath = styled('path')(({ theme }) => ({ - fill: 'none', - stroke: theme.palette.text.primary, - shapeRendering: 'crispEdges', - strokeWidth: 1, - pointerEvents: 'none', - strokeDasharray: '5 2', -})); - -const StyledText = styled('text')(({ theme }) => ({ - stroke: 'none', - fill: theme.palette.text.primary, - shapeRendering: 'crispEdges', -})); - -function ValueHighlight(props) { - const { chartRef } = props; - - // Get the drawing area bounding box - const { left, top, width, height } = useDrawingArea(); - - // Get the two scale - const leftAxisScale = useYScale('left_axis_id'); - const rightAxisScale = useYScale('right_axis_id'); - - const [mouseY, setMouseY] = React.useState(null); - - React.useEffect(() => { - const element = chartRef.current; - if (element === null) { - return () => {}; - } - - const handleMouseOut = () => { - setMouseY(null); - }; - - const handleMouseMove = (event) => { - const x = event.offsetX; - const y = event.offsetY; - if (x < left || x > left + width) { - setMouseY(null); - return; - } - if (y < top - 10 || y > top + height + 10) { - // Allows some margin if slightly on top/bottom of the drawing area - setMouseY(null); - return; - } - setMouseY(Math.max(Math.min(top + height, y), top)); // clamp to the drawing area - }; - - element.addEventListener('mouseout', handleMouseOut); - element.addEventListener('mousemove', handleMouseMove); - return () => { - element.removeEventListener('mouseout', handleMouseOut); - element.removeEventListener('mousemove', handleMouseMove); - }; - }, [height, left, top, width, chartRef]); - - if (mouseY === null) { - return null; - } - return ( - - - - {leftAxisScale.invert(mouseY).toFixed(0)} - - - - {rightAxisScale.invert(mouseY).toFixed(0)} - - - ); -} -export default function ScaleDemo() { - const chartRef = React.useRef(null); - return ( - - - - - - - ); -} diff --git a/docs/data/charts/components/SeriesDemo.js b/docs/data/charts/components/SeriesDemo.js deleted file mode 100644 index 1b5e4059228a1..0000000000000 --- a/docs/data/charts/components/SeriesDemo.js +++ /dev/null @@ -1,104 +0,0 @@ -import * as React from 'react'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { LinePlot } from '@mui/x-charts/LineChart'; -import { useLineSeries, useXAxis, useXScale, useYScale } from '@mui/x-charts/hooks'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { ChartsDataProvider } from '@mui/x-charts/ChartsDataProvider'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; - -function ExtremaLabels() { - const lineSeries = useLineSeries(); - - if (!lineSeries) { - return null; - } - - return ( - - {lineSeries.map((series) => ( - - ))} - - ); -} - -function SingleSeriesExtremaLabels({ series }) { - const xAxis = useXAxis('x'); - - const min = series.data.reduce( - (acc, value, index) => - value != null && value < acc.value ? { index, value } : acc, - { index: -1, value: Infinity }, - ); - const max = series.data.reduce( - (acc, value, index) => - value != null && value > acc.value ? { index, value } : acc, - { index: -1, value: -Infinity }, - ); - - return ( - - - - - ); -} - -function PointLabel({ x, y, placement, color }) { - const xAxisScale = useXScale(); - const yAxisScale = useYScale(); - - const left = xAxisScale(x) ?? 0; - const top = (yAxisScale(y) ?? 0) + (placement === 'below' ? 20 : -20); - - return ( - - {y} - - ); -} - -export default function SeriesDemo() { - return ( - - - - - - - - - - - ); -} diff --git a/docs/data/charts/components/SeriesDemo.tsx.preview b/docs/data/charts/components/SeriesDemo.tsx.preview deleted file mode 100644 index 7bf1f13982e7d..0000000000000 --- a/docs/data/charts/components/SeriesDemo.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/docs/data/charts/components/components.md b/docs/data/charts/components/components.md index b3c3fac0a4486..bb06fed565094 100644 --- a/docs/data/charts/components/components.md +++ b/docs/data/charts/components/components.md @@ -33,7 +33,7 @@ import { useDrawingArea } from '@mui/x-charts'; const { left, top, width, height } = useDrawingArea(); ``` -{{"demo": "BasicScaleDemo.js"}} +{{"component": "file://./demos/basic-scale-demo/index.ts"}} ### Scales @@ -66,7 +66,7 @@ const xAxisScale = useXScale(); const xOrigin = xAxisScale(0); ``` -{{"demo": "OriginDemo.js"}} +{{"component": "file://./demos/origin-demo/index.ts"}} #### Coordinate to value @@ -79,7 +79,7 @@ By using `invert()`, the value associated with the current mouse coordinate `y` {leftAxisScale.invert(yCoordinate).toFixed(0)} ``` -{{"demo": "ScaleDemo.js"}} +{{"component": "file://./demos/scale-demo/index.ts"}} ### Series @@ -89,7 +89,7 @@ These hooks return the order of the series and their configuration, including da You can use that information to create custom charts. For example, you can use `useLineSeries()` to obtain the series of a Line Chart and display an indicator of the minimum and maximum values of each series: -{{"demo": "SeriesDemo.js"}} +{{"component": "file://./demos/series-demo/index.ts"}} ## Custom slot props with TypeScript @@ -207,7 +207,7 @@ This lets you create HTML components that interact with the data. In the next example, notice that the `MyCustomLegend` component displays the series names and colors. This creates an HTML `` element, which can be customized in any way. -{{"demo": "HtmlLegend.js"}} +{{"component": "file://./demos/html-legend/index.ts"}} :::warning Note that the HTML components are not part of the SVG hierarchy. diff --git a/docs/data/charts/components/BasicScaleDemo.tsx b/docs/data/charts/components/demos/basic-scale-demo/BasicScaleDemo.tsx similarity index 97% rename from docs/data/charts/components/BasicScaleDemo.tsx rename to docs/data/charts/components/demos/basic-scale-demo/BasicScaleDemo.tsx index c8e1af7482f00..bfd6ab3f2a2e9 100644 --- a/docs/data/charts/components/BasicScaleDemo.tsx +++ b/docs/data/charts/components/demos/basic-scale-demo/BasicScaleDemo.tsx @@ -48,6 +48,7 @@ function DrawingAreaBox() { } export default function BasicScaleDemo() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/components/demos/basic-scale-demo/client.ts b/docs/data/charts/components/demos/basic-scale-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/components/demos/basic-scale-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/components/demos/basic-scale-demo/index.ts b/docs/data/charts/components/demos/basic-scale-demo/index.ts new file mode 100644 index 0000000000000..e0c18dfda0bbd --- /dev/null +++ b/docs/data/charts/components/demos/basic-scale-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicScaleDemo from './BasicScaleDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicScaleDemo, { ClientProvider }); diff --git a/docs/data/charts/components/HtmlLegend.tsx b/docs/data/charts/components/demos/html-legend/HtmlLegend.tsx similarity index 97% rename from docs/data/charts/components/HtmlLegend.tsx rename to docs/data/charts/components/demos/html-legend/HtmlLegend.tsx index be780c6459a53..ffed29d55776f 100644 --- a/docs/data/charts/components/HtmlLegend.tsx +++ b/docs/data/charts/components/demos/html-legend/HtmlLegend.tsx @@ -46,6 +46,7 @@ const veryLongText = export default function HtmlLegend() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/components/demos/html-legend/client.ts b/docs/data/charts/components/demos/html-legend/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/components/demos/html-legend/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/components/demos/html-legend/index.ts b/docs/data/charts/components/demos/html-legend/index.ts new file mode 100644 index 0000000000000..d77508d8b65a4 --- /dev/null +++ b/docs/data/charts/components/demos/html-legend/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HtmlLegend from './HtmlLegend'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HtmlLegend, { ClientProvider }); diff --git a/docs/data/charts/components/OriginDemo.tsx b/docs/data/charts/components/demos/origin-demo/OriginDemo.tsx similarity index 95% rename from docs/data/charts/components/OriginDemo.tsx rename to docs/data/charts/components/demos/origin-demo/OriginDemo.tsx index bf90ba402a469..d1854ec989b48 100644 --- a/docs/data/charts/components/OriginDemo.tsx +++ b/docs/data/charts/components/demos/origin-demo/OriginDemo.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; -import { ScaleLinear } from '@mui/x-charts-vendor/d3-scale'; +import type { ScaleLinear } from '@mui/x-charts-vendor/d3-scale'; import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; import { LinePlot } from '@mui/x-charts/LineChart'; import { useDrawingArea, useXScale, useYScale } from '@mui/x-charts/hooks'; @@ -56,6 +56,7 @@ function CartesianAxis() { } export default function OriginDemo() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/components/demos/origin-demo/client.ts b/docs/data/charts/components/demos/origin-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/components/demos/origin-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/components/demos/origin-demo/index.ts b/docs/data/charts/components/demos/origin-demo/index.ts new file mode 100644 index 0000000000000..81bef269be69b --- /dev/null +++ b/docs/data/charts/components/demos/origin-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import OriginDemo from './OriginDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, OriginDemo, { ClientProvider }); diff --git a/docs/data/charts/components/ScaleDemo.tsx b/docs/data/charts/components/demos/scale-demo/ScaleDemo.tsx similarity index 97% rename from docs/data/charts/components/ScaleDemo.tsx rename to docs/data/charts/components/demos/scale-demo/ScaleDemo.tsx index 2ebc894cb0949..c63abbbc7304a 100644 --- a/docs/data/charts/components/ScaleDemo.tsx +++ b/docs/data/charts/components/demos/scale-demo/ScaleDemo.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ScaleLinear } from '@mui/x-charts-vendor/d3-scale'; +import type { ScaleLinear } from '@mui/x-charts-vendor/d3-scale'; import { styled } from '@mui/material/styles'; import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; import { LinePlot } from '@mui/x-charts/LineChart'; @@ -95,6 +95,7 @@ function ValueHighlight(props: { ); } export default function ScaleDemo() { + // @focus-start @padding 1 const chartRef = React.useRef(null); return ( ); + // @focus-end } diff --git a/docs/data/charts/components/demos/scale-demo/client.ts b/docs/data/charts/components/demos/scale-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/components/demos/scale-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/components/demos/scale-demo/index.ts b/docs/data/charts/components/demos/scale-demo/index.ts new file mode 100644 index 0000000000000..462dd56fb73a1 --- /dev/null +++ b/docs/data/charts/components/demos/scale-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScaleDemo from './ScaleDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScaleDemo, { ClientProvider }); diff --git a/docs/data/charts/components/SeriesDemo.tsx b/docs/data/charts/components/demos/series-demo/SeriesDemo.tsx similarity index 95% rename from docs/data/charts/components/SeriesDemo.tsx rename to docs/data/charts/components/demos/series-demo/SeriesDemo.tsx index f97d842f120eb..5766dbf5c53e2 100644 --- a/docs/data/charts/components/SeriesDemo.tsx +++ b/docs/data/charts/components/demos/series-demo/SeriesDemo.tsx @@ -7,7 +7,7 @@ import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; import { ChartsDataProvider } from '@mui/x-charts/ChartsDataProvider'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; -import { DefaultizedLineSeriesType } from '@mui/x-charts/models'; +import type { DefaultizedLineSeriesType } from '@mui/x-charts/models'; function ExtremaLabels() { const lineSeries = useLineSeries(); @@ -98,6 +98,7 @@ function PointLabel({ export default function SeriesDemo() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/components/demos/series-demo/client.ts b/docs/data/charts/components/demos/series-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/components/demos/series-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/components/demos/series-demo/index.ts b/docs/data/charts/components/demos/series-demo/index.ts new file mode 100644 index 0000000000000..44c664502f64d --- /dev/null +++ b/docs/data/charts/components/demos/series-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SeriesDemo from './SeriesDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SeriesDemo, { ClientProvider }); diff --git a/docs/data/charts/composition/BasicComposition.js b/docs/data/charts/composition/BasicComposition.js deleted file mode 100644 index b71a123ea255f..0000000000000 --- a/docs/data/charts/composition/BasicComposition.js +++ /dev/null @@ -1,56 +0,0 @@ -import * as React from 'react'; -import Paper from '@mui/material/Paper'; -import Box from '@mui/material/Box'; -import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { BarPlot } from '@mui/x-charts/BarChart'; -import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; - -export default function BasicComposition() { - const [isResponsive, setIsResponsive] = React.useState(false); - - const sizingProps = isResponsive ? {} : { width: 500, height: 300 }; - return ( - - setIsResponsive(event.target.checked)} /> - } - label="Use responsive container" - labelPlacement="end" - /> - - - - - - - - - - ); -} diff --git a/docs/data/charts/composition/BellCurveOverlay.js b/docs/data/charts/composition/BellCurveOverlay.js deleted file mode 100644 index bd28a5b7a6754..0000000000000 --- a/docs/data/charts/composition/BellCurveOverlay.js +++ /dev/null @@ -1,137 +0,0 @@ -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { ScatterPlot } from '@mui/x-charts/ScatterChart'; -import { LinePlot } from '@mui/x-charts/LineChart'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; -import { internetUsageByCountry } from '../dataset/internetUsageByCountry'; - -const data = Object.values(internetUsageByCountry); - -function calculateStatistics(values) { - const n = values.length; - const mean = values.reduce((sum, val) => sum + val, 0) / n; - const variance = values.reduce((sum, val) => sum + Math.pow(val - mean, 2), 0) / n; - const stdDev = Math.sqrt(variance); - return { mean, stdDev }; -} - -function normalDistribution(x, mean, stdDev) { - const exponent = -Math.pow(x - mean, 2) / (2 * Math.pow(stdDev, 2)); - return (1 / (stdDev * Math.sqrt(2 * Math.PI))) * Math.exp(exponent); -} - -export default function BellCurveOverlay() { - const { mean, stdDev } = calculateStatistics(data); - - // Generate bell curve data - const min = Math.min(...data); - const max = Math.max(...data); - const range = max - min; - const bellCurveData = []; - const xValues = []; - const numPoints = 100; - - for (let i = 0; i <= numPoints; i += 1) { - const x = min - range * 0.1 + ((max - min + range * 0.2) * i) / numPoints; - xValues.push(x); - bellCurveData.push(normalDistribution(x, mean, stdDev)); - } - - // Stack points that are close together - const binWidth = range / 70; // Adjust this to control stacking sensitivity - const sortedData = [...data].sort((a, b) => a - b); - const bins = new Map(); - - // Group values into bins - sortedData.forEach((value) => { - const binIndex = Math.round(value / binWidth); - if (!bins.has(binIndex)) { - bins.set(binIndex, []); - } - bins.get(binIndex).push(value); - }); - - // Create scatter data with stacked y-positions - const scatterData = []; - let globalIndex = 0; - const baseY = 0.0005; - const stackHeight = 0.001; - - bins.forEach((values) => { - values.forEach((value, stackIndex) => { - scatterData.push({ - x: value, - y: baseY + stackIndex * stackHeight, - id: globalIndex, - }); - globalIndex += 1; - }); - }); - - return ( -
- `${value}%`, - }, - ]} - yAxis={[ - { - position: 'none', - }, - ]} - height={400} - > - - - - - - - - -
- ); -} diff --git a/docs/data/charts/composition/Layering.js b/docs/data/charts/composition/Layering.js deleted file mode 100644 index 85d66f79eca0b..0000000000000 --- a/docs/data/charts/composition/Layering.js +++ /dev/null @@ -1,71 +0,0 @@ -import * as React from 'react'; -import { ChartsDataProviderPremium } from '@mui/x-charts-premium/ChartsDataProviderPremium'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsGrid } from '@mui/x-charts/ChartsGrid'; -import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; -import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; -import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper'; -import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer'; -import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer'; -import { ChartsWebGLLayer } from '@mui/x-charts-premium/ChartsWebGLLayer'; -import { CandlestickPlot } from '@mui/x-charts-premium/CandlestickChart'; - -const ohlcData = [ - [100, 110, 95, 105], - [105, 115, 100, 112], - [112, 120, 108, 118], - [118, 125, 115, 120], - [120, 128, 118, 125], - [125, 130, 120, 122], - [122, 128, 118, 126], - [126, 135, 124, 132], - [132, 140, 130, 138], - [138, 145, 135, 135], - [135, 148, 138, 145], - [145, 152, 142, 148], - [148, 155, 145, 150], - [150, 158, 148, 152], - [152, 162, 151, 151], - [151, 165, 151, 157], - [157, 168, 153, 153], - [153, 160, 151, 152], - [152, 155, 150, 154], - [154, 158, 153, 157], -]; - -const xAxisData = ohlcData.map((_, index) => `Day ${index + 1}`); - -export default function Layering() { - return ( - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/charts/composition/LegendTooltipComposition.js b/docs/data/charts/composition/LegendTooltipComposition.js deleted file mode 100644 index 4d38e2e026e72..0000000000000 --- a/docs/data/charts/composition/LegendTooltipComposition.js +++ /dev/null @@ -1,52 +0,0 @@ -import { ChartsDataProvider } from '@mui/x-charts/ChartsDataProvider'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; -import { ChartsLegend } from '@mui/x-charts/ChartsLegend'; -import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; -import Box from '@mui/material/Box'; - -const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function LegendTooltipComposition() { - return ( - - - - - - - - - - - - - - ); -} diff --git a/docs/data/charts/composition/LimitOverflow.js b/docs/data/charts/composition/LimitOverflow.js deleted file mode 100644 index d52f012c69aaa..0000000000000 --- a/docs/data/charts/composition/LimitOverflow.js +++ /dev/null @@ -1,101 +0,0 @@ -import * as React from 'react'; -import Slider from '@mui/material/Slider'; -import Box from '@mui/material/Box'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import useId from '@mui/utils/useId'; - -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { ScatterPlot } from '@mui/x-charts/ScatterChart'; -import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; -import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsGrid } from '@mui/x-charts/ChartsGrid'; - -import { Chance } from 'chance'; - -const chance = new Chance(42); - -const data = Array.from({ length: 100 }, () => ({ - x: chance.floating({ min: -25, max: 25 }), - y: chance.floating({ min: -25, max: 25 }), -})).map((d, index) => ({ ...d, id: index })); - -const minDistance = 10; - -export default function LimitOverflow() { - const [isLimited, setIsLimited] = React.useState(false); - const [xLimits, setXLimites] = React.useState([-20, 20]); - - const id = useId(); - const clipPathId = `${id}-clip-path`; - - const handleChange = (event, newValue, activeThumb) => { - if (!Array.isArray(newValue)) { - return; - } - - if (newValue[1] - newValue[0] < minDistance) { - if (activeThumb === 0) { - const clamped = Math.min(newValue[0], 100 - minDistance); - setXLimites([clamped, clamped + minDistance]); - } else { - const clamped = Math.max(newValue[1], minDistance); - setXLimites([clamped - minDistance, clamped]); - } - } else { - setXLimites(newValue); - } - }; - - return ( - - setIsLimited(event.target.checked)} /> - } - label="Clip the plot" - labelPlacement="end" - /> - - - - - - - - - - {isLimited && } - - - - ); -} diff --git a/docs/data/charts/composition/SwitchSeriesType.js b/docs/data/charts/composition/SwitchSeriesType.js deleted file mode 100644 index d5f2d8ead82ca..0000000000000 --- a/docs/data/charts/composition/SwitchSeriesType.js +++ /dev/null @@ -1,54 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { BarPlot } from '@mui/x-charts/BarChart'; -import { LinePlot } from '@mui/x-charts/LineChart'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; - -export default function SwitchSeriesType() { - const [type, setType] = React.useState('line'); - - return ( - - setType(event.target.value)} - label="series type" - sx={{ minWidth: 150 }} - > - line - bar - -
- - - - - -
- - ); -} diff --git a/docs/data/charts/composition/WeatherComposition.js b/docs/data/charts/composition/WeatherComposition.js deleted file mode 100644 index 26f18b8c62ca8..0000000000000 --- a/docs/data/charts/composition/WeatherComposition.js +++ /dev/null @@ -1,297 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { BarPlot } from '@mui/x-charts/BarChart'; -import { LineHighlightPlot, LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; -import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsGrid } from '@mui/x-charts/ChartsGrid'; -import { - ChartsTooltipContainer, - ChartsTooltipPaper, - ChartsTooltipTable, - ChartsTooltipRow, - ChartsTooltipCell, - useAxesTooltip, -} from '@mui/x-charts/ChartsTooltip'; -import { ChartsLabelMark } from '@mui/x-charts/ChartsLabel'; -import { axisClasses } from '@mui/x-charts/ChartsAxis'; - -import { forecast } from '../dataset/weatherForecast'; -import { - DayAndTimeHeader, - WeatherMarkers, - MaxPrecipitationBars, - LegendItem, -} from './weatherCompositionComponents'; - -export default function WeatherComposition() { - const [highlightedAxis, setHighlightedAxis] = React.useState([]); - - const sync = { - highlightedAxis, - onHighlightedAxisChange: setHighlightedAxis, - }; - - return ( - - ({ - width: '100%', - [`& .${axisClasses.tick}, & .${axisClasses.line}`]: { - stroke: theme.palette.divider, - }, - [`& .${axisClasses.tickLabel}`]: { - fill: theme.palette.secondary, - }, - })} - > - - - - - - - - - - - - ); -} - -function ForecastChart(props) { - return ( - - value.toLocaleDateString('en-US', { - month: 'short', - day: 'numeric', - hour: 'numeric', - }), - }, - ]} - yAxis={[ - { - id: 'temperature', - min: 6, - max: 26, - width: 50, - valueFormatter: (value) => `${value}°`, - }, - { - id: 'precipitation', - label: 'Precipitation (mm)', - position: 'right', - min: 0, - max: 8, - width: 56, - }, - ]} - series={weatherSeries} - height={310} - margin={{ top: 64, right: 24, bottom: 8, left: 36 }} - > - - - - - - - - - - - - - - - - ); -} - -function WindChart(props) { - return ( - - value.toLocaleDateString('en-US', { - month: 'short', - day: 'numeric', - hour: 'numeric', - }), - }, - ]} - yAxis={[ - { - id: 'wind', - position: 'right', - min: 0, - width: 56, - tickInterval: [0, 4, 8], - }, - ]} - series={windSeries} - height={150} - margin={{ top: 8, right: 24, bottom: 32, left: 86 }} - sx={{ [`& [data-series=gust]`]: { strokeDasharray: '4 4' } }} - > - - - - - - - - - - - ); -} - -function WeatherTooltip({ type }) { - const tooltipData = useAxesTooltip(); - - if ( - !tooltipData || - tooltipData.length === 0 || - (type === 'weather' && - !tooltipData[0].seriesItems.some((item) => item.seriesId === 'temperature')) || - (type === 'wind' && - !tooltipData[0].seriesItems.some((item) => item.seriesId === 'wind')) - ) { - return null; - } - - const { dataIndex, axisFormattedValue } = tooltipData[0]; - const item = forecast[dataIndex]; - - if (!item) { - return null; - } - - const rows = [ - { - label: 'Temperature', - color: colors.temperature, - mark: 'line', - value: `${item.temperature}°C`, - }, - { - label: 'Precipitation', - color: colors.precipitation, - mark: 'square', - value: `${item.precipitation}mm`, - }, - { - label: 'Max precip.', - color: colors.maxPrecipitation, - mark: 'square', - value: `${item.maxPrecipitation}mm`, - }, - { label: 'Wind', color: colors.wind, mark: 'line', value: `${item.wind} m/s` }, - { - label: 'Wind gust', - color: colors.windGust, - mark: 'line', - value: `${item.gust} m/s`, - }, - ]; - - return ( - - - {axisFormattedValue} - - {rows.map((row) => ( - - - - - {row.label} - - - {row.value} - - ))} - - - - ); -} - -const colors = { - temperature: '#c21807', - precipitation: '#1565c0', - maxPrecipitation: '#64b5f6', - wind: '#7e22ce', - windGust: '#7c4dff', -}; - -const weatherSeries = [ - { - id: 'precipitation', - type: 'bar', - dataKey: 'precipitation', - yAxisId: 'precipitation', - label: 'Precipitation', - color: colors.precipitation, - valueFormatter: (value) => (value !== null ? `${value}mm` : ''), - }, - { - id: 'temperature', - type: 'line', - dataKey: 'temperature', - yAxisId: 'temperature', - label: 'Temperature', - color: colors.temperature, - showMark: false, - curve: 'natural', - valueFormatter: (value) => (value !== null ? `${value}°C` : ''), - }, -]; - -const windSeries = [ - { - id: 'wind', - type: 'line', - dataKey: 'wind', - yAxisId: 'wind', - label: 'Wind', - color: colors.wind, - curve: 'linear', - valueFormatter: (value) => (value !== null ? `${value} m/s` : ''), - }, - { - id: 'gust', - type: 'line', - dataKey: 'gust', - yAxisId: 'wind', - label: 'Wind gust', - color: colors.windGust, - curve: 'linear', - valueFormatter: (value) => (value !== null ? `${value} m/s` : ''), - }, -]; diff --git a/docs/data/charts/composition/composition.md b/docs/data/charts/composition/composition.md index 4191634a68eee..0f241c33a2e9e 100644 --- a/docs/data/charts/composition/composition.md +++ b/docs/data/charts/composition/composition.md @@ -18,7 +18,7 @@ This unlocks visualizations that go beyond the standard chart components, while The forecast below combines bars, lines, axes, a synced tooltip, and custom SVG layers in a single composed chart. -{{"demo": "WeatherComposition.js"}} +{{"component": "file://./demos/weather-composition/index.ts"}} The MUI X Charts components follow an architecture based on context providers: you can pass your series and axes definitions to specialized components that transform the data and make it available to its descendants. These descendants can then be composed. @@ -156,7 +156,7 @@ If the parent's dimensions rely on its content, the responsive chart will not re The demo below lets you switch between a chart with discrete dimensions (`width={500} height={300}`) and one with no dimensions defined, so you see how they differ. -{{"demo": "BasicComposition.js" }} +{{"component": "file://./demos/basic-composition/index.ts"}} ### Properties @@ -227,7 +227,7 @@ You can modify the series `type` property to switch between rendering a line and ``` -{{"demo": "SwitchSeriesType.js" }} +{{"component": "file://./demos/switch-series-type/index.ts"}} ## Subcomponents @@ -264,7 +264,7 @@ Here's how to apply it: The demo below lets you toggle clipping for scatter and line plots. Observe how the line markers extend beyond the clip area, rendering on top of the axes. -{{"demo": "LimitOverflow.js" }} +{{"component": "file://./demos/limit-overflow/index.ts"}} :::warning The demo above generates a unique ID with `useId()`. @@ -321,7 +321,7 @@ See [HTML components](/x/react-charts/components/#html-components) for more info You can add interactive elements such as `ChartsAxisHighlight` and `ChartsTooltip` as illustrated in the demo below. -{{"demo": "LegendTooltipComposition.js" }} +{{"component": "file://./demos/legend-tooltip-composition/index.ts"}} :::info By default, `ChartsContainer` listens to mouse events to keep track of where the mouse is located on the chart. @@ -359,7 +359,7 @@ In the example below, we create three layers: 2. A WebGL layer for rendering with `CandlestickPlot`; 3. An SVG layer that renders the axes and crosshair -{{"demo": "Layering.js"}} +{{"component": "file://./demos/layering/index.ts"}} Since all layers are absolutely positioned, they stack on top of each other in the order they are defined. @@ -370,4 +370,4 @@ Since all layers are absolutely positioned, they stack on top of each other in t This example demonstrates how to combine scatter and line plots to overlay a normal distribution curve (known as a bell curve) over scattered data points. The bell curve is calculated based on the mean and standard deviation of the data. -{{"demo": "BellCurveOverlay.js" }} +{{"component": "file://./demos/bell-curve-overlay/index.ts"}} diff --git a/docs/data/charts/composition/BasicComposition.tsx b/docs/data/charts/composition/demos/basic-composition/BasicComposition.tsx similarity index 97% rename from docs/data/charts/composition/BasicComposition.tsx rename to docs/data/charts/composition/demos/basic-composition/BasicComposition.tsx index b71a123ea255f..044fa5e36cfee 100644 --- a/docs/data/charts/composition/BasicComposition.tsx +++ b/docs/data/charts/composition/demos/basic-composition/BasicComposition.tsx @@ -9,6 +9,7 @@ import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; export default function BasicComposition() { + // @focus-start @padding 1 const [isResponsive, setIsResponsive] = React.useState(false); const sizingProps = isResponsive ? {} : { width: 500, height: 300 }; @@ -53,4 +54,5 @@ export default function BasicComposition() { ); + // @focus-end } diff --git a/docs/data/charts/composition/demos/basic-composition/client.ts b/docs/data/charts/composition/demos/basic-composition/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/composition/demos/basic-composition/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/composition/demos/basic-composition/index.ts b/docs/data/charts/composition/demos/basic-composition/index.ts new file mode 100644 index 0000000000000..227438942e91f --- /dev/null +++ b/docs/data/charts/composition/demos/basic-composition/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicComposition from './BasicComposition'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicComposition, { ClientProvider }); diff --git a/docs/data/charts/composition/BellCurveOverlay.tsx b/docs/data/charts/composition/demos/bell-curve-overlay/BellCurveOverlay.tsx similarity index 96% rename from docs/data/charts/composition/BellCurveOverlay.tsx rename to docs/data/charts/composition/demos/bell-curve-overlay/BellCurveOverlay.tsx index 2f82259e86cbb..79f84c7b02011 100644 --- a/docs/data/charts/composition/BellCurveOverlay.tsx +++ b/docs/data/charts/composition/demos/bell-curve-overlay/BellCurveOverlay.tsx @@ -4,7 +4,7 @@ import { LinePlot } from '@mui/x-charts/LineChart'; import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; -import { internetUsageByCountry } from '../dataset/internetUsageByCountry'; +import { internetUsageByCountry } from '../../../dataset/internetUsageByCountry'; const data = Object.values(internetUsageByCountry); @@ -22,6 +22,7 @@ function normalDistribution(x: number, mean: number, stdDev: number) { } export default function BellCurveOverlay() { + // @focus-start @padding 1 const { mean, stdDev } = calculateStatistics(data); // Generate bell curve data @@ -134,4 +135,5 @@ export default function BellCurveOverlay() { ); + // @focus-end } diff --git a/docs/data/charts/composition/demos/bell-curve-overlay/client.ts b/docs/data/charts/composition/demos/bell-curve-overlay/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/composition/demos/bell-curve-overlay/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/composition/demos/bell-curve-overlay/index.ts b/docs/data/charts/composition/demos/bell-curve-overlay/index.ts new file mode 100644 index 0000000000000..7d2a7144d4218 --- /dev/null +++ b/docs/data/charts/composition/demos/bell-curve-overlay/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BellCurveOverlay from './BellCurveOverlay'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BellCurveOverlay, { ClientProvider }); diff --git a/docs/data/charts/composition/Layering.tsx b/docs/data/charts/composition/demos/layering/Layering.tsx similarity index 95% rename from docs/data/charts/composition/Layering.tsx rename to docs/data/charts/composition/demos/layering/Layering.tsx index 70bbf92be9aad..d8fd5a12b5d64 100644 --- a/docs/data/charts/composition/Layering.tsx +++ b/docs/data/charts/composition/demos/layering/Layering.tsx @@ -10,7 +10,7 @@ import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer'; import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer'; import { ChartsWebGLLayer } from '@mui/x-charts-premium/ChartsWebGLLayer'; import { CandlestickPlot as CandlestickPlot } from '@mui/x-charts-premium/CandlestickChart'; -import { OHLCValueType } from '@mui/x-charts-premium/models'; +import type { OHLCValueType } from '@mui/x-charts-premium/models'; const ohlcData: OHLCValueType[] = [ [100, 110, 95, 105], @@ -39,6 +39,7 @@ const xAxisData = ohlcData.map((_, index) => `Day ${index + 1}`); export default function Layering() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/composition/demos/layering/client.ts b/docs/data/charts/composition/demos/layering/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/composition/demos/layering/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/composition/demos/layering/index.ts b/docs/data/charts/composition/demos/layering/index.ts new file mode 100644 index 0000000000000..be6b417b59c3c --- /dev/null +++ b/docs/data/charts/composition/demos/layering/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Layering from './Layering'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Layering, { ClientProvider }); diff --git a/docs/data/charts/composition/LegendTooltipComposition.tsx b/docs/data/charts/composition/demos/legend-tooltip-composition/LegendTooltipComposition.tsx similarity index 96% rename from docs/data/charts/composition/LegendTooltipComposition.tsx rename to docs/data/charts/composition/demos/legend-tooltip-composition/LegendTooltipComposition.tsx index 4d38e2e026e72..4b60db821aa68 100644 --- a/docs/data/charts/composition/LegendTooltipComposition.tsx +++ b/docs/data/charts/composition/demos/legend-tooltip-composition/LegendTooltipComposition.tsx @@ -30,6 +30,7 @@ export default function LegendTooltipComposition() { alignItems: 'center', }} > + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/composition/demos/legend-tooltip-composition/client.ts b/docs/data/charts/composition/demos/legend-tooltip-composition/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/composition/demos/legend-tooltip-composition/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/composition/demos/legend-tooltip-composition/index.ts b/docs/data/charts/composition/demos/legend-tooltip-composition/index.ts new file mode 100644 index 0000000000000..e2d2b7cfe084c --- /dev/null +++ b/docs/data/charts/composition/demos/legend-tooltip-composition/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LegendTooltipComposition from './LegendTooltipComposition'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LegendTooltipComposition, { ClientProvider }); diff --git a/docs/data/charts/composition/LimitOverflow.tsx b/docs/data/charts/composition/demos/limit-overflow/LimitOverflow.tsx similarity index 98% rename from docs/data/charts/composition/LimitOverflow.tsx rename to docs/data/charts/composition/demos/limit-overflow/LimitOverflow.tsx index bb8f03bdf2e33..8e922f2101a9c 100644 --- a/docs/data/charts/composition/LimitOverflow.tsx +++ b/docs/data/charts/composition/demos/limit-overflow/LimitOverflow.tsx @@ -25,6 +25,7 @@ const data = Array.from({ length: 100 }, () => ({ const minDistance = 10; export default function LimitOverflow() { + // @focus-start @padding 1 const [isLimited, setIsLimited] = React.useState(false); const [xLimits, setXLimites] = React.useState([-20, 20]); @@ -102,4 +103,5 @@ export default function LimitOverflow() { /> ); + // @focus-end } diff --git a/docs/data/charts/composition/demos/limit-overflow/client.ts b/docs/data/charts/composition/demos/limit-overflow/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/composition/demos/limit-overflow/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/composition/demos/limit-overflow/index.ts b/docs/data/charts/composition/demos/limit-overflow/index.ts new file mode 100644 index 0000000000000..a716a80c97af2 --- /dev/null +++ b/docs/data/charts/composition/demos/limit-overflow/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LimitOverflow from './LimitOverflow'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LimitOverflow, { ClientProvider }); diff --git a/docs/data/charts/composition/SwitchSeriesType.tsx b/docs/data/charts/composition/demos/switch-series-type/SwitchSeriesType.tsx similarity index 97% rename from docs/data/charts/composition/SwitchSeriesType.tsx rename to docs/data/charts/composition/demos/switch-series-type/SwitchSeriesType.tsx index 0ba03f1c8387f..69402e3ee9f3b 100644 --- a/docs/data/charts/composition/SwitchSeriesType.tsx +++ b/docs/data/charts/composition/demos/switch-series-type/SwitchSeriesType.tsx @@ -8,6 +8,7 @@ import { LinePlot } from '@mui/x-charts/LineChart'; import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; export default function SwitchSeriesType() { + // @focus-start @padding 1 const [type, setType] = React.useState<'line' | 'bar'>('line'); return ( @@ -51,4 +52,5 @@ export default function SwitchSeriesType() { ); + // @focus-end } diff --git a/docs/data/charts/composition/demos/switch-series-type/client.ts b/docs/data/charts/composition/demos/switch-series-type/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/composition/demos/switch-series-type/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/composition/demos/switch-series-type/index.ts b/docs/data/charts/composition/demos/switch-series-type/index.ts new file mode 100644 index 0000000000000..217302b80acb6 --- /dev/null +++ b/docs/data/charts/composition/demos/switch-series-type/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SwitchSeriesType from './SwitchSeriesType'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SwitchSeriesType, { ClientProvider }); diff --git a/docs/data/charts/composition/WeatherComposition.tsx b/docs/data/charts/composition/demos/weather-composition/WeatherComposition.tsx similarity index 97% rename from docs/data/charts/composition/WeatherComposition.tsx rename to docs/data/charts/composition/demos/weather-composition/WeatherComposition.tsx index d8ddfd43d936d..39548a272dac7 100644 --- a/docs/data/charts/composition/WeatherComposition.tsx +++ b/docs/data/charts/composition/demos/weather-composition/WeatherComposition.tsx @@ -18,16 +18,17 @@ import { } from '@mui/x-charts/ChartsTooltip'; import { ChartsLabelMark } from '@mui/x-charts/ChartsLabel'; import { axisClasses } from '@mui/x-charts/ChartsAxis'; -import { AxisItemIdentifier } from '@mui/x-charts/models'; -import { forecast } from '../dataset/weatherForecast'; +import type { AxisItemIdentifier } from '@mui/x-charts/models'; +import { forecast } from '../../../dataset/weatherForecast'; import { DayAndTimeHeader, WeatherMarkers, MaxPrecipitationBars, LegendItem, -} from './weatherCompositionComponents'; +} from '../../weatherCompositionComponents'; export default function WeatherComposition() { + // @focus-start @padding 1 const [highlightedAxis, setHighlightedAxis] = React.useState( [], ); @@ -67,6 +68,7 @@ export default function WeatherComposition() { ); + // @focus-end } type AxisSyncProps = { diff --git a/docs/data/charts/composition/demos/weather-composition/client.ts b/docs/data/charts/composition/demos/weather-composition/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/composition/demos/weather-composition/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/composition/demos/weather-composition/index.ts b/docs/data/charts/composition/demos/weather-composition/index.ts new file mode 100644 index 0000000000000..5a2baca97e950 --- /dev/null +++ b/docs/data/charts/composition/demos/weather-composition/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import WeatherComposition from './WeatherComposition'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, WeatherComposition, { ClientProvider }); diff --git a/docs/data/charts/composition/weatherCompositionComponents.tsx b/docs/data/charts/composition/weatherCompositionComponents.tsx index ba5346233d5b1..39fc3c36a6737 100644 --- a/docs/data/charts/composition/weatherCompositionComponents.tsx +++ b/docs/data/charts/composition/weatherCompositionComponents.tsx @@ -4,7 +4,8 @@ import Stack from '@mui/material/Stack'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import { useDrawingArea, useXScale, useYScale } from '@mui/x-charts/hooks'; -import { forecast, type IconType } from '../dataset/weatherForecast'; +import { forecast } from '../dataset/weatherForecast'; +import type { IconType } from '../dataset/weatherForecast'; export function WeatherIcon({ type }: { type: IconType }) { const isRain = type === 'rain'; diff --git a/docs/data/charts/data-grid-integration/data-grid-integration.md b/docs/data/charts/data-grid-integration/data-grid-integration.md index 910c8df11bbfc..d707fbb0b49f6 100644 --- a/docs/data/charts/data-grid-integration/data-grid-integration.md +++ b/docs/data/charts/data-grid-integration/data-grid-integration.md @@ -14,4 +14,4 @@ Check [Data Grid - Charts integration](/x/react-data-grid/charts-integration/) f The demo below shows how to implement all of the elements mentioned above: -{{"demo": "../../data-grid/charts-integration/GridChartsIntegrationBasic.js", "bg": "inline"}} +{{"component": "file://../../data-grid/charts-integration/demos/grid-charts-integration-basic/index.ts", "bg": "inline"}} diff --git a/docs/data/charts/dataset/AxisValueGetter.js b/docs/data/charts/dataset/AxisValueGetter.js deleted file mode 100644 index 3d0f0a2214fff..0000000000000 --- a/docs/data/charts/dataset/AxisValueGetter.js +++ /dev/null @@ -1,28 +0,0 @@ -import { LineChart } from '@mui/x-charts/LineChart'; - -const dataset = [ - { date: '2025-01-15T10:30:00Z', value: 42 }, - { date: '2025-02-20T14:00:00Z', value: 55 }, - { date: '2025-03-10T08:45:00Z', value: 38 }, - { date: '2025-04-05T16:20:00Z', value: 67 }, - { date: '2025-05-18T11:00:00Z', value: 73 }, - { date: '2025-06-22T09:15:00Z', value: 89 }, -]; - -export default function AxisValueGetter() { - return ( - new Date(item.date), - valueFormatter: (value) => - value.toLocaleDateString('en-US', { month: 'short', year: 'numeric' }), - }, - ]} - series={[{ dataKey: 'value', label: 'Readings' }]} - height={300} - /> - ); -} diff --git a/docs/data/charts/dataset/AxisValueGetter.tsx.preview b/docs/data/charts/dataset/AxisValueGetter.tsx.preview deleted file mode 100644 index 5e8ff11e7eddc..0000000000000 --- a/docs/data/charts/dataset/AxisValueGetter.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - new Date(item.date as string), - valueFormatter: (value: Date) => - value.toLocaleDateString('en-US', { month: 'short', year: 'numeric' }), - }, - ]} - series={[{ dataKey: 'value', label: 'Readings' }]} - height={300} -/> \ No newline at end of file diff --git a/docs/data/charts/dataset/DatasetBasic.js b/docs/data/charts/dataset/DatasetBasic.js deleted file mode 100644 index 3bafb1e29d66a..0000000000000 --- a/docs/data/charts/dataset/DatasetBasic.js +++ /dev/null @@ -1,30 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; - -const dataset = [ - { month: 'Jan', london: 59, paris: 57 }, - { month: 'Feb', london: 50, paris: 52 }, - { month: 'Mar', london: 47, paris: 53 }, - { month: 'Apr', london: 54, paris: 56 }, - { month: 'May', london: 57, paris: 69 }, - { month: 'June', london: 60, paris: 63 }, - { month: 'July', london: 59, paris: 60 }, - { month: 'Aug', london: 65, paris: 60 }, - { month: 'Sept', london: 51, paris: 51 }, - { month: 'Oct', london: 60, paris: 65 }, - { month: 'Nov', london: 67, paris: 64 }, - { month: 'Dec', london: 61, paris: 70 }, -]; - -export default function DatasetBasic() { - return ( - - ); -} diff --git a/docs/data/charts/dataset/DatasetBasic.tsx.preview b/docs/data/charts/dataset/DatasetBasic.tsx.preview deleted file mode 100644 index f4b0ab7f89371..0000000000000 --- a/docs/data/charts/dataset/DatasetBasic.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/dataset/SeriesValueGetter.js b/docs/data/charts/dataset/SeriesValueGetter.js deleted file mode 100644 index 5676661b7ce1c..0000000000000 --- a/docs/data/charts/dataset/SeriesValueGetter.js +++ /dev/null @@ -1,37 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; - -const dataset = [ - { product: 'Widget A', revenue: '1250.50', cost: '800.25' }, - { product: 'Widget B', revenue: '3200.00', cost: '1500.75' }, - { product: 'Widget C', revenue: '890.75', cost: '450.00' }, - { product: 'Widget D', revenue: '2100.30', cost: '1100.50' }, - { product: 'Widget E', revenue: '1750.00', cost: '900.00' }, -]; - -export default function SeriesValueGetter() { - return ( - parseFloat(item.revenue), - valueFormatter: (v) => (v == null ? '' : `$${v.toFixed(2)}`), - }, - { - label: 'Cost', - valueGetter: (item) => parseFloat(item.cost), - valueFormatter: (v) => (v == null ? '' : `$${v.toFixed(2)}`), - }, - { - label: 'Profit', - valueGetter: (item) => parseFloat(item.revenue) - parseFloat(item.cost), - valueFormatter: (v) => (v == null ? '' : `$${v.toFixed(2)}`), - }, - ]} - yAxis={[{ label: 'Amount ($)', width: 60 }]} - height={300} - /> - ); -} diff --git a/docs/data/charts/dataset/countryData.ts b/docs/data/charts/dataset/countryData.ts index ffdaa158c2985..86c3dde8482cb 100644 --- a/docs/data/charts/dataset/countryData.ts +++ b/docs/data/charts/dataset/countryData.ts @@ -1,5 +1,5 @@ -import { ExtendedFeatureCollection } from '@mui/x-charts-premium/Map'; -import { ExtendedFeature } from '@mui/x-charts-vendor/d3-geo'; +import type { ExtendedFeatureCollection } from '@mui/x-charts-premium/Map'; +import type { ExtendedFeature } from '@mui/x-charts-vendor/d3-geo'; export const continents = [ 'Europe', diff --git a/docs/data/charts/dataset/dataset.md b/docs/data/charts/dataset/dataset.md index 11e771d8163f4..f601c860f3da3 100644 --- a/docs/data/charts/dataset/dataset.md +++ b/docs/data/charts/dataset/dataset.md @@ -19,7 +19,7 @@ You can reference individual properties by using This is a convenient alternative to providing `data` directly on each series or axis. It simplifies configuration when multiple series share the same underlying data source, but has no performance impact. -{{"demo": "DatasetBasic.js"}} +{{"component": "file://./demos/dataset-basic/index.ts"}} ## Value getter @@ -44,7 +44,7 @@ xAxis={[ ]} ``` -{{"demo": "AxisValueGetter.js"}} +{{"component": "file://./demos/axis-value-getter/index.ts"}} ### Series value getter @@ -60,7 +60,7 @@ series={[ ]} ``` -{{"demo": "SeriesValueGetter.js"}} +{{"component": "file://./demos/series-value-getter/index.ts"}} ## Multi fields series diff --git a/docs/data/charts/dataset/AxisValueGetter.tsx b/docs/data/charts/dataset/demos/axis-value-getter/AxisValueGetter.tsx similarity index 94% rename from docs/data/charts/dataset/AxisValueGetter.tsx rename to docs/data/charts/dataset/demos/axis-value-getter/AxisValueGetter.tsx index 6338bc1866aa6..0b7577c33bc4b 100644 --- a/docs/data/charts/dataset/AxisValueGetter.tsx +++ b/docs/data/charts/dataset/demos/axis-value-getter/AxisValueGetter.tsx @@ -11,6 +11,7 @@ const dataset = [ export default function AxisValueGetter() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/dataset/demos/axis-value-getter/client.ts b/docs/data/charts/dataset/demos/axis-value-getter/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/dataset/demos/axis-value-getter/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/dataset/demos/axis-value-getter/index.ts b/docs/data/charts/dataset/demos/axis-value-getter/index.ts new file mode 100644 index 0000000000000..c6dcc65ff79c0 --- /dev/null +++ b/docs/data/charts/dataset/demos/axis-value-getter/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AxisValueGetter from './AxisValueGetter'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AxisValueGetter, { ClientProvider }); diff --git a/docs/data/charts/dataset/DatasetBasic.tsx b/docs/data/charts/dataset/demos/dataset-basic/DatasetBasic.tsx similarity index 94% rename from docs/data/charts/dataset/DatasetBasic.tsx rename to docs/data/charts/dataset/demos/dataset-basic/DatasetBasic.tsx index 3bafb1e29d66a..5ca94fd801c92 100644 --- a/docs/data/charts/dataset/DatasetBasic.tsx +++ b/docs/data/charts/dataset/demos/dataset-basic/DatasetBasic.tsx @@ -17,6 +17,7 @@ const dataset = [ export default function DatasetBasic() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/dataset/demos/dataset-basic/client.ts b/docs/data/charts/dataset/demos/dataset-basic/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/dataset/demos/dataset-basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/dataset/demos/dataset-basic/index.ts b/docs/data/charts/dataset/demos/dataset-basic/index.ts new file mode 100644 index 0000000000000..446a55cfb9de9 --- /dev/null +++ b/docs/data/charts/dataset/demos/dataset-basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DatasetBasic from './DatasetBasic'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DatasetBasic, { ClientProvider }); diff --git a/docs/data/charts/dataset/SeriesValueGetter.tsx b/docs/data/charts/dataset/demos/series-value-getter/SeriesValueGetter.tsx similarity index 96% rename from docs/data/charts/dataset/SeriesValueGetter.tsx rename to docs/data/charts/dataset/demos/series-value-getter/SeriesValueGetter.tsx index 7605c0594ccca..09fc50f69acb7 100644 --- a/docs/data/charts/dataset/SeriesValueGetter.tsx +++ b/docs/data/charts/dataset/demos/series-value-getter/SeriesValueGetter.tsx @@ -10,6 +10,7 @@ const dataset = [ export default function SeriesValueGetter() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/dataset/demos/series-value-getter/client.ts b/docs/data/charts/dataset/demos/series-value-getter/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/dataset/demos/series-value-getter/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/dataset/demos/series-value-getter/index.ts b/docs/data/charts/dataset/demos/series-value-getter/index.ts new file mode 100644 index 0000000000000..9dacab41282a7 --- /dev/null +++ b/docs/data/charts/dataset/demos/series-value-getter/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SeriesValueGetter from './SeriesValueGetter'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SeriesValueGetter, { ClientProvider }); diff --git a/docs/data/charts/dataset/temperatureBerlinPorto.tsx b/docs/data/charts/dataset/temperatureBerlinPorto.tsx index 8c21dea71cc16..88572bc7ec854 100644 --- a/docs/data/charts/dataset/temperatureBerlinPorto.tsx +++ b/docs/data/charts/dataset/temperatureBerlinPorto.tsx @@ -1,4 +1,4 @@ -import { RangeBarValueType } from '@mui/x-charts-premium/models'; +import type { RangeBarValueType } from '@mui/x-charts-premium/models'; export const months = [ 'January', diff --git a/docs/data/charts/dataset/usUnemploymentRate.ts b/docs/data/charts/dataset/usUnemploymentRate.ts index 3a9b5bd40a890..7df978449f1ee 100644 --- a/docs/data/charts/dataset/usUnemploymentRate.ts +++ b/docs/data/charts/dataset/usUnemploymentRate.ts @@ -3,7 +3,7 @@ * Updated: Jun 6, 2025 7:46 AM CDT */ -import { AxisValueFormatterContext } from '@mui/x-charts/models'; +import type { AxisValueFormatterContext } from '@mui/x-charts/models'; export const dateAxisFormatter = (value: Date, context: AxisValueFormatterContext<'time'>) => value.toLocaleDateString(undefined, { diff --git a/docs/data/charts/export/ExportChartAsExcel.js b/docs/data/charts/export/ExportChartAsExcel.js deleted file mode 100644 index 8457b22eeb01d..0000000000000 --- a/docs/data/charts/export/ExportChartAsExcel.js +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { BarPlot } from '@mui/x-charts/BarChart'; -import { ChartsDataProviderPremium } from '@mui/x-charts-premium/ChartsDataProviderPremium'; -import { ChartsToolbarPremium } from '@mui/x-charts-premium/ChartsToolbarPremium'; -import { BAR_CHART_PREMIUM_PLUGINS } from '@mui/x-charts-premium/BarChartPremium'; - -import { useChartPremiumExport } from '@mui/x-charts-premium/plugins'; - -// Defined outside the component: plugins contain hooks, so their order must not change. -const plugins = [...BAR_CHART_PREMIUM_PLUGINS, useChartPremiumExport]; - -const settings = { - height: 300, - xAxis: [{ data: ['Q1', 'Q2', 'Q3', 'Q4'], scaleType: 'band' }], - series: [ - { type: 'bar', label: 'Revenue', data: [42, 51, 48, 63] }, - { type: 'bar', label: 'Costs', data: [30, 34, 33, 39] }, - ], -}; - -export default function ExportChartAsExcel() { - return ( - - - Open the export menu and pick Export as Excel - - - - - - - - - - - - - ); -} diff --git a/docs/data/charts/export/ExportChartAsExcel.tsx.preview b/docs/data/charts/export/ExportChartAsExcel.tsx.preview deleted file mode 100644 index efee5c8e7b686..0000000000000 --- a/docs/data/charts/export/ExportChartAsExcel.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - - Open the export menu and pick Export as Excel - - {...settings} plugins={plugins}> - - - - - - - - - \ No newline at end of file diff --git a/docs/data/charts/export/ExportChartAsImage.js b/docs/data/charts/export/ExportChartAsImage.js deleted file mode 100644 index 44fed43ce00ca..0000000000000 --- a/docs/data/charts/export/ExportChartAsImage.js +++ /dev/null @@ -1,95 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import FormControl from '@mui/material/FormControl'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormLabel from '@mui/material/FormLabel'; -import Radio from '@mui/material/Radio'; -import RadioGroup from '@mui/material/RadioGroup'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; -import { useChartProApiRef } from '@mui/x-charts-pro/hooks'; - -function ExportParamsSelector({ apiRef }) { - const [type, setType] = React.useState('image/png'); - const [rawQuality, setRawQuality] = React.useState('0.9'); - const quality = Math.max(0, Math.min(1, Number.parseFloat(rawQuality))); - - return ( - - - - Image Format - - setType(event.target.value)} - > - } - label="image/png" - /> - } - label="image/jpeg" - /> - } - label="image/webp" - /> - - - - setRawQuality(event.target.value)} - disabled={type === 'image/png'} - helperText="Only applicable to lossy formats." - /> - -
- -
- - ); -} - -export default function ExportChartAsImage() { - const apiRef = useChartProApiRef(); - - return ( - - - - - ); -} diff --git a/docs/data/charts/export/ExportChartAsImage.tsx.preview b/docs/data/charts/export/ExportChartAsImage.tsx.preview deleted file mode 100644 index 9fe33fa391417..0000000000000 --- a/docs/data/charts/export/ExportChartAsImage.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/charts/export/ExportChartHideOnExport.js b/docs/data/charts/export/ExportChartHideOnExport.js deleted file mode 100644 index 2a67413e4050c..0000000000000 --- a/docs/data/charts/export/ExportChartHideOnExport.js +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react'; -import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; - -export default function ExportChartHideOnExport() { - return ( - - ); -} diff --git a/docs/data/charts/export/ExportChartOnBeforeExport.js b/docs/data/charts/export/ExportChartOnBeforeExport.js deleted file mode 100644 index 07482a5e40205..0000000000000 --- a/docs/data/charts/export/ExportChartOnBeforeExport.js +++ /dev/null @@ -1,123 +0,0 @@ -import * as React from 'react'; -import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; -import Typography from '@mui/material/Typography'; -import Stack from '@mui/material/Stack'; -import { defaultOnBeforeExport } from '@mui/x-charts-pro/models'; -import { inflationData } from '../dataset/inflationRates'; - -const yAxisFormatter = new Intl.NumberFormat('en-US', { - style: 'percent', - minimumFractionDigits: 0, - maximumFractionDigits: 0, - maximumSignificantDigits: 1, -}); -const percentageFormatter = new Intl.NumberFormat('en-US', { - style: 'percent', - minimumFractionDigits: 2, - maximumFractionDigits: 2, -}); -const seriesValueFormatter = (value) => percentageFormatter.format(value / 100); - -const xAxis = [ - { - data: inflationData.map((p) => p.year), - valueFormatter: (value) => `${value}`, - zoom: true, - }, -]; - -const yAxis = [{ valueFormatter: (value) => yAxisFormatter.format(value / 100) }]; - -const series = [ - { - label: 'Germany', - data: inflationData.map((p) => p.rateDE), - valueFormatter: seriesValueFormatter, - }, - { - label: 'United Kingdom', - data: inflationData.map((p) => p.rateUK), - valueFormatter: seriesValueFormatter, - }, - { - label: 'France', - data: inflationData.map((p) => p.rateFR), - valueFormatter: seriesValueFormatter, - }, -]; - -const settings = { - height: 300, - xAxis, - yAxis, - series, - grid: { horizontal: true }, -}; - -function createOnBeforeExport(titleRef, captionRef) { - return function onBeforeExport(iframe) { - // Apply default modification (removing the toolbar) - defaultOnBeforeExport(iframe); - const document = iframe.contentDocument; - const chart = document.body.firstElementChild; - - // Create a vertical stack to hold the title, chart and caption - const stack = document.createElement('div'); - - stack.style.display = 'flex'; - stack.style.flexDirection = 'column'; - stack.style.width = 'fit-content'; - stack.style.margin = 'auto'; - - document.body.appendChild(stack); - - // Add title to stack - const title = titleRef.current; - if (title) { - const titleClone = title.cloneNode(true); - stack.appendChild(titleClone); - } - - // Move chart to stack (after title) - document.body.removeChild(chart); - stack.appendChild(chart); - - // Add caption to stack - const caption = captionRef.current; - if (caption) { - const captionClone = caption.cloneNode(true); - captionClone.style.alignSelf = 'start'; - stack.appendChild(captionClone); - } - }; -} - -export default function ExportChartOnBeforeExport() { - const titleRef = React.useRef(null); - const captionRef = React.useRef(null); - const onBeforeExport = React.useMemo( - () => createOnBeforeExport(titleRef, captionRef), - [], - ); - - return ( - - - Inflation rate in France, Germany and the UK, 1960-2024 - - - - Source: World Bank - - - ); -} diff --git a/docs/data/charts/export/ExportChartOnBeforeExport.tsx.preview b/docs/data/charts/export/ExportChartOnBeforeExport.tsx.preview deleted file mode 100644 index fa64b4ea1c3b8..0000000000000 --- a/docs/data/charts/export/ExportChartOnBeforeExport.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - Inflation rate in France, Germany and the UK, 1960-2024 - - - - Source: World Bank - \ No newline at end of file diff --git a/docs/data/charts/export/ExportChartToolbar.js b/docs/data/charts/export/ExportChartToolbar.js deleted file mode 100644 index 0ea0ba530dbae..0000000000000 --- a/docs/data/charts/export/ExportChartToolbar.js +++ /dev/null @@ -1,65 +0,0 @@ -import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; -import Typography from '@mui/material/Typography'; -import Stack from '@mui/material/Stack'; -import { inflationData } from '../dataset/inflationRates'; - -const yAxisFormatter = new Intl.NumberFormat('en-US', { - style: 'percent', - minimumFractionDigits: 0, - maximumFractionDigits: 0, - maximumSignificantDigits: 1, -}); -const percentageFormatter = new Intl.NumberFormat('en-US', { - style: 'percent', - minimumFractionDigits: 2, - maximumFractionDigits: 2, -}); -const seriesValueFormatter = (value) => percentageFormatter.format(value / 100); - -const xAxis = [ - { - data: inflationData.map((p) => p.year), - valueFormatter: (value) => `${value}`, - zoom: true, - }, -]; - -const yAxis = [{ valueFormatter: (value) => yAxisFormatter.format(value / 100) }]; - -const series = [ - { - label: 'Germany', - data: inflationData.map((p) => p.rateDE), - valueFormatter: seriesValueFormatter, - }, - { - label: 'United Kingdom', - data: inflationData.map((p) => p.rateUK), - valueFormatter: seriesValueFormatter, - }, - { - label: 'France', - data: inflationData.map((p) => p.rateFR), - valueFormatter: seriesValueFormatter, - }, -]; - -const settings = { - height: 300, - xAxis, - yAxis, - series, - grid: { horizontal: true }, -}; - -export default function ExportChartToolbar() { - return ( - - - Inflation rate in France, Germany and the UK, 1960-2024 - - - Source: World Bank - - ); -} diff --git a/docs/data/charts/export/ExportChartToolbar.tsx.preview b/docs/data/charts/export/ExportChartToolbar.tsx.preview deleted file mode 100644 index 03a4fdeea6c45..0000000000000 --- a/docs/data/charts/export/ExportChartToolbar.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - Inflation rate in France, Germany and the UK, 1960-2024 - - -Source: World Bank \ No newline at end of file diff --git a/docs/data/charts/export/ExportChartToolbarCustomization.js b/docs/data/charts/export/ExportChartToolbarCustomization.js deleted file mode 100644 index bcaea8e3bbfec..0000000000000 --- a/docs/data/charts/export/ExportChartToolbarCustomization.js +++ /dev/null @@ -1,139 +0,0 @@ -import * as React from 'react'; - -import Typography from '@mui/material/Typography'; -import Stack from '@mui/material/Stack'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; - -import { continents, countryData } from '../dataset/countryData'; -import { populationGdpPerCapitaData } from './populationGdpPerCapitaData'; -import ExportOptionSelector from './ExportOptionSelector'; - -const populationFormatter = new Intl.NumberFormat('en-US', { - notation: 'compact', -}); -const gdpPerCapitaFormatter = new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD', - notation: 'compact', -}); - -const series = continents.map((continent) => ({ - label: continent, - data: populationGdpPerCapitaData[continent].map((p) => ({ - x: p.population, - y: p.gdpPerCapita, - id: countryData[p.code].country, - })), - valueFormatter: (value) => - `${value.id}: ${populationFormatter.format(value.x)} people, ${gdpPerCapitaFormatter.format(value.y)} GDP per capita`, - highlightScope: { - highlight: 'item', - fade: 'global', - }, -})); - -const fileName = 'Population_vs_GDP_Per_Capita_USD_2019'; - -export default function ExportChartToolbarCustomization() { - const apiRef = React.useRef(undefined); - const [formats, setFormats] = React.useState({ - print: true, - 'image/png': true, - 'image/jpeg': false, - 'image/webp': false, - }); - - const imageExportOptions = Object.entries(formats) - .filter(([key, value]) => key.startsWith('image/') && value) - .map(([key]) => ({ type: key, fileName })); - - const handleChange = (event) => { - setFormats((prev) => ({ - ...prev, - [event.target.name]: event.target.checked, - })); - }; - - return ( - - - Population vs GDP Per Capita (USD), 2019 - - { - if (context.location === 'tick' && context.defaultTickLabel === '') { - return ''; - } - return populationFormatter.format(value); - }, - zoom: true, - label: 'Population', - }, - ]} - series={series} - yAxis={[ - { - scaleType: 'log', - valueFormatter: (value) => gdpPerCapitaFormatter.format(value), - label: 'GDP per Capita', - }, - ]} - showToolbar - grid={{ horizontal: true }} - slotProps={{ - toolbar: { - printOptions: { disableToolbarButton: !formats.print, fileName }, - imageExportOptions, - }, - }} - /> - - Source: World Bank - - - - - `{ ${Object.entries(option) - .map(([key, value]) => { - if (key === 'fileName') { - return 'filename'; - } - return `${key}: ${JSON.stringify(value)}`; - }) - .join(' , ')} }`, - ) - .join(',\n ')} - ]` - } - }, - }} -/>`} - language="jsx" - copyButtonHidden - /> - - - ); -} diff --git a/docs/data/charts/export/ExportCompositionNoSnap.js b/docs/data/charts/export/ExportCompositionNoSnap.js deleted file mode 100644 index 13aefa165dfbf..0000000000000 --- a/docs/data/charts/export/ExportCompositionNoSnap.js +++ /dev/null @@ -1,85 +0,0 @@ -import * as React from 'react'; -import { BarPlot } from '@mui/x-charts/BarChart'; -import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { useChartRootRef } from '@mui/x-charts/hooks'; -import Button from '@mui/material/Button'; -import { Stack } from '@mui/system'; -import { ChartsDataProviderPro } from '@mui/x-charts-pro/ChartsDataProviderPro'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsLegend } from '@mui/x-charts/ChartsLegend'; -import { useChartProApiRef } from '@mui/x-charts-pro/hooks'; -import Typography from '@mui/material/Typography'; - -function CustomChartWrapper({ children }) { - const chartRootRef = useChartRootRef(); - - return ( -
- {children} -
- ); -} - -export default function ExportCompositionNoSnap() { - const apiRef = useChartProApiRef(); - - return ( - - - - - Composite Chart - - - - - - - - - - - - ); -} diff --git a/docs/data/charts/export/PrintChart.js b/docs/data/charts/export/PrintChart.js deleted file mode 100644 index e59ca7b12f997..0000000000000 --- a/docs/data/charts/export/PrintChart.js +++ /dev/null @@ -1,197 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; -import Select from '@mui/material/Select'; -import InputLabel from '@mui/material/InputLabel'; -import FormControl from '@mui/material/FormControl'; -import MenuItem from '@mui/material/MenuItem'; -import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; - -import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; -import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; -import { Heatmap } from '@mui/x-charts-pro/Heatmap'; -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; -import { useChartProApiRef } from '@mui/x-charts-pro/hooks'; -import { RadarChartPro } from '@mui/x-charts-pro/RadarChartPro'; -import { PieChartPro } from '@mui/x-charts-pro/PieChartPro'; -import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; -import { data } from './randomData'; -import { heatmapData } from './heatmapData'; - -const scatterSeries = [ - { - label: 'Series A', - data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })), - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })), - }, -]; - -const sankeySeries = { - data: { - links: [ - { source: 'A', target: 'B', value: 10 }, - { source: 'A', target: 'C', value: 5 }, - { source: 'B', target: 'D', value: 8 }, - { source: 'C', target: 'D', value: 3 }, - ], - }, -}; -const series = [ - { label: 'Series A', data: data.map((p) => p.y1) }, - { label: 'Series B', data: data.map((p) => p.y2) }, -]; - -export default function PrintChart() { - const [chartType, setChartType] = React.useState('scatter'); - const apiRef = useChartProApiRef(); - - const handleChange = (event) => setChartType(event.target.value); - - return ( - - - - Chart Type - - - - - - - ); -} - -function Chart({ apiRef, type }) { - switch (type) { - case 'scatter': - return ; - - case 'line': - return ( - p.x1).toSorted((a, b) => a - b) }]} - series={series} - /> - ); - - case 'bar': - return ( - Math.round(p.x1)).toSorted((a, b) => a - b) }, - ]} - series={series} - /> - ); - - case 'pie': - return ( - - ); - - case 'heatmap': - return ( - - ); - - case 'funnel': - return ( - - ); - - case 'radar': - return ( - - ); - - case 'sankey': - return ; - - default: - throw new Error(`Unknown chart type: ${type}`); - } -} diff --git a/docs/data/charts/export/ExportChartAsExcel.tsx b/docs/data/charts/export/demos/export-chart-as-excel/ExportChartAsExcel.tsx similarity index 97% rename from docs/data/charts/export/ExportChartAsExcel.tsx rename to docs/data/charts/export/demos/export-chart-as-excel/ExportChartAsExcel.tsx index 099ba3454c1ef..1e271eb7b7d1a 100644 --- a/docs/data/charts/export/ExportChartAsExcel.tsx +++ b/docs/data/charts/export/demos/export-chart-as-excel/ExportChartAsExcel.tsx @@ -33,6 +33,7 @@ const settings = { export default function ExportChartAsExcel() { return ( + {/* @focus-start */} Open the export menu and pick Export as Excel @@ -46,6 +47,7 @@ export default function ExportChartAsExcel() { + {/* @focus-end */} ); } diff --git a/docs/data/charts/export/demos/export-chart-as-excel/client.ts b/docs/data/charts/export/demos/export-chart-as-excel/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/export/demos/export-chart-as-excel/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/export/demos/export-chart-as-excel/index.ts b/docs/data/charts/export/demos/export-chart-as-excel/index.ts new file mode 100644 index 0000000000000..a3e3905b5bc8c --- /dev/null +++ b/docs/data/charts/export/demos/export-chart-as-excel/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ExportChartAsExcel from './ExportChartAsExcel'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ExportChartAsExcel, { ClientProvider }); diff --git a/docs/data/charts/export/ExportChartAsImage.tsx b/docs/data/charts/export/demos/export-chart-as-image/ExportChartAsImage.tsx similarity index 96% rename from docs/data/charts/export/ExportChartAsImage.tsx rename to docs/data/charts/export/demos/export-chart-as-image/ExportChartAsImage.tsx index 023801ef8fcdf..0a959a2653808 100644 --- a/docs/data/charts/export/ExportChartAsImage.tsx +++ b/docs/data/charts/export/demos/export-chart-as-image/ExportChartAsImage.tsx @@ -9,7 +9,7 @@ import Stack from '@mui/material/Stack'; import TextField from '@mui/material/TextField'; import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; import { useChartProApiRef } from '@mui/x-charts-pro/hooks'; -import { ChartProApi } from '@mui/x-charts-pro/context'; +import type { ChartProApi } from '@mui/x-charts-pro/context'; function ExportParamsSelector({ apiRef, @@ -78,6 +78,7 @@ function ExportParamsSelector({ } export default function ExportChartAsImage() { + // @focus-start @padding 1 const apiRef = useChartProApiRef<'line'>(); return ( @@ -99,4 +100,5 @@ export default function ExportChartAsImage() { ); + // @focus-end } diff --git a/docs/data/charts/export/demos/export-chart-as-image/client.ts b/docs/data/charts/export/demos/export-chart-as-image/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/export/demos/export-chart-as-image/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/export/demos/export-chart-as-image/index.ts b/docs/data/charts/export/demos/export-chart-as-image/index.ts new file mode 100644 index 0000000000000..107318063ca93 --- /dev/null +++ b/docs/data/charts/export/demos/export-chart-as-image/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ExportChartAsImage from './ExportChartAsImage'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ExportChartAsImage, { ClientProvider }); diff --git a/docs/data/charts/export/ExportChartHideOnExport.tsx b/docs/data/charts/export/demos/export-chart-hide-on-export/ExportChartHideOnExport.tsx similarity index 92% rename from docs/data/charts/export/ExportChartHideOnExport.tsx rename to docs/data/charts/export/demos/export-chart-hide-on-export/ExportChartHideOnExport.tsx index 3f6d9b980770b..d8eebe50908b7 100644 --- a/docs/data/charts/export/ExportChartHideOnExport.tsx +++ b/docs/data/charts/export/demos/export-chart-hide-on-export/ExportChartHideOnExport.tsx @@ -3,6 +3,7 @@ import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; export default function ExportChartHideOnExport() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/export/demos/export-chart-hide-on-export/client.ts b/docs/data/charts/export/demos/export-chart-hide-on-export/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/export/demos/export-chart-hide-on-export/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/export/demos/export-chart-hide-on-export/index.ts b/docs/data/charts/export/demos/export-chart-hide-on-export/index.ts new file mode 100644 index 0000000000000..3f8317f27e6c8 --- /dev/null +++ b/docs/data/charts/export/demos/export-chart-hide-on-export/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ExportChartHideOnExport from './ExportChartHideOnExport'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ExportChartHideOnExport, { ClientProvider }); diff --git a/docs/data/charts/export/ExportChartOnBeforeExport.tsx b/docs/data/charts/export/demos/export-chart-on-before-export/ExportChartOnBeforeExport.tsx similarity index 96% rename from docs/data/charts/export/ExportChartOnBeforeExport.tsx rename to docs/data/charts/export/demos/export-chart-on-before-export/ExportChartOnBeforeExport.tsx index 45d19f4c084e6..e0e9f499a76fc 100644 --- a/docs/data/charts/export/ExportChartOnBeforeExport.tsx +++ b/docs/data/charts/export/demos/export-chart-on-before-export/ExportChartOnBeforeExport.tsx @@ -3,7 +3,7 @@ import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; import { defaultOnBeforeExport } from '@mui/x-charts-pro/models'; -import { inflationData } from '../dataset/inflationRates'; +import { inflationData } from '../../../dataset/inflationRates'; const yAxisFormatter = new Intl.NumberFormat('en-US', { style: 'percent', @@ -99,6 +99,7 @@ function createOnBeforeExport( } export default function ExportChartOnBeforeExport() { + // @focus-start @padding 1 const titleRef = React.useRef(null); const captionRef = React.useRef(null); const onBeforeExport = React.useMemo( @@ -126,4 +127,5 @@ export default function ExportChartOnBeforeExport() { ); + // @focus-end } diff --git a/docs/data/charts/export/demos/export-chart-on-before-export/client.ts b/docs/data/charts/export/demos/export-chart-on-before-export/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/export/demos/export-chart-on-before-export/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/export/demos/export-chart-on-before-export/index.ts b/docs/data/charts/export/demos/export-chart-on-before-export/index.ts new file mode 100644 index 0000000000000..d1bba6fd2409e --- /dev/null +++ b/docs/data/charts/export/demos/export-chart-on-before-export/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ExportChartOnBeforeExport from './ExportChartOnBeforeExport'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ExportChartOnBeforeExport, { ClientProvider }); diff --git a/docs/data/charts/export/ExportChartToolbarCustomization.tsx b/docs/data/charts/export/demos/export-chart-toolbar-customization/ExportChartToolbarCustomization.tsx similarity index 91% rename from docs/data/charts/export/ExportChartToolbarCustomization.tsx rename to docs/data/charts/export/demos/export-chart-toolbar-customization/ExportChartToolbarCustomization.tsx index b2a7c4c30a01f..eb9d94ee387cb 100644 --- a/docs/data/charts/export/ExportChartToolbarCustomization.tsx +++ b/docs/data/charts/export/demos/export-chart-toolbar-customization/ExportChartToolbarCustomization.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import { ChartProApi } from '@mui/x-charts-pro/context'; +import type { ChartProApi } from '@mui/x-charts-pro/context'; import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; -import { ScatterValueType } from '@mui/x-charts/models'; -import { continents, countryData } from '../dataset/countryData'; -import { populationGdpPerCapitaData } from './populationGdpPerCapitaData'; -import ExportOptionSelector from './ExportOptionSelector'; +import type { ScatterValueType } from '@mui/x-charts/models'; +import { continents, countryData } from '../../../dataset/countryData'; +import { populationGdpPerCapitaData } from '../../populationGdpPerCapitaData'; +import ExportOptionSelector from '../../ExportOptionSelector'; const populationFormatter = new Intl.NumberFormat('en-US', { notation: 'compact', @@ -42,6 +42,7 @@ const series = continents.map( const fileName = 'Population_vs_GDP_Per_Capita_USD_2019'; export default function ExportChartToolbarCustomization() { + // @focus-start @padding 1 const apiRef = React.useRef(undefined); const [formats, setFormats] = React.useState({ print: true, @@ -142,4 +143,5 @@ export default function ExportChartToolbarCustomization() { ); + // @focus-end } diff --git a/docs/data/charts/export/demos/export-chart-toolbar-customization/client.ts b/docs/data/charts/export/demos/export-chart-toolbar-customization/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/export/demos/export-chart-toolbar-customization/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/export/demos/export-chart-toolbar-customization/index.ts b/docs/data/charts/export/demos/export-chart-toolbar-customization/index.ts new file mode 100644 index 0000000000000..5a79b0bdd6dbc --- /dev/null +++ b/docs/data/charts/export/demos/export-chart-toolbar-customization/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ExportChartToolbarCustomization from './ExportChartToolbarCustomization'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ExportChartToolbarCustomization, { ClientProvider }); diff --git a/docs/data/charts/export/ExportChartToolbar.tsx b/docs/data/charts/export/demos/export-chart-toolbar/ExportChartToolbar.tsx similarity index 93% rename from docs/data/charts/export/ExportChartToolbar.tsx rename to docs/data/charts/export/demos/export-chart-toolbar/ExportChartToolbar.tsx index a0cfdc0500425..e3040740f53e8 100644 --- a/docs/data/charts/export/ExportChartToolbar.tsx +++ b/docs/data/charts/export/demos/export-chart-toolbar/ExportChartToolbar.tsx @@ -1,7 +1,7 @@ import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; -import { inflationData } from '../dataset/inflationRates'; +import { inflationData } from '../../../dataset/inflationRates'; const yAxisFormatter = new Intl.NumberFormat('en-US', { style: 'percent', @@ -58,11 +58,13 @@ const settings = { export default function ExportChartToolbar() { return ( + {/* @focus-start */} Inflation rate in France, Germany and the UK, 1960-2024 Source: World Bank + {/* @focus-end */} ); } diff --git a/docs/data/charts/export/demos/export-chart-toolbar/client.ts b/docs/data/charts/export/demos/export-chart-toolbar/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/export/demos/export-chart-toolbar/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/export/demos/export-chart-toolbar/index.ts b/docs/data/charts/export/demos/export-chart-toolbar/index.ts new file mode 100644 index 0000000000000..7d6aeb54e5dd6 --- /dev/null +++ b/docs/data/charts/export/demos/export-chart-toolbar/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ExportChartToolbar from './ExportChartToolbar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ExportChartToolbar, { ClientProvider }); diff --git a/docs/data/charts/export/ExportCompositionNoSnap.tsx b/docs/data/charts/export/demos/export-composition-no-snap/ExportCompositionNoSnap.tsx similarity index 98% rename from docs/data/charts/export/ExportCompositionNoSnap.tsx rename to docs/data/charts/export/demos/export-composition-no-snap/ExportCompositionNoSnap.tsx index 86db4ee2a2db0..67f062d2b6335 100644 --- a/docs/data/charts/export/ExportCompositionNoSnap.tsx +++ b/docs/data/charts/export/demos/export-composition-no-snap/ExportCompositionNoSnap.tsx @@ -26,6 +26,7 @@ function CustomChartWrapper({ children }: React.PropsWithChildren) { } export default function ExportCompositionNoSnap() { + // @focus-start @padding 1 const apiRef = useChartProApiRef<'composition'>(); return ( @@ -82,4 +83,5 @@ export default function ExportCompositionNoSnap() { ); + // @focus-end } diff --git a/docs/data/charts/export/demos/export-composition-no-snap/client.ts b/docs/data/charts/export/demos/export-composition-no-snap/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/export/demos/export-composition-no-snap/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/export/demos/export-composition-no-snap/index.ts b/docs/data/charts/export/demos/export-composition-no-snap/index.ts new file mode 100644 index 0000000000000..53804101d41ce --- /dev/null +++ b/docs/data/charts/export/demos/export-composition-no-snap/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ExportCompositionNoSnap from './ExportCompositionNoSnap'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ExportCompositionNoSnap, { ClientProvider }); diff --git a/docs/data/charts/export/PrintChart.tsx b/docs/data/charts/export/demos/print-chart/PrintChart.tsx similarity index 95% rename from docs/data/charts/export/PrintChart.tsx rename to docs/data/charts/export/demos/print-chart/PrintChart.tsx index d13f81e89269e..f4a5b8eedaabb 100644 --- a/docs/data/charts/export/PrintChart.tsx +++ b/docs/data/charts/export/demos/print-chart/PrintChart.tsx @@ -1,12 +1,13 @@ import * as React from 'react'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import type { SelectChangeEvent } from '@mui/material/Select'; +import Select from '@mui/material/Select'; import InputLabel from '@mui/material/InputLabel'; import FormControl from '@mui/material/FormControl'; import MenuItem from '@mui/material/MenuItem'; import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; -import { ChartProApi } from '@mui/x-charts-pro/context'; +import type { ChartProApi } from '@mui/x-charts-pro/context'; import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; import { Heatmap } from '@mui/x-charts-pro/Heatmap'; @@ -15,8 +16,8 @@ import { useChartProApiRef } from '@mui/x-charts-pro/hooks'; import { RadarChartPro } from '@mui/x-charts-pro/RadarChartPro'; import { PieChartPro } from '@mui/x-charts-pro/PieChartPro'; import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; -import { data } from './randomData'; -import { heatmapData } from './heatmapData'; +import { data } from '../../randomData'; +import { heatmapData } from '../../heatmapData'; const scatterSeries = [ { @@ -47,6 +48,7 @@ type ChartType = 'scatter' | 'line' | 'bar' | 'pie' | 'heatmap' | 'funnel' | 'radar' | 'sankey'; export default function PrintChart() { + // @focus-start @padding 1 const [chartType, setChartType] = React.useState('scatter'); const apiRef = useChartProApiRef(); @@ -92,6 +94,7 @@ export default function PrintChart() { ); + // @focus-end } function Chart({ diff --git a/docs/data/charts/export/demos/print-chart/client.ts b/docs/data/charts/export/demos/print-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/export/demos/print-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/export/demos/print-chart/index.ts b/docs/data/charts/export/demos/print-chart/index.ts new file mode 100644 index 0000000000000..10044e979fe8d --- /dev/null +++ b/docs/data/charts/export/demos/print-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PrintChart from './PrintChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PrintChart, { ClientProvider }); diff --git a/docs/data/charts/export/export.md b/docs/data/charts/export/export.md index 5c8a4c8874793..b32a8b832431a 100644 --- a/docs/data/charts/export/export.md +++ b/docs/data/charts/export/export.md @@ -35,7 +35,7 @@ By default, the toolbar is not displayed on exported media. You can override the `onBeforeExport` callback to change this behavior. ::: -{{"demo": "ExportChartToolbar.js"}} +{{"component": "file://./demos/export-chart-toolbar/index.ts"}} ### Custom toolbar @@ -91,7 +91,7 @@ If the browser does not support a requested image format, the export defaults to In the example below, you can toggle which export formats are available to the user. The name of the exported file has been customized to resemble the chart's title. -{{"demo": "ExportChartToolbarCustomization.js"}} +{{"component": "file://./demos/export-chart-toolbar-customization/index.ts"}} ### Add custom styles before exporting @@ -102,7 +102,7 @@ The `onBeforeExport` callback gives you access to the iframe before the export p For example, you can add the title and caption to the exported chart as shown below: -{{"demo": "ExportChartOnBeforeExport.js"}} +{{"component": "file://./demos/export-chart-on-before-export/index.ts"}} :::info If you don't want to manually add elements to the chart export, you can create a chart through composition and include the elements you want to export as part of the chart. @@ -114,7 +114,7 @@ See [Exporting composed charts](#exporting-composed-charts) below for more infor Mark any element with the `data-hide-on-export` attribute to exclude it from image and print exports. The attribute works on any HTML or SVG element in the chart tree. -{{"demo": "ExportChartHideOnExport.js"}} +{{"component": "file://./demos/export-chart-hide-on-export/index.ts"}} To hide an internal MUI X Charts component (such as the legend) that you do not render directly, forward the attribute through `slotProps`: @@ -174,7 +174,7 @@ See [Composition](/x/react-charts/composition/) for more details on implementing To use a custom wrapper instead, you must set the reference to the root element with the `useChartRootRef()` hook as shown below: -{{"demo": "ExportCompositionNoSnap.js"}} +{{"component": "file://./demos/export-composition-no-snap/index.ts"}} ## Content Security Policy (CSP) @@ -202,7 +202,7 @@ const plugins = [...BAR_CHART_PREMIUM_PLUGINS, useChartPremiumExport]; With the plugin registered, `ChartsToolbarPremium` adds an **Export as Excel** entry to the export menu. The entry is left out when the chart does not register the plugin, so the menu never offers an export that cannot run. -{{"demo": "ExportChartAsExcel.js"}} +{{"component": "file://./demos/export-chart-as-excel/index.ts"}} :::info The single-component charts, such as `BarChartPremium`, do not accept a `plugins` prop, so the Excel export is only available on composed charts. @@ -252,7 +252,7 @@ Series are grouped by the columns they need, and each group becomes one sheet: The `apiRef` prop exposes the `exportAsPrint()` method that can be used to open the browser's print dialog. The print dialog lets you print the chart or save it as a PDF, as well as configure other settings. -{{"demo": "PrintChart.js"}} +{{"component": "file://./demos/print-chart/index.ts"}} ### Export as image @@ -316,6 +316,6 @@ try { } ``` -{{"demo": "ExportChartAsImage.js"}} +{{"component": "file://./demos/export-chart-as-image/index.ts"}} When `onStylesheetError` cancels the export by returning `false`, nothing is exported, no error is logged, and the promise resolves. diff --git a/docs/data/charts/export/heatmapData.ts b/docs/data/charts/export/heatmapData.ts index b88d55c474ec4..64eafc83166bd 100644 --- a/docs/data/charts/export/heatmapData.ts +++ b/docs/data/charts/export/heatmapData.ts @@ -1,4 +1,4 @@ -import { HeatmapValueType } from '@mui/x-charts-pro/models'; +import type { HeatmapValueType } from '@mui/x-charts-pro/models'; export const heatmapData: HeatmapValueType[] = [ [0, 0, 10], diff --git a/docs/data/charts/funnel/BasicFunnel.js b/docs/data/charts/funnel/BasicFunnel.js deleted file mode 100644 index a38f48747e8b2..0000000000000 --- a/docs/data/charts/funnel/BasicFunnel.js +++ /dev/null @@ -1,17 +0,0 @@ -import Box from '@mui/material/Box'; -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; - -export default function BasicFunnel() { - return ( - - - - ); -} diff --git a/docs/data/charts/funnel/BasicFunnel.tsx.preview b/docs/data/charts/funnel/BasicFunnel.tsx.preview deleted file mode 100644 index 614559a488cf6..0000000000000 --- a/docs/data/charts/funnel/BasicFunnel.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/funnel/FunnelAxisAutoSize.js b/docs/data/charts/funnel/FunnelAxisAutoSize.js deleted file mode 100644 index 8f74a2f639eb2..0000000000000 --- a/docs/data/charts/funnel/FunnelAxisAutoSize.js +++ /dev/null @@ -1,56 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; - -export default function FunnelAxisAutoSize() { - const [useAutoSize, setUseAutoSize] = React.useState(true); - - return ( - - - setUseAutoSize(event.target.checked)} /> - } - label="Use auto-sizing" - labelPlacement="end" - /> - - - - - ); -} - -const categories = [ - 'Website visitors', - 'Product page views', - 'Added to cart', - 'Checkout started', - 'Purchase completed', -]; - -const funnelSeries = { - data: [ - { value: 10000, label: 'Website visitors' }, - { value: 7500, label: 'Product page views' }, - { value: 3200, label: 'Added to cart' }, - { value: 1800, label: 'Checkout started' }, - { value: 950, label: 'Purchase completed' }, - ], -}; diff --git a/docs/data/charts/funnel/FunnelBorderRadius.js b/docs/data/charts/funnel/FunnelBorderRadius.js deleted file mode 100644 index 1cb758d983df0..0000000000000 --- a/docs/data/charts/funnel/FunnelBorderRadius.js +++ /dev/null @@ -1,28 +0,0 @@ -import Box from '@mui/material/Box'; -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; - -export default function FunnelBorderRadius() { - return ( - - - - - ); -} diff --git a/docs/data/charts/funnel/FunnelCategoryAxis.js b/docs/data/charts/funnel/FunnelCategoryAxis.js deleted file mode 100644 index a0b964ca90bd0..0000000000000 --- a/docs/data/charts/funnel/FunnelCategoryAxis.js +++ /dev/null @@ -1,26 +0,0 @@ -import Box from '@mui/material/Box'; -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; -import { populationByEducationLevelPercentageSeriesLabeled } from './populationByEducationLevel'; - -export default function FunnelCategoryAxis() { - return ( - - - - ); -} - -const funnelProps = { - height: 300, - hideLegend: true, -}; diff --git a/docs/data/charts/funnel/FunnelCategoryAxis.tsx.preview b/docs/data/charts/funnel/FunnelCategoryAxis.tsx.preview deleted file mode 100644 index 009e5b78eeea0..0000000000000 --- a/docs/data/charts/funnel/FunnelCategoryAxis.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/funnel/FunnelColor.js b/docs/data/charts/funnel/FunnelColor.js deleted file mode 100644 index 2ca11347ca7e6..0000000000000 --- a/docs/data/charts/funnel/FunnelColor.js +++ /dev/null @@ -1,22 +0,0 @@ -import Box from '@mui/material/Box'; -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; - -export default function FunnelColor() { - return ( - - - - ); -} diff --git a/docs/data/charts/funnel/FunnelColor.tsx.preview b/docs/data/charts/funnel/FunnelColor.tsx.preview deleted file mode 100644 index 71b976d3e8255..0000000000000 --- a/docs/data/charts/funnel/FunnelColor.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/funnel/FunnelCurves.js b/docs/data/charts/funnel/FunnelCurves.js deleted file mode 100644 index 8d8df8932beb5..0000000000000 --- a/docs/data/charts/funnel/FunnelCurves.js +++ /dev/null @@ -1,92 +0,0 @@ -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import Stack from '@mui/material/Stack'; -import { populationByEducationLevelPercentageSeries } from './populationByEducationLevel'; - -const curveTypes = [ - 'bump', - 'linear', - 'linear-sharp', - 'step', - 'pyramid', - 'step-pyramid', -]; - -export default function FunnelCurves() { - return ( - ( - - - - - )} - getCode={({ props }) => { - return `import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; - - -`; - }} - /> - ); -} diff --git a/docs/data/charts/funnel/FunnelDataAttributes.js b/docs/data/charts/funnel/FunnelDataAttributes.js deleted file mode 100644 index 22ad74f121730..0000000000000 --- a/docs/data/charts/funnel/FunnelDataAttributes.js +++ /dev/null @@ -1,36 +0,0 @@ -import Box from '@mui/material/Box'; -import { FunnelChart, funnelClasses } from '@mui/x-charts-pro/FunnelChart'; - -export default function FunnelDataAttributes() { - return ( - - - - - - - - - - - - ); -} - -const funnelProps = { - height: 300, - hideLegend: true, - series: [ - { - id: 'main', - data: [{ value: 200 }, { value: 180 }, { value: 90 }, { value: 50 }], - }, - ], -}; diff --git a/docs/data/charts/funnel/FunnelDataAttributes.tsx.preview b/docs/data/charts/funnel/FunnelDataAttributes.tsx.preview deleted file mode 100644 index 63608b2a519a6..0000000000000 --- a/docs/data/charts/funnel/FunnelDataAttributes.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/docs/data/charts/funnel/FunnelGap.js b/docs/data/charts/funnel/FunnelGap.js deleted file mode 100644 index 16a102be8b50a..0000000000000 --- a/docs/data/charts/funnel/FunnelGap.js +++ /dev/null @@ -1,18 +0,0 @@ -import Box from '@mui/material/Box'; -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; - -export default function FunnelGap() { - return ( - - - - ); -} diff --git a/docs/data/charts/funnel/FunnelGap.tsx.preview b/docs/data/charts/funnel/FunnelGap.tsx.preview deleted file mode 100644 index 652b021893ac2..0000000000000 --- a/docs/data/charts/funnel/FunnelGap.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/funnel/FunnelLabelPositioning.js b/docs/data/charts/funnel/FunnelLabelPositioning.js deleted file mode 100644 index 0a059f93d8a23..0000000000000 --- a/docs/data/charts/funnel/FunnelLabelPositioning.js +++ /dev/null @@ -1,125 +0,0 @@ -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import Stack from '@mui/material/Stack'; - -export default function FunnelLabelPositioning() { - return ( - ( - - - - )} - getCode={({ props }) => { - if (props.hide) { - return `import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; - - -`; - } - - return `import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; - - -`; - }} - /> - ); -} diff --git a/docs/data/charts/funnel/FunnelLabelStyling.js b/docs/data/charts/funnel/FunnelLabelStyling.js deleted file mode 100644 index bb69206b5f1f6..0000000000000 --- a/docs/data/charts/funnel/FunnelLabelStyling.js +++ /dev/null @@ -1,28 +0,0 @@ -import Box from '@mui/material/Box'; -import { FunnelChart, funnelClasses } from '@mui/x-charts-pro/FunnelChart'; - -export default function FunnelLabelStyling() { - return ( - - - - ); -} - -const funnelProps = { - height: 300, - hideLegend: true, -}; diff --git a/docs/data/charts/funnel/FunnelLabelStyling.tsx.preview b/docs/data/charts/funnel/FunnelLabelStyling.tsx.preview deleted file mode 100644 index 39660dfa0732e..0000000000000 --- a/docs/data/charts/funnel/FunnelLabelStyling.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/funnel/FunnelLabels.js b/docs/data/charts/funnel/FunnelLabels.js deleted file mode 100644 index 09a67dd9fe4c4..0000000000000 --- a/docs/data/charts/funnel/FunnelLabels.js +++ /dev/null @@ -1,29 +0,0 @@ -import Box from '@mui/material/Box'; -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; - -export default function FunnelLabels() { - return ( - - - `${item.label}${context.dataIndex} ${item.value}.00`, - }, - ]} - {...funnelProps} - /> - - ); -} - -const funnelProps = { - height: 300, - hideLegend: true, -}; diff --git a/docs/data/charts/funnel/FunnelLabels.tsx.preview b/docs/data/charts/funnel/FunnelLabels.tsx.preview deleted file mode 100644 index 6d4f55b88f59f..0000000000000 --- a/docs/data/charts/funnel/FunnelLabels.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - `${item.label}${context.dataIndex} ${item.value}.00`, - }, - ]} - {...funnelProps} -/> \ No newline at end of file diff --git a/docs/data/charts/funnel/FunnelLegend.js b/docs/data/charts/funnel/FunnelLegend.js deleted file mode 100644 index 60130b185c5a6..0000000000000 --- a/docs/data/charts/funnel/FunnelLegend.js +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; - -export default function FunnelLegend() { - const [hideLegend, setHideLegend] = React.useState(false); - - return ( - - - - - ); -} - -const funnelProps = { - height: 300, - slotProps: { legend: { position: { vertical: 'bottom' } } }, -}; - -function Controls({ hideLegend, setHideLegend }) { - return ( - setHideLegend((prev) => !prev)} - /> - } - label="Hide legend" - /> - ); -} diff --git a/docs/data/charts/funnel/FunnelLegend.tsx.preview b/docs/data/charts/funnel/FunnelLegend.tsx.preview deleted file mode 100644 index 85e6ff724d441..0000000000000 --- a/docs/data/charts/funnel/FunnelLegend.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/charts/funnel/FunnelLinearScale.js b/docs/data/charts/funnel/FunnelLinearScale.js deleted file mode 100644 index a258cd5d99bab..0000000000000 --- a/docs/data/charts/funnel/FunnelLinearScale.js +++ /dev/null @@ -1,20 +0,0 @@ -import Box from '@mui/material/Box'; -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; -import { populationByEducationLevelPercentageSeriesLabeled } from './populationByEducationLevel'; - -export default function FunnelLinearScale() { - return ( - - - - ); -} - -const funnelProps = { - height: 300, - hideLegend: true, -}; diff --git a/docs/data/charts/funnel/FunnelLinearScale.tsx.preview b/docs/data/charts/funnel/FunnelLinearScale.tsx.preview deleted file mode 100644 index 8fc9c2a67f597..0000000000000 --- a/docs/data/charts/funnel/FunnelLinearScale.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/funnel/FunnelStacked.js b/docs/data/charts/funnel/FunnelStacked.js deleted file mode 100644 index fd8636fd461d9..0000000000000 --- a/docs/data/charts/funnel/FunnelStacked.js +++ /dev/null @@ -1,39 +0,0 @@ -import Box from '@mui/material/Box'; -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; - -export default function FunnelStacked() { - return ( - - - - ); -} - -const dataBig = [ - { value: 500, label: 'A1' }, - { value: 280, label: 'B1' }, - { value: 190, label: 'C1' }, - { value: 70, label: 'D1' }, -]; - -const dataSmall = [ - { value: 200, label: 'A2' }, - { value: 180, label: 'B2' }, - { value: 90, label: 'C2' }, - { value: 50, label: 'D2' }, -]; diff --git a/docs/data/charts/funnel/FunnelStacked.tsx.preview b/docs/data/charts/funnel/FunnelStacked.tsx.preview deleted file mode 100644 index 9d959caaec6a5..0000000000000 --- a/docs/data/charts/funnel/FunnelStacked.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/funnel/FunnelVariant.js b/docs/data/charts/funnel/FunnelVariant.js deleted file mode 100644 index d9dba6765232b..0000000000000 --- a/docs/data/charts/funnel/FunnelVariant.js +++ /dev/null @@ -1,25 +0,0 @@ -import Box from '@mui/material/Box'; -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; - -export default function FunnelVariant() { - const data = [ - { value: 200, label: 'Leads' }, - { value: 150, label: 'Calls' }, - { value: 90, label: 'Meetings' }, - { value: 40, label: 'Deals' }, - ]; - - return ( - - - - ); -} diff --git a/docs/data/charts/funnel/FunnelVariant.tsx.preview b/docs/data/charts/funnel/FunnelVariant.tsx.preview deleted file mode 100644 index 12372a923d525..0000000000000 --- a/docs/data/charts/funnel/FunnelVariant.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/funnel/HighlightFunnel.js b/docs/data/charts/funnel/HighlightFunnel.js deleted file mode 100644 index 5488ed827dd18..0000000000000 --- a/docs/data/charts/funnel/HighlightFunnel.js +++ /dev/null @@ -1,90 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; - -import { populationByEducationLevelPercentageSeriesLabeled } from './populationByEducationLevel'; - -export default function HighlightFunnel() { - const [highlight, setHighlight] = React.useState('item'); - const [fade, setFade] = React.useState('global'); - - return ( - - - - - - - - - ); -} - -const funnelChartParams = { - height: 300, - hideLegend: true, -}; - -function Controls({ highlight, setHighlight, fade, setFade }) { - return ( - - setHighlight(event.target.value)} - sx={{ minWidth: 150 }} - > - none - item - series - - setFade(event.target.value)} - sx={{ minWidth: 150 }} - > - none - series - global - - - ); -} diff --git a/docs/data/charts/funnel/PyramidFunnel.js b/docs/data/charts/funnel/PyramidFunnel.js deleted file mode 100644 index 9f96f00cfe6f0..0000000000000 --- a/docs/data/charts/funnel/PyramidFunnel.js +++ /dev/null @@ -1,18 +0,0 @@ -import Box from '@mui/material/Box'; -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; - -export default function PyramidFunnel() { - return ( - - - - ); -} diff --git a/docs/data/charts/funnel/PyramidFunnel.tsx.preview b/docs/data/charts/funnel/PyramidFunnel.tsx.preview deleted file mode 100644 index 65f825440408e..0000000000000 --- a/docs/data/charts/funnel/PyramidFunnel.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/funnel/BasicFunnel.tsx b/docs/data/charts/funnel/demos/basic-funnel/BasicFunnel.tsx similarity index 88% rename from docs/data/charts/funnel/BasicFunnel.tsx rename to docs/data/charts/funnel/demos/basic-funnel/BasicFunnel.tsx index a38f48747e8b2..67fe071a0aad7 100644 --- a/docs/data/charts/funnel/BasicFunnel.tsx +++ b/docs/data/charts/funnel/demos/basic-funnel/BasicFunnel.tsx @@ -4,6 +4,7 @@ import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; export default function BasicFunnel() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/funnel/demos/basic-funnel/client.ts b/docs/data/charts/funnel/demos/basic-funnel/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/funnel/demos/basic-funnel/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/funnel/demos/basic-funnel/index.ts b/docs/data/charts/funnel/demos/basic-funnel/index.ts new file mode 100644 index 0000000000000..e6d45bfa45a9a --- /dev/null +++ b/docs/data/charts/funnel/demos/basic-funnel/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicFunnel from './BasicFunnel'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicFunnel, { ClientProvider }); diff --git a/docs/data/charts/funnel/FunnelAxisAutoSize.tsx b/docs/data/charts/funnel/demos/funnel-axis-auto-size/FunnelAxisAutoSize.tsx similarity index 97% rename from docs/data/charts/funnel/FunnelAxisAutoSize.tsx rename to docs/data/charts/funnel/demos/funnel-axis-auto-size/FunnelAxisAutoSize.tsx index 8f74a2f639eb2..47b49e23628df 100644 --- a/docs/data/charts/funnel/FunnelAxisAutoSize.tsx +++ b/docs/data/charts/funnel/demos/funnel-axis-auto-size/FunnelAxisAutoSize.tsx @@ -6,6 +6,7 @@ import Checkbox from '@mui/material/Checkbox'; import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; export default function FunnelAxisAutoSize() { + // @focus-start @padding 1 const [useAutoSize, setUseAutoSize] = React.useState(true); return ( @@ -35,6 +36,7 @@ export default function FunnelAxisAutoSize() { /> ); + // @focus-end } const categories = [ diff --git a/docs/data/charts/funnel/demos/funnel-axis-auto-size/client.ts b/docs/data/charts/funnel/demos/funnel-axis-auto-size/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-axis-auto-size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/funnel/demos/funnel-axis-auto-size/index.ts b/docs/data/charts/funnel/demos/funnel-axis-auto-size/index.ts new file mode 100644 index 0000000000000..5d6a7952a5b5d --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-axis-auto-size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FunnelAxisAutoSize from './FunnelAxisAutoSize'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FunnelAxisAutoSize, { ClientProvider }); diff --git a/docs/data/charts/funnel/FunnelBorderRadius.tsx b/docs/data/charts/funnel/demos/funnel-border-radius/FunnelBorderRadius.tsx similarity index 92% rename from docs/data/charts/funnel/FunnelBorderRadius.tsx rename to docs/data/charts/funnel/demos/funnel-border-radius/FunnelBorderRadius.tsx index 1cb758d983df0..8ebc742a4441b 100644 --- a/docs/data/charts/funnel/FunnelBorderRadius.tsx +++ b/docs/data/charts/funnel/demos/funnel-border-radius/FunnelBorderRadius.tsx @@ -4,6 +4,7 @@ import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; export default function FunnelBorderRadius() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/funnel/demos/funnel-border-radius/client.ts b/docs/data/charts/funnel/demos/funnel-border-radius/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-border-radius/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/funnel/demos/funnel-border-radius/index.ts b/docs/data/charts/funnel/demos/funnel-border-radius/index.ts new file mode 100644 index 0000000000000..27dd65fabacf7 --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-border-radius/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FunnelBorderRadius from './FunnelBorderRadius'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FunnelBorderRadius, { ClientProvider }); diff --git a/docs/data/charts/funnel/FunnelCategoryAxis.tsx b/docs/data/charts/funnel/demos/funnel-category-axis/FunnelCategoryAxis.tsx similarity index 88% rename from docs/data/charts/funnel/FunnelCategoryAxis.tsx rename to docs/data/charts/funnel/demos/funnel-category-axis/FunnelCategoryAxis.tsx index 3d15f642736a1..82065b3995d57 100644 --- a/docs/data/charts/funnel/FunnelCategoryAxis.tsx +++ b/docs/data/charts/funnel/demos/funnel-category-axis/FunnelCategoryAxis.tsx @@ -1,10 +1,11 @@ import Box from '@mui/material/Box'; import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; -import { populationByEducationLevelPercentageSeriesLabeled } from './populationByEducationLevel'; +import { populationByEducationLevelPercentageSeriesLabeled } from '../../populationByEducationLevel'; export default function FunnelCategoryAxis() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/funnel/demos/funnel-category-axis/client.ts b/docs/data/charts/funnel/demos/funnel-category-axis/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-category-axis/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/funnel/demos/funnel-category-axis/index.ts b/docs/data/charts/funnel/demos/funnel-category-axis/index.ts new file mode 100644 index 0000000000000..12e1c7dae6bca --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-category-axis/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FunnelCategoryAxis from './FunnelCategoryAxis'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FunnelCategoryAxis, { ClientProvider }); diff --git a/docs/data/charts/funnel/FunnelColor.tsx b/docs/data/charts/funnel/demos/funnel-color/FunnelColor.tsx similarity index 91% rename from docs/data/charts/funnel/FunnelColor.tsx rename to docs/data/charts/funnel/demos/funnel-color/FunnelColor.tsx index 2ca11347ca7e6..3c3a8e30f6659 100644 --- a/docs/data/charts/funnel/FunnelColor.tsx +++ b/docs/data/charts/funnel/demos/funnel-color/FunnelColor.tsx @@ -4,6 +4,7 @@ import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; export default function FunnelColor() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/funnel/demos/funnel-color/client.ts b/docs/data/charts/funnel/demos/funnel-color/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/funnel/demos/funnel-color/index.ts b/docs/data/charts/funnel/demos/funnel-color/index.ts new file mode 100644 index 0000000000000..5100173a6b8a4 --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FunnelColor from './FunnelColor'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FunnelColor, { ClientProvider }); diff --git a/docs/data/charts/funnel/FunnelCurves.tsx b/docs/data/charts/funnel/demos/funnel-curves/FunnelCurves.tsx similarity index 94% rename from docs/data/charts/funnel/FunnelCurves.tsx rename to docs/data/charts/funnel/demos/funnel-curves/FunnelCurves.tsx index d054dea88a4c4..fa67b0e6a64e5 100644 --- a/docs/data/charts/funnel/FunnelCurves.tsx +++ b/docs/data/charts/funnel/demos/funnel-curves/FunnelCurves.tsx @@ -1,7 +1,7 @@ import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; import Stack from '@mui/material/Stack'; -import { populationByEducationLevelPercentageSeries } from './populationByEducationLevel'; +import { populationByEducationLevelPercentageSeries } from '../../populationByEducationLevel'; const curveTypes = [ 'bump', @@ -14,6 +14,7 @@ const curveTypes = [ export default function FunnelCurves() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/funnel/demos/funnel-curves/client.ts b/docs/data/charts/funnel/demos/funnel-curves/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-curves/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/funnel/demos/funnel-curves/index.ts b/docs/data/charts/funnel/demos/funnel-curves/index.ts new file mode 100644 index 0000000000000..f829f08160a68 --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-curves/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FunnelCurves from './FunnelCurves'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FunnelCurves, { ClientProvider }); diff --git a/docs/data/charts/funnel/FunnelDataAttributes.tsx b/docs/data/charts/funnel/demos/funnel-data-attributes/FunnelDataAttributes.tsx similarity index 94% rename from docs/data/charts/funnel/FunnelDataAttributes.tsx rename to docs/data/charts/funnel/demos/funnel-data-attributes/FunnelDataAttributes.tsx index 0851d3bdc4a7f..a763bda45f493 100644 --- a/docs/data/charts/funnel/FunnelDataAttributes.tsx +++ b/docs/data/charts/funnel/demos/funnel-data-attributes/FunnelDataAttributes.tsx @@ -4,6 +4,7 @@ import { FunnelChart, funnelClasses } from '@mui/x-charts-pro/FunnelChart'; export default function FunnelDataAttributes() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/funnel/demos/funnel-data-attributes/client.ts b/docs/data/charts/funnel/demos/funnel-data-attributes/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-data-attributes/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/funnel/demos/funnel-data-attributes/index.ts b/docs/data/charts/funnel/demos/funnel-data-attributes/index.ts new file mode 100644 index 0000000000000..00bb73824019a --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-data-attributes/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FunnelDataAttributes from './FunnelDataAttributes'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FunnelDataAttributes, { ClientProvider }); diff --git a/docs/data/charts/funnel/FunnelGap.tsx b/docs/data/charts/funnel/demos/funnel-gap/FunnelGap.tsx similarity index 88% rename from docs/data/charts/funnel/FunnelGap.tsx rename to docs/data/charts/funnel/demos/funnel-gap/FunnelGap.tsx index 16a102be8b50a..8e3f522d5eb7f 100644 --- a/docs/data/charts/funnel/FunnelGap.tsx +++ b/docs/data/charts/funnel/demos/funnel-gap/FunnelGap.tsx @@ -4,6 +4,7 @@ import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; export default function FunnelGap() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/funnel/demos/funnel-gap/client.ts b/docs/data/charts/funnel/demos/funnel-gap/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-gap/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/funnel/demos/funnel-gap/index.ts b/docs/data/charts/funnel/demos/funnel-gap/index.ts new file mode 100644 index 0000000000000..ab9e7637c66d4 --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-gap/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FunnelGap from './FunnelGap'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FunnelGap, { ClientProvider }); diff --git a/docs/data/charts/funnel/FunnelLabelPositioning.tsx b/docs/data/charts/funnel/demos/funnel-label-positioning/FunnelLabelPositioning.tsx similarity index 98% rename from docs/data/charts/funnel/FunnelLabelPositioning.tsx rename to docs/data/charts/funnel/demos/funnel-label-positioning/FunnelLabelPositioning.tsx index 223b7a093654e..3c4137a0e680d 100644 --- a/docs/data/charts/funnel/FunnelLabelPositioning.tsx +++ b/docs/data/charts/funnel/demos/funnel-label-positioning/FunnelLabelPositioning.tsx @@ -4,6 +4,7 @@ import Stack from '@mui/material/Stack'; export default function FunnelLabelPositioning() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/funnel/demos/funnel-label-positioning/client.ts b/docs/data/charts/funnel/demos/funnel-label-positioning/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-label-positioning/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/funnel/demos/funnel-label-positioning/index.ts b/docs/data/charts/funnel/demos/funnel-label-positioning/index.ts new file mode 100644 index 0000000000000..7ff5c528445cd --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-label-positioning/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FunnelLabelPositioning from './FunnelLabelPositioning'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FunnelLabelPositioning, { ClientProvider }); diff --git a/docs/data/charts/funnel/FunnelLabelStyling.tsx b/docs/data/charts/funnel/demos/funnel-label-styling/FunnelLabelStyling.tsx similarity index 92% rename from docs/data/charts/funnel/FunnelLabelStyling.tsx rename to docs/data/charts/funnel/demos/funnel-label-styling/FunnelLabelStyling.tsx index 286602b7834a7..0232feced5d6c 100644 --- a/docs/data/charts/funnel/FunnelLabelStyling.tsx +++ b/docs/data/charts/funnel/demos/funnel-label-styling/FunnelLabelStyling.tsx @@ -4,6 +4,7 @@ import { FunnelChart, funnelClasses } from '@mui/x-charts-pro/FunnelChart'; export default function FunnelLabelStyling() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/funnel/demos/funnel-label-styling/client.ts b/docs/data/charts/funnel/demos/funnel-label-styling/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-label-styling/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/funnel/demos/funnel-label-styling/index.ts b/docs/data/charts/funnel/demos/funnel-label-styling/index.ts new file mode 100644 index 0000000000000..218aedb6bad41 --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-label-styling/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FunnelLabelStyling from './FunnelLabelStyling'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FunnelLabelStyling, { ClientProvider }); diff --git a/docs/data/charts/funnel/FunnelLabels.tsx b/docs/data/charts/funnel/demos/funnel-labels/FunnelLabels.tsx similarity index 93% rename from docs/data/charts/funnel/FunnelLabels.tsx rename to docs/data/charts/funnel/demos/funnel-labels/FunnelLabels.tsx index a1bccb7904307..d004c57440814 100644 --- a/docs/data/charts/funnel/FunnelLabels.tsx +++ b/docs/data/charts/funnel/demos/funnel-labels/FunnelLabels.tsx @@ -4,6 +4,7 @@ import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; export default function FunnelLabels() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/funnel/demos/funnel-labels/client.ts b/docs/data/charts/funnel/demos/funnel-labels/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-labels/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/funnel/demos/funnel-labels/index.ts b/docs/data/charts/funnel/demos/funnel-labels/index.ts new file mode 100644 index 0000000000000..57cdad2024bc8 --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-labels/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FunnelLabels from './FunnelLabels'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FunnelLabels, { ClientProvider }); diff --git a/docs/data/charts/funnel/FunnelLegend.tsx b/docs/data/charts/funnel/demos/funnel-legend/FunnelLegend.tsx similarity index 96% rename from docs/data/charts/funnel/FunnelLegend.tsx rename to docs/data/charts/funnel/demos/funnel-legend/FunnelLegend.tsx index 8acf7bf2ae48a..7add635231239 100644 --- a/docs/data/charts/funnel/FunnelLegend.tsx +++ b/docs/data/charts/funnel/demos/funnel-legend/FunnelLegend.tsx @@ -5,6 +5,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; export default function FunnelLegend() { + // @focus-start @padding 1 const [hideLegend, setHideLegend] = React.useState(false); return ( @@ -26,6 +27,7 @@ export default function FunnelLegend() { /> ); + // @focus-end } const funnelProps = { diff --git a/docs/data/charts/funnel/demos/funnel-legend/client.ts b/docs/data/charts/funnel/demos/funnel-legend/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-legend/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/funnel/demos/funnel-legend/index.ts b/docs/data/charts/funnel/demos/funnel-legend/index.ts new file mode 100644 index 0000000000000..301f8fdc3d7e6 --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-legend/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FunnelLegend from './FunnelLegend'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FunnelLegend, { ClientProvider }); diff --git a/docs/data/charts/funnel/FunnelLinearScale.tsx b/docs/data/charts/funnel/demos/funnel-linear-scale/FunnelLinearScale.tsx similarity index 85% rename from docs/data/charts/funnel/FunnelLinearScale.tsx rename to docs/data/charts/funnel/demos/funnel-linear-scale/FunnelLinearScale.tsx index a1a9ad5906201..bc353ff0c449e 100644 --- a/docs/data/charts/funnel/FunnelLinearScale.tsx +++ b/docs/data/charts/funnel/demos/funnel-linear-scale/FunnelLinearScale.tsx @@ -1,15 +1,17 @@ import Box from '@mui/material/Box'; import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; -import { populationByEducationLevelPercentageSeriesLabeled } from './populationByEducationLevel'; +import { populationByEducationLevelPercentageSeriesLabeled } from '../../populationByEducationLevel'; export default function FunnelLinearScale() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/funnel/demos/funnel-linear-scale/client.ts b/docs/data/charts/funnel/demos/funnel-linear-scale/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-linear-scale/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/funnel/demos/funnel-linear-scale/index.ts b/docs/data/charts/funnel/demos/funnel-linear-scale/index.ts new file mode 100644 index 0000000000000..187a7af5ea00c --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-linear-scale/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FunnelLinearScale from './FunnelLinearScale'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FunnelLinearScale, { ClientProvider }); diff --git a/docs/data/charts/funnel/FunnelStacked.tsx b/docs/data/charts/funnel/demos/funnel-stacked/FunnelStacked.tsx similarity index 83% rename from docs/data/charts/funnel/FunnelStacked.tsx rename to docs/data/charts/funnel/demos/funnel-stacked/FunnelStacked.tsx index 384c57401bb3a..c8fe44da66570 100644 --- a/docs/data/charts/funnel/FunnelStacked.tsx +++ b/docs/data/charts/funnel/demos/funnel-stacked/FunnelStacked.tsx @@ -1,9 +1,11 @@ import Box from '@mui/material/Box'; -import { FunnelChart, FunnelChartProps } from '@mui/x-charts-pro/FunnelChart'; +import type { FunnelChartProps } from '@mui/x-charts-pro/FunnelChart'; +import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; export default function FunnelStacked() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/funnel/demos/funnel-stacked/client.ts b/docs/data/charts/funnel/demos/funnel-stacked/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-stacked/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/funnel/demos/funnel-stacked/index.ts b/docs/data/charts/funnel/demos/funnel-stacked/index.ts new file mode 100644 index 0000000000000..77e69bdf79a7b --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-stacked/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FunnelStacked from './FunnelStacked'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FunnelStacked, { ClientProvider }); diff --git a/docs/data/charts/funnel/FunnelVariant.tsx b/docs/data/charts/funnel/demos/funnel-variant/FunnelVariant.tsx similarity index 92% rename from docs/data/charts/funnel/FunnelVariant.tsx rename to docs/data/charts/funnel/demos/funnel-variant/FunnelVariant.tsx index d9dba6765232b..a0ec5c3691c92 100644 --- a/docs/data/charts/funnel/FunnelVariant.tsx +++ b/docs/data/charts/funnel/demos/funnel-variant/FunnelVariant.tsx @@ -2,6 +2,7 @@ import Box from '@mui/material/Box'; import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; export default function FunnelVariant() { + // @focus-start @padding 1 const data = [ { value: 200, label: 'Leads' }, { value: 150, label: 'Calls' }, @@ -22,4 +23,5 @@ export default function FunnelVariant() { /> ); + // @focus-end } diff --git a/docs/data/charts/funnel/demos/funnel-variant/client.ts b/docs/data/charts/funnel/demos/funnel-variant/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-variant/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/funnel/demos/funnel-variant/index.ts b/docs/data/charts/funnel/demos/funnel-variant/index.ts new file mode 100644 index 0000000000000..7a2ee25179a2e --- /dev/null +++ b/docs/data/charts/funnel/demos/funnel-variant/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FunnelVariant from './FunnelVariant'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FunnelVariant, { ClientProvider }); diff --git a/docs/data/charts/funnel/HighlightFunnel.tsx b/docs/data/charts/funnel/demos/highlight-funnel/HighlightFunnel.tsx similarity index 94% rename from docs/data/charts/funnel/HighlightFunnel.tsx rename to docs/data/charts/funnel/demos/highlight-funnel/HighlightFunnel.tsx index 58acde0eca5d0..420ad659e2dfd 100644 --- a/docs/data/charts/funnel/HighlightFunnel.tsx +++ b/docs/data/charts/funnel/demos/highlight-funnel/HighlightFunnel.tsx @@ -3,10 +3,11 @@ import Stack from '@mui/material/Stack'; import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; -import { FadeOptions, HighlightOptions } from '@mui/x-charts/context'; -import { populationByEducationLevelPercentageSeriesLabeled } from './populationByEducationLevel'; +import type { FadeOptions, HighlightOptions } from '@mui/x-charts/context'; +import { populationByEducationLevelPercentageSeriesLabeled } from '../../populationByEducationLevel'; export default function HighlightFunnel() { + // @focus-start @padding 1 const [highlight, setHighlight] = React.useState('item'); const [fade, setFade] = React.useState('global'); @@ -48,6 +49,7 @@ export default function HighlightFunnel() { /> ); + // @focus-end } const funnelChartParams = { diff --git a/docs/data/charts/funnel/demos/highlight-funnel/client.ts b/docs/data/charts/funnel/demos/highlight-funnel/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/funnel/demos/highlight-funnel/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/funnel/demos/highlight-funnel/index.ts b/docs/data/charts/funnel/demos/highlight-funnel/index.ts new file mode 100644 index 0000000000000..a551312aa1af4 --- /dev/null +++ b/docs/data/charts/funnel/demos/highlight-funnel/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HighlightFunnel from './HighlightFunnel'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HighlightFunnel, { ClientProvider }); diff --git a/docs/data/charts/funnel/PyramidFunnel.tsx b/docs/data/charts/funnel/demos/pyramid-funnel/PyramidFunnel.tsx similarity index 89% rename from docs/data/charts/funnel/PyramidFunnel.tsx rename to docs/data/charts/funnel/demos/pyramid-funnel/PyramidFunnel.tsx index 9f96f00cfe6f0..b1f550d235762 100644 --- a/docs/data/charts/funnel/PyramidFunnel.tsx +++ b/docs/data/charts/funnel/demos/pyramid-funnel/PyramidFunnel.tsx @@ -4,6 +4,7 @@ import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; export default function PyramidFunnel() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/funnel/demos/pyramid-funnel/client.ts b/docs/data/charts/funnel/demos/pyramid-funnel/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/funnel/demos/pyramid-funnel/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/funnel/demos/pyramid-funnel/index.ts b/docs/data/charts/funnel/demos/pyramid-funnel/index.ts new file mode 100644 index 0000000000000..8b165eff06a6f --- /dev/null +++ b/docs/data/charts/funnel/demos/pyramid-funnel/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PyramidFunnel from './PyramidFunnel'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PyramidFunnel, { ClientProvider }); diff --git a/docs/data/charts/funnel/funnel.md b/docs/data/charts/funnel/funnel.md index 0b707ed96e95c..c41db808f2e2a 100644 --- a/docs/data/charts/funnel/funnel.md +++ b/docs/data/charts/funnel/funnel.md @@ -15,7 +15,7 @@ Use it for flows like audience engagement, education levels, or conversion pipel The demo below shows a simple funnel with four decreasing values. -{{"demo": "BasicFunnel.js"}} +{{"component": "file://./demos/basic-funnel/index.ts"}} ## Basics @@ -30,7 +30,7 @@ Provide a `label` in each data object for the legend text. Set `hideLegend` to `true` to hide the legend. -{{"demo": "FunnelLegend.js"}} +{{"component": "file://./demos/funnel-legend/index.ts"}} ## Pyramid chart @@ -38,20 +38,20 @@ A pyramid chart is a funnel with an inverted profile. Set the `curve` property to `'pyramid'` on the series. -{{"demo": "PyramidFunnel.js"}} +{{"component": "file://./demos/pyramid-funnel/index.ts"}} ## Labels The funnel shows labels by default (each section's `value`). Use the `valueFormatter` prop to format them. -{{"demo": "FunnelLabels.js"}} +{{"component": "file://./demos/funnel-labels/index.ts"}} ### Styling labels Use the `funnelSectionClasses.label` class to style labels. -{{"demo": "FunnelLabelStyling.js"}} +{{"component": "file://./demos/funnel-label-styling/index.ts"}} ### Positioning labels @@ -72,7 +72,7 @@ See [text-anchor](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/tex Set `sectionLabel` to `false` to hide labels. You can also pass a function that receives the data object and returns the label config. -{{"demo": "FunnelLabelPositioning.js"}} +{{"component": "file://./demos/funnel-label-positioning/index.ts"}} ## Styling @@ -81,13 +81,13 @@ You can also pass a function that receives the data object and returns the label Use the `curve` property to choose the shape between sections. It accepts `'linear'`, `'linear-sharp'`, `'bump'`, `'pyramid'`, `'step'`, or `'step-pyramid'`. -{{"demo": "FunnelCurves.js"}} +{{"component": "file://./demos/funnel-curves/index.ts"}} ### Gap Use the `gap` property to set the space between sections (in pixels). -{{"demo": "FunnelGap.js"}} +{{"component": "file://./demos/funnel-gap/index.ts"}} ### Border radius @@ -102,7 +102,7 @@ See [Curve interpolation](#curve-interpolation) for how `curve` and `borderRadiu If `gap` is 0, radius applies only to corners not connected to another section. If `gap` is greater than 0, radius applies to all corners. -{{"demo": "FunnelBorderRadius.js"}} +{{"component": "file://./demos/funnel-border-radius/index.ts"}} ### Variant @@ -113,7 +113,7 @@ Use the `variant` property to switch between styles: The `outlined` variant is lighter visually. -{{"demo": "FunnelVariant.js"}} +{{"component": "file://./demos/funnel-variant/index.ts"}} ### Colors @@ -122,7 +122,7 @@ You can customize funnel colors in two ways: 1. Pass a [color palette](/x/react-charts/styling/#built-in-color-palettes). Each section uses a color from the palette. 2. Set a `color` property on each data object to override the palette for that section. -{{"demo": "FunnelColor.js"}} +{{"component": "file://./demos/funnel-color/index.ts"}} ### CSS @@ -130,7 +130,7 @@ You can style the funnel with CSS. Each section group has a `data-series` attribute for targeting. Use `:nth-child` or `:nth-of-type` to target specific sections, as in the demo below. -{{"demo": "FunnelDataAttributes.js"}} +{{"component": "file://./demos/funnel-data-attributes/index.ts"}} ## Multiple funnels @@ -138,14 +138,14 @@ By default, multiple series are stacked. Pass multiple series and use different colors or styles to tell them apart. The first series is at the bottom, the last at the top. -{{"demo": "FunnelStacked.js"}} +{{"component": "file://./demos/funnel-stacked/index.ts"}} ## Highlight Set `highlightScope.highlight` to `'item'` to highlight the hovered section. Set `highlightScope.fade` to `'global'` to fade the other sections. -{{"demo": "HighlightFunnel.js"}} +{{"component": "file://./demos/highlight-funnel/index.ts"}} ## Category axis @@ -154,18 +154,18 @@ By default, the axis is hidden. To show it, pass `position` and `categories` to the `categoryAxis` prop. -{{"demo": "FunnelCategoryAxis.js"}} +{{"component": "file://./demos/funnel-category-axis/index.ts"}} ### Scaled sections By default, sections use the `band` scale (equal width). Set `scaleType` to `'linear'` in the `categoryAxis` configuration to scale section width by value. -{{"demo": "FunnelLinearScale.js"}} +{{"component": "file://./demos/funnel-linear-scale/index.ts"}} ### Auto-sizing axis You can set the axis `size` to `'auto'` to automatically calculate the axis dimension based on tick label measurements. This is useful when your tick labels have varying lengths. -{{"demo": "FunnelAxisAutoSize.js"}} +{{"component": "file://./demos/funnel-axis-auto-size/index.ts"}} diff --git a/docs/data/charts/gauge/ArcDesign.js b/docs/data/charts/gauge/ArcDesign.js deleted file mode 100644 index 5489b49f0b97a..0000000000000 --- a/docs/data/charts/gauge/ArcDesign.js +++ /dev/null @@ -1,27 +0,0 @@ -import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge'; - -const settings = { - width: 200, - height: 200, - value: 60, -}; - -export default function ArcDesign() { - return ( - ({ - [`& .${gaugeClasses.valueText}`]: { - fontSize: 40, - }, - [`& .${gaugeClasses.valueArc}`]: { - fill: '#52b202', - }, - [`& .${gaugeClasses.referenceArc}`]: { - fill: theme.palette.text.disabled, - }, - })} - /> - ); -} diff --git a/docs/data/charts/gauge/ArcDesign.tsx.preview b/docs/data/charts/gauge/ArcDesign.tsx.preview deleted file mode 100644 index 281808d62fc78..0000000000000 --- a/docs/data/charts/gauge/ArcDesign.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - ({ - [`& .${gaugeClasses.valueText}`]: { - fontSize: 40, - }, - [`& .${gaugeClasses.valueArc}`]: { - fill: '#52b202', - }, - [`& .${gaugeClasses.referenceArc}`]: { - fill: theme.palette.text.disabled, - }, - })} -/> \ No newline at end of file diff --git a/docs/data/charts/gauge/ArcPlayground.js b/docs/data/charts/gauge/ArcPlayground.js deleted file mode 100644 index b615b086f79ec..0000000000000 --- a/docs/data/charts/gauge/ArcPlayground.js +++ /dev/null @@ -1,83 +0,0 @@ -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import Box from '@mui/material/Box'; -import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge'; - -export default function ArcPlayground() { - return ( - ( - - - - )} - getCode={({ props }) => { - const { innerRadius, outerRadius, ...numberProps } = props; - return `import { Gauge } from '@mui/x-charts/Gauge'; - - `${name}={${value}}`) - .join('\n ')} - ${Object.entries({ innerRadius, outerRadius }) - .map(([name, value]) => `${name}="${value}%"`) - .join('\n ')} - // ... -/> -`; - }} - /> - ); -} diff --git a/docs/data/charts/gauge/BasicGauges.js b/docs/data/charts/gauge/BasicGauges.js deleted file mode 100644 index 014e45b14787a..0000000000000 --- a/docs/data/charts/gauge/BasicGauges.js +++ /dev/null @@ -1,11 +0,0 @@ -import Stack from '@mui/material/Stack'; -import { Gauge } from '@mui/x-charts/Gauge'; - -export default function BasicGauges() { - return ( - - - - - ); -} diff --git a/docs/data/charts/gauge/BasicGauges.tsx.preview b/docs/data/charts/gauge/BasicGauges.tsx.preview deleted file mode 100644 index 7edb64600ff68..0000000000000 --- a/docs/data/charts/gauge/BasicGauges.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/charts/gauge/CompositionExample.js b/docs/data/charts/gauge/CompositionExample.js deleted file mode 100644 index abdaa9cdf8a14..0000000000000 --- a/docs/data/charts/gauge/CompositionExample.js +++ /dev/null @@ -1,46 +0,0 @@ -import { - GaugeContainer, - GaugeValueArc, - GaugeReferenceArc, - useGaugeState, -} from '@mui/x-charts/Gauge'; - -function GaugePointer() { - const { valueAngle, outerRadius, cx, cy } = useGaugeState(); - - if (valueAngle === null) { - // No value to display - return null; - } - - const target = { - x: cx + outerRadius * Math.sin(valueAngle), - y: cy - outerRadius * Math.cos(valueAngle), - }; - return ( - - - - - ); -} - -export default function CompositionExample() { - return ( - - - - - - ); -} diff --git a/docs/data/charts/gauge/CompositionExample.tsx b/docs/data/charts/gauge/CompositionExample.tsx deleted file mode 100644 index abdaa9cdf8a14..0000000000000 --- a/docs/data/charts/gauge/CompositionExample.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { - GaugeContainer, - GaugeValueArc, - GaugeReferenceArc, - useGaugeState, -} from '@mui/x-charts/Gauge'; - -function GaugePointer() { - const { valueAngle, outerRadius, cx, cy } = useGaugeState(); - - if (valueAngle === null) { - // No value to display - return null; - } - - const target = { - x: cx + outerRadius * Math.sin(valueAngle), - y: cy - outerRadius * Math.cos(valueAngle), - }; - return ( - - - - - ); -} - -export default function CompositionExample() { - return ( - - - - - - ); -} diff --git a/docs/data/charts/gauge/CompositionExample.tsx.preview b/docs/data/charts/gauge/CompositionExample.tsx.preview deleted file mode 100644 index 2675af81dc021..0000000000000 --- a/docs/data/charts/gauge/CompositionExample.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/charts/gauge/GaugeValueRange.js b/docs/data/charts/gauge/GaugeValueRange.js deleted file mode 100644 index a5915eafc8b3b..0000000000000 --- a/docs/data/charts/gauge/GaugeValueRange.js +++ /dev/null @@ -1,11 +0,0 @@ -import Stack from '@mui/material/Stack'; -import { Gauge } from '@mui/x-charts/Gauge'; - -export default function GaugeValueRange() { - return ( - - - - - ); -} diff --git a/docs/data/charts/gauge/GaugeValueRange.tsx.preview b/docs/data/charts/gauge/GaugeValueRange.tsx.preview deleted file mode 100644 index bd671b68b19b2..0000000000000 --- a/docs/data/charts/gauge/GaugeValueRange.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/charts/gauge/TextPlayground.js b/docs/data/charts/gauge/TextPlayground.js deleted file mode 100644 index 84ea83a8077a4..0000000000000 --- a/docs/data/charts/gauge/TextPlayground.js +++ /dev/null @@ -1,81 +0,0 @@ -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import Box from '@mui/material/Box'; -import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge'; - -export default function TextPlayground() { - return ( - ( - - `${value} / ${valueMax}`} - /> - - )} - getCode={({ - props, - }) => `import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge'; - - \`\${value} / \${valueMax}\`} -/> -`} - /> - ); -} diff --git a/docs/data/charts/gauge/ArcDesign.tsx b/docs/data/charts/gauge/demos/arc-design/ArcDesign.tsx similarity index 91% rename from docs/data/charts/gauge/ArcDesign.tsx rename to docs/data/charts/gauge/demos/arc-design/ArcDesign.tsx index 5489b49f0b97a..132b303bc400b 100644 --- a/docs/data/charts/gauge/ArcDesign.tsx +++ b/docs/data/charts/gauge/demos/arc-design/ArcDesign.tsx @@ -8,6 +8,7 @@ const settings = { export default function ArcDesign() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/gauge/demos/arc-design/client.ts b/docs/data/charts/gauge/demos/arc-design/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/gauge/demos/arc-design/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/gauge/demos/arc-design/index.ts b/docs/data/charts/gauge/demos/arc-design/index.ts new file mode 100644 index 0000000000000..b70de41176124 --- /dev/null +++ b/docs/data/charts/gauge/demos/arc-design/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ArcDesign from './ArcDesign'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ArcDesign, { ClientProvider }); diff --git a/docs/data/charts/gauge/ArcPlayground.tsx b/docs/data/charts/gauge/demos/arc-playground/ArcPlayground.tsx similarity index 97% rename from docs/data/charts/gauge/ArcPlayground.tsx rename to docs/data/charts/gauge/demos/arc-playground/ArcPlayground.tsx index b615b086f79ec..885d13a2403b4 100644 --- a/docs/data/charts/gauge/ArcPlayground.tsx +++ b/docs/data/charts/gauge/demos/arc-playground/ArcPlayground.tsx @@ -4,6 +4,7 @@ import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge'; export default function ArcPlayground() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/gauge/demos/arc-playground/client.ts b/docs/data/charts/gauge/demos/arc-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/gauge/demos/arc-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/gauge/demos/arc-playground/index.ts b/docs/data/charts/gauge/demos/arc-playground/index.ts new file mode 100644 index 0000000000000..48443a23f403d --- /dev/null +++ b/docs/data/charts/gauge/demos/arc-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ArcPlayground from './ArcPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ArcPlayground, { ClientProvider }); diff --git a/docs/data/charts/gauge/BasicGauges.tsx b/docs/data/charts/gauge/demos/basic-gauges/BasicGauges.tsx similarity index 87% rename from docs/data/charts/gauge/BasicGauges.tsx rename to docs/data/charts/gauge/demos/basic-gauges/BasicGauges.tsx index 014e45b14787a..3e9e0b23c9913 100644 --- a/docs/data/charts/gauge/BasicGauges.tsx +++ b/docs/data/charts/gauge/demos/basic-gauges/BasicGauges.tsx @@ -4,8 +4,10 @@ import { Gauge } from '@mui/x-charts/Gauge'; export default function BasicGauges() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/gauge/demos/basic-gauges/client.ts b/docs/data/charts/gauge/demos/basic-gauges/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/gauge/demos/basic-gauges/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/gauge/demos/basic-gauges/index.ts b/docs/data/charts/gauge/demos/basic-gauges/index.ts new file mode 100644 index 0000000000000..5c34ee131942c --- /dev/null +++ b/docs/data/charts/gauge/demos/basic-gauges/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicGauges from './BasicGauges'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicGauges, { ClientProvider }); diff --git a/docs/data/charts/gauge/demos/composition-example/CompositionExample.tsx b/docs/data/charts/gauge/demos/composition-example/CompositionExample.tsx new file mode 100644 index 0000000000000..69f11ae594435 --- /dev/null +++ b/docs/data/charts/gauge/demos/composition-example/CompositionExample.tsx @@ -0,0 +1,48 @@ +import { + GaugeContainer, + GaugeValueArc, + GaugeReferenceArc, + useGaugeState, +} from '@mui/x-charts/Gauge'; + +function GaugePointer() { + const { valueAngle, outerRadius, cx, cy } = useGaugeState(); + + if (valueAngle === null) { + // No value to display + return null; + } + + const target = { + x: cx + outerRadius * Math.sin(valueAngle), + y: cy - outerRadius * Math.cos(valueAngle), + }; + return ( + + + + + ); +} + +export default function CompositionExample() { + return ( + // @focus-start @padding 2 + + + + + + // @focus-end + ); +} diff --git a/docs/data/charts/gauge/demos/composition-example/client.ts b/docs/data/charts/gauge/demos/composition-example/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/gauge/demos/composition-example/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/gauge/demos/composition-example/index.ts b/docs/data/charts/gauge/demos/composition-example/index.ts new file mode 100644 index 0000000000000..7a03486adc223 --- /dev/null +++ b/docs/data/charts/gauge/demos/composition-example/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CompositionExample from './CompositionExample'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CompositionExample, { ClientProvider }); diff --git a/docs/data/charts/gauge/GaugeValueRange.tsx b/docs/data/charts/gauge/demos/gauge-value-range/GaugeValueRange.tsx similarity index 87% rename from docs/data/charts/gauge/GaugeValueRange.tsx rename to docs/data/charts/gauge/demos/gauge-value-range/GaugeValueRange.tsx index a5915eafc8b3b..9cb0e401b65d7 100644 --- a/docs/data/charts/gauge/GaugeValueRange.tsx +++ b/docs/data/charts/gauge/demos/gauge-value-range/GaugeValueRange.tsx @@ -4,8 +4,10 @@ import { Gauge } from '@mui/x-charts/Gauge'; export default function GaugeValueRange() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/gauge/demos/gauge-value-range/client.ts b/docs/data/charts/gauge/demos/gauge-value-range/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/gauge/demos/gauge-value-range/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/gauge/demos/gauge-value-range/index.ts b/docs/data/charts/gauge/demos/gauge-value-range/index.ts new file mode 100644 index 0000000000000..1a27cfccee1d7 --- /dev/null +++ b/docs/data/charts/gauge/demos/gauge-value-range/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GaugeValueRange from './GaugeValueRange'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GaugeValueRange, { ClientProvider }); diff --git a/docs/data/charts/gauge/TextPlayground.tsx b/docs/data/charts/gauge/demos/text-playground/TextPlayground.tsx similarity index 97% rename from docs/data/charts/gauge/TextPlayground.tsx rename to docs/data/charts/gauge/demos/text-playground/TextPlayground.tsx index 84ea83a8077a4..0b46a62445b23 100644 --- a/docs/data/charts/gauge/TextPlayground.tsx +++ b/docs/data/charts/gauge/demos/text-playground/TextPlayground.tsx @@ -4,6 +4,7 @@ import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge'; export default function TextPlayground() { return ( + // @focus-start @padding 2 `} /> + // @focus-end ); } diff --git a/docs/data/charts/gauge/demos/text-playground/client.ts b/docs/data/charts/gauge/demos/text-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/gauge/demos/text-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/gauge/demos/text-playground/index.ts b/docs/data/charts/gauge/demos/text-playground/index.ts new file mode 100644 index 0000000000000..d1a79dea35904 --- /dev/null +++ b/docs/data/charts/gauge/demos/text-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TextPlayground from './TextPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TextPlayground, { ClientProvider }); diff --git a/docs/data/charts/gauge/gauge.md b/docs/data/charts/gauge/gauge.md index 9823c839dfc0a..82f969c723a78 100644 --- a/docs/data/charts/gauge/gauge.md +++ b/docs/data/charts/gauge/gauge.md @@ -20,7 +20,7 @@ Use it for metrics like progress, capacity, or levels (for example, battery, sto The demo below shows basic gauge configurations. -{{"demo": "BasicGauges.js"}} +{{"component": "file://./demos/basic-gauges/index.ts"}} ## Basics @@ -28,7 +28,7 @@ Pass the current value with the `value` prop. By default, the scale runs from 0 through 100. Use `valueMin` and `valueMax` to set a different range. -{{"demo": "GaugeValueRange.js"}} +{{"component": "file://./demos/gauge-value-range/index.ts"}} ## Arc configuration @@ -38,7 +38,7 @@ Use these props to change the arc shape: - `innerRadius` and `outerRadius`: arc radii, as a pixel value or a percentage string (such as `'50%'`) - `cornerRadius`: corner rounding, as a pixel value or percentage string -{{"demo": "ArcPlayground.js", "bg": "playground", "hideToolbar": true}} +{{"component": "file://./demos/arc-playground/index.ts", "bg": "playground", "hideToolbar": true}} :::success The arc is positioned to use as much of the drawing area as possible. @@ -55,7 +55,7 @@ The formatter receives an object with `value`, `valueMin`, and `valueMax`. Use the `gaugeClasses.valueText` class to change the text layout. -{{"demo": "TextPlayground.js", "bg": "playground", "hideToolbar": true}} +{{"component": "file://./demos/text-playground/index.ts", "bg": "playground", "hideToolbar": true}} ## Arc design @@ -63,7 +63,7 @@ Use the `gaugeClasses` export for class names that target different parts of the See [Gauge—Classes](/x/api/charts/gauge/#classes) for the full list. -{{"demo": "ArcDesign.js"}} +{{"component": "file://./demos/arc-design/index.ts"}} ## Adding elements @@ -111,7 +111,7 @@ It returns: - Arc geometry: `startAngle`, `endAngle`, `outerRadius`, `innerRadius`, `cornerRadius`, `cx`, `cy` - Computed: `maxRadius` (largest radius that fits the drawing area) and `valueAngle` (angle for the current value) -{{"demo": "CompositionExample.js"}} +{{"component": "file://./demos/composition-example/index.ts"}} ## Accessibility diff --git a/docs/data/charts/heatmap/BasicHeatmap.js b/docs/data/charts/heatmap/BasicHeatmap.js deleted file mode 100644 index 187f0de9ef0a0..0000000000000 --- a/docs/data/charts/heatmap/BasicHeatmap.js +++ /dev/null @@ -1,16 +0,0 @@ -import Box from '@mui/material/Box'; -import { Heatmap } from '@mui/x-charts-pro/Heatmap'; -import { data } from './dumbData'; - -export default function BasicHeatmap() { - return ( - - - - ); -} diff --git a/docs/data/charts/heatmap/BasicHeatmap.tsx.preview b/docs/data/charts/heatmap/BasicHeatmap.tsx.preview deleted file mode 100644 index 25a16edf33280..0000000000000 --- a/docs/data/charts/heatmap/BasicHeatmap.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/heatmap/ColorConfig.js b/docs/data/charts/heatmap/ColorConfig.js deleted file mode 100644 index f991a6e7fbca2..0000000000000 --- a/docs/data/charts/heatmap/ColorConfig.js +++ /dev/null @@ -1,123 +0,0 @@ -import Stack from '@mui/material/Stack'; -import { interpolateBlues } from 'd3-scale-chromatic'; -import { Heatmap } from '@mui/x-charts-pro/Heatmap'; - -const dataset = [ - { - london: 59, - paris: 57, - newYork: 86, - seoul: 21, - month: 'January', - }, - { - london: 50, - paris: 52, - newYork: 78, - seoul: 28, - month: 'February', - }, - { - london: 47, - paris: 53, - newYork: 106, - seoul: 41, - month: 'March', - }, - { - london: 54, - paris: 56, - newYork: 92, - seoul: 73, - month: 'April', - }, - { - london: 57, - paris: 69, - newYork: 92, - seoul: 99, - month: 'May', - }, - { - london: 60, - paris: 63, - newYork: 103, - seoul: 144, - month: 'June', - }, - { - london: 59, - paris: 60, - newYork: 105, - seoul: 319, - month: 'July', - }, - { - london: 65, - paris: 60, - newYork: 106, - seoul: 249, - month: 'August', - }, - { - london: 51, - paris: 51, - newYork: 95, - seoul: 131, - month: 'September', - }, - { - london: 60, - paris: 65, - newYork: 97, - seoul: 55, - month: 'October', - }, - { - london: 67, - paris: 64, - newYork: 76, - seoul: 48, - month: 'November', - }, - { - london: 61, - paris: 70, - newYork: 103, - seoul: 25, - month: 'December', - }, -]; - -const data = dataset.flatMap(({ london, paris, newYork, seoul }, monthIndex) => [ - [0, monthIndex, london], - [1, monthIndex, paris], - [2, monthIndex, newYork], - [3, monthIndex, seoul], -]); - -const xData = ['London', 'Paris', 'New York', 'Seoul']; -const yData = dataset.flatMap(({ month }) => month); - -export default function ColorConfig() { - return ( - - - - ); -} diff --git a/docs/data/charts/heatmap/ColorConfig.tsx.preview b/docs/data/charts/heatmap/ColorConfig.tsx.preview deleted file mode 100644 index c68bc11c09e9c..0000000000000 --- a/docs/data/charts/heatmap/ColorConfig.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/heatmap/CustomItem.js b/docs/data/charts/heatmap/CustomItem.js deleted file mode 100644 index f1a5cbcadeb29..0000000000000 --- a/docs/data/charts/heatmap/CustomItem.js +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { Heatmap } from '@mui/x-charts-pro/Heatmap'; -import { data } from './dumbData'; - -function CustomCell(props) { - const { x, y, width, height, ownerState, ...other } = props; - - return ( - - - - {ownerState.value} - - - ); -} -export default function CustomItem() { - return ( - - - - ); -} diff --git a/docs/data/charts/heatmap/CustomItem.tsx.preview b/docs/data/charts/heatmap/CustomItem.tsx.preview deleted file mode 100644 index b1f5b7ee147af..0000000000000 --- a/docs/data/charts/heatmap/CustomItem.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/heatmap/HeatmapCellClick.js b/docs/data/charts/heatmap/HeatmapCellClick.js deleted file mode 100644 index 15ae841f878dc..0000000000000 --- a/docs/data/charts/heatmap/HeatmapCellClick.js +++ /dev/null @@ -1,65 +0,0 @@ -import * as React from 'react'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; -import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; -import { Heatmap } from '@mui/x-charts-pro/Heatmap'; - -import { data } from './dumbData'; - -export default function HeatmapCellClick() { - const [cellData, setCellData] = React.useState(null); - - return ( - - - index !== 5 && index !== 13), - highlightScope: { highlight: 'item' }, - }, - ]} - height={300} - onItemClick={(event, params) => setCellData(params)} - /> - - - - - Click on the chart - { - setCellData(null); - }} - > - - - - - - - ); -} diff --git a/docs/data/charts/heatmap/HeatmapDemo.js b/docs/data/charts/heatmap/HeatmapDemo.js deleted file mode 100644 index 46b03512d87eb..0000000000000 --- a/docs/data/charts/heatmap/HeatmapDemo.js +++ /dev/null @@ -1,120 +0,0 @@ -import { interpolateBlues } from 'd3-scale-chromatic'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { Heatmap } from '@mui/x-charts-pro/Heatmap'; - -import bikeData from '../dataset/ParisBicycle.json'; - -const days = [ - new Date(2025, 1, 24), - new Date(2025, 1, 25), - new Date(2025, 1, 26), - new Date(2025, 1, 27), - new Date(2025, 1, 28), - new Date(2025, 2, 1), - new Date(2025, 2, 2), -]; - -const hours = [ - '00', - '01', - '02', - '03', - '04', - '05', - '06', - '07', - '08', - '09', - '10', - '11', - '12', - '13', - '14', - '15', - '16', - '17', - '18', - '19', - '20', - '21', - '22', - '23', -]; - -const shortDayFormatter = new Intl.DateTimeFormat('en-US', { weekday: 'short' }) - .format; -const dateFormatter = new Intl.DateTimeFormat('en-US', { - weekday: 'short', - day: 'numeric', - month: 'short', - year: 'numeric', -}).format; - -export default function HeatmapDemo() { - return ( - - - Bicycle count: Paris - Rivoli street (West-East) - -
- { - return context.location === 'tick' - ? shortDayFormatter(value) - : dateFormatter(value); - }, - tickLabelStyle: { angle: 45 }, - height: 70, - }, - ]} - yAxis={[ - { - data: hours, - label: 'Hour of the day', - tickLabelInterval: (_, index) => index % 2 === 0, - valueFormatter: (value) => `${value}h`, - width: 60, - }, - ]} - series={[ - { - data: bikeData, - label: 'Bicycle count', - highlightScope: { highlight: 'item', fade: 'global' }, - }, - ]} - zAxis={[ - { - colorMap: { - max: 700, - type: 'continuous', - color: (t) => interpolateBlues(Math.sqrt(t)), - }, - }, - ]} - hideLegend={false} - slotProps={{ - legend: { - direction: 'vertical', - position: { vertical: 'top' }, - sx: { height: 200 }, - }, - }} - /> -
- - Data from{' '} - - Paris Data - - - - ); -} diff --git a/docs/data/charts/heatmap/HeatmapLegend.js b/docs/data/charts/heatmap/HeatmapLegend.js deleted file mode 100644 index 151eccb817d33..0000000000000 --- a/docs/data/charts/heatmap/HeatmapLegend.js +++ /dev/null @@ -1,24 +0,0 @@ -import Box from '@mui/material/Box'; -import { Heatmap } from '@mui/x-charts-pro/Heatmap'; -import { data } from './dumbData'; - -export default function HeatmapLegend() { - return ( - - - - ); -} diff --git a/docs/data/charts/heatmap/HeatmapLegend.tsx.preview b/docs/data/charts/heatmap/HeatmapLegend.tsx.preview deleted file mode 100644 index de681335fc0c2..0000000000000 --- a/docs/data/charts/heatmap/HeatmapLegend.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/heatmap/HighlightClasses.js b/docs/data/charts/heatmap/HighlightClasses.js deleted file mode 100644 index 00ebec1ad8617..0000000000000 --- a/docs/data/charts/heatmap/HighlightClasses.js +++ /dev/null @@ -1,35 +0,0 @@ -import Box from '@mui/material/Box'; -import { Heatmap, heatmapClasses } from '@mui/x-charts-pro/Heatmap'; -import { data } from './dumbData'; - -export default function HighlightClasses() { - return ( - - - - ); -} diff --git a/docs/data/charts/heatmap/HighlightHeatmap.js b/docs/data/charts/heatmap/HighlightHeatmap.js deleted file mode 100644 index fd476f42cd1d3..0000000000000 --- a/docs/data/charts/heatmap/HighlightHeatmap.js +++ /dev/null @@ -1,16 +0,0 @@ -import Box from '@mui/material/Box'; -import { Heatmap } from '@mui/x-charts-pro/Heatmap'; -import { data } from './dumbData'; - -export default function HighlightHeatmap() { - return ( - - - - ); -} diff --git a/docs/data/charts/heatmap/HighlightHeatmap.tsx.preview b/docs/data/charts/heatmap/HighlightHeatmap.tsx.preview deleted file mode 100644 index 7041a75d64ae4..0000000000000 --- a/docs/data/charts/heatmap/HighlightHeatmap.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/heatmap/WebGLHeatmap.js b/docs/data/charts/heatmap/WebGLHeatmap.js deleted file mode 100644 index c3793affd96b9..0000000000000 --- a/docs/data/charts/heatmap/WebGLHeatmap.js +++ /dev/null @@ -1,54 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { interpolateOrRd } from 'd3-scale-chromatic'; -import { HeatmapPremium } from '@mui/x-charts-premium/HeatmapPremium'; -import data from '../dataset/nyc-yellow-taxi-2024-trip-count.json'; - -const seriesData = data; -const max = Math.max(...seriesData.map(([, , value]) => value)); -const xData = Array.from({ length: 366 }, (_, i) => { - const date = new Date(2024, 0, 1); - - date.setDate(i + 1); - - return date; -}); -const yData = Array.from({ length: 24 }, (_, i) => i); - -const settings = { - xAxis: [ - { - data: xData, - ordinalTimeTicks: ['months', 'biweekly', 'weeks', 'days'], - valueFormatter: (date) => - date.toLocaleString('en-US', { month: 'short', day: 'numeric' }), - zoom: { minSpan: 3 }, - }, - ], - yAxis: [{ data: yData, valueFormatter: (hour) => `${hour}:00` }], - zAxis: [ - { - min: 0, - max, - colorMap: { - type: 'continuous', - color: interpolateOrRd, - max, - }, - }, - ], - series: [{ data: seriesData }], - height: 450, -}; - -export default function WebGLHeatmap() { - return ( - - - Yellow Taxi Trip Count - 2024 - - - Source: NYC.gov - - ); -} diff --git a/docs/data/charts/heatmap/WebGLHeatmap.tsx.preview b/docs/data/charts/heatmap/WebGLHeatmap.tsx.preview deleted file mode 100644 index 54a6600b9149e..0000000000000 --- a/docs/data/charts/heatmap/WebGLHeatmap.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - Yellow Taxi Trip Count - 2024 - - -Source: NYC.gov \ No newline at end of file diff --git a/docs/data/charts/heatmap/BasicHeatmap.tsx b/docs/data/charts/heatmap/demos/basic-heatmap/BasicHeatmap.tsx similarity index 80% rename from docs/data/charts/heatmap/BasicHeatmap.tsx rename to docs/data/charts/heatmap/demos/basic-heatmap/BasicHeatmap.tsx index 187f0de9ef0a0..dea9136216387 100644 --- a/docs/data/charts/heatmap/BasicHeatmap.tsx +++ b/docs/data/charts/heatmap/demos/basic-heatmap/BasicHeatmap.tsx @@ -1,16 +1,18 @@ import Box from '@mui/material/Box'; import { Heatmap } from '@mui/x-charts-pro/Heatmap'; -import { data } from './dumbData'; +import { data } from '../../dumbData'; export default function BasicHeatmap() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/heatmap/demos/basic-heatmap/client.ts b/docs/data/charts/heatmap/demos/basic-heatmap/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/heatmap/demos/basic-heatmap/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/heatmap/demos/basic-heatmap/index.ts b/docs/data/charts/heatmap/demos/basic-heatmap/index.ts new file mode 100644 index 0000000000000..5df8e883d429f --- /dev/null +++ b/docs/data/charts/heatmap/demos/basic-heatmap/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicHeatmap from './BasicHeatmap'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicHeatmap, { ClientProvider }); diff --git a/docs/data/charts/heatmap/ColorConfig.tsx b/docs/data/charts/heatmap/demos/color-config/ColorConfig.tsx similarity index 94% rename from docs/data/charts/heatmap/ColorConfig.tsx rename to docs/data/charts/heatmap/demos/color-config/ColorConfig.tsx index f64669f6ff717..69a944c7d2e4f 100644 --- a/docs/data/charts/heatmap/ColorConfig.tsx +++ b/docs/data/charts/heatmap/demos/color-config/ColorConfig.tsx @@ -1,7 +1,7 @@ import Stack from '@mui/material/Stack'; import { interpolateBlues } from 'd3-scale-chromatic'; import { Heatmap } from '@mui/x-charts-pro/Heatmap'; -import { HeatmapValueType } from '@mui/x-charts-pro/models'; +import type { HeatmapValueType } from '@mui/x-charts-pro/models'; const dataset = [ { @@ -105,6 +105,7 @@ const yData = dataset.flatMap(({ month }) => month); export default function ColorConfig() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/heatmap/demos/color-config/client.ts b/docs/data/charts/heatmap/demos/color-config/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/heatmap/demos/color-config/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/heatmap/demos/color-config/index.ts b/docs/data/charts/heatmap/demos/color-config/index.ts new file mode 100644 index 0000000000000..0305df7630826 --- /dev/null +++ b/docs/data/charts/heatmap/demos/color-config/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorConfig from './ColorConfig'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorConfig, { ClientProvider }); diff --git a/docs/data/charts/heatmap/CustomItem.tsx b/docs/data/charts/heatmap/demos/custom-item/CustomItem.tsx similarity index 83% rename from docs/data/charts/heatmap/CustomItem.tsx rename to docs/data/charts/heatmap/demos/custom-item/CustomItem.tsx index 95ecaaa4c11ad..6e8a1aa87895f 100644 --- a/docs/data/charts/heatmap/CustomItem.tsx +++ b/docs/data/charts/heatmap/demos/custom-item/CustomItem.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { Heatmap, type HeatmapCellProps } from '@mui/x-charts-pro/Heatmap'; -import { data } from './dumbData'; +import { Heatmap } from '@mui/x-charts-pro/Heatmap'; +import type { HeatmapCellProps } from '@mui/x-charts-pro/Heatmap'; +import { data } from '../../dumbData'; function CustomCell(props: HeatmapCellProps) { const { x, y, width, height, ownerState, ...other } = props; @@ -32,6 +33,7 @@ function CustomCell(props: HeatmapCellProps) { export default function CustomItem() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/heatmap/demos/custom-item/client.ts b/docs/data/charts/heatmap/demos/custom-item/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/heatmap/demos/custom-item/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/heatmap/demos/custom-item/index.ts b/docs/data/charts/heatmap/demos/custom-item/index.ts new file mode 100644 index 0000000000000..09945e2d9adee --- /dev/null +++ b/docs/data/charts/heatmap/demos/custom-item/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomItem from './CustomItem'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomItem, { ClientProvider }); diff --git a/docs/data/charts/heatmap/HeatmapCellClick.tsx b/docs/data/charts/heatmap/demos/heatmap-cell-click/HeatmapCellClick.tsx similarity index 95% rename from docs/data/charts/heatmap/HeatmapCellClick.tsx rename to docs/data/charts/heatmap/demos/heatmap-cell-click/HeatmapCellClick.tsx index 153e036d1529c..27b77c9d9eec1 100644 --- a/docs/data/charts/heatmap/HeatmapCellClick.tsx +++ b/docs/data/charts/heatmap/demos/heatmap-cell-click/HeatmapCellClick.tsx @@ -7,9 +7,10 @@ import IconButton from '@mui/material/IconButton'; import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; import { Heatmap } from '@mui/x-charts-pro/Heatmap'; import type { HeatmapItemIdentifier } from '@mui/x-charts-pro/models'; -import { data } from './dumbData'; +import { data } from '../../dumbData'; export default function HeatmapCellClick() { + // @focus-start @padding 1 const [cellData, setCellData] = React.useState(null); return ( @@ -62,4 +63,5 @@ ${cellData ? JSON.stringify(cellData, null, 2) : '// The data will appear here'} ); + // @focus-end } diff --git a/docs/data/charts/heatmap/demos/heatmap-cell-click/client.ts b/docs/data/charts/heatmap/demos/heatmap-cell-click/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/heatmap/demos/heatmap-cell-click/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/heatmap/demos/heatmap-cell-click/index.ts b/docs/data/charts/heatmap/demos/heatmap-cell-click/index.ts new file mode 100644 index 0000000000000..5c85231d3a0f9 --- /dev/null +++ b/docs/data/charts/heatmap/demos/heatmap-cell-click/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HeatmapCellClick from './HeatmapCellClick'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HeatmapCellClick, { ClientProvider }); diff --git a/docs/data/charts/heatmap/HeatmapDemo.tsx b/docs/data/charts/heatmap/demos/heatmap-demo/HeatmapDemo.tsx similarity index 94% rename from docs/data/charts/heatmap/HeatmapDemo.tsx rename to docs/data/charts/heatmap/demos/heatmap-demo/HeatmapDemo.tsx index 325d41c6a0529..067ee43b34742 100644 --- a/docs/data/charts/heatmap/HeatmapDemo.tsx +++ b/docs/data/charts/heatmap/demos/heatmap-demo/HeatmapDemo.tsx @@ -2,8 +2,8 @@ import { interpolateBlues } from 'd3-scale-chromatic'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import { Heatmap } from '@mui/x-charts-pro/Heatmap'; -import { HeatmapValueType } from '@mui/x-charts-pro/models'; -import bikeData from '../dataset/ParisBicycle.json'; +import type { HeatmapValueType } from '@mui/x-charts-pro/models'; +import bikeData from '../../../dataset/ParisBicycle.json'; const days = [ new Date(2025, 1, 24), @@ -54,6 +54,7 @@ const dateFormatter = new Intl.DateTimeFormat('en-US', { export default function HeatmapDemo() { return ( + {/* @focus-start */} Bicycle count: Paris - Rivoli street (West-East) @@ -116,6 +117,7 @@ export default function HeatmapDemo() { Paris Data + {/* @focus-end */} ); } diff --git a/docs/data/charts/heatmap/demos/heatmap-demo/client.ts b/docs/data/charts/heatmap/demos/heatmap-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/heatmap/demos/heatmap-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/heatmap/demos/heatmap-demo/index.ts b/docs/data/charts/heatmap/demos/heatmap-demo/index.ts new file mode 100644 index 0000000000000..f8e610a5cac53 --- /dev/null +++ b/docs/data/charts/heatmap/demos/heatmap-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HeatmapDemo from './HeatmapDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HeatmapDemo, { ClientProvider }); diff --git a/docs/data/charts/heatmap/HeatmapLegend.tsx b/docs/data/charts/heatmap/demos/heatmap-legend/HeatmapLegend.tsx similarity index 86% rename from docs/data/charts/heatmap/HeatmapLegend.tsx rename to docs/data/charts/heatmap/demos/heatmap-legend/HeatmapLegend.tsx index 151eccb817d33..36f6e6b785efb 100644 --- a/docs/data/charts/heatmap/HeatmapLegend.tsx +++ b/docs/data/charts/heatmap/demos/heatmap-legend/HeatmapLegend.tsx @@ -1,10 +1,11 @@ import Box from '@mui/material/Box'; import { Heatmap } from '@mui/x-charts-pro/Heatmap'; -import { data } from './dumbData'; +import { data } from '../../dumbData'; export default function HeatmapLegend() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/heatmap/demos/heatmap-legend/client.ts b/docs/data/charts/heatmap/demos/heatmap-legend/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/heatmap/demos/heatmap-legend/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/heatmap/demos/heatmap-legend/index.ts b/docs/data/charts/heatmap/demos/heatmap-legend/index.ts new file mode 100644 index 0000000000000..e1c8bc2de11f5 --- /dev/null +++ b/docs/data/charts/heatmap/demos/heatmap-legend/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HeatmapLegend from './HeatmapLegend'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HeatmapLegend, { ClientProvider }); diff --git a/docs/data/charts/heatmap/HighlightClasses.tsx b/docs/data/charts/heatmap/demos/highlight-classes/HighlightClasses.tsx similarity index 90% rename from docs/data/charts/heatmap/HighlightClasses.tsx rename to docs/data/charts/heatmap/demos/highlight-classes/HighlightClasses.tsx index 00ebec1ad8617..b47b8728515ae 100644 --- a/docs/data/charts/heatmap/HighlightClasses.tsx +++ b/docs/data/charts/heatmap/demos/highlight-classes/HighlightClasses.tsx @@ -1,10 +1,11 @@ import Box from '@mui/material/Box'; import { Heatmap, heatmapClasses } from '@mui/x-charts-pro/Heatmap'; -import { data } from './dumbData'; +import { data } from '../../dumbData'; export default function HighlightClasses() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/heatmap/demos/highlight-classes/client.ts b/docs/data/charts/heatmap/demos/highlight-classes/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/heatmap/demos/highlight-classes/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/heatmap/demos/highlight-classes/index.ts b/docs/data/charts/heatmap/demos/highlight-classes/index.ts new file mode 100644 index 0000000000000..c56401fdddef1 --- /dev/null +++ b/docs/data/charts/heatmap/demos/highlight-classes/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HighlightClasses from './HighlightClasses'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HighlightClasses, { ClientProvider }); diff --git a/docs/data/charts/heatmap/HighlightHeatmap.tsx b/docs/data/charts/heatmap/demos/highlight-heatmap/HighlightHeatmap.tsx similarity index 82% rename from docs/data/charts/heatmap/HighlightHeatmap.tsx rename to docs/data/charts/heatmap/demos/highlight-heatmap/HighlightHeatmap.tsx index fd476f42cd1d3..e27088c2b2d0b 100644 --- a/docs/data/charts/heatmap/HighlightHeatmap.tsx +++ b/docs/data/charts/heatmap/demos/highlight-heatmap/HighlightHeatmap.tsx @@ -1,16 +1,18 @@ import Box from '@mui/material/Box'; import { Heatmap } from '@mui/x-charts-pro/Heatmap'; -import { data } from './dumbData'; +import { data } from '../../dumbData'; export default function HighlightHeatmap() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/heatmap/demos/highlight-heatmap/client.ts b/docs/data/charts/heatmap/demos/highlight-heatmap/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/heatmap/demos/highlight-heatmap/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/heatmap/demos/highlight-heatmap/index.ts b/docs/data/charts/heatmap/demos/highlight-heatmap/index.ts new file mode 100644 index 0000000000000..1fb555b89a237 --- /dev/null +++ b/docs/data/charts/heatmap/demos/highlight-heatmap/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HighlightHeatmap from './HighlightHeatmap'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HighlightHeatmap, { ClientProvider }); diff --git a/docs/data/charts/heatmap/WebGLHeatmap.tsx b/docs/data/charts/heatmap/demos/web-gl-heatmap/WebGLHeatmap.tsx similarity index 83% rename from docs/data/charts/heatmap/WebGLHeatmap.tsx rename to docs/data/charts/heatmap/demos/web-gl-heatmap/WebGLHeatmap.tsx index f2cba19e026df..f3a5adfd23a5f 100644 --- a/docs/data/charts/heatmap/WebGLHeatmap.tsx +++ b/docs/data/charts/heatmap/demos/web-gl-heatmap/WebGLHeatmap.tsx @@ -1,11 +1,9 @@ import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import { interpolateOrRd } from 'd3-scale-chromatic'; -import { - HeatmapPremium, - HeatmapPremiumProps, -} from '@mui/x-charts-premium/HeatmapPremium'; -import data from '../dataset/nyc-yellow-taxi-2024-trip-count.json'; +import type { HeatmapPremiumProps } from '@mui/x-charts-premium/HeatmapPremium'; +import { HeatmapPremium } from '@mui/x-charts-premium/HeatmapPremium'; +import data from '../../../dataset/nyc-yellow-taxi-2024-trip-count.json'; const seriesData = data as [number, number, number][]; const max = Math.max(...seriesData.map(([, , value]) => value)); @@ -47,11 +45,13 @@ const settings: HeatmapPremiumProps = { export default function WebGLHeatmap() { return ( + {/* @focus-start */} Yellow Taxi Trip Count - 2024 Source: NYC.gov + {/* @focus-end */} ); } diff --git a/docs/data/charts/heatmap/demos/web-gl-heatmap/client.ts b/docs/data/charts/heatmap/demos/web-gl-heatmap/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/heatmap/demos/web-gl-heatmap/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/heatmap/demos/web-gl-heatmap/index.ts b/docs/data/charts/heatmap/demos/web-gl-heatmap/index.ts new file mode 100644 index 0000000000000..711581a9b3bd6 --- /dev/null +++ b/docs/data/charts/heatmap/demos/web-gl-heatmap/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import WebGLHeatmap from './WebGLHeatmap'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, WebGLHeatmap, { ClientProvider }); diff --git a/docs/data/charts/heatmap/dumbData.ts b/docs/data/charts/heatmap/dumbData.ts index 4aa53b77c3375..25812d1b109df 100644 --- a/docs/data/charts/heatmap/dumbData.ts +++ b/docs/data/charts/heatmap/dumbData.ts @@ -1,4 +1,4 @@ -import { HeatmapValueType } from '@mui/x-charts-pro/models'; +import type { HeatmapValueType } from '@mui/x-charts-pro/models'; export const data: HeatmapValueType[] = [ [0, 0, 10], diff --git a/docs/data/charts/heatmap/heatmap.md b/docs/data/charts/heatmap/heatmap.md index a02bb614a0752..f833cfe6c774d 100644 --- a/docs/data/charts/heatmap/heatmap.md +++ b/docs/data/charts/heatmap/heatmap.md @@ -17,7 +17,7 @@ Use heatmaps to spot areas of higher or lower intensity, clusters, or anomalies. The demo below shows bicycle counts in Paris by day and hour. -{{"demo": "HeatmapDemo.js", "disableAd": true, "defaultCodeOpen": false}} +{{"component": "file://./demos/heatmap-demo/index.ts", "disableAd": true, "collapseToEmpty": true}} ## Basics @@ -40,7 +40,7 @@ The first two numbers are the cell's x and y indices, and the third is the cell Use the `xAxis` and `yAxis` props to set x and y ticks. -{{"demo": "BasicHeatmap.js"}} +{{"component": "file://./demos/basic-heatmap/index.ts"}} ### Using a dataset @@ -53,21 +53,21 @@ Use the `zAxis` configuration to customize how values map to color. You can use piecewise or continuous scales. See [Styling—Value-based colors](/x/react-charts/styling/#value-based-colors) for details. -{{"demo": "ColorConfig.js"}} +{{"component": "file://./demos/color-config/index.ts"}} ## Highlight Set `highlightScope.highlight` to `'item'` to highlight the hovered cell. Set `highlightScope.fade` to `'global'` to fade the other cells. -{{"demo": "HighlightHeatmap.js"}} +{{"component": "file://./demos/highlight-heatmap/index.ts"}} By default, the highlight and fade use the CSS `filter: saturate(...)` property. You can override the effect with the `heatmapClasses.highlighted` and `heatmapClasses.faded` classes. The demo below uses border radius on the highlighted cell and reduced saturation for faded cells. -{{"demo": "HighlightClasses.js"}} +{{"component": "file://./demos/highlight-classes/index.ts"}} ## Click events @@ -76,7 +76,7 @@ Use `onItemClick` to handle cell clicks. The handler receives the click event as the first argument and an item object as the second. The item includes `xIndex` and `yIndex` (cell position on the x- and y-axes) and, when the cell has data, `dataIndex` (index in the series `data` array). -{{"demo": "HeatmapCellClick.js"}} +{{"component": "file://./demos/heatmap-cell-click/index.ts"}} ## Shared features @@ -108,13 +108,13 @@ The heatmap includes a [`ContinuousColorLegend`](/x/react-charts/legend/#color-l Set `hideLegend` to `true` to hide the legend. Customize it with `slots.legend` and `slotProps.legend`. -{{"demo": "HeatmapLegend.js"}} +{{"component": "file://./demos/heatmap-legend/index.ts"}} ## Custom cells Use the `cell` slot to replace the default cell shape or add labels. -{{"demo": "CustomItem.js"}} +{{"component": "file://./demos/custom-item/index.ts"}} ## WebGL renderer [](/x/introduction/licensing/#premium-plan 'Premium plan') @@ -128,4 +128,4 @@ The WebGL renderer has some limitations: The demo below shows roughly 8,800 cells rendered with WebGL. -{{"demo": "WebGLHeatmap.js"}} +{{"component": "file://./demos/web-gl-heatmap/index.ts"}} diff --git a/docs/data/charts/highlighting/AxisValueHighlight.js b/docs/data/charts/highlighting/AxisValueHighlight.js deleted file mode 100644 index 47178e038f557..0000000000000 --- a/docs/data/charts/highlighting/AxisValueHighlight.js +++ /dev/null @@ -1,76 +0,0 @@ -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; -import { ChartsAxisHighlightValue } from '@mui/x-charts/ChartsAxisHighlightValue'; -import data from '../dataset/random/scatterParallel.json'; - -function valueFormatter(value) { - if (typeof value === 'number') { - return Math.round(value).toString(); - } - if (value instanceof Date) { - return value.toLocaleDateString(); - } - return value; -} - -export default function AxisValueHighlight() { - return ( -
- ({ x: v.x1, y: v.y1, id: v.id })), - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })), - }, - ]} - slotProps={{ tooltip: { trigger: 'none' } }} - axisHighlight={{ x: 'line', y: 'line' }} - > - - - - - - - - - -
- ); -} diff --git a/docs/data/charts/highlighting/AxisValueHighlightCustomization.js b/docs/data/charts/highlighting/AxisValueHighlightCustomization.js deleted file mode 100644 index ac2d6c5fccae1..0000000000000 --- a/docs/data/charts/highlighting/AxisValueHighlightCustomization.js +++ /dev/null @@ -1,91 +0,0 @@ -import { useTheme } from '@mui/material/styles'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; -import { ChartsAxisHighlightValue } from '@mui/x-charts/ChartsAxisHighlightValue'; -import data from '../dataset/random/scatterParallel.json'; - -export default function AxisValueHighlightCustomization() { - const theme = useTheme(); - - const green = theme.palette.mode === 'dark' ? '#044412' : '#e5fedb'; - const red = theme.palette.mode === 'dark' ? '#610909' : '#fad7d2'; - const grey = theme.palette.mode === 'dark' ? '#333333' : '#cccccc'; - - return ( -
- ({ x: v.x1, y: v.y1, id: v.id })), - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })), - }, - ]} - slotProps={{ tooltip: { trigger: 'none' } }} - axisHighlight={{ x: 'line', y: 'line' }} - > - - 'without overflow'} - sx={{ - translate: '-100% -50%', - borderRadius: '8px 0 0 8px', - bgcolor: green, - }} - /> - 'with overflow'} - sx={{ borderRadius: '0 8px 8px 0', bgcolor: green }} - /> - 'this uses the max height'} - sx={{ - p: 0.5, - bgcolor: red, - maxWidth: 70, - maxHeight: 'var(--space)', - overflow: 'auto', - pointerEvents: 'auto', - }} - /> - 'this one does not'} - sx={{ - p: 0.5, - bgcolor: red, - maxWidth: 50, - }} - /> - `${Math.round(v)}`} - sx={{ - translate: '-50% -100%', - borderRadius: '8px 8px 0 0', - bgcolor: grey, - }} - /> - -
- ); -} diff --git a/docs/data/charts/highlighting/BandHighlight.js b/docs/data/charts/highlighting/BandHighlight.js deleted file mode 100644 index 6d99d08729574..0000000000000 --- a/docs/data/charts/highlighting/BandHighlight.js +++ /dev/null @@ -1,79 +0,0 @@ -import * as React from 'react'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; -import RadioGroup from '@mui/material/RadioGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Radio from '@mui/material/Radio'; -import Stack from '@mui/material/Stack'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { legendClasses } from '@mui/x-charts/ChartsLegend'; - -const barChartsParams = { - xAxis: [{ data: ['page A', 'page B', 'page C', 'page D', 'page E'] }], - series: [ - { data: [2, 5, 3, 4, 1], stack: '1', label: 'Series x' }, - { data: [10, 3, 1, 2, 10], stack: '1', label: 'Series y' }, - { data: [10, 3, 1, 2, 10], stack: '1', label: 'Series z' }, - ], - margin: { right: 10 }, - sx: { - [`& .${legendClasses.root}`]: { - display: 'none', - }, - }, - height: 300, -}; - -export default function BandHighlight() { - const [xHighlight, setXHightlight] = React.useState('band'); - const [yHighlight, setYHightlight] = React.useState('none'); - - const handleChange = (direction) => (event) => { - if (direction === 'x') { - setXHightlight(event.target.value); - } - if (direction === 'y') { - setYHightlight(event.target.value); - } - }; - - return ( - -
- -
- - - x highlight - - } label="None" /> - } label="Line" /> - } label="Band" /> - - - - y highlight - - } label="None" /> - } label="Line" /> - - - - - ); -} diff --git a/docs/data/charts/highlighting/BandHighlight.tsx b/docs/data/charts/highlighting/BandHighlight.tsx deleted file mode 100644 index 727897465ca0d..0000000000000 --- a/docs/data/charts/highlighting/BandHighlight.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import * as React from 'react'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; -import RadioGroup from '@mui/material/RadioGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Radio from '@mui/material/Radio'; -import Stack from '@mui/material/Stack'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { legendClasses } from '@mui/x-charts/ChartsLegend'; - -const barChartsParams = { - xAxis: [{ data: ['page A', 'page B', 'page C', 'page D', 'page E'] }], - series: [ - { data: [2, 5, 3, 4, 1], stack: '1', label: 'Series x' }, - { data: [10, 3, 1, 2, 10], stack: '1', label: 'Series y' }, - { data: [10, 3, 1, 2, 10], stack: '1', label: 'Series z' }, - ], - margin: { right: 10 }, - sx: { - [`& .${legendClasses.root}`]: { - display: 'none', - }, - }, - height: 300, -}; - -export default function BandHighlight() { - const [xHighlight, setXHightlight] = React.useState<'band' | 'none' | 'line'>( - 'band', - ); - const [yHighlight, setYHightlight] = React.useState<'none' | 'line'>('none'); - - const handleChange = - (direction: 'x' | 'y') => (event: React.ChangeEvent) => { - if (direction === 'x') { - setXHightlight( - (event.target as HTMLInputElement).value as 'band' | 'none' | 'line', - ); - } - if (direction === 'y') { - setYHightlight((event.target as HTMLInputElement).value as 'none' | 'line'); - } - }; - - return ( - -
- -
- - - x highlight - - } label="None" /> - } label="Line" /> - } label="Band" /> - - - - y highlight - - } label="None" /> - } label="Line" /> - - - - - ); -} diff --git a/docs/data/charts/highlighting/ControlledAxisHighlight.js b/docs/data/charts/highlighting/ControlledAxisHighlight.js deleted file mode 100644 index 0f7cc81779ef2..0000000000000 --- a/docs/data/charts/highlighting/ControlledAxisHighlight.js +++ /dev/null @@ -1,80 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import { BarChart } from '@mui/x-charts/BarChart'; -import FormControl from '@mui/material/FormControl'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormLabel from '@mui/material/FormLabel'; -import Radio from '@mui/material/Radio'; -import RadioGroup from '@mui/material/RadioGroup'; - -import { LineChart } from '@mui/x-charts/LineChart'; - -export default function ControlledAxisHighlight() { - const [highlightedAxis, setHighlightedAxis] = React.useState([ - { - axisId: 'x-axis', - dataIndex: 2, - }, - ]); - - const handleAxisHighlight = (event) => { - setHighlightedAxis([ - { - axisId: 'x-axis', - dataIndex: Number(event.target.value), - }, - ]); - }; - - return ( - - - Highlighted index - - } label="0" /> - } label="1" /> - } label="2" /> - } label="3" /> - } label="4" /> - - - - setHighlightedAxis(newState)} - /> - setHighlightedAxis(newState)} - /> - - - ); -} - -const barChartsProps = { - series: [ - { data: [3, 4, 1, 6, 5], label: 'series A', id: 'A' }, - { data: [4, 3, 1, 5, 8], label: 'series B', id: 'B' }, - ], - xAxis: [{ id: 'x-axis', scaleType: 'band', data: [0, 2, 5, 10, 20] }], - height: 300, -}; - -const lineChartsProps = { - series: [ - { data: [3, 4, 1, 6, 5], label: 'series A', id: 'A' }, - { data: [4, 3, 1, 5, 8], label: 'series B', id: 'B' }, - ], - xAxis: [{ id: 'x-axis', scaleType: 'linear', data: [0, 2, 5, 10, 20] }], - height: 300, -}; diff --git a/docs/data/charts/highlighting/ControlledHighlight.js b/docs/data/charts/highlighting/ControlledHighlight.js deleted file mode 100644 index bd3e114daa895..0000000000000 --- a/docs/data/charts/highlighting/ControlledHighlight.js +++ /dev/null @@ -1,132 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import ToggleButton from '@mui/material/ToggleButton'; - -import { BarChart } from '@mui/x-charts/BarChart'; -import FormControl from '@mui/material/FormControl'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormLabel from '@mui/material/FormLabel'; -import Radio from '@mui/material/Radio'; -import RadioGroup from '@mui/material/RadioGroup'; - -export default function ControlledHighlight() { - const [highlightedItem, setHighLightedItem] = React.useState({ - seriesId: 'A', - dataIndex: 0, - }); - const [highlight, setHighlight] = React.useState('item'); - const [fade, setFade] = React.useState('global'); - - const handleHighLightedSeries = (event, newHighLightedSeries) => { - if (newHighLightedSeries !== null) { - setHighLightedItem((prev) => ({ - dataIndex: 0, - ...prev, - seriesId: newHighLightedSeries, - })); - } - }; - - const handleHighLightedItem = (event) => { - setHighLightedItem((prev) => ({ - seriesId: 'A', - ...prev, - dataIndex: Number(event.target.value), - })); - }; - - return ( - - - - - {['A', 'B'].map((type) => ( - - Series {type} - - ))} - - - Item ID - - } label="0" /> - } label="1" /> - } label="2" /> - } label="3" /> - } label="4" /> - - - - ({ - ...series, - highlightScope: { - highlight, - fade, - }, - }))} - highlightedItem={highlightedItem} - onHighlightChange={setHighLightedItem} - /> - - - setHighlight(event.target.value)} - sx={{ minWidth: 150 }} - > - none - item - series - - setFade(event.target.value)} - sx={{ minWidth: 150 }} - > - none - series - global - - - - ); -} - -const barChartsProps = { - series: [ - { data: [3, 4, 1, 6, 5], label: 'A', id: 'A' }, - { data: [4, 3, 1, 5, 8], label: 'B', id: 'B' }, - ], - height: 400, -}; diff --git a/docs/data/charts/highlighting/ElementHighlights.js b/docs/data/charts/highlighting/ElementHighlights.js deleted file mode 100644 index d962b03d9d27b..0000000000000 --- a/docs/data/charts/highlighting/ElementHighlights.js +++ /dev/null @@ -1,212 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Switch from '@mui/material/Switch'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import ToggleButton from '@mui/material/ToggleButton'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { LineChart } from '@mui/x-charts/LineChart'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import { PieChart } from '@mui/x-charts/PieChart'; -import scatterDataset from '../dataset/random/scatterParallel.json'; - -const barChartsParams = { - series: [ - { data: [3, 4, 1, 6, 5], label: 'A' }, - { data: [4, 3, 1, 5, 8], label: 'B' }, - { data: [4, 2, 5, 4, 1], label: 'C' }, - ], - height: 400, -}; -const lineChartsParams = { - series: [ - { data: [3, 4, 1, 6, 5], label: 'A', area: false, stack: 'total' }, - { data: [4, 3, 1, 5, 8], label: 'B', area: false, stack: 'total' }, - { data: [4, 2, 5, 4, 1], label: 'C', area: false, stack: 'total' }, - ], - xAxis: [{ data: [1, 2, 3, 4, 5], type: 'linear' }], - height: 400, -}; - -const scatterChartsParams = { - dataset: scatterDataset, - series: [ - { datasetKeys: { id: 'id', x: 'x1', y: 'y1' }, label: 'A' }, - { datasetKeys: { id: 'id', x: 'x2', y: 'y2' }, label: 'B' }, - ], - height: 400, -}; - -const pieChartsParams = { - series: [ - { - data: [{ value: 5 }, { value: 10 }, { value: 15 }], - label: 'Series 1', - outerRadius: 80, - highlight: { additionalRadius: 10 }, - }, - { - data: [{ value: 5 }, { value: 10 }, { value: 15 }], - label: 'Series 1', - innerRadius: 90, - highlight: { additionalRadius: 10 }, - }, - ], - height: 400, - margin: { top: 50, bottom: 50 }, -}; - -function CustomLine(props) { - const { d, ownerState, skipAnimation, className, ...other } = props; - - return ( - - - - - ); -} - -export default function ElementHighlights() { - const [chartType, setChartType] = React.useState('bar'); - const [withArea, setWithArea] = React.useState(false); - const [highlight, setHighlight] = React.useState('item'); - const [fade, setFade] = React.useState('global'); - - const handleChartType = (event, newChartType) => { - if (newChartType !== null) { - setChartType(newChartType); - } - }; - - return ( - - - - {['bar', 'line', 'scatter', 'pie'].map((type) => ( - - {type} - - ))} - - {chartType === 'bar' && ( - ({ - ...series, - highlightScope: { - highlight, - fade, - }, - }))} - /> - )} - - {chartType === 'line' && ( - ({ - ...series, - area: withArea, - highlightScope: { - highlight, - fade, - }, - }))} - slots={withArea ? {} : { line: CustomLine }} - /> - )} - - {chartType === 'scatter' && ( - ({ - ...series, - highlightScope: { - highlight, - fade, - }, - }))} - /> - )} - - {chartType === 'pie' && ( - ({ - ...series, - highlightScope: { - highlight, - fade, - }, - }))} - /> - )} - - - setHighlight(event.target.value)} - sx={{ minWidth: 150 }} - > - none - item - series - - setFade(event.target.value)} - sx={{ minWidth: 150 }} - > - none - series - global - - {chartType === 'line' && ( - setWithArea(event.target.checked)} - /> - } - label="Fill line area" - /> - )} - - - ); -} diff --git a/docs/data/charts/highlighting/ElementHighlights.tsx b/docs/data/charts/highlighting/ElementHighlights.tsx deleted file mode 100644 index 8bd3dac120ff1..0000000000000 --- a/docs/data/charts/highlighting/ElementHighlights.tsx +++ /dev/null @@ -1,215 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Switch from '@mui/material/Switch'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import ToggleButton from '@mui/material/ToggleButton'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { AnimatedLineProps, LineChart } from '@mui/x-charts/LineChart'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import { PieChart } from '@mui/x-charts/PieChart'; -import scatterDataset from '../dataset/random/scatterParallel.json'; - -type HighlightOptions = 'none' | 'item' | 'series'; -type FadeOptions = 'none' | 'series' | 'global'; - -const barChartsParams = { - series: [ - { data: [3, 4, 1, 6, 5], label: 'A' }, - { data: [4, 3, 1, 5, 8], label: 'B' }, - { data: [4, 2, 5, 4, 1], label: 'C' }, - ], - height: 400, -}; -const lineChartsParams = { - series: [ - { data: [3, 4, 1, 6, 5], label: 'A', area: false, stack: 'total' }, - { data: [4, 3, 1, 5, 8], label: 'B', area: false, stack: 'total' }, - { data: [4, 2, 5, 4, 1], label: 'C', area: false, stack: 'total' }, - ], - xAxis: [{ data: [1, 2, 3, 4, 5], type: 'linear' }], - height: 400, -}; - -const scatterChartsParams = { - dataset: scatterDataset, - series: [ - { datasetKeys: { id: 'id', x: 'x1', y: 'y1' }, label: 'A' }, - { datasetKeys: { id: 'id', x: 'x2', y: 'y2' }, label: 'B' }, - ], - height: 400, -}; - -const pieChartsParams = { - series: [ - { - data: [{ value: 5 }, { value: 10 }, { value: 15 }], - label: 'Series 1', - outerRadius: 80, - highlight: { additionalRadius: 10 }, - }, - { - data: [{ value: 5 }, { value: 10 }, { value: 15 }], - label: 'Series 1', - innerRadius: 90, - highlight: { additionalRadius: 10 }, - }, - ], - height: 400, - margin: { top: 50, bottom: 50 }, -}; - -function CustomLine(props: AnimatedLineProps) { - const { d, ownerState, skipAnimation, className, ...other } = props; - - return ( - - - - - ); -} - -export default function ElementHighlights() { - const [chartType, setChartType] = React.useState('bar'); - const [withArea, setWithArea] = React.useState(false); - const [highlight, setHighlight] = React.useState('item'); - const [fade, setFade] = React.useState('global'); - - const handleChartType = (event: any, newChartType: string) => { - if (newChartType !== null) { - setChartType(newChartType); - } - }; - - return ( - - - - {['bar', 'line', 'scatter', 'pie'].map((type) => ( - - {type} - - ))} - - {chartType === 'bar' && ( - ({ - ...series, - highlightScope: { - highlight, - fade, - }, - }))} - /> - )} - - {chartType === 'line' && ( - ({ - ...series, - area: withArea, - highlightScope: { - highlight, - fade, - }, - }))} - slots={withArea ? {} : { line: CustomLine }} - /> - )} - - {chartType === 'scatter' && ( - ({ - ...series, - highlightScope: { - highlight, - fade, - }, - }))} - /> - )} - - {chartType === 'pie' && ( - ({ - ...series, - highlightScope: { - highlight, - fade, - }, - }))} - /> - )} - - - setHighlight(event.target.value as HighlightOptions)} - sx={{ minWidth: 150 }} - > - none - item - series - - setFade(event.target.value as FadeOptions)} - sx={{ minWidth: 150 }} - > - none - series - global - - {chartType === 'line' && ( - setWithArea(event.target.checked)} - /> - } - label="Fill line area" - /> - )} - - - ); -} diff --git a/docs/data/charts/highlighting/SyncHighlight.js b/docs/data/charts/highlighting/SyncHighlight.js deleted file mode 100644 index f10c5dbb539a9..0000000000000 --- a/docs/data/charts/highlighting/SyncHighlight.js +++ /dev/null @@ -1,66 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { PieChart } from '@mui/x-charts/PieChart'; - -export default function SyncHighlight() { - const [highlightedItem, setHighlightedItem] = React.useState(null); - - return ( - - - setHighlightedItem( - item ? { seriesId: item.seriesId, dataIndex: item.dataIndex } : null, - ) - } - /> - - setHighlightedItem( - item ? { seriesId: item.seriesId, dataIndex: item.dataIndex } : null, - ) - } - /> - - ); -} - -const barChartsProps = { - series: [ - { - data: [3, 4, 1, 6, 5], - id: 'sync', - highlightScope: { highlight: 'item', fade: 'global' }, - }, - ], - xAxis: [{ data: ['A', 'B', 'C', 'D', 'E'] }], - height: 200, - hideLegend: true, -}; - -const pieChartProps = { - series: [ - { - id: 'sync', - data: [ - { value: 3, label: 'A', id: 'A' }, - { value: 4, label: 'B', id: 'B' }, - { value: 1, label: 'C', id: 'C' }, - { value: 6, label: 'D', id: 'D' }, - { value: 5, label: 'E', id: 'E' }, - ], - highlightScope: { highlight: 'item', fade: 'global' }, - }, - ], - height: 150, - hideLegend: true, -}; diff --git a/docs/data/charts/highlighting/AxisValueHighlightCustomization.tsx b/docs/data/charts/highlighting/demos/axis-value-highlight-customization/AxisValueHighlightCustomization.tsx similarity index 96% rename from docs/data/charts/highlighting/AxisValueHighlightCustomization.tsx rename to docs/data/charts/highlighting/demos/axis-value-highlight-customization/AxisValueHighlightCustomization.tsx index f23b1a6907e72..de15b0fb6bbdb 100644 --- a/docs/data/charts/highlighting/AxisValueHighlightCustomization.tsx +++ b/docs/data/charts/highlighting/demos/axis-value-highlight-customization/AxisValueHighlightCustomization.tsx @@ -2,9 +2,10 @@ import { useTheme } from '@mui/material/styles'; import { ScatterChart } from '@mui/x-charts/ScatterChart'; import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; import { ChartsAxisHighlightValue } from '@mui/x-charts/ChartsAxisHighlightValue'; -import data from '../dataset/random/scatterParallel.json'; +import data from '../../../dataset/random/scatterParallel.json'; export default function AxisValueHighlightCustomization() { + // @focus-start @padding 1 const theme = useTheme(); const green = theme.palette.mode === 'dark' ? '#044412' : '#e5fedb'; @@ -89,4 +90,5 @@ export default function AxisValueHighlightCustomization() { ); + // @focus-end } diff --git a/docs/data/charts/highlighting/demos/axis-value-highlight-customization/client.ts b/docs/data/charts/highlighting/demos/axis-value-highlight-customization/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/highlighting/demos/axis-value-highlight-customization/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/highlighting/demos/axis-value-highlight-customization/index.ts b/docs/data/charts/highlighting/demos/axis-value-highlight-customization/index.ts new file mode 100644 index 0000000000000..f2b41041186db --- /dev/null +++ b/docs/data/charts/highlighting/demos/axis-value-highlight-customization/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AxisValueHighlightCustomization from './AxisValueHighlightCustomization'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AxisValueHighlightCustomization, { ClientProvider }); diff --git a/docs/data/charts/highlighting/AxisValueHighlight.tsx b/docs/data/charts/highlighting/demos/axis-value-highlight/AxisValueHighlight.tsx similarity index 95% rename from docs/data/charts/highlighting/AxisValueHighlight.tsx rename to docs/data/charts/highlighting/demos/axis-value-highlight/AxisValueHighlight.tsx index 9a2412e4b1a58..ffcdc67a80b8d 100644 --- a/docs/data/charts/highlighting/AxisValueHighlight.tsx +++ b/docs/data/charts/highlighting/demos/axis-value-highlight/AxisValueHighlight.tsx @@ -1,7 +1,7 @@ import { ScatterChart } from '@mui/x-charts/ScatterChart'; import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; import { ChartsAxisHighlightValue } from '@mui/x-charts/ChartsAxisHighlightValue'; -import data from '../dataset/random/scatterParallel.json'; +import data from '../../../dataset/random/scatterParallel.json'; function valueFormatter(value: number | Date | string) { if (typeof value === 'number') { @@ -16,6 +16,7 @@ function valueFormatter(value: number | Date | string) { export default function AxisValueHighlight() { return (
+ {/* @focus-start */} + {/* @focus-end */}
); } diff --git a/docs/data/charts/highlighting/demos/axis-value-highlight/client.ts b/docs/data/charts/highlighting/demos/axis-value-highlight/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/highlighting/demos/axis-value-highlight/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/highlighting/demos/axis-value-highlight/index.ts b/docs/data/charts/highlighting/demos/axis-value-highlight/index.ts new file mode 100644 index 0000000000000..b1eb3ed5f995f --- /dev/null +++ b/docs/data/charts/highlighting/demos/axis-value-highlight/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AxisValueHighlight from './AxisValueHighlight'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AxisValueHighlight, { ClientProvider }); diff --git a/docs/data/charts/highlighting/demos/band-highlight/BandHighlight.tsx b/docs/data/charts/highlighting/demos/band-highlight/BandHighlight.tsx new file mode 100644 index 0000000000000..bb40477dabc17 --- /dev/null +++ b/docs/data/charts/highlighting/demos/band-highlight/BandHighlight.tsx @@ -0,0 +1,86 @@ +import * as React from 'react'; +import FormControl from '@mui/material/FormControl'; +import FormLabel from '@mui/material/FormLabel'; +import RadioGroup from '@mui/material/RadioGroup'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Radio from '@mui/material/Radio'; +import Stack from '@mui/material/Stack'; +import { BarChart } from '@mui/x-charts/BarChart'; +import { legendClasses } from '@mui/x-charts/ChartsLegend'; + +const barChartsParams = { + xAxis: [{ data: ['page A', 'page B', 'page C', 'page D', 'page E'] }], + series: [ + { data: [2, 5, 3, 4, 1], stack: '1', label: 'Series x' }, + { data: [10, 3, 1, 2, 10], stack: '1', label: 'Series y' }, + { data: [10, 3, 1, 2, 10], stack: '1', label: 'Series z' }, + ], + margin: { right: 10 }, + sx: { + [`& .${legendClasses.root}`]: { + display: 'none', + }, + }, + height: 300, +}; + +export default function BandHighlight() { + // @focus-start @padding 1 + const [xHighlight, setXHightlight] = React.useState<'band' | 'none' | 'line'>( + 'band', + ); + const [yHighlight, setYHightlight] = React.useState<'none' | 'line'>('none'); + + const handleChange = + (direction: 'x' | 'y') => (event: React.ChangeEvent) => { + if (direction === 'x') { + setXHightlight( + (event.target as HTMLInputElement).value as 'band' | 'none' | 'line', + ); + } + if (direction === 'y') { + setYHightlight((event.target as HTMLInputElement).value as 'none' | 'line'); + } + }; + + return ( + +
+ +
+ + + x highlight + + } label="None" /> + } label="Line" /> + } label="Band" /> + + + + y highlight + + } label="None" /> + } label="Line" /> + + + + + ); + // @focus-end +} diff --git a/docs/data/charts/highlighting/demos/band-highlight/client.ts b/docs/data/charts/highlighting/demos/band-highlight/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/highlighting/demos/band-highlight/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/highlighting/demos/band-highlight/index.ts b/docs/data/charts/highlighting/demos/band-highlight/index.ts new file mode 100644 index 0000000000000..64f303920e7f0 --- /dev/null +++ b/docs/data/charts/highlighting/demos/band-highlight/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BandHighlight from './BandHighlight'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BandHighlight, { ClientProvider }); diff --git a/docs/data/charts/highlighting/ControlledAxisHighlight.tsx b/docs/data/charts/highlighting/demos/controlled-axis-highlight/ControlledAxisHighlight.tsx similarity index 88% rename from docs/data/charts/highlighting/ControlledAxisHighlight.tsx rename to docs/data/charts/highlighting/demos/controlled-axis-highlight/ControlledAxisHighlight.tsx index d36133912c7b5..4b5927b8795d3 100644 --- a/docs/data/charts/highlighting/ControlledAxisHighlight.tsx +++ b/docs/data/charts/highlighting/demos/controlled-axis-highlight/ControlledAxisHighlight.tsx @@ -1,16 +1,19 @@ import * as React from 'react'; import Stack from '@mui/material/Stack'; import Box from '@mui/material/Box'; -import { BarChart, BarChartProps } from '@mui/x-charts/BarChart'; +import type { BarChartProps } from '@mui/x-charts/BarChart'; +import { BarChart } from '@mui/x-charts/BarChart'; import FormControl from '@mui/material/FormControl'; import FormControlLabel from '@mui/material/FormControlLabel'; import FormLabel from '@mui/material/FormLabel'; import Radio from '@mui/material/Radio'; import RadioGroup from '@mui/material/RadioGroup'; -import { AxisItemIdentifier } from '@mui/x-charts/models'; -import { LineChart, LineChartProps } from '@mui/x-charts/LineChart'; +import type { AxisItemIdentifier } from '@mui/x-charts/models'; +import type { LineChartProps } from '@mui/x-charts/LineChart'; +import { LineChart } from '@mui/x-charts/LineChart'; export default function ControlledAxisHighlight() { + // @focus-start @padding 1 const [highlightedAxis, setHighlightedAxis] = React.useState( [ { @@ -61,6 +64,7 @@ export default function ControlledAxisHighlight() { ); + // @focus-end } const barChartsProps: BarChartProps = { diff --git a/docs/data/charts/highlighting/demos/controlled-axis-highlight/client.ts b/docs/data/charts/highlighting/demos/controlled-axis-highlight/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/highlighting/demos/controlled-axis-highlight/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/highlighting/demos/controlled-axis-highlight/index.ts b/docs/data/charts/highlighting/demos/controlled-axis-highlight/index.ts new file mode 100644 index 0000000000000..c6fd5fea2e1b2 --- /dev/null +++ b/docs/data/charts/highlighting/demos/controlled-axis-highlight/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ControlledAxisHighlight from './ControlledAxisHighlight'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ControlledAxisHighlight, { ClientProvider }); diff --git a/docs/data/charts/highlighting/ControlledHighlight.tsx b/docs/data/charts/highlighting/demos/controlled-highlight/ControlledHighlight.tsx similarity index 95% rename from docs/data/charts/highlighting/ControlledHighlight.tsx rename to docs/data/charts/highlighting/demos/controlled-highlight/ControlledHighlight.tsx index 5780ae08a18ac..b21784258731e 100644 --- a/docs/data/charts/highlighting/ControlledHighlight.tsx +++ b/docs/data/charts/highlighting/demos/controlled-highlight/ControlledHighlight.tsx @@ -5,8 +5,9 @@ import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import ToggleButton from '@mui/material/ToggleButton'; -import { HighlightItemIdentifier } from '@mui/x-charts/models'; -import { BarChart, BarChartProps } from '@mui/x-charts/BarChart'; +import type { HighlightItemIdentifier } from '@mui/x-charts/models'; +import type { BarChartProps } from '@mui/x-charts/BarChart'; +import { BarChart } from '@mui/x-charts/BarChart'; import FormControl from '@mui/material/FormControl'; import FormControlLabel from '@mui/material/FormControlLabel'; import FormLabel from '@mui/material/FormLabel'; @@ -14,6 +15,7 @@ import Radio from '@mui/material/Radio'; import RadioGroup from '@mui/material/RadioGroup'; export default function ControlledHighlight() { + // @focus-start @padding 1 const [highlightedItem, setHighLightedItem] = React.useState | null>({ seriesId: 'A', @@ -128,6 +130,7 @@ export default function ControlledHighlight() { ); + // @focus-end } const barChartsProps: BarChartProps = { diff --git a/docs/data/charts/highlighting/demos/controlled-highlight/client.ts b/docs/data/charts/highlighting/demos/controlled-highlight/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/highlighting/demos/controlled-highlight/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/highlighting/demos/controlled-highlight/index.ts b/docs/data/charts/highlighting/demos/controlled-highlight/index.ts new file mode 100644 index 0000000000000..3902e32b529a6 --- /dev/null +++ b/docs/data/charts/highlighting/demos/controlled-highlight/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ControlledHighlight from './ControlledHighlight'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ControlledHighlight, { ClientProvider }); diff --git a/docs/data/charts/highlighting/demos/element-highlights/ElementHighlights.tsx b/docs/data/charts/highlighting/demos/element-highlights/ElementHighlights.tsx new file mode 100644 index 0000000000000..544662a50aac8 --- /dev/null +++ b/docs/data/charts/highlighting/demos/element-highlights/ElementHighlights.tsx @@ -0,0 +1,218 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import Box from '@mui/material/Box'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Switch from '@mui/material/Switch'; +import TextField from '@mui/material/TextField'; +import MenuItem from '@mui/material/MenuItem'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; +import ToggleButton from '@mui/material/ToggleButton'; +import { BarChart } from '@mui/x-charts/BarChart'; +import type { AnimatedLineProps } from '@mui/x-charts/LineChart'; +import { LineChart } from '@mui/x-charts/LineChart'; +import { ScatterChart } from '@mui/x-charts/ScatterChart'; +import { PieChart } from '@mui/x-charts/PieChart'; +import scatterDataset from '../../../dataset/random/scatterParallel.json'; + +type HighlightOptions = 'none' | 'item' | 'series'; +type FadeOptions = 'none' | 'series' | 'global'; + +const barChartsParams = { + series: [ + { data: [3, 4, 1, 6, 5], label: 'A' }, + { data: [4, 3, 1, 5, 8], label: 'B' }, + { data: [4, 2, 5, 4, 1], label: 'C' }, + ], + height: 400, +}; +const lineChartsParams = { + series: [ + { data: [3, 4, 1, 6, 5], label: 'A', area: false, stack: 'total' }, + { data: [4, 3, 1, 5, 8], label: 'B', area: false, stack: 'total' }, + { data: [4, 2, 5, 4, 1], label: 'C', area: false, stack: 'total' }, + ], + xAxis: [{ data: [1, 2, 3, 4, 5], type: 'linear' }], + height: 400, +}; + +const scatterChartsParams = { + dataset: scatterDataset, + series: [ + { datasetKeys: { id: 'id', x: 'x1', y: 'y1' }, label: 'A' }, + { datasetKeys: { id: 'id', x: 'x2', y: 'y2' }, label: 'B' }, + ], + height: 400, +}; + +const pieChartsParams = { + series: [ + { + data: [{ value: 5 }, { value: 10 }, { value: 15 }], + label: 'Series 1', + outerRadius: 80, + highlight: { additionalRadius: 10 }, + }, + { + data: [{ value: 5 }, { value: 10 }, { value: 15 }], + label: 'Series 1', + innerRadius: 90, + highlight: { additionalRadius: 10 }, + }, + ], + height: 400, + margin: { top: 50, bottom: 50 }, +}; + +function CustomLine(props: AnimatedLineProps) { + const { d, ownerState, skipAnimation, className, ...other } = props; + + return ( + + + + + ); +} + +export default function ElementHighlights() { + // @focus-start @padding 1 + const [chartType, setChartType] = React.useState('bar'); + const [withArea, setWithArea] = React.useState(false); + const [highlight, setHighlight] = React.useState('item'); + const [fade, setFade] = React.useState('global'); + + const handleChartType = (event: any, newChartType: string) => { + if (newChartType !== null) { + setChartType(newChartType); + } + }; + + return ( + + + + {['bar', 'line', 'scatter', 'pie'].map((type) => ( + + {type} + + ))} + + {chartType === 'bar' && ( + ({ + ...series, + highlightScope: { + highlight, + fade, + }, + }))} + /> + )} + + {chartType === 'line' && ( + ({ + ...series, + area: withArea, + highlightScope: { + highlight, + fade, + }, + }))} + slots={withArea ? {} : { line: CustomLine }} + /> + )} + + {chartType === 'scatter' && ( + ({ + ...series, + highlightScope: { + highlight, + fade, + }, + }))} + /> + )} + + {chartType === 'pie' && ( + ({ + ...series, + highlightScope: { + highlight, + fade, + }, + }))} + /> + )} + + + setHighlight(event.target.value as HighlightOptions)} + sx={{ minWidth: 150 }} + > + none + item + series + + setFade(event.target.value as FadeOptions)} + sx={{ minWidth: 150 }} + > + none + series + global + + {chartType === 'line' && ( + setWithArea(event.target.checked)} + /> + } + label="Fill line area" + /> + )} + + + ); + // @focus-end +} diff --git a/docs/data/charts/highlighting/demos/element-highlights/client.ts b/docs/data/charts/highlighting/demos/element-highlights/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/highlighting/demos/element-highlights/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/highlighting/demos/element-highlights/index.ts b/docs/data/charts/highlighting/demos/element-highlights/index.ts new file mode 100644 index 0000000000000..0b59dc2ef94e8 --- /dev/null +++ b/docs/data/charts/highlighting/demos/element-highlights/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ElementHighlights from './ElementHighlights'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ElementHighlights, { ClientProvider }); diff --git a/docs/data/charts/highlighting/SyncHighlight.tsx b/docs/data/charts/highlighting/demos/sync-highlight/SyncHighlight.tsx similarity index 83% rename from docs/data/charts/highlighting/SyncHighlight.tsx rename to docs/data/charts/highlighting/demos/sync-highlight/SyncHighlight.tsx index 303d13cd7e86c..9a677b9f18c39 100644 --- a/docs/data/charts/highlighting/SyncHighlight.tsx +++ b/docs/data/charts/highlighting/demos/sync-highlight/SyncHighlight.tsx @@ -1,10 +1,13 @@ import * as React from 'react'; import Stack from '@mui/material/Stack'; -import { BarChart, BarChartProps } from '@mui/x-charts/BarChart'; -import { PieChart, PieChartProps } from '@mui/x-charts/PieChart'; -import { HighlightItemIdentifier } from '@mui/x-charts/models'; +import type { BarChartProps } from '@mui/x-charts/BarChart'; +import { BarChart } from '@mui/x-charts/BarChart'; +import type { PieChartProps } from '@mui/x-charts/PieChart'; +import { PieChart } from '@mui/x-charts/PieChart'; +import type { HighlightItemIdentifier } from '@mui/x-charts/models'; export default function SyncHighlight() { + // @focus-start @padding 1 const [highlightedItem, setHighlightedItem] = React.useState | null>(null); @@ -34,6 +37,7 @@ export default function SyncHighlight() { /> ); + // @focus-end } const barChartsProps: BarChartProps = { diff --git a/docs/data/charts/highlighting/demos/sync-highlight/client.ts b/docs/data/charts/highlighting/demos/sync-highlight/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/highlighting/demos/sync-highlight/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/highlighting/demos/sync-highlight/index.ts b/docs/data/charts/highlighting/demos/sync-highlight/index.ts new file mode 100644 index 0000000000000..497e59ef903e1 --- /dev/null +++ b/docs/data/charts/highlighting/demos/sync-highlight/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SyncHighlight from './SyncHighlight'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SyncHighlight, { ClientProvider }); diff --git a/docs/data/charts/highlighting/highlighting.md b/docs/data/charts/highlighting/highlighting.md index 494aad515822d..8fa9e02e0c19e 100644 --- a/docs/data/charts/highlighting/highlighting.md +++ b/docs/data/charts/highlighting/highlighting.md @@ -25,7 +25,7 @@ axisHighlight={{ }} ``` -{{"demo": "BandHighlight.js" }} +{{"component": "file://./demos/band-highlight/index.ts"}} ### Highlight axis value @@ -40,7 +40,7 @@ This component accept the following props: - `axisId`: the id of the axis highlighted. By default the first axis. - `labelPosition`: `'start' | 'end' | 'both' | 'none'` the position of the label. -{{"demo": "AxisValueHighlight.js" }} +{{"component": "file://./demos/axis-value-highlight/index.ts"}} ### Customize highlighted axis value @@ -54,7 +54,7 @@ The following demo shows: - Green labels: By default labels are limited to the axis range (right label). The left one shows you how to let label overflow by setting the `translate` property. - Red labels: Demonstrate how to use the `--space` to limit label size. -{{"demo": "AxisValueHighlightCustomization.js" }} +{{"component": "file://./demos/axis-value-highlight-customization/index.ts"}} ## Highlighting series @@ -77,14 +77,14 @@ For Line charts, you can increase the interaction area by using slots. See [Line demos—Larger interaction area](/x/react-charts/line-demo/#larger-interaction-area) for an example of this. ::: -{{"demo": "ElementHighlights.js"}} +{{"component": "file://./demos/element-highlights/index.ts"}} ## Controlled item highlight You can control the highlighted item using the `highlightedItem` and `onHighlightChange` props. You can set the `highlightedItem` value based on inputs, and sync it when the user hovers over an item. -{{"demo": "ControlledHighlight.js"}} +{{"component": "file://./demos/controlled-highlight/index.ts"}} ## Controlled axis highlight @@ -119,11 +119,11 @@ const Component = ({ data }) => { ::: -{{"demo": "ControlledAxisHighlight.js"}} +{{"component": "file://./demos/controlled-axis-highlight/index.ts"}} ## Synchronizing highlights With controlled highlights, you can synchronize them across multiple charts. Ensure that the `series` have the same IDs and that the data is in the same order. -{{"demo": "SyncHighlight.js"}} +{{"component": "file://./demos/sync-highlight/index.ts"}} diff --git a/docs/data/charts/hooks/UseAxes.js b/docs/data/charts/hooks/UseAxes.js deleted file mode 100644 index 9b920c2b329db..0000000000000 --- a/docs/data/charts/hooks/UseAxes.js +++ /dev/null @@ -1,186 +0,0 @@ -import * as React from 'react'; -import { useYAxes, useXAxis, useLineSeries } from '@mui/x-charts/hooks'; -import { LinePlot } from '@mui/x-charts/LineChart'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsDataProvider } from '@mui/x-charts/ChartsDataProvider'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { useTheme } from '@mui/material/styles'; - -const dataset = [ - { month: 'Jan', temperature: 5, rainfall: 45 }, - { month: 'Feb', temperature: 7, rainfall: 38 }, - { month: 'Mar', temperature: 12, rainfall: 42 }, - { month: 'Apr', temperature: 16, rainfall: 35 }, - { month: 'May', temperature: 21, rainfall: 28 }, - { month: 'Jun', temperature: 25, rainfall: 22 }, -]; - -function AxisRangeIndicators() { - const { yAxis, yAxisIds } = useYAxes(); - const xAxis = useXAxis(); - const allSeries = useLineSeries(); - const theme = useTheme(); - - const xDomain = xAxis.scale.domain(); - const xStart = xAxis.scale(xDomain[0]) ?? 0; - const xEnd = xAxis.scale(xDomain[xDomain.length - 1]) ?? 0; - - return ( - - {allSeries.map((series) => { - const axis = yAxis[series.yAxisId ?? yAxisIds[0]]; - - const seriesMin = Math.min(...series.data.filter((v) => v != null)); - const seriesMax = Math.max(...series.data.filter((v) => v != null)); - - const yMin = axis.scale(seriesMin) ?? 0; - const yMax = axis.scale(seriesMax) ?? 0; - - const color = series.color; - - return ( - - {/* Min value horizontal line */} - - {/* Max value horizontal line */} - - {/* Min value label */} - - {axis.id} - - - min - - {/* Max value label */} - - {axis.id} - - - max - - - ); - })} - - ); -} - -export default function UseAxes() { - return ( -
- - - - - - - - - -
- ); -} diff --git a/docs/data/charts/hooks/UseBarSeries.js b/docs/data/charts/hooks/UseBarSeries.js deleted file mode 100644 index d72ffbb7a87e2..0000000000000 --- a/docs/data/charts/hooks/UseBarSeries.js +++ /dev/null @@ -1,103 +0,0 @@ -import { useBarSeries } from '@mui/x-charts/hooks'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { useTheme } from '@mui/material/styles'; - -const dataset = [ - { month: 'Jan', revenue: 4000, expenses: 2400 }, - { month: 'Feb', revenue: 3000, expenses: 1398 }, - { month: 'Mar', revenue: 5000, expenses: 2800 }, - { month: 'Apr', revenue: 7000, expenses: 3908 }, - { month: 'May', revenue: 6000, expenses: 4800 }, - { month: 'Jun', revenue: 3000, expenses: 8000 }, -]; - -const inUSD = (value) => { - if (value == null) { - return ''; - } - return `$${value.toLocaleString()}`; -}; - -function BarSeriesInfo() { - const barSeries = useBarSeries(); - const theme = useTheme(); - - const revenue = barSeries - .find((s) => s.id === 'revenue') - ?.data.reduce((acc, v) => acc + (v ?? 0), 0); - - const expenses = barSeries - .find((s) => s.id === 'expenses') - ?.data.reduce((acc, v) => acc + (v ?? 0), 0); - - const profit = (revenue ?? 0) - (expenses ?? 0); - - return ( -
-

Half Year Details

- {barSeries.map((series) => ( -
- - {typeof series.label === 'function' - ? series.label('legend') - : series.label} - - {inUSD(series.data.reduce((a, b) => (a ?? 0) + (b ?? 0), 0))} -
- ))} -
- Profit - {inUSD(profit)} -
-
- ); -} - -export default function UseBarSeries() { - return ( -
- `${inUSD(v).slice(0, 2)}k`, - }, - ]} - series={[ - { - id: 'revenue', - dataKey: 'revenue', - label: 'Revenue', - color: '#8884d8', - valueFormatter: inUSD, - }, - { - id: 'expenses', - dataKey: 'expenses', - label: 'Expenses', - color: '#82ca9d', - valueFormatter: inUSD, - }, - ]} - width={500} - height={350} - slots={{ legend: BarSeriesInfo }} - /> -
- ); -} diff --git a/docs/data/charts/hooks/UseDataset.js b/docs/data/charts/hooks/UseDataset.js deleted file mode 100644 index cbc54694ddac6..0000000000000 --- a/docs/data/charts/hooks/UseDataset.js +++ /dev/null @@ -1,127 +0,0 @@ -import * as React from 'react'; -import { useDataset } from '@mui/x-charts/hooks'; -import { ChartsDataProvider } from '@mui/x-charts/ChartsDataProvider'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { LineHighlightPlot, LinePlot } from '@mui/x-charts/LineChart'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsLegend } from '@mui/x-charts/ChartsLegend'; -import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; -import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import Paper from '@mui/material/Paper'; - -const dataset = [ - { month: 'Jan', revenue: 4000, expenses: 2400 }, - { month: 'Feb', revenue: 3000, expenses: 1398 }, - { month: 'Mar', revenue: 2000, expenses: 9800 }, - { month: 'Apr', revenue: 2780, expenses: 3908 }, - { month: 'May', revenue: 1890, expenses: 4800 }, - { month: 'Jun', revenue: 2390, expenses: 3800 }, - { month: 'Jul', revenue: 3490, expenses: 4300 }, -]; - -function DatasetStats() { - const chartDataset = useDataset(); - - if (!chartDataset) { - return null; - } - - const totalRevenue = chartDataset.reduce( - (sum, item) => sum + (typeof item.revenue === 'number' ? item.revenue : 0), - 0, - ); - const totalExpenses = chartDataset.reduce( - (sum, item) => sum + (typeof item.expenses === 'number' ? item.expenses : 0), - 0, - ); - const profit = totalRevenue - totalExpenses; - - return ( - -
- - Total Revenue - - - ${totalRevenue.toLocaleString()} - -
-
- - Total Expenses - - - ${totalExpenses.toLocaleString()} - -
-
- - Net Profit - - = 0 ? 'success.main' : 'error.main' }} - > - ${profit.toLocaleString()} - -
-
- - Data Points - - {chartDataset.length} -
- - ); -} - -export default function UseDataset() { - return ( - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/charts/hooks/UseDatasetAdvanced.js b/docs/data/charts/hooks/UseDatasetAdvanced.js deleted file mode 100644 index 6d002a3e057f8..0000000000000 --- a/docs/data/charts/hooks/UseDatasetAdvanced.js +++ /dev/null @@ -1,186 +0,0 @@ -import * as React from 'react'; -import { useDataset } from '@mui/x-charts/hooks'; -import { ChartsDataProvider } from '@mui/x-charts/ChartsDataProvider'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { BarPlot } from '@mui/x-charts/BarChart'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsLegend } from '@mui/x-charts/ChartsLegend'; -import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; -import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; - -import Box from '@mui/material/Box'; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell from '@mui/material/TableCell'; -import TableContainer from '@mui/material/TableContainer'; -import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; -import Paper from '@mui/material/Paper'; -import Typography from '@mui/material/Typography'; - -const dataset = [ - { product: 'Product A', q1: 4000, q2: 3000, q3: 2000, q4: 2780 }, - { product: 'Product B', q1: 3000, q2: 1398, q3: 9800, q4: 3908 }, - { product: 'Product C', q1: 2000, q2: 9800, q3: 3000, q4: 4800 }, - { product: 'Product D', q1: 2780, q2: 3908, q3: 4000, q4: 3800 }, - { product: 'Product E', q1: 1890, q2: 4800, q3: 2390, q4: 3800 }, -]; - -function DataTable({ highlightedIndex, onHighlightedIndexChange }) { - const chartDataset = useDataset(); - - if (!chartDataset) { - return null; - } - - const calculateTotal = (item) => { - return ['q1', 'q2', 'q3', 'q4'].reduce((sum, quarter) => { - const value = item[quarter]; - return sum + (typeof value === 'number' ? value : 0); - }, 0); - }; - - const calculateQuarterTotal = (quarter) => { - return chartDataset.reduce((sum, item) => { - const value = item[quarter]; - return sum + (typeof value === 'number' ? value : 0); - }, 0); - }; - - const grandTotal = chartDataset.reduce( - (sum, item) => sum + calculateTotal(item), - 0, - ); - - return ( - -
- - - - Product - - - Q1 - - - Q2 - - - Q3 - - - Q4 - - - Total - - - - - {chartDataset.map((row, index) => ( - onHighlightedIndexChange(index)} - onPointerLeave={() => onHighlightedIndexChange(null)} - sx={{ - backgroundColor: - highlightedIndex === index ? 'action.hover' : 'transparent', - transition: 'background-color 0.2s', - cursor: 'pointer', - }} - > - - {String(row.product)} - - - ${typeof row.q1 === 'number' ? row.q1.toLocaleString() : 0} - - - ${typeof row.q2 === 'number' ? row.q2.toLocaleString() : 0} - - - ${typeof row.q3 === 'number' ? row.q3.toLocaleString() : 0} - - - ${typeof row.q4 === 'number' ? row.q4.toLocaleString() : 0} - - - ${calculateTotal(row).toLocaleString()} - - - ))} - - - Total - - - ${calculateQuarterTotal('q1').toLocaleString()} - - - ${calculateQuarterTotal('q2').toLocaleString()} - - - ${calculateQuarterTotal('q3').toLocaleString()} - - - ${calculateQuarterTotal('q4').toLocaleString()} - - - ${grandTotal.toLocaleString()} - - - -
- - ); -} - -export default function UseDatasetAdvanced() { - const [highlightedAxis, setHighlightedAxis] = React.useState([]); - - const setHighlightedIndexCallback = React.useCallback((index) => { - if (index === null) { - setHighlightedAxis([]); - } else { - setHighlightedAxis([{ axisId: 'x-axis-id', dataIndex: index }]); - } - }, []); - - return ( - - - - Quarterly Sales Report - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/charts/hooks/UseDrawingArea.js b/docs/data/charts/hooks/UseDrawingArea.js deleted file mode 100644 index 92861b90222bd..0000000000000 --- a/docs/data/charts/hooks/UseDrawingArea.js +++ /dev/null @@ -1,84 +0,0 @@ -import { useDrawingArea } from '@mui/x-charts/hooks'; -import { LineChart } from '@mui/x-charts/LineChart'; - -function CustomOverlay() { - const { left, top, width, height } = useDrawingArea(); - - return ( - - {/* Drawing area border */} - - {/* Corner markers */} - - - - - {/* Center cross */} - - - - - - {/* Info text */} - - Drawing Area: {width}×{height} - - - Center: ({left + width / 2}, {top + height / 2}) - - - ); -} - -export default function UseDrawingArea() { - return ( - - - - ); -} diff --git a/docs/data/charts/hooks/UseLegend.js b/docs/data/charts/hooks/UseLegend.js deleted file mode 100644 index 57ceaae0a0c5b..0000000000000 --- a/docs/data/charts/hooks/UseLegend.js +++ /dev/null @@ -1,47 +0,0 @@ -import { useLegend } from '@mui/x-charts/hooks'; -import { PieChart } from '@mui/x-charts/PieChart'; - -const data = [ - { id: 0, value: 10, label: 'Series A' }, - { id: 1, value: 15, label: 'Series B' }, - { id: 2, value: 20, label: 'Series C' }, -]; - -function BasicUseLegendExample() { - const { items } = useLegend(); - - return ( -
-

Legend Items from useLegend:

-
    - {items.map((item) => ( -
  • -
    - {item.label} -
    • - ))} -
-
- ); -} - -export default function UseLegend() { - return ( - - ); -} diff --git a/docs/data/charts/hooks/UseLegend.tsx.preview b/docs/data/charts/hooks/UseLegend.tsx.preview deleted file mode 100644 index 7a2c87c536fff..0000000000000 --- a/docs/data/charts/hooks/UseLegend.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/hooks/UsePolarGeometry.js b/docs/data/charts/hooks/UsePolarGeometry.js deleted file mode 100644 index b50ae763f4e41..0000000000000 --- a/docs/data/charts/hooks/UsePolarGeometry.js +++ /dev/null @@ -1,74 +0,0 @@ -import * as React from 'react'; -import { usePolarGeometry } from '@mui/x-charts/hooks'; -import { RadialBarChart, RadialBarPlot } from '@mui/x-charts-premium/RadialBarChart'; -import { ChartsRadiusAxis } from '@mui/x-charts/ChartsRadiusAxis'; -import { ChartsRotationAxis } from '@mui/x-charts/ChartsRotationAxis'; - -const trustData = [ - { country: 'Denmark', trust: 65 }, - { country: 'Finland', trust: 62 }, - { country: 'Netherlands', trust: 60 }, - { country: 'Sweden', trust: 58 }, - { country: 'Norway', trust: 61 }, -]; - -/** - * Custom overlay using usePolarGeometry hook - */ -function PolarGeometryOverlay() { - const geometry = usePolarGeometry(); - - if (!geometry) { - return null; - } - - // Draw a reference ring at value 50 - const radius = geometry.radiusScale(50); - const [x, y] = geometry.point(radius, Math.PI / 4); - - return ( - - {/* Reference ring */} - - {/* Custom marker at a specific angle and radius */} - - - ); -} - -/** - * Simple demo: Radial bar chart with custom geometry overlay - */ -export default function UsePolarGeometry() { - return ( - - - - - - - ); -} diff --git a/docs/data/charts/hooks/UsePolarGeometry.tsx.preview b/docs/data/charts/hooks/UsePolarGeometry.tsx.preview deleted file mode 100644 index 33ccc21d94e7e..0000000000000 --- a/docs/data/charts/hooks/UsePolarGeometry.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/docs/data/charts/hooks/UseScale.js b/docs/data/charts/hooks/UseScale.js deleted file mode 100644 index 64a22b13b7497..0000000000000 --- a/docs/data/charts/hooks/UseScale.js +++ /dev/null @@ -1,93 +0,0 @@ -import { - useXScale, - useYScale, - getValueToPositionMapper, - useLineSeries, - useXAxis, -} from '@mui/x-charts/hooks'; -import { LineChart } from '@mui/x-charts/LineChart'; - -const data = [ - { x: 1, y: 2 }, - { x: 2, y: 5 }, - { x: 3, y: 3 }, - { x: 4, y: 8 }, - { x: 5, y: 1 }, -]; - -function CustomDataPoints() { - const xScale = useXScale(); - const yScale = useYScale(); - const series = useLineSeries(); - const xAxis = useXAxis(); - - // Use the value-to-position mapper to handle different scale types - const xMapper = getValueToPositionMapper(xScale); - const yMapper = getValueToPositionMapper(yScale); - - return ( - - {series.map((s) => - s.data.map((point, index) => { - const x = xMapper(xAxis.data?.[index]); - const y = yMapper(point); - - return ( - - {/* Custom data point */} - - {/* Value label */} - - ({index + 1}, {point}) - - - ); - }), - )} - - ); -} - -export default function UseScale() { - return ( - - - - ); -} diff --git a/docs/data/charts/hooks/UseSeries.js b/docs/data/charts/hooks/UseSeries.js deleted file mode 100644 index 3be26a8f70f81..0000000000000 --- a/docs/data/charts/hooks/UseSeries.js +++ /dev/null @@ -1,84 +0,0 @@ -import * as React from 'react'; -import { useSeries, useXAxis, useYAxis } from '@mui/x-charts/hooks'; -import { BarPlot } from '@mui/x-charts/BarChart'; -import { LinePlot } from '@mui/x-charts/LineChart'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsDataProvider } from '@mui/x-charts/ChartsDataProvider'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; - -const barData = [4, 3, 5, 7, 2]; -const barData2 = [1, 2, 1, 2, 3]; -const lineData = [2, 5, 3, 8, 4]; -const xLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May']; - -function MaxLineOnEachSeries() { - const series = useSeries(); - const yAxis = useYAxis(); - const xAxis = useXAxis('pointId'); - - const maxEach = Object.entries(series).flatMap(([_, typeSeries]) => { - return Object.values(typeSeries.series).map((s) => ({ - id: s.id, - max: Math.max(...s.data), - })); - }); - - return ( - - {maxEach.map(({ id, max }) => ( - - ))} - - ); -} - -export default function UseSeries() { - return ( -
- - - - - - - - - -
- ); -} diff --git a/docs/data/charts/hooks/UseAxes.tsx b/docs/data/charts/hooks/demos/use-axes/UseAxes.tsx similarity index 99% rename from docs/data/charts/hooks/UseAxes.tsx rename to docs/data/charts/hooks/demos/use-axes/UseAxes.tsx index 086c462983c66..e3dfd5527b6cb 100644 --- a/docs/data/charts/hooks/UseAxes.tsx +++ b/docs/data/charts/hooks/demos/use-axes/UseAxes.tsx @@ -123,6 +123,7 @@ function AxisRangeIndicators() { export default function UseAxes() { return (
+ {/* @focus-start */} + {/* @focus-end */}
); } diff --git a/docs/data/charts/hooks/demos/use-axes/client.ts b/docs/data/charts/hooks/demos/use-axes/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/hooks/demos/use-axes/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/hooks/demos/use-axes/index.ts b/docs/data/charts/hooks/demos/use-axes/index.ts new file mode 100644 index 0000000000000..f799790d1ac6e --- /dev/null +++ b/docs/data/charts/hooks/demos/use-axes/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import UseAxes from './UseAxes'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, UseAxes, { ClientProvider }); diff --git a/docs/data/charts/hooks/UseBarSeries.tsx b/docs/data/charts/hooks/demos/use-bar-series/UseBarSeries.tsx similarity index 98% rename from docs/data/charts/hooks/UseBarSeries.tsx rename to docs/data/charts/hooks/demos/use-bar-series/UseBarSeries.tsx index b7bd6c06fc5cb..894bc092fcf46 100644 --- a/docs/data/charts/hooks/UseBarSeries.tsx +++ b/docs/data/charts/hooks/demos/use-bar-series/UseBarSeries.tsx @@ -68,6 +68,7 @@ function BarSeriesInfo() { export default function UseBarSeries() { return (
+ {/* @focus-start */} + {/* @focus-end */}
); } diff --git a/docs/data/charts/hooks/demos/use-bar-series/client.ts b/docs/data/charts/hooks/demos/use-bar-series/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/hooks/demos/use-bar-series/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/hooks/demos/use-bar-series/index.ts b/docs/data/charts/hooks/demos/use-bar-series/index.ts new file mode 100644 index 0000000000000..aa988da2e7b97 --- /dev/null +++ b/docs/data/charts/hooks/demos/use-bar-series/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import UseBarSeries from './UseBarSeries'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, UseBarSeries, { ClientProvider }); diff --git a/docs/data/charts/hooks/UseDatasetAdvanced.tsx b/docs/data/charts/hooks/demos/use-dataset-advanced/UseDatasetAdvanced.tsx similarity index 98% rename from docs/data/charts/hooks/UseDatasetAdvanced.tsx rename to docs/data/charts/hooks/demos/use-dataset-advanced/UseDatasetAdvanced.tsx index 7d844365630ee..d83a974b1c508 100644 --- a/docs/data/charts/hooks/UseDatasetAdvanced.tsx +++ b/docs/data/charts/hooks/demos/use-dataset-advanced/UseDatasetAdvanced.tsx @@ -8,7 +8,7 @@ import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; import { ChartsLegend } from '@mui/x-charts/ChartsLegend'; import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; -import { AxisItemIdentifier } from '@mui/x-charts/models'; +import type { AxisItemIdentifier } from '@mui/x-charts/models'; import Box from '@mui/material/Box'; import Table from '@mui/material/Table'; import TableBody from '@mui/material/TableBody'; @@ -144,6 +144,7 @@ function DataTable({ } export default function UseDatasetAdvanced() { + // @focus-start @padding 1 const [highlightedAxis, setHighlightedAxis] = React.useState( [], ); @@ -191,4 +192,5 @@ export default function UseDatasetAdvanced() { ); + // @focus-end } diff --git a/docs/data/charts/hooks/demos/use-dataset-advanced/client.ts b/docs/data/charts/hooks/demos/use-dataset-advanced/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/hooks/demos/use-dataset-advanced/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/hooks/demos/use-dataset-advanced/index.ts b/docs/data/charts/hooks/demos/use-dataset-advanced/index.ts new file mode 100644 index 0000000000000..d3ca254245177 --- /dev/null +++ b/docs/data/charts/hooks/demos/use-dataset-advanced/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import UseDatasetAdvanced from './UseDatasetAdvanced'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, UseDatasetAdvanced, { ClientProvider }); diff --git a/docs/data/charts/hooks/UseDataset.tsx b/docs/data/charts/hooks/demos/use-dataset/UseDataset.tsx similarity index 98% rename from docs/data/charts/hooks/UseDataset.tsx rename to docs/data/charts/hooks/demos/use-dataset/UseDataset.tsx index cbc54694ddac6..7b0cb9ec6b48a 100644 --- a/docs/data/charts/hooks/UseDataset.tsx +++ b/docs/data/charts/hooks/demos/use-dataset/UseDataset.tsx @@ -89,6 +89,7 @@ function DatasetStats() { export default function UseDataset() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/hooks/demos/use-dataset/client.ts b/docs/data/charts/hooks/demos/use-dataset/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/hooks/demos/use-dataset/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/hooks/demos/use-dataset/index.ts b/docs/data/charts/hooks/demos/use-dataset/index.ts new file mode 100644 index 0000000000000..e016cbfc8c0a0 --- /dev/null +++ b/docs/data/charts/hooks/demos/use-dataset/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import UseDataset from './UseDataset'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, UseDataset, { ClientProvider }); diff --git a/docs/data/charts/hooks/UseDrawingArea.tsx b/docs/data/charts/hooks/demos/use-drawing-area/UseDrawingArea.tsx similarity index 97% rename from docs/data/charts/hooks/UseDrawingArea.tsx rename to docs/data/charts/hooks/demos/use-drawing-area/UseDrawingArea.tsx index 61dbaaa80d865..b37298bb8e3aa 100644 --- a/docs/data/charts/hooks/UseDrawingArea.tsx +++ b/docs/data/charts/hooks/demos/use-drawing-area/UseDrawingArea.tsx @@ -65,6 +65,7 @@ function CustomOverlay() { export default function UseDrawingArea() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/hooks/demos/use-drawing-area/client.ts b/docs/data/charts/hooks/demos/use-drawing-area/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/hooks/demos/use-drawing-area/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/hooks/demos/use-drawing-area/index.ts b/docs/data/charts/hooks/demos/use-drawing-area/index.ts new file mode 100644 index 0000000000000..c89e5fddc4172 --- /dev/null +++ b/docs/data/charts/hooks/demos/use-drawing-area/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import UseDrawingArea from './UseDrawingArea'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, UseDrawingArea, { ClientProvider }); diff --git a/docs/data/charts/hooks/UseLegend.tsx b/docs/data/charts/hooks/demos/use-legend/UseLegend.tsx similarity index 96% rename from docs/data/charts/hooks/UseLegend.tsx rename to docs/data/charts/hooks/demos/use-legend/UseLegend.tsx index 57ceaae0a0c5b..33366419c8906 100644 --- a/docs/data/charts/hooks/UseLegend.tsx +++ b/docs/data/charts/hooks/demos/use-legend/UseLegend.tsx @@ -38,10 +38,12 @@ function BasicUseLegendExample() { export default function UseLegend() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/hooks/demos/use-legend/client.ts b/docs/data/charts/hooks/demos/use-legend/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/hooks/demos/use-legend/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/hooks/demos/use-legend/index.ts b/docs/data/charts/hooks/demos/use-legend/index.ts new file mode 100644 index 0000000000000..75188d884d7b0 --- /dev/null +++ b/docs/data/charts/hooks/demos/use-legend/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import UseLegend from './UseLegend'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, UseLegend, { ClientProvider }); diff --git a/docs/data/charts/hooks/UsePolarGeometry.tsx b/docs/data/charts/hooks/demos/use-polar-geometry/UsePolarGeometry.tsx similarity index 97% rename from docs/data/charts/hooks/UsePolarGeometry.tsx rename to docs/data/charts/hooks/demos/use-polar-geometry/UsePolarGeometry.tsx index 506c52062bb69..eb968000249c6 100644 --- a/docs/data/charts/hooks/UsePolarGeometry.tsx +++ b/docs/data/charts/hooks/demos/use-polar-geometry/UsePolarGeometry.tsx @@ -57,6 +57,7 @@ function PolarGeometryOverlay() { */ export default function UsePolarGeometry() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/hooks/demos/use-polar-geometry/client.ts b/docs/data/charts/hooks/demos/use-polar-geometry/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/hooks/demos/use-polar-geometry/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/hooks/demos/use-polar-geometry/index.ts b/docs/data/charts/hooks/demos/use-polar-geometry/index.ts new file mode 100644 index 0000000000000..4947c92f88a4c --- /dev/null +++ b/docs/data/charts/hooks/demos/use-polar-geometry/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import UsePolarGeometry from './UsePolarGeometry'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, UsePolarGeometry, { ClientProvider }); diff --git a/docs/data/charts/hooks/UseScale.tsx b/docs/data/charts/hooks/demos/use-scale/UseScale.tsx similarity index 97% rename from docs/data/charts/hooks/UseScale.tsx rename to docs/data/charts/hooks/demos/use-scale/UseScale.tsx index 64a22b13b7497..e9d070b12a31f 100644 --- a/docs/data/charts/hooks/UseScale.tsx +++ b/docs/data/charts/hooks/demos/use-scale/UseScale.tsx @@ -64,6 +64,7 @@ function CustomDataPoints() { export default function UseScale() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/hooks/demos/use-scale/client.ts b/docs/data/charts/hooks/demos/use-scale/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/hooks/demos/use-scale/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/hooks/demos/use-scale/index.ts b/docs/data/charts/hooks/demos/use-scale/index.ts new file mode 100644 index 0000000000000..20c5804fec407 --- /dev/null +++ b/docs/data/charts/hooks/demos/use-scale/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import UseScale from './UseScale'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, UseScale, { ClientProvider }); diff --git a/docs/data/charts/hooks/UseSeries.tsx b/docs/data/charts/hooks/demos/use-series/UseSeries.tsx similarity index 97% rename from docs/data/charts/hooks/UseSeries.tsx rename to docs/data/charts/hooks/demos/use-series/UseSeries.tsx index ae032ce84db5e..4cbd0591e1534 100644 --- a/docs/data/charts/hooks/UseSeries.tsx +++ b/docs/data/charts/hooks/demos/use-series/UseSeries.tsx @@ -44,6 +44,7 @@ function MaxLineOnEachSeries() { export default function UseSeries() { return (
+ {/* @focus-start */} + {/* @focus-end */}
); } diff --git a/docs/data/charts/hooks/demos/use-series/client.ts b/docs/data/charts/hooks/demos/use-series/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/hooks/demos/use-series/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/hooks/demos/use-series/index.ts b/docs/data/charts/hooks/demos/use-series/index.ts new file mode 100644 index 0000000000000..91517a4aa1c4f --- /dev/null +++ b/docs/data/charts/hooks/demos/use-series/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import UseSeries from './UseSeries'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, UseSeries, { ClientProvider }); diff --git a/docs/data/charts/hooks/use-axes.md b/docs/data/charts/hooks/use-axes.md index 27beee6819fef..faad28d6a2f2a 100644 --- a/docs/data/charts/hooks/use-axes.md +++ b/docs/data/charts/hooks/use-axes.md @@ -91,7 +91,7 @@ function CustomComponent() { The example below shows `useXAxes()` and `useYAxes()` reading all axes in a chart with dual y-axes. The custom components use these hooks to draw visual indicators for axis ranges and to display axis metadata. -{{"demo": "UseAxes.js"}} +{{"component": "file://./demos/use-axes/index.ts"}} ## Caveats diff --git a/docs/data/charts/hooks/use-dataset.md b/docs/data/charts/hooks/use-dataset.md index b6a760b57dcda..b460a9cc02a21 100644 --- a/docs/data/charts/hooks/use-dataset.md +++ b/docs/data/charts/hooks/use-dataset.md @@ -35,13 +35,13 @@ function CustomComponent() { The example below shows `useDataset()` used to display dataset statistics above a chart: -{{"demo": "UseDataset.js"}} +{{"component": "file://./demos/use-dataset/index.ts"}} ## Advanced example The example below shows how to use the dataset to create a custom data table that stays in sync with the chart: -{{"demo": "UseDatasetAdvanced.js"}} +{{"component": "file://./demos/use-dataset-advanced/index.ts"}} ## Return value diff --git a/docs/data/charts/hooks/use-drawing-area.md b/docs/data/charts/hooks/use-drawing-area.md index 174f9d9678540..9b25253872949 100644 --- a/docs/data/charts/hooks/use-drawing-area.md +++ b/docs/data/charts/hooks/use-drawing-area.md @@ -28,7 +28,7 @@ The demo below shows: - A center cross marking the middle of the drawing area - Real-time dimension and center point information -{{"demo": "UseDrawingArea.js"}} +{{"component": "file://./demos/use-drawing-area/index.ts"}} ## Return value diff --git a/docs/data/charts/hooks/use-legend.md b/docs/data/charts/hooks/use-legend.md index e5fcf88f77396..3d6571b391ad0 100644 --- a/docs/data/charts/hooks/use-legend.md +++ b/docs/data/charts/hooks/use-legend.md @@ -20,7 +20,7 @@ function CustomLegend() { } ``` -{{"demo": "UseLegend.js"}} +{{"component": "file://./demos/use-legend/index.ts"}} ## Return value diff --git a/docs/data/charts/hooks/use-polar-geometry.md b/docs/data/charts/hooks/use-polar-geometry.md index 8af29361b3d9c..40e77545d3279 100644 --- a/docs/data/charts/hooks/use-polar-geometry.md +++ b/docs/data/charts/hooks/use-polar-geometry.md @@ -48,7 +48,7 @@ if (geometry) { } ``` -{{"demo": "UsePolarGeometry.js"}} +{{"component": "file://./demos/use-polar-geometry/index.ts"}} ## Caveats diff --git a/docs/data/charts/hooks/use-scale.md b/docs/data/charts/hooks/use-scale.md index 9d472431db524..5eab5533c8cfc 100644 --- a/docs/data/charts/hooks/use-scale.md +++ b/docs/data/charts/hooks/use-scale.md @@ -66,7 +66,7 @@ function CustomComponent() { The example below shows how to use scale functions to position custom elements: -{{"demo": "UseScale.js"}} +{{"component": "file://./demos/use-scale/index.ts"}} ## Caveats diff --git a/docs/data/charts/hooks/use-series.md b/docs/data/charts/hooks/use-series.md index be649ac8938ac..2cbc9e31690e3 100644 --- a/docs/data/charts/hooks/use-series.md +++ b/docs/data/charts/hooks/use-series.md @@ -42,7 +42,7 @@ The series hooks for each chart type are: The example below shows `useBarSeries()` returning bar chart series data: -{{"demo": "UseBarSeries.js"}} +{{"component": "file://./demos/use-bar-series/index.ts"}} ## Advanced usage @@ -54,7 +54,7 @@ It's preferable to use type-specific series hooks (for example, `useBarSeries()` Use `useSeries()` when you need to handle multiple or unknown chart types at once. ::: -{{"demo": "UseSeries.js"}} +{{"component": "file://./demos/use-series/index.ts"}} ## Caveats diff --git a/docs/data/charts/label/BasicLabel.js b/docs/data/charts/label/BasicLabel.js deleted file mode 100644 index fd69a25b5a2ef..0000000000000 --- a/docs/data/charts/label/BasicLabel.js +++ /dev/null @@ -1,21 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; - -export default function BasicLabel() { - return ( - - ); -} - -const props = { - height: 300, - xAxis: [{ data: ['A', 'B', 'C'] }], - yAxis: [{ width: 50 }], -}; diff --git a/docs/data/charts/label/BasicLabel.tsx.preview b/docs/data/charts/label/BasicLabel.tsx.preview deleted file mode 100644 index 4a1751034f63b..0000000000000 --- a/docs/data/charts/label/BasicLabel.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/label/FunctionLabel.js b/docs/data/charts/label/FunctionLabel.js deleted file mode 100644 index cfb9e9f949a6f..0000000000000 --- a/docs/data/charts/label/FunctionLabel.js +++ /dev/null @@ -1,19 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; - -export default function FunctionLabel() { - return ( - `${location} label` }, - ]} - /> - ); -} - -const props = { - height: 300, - xAxis: [{ data: ['A', 'B', 'C'] }], - yAxis: [{ width: 50 }], -}; diff --git a/docs/data/charts/label/FunctionLabel.tsx.preview b/docs/data/charts/label/FunctionLabel.tsx.preview deleted file mode 100644 index 5833b0f40c843..0000000000000 --- a/docs/data/charts/label/FunctionLabel.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - `${location} label` }, - ]} -/> \ No newline at end of file diff --git a/docs/data/charts/label/PieLabel.js b/docs/data/charts/label/PieLabel.js deleted file mode 100644 index 0c07586b17d3e..0000000000000 --- a/docs/data/charts/label/PieLabel.js +++ /dev/null @@ -1,25 +0,0 @@ -import { PieChart } from '@mui/x-charts/PieChart'; - -export default function PieLabel() { - return ( - `${location}+A` }, - { id: 1, value: 15, label: (location) => `${location}+B` }, - { id: 2, value: 20, label: (location) => `${location}+C` }, - ], - type: 'pie', - arcLabel: 'label', - }, - ]} - /> - ); -} - -const props = { - width: 200, - height: 200, -}; diff --git a/docs/data/charts/label/PieLabel.tsx.preview b/docs/data/charts/label/PieLabel.tsx.preview deleted file mode 100644 index 28b8dcee9ed79..0000000000000 --- a/docs/data/charts/label/PieLabel.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - `${location}+A` }, - { id: 1, value: 15, label: (location) => `${location}+B` }, - { id: 2, value: 20, label: (location) => `${location}+C` }, - ], - type: 'pie', - arcLabel: 'label', - }, - ]} -/> \ No newline at end of file diff --git a/docs/data/charts/label/BasicLabel.tsx b/docs/data/charts/label/demos/basic-label/BasicLabel.tsx similarity index 87% rename from docs/data/charts/label/BasicLabel.tsx rename to docs/data/charts/label/demos/basic-label/BasicLabel.tsx index fd69a25b5a2ef..c49019843e37c 100644 --- a/docs/data/charts/label/BasicLabel.tsx +++ b/docs/data/charts/label/demos/basic-label/BasicLabel.tsx @@ -2,6 +2,7 @@ import { BarChart } from '@mui/x-charts/BarChart'; export default function BasicLabel() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/label/demos/basic-label/client.ts b/docs/data/charts/label/demos/basic-label/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/label/demos/basic-label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/label/demos/basic-label/index.ts b/docs/data/charts/label/demos/basic-label/index.ts new file mode 100644 index 0000000000000..c5f01cb66e119 --- /dev/null +++ b/docs/data/charts/label/demos/basic-label/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicLabel from './BasicLabel'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicLabel, { ClientProvider }); diff --git a/docs/data/charts/label/FunctionLabel.tsx b/docs/data/charts/label/demos/function-label/FunctionLabel.tsx similarity index 89% rename from docs/data/charts/label/FunctionLabel.tsx rename to docs/data/charts/label/demos/function-label/FunctionLabel.tsx index cfb9e9f949a6f..3b0c77f65f2f6 100644 --- a/docs/data/charts/label/FunctionLabel.tsx +++ b/docs/data/charts/label/demos/function-label/FunctionLabel.tsx @@ -2,6 +2,7 @@ import { BarChart } from '@mui/x-charts/BarChart'; export default function FunctionLabel() { return ( + // @focus-start @padding 2 `${location} label` }, ]} /> + // @focus-end ); } diff --git a/docs/data/charts/label/demos/function-label/client.ts b/docs/data/charts/label/demos/function-label/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/label/demos/function-label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/label/demos/function-label/index.ts b/docs/data/charts/label/demos/function-label/index.ts new file mode 100644 index 0000000000000..2feec7289be9c --- /dev/null +++ b/docs/data/charts/label/demos/function-label/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FunctionLabel from './FunctionLabel'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FunctionLabel, { ClientProvider }); diff --git a/docs/data/charts/label/PieLabel.tsx b/docs/data/charts/label/demos/pie-label/PieLabel.tsx similarity index 91% rename from docs/data/charts/label/PieLabel.tsx rename to docs/data/charts/label/demos/pie-label/PieLabel.tsx index 0c07586b17d3e..11653ace1c6e4 100644 --- a/docs/data/charts/label/PieLabel.tsx +++ b/docs/data/charts/label/demos/pie-label/PieLabel.tsx @@ -2,6 +2,7 @@ import { PieChart } from '@mui/x-charts/PieChart'; export default function PieLabel() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/label/demos/pie-label/client.ts b/docs/data/charts/label/demos/pie-label/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/label/demos/pie-label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/label/demos/pie-label/index.ts b/docs/data/charts/label/demos/pie-label/index.ts new file mode 100644 index 0000000000000..9b8a12f2a7b8a --- /dev/null +++ b/docs/data/charts/label/demos/pie-label/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PieLabel from './PieLabel'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PieLabel, { ClientProvider }); diff --git a/docs/data/charts/label/label.md b/docs/data/charts/label/label.md index a4ebdf7f7979b..5afe05693faee 100644 --- a/docs/data/charts/label/label.md +++ b/docs/data/charts/label/label.md @@ -17,7 +17,7 @@ The label appears in different locations such as the legend and tooltip. The Pie chart has specific behavior described in [Pie chart labels](#pie-chart-labels) below. ::: -{{"demo": "BasicLabel.js"}} +{{"component": "file://./demos/basic-label/index.ts"}} ## Conditional formatting @@ -27,7 +27,7 @@ The function receives `location` as its first argument, which can have the follo - `'legend'`: Format the label in the [Legend](/x/react-charts/legend/) - `'tooltip'`: Format the label in the [Tooltip](/x/react-charts/tooltip/) -{{"demo": "FunctionLabel.js"}} +{{"component": "file://./demos/function-label/index.ts"}} ## Pie chart labels @@ -41,4 +41,4 @@ The `location` argument can have the following values: - `'tooltip'`: Format the label in the [Tooltip](/x/react-charts/tooltip/) - `'arc'`: Format the [Arc label](/x/react-charts/pie/#labels) when `arcLabel` is set to `'label'` -{{"demo": "PieLabel.js"}} +{{"component": "file://./demos/pie-label/index.ts"}} diff --git a/docs/data/charts/legend/BasicColorLegend.js b/docs/data/charts/legend/BasicColorLegend.js deleted file mode 100644 index 9cf1e611dda28..0000000000000 --- a/docs/data/charts/legend/BasicColorLegend.js +++ /dev/null @@ -1,59 +0,0 @@ -import Typography from '@mui/material/Typography'; -import { LineChart } from '@mui/x-charts/LineChart'; -import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; -import { PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend'; -import Stack from '@mui/material/Stack'; -import { dataset } from './tempAnomaly'; - -export default function BasicColorLegend() { - return ( - - - Global temperature anomaly relative to 1961-1990 average - - `${value?.toFixed(2)}°`, - }, - ]} - xAxis={[ - { - scaleType: 'time', - dataKey: 'year', - disableLine: true, - valueFormatter: (value) => value.getFullYear().toString(), - colorMap: { - type: 'piecewise', - thresholds: [new Date(1961, 0, 1), new Date(1990, 0, 1)], - colors: ['blue', 'gray', 'red'], - }, - }, - ]} - yAxis={[ - { - disableLine: true, - disableTicks: true, - valueFormatter: (value) => `${value}°`, - }, - ]} - grid={{ horizontal: true }} - height={300} - slotProps={{ - legend: { - axisDirection: 'x', - direction: 'vertical', - }, - }} - slots={{ - legend: PiecewiseColorLegend, - }} - > - - - - ); -} diff --git a/docs/data/charts/legend/BasicLegend.js b/docs/data/charts/legend/BasicLegend.js deleted file mode 100644 index ac9d229d94706..0000000000000 --- a/docs/data/charts/legend/BasicLegend.js +++ /dev/null @@ -1,15 +0,0 @@ -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import dataset from '../dataset/random/scatterParallel.json'; - -export default function BasicLegend() { - return ( - - ); -} diff --git a/docs/data/charts/legend/BasicLegend.tsx.preview b/docs/data/charts/legend/BasicLegend.tsx.preview deleted file mode 100644 index 1ac407ccd7b78..0000000000000 --- a/docs/data/charts/legend/BasicLegend.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/legend/ContinuousInteractiveDemo.js b/docs/data/charts/legend/ContinuousInteractiveDemo.js deleted file mode 100644 index c606e435fb3b4..0000000000000 --- a/docs/data/charts/legend/ContinuousInteractiveDemo.js +++ /dev/null @@ -1,111 +0,0 @@ -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import { interpolateRdYlBu } from 'd3-scale-chromatic'; -import { LineChart } from '@mui/x-charts/LineChart'; -import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; -import { ContinuousColorLegend } from '@mui/x-charts/ChartsLegend'; -import { dataset } from './tempAnomaly'; - -export default function ContinuousInteractiveDemo() { - return ( - ( - `${value?.toFixed(2)}°`, - }, - ]} - xAxis={[ - { - scaleType: 'time', - dataKey: 'year', - disableLine: true, - valueFormatter: (value) => value.getFullYear().toString(), - }, - ]} - yAxis={[ - { - disableLine: true, - disableTicks: true, - valueFormatter: (value) => `${value}°`, - colorMap: { - type: 'continuous', - min: -0.5, - max: 1.5, - color: (t) => interpolateRdYlBu(1 - t), - }, - }, - ]} - grid={{ horizontal: true }} - height={300} - slots={{ legend: ContinuousColorLegend }} - slotProps={{ - legend: { - axisDirection: 'y', - direction: props.direction, - thickness: props.thickness, - labelPosition: props.labelPosition, - reverse: props.reverse, - sx: { - [props.direction === 'horizontal' ? 'width' : 'height']: - `${props.length}${props.direction === 'horizontal' ? '%' : 'px'}`, - }, - }, - }} - > - - - )} - getCode={({ props }) => { - return `import { ContinuousColorLegend } from '@mui/x-charts/ChartsLegend'; - - -`; - }} - /> - ); -} diff --git a/docs/data/charts/legend/ControlledVisibility.js b/docs/data/charts/legend/ControlledVisibility.js deleted file mode 100644 index 10800df2ee11f..0000000000000 --- a/docs/data/charts/legend/ControlledVisibility.js +++ /dev/null @@ -1,105 +0,0 @@ -import * as React from 'react'; -import { PieChart } from '@mui/x-charts/PieChart'; -import Stack from '@mui/material/Stack'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; - -const data = [ - { value: 10, label: 'Series A' }, - { value: 15, label: 'Series B' }, - { value: 20, label: 'Series C' }, -]; - -export default function ControlledVisibility() { - const [hiddenItems, setHiddenItems] = React.useState([ - { type: 'pie', seriesId: 'custom', dataIndex: 0 }, - ]); - - const handleShowAll = () => { - setHiddenItems([]); - }; - - const handleHideAll = () => { - setHiddenItems([ - { type: 'pie', seriesId: 'custom', dataIndex: 0 }, - { type: 'pie', seriesId: 'custom', dataIndex: 1 }, - { type: 'pie', seriesId: 'custom', dataIndex: 2 }, - ]); - }; - - const handleShowOnlyA = () => { - setHiddenItems([ - { type: 'pie', seriesId: 'custom', dataIndex: 1 }, - { type: 'pie', seriesId: 'custom', dataIndex: 2 }, - ]); - }; - - const handleToggleChange = (_event, newValue) => { - if (newValue === 'all') { - handleShowAll(); - } else if (newValue === 'none') { - handleHideAll(); - } else if (newValue === 'onlyA') { - handleShowOnlyA(); - } - }; - - const getCurrentValue = () => { - const allVisible = hiddenItems.length === 0; - const allHidden = hiddenItems.length === data.length; - const onlyAVisible = - hiddenItems.length === 2 && - hiddenItems[0].dataIndex === 1 && - hiddenItems[1].dataIndex === 2; - - if (allVisible) { - return 'all'; - } - if (allHidden) { - return 'none'; - } - if (onlyAVisible) { - return 'onlyA'; - } - return null; - }; - - return ( - - - Controlled Highlighting - - - Show All - - - Hide All - - - Show Only A - - - - setHiddenItems(newIdentifiers)} - /> - - ); -} diff --git a/docs/data/charts/legend/CustomLegend.js b/docs/data/charts/legend/CustomLegend.js deleted file mode 100644 index d9fe9dd811efe..0000000000000 --- a/docs/data/charts/legend/CustomLegend.js +++ /dev/null @@ -1,117 +0,0 @@ -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { useTheme } from '@mui/material/styles'; -import { useLegend } from '@mui/x-charts/hooks'; -import { LineChart, lineClasses } from '@mui/x-charts/LineChart'; -import { ChartsLabelMark } from '@mui/x-charts/ChartsLabel'; - -function LineWithMark({ color, className }) { - return ( - - - - - ); -} - -function DashedLine({ color, className }) { - return ( - - - - ); -} - -function MyCustomLegend() { - const { items } = useLegend(); - return ( - - {items.map((item) => { - const { label, color, seriesId, markType } = item; - return ( - - - {`${label}`} - - ); - })} - - ); -} - -const dataset = [ - { month: 'Jan', '1991_2020_avg': 4.1, 2023: 3.9 }, - { month: 'Fev', '1991_2020_avg': 4.7, 2023: 8.9 }, - { month: 'Mar', '1991_2020_avg': 7.5, 2023: 9.5 }, - { month: 'Apr', '1991_2020_avg': 10.6, 2023: 11.5 }, - { month: 'May', '1991_2020_avg': 13.8, 2023: 15.5 }, - { month: 'Jun', '1991_2020_avg': 16.7, 2023: 16.4 }, - { month: 'Jul', '1991_2020_avg': 18.9, 2023: 19.5 }, - { month: 'Aug', '1991_2020_avg': 18.8, 2023: 20.5 }, - { month: 'Sep', '1991_2020_avg': 15.8, 2023: 16.4 }, - { month: 'Oct', '1991_2020_avg': 11.9, 2023: 13.2 }, - { month: 'Nov', '1991_2020_avg': 7.6, 2023: 8.1 }, - { month: 'Dec', '1991_2020_avg': 4.7, 2023: 6.1 }, -]; - -export default function CustomLegend() { - const theme = useTheme(); - - return ( - - - - ); -} diff --git a/docs/data/charts/legend/HiddenLegend.js b/docs/data/charts/legend/HiddenLegend.js deleted file mode 100644 index d33b0ffa42de2..0000000000000 --- a/docs/data/charts/legend/HiddenLegend.js +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import { PieChart } from '@mui/x-charts/PieChart'; - -const series = [ - { - data: [ - { id: 0, value: 10, label: 'series A' }, - { id: 1, value: 15, label: 'series B' }, - { id: 2, value: 20, label: 'series C' }, - ], - }, -]; - -export default function HiddenLegend() { - const [isHidden, setIsHidden] = React.useState(false); - - const Toggle = ( - setIsHidden(event.target.checked)} />} - label="hide the legend" - labelPlacement="end" - sx={{ margin: 'auto' }} - /> - ); - - return ( - - {Toggle} - - - ); -} diff --git a/docs/data/charts/legend/HiddenLegend.tsx.preview b/docs/data/charts/legend/HiddenLegend.tsx.preview deleted file mode 100644 index c20f9eec4e8c8..0000000000000 --- a/docs/data/charts/legend/HiddenLegend.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ -{Toggle} - \ No newline at end of file diff --git a/docs/data/charts/legend/LegendClick.js b/docs/data/charts/legend/LegendClick.js deleted file mode 100644 index 72a2673c9cd43..0000000000000 --- a/docs/data/charts/legend/LegendClick.js +++ /dev/null @@ -1,143 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; -import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; - -import { ChartsLegend, PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend'; - -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { ChartsDataProvider } from '@mui/x-charts/ChartsDataProvider'; - -const pieSeries = [ - { - type: 'pie', - id: 'series-1', - data: [ - { label: 'Pie A', id: 'P1-A', value: 400 }, - { label: 'Pie B', id: 'P2-B', value: 300 }, - ], - }, -]; - -const barSeries = [ - { - type: 'bar', - id: 'series-1', - label: 'Series 1', - data: [0, 1, 2], - }, - { - type: 'bar', - id: 'series-2', - label: 'Series 2', - data: [0, 1, 2], - }, -]; - -const lineSeries = [ - { - type: 'line', - id: 'series-1', - label: 'Series 1', - data: [0, 1, 2], - }, - { - type: 'line', - id: 'series-2', - label: 'Series 2', - data: [0, 1, 2], - }, -]; - -export default function LegendClick() { - const [itemData, setItemData] = React.useState(); - - return ( - - - Chart Legend - - setItemData([context, index])} - /> - - Pie Chart Legend - - setItemData([context, index])} - /> - - Piecewise Color Legend - - setItemData([context, index])} - /> - - - - - - Click on the chart - { - setItemData(null); - }} - > - - - - - - - ); -} diff --git a/docs/data/charts/legend/LegendCustomLabelMark.js b/docs/data/charts/legend/LegendCustomLabelMark.js deleted file mode 100644 index 17eda9c44bbd4..0000000000000 --- a/docs/data/charts/legend/LegendCustomLabelMark.js +++ /dev/null @@ -1,34 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; - -function HTMLCircle({ className, color }) { - return ( -
- ); -} - -function SVGDiamond({ className, color }) { - return ( - - - - ); -} - -export default function LegendCustomLabelMark() { - return ( - - ); -} diff --git a/docs/data/charts/legend/LegendCustomLabelMark.tsx.preview b/docs/data/charts/legend/LegendCustomLabelMark.tsx.preview deleted file mode 100644 index 7ae1759a0c17d..0000000000000 --- a/docs/data/charts/legend/LegendCustomLabelMark.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/legend/LegendDimension.js b/docs/data/charts/legend/LegendDimension.js deleted file mode 100644 index 46140e49a6a33..0000000000000 --- a/docs/data/charts/legend/LegendDimension.js +++ /dev/null @@ -1,79 +0,0 @@ -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import { PieChart } from '@mui/x-charts/PieChart'; -import { legendClasses } from '@mui/x-charts/ChartsLegend'; - -const data = [ - { id: 0, value: 10, label: 'Series A' }, - { id: 1, value: 15, label: 'Series B' }, - { id: 2, value: 20, label: 'Series C' }, - { id: 3, value: 10, label: 'Series D' }, - { id: 4, value: 15, label: 'Series E' }, - { id: 5, value: 20, label: 'Series F' }, - { id: 6, value: 10, label: 'Series G' }, -]; - -export default function LegendDimension() { - return ( - ( - - )} - getCode={({ props }) => { - return `import { PieChart } from '@mui/x-charts/PieChart'; -import { legendClasses } from '@mui/x-charts/ChartsLegend'; - - -`; - }} - /> - ); -} diff --git a/docs/data/charts/legend/LegendLabelPositions.js b/docs/data/charts/legend/LegendLabelPositions.js deleted file mode 100644 index 6cf0c80bff097..0000000000000 --- a/docs/data/charts/legend/LegendLabelPositions.js +++ /dev/null @@ -1,245 +0,0 @@ -import { interpolateRdYlBu } from 'd3-scale-chromatic'; -import { - ContinuousColorLegend, - piecewiseColorDefaultLabelFormatter, - PiecewiseColorLegend, -} from '@mui/x-charts/ChartsLegend'; -import { ChartsDataProvider } from '@mui/x-charts/ChartsDataProvider'; -import { ChartsAxesGradients } from '@mui/x-charts/internals'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import Divider from '@mui/material/Divider'; - -export default function LegendLabelPositions() { - const piecewiseFormatter = (params) => - params.index === 0 || params.index === params.length - ? piecewiseColorDefaultLabelFormatter(params) - : ''; - - return ( - `${value}°`, - colorMap: { - type: 'continuous', - min: -0.5, - max: 1.5, - color: (t) => interpolateRdYlBu(1 - t), - }, - }, - ]} - xAxis={[ - { - valueFormatter: (value) => `${value}°`, - colorMap: { - type: 'piecewise', - thresholds: [0, 1.5], - colors: [ - interpolateRdYlBu(0.9), - interpolateRdYlBu(0.5), - interpolateRdYlBu(0.1), - ], - }, - }, - ]} - > - - - Continuous - Horizontal - div': { flex: 1 } }} - > -
- start - -
-
- end - -
-
- extremes - -
- - - Vertical - div': { - flex: 1, - height: '100%', - display: 'flex', - flexDirection: 'column', - }, - '& .MuiContinuousColorLegend-root': { flex: 1 }, - }} - > -
- start - -
-
- end - -
-
- extremes - -
- - - - Piecewise - Horizontal - div': { flex: 1 } }} - > -
- start - -
-
- end - -
-
- extremes - -
-
- inline-start - -
-
- inline-end - -
- - - Vertical - div': { - flex: 1, - height: '100%', - display: 'flex', - flexDirection: 'column', - }, - }} - > -
- start - -
-
- end - -
-
- extremes - -
-
- inline-start - -
-
- inline-end - -
- - - - - - - - ); -} diff --git a/docs/data/charts/legend/LegendMarkType.js b/docs/data/charts/legend/LegendMarkType.js deleted file mode 100644 index d4253f4fb9997..0000000000000 --- a/docs/data/charts/legend/LegendMarkType.js +++ /dev/null @@ -1,48 +0,0 @@ -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import { BarChart } from '@mui/x-charts/BarChart'; - -const series = [ - { id: 'id-0', data: [10], label: 'Series A' }, - { id: 'id-1', data: [15], label: 'Series B' }, - { id: 'id-2', data: [20], label: 'Series C' }, - { id: 'id-3', data: [10], label: 'Series D' }, -]; - -export default function LegendMarkType() { - return ( - ( - ({ - ...seriesItem, - labelMarkType: props.markType, - }))} - xAxis={[{ data: ['A'] }]} - height={200} - /> - )} - getCode={({ props }) => { - return `import { BarChart } from '@mui/x-charts/BarChart'; - - ({ - ...seriesItem, - labelMarkType: '${props.markType}', - })) - } -/> -`; - }} - /> - ); -} diff --git a/docs/data/charts/legend/LegendPosition.js b/docs/data/charts/legend/LegendPosition.js deleted file mode 100644 index 53be3c62367a1..0000000000000 --- a/docs/data/charts/legend/LegendPosition.js +++ /dev/null @@ -1,85 +0,0 @@ -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import { PieChart } from '@mui/x-charts/PieChart'; - -const data = [ - { id: 0, value: 10, label: 'Series A' }, - { id: 1, value: 15, label: 'Series B' }, - { id: 2, value: 20, label: 'Series C' }, - { id: 3, value: 10, label: 'Series D' }, - { id: 4, value: 15, label: 'Series E' }, - { id: 5, value: 20, label: 'Series F' }, - { id: 6, value: 10, label: 'Series G' }, - { id: 7, value: 15, label: 'Series H' }, - { id: 8, value: 20, label: 'Series I' }, - { id: 9, value: 10, label: 'Series J' }, - { id: 10, value: 15, label: 'Series K' }, - { id: 11, value: 20, label: 'Series L' }, - { id: 12, value: 10, label: 'Series M' }, - { id: 13, value: 15, label: 'Series N' }, - { id: 14, value: 20, label: 'Series O' }, -]; - -export default function LegendPosition() { - return ( - ( - - )} - getCode={({ props }) => { - return `import { PieChart } from '@mui/x-charts/PieChart'; - - -`; - }} - /> - ); -} diff --git a/docs/data/charts/legend/LegendStyleSeries.js b/docs/data/charts/legend/LegendStyleSeries.js deleted file mode 100644 index 3b71d2e9f9729..0000000000000 --- a/docs/data/charts/legend/LegendStyleSeries.js +++ /dev/null @@ -1,66 +0,0 @@ -import { LineChart, lineClasses } from '@mui/x-charts/LineChart'; -import { legendClasses } from '@mui/x-charts/ChartsLegend'; -import { labelMarkClasses } from '@mui/x-charts/ChartsLabel'; - -const monthlySalesData = [ - { month: 'Jan', productA: 120, productB: 90 }, - { month: 'Feb', productA: 130, productB: 100 }, - { month: 'Mar', productA: 125, productB: 110 }, - { month: 'Apr', productA: 150, productB: 95 }, - { month: 'May', productA: 160, productB: 105 }, - { month: 'Jun', productA: 170, productB: 115 }, - { month: 'Jul', productA: 165, productB: 120 }, - { month: 'Aug', productA: 175, productB: 130 }, - { month: 'Sep', productA: 180, productB: 125 }, - { month: 'Oct', productA: 190, productB: 135 }, - { month: 'Nov', productA: 200, productB: 140 }, - { month: 'Dec', productA: 210, productB: 145 }, -]; - -const settings = { - series: [ - { - data: monthlySalesData.map((d) => d.productA), - label: 'Product A', - id: 'a', - }, - { - data: monthlySalesData.map((d) => d.productB), - label: 'Product B', - id: 'b', - }, - ], - xAxis: [ - { - scaleType: 'point', - data: monthlySalesData.map((d) => d.month), - }, - ], - yAxis: [{ width: 50, label: 'Sales' }], - height: 300, - margin: { right: 24 }, -}; - -export default function LegendStyleSeries() { - return ( - - ); -} diff --git a/docs/data/charts/legend/LegendTextStyling.js b/docs/data/charts/legend/LegendTextStyling.js deleted file mode 100644 index 6095a60fad408..0000000000000 --- a/docs/data/charts/legend/LegendTextStyling.js +++ /dev/null @@ -1,73 +0,0 @@ -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import { PieChart } from '@mui/x-charts/PieChart'; -import { labelMarkClasses } from '@mui/x-charts/ChartsLabel'; - -const data = [ - { id: 0, value: 10, label: 'Series A' }, - { id: 1, value: 15, label: 'Series B' }, - { id: 2, value: 20, label: 'Series C' }, - { id: 3, value: 10, label: 'Series D' }, -]; - -export default function LegendTextStyling() { - return ( - ( - - )} - getCode={({ props }) => { - return `import { PieChart } from '@mui/x-charts/PieChart'; -import { labelMarkClasses } from '@mui/x-charts/ChartsLabel'; - - -`; - }} - /> - ); -} diff --git a/docs/data/charts/legend/PiecewiseInteractiveDemo.js b/docs/data/charts/legend/PiecewiseInteractiveDemo.js deleted file mode 100644 index ca8258190108d..0000000000000 --- a/docs/data/charts/legend/PiecewiseInteractiveDemo.js +++ /dev/null @@ -1,118 +0,0 @@ -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import { LineChart } from '@mui/x-charts/LineChart'; -import { - piecewiseColorDefaultLabelFormatter, - PiecewiseColorLegend, -} from '@mui/x-charts/ChartsLegend'; -import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; -import { dataset } from './tempAnomaly'; - -export default function PiecewiseInteractiveDemo() { - return ( - ( - `${value?.toFixed(2)}°`, - }, - ]} - xAxis={[ - { - scaleType: 'time', - dataKey: 'year', - disableLine: true, - valueFormatter: (value) => value.getFullYear().toString(), - colorMap: { - type: 'piecewise', - thresholds: [new Date(1961, 0, 1), new Date(1990, 0, 1)], - colors: ['blue', 'gray', 'red'], - }, - }, - ]} - yAxis={[ - { - disableLine: true, - disableTicks: true, - valueFormatter: (value) => `${value}°`, - }, - ]} - grid={{ horizontal: true }} - height={300} - slots={{ - legend: PiecewiseColorLegend, - }} - slotProps={{ - legend: { - axisDirection: 'x', - direction: props.direction, - markType: props.markType, - labelPosition: props.labelPosition, - labelFormatter: props.onlyShowExtremes - ? (params) => - params.index === 0 || params.index === params.length - ? piecewiseColorDefaultLabelFormatter(params) - : '' - : undefined, - sx: { - padding: props.padding, - }, - }, - }} - > - - - )} - getCode={({ props }) => { - return `import { - PiecewiseColorLegend, - piecewiseColorDefaultLabelFormatter, -} from '@mui/x-charts/ChartsLegend'; - -\n params.index === 0 || params.index === params.length\n ? piecewiseColorDefaultLabelFormatter(params) \n : ''" : ''} - }, - }} -/> -`; - }} - /> - ); -} diff --git a/docs/data/charts/legend/ScrollableLegend.js b/docs/data/charts/legend/ScrollableLegend.js deleted file mode 100644 index e4fde609f8ee5..0000000000000 --- a/docs/data/charts/legend/ScrollableLegend.js +++ /dev/null @@ -1,46 +0,0 @@ -import Stack from '@mui/material/Stack'; -import { PieChart } from '@mui/x-charts/PieChart'; - -const series = [ - { - data: [ - { id: 0, value: 10, label: 'Series A' }, - { id: 1, value: 15, label: 'Series B' }, - { id: 2, value: 20, label: 'Series C' }, - { id: 3, value: 10, label: 'Series D' }, - { id: 4, value: 15, label: 'Series E' }, - { id: 5, value: 20, label: 'Series F' }, - { id: 6, value: 10, label: 'Series G' }, - { id: 7, value: 15, label: 'Series H' }, - { id: 8, value: 20, label: 'Series I' }, - { id: 9, value: 10, label: 'Series J' }, - { id: 10, value: 15, label: 'Series K' }, - { id: 11, value: 20, label: 'Series L' }, - { id: 12, value: 10, label: 'Series M' }, - { id: 13, value: 15, label: 'Series N' }, - { id: 14, value: 20, label: 'Series O' }, - ], - }, -]; - -export default function ScrollableLegend() { - return ( - - - - ); -} diff --git a/docs/data/charts/legend/ScrollableLegend.tsx.preview b/docs/data/charts/legend/ScrollableLegend.tsx.preview deleted file mode 100644 index 6f7c38b28639a..0000000000000 --- a/docs/data/charts/legend/ScrollableLegend.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/legend/StackLineVisibility.js b/docs/data/charts/legend/StackLineVisibility.js deleted file mode 100644 index 46165b058dcdc..0000000000000 --- a/docs/data/charts/legend/StackLineVisibility.js +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import { LineChart } from '@mui/x-charts/LineChart'; -import { dataset, valueFormatter } from '../dataset/weather'; - -const series = [ - { dataKey: 'newYork', label: 'New York', valueFormatter, stack: 'a' }, - { dataKey: 'london', label: 'London', valueFormatter, stack: 'a' }, - { dataKey: 'paris', label: 'Paris', valueFormatter, stack: 'a' }, -]; - -export default function StackLineVisibility() { - const [domainSeries, setDomainSeries] = React.useState('all'); - - return ( -
- - setDomainSeries(event.target.checked ? 'visible' : 'all') - } - /> - } - label="y-axis domain considers only visible series" - labelPlacement="end" - /> - -
- ); -} diff --git a/docs/data/charts/legend/ToggleSeriesVisibility.js b/docs/data/charts/legend/ToggleSeriesVisibility.js deleted file mode 100644 index 57bb6d66f6f0b..0000000000000 --- a/docs/data/charts/legend/ToggleSeriesVisibility.js +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { dataset, valueFormatter } from '../dataset/weather'; - -const series = [ - { dataKey: 'london', label: 'London', valueFormatter }, - { dataKey: 'paris', label: 'Paris', valueFormatter }, - { dataKey: 'newYork', label: 'New York', valueFormatter }, -]; - -export default function ToggleSeriesVisibility() { - const [domainSeries, setDomainSeries] = React.useState('all'); - - return ( -
- - setDomainSeries(event.target.checked ? 'visible' : 'all') - } - /> - } - label="x-axis domain considers only visible series" - labelPlacement="end" - /> - -
- ); -} diff --git a/docs/data/charts/legend/VeryBasicColorLegend.js b/docs/data/charts/legend/VeryBasicColorLegend.js deleted file mode 100644 index 7e87d5d8eaab0..0000000000000 --- a/docs/data/charts/legend/VeryBasicColorLegend.js +++ /dev/null @@ -1,60 +0,0 @@ -import { LineChart } from '@mui/x-charts/LineChart'; -import { PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend'; -import Stack from '@mui/material/Stack'; -import { dataset } from './tempAnomaly'; - -const data = { - dataset, - series: [ - { - label: 'Global temperature anomaly relative to 1961-1990', - dataKey: 'anomaly', - valueFormatter: (value) => `${value?.toFixed(2)}°`, - }, - ], - xAxis: [ - { - scaleType: 'time', - dataKey: 'year', - disableLine: true, - valueFormatter: (value) => value.getFullYear().toString(), - colorMap: { - type: 'piecewise', - thresholds: [new Date(1961, 0, 1), new Date(1990, 0, 1)], - colors: ['blue', 'gray', 'red'], - }, - }, - ], - yAxis: [ - { - disableLine: true, - disableTicks: true, - valueFormatter: (value) => `${value}°`, - }, - ], - grid: { horizontal: true }, - height: 300, - margin: { top: 20, right: 20 }, -}; - -export default function VeryBasicColorLegend() { - return ( - - - - ); -} diff --git a/docs/data/charts/legend/VeryBasicColorLegend.tsx.preview b/docs/data/charts/legend/VeryBasicColorLegend.tsx.preview deleted file mode 100644 index 183ce44d8eed9..0000000000000 --- a/docs/data/charts/legend/VeryBasicColorLegend.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/legend/VisibilityOnChange.js b/docs/data/charts/legend/VisibilityOnChange.js deleted file mode 100644 index 30668f3ff481e..0000000000000 --- a/docs/data/charts/legend/VisibilityOnChange.js +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; -import { LineChart } from '@mui/x-charts/LineChart'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; - -const series = [ - { id: 'series-a', data: [20, 30, 25, 40, 30], label: 'Series A' }, - { id: 'series-b', data: [15, 25, 20, 35, 20], label: 'Series B' }, - { id: 'series-c', data: [10, 20, 15, 30, 25], label: 'Series C' }, -]; - -export default function VisibilityOnChange() { - const [hiddenItems, setHiddenItems] = React.useState([]); - - const visibleCount = series.length - hiddenItems.length; - - return ( - - setHiddenItems(newHiddenItems)} - /> - - Visible series: {visibleCount} / {series.length} - - - ); -} diff --git a/docs/data/charts/legend/VisibilityOnChange.tsx.preview b/docs/data/charts/legend/VisibilityOnChange.tsx.preview deleted file mode 100644 index 41bcab23941d1..0000000000000 --- a/docs/data/charts/legend/VisibilityOnChange.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - setHiddenItems(newHiddenItems)} -/> - - Visible series: {visibleCount} / {series.length} - \ No newline at end of file diff --git a/docs/data/charts/legend/BasicColorLegend.tsx b/docs/data/charts/legend/demos/basic-color-legend/BasicColorLegend.tsx similarity index 94% rename from docs/data/charts/legend/BasicColorLegend.tsx rename to docs/data/charts/legend/demos/basic-color-legend/BasicColorLegend.tsx index f63c1904c983d..6b4423d6a7cde 100644 --- a/docs/data/charts/legend/BasicColorLegend.tsx +++ b/docs/data/charts/legend/demos/basic-color-legend/BasicColorLegend.tsx @@ -3,11 +3,12 @@ import { LineChart } from '@mui/x-charts/LineChart'; import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; import { PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend'; import Stack from '@mui/material/Stack'; -import { dataset } from './tempAnomaly'; +import { dataset } from '../../tempAnomaly'; export default function BasicColorLegend() { return ( + {/* @focus-start */} Global temperature anomaly relative to 1961-1990 average @@ -54,6 +55,7 @@ export default function BasicColorLegend() { > + {/* @focus-end */} ); } diff --git a/docs/data/charts/legend/demos/basic-color-legend/client.ts b/docs/data/charts/legend/demos/basic-color-legend/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/basic-color-legend/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/basic-color-legend/index.ts b/docs/data/charts/legend/demos/basic-color-legend/index.ts new file mode 100644 index 0000000000000..4b0facc64c4b5 --- /dev/null +++ b/docs/data/charts/legend/demos/basic-color-legend/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicColorLegend from './BasicColorLegend'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicColorLegend, { ClientProvider }); diff --git a/docs/data/charts/legend/BasicLegend.tsx b/docs/data/charts/legend/demos/basic-legend/BasicLegend.tsx similarity index 75% rename from docs/data/charts/legend/BasicLegend.tsx rename to docs/data/charts/legend/demos/basic-legend/BasicLegend.tsx index ac9d229d94706..68053e9644735 100644 --- a/docs/data/charts/legend/BasicLegend.tsx +++ b/docs/data/charts/legend/demos/basic-legend/BasicLegend.tsx @@ -1,8 +1,9 @@ import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import dataset from '../dataset/random/scatterParallel.json'; +import dataset from '../../../dataset/random/scatterParallel.json'; export default function BasicLegend() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/legend/demos/basic-legend/client.ts b/docs/data/charts/legend/demos/basic-legend/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/basic-legend/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/basic-legend/index.ts b/docs/data/charts/legend/demos/basic-legend/index.ts new file mode 100644 index 0000000000000..3348aae8f8c7a --- /dev/null +++ b/docs/data/charts/legend/demos/basic-legend/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicLegend from './BasicLegend'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicLegend, { ClientProvider }); diff --git a/docs/data/charts/legend/ContinuousInteractiveDemo.tsx b/docs/data/charts/legend/demos/continuous-interactive-demo/ContinuousInteractiveDemo.tsx similarity index 97% rename from docs/data/charts/legend/ContinuousInteractiveDemo.tsx rename to docs/data/charts/legend/demos/continuous-interactive-demo/ContinuousInteractiveDemo.tsx index 32b9e883ad0ae..24efa62ffb036 100644 --- a/docs/data/charts/legend/ContinuousInteractiveDemo.tsx +++ b/docs/data/charts/legend/demos/continuous-interactive-demo/ContinuousInteractiveDemo.tsx @@ -3,10 +3,11 @@ import { interpolateRdYlBu } from 'd3-scale-chromatic'; import { LineChart } from '@mui/x-charts/LineChart'; import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; import { ContinuousColorLegend } from '@mui/x-charts/ChartsLegend'; -import { dataset } from './tempAnomaly'; +import { dataset } from '../../tempAnomaly'; export default function ContinuousInteractiveDemo() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/legend/demos/continuous-interactive-demo/client.ts b/docs/data/charts/legend/demos/continuous-interactive-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/continuous-interactive-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/continuous-interactive-demo/index.ts b/docs/data/charts/legend/demos/continuous-interactive-demo/index.ts new file mode 100644 index 0000000000000..09455c995f7fe --- /dev/null +++ b/docs/data/charts/legend/demos/continuous-interactive-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ContinuousInteractiveDemo from './ContinuousInteractiveDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ContinuousInteractiveDemo, { ClientProvider }); diff --git a/docs/data/charts/legend/ControlledVisibility.tsx b/docs/data/charts/legend/demos/controlled-visibility/ControlledVisibility.tsx similarity index 98% rename from docs/data/charts/legend/ControlledVisibility.tsx rename to docs/data/charts/legend/demos/controlled-visibility/ControlledVisibility.tsx index 4cbe3ec126e47..7f755b90894f8 100644 --- a/docs/data/charts/legend/ControlledVisibility.tsx +++ b/docs/data/charts/legend/demos/controlled-visibility/ControlledVisibility.tsx @@ -14,6 +14,7 @@ const data = [ ]; export default function ControlledVisibility() { + // @focus-start @padding 1 const [hiddenItems, setHiddenItems] = React.useState< VisibilityIdentifierWithType<'pie'>[] >([{ type: 'pie', seriesId: 'custom', dataIndex: 0 }]); @@ -106,4 +107,5 @@ export default function ControlledVisibility() { /> ); + // @focus-end } diff --git a/docs/data/charts/legend/demos/controlled-visibility/client.ts b/docs/data/charts/legend/demos/controlled-visibility/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/controlled-visibility/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/controlled-visibility/index.ts b/docs/data/charts/legend/demos/controlled-visibility/index.ts new file mode 100644 index 0000000000000..aeafe08f46c9e --- /dev/null +++ b/docs/data/charts/legend/demos/controlled-visibility/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ControlledVisibility from './ControlledVisibility'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ControlledVisibility, { ClientProvider }); diff --git a/docs/data/charts/legend/CustomLegend.tsx b/docs/data/charts/legend/demos/custom-legend/CustomLegend.tsx similarity index 94% rename from docs/data/charts/legend/CustomLegend.tsx rename to docs/data/charts/legend/demos/custom-legend/CustomLegend.tsx index 715b528c7b821..301aeedb15eae 100644 --- a/docs/data/charts/legend/CustomLegend.tsx +++ b/docs/data/charts/legend/demos/custom-legend/CustomLegend.tsx @@ -4,10 +4,8 @@ import Typography from '@mui/material/Typography'; import { useTheme } from '@mui/material/styles'; import { useLegend } from '@mui/x-charts/hooks'; import { LineChart, lineClasses } from '@mui/x-charts/LineChart'; -import { - ChartsLabelCustomMarkProps, - ChartsLabelMark, -} from '@mui/x-charts/ChartsLabel'; +import type { ChartsLabelCustomMarkProps } from '@mui/x-charts/ChartsLabel'; +import { ChartsLabelMark } from '@mui/x-charts/ChartsLabel'; function LineWithMark({ color, className }: ChartsLabelCustomMarkProps) { return ( @@ -82,6 +80,7 @@ const dataset = [ ]; export default function CustomLegend() { + // @focus-start @padding 1 const theme = useTheme(); return ( @@ -117,4 +116,5 @@ export default function CustomLegend() { /> ); + // @focus-end } diff --git a/docs/data/charts/legend/demos/custom-legend/client.ts b/docs/data/charts/legend/demos/custom-legend/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/custom-legend/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/custom-legend/index.ts b/docs/data/charts/legend/demos/custom-legend/index.ts new file mode 100644 index 0000000000000..5a4cd3a1ed493 --- /dev/null +++ b/docs/data/charts/legend/demos/custom-legend/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomLegend from './CustomLegend'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomLegend, { ClientProvider }); diff --git a/docs/data/charts/legend/HiddenLegend.tsx b/docs/data/charts/legend/demos/hidden-legend/HiddenLegend.tsx similarity index 95% rename from docs/data/charts/legend/HiddenLegend.tsx rename to docs/data/charts/legend/demos/hidden-legend/HiddenLegend.tsx index d33b0ffa42de2..721ed978340e2 100644 --- a/docs/data/charts/legend/HiddenLegend.tsx +++ b/docs/data/charts/legend/demos/hidden-legend/HiddenLegend.tsx @@ -15,6 +15,7 @@ const series = [ ]; export default function HiddenLegend() { + // @focus-start @padding 1 const [isHidden, setIsHidden] = React.useState(false); const Toggle = ( @@ -33,4 +34,5 @@ export default function HiddenLegend() { ); + // @focus-end } diff --git a/docs/data/charts/legend/demos/hidden-legend/client.ts b/docs/data/charts/legend/demos/hidden-legend/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/hidden-legend/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/hidden-legend/index.ts b/docs/data/charts/legend/demos/hidden-legend/index.ts new file mode 100644 index 0000000000000..7355a58ef5572 --- /dev/null +++ b/docs/data/charts/legend/demos/hidden-legend/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HiddenLegend from './HiddenLegend'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HiddenLegend, { ClientProvider }); diff --git a/docs/data/charts/legend/LegendClick.tsx b/docs/data/charts/legend/demos/legend-click/LegendClick.tsx similarity index 98% rename from docs/data/charts/legend/LegendClick.tsx rename to docs/data/charts/legend/demos/legend-click/LegendClick.tsx index e1344d2a9d132..bd9ae607a7187 100644 --- a/docs/data/charts/legend/LegendClick.tsx +++ b/docs/data/charts/legend/demos/legend-click/LegendClick.tsx @@ -52,6 +52,7 @@ const lineSeries = [ ] as const; export default function LegendClick() { + // @focus-start @padding 1 const [itemData, setItemData] = React.useState(); return ( @@ -140,4 +141,5 @@ ${itemData ? JSON.stringify(itemData[0], null, 2) : '// The data will appear her ); + // @focus-end } diff --git a/docs/data/charts/legend/demos/legend-click/client.ts b/docs/data/charts/legend/demos/legend-click/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/legend-click/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/legend-click/index.ts b/docs/data/charts/legend/demos/legend-click/index.ts new file mode 100644 index 0000000000000..0804ffc97799e --- /dev/null +++ b/docs/data/charts/legend/demos/legend-click/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LegendClick from './LegendClick'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LegendClick, { ClientProvider }); diff --git a/docs/data/charts/legend/LegendCustomLabelMark.tsx b/docs/data/charts/legend/demos/legend-custom-label-mark/LegendCustomLabelMark.tsx similarity index 88% rename from docs/data/charts/legend/LegendCustomLabelMark.tsx rename to docs/data/charts/legend/demos/legend-custom-label-mark/LegendCustomLabelMark.tsx index 46179ae036588..ff8225c1b9a9c 100644 --- a/docs/data/charts/legend/LegendCustomLabelMark.tsx +++ b/docs/data/charts/legend/demos/legend-custom-label-mark/LegendCustomLabelMark.tsx @@ -1,5 +1,5 @@ import { BarChart } from '@mui/x-charts/BarChart'; -import { ChartsLabelCustomMarkProps } from '@mui/x-charts/ChartsLabel'; +import type { ChartsLabelCustomMarkProps } from '@mui/x-charts/ChartsLabel'; function HTMLCircle({ className, color }: ChartsLabelCustomMarkProps) { return ( @@ -21,6 +21,7 @@ function SVGDiamond({ className, color }: ChartsLabelCustomMarkProps) { export default function LegendCustomLabelMark() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/legend/demos/legend-custom-label-mark/client.ts b/docs/data/charts/legend/demos/legend-custom-label-mark/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/legend-custom-label-mark/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/legend-custom-label-mark/index.ts b/docs/data/charts/legend/demos/legend-custom-label-mark/index.ts new file mode 100644 index 0000000000000..b3b3d10d33b6a --- /dev/null +++ b/docs/data/charts/legend/demos/legend-custom-label-mark/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LegendCustomLabelMark from './LegendCustomLabelMark'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LegendCustomLabelMark, { ClientProvider }); diff --git a/docs/data/charts/legend/LegendDimension.tsx b/docs/data/charts/legend/demos/legend-dimension/LegendDimension.tsx similarity index 97% rename from docs/data/charts/legend/LegendDimension.tsx rename to docs/data/charts/legend/demos/legend-dimension/LegendDimension.tsx index 1c8e15d83c982..1278b6bcdaf94 100644 --- a/docs/data/charts/legend/LegendDimension.tsx +++ b/docs/data/charts/legend/demos/legend-dimension/LegendDimension.tsx @@ -14,6 +14,7 @@ const data = [ export default function LegendDimension() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/legend/demos/legend-dimension/client.ts b/docs/data/charts/legend/demos/legend-dimension/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/legend-dimension/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/legend-dimension/index.ts b/docs/data/charts/legend/demos/legend-dimension/index.ts new file mode 100644 index 0000000000000..c80067af1dde9 --- /dev/null +++ b/docs/data/charts/legend/demos/legend-dimension/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LegendDimension from './LegendDimension'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LegendDimension, { ClientProvider }); diff --git a/docs/data/charts/legend/LegendLabelPositions.tsx b/docs/data/charts/legend/demos/legend-label-positions/LegendLabelPositions.tsx similarity index 98% rename from docs/data/charts/legend/LegendLabelPositions.tsx rename to docs/data/charts/legend/demos/legend-label-positions/LegendLabelPositions.tsx index ccaf45b935457..c4c56a5144831 100644 --- a/docs/data/charts/legend/LegendLabelPositions.tsx +++ b/docs/data/charts/legend/demos/legend-label-positions/LegendLabelPositions.tsx @@ -1,9 +1,9 @@ import { interpolateRdYlBu } from 'd3-scale-chromatic'; +import type { PiecewiseLabelFormatterParams } from '@mui/x-charts/ChartsLegend'; import { ContinuousColorLegend, piecewiseColorDefaultLabelFormatter, PiecewiseColorLegend, - PiecewiseLabelFormatterParams, } from '@mui/x-charts/ChartsLegend'; import { ChartsDataProvider } from '@mui/x-charts/ChartsDataProvider'; import { ChartsAxesGradients } from '@mui/x-charts/internals'; @@ -12,6 +12,7 @@ import Typography from '@mui/material/Typography'; import Divider from '@mui/material/Divider'; export default function LegendLabelPositions() { + // @focus-start @padding 1 const piecewiseFormatter = (params: PiecewiseLabelFormatterParams) => params.index === 0 || params.index === params.length ? piecewiseColorDefaultLabelFormatter(params) @@ -246,4 +247,5 @@ export default function LegendLabelPositions() { ); + // @focus-end } diff --git a/docs/data/charts/legend/demos/legend-label-positions/client.ts b/docs/data/charts/legend/demos/legend-label-positions/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/legend-label-positions/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/legend-label-positions/index.ts b/docs/data/charts/legend/demos/legend-label-positions/index.ts new file mode 100644 index 0000000000000..0eb3c91497a70 --- /dev/null +++ b/docs/data/charts/legend/demos/legend-label-positions/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LegendLabelPositions from './LegendLabelPositions'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LegendLabelPositions, { ClientProvider }); diff --git a/docs/data/charts/legend/LegendMarkType.tsx b/docs/data/charts/legend/demos/legend-mark-type/LegendMarkType.tsx similarity index 96% rename from docs/data/charts/legend/LegendMarkType.tsx rename to docs/data/charts/legend/demos/legend-mark-type/LegendMarkType.tsx index f426559c0d9ad..aaf2310b099fa 100644 --- a/docs/data/charts/legend/LegendMarkType.tsx +++ b/docs/data/charts/legend/demos/legend-mark-type/LegendMarkType.tsx @@ -10,6 +10,7 @@ const series = [ export default function LegendMarkType() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/legend/demos/legend-mark-type/client.ts b/docs/data/charts/legend/demos/legend-mark-type/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/legend-mark-type/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/legend-mark-type/index.ts b/docs/data/charts/legend/demos/legend-mark-type/index.ts new file mode 100644 index 0000000000000..069cb90fe8630 --- /dev/null +++ b/docs/data/charts/legend/demos/legend-mark-type/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LegendMarkType from './LegendMarkType'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LegendMarkType, { ClientProvider }); diff --git a/docs/data/charts/legend/LegendPosition.tsx b/docs/data/charts/legend/demos/legend-position/LegendPosition.tsx similarity index 97% rename from docs/data/charts/legend/LegendPosition.tsx rename to docs/data/charts/legend/demos/legend-position/LegendPosition.tsx index 757982c1f98af..fe50dedf5f8fb 100644 --- a/docs/data/charts/legend/LegendPosition.tsx +++ b/docs/data/charts/legend/demos/legend-position/LegendPosition.tsx @@ -21,6 +21,7 @@ const data = [ export default function LegendPosition() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/legend/demos/legend-position/client.ts b/docs/data/charts/legend/demos/legend-position/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/legend-position/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/legend-position/index.ts b/docs/data/charts/legend/demos/legend-position/index.ts new file mode 100644 index 0000000000000..51f9732e9d788 --- /dev/null +++ b/docs/data/charts/legend/demos/legend-position/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LegendPosition from './LegendPosition'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LegendPosition, { ClientProvider }); diff --git a/docs/data/charts/legend/LegendStyleSeries.tsx b/docs/data/charts/legend/demos/legend-style-series/LegendStyleSeries.tsx similarity index 91% rename from docs/data/charts/legend/LegendStyleSeries.tsx rename to docs/data/charts/legend/demos/legend-style-series/LegendStyleSeries.tsx index 137fbb7b117c4..ba36a800061dd 100644 --- a/docs/data/charts/legend/LegendStyleSeries.tsx +++ b/docs/data/charts/legend/demos/legend-style-series/LegendStyleSeries.tsx @@ -1,4 +1,5 @@ -import { LineChart, LineChartProps, lineClasses } from '@mui/x-charts/LineChart'; +import type { LineChartProps } from '@mui/x-charts/LineChart'; +import { LineChart, lineClasses } from '@mui/x-charts/LineChart'; import { legendClasses } from '@mui/x-charts/ChartsLegend'; import { labelMarkClasses } from '@mui/x-charts/ChartsLabel'; @@ -43,6 +44,7 @@ const settings = { export default function LegendStyleSeries() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/legend/demos/legend-style-series/client.ts b/docs/data/charts/legend/demos/legend-style-series/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/legend-style-series/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/legend-style-series/index.ts b/docs/data/charts/legend/demos/legend-style-series/index.ts new file mode 100644 index 0000000000000..06b8cca109986 --- /dev/null +++ b/docs/data/charts/legend/demos/legend-style-series/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LegendStyleSeries from './LegendStyleSeries'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LegendStyleSeries, { ClientProvider }); diff --git a/docs/data/charts/legend/LegendTextStyling.tsx b/docs/data/charts/legend/demos/legend-text-styling/LegendTextStyling.tsx similarity index 97% rename from docs/data/charts/legend/LegendTextStyling.tsx rename to docs/data/charts/legend/demos/legend-text-styling/LegendTextStyling.tsx index 6095a60fad408..8d7c9f915000f 100644 --- a/docs/data/charts/legend/LegendTextStyling.tsx +++ b/docs/data/charts/legend/demos/legend-text-styling/LegendTextStyling.tsx @@ -11,6 +11,7 @@ const data = [ export default function LegendTextStyling() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/legend/demos/legend-text-styling/client.ts b/docs/data/charts/legend/demos/legend-text-styling/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/legend-text-styling/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/legend-text-styling/index.ts b/docs/data/charts/legend/demos/legend-text-styling/index.ts new file mode 100644 index 0000000000000..2bedf1586c22a --- /dev/null +++ b/docs/data/charts/legend/demos/legend-text-styling/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LegendTextStyling from './LegendTextStyling'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LegendTextStyling, { ClientProvider }); diff --git a/docs/data/charts/legend/PiecewiseInteractiveDemo.tsx b/docs/data/charts/legend/demos/piecewise-interactive-demo/PiecewiseInteractiveDemo.tsx similarity index 97% rename from docs/data/charts/legend/PiecewiseInteractiveDemo.tsx rename to docs/data/charts/legend/demos/piecewise-interactive-demo/PiecewiseInteractiveDemo.tsx index b2cbd738cba8d..c334c5e30d602 100644 --- a/docs/data/charts/legend/PiecewiseInteractiveDemo.tsx +++ b/docs/data/charts/legend/demos/piecewise-interactive-demo/PiecewiseInteractiveDemo.tsx @@ -5,10 +5,11 @@ import { PiecewiseColorLegend, } from '@mui/x-charts/ChartsLegend'; import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; -import { dataset } from './tempAnomaly'; +import { dataset } from '../../tempAnomaly'; export default function PiecewiseInteractiveDemo() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/legend/demos/piecewise-interactive-demo/client.ts b/docs/data/charts/legend/demos/piecewise-interactive-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/piecewise-interactive-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/piecewise-interactive-demo/index.ts b/docs/data/charts/legend/demos/piecewise-interactive-demo/index.ts new file mode 100644 index 0000000000000..022bac2f0c81d --- /dev/null +++ b/docs/data/charts/legend/demos/piecewise-interactive-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PiecewiseInteractiveDemo from './PiecewiseInteractiveDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PiecewiseInteractiveDemo, { ClientProvider }); diff --git a/docs/data/charts/legend/ScrollableLegend.tsx b/docs/data/charts/legend/demos/scrollable-legend/ScrollableLegend.tsx similarity index 96% rename from docs/data/charts/legend/ScrollableLegend.tsx rename to docs/data/charts/legend/demos/scrollable-legend/ScrollableLegend.tsx index e4fde609f8ee5..c2a5743005e14 100644 --- a/docs/data/charts/legend/ScrollableLegend.tsx +++ b/docs/data/charts/legend/demos/scrollable-legend/ScrollableLegend.tsx @@ -26,6 +26,7 @@ const series = [ export default function ScrollableLegend() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/legend/demos/scrollable-legend/client.ts b/docs/data/charts/legend/demos/scrollable-legend/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/scrollable-legend/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/scrollable-legend/index.ts b/docs/data/charts/legend/demos/scrollable-legend/index.ts new file mode 100644 index 0000000000000..1fd84ec3aa852 --- /dev/null +++ b/docs/data/charts/legend/demos/scrollable-legend/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScrollableLegend from './ScrollableLegend'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScrollableLegend, { ClientProvider }); diff --git a/docs/data/charts/legend/StackLineVisibility.tsx b/docs/data/charts/legend/demos/stack-line-visibility/StackLineVisibility.tsx similarity index 91% rename from docs/data/charts/legend/StackLineVisibility.tsx rename to docs/data/charts/legend/demos/stack-line-visibility/StackLineVisibility.tsx index 3493e43e8b9d0..bd2ba9ce48717 100644 --- a/docs/data/charts/legend/StackLineVisibility.tsx +++ b/docs/data/charts/legend/demos/stack-line-visibility/StackLineVisibility.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; import { LineChart } from '@mui/x-charts/LineChart'; -import { dataset, valueFormatter } from '../dataset/weather'; +import { dataset, valueFormatter } from '../../../dataset/weather'; const series = [ { dataKey: 'newYork', label: 'New York', valueFormatter, stack: 'a' }, @@ -11,6 +11,7 @@ const series = [ ]; export default function StackLineVisibility() { + // @focus-start @padding 1 const [domainSeries, setDomainSeries] = React.useState<'all' | 'visible'>('all'); return ( @@ -41,4 +42,5 @@ export default function StackLineVisibility() { />
); + // @focus-end } diff --git a/docs/data/charts/legend/demos/stack-line-visibility/client.ts b/docs/data/charts/legend/demos/stack-line-visibility/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/stack-line-visibility/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/stack-line-visibility/index.ts b/docs/data/charts/legend/demos/stack-line-visibility/index.ts new file mode 100644 index 0000000000000..0aa9f5242bfbe --- /dev/null +++ b/docs/data/charts/legend/demos/stack-line-visibility/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StackLineVisibility from './StackLineVisibility'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StackLineVisibility, { ClientProvider }); diff --git a/docs/data/charts/legend/ToggleSeriesVisibility.tsx b/docs/data/charts/legend/demos/toggle-series-visibility/ToggleSeriesVisibility.tsx similarity index 91% rename from docs/data/charts/legend/ToggleSeriesVisibility.tsx rename to docs/data/charts/legend/demos/toggle-series-visibility/ToggleSeriesVisibility.tsx index 5e30d307edbb3..5135de7c4ab52 100644 --- a/docs/data/charts/legend/ToggleSeriesVisibility.tsx +++ b/docs/data/charts/legend/demos/toggle-series-visibility/ToggleSeriesVisibility.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; import { BarChart } from '@mui/x-charts/BarChart'; -import { dataset, valueFormatter } from '../dataset/weather'; +import { dataset, valueFormatter } from '../../../dataset/weather'; const series = [ { dataKey: 'london', label: 'London', valueFormatter }, @@ -11,6 +11,7 @@ const series = [ ]; export default function ToggleSeriesVisibility() { + // @focus-start @padding 1 const [domainSeries, setDomainSeries] = React.useState<'all' | 'visible'>('all'); return ( @@ -38,4 +39,5 @@ export default function ToggleSeriesVisibility() { /> ); + // @focus-end } diff --git a/docs/data/charts/legend/demos/toggle-series-visibility/client.ts b/docs/data/charts/legend/demos/toggle-series-visibility/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/toggle-series-visibility/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/toggle-series-visibility/index.ts b/docs/data/charts/legend/demos/toggle-series-visibility/index.ts new file mode 100644 index 0000000000000..75d9606afe26b --- /dev/null +++ b/docs/data/charts/legend/demos/toggle-series-visibility/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ToggleSeriesVisibility from './ToggleSeriesVisibility'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ToggleSeriesVisibility, { ClientProvider }); diff --git a/docs/data/charts/legend/VeryBasicColorLegend.tsx b/docs/data/charts/legend/demos/very-basic-color-legend/VeryBasicColorLegend.tsx similarity index 86% rename from docs/data/charts/legend/VeryBasicColorLegend.tsx rename to docs/data/charts/legend/demos/very-basic-color-legend/VeryBasicColorLegend.tsx index 4956ca255a649..9b1273c4a2f3e 100644 --- a/docs/data/charts/legend/VeryBasicColorLegend.tsx +++ b/docs/data/charts/legend/demos/very-basic-color-legend/VeryBasicColorLegend.tsx @@ -1,7 +1,8 @@ -import { LineChart, LineChartProps } from '@mui/x-charts/LineChart'; +import type { LineChartProps } from '@mui/x-charts/LineChart'; +import { LineChart } from '@mui/x-charts/LineChart'; import { PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend'; import Stack from '@mui/material/Stack'; -import { dataset } from './tempAnomaly'; +import { dataset } from '../../tempAnomaly'; const data: LineChartProps = { dataset, @@ -40,6 +41,7 @@ const data: LineChartProps = { export default function VeryBasicColorLegend() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/legend/demos/very-basic-color-legend/client.ts b/docs/data/charts/legend/demos/very-basic-color-legend/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/very-basic-color-legend/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/very-basic-color-legend/index.ts b/docs/data/charts/legend/demos/very-basic-color-legend/index.ts new file mode 100644 index 0000000000000..23cd98163ed22 --- /dev/null +++ b/docs/data/charts/legend/demos/very-basic-color-legend/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import VeryBasicColorLegend from './VeryBasicColorLegend'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, VeryBasicColorLegend, { ClientProvider }); diff --git a/docs/data/charts/legend/VisibilityOnChange.tsx b/docs/data/charts/legend/demos/visibility-on-change/VisibilityOnChange.tsx similarity index 96% rename from docs/data/charts/legend/VisibilityOnChange.tsx rename to docs/data/charts/legend/demos/visibility-on-change/VisibilityOnChange.tsx index 8722b7fc0ebee..ee47ae0916ef1 100644 --- a/docs/data/charts/legend/VisibilityOnChange.tsx +++ b/docs/data/charts/legend/demos/visibility-on-change/VisibilityOnChange.tsx @@ -11,6 +11,7 @@ const series = [ ]; export default function VisibilityOnChange() { + // @focus-start @padding 1 const [hiddenItems, setHiddenItems] = React.useState([]); const visibleCount = series.length - hiddenItems.length; @@ -33,4 +34,5 @@ export default function VisibilityOnChange() { ); + // @focus-end } diff --git a/docs/data/charts/legend/demos/visibility-on-change/client.ts b/docs/data/charts/legend/demos/visibility-on-change/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/legend/demos/visibility-on-change/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/legend/demos/visibility-on-change/index.ts b/docs/data/charts/legend/demos/visibility-on-change/index.ts new file mode 100644 index 0000000000000..7b371e21ea330 --- /dev/null +++ b/docs/data/charts/legend/demos/visibility-on-change/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import VisibilityOnChange from './VisibilityOnChange'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, VisibilityOnChange, { ClientProvider }); diff --git a/docs/data/charts/legend/legend.md b/docs/data/charts/legend/legend.md index bbc34bdf71a05..8e5f8cada44c0 100644 --- a/docs/data/charts/legend/legend.md +++ b/docs/data/charts/legend/legend.md @@ -12,7 +12,7 @@ A legend is a UI element that maps symbols and colors to series labels, helping In chart components, the legend links series with `label` properties and their colors. -{{"demo": "BasicLegend.js"}} +{{"component": "file://./demos/basic-legend/index.ts"}} ## Toggle visibility @@ -25,7 +25,7 @@ To only consider visible series set the axis property `domainSeries` to `'visibl This demo shows how hiding series can impact the x-axis. -{{"demo": "ToggleSeriesVisibility.js"}} +{{"component": "file://./demos/toggle-series-visibility/index.ts"}} ### Stack series edge case @@ -35,7 +35,7 @@ Otherwise, hiding the bottom series could bring the other one outside of the axi In this demo, hiding the blue series (New York) decreases the values of the two other ones as expected. But if the y-axis does not take it into consideration, the yellow series which has some values below 50 goes outside of the drawing area. -{{"demo": "StackLineVisibility.js"}} +{{"component": "file://./demos/stack-line-visibility/index.ts"}} ### Visibility change callback @@ -46,7 +46,7 @@ To set the initial hidden items, use the `initialHiddenItems` prop. The demo below shows a line chart where you can toggle series' visibility and see the count of currently visible series. -{{"demo": "VisibilityOnChange.js"}} +{{"component": "file://./demos/visibility-on-change/index.ts"}} :::info You can combine the `toggleVisibilityOnClick` prop with the `onItemClick()` handler. @@ -65,7 +65,7 @@ All identifiers require a `type` field indicating the series type (for example, The demo below shows how to control which items are visible using buttons. -{{"demo": "ControlledVisibility.js"}} +{{"component": "file://./demos/controlled-visibility/index.ts"}} ## Customization @@ -82,7 +82,7 @@ Each legend item is composed of two main elements: the `mark` and the `label`. The example below shows how to customize parts of the legend and how to use both the `legendClasses` variable and the CSS class directly. -{{"demo": "LegendDimension.js", "hideToolbar": true, "bg": "playground"}} +{{"component": "file://./demos/legend-dimension/index.ts", "hideToolbar": true, "bg": "playground"}} ### Position @@ -105,13 +105,13 @@ When [composing custom charts](/x/react-charts/quickstart/#composable-charts), t Or you can place the legend wherever you prefer. ::: -{{"demo": "LegendPosition.js", "hideToolbar": true, "bg": "playground"}} +{{"component": "file://./demos/legend-position/index.ts", "hideToolbar": true, "bg": "playground"}} ### Hiding You can hide the legend with the `hideLegend` prop of the Chart. -{{"demo": "HiddenLegend.js"}} +{{"component": "file://./demos/hidden-legend/index.ts"}} ### Label styling @@ -120,20 +120,20 @@ You can change the `label` style by targeting the root component's font properti The mark is an SVG element, so you can use the `fill` property to change its color. You can do this via the `sx` prop, CSS Modules, or other CSS approaches, as shown in the demo below: -{{"demo": "LegendTextStyling.js", "hideToolbar": true, "bg": "playground"}} +{{"component": "file://./demos/legend-text-styling/index.ts", "hideToolbar": true, "bg": "playground"}} ### Change mark shape You can change the mark shape using the `labelMarkType` property of the series item. For the `pie` series, the `labelMarkType` property is also available for each pie slice. -{{"demo": "LegendMarkType.js", "hideToolbar": true, "bg": "playground"}} +{{"component": "file://./demos/legend-mark-type/index.ts", "hideToolbar": true, "bg": "playground"}} #### Custom shapes For more advanced use cases, you can provide a component to the `labelMarkType` property of each series to fully customize the mark. -{{"demo": "LegendCustomLabelMark.js" }} +{{"component": "file://./demos/legend-custom-label-mark/index.ts"}} Passing a component to `labelMarkType` affects not only the legend but also other places where the label mark is shown, such as tooltips. @@ -147,14 +147,14 @@ To ensure compatibility with [gradients and patterns](/x/react-charts/styling/#g You can make the legend scrollable by setting `overflowY` for vertical legends or `overflowX` for horizontal legends. Make sure the legend container has a fixed height or width to enable scrolling. -{{"demo": "ScrollableLegend.js"}} +{{"component": "file://./demos/scrollable-legend/index.ts"}} ### Series styling You can use CSS to style the series in the legend. Each legend item has a `data-series` attribute where its value is the ID of the series it represents. -{{"demo": "LegendStyleSeries.js"}} +{{"component": "file://./demos/legend-style-series/index.ts"}} ### Custom component @@ -166,7 +166,7 @@ The demo below shows how to use `labelMarkType` together with `useLegend()` to c This approach uses slots to render the legend items. See [HTML components](/x/react-charts/components/#html-components) for a demo that shows how to implement it when composing a custom chart. -{{"demo": "CustomLegend.js"}} +{{"component": "file://./demos/custom-legend/index.ts"}} ## Color legend @@ -177,7 +177,7 @@ To display a legend associated with a [`colorMap`](/x/react-charts/styling/#valu You can override the `legend` slot to display the desired legend, or use the [composition API](/x/react-charts/composition/) to add as many legends as needed. -{{"demo": "VeryBasicColorLegend.js"}} +{{"component": "file://./demos/very-basic-color-legend/index.ts"}} ### Select data @@ -186,7 +186,7 @@ To select the color mapping to represent, use the following props: - `axisDirection`: `'x'`, `'y'`, or `'z'` - indicates which axis contains the `colorMap` definition - `axisId`: The ID of the axis to use (if the selected direction contains multiple axes) -{{"demo": "BasicColorLegend.js"}} +{{"component": "file://./demos/basic-color-legend/index.ts"}} ### Position @@ -207,7 +207,7 @@ For the piecewise legend, two extra values are accepted: - With `direction='horizontal'`, `'inline-start'` and `'inline-end'` position labels inline with the marker - With `direction='vertical'`, these work the same as `'start'` and `'end'` -{{"demo": "LegendLabelPositions.js"}} +{{"component": "file://./demos/legend-label-positions/index.ts"}} ### Continuous color mapping @@ -220,7 +220,7 @@ They accept either a string to display or a function `({value, formattedValue}) You can also reverse the gradient with the `reverse` prop. -{{"demo": "ContinuousInteractiveDemo.js", "hideToolbar": true, "bg": "playground"}} +{{"component": "file://./demos/continuous-interactive-demo/index.ts", "hideToolbar": true, "bg": "playground"}} ### Piecewise color mapping @@ -241,7 +241,7 @@ labelFormatter = ({ index, length, min, max, formattedMin, formattedMax }) => You can change the mark type with the `markType` prop. Since the color values are based on the axis and not the series, you must set `markType` directly on the legend. -{{"demo": "PiecewiseInteractiveDemo.js", "hideToolbar": true, "bg": "playground"}} +{{"component": "file://./demos/piecewise-interactive-demo/index.ts", "hideToolbar": true, "bg": "playground"}} ## Click event @@ -259,4 +259,4 @@ const clickHandler = ( The `context` object contains different properties depending on the legend type. Click the legend items in the demo below to see their content. -{{"demo": "LegendClick.js"}} +{{"component": "file://./demos/legend-click/index.ts"}} diff --git a/docs/data/charts/line-demo/BiaxialLineChart.js b/docs/data/charts/line-demo/BiaxialLineChart.js deleted file mode 100644 index 444fc2579f68b..0000000000000 --- a/docs/data/charts/line-demo/BiaxialLineChart.js +++ /dev/null @@ -1,32 +0,0 @@ -import Box from '@mui/material/Box'; -import { LineChart } from '@mui/x-charts/LineChart'; - -const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; -const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function BiaxialLineChart() { - return ( - - - - ); -} diff --git a/docs/data/charts/line-demo/BiaxialLineChart.tsx.preview b/docs/data/charts/line-demo/BiaxialLineChart.tsx.preview deleted file mode 100644 index 48fb2e9ef7d49..0000000000000 --- a/docs/data/charts/line-demo/BiaxialLineChart.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/line-demo/CustomLabelChart.js b/docs/data/charts/line-demo/CustomLabelChart.js deleted file mode 100644 index 136a21307ba84..0000000000000 --- a/docs/data/charts/line-demo/CustomLabelChart.js +++ /dev/null @@ -1,53 +0,0 @@ -import Box from '@mui/material/Box'; -import { LineChart } from '@mui/x-charts/LineChart'; - -const margin = { right: 24 }; -const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -function CustomMark(props) { - const { x, y, color } = props; - - return ( - - - - {pData[props.dataIndex].toString()} - - - ); -} - -export default function CustomLabelChart() { - return ( - - - - ); -} diff --git a/docs/data/charts/line-demo/CustomLabelChart.tsx.preview b/docs/data/charts/line-demo/CustomLabelChart.tsx.preview deleted file mode 100644 index 8a91d677c4ca3..0000000000000 --- a/docs/data/charts/line-demo/CustomLabelChart.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/line-demo/CustomLineMarks.js b/docs/data/charts/line-demo/CustomLineMarks.js deleted file mode 100644 index 933c2a2512686..0000000000000 --- a/docs/data/charts/line-demo/CustomLineMarks.js +++ /dev/null @@ -1,41 +0,0 @@ -import Box from '@mui/material/Box'; -import { LineChart } from '@mui/x-charts/LineChart'; - -const margin = { right: 24 }; -const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; -const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function CustomLineMarks() { - return ( - - index % 2 === 0, - }, - { - data: uData, - label: 'uv', - shape: 'diamond', - showMark: ({ index }) => index % 2 === 0, - }, - ]} - xAxis={[{ scaleType: 'point', data: xLabels, height: 28 }]} - yAxis={[{ width: 50 }]} - margin={margin} - /> - - ); -} diff --git a/docs/data/charts/line-demo/DashedLineChart.js b/docs/data/charts/line-demo/DashedLineChart.js deleted file mode 100644 index a87b18796dc11..0000000000000 --- a/docs/data/charts/line-demo/DashedLineChart.js +++ /dev/null @@ -1,48 +0,0 @@ -import Box from '@mui/material/Box'; -import { LineChart, lineClasses } from '@mui/x-charts/LineChart'; - -const margin = { right: 24 }; -const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; -const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function DashedLineChart() { - return ( - - - - ); -} diff --git a/docs/data/charts/line-demo/LargerHighlightLineNoSnap.js b/docs/data/charts/line-demo/LargerHighlightLineNoSnap.js deleted file mode 100644 index 9c5682c5144ac..0000000000000 --- a/docs/data/charts/line-demo/LargerHighlightLineNoSnap.js +++ /dev/null @@ -1,93 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import { LineChart } from '@mui/x-charts/LineChart'; - -const margin = { right: 24 }; -const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; -const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -const highlightScope = { - highlight: 'item', - fade: 'global', -}; - -const settings = { - height: 300, - series: [ - { data: pData, label: 'pv', highlightScope }, - { data: uData, label: 'uv', highlightScope }, - ], - xAxis: [{ scaleType: 'point', data: xLabels }], - yAxis: [{ width: 50 }], - margin, -}; - -function CustomLine(props) { - const { d, ownerState, className, ...other } = props; - - return ( - - - - - ); -} - -export default function LargerHighlightLineNoSnap() { - const [showInteractionArea, setShowInteractionArea] = React.useState(true); - - return ( - - setShowInteractionArea(event.target.checked)} - /> - } - label="Show highlight area" - labelPlacement="end" - /> - - - ); -} diff --git a/docs/data/charts/line-demo/LargerHighlightLineNoSnap.tsx.preview b/docs/data/charts/line-demo/LargerHighlightLineNoSnap.tsx.preview deleted file mode 100644 index 7576f41adde83..0000000000000 --- a/docs/data/charts/line-demo/LargerHighlightLineNoSnap.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - setShowInteractionArea(event.target.checked)} - /> - } - label="Show highlight area" - labelPlacement="end" -/> - \ No newline at end of file diff --git a/docs/data/charts/line-demo/LineChartConnectNulls.js b/docs/data/charts/line-demo/LineChartConnectNulls.js deleted file mode 100644 index 0927a7717afc6..0000000000000 --- a/docs/data/charts/line-demo/LineChartConnectNulls.js +++ /dev/null @@ -1,22 +0,0 @@ -import Stack from '@mui/material/Stack'; -import { LineChart } from '@mui/x-charts/LineChart'; - -const margin = { right: 24 }; -const data = [4000, 3000, 2000, null, 1890, 2390, 3490]; -const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G']; -export default function LineChartConnectNulls() { - return ( - - - - - ); -} diff --git a/docs/data/charts/line-demo/LineChartConnectNulls.tsx.preview b/docs/data/charts/line-demo/LineChartConnectNulls.tsx.preview deleted file mode 100644 index 8eace27fe2020..0000000000000 --- a/docs/data/charts/line-demo/LineChartConnectNulls.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/charts/line-demo/LineChartWithReferenceLines.js b/docs/data/charts/line-demo/LineChartWithReferenceLines.js deleted file mode 100644 index d8d4f9e807959..0000000000000 --- a/docs/data/charts/line-demo/LineChartWithReferenceLines.js +++ /dev/null @@ -1,45 +0,0 @@ -import Box from '@mui/material/Box'; -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; -import { LinePlot } from '@mui/x-charts/LineChart'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; - -const margin = { right: 24 }; -const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; -const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function LineChartWithReferenceLines() { - return ( - - - - - - - - - - ); -} diff --git a/docs/data/charts/line-demo/LineWithUncertaintyArea.js b/docs/data/charts/line-demo/LineWithUncertaintyArea.js deleted file mode 100644 index ec5f682512a81..0000000000000 --- a/docs/data/charts/line-demo/LineWithUncertaintyArea.js +++ /dev/null @@ -1,168 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { AnimatedLine, LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; -import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath'; -import { - useChartId, - useDrawingArea, - useLineSeries, - useXAxis, - useXScale, - useYScale, -} from '@mui/x-charts/hooks'; -import * as d3Shape from '@mui/x-charts-vendor/d3-shape'; - -import { useTheme } from '@mui/material/styles'; - -function CustomAnimatedLine(props) { - const { limit, sxBefore, sxAfter, ...other } = props; - const { top, bottom, height, left, width } = useDrawingArea(); - const scale = useXScale(); - const chartId = useChartId(); - - if (limit === undefined) { - return ; - } - - const limitPosition = scale(limit); // Convert value to x coordinate. - - if (limitPosition === undefined) { - return ; - } - - const clipIdleft = `${chartId}-${props.ownerState.seriesId}-line-limit-${limit}-1`; - const clipIdRight = `${chartId}-${props.ownerState.seriesId}-line-limit-${limit}-2`; - return ( - - {/* Clip to show the line before the limit */} - - - - {/* Clip to show the line after the limit */} - - - - - - - - - - - ); -} - -function ForecastArea({ limit, forecast }) { - const lineSeries = useLineSeries(); - const xAxis = useXAxis(); - const xScale = useXScale(); - const yScale = useYScale(); - - const xAxisData = xAxis.data?.slice(limit) ?? []; - - if (!yScale) { - return null; - } - - return ( - - {lineSeries.map((series) => { - const data = xAxisData.map((v, i) => ({ - x: v, - y0: forecast[i].y0, - y1: forecast[i].y1, - })); - - const path = d3Shape - .area() - .x((d) => xScale(d.x)) - .y0((d) => yScale(d.y0)) - .y1((d) => yScale(d.y1))(data); - - return ; - })} - - ); -} - -function ShadedBackground({ limit }) { - const { top, bottom, height, left, width } = useDrawingArea(); - const scale = useXScale(); - const limitPosition = scale(limit); - const theme = useTheme(); - const fill = - theme.palette.mode === 'dark' - ? theme.palette.grey[900] - : theme.palette.grey[400]; - - return ( - - ); -} - -export default function LineWithUncertaintyArea() { - const id = React.useId(); - const clipPathId = `${id}-clip-path`; - - return ( - - `${v}${i.dataIndex > 5 ? ' (estimated)' : ''}`, - showMark: true, - }, - ]} - xAxis={[{ data: [0, 1, 2, 3, 4, 5, 6, 7, 8] }]} - sx={{ '& .line-after path': { strokeDasharray: '10 5' } }} - > - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/charts/line-demo/LiveLineChartNoSnap.js b/docs/data/charts/line-demo/LiveLineChartNoSnap.js deleted file mode 100644 index 60343f1f6e6d0..0000000000000 --- a/docs/data/charts/line-demo/LiveLineChartNoSnap.js +++ /dev/null @@ -1,86 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import { LineChart } from '@mui/x-charts/LineChart'; - -const dateFormatter = Intl.DateTimeFormat(undefined, { - month: '2-digit', - day: '2-digit', -}); -const oneDay = 24 * 60 * 60 * 1000; // in milliseconds - -const length = 50; -const initialFirstData = Array.from({ length }).map( - (_, __, array) => (array.at(-1) ?? 0) + randBetween(-100, 500), -); -const initialSecondData = Array.from({ length }).map( - (_, __, array) => (array.at(-1) ?? 0) + randBetween(-500, 100), -); - -export default function LiveLineChartNoSnap() { - const [running, setRunning] = React.useState(false); - const [date, setDate] = React.useState(new Date(2000, 0, 0)); - const [firstData, setFirstData] = React.useState(initialFirstData); - const [secondData, setSecondData] = React.useState(initialSecondData); - - React.useEffect(() => { - if (!running) { - return undefined; - } - const intervalId = setInterval(() => { - setDate((prev) => new Date(prev.getTime() + oneDay)); - setFirstData((prev) => [ - ...prev.slice(1), - prev.at(-1) + randBetween(-500, 500), - ]); - setSecondData((prev) => [ - ...prev.slice(1), - prev.at(-1) + randBetween(-500, 500), - ]); - }, 100); - - return () => { - clearInterval(intervalId); - }; - }, [running]); - - return ( - - new Date(date.getTime() + i * oneDay), - ), - valueFormatter: (value) => dateFormatter.format(value), - }, - ]} - yAxis={[{ width: 50 }]} - margin={{ right: 24 }} - /> - - - - ); -} - -function randBetween(min, max) { - // eslint-disable-next-line no-restricted-properties -- live animation demo - return Math.floor(Math.random() * (max - min + 1) + min); -} diff --git a/docs/data/charts/line-demo/SimpleLineChart.js b/docs/data/charts/line-demo/SimpleLineChart.js deleted file mode 100644 index 63cb9d1b930b4..0000000000000 --- a/docs/data/charts/line-demo/SimpleLineChart.js +++ /dev/null @@ -1,31 +0,0 @@ -import Box from '@mui/material/Box'; -import { LineChart } from '@mui/x-charts/LineChart'; - -const margin = { right: 24 }; -const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; -const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function SimpleLineChart() { - return ( - - - - ); -} diff --git a/docs/data/charts/line-demo/SimpleLineChart.tsx.preview b/docs/data/charts/line-demo/SimpleLineChart.tsx.preview deleted file mode 100644 index d48749234c4c0..0000000000000 --- a/docs/data/charts/line-demo/SimpleLineChart.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/line-demo/TinyLineChart.js b/docs/data/charts/line-demo/TinyLineChart.js deleted file mode 100644 index 4f0b40d24d27a..0000000000000 --- a/docs/data/charts/line-demo/TinyLineChart.js +++ /dev/null @@ -1,41 +0,0 @@ -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { LinePlot, MarkPlot, lineClasses } from '@mui/x-charts/LineChart'; - -const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function TinyLineChart() { - return ( - - - - - ); -} diff --git a/docs/data/charts/line-demo/BiaxialLineChart.tsx b/docs/data/charts/line-demo/demos/biaxial-line-chart/BiaxialLineChart.tsx similarity index 93% rename from docs/data/charts/line-demo/BiaxialLineChart.tsx rename to docs/data/charts/line-demo/demos/biaxial-line-chart/BiaxialLineChart.tsx index 444fc2579f68b..8578d156b2a7f 100644 --- a/docs/data/charts/line-demo/BiaxialLineChart.tsx +++ b/docs/data/charts/line-demo/demos/biaxial-line-chart/BiaxialLineChart.tsx @@ -16,6 +16,7 @@ const xLabels = [ export default function BiaxialLineChart() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/line-demo/demos/biaxial-line-chart/client.ts b/docs/data/charts/line-demo/demos/biaxial-line-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/line-demo/demos/biaxial-line-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/line-demo/demos/biaxial-line-chart/index.ts b/docs/data/charts/line-demo/demos/biaxial-line-chart/index.ts new file mode 100644 index 0000000000000..50e0c85dc9cc0 --- /dev/null +++ b/docs/data/charts/line-demo/demos/biaxial-line-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BiaxialLineChart from './BiaxialLineChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BiaxialLineChart, { ClientProvider }); diff --git a/docs/data/charts/line-demo/CustomLabelChart.tsx b/docs/data/charts/line-demo/demos/custom-label-chart/CustomLabelChart.tsx similarity index 86% rename from docs/data/charts/line-demo/CustomLabelChart.tsx rename to docs/data/charts/line-demo/demos/custom-label-chart/CustomLabelChart.tsx index fc7554a0e7cae..73ca3153d0c09 100644 --- a/docs/data/charts/line-demo/CustomLabelChart.tsx +++ b/docs/data/charts/line-demo/demos/custom-label-chart/CustomLabelChart.tsx @@ -1,5 +1,6 @@ import Box from '@mui/material/Box'; -import { LineChart, MarkElementProps } from '@mui/x-charts/LineChart'; +import type { MarkElementProps } from '@mui/x-charts/LineChart'; +import { LineChart } from '@mui/x-charts/LineChart'; const margin = { right: 24 }; const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; @@ -39,6 +40,7 @@ function CustomMark(props: MarkElementProps) { export default function CustomLabelChart() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/line-demo/demos/custom-label-chart/client.ts b/docs/data/charts/line-demo/demos/custom-label-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/line-demo/demos/custom-label-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/line-demo/demos/custom-label-chart/index.ts b/docs/data/charts/line-demo/demos/custom-label-chart/index.ts new file mode 100644 index 0000000000000..8256b1cc732a0 --- /dev/null +++ b/docs/data/charts/line-demo/demos/custom-label-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomLabelChart from './CustomLabelChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomLabelChart, { ClientProvider }); diff --git a/docs/data/charts/line-demo/CustomLineMarks.tsx b/docs/data/charts/line-demo/demos/custom-line-marks/CustomLineMarks.tsx similarity index 94% rename from docs/data/charts/line-demo/CustomLineMarks.tsx rename to docs/data/charts/line-demo/demos/custom-line-marks/CustomLineMarks.tsx index 933c2a2512686..64528e31f0e8e 100644 --- a/docs/data/charts/line-demo/CustomLineMarks.tsx +++ b/docs/data/charts/line-demo/demos/custom-line-marks/CustomLineMarks.tsx @@ -17,6 +17,7 @@ const xLabels = [ export default function CustomLineMarks() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/line-demo/demos/custom-line-marks/client.ts b/docs/data/charts/line-demo/demos/custom-line-marks/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/line-demo/demos/custom-line-marks/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/line-demo/demos/custom-line-marks/index.ts b/docs/data/charts/line-demo/demos/custom-line-marks/index.ts new file mode 100644 index 0000000000000..2365b9cc4c56f --- /dev/null +++ b/docs/data/charts/line-demo/demos/custom-line-marks/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomLineMarks from './CustomLineMarks'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomLineMarks, { ClientProvider }); diff --git a/docs/data/charts/line-demo/DashedLineChart.tsx b/docs/data/charts/line-demo/demos/dashed-line-chart/DashedLineChart.tsx similarity index 96% rename from docs/data/charts/line-demo/DashedLineChart.tsx rename to docs/data/charts/line-demo/demos/dashed-line-chart/DashedLineChart.tsx index a87b18796dc11..73010c2272521 100644 --- a/docs/data/charts/line-demo/DashedLineChart.tsx +++ b/docs/data/charts/line-demo/demos/dashed-line-chart/DashedLineChart.tsx @@ -17,6 +17,7 @@ const xLabels = [ export default function DashedLineChart() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/line-demo/demos/dashed-line-chart/client.ts b/docs/data/charts/line-demo/demos/dashed-line-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/line-demo/demos/dashed-line-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/line-demo/demos/dashed-line-chart/index.ts b/docs/data/charts/line-demo/demos/dashed-line-chart/index.ts new file mode 100644 index 0000000000000..6b4a06b37a4a5 --- /dev/null +++ b/docs/data/charts/line-demo/demos/dashed-line-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DashedLineChart from './DashedLineChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DashedLineChart, { ClientProvider }); diff --git a/docs/data/charts/line-demo/LargerHighlightLineNoSnap.tsx b/docs/data/charts/line-demo/demos/larger-highlight-line-no-snap/LargerHighlightLineNoSnap.tsx similarity index 90% rename from docs/data/charts/line-demo/LargerHighlightLineNoSnap.tsx rename to docs/data/charts/line-demo/demos/larger-highlight-line-no-snap/LargerHighlightLineNoSnap.tsx index e57301a8a54dc..b91aff228c487 100644 --- a/docs/data/charts/line-demo/LargerHighlightLineNoSnap.tsx +++ b/docs/data/charts/line-demo/demos/larger-highlight-line-no-snap/LargerHighlightLineNoSnap.tsx @@ -2,8 +2,9 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Checkbox from '@mui/material/Checkbox'; import FormControlLabel from '@mui/material/FormControlLabel'; -import { AnimatedLineProps, LineChart } from '@mui/x-charts/LineChart'; -import { HighlightScope } from '@mui/x-charts/context'; +import type { AnimatedLineProps } from '@mui/x-charts/LineChart'; +import { LineChart } from '@mui/x-charts/LineChart'; +import type { HighlightScope } from '@mui/x-charts/context'; const margin = { right: 24 }; const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; @@ -64,6 +65,7 @@ function CustomLine(props: AnimatedLineProps) { } export default function LargerHighlightLineNoSnap() { + // @focus-start @padding 1 const [showInteractionArea, setShowInteractionArea] = React.useState(true); return ( @@ -91,4 +93,5 @@ export default function LargerHighlightLineNoSnap() { ); + // @focus-end } diff --git a/docs/data/charts/line-demo/demos/larger-highlight-line-no-snap/client.ts b/docs/data/charts/line-demo/demos/larger-highlight-line-no-snap/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/line-demo/demos/larger-highlight-line-no-snap/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/line-demo/demos/larger-highlight-line-no-snap/index.ts b/docs/data/charts/line-demo/demos/larger-highlight-line-no-snap/index.ts new file mode 100644 index 0000000000000..e92c7decd8295 --- /dev/null +++ b/docs/data/charts/line-demo/demos/larger-highlight-line-no-snap/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LargerHighlightLineNoSnap from './LargerHighlightLineNoSnap'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LargerHighlightLineNoSnap, { ClientProvider }); diff --git a/docs/data/charts/line-demo/LineChartConnectNulls.tsx b/docs/data/charts/line-demo/demos/line-chart-connect-nulls/LineChartConnectNulls.tsx similarity index 93% rename from docs/data/charts/line-demo/LineChartConnectNulls.tsx rename to docs/data/charts/line-demo/demos/line-chart-connect-nulls/LineChartConnectNulls.tsx index 0927a7717afc6..07842886ae899 100644 --- a/docs/data/charts/line-demo/LineChartConnectNulls.tsx +++ b/docs/data/charts/line-demo/demos/line-chart-connect-nulls/LineChartConnectNulls.tsx @@ -7,6 +7,7 @@ const xData = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page export default function LineChartConnectNulls() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/line-demo/demos/line-chart-connect-nulls/client.ts b/docs/data/charts/line-demo/demos/line-chart-connect-nulls/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/line-demo/demos/line-chart-connect-nulls/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/line-demo/demos/line-chart-connect-nulls/index.ts b/docs/data/charts/line-demo/demos/line-chart-connect-nulls/index.ts new file mode 100644 index 0000000000000..91634490f9891 --- /dev/null +++ b/docs/data/charts/line-demo/demos/line-chart-connect-nulls/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LineChartConnectNulls from './LineChartConnectNulls'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LineChartConnectNulls, { ClientProvider }); diff --git a/docs/data/charts/line-demo/LineChartWithReferenceLines.tsx b/docs/data/charts/line-demo/demos/line-chart-with-reference-lines/LineChartWithReferenceLines.tsx similarity index 96% rename from docs/data/charts/line-demo/LineChartWithReferenceLines.tsx rename to docs/data/charts/line-demo/demos/line-chart-with-reference-lines/LineChartWithReferenceLines.tsx index d8d4f9e807959..0636ead088365 100644 --- a/docs/data/charts/line-demo/LineChartWithReferenceLines.tsx +++ b/docs/data/charts/line-demo/demos/line-chart-with-reference-lines/LineChartWithReferenceLines.tsx @@ -21,6 +21,7 @@ const xLabels = [ export default function LineChartWithReferenceLines() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/line-demo/demos/line-chart-with-reference-lines/client.ts b/docs/data/charts/line-demo/demos/line-chart-with-reference-lines/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/line-demo/demos/line-chart-with-reference-lines/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/line-demo/demos/line-chart-with-reference-lines/index.ts b/docs/data/charts/line-demo/demos/line-chart-with-reference-lines/index.ts new file mode 100644 index 0000000000000..c4ee0819c1037 --- /dev/null +++ b/docs/data/charts/line-demo/demos/line-chart-with-reference-lines/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LineChartWithReferenceLines from './LineChartWithReferenceLines'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LineChartWithReferenceLines, { ClientProvider }); diff --git a/docs/data/charts/line-demo/LineWithUncertaintyArea.tsx b/docs/data/charts/line-demo/demos/line-with-uncertainty-area/LineWithUncertaintyArea.tsx similarity index 93% rename from docs/data/charts/line-demo/LineWithUncertaintyArea.tsx rename to docs/data/charts/line-demo/demos/line-with-uncertainty-area/LineWithUncertaintyArea.tsx index 3991982c8dd9f..1dcae84f095c3 100644 --- a/docs/data/charts/line-demo/LineWithUncertaintyArea.tsx +++ b/docs/data/charts/line-demo/demos/line-with-uncertainty-area/LineWithUncertaintyArea.tsx @@ -1,11 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { - AnimatedLine, - AnimatedLineProps, - LinePlot, - MarkPlot, -} from '@mui/x-charts/LineChart'; +import type { AnimatedLineProps } from '@mui/x-charts/LineChart'; +import { AnimatedLine, LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; @@ -20,8 +16,9 @@ import { useYScale, } from '@mui/x-charts/hooks'; import * as d3Shape from '@mui/x-charts-vendor/d3-shape'; -import { SxProps } from '@mui/system'; -import { useTheme, Theme } from '@mui/material/styles'; +import type { SxProps } from '@mui/system'; +import type { Theme } from '@mui/material/styles'; +import { useTheme } from '@mui/material/styles'; interface CustomAnimatedLineProps extends AnimatedLineProps { limit?: number; @@ -139,6 +136,7 @@ function ShadedBackground({ limit }: { limit: number }) { } export default function LineWithUncertaintyArea() { + // @focus-start @padding 1 const id = React.useId(); const clipPathId = `${id}-clip-path`; @@ -183,4 +181,5 @@ export default function LineWithUncertaintyArea() { ); + // @focus-end } diff --git a/docs/data/charts/line-demo/demos/line-with-uncertainty-area/client.ts b/docs/data/charts/line-demo/demos/line-with-uncertainty-area/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/line-demo/demos/line-with-uncertainty-area/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/line-demo/demos/line-with-uncertainty-area/index.ts b/docs/data/charts/line-demo/demos/line-with-uncertainty-area/index.ts new file mode 100644 index 0000000000000..ba89bcc375d20 --- /dev/null +++ b/docs/data/charts/line-demo/demos/line-with-uncertainty-area/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LineWithUncertaintyArea from './LineWithUncertaintyArea'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LineWithUncertaintyArea, { ClientProvider }); diff --git a/docs/data/charts/line-demo/LiveLineChartNoSnap.tsx b/docs/data/charts/line-demo/demos/live-line-chart-no-snap/LiveLineChartNoSnap.tsx similarity index 98% rename from docs/data/charts/line-demo/LiveLineChartNoSnap.tsx rename to docs/data/charts/line-demo/demos/live-line-chart-no-snap/LiveLineChartNoSnap.tsx index cf853f7e64534..3e99ddfe40017 100644 --- a/docs/data/charts/line-demo/LiveLineChartNoSnap.tsx +++ b/docs/data/charts/line-demo/demos/live-line-chart-no-snap/LiveLineChartNoSnap.tsx @@ -18,6 +18,7 @@ const initialSecondData = Array.from({ length }).map( ); export default function LiveLineChartNoSnap() { + // @focus-start @padding 1 const [running, setRunning] = React.useState(false); const [date, setDate] = React.useState(new Date(2000, 0, 0)); const [firstData, setFirstData] = React.useState(initialFirstData); @@ -78,6 +79,7 @@ export default function LiveLineChartNoSnap() { ); + // @focus-end } function randBetween(min: number, max: number) { diff --git a/docs/data/charts/line-demo/demos/live-line-chart-no-snap/client.ts b/docs/data/charts/line-demo/demos/live-line-chart-no-snap/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/line-demo/demos/live-line-chart-no-snap/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/line-demo/demos/live-line-chart-no-snap/index.ts b/docs/data/charts/line-demo/demos/live-line-chart-no-snap/index.ts new file mode 100644 index 0000000000000..12052c7fa1c24 --- /dev/null +++ b/docs/data/charts/line-demo/demos/live-line-chart-no-snap/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LiveLineChartNoSnap from './LiveLineChartNoSnap'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LiveLineChartNoSnap, { ClientProvider }); diff --git a/docs/data/charts/line-demo/SimpleLineChart.tsx b/docs/data/charts/line-demo/demos/simple-line-chart/SimpleLineChart.tsx similarity index 93% rename from docs/data/charts/line-demo/SimpleLineChart.tsx rename to docs/data/charts/line-demo/demos/simple-line-chart/SimpleLineChart.tsx index 63cb9d1b930b4..a582d2fee0263 100644 --- a/docs/data/charts/line-demo/SimpleLineChart.tsx +++ b/docs/data/charts/line-demo/demos/simple-line-chart/SimpleLineChart.tsx @@ -17,6 +17,7 @@ const xLabels = [ export default function SimpleLineChart() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/line-demo/demos/simple-line-chart/client.ts b/docs/data/charts/line-demo/demos/simple-line-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/line-demo/demos/simple-line-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/line-demo/demos/simple-line-chart/index.ts b/docs/data/charts/line-demo/demos/simple-line-chart/index.ts new file mode 100644 index 0000000000000..25817b676d975 --- /dev/null +++ b/docs/data/charts/line-demo/demos/simple-line-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleLineChart from './SimpleLineChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleLineChart, { ClientProvider }); diff --git a/docs/data/charts/line-demo/TinyLineChart.tsx b/docs/data/charts/line-demo/demos/tiny-line-chart/TinyLineChart.tsx similarity index 95% rename from docs/data/charts/line-demo/TinyLineChart.tsx rename to docs/data/charts/line-demo/demos/tiny-line-chart/TinyLineChart.tsx index 4f0b40d24d27a..5dd047886bb7a 100644 --- a/docs/data/charts/line-demo/TinyLineChart.tsx +++ b/docs/data/charts/line-demo/demos/tiny-line-chart/TinyLineChart.tsx @@ -14,6 +14,7 @@ const xLabels = [ export default function TinyLineChart() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/line-demo/demos/tiny-line-chart/client.ts b/docs/data/charts/line-demo/demos/tiny-line-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/line-demo/demos/tiny-line-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/line-demo/demos/tiny-line-chart/index.ts b/docs/data/charts/line-demo/demos/tiny-line-chart/index.ts new file mode 100644 index 0000000000000..f39a7e5cba64b --- /dev/null +++ b/docs/data/charts/line-demo/demos/tiny-line-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TinyLineChart from './TinyLineChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TinyLineChart, { ClientProvider }); diff --git a/docs/data/charts/line-demo/line-demo.md b/docs/data/charts/line-demo/line-demo.md index 7d88db6184bc5..3b799361358cf 100644 --- a/docs/data/charts/line-demo/line-demo.md +++ b/docs/data/charts/line-demo/line-demo.md @@ -10,35 +10,35 @@ components: LineChart, LineElement, LineHighlightElement, LineHighlightPlot, Lin ## SimpleLineChart -{{"demo": "SimpleLineChart.js"}} +{{"component": "file://./demos/simple-line-chart/index.ts"}} ## TinyLineChart -{{"demo": "TinyLineChart.js"}} +{{"component": "file://./demos/tiny-line-chart/index.ts"}} ## DashedLineChart -{{"demo": "DashedLineChart.js"}} +{{"component": "file://./demos/dashed-line-chart/index.ts"}} ## BiaxialLineChart -{{"demo": "BiaxialLineChart.js"}} +{{"component": "file://./demos/biaxial-line-chart/index.ts"}} ## LineChartWithReferenceLines -{{"demo": "LineChartWithReferenceLines.js"}} +{{"component": "file://./demos/line-chart-with-reference-lines/index.ts"}} ## LineChartConnectNulls -{{"demo": "LineChartConnectNulls.js"}} +{{"component": "file://./demos/line-chart-connect-nulls/index.ts"}} ## CustomLabelLineChart -{{"demo": "CustomLabelChart.js"}} +{{"component": "file://./demos/custom-label-chart/index.ts"}} ## Line chart with live data -{{"demo": "LiveLineChartNoSnap.js"}} +{{"component": "file://./demos/live-line-chart-no-snap/index.ts"}} ## Line with forecast @@ -52,14 +52,14 @@ Set the `slots.line` prop to a custom component that renders the default line tw An uncertainty area illustrates the forecast uncertainty. -{{"demo": "LineWithUncertaintyArea.js"}} +{{"component": "file://./demos/line-with-uncertainty-area/index.ts"}} ## CustomLineMarks Using a shape other than `"circle"` renders a `` instead of a `` for mark elements. That change can reduce rendering performance (for example, around 50 ms to render 1,000 marks). -{{"demo": "CustomLineMarks.js"}} +{{"component": "file://./demos/custom-line-marks/index.ts"}} ## Larger interaction area @@ -70,4 +70,4 @@ Use two paths: a thin visible one for the line and a wider invisible one for poi When lines cross, the highlighted series is the last one defined in the slots, not necessarily the one closest to the pointer. -{{"demo": "LargerHighlightLineNoSnap.js"}} +{{"component": "file://./demos/larger-highlight-line-no-snap/index.ts"}} diff --git a/docs/data/charts/lines/AreaBaseline.js b/docs/data/charts/lines/AreaBaseline.js deleted file mode 100644 index 7f8fe9c9a37f6..0000000000000 --- a/docs/data/charts/lines/AreaBaseline.js +++ /dev/null @@ -1,17 +0,0 @@ -import { LineChart } from '@mui/x-charts/LineChart'; - -export default function AreaBaseline() { - return ( - - ); -} diff --git a/docs/data/charts/lines/AreaBaseline.tsx.preview b/docs/data/charts/lines/AreaBaseline.tsx.preview deleted file mode 100644 index a7ac332cb11eb..0000000000000 --- a/docs/data/charts/lines/AreaBaseline.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/lines/BasicArea.js b/docs/data/charts/lines/BasicArea.js deleted file mode 100644 index 63d055602e72c..0000000000000 --- a/docs/data/charts/lines/BasicArea.js +++ /dev/null @@ -1,16 +0,0 @@ -import { LineChart } from '@mui/x-charts/LineChart'; - -export default function BasicArea() { - return ( - - ); -} diff --git a/docs/data/charts/lines/BasicArea.tsx.preview b/docs/data/charts/lines/BasicArea.tsx.preview deleted file mode 100644 index 4fcb3d9fa4db3..0000000000000 --- a/docs/data/charts/lines/BasicArea.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/lines/BasicLineChart.js b/docs/data/charts/lines/BasicLineChart.js deleted file mode 100644 index 2bf8fcaa45e1b..0000000000000 --- a/docs/data/charts/lines/BasicLineChart.js +++ /dev/null @@ -1,15 +0,0 @@ -import { LineChart } from '@mui/x-charts/LineChart'; - -export default function BasicLineChart() { - return ( - - ); -} diff --git a/docs/data/charts/lines/BasicLineChart.tsx.preview b/docs/data/charts/lines/BasicLineChart.tsx.preview deleted file mode 100644 index 9812820a06691..0000000000000 --- a/docs/data/charts/lines/BasicLineChart.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/lines/CSSCustomization.js b/docs/data/charts/lines/CSSCustomization.js deleted file mode 100644 index ddd0e7a9a34a3..0000000000000 --- a/docs/data/charts/lines/CSSCustomization.js +++ /dev/null @@ -1,64 +0,0 @@ -import { lineClasses, LineChart } from '@mui/x-charts/LineChart'; -import { dataset } from '../dataset/gdpPerCapitaEvolution'; - -export default function CSSCustomization() { - return ( - date.getFullYear().toString(), - }, - ]} - yAxis={[ - { - width: 60, - }, - ]} - series={[ - { - id: 'France', - label: 'France', - dataKey: 'fr', - stack: 'total', - area: true, - }, - { - id: 'Germany', - label: 'Germany', - dataKey: 'dl', - stack: 'total', - area: true, - }, - { - id: 'United Kingdom', - label: 'United Kingdom', - dataKey: 'gb', - stack: 'total', - area: true, - }, - ]} - height={300} - > - - - - - - - - ); -} diff --git a/docs/data/charts/lines/ColorScale.js b/docs/data/charts/lines/ColorScale.js deleted file mode 100644 index e9a726af62134..0000000000000 --- a/docs/data/charts/lines/ColorScale.js +++ /dev/null @@ -1,166 +0,0 @@ -import * as React from 'react'; -import { LineChart } from '@mui/x-charts/LineChart'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; - -export default function ColorScale() { - const [colorX, setColorX] = React.useState('None'); - const [colorY, setColorY] = React.useState('piecewise'); - const [colorArea, setColorArea] = React.useState(true); - - return ( - - - setColorX(event.target.value)} - > - None - piecewise - continuous - - setColorY(event.target.value)} - > - None - piecewise - continuous - - setColorArea(event.target.checked)} /> - } - label="Show chart area" - labelPlacement="end" - /> - - value.getFullYear().toString(), - colorMap: - (colorX === 'continuous' && { - type: 'continuous', - min: new Date(2019, 1, 1), - max: new Date(2024, 1, 1), - color: ['green', 'orange'], - }) || - (colorX === 'piecewise' && { - type: 'piecewise', - thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)], - colors: ['blue', 'red', 'blue'], - }) || - undefined, - }, - ]} - /> - `, - ].join('\n')} - language="jsx" - copyButtonHidden - /> - - ); -} diff --git a/docs/data/charts/lines/ColorScale.tsx b/docs/data/charts/lines/ColorScale.tsx deleted file mode 100644 index aaf0dfe8d454d..0000000000000 --- a/docs/data/charts/lines/ColorScale.tsx +++ /dev/null @@ -1,175 +0,0 @@ -import * as React from 'react'; -import { LineChart } from '@mui/x-charts/LineChart'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; - -export default function ColorScale() { - const [colorX, setColorX] = React.useState< - 'None' | 'piecewise' | 'continuous' | 'ordinal' - >('None'); - const [colorY, setColorY] = React.useState<'None' | 'piecewise' | 'continuous'>( - 'piecewise', - ); - const [colorArea, setColorArea] = React.useState(true); - - return ( - - - - setColorX(event.target.value as 'None' | 'piecewise' | 'continuous') - } - > - None - piecewise - continuous - - - setColorY(event.target.value as 'None' | 'piecewise' | 'continuous') - } - > - None - piecewise - continuous - - setColorArea(event.target.checked)} /> - } - label="Show chart area" - labelPlacement="end" - /> - - value.getFullYear().toString(), - colorMap: - (colorX === 'continuous' && { - type: 'continuous', - min: new Date(2019, 1, 1), - max: new Date(2024, 1, 1), - color: ['green', 'orange'], - }) || - (colorX === 'piecewise' && { - type: 'piecewise', - thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)], - colors: ['blue', 'red', 'blue'], - }) || - undefined, - }, - ]} - /> - `, - ].join('\n')} - language="jsx" - copyButtonHidden - /> - - ); -} diff --git a/docs/data/charts/lines/ConnectNulls.js b/docs/data/charts/lines/ConnectNulls.js deleted file mode 100644 index 4f3c9ca597129..0000000000000 --- a/docs/data/charts/lines/ConnectNulls.js +++ /dev/null @@ -1,38 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import { LineChart } from '@mui/x-charts/LineChart'; - -export default function ConnectNulls() { - const [connectNulls, setConnectNulls] = React.useState(true); - - return ( - - setConnectNulls(event.target.checked)} /> - } - label="connectNulls" - labelPlacement="end" - /> - - - ); -} diff --git a/docs/data/charts/lines/DifferentLength.js b/docs/data/charts/lines/DifferentLength.js deleted file mode 100644 index c35c13a3a8591..0000000000000 --- a/docs/data/charts/lines/DifferentLength.js +++ /dev/null @@ -1,24 +0,0 @@ -import { LineChart } from '@mui/x-charts/LineChart'; - -export default function DifferentLength() { - return ( - (value == null ? 'NaN' : value.toString()), - }, - { - data: [null, null, null, null, 5.5, 2, 8.5, 1.5, 5], - }, - { - data: [7, 8, 5, 4, null, null, 2, 5.5, 1], - valueFormatter: (value) => (value == null ? '?' : value.toString()), - }, - ]} - height={200} - margin={{ bottom: 10 }} - /> - ); -} diff --git a/docs/data/charts/lines/ExpandingStep.js b/docs/data/charts/lines/ExpandingStep.js deleted file mode 100644 index ad6a255172555..0000000000000 --- a/docs/data/charts/lines/ExpandingStep.js +++ /dev/null @@ -1,100 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { BarPlot } from '@mui/x-charts/BarChart'; -import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; - -const weekDay = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; -const stepCurves = ['step', 'stepBefore', 'stepAfter']; - -export default function ExpandingStep() { - const [strictStepCurve, setStrictStepCurve] = React.useState(false); - const [connectNulls, setConnectNulls] = React.useState(false); - const [curve, setCurve] = React.useState('step'); - - return ( - - - - setConnectNulls(event.target.checked)} - /> - } - label="connectNulls" - labelPlacement="end" - /> - setStrictStepCurve(event.target.checked)} - /> - } - label="strictStepCurve" - labelPlacement="end" - /> - - setCurve(event.target.value)} - > - {stepCurves.map((curveType) => ( - - {curveType} - - ))} - - - - - - - - - - - - ); -} diff --git a/docs/data/charts/lines/GridDemo.js b/docs/data/charts/lines/GridDemo.js deleted file mode 100644 index fc4a308a97669..0000000000000 --- a/docs/data/charts/lines/GridDemo.js +++ /dev/null @@ -1,41 +0,0 @@ -import { LineChart } from '@mui/x-charts/LineChart'; - -import { - dateAxisFormatter, - percentageFormatter, - usUnemploymentRate, -} from '../dataset/usUnemploymentRate'; - -const xAxis = [ - { - dataKey: 'date', - scaleType: 'time', - valueFormatter: dateAxisFormatter, - }, -]; - -const yAxis = [ - { - valueFormatter: percentageFormatter, - }, -]; - -const series = [ - { - dataKey: 'rate', - valueFormatter: percentageFormatter, - }, -]; - -export default function GridDemo() { - return ( - - ); -} diff --git a/docs/data/charts/lines/GridDemo.tsx b/docs/data/charts/lines/GridDemo.tsx deleted file mode 100644 index c8e768ed21062..0000000000000 --- a/docs/data/charts/lines/GridDemo.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { LineChart } from '@mui/x-charts/LineChart'; -import { XAxis } from '@mui/x-charts/models'; -import { - dateAxisFormatter, - percentageFormatter, - usUnemploymentRate, -} from '../dataset/usUnemploymentRate'; - -const xAxis: XAxis<'time'>[] = [ - { - dataKey: 'date', - scaleType: 'time', - valueFormatter: dateAxisFormatter, - }, -]; -const yAxis = [ - { - valueFormatter: percentageFormatter, - }, -]; -const series = [ - { - dataKey: 'rate', - valueFormatter: percentageFormatter, - }, -]; -export default function GridDemo() { - return ( - - ); -} diff --git a/docs/data/charts/lines/GridDemo.tsx.preview b/docs/data/charts/lines/GridDemo.tsx.preview deleted file mode 100644 index 790245c2f8239..0000000000000 --- a/docs/data/charts/lines/GridDemo.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/lines/InterpolationDemo.js b/docs/data/charts/lines/InterpolationDemo.js deleted file mode 100644 index 062622dd1653c..0000000000000 --- a/docs/data/charts/lines/InterpolationDemo.js +++ /dev/null @@ -1,62 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import { LineChart } from '@mui/x-charts/LineChart'; - -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -const curveTypes = [ - 'linear', - 'catmullRom', - 'monotoneX', - 'monotoneY', - 'natural', - 'step', - 'stepBefore', - 'stepAfter', - 'bumpX', - 'bumpY', -]; - -function getExample(curveType) { - return ``; -} - -export default function InterpolationDemo() { - const [curveType, setCurveType] = React.useState(curveTypes[0]); - - return ( - - setCurveType(event.target.value)} - > - {curveTypes.map((curve) => ( - - {curve} - - ))} - - - - - ); -} diff --git a/docs/data/charts/lines/LineAnimation.js b/docs/data/charts/lines/LineAnimation.js deleted file mode 100644 index e46a1b6f612af..0000000000000 --- a/docs/data/charts/lines/LineAnimation.js +++ /dev/null @@ -1,88 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Stack from '@mui/material/Stack'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import { LineChart } from '@mui/x-charts/LineChart'; -import { mangoFusionPalette } from '@mui/x-charts/colorPalettes'; - -const defaultSeries = [ - { id: '1', data: [4, 5, 1, 2, 3, 3, 2], area: true, stack: '1' }, - { id: '2', data: [7, 4, 6, 7, 2, 3, 5], area: true, stack: '1' }, - { id: '3', data: [6, 4, 1, 2, 6, 3, 3], area: true, stack: '1' }, - { id: '4', data: [4, 7, 6, 1, 2, 7, 7], area: true, stack: '1' }, - { id: '5', data: [2, 2, 1, 7, 1, 5, 3], area: true, stack: '1' }, - { id: '6', data: [6, 6, 1, 6, 7, 1, 1], area: true, stack: '1' }, - { id: '7', data: [7, 6, 1, 6, 4, 4, 6], area: true, stack: '1' }, - { id: '8', data: [4, 3, 1, 6, 6, 3, 5], area: true, stack: '1' }, - { id: '9', data: [7, 6, 2, 7, 4, 2, 7], area: true, stack: '1' }, -].map((item, index) => ({ - ...item, - color: mangoFusionPalette('light')[index], -})); - -export default function LineAnimation() { - const [series, setSeries] = React.useState(defaultSeries); - const [nbSeries, setNbSeries] = React.useState(3); - const [skipAnimation, setSkipAnimation] = React.useState(false); - - return ( -
-
- -
- - - - - setSkipAnimation(event.target.checked)} /> - } - label="skipAnimation" - labelPlacement="end" - /> - -
- ); -} diff --git a/docs/data/charts/lines/LineClick.js b/docs/data/charts/lines/LineClick.js deleted file mode 100644 index 405655eab75d6..0000000000000 --- a/docs/data/charts/lines/LineClick.js +++ /dev/null @@ -1,102 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; -import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; - -import { LineChart } from '@mui/x-charts/LineChart'; - -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -const lineChartsParams = { - series: [ - { - id: 'series-1', - data: [3, 4, 1, 6, 5], - label: 'A', - area: true, - stack: 'total', - highlightScope: { - highlight: 'item', - }, - }, - { - id: 'series-2', - data: [4, 3, 1, 5, 8], - label: 'B', - area: true, - stack: 'total', - highlightScope: { - highlight: 'item', - }, - }, - { - id: 'series-3', - data: [4, 2, 5, 4, 1], - label: 'C', - area: true, - stack: 'total', - highlightScope: { - highlight: 'item', - }, - }, - ], - xAxis: [{ data: [0, 3, 6, 9, 12], scaleType: 'linear', id: 'axis1' }], - height: 400, -}; - -export default function LineClick() { - const [itemData, setItemData] = React.useState(); - const [axisData, setAxisData] = React.useState(); - - return ( - - - setItemData(d)} - onMarkClick={(event, d) => setItemData(d)} - onLineClick={(event, d) => setItemData(d)} - onAxisClick={(event, d) => setAxisData(d)} - /> - - - - - Click on the chart - { - setItemData(undefined); - setAxisData(null); - }} - > - - - - - - - ); -} diff --git a/docs/data/charts/lines/LineDataset.js b/docs/data/charts/lines/LineDataset.js deleted file mode 100644 index bb215c5a72ad2..0000000000000 --- a/docs/data/charts/lines/LineDataset.js +++ /dev/null @@ -1,34 +0,0 @@ -import { LineChart } from '@mui/x-charts/LineChart'; -import { - worldElectricityProduction, - keyToLabel, - colors, -} from '../dataset/worldElectricityProduction'; - -const stackStrategy = { - stack: 'total', - area: true, - stackOffset: 'none', // To stack 0 on top of others -}; - -const customize = { - height: 350, - hideLegend: true, -}; - -export default function LineDataset() { - return ( - value.toString() }]} - yAxis={[{ width: 50 }]} - series={Object.keys(keyToLabel).map((key) => ({ - dataKey: key, - label: keyToLabel[key], - color: colors[key], - ...stackStrategy, - }))} - dataset={worldElectricityProduction} - {...customize} - /> - ); -} diff --git a/docs/data/charts/lines/LineDataset.tsx.preview b/docs/data/charts/lines/LineDataset.tsx.preview deleted file mode 100644 index b75789e98d68e..0000000000000 --- a/docs/data/charts/lines/LineDataset.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - value.toString() }, - ]} - yAxis={[{ width: 50 }]} - series={Object.keys(keyToLabel).map((key) => ({ - dataKey: key, - label: keyToLabel[key], - color: colors[key], - ...stackStrategy, - }))} - dataset={worldElectricityProduction} - {...customize} -/> \ No newline at end of file diff --git a/docs/data/charts/lines/LineDefaultDomainLimit.js b/docs/data/charts/lines/LineDefaultDomainLimit.js deleted file mode 100644 index f3bbbd213ea26..0000000000000 --- a/docs/data/charts/lines/LineDefaultDomainLimit.js +++ /dev/null @@ -1,62 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import { LineChart } from '@mui/x-charts/LineChart'; -import { dataset } from '../dataset/gdpPerCapitaEvolution'; - -export default function LineDefaultDomainLimit() { - const [niceDomainLimit, setNiceDomainLimit] = React.useState(false); - - return ( - - setNiceDomainLimit(event.target.checked)} /> - } - label="Nice domain limit" - labelPlacement="end" - /> -
- date.getFullYear().toString(), - domainLimit: niceDomainLimit ? 'nice' : undefined, - }, - ]} - yAxis={[{ width: 70 }]} - series={[ - { - id: 'France', - label: 'French GDP per capita', - dataKey: 'fr', - stack: 'total', - area: true, - }, - { - id: 'Germany', - label: 'German GDP per capita', - dataKey: 'dl', - stack: 'total', - area: true, - }, - { - id: 'United Kingdom', - label: 'UK GDP per capita', - dataKey: 'gb', - stack: 'total', - area: true, - }, - ]} - height={300} - /> -
- - ); -} diff --git a/docs/data/charts/lines/LineMarkShape.js b/docs/data/charts/lines/LineMarkShape.js deleted file mode 100644 index c54d45fe2d088..0000000000000 --- a/docs/data/charts/lines/LineMarkShape.js +++ /dev/null @@ -1,78 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import { LineChart } from '@mui/x-charts/LineChart'; -import { dataset } from '../dataset/weather'; - -const marksMapping = { - true: true, - false: false, - start: 'start', - end: 'end', - '({index})=>index%2===0': ({ index }) => index % 2 === 0, -}; - -const marksOptions = ['true', 'false', 'start', 'end', '({index})=>index%2===0']; - -const shapes = ['circle', 'square', 'diamond', 'cross', 'star', 'triangle', 'wye']; - -export default function LineMarkShape() { - const [marks, setMarks] = React.useState('true'); - const [shape, setShape] = React.useState('circle'); - - return ( - - - setMarks(event.target.value)} - sx={{ minWidth: 150 }} - > - {marksOptions.map((option) => ( - - {option} - - ))} - - setShape(event.target.value)} - sx={{ minWidth: 150 }} - > - {shapes.map((option) => ( - - {option} - - ))} - - - - - - - ); -} diff --git a/docs/data/charts/lines/LineOverview.js b/docs/data/charts/lines/LineOverview.js deleted file mode 100644 index 73b7c5acdbe3e..0000000000000 --- a/docs/data/charts/lines/LineOverview.js +++ /dev/null @@ -1,188 +0,0 @@ -import * as React from 'react'; -import Typography from '@mui/material/Typography'; -import Box from '@mui/material/Box'; -import { alpha, useTheme } from '@mui/material/styles'; -import { ChartsDataProviderPro } from '@mui/x-charts-pro/ChartsDataProviderPro'; -import { ChartsSurface } from '@mui/x-charts-pro/ChartsSurface'; -import { LinePlot } from '@mui/x-charts-pro/LineChart'; -import { ChartsXAxis } from '@mui/x-charts-pro/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts-pro/ChartsYAxis'; -import { useDrawingArea, useXScale } from '@mui/x-charts-pro/hooks'; -import { ChartsTooltip } from '@mui/x-charts-pro/ChartsTooltip'; -import { ChartsGrid } from '@mui/x-charts-pro/ChartsGrid'; -import { ChartsZoomSlider } from '@mui/x-charts-pro/ChartsZoomSlider'; -import { ChartsClipPath } from '@mui/x-charts-pro/ChartsClipPath'; -import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; -import { ChartsLegend } from '@mui/x-charts-pro/ChartsLegend'; -import { usaUnemploymentAndGdp } from '../dataset/usaUnemploymentAndGdp'; - -const recessions = [ - { - start: new Date('2001-03-01'), - end: new Date('2001-11-01'), - label: 'Early 2000s', - }, - { - start: new Date('2007-12-01'), - end: new Date('2009-06-01'), - label: 'Great Recession', - }, - { start: new Date('2020-02-01'), end: new Date('2020-04-01'), label: 'COVID-19' }, -]; - -function RecessionBands({ periods }) { - const { top, left, width, height } = useDrawingArea(); - const xScale = useXScale(); - const theme = useTheme(); - const labelFill = alpha(theme.palette.text.primary, 0.7); - - return ( - - {periods.map((p, index) => { - const xStart = xScale(p.start.getTime()); - const xEnd = xScale(p.end.getTime()); - - if (xStart === undefined || xEnd === undefined) { - return null; - } - - // Stick to the left of the drawing area boundaries - let textX; - if (xStart >= left && xStart <= left + width) { - textX = xStart; - } else if (xEnd >= left && xEnd <= left + width) { - textX = left; - } else { - return null; - } - - return ( - - - - {p.label} - - - ); - })} - - ); -} - -export default function LineOverview() { - const clipPathId = React.useId(); - return ( - - - US unemployment rate comparison with GDP per capita - - (value == null ? '' : `${value.toFixed(1)}%`), - }, - { - type: 'line', - dataKey: 'gdpPerCapita', - label: 'GDP per capita', - color: '#4caf50', - yAxisId: 'gdp-axis', - connectNulls: true, - valueFormatter: (value) => - value == null ? '' : `${(value / 1000).toFixed(1)}k`, - }, - ]} - xAxis={[ - { - scaleType: 'time', - dataKey: 'date', - tickNumber: 4, - valueFormatter: (date, context) => { - if (context.location !== 'tick') { - return date.toLocaleDateString('en-US', { - year: 'numeric', - month: 'short', - }); - } - return date.getMonth() === 0 - ? date.toLocaleDateString('en-US', { - year: 'numeric', - }) - : date.toLocaleDateString('en-US', { - month: 'short', - }); - }, - zoom: { - slider: { enabled: true }, - }, - }, - ]} - yAxis={[ - { - id: 'unemployment-axis', - scaleType: 'linear', - valueFormatter: (value) => `${value}%`, - width: 55, - position: 'left', - }, - { - id: 'gdp-axis', - scaleType: 'linear', - width: 50, - position: 'right', - valueFormatter: (value) => `${(value / 1000).toLocaleString()}k`, - }, - ]} - > - - - - - - - - - - - - - - - - - - - - Source: FRED - - - ); -} diff --git a/docs/data/charts/lines/LinePointerInteraction.js b/docs/data/charts/lines/LinePointerInteraction.js deleted file mode 100644 index fff913279e9f0..0000000000000 --- a/docs/data/charts/lines/LinePointerInteraction.js +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { LineChart } from '@mui/x-charts/LineChart'; - -const data = { - xAxis: [{ data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }], - series: [ - { - data: [5, 8, 3, 7, 2, 9, 4, 6, 1, 5, 3], - label: 'Series C', - area: true, - highlightScope: { highlight: 'series', fade: 'global' }, - }, - { - data: [2, 5.5, 2, 8.5, 1.5, 5, 1, 4, 3, 8, 2], - label: 'Series A', - highlightScope: { highlight: 'series', fade: 'global' }, - }, - { - data: [8, 2, 5, 1, 7, 3, 9, 2, 6, 3, 7], - label: 'Series B', - highlightScope: { highlight: 'series', fade: 'global' }, - }, - ], -}; - -export default function LinePointerInteraction() { - return ( - - - - ); -} diff --git a/docs/data/charts/lines/LinePointerInteraction.tsx.preview b/docs/data/charts/lines/LinePointerInteraction.tsx.preview deleted file mode 100644 index c35bfceb5700b..0000000000000 --- a/docs/data/charts/lines/LinePointerInteraction.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/lines/MarkOptimization.js b/docs/data/charts/lines/MarkOptimization.js deleted file mode 100644 index 0872477824f49..0000000000000 --- a/docs/data/charts/lines/MarkOptimization.js +++ /dev/null @@ -1,16 +0,0 @@ -import { LineChart } from '@mui/x-charts/LineChart'; - -export default function MarkOptimization() { - return ( - index % 2 === 0, - }, - ]} - height={300} - /> - ); -} diff --git a/docs/data/charts/lines/MarkOptimization.tsx.preview b/docs/data/charts/lines/MarkOptimization.tsx.preview deleted file mode 100644 index 8708a7444419e..0000000000000 --- a/docs/data/charts/lines/MarkOptimization.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - index % 2 === 0, - }, - ]} - height={300} -/> \ No newline at end of file diff --git a/docs/data/charts/lines/MarkSize.js b/docs/data/charts/lines/MarkSize.js deleted file mode 100644 index 6f06015e2ebda..0000000000000 --- a/docs/data/charts/lines/MarkSize.js +++ /dev/null @@ -1,82 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import MenuItem from '@mui/material/MenuItem'; -import Slider from '@mui/material/Slider'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import Typography from '@mui/material/Typography'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { LineChart, lineClasses } from '@mui/x-charts/LineChart'; - -const shapes = ['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']; - -export default function MarkSize() { - const [shape, setShape] = React.useState('circle'); - const [radius, setRadius] = React.useState(6); - const [scale, setScale] = React.useState(1.2); - - const isCircle = shape === 'circle'; - const markStyle = isCircle ? { r: radius } : { scale: `${scale}` }; - - const code = ``; - - return ( - - - setShape(event.target.value)} - > - {shapes.map((option) => ( - - {option} - - ))} - - - - {isCircle ? 'radius' : 'scale'} - - {isCircle ? ( - setRadius(value)} - valueLabelDisplay="auto" - min={1} - max={12} - step={1} - /> - ) : ( - setScale(value)} - valueLabelDisplay="auto" - min={0.5} - max={3} - step={0.1} - /> - )} - - - - - - ); -} diff --git a/docs/data/charts/lines/StackedAreas.js b/docs/data/charts/lines/StackedAreas.js deleted file mode 100644 index d2b8faf683c3d..0000000000000 --- a/docs/data/charts/lines/StackedAreas.js +++ /dev/null @@ -1,45 +0,0 @@ -import { LineChart } from '@mui/x-charts/LineChart'; -import { dataset } from '../dataset/gdpPerCapitaEvolution'; - -export default function StackedAreas() { - return ( -
- date.getFullYear().toString(), - }, - ]} - yAxis={[{ width: 70 }]} - series={[ - { - id: 'France', - label: 'French GDP per capita', - dataKey: 'fr', - stack: 'total', - area: true, - }, - { - id: 'Germany', - label: 'German GDP per capita', - dataKey: 'dl', - stack: 'total', - area: true, - }, - { - id: 'United Kingdom', - label: 'UK GDP per capita', - dataKey: 'gb', - stack: 'total', - area: true, - }, - ]} - height={300} - /> -
- ); -} diff --git a/docs/data/charts/lines/StyledLineChart.js b/docs/data/charts/lines/StyledLineChart.js deleted file mode 100644 index 29f27fff5527c..0000000000000 --- a/docs/data/charts/lines/StyledLineChart.js +++ /dev/null @@ -1,62 +0,0 @@ -import Box from '@mui/material/Box'; -import { LineChart, lineClasses } from '@mui/x-charts/LineChart'; -import { labelMarkClasses } from '@mui/x-charts/ChartsLabel'; - -const margin = { right: 24 }; -const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; -const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300]; -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function StyledLineChart() { - return ( - - - - ); -} diff --git a/docs/data/charts/lines/AreaBaseline.tsx b/docs/data/charts/lines/demos/area-baseline/AreaBaseline.tsx similarity index 87% rename from docs/data/charts/lines/AreaBaseline.tsx rename to docs/data/charts/lines/demos/area-baseline/AreaBaseline.tsx index 7f8fe9c9a37f6..32f3dd53d21f5 100644 --- a/docs/data/charts/lines/AreaBaseline.tsx +++ b/docs/data/charts/lines/demos/area-baseline/AreaBaseline.tsx @@ -2,6 +2,7 @@ import { LineChart } from '@mui/x-charts/LineChart'; export default function AreaBaseline() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/lines/demos/area-baseline/client.ts b/docs/data/charts/lines/demos/area-baseline/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/area-baseline/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/area-baseline/index.ts b/docs/data/charts/lines/demos/area-baseline/index.ts new file mode 100644 index 0000000000000..2705f96a804ab --- /dev/null +++ b/docs/data/charts/lines/demos/area-baseline/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AreaBaseline from './AreaBaseline'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AreaBaseline, { ClientProvider }); diff --git a/docs/data/charts/lines/BasicArea.tsx b/docs/data/charts/lines/demos/basic-area/BasicArea.tsx similarity index 86% rename from docs/data/charts/lines/BasicArea.tsx rename to docs/data/charts/lines/demos/basic-area/BasicArea.tsx index 63d055602e72c..02cfe671a9a29 100644 --- a/docs/data/charts/lines/BasicArea.tsx +++ b/docs/data/charts/lines/demos/basic-area/BasicArea.tsx @@ -2,6 +2,7 @@ import { LineChart } from '@mui/x-charts/LineChart'; export default function BasicArea() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/lines/demos/basic-area/client.ts b/docs/data/charts/lines/demos/basic-area/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/basic-area/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/basic-area/index.ts b/docs/data/charts/lines/demos/basic-area/index.ts new file mode 100644 index 0000000000000..400083fea7077 --- /dev/null +++ b/docs/data/charts/lines/demos/basic-area/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicArea from './BasicArea'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicArea, { ClientProvider }); diff --git a/docs/data/charts/lines/BasicLineChart.tsx b/docs/data/charts/lines/demos/basic-line-chart/BasicLineChart.tsx similarity index 85% rename from docs/data/charts/lines/BasicLineChart.tsx rename to docs/data/charts/lines/demos/basic-line-chart/BasicLineChart.tsx index 2bf8fcaa45e1b..5b32ca14db60c 100644 --- a/docs/data/charts/lines/BasicLineChart.tsx +++ b/docs/data/charts/lines/demos/basic-line-chart/BasicLineChart.tsx @@ -2,6 +2,7 @@ import { LineChart } from '@mui/x-charts/LineChart'; export default function BasicLineChart() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/lines/demos/basic-line-chart/client.ts b/docs/data/charts/lines/demos/basic-line-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/basic-line-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/basic-line-chart/index.ts b/docs/data/charts/lines/demos/basic-line-chart/index.ts new file mode 100644 index 0000000000000..b41d6138145a9 --- /dev/null +++ b/docs/data/charts/lines/demos/basic-line-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicLineChart from './BasicLineChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicLineChart, { ClientProvider }); diff --git a/docs/data/charts/lines/demos/color-scale/ColorScale.tsx b/docs/data/charts/lines/demos/color-scale/ColorScale.tsx new file mode 100644 index 0000000000000..e427dafc4317a --- /dev/null +++ b/docs/data/charts/lines/demos/color-scale/ColorScale.tsx @@ -0,0 +1,177 @@ +import * as React from 'react'; +import { LineChart } from '@mui/x-charts/LineChart'; +import Stack from '@mui/material/Stack'; +import TextField from '@mui/material/TextField'; +import MenuItem from '@mui/material/MenuItem'; +import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Checkbox from '@mui/material/Checkbox'; + +export default function ColorScale() { + // @focus-start @padding 1 + const [colorX, setColorX] = React.useState< + 'None' | 'piecewise' | 'continuous' | 'ordinal' + >('None'); + const [colorY, setColorY] = React.useState<'None' | 'piecewise' | 'continuous'>( + 'piecewise', + ); + const [colorArea, setColorArea] = React.useState(true); + + return ( + + + + setColorX(event.target.value as 'None' | 'piecewise' | 'continuous') + } + > + None + piecewise + continuous + + + setColorY(event.target.value as 'None' | 'piecewise' | 'continuous') + } + > + None + piecewise + continuous + + setColorArea(event.target.checked)} /> + } + label="Show chart area" + labelPlacement="end" + /> + + value.getFullYear().toString(), + colorMap: + (colorX === 'continuous' && { + type: 'continuous', + min: new Date(2019, 1, 1), + max: new Date(2024, 1, 1), + color: ['green', 'orange'], + }) || + (colorX === 'piecewise' && { + type: 'piecewise', + thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)], + colors: ['blue', 'red', 'blue'], + }) || + undefined, + }, + ]} + /> + `, + ].join('\n')} + language="jsx" + copyButtonHidden + /> + + ); + // @focus-end +} diff --git a/docs/data/charts/lines/demos/color-scale/client.ts b/docs/data/charts/lines/demos/color-scale/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/color-scale/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/color-scale/index.ts b/docs/data/charts/lines/demos/color-scale/index.ts new file mode 100644 index 0000000000000..141c61df022b8 --- /dev/null +++ b/docs/data/charts/lines/demos/color-scale/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorScale from './ColorScale'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorScale, { ClientProvider }); diff --git a/docs/data/charts/lines/ConnectNulls.tsx b/docs/data/charts/lines/demos/connect-nulls/ConnectNulls.tsx similarity index 95% rename from docs/data/charts/lines/ConnectNulls.tsx rename to docs/data/charts/lines/demos/connect-nulls/ConnectNulls.tsx index 4f3c9ca597129..f61b3c0edb09b 100644 --- a/docs/data/charts/lines/ConnectNulls.tsx +++ b/docs/data/charts/lines/demos/connect-nulls/ConnectNulls.tsx @@ -5,6 +5,7 @@ import Checkbox from '@mui/material/Checkbox'; import { LineChart } from '@mui/x-charts/LineChart'; export default function ConnectNulls() { + // @focus-start @padding 1 const [connectNulls, setConnectNulls] = React.useState(true); return ( @@ -35,4 +36,5 @@ export default function ConnectNulls() { /> ); + // @focus-end } diff --git a/docs/data/charts/lines/demos/connect-nulls/client.ts b/docs/data/charts/lines/demos/connect-nulls/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/connect-nulls/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/connect-nulls/index.ts b/docs/data/charts/lines/demos/connect-nulls/index.ts new file mode 100644 index 0000000000000..e6e41591fdbae --- /dev/null +++ b/docs/data/charts/lines/demos/connect-nulls/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ConnectNulls from './ConnectNulls'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ConnectNulls, { ClientProvider }); diff --git a/docs/data/charts/lines/CSSCustomization.tsx b/docs/data/charts/lines/demos/css-customization/CSSCustomization.tsx similarity index 92% rename from docs/data/charts/lines/CSSCustomization.tsx rename to docs/data/charts/lines/demos/css-customization/CSSCustomization.tsx index ddd0e7a9a34a3..03e470763eda8 100644 --- a/docs/data/charts/lines/CSSCustomization.tsx +++ b/docs/data/charts/lines/demos/css-customization/CSSCustomization.tsx @@ -1,8 +1,9 @@ import { lineClasses, LineChart } from '@mui/x-charts/LineChart'; -import { dataset } from '../dataset/gdpPerCapitaEvolution'; +import { dataset } from '../../../dataset/gdpPerCapitaEvolution'; export default function CSSCustomization() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/lines/demos/css-customization/client.ts b/docs/data/charts/lines/demos/css-customization/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/css-customization/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/css-customization/index.ts b/docs/data/charts/lines/demos/css-customization/index.ts new file mode 100644 index 0000000000000..3af5e0bbaa7f7 --- /dev/null +++ b/docs/data/charts/lines/demos/css-customization/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CSSCustomization from './CSSCustomization'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CSSCustomization, { ClientProvider }); diff --git a/docs/data/charts/lines/DifferentLength.tsx b/docs/data/charts/lines/demos/different-length/DifferentLength.tsx similarity index 93% rename from docs/data/charts/lines/DifferentLength.tsx rename to docs/data/charts/lines/demos/different-length/DifferentLength.tsx index c35c13a3a8591..b3ca7834f3091 100644 --- a/docs/data/charts/lines/DifferentLength.tsx +++ b/docs/data/charts/lines/demos/different-length/DifferentLength.tsx @@ -2,6 +2,7 @@ import { LineChart } from '@mui/x-charts/LineChart'; export default function DifferentLength() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/lines/demos/different-length/client.ts b/docs/data/charts/lines/demos/different-length/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/different-length/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/different-length/index.ts b/docs/data/charts/lines/demos/different-length/index.ts new file mode 100644 index 0000000000000..056577aab22a0 --- /dev/null +++ b/docs/data/charts/lines/demos/different-length/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DifferentLength from './DifferentLength'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DifferentLength, { ClientProvider }); diff --git a/docs/data/charts/lines/ExpandingStep.tsx b/docs/data/charts/lines/demos/expanding-step/ExpandingStep.tsx similarity index 98% rename from docs/data/charts/lines/ExpandingStep.tsx rename to docs/data/charts/lines/demos/expanding-step/ExpandingStep.tsx index aeed5ac654e39..6f4e30389cb01 100644 --- a/docs/data/charts/lines/ExpandingStep.tsx +++ b/docs/data/charts/lines/demos/expanding-step/ExpandingStep.tsx @@ -16,6 +16,7 @@ const stepCurves = ['step', 'stepBefore', 'stepAfter']; type StepCurve = 'step' | 'stepBefore' | 'stepAfter'; export default function ExpandingStep() { + // @focus-start @padding 1 const [strictStepCurve, setStrictStepCurve] = React.useState(false); const [connectNulls, setConnectNulls] = React.useState(false); const [curve, setCurve] = React.useState('step'); @@ -98,4 +99,5 @@ export default function ExpandingStep() { ); + // @focus-end } diff --git a/docs/data/charts/lines/demos/expanding-step/client.ts b/docs/data/charts/lines/demos/expanding-step/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/expanding-step/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/expanding-step/index.ts b/docs/data/charts/lines/demos/expanding-step/index.ts new file mode 100644 index 0000000000000..4baaadbac8a2f --- /dev/null +++ b/docs/data/charts/lines/demos/expanding-step/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ExpandingStep from './ExpandingStep'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ExpandingStep, { ClientProvider }); diff --git a/docs/data/charts/lines/demos/grid-demo/GridDemo.tsx b/docs/data/charts/lines/demos/grid-demo/GridDemo.tsx new file mode 100644 index 0000000000000..605fa885123b7 --- /dev/null +++ b/docs/data/charts/lines/demos/grid-demo/GridDemo.tsx @@ -0,0 +1,40 @@ +import { LineChart } from '@mui/x-charts/LineChart'; +import type { XAxis } from '@mui/x-charts/models'; +import { + dateAxisFormatter, + percentageFormatter, + usUnemploymentRate, +} from '../../../dataset/usUnemploymentRate'; + +const xAxis: XAxis<'time'>[] = [ + { + dataKey: 'date', + scaleType: 'time', + valueFormatter: dateAxisFormatter, + }, +]; +const yAxis = [ + { + valueFormatter: percentageFormatter, + }, +]; +const series = [ + { + dataKey: 'rate', + valueFormatter: percentageFormatter, + }, +]; +export default function GridDemo() { + return ( + // @focus-start @padding 2 + + // @focus-end + ); +} diff --git a/docs/data/charts/lines/demos/grid-demo/client.ts b/docs/data/charts/lines/demos/grid-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/grid-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/grid-demo/index.ts b/docs/data/charts/lines/demos/grid-demo/index.ts new file mode 100644 index 0000000000000..7686107ff7e74 --- /dev/null +++ b/docs/data/charts/lines/demos/grid-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GridDemo from './GridDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GridDemo, { ClientProvider }); diff --git a/docs/data/charts/lines/InterpolationDemo.tsx b/docs/data/charts/lines/demos/interpolation-demo/InterpolationDemo.tsx similarity index 94% rename from docs/data/charts/lines/InterpolationDemo.tsx rename to docs/data/charts/lines/demos/interpolation-demo/InterpolationDemo.tsx index 9d2a7dea24a77..0906aa6cf277d 100644 --- a/docs/data/charts/lines/InterpolationDemo.tsx +++ b/docs/data/charts/lines/demos/interpolation-demo/InterpolationDemo.tsx @@ -5,7 +5,7 @@ import MenuItem from '@mui/material/MenuItem'; import { LineChart } from '@mui/x-charts/LineChart'; import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { CurveType } from '@mui/x-charts/models'; +import type { CurveType } from '@mui/x-charts/models'; const curveTypes: CurveType[] = [ 'linear', @@ -31,6 +31,7 @@ function getExample(curveType: CurveType) { } export default function InterpolationDemo() { + // @focus-start @padding 1 const [curveType, setCurveType] = React.useState(curveTypes[0]); return ( @@ -60,4 +61,5 @@ export default function InterpolationDemo() { ); + // @focus-end } diff --git a/docs/data/charts/lines/demos/interpolation-demo/client.ts b/docs/data/charts/lines/demos/interpolation-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/interpolation-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/interpolation-demo/index.ts b/docs/data/charts/lines/demos/interpolation-demo/index.ts new file mode 100644 index 0000000000000..948af73edf5ae --- /dev/null +++ b/docs/data/charts/lines/demos/interpolation-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import InterpolationDemo from './InterpolationDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, InterpolationDemo, { ClientProvider }); diff --git a/docs/data/charts/lines/LineAnimation.tsx b/docs/data/charts/lines/demos/line-animation/LineAnimation.tsx similarity index 98% rename from docs/data/charts/lines/LineAnimation.tsx rename to docs/data/charts/lines/demos/line-animation/LineAnimation.tsx index e46a1b6f612af..dff1ddff8bdac 100644 --- a/docs/data/charts/lines/LineAnimation.tsx +++ b/docs/data/charts/lines/demos/line-animation/LineAnimation.tsx @@ -22,6 +22,7 @@ const defaultSeries = [ })); export default function LineAnimation() { + // @focus-start @padding 1 const [series, setSeries] = React.useState(defaultSeries); const [nbSeries, setNbSeries] = React.useState(3); const [skipAnimation, setSkipAnimation] = React.useState(false); @@ -85,4 +86,5 @@ export default function LineAnimation() { ); + // @focus-end } diff --git a/docs/data/charts/lines/demos/line-animation/client.ts b/docs/data/charts/lines/demos/line-animation/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/line-animation/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/line-animation/index.ts b/docs/data/charts/lines/demos/line-animation/index.ts new file mode 100644 index 0000000000000..f9c6bdf6e5181 --- /dev/null +++ b/docs/data/charts/lines/demos/line-animation/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LineAnimation from './LineAnimation'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LineAnimation, { ClientProvider }); diff --git a/docs/data/charts/lines/LineClick.tsx b/docs/data/charts/lines/demos/line-click/LineClick.tsx similarity index 95% rename from docs/data/charts/lines/LineClick.tsx rename to docs/data/charts/lines/demos/line-click/LineClick.tsx index 8eb4f74553ce1..ae83ec2642f71 100644 --- a/docs/data/charts/lines/LineClick.tsx +++ b/docs/data/charts/lines/demos/line-click/LineClick.tsx @@ -8,7 +8,7 @@ import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; import { LineChart } from '@mui/x-charts/LineChart'; import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { ChartsAxisData, LineItemIdentifier } from '@mui/x-charts/models'; +import type { ChartsAxisData, LineItemIdentifier } from '@mui/x-charts/models'; const lineChartsParams = { series: [ @@ -48,6 +48,7 @@ const lineChartsParams = { } as const; export default function LineClick() { + // @focus-start @padding 1 const [itemData, setItemData] = React.useState(); const [axisData, setAxisData] = React.useState(); @@ -100,4 +101,5 @@ ${axisData ? JSON.stringify(axisData, null, 2) : '// The data will appear here'} ); + // @focus-end } diff --git a/docs/data/charts/lines/demos/line-click/client.ts b/docs/data/charts/lines/demos/line-click/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/line-click/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/line-click/index.ts b/docs/data/charts/lines/demos/line-click/index.ts new file mode 100644 index 0000000000000..19e5229508a1c --- /dev/null +++ b/docs/data/charts/lines/demos/line-click/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LineClick from './LineClick'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LineClick, { ClientProvider }); diff --git a/docs/data/charts/lines/LineDataset.tsx b/docs/data/charts/lines/demos/line-dataset/LineDataset.tsx similarity index 87% rename from docs/data/charts/lines/LineDataset.tsx rename to docs/data/charts/lines/demos/line-dataset/LineDataset.tsx index c431d127e8578..2dd10a8f8a654 100644 --- a/docs/data/charts/lines/LineDataset.tsx +++ b/docs/data/charts/lines/demos/line-dataset/LineDataset.tsx @@ -3,7 +3,7 @@ import { worldElectricityProduction, keyToLabel, colors, -} from '../dataset/worldElectricityProduction'; +} from '../../../dataset/worldElectricityProduction'; const stackStrategy = { stack: 'total', @@ -18,6 +18,7 @@ const customize = { export default function LineDataset() { return ( + // @focus-start @padding 2 value.toString() }, @@ -32,5 +33,6 @@ export default function LineDataset() { dataset={worldElectricityProduction} {...customize} /> + // @focus-end ); } diff --git a/docs/data/charts/lines/demos/line-dataset/client.ts b/docs/data/charts/lines/demos/line-dataset/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/line-dataset/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/line-dataset/index.ts b/docs/data/charts/lines/demos/line-dataset/index.ts new file mode 100644 index 0000000000000..000b72fa17803 --- /dev/null +++ b/docs/data/charts/lines/demos/line-dataset/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LineDataset from './LineDataset'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LineDataset, { ClientProvider }); diff --git a/docs/data/charts/lines/LineDefaultDomainLimit.tsx b/docs/data/charts/lines/demos/line-default-domain-limit/LineDefaultDomainLimit.tsx similarity index 94% rename from docs/data/charts/lines/LineDefaultDomainLimit.tsx rename to docs/data/charts/lines/demos/line-default-domain-limit/LineDefaultDomainLimit.tsx index f3bbbd213ea26..bda48b6f557a9 100644 --- a/docs/data/charts/lines/LineDefaultDomainLimit.tsx +++ b/docs/data/charts/lines/demos/line-default-domain-limit/LineDefaultDomainLimit.tsx @@ -3,9 +3,10 @@ import Stack from '@mui/material/Stack'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; import { LineChart } from '@mui/x-charts/LineChart'; -import { dataset } from '../dataset/gdpPerCapitaEvolution'; +import { dataset } from '../../../dataset/gdpPerCapitaEvolution'; export default function LineDefaultDomainLimit() { + // @focus-start @padding 1 const [niceDomainLimit, setNiceDomainLimit] = React.useState(false); return ( @@ -59,4 +60,5 @@ export default function LineDefaultDomainLimit() { ); + // @focus-end } diff --git a/docs/data/charts/lines/demos/line-default-domain-limit/client.ts b/docs/data/charts/lines/demos/line-default-domain-limit/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/line-default-domain-limit/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/line-default-domain-limit/index.ts b/docs/data/charts/lines/demos/line-default-domain-limit/index.ts new file mode 100644 index 0000000000000..64f6e1936bbc7 --- /dev/null +++ b/docs/data/charts/lines/demos/line-default-domain-limit/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LineDefaultDomainLimit from './LineDefaultDomainLimit'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LineDefaultDomainLimit, { ClientProvider }); diff --git a/docs/data/charts/lines/LineMarkShape.tsx b/docs/data/charts/lines/demos/line-mark-shape/LineMarkShape.tsx similarity index 96% rename from docs/data/charts/lines/LineMarkShape.tsx rename to docs/data/charts/lines/demos/line-mark-shape/LineMarkShape.tsx index a23b69e4334ff..bb87539430beb 100644 --- a/docs/data/charts/lines/LineMarkShape.tsx +++ b/docs/data/charts/lines/demos/line-mark-shape/LineMarkShape.tsx @@ -4,7 +4,7 @@ import Box from '@mui/material/Box'; import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; import { LineChart } from '@mui/x-charts/LineChart'; -import { dataset } from '../dataset/weather'; +import { dataset } from '../../../dataset/weather'; type Shape = 'circle' | 'square' | 'diamond' | 'cross' | 'star' | 'triangle' | 'wye'; @@ -35,6 +35,7 @@ const shapes: Shape[] = [ ]; export default function LineMarkShape() { + // @focus-start @padding 1 const [marks, setMarks] = React.useState('true'); const [shape, setShape] = React.useState('circle'); @@ -93,4 +94,5 @@ export default function LineMarkShape() { ); + // @focus-end } diff --git a/docs/data/charts/lines/demos/line-mark-shape/client.ts b/docs/data/charts/lines/demos/line-mark-shape/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/line-mark-shape/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/line-mark-shape/index.ts b/docs/data/charts/lines/demos/line-mark-shape/index.ts new file mode 100644 index 0000000000000..f83d4b154d444 --- /dev/null +++ b/docs/data/charts/lines/demos/line-mark-shape/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LineMarkShape from './LineMarkShape'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LineMarkShape, { ClientProvider }); diff --git a/docs/data/charts/lines/LineOverview.tsx b/docs/data/charts/lines/demos/line-overview/LineOverview.tsx similarity index 97% rename from docs/data/charts/lines/LineOverview.tsx rename to docs/data/charts/lines/demos/line-overview/LineOverview.tsx index 5319e47282851..a3f58b461eb3c 100644 --- a/docs/data/charts/lines/LineOverview.tsx +++ b/docs/data/charts/lines/demos/line-overview/LineOverview.tsx @@ -14,7 +14,7 @@ import { ChartsZoomSlider } from '@mui/x-charts-pro/ChartsZoomSlider'; import { ChartsClipPath } from '@mui/x-charts-pro/ChartsClipPath'; import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; import { ChartsLegend } from '@mui/x-charts-pro/ChartsLegend'; -import { usaUnemploymentAndGdp } from '../dataset/usaUnemploymentAndGdp'; +import { usaUnemploymentAndGdp } from '../../../dataset/usaUnemploymentAndGdp'; type RecessionPeriod = { start: Date; @@ -92,6 +92,7 @@ function RecessionBands({ periods }: { periods: RecessionPeriod[] }) { } export default function LineOverview() { + // @focus-start @padding 1 const clipPathId = React.useId(); return ( @@ -191,4 +192,5 @@ export default function LineOverview() { ); + // @focus-end } diff --git a/docs/data/charts/lines/demos/line-overview/client.ts b/docs/data/charts/lines/demos/line-overview/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/line-overview/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/line-overview/index.ts b/docs/data/charts/lines/demos/line-overview/index.ts new file mode 100644 index 0000000000000..1f864afe654b6 --- /dev/null +++ b/docs/data/charts/lines/demos/line-overview/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LineOverview from './LineOverview'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LineOverview, { ClientProvider }); diff --git a/docs/data/charts/lines/LinePointerInteraction.tsx b/docs/data/charts/lines/demos/line-pointer-interaction/LinePointerInteraction.tsx similarity index 94% rename from docs/data/charts/lines/LinePointerInteraction.tsx rename to docs/data/charts/lines/demos/line-pointer-interaction/LinePointerInteraction.tsx index 7e7c55d0f4530..ba9a3d41dd653 100644 --- a/docs/data/charts/lines/LinePointerInteraction.tsx +++ b/docs/data/charts/lines/demos/line-pointer-interaction/LinePointerInteraction.tsx @@ -27,10 +27,12 @@ const data = { export default function LinePointerInteraction() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/lines/demos/line-pointer-interaction/client.ts b/docs/data/charts/lines/demos/line-pointer-interaction/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/line-pointer-interaction/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/line-pointer-interaction/index.ts b/docs/data/charts/lines/demos/line-pointer-interaction/index.ts new file mode 100644 index 0000000000000..400a99c7384b3 --- /dev/null +++ b/docs/data/charts/lines/demos/line-pointer-interaction/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LinePointerInteraction from './LinePointerInteraction'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LinePointerInteraction, { ClientProvider }); diff --git a/docs/data/charts/lines/MarkOptimization.tsx b/docs/data/charts/lines/demos/mark-optimization/MarkOptimization.tsx similarity index 88% rename from docs/data/charts/lines/MarkOptimization.tsx rename to docs/data/charts/lines/demos/mark-optimization/MarkOptimization.tsx index 0872477824f49..dcb1983cf25d1 100644 --- a/docs/data/charts/lines/MarkOptimization.tsx +++ b/docs/data/charts/lines/demos/mark-optimization/MarkOptimization.tsx @@ -2,6 +2,7 @@ import { LineChart } from '@mui/x-charts/LineChart'; export default function MarkOptimization() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/lines/demos/mark-optimization/client.ts b/docs/data/charts/lines/demos/mark-optimization/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/mark-optimization/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/mark-optimization/index.ts b/docs/data/charts/lines/demos/mark-optimization/index.ts new file mode 100644 index 0000000000000..eeeebfcd12eb5 --- /dev/null +++ b/docs/data/charts/lines/demos/mark-optimization/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MarkOptimization from './MarkOptimization'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MarkOptimization, { ClientProvider }); diff --git a/docs/data/charts/lines/MarkSize.tsx b/docs/data/charts/lines/demos/mark-size/MarkSize.tsx similarity index 98% rename from docs/data/charts/lines/MarkSize.tsx rename to docs/data/charts/lines/demos/mark-size/MarkSize.tsx index 789c0d53653d6..09c5288589f46 100644 --- a/docs/data/charts/lines/MarkSize.tsx +++ b/docs/data/charts/lines/demos/mark-size/MarkSize.tsx @@ -21,6 +21,7 @@ const shapes: Shape[] = [ ]; export default function MarkSize() { + // @focus-start @padding 1 const [shape, setShape] = React.useState('circle'); const [radius, setRadius] = React.useState(6); const [scale, setScale] = React.useState(1.2); @@ -89,4 +90,5 @@ export default function MarkSize() { ); + // @focus-end } diff --git a/docs/data/charts/lines/demos/mark-size/client.ts b/docs/data/charts/lines/demos/mark-size/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/mark-size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/mark-size/index.ts b/docs/data/charts/lines/demos/mark-size/index.ts new file mode 100644 index 0000000000000..ffbb4076abc9b --- /dev/null +++ b/docs/data/charts/lines/demos/mark-size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MarkSize from './MarkSize'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MarkSize, { ClientProvider }); diff --git a/docs/data/charts/lines/StackedAreas.tsx b/docs/data/charts/lines/demos/stacked-areas/StackedAreas.tsx similarity index 89% rename from docs/data/charts/lines/StackedAreas.tsx rename to docs/data/charts/lines/demos/stacked-areas/StackedAreas.tsx index d2b8faf683c3d..28cb8fa778f36 100644 --- a/docs/data/charts/lines/StackedAreas.tsx +++ b/docs/data/charts/lines/demos/stacked-areas/StackedAreas.tsx @@ -1,9 +1,10 @@ import { LineChart } from '@mui/x-charts/LineChart'; -import { dataset } from '../dataset/gdpPerCapitaEvolution'; +import { dataset } from '../../../dataset/gdpPerCapitaEvolution'; export default function StackedAreas() { return (
+ {/* @focus-start */} + {/* @focus-end */}
); } diff --git a/docs/data/charts/lines/demos/stacked-areas/client.ts b/docs/data/charts/lines/demos/stacked-areas/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/stacked-areas/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/stacked-areas/index.ts b/docs/data/charts/lines/demos/stacked-areas/index.ts new file mode 100644 index 0000000000000..f2a5371f3a7bc --- /dev/null +++ b/docs/data/charts/lines/demos/stacked-areas/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StackedAreas from './StackedAreas'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StackedAreas, { ClientProvider }); diff --git a/docs/data/charts/lines/StyledLineChart.tsx b/docs/data/charts/lines/demos/styled-line-chart/StyledLineChart.tsx similarity index 97% rename from docs/data/charts/lines/StyledLineChart.tsx rename to docs/data/charts/lines/demos/styled-line-chart/StyledLineChart.tsx index 29f27fff5527c..44ce7ba7f11f0 100644 --- a/docs/data/charts/lines/StyledLineChart.tsx +++ b/docs/data/charts/lines/demos/styled-line-chart/StyledLineChart.tsx @@ -18,6 +18,7 @@ const xLabels = [ export default function StyledLineChart() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/lines/demos/styled-line-chart/client.ts b/docs/data/charts/lines/demos/styled-line-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/lines/demos/styled-line-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/lines/demos/styled-line-chart/index.ts b/docs/data/charts/lines/demos/styled-line-chart/index.ts new file mode 100644 index 0000000000000..226286c38e07d --- /dev/null +++ b/docs/data/charts/lines/demos/styled-line-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StyledLineChart from './StyledLineChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StyledLineChart, { ClientProvider }); diff --git a/docs/data/charts/lines/lines.md b/docs/data/charts/lines/lines.md index 2cd8e1e86b2a5..659886d03db4e 100644 --- a/docs/data/charts/lines/lines.md +++ b/docs/data/charts/lines/lines.md @@ -14,7 +14,7 @@ Line charts work well when you want to show how values change over a continuous They emphasize trends, patterns, and fluctuations, so they are useful for exploring relationships, spotting cycles, or tracking performance over time. Each line usually represents one series, so you can compare multiple variables or groups at a glance. -{{"demo": "LineOverview.js"}} +{{"component": "file://./demos/line-overview/index.ts"}} ## Basics @@ -29,7 +29,7 @@ The axis can use any `scaleType`, and its `data` should have the same length as When you omit the `xAxis` prop entirely, `LineChart` supplies a default x-axis with `scaleType='point'`. Its `data` is `[0, 1, 2, …]` with length matching the longest series, so each y-value pairs with its index in the series `data` array. -{{"demo": "BasicLineChart.js"}} +{{"component": "file://./demos/basic-line-chart/index.ts"}} ### Using a dataset @@ -41,13 +41,13 @@ For example, `xAxis={[{ dataKey: 'x' }]}` or `series={[{ dataKey: 'y' }]}`. The demo below plots the evolution of world electricity production by source. -{{"demo": "LineDataset.js"}} +{{"component": "file://./demos/line-dataset/index.ts"}} ### Area Set the series `area` property to `true` to fill the area under the line. -{{"demo": "BasicArea.js"}} +{{"component": "file://./demos/basic-area/index.ts"}} ### Marks @@ -63,7 +63,7 @@ The `'start' | 'end'` options render the highlight marks instead of the regular As a result, while the pointer highlights a value, the start/end mark is replaced by the highlighted one. ::: -{{"demo": "LineMarkShape.js", "bg": "outline"}} +{{"component": "file://./demos/line-mark-shape/index.ts", "bg": "outline"}} ### Log scale @@ -81,7 +81,7 @@ By default, they are stacked in the order you defined them, with positive values See [Stacking](/x/react-charts/stacking/) for more details. -{{"demo": "StackedAreas.js"}} +{{"component": "file://./demos/stacked-areas/index.ts"}} ### Axis domain @@ -89,7 +89,7 @@ By default, the x-axis domain limit for line charts is set to `'strict'`, meanin For other chart types, axes round their limits to match human-readable values (for example, data ranging from 2 to 195 displays values from 0 to 200). This behavior can be modified by the [axis property `domainLimit`](/x/react-charts/axis/#relative-axis-subdomain). -{{"demo": "LineDefaultDomainLimit.js"}} +{{"component": "file://./demos/line-default-domain-limit/index.ts"}} ## Partial data @@ -101,7 +101,7 @@ Use `null` values when you have partial data or series that start at different p By default, the tooltip omits series that have no value at the hovered position. To show a tooltip for missing values, use `valueFormatter` to return a string when the value is `null` or `undefined`. -{{"demo": "DifferentLength.js"}} +{{"component": "file://./demos/different-length/index.ts"}} :::info When the series `data` array is shorter than the axis `data`, values outside the series length are `undefined`, not `null`. @@ -126,7 +126,7 @@ Set the `connectNulls` property on a line series to continue the curve across po This links two segments with a gap of `null` values in between. The curve is not extrapolated before the first non-null point or after the last one. -{{"demo": "ConnectNulls.js"}} +{{"component": "file://./demos/connect-nulls/index.ts"}} ## Click event @@ -146,7 +146,7 @@ const clickHandler = ( ) => {}; ``` -{{"demo": "LineClick.js"}} +{{"component": "file://./demos/line-click/index.ts"}} :::info The `event` differs slightly between `onAxisClick` and the others: @@ -185,7 +185,7 @@ For line series (without area), it finds the series whose curve is closest to th This uses the same curve interpolation as the rendered line (for example, `monotoneX`, `catmullRom`), so the hit detection matches the visual shape. -{{"demo": "LinePointerInteraction.js"}} +{{"component": "file://./demos/line-pointer-interaction/index.ts"}} ### Highlight @@ -202,7 +202,7 @@ You can add a grid in the background of the chart with the `grid` prop. See [Axis—Grid](/x/react-charts/axis-ticks/#grid) for details. -{{"demo": "GridDemo.js"}} +{{"component": "file://./demos/grid-demo/index.ts"}} ### Color scale @@ -217,7 +217,7 @@ Line charts use the following, in order of priority: See [Styling—Value-based colors](/x/react-charts/styling/#value-based-colors) for the `colorMap` properties. -{{"demo": "ColorScale.js"}} +{{"component": "file://./demos/color-scale/index.ts"}} :::warning Ordinal color config is not yet supported for line charts. @@ -232,7 +232,7 @@ Use the select in the demo below to compare how each value renders on the same d You can set `curve` per series, so different series can use different interpolations. -{{"demo": "InterpolationDemo.js", "hideToolbar": true}} +{{"component": "file://./demos/interpolation-demo/index.ts", "hideToolbar": true}} #### Expanding steps @@ -240,7 +240,7 @@ For step interpolations (when `curve` is set to `'step'`, `'stepBefore'`, or `'s Use the `strictStepCurve` series property to turn off this behavior. -{{"demo": "ExpandingStep.js"}} +{{"component": "file://./demos/expanding-step/index.ts"}} ### Baseline @@ -254,7 +254,7 @@ You can also set `baseline` to a number to fix the baseline at a specific value. Do not use `baseline` with stacked areas; the result will not match expectations. ::: -{{"demo": "AreaBaseline.js"}} +{{"component": "file://./demos/area-baseline/index.ts"}} ### Optimization @@ -267,7 +267,7 @@ Or you can display a subset of the marks by providing a callback to `showMarks`. This demo shows one mark for values with even index. The highlighted point always shows a mark, whether its index is even or odd. -{{"demo": "MarkOptimization.js"}} +{{"component": "file://./demos/mark-optimization/index.ts"}} For large datasets, set the `sampling` prop on `LineChartPro` to reduce the line when zoomed out, with a choice of algorithms (`'m4'`, `'minmax'`, `'lttb'`). See [Charts—Performance](/x/react-charts/performance/#sampling) @@ -302,11 +302,11 @@ The gradient is defined as a child of the chart (`myGradient` referenced in `fil /> ``` -{{"demo": "CSSCustomization.js"}} +{{"component": "file://./demos/css-customization/index.ts"}} The next example shows how to apply a dashed stroke to the chart line, legend mark, and tooltip mark for each series using the `[data-series]` attribute selector. -{{"demo": "StyledLineChart.js"}} +{{"component": "file://./demos/styled-line-chart/index.ts"}} #### Mark size @@ -316,7 +316,7 @@ The default `'circle'` shape renders an SVG `circle` element, so use the `r` (ra The other shapes render an SVG `path` element that `r` does not affect. For those, use the `scale` property, which resizes the mark around its own center. -{{"demo": "MarkSize.js"}} +{{"component": "file://./demos/mark-size/index.ts"}} ## Animation @@ -340,7 +340,7 @@ Otherwise the chart cannot tell whether you are updating, removing, or adding a ``` -{{"demo": "LineAnimation.js"}} +{{"component": "file://./demos/line-animation/index.ts"}} ## Composition diff --git a/docs/data/charts/localization/ChartsLocalizationTableNoSnap.js b/docs/data/charts/localization/ChartsLocalizationTableNoSnap.js deleted file mode 100644 index 608b8f5991e60..0000000000000 --- a/docs/data/charts/localization/ChartsLocalizationTableNoSnap.js +++ /dev/null @@ -1,6 +0,0 @@ -import LocalizationTable from 'docs/src/modules/components/LocalizationTable'; -import data from './data.json'; - -export default function ChartsLocalizationTableNoSnap() { - return ; -} diff --git a/docs/data/charts/localization/CustomLocaleOverlay.js b/docs/data/charts/localization/CustomLocaleOverlay.js deleted file mode 100644 index 2f2547662304a..0000000000000 --- a/docs/data/charts/localization/CustomLocaleOverlay.js +++ /dev/null @@ -1,14 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; - -export default function CustomLocaleOverlay() { - return ( - - ); -} diff --git a/docs/data/charts/localization/CustomLocaleOverlay.tsx.preview b/docs/data/charts/localization/CustomLocaleOverlay.tsx.preview deleted file mode 100644 index 3a51abe332fdf..0000000000000 --- a/docs/data/charts/localization/CustomLocaleOverlay.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/localization/demos/charts-localization-table-no-snap/ChartsLocalizationTableNoSnap.tsx b/docs/data/charts/localization/demos/charts-localization-table-no-snap/ChartsLocalizationTableNoSnap.tsx new file mode 100644 index 0000000000000..0e826e9463990 --- /dev/null +++ b/docs/data/charts/localization/demos/charts-localization-table-no-snap/ChartsLocalizationTableNoSnap.tsx @@ -0,0 +1,9 @@ +import LocalizationTable from 'docs/src/modules/components/LocalizationTable'; +import data from '../../data.json'; + +export default function ChartsLocalizationTableNoSnap() { + return ( + // @focus @padding 2 + + ); +} diff --git a/docs/data/charts/localization/demos/charts-localization-table-no-snap/client.ts b/docs/data/charts/localization/demos/charts-localization-table-no-snap/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/localization/demos/charts-localization-table-no-snap/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/localization/demos/charts-localization-table-no-snap/index.ts b/docs/data/charts/localization/demos/charts-localization-table-no-snap/index.ts new file mode 100644 index 0000000000000..4a0e1c272daf3 --- /dev/null +++ b/docs/data/charts/localization/demos/charts-localization-table-no-snap/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChartsLocalizationTableNoSnap from './ChartsLocalizationTableNoSnap'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChartsLocalizationTableNoSnap, { ClientProvider }); diff --git a/docs/data/charts/localization/CustomLocaleOverlay.tsx b/docs/data/charts/localization/demos/custom-locale-overlay/CustomLocaleOverlay.tsx similarity index 86% rename from docs/data/charts/localization/CustomLocaleOverlay.tsx rename to docs/data/charts/localization/demos/custom-locale-overlay/CustomLocaleOverlay.tsx index 2f2547662304a..e37a7c28b426f 100644 --- a/docs/data/charts/localization/CustomLocaleOverlay.tsx +++ b/docs/data/charts/localization/demos/custom-locale-overlay/CustomLocaleOverlay.tsx @@ -2,6 +2,7 @@ import { BarChart } from '@mui/x-charts/BarChart'; export default function CustomLocaleOverlay() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/localization/demos/custom-locale-overlay/client.ts b/docs/data/charts/localization/demos/custom-locale-overlay/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/localization/demos/custom-locale-overlay/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/localization/demos/custom-locale-overlay/index.ts b/docs/data/charts/localization/demos/custom-locale-overlay/index.ts new file mode 100644 index 0000000000000..600e15d8c42da --- /dev/null +++ b/docs/data/charts/localization/demos/custom-locale-overlay/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomLocaleOverlay from './CustomLocaleOverlay'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomLocaleOverlay, { ClientProvider }); diff --git a/docs/data/charts/localization/localization.md b/docs/data/charts/localization/localization.md index 7fe88ca5c904d..70506fb320357 100644 --- a/docs/data/charts/localization/localization.md +++ b/docs/data/charts/localization/localization.md @@ -20,7 +20,7 @@ You can find [all supported translation keys](https://github.com/mui/mui-x/blob/ The example below customizes the labels of the loading overlay. -{{"demo": "CustomLocaleOverlay.js", "bg": "inline"}} +{{"component": "file://./demos/custom-locale-overlay/index.ts", "bg": "inline"}} ### Built-in locales @@ -135,4 +135,4 @@ See [Right-to-left support](/material-ui/customization/right-to-left/) in the Ma ## Translation status -{{"demo": "ChartsLocalizationTableNoSnap.js", "hideToolbar": true, "bg": "inline"}} +{{"component": "file://./demos/charts-localization-table-no-snap/index.ts", "hideToolbar": true, "bg": "inline"}} diff --git a/docs/data/charts/map/BasicGeoDataPlot.js b/docs/data/charts/map/BasicGeoDataPlot.js deleted file mode 100644 index fd26ccbbe9825..0000000000000 --- a/docs/data/charts/map/BasicGeoDataPlot.js +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { feature as topojsonFeature } from 'topojson-client'; -import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; -import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map'; -import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; - -import { ChartsLegend } from '@mui/x-charts-premium/ChartsLegend'; -import { countryData, EU_COUNTRIES } from '../dataset/countryData'; - -const countries = topojsonFeature(countriesTopology, 'countries'); - -export default function BasicGeoDataPlot() { - return ( - - ({ - name: feature.properties?.name, - color: `hsl(${(index / countries.features.length) * 360}, 50%, 70%)`, - })), - valueFormatter: (point) => - point.value != null ? `${point.value} units` : 'No data', - }, - { - type: 'mapShape', - label: 'European Union', - id: 'EU', - color: 'blue', - highlightScope: { highlight: 'item', fade: 'series' }, - data: EU_COUNTRIES.map((code) => ({ - name: countryData[code].worldAtlasName, - label: countryData[code].country, - })), - valueFormatter: (point) => - point.value != null ? `${point.value} units` : 'No data', - }, - ]} - > - - - - - - - - - ); -} diff --git a/docs/data/charts/map/ColorScaleMapShape.js b/docs/data/charts/map/ColorScaleMapShape.js deleted file mode 100644 index 15c0c646af042..0000000000000 --- a/docs/data/charts/map/ColorScaleMapShape.js +++ /dev/null @@ -1,123 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import ToggleButton from '@mui/material/ToggleButton'; -import { interpolateBlues } from 'd3-scale-chromatic'; -import { feature as topojsonFeature } from 'topojson-client'; -import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; -import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip'; -import { - ContinuousColorLegend, - PiecewiseColorLegend, -} from '@mui/x-charts-premium/ChartsLegend'; - -import { internetUsageByCountry } from '../dataset/internetUsageByCountry'; -import { withCountryCodeAsName, countryData } from '../dataset/countryData'; - -const countries = withCountryCodeAsName( - topojsonFeature(countriesTopology, 'countries'), -); - -const data = Object.keys(countryData).map((code) => ({ - name: code, - label: countryData[code].country, - colorValue: internetUsageByCountry[code], -})); - -export default function ColorScaleMapShape() { - const [colorMap, setColorMap] = React.useState('continuous'); - const [unknownShape, setUnknownShape] = React.useState('color'); - - return ( - - - value && setColorMap(value)} - aria-label="color map" - > - continuous - piecewise - - value && setUnknownShape(value)} - aria-label="unknown shape" - > - unknown Color - Geo Data - none - - - - Share of the population using the Internet in 2020 - - - - point.colorValue == null - ? 'No data' - : `${point.colorValue.toFixed(1)}%`, - }, - ]} - zAxis={[ - { - id: 'internet-usage', - colorMap: - colorMap === 'continuous' - ? { - type: 'continuous', - min: 0, - max: 100, - color: ['#e3f2fd', '#0d47a1'], - unknownColor: unknownShape === 'color' ? 'gray' : undefined, - } - : { - type: 'piecewise', - thresholds: [25, 50, 75], - colors: [0.25, 0.5, 0.75, 1].map(interpolateBlues), - unknownColor: unknownShape === 'color' ? 'gray' : undefined, - }, - }, - ]} - > - - {unknownShape === 'geoData' && ( - - )} - - - - {colorMap === 'continuous' ? ( - - ) : ( - - )} - - - - ); -} diff --git a/docs/data/charts/map/CountryProjectionShape.js b/docs/data/charts/map/CountryProjectionShape.js deleted file mode 100644 index d95afafaa5deb..0000000000000 --- a/docs/data/charts/map/CountryProjectionShape.js +++ /dev/null @@ -1,219 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import Slider from '@mui/material/Slider'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import ListSubheader from '@mui/material/ListSubheader'; -import { feature as topojsonFeature } from 'topojson-client'; -import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; -import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { GeoDataPlot, Graticule } from '@mui/x-charts-premium/Map'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; - -import { useGeoPath } from '@mui/x-charts-premium/hooks'; - -const countries = topojsonFeature(countriesTopology, 'countries'); - -function getCountry(name) { - return { - ...countries, - features: countries.features.filter( - (feature) => feature.properties?.name === name, - ), - }; -} - -const LANDS = { - Japan: { - geoData: getCountry('Japan'), - center: [138, 38], - parallels: [33, 45], - }, - 'United Kingdom': { - geoData: getCountry('United Kingdom'), - center: [-2.5, 54], - parallels: [50, 58], - }, - Australia: { - geoData: getCountry('Australia'), - center: [134, -28], - parallels: [-36, -18], - }, -}; - -const projectionGroups = [ - { - // https://d3js.org/d3-geo/conic - label: 'Conic', - projections: ['conicConformal', 'conicEqualArea', 'conicEquidistant', 'albers'], - }, - { - // https://d3js.org/d3-geo/cylindrical - label: 'Cylindrical', - projections: [ - 'equirectangular', - 'mercator', - 'transverseMercator', - 'equalEarth', - 'naturalEarth1', - ], - }, - { - // https://d3js.org/d3-geo/azimuthal - label: 'Azimuthal', - projections: [ - 'azimuthalEqualArea', - 'azimuthalEquidistant', - 'gnomonic', - 'orthographic', - 'stereographic', - ], - }, -]; - -const CONIC_PROJECTIONS = [ - 'conicConformal', - 'conicEqualArea', - 'conicEquidistant', - 'albers', -]; - -const CYLINDRICAL_PROJECTIONS = [ - 'equirectangular', - 'mercator', - 'transverseMercator', - 'equalEarth', - 'naturalEarth1', -]; - -function isConicProjection(projection) { - return CONIC_PROJECTIONS.includes(projection); -} - -function isCylindricalProjection(projection) { - return CYLINDRICAL_PROJECTIONS.includes(projection); -} - -export default function CountryProjectionShape() { - const [land, setLand] = React.useState('Japan'); - const [projection, setProjection] = React.useState('albers'); - const [parallels, setParallels] = React.useState(LANDS.Japan.parallels); - - const { geoData, center } = LANDS[land]; - const conic = isConicProjection(projection); - const cylindrical = isCylindricalProjection(projection); - - const handleLandChange = (nextLand) => { - const config = LANDS[nextLand]; - setLand(nextLand); - setProjection('albers'); - setParallels(config.parallels); - }; - - return ( - - - - - - {conic && } - - - - - - handleLandChange(event.target.value)} - > - {Object.keys(LANDS).map((name) => ( - - {name} - - ))} - - setProjection(event.target.value)} - > - {projectionGroups.flatMap(({ label, projections }) => [ - {label}, - ...projections.map((name) => ( - - {name} - - )), - ])} - - {conic && ( -
- - Standard parallels - - setParallels(value.slice(0, 2))} - /> -
- )} - - - ); -} - -const angles = new Array(37).fill(0).map((_, i) => i * 10 - 180); -function Parallels(props) { - const { parallels } = props; - - const path = useGeoPath(); - - if (!path) { - return null; - } - const d = path({ - type: 'MultiLineString', - coordinates: [ - angles.map((p) => [p, parallels[0]]), - ...(parallels[1] === parallels[0] - ? [] - : [angles.map((p) => [p, parallels[1]])]), - ], - }); - - if (!d) { - return null; - } - return ; -} diff --git a/docs/data/charts/map/ExportMap.js b/docs/data/charts/map/ExportMap.js deleted file mode 100644 index afdae891558a1..0000000000000 --- a/docs/data/charts/map/ExportMap.js +++ /dev/null @@ -1,92 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Stack from '@mui/material/Stack'; -import { interpolateBlues } from 'd3-scale-chromatic'; -import { feature as topojsonFeature } from 'topojson-client'; -import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; -import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { GeoDataPlot } from '@mui/x-charts-premium/Map'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { useChartRootRef } from '@mui/x-charts/hooks'; -import { useChartPremiumApiRef } from '@mui/x-charts-premium/hooks'; -import { PiecewiseColorLegend } from '@mui/x-charts-premium/ChartsLegend'; - -import { countryData } from '../dataset/countryData'; -import { internetUsageByCountry } from '../dataset/internetUsageByCountry'; - -const countries = topojsonFeature(countriesTopology, 'countries'); - -const data = Object.keys(countryData).map((code) => ({ - name: code, - label: countryData[code].country, - colorValue: internetUsageByCountry[code], -})); - -function CustomChartWrapper({ children }) { - const chartRootRef = useChartRootRef(); - - return
{children}
; -} - -export default function ExportMap() { - const apiRef = useChartPremiumApiRef(); - - return ( - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/charts/map/GeoDataPlotDemo.js b/docs/data/charts/map/GeoDataPlotDemo.js deleted file mode 100644 index 9cfb81e757795..0000000000000 --- a/docs/data/charts/map/GeoDataPlotDemo.js +++ /dev/null @@ -1,58 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import { feature as topojsonFeature } from 'topojson-client'; -import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; -import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { GeoDataPlot } from '@mui/x-charts-premium/Map'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; - -const countries = topojsonFeature(countriesTopology, 'countries'); - -export default function GeoDataPlotDemo() { - const [fill, setFill] = React.useState('#e3f2fd'); - const [stroke, setStroke] = React.useState('#0d47a1'); - const [strokeWidth, setStrokeWidth] = React.useState(0.5); - - return ( - - - - - - - - - - setFill(event.target.value)} - /> - setStroke(event.target.value)} - /> - setStrokeWidth(Number(event.target.value))} - /> - - - ); -} diff --git a/docs/data/charts/map/GeoFeatureKeyMapShape.js b/docs/data/charts/map/GeoFeatureKeyMapShape.js deleted file mode 100644 index 44a1c766261e8..0000000000000 --- a/docs/data/charts/map/GeoFeatureKeyMapShape.js +++ /dev/null @@ -1,73 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import { feature as topojsonFeature } from 'topojson-client'; -import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; -import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip'; - -import { countryData } from '../dataset/countryData'; -import { internetUsageByCountry } from '../dataset/internetUsageByCountry'; - -const countries = topojsonFeature(countriesTopology, 'countries'); - -// Treat the state of Somaliland as part of Somalia to match our World in data dataset. -const mergeSomaliland = (feature) => - feature.properties?.name === 'Somaliland' - ? 'Somalia' - : (feature.properties?.name ?? null); - -const data = Object.entries(countryData) - .filter(([, country]) => country.worldAtlasName) - .map(([code, country]) => ({ - name: country.worldAtlasName, - label: country.country, - colorValue: internetUsageByCountry[code], - })); - -export default function GeoFeatureKeyMapShape() { - return ( - - - - point.colorValue == null - ? 'No data' - : `${point.colorValue.toFixed(1)}%`, - }, - ]} - zAxis={[ - { - id: 'internet-usage', - colorMap: { - type: 'continuous', - min: 0, - max: 100, - color: ['#e3f2fd', '#0d47a1'], - }, - }, - ]} - > - - - - - - - - - ); -} diff --git a/docs/data/charts/map/HighlightedMapShape.js b/docs/data/charts/map/HighlightedMapShape.js deleted file mode 100644 index 67200e7967314..0000000000000 --- a/docs/data/charts/map/HighlightedMapShape.js +++ /dev/null @@ -1,133 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import { feature as topojsonFeature } from 'topojson-client'; -import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; -import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip'; - -import { - withCountryCodeAsName, - countriesInContinent, - countryData, -} from '../dataset/countryData'; - -const countries = withCountryCodeAsName( - topojsonFeature(countriesTopology, 'countries'), -); - -const getContinentData = (continent) => - countriesInContinent[continent].map((code) => ({ - name: code, - label: countryData[code].country, - })); - -const northAmerica = getContinentData('North America'); -const southAmerica = getContinentData('South America'); -const europe = getContinentData('Europe'); -const asia = getContinentData('Asia'); -const africa = getContinentData('Africa'); -const oceania = getContinentData('Oceania'); - -export default function HighlightedMapShape() { - const [highlight, setHighlight] = React.useState('item'); - const [fade, setFade] = React.useState('global'); - - return ( - - - '', - data: northAmerica, - }, - { - type: 'mapShape', - label: 'South America', - color: '#43a047', - highlightScope: { highlight, fade }, - valueFormatter: () => '', - data: southAmerica, - }, - { - type: 'mapShape', - label: 'Europe', - color: '#1e88e5', - highlightScope: { highlight, fade }, - valueFormatter: () => '', - data: europe, - }, - { - type: 'mapShape', - label: 'Asia', - color: '#e53935', - highlightScope: { highlight, fade }, - valueFormatter: () => '', - data: asia, - }, - { - type: 'mapShape', - label: 'Africa', - color: '#fdd835', - highlightScope: { highlight, fade }, - valueFormatter: () => '', - data: africa, - }, - { - type: 'mapShape', - label: 'Oceania', - color: '#8e24aa', - highlightScope: { highlight, fade }, - valueFormatter: () => '', - data: oceania, - }, - ]} - > - - - - - - - - - setHighlight(event.target.value)} - > - none - item - series - - setFade(event.target.value)} - > - none - series - global - - - - ); -} diff --git a/docs/data/charts/map/MapShapeClick.js b/docs/data/charts/map/MapShapeClick.js deleted file mode 100644 index a1f7edd31765a..0000000000000 --- a/docs/data/charts/map/MapShapeClick.js +++ /dev/null @@ -1,82 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; -import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; -import { feature as topojsonFeature } from 'topojson-client'; -import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; -import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -import { EU_COUNTRIES, countryData } from '../dataset/countryData'; - -const countries = topojsonFeature(countriesTopology, 'countries'); - -export default function MapShapeClick() { - const [itemData, setItemData] = React.useState(); - - return ( - - - ({ - name: countryData[code].country, - })), - valueFormatter: (point) => point.name, - }, - ]} - > - - - setItemData(identifier)} - /> - - - - - - - - Click on a shape - setItemData(undefined)} - > - - - - - - - ); -} diff --git a/docs/data/charts/map/MapShapePlotDemo.js b/docs/data/charts/map/MapShapePlotDemo.js deleted file mode 100644 index 0a95574524b2b..0000000000000 --- a/docs/data/charts/map/MapShapePlotDemo.js +++ /dev/null @@ -1,39 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { feature as topojsonFeature } from 'topojson-client'; -import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; -import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip'; - -import { EU_COUNTRIES, countryData } from '../dataset/countryData'; - -const countries = topojsonFeature(countriesTopology, 'countries'); - -export default function MapShapePlotDemo() { - return ( - - ({ name: countryData[code].country })), - valueFormatter: (point) => point.name, - }, - ]} - > - - - - - - - - ); -} diff --git a/docs/data/charts/map/MapZoomControl.js b/docs/data/charts/map/MapZoomControl.js deleted file mode 100644 index 5c3d422ad7b21..0000000000000 --- a/docs/data/charts/map/MapZoomControl.js +++ /dev/null @@ -1,282 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; -import ButtonGroup from '@mui/material/ButtonGroup'; -import Slider from '@mui/material/Slider'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import ListSubheader from '@mui/material/ListSubheader'; -import Typography from '@mui/material/Typography'; -import { feature as topojsonFeature } from 'topojson-client'; -import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; -import USATopology from 'us-atlas/states-10m.json'; -import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { useChartPremiumApiRef } from '@mui/x-charts-premium/hooks'; -import { GeoDataPlot, Graticule } from '@mui/x-charts-premium/Map'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; - -const countries = topojsonFeature(countriesTopology, 'countries'); - -const countriesWithoutAntarctica = { - ...countries, - features: countries.features.filter( - (feature) => feature.properties?.name !== 'Antarctica', - ), -}; - -const USAStates = topojsonFeature(USATopology, 'states'); - -const projectionGroups = [ - { - // https://d3js.org/d3-geo/azimuthal - label: 'Azimuthal', - projections: [ - 'azimuthalEqualArea', - 'azimuthalEquidistant', - 'gnomonic', - 'orthographic', - 'stereographic', - ], - }, - { - // https://d3js.org/d3-geo/conic - label: 'Conic', - projections: [ - // For now commented because those are more difficult to handle - 'conicConformal', - 'conicEqualArea', - 'conicEquidistant', - 'albers', - 'albersUsa', // Special composition for the USA with an edge case for Alaska and Hawaii. - ], - }, - { - // https://d3js.org/d3-geo/cylindrical - label: 'Cylindrical', - projections: [ - 'equirectangular', - 'mercator', - 'transverseMercator', - 'equalEarth', - 'naturalEarth1', - ], - }, -]; - -const cities = [ - // { name: 'New York', coordinates: [-74.006, 40.7128] }, - { name: 'Tokyo', coordinates: [139.6917, 35.6895] }, - { name: 'Sydney', coordinates: [151.2093, -33.8688] }, - { name: 'Rio', coordinates: [-43.1729, -22.9068] }, -]; - -function getGeoDataForProjection(projection) { - if (projection === 'albersUsa') { - return USAStates; - } - if (projection === 'conicConformal') { - return countriesWithoutAntarctica; - } - return countries; -} - -export default function MapZoomControl() { - const [projection, setProjection] = React.useState('naturalEarth1'); - const apiRef = useChartPremiumApiRef(); - - const [view, setView] = React.useState({ - zoomLevel: 1, - center: [0, 0], - translation: [0, 0], - roll: 0, - }); - - return ( - - - { - setView(newView); - }} - height={360} - > - - - - - - - - { - setProjection(event.target.value); - }} - > - {projectionGroups.flatMap(({ label, projections }) => [ - {label}, - ...projections.map((name) => ( - - {name} - - )), - ])} - - -
- - Center (longitude, latitude) - - - {cities.map(({ name, coordinates }) => ( - - ))} - - { - setView((prev) => ({ - ...prev, - center: [value, prev.center[1]], - })); - }} - /> - { - setView((prev) => ({ - ...prev, - center: [prev.center[0], value], - })); - }} - /> - {[ - 'azimuthalEqualArea', - 'azimuthalEquidistant', - 'gnomonic', - 'orthographic', - 'stereographic', - ].includes(projection) && ( - { - setView((prev) => ({ - ...prev, - roll: value, - })); - }} - /> - )} -
-
- - Translation (x, y as fraction of the drawing area) - - { - setView((prev) => ({ - ...prev, - translation: [value, prev.translation[1]], - })); - }} - /> - { - setView((prev) => ({ - ...prev, - translation: [prev.translation[0], value], - })); - }} - /> -
-
- - Zoom Level - - { - setView((prev) => ({ ...prev, zoomLevel: value })); - }} - /> -
-
- -
- - - ); -} diff --git a/docs/data/charts/map/MapZoomOptions.js b/docs/data/charts/map/MapZoomOptions.js deleted file mode 100644 index bf216153e94dd..0000000000000 --- a/docs/data/charts/map/MapZoomOptions.js +++ /dev/null @@ -1,235 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import ListSubheader from '@mui/material/ListSubheader'; -import Typography from '@mui/material/Typography'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import { feature as topojsonFeature } from 'topojson-client'; -import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; -import USATopology from 'us-atlas/states-10m.json'; -import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { useChartPremiumApiRef } from '@mui/x-charts-premium/hooks'; -import { GeoDataPlot, Graticule } from '@mui/x-charts-premium/Map'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; - -const countries = topojsonFeature(countriesTopology, 'countries'); - -const countriesWithoutAntarctica = { - ...countries, - features: countries.features.filter( - (feature) => feature.properties?.name !== 'Antarctica', - ), -}; - -const USAStates = topojsonFeature(USATopology, 'states'); - -function getGeoDataForProjection(projection) { - if (projection === 'albersUsa') { - return USAStates; - } - if (projection === 'conicConformal') { - return countriesWithoutAntarctica; - } - return countries; -} -const projectionGroups = [ - { - // https://d3js.org/d3-geo/azimuthal - label: 'Azimuthal', - projections: [ - 'azimuthalEqualArea', - 'azimuthalEquidistant', - 'gnomonic', - 'orthographic', - 'stereographic', - ], - }, - { - // https://d3js.org/d3-geo/conic - label: 'Conic', - projections: [ - // For now commented because those are more difficult to handle - 'conicConformal', - 'conicEqualArea', - 'conicEquidistant', - 'albers', - 'albersUsa', // Special composition for the USA with an edge case for Alaska and Hawaii. - ], - }, - { - // https://d3js.org/d3-geo/cylindrical - label: 'Cylindrical', - projections: [ - 'equirectangular', - 'mercator', - 'transverseMercator', - 'equalEarth', - 'naturalEarth1', - ], - }, -]; - -function isConicProjection(projection) { - return ( - projection === 'conicConformal' || - projection === 'conicEqualArea' || - projection === 'conicEquidistant' || - projection === 'albers' || - projection === 'albersUsa' - ); -} - -function isCylindricalProjection(projection) { - return ( - projection === 'equirectangular' || - projection === 'mercator' || - projection === 'transverseMercator' || - projection === 'equalEarth' || - projection === 'naturalEarth1' - ); -} - -export default function MapZoomOptions() { - const [projection, setProjection] = React.useState('naturalEarth1'); - const apiRef = useChartPremiumApiRef(); - - const [rotationAllowed, setRotationAllowed] = React.useState('longitude'); - const [translationAllowed, setTranslationAllowed] = React.useState('y'); - const [maxEmptySpace, setMaxEmptySpace] = React.useState(0); - - return ( - - - - - - - - - - - { - const value = event.target.value; - setProjection(value); - apiRef.current?.resetZoom(); - if (value === 'albersUsa') { - setRotationAllowed('none'); - setTranslationAllowed('both'); - } else if (isConicProjection(value) || isCylindricalProjection(value)) { - setRotationAllowed('longitude'); - setTranslationAllowed('y'); - } else { - setRotationAllowed('both'); - setTranslationAllowed('none'); - } - }} - > - {projectionGroups.flatMap(({ label, projections }) => [ - {label}, - ...projections.map((name) => ( - - {name} - - )), - ])} - - -
- - Rotation - -
- { - if (value !== null) { - setRotationAllowed(value); - } - }} - > - both - both+roll - longitude - none - -
-
-
- - Translation - -
- { - if (value !== null) { - setTranslationAllowed(value); - } - }} - > - both - x - y - none - -
-
- -
- - Max Empty Space - -
- { - if (value !== null) { - setMaxEmptySpace(value); - } - }} - > - 0 - 0.5 - -
-
- -
- -
- - - ); -} diff --git a/docs/data/charts/map/MarsMap.js b/docs/data/charts/map/MarsMap.js deleted file mode 100644 index 95d5179944a79..0000000000000 --- a/docs/data/charts/map/MarsMap.js +++ /dev/null @@ -1,147 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { MapImagePlot, MapShapePlot } from '@mui/x-charts-premium/Map'; -import { useGeoPath } from '@mui/x-charts-premium/hooks'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip'; -import { ContinuousColorLegend } from '@mui/x-charts-premium/ChartsLegend'; - -import { marsRegions, marsData, marsFeatures } from './marsRegions'; - -const MARS_IMAGE = '/static/x/charts/mars-viking-mdim21.jpg'; - -const FEATURE_COLORS = { landmark: '#ff7777', mission: '#4fc3f7' }; - -// Returns a predicate telling whether a coordinate is hidden by the projection, -// by checking it survives the round-trip `coord === invert(project(coord))`. -// On a globe (e.g. orthographic) back-of-sphere coordinates project onto the disk -// but invert to a different, front-facing coordinate. -function createIsHidden(projection) { - return (coordinate) => { - const point = projection(coordinate); - if (!point) { - return true; - } - const inverted = projection.invert?.(point); - return ( - !inverted || - Math.abs(inverted[0] - coordinate[0]) > 1 || - Math.abs(inverted[1] - coordinate[1]) > 1 - ); - }; -} - -// Notable features projected as labeled markers. -function MarsFeatureMarkers() { - const path = useGeoPath(); - const projection = path?.projection(); - if (!projection) { - return null; - } - const isHidden = createIsHidden(projection); - return ( - - {marsFeatures.map((feature) => { - const coordinate = [feature.lon, feature.lat]; - const point = projection(coordinate); - if (!point || isHidden(coordinate)) { - return null; - } - const [x, y] = point; - return ( - - {feature.name} - - - {feature.name} - - - ); - })} - - ); -} - -export default function MarsMap() { - const [projection, setProjection] = React.useState('orthographic'); - - return ( - - value && setProjection(value)} - aria-label="projection" - > - orthographic - equirectangular - - - point.colorValue == null - ? 'No data' - : `${point.colorValue > 0 ? '+' : ''}${point.colorValue} km`, - }, - ]} - zAxis={[ - { - colorMap: { - type: 'continuous', - min: -6, - max: 8, - color: ['#2c5d8a', '#d8b98c'], - }, - }, - ]} - > - - - - - - - - - - - - ); -} diff --git a/docs/data/charts/map/ProjectionMapShape.js b/docs/data/charts/map/ProjectionMapShape.js deleted file mode 100644 index 84f5443a61179..0000000000000 --- a/docs/data/charts/map/ProjectionMapShape.js +++ /dev/null @@ -1,113 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import ListSubheader from '@mui/material/ListSubheader'; -import { feature as topojsonFeature } from 'topojson-client'; -import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; -import USATopology from 'us-atlas/states-10m.json'; -import { useChartPremiumApiRef } from '@mui/x-charts-premium/hooks'; -import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { GeoDataPlot, Graticule } from '@mui/x-charts-premium/Map'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; - -const countries = topojsonFeature(countriesTopology, 'countries'); - -const USAStates = topojsonFeature(USATopology, 'states'); - -const projectionGroups = [ - { - // https://d3js.org/d3-geo/azimuthal - label: 'Azimuthal', - projections: [ - 'azimuthalEqualArea', - 'azimuthalEquidistant', - 'gnomonic', - 'orthographic', - 'stereographic', - ], - }, - { - // https://d3js.org/d3-geo/conic - label: 'Conic', - projections: [ - // For now commented because those are more difficult to handle - // 'conicConformal', - // 'conicEqualArea', - // 'conicEquidistant', - // 'albers', - 'albersUsa', // Special composition for the USA with an edge case for Alaska and Hawaii. - ], - }, - { - // https://d3js.org/d3-geo/cylindrical - label: 'Cylindrical', - projections: [ - 'equirectangular', - 'mercator', - 'transverseMercator', - 'equalEarth', - 'naturalEarth1', - ], - }, -]; - -function isConicProjection(projection) { - return ( - projection === 'conicConformal' || - projection === 'conicEqualArea' || - projection === 'conicEquidistant' || - projection === 'albers' || - projection === 'albersUsa' - ); -} - -export default function ProjectionMapShape() { - const [projection, setProjection] = React.useState('naturalEarth1'); - - const apiRef = useChartPremiumApiRef(); - - return ( - - - - - - - - - - - { - setProjection(event.target.value); - apiRef.current?.resetZoom(); - }} - > - {projectionGroups.flatMap(({ label, projections }) => [ - {label}, - ...projections.map((name) => ( - - {name} - - )), - ])} - - - - ); -} diff --git a/docs/data/charts/map/RemoveAntarctica.js b/docs/data/charts/map/RemoveAntarctica.js deleted file mode 100644 index fb4635b420d5f..0000000000000 --- a/docs/data/charts/map/RemoveAntarctica.js +++ /dev/null @@ -1,117 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import ToggleButton from '@mui/material/ToggleButton'; -import MenuItem from '@mui/material/MenuItem'; -import TextField from '@mui/material/TextField'; - -import { feature as topojsonFeature } from 'topojson-client'; -import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; - -import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; - -import { internetUsageByCountry } from '../dataset/internetUsageByCountry'; -import { countryData, withCountryCodeAsName } from '../dataset/countryData'; - -const projections = [ - 'equirectangular', - 'mercator', - 'transverseMercator', - 'equalEarth', - 'naturalEarth1', -]; - -const countries = withCountryCodeAsName( - topojsonFeature(countriesTopology, 'countries'), -); - -const countriesWithoutAntarctica = { - ...countries, - features: countries.features.filter( - (feature) => feature.properties?.name !== 'Antarctica', - ), -}; - -export default function RemoveAntarctica() { - const [mode, setMode] = React.useState('geoDataFiltering'); - const [projection, setProjection] = React.useState('naturalEarth1'); - - return ( - - { - if (newMode !== null) { - setMode(newMode); - } - }} - sx={{ mb: 2, mr: 2 }} - > - With Antarctica - geoData filtering - series only - - setProjection(event.target.value)} - sx={{ mb: 2, minWidth: 200 }} - > - {projections.map((name) => ( - - {name} - - ))} - - - - - {mode === 'seriesOnly' ? null : ( - - )} - - - - - - ); -} - -const settings = { - zAxis: [ - { - id: 'internet-usage', - colorMap: { - type: 'continuous', - min: 0, - max: 100, - color: ['#e3f2fd', '#0d47a1'], - unknownColor: 'gray', - }, - }, - ], - height: 360, - series: [ - { - type: 'mapShape', - label: 'Internet usage', - data: Object.keys(countryData).map((code) => ({ - name: code, - label: countryData[code].country, - colorValue: internetUsageByCountry[code], - })), - valueFormatter: (point) => - point.colorValue == null ? 'No data' : `${point.colorValue.toFixed(1)}%`, - }, - ], -}; diff --git a/docs/data/charts/map/TectonicPlates.js b/docs/data/charts/map/TectonicPlates.js deleted file mode 100644 index de7b87d72f4be..0000000000000 --- a/docs/data/charts/map/TectonicPlates.js +++ /dev/null @@ -1,124 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import ToggleButton from '@mui/material/ToggleButton'; -import { feature as topojsonFeature } from 'topojson-client'; -import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; -import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { MapShapePlot, Graticule } from '@mui/x-charts-premium/Map'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip'; - -import tectonicPlates from '../dataset/tectonicPlates.json'; - -const plates = tectonicPlates; - -const countries = topojsonFeature(countriesTopology, 'countries'); - -// Plates and countries share a few names (India, Australia, ...), so tag each -// feature with its layer and key on `layer:name` to keep the two series apart. -function tagLayer(collection, layer) { - return collection.features.map((feature) => ({ - ...feature, - properties: { ...feature.properties, layer }, - })); -} - -const geoData = { - type: 'FeatureCollection', - features: [...tagLayer(plates, 'plate'), ...tagLayer(countries, 'country')], -}; - -const geoFeatureKey = (feature) => - `${feature.properties?.layer}:${feature.properties?.name}`; - -const plateNames = Array.from( - new Set(plates.features.map((feature) => String(feature.properties?.name))), -); - -const plateData = plateNames.map((name, index) => ({ - name: `plate:${name}`, - label: name, - color: `hsl(${Math.round((index / plateNames.length) * 360)}, 55%, 60%)`, -})); - -const countryData = countries.features.map((feature) => ({ - name: `country:${feature.properties?.name}`, -})); - -export default function TectonicPlates() { - const [projection, setProjection] = React.useState('naturalEarth1'); - - const isGlobe = projection === 'orthographic'; - - return ( - - - - The 54 tectonic plates of the Earth (PB2002 model) - - value && setProjection(value)} - aria-label="projection" - > - Map - Globe - - - - '', - }, - { - type: 'mapShape', - id: 'countries', - label: 'Country', - data: countryData, - }, - ]} - > - - - - - - - - - ); -} diff --git a/docs/data/charts/map/VisibleMapShape.js b/docs/data/charts/map/VisibleMapShape.js deleted file mode 100644 index a34c0d26a5e0f..0000000000000 --- a/docs/data/charts/map/VisibleMapShape.js +++ /dev/null @@ -1,95 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { feature as topojsonFeature } from 'topojson-client'; -import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; -import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { ChartsLegend } from '@mui/x-charts-premium/ChartsLegend'; -import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip'; - -import { - withCountryCodeAsName, - countriesInContinent, - countryData, -} from '../dataset/countryData'; - -const countries = withCountryCodeAsName( - topojsonFeature(countriesTopology, 'countries'), -); - -const getContinentData = (continent) => - countriesInContinent[continent].map((code) => ({ - name: code, - label: countryData[code].country, - })); - -const northAmerica = getContinentData('North America'); -const southAmerica = getContinentData('South America'); -const europe = getContinentData('Europe'); -const asia = getContinentData('Asia'); -const africa = getContinentData('Africa'); -const oceania = getContinentData('Oceania'); - -export default function VisibleMapShape() { - return ( - - '', - data: northAmerica, - }, - { - type: 'mapShape', - label: 'South America', - color: '#43a047', - valueFormatter: () => '', - data: southAmerica, - }, - { - type: 'mapShape', - label: 'Europe', - color: '#1e88e5', - valueFormatter: () => '', - data: europe, - }, - { - type: 'mapShape', - label: 'Asia', - color: '#e53935', - valueFormatter: () => '', - data: asia, - }, - { - type: 'mapShape', - label: 'Africa', - color: '#fdd835', - valueFormatter: () => '', - data: africa, - }, - { - type: 'mapShape', - label: 'Oceania', - color: '#8e24aa', - valueFormatter: () => '', - data: oceania, - }, - ]} - > - - - - - - - - - ); -} diff --git a/docs/data/charts/map/ZoomMap.tsx b/docs/data/charts/map/ZoomMap.tsx index e42f59ae6644c..cbcd4d180f7c8 100644 --- a/docs/data/charts/map/ZoomMap.tsx +++ b/docs/data/charts/map/ZoomMap.tsx @@ -9,7 +9,7 @@ import { MapShapePlot } from '@mui/x-charts-premium/Map'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip'; import { ContinuousColorLegend } from '@mui/x-charts-premium/ChartsLegend'; -import { type ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; +import type { ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; import { internetUsageByCountry } from '../dataset/internetUsageByCountry'; import { withCountryCodeAsName, countryData } from '../dataset/countryData'; diff --git a/docs/data/charts/map/BasicGeoDataPlot.tsx b/docs/data/charts/map/demos/basic-geo-data-plot/BasicGeoDataPlot.tsx similarity index 92% rename from docs/data/charts/map/BasicGeoDataPlot.tsx rename to docs/data/charts/map/demos/basic-geo-data-plot/BasicGeoDataPlot.tsx index c0cb51cd075c2..a7b75ab1869ae 100644 --- a/docs/data/charts/map/BasicGeoDataPlot.tsx +++ b/docs/data/charts/map/demos/basic-geo-data-plot/BasicGeoDataPlot.tsx @@ -6,9 +6,9 @@ import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map'; import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { type ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; +import type { ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; import { ChartsLegend } from '@mui/x-charts-premium/ChartsLegend'; -import { countryData, EU_COUNTRIES } from '../dataset/countryData'; +import { countryData, EU_COUNTRIES } from '../../../dataset/countryData'; const countries = topojsonFeature( countriesTopology as any, @@ -18,6 +18,7 @@ const countries = topojsonFeature( export default function BasicGeoDataPlot() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/map/demos/basic-geo-data-plot/client.ts b/docs/data/charts/map/demos/basic-geo-data-plot/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/map/demos/basic-geo-data-plot/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/map/demos/basic-geo-data-plot/index.ts b/docs/data/charts/map/demos/basic-geo-data-plot/index.ts new file mode 100644 index 0000000000000..26fe2d23ecdfb --- /dev/null +++ b/docs/data/charts/map/demos/basic-geo-data-plot/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicGeoDataPlot from './BasicGeoDataPlot'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicGeoDataPlot, { ClientProvider }); diff --git a/docs/data/charts/map/ColorScaleMapShape.tsx b/docs/data/charts/map/demos/color-scale-map-shape/ColorScaleMapShape.tsx similarity index 94% rename from docs/data/charts/map/ColorScaleMapShape.tsx rename to docs/data/charts/map/demos/color-scale-map-shape/ColorScaleMapShape.tsx index 9782421e9f4bd..654d24bc153f2 100644 --- a/docs/data/charts/map/ColorScaleMapShape.tsx +++ b/docs/data/charts/map/demos/color-scale-map-shape/ColorScaleMapShape.tsx @@ -15,9 +15,9 @@ import { ContinuousColorLegend, PiecewiseColorLegend, } from '@mui/x-charts-premium/ChartsLegend'; -import { type ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; -import { internetUsageByCountry } from '../dataset/internetUsageByCountry'; -import { withCountryCodeAsName, countryData } from '../dataset/countryData'; +import type { ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; +import { internetUsageByCountry } from '../../../dataset/internetUsageByCountry'; +import { withCountryCodeAsName, countryData } from '../../../dataset/countryData'; const countries = withCountryCodeAsName( topojsonFeature( @@ -35,6 +35,7 @@ const data = Object.keys(countryData).map((code) => ({ type ColorMapType = 'continuous' | 'piecewise'; export default function ColorScaleMapShape() { + // @focus-start @padding 1 const [colorMap, setColorMap] = React.useState('continuous'); const [unknownShape, setUnknownShape] = React.useState< 'color' | 'geoData' | 'none' @@ -129,4 +130,5 @@ export default function ColorScaleMapShape() { ); + // @focus-end } diff --git a/docs/data/charts/map/demos/color-scale-map-shape/client.ts b/docs/data/charts/map/demos/color-scale-map-shape/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/map/demos/color-scale-map-shape/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/map/demos/color-scale-map-shape/index.ts b/docs/data/charts/map/demos/color-scale-map-shape/index.ts new file mode 100644 index 0000000000000..48811bb8d3905 --- /dev/null +++ b/docs/data/charts/map/demos/color-scale-map-shape/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorScaleMapShape from './ColorScaleMapShape'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorScaleMapShape, { ClientProvider }); diff --git a/docs/data/charts/map/CountryProjectionShape.tsx b/docs/data/charts/map/demos/country-projection-shape/CountryProjectionShape.tsx similarity index 96% rename from docs/data/charts/map/CountryProjectionShape.tsx rename to docs/data/charts/map/demos/country-projection-shape/CountryProjectionShape.tsx index 4cfc43e525b43..1c5c2192d60ab 100644 --- a/docs/data/charts/map/CountryProjectionShape.tsx +++ b/docs/data/charts/map/demos/country-projection-shape/CountryProjectionShape.tsx @@ -9,13 +9,10 @@ import ListSubheader from '@mui/material/ListSubheader'; import { feature as topojsonFeature } from 'topojson-client'; import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { - D3NamedProjection, - GeoDataPlot, - Graticule, -} from '@mui/x-charts-premium/Map'; +import type { D3NamedProjection } from '@mui/x-charts-premium/Map'; +import { GeoDataPlot, Graticule } from '@mui/x-charts-premium/Map'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { type ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; +import type { ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; import { useGeoPath } from '@mui/x-charts-premium/hooks'; const countries = topojsonFeature( @@ -113,6 +110,7 @@ function isCylindricalProjection(projection: D3NamedProjection) { } export default function CountryProjectionShape() { + // @focus-start @padding 1 const [land, setLand] = React.useState('Japan'); const [projection, setProjection] = React.useState('albers'); const [parallels, setParallels] = React.useState<[number, number]>( @@ -213,6 +211,7 @@ export default function CountryProjectionShape() { ); + // @focus-end } const angles = new Array(37).fill(0).map((_, i) => i * 10 - 180); diff --git a/docs/data/charts/map/demos/country-projection-shape/client.ts b/docs/data/charts/map/demos/country-projection-shape/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/map/demos/country-projection-shape/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/map/demos/country-projection-shape/index.ts b/docs/data/charts/map/demos/country-projection-shape/index.ts new file mode 100644 index 0000000000000..d8b396d2f2a0c --- /dev/null +++ b/docs/data/charts/map/demos/country-projection-shape/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CountryProjectionShape from './CountryProjectionShape'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CountryProjectionShape, { ClientProvider }); diff --git a/docs/data/charts/map/ExportMap.tsx b/docs/data/charts/map/demos/export-map/ExportMap.tsx similarity index 92% rename from docs/data/charts/map/ExportMap.tsx rename to docs/data/charts/map/demos/export-map/ExportMap.tsx index 24566fa9440ea..3be481decae9f 100644 --- a/docs/data/charts/map/ExportMap.tsx +++ b/docs/data/charts/map/demos/export-map/ExportMap.tsx @@ -11,9 +11,9 @@ import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; import { useChartRootRef } from '@mui/x-charts/hooks'; import { useChartPremiumApiRef } from '@mui/x-charts-premium/hooks'; import { PiecewiseColorLegend } from '@mui/x-charts-premium/ChartsLegend'; -import { type ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; -import { countryData } from '../dataset/countryData'; -import { internetUsageByCountry } from '../dataset/internetUsageByCountry'; +import type { ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; +import { countryData } from '../../../dataset/countryData'; +import { internetUsageByCountry } from '../../../dataset/internetUsageByCountry'; const countries = topojsonFeature( countriesTopology as any, @@ -33,6 +33,7 @@ function CustomChartWrapper({ children }: React.PropsWithChildren) { } export default function ExportMap() { + // @focus-start @padding 1 const apiRef = useChartPremiumApiRef<'mapShape'>(); return ( @@ -92,4 +93,5 @@ export default function ExportMap() { ); + // @focus-end } diff --git a/docs/data/charts/map/demos/export-map/client.ts b/docs/data/charts/map/demos/export-map/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/map/demos/export-map/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/map/demos/export-map/index.ts b/docs/data/charts/map/demos/export-map/index.ts new file mode 100644 index 0000000000000..b20c941d94a4e --- /dev/null +++ b/docs/data/charts/map/demos/export-map/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ExportMap from './ExportMap'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ExportMap, { ClientProvider }); diff --git a/docs/data/charts/map/GeoDataPlotDemo.tsx b/docs/data/charts/map/demos/geo-data-plot-demo/GeoDataPlotDemo.tsx similarity index 94% rename from docs/data/charts/map/GeoDataPlotDemo.tsx rename to docs/data/charts/map/demos/geo-data-plot-demo/GeoDataPlotDemo.tsx index bc93fa5c31ed2..4214a606dc1e1 100644 --- a/docs/data/charts/map/GeoDataPlotDemo.tsx +++ b/docs/data/charts/map/demos/geo-data-plot-demo/GeoDataPlotDemo.tsx @@ -7,7 +7,7 @@ import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; import { GeoDataPlot } from '@mui/x-charts-premium/Map'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { type ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; +import type { ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; const countries = topojsonFeature( countriesTopology as any, @@ -15,6 +15,7 @@ const countries = topojsonFeature( ) as unknown as ExtendedFeatureCollection; export default function GeoDataPlotDemo() { + // @focus-start @padding 1 const [fill, setFill] = React.useState('#e3f2fd'); const [stroke, setStroke] = React.useState('#0d47a1'); const [strokeWidth, setStrokeWidth] = React.useState(0.5); @@ -59,4 +60,5 @@ export default function GeoDataPlotDemo() { ); + // @focus-end } diff --git a/docs/data/charts/map/demos/geo-data-plot-demo/client.ts b/docs/data/charts/map/demos/geo-data-plot-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/map/demos/geo-data-plot-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/map/demos/geo-data-plot-demo/index.ts b/docs/data/charts/map/demos/geo-data-plot-demo/index.ts new file mode 100644 index 0000000000000..3b0c51e01fd05 --- /dev/null +++ b/docs/data/charts/map/demos/geo-data-plot-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GeoDataPlotDemo from './GeoDataPlotDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GeoDataPlotDemo, { ClientProvider }); diff --git a/docs/data/charts/map/GeoFeatureKeyMapShape.tsx b/docs/data/charts/map/demos/geo-feature-key-map-shape/GeoFeatureKeyMapShape.tsx similarity index 93% rename from docs/data/charts/map/GeoFeatureKeyMapShape.tsx rename to docs/data/charts/map/demos/geo-feature-key-map-shape/GeoFeatureKeyMapShape.tsx index b2523dd0df27f..1753e9c3c07db 100644 --- a/docs/data/charts/map/GeoFeatureKeyMapShape.tsx +++ b/docs/data/charts/map/demos/geo-feature-key-map-shape/GeoFeatureKeyMapShape.tsx @@ -11,8 +11,8 @@ import type { ExtendedFeature, ExtendedFeatureCollection, } from '@mui/x-charts-vendor/d3-geo'; -import { countryData } from '../dataset/countryData'; -import { internetUsageByCountry } from '../dataset/internetUsageByCountry'; +import { countryData } from '../../../dataset/countryData'; +import { internetUsageByCountry } from '../../../dataset/internetUsageByCountry'; const countries = topojsonFeature( countriesTopology as any, @@ -36,6 +36,7 @@ const data = Object.entries(countryData) export default function GeoFeatureKeyMapShape() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/map/demos/geo-feature-key-map-shape/client.ts b/docs/data/charts/map/demos/geo-feature-key-map-shape/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/map/demos/geo-feature-key-map-shape/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/map/demos/geo-feature-key-map-shape/index.ts b/docs/data/charts/map/demos/geo-feature-key-map-shape/index.ts new file mode 100644 index 0000000000000..675d34f955d1c --- /dev/null +++ b/docs/data/charts/map/demos/geo-feature-key-map-shape/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GeoFeatureKeyMapShape from './GeoFeatureKeyMapShape'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GeoFeatureKeyMapShape, { ClientProvider }); diff --git a/docs/data/charts/map/HighlightedMapShape.tsx b/docs/data/charts/map/demos/highlighted-map-shape/HighlightedMapShape.tsx similarity index 96% rename from docs/data/charts/map/HighlightedMapShape.tsx rename to docs/data/charts/map/demos/highlighted-map-shape/HighlightedMapShape.tsx index 2980a168eebe7..1bdc661c32360 100644 --- a/docs/data/charts/map/HighlightedMapShape.tsx +++ b/docs/data/charts/map/demos/highlighted-map-shape/HighlightedMapShape.tsx @@ -9,12 +9,12 @@ import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip'; -import { type ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; +import type { ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; import { withCountryCodeAsName, countriesInContinent, countryData, -} from '../dataset/countryData'; +} from '../../../dataset/countryData'; type HighlightOptions = 'none' | 'item' | 'series'; type FadeOptions = 'none' | 'series' | 'global'; @@ -40,6 +40,7 @@ const africa = getContinentData('Africa'); const oceania = getContinentData('Oceania'); export default function HighlightedMapShape() { + // @focus-start @padding 1 const [highlight, setHighlight] = React.useState('item'); const [fade, setFade] = React.useState('global'); @@ -136,4 +137,5 @@ export default function HighlightedMapShape() { ); + // @focus-end } diff --git a/docs/data/charts/map/demos/highlighted-map-shape/client.ts b/docs/data/charts/map/demos/highlighted-map-shape/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/map/demos/highlighted-map-shape/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/map/demos/highlighted-map-shape/index.ts b/docs/data/charts/map/demos/highlighted-map-shape/index.ts new file mode 100644 index 0000000000000..1ccf4854ecd60 --- /dev/null +++ b/docs/data/charts/map/demos/highlighted-map-shape/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HighlightedMapShape from './HighlightedMapShape'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HighlightedMapShape, { ClientProvider }); diff --git a/docs/data/charts/map/MapShapeClick.tsx b/docs/data/charts/map/demos/map-shape-click/MapShapeClick.tsx similarity index 92% rename from docs/data/charts/map/MapShapeClick.tsx rename to docs/data/charts/map/demos/map-shape-click/MapShapeClick.tsx index 138333d061d37..b700b69a7a55d 100644 --- a/docs/data/charts/map/MapShapeClick.tsx +++ b/docs/data/charts/map/demos/map-shape-click/MapShapeClick.tsx @@ -11,9 +11,9 @@ import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip'; import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { type MapShapeItemIdentifier } from '@mui/x-charts-premium/models'; -import { type ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; -import { EU_COUNTRIES, countryData } from '../dataset/countryData'; +import type { MapShapeItemIdentifier } from '@mui/x-charts-premium/models'; +import type { ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; +import { EU_COUNTRIES, countryData } from '../../../dataset/countryData'; const countries = topojsonFeature( countriesTopology as any, @@ -21,6 +21,7 @@ const countries = topojsonFeature( ) as unknown as ExtendedFeatureCollection; export default function MapShapeClick() { + // @focus-start @padding 1 const [itemData, setItemData] = React.useState(); return ( @@ -83,4 +84,5 @@ ${itemData ? JSON.stringify(itemData, null, 2) : '// The data will appear here'} ); + // @focus-end } diff --git a/docs/data/charts/map/demos/map-shape-click/client.ts b/docs/data/charts/map/demos/map-shape-click/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/map/demos/map-shape-click/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/map/demos/map-shape-click/index.ts b/docs/data/charts/map/demos/map-shape-click/index.ts new file mode 100644 index 0000000000000..8d25626690e20 --- /dev/null +++ b/docs/data/charts/map/demos/map-shape-click/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MapShapeClick from './MapShapeClick'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MapShapeClick, { ClientProvider }); diff --git a/docs/data/charts/map/MapShapePlotDemo.tsx b/docs/data/charts/map/demos/map-shape-plot-demo/MapShapePlotDemo.tsx similarity index 88% rename from docs/data/charts/map/MapShapePlotDemo.tsx rename to docs/data/charts/map/demos/map-shape-plot-demo/MapShapePlotDemo.tsx index 536005cf2ec5c..b3b55460ff6da 100644 --- a/docs/data/charts/map/MapShapePlotDemo.tsx +++ b/docs/data/charts/map/demos/map-shape-plot-demo/MapShapePlotDemo.tsx @@ -6,8 +6,8 @@ import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip'; -import { type ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; -import { EU_COUNTRIES, countryData } from '../dataset/countryData'; +import type { ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; +import { EU_COUNTRIES, countryData } from '../../../dataset/countryData'; const countries = topojsonFeature( countriesTopology as any, @@ -17,6 +17,7 @@ const countries = topojsonFeature( export default function MapShapePlotDemo() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/map/demos/map-shape-plot-demo/client.ts b/docs/data/charts/map/demos/map-shape-plot-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/map/demos/map-shape-plot-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/map/demos/map-shape-plot-demo/index.ts b/docs/data/charts/map/demos/map-shape-plot-demo/index.ts new file mode 100644 index 0000000000000..40ac2b633d5af --- /dev/null +++ b/docs/data/charts/map/demos/map-shape-plot-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MapShapePlotDemo from './MapShapePlotDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MapShapePlotDemo, { ClientProvider }); diff --git a/docs/data/charts/map/MapZoomControl.tsx b/docs/data/charts/map/demos/map-zoom-control/MapZoomControl.tsx similarity index 94% rename from docs/data/charts/map/MapZoomControl.tsx rename to docs/data/charts/map/demos/map-zoom-control/MapZoomControl.tsx index fa26d33c9b1ac..89139ee8b9caa 100644 --- a/docs/data/charts/map/MapZoomControl.tsx +++ b/docs/data/charts/map/demos/map-zoom-control/MapZoomControl.tsx @@ -11,18 +11,13 @@ import Typography from '@mui/material/Typography'; import { feature as topojsonFeature } from 'topojson-client'; import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; import USATopology from 'us-atlas/states-10m.json'; -import { - Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium, - MapZoomView, -} from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; +import type { MapZoomView } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; +import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; import { useChartPremiumApiRef } from '@mui/x-charts-premium/hooks'; -import { - D3NamedProjection, - GeoDataPlot, - Graticule, -} from '@mui/x-charts-premium/Map'; +import type { D3NamedProjection } from '@mui/x-charts-premium/Map'; +import { GeoDataPlot, Graticule } from '@mui/x-charts-premium/Map'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { type ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; +import type { ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; const countries = topojsonFeature( countriesTopology as any, @@ -96,6 +91,7 @@ function getGeoDataForProjection(projection: D3NamedProjection) { } export default function MapZoomControl() { + // @focus-start @padding 1 const [projection, setProjection] = React.useState('naturalEarth1'); const apiRef = useChartPremiumApiRef<'mapShape'>(); @@ -294,4 +290,5 @@ export default function MapZoomControl() { ); + // @focus-end } diff --git a/docs/data/charts/map/demos/map-zoom-control/client.ts b/docs/data/charts/map/demos/map-zoom-control/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/map/demos/map-zoom-control/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/map/demos/map-zoom-control/index.ts b/docs/data/charts/map/demos/map-zoom-control/index.ts new file mode 100644 index 0000000000000..66ee49015a243 --- /dev/null +++ b/docs/data/charts/map/demos/map-zoom-control/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MapZoomControl from './MapZoomControl'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MapZoomControl, { ClientProvider }); diff --git a/docs/data/charts/map/MapZoomOptions.tsx b/docs/data/charts/map/demos/map-zoom-options/MapZoomOptions.tsx similarity index 96% rename from docs/data/charts/map/MapZoomOptions.tsx rename to docs/data/charts/map/demos/map-zoom-options/MapZoomOptions.tsx index a108f27057ca2..dfb0feff2c6dc 100644 --- a/docs/data/charts/map/MapZoomOptions.tsx +++ b/docs/data/charts/map/demos/map-zoom-options/MapZoomOptions.tsx @@ -13,13 +13,10 @@ import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; import USATopology from 'us-atlas/states-10m.json'; import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; import { useChartPremiumApiRef } from '@mui/x-charts-premium/hooks'; -import { - D3NamedProjection, - GeoDataPlot, - Graticule, -} from '@mui/x-charts-premium/Map'; +import type { D3NamedProjection } from '@mui/x-charts-premium/Map'; +import { GeoDataPlot, Graticule } from '@mui/x-charts-premium/Map'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { type ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; +import type { ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; const countries = topojsonFeature( countriesTopology as any, @@ -105,6 +102,7 @@ function isCylindricalProjection(projection: D3NamedProjection) { } export default function MapZoomOptions() { + // @focus-start @padding 1 const [projection, setProjection] = React.useState('naturalEarth1'); const apiRef = useChartPremiumApiRef<'mapShape'>(); @@ -248,4 +246,5 @@ export default function MapZoomOptions() { ); + // @focus-end } diff --git a/docs/data/charts/map/demos/map-zoom-options/client.ts b/docs/data/charts/map/demos/map-zoom-options/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/map/demos/map-zoom-options/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/map/demos/map-zoom-options/index.ts b/docs/data/charts/map/demos/map-zoom-options/index.ts new file mode 100644 index 0000000000000..975e8c5be38da --- /dev/null +++ b/docs/data/charts/map/demos/map-zoom-options/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MapZoomOptions from './MapZoomOptions'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MapZoomOptions, { ClientProvider }); diff --git a/docs/data/charts/map/MarsMap.tsx b/docs/data/charts/map/demos/mars-map/MarsMap.tsx similarity index 96% rename from docs/data/charts/map/MarsMap.tsx rename to docs/data/charts/map/demos/mars-map/MarsMap.tsx index 4a1147ad5ee9a..c6b889d44f5aa 100644 --- a/docs/data/charts/map/MarsMap.tsx +++ b/docs/data/charts/map/demos/mars-map/MarsMap.tsx @@ -8,8 +8,8 @@ import { useGeoPath } from '@mui/x-charts-premium/hooks'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip'; import { ContinuousColorLegend } from '@mui/x-charts-premium/ChartsLegend'; -import { type GeoProjection } from '@mui/x-charts-vendor/d3-geo'; -import { marsRegions, marsData, marsFeatures } from './marsRegions'; +import type { GeoProjection } from '@mui/x-charts-vendor/d3-geo'; +import { marsRegions, marsData, marsFeatures } from '../../marsRegions'; const MARS_IMAGE = '/static/x/charts/mars-viking-mdim21.jpg'; @@ -83,6 +83,7 @@ function MarsFeatureMarkers() { type ProjectionName = 'orthographic' | 'equirectangular'; export default function MarsMap() { + // @focus-start @padding 1 const [projection, setProjection] = React.useState('orthographic'); return ( @@ -146,4 +147,5 @@ export default function MarsMap() { ); + // @focus-end } diff --git a/docs/data/charts/map/demos/mars-map/client.ts b/docs/data/charts/map/demos/mars-map/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/map/demos/mars-map/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/map/demos/mars-map/index.ts b/docs/data/charts/map/demos/mars-map/index.ts new file mode 100644 index 0000000000000..dea8402ecccda --- /dev/null +++ b/docs/data/charts/map/demos/mars-map/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MarsMap from './MarsMap'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MarsMap, { ClientProvider }); diff --git a/docs/data/charts/map/ProjectionMapShape.tsx b/docs/data/charts/map/demos/projection-map-shape/ProjectionMapShape.tsx similarity index 93% rename from docs/data/charts/map/ProjectionMapShape.tsx rename to docs/data/charts/map/demos/projection-map-shape/ProjectionMapShape.tsx index 3cd1d7a454443..e68a02f766b0f 100644 --- a/docs/data/charts/map/ProjectionMapShape.tsx +++ b/docs/data/charts/map/demos/projection-map-shape/ProjectionMapShape.tsx @@ -9,13 +9,10 @@ import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; import USATopology from 'us-atlas/states-10m.json'; import { useChartPremiumApiRef } from '@mui/x-charts-premium/hooks'; import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { - D3NamedProjection, - GeoDataPlot, - Graticule, -} from '@mui/x-charts-premium/Map'; +import type { D3NamedProjection } from '@mui/x-charts-premium/Map'; +import { GeoDataPlot, Graticule } from '@mui/x-charts-premium/Map'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { type ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; +import type { ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; const countries = topojsonFeature( countriesTopology as any, @@ -75,6 +72,7 @@ function isConicProjection(projection: D3NamedProjection) { } export default function ProjectionMapShape() { + // @focus-start @padding 1 const [projection, setProjection] = React.useState('naturalEarth1'); @@ -122,4 +120,5 @@ export default function ProjectionMapShape() { ); + // @focus-end } diff --git a/docs/data/charts/map/demos/projection-map-shape/client.ts b/docs/data/charts/map/demos/projection-map-shape/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/map/demos/projection-map-shape/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/map/demos/projection-map-shape/index.ts b/docs/data/charts/map/demos/projection-map-shape/index.ts new file mode 100644 index 0000000000000..43d32be2b2f39 --- /dev/null +++ b/docs/data/charts/map/demos/projection-map-shape/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ProjectionMapShape from './ProjectionMapShape'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ProjectionMapShape, { ClientProvider }); diff --git a/docs/data/charts/map/RemoveAntarctica.tsx b/docs/data/charts/map/demos/remove-antarctica/RemoveAntarctica.tsx similarity index 91% rename from docs/data/charts/map/RemoveAntarctica.tsx rename to docs/data/charts/map/demos/remove-antarctica/RemoveAntarctica.tsx index b626a0a20008f..f8db49422180e 100644 --- a/docs/data/charts/map/RemoveAntarctica.tsx +++ b/docs/data/charts/map/demos/remove-antarctica/RemoveAntarctica.tsx @@ -11,10 +11,10 @@ import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { type ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; -import { type MapShapeValueType } from '@mui/x-charts-premium/models'; -import { internetUsageByCountry } from '../dataset/internetUsageByCountry'; -import { countryData, withCountryCodeAsName } from '../dataset/countryData'; +import type { ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; +import type { MapShapeValueType } from '@mui/x-charts-premium/models'; +import { internetUsageByCountry } from '../../../dataset/internetUsageByCountry'; +import { countryData, withCountryCodeAsName } from '../../../dataset/countryData'; const projections = [ 'equirectangular', @@ -41,6 +41,7 @@ const countriesWithoutAntarctica = { }; export default function RemoveAntarctica() { + // @focus-start @padding 1 const [mode, setMode] = React.useState< 'with-antarctica' | 'geoDataFiltering' | 'seriesOnly' >('geoDataFiltering'); @@ -93,6 +94,7 @@ export default function RemoveAntarctica() { ); + // @focus-end } const settings = { diff --git a/docs/data/charts/map/demos/remove-antarctica/client.ts b/docs/data/charts/map/demos/remove-antarctica/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/map/demos/remove-antarctica/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/map/demos/remove-antarctica/index.ts b/docs/data/charts/map/demos/remove-antarctica/index.ts new file mode 100644 index 0000000000000..e4af6c469e42c --- /dev/null +++ b/docs/data/charts/map/demos/remove-antarctica/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RemoveAntarctica from './RemoveAntarctica'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RemoveAntarctica, { ClientProvider }); diff --git a/docs/data/charts/map/TectonicPlates.tsx b/docs/data/charts/map/demos/tectonic-plates/TectonicPlates.tsx similarity index 93% rename from docs/data/charts/map/TectonicPlates.tsx rename to docs/data/charts/map/demos/tectonic-plates/TectonicPlates.tsx index ff9c344dab489..22faf3eeee640 100644 --- a/docs/data/charts/map/TectonicPlates.tsx +++ b/docs/data/charts/map/demos/tectonic-plates/TectonicPlates.tsx @@ -7,18 +7,15 @@ import ToggleButton from '@mui/material/ToggleButton'; import { feature as topojsonFeature } from 'topojson-client'; import countriesTopology from 'visionscarto-world-atlas/world/110m.json'; import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium'; -import { - MapShapePlot, - Graticule, - D3NamedProjection, -} from '@mui/x-charts-premium/Map'; +import type { D3NamedProjection } from '@mui/x-charts-premium/Map'; +import { MapShapePlot, Graticule } from '@mui/x-charts-premium/Map'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip'; -import { - type ExtendedFeature, - type ExtendedFeatureCollection, +import type { + ExtendedFeature, + ExtendedFeatureCollection, } from '@mui/x-charts-vendor/d3-geo'; -import tectonicPlates from '../dataset/tectonicPlates.json'; +import tectonicPlates from '../../../dataset/tectonicPlates.json'; const plates = tectonicPlates as unknown as ExtendedFeatureCollection; @@ -59,6 +56,7 @@ const countryData = countries.features.map((feature) => ({ })); export default function TectonicPlates() { + // @focus-start @padding 1 const [projection, setProjection] = React.useState('naturalEarth1'); @@ -135,4 +133,5 @@ export default function TectonicPlates() { ); + // @focus-end } diff --git a/docs/data/charts/map/demos/tectonic-plates/client.ts b/docs/data/charts/map/demos/tectonic-plates/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/map/demos/tectonic-plates/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/map/demos/tectonic-plates/index.ts b/docs/data/charts/map/demos/tectonic-plates/index.ts new file mode 100644 index 0000000000000..50f0fe7e972e8 --- /dev/null +++ b/docs/data/charts/map/demos/tectonic-plates/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TectonicPlates from './TectonicPlates'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TectonicPlates, { ClientProvider }); diff --git a/docs/data/charts/map/VisibleMapShape.tsx b/docs/data/charts/map/demos/visible-map-shape/VisibleMapShape.tsx similarity index 95% rename from docs/data/charts/map/VisibleMapShape.tsx rename to docs/data/charts/map/demos/visible-map-shape/VisibleMapShape.tsx index 58db25ce7c84a..5820012eaaecb 100644 --- a/docs/data/charts/map/VisibleMapShape.tsx +++ b/docs/data/charts/map/demos/visible-map-shape/VisibleMapShape.tsx @@ -7,12 +7,12 @@ import { GeoDataPlot, MapShapePlot } from '@mui/x-charts-premium/Map'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; import { ChartsLegend } from '@mui/x-charts-premium/ChartsLegend'; import { ChartsTooltip } from '@mui/x-charts-premium/ChartsTooltip'; -import { type ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; +import type { ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; import { withCountryCodeAsName, countriesInContinent, countryData, -} from '../dataset/countryData'; +} from '../../../dataset/countryData'; const countries = withCountryCodeAsName( topojsonFeature( @@ -37,6 +37,7 @@ const oceania = getContinentData('Oceania'); export default function VisibleMapShape() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/map/demos/visible-map-shape/client.ts b/docs/data/charts/map/demos/visible-map-shape/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/map/demos/visible-map-shape/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/map/demos/visible-map-shape/index.ts b/docs/data/charts/map/demos/visible-map-shape/index.ts new file mode 100644 index 0000000000000..466d98d927c5a --- /dev/null +++ b/docs/data/charts/map/demos/visible-map-shape/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import VisibleMapShape from './VisibleMapShape'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, VisibleMapShape, { ClientProvider }); diff --git a/docs/data/charts/map/map.md b/docs/data/charts/map/map.md index b15278bebafd4..61c002d4ef261 100644 --- a/docs/data/charts/map/map.md +++ b/docs/data/charts/map/map.md @@ -20,7 +20,7 @@ The map provider `ChartsGeoDataProviderPremium` uses three main props: - `projection`: a string that defines how the objects should be projected on the SVG. - `series`: the data associated to the geographical objects of type `'mapShape'`. -{{"demo": "BasicGeoDataPlot.js"}} +{{"component": "file://./demos/basic-geo-data-plot/index.ts"}} ## Composition @@ -54,7 +54,7 @@ so one plot renders both layers and CSS styles them independently: colored plate below, country outlines on top for orientation. Toggle between a flat `naturalEarth1` map and an `orthographic` globe. -{{"demo": "TectonicPlates.js"}} +{{"component": "file://./demos/tectonic-plates/index.ts"}} ## Rendering the base map with `GeoDataPlot` @@ -63,7 +63,7 @@ It is meant to render the base map—the geography itself—without any data ser The `fill`, `stroke`, and `strokeWidth` props apply uniformly to all features, so use them to style the background layer. -{{"demo": "GeoDataPlotDemo.js"}} +{{"component": "file://./demos/geo-data-plot-demo/index.ts"}} ## Adding a base map raster with `MapImagePlot` @@ -86,7 +86,7 @@ The provider is not tied to Earth—`geoData` accepts any GeoJSON `FeatureCollec The demo below maps the 30 USGS Mars Chart quadrangles colored by mean elevation over a Viking surface mosaic, with notable landmarks and mission sites, and a projection toggle. -{{"demo": "MarsMap.js"}} +{{"component": "file://./demos/mars-map/index.ts"}} :::warning Reprojection reads the image pixels on a canvas, so the source must be same-origin or served @@ -97,7 +97,7 @@ with CORS headers. The `projection` prop accepts either a d3-geo projection name or a `GeoProjection` instance. -{{"demo": "ProjectionMapShape.js"}} +{{"component": "file://./demos/projection-map-shape/index.ts"}} ### Conic projections @@ -107,7 +107,7 @@ So it's recommended to keep those parallels close to the area you want to displa Here you can try different countries and play with projection and parallels to see its impact. -{{"demo": "CountryProjectionShape.js"}} +{{"component": "file://./demos/country-projection-shape/index.ts"}} ## Plotting series with `MapShapePlot` @@ -115,7 +115,7 @@ Here you can try different countries and play with projection and parallels to s Stacking it on top of a `GeoDataPlot` is convenient for highlighting a subset of features over the full geography. -{{"demo": "MapShapePlotDemo.js"}} +{{"component": "file://./demos/map-shape-plot-demo/index.ts"}} ## Matching features with `geoFeatureKey` @@ -156,7 +156,7 @@ But the data from Our World in Data merge them. Returning `'Somalia'` for both gives them the same key, so the single `{ name: 'Somalia' }` series item highlights the two shapes at once. -{{"demo": "GeoFeatureKeyMapShape.js"}} +{{"component": "file://./demos/geo-feature-key-map-shape/index.ts"}} ## Mapping values to colors @@ -202,7 +202,7 @@ Specify the `unknownColor` property in the `colorMap` to render them. By using `unknownColor` instead of displaying the `GeoDataPlot` as a background, you enable the tooltip for those shapes without data. ::: -{{"demo": "ColorScaleMapShape.js"}} +{{"component": "file://./demos/color-scale-map-shape/index.ts"}} ## Using a dataset @@ -251,7 +251,7 @@ See the [Dataset](/x/react-charts/dataset/) page to learn more. It receives the click event and a `MapShapeItemIdentifier` that identifies the clicked item through its `seriesId` and `name`. -{{"demo": "MapShapeClick.js"}} +{{"component": "file://./demos/map-shape-click/index.ts"}} ## Managing the highlight with `highlightScope` @@ -261,7 +261,7 @@ affects the rendering. The `highlight` option decides which items are emphasized the `fade` option decides which items are dimmed (`'series'` for the rest of the same series, `'global'` for every shape in every series). -{{"demo": "HighlightedMapShape.js"}} +{{"component": "file://./demos/highlighted-map-shape/index.ts"}} ## Zoom @@ -307,7 +307,7 @@ You can also modify the zoom result with: - `minZoomLevel`/`maxZoomLevel`: Clamp the `zoomLevel` between those two values. - `maxEmptySpace`: The maximal space left empty while dragging the map. It's a ratio of the drawing area size. For example `maxEmptySpace=0.2` means you can not leave more than 20% of the drawing area empty when dragging the map. -{{"demo": "MapZoomOptions.js"}} +{{"component": "file://./demos/map-zoom-options/index.ts"}} ### Control @@ -319,7 +319,7 @@ The view is made of three properties: - `center`: `[number, number]` The long/lat coordinates in degree of the point at the center of the projection. - `translation`: `[number, number]` The translation of the map as a ratio of the drawing area. -{{"demo": "MapZoomControl.js"}} +{{"component": "file://./demos/map-zoom-control/index.ts"}} ## Managing visibility from the legend @@ -327,14 +327,14 @@ When `toggleVisibilityOnClick` is set on the `ChartsLegend`, clicking on a serie its visibility. Hidden series are skipped by `MapShapePlot` so the underlying base map stays visible. -{{"demo": "VisibleMapShape.js"}} +{{"component": "file://./demos/visible-map-shape/index.ts"}} ## Exporting Maps can be exported as an image or as a PDF, like any other chart. See the [Export](/x/react-charts/export/) page for the complete documentation. -{{"demo": "ExportMap.js"}} +{{"component": "file://./demos/export-map/index.ts"}} ## Common practice @@ -346,4 +346,4 @@ There are two ways to remove it:. - Render only the countries in series by removing the `` - Filter out Antarctica from the `geoData` -{{"demo": "RemoveAntarctica.js"}} +{{"component": "file://./demos/remove-antarctica/index.ts"}} diff --git a/docs/data/charts/map/marsRegions.ts b/docs/data/charts/map/marsRegions.ts index dda1965fc9626..6e03bddd0e58f 100644 --- a/docs/data/charts/map/marsRegions.ts +++ b/docs/data/charts/map/marsRegions.ts @@ -1,4 +1,4 @@ -import { type ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; +import type { ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo'; /** * The 30 USGS Mars Chart (MC) quadrangles, tiling the whole planet. diff --git a/docs/data/charts/performance/BarSampling.js b/docs/data/charts/performance/BarSampling.js deleted file mode 100644 index 12960d940d06a..0000000000000 --- a/docs/data/charts/performance/BarSampling.js +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Switch from '@mui/material/Switch'; -import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; -import tripCounts from '../dataset/nyc-yellow-taxi-2024-trip-count.json'; - -// Real dataset: NYC yellow taxi trips per hour over 2024 (8,781 points). Each entry is -// `[dayOfYear, hour, tripCount]`. -const data = tripCounts.map((entry) => entry[2]); -const categories = data.map((_, index) => String(index)); - -const compactFormatter = new Intl.NumberFormat('en-US', { notation: 'compact' }); - -export default function BarSampling() { - const [enabled, setEnabled] = React.useState(true); - - return ( - - setEnabled(event.target.checked)} - /> - } - label={`Sampling ${enabled ? 'on' : 'off'} (${data.length.toLocaleString()} bars — zoom in to reach the raw data)`} - /> - compactFormatter.format(value), - }, - ]} - series={[{ data, label: 'Trips' }]} - height={300} - sampling={enabled ? 'minmax' : 'none'} - /> - - ); -} diff --git a/docs/data/charts/performance/LineSampling.js b/docs/data/charts/performance/LineSampling.js deleted file mode 100644 index 8a7fc7e0ded7f..0000000000000 --- a/docs/data/charts/performance/LineSampling.js +++ /dev/null @@ -1,57 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; -import { electricityGeneration2024Hourly } from '../dataset/electricityGeneration2024Hourly'; - -// Real dataset: average electricity generation (MW) for every hour of 2024 (8,784 points). -const data = electricityGeneration2024Hourly.DEU; -const xData = data.map((_, index) => index); - -const compactFormatter = new Intl.NumberFormat('en-US', { notation: 'compact' }); - -const METHODS = [ - { value: 'none', label: 'None' }, - { value: 'm4', label: 'M4' }, - { value: 'minmax', label: 'Min/max' }, - { value: 'lttb', label: 'LTTB' }, -]; - -export default function LineSampling() { - const [sampling, setSampling] = React.useState('m4'); - - return ( - - value !== null && setSampling(value)} - aria-label="Sampling method" - > - {METHODS.map((option) => ( - - {option.label} - - ))} - - - {data.length.toLocaleString()} hourly points — zoom in to reach the raw data - - compactFormatter.format(value), - }, - ]} - series={[{ data, label: 'Generation (MW)', showMark: false }]} - height={300} - sampling={sampling} - /> - - ); -} diff --git a/docs/data/charts/performance/LineSamplingNulls.js b/docs/data/charts/performance/LineSamplingNulls.js deleted file mode 100644 index 4480cd0d7aca0..0000000000000 --- a/docs/data/charts/performance/LineSamplingNulls.js +++ /dev/null @@ -1,54 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Switch from '@mui/material/Switch'; -import Typography from '@mui/material/Typography'; -import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; -import { electricityGeneration2024Hourly } from '../dataset/electricityGeneration2024Hourly'; - -// Real dataset: average electricity generation (MW) for every hour of 2024 (8,784 points). -const base = electricityGeneration2024Hourly.DEU; -const xData = base.map((_, index) => index); - -const compactFormatter = new Intl.NumberFormat('en-US', { notation: 'compact' }); - -// Same series with a few hour-long gaps (null) punched in. -const withGaps = base.map((value, index) => - index % 1500 >= 700 && index % 1500 < 760 ? null : value, -); - -export default function LineSamplingNulls() { - const [hasGaps, setHasGaps] = React.useState(true); - const data = hasGaps ? withGaps : base; - - return ( - - setHasGaps(event.target.checked)} - /> - } - label="Insert null gaps" - /> - - Sampling is set to m4. Series with null values are - still sampled; the gaps are preserved, so the line breaks instead of bridging - them. - - compactFormatter.format(value), - }, - ]} - series={[{ data, label: 'Generation (MW)', showMark: false }]} - height={300} - sampling="m4" - /> - - ); -} diff --git a/docs/data/charts/performance/SamplingMethodComparison.js b/docs/data/charts/performance/SamplingMethodComparison.js deleted file mode 100644 index aac8f96d9cd40..0000000000000 --- a/docs/data/charts/performance/SamplingMethodComparison.js +++ /dev/null @@ -1,61 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; - -import { electricityGeneration2024Hourly } from '../dataset/electricityGeneration2024Hourly'; - -// Real dataset: average electricity generation (MW) for every hour of 2024 (8,784 points). -const data = electricityGeneration2024Hourly.DEU; -const xData = data.map((_, index) => index); - -const compactFormatter = new Intl.NumberFormat('en-US', { notation: 'compact' }); - -const METHODS = [ - { value: 'none', label: 'None — every point' }, - { value: 'minmax', label: 'Min/max' }, - { value: 'm4', label: 'M4' }, - { value: 'lttb', label: 'LTTB' }, -]; - -export default function SamplingMethodComparison() { - // Shared controlled zoom so the charts stay aligned: zooming one zooms all, comparing the methods - // over the same range. - const [zoomData, setZoomData] = React.useState([ - { axisId: 'x', start: 0, end: 100 }, - ]); - - return ( - - {METHODS.map((method) => ( - - - {method.label} - - compactFormatter.format(value), - }, - ]} - height={160} - sampling={method.value} - zoomData={zoomData} - onZoomChange={setZoomData} - hideLegend - /> - - ))} - - ); -} diff --git a/docs/data/charts/performance/BarSampling.tsx b/docs/data/charts/performance/demos/bar-sampling/BarSampling.tsx similarity index 92% rename from docs/data/charts/performance/BarSampling.tsx rename to docs/data/charts/performance/demos/bar-sampling/BarSampling.tsx index 33700ae1a5e0a..047413e1413b8 100644 --- a/docs/data/charts/performance/BarSampling.tsx +++ b/docs/data/charts/performance/demos/bar-sampling/BarSampling.tsx @@ -3,7 +3,7 @@ import Stack from '@mui/material/Stack'; import FormControlLabel from '@mui/material/FormControlLabel'; import Switch from '@mui/material/Switch'; import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; -import tripCounts from '../dataset/nyc-yellow-taxi-2024-trip-count.json'; +import tripCounts from '../../../dataset/nyc-yellow-taxi-2024-trip-count.json'; // Real dataset: NYC yellow taxi trips per hour over 2024 (8,781 points). Each entry is // `[dayOfYear, hour, tripCount]`. @@ -13,6 +13,7 @@ const categories = data.map((_, index) => String(index)); const compactFormatter = new Intl.NumberFormat('en-US', { notation: 'compact' }); export default function BarSampling() { + // @focus-start @padding 1 const [enabled, setEnabled] = React.useState(true); return ( @@ -41,4 +42,5 @@ export default function BarSampling() { /> ); + // @focus-end } diff --git a/docs/data/charts/performance/demos/bar-sampling/client.ts b/docs/data/charts/performance/demos/bar-sampling/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/performance/demos/bar-sampling/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/performance/demos/bar-sampling/index.ts b/docs/data/charts/performance/demos/bar-sampling/index.ts new file mode 100644 index 0000000000000..601bffbfda8e8 --- /dev/null +++ b/docs/data/charts/performance/demos/bar-sampling/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BarSampling from './BarSampling'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BarSampling, { ClientProvider }); diff --git a/docs/data/charts/performance/LineSamplingNulls.tsx b/docs/data/charts/performance/demos/line-sampling-nulls/LineSamplingNulls.tsx similarity index 92% rename from docs/data/charts/performance/LineSamplingNulls.tsx rename to docs/data/charts/performance/demos/line-sampling-nulls/LineSamplingNulls.tsx index bf934555c5019..5a37eb29bf632 100644 --- a/docs/data/charts/performance/LineSamplingNulls.tsx +++ b/docs/data/charts/performance/demos/line-sampling-nulls/LineSamplingNulls.tsx @@ -4,7 +4,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'; import Switch from '@mui/material/Switch'; import Typography from '@mui/material/Typography'; import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; -import { electricityGeneration2024Hourly } from '../dataset/electricityGeneration2024Hourly'; +import { electricityGeneration2024Hourly } from '../../../dataset/electricityGeneration2024Hourly'; // Real dataset: average electricity generation (MW) for every hour of 2024 (8,784 points). const base = electricityGeneration2024Hourly.DEU; @@ -18,6 +18,7 @@ const withGaps: (number | null)[] = base.map((value, index) => ); export default function LineSamplingNulls() { + // @focus-start @padding 1 const [hasGaps, setHasGaps] = React.useState(true); const data = hasGaps ? withGaps : base; @@ -51,4 +52,5 @@ export default function LineSamplingNulls() { /> ); + // @focus-end } diff --git a/docs/data/charts/performance/demos/line-sampling-nulls/client.ts b/docs/data/charts/performance/demos/line-sampling-nulls/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/performance/demos/line-sampling-nulls/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/performance/demos/line-sampling-nulls/index.ts b/docs/data/charts/performance/demos/line-sampling-nulls/index.ts new file mode 100644 index 0000000000000..65e71bfd499ce --- /dev/null +++ b/docs/data/charts/performance/demos/line-sampling-nulls/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LineSamplingNulls from './LineSamplingNulls'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LineSamplingNulls, { ClientProvider }); diff --git a/docs/data/charts/performance/LineSampling.tsx b/docs/data/charts/performance/demos/line-sampling/LineSampling.tsx similarity index 92% rename from docs/data/charts/performance/LineSampling.tsx rename to docs/data/charts/performance/demos/line-sampling/LineSampling.tsx index e33b90cd0f30a..b006bd0d0fd89 100644 --- a/docs/data/charts/performance/LineSampling.tsx +++ b/docs/data/charts/performance/demos/line-sampling/LineSampling.tsx @@ -4,7 +4,7 @@ import Typography from '@mui/material/Typography'; import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; -import { electricityGeneration2024Hourly } from '../dataset/electricityGeneration2024Hourly'; +import { electricityGeneration2024Hourly } from '../../../dataset/electricityGeneration2024Hourly'; // Real dataset: average electricity generation (MW) for every hour of 2024 (8,784 points). const data = electricityGeneration2024Hourly.DEU; @@ -22,6 +22,7 @@ const METHODS = [ type Method = (typeof METHODS)[number]['value']; export default function LineSampling() { + // @focus-start @padding 1 const [sampling, setSampling] = React.useState('m4'); return ( @@ -56,4 +57,5 @@ export default function LineSampling() { /> ); + // @focus-end } diff --git a/docs/data/charts/performance/demos/line-sampling/client.ts b/docs/data/charts/performance/demos/line-sampling/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/performance/demos/line-sampling/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/performance/demos/line-sampling/index.ts b/docs/data/charts/performance/demos/line-sampling/index.ts new file mode 100644 index 0000000000000..65f9df04216d9 --- /dev/null +++ b/docs/data/charts/performance/demos/line-sampling/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LineSampling from './LineSampling'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LineSampling, { ClientProvider }); diff --git a/docs/data/charts/performance/SamplingMethodComparison.tsx b/docs/data/charts/performance/demos/sampling-method-comparison/SamplingMethodComparison.tsx similarity index 92% rename from docs/data/charts/performance/SamplingMethodComparison.tsx rename to docs/data/charts/performance/demos/sampling-method-comparison/SamplingMethodComparison.tsx index e9c8acb766c7f..9ba9d39d83d25 100644 --- a/docs/data/charts/performance/SamplingMethodComparison.tsx +++ b/docs/data/charts/performance/demos/sampling-method-comparison/SamplingMethodComparison.tsx @@ -3,7 +3,7 @@ import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; import type { ZoomData } from '@mui/x-charts-pro/models'; -import { electricityGeneration2024Hourly } from '../dataset/electricityGeneration2024Hourly'; +import { electricityGeneration2024Hourly } from '../../../dataset/electricityGeneration2024Hourly'; // Real dataset: average electricity generation (MW) for every hour of 2024 (8,784 points). const data = electricityGeneration2024Hourly.DEU; @@ -21,6 +21,7 @@ const METHODS = [ export default function SamplingMethodComparison() { // Shared controlled zoom so the charts stay aligned: zooming one zooms all, comparing the methods // over the same range. + // @focus-start @padding 1 const [zoomData, setZoomData] = React.useState([ { axisId: 'x', start: 0, end: 100 }, ]); @@ -58,4 +59,5 @@ export default function SamplingMethodComparison() { ))} ); + // @focus-end } diff --git a/docs/data/charts/performance/demos/sampling-method-comparison/client.ts b/docs/data/charts/performance/demos/sampling-method-comparison/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/performance/demos/sampling-method-comparison/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/performance/demos/sampling-method-comparison/index.ts b/docs/data/charts/performance/demos/sampling-method-comparison/index.ts new file mode 100644 index 0000000000000..86d8929edd5e1 --- /dev/null +++ b/docs/data/charts/performance/demos/sampling-method-comparison/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SamplingMethodComparison from './SamplingMethodComparison'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SamplingMethodComparison, { ClientProvider }); diff --git a/docs/data/charts/performance/performance.md b/docs/data/charts/performance/performance.md index 60f0c2961a854..e2a6fd04b27f9 100644 --- a/docs/data/charts/performance/performance.md +++ b/docs/data/charts/performance/performance.md @@ -136,7 +136,7 @@ The zoom `minSpan` is a percentage, so the most zoomed-in view always renders ab The same 8,784-point series rendered with each method at the same zoom. `'none'` is the reference (every point); the others approximate it with far fewer elements while preserving the overall shape. -{{"demo": "SamplingMethodComparison.js"}} +{{"component": "file://./demos/sampling-method-comparison/index.ts"}} ### Bar sampling @@ -147,7 +147,7 @@ Any method other than `'none'` enables it (bars always use a min/max envelope). ``` -{{"demo": "BarSampling.js"}} +{{"component": "file://./demos/bar-sampling/index.ts"}} ### Line sampling @@ -158,8 +158,8 @@ See [Comparing methods](#comparing-methods). ``` -{{"demo": "LineSampling.js"}} +{{"component": "file://./demos/line-sampling/index.ts"}} Series with `null` values are still sampled; the gaps are preserved, so the line breaks at them instead of bridging them. -{{"demo": "LineSamplingNulls.js"}} +{{"component": "file://./demos/line-sampling-nulls/index.ts"}} diff --git a/docs/data/charts/pie-demo/PieChartWithCenterLabel.js b/docs/data/charts/pie-demo/PieChartWithCenterLabel.js deleted file mode 100644 index 9e094cd1abca9..0000000000000 --- a/docs/data/charts/pie-demo/PieChartWithCenterLabel.js +++ /dev/null @@ -1,40 +0,0 @@ -import * as React from 'react'; -import { PieChart } from '@mui/x-charts/PieChart'; -import { useDrawingArea } from '@mui/x-charts/hooks'; -import { styled } from '@mui/material/styles'; - -const data = [ - { value: 5, label: 'A' }, - { value: 10, label: 'B' }, - { value: 15, label: 'C' }, - { value: 20, label: 'D' }, -]; - -const size = { - width: 200, - height: 200, -}; - -const StyledText = styled('text')(({ theme }) => ({ - fill: theme.palette.text.primary, - textAnchor: 'middle', - dominantBaseline: 'central', - fontSize: 20, -})); - -function PieCenterLabel({ children }) { - const { width, height, left, top } = useDrawingArea(); - return ( - - {children} - - ); -} - -export default function PieChartWithCenterLabel() { - return ( - - Center label - - ); -} diff --git a/docs/data/charts/pie-demo/PieChartWithCenterLabel.tsx.preview b/docs/data/charts/pie-demo/PieChartWithCenterLabel.tsx.preview deleted file mode 100644 index 6bf1cb9311579..0000000000000 --- a/docs/data/charts/pie-demo/PieChartWithCenterLabel.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - Center label - \ No newline at end of file diff --git a/docs/data/charts/pie-demo/PieChartWithCustomLegendAndTooltip.js b/docs/data/charts/pie-demo/PieChartWithCustomLegendAndTooltip.js deleted file mode 100644 index de65dbee2cb3b..0000000000000 --- a/docs/data/charts/pie-demo/PieChartWithCustomLegendAndTooltip.js +++ /dev/null @@ -1,44 +0,0 @@ -import { PieChart } from '@mui/x-charts/PieChart'; - -function HTMLDiamond({ className, color }) { - return ( -
- ); -} - -function SVGStar({ className, color }) { - return ( - - - - ); -} - -export default function PieChartWithCustomLegendAndTooltip() { - return ( - - ); -} diff --git a/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.js b/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.js deleted file mode 100644 index f069bce01c5e8..0000000000000 --- a/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.js +++ /dev/null @@ -1,42 +0,0 @@ -import { PieChart, pieClasses } from '@mui/x-charts/PieChart'; - -const data = [ - { label: 'Group A', value: 400, color: '#0088FE' }, - { label: 'Group B', value: 300, color: '#00C49F' }, - { label: 'Group C', value: 300, color: '#FFBB28' }, - { label: 'Group D', value: 200, color: '#FF8042' }, -]; - -const sizing = { - margin: { right: 5 }, - width: 200, - height: 200, - hideLegend: true, -}; -const TOTAL = data.map((item) => item.value).reduce((a, b) => a + b, 0); - -const getArcLabel = (params) => { - const percent = params.value / TOTAL; - return `${(percent * 100).toFixed(0)}%`; -}; - -export default function PieChartWithCustomizedLabel() { - return ( - - ); -} diff --git a/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.tsx.preview b/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.tsx.preview deleted file mode 100644 index be5e376b5632b..0000000000000 --- a/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/pie-demo/PieChartWithPaddingAngle.js b/docs/data/charts/pie-demo/PieChartWithPaddingAngle.js deleted file mode 100644 index 6fc467a22a96f..0000000000000 --- a/docs/data/charts/pie-demo/PieChartWithPaddingAngle.js +++ /dev/null @@ -1,40 +0,0 @@ -import Stack from '@mui/material/Stack'; -import { PieChart } from '@mui/x-charts/PieChart'; - -const data = [ - { label: 'Group A', value: 400 }, - { label: 'Group B', value: 300 }, - { label: 'Group C', value: 300 }, - { label: 'Group D', value: 200 }, -]; - -export default function PieChartWithPaddingAngle() { - return ( - - - - - ); -} diff --git a/docs/data/charts/pie-demo/StraightAnglePieChart.js b/docs/data/charts/pie-demo/StraightAnglePieChart.js deleted file mode 100644 index ed1e1450dd1b3..0000000000000 --- a/docs/data/charts/pie-demo/StraightAnglePieChart.js +++ /dev/null @@ -1,26 +0,0 @@ -import { PieChart } from '@mui/x-charts/PieChart'; - -const data = [ - { label: 'Group A', value: 400 }, - { label: 'Group B', value: 300 }, - { label: 'Group C', value: 300 }, - { label: 'Group D', value: 200 }, - { label: 'Group E', value: 278 }, - { label: 'Group F', value: 189 }, -]; - -export default function StraightAnglePieChart() { - return ( - - ); -} diff --git a/docs/data/charts/pie-demo/StraightAnglePieChart.tsx.preview b/docs/data/charts/pie-demo/StraightAnglePieChart.tsx.preview deleted file mode 100644 index 48beee669090b..0000000000000 --- a/docs/data/charts/pie-demo/StraightAnglePieChart.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/pie-demo/TwoLevelPieChart.js b/docs/data/charts/pie-demo/TwoLevelPieChart.js deleted file mode 100644 index 702457ef39990..0000000000000 --- a/docs/data/charts/pie-demo/TwoLevelPieChart.js +++ /dev/null @@ -1,45 +0,0 @@ -import { PieChart } from '@mui/x-charts/PieChart'; -import Box from '@mui/material/Box'; - -const data1 = [ - { label: 'Group A', value: 400 }, - { label: 'Group B', value: 300 }, - { label: 'Group C', value: 300 }, - { label: 'Group D', value: 200 }, -]; - -const data2 = [ - { label: 'A1', value: 100 }, - { label: 'A2', value: 300 }, - { label: 'B1', value: 100 }, - { label: 'B2', value: 80 }, - { label: 'B3', value: 40 }, - { label: 'B4', value: 30 }, - { label: 'B5', value: 50 }, - { label: 'C1', value: 100 }, - { label: 'C2', value: 200 }, - { label: 'D1', value: 150 }, - { label: 'D2', value: 50 }, -]; - -export default function TwoLevelPieChart() { - return ( - - - - ); -} diff --git a/docs/data/charts/pie-demo/TwoLevelPieChart.tsx.preview b/docs/data/charts/pie-demo/TwoLevelPieChart.tsx.preview deleted file mode 100644 index 9411cba265c69..0000000000000 --- a/docs/data/charts/pie-demo/TwoLevelPieChart.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/pie-demo/PieChartWithCenterLabel.tsx b/docs/data/charts/pie-demo/demos/pie-chart-with-center-label/PieChartWithCenterLabel.tsx similarity index 95% rename from docs/data/charts/pie-demo/PieChartWithCenterLabel.tsx rename to docs/data/charts/pie-demo/demos/pie-chart-with-center-label/PieChartWithCenterLabel.tsx index 8d619a7e5b988..d83e496de5953 100644 --- a/docs/data/charts/pie-demo/PieChartWithCenterLabel.tsx +++ b/docs/data/charts/pie-demo/demos/pie-chart-with-center-label/PieChartWithCenterLabel.tsx @@ -33,8 +33,10 @@ function PieCenterLabel({ children }: { children: React.ReactNode }) { export default function PieChartWithCenterLabel() { return ( + // @focus-start @padding 2 Center label + // @focus-end ); } diff --git a/docs/data/charts/pie-demo/demos/pie-chart-with-center-label/client.ts b/docs/data/charts/pie-demo/demos/pie-chart-with-center-label/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pie-demo/demos/pie-chart-with-center-label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pie-demo/demos/pie-chart-with-center-label/index.ts b/docs/data/charts/pie-demo/demos/pie-chart-with-center-label/index.ts new file mode 100644 index 0000000000000..10f1d8d1367a0 --- /dev/null +++ b/docs/data/charts/pie-demo/demos/pie-chart-with-center-label/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PieChartWithCenterLabel from './PieChartWithCenterLabel'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PieChartWithCenterLabel, { ClientProvider }); diff --git a/docs/data/charts/pie-demo/PieChartWithCustomLegendAndTooltip.tsx b/docs/data/charts/pie-demo/demos/pie-chart-with-custom-legend-and-tooltip/PieChartWithCustomLegendAndTooltip.tsx similarity index 89% rename from docs/data/charts/pie-demo/PieChartWithCustomLegendAndTooltip.tsx rename to docs/data/charts/pie-demo/demos/pie-chart-with-custom-legend-and-tooltip/PieChartWithCustomLegendAndTooltip.tsx index 69c78ae808fe8..d5061043a41bc 100644 --- a/docs/data/charts/pie-demo/PieChartWithCustomLegendAndTooltip.tsx +++ b/docs/data/charts/pie-demo/demos/pie-chart-with-custom-legend-and-tooltip/PieChartWithCustomLegendAndTooltip.tsx @@ -1,5 +1,5 @@ import { PieChart } from '@mui/x-charts/PieChart'; -import { ChartsLabelCustomMarkProps } from '@mui/x-charts/ChartsLabel'; +import type { ChartsLabelCustomMarkProps } from '@mui/x-charts/ChartsLabel'; function HTMLDiamond({ className, color }: ChartsLabelCustomMarkProps) { return ( @@ -24,6 +24,7 @@ function SVGStar({ className, color }: ChartsLabelCustomMarkProps) { export default function PieChartWithCustomLegendAndTooltip() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/pie-demo/demos/pie-chart-with-custom-legend-and-tooltip/client.ts b/docs/data/charts/pie-demo/demos/pie-chart-with-custom-legend-and-tooltip/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pie-demo/demos/pie-chart-with-custom-legend-and-tooltip/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pie-demo/demos/pie-chart-with-custom-legend-and-tooltip/index.ts b/docs/data/charts/pie-demo/demos/pie-chart-with-custom-legend-and-tooltip/index.ts new file mode 100644 index 0000000000000..4e012e49c1234 --- /dev/null +++ b/docs/data/charts/pie-demo/demos/pie-chart-with-custom-legend-and-tooltip/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PieChartWithCustomLegendAndTooltip from './PieChartWithCustomLegendAndTooltip'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PieChartWithCustomLegendAndTooltip, { ClientProvider }); diff --git a/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.tsx b/docs/data/charts/pie-demo/demos/pie-chart-with-customized-label/PieChartWithCustomizedLabel.tsx similarity index 89% rename from docs/data/charts/pie-demo/PieChartWithCustomizedLabel.tsx rename to docs/data/charts/pie-demo/demos/pie-chart-with-customized-label/PieChartWithCustomizedLabel.tsx index 1cfe05071dd56..7f7e2e1930266 100644 --- a/docs/data/charts/pie-demo/PieChartWithCustomizedLabel.tsx +++ b/docs/data/charts/pie-demo/demos/pie-chart-with-customized-label/PieChartWithCustomizedLabel.tsx @@ -1,4 +1,4 @@ -import { DefaultizedPieValueType } from '@mui/x-charts/models'; +import type { DefaultizedPieValueType } from '@mui/x-charts/models'; import { PieChart, pieClasses } from '@mui/x-charts/PieChart'; const data = [ @@ -23,6 +23,7 @@ const getArcLabel = (params: DefaultizedPieValueType) => { export default function PieChartWithCustomizedLabel() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/pie-demo/demos/pie-chart-with-customized-label/client.ts b/docs/data/charts/pie-demo/demos/pie-chart-with-customized-label/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pie-demo/demos/pie-chart-with-customized-label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pie-demo/demos/pie-chart-with-customized-label/index.ts b/docs/data/charts/pie-demo/demos/pie-chart-with-customized-label/index.ts new file mode 100644 index 0000000000000..6e9a8c5faba80 --- /dev/null +++ b/docs/data/charts/pie-demo/demos/pie-chart-with-customized-label/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PieChartWithCustomizedLabel from './PieChartWithCustomizedLabel'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PieChartWithCustomizedLabel, { ClientProvider }); diff --git a/docs/data/charts/pie-demo/PieChartWithPaddingAngle.tsx b/docs/data/charts/pie-demo/demos/pie-chart-with-padding-angle/PieChartWithPaddingAngle.tsx similarity index 94% rename from docs/data/charts/pie-demo/PieChartWithPaddingAngle.tsx rename to docs/data/charts/pie-demo/demos/pie-chart-with-padding-angle/PieChartWithPaddingAngle.tsx index 6fc467a22a96f..dd227bda183ad 100644 --- a/docs/data/charts/pie-demo/PieChartWithPaddingAngle.tsx +++ b/docs/data/charts/pie-demo/demos/pie-chart-with-padding-angle/PieChartWithPaddingAngle.tsx @@ -11,6 +11,7 @@ const data = [ export default function PieChartWithPaddingAngle() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/pie-demo/demos/pie-chart-with-padding-angle/client.ts b/docs/data/charts/pie-demo/demos/pie-chart-with-padding-angle/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pie-demo/demos/pie-chart-with-padding-angle/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pie-demo/demos/pie-chart-with-padding-angle/index.ts b/docs/data/charts/pie-demo/demos/pie-chart-with-padding-angle/index.ts new file mode 100644 index 0000000000000..9bae8adc92f86 --- /dev/null +++ b/docs/data/charts/pie-demo/demos/pie-chart-with-padding-angle/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PieChartWithPaddingAngle from './PieChartWithPaddingAngle'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PieChartWithPaddingAngle, { ClientProvider }); diff --git a/docs/data/charts/pie-demo/StraightAnglePieChart.tsx b/docs/data/charts/pie-demo/demos/straight-angle-pie-chart/StraightAnglePieChart.tsx similarity index 91% rename from docs/data/charts/pie-demo/StraightAnglePieChart.tsx rename to docs/data/charts/pie-demo/demos/straight-angle-pie-chart/StraightAnglePieChart.tsx index ed1e1450dd1b3..ec643ac34bb00 100644 --- a/docs/data/charts/pie-demo/StraightAnglePieChart.tsx +++ b/docs/data/charts/pie-demo/demos/straight-angle-pie-chart/StraightAnglePieChart.tsx @@ -11,6 +11,7 @@ const data = [ export default function StraightAnglePieChart() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/pie-demo/demos/straight-angle-pie-chart/client.ts b/docs/data/charts/pie-demo/demos/straight-angle-pie-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pie-demo/demos/straight-angle-pie-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pie-demo/demos/straight-angle-pie-chart/index.ts b/docs/data/charts/pie-demo/demos/straight-angle-pie-chart/index.ts new file mode 100644 index 0000000000000..f75b3febe7465 --- /dev/null +++ b/docs/data/charts/pie-demo/demos/straight-angle-pie-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StraightAnglePieChart from './StraightAnglePieChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StraightAnglePieChart, { ClientProvider }); diff --git a/docs/data/charts/pie-demo/TwoLevelPieChart.tsx b/docs/data/charts/pie-demo/demos/two-level-pie-chart/TwoLevelPieChart.tsx similarity index 95% rename from docs/data/charts/pie-demo/TwoLevelPieChart.tsx rename to docs/data/charts/pie-demo/demos/two-level-pie-chart/TwoLevelPieChart.tsx index c507b963bd5d7..513c3e143c620 100644 --- a/docs/data/charts/pie-demo/TwoLevelPieChart.tsx +++ b/docs/data/charts/pie-demo/demos/two-level-pie-chart/TwoLevelPieChart.tsx @@ -24,6 +24,7 @@ const data2 = [ export default function TwoLevelPieChart() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/pie-demo/demos/two-level-pie-chart/client.ts b/docs/data/charts/pie-demo/demos/two-level-pie-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pie-demo/demos/two-level-pie-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pie-demo/demos/two-level-pie-chart/index.ts b/docs/data/charts/pie-demo/demos/two-level-pie-chart/index.ts new file mode 100644 index 0000000000000..25ec32837d0e6 --- /dev/null +++ b/docs/data/charts/pie-demo/demos/two-level-pie-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TwoLevelPieChart from './TwoLevelPieChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TwoLevelPieChart, { ClientProvider }); diff --git a/docs/data/charts/pie-demo/pie-demo.md b/docs/data/charts/pie-demo/pie-demo.md index 8228a427122fa..1f1a290b5d1b1 100644 --- a/docs/data/charts/pie-demo/pie-demo.md +++ b/docs/data/charts/pie-demo/pie-demo.md @@ -10,24 +10,24 @@ components: PieArc, PieArcLabel, PieArcLabelPlot, PieArcPlot, PieChart, PiePlot ## TwoLevelPieChart -{{"demo": "TwoLevelPieChart.js"}} +{{"component": "file://./demos/two-level-pie-chart/index.ts"}} ## StraightAnglePieChart -{{"demo": "StraightAnglePieChart.js"}} +{{"component": "file://./demos/straight-angle-pie-chart/index.ts"}} ## PieChartWithCustomizedLabel -{{"demo": "PieChartWithCustomizedLabel.js"}} +{{"component": "file://./demos/pie-chart-with-customized-label/index.ts"}} ## PieChartWithPaddingAngle -{{"demo": "PieChartWithPaddingAngle.js"}} +{{"component": "file://./demos/pie-chart-with-padding-angle/index.ts"}} ## PieChartWithCenterLabel -{{"demo": "PieChartWithCenterLabel.js"}} +{{"component": "file://./demos/pie-chart-with-center-label/index.ts"}} ## Pie chart with custom mark in legend and tooltip -{{"demo": "PieChartWithCustomLegendAndTooltip.js"}} +{{"component": "file://./demos/pie-chart-with-custom-legend-and-tooltip/index.ts"}} diff --git a/docs/data/charts/pie/BasicPie.js b/docs/data/charts/pie/BasicPie.js deleted file mode 100644 index ed7e30224e3bb..0000000000000 --- a/docs/data/charts/pie/BasicPie.js +++ /dev/null @@ -1,19 +0,0 @@ -import { PieChart } from '@mui/x-charts/PieChart'; - -export default function BasicPie() { - return ( - - ); -} diff --git a/docs/data/charts/pie/BasicPie.tsx.preview b/docs/data/charts/pie/BasicPie.tsx.preview deleted file mode 100644 index 28431a59a1325..0000000000000 --- a/docs/data/charts/pie/BasicPie.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/pie/DonutChart.js b/docs/data/charts/pie/DonutChart.js deleted file mode 100644 index 1606c71974fe5..0000000000000 --- a/docs/data/charts/pie/DonutChart.js +++ /dev/null @@ -1,24 +0,0 @@ -import { PieChart } from '@mui/x-charts/PieChart'; - -const data = [ - { label: 'Group A', value: 400, color: '#0088FE' }, - { label: 'Group B', value: 300, color: '#00C49F' }, - { label: 'Group C', value: 300, color: '#FFBB28' }, - { label: 'Group D', value: 200, color: '#FF8042' }, -]; - -const settings = { - margin: { right: 5 }, - width: 200, - height: 200, - hideLegend: true, -}; - -export default function DonutChart() { - return ( - - ); -} diff --git a/docs/data/charts/pie/DonutChart.tsx.preview b/docs/data/charts/pie/DonutChart.tsx.preview deleted file mode 100644 index 0f8b0bdb17e32..0000000000000 --- a/docs/data/charts/pie/DonutChart.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/pie/PieActiveArc.js b/docs/data/charts/pie/PieActiveArc.js deleted file mode 100644 index 58bb9538c6892..0000000000000 --- a/docs/data/charts/pie/PieActiveArc.js +++ /dev/null @@ -1,19 +0,0 @@ -import { PieChart } from '@mui/x-charts/PieChart'; -import { desktopOS, valueFormatter } from './webUsageStats'; - -export default function PieActiveArc() { - return ( - - ); -} diff --git a/docs/data/charts/pie/PieActiveArc.tsx.preview b/docs/data/charts/pie/PieActiveArc.tsx.preview deleted file mode 100644 index 3e5229579966b..0000000000000 --- a/docs/data/charts/pie/PieActiveArc.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/pie/PieAnimation.js b/docs/data/charts/pie/PieAnimation.js deleted file mode 100644 index f8b488baa6a24..0000000000000 --- a/docs/data/charts/pie/PieAnimation.js +++ /dev/null @@ -1,76 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import Slider from '@mui/material/Slider'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import { PieChart } from '@mui/x-charts/PieChart'; -import { mobileAndDesktopOS, valueFormatter } from './webUsageStats'; - -export default function PieAnimation() { - const [radius, setRadius] = React.useState(50); - const [itemNb, setItemNb] = React.useState(5); - const [skipAnimation, setSkipAnimation] = React.useState(false); - - const handleItemNbChange = (event, newValue) => { - if (typeof newValue !== 'number') { - return; - } - setItemNb(newValue); - }; - const handleRadius = (event, newValue) => { - if (typeof newValue !== 'number') { - return; - } - setRadius(newValue); - }; - - return ( - - params.label ?? '', - arcLabelMinAngle: 20, - valueFormatter, - }, - ]} - skipAnimation={skipAnimation} - /> - setSkipAnimation(event.target.checked)} /> - } - label="skipAnimation" - labelPlacement="end" - /> - - Number of items - - - - Radius - - - - ); -} diff --git a/docs/data/charts/pie/PieArcLabel.js b/docs/data/charts/pie/PieArcLabel.js deleted file mode 100644 index 530ec775b6668..0000000000000 --- a/docs/data/charts/pie/PieArcLabel.js +++ /dev/null @@ -1,33 +0,0 @@ -import { PieChart, pieClasses } from '@mui/x-charts/PieChart'; -import { desktopOS, valueFormatter } from './webUsageStats'; - -export default function PieArcLabel() { - return ( - `${item.value}%`, - arcLabelMinAngle: 35, - arcLabelRadius: '60%', - ...data, - }, - ]} - sx={{ - [`& .${pieClasses.arcLabel}`]: { - fontWeight: 'bold', - }, - }} - {...size} - /> - ); -} - -const size = { - width: 200, - height: 200, -}; - -const data = { - data: desktopOS, - valueFormatter, -}; diff --git a/docs/data/charts/pie/PieArcLabel.tsx.preview b/docs/data/charts/pie/PieArcLabel.tsx.preview deleted file mode 100644 index c06efe41b8ef3..0000000000000 --- a/docs/data/charts/pie/PieArcLabel.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - `${item.value}%`, - arcLabelMinAngle: 35, - arcLabelRadius: '60%', - ...data, - }, - ]} - sx={{ - [`& .${pieClasses.arcLabel}`]: { - fontWeight: 'bold', - }, - }} - {...size} -/> \ No newline at end of file diff --git a/docs/data/charts/pie/PieCSSStyling.js b/docs/data/charts/pie/PieCSSStyling.js deleted file mode 100644 index 069486da0bbc4..0000000000000 --- a/docs/data/charts/pie/PieCSSStyling.js +++ /dev/null @@ -1,59 +0,0 @@ -import { pieClasses, PieChart } from '@mui/x-charts/PieChart'; -import { rainbowSurgePalette } from '@mui/x-charts/colorPalettes'; -import { useTheme } from '@mui/material/styles'; - -export default function PieCSSStyling() { - const theme = useTheme(); - const palette = rainbowSurgePalette(theme.palette.mode); - const data1 = [ - { label: 'Group A', value: 400 }, - { label: 'Group B', value: 300 }, - { label: 'Group C', value: 300 }, - { label: 'Group D', value: 200 }, - ]; - - const data2 = [ - { label: 'A1', value: 100, color: palette[0] }, - { label: 'A2', value: 300, color: palette[0] }, - { label: 'B1', value: 100, color: palette[1] }, - { label: 'B2', value: 80, color: palette[1] }, - { label: 'B3', value: 40, color: palette[1] }, - { label: 'B4', value: 30, color: palette[1] }, - { label: 'B5', value: 50, color: palette[1] }, - { label: 'C1', value: 100, color: palette[2] }, - { label: 'C2', value: 200, color: palette[2] }, - { label: 'D1', value: 150, color: palette[3] }, - { label: 'D2', value: 50, color: palette[3] }, - ]; - - const settings = { - series: [ - { - innerRadius: 0, - outerRadius: 80, - data: data1, - highlightScope: { fade: 'global', highlight: 'item' }, - }, - { - id: 'outer', - innerRadius: 100, - outerRadius: 120, - data: data2, - highlightScope: { fade: 'global', highlight: 'item' }, - }, - ], - height: 300, - hideLegend: true, - }; - - return ( - - ); -} diff --git a/docs/data/charts/pie/PieCSSStyling.tsx.preview b/docs/data/charts/pie/PieCSSStyling.tsx.preview deleted file mode 100644 index 4e4136a2b28b9..0000000000000 --- a/docs/data/charts/pie/PieCSSStyling.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/pie/PieClick.js b/docs/data/charts/pie/PieClick.js deleted file mode 100644 index 3bed46fd41e6b..0000000000000 --- a/docs/data/charts/pie/PieClick.js +++ /dev/null @@ -1,75 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; -import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; -import { PieChart } from '@mui/x-charts/PieChart'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -import { mobileAndDesktopOS, platforms, valueFormatter } from './webUsageStats'; - -export default function PieClick() { - const [itemData, setItemData] = React.useState(); - - return ( - - - setItemData(d)} - />{' '} - - - - - Click on the chart - setItemData(undefined)} - > - - - - - - - ); -} - -const series = [ - { - innerRadius: 0, - outerRadius: 80, - id: 'platform-series', - data: platforms, - valueFormatter, - }, - { - innerRadius: 100, - outerRadius: 120, - id: 'OS-series', - data: mobileAndDesktopOS, - valueFormatter, - }, -]; diff --git a/docs/data/charts/pie/PieColor.js b/docs/data/charts/pie/PieColor.js deleted file mode 100644 index be0e8d59a6e25..0000000000000 --- a/docs/data/charts/pie/PieColor.js +++ /dev/null @@ -1,59 +0,0 @@ -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { PieChart } from '@mui/x-charts/PieChart'; -import { platforms } from './webUsageStats'; - -const palette = ['lightcoral', 'slateblue']; - -const colorPerItem = [ - { ...platforms[0], color: 'orange' }, - { ...platforms[1], color: 'gray' }, -]; - -export default function PieColor() { - return ( - - - Default - - - - Palette - - - - Item - - - - ); -} - -const pieParams = { - height: 200, - margin: { right: 5 }, - hideLegend: true, -}; diff --git a/docs/data/charts/pie/PieShape.js b/docs/data/charts/pie/PieShape.js deleted file mode 100644 index 103d73d54bfac..0000000000000 --- a/docs/data/charts/pie/PieShape.js +++ /dev/null @@ -1,54 +0,0 @@ -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import { PieChart } from '@mui/x-charts/PieChart'; -import { desktopOS, valueFormatter } from './webUsageStats'; - -export default function PieShape() { - return ( - ( - - )} - getCode={({ props }) => { - return `import { PieChart } from '@mui/x-charts/PieChart'; - -`; - }} - /> - ); -} diff --git a/docs/data/charts/pie/TitanicPie.js b/docs/data/charts/pie/TitanicPie.js deleted file mode 100644 index 4c0c85a5a76c4..0000000000000 --- a/docs/data/charts/pie/TitanicPie.js +++ /dev/null @@ -1,252 +0,0 @@ -import * as React from 'react'; -import { PieChart, pieClasses } from '@mui/x-charts/PieChart'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import { useDrawingArea } from '@mui/x-charts/hooks'; -import { styled } from '@mui/material/styles'; - -// Convert hex color to rgba with opacity -const hexToRgba = (hex, alpha) => { - const r = parseInt(hex.slice(1, 3), 16); - const g = parseInt(hex.slice(3, 5), 16); - const b = parseInt(hex.slice(5, 7), 16); - return `rgba(${r}, ${g}, ${b}, ${alpha})`; -}; - -// https://en.wikipedia.org/wiki/Passengers_of_the_Titanic#/media/File:Titanic_casualties.svg -const titanicData = [ - { Class: '1st', Survived: 'No', Count: 123 }, - { Class: '1st', Survived: 'Yes', Count: 202 }, - { Class: '2nd', Survived: 'No', Count: 167 }, - { Class: '2nd', Survived: 'Yes', Count: 118 }, - { Class: '3rd', Survived: 'No', Count: 528 }, - { Class: '3rd', Survived: 'Yes', Count: 178 }, - { Class: 'Crew', Survived: 'No', Count: 696 }, - { Class: 'Crew', Survived: 'Yes', Count: 212 }, -]; - -const classes = ['1st', '2nd', '3rd', 'Crew']; - -const totalCount = titanicData.reduce((acc, item) => acc + item.Count, 0); - -// Define colors for each class -const classColors = { - '1st': '#fa938e', - '2nd': '#98bf45', - '3rd': '#51cbcf', - Crew: '#d397ff', -}; - -// Different opacity based on class -const opacityMap = { - '1st': 0.9, - '2nd': 0.7, - '3rd': 0.5, - Crew: 0.3, -}; - -const classData = classes.map((pClass) => { - const classTotal = titanicData - .filter((item) => item.Class === pClass) - .reduce((acc, item) => acc + item.Count, 0); - return { - id: pClass, - label: `${pClass} Class:`, - value: classTotal, - percentage: (classTotal / totalCount) * 100, - color: classColors[pClass], - }; -}); - -const classSurvivalData = classes.flatMap((pClass) => { - const classTotal = classData.find((d) => d.id === pClass).value ?? 0; - const baseColor = classColors[pClass]; - return titanicData - .filter((item) => item.Class === pClass) - .sort((a, b) => (a.Survived > b.Survived ? 1 : -1)) - .map((item) => ({ - id: `${pClass}-${item.Survived}`, - label: item.Survived, - value: item.Count, - percentage: (item.Count / classTotal) * 100, - color: item.Survived === 'Yes' ? baseColor : `${baseColor}80`, // 80 is 50% opacity for 'No' - })); -}); - -// Create a simplified dataset that groups all classes together for Yes/No -const survivalData = [ - { - id: 'Yes', - label: 'Survived:', - value: titanicData - .filter((item) => item.Survived === 'Yes') - .reduce((sum, item) => sum + item.Count, 0), - percentage: - (titanicData - .filter((item) => item.Survived === 'Yes') - .reduce((sum, item) => sum + item.Count, 0) / - totalCount) * - 100, - color: classColors['3rd'], - }, - { - id: 'No', - label: 'Did not survive:', - value: titanicData - .filter((item) => item.Survived === 'No') - .reduce((sum, item) => sum + item.Count, 0), - percentage: - (titanicData - .filter((item) => item.Survived === 'No') - .reduce((sum, item) => sum + item.Count, 0) / - totalCount) * - 100, - color: classColors['1st'], - }, -]; - -// Create dataset for class distribution by survival status (Yes first, then No) -const survivalClassData = [...titanicData] - .sort((a) => (a.Survived === 'Yes' ? -1 : 1)) - .map((item) => { - const baseColor = survivalData.find((d) => d.id === item.Survived).color; - return { - id: `${item.Class}-${item.Survived}`, - label: `${item.Class} class:`, - value: item.Count, - percentage: - (item.Count / - (item.Survived === 'Yes' - ? survivalData[0].value - : survivalData[1].value)) * - 100, - color: hexToRgba(baseColor, opacityMap[item.Class] || 1), - }; - }); - -const StyledText = styled('text')(({ theme }) => ({ - fill: theme.palette.text.primary, - textAnchor: 'middle', - dominantBaseline: 'central', - fontSize: 20, -})); - -function PieCenterLabel({ children }) { - const { width, height, left, top } = useDrawingArea(); - return ( - - {children} - - ); -} - -export default function TitanicPie() { - const [view, setView] = React.useState('class'); - const handleViewChange = (event, newView) => { - if (newView !== null) { - setView(newView); - } - }; - - const innerRadius = 50; - const middleRadius = 120; - - return ( - - - Titanic survival statistics - - - View by Class - View by Survival - - - {view === 'class' ? ( - `${item.id} (${item.percentage.toFixed(0)}%)`, - valueFormatter: ({ value }) => - `${value} out of ${totalCount} (${((value / totalCount) * 100).toFixed(0)}%)`, - highlightScope: { fade: 'global', highlight: 'item' }, - highlighted: { additionalRadius: 2 }, - cornerRadius: 3, - }, - { - innerRadius: middleRadius, - outerRadius: middleRadius + 20, - data: classSurvivalData, - arcLabel: (item) => `${item.label} (${item.percentage.toFixed(0)}%)`, - valueFormatter: ({ value }) => - `${value} out of ${totalCount} (${((value / totalCount) * 100).toFixed(0)}%)`, - arcLabelRadius: 160, - highlightScope: { fade: 'global', highlight: 'item' }, - highlighted: { additionalRadius: 2 }, - cornerRadius: 3, - }, - ]} - sx={{ - [`& .${pieClasses.arcLabel}`]: { - fontSize: '12px', - }, - }} - hideLegend - > - Class - - ) : ( - `${item.id} (${item.percentage.toFixed(0)}%)`, - valueFormatter: ({ value }) => - `${value} out of ${totalCount} (${((value / totalCount) * 100).toFixed(0)}%)`, - highlightScope: { fade: 'global', highlight: 'item' }, - highlighted: { additionalRadius: 2 }, - cornerRadius: 3, - }, - { - innerRadius: middleRadius, - outerRadius: middleRadius + 20, - data: survivalClassData, - arcLabel: (item) => { - const id = item.id || ''; - const percentage = item.percentage || 0; - return `${id.split('-')[0]} (${percentage.toFixed(0)}%)`; - }, - arcLabelRadius: 160, - valueFormatter: ({ value }) => - `${value} out of ${totalCount} (${((value / totalCount) * 100).toFixed(0)}%)`, - highlightScope: { fade: 'global', highlight: 'item' }, - highlighted: { additionalRadius: 2 }, - cornerRadius: 3, - }, - ]} - sx={{ - [`& .${pieClasses.arcLabel}`]: { - fontSize: '12px', - }, - }} - hideLegend - > - Survived - - )} - - - ); -} diff --git a/docs/data/charts/pie/BasicPie.tsx b/docs/data/charts/pie/demos/basic-pie/BasicPie.tsx similarity index 89% rename from docs/data/charts/pie/BasicPie.tsx rename to docs/data/charts/pie/demos/basic-pie/BasicPie.tsx index ed7e30224e3bb..268bf895fbf96 100644 --- a/docs/data/charts/pie/BasicPie.tsx +++ b/docs/data/charts/pie/demos/basic-pie/BasicPie.tsx @@ -2,6 +2,7 @@ import { PieChart } from '@mui/x-charts/PieChart'; export default function BasicPie() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/pie/demos/basic-pie/client.ts b/docs/data/charts/pie/demos/basic-pie/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pie/demos/basic-pie/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pie/demos/basic-pie/index.ts b/docs/data/charts/pie/demos/basic-pie/index.ts new file mode 100644 index 0000000000000..63238419dafd2 --- /dev/null +++ b/docs/data/charts/pie/demos/basic-pie/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicPie from './BasicPie'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicPie, { ClientProvider }); diff --git a/docs/data/charts/pie/DonutChart.tsx b/docs/data/charts/pie/demos/donut-chart/DonutChart.tsx similarity index 91% rename from docs/data/charts/pie/DonutChart.tsx rename to docs/data/charts/pie/demos/donut-chart/DonutChart.tsx index 1606c71974fe5..d3dc66cdebdc6 100644 --- a/docs/data/charts/pie/DonutChart.tsx +++ b/docs/data/charts/pie/demos/donut-chart/DonutChart.tsx @@ -16,9 +16,11 @@ const settings = { export default function DonutChart() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/pie/demos/donut-chart/client.ts b/docs/data/charts/pie/demos/donut-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pie/demos/donut-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pie/demos/donut-chart/index.ts b/docs/data/charts/pie/demos/donut-chart/index.ts new file mode 100644 index 0000000000000..9cae396576176 --- /dev/null +++ b/docs/data/charts/pie/demos/donut-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DonutChart from './DonutChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DonutChart, { ClientProvider }); diff --git a/docs/data/charts/pie/PieActiveArc.tsx b/docs/data/charts/pie/demos/pie-active-arc/PieActiveArc.tsx similarity index 78% rename from docs/data/charts/pie/PieActiveArc.tsx rename to docs/data/charts/pie/demos/pie-active-arc/PieActiveArc.tsx index 58bb9538c6892..a9cd342df57e7 100644 --- a/docs/data/charts/pie/PieActiveArc.tsx +++ b/docs/data/charts/pie/demos/pie-active-arc/PieActiveArc.tsx @@ -1,8 +1,9 @@ import { PieChart } from '@mui/x-charts/PieChart'; -import { desktopOS, valueFormatter } from './webUsageStats'; +import { desktopOS, valueFormatter } from '../../webUsageStats'; export default function PieActiveArc() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/pie/demos/pie-active-arc/client.ts b/docs/data/charts/pie/demos/pie-active-arc/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pie/demos/pie-active-arc/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pie/demos/pie-active-arc/index.ts b/docs/data/charts/pie/demos/pie-active-arc/index.ts new file mode 100644 index 0000000000000..2e44a386621dd --- /dev/null +++ b/docs/data/charts/pie/demos/pie-active-arc/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PieActiveArc from './PieActiveArc'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PieActiveArc, { ClientProvider }); diff --git a/docs/data/charts/pie/PieAnimation.tsx b/docs/data/charts/pie/demos/pie-animation/PieAnimation.tsx similarity index 94% rename from docs/data/charts/pie/PieAnimation.tsx rename to docs/data/charts/pie/demos/pie-animation/PieAnimation.tsx index e45cfae163871..3ac174ad0bffe 100644 --- a/docs/data/charts/pie/PieAnimation.tsx +++ b/docs/data/charts/pie/demos/pie-animation/PieAnimation.tsx @@ -5,9 +5,10 @@ import Slider from '@mui/material/Slider'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; import { PieChart } from '@mui/x-charts/PieChart'; -import { mobileAndDesktopOS, valueFormatter } from './webUsageStats'; +import { mobileAndDesktopOS, valueFormatter } from '../../webUsageStats'; export default function PieAnimation() { + // @focus-start @padding 1 const [radius, setRadius] = React.useState(50); const [itemNb, setItemNb] = React.useState(5); const [skipAnimation, setSkipAnimation] = React.useState(false); @@ -73,4 +74,5 @@ export default function PieAnimation() { /> ); + // @focus-end } diff --git a/docs/data/charts/pie/demos/pie-animation/client.ts b/docs/data/charts/pie/demos/pie-animation/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pie/demos/pie-animation/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pie/demos/pie-animation/index.ts b/docs/data/charts/pie/demos/pie-animation/index.ts new file mode 100644 index 0000000000000..336e65ed17e14 --- /dev/null +++ b/docs/data/charts/pie/demos/pie-animation/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PieAnimation from './PieAnimation'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PieAnimation, { ClientProvider }); diff --git a/docs/data/charts/pie/PieArcLabel.tsx b/docs/data/charts/pie/demos/pie-arc-label/PieArcLabel.tsx similarity index 82% rename from docs/data/charts/pie/PieArcLabel.tsx rename to docs/data/charts/pie/demos/pie-arc-label/PieArcLabel.tsx index 530ec775b6668..4ad53087ff003 100644 --- a/docs/data/charts/pie/PieArcLabel.tsx +++ b/docs/data/charts/pie/demos/pie-arc-label/PieArcLabel.tsx @@ -1,8 +1,9 @@ import { PieChart, pieClasses } from '@mui/x-charts/PieChart'; -import { desktopOS, valueFormatter } from './webUsageStats'; +import { desktopOS, valueFormatter } from '../../webUsageStats'; export default function PieArcLabel() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/pie/demos/pie-arc-label/client.ts b/docs/data/charts/pie/demos/pie-arc-label/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pie/demos/pie-arc-label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pie/demos/pie-arc-label/index.ts b/docs/data/charts/pie/demos/pie-arc-label/index.ts new file mode 100644 index 0000000000000..f4d9a4b47eca5 --- /dev/null +++ b/docs/data/charts/pie/demos/pie-arc-label/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PieArcLabel from './PieArcLabel'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PieArcLabel, { ClientProvider }); diff --git a/docs/data/charts/pie/PieClick.tsx b/docs/data/charts/pie/demos/pie-click/PieClick.tsx similarity index 93% rename from docs/data/charts/pie/PieClick.tsx rename to docs/data/charts/pie/demos/pie-click/PieClick.tsx index 2bbead6ac70f8..618cfe9c0489a 100644 --- a/docs/data/charts/pie/PieClick.tsx +++ b/docs/data/charts/pie/demos/pie-click/PieClick.tsx @@ -6,10 +6,11 @@ import IconButton from '@mui/material/IconButton'; import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; import { PieChart } from '@mui/x-charts/PieChart'; import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { PieItemIdentifier } from '@mui/x-charts/models'; -import { mobileAndDesktopOS, platforms, valueFormatter } from './webUsageStats'; +import type { PieItemIdentifier } from '@mui/x-charts/models'; +import { mobileAndDesktopOS, platforms, valueFormatter } from '../../webUsageStats'; export default function PieClick() { + // @focus-start @padding 1 const [itemData, setItemData] = React.useState(); return ( @@ -55,6 +56,7 @@ ${itemData ? JSON.stringify(itemData, null, 2) : '// The data will appear here'} ); + // @focus-end } const series = [ diff --git a/docs/data/charts/pie/demos/pie-click/client.ts b/docs/data/charts/pie/demos/pie-click/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pie/demos/pie-click/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pie/demos/pie-click/index.ts b/docs/data/charts/pie/demos/pie-click/index.ts new file mode 100644 index 0000000000000..d88268f6e104b --- /dev/null +++ b/docs/data/charts/pie/demos/pie-click/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PieClick from './PieClick'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PieClick, { ClientProvider }); diff --git a/docs/data/charts/pie/PieColor.tsx b/docs/data/charts/pie/demos/pie-color/PieColor.tsx similarity index 92% rename from docs/data/charts/pie/PieColor.tsx rename to docs/data/charts/pie/demos/pie-color/PieColor.tsx index be0e8d59a6e25..7e504e6f692c7 100644 --- a/docs/data/charts/pie/PieColor.tsx +++ b/docs/data/charts/pie/demos/pie-color/PieColor.tsx @@ -2,7 +2,7 @@ import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import { PieChart } from '@mui/x-charts/PieChart'; -import { platforms } from './webUsageStats'; +import { platforms } from '../../webUsageStats'; const palette = ['lightcoral', 'slateblue']; @@ -14,6 +14,7 @@ const colorPerItem = [ export default function PieColor() { return ( + {/* @focus-start */} Default + {/* @focus-end */} ); } diff --git a/docs/data/charts/pie/demos/pie-color/client.ts b/docs/data/charts/pie/demos/pie-color/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pie/demos/pie-color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pie/demos/pie-color/index.ts b/docs/data/charts/pie/demos/pie-color/index.ts new file mode 100644 index 0000000000000..922f70988a22a --- /dev/null +++ b/docs/data/charts/pie/demos/pie-color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PieColor from './PieColor'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PieColor, { ClientProvider }); diff --git a/docs/data/charts/pie/PieCSSStyling.tsx b/docs/data/charts/pie/demos/pie-css-styling/PieCSSStyling.tsx similarity index 90% rename from docs/data/charts/pie/PieCSSStyling.tsx rename to docs/data/charts/pie/demos/pie-css-styling/PieCSSStyling.tsx index 700d584a7a663..6124a981b012f 100644 --- a/docs/data/charts/pie/PieCSSStyling.tsx +++ b/docs/data/charts/pie/demos/pie-css-styling/PieCSSStyling.tsx @@ -1,8 +1,10 @@ -import { pieClasses, PieChart, PieChartProps } from '@mui/x-charts/PieChart'; +import type { PieChartProps } from '@mui/x-charts/PieChart'; +import { pieClasses, PieChart } from '@mui/x-charts/PieChart'; import { rainbowSurgePalette } from '@mui/x-charts/colorPalettes'; import { useTheme } from '@mui/material/styles'; export default function PieCSSStyling() { + // @focus-start @padding 1 const theme = useTheme(); const palette = rainbowSurgePalette(theme.palette.mode); const data1 = [ @@ -55,4 +57,5 @@ export default function PieCSSStyling() { }} /> ); + // @focus-end } diff --git a/docs/data/charts/pie/demos/pie-css-styling/client.ts b/docs/data/charts/pie/demos/pie-css-styling/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pie/demos/pie-css-styling/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pie/demos/pie-css-styling/index.ts b/docs/data/charts/pie/demos/pie-css-styling/index.ts new file mode 100644 index 0000000000000..dab6705b5de2c --- /dev/null +++ b/docs/data/charts/pie/demos/pie-css-styling/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PieCSSStyling from './PieCSSStyling'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PieCSSStyling, { ClientProvider }); diff --git a/docs/data/charts/pie/PieShape.tsx b/docs/data/charts/pie/demos/pie-shape/PieShape.tsx similarity index 92% rename from docs/data/charts/pie/PieShape.tsx rename to docs/data/charts/pie/demos/pie-shape/PieShape.tsx index 103d73d54bfac..dc846a8a2aa00 100644 --- a/docs/data/charts/pie/PieShape.tsx +++ b/docs/data/charts/pie/demos/pie-shape/PieShape.tsx @@ -1,9 +1,10 @@ import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; import { PieChart } from '@mui/x-charts/PieChart'; -import { desktopOS, valueFormatter } from './webUsageStats'; +import { desktopOS, valueFormatter } from '../../webUsageStats'; export default function PieShape() { return ( + // @focus-start @padding 2 `; }} /> + // @focus-end ); } diff --git a/docs/data/charts/pie/demos/pie-shape/client.ts b/docs/data/charts/pie/demos/pie-shape/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pie/demos/pie-shape/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pie/demos/pie-shape/index.ts b/docs/data/charts/pie/demos/pie-shape/index.ts new file mode 100644 index 0000000000000..8cf417679d0ff --- /dev/null +++ b/docs/data/charts/pie/demos/pie-shape/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PieShape from './PieShape'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PieShape, { ClientProvider }); diff --git a/docs/data/charts/pie/TitanicPie.tsx b/docs/data/charts/pie/demos/titanic-pie/TitanicPie.tsx similarity index 99% rename from docs/data/charts/pie/TitanicPie.tsx rename to docs/data/charts/pie/demos/titanic-pie/TitanicPie.tsx index d20218da175a4..61510dbfe4b30 100644 --- a/docs/data/charts/pie/TitanicPie.tsx +++ b/docs/data/charts/pie/demos/titanic-pie/TitanicPie.tsx @@ -171,6 +171,7 @@ function PieCenterLabel({ children }: PieCenterLabelProps): React.ReactElement { type ViewType = 'class' | 'survival'; export default function TitanicPie(): React.ReactElement { + // @focus-start @padding 1 const [view, setView] = React.useState('class'); const handleViewChange = ( event: React.MouseEvent, @@ -283,4 +284,5 @@ export default function TitanicPie(): React.ReactElement { ); + // @focus-end } diff --git a/docs/data/charts/pie/demos/titanic-pie/client.ts b/docs/data/charts/pie/demos/titanic-pie/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pie/demos/titanic-pie/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pie/demos/titanic-pie/index.ts b/docs/data/charts/pie/demos/titanic-pie/index.ts new file mode 100644 index 0000000000000..f02d6ce7f02e9 --- /dev/null +++ b/docs/data/charts/pie/demos/titanic-pie/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TitanicPie from './TitanicPie'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TitanicPie, { ClientProvider }); diff --git a/docs/data/charts/pie/pie.md b/docs/data/charts/pie/pie.md index bb226467c5803..27cb29ae2fdb5 100644 --- a/docs/data/charts/pie/pie.md +++ b/docs/data/charts/pie/pie.md @@ -18,7 +18,7 @@ You need: The demo below compares survival rates of passengers by class on the Titanic. -{{"demo": "TitanicPie.js"}} +{{"component": "file://./demos/titanic-pie/index.ts"}} ## Basics @@ -28,7 +28,7 @@ You can add optional properties such as `label`. Add an `id` property to each item if you will update or reorder the data, since it is used for React `key` props. -{{"demo": "BasicPie.js"}} +{{"component": "file://./demos/basic-pie/index.ts"}} ## Donut chart @@ -36,7 +36,7 @@ A donut chart (or doughnut chart) is a pie chart with a hollow center. Set the `innerRadius` property to a value greater than 0 to turn any pie chart into a donut. -{{"demo": "DonutChart.js"}} +{{"component": "file://./demos/donut-chart/index.ts"}} ## Colors @@ -59,7 +59,7 @@ You can customize pie colors in two ways: /> ``` -{{"demo": "PieColor.js"}} +{{"component": "file://./demos/pie-color/index.ts"}} ## Sizing @@ -73,7 +73,7 @@ Pie series shape is controlled by these properties: - `startAngle` / `endAngle`: angle range of the pie in degrees. - `cx` / `cy`: center of the pie. Default is the center of the drawing area. -{{"demo": "PieShape.js", "hideToolbar": true, "bg": "playground"}} +{{"component": "file://./demos/pie-shape/index.ts", "hideToolbar": true, "bg": "playground"}} The following accept percentage strings (for example `'50%'`): @@ -91,7 +91,7 @@ Pass a function that receives the arc's data object and returns the label string Set `arcLabelMinAngle` so that arcs with an angle smaller than that value (in degrees) do not show a label. -{{"demo": "PieArcLabel.js"}} +{{"component": "file://./demos/pie-arc-label/index.ts"}} ## Highlight @@ -106,7 +106,7 @@ To change the size of an arc when highlighted or faded, use the `highlighted` an Use `additionalRadius` to add to `outerRadius` instead of setting an absolute value. A negative value shrinks the arc. -{{"demo": "PieActiveArc.js"}} +{{"component": "file://./demos/pie-active-arc/index.ts"}} ## Click event @@ -120,7 +120,7 @@ const onItemClick = ( ) => {}; ``` -{{"demo": "PieClick.js"}} +{{"component": "file://./demos/pie-click/index.ts"}} ## CSS @@ -128,7 +128,7 @@ You can customize the pie chart elements using CSS selectors. The demo below uses the `data-series` attribute to select the outer series and reduce its opacity. -{{"demo": "PieCSSStyling.js"}} +{{"component": "file://./demos/pie-css-styling/index.ts"}} ## Animation @@ -146,7 +146,7 @@ When you set `skipAnimation` to `true`, the chart renders without animations. ``` -{{"demo": "PieAnimation.js"}} +{{"component": "file://./demos/pie-animation/index.ts"}} ## Composition diff --git a/docs/data/charts/pyramid/Pyramid.js b/docs/data/charts/pyramid/Pyramid.js deleted file mode 100644 index 548fc2bdc0790..0000000000000 --- a/docs/data/charts/pyramid/Pyramid.js +++ /dev/null @@ -1,18 +0,0 @@ -import Box from '@mui/material/Box'; -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; - -export default function Pyramid() { - return ( - - - - ); -} diff --git a/docs/data/charts/pyramid/Pyramid.tsx.preview b/docs/data/charts/pyramid/Pyramid.tsx.preview deleted file mode 100644 index 7d9b5616e4fc9..0000000000000 --- a/docs/data/charts/pyramid/Pyramid.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/pyramid/PyramidDirection.js b/docs/data/charts/pyramid/PyramidDirection.js deleted file mode 100644 index 64a346fa855c1..0000000000000 --- a/docs/data/charts/pyramid/PyramidDirection.js +++ /dev/null @@ -1,46 +0,0 @@ -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import Stack from '@mui/material/Stack'; -import { populationByEducationLevelPercentageSeries } from '../funnel/populationByEducationLevel'; - -export default function PyramidDirection() { - return ( - ( - - - - )} - getCode={({ props }) => { - return `import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; - - -`; - }} - /> - ); -} diff --git a/docs/data/charts/pyramid/PyramidPlayground.js b/docs/data/charts/pyramid/PyramidPlayground.js deleted file mode 100644 index 4089eadc04948..0000000000000 --- a/docs/data/charts/pyramid/PyramidPlayground.js +++ /dev/null @@ -1,75 +0,0 @@ -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import Stack from '@mui/material/Stack'; -import { populationByEducationLevelPercentageSeries } from '../funnel/populationByEducationLevel'; - -const curveTypes = ['pyramid', 'step-pyramid']; - -export default function PyramidPlayground() { - return ( - ( - - - - )} - getCode={({ props }) => { - return `import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; - - -`; - }} - /> - ); -} diff --git a/docs/data/charts/pyramid/PyramidSegmentLinear.js b/docs/data/charts/pyramid/PyramidSegmentLinear.js deleted file mode 100644 index 725134c00a51e..0000000000000 --- a/docs/data/charts/pyramid/PyramidSegmentLinear.js +++ /dev/null @@ -1,27 +0,0 @@ -import Box from '@mui/material/Box'; -import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; - -// datasource: https://ourworldindata.org/grapher/distribution-of-population-between-different-poverty-thresholds-stacke-bar-2011-ppp?country=~OWID_WRL&tableSearch=world - -export default function PyramidSegmentLinear() { - return ( - - - - ); -} diff --git a/docs/data/charts/pyramid/PyramidSegmentLinear.tsx.preview b/docs/data/charts/pyramid/PyramidSegmentLinear.tsx.preview deleted file mode 100644 index f0b900c866ecd..0000000000000 --- a/docs/data/charts/pyramid/PyramidSegmentLinear.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/pyramid/PyramidDirection.tsx b/docs/data/charts/pyramid/demos/pyramid-direction/PyramidDirection.tsx similarity index 88% rename from docs/data/charts/pyramid/PyramidDirection.tsx rename to docs/data/charts/pyramid/demos/pyramid-direction/PyramidDirection.tsx index d02609044ca47..99407bbd35dce 100644 --- a/docs/data/charts/pyramid/PyramidDirection.tsx +++ b/docs/data/charts/pyramid/demos/pyramid-direction/PyramidDirection.tsx @@ -1,10 +1,11 @@ import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; import Stack from '@mui/material/Stack'; -import { populationByEducationLevelPercentageSeries } from '../funnel/populationByEducationLevel'; +import { populationByEducationLevelPercentageSeries } from '../../../funnel/populationByEducationLevel'; export default function PyramidDirection() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/pyramid/demos/pyramid-direction/client.ts b/docs/data/charts/pyramid/demos/pyramid-direction/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pyramid/demos/pyramid-direction/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pyramid/demos/pyramid-direction/index.ts b/docs/data/charts/pyramid/demos/pyramid-direction/index.ts new file mode 100644 index 0000000000000..8b5e1f083404b --- /dev/null +++ b/docs/data/charts/pyramid/demos/pyramid-direction/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PyramidDirection from './PyramidDirection'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PyramidDirection, { ClientProvider }); diff --git a/docs/data/charts/pyramid/PyramidPlayground.tsx b/docs/data/charts/pyramid/demos/pyramid-playground/PyramidPlayground.tsx similarity index 92% rename from docs/data/charts/pyramid/PyramidPlayground.tsx rename to docs/data/charts/pyramid/demos/pyramid-playground/PyramidPlayground.tsx index 90b6b012f72da..c5356929ba80b 100644 --- a/docs/data/charts/pyramid/PyramidPlayground.tsx +++ b/docs/data/charts/pyramid/demos/pyramid-playground/PyramidPlayground.tsx @@ -1,12 +1,13 @@ import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; import Stack from '@mui/material/Stack'; -import { populationByEducationLevelPercentageSeries } from '../funnel/populationByEducationLevel'; +import { populationByEducationLevelPercentageSeries } from '../../../funnel/populationByEducationLevel'; const curveTypes = ['pyramid', 'step-pyramid'] as const; export default function PyramidPlayground() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/pyramid/demos/pyramid-playground/client.ts b/docs/data/charts/pyramid/demos/pyramid-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pyramid/demos/pyramid-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pyramid/demos/pyramid-playground/index.ts b/docs/data/charts/pyramid/demos/pyramid-playground/index.ts new file mode 100644 index 0000000000000..481f41b5c11c9 --- /dev/null +++ b/docs/data/charts/pyramid/demos/pyramid-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PyramidPlayground from './PyramidPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PyramidPlayground, { ClientProvider }); diff --git a/docs/data/charts/pyramid/PyramidSegmentLinear.tsx b/docs/data/charts/pyramid/demos/pyramid-segment-linear/PyramidSegmentLinear.tsx similarity index 94% rename from docs/data/charts/pyramid/PyramidSegmentLinear.tsx rename to docs/data/charts/pyramid/demos/pyramid-segment-linear/PyramidSegmentLinear.tsx index 725134c00a51e..4d1f177bb01fa 100644 --- a/docs/data/charts/pyramid/PyramidSegmentLinear.tsx +++ b/docs/data/charts/pyramid/demos/pyramid-segment-linear/PyramidSegmentLinear.tsx @@ -6,6 +6,7 @@ import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; export default function PyramidSegmentLinear() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/pyramid/demos/pyramid-segment-linear/client.ts b/docs/data/charts/pyramid/demos/pyramid-segment-linear/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pyramid/demos/pyramid-segment-linear/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pyramid/demos/pyramid-segment-linear/index.ts b/docs/data/charts/pyramid/demos/pyramid-segment-linear/index.ts new file mode 100644 index 0000000000000..ac02c50dc4c99 --- /dev/null +++ b/docs/data/charts/pyramid/demos/pyramid-segment-linear/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PyramidSegmentLinear from './PyramidSegmentLinear'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PyramidSegmentLinear, { ClientProvider }); diff --git a/docs/data/charts/pyramid/Pyramid.tsx b/docs/data/charts/pyramid/demos/pyramid/Pyramid.tsx similarity index 89% rename from docs/data/charts/pyramid/Pyramid.tsx rename to docs/data/charts/pyramid/demos/pyramid/Pyramid.tsx index 548fc2bdc0790..24acdfb68b055 100644 --- a/docs/data/charts/pyramid/Pyramid.tsx +++ b/docs/data/charts/pyramid/demos/pyramid/Pyramid.tsx @@ -4,6 +4,7 @@ import { FunnelChart } from '@mui/x-charts-pro/FunnelChart'; export default function Pyramid() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/pyramid/demos/pyramid/client.ts b/docs/data/charts/pyramid/demos/pyramid/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/pyramid/demos/pyramid/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/pyramid/demos/pyramid/index.ts b/docs/data/charts/pyramid/demos/pyramid/index.ts new file mode 100644 index 0000000000000..6dce93cf75127 --- /dev/null +++ b/docs/data/charts/pyramid/demos/pyramid/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Pyramid from './Pyramid'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Pyramid, { ClientProvider }); diff --git a/docs/data/charts/pyramid/pyramid.md b/docs/data/charts/pyramid/pyramid.md index 10d217f4b4b7b..a987c37b50907 100644 --- a/docs/data/charts/pyramid/pyramid.md +++ b/docs/data/charts/pyramid/pyramid.md @@ -12,7 +12,7 @@ components: FunnelChart, FunnelPlot To create a pyramid chart, set the `curve` property to `pyramid` in the series. -{{"demo": "Pyramid.js"}} +{{"component": "file://./demos/pyramid/index.ts"}} ## Direction @@ -23,17 +23,17 @@ In order to manually control the direction of the pyramid, the `funnelDirection` This is useful when the data is not sorted, or when you want to enforce a specific direction regardless of the data order. -{{"demo": "PyramidDirection.js"}} +{{"component": "file://./demos/pyramid-direction/index.ts"}} ## Segments By default, the pyramid chart creates segments with the same height. To make the segments proportional to the values, set `categoryAxis.scaleType` to `linear`. This adjusts the height of each segment based on the value it represents. -{{"demo": "PyramidSegmentLinear.js"}} +{{"component": "file://./demos/pyramid-segment-linear/index.ts"}} ## Styling A pyramid chart can be styled in all the same ways as the [funnel chart](/x/react-charts/funnel/#styling). -{{"demo": "PyramidPlayground.js"}} +{{"component": "file://./demos/pyramid-playground/index.ts"}} diff --git a/docs/data/charts/quickstart/Combining.js b/docs/data/charts/quickstart/Combining.js deleted file mode 100644 index 6748ad3c19198..0000000000000 --- a/docs/data/charts/quickstart/Combining.js +++ /dev/null @@ -1,91 +0,0 @@ -import Box from '@mui/material/Box'; -import { BarPlot } from '@mui/x-charts/BarChart'; -import { LineHighlightPlot, LinePlot } from '@mui/x-charts/LineChart'; -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; - -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; -import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; -import alphabetStock from '../dataset/GOOGL.json'; - -const series = [ - { - type: 'bar', - yAxisId: 'volume', - label: 'Volume', - color: 'lightgray', - data: alphabetStock.map((day) => day.volume), - highlightScope: { highlight: 'item' }, - }, - { - type: 'line', - yAxisId: 'price', - color: 'red', - label: 'Low', - data: alphabetStock.map((day) => day.low), - highlightScope: { highlight: 'item' }, - }, - { - type: 'line', - yAxisId: 'price', - color: 'green', - label: 'High', - data: alphabetStock.map((day) => day.high), - }, -]; - -export default function Combining() { - return ( - - new Date(day.date)), - scaleType: 'band', - valueFormatter: (value) => value.toLocaleDateString(), - height: 48, - }, - ]} - yAxis={[ - { id: 'price', scaleType: 'linear', position: 'left', width: 50 }, - { - id: 'volume', - scaleType: 'linear', - position: 'right', - valueFormatter: (value) => `${(value / 1000000).toLocaleString()}M`, - width: 55, - }, - ]} - > - - - - - { - return index % 30 === 0; - }} - tickLabelStyle={{ - fontSize: 10, - }} - /> - - - - - - ); -} diff --git a/docs/data/charts/quickstart/SimpleCharts.js b/docs/data/charts/quickstart/SimpleCharts.js deleted file mode 100644 index e5cdd295ccc6f..0000000000000 --- a/docs/data/charts/quickstart/SimpleCharts.js +++ /dev/null @@ -1,21 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; - -export default function SimpleCharts() { - return ( - - ); -} diff --git a/docs/data/charts/quickstart/SimpleCharts.tsx.preview b/docs/data/charts/quickstart/SimpleCharts.tsx.preview deleted file mode 100644 index 4a5eba8b6cf22..0000000000000 --- a/docs/data/charts/quickstart/SimpleCharts.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/quickstart/Combining.tsx b/docs/data/charts/quickstart/demos/combining/Combining.tsx similarity index 93% rename from docs/data/charts/quickstart/Combining.tsx rename to docs/data/charts/quickstart/demos/combining/Combining.tsx index 5767119d7d0b9..bac65d4fae618 100644 --- a/docs/data/charts/quickstart/Combining.tsx +++ b/docs/data/charts/quickstart/demos/combining/Combining.tsx @@ -2,12 +2,12 @@ import Box from '@mui/material/Box'; import { BarPlot } from '@mui/x-charts/BarChart'; import { LineHighlightPlot, LinePlot } from '@mui/x-charts/LineChart'; import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { AllSeriesType } from '@mui/x-charts/models'; +import type { AllSeriesType } from '@mui/x-charts/models'; import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; -import alphabetStock from '../dataset/GOOGL.json'; +import alphabetStock from '../../../dataset/GOOGL.json'; const series = [ { @@ -38,6 +38,7 @@ const series = [ export default function Combining() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/quickstart/demos/combining/client.ts b/docs/data/charts/quickstart/demos/combining/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/quickstart/demos/combining/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/quickstart/demos/combining/index.ts b/docs/data/charts/quickstart/demos/combining/index.ts new file mode 100644 index 0000000000000..17842405cfe98 --- /dev/null +++ b/docs/data/charts/quickstart/demos/combining/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Combining from './Combining'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Combining, { ClientProvider }); diff --git a/docs/data/charts/quickstart/SimpleCharts.tsx b/docs/data/charts/quickstart/demos/simple-charts/SimpleCharts.tsx similarity index 88% rename from docs/data/charts/quickstart/SimpleCharts.tsx rename to docs/data/charts/quickstart/demos/simple-charts/SimpleCharts.tsx index e5cdd295ccc6f..18b499b96d684 100644 --- a/docs/data/charts/quickstart/SimpleCharts.tsx +++ b/docs/data/charts/quickstart/demos/simple-charts/SimpleCharts.tsx @@ -2,6 +2,7 @@ import { BarChart } from '@mui/x-charts/BarChart'; export default function SimpleCharts() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/quickstart/demos/simple-charts/client.ts b/docs/data/charts/quickstart/demos/simple-charts/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/quickstart/demos/simple-charts/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/quickstart/demos/simple-charts/index.ts b/docs/data/charts/quickstart/demos/simple-charts/index.ts new file mode 100644 index 0000000000000..e0f463452b6c3 --- /dev/null +++ b/docs/data/charts/quickstart/demos/simple-charts/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleCharts from './SimpleCharts'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleCharts, { ClientProvider }); diff --git a/docs/data/charts/quickstart/quickstart.md b/docs/data/charts/quickstart/quickstart.md index aed46a6f49d86..79020cd86755c 100644 --- a/docs/data/charts/quickstart/quickstart.md +++ b/docs/data/charts/quickstart/quickstart.md @@ -72,7 +72,7 @@ Self-contained Chart components are imported and rendered as a single React comp These components require a `series` prop describing the data to render, as well as a numerical value (rendered in pixels) for the `height` prop. The `width` prop is optional; if no value is provided, the Charts expand to fill the available space. -{{"demo": "SimpleCharts.js"}} +{{"component": "file://./demos/simple-charts/index.ts"}} ### Composable Charts @@ -88,7 +88,7 @@ See the [Charts composition documentation](/x/react-charts/composition/) for com The demo below shows how to use composition to create a custom Chart that combines a Bar and a Line Chart on a single plot: -{{"demo": "Combining.js"}} +{{"component": "file://./demos/combining/index.ts"}} ### Chart layouts diff --git a/docs/data/charts/radar/BasicRadar.js b/docs/data/charts/radar/BasicRadar.js deleted file mode 100644 index 512cbaa0bea23..0000000000000 --- a/docs/data/charts/radar/BasicRadar.js +++ /dev/null @@ -1,14 +0,0 @@ -import { RadarChart } from '@mui/x-charts/RadarChart'; - -export default function BasicRadar() { - return ( - - ); -} diff --git a/docs/data/charts/radar/BasicRadar.tsx.preview b/docs/data/charts/radar/BasicRadar.tsx.preview deleted file mode 100644 index 0b78ee3de6d57..0000000000000 --- a/docs/data/charts/radar/BasicRadar.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/radar/CompositionExample.js b/docs/data/charts/radar/CompositionExample.js deleted file mode 100644 index 830ee9bc8da65..0000000000000 --- a/docs/data/charts/radar/CompositionExample.js +++ /dev/null @@ -1,60 +0,0 @@ -import Stack from '@mui/material/Stack'; -import { - RadarDataProvider, - RadarGrid, - RadarSeriesMarks, - RadarSeriesArea, - RadarMetricLabels, - RadarAxisHighlight, -} from '@mui/x-charts/RadarChart'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { ChartsLegend } from '@mui/x-charts/ChartsLegend'; - -export default function CompositionExample() { - return ( - - - - - - - - - - - - - - ); -} - -// Data from https://ourworldindata.org/emissions-by-fuel -const series = [ - { - id: 'usa-id', - label: 'USA', - data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12], - fillArea: true, - }, - { - id: 'australia-id', - label: 'Australia', - data: [5.52, 5.5, 3.19, 0.51, 0.15, 0.11], - fillArea: true, - }, -]; - -const radar = { - metrics: ['Oil', 'Coal', 'Gas', 'Flaring', 'Other\nindustry', 'Cement'], -}; -const margin = { left: 50, right: 50 }; diff --git a/docs/data/charts/radar/CompositionExample.tsx b/docs/data/charts/radar/CompositionExample.tsx deleted file mode 100644 index 5a783abefe8be..0000000000000 --- a/docs/data/charts/radar/CompositionExample.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import Stack from '@mui/material/Stack'; -import { - RadarDataProvider, - RadarGrid, - RadarSeriesMarks, - RadarSeriesArea, - RadarMetricLabels, - RadarAxisHighlight, -} from '@mui/x-charts/RadarChart'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { ChartsLegend } from '@mui/x-charts/ChartsLegend'; - -export default function CompositionExample() { - return ( - - - - - - - - - - - - - - ); -} - -// Data from https://ourworldindata.org/emissions-by-fuel -const series = [ - { - id: 'usa-id', - label: 'USA', - data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12], - fillArea: true, - }, - { - id: 'australia-id', - label: 'Australia', - data: [5.52, 5.5, 3.19, 0.51, 0.15, 0.11], - fillArea: true, - }, -]; -const radar = { - metrics: ['Oil', 'Coal', 'Gas', 'Flaring', 'Other\nindustry', 'Cement'], -}; -const margin = { left: 50, right: 50 }; diff --git a/docs/data/charts/radar/DemoRadar.js b/docs/data/charts/radar/DemoRadar.js deleted file mode 100644 index b34331a6ce58d..0000000000000 --- a/docs/data/charts/radar/DemoRadar.js +++ /dev/null @@ -1,105 +0,0 @@ -import Box from '@mui/material/Box'; -import { useTheme } from '@mui/material/styles'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import { RadarChart } from '@mui/x-charts/RadarChart'; - -export default function DemoRadar() { - const theme = useTheme(); - - const stripeColorFunction = { - default: undefined, - 'two-tones': - theme.palette.mode === 'dark' - ? (index) => - index % 2 === 0 - ? (theme.vars || theme).palette.primary.dark - : (theme.vars || theme).palette.grey[300] - : (index) => - index % 2 === 0 - ? (theme.vars || theme).palette.primary.light - : (theme.vars || theme).palette.grey[800], - null: null, - }; - const stripeColorLines = { - default: [], - 'two-tones': - theme.palette.mode === 'dark' - ? [ - ` stripeColor={(index:number) => index % 2 === 0 ? theme.palette.primary.dark : theme.palette.grey[300]}`, - ] - : [ - ` stripeColor={(index:number) => index % 2 === 0 ? theme.palette.primary.light : theme.palette.grey[800]}`, - ], - null: [` stripeColor={null}`], - }; - - return ( - ( - - - - )} - getCode={({ props }) => - [ - `import { RadarChart } from '@mui/x-charts/RadarChart';`, - '', - `', - ].join('\n') - } - /> - ); -} diff --git a/docs/data/charts/radar/DemoRadarAxis.js b/docs/data/charts/radar/DemoRadarAxis.js deleted file mode 100644 index abd6758a90343..0000000000000 --- a/docs/data/charts/radar/DemoRadarAxis.js +++ /dev/null @@ -1,103 +0,0 @@ -import Box from '@mui/material/Box'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import { RadarChart, RadarAxis } from '@mui/x-charts/RadarChart'; - -function getTextAnchor(textAnchor) { - switch (textAnchor) { - case 'default': - return undefined; - case 'function': - return (angle) => (angle < 180 ? 'start' : 'end'); - default: - return textAnchor; - } -} - -function getTextAnchorCode(textAnchor) { - switch (textAnchor) { - case 'default': - return ''; - case 'function': - return `textAnchor={(angle) => angle < 180 ? 'start' : 'end'}`; - default: - return `textAnchor="${textAnchor}"`; - } -} - -export default function DemoRadarAxis() { - return ( - ( - - - - - - )} - getCode={({ props }) => { - const textAnchorCode = getTextAnchorCode(props.textAnchor); - return [ - `import { RadarChart, RadarAxis } from '@mui/x-charts/RadarChart';`, - '', - '', - ` ', - '', - ].join('\n'); - }} - /> - ); -} diff --git a/docs/data/charts/radar/DemoRadarAxisHighlight.js b/docs/data/charts/radar/DemoRadarAxisHighlight.js deleted file mode 100644 index 629d288ca2a81..0000000000000 --- a/docs/data/charts/radar/DemoRadarAxisHighlight.js +++ /dev/null @@ -1,56 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import { RadarChart } from '@mui/x-charts/RadarChart'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; - -export default function DemoRadarAxisHighlight() { - const [hideMark, setHideMark] = React.useState(true); - - const withHideMark = (series) => series.map((item) => ({ ...item, hideMark })); - - return ( - - - setHideMark(!event.target.checked)} /> - } - label="with mark" - labelPlacement="end" - /> - - - - - - - - ); -} - -const commonSettings = { - height: 300, - radar: { - max: 120, - metrics: ['Math', 'Chinese', 'English', 'Geography', 'Physics', 'History'], - }, -}; -const lisaGrades = { - label: 'Lisa', - data: [120, 98, 86, 99, 85, 65], - hideMark: false, -}; -const bartGrades = { - label: 'Bart', - data: [25, 34, 51, 16, 90, 20], - hideMark: false, -}; diff --git a/docs/data/charts/radar/DemoRadarSeriesHighlight.js b/docs/data/charts/radar/DemoRadarSeriesHighlight.js deleted file mode 100644 index 205bbdfb12b72..0000000000000 --- a/docs/data/charts/radar/DemoRadarSeriesHighlight.js +++ /dev/null @@ -1,102 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import { RadarChart } from '@mui/x-charts/RadarChart'; - -import Box from '@mui/material/Box'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; - -function valueFormatter(v) { - if (v === null) { - return 'NaN'; - } - return `${v.toLocaleString()}t CO2eq/pers`; -} - -export default function DemoRadarSeriesHighlight() { - const [highlightedItem, setHighlightedItem] = React.useState(null); - const [fillArea, setFillArea] = React.useState(false); - - const withOptions = (series) => - series.map((item) => ({ - ...item, - fillArea, - })); - - const handleHighLightedSeries = (event, newHighLightedSeries) => { - if (newHighLightedSeries !== null) { - setHighlightedItem({ - seriesId: newHighLightedSeries, - }); - } - }; - return ( - - - {series.map((item) => ( - - {item.label} - - ))} - - - - - setFillArea(event.target.checked)} /> - } - label="fill area" - labelPlacement="end" - /> - - ); -} - -// Data from https://ourworldindata.org/emissions-by-fuel -const series = [ - { - id: 'usa', - label: 'USA', - data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12], - valueFormatter, - }, - { - id: 'australia', - label: 'Australia', - data: [5.52, 5.5, 3.19, 0.51, 0.15, 0.11], - valueFormatter, - }, - { - id: 'united-kingdom', - label: 'United Kingdom', - data: [2.26, 0.29, 2.03, 0.05, 0.04, 0.06], - valueFormatter, - }, -]; - -const radar = { - metrics: ['Oil', 'Coal', 'Gas', 'Flaring', 'Other\nindustry', 'Cement'], -}; diff --git a/docs/data/charts/radar/DemoRadarVisualisation.js b/docs/data/charts/radar/DemoRadarVisualisation.js deleted file mode 100644 index 0327d1bd4f7fe..0000000000000 --- a/docs/data/charts/radar/DemoRadarVisualisation.js +++ /dev/null @@ -1,66 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import { RadarChart } from '@mui/x-charts/RadarChart'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; - -export default function DemoRadarVisualisation() { - const [hideMark, setHideMark] = React.useState(false); - const [fillArea, setFillArea] = React.useState(false); - - const withOptions = (series) => - series.map((item) => ({ ...item, hideMark, fillArea })); - - return ( - - - setHideMark(!event.target.checked)} /> - } - label="with mark" - labelPlacement="end" - /> - setFillArea(event.target.checked)} /> - } - label="fill area" - labelPlacement="end" - /> - - - - - - - - ); -} - -const commonSettings = { - height: 300, - radar: { - max: 120, - metrics: ['Math', 'Chinese', 'English', 'Geography', 'Physics', 'History'], - }, -}; -const lisaGrades = { - label: 'Lisa', - data: [120, 98, 86, 99, 85, 65], - hideMark: false, -}; -const bartGrades = { - label: 'Bart', - data: [25, 34, 51, 16, 90, 20], - hideMark: false, -}; diff --git a/docs/data/charts/radar/MultiSeriesRadar.js b/docs/data/charts/radar/MultiSeriesRadar.js deleted file mode 100644 index 6b37c9ad4dff6..0000000000000 --- a/docs/data/charts/radar/MultiSeriesRadar.js +++ /dev/null @@ -1,34 +0,0 @@ -import { RadarChart } from '@mui/x-charts/RadarChart'; - -// Data from https://ourworldindata.org/emissions-by-fuel - -function valueFormatter(v) { - if (v === null) { - return 'NaN'; - } - return `${v.toLocaleString()}t CO2eq/pers`; -} - -export default function MultiSeriesRadar() { - return ( - - ); -} diff --git a/docs/data/charts/radar/RadarAxis.js b/docs/data/charts/radar/RadarAxis.js deleted file mode 100644 index a8d6b2983f26a..0000000000000 --- a/docs/data/charts/radar/RadarAxis.js +++ /dev/null @@ -1,20 +0,0 @@ -import { RadarChart } from '@mui/x-charts/RadarChart'; - -export default function RadarAxis() { - return ( - - ); -} diff --git a/docs/data/charts/radar/RadarAxis.tsx.preview b/docs/data/charts/radar/RadarAxis.tsx.preview deleted file mode 100644 index 4c00549b03fc8..0000000000000 --- a/docs/data/charts/radar/RadarAxis.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/radar/RadarClick.js b/docs/data/charts/radar/RadarClick.js deleted file mode 100644 index 4e8de13567869..0000000000000 --- a/docs/data/charts/radar/RadarClick.js +++ /dev/null @@ -1,119 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import ToggleButton from '@mui/material/ToggleButton'; -import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; - -import { RadarChart } from '@mui/x-charts/RadarChart'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -export default function RadarClick() { - const [itemData, setItemData] = React.useState(); - const [axisData, setAxisData] = React.useState(); - const [itemClick, setItemClick] = React.useState('mark'); - - const handleItemClick = (event, newItem) => { - setItemClick(newItem); - }; - - return ( - - - setItemData(d) : undefined - } - onMarkClick={ - itemClick === 'mark' ? (event, d) => setItemData(d) : undefined - } - onAxisClick={(event, d) => setAxisData(d)} - /> - - - - Item click listener - - Mark - Area - - -
- - Click on the chart - { - setItemData(undefined); - setAxisData(null); - }} - > - - - - -
- - - ); -} - -const commonSettings = { - height: 300, - radar: { - max: 120, - metrics: ['Math', 'Chinese', 'English', 'Geography', 'Physics', 'History'], - }, -}; -const lisaGrades = { - type: 'radar', - label: 'Lisa', - id: 'lisa-grade-series', - data: [120, 98, 86, 99, 85, 65], - hideMark: false, -}; -const bartGrades = { - type: 'radar', - label: 'Bart', - id: 'bar-grade-series', - data: [25, 34, 51, 16, 90, 20], - hideMark: false, -}; diff --git a/docs/data/charts/radar/RadarTooltip.js b/docs/data/charts/radar/RadarTooltip.js deleted file mode 100644 index 66b55df0a488b..0000000000000 --- a/docs/data/charts/radar/RadarTooltip.js +++ /dev/null @@ -1,59 +0,0 @@ -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import { RadarChart } from '@mui/x-charts/RadarChart'; -import Typography from '@mui/material/Typography'; - -export default function RadarTooltip() { - return ( - - - Axis - - - - Item - - - - ); -} - -// Data from https://ourworldindata.org/emissions-by-fuel -const series = [ - { - id: 'usa', - label: 'USA', - data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12], - }, - { - id: 'australia', - label: 'Australia', - data: [5.52, 5.5, 3.19, 0.51, 0.15, 0.11], - }, - { - id: 'united-kingdom', - label: 'United Kingdom', - data: [2.26, 0.29, 2.03, 0.05, 0.04, 0.06], - }, -]; - -const radar = { - metrics: ['Oil', 'Coal', 'Gas', 'Flaring', 'Other\nindustry', 'Cement'], -}; - -const radarChartsParams = { - hideLegend: true, - height: 300, - series, - radar, -}; diff --git a/docs/data/charts/radar/RadarTooltip.tsx.preview b/docs/data/charts/radar/RadarTooltip.tsx.preview deleted file mode 100644 index feeec8ac18e21..0000000000000 --- a/docs/data/charts/radar/RadarTooltip.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - Axis - - - - Item - - \ No newline at end of file diff --git a/docs/data/charts/radar/BasicRadar.tsx b/docs/data/charts/radar/demos/basic-radar/BasicRadar.tsx similarity index 87% rename from docs/data/charts/radar/BasicRadar.tsx rename to docs/data/charts/radar/demos/basic-radar/BasicRadar.tsx index 512cbaa0bea23..d22804f29aeda 100644 --- a/docs/data/charts/radar/BasicRadar.tsx +++ b/docs/data/charts/radar/demos/basic-radar/BasicRadar.tsx @@ -2,6 +2,7 @@ import { RadarChart } from '@mui/x-charts/RadarChart'; export default function BasicRadar() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/radar/demos/basic-radar/client.ts b/docs/data/charts/radar/demos/basic-radar/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radar/demos/basic-radar/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radar/demos/basic-radar/index.ts b/docs/data/charts/radar/demos/basic-radar/index.ts new file mode 100644 index 0000000000000..5d89fb4ed6671 --- /dev/null +++ b/docs/data/charts/radar/demos/basic-radar/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicRadar from './BasicRadar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicRadar, { ClientProvider }); diff --git a/docs/data/charts/radar/demos/composition-example/CompositionExample.tsx b/docs/data/charts/radar/demos/composition-example/CompositionExample.tsx new file mode 100644 index 0000000000000..d8eabcf2ebc9f --- /dev/null +++ b/docs/data/charts/radar/demos/composition-example/CompositionExample.tsx @@ -0,0 +1,61 @@ +import Stack from '@mui/material/Stack'; +import { + RadarDataProvider, + RadarGrid, + RadarSeriesMarks, + RadarSeriesArea, + RadarMetricLabels, + RadarAxisHighlight, +} from '@mui/x-charts/RadarChart'; +import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; +import { ChartsLegend } from '@mui/x-charts/ChartsLegend'; + +export default function CompositionExample() { + return ( + // @focus-start @padding 2 + + + + + + + + + + + + + + // @focus-end + ); +} + +// Data from https://ourworldindata.org/emissions-by-fuel +const series = [ + { + id: 'usa-id', + label: 'USA', + data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12], + fillArea: true, + }, + { + id: 'australia-id', + label: 'Australia', + data: [5.52, 5.5, 3.19, 0.51, 0.15, 0.11], + fillArea: true, + }, +]; +const radar = { + metrics: ['Oil', 'Coal', 'Gas', 'Flaring', 'Other\nindustry', 'Cement'], +}; +const margin = { left: 50, right: 50 }; diff --git a/docs/data/charts/radar/demos/composition-example/client.ts b/docs/data/charts/radar/demos/composition-example/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radar/demos/composition-example/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radar/demos/composition-example/index.ts b/docs/data/charts/radar/demos/composition-example/index.ts new file mode 100644 index 0000000000000..7a03486adc223 --- /dev/null +++ b/docs/data/charts/radar/demos/composition-example/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CompositionExample from './CompositionExample'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CompositionExample, { ClientProvider }); diff --git a/docs/data/charts/radar/DemoRadarAxisHighlight.tsx b/docs/data/charts/radar/demos/demo-radar-axis-highlight/DemoRadarAxisHighlight.tsx similarity index 90% rename from docs/data/charts/radar/DemoRadarAxisHighlight.tsx rename to docs/data/charts/radar/demos/demo-radar-axis-highlight/DemoRadarAxisHighlight.tsx index 8ea39145760f0..3621ae90b301f 100644 --- a/docs/data/charts/radar/DemoRadarAxisHighlight.tsx +++ b/docs/data/charts/radar/demos/demo-radar-axis-highlight/DemoRadarAxisHighlight.tsx @@ -1,11 +1,13 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; -import { RadarChart, RadarSeries } from '@mui/x-charts/RadarChart'; +import type { RadarSeries } from '@mui/x-charts/RadarChart'; +import { RadarChart } from '@mui/x-charts/RadarChart'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; export default function DemoRadarAxisHighlight() { + // @focus-start @padding 1 const [hideMark, setHideMark] = React.useState(true); const withHideMark = (series: RadarSeries[]) => @@ -36,6 +38,7 @@ export default function DemoRadarAxisHighlight() { ); + // @focus-end } const commonSettings = { diff --git a/docs/data/charts/radar/demos/demo-radar-axis-highlight/client.ts b/docs/data/charts/radar/demos/demo-radar-axis-highlight/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radar/demos/demo-radar-axis-highlight/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radar/demos/demo-radar-axis-highlight/index.ts b/docs/data/charts/radar/demos/demo-radar-axis-highlight/index.ts new file mode 100644 index 0000000000000..19208222c1d4e --- /dev/null +++ b/docs/data/charts/radar/demos/demo-radar-axis-highlight/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DemoRadarAxisHighlight from './DemoRadarAxisHighlight'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DemoRadarAxisHighlight, { ClientProvider }); diff --git a/docs/data/charts/radar/DemoRadarAxis.tsx b/docs/data/charts/radar/demos/demo-radar-axis/DemoRadarAxis.tsx similarity index 98% rename from docs/data/charts/radar/DemoRadarAxis.tsx rename to docs/data/charts/radar/demos/demo-radar-axis/DemoRadarAxis.tsx index 441c9396ef182..d8aa859a4df20 100644 --- a/docs/data/charts/radar/DemoRadarAxis.tsx +++ b/docs/data/charts/radar/demos/demo-radar-axis/DemoRadarAxis.tsx @@ -26,6 +26,7 @@ function getTextAnchorCode(textAnchor: 'default' | 'start' | 'end' | 'function') export default function DemoRadarAxis() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/radar/demos/demo-radar-axis/client.ts b/docs/data/charts/radar/demos/demo-radar-axis/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radar/demos/demo-radar-axis/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radar/demos/demo-radar-axis/index.ts b/docs/data/charts/radar/demos/demo-radar-axis/index.ts new file mode 100644 index 0000000000000..e4c015c25cada --- /dev/null +++ b/docs/data/charts/radar/demos/demo-radar-axis/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DemoRadarAxis from './DemoRadarAxis'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DemoRadarAxis, { ClientProvider }); diff --git a/docs/data/charts/radar/DemoRadarSeriesHighlight.tsx b/docs/data/charts/radar/demos/demo-radar-series-highlight/DemoRadarSeriesHighlight.tsx similarity index 92% rename from docs/data/charts/radar/DemoRadarSeriesHighlight.tsx rename to docs/data/charts/radar/demos/demo-radar-series-highlight/DemoRadarSeriesHighlight.tsx index 034c9056508e1..b6976596b9499 100644 --- a/docs/data/charts/radar/DemoRadarSeriesHighlight.tsx +++ b/docs/data/charts/radar/demos/demo-radar-series-highlight/DemoRadarSeriesHighlight.tsx @@ -2,8 +2,9 @@ import * as React from 'react'; import Stack from '@mui/material/Stack'; import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import { RadarChart, RadarSeries } from '@mui/x-charts/RadarChart'; -import { HighlightItemIdentifier } from '@mui/x-charts/models'; +import type { RadarSeries } from '@mui/x-charts/RadarChart'; +import { RadarChart } from '@mui/x-charts/RadarChart'; +import type { HighlightItemIdentifier } from '@mui/x-charts/models'; import Box from '@mui/material/Box'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; @@ -16,6 +17,7 @@ function valueFormatter(v: number | null) { } export default function DemoRadarSeriesHighlight() { + // @focus-start @padding 1 const [highlightedItem, setHighlightedItem] = React.useState | null>(null); const [fillArea, setFillArea] = React.useState(false); @@ -74,6 +76,7 @@ export default function DemoRadarSeriesHighlight() { /> ); + // @focus-end } // Data from https://ourworldindata.org/emissions-by-fuel diff --git a/docs/data/charts/radar/demos/demo-radar-series-highlight/client.ts b/docs/data/charts/radar/demos/demo-radar-series-highlight/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radar/demos/demo-radar-series-highlight/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radar/demos/demo-radar-series-highlight/index.ts b/docs/data/charts/radar/demos/demo-radar-series-highlight/index.ts new file mode 100644 index 0000000000000..5aab5b94b360d --- /dev/null +++ b/docs/data/charts/radar/demos/demo-radar-series-highlight/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DemoRadarSeriesHighlight from './DemoRadarSeriesHighlight'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DemoRadarSeriesHighlight, { ClientProvider }); diff --git a/docs/data/charts/radar/DemoRadarVisualisation.tsx b/docs/data/charts/radar/demos/demo-radar-visualisation/DemoRadarVisualisation.tsx similarity index 92% rename from docs/data/charts/radar/DemoRadarVisualisation.tsx rename to docs/data/charts/radar/demos/demo-radar-visualisation/DemoRadarVisualisation.tsx index 31d0542b333da..be6c8cad0218b 100644 --- a/docs/data/charts/radar/DemoRadarVisualisation.tsx +++ b/docs/data/charts/radar/demos/demo-radar-visualisation/DemoRadarVisualisation.tsx @@ -1,11 +1,13 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; -import { RadarChart, RadarSeries } from '@mui/x-charts/RadarChart'; +import type { RadarSeries } from '@mui/x-charts/RadarChart'; +import { RadarChart } from '@mui/x-charts/RadarChart'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; export default function DemoRadarVisualisation() { + // @focus-start @padding 1 const [hideMark, setHideMark] = React.useState(false); const [fillArea, setFillArea] = React.useState(false); @@ -45,6 +47,7 @@ export default function DemoRadarVisualisation() { ); + // @focus-end } const commonSettings = { diff --git a/docs/data/charts/radar/demos/demo-radar-visualisation/client.ts b/docs/data/charts/radar/demos/demo-radar-visualisation/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radar/demos/demo-radar-visualisation/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radar/demos/demo-radar-visualisation/index.ts b/docs/data/charts/radar/demos/demo-radar-visualisation/index.ts new file mode 100644 index 0000000000000..64eb3a99ccf73 --- /dev/null +++ b/docs/data/charts/radar/demos/demo-radar-visualisation/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DemoRadarVisualisation from './DemoRadarVisualisation'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DemoRadarVisualisation, { ClientProvider }); diff --git a/docs/data/charts/radar/DemoRadar.tsx b/docs/data/charts/radar/demos/demo-radar/DemoRadar.tsx similarity index 98% rename from docs/data/charts/radar/DemoRadar.tsx rename to docs/data/charts/radar/demos/demo-radar/DemoRadar.tsx index c33da87cd54db..7b7a04ba5323c 100644 --- a/docs/data/charts/radar/DemoRadar.tsx +++ b/docs/data/charts/radar/demos/demo-radar/DemoRadar.tsx @@ -4,6 +4,7 @@ import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; import { RadarChart } from '@mui/x-charts/RadarChart'; export default function DemoRadar() { + // @focus-start @padding 1 const theme = useTheme(); const stripeColorFunction = { @@ -102,4 +103,5 @@ export default function DemoRadar() { } /> ); + // @focus-end } diff --git a/docs/data/charts/radar/demos/demo-radar/client.ts b/docs/data/charts/radar/demos/demo-radar/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radar/demos/demo-radar/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radar/demos/demo-radar/index.ts b/docs/data/charts/radar/demos/demo-radar/index.ts new file mode 100644 index 0000000000000..fd5b2e8201c7f --- /dev/null +++ b/docs/data/charts/radar/demos/demo-radar/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DemoRadar from './DemoRadar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DemoRadar, { ClientProvider }); diff --git a/docs/data/charts/radar/MultiSeriesRadar.tsx b/docs/data/charts/radar/demos/multi-series-radar/MultiSeriesRadar.tsx similarity index 94% rename from docs/data/charts/radar/MultiSeriesRadar.tsx rename to docs/data/charts/radar/demos/multi-series-radar/MultiSeriesRadar.tsx index 1221534e04e16..54e32e49e19ec 100644 --- a/docs/data/charts/radar/MultiSeriesRadar.tsx +++ b/docs/data/charts/radar/demos/multi-series-radar/MultiSeriesRadar.tsx @@ -11,6 +11,7 @@ function valueFormatter(v: number | null) { export default function MultiSeriesRadar() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/radar/demos/multi-series-radar/client.ts b/docs/data/charts/radar/demos/multi-series-radar/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radar/demos/multi-series-radar/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radar/demos/multi-series-radar/index.ts b/docs/data/charts/radar/demos/multi-series-radar/index.ts new file mode 100644 index 0000000000000..e3e85477fdbec --- /dev/null +++ b/docs/data/charts/radar/demos/multi-series-radar/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MultiSeriesRadar from './MultiSeriesRadar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MultiSeriesRadar, { ClientProvider }); diff --git a/docs/data/charts/radar/RadarAxis.tsx b/docs/data/charts/radar/demos/radar-axis/RadarAxis.tsx similarity index 91% rename from docs/data/charts/radar/RadarAxis.tsx rename to docs/data/charts/radar/demos/radar-axis/RadarAxis.tsx index a8d6b2983f26a..fe9860c99309f 100644 --- a/docs/data/charts/radar/RadarAxis.tsx +++ b/docs/data/charts/radar/demos/radar-axis/RadarAxis.tsx @@ -2,6 +2,7 @@ import { RadarChart } from '@mui/x-charts/RadarChart'; export default function RadarAxis() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/radar/demos/radar-axis/client.ts b/docs/data/charts/radar/demos/radar-axis/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radar/demos/radar-axis/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radar/demos/radar-axis/index.ts b/docs/data/charts/radar/demos/radar-axis/index.ts new file mode 100644 index 0000000000000..db08070d2a205 --- /dev/null +++ b/docs/data/charts/radar/demos/radar-axis/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RadarAxis from './RadarAxis'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RadarAxis, { ClientProvider }); diff --git a/docs/data/charts/radar/RadarClick.tsx b/docs/data/charts/radar/demos/radar-click/RadarClick.tsx similarity index 98% rename from docs/data/charts/radar/RadarClick.tsx rename to docs/data/charts/radar/demos/radar-click/RadarClick.tsx index 95697fbe38ffe..79cf01389baf6 100644 --- a/docs/data/charts/radar/RadarClick.tsx +++ b/docs/data/charts/radar/demos/radar-click/RadarClick.tsx @@ -6,7 +6,7 @@ import IconButton from '@mui/material/IconButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import ToggleButton from '@mui/material/ToggleButton'; import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; -import { +import type { ChartsAxisData, RadarItemIdentifier, RadarSeriesType, @@ -15,6 +15,7 @@ import { RadarChart } from '@mui/x-charts/RadarChart'; import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; export default function RadarClick() { + // @focus-start @padding 1 const [itemData, setItemData] = React.useState(); const [axisData, setAxisData] = React.useState(); const [itemClick, setItemClick] = React.useState<'mark' | 'area' | null>('mark'); @@ -101,6 +102,7 @@ ${axisData ? JSON.stringify(axisData, null, 2) : '// The data will appear here'} ); + // @focus-end } const commonSettings = { diff --git a/docs/data/charts/radar/demos/radar-click/client.ts b/docs/data/charts/radar/demos/radar-click/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radar/demos/radar-click/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radar/demos/radar-click/index.ts b/docs/data/charts/radar/demos/radar-click/index.ts new file mode 100644 index 0000000000000..5e4e0ebe4cfd8 --- /dev/null +++ b/docs/data/charts/radar/demos/radar-click/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RadarClick from './RadarClick'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RadarClick, { ClientProvider }); diff --git a/docs/data/charts/radar/RadarTooltip.tsx b/docs/data/charts/radar/demos/radar-tooltip/RadarTooltip.tsx similarity index 96% rename from docs/data/charts/radar/RadarTooltip.tsx rename to docs/data/charts/radar/demos/radar-tooltip/RadarTooltip.tsx index 4005cd92e0cff..e182fd139155c 100644 --- a/docs/data/charts/radar/RadarTooltip.tsx +++ b/docs/data/charts/radar/demos/radar-tooltip/RadarTooltip.tsx @@ -9,6 +9,7 @@ export default function RadarTooltip() { direction="row" sx={{ flexWrap: 'wrap', justifyContent: 'space-around', width: '100%' }} > + {/* @focus-start */} Axis + {/* @focus-end */} ); } diff --git a/docs/data/charts/radar/demos/radar-tooltip/client.ts b/docs/data/charts/radar/demos/radar-tooltip/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radar/demos/radar-tooltip/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radar/demos/radar-tooltip/index.ts b/docs/data/charts/radar/demos/radar-tooltip/index.ts new file mode 100644 index 0000000000000..a44b0fae8afd0 --- /dev/null +++ b/docs/data/charts/radar/demos/radar-tooltip/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RadarTooltip from './RadarTooltip'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RadarTooltip, { ClientProvider }); diff --git a/docs/data/charts/radar/radar.md b/docs/data/charts/radar/radar.md index 83b5603fd5c06..b6935d963c7cd 100644 --- a/docs/data/charts/radar/radar.md +++ b/docs/data/charts/radar/radar.md @@ -15,7 +15,7 @@ Use it to compare profiles or scores across several dimensions (for example, pro The demo below shows a basic radar chart with one series. -{{"demo": "BasicRadar.js"}} +{{"component": "file://./demos/basic-radar/index.ts"}} ## Basics @@ -28,13 +28,13 @@ Each entry in `metrics` is a string or an object that defines one axis of the ch You can plot multiple series on the same radar. -{{"demo": "MultiSeriesRadar.js"}} +{{"component": "file://./demos/multi-series-radar/index.ts"}} ## Series options Set `hideMark` and `fillArea` on a radar series to change how it renders. -{{"demo": "DemoRadarVisualisation.js"}} +{{"component": "file://./demos/demo-radar-visualisation/index.ts"}} ## Metrics @@ -47,7 +47,7 @@ Each item can be: - `min`: minimum value for this axis (default 0) - `max`: maximum value for this axis (default is the max value in the data) -{{"demo": "RadarAxis.js"}} +{{"component": "file://./demos/radar-axis/index.ts"}} ## Grid @@ -59,7 +59,7 @@ Configure it with: - `shape`: `circular` or `sharp` - `stripeColor`: callback that returns stripe colors. Set to `null` to remove stripes. -{{"demo": "DemoRadar.js"}} +{{"component": "file://./demos/demo-radar/index.ts"}} ## Axis values @@ -71,7 +71,7 @@ It needs a `metric` prop and can be configured with: - `divisions`: number of labels - `textAnchor` / `dominantBaseline`: label placement (string or function that receives the angle in degrees) -{{"demo": "DemoRadarAxis.js"}} +{{"component": "file://./demos/demo-radar-axis/index.ts"}} ## Highlight @@ -80,7 +80,7 @@ It needs a `metric` prop and can be configured with: By default, the radar chart highlights all values on the same axis. If you're composing a custom component, add `RadarAxisHighlight` to get this behavior. -{{"demo": "DemoRadarAxisHighlight.js"}} +{{"component": "file://./demos/demo-radar-axis-highlight/index.ts"}} ### Series highlight @@ -92,7 +92,7 @@ If you're composing a custom component, pass these props to `RadarDataProvider`. The demo below shows controlled highlight with several overlapping country series. Place the series you want to be most interactive last in the `series` array, since later series render on top and receive pointer events first in overlapping regions. -{{"demo": "DemoRadarSeriesHighlight.js"}} +{{"component": "file://./demos/demo-radar-series-highlight/index.ts"}} ### Disabling highlight @@ -109,7 +109,7 @@ The `trigger` prop of the tooltip slot accepts: - `'item'`: when the pointer is over a radar area, the tooltip shows data for that series. - `'none'`: tooltip is off. -{{"demo": "RadarTooltip.js"}} +{{"component": "file://./demos/radar-tooltip/index.ts"}} ## Click events @@ -128,7 +128,7 @@ const clickHandler = ( ) => {}; ``` -{{"demo": "RadarClick.js"}} +{{"component": "file://./demos/radar-click/index.ts"}} :::info The `event` passed to `onAxisClick` differs from the others. @@ -159,7 +159,7 @@ In addition to the shared chart components available for [composition](/x/react- `RadarSeriesArea` and `RadarSeriesMarks` let you draw all marks above all areas, or insert components between areas and marks. ::: -{{"demo": "CompositionExample.js"}} +{{"component": "file://./demos/composition-example/index.ts"}} Here's how the radar chart is composed: diff --git a/docs/data/charts/radial-axes/BandHighlight.js b/docs/data/charts/radial-axes/BandHighlight.js deleted file mode 100644 index e5a2c3c4effd3..0000000000000 --- a/docs/data/charts/radial-axes/BandHighlight.js +++ /dev/null @@ -1,111 +0,0 @@ -import * as React from 'react'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; -import RadioGroup from '@mui/material/RadioGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Radio from '@mui/material/Radio'; -import Stack from '@mui/material/Stack'; -import { RadialLineChart } from '@mui/x-charts-premium/RadialLineChart'; -import { dataset, valueFormatter } from '../dataset/weather'; - -export default function BandHighlight() { - const [scaleType, setScaleType] = React.useState('point'); - const [rotationHighlight, setRotationHighlight] = React.useState('band'); - const [radiusHighlight, setRadiusHighlight] = React.useState('none'); - - const handleChange = (direction) => (event) => { - if (direction === 'rotation') { - setRotationHighlight(event.target.value); - } - if (direction === 'radius') { - setRadiusHighlight(event.target.value); - } - if (direction === 'scaleType') { - setScaleType(event.target.value); - } - }; - - return ( - -
- ({ ...item, month: index + 1 })) - : dataset - } - radiusAxis={[{ minRadius: 10, min: 0 }]} - rotationAxis={[{ dataKey: 'month', scaleType }]} - series={[ - { - dataKey: 'london', - curve: 'linear', - label: 'London', - valueFormatter, - showMark: true, - }, - { - dataKey: 'paris', - curve: 'linear', - label: 'Paris', - valueFormatter, - showMark: true, - }, - { - dataKey: 'newYork', - curve: 'linear', - label: 'New York', - valueFormatter, - showMark: true, - }, - ]} - margin={10} - height={300} - grid={{ rotation: true, radius: true }} - axisHighlight={{ rotation: rotationHighlight, radius: radiusHighlight }} - /> -
- - - scale type - - } label="Band" /> - } label="Point" /> - } label="Linear" /> - - - - rotation highlight - - } label="None" /> - } label="Line" /> - } label="Band" /> - - - - radius highlight - - } label="None" /> - } label="Line" /> - - - - - ); -} diff --git a/docs/data/charts/radial-axes/BandHighlight.tsx b/docs/data/charts/radial-axes/BandHighlight.tsx deleted file mode 100644 index 43a22727f7e2e..0000000000000 --- a/docs/data/charts/radial-axes/BandHighlight.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import * as React from 'react'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; -import RadioGroup from '@mui/material/RadioGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Radio from '@mui/material/Radio'; -import Stack from '@mui/material/Stack'; -import { RadialLineChart } from '@mui/x-charts-premium/RadialLineChart'; -import { dataset, valueFormatter } from '../dataset/weather'; - -export default function BandHighlight() { - const [scaleType, setScaleType] = React.useState<'band' | 'point' | 'linear'>( - 'point', - ); - const [rotationHighlight, setRotationHighlight] = React.useState< - 'band' | 'none' | 'line' - >('band'); - const [radiusHighlight, setRadiusHighlight] = React.useState<'none' | 'line'>( - 'none', - ); - - const handleChange = - (direction: 'rotation' | 'radius' | 'scaleType') => - (event: React.ChangeEvent) => { - if (direction === 'rotation') { - setRotationHighlight( - (event.target as HTMLInputElement).value as 'band' | 'none' | 'line', - ); - } - if (direction === 'radius') { - setRadiusHighlight( - (event.target as HTMLInputElement).value as 'none' | 'line', - ); - } - if (direction === 'scaleType') { - setScaleType( - (event.target as HTMLInputElement).value as 'band' | 'point' | 'linear', - ); - } - }; - - return ( - -
- ({ ...item, month: index + 1 })) - : dataset - } - radiusAxis={[{ minRadius: 10, min: 0 }]} - rotationAxis={[{ dataKey: 'month', scaleType }]} - series={[ - { - dataKey: 'london', - curve: 'linear', - label: 'London', - valueFormatter, - showMark: true, - }, - { - dataKey: 'paris', - curve: 'linear', - label: 'Paris', - valueFormatter, - showMark: true, - }, - { - dataKey: 'newYork', - curve: 'linear', - label: 'New York', - valueFormatter, - showMark: true, - }, - ]} - margin={10} - height={300} - grid={{ rotation: true, radius: true }} - axisHighlight={{ rotation: rotationHighlight, radius: radiusHighlight }} - /> -
- - - scale type - - } label="Band" /> - } label="Point" /> - } label="Linear" /> - - - - rotation highlight - - } label="None" /> - } label="Line" /> - } label="Band" /> - - - - radius highlight - - } label="None" /> - } label="Line" /> - - - - - ); -} diff --git a/docs/data/charts/radial-axes/RadialGridPlayground.js b/docs/data/charts/radial-axes/RadialGridPlayground.js deleted file mode 100644 index 5f9152bce2473..0000000000000 --- a/docs/data/charts/radial-axes/RadialGridPlayground.js +++ /dev/null @@ -1,81 +0,0 @@ -import Box from '@mui/material/Box'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer'; -import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer'; -import { ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid'; -import { ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider'; - -export default function RadialGridPlayground() { - return ( - ( - - - - - - - - - - )} - getCode={({ props }) => ` - -`} - /> - ); -} diff --git a/docs/data/charts/radial-axes/RadiusAxisPercentage.js b/docs/data/charts/radial-axes/RadiusAxisPercentage.js deleted file mode 100644 index b595ea58ce23b..0000000000000 --- a/docs/data/charts/radial-axes/RadiusAxisPercentage.js +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { RadialBarChart } from '@mui/x-charts-premium/RadialBarChart'; - -const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']; - -const series = [ - { data: [3, 5, 7, 12, 15, 18], label: 'Series A', stack: 'a' }, - { data: [12, 15, 18, 16, 13, 6], label: 'Series B', stack: 'a' }, -]; - -const sizes = [320, 200]; - -function Showcase({ minRadius }) { - return ( - - {sizes.map((size) => ( - - ))} - - ); -} - -export default function RadiusAxisPercentage() { - return ( - -
- - {'minRadius: 50 — fixed pixels, the hole stays the same size'} - - -
-
- - {"minRadius: '40%' — scales with the chart"} - - -
- - ); -} diff --git a/docs/data/charts/radial-axes/RadiusAxisPercentage.tsx.preview b/docs/data/charts/radial-axes/RadiusAxisPercentage.tsx.preview deleted file mode 100644 index a1a7569063b12..0000000000000 --- a/docs/data/charts/radial-axes/RadiusAxisPercentage.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ -
- - {'minRadius: 50 — fixed pixels, the hole stays the same size'} - - -
-
- - {"minRadius: '40%' — scales with the chart"} - - -
\ No newline at end of file diff --git a/docs/data/charts/radial-axes/RadiusAxisPlayground.js b/docs/data/charts/radial-axes/RadiusAxisPlayground.js deleted file mode 100644 index 03ff0c971e8a9..0000000000000 --- a/docs/data/charts/radial-axes/RadiusAxisPlayground.js +++ /dev/null @@ -1,124 +0,0 @@ -import Box from '@mui/material/Box'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer'; -import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer'; -import { ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid'; -import { ChartsRadiusAxis } from '@mui/x-charts/ChartsRadiusAxis'; -import { ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider'; - -export default function RadiusAxisPlayground() { - return ( - ( - - - - - - - - - - - )} - getCode={({ props }) => ` ` ${line}`) - .join('\n')} - }]} -> - - -`} - /> - ); -} diff --git a/docs/data/charts/radial-axes/RotationAxisPlayground.js b/docs/data/charts/radial-axes/RotationAxisPlayground.js deleted file mode 100644 index 1c6681f0caebd..0000000000000 --- a/docs/data/charts/radial-axes/RotationAxisPlayground.js +++ /dev/null @@ -1,123 +0,0 @@ -import Box from '@mui/material/Box'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer'; -import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer'; -import { ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid'; -import { ChartsRotationAxis } from '@mui/x-charts/ChartsRotationAxis'; -import { ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider'; - -export default function RotationAxisPlayground() { - return ( - ( - - - - - - - - - - - )} - getCode={({ props }) => ` ` ${line}`) - .join('\n')} - }]} - radiusAxis={[{ - minRadius: ${props.minRadius}, - maxRadius: ${props.maxRadius}, - }]} -> - - -`} - /> - ); -} diff --git a/docs/data/charts/radial-axes/demos/band-highlight/BandHighlight.tsx b/docs/data/charts/radial-axes/demos/band-highlight/BandHighlight.tsx new file mode 100644 index 0000000000000..79fe73fd812fc --- /dev/null +++ b/docs/data/charts/radial-axes/demos/band-highlight/BandHighlight.tsx @@ -0,0 +1,127 @@ +import * as React from 'react'; +import FormControl from '@mui/material/FormControl'; +import FormLabel from '@mui/material/FormLabel'; +import RadioGroup from '@mui/material/RadioGroup'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Radio from '@mui/material/Radio'; +import Stack from '@mui/material/Stack'; +import { RadialLineChart } from '@mui/x-charts-premium/RadialLineChart'; +import { dataset, valueFormatter } from '../../../dataset/weather'; + +export default function BandHighlight() { + // @focus-start @padding 1 + const [scaleType, setScaleType] = React.useState<'band' | 'point' | 'linear'>( + 'point', + ); + const [rotationHighlight, setRotationHighlight] = React.useState< + 'band' | 'none' | 'line' + >('band'); + const [radiusHighlight, setRadiusHighlight] = React.useState<'none' | 'line'>( + 'none', + ); + + const handleChange = + (direction: 'rotation' | 'radius' | 'scaleType') => + (event: React.ChangeEvent) => { + if (direction === 'rotation') { + setRotationHighlight( + (event.target as HTMLInputElement).value as 'band' | 'none' | 'line', + ); + } + if (direction === 'radius') { + setRadiusHighlight( + (event.target as HTMLInputElement).value as 'none' | 'line', + ); + } + if (direction === 'scaleType') { + setScaleType( + (event.target as HTMLInputElement).value as 'band' | 'point' | 'linear', + ); + } + }; + + return ( + +
+ ({ ...item, month: index + 1 })) + : dataset + } + radiusAxis={[{ minRadius: 10, min: 0 }]} + rotationAxis={[{ dataKey: 'month', scaleType }]} + series={[ + { + dataKey: 'london', + curve: 'linear', + label: 'London', + valueFormatter, + showMark: true, + }, + { + dataKey: 'paris', + curve: 'linear', + label: 'Paris', + valueFormatter, + showMark: true, + }, + { + dataKey: 'newYork', + curve: 'linear', + label: 'New York', + valueFormatter, + showMark: true, + }, + ]} + margin={10} + height={300} + grid={{ rotation: true, radius: true }} + axisHighlight={{ rotation: rotationHighlight, radius: radiusHighlight }} + /> +
+ + + scale type + + } label="Band" /> + } label="Point" /> + } label="Linear" /> + + + + rotation highlight + + } label="None" /> + } label="Line" /> + } label="Band" /> + + + + radius highlight + + } label="None" /> + } label="Line" /> + + + + + ); + // @focus-end +} diff --git a/docs/data/charts/radial-axes/demos/band-highlight/client.ts b/docs/data/charts/radial-axes/demos/band-highlight/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radial-axes/demos/band-highlight/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radial-axes/demos/band-highlight/index.ts b/docs/data/charts/radial-axes/demos/band-highlight/index.ts new file mode 100644 index 0000000000000..64f303920e7f0 --- /dev/null +++ b/docs/data/charts/radial-axes/demos/band-highlight/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BandHighlight from './BandHighlight'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BandHighlight, { ClientProvider }); diff --git a/docs/data/charts/radial-axes/RadialGridPlayground.tsx b/docs/data/charts/radial-axes/demos/radial-grid-playground/RadialGridPlayground.tsx similarity index 98% rename from docs/data/charts/radial-axes/RadialGridPlayground.tsx rename to docs/data/charts/radial-axes/demos/radial-grid-playground/RadialGridPlayground.tsx index 76c8f51405138..808e3deac881b 100644 --- a/docs/data/charts/radial-axes/RadialGridPlayground.tsx +++ b/docs/data/charts/radial-axes/demos/radial-grid-playground/RadialGridPlayground.tsx @@ -7,6 +7,7 @@ import { ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider export default function RadialGridPlayground() { return ( + // @focus-start @padding 2 `} /> + // @focus-end ); } diff --git a/docs/data/charts/radial-axes/demos/radial-grid-playground/client.ts b/docs/data/charts/radial-axes/demos/radial-grid-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radial-axes/demos/radial-grid-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radial-axes/demos/radial-grid-playground/index.ts b/docs/data/charts/radial-axes/demos/radial-grid-playground/index.ts new file mode 100644 index 0000000000000..dc0f13894ec3f --- /dev/null +++ b/docs/data/charts/radial-axes/demos/radial-grid-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RadialGridPlayground from './RadialGridPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RadialGridPlayground, { ClientProvider }); diff --git a/docs/data/charts/radial-axes/RadiusAxisPercentage.tsx b/docs/data/charts/radial-axes/demos/radius-axis-percentage/RadiusAxisPercentage.tsx similarity index 96% rename from docs/data/charts/radial-axes/RadiusAxisPercentage.tsx rename to docs/data/charts/radial-axes/demos/radius-axis-percentage/RadiusAxisPercentage.tsx index f52dab1420449..1af581f871f91 100644 --- a/docs/data/charts/radial-axes/RadiusAxisPercentage.tsx +++ b/docs/data/charts/radial-axes/demos/radius-axis-percentage/RadiusAxisPercentage.tsx @@ -38,6 +38,7 @@ function Showcase({ minRadius }: { minRadius: number | string }) { export default function RadiusAxisPercentage() { return ( + {/* @focus-start */}
{'minRadius: 50 — fixed pixels, the hole stays the same size'} @@ -50,6 +51,7 @@ export default function RadiusAxisPercentage() {
+ {/* @focus-end */} ); } diff --git a/docs/data/charts/radial-axes/demos/radius-axis-percentage/client.ts b/docs/data/charts/radial-axes/demos/radius-axis-percentage/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radial-axes/demos/radius-axis-percentage/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radial-axes/demos/radius-axis-percentage/index.ts b/docs/data/charts/radial-axes/demos/radius-axis-percentage/index.ts new file mode 100644 index 0000000000000..a6fcdec3a8ac3 --- /dev/null +++ b/docs/data/charts/radial-axes/demos/radius-axis-percentage/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RadiusAxisPercentage from './RadiusAxisPercentage'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RadiusAxisPercentage, { ClientProvider }); diff --git a/docs/data/charts/radial-axes/RadiusAxisPlayground.tsx b/docs/data/charts/radial-axes/demos/radius-axis-playground/RadiusAxisPlayground.tsx similarity index 98% rename from docs/data/charts/radial-axes/RadiusAxisPlayground.tsx rename to docs/data/charts/radial-axes/demos/radius-axis-playground/RadiusAxisPlayground.tsx index 35769b04dab1d..7604ed474d8e1 100644 --- a/docs/data/charts/radial-axes/RadiusAxisPlayground.tsx +++ b/docs/data/charts/radial-axes/demos/radius-axis-playground/RadiusAxisPlayground.tsx @@ -8,6 +8,7 @@ import { ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider export default function RadiusAxisPlayground() { return ( + // @focus-start @padding 2 `} /> + // @focus-end ); } diff --git a/docs/data/charts/radial-axes/demos/radius-axis-playground/client.ts b/docs/data/charts/radial-axes/demos/radius-axis-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radial-axes/demos/radius-axis-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radial-axes/demos/radius-axis-playground/index.ts b/docs/data/charts/radial-axes/demos/radius-axis-playground/index.ts new file mode 100644 index 0000000000000..9c8c9144dfa95 --- /dev/null +++ b/docs/data/charts/radial-axes/demos/radius-axis-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RadiusAxisPlayground from './RadiusAxisPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RadiusAxisPlayground, { ClientProvider }); diff --git a/docs/data/charts/radial-axes/RotationAxisPlayground.tsx b/docs/data/charts/radial-axes/demos/rotation-axis-playground/RotationAxisPlayground.tsx similarity index 98% rename from docs/data/charts/radial-axes/RotationAxisPlayground.tsx rename to docs/data/charts/radial-axes/demos/rotation-axis-playground/RotationAxisPlayground.tsx index c33c290b576ba..d477280b27bb5 100644 --- a/docs/data/charts/radial-axes/RotationAxisPlayground.tsx +++ b/docs/data/charts/radial-axes/demos/rotation-axis-playground/RotationAxisPlayground.tsx @@ -8,6 +8,7 @@ import { ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider export default function RotationAxisPlayground() { return ( + // @focus-start @padding 2 `} /> + // @focus-end ); } diff --git a/docs/data/charts/radial-axes/demos/rotation-axis-playground/client.ts b/docs/data/charts/radial-axes/demos/rotation-axis-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radial-axes/demos/rotation-axis-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radial-axes/demos/rotation-axis-playground/index.ts b/docs/data/charts/radial-axes/demos/rotation-axis-playground/index.ts new file mode 100644 index 0000000000000..12b79cffaf43d --- /dev/null +++ b/docs/data/charts/radial-axes/demos/rotation-axis-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RotationAxisPlayground from './RotationAxisPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RotationAxisPlayground, { ClientProvider }); diff --git a/docs/data/charts/radial-axes/radial-axes.md b/docs/data/charts/radial-axes/radial-axes.md index 95fba8a8db2d2..5274633e4bbc5 100644 --- a/docs/data/charts/radial-axes/radial-axes.md +++ b/docs/data/charts/radial-axes/radial-axes.md @@ -21,7 +21,7 @@ This component accepts two boolean props `rotation` and `radius` to display grid Use the `chartsRadialGridClasses` to modify the style of this component. -{{"demo": "RadialGridPlayground.js", "hideToolbar": true, "bg": "playground"}} +{{"component": "file://./demos/radial-grid-playground/index.ts", "hideToolbar": true, "bg": "playground"}} ## Axes @@ -57,7 +57,7 @@ It can be set to - `'end'`: Place the axis at the `endAngle` of the rotation axis. - `number`: The angle in degree where to plot the axis. -{{"demo": "RadiusAxisPlayground.js", "hideToolbar": true, "bg": "playground"}} +{{"component": "file://./demos/radius-axis-playground/index.ts", "hideToolbar": true, "bg": "playground"}} #### Radius extent @@ -79,7 +79,7 @@ Percentage values scale with the chart, which keeps the proportions consistent a ``` -{{"demo": "RadiusAxisPercentage.js"}} +{{"component": "file://./demos/radius-axis-percentage/index.ts"}} ### Rotation axis @@ -91,7 +91,7 @@ It can be set to - `'outside'`: Place the axis at the `maxRadius` of the radius axis. Places labels and ticks outside by default. - `'inside'`: Place the axis at the `minRadius` of the radius axis. Places labels and ticks inside by default. -{{"demo": "RotationAxisPlayground.js", "hideToolbar": true, "bg": "playground"}} +{{"component": "file://./demos/rotation-axis-playground/index.ts", "hideToolbar": true, "bg": "playground"}} ## Axis highlight @@ -116,4 +116,4 @@ Or the component when using composition: /> ``` -{{"demo": "BandHighlight.js", "bg": "outline"}} +{{"component": "file://./demos/band-highlight/index.ts", "bg": "outline"}} diff --git a/docs/data/charts/radial-bars/BasicRadialBarChart.js b/docs/data/charts/radial-bars/BasicRadialBarChart.js deleted file mode 100644 index f0def74433b02..0000000000000 --- a/docs/data/charts/radial-bars/BasicRadialBarChart.js +++ /dev/null @@ -1,49 +0,0 @@ -import * as React from 'react'; -import { RadialBarChart } from '@mui/x-charts-premium/RadialBarChart'; - -const months = [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', -]; - -const highlightScope = { highlight: 'item', fade: 'global' }; - -export default function BasicRadialBarChart() { - return ( - - ); -} diff --git a/docs/data/charts/radial-bars/HealthRadialBarChart.js b/docs/data/charts/radial-bars/HealthRadialBarChart.js deleted file mode 100644 index 208f78c539953..0000000000000 --- a/docs/data/charts/radial-bars/HealthRadialBarChart.js +++ /dev/null @@ -1,63 +0,0 @@ -import * as React from 'react'; -import { RadialBarChart } from '@mui/x-charts-premium/RadialBarChart'; - -const healthData = [ - { metric: 'Water', value: 5, goal: 8, color: '#00bcd4' }, - { metric: 'Sleep', value: 6.5, goal: 8, color: '#3f51b5' }, - { metric: 'Calories', value: 540, goal: 700, color: '#ff9800' }, - { metric: 'Activity', value: 42, goal: 60, color: '#4caf50' }, - { metric: 'Steps', value: 8200, goal: 10000, color: '#e91e63' }, -]; - -const dataset = healthData.map((d) => ({ - metric: d.metric, - progress: Math.round((d.value / d.goal) * 100), -})); - -const highlightScope = { highlight: 'none', fade: 'none' }; - -export default function HealthRadialBarChart() { - return ( - `${value}%`, - }, - ]} - radiusAxis={[ - { - scaleType: 'band', - dataKey: 'metric', - categoryGapRatio: 0.3, - disableLine: true, - disableTicks: true, - colorMap: { - type: 'ordinal', - values: healthData.map((d) => d.metric), - colors: healthData.map((d) => d.color), - }, - }, - ]} - rotationAxis={[ - { - scaleType: 'linear', - disableTickLabel: true, - disableLine: true, - disableTicks: true, - min: 0, - max: 100, - valueFormatter: (value) => `${value}%`, - }, - ]} - axisHighlight={{ rotation: 'none', radius: 'none' }} - hideLegend - slotProps={{ tooltip: { trigger: 'none' } }} - /> - ); -} diff --git a/docs/data/charts/radial-bars/RadialBarClick.js b/docs/data/charts/radial-bars/RadialBarClick.js deleted file mode 100644 index f6105ec431839..0000000000000 --- a/docs/data/charts/radial-bars/RadialBarClick.js +++ /dev/null @@ -1,133 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; -import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; -import { RadialBarChart } from '@mui/x-charts-premium/RadialBarChart'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; - -const highlightScope = { highlight: 'item' }; - -const series = [ - { - id: 'series-1', - data: [3, 4, 1, 6, 5], - label: 'A', - stack: 'total', - highlightScope, - }, - { - id: 'series-2', - data: [4, 3, 1, 5, 8], - label: 'B', - stack: 'total', - highlightScope, - }, - { - id: 'series-3', - data: [4, 2, 5, 4, 1], - label: 'C', - highlightScope, - }, -]; - -const bandAxis = { - data: ['0', '3', '6', '9', '12'], - id: 'axis1', - scaleType: 'band', - disableLine: true, - disableTicks: true, -}; - -const valueAxis = { - tickLabelPosition: 'center', - disableLine: true, - disableTicks: true, -}; - -const getRadialChartParams = (layout) => ({ - series: series.map((s) => ({ ...s, layout })), - rotationAxis: [ - layout === 'vertical' ? bandAxis : { ...valueAxis, tickLabelPosition: 'after' }, - ], - radiusAxis: [layout === 'vertical' ? valueAxis : bandAxis], - grid: { rotation: true, radius: true }, - height: 400, -}); - -export default function RadialBarClick() { - const [itemData, setItemData] = React.useState(); - const [axisData, setAxisData] = React.useState(); - const [layout, setLayout] = React.useState('vertical'); - - return ( - - - { - if (newLayout !== null) { - setLayout(newLayout); - } - }} - aria-label="chart layout" - > - - vertical - - - horizontal - - - - setItemData(d)} - onAxisClick={(event, d) => setAxisData(d)} - /> - - - - - - Click on the chart - { - setItemData(undefined); - setAxisData(null); - }} - > - - - - - - - ); -} diff --git a/docs/data/charts/radial-bars/RadialBarConfig.js b/docs/data/charts/radial-bars/RadialBarConfig.js deleted file mode 100644 index ab22c2284fcca..0000000000000 --- a/docs/data/charts/radial-bars/RadialBarConfig.js +++ /dev/null @@ -1,125 +0,0 @@ -import * as React from 'react'; -import Typography from '@mui/material/Typography'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import { RadialBarChart } from '@mui/x-charts-premium/RadialBarChart'; -import { balanceSheet, addLabels } from '../bars/netflixsBalanceSheet'; - -const baseSeries = addLabels([ - { dataKey: 'totAss' }, - { dataKey: 'totLia' }, - { dataKey: 'totEq' }, -]); - -export default function RadialBarConfig() { - return ( - { - const series = baseSeries.map((s, index) => ({ - ...s, - layout: props.layout, - ...(props.stack && index > 0 ? { stack: 'passive' } : {}), - })); - - const bandAxis = { - dataKey: 'year', - scaleType: 'band', - categoryGapRatio: props.categoryGapRatio, - barGapRatio: props.barGapRatio, - }; - - return ( -
- Netflix balance sheet - -
- ); - }} - getCode={({ props }) => { - const stackProp = props.stack ? `, stack: 'passive'` : ''; - const bandAxis = `[ - { - scaleType: 'band', - data: ['2020', '2021', '2022', '2023'], - categoryGapRatio: ${props.categoryGapRatio}, - barGapRatio: ${props.barGapRatio}, - }, - ]`; - return `import { RadialBarChart } from '@mui/x-charts-premium/RadialBarChart'; - -`; - }} - /> - ); -} diff --git a/docs/data/charts/radial-bars/TrustRadialBarChart.js b/docs/data/charts/radial-bars/TrustRadialBarChart.js deleted file mode 100644 index 76fbbecf4ac71..0000000000000 --- a/docs/data/charts/radial-bars/TrustRadialBarChart.js +++ /dev/null @@ -1,93 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Link from '@mui/material/Link'; -import Typography from '@mui/material/Typography'; -import { RadialBarChart } from '@mui/x-charts-premium/RadialBarChart'; -import { europeanYouthTrust } from '../dataset/europeanYouthTrust'; -import { - EuAverageRing, - PreviousTrustData, - TrustLegend, - TrustTooltip, -} from './trustRadialBarChartComponents'; - -const COLOR_2025 = '#1976d2'; -const COLOR_2013 = '#d32f2f'; - -const trustFormatter = (value) => (value == null ? '' : `${value.toFixed(1)} / 10`); - -const highlightScope = { highlight: 'item', fade: 'none' }; - -export default function TrustRadialBarChart() { - return ( -
- - Trust in others across Europe - - - Average rating (0–10), 2013 vs 2025 - - - - - - - - - - - - Source:{' '} - - Eurostat - - -
- ); -} diff --git a/docs/data/charts/radial-bars/BasicRadialBarChart.tsx b/docs/data/charts/radial-bars/demos/basic-radial-bar-chart/BasicRadialBarChart.tsx similarity index 95% rename from docs/data/charts/radial-bars/BasicRadialBarChart.tsx rename to docs/data/charts/radial-bars/demos/basic-radial-bar-chart/BasicRadialBarChart.tsx index 8de63d5b0459a..c7d4dc8d61b19 100644 --- a/docs/data/charts/radial-bars/BasicRadialBarChart.tsx +++ b/docs/data/charts/radial-bars/demos/basic-radial-bar-chart/BasicRadialBarChart.tsx @@ -19,6 +19,7 @@ const highlightScope = { highlight: 'item', fade: 'global' } as const; export default function BasicRadialBarChart() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/radial-bars/demos/basic-radial-bar-chart/client.ts b/docs/data/charts/radial-bars/demos/basic-radial-bar-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radial-bars/demos/basic-radial-bar-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radial-bars/demos/basic-radial-bar-chart/index.ts b/docs/data/charts/radial-bars/demos/basic-radial-bar-chart/index.ts new file mode 100644 index 0000000000000..e9d37b22faa7f --- /dev/null +++ b/docs/data/charts/radial-bars/demos/basic-radial-bar-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicRadialBarChart from './BasicRadialBarChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicRadialBarChart, { ClientProvider }); diff --git a/docs/data/charts/radial-bars/HealthRadialBarChart.tsx b/docs/data/charts/radial-bars/demos/health-radial-bar-chart/HealthRadialBarChart.tsx similarity index 97% rename from docs/data/charts/radial-bars/HealthRadialBarChart.tsx rename to docs/data/charts/radial-bars/demos/health-radial-bar-chart/HealthRadialBarChart.tsx index 3ba9d32cdcdaa..bd1ecfc22821c 100644 --- a/docs/data/charts/radial-bars/HealthRadialBarChart.tsx +++ b/docs/data/charts/radial-bars/demos/health-radial-bar-chart/HealthRadialBarChart.tsx @@ -18,6 +18,7 @@ const highlightScope = { highlight: 'none', fade: 'none' } as const; export default function HealthRadialBarChart() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/radial-bars/demos/health-radial-bar-chart/client.ts b/docs/data/charts/radial-bars/demos/health-radial-bar-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radial-bars/demos/health-radial-bar-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radial-bars/demos/health-radial-bar-chart/index.ts b/docs/data/charts/radial-bars/demos/health-radial-bar-chart/index.ts new file mode 100644 index 0000000000000..31fbdb8ae298e --- /dev/null +++ b/docs/data/charts/radial-bars/demos/health-radial-bar-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HealthRadialBarChart from './HealthRadialBarChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HealthRadialBarChart, { ClientProvider }); diff --git a/docs/data/charts/radial-bars/RadialBarClick.tsx b/docs/data/charts/radial-bars/demos/radial-bar-click/RadialBarClick.tsx similarity index 91% rename from docs/data/charts/radial-bars/RadialBarClick.tsx rename to docs/data/charts/radial-bars/demos/radial-bar-click/RadialBarClick.tsx index d62bb90a0abbb..f0cb89a4744e3 100644 --- a/docs/data/charts/radial-bars/RadialBarClick.tsx +++ b/docs/data/charts/radial-bars/demos/radial-bar-click/RadialBarClick.tsx @@ -4,13 +4,11 @@ import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import IconButton from '@mui/material/IconButton'; import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; -import { - RadialBarChart, - RadialBarSeries, -} from '@mui/x-charts-premium/RadialBarChart'; +import type { RadialBarSeries } from '@mui/x-charts-premium/RadialBarChart'; +import { RadialBarChart } from '@mui/x-charts-premium/RadialBarChart'; import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { ChartsAxisData } from '@mui/x-charts/models'; -import { RadialBarItemIdentifier } from '@mui/x-charts-premium/models'; +import type { ChartsAxisData } from '@mui/x-charts/models'; +import type { RadialBarItemIdentifier } from '@mui/x-charts-premium/models'; import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; @@ -66,6 +64,7 @@ const getRadialChartParams = (layout: 'vertical' | 'horizontal') => ({ }); export default function RadialBarClick() { + // @focus-start @padding 1 const [itemData, setItemData] = React.useState(); const [axisData, setAxisData] = React.useState(); const [layout, setLayout] = React.useState<'vertical' | 'horizontal'>('vertical'); @@ -136,4 +135,5 @@ ${axisData ? JSON.stringify(axisData, null, 2) : '// The data will appear here'} ); + // @focus-end } diff --git a/docs/data/charts/radial-bars/demos/radial-bar-click/client.ts b/docs/data/charts/radial-bars/demos/radial-bar-click/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radial-bars/demos/radial-bar-click/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radial-bars/demos/radial-bar-click/index.ts b/docs/data/charts/radial-bars/demos/radial-bar-click/index.ts new file mode 100644 index 0000000000000..915884d94546a --- /dev/null +++ b/docs/data/charts/radial-bars/demos/radial-bar-click/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RadialBarClick from './RadialBarClick'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RadialBarClick, { ClientProvider }); diff --git a/docs/data/charts/radial-bars/RadialBarConfig.tsx b/docs/data/charts/radial-bars/demos/radial-bar-config/RadialBarConfig.tsx similarity index 96% rename from docs/data/charts/radial-bars/RadialBarConfig.tsx rename to docs/data/charts/radial-bars/demos/radial-bar-config/RadialBarConfig.tsx index 252eb79578009..cd1161976cf25 100644 --- a/docs/data/charts/radial-bars/RadialBarConfig.tsx +++ b/docs/data/charts/radial-bars/demos/radial-bar-config/RadialBarConfig.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Typography from '@mui/material/Typography'; import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; import { RadialBarChart } from '@mui/x-charts-premium/RadialBarChart'; -import { balanceSheet, addLabels } from '../bars/netflixsBalanceSheet'; +import { balanceSheet, addLabels } from '../../../bars/netflixsBalanceSheet'; const baseSeries = addLabels([ { dataKey: 'totAss' }, @@ -12,6 +12,7 @@ const baseSeries = addLabels([ export default function RadialBarConfig() { return ( + // @focus-start @padding 2 `; }} /> + // @focus-end ); } diff --git a/docs/data/charts/radial-bars/demos/radial-bar-config/client.ts b/docs/data/charts/radial-bars/demos/radial-bar-config/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radial-bars/demos/radial-bar-config/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radial-bars/demos/radial-bar-config/index.ts b/docs/data/charts/radial-bars/demos/radial-bar-config/index.ts new file mode 100644 index 0000000000000..9887ef6032e63 --- /dev/null +++ b/docs/data/charts/radial-bars/demos/radial-bar-config/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RadialBarConfig from './RadialBarConfig'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RadialBarConfig, { ClientProvider }); diff --git a/docs/data/charts/radial-bars/TrustRadialBarChart.tsx b/docs/data/charts/radial-bars/demos/trust-radial-bar-chart/TrustRadialBarChart.tsx similarity index 93% rename from docs/data/charts/radial-bars/TrustRadialBarChart.tsx rename to docs/data/charts/radial-bars/demos/trust-radial-bar-chart/TrustRadialBarChart.tsx index 852a84e4d5fd5..6e9e1fe4f2fe0 100644 --- a/docs/data/charts/radial-bars/TrustRadialBarChart.tsx +++ b/docs/data/charts/radial-bars/demos/trust-radial-bar-chart/TrustRadialBarChart.tsx @@ -3,13 +3,13 @@ import Box from '@mui/material/Box'; import Link from '@mui/material/Link'; import Typography from '@mui/material/Typography'; import { RadialBarChart } from '@mui/x-charts-premium/RadialBarChart'; -import { europeanYouthTrust } from '../dataset/europeanYouthTrust'; +import { europeanYouthTrust } from '../../../dataset/europeanYouthTrust'; import { EuAverageRing, PreviousTrustData, TrustLegend, TrustTooltip, -} from './trustRadialBarChartComponents'; +} from '../../trustRadialBarChartComponents'; const COLOR_2025 = '#1976d2'; const COLOR_2013 = '#d32f2f'; @@ -22,6 +22,7 @@ const highlightScope = { highlight: 'item', fade: 'none' } as const; export default function TrustRadialBarChart() { return (
+ {/* @focus-start */} Trust in others across Europe @@ -89,6 +90,7 @@ export default function TrustRadialBarChart() { Eurostat + {/* @focus-end */}
); } diff --git a/docs/data/charts/radial-bars/demos/trust-radial-bar-chart/client.ts b/docs/data/charts/radial-bars/demos/trust-radial-bar-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radial-bars/demos/trust-radial-bar-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radial-bars/demos/trust-radial-bar-chart/index.ts b/docs/data/charts/radial-bars/demos/trust-radial-bar-chart/index.ts new file mode 100644 index 0000000000000..b5e5d50f0cc05 --- /dev/null +++ b/docs/data/charts/radial-bars/demos/trust-radial-bar-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TrustRadialBarChart from './TrustRadialBarChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TrustRadialBarChart, { ClientProvider }); diff --git a/docs/data/charts/radial-bars/radial-bars.md b/docs/data/charts/radial-bars/radial-bars.md index 98a406e6729e6..686cbacc50b8b 100644 --- a/docs/data/charts/radial-bars/radial-bars.md +++ b/docs/data/charts/radial-bars/radial-bars.md @@ -15,14 +15,14 @@ This circular layout reads naturally for periodic or cyclic data—months, hours The chart below compares average trust in others (people aged 16 and over) across Europe between 2013 and 2025. -{{"demo": "TrustRadialBarChart.js" }} +{{"component": "file://./demos/trust-radial-bar-chart/index.ts"}} ## Basics The `RadialBarChart` is similar to the [`BarChart`](/x/react-charts/bars/) but uses polar coordinates. The `xAxis` and `yAxis` being replaced by the `rotationAxis` and `radiusAxis`. -{{"demo": "BasicRadialBarChart.js", "bg": "outline"}} +{{"component": "file://./demos/basic-radial-bar-chart/index.ts", "bg": "outline"}} ## Common display options @@ -34,7 +34,7 @@ The radial bar chart accepts the same display options as the [bar chart](/x/reac The demo below demonstrates those options. -{{"demo": "RadialBarConfig.js", "hideToolbar": true, "bg": "playground"}} +{{"component": "file://./demos/radial-bar-config/index.ts", "hideToolbar": true, "bg": "playground"}} ## Coloring each bar @@ -43,7 +43,7 @@ The only difference is that the cartesian `x` and `y` axes are replaced by the ` The demo below sets an `'ordinal'` color map on the `radiusAxis` to build a health dashboard where every metric ring tracks progress toward its goal. -{{"demo": "HealthRadialBarChart.js", "bg": "outline"}} +{{"component": "file://./demos/health-radial-bar-chart/index.ts", "bg": "outline"}} ## Click events @@ -61,7 +61,7 @@ const clickHandler = ( ) => {}; ``` -{{"demo": "RadialBarClick.js"}} +{{"component": "file://./demos/radial-bar-click/index.ts"}} :::info There is a slight difference between the `event` of `onItemClick` and `onAxisClick`: diff --git a/docs/data/charts/radial-lines/BasicRadialLineChart.js b/docs/data/charts/radial-lines/BasicRadialLineChart.js deleted file mode 100644 index e41143bf17755..0000000000000 --- a/docs/data/charts/radial-lines/BasicRadialLineChart.js +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -import { RadialLineChart } from '@mui/x-charts-premium/RadialLineChart'; -import { dataset } from '../dataset/weather'; - -export default function BasicRadialLineChart() { - return ( - - ); -} diff --git a/docs/data/charts/radial-lines/BasicRadialLineChart.tsx.preview b/docs/data/charts/radial-lines/BasicRadialLineChart.tsx.preview deleted file mode 100644 index 2ebb8ccb2cac3..0000000000000 --- a/docs/data/charts/radial-lines/BasicRadialLineChart.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/radial-lines/ClosedOpenRadialLineChart.js b/docs/data/charts/radial-lines/ClosedOpenRadialLineChart.js deleted file mode 100644 index 0ede06b70a1d0..0000000000000 --- a/docs/data/charts/radial-lines/ClosedOpenRadialLineChart.js +++ /dev/null @@ -1,61 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import { RadialLineChart } from '@mui/x-charts-premium/RadialLineChart'; - -const months = [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', -]; - -export default function ClosedOpenRadialLineChart() { - const [area, setArea] = React.useState(false); - const [closePath, setClosePath] = React.useState(true); - - return ( - - - setArea(event.target.checked)} />} - label="area" - labelPlacement="end" - /> - setClosePath(event.target.checked)} /> - } - label="closePath" - labelPlacement="end" - /> - - - - ); -} diff --git a/docs/data/charts/radial-lines/ContinuousRadialLineChart.js b/docs/data/charts/radial-lines/ContinuousRadialLineChart.js deleted file mode 100644 index 75411791287f5..0000000000000 --- a/docs/data/charts/radial-lines/ContinuousRadialLineChart.js +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from 'react'; -import { RadialLineChart } from '@mui/x-charts-premium/RadialLineChart'; - -const SAMPLES = 200; -const angles = Array.from( - { length: SAMPLES + 1 }, - (_, i) => (i * 2 * Math.PI) / SAMPLES, -); - -const cardioid = angles.map((angle) => 100 * (1 + Math.cos(angle * 3))); - -export default function ContinuousRadialLineChart() { - return ( - (value == null ? '' : `${Math.round(value)}`), - }, - ]} - rotationAxis={[ - { - data: angles, - domainLimit: () => ({ min: 0, max: 2 * Math.PI }), - tickInterval: [0, Math.PI / 2, Math.PI, (3 * Math.PI) / 2, 2 * Math.PI], - valueFormatter: (value) => `${Math.round((value * 180) / Math.PI)}°`, - }, - ]} - radiusAxis={[{ position: 'none' }]} - grid={{ rotation: true, radius: true }} - /> - ); -} diff --git a/docs/data/charts/radial-lines/ElementHighlights.js b/docs/data/charts/radial-lines/ElementHighlights.js deleted file mode 100644 index 651d8f0ad1357..0000000000000 --- a/docs/data/charts/radial-lines/ElementHighlights.js +++ /dev/null @@ -1,103 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Switch from '@mui/material/Switch'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import { RadialLineChart } from '@mui/x-charts-premium/RadialLineChart'; - -const params = { - series: [ - { - data: [3, 4, 1, 6, 5], - label: 'A', - area: false, - stack: 'total', - }, - { data: [4, 3, 1, 5, 8], label: 'B', area: false, stack: 'total' }, - { - data: [4, 2, 5, 4, 1], - label: 'C', - area: false, - stack: 'total', - }, - ], - rotationAxis: [ - { - scaleType: 'point', - data: [1, 2, 3, 4, 5], - position: 'none', - }, - ], - radiusAxis: [{ position: 'none' }], - height: 400, - grid: { rotation: true, radius: true }, -}; - -export default function ElementHighlights() { - const [withArea, setWithArea] = React.useState(false); - const [highlight, setHighlight] = React.useState('item'); - const [fade, setFade] = React.useState('global'); - - return ( - - - ({ - ...series, - area: withArea, - highlightScope: { - highlight, - fade, - }, - }))} - /> - - - setHighlight(event.target.value)} - sx={{ minWidth: 150 }} - > - none - item - series - - setFade(event.target.value)} - sx={{ minWidth: 150 }} - > - none - series - global - - - setWithArea(event.target.checked)} - /> - } - label="Fill line area" - /> - - - ); -} diff --git a/docs/data/charts/radial-lines/ElementHighlights.tsx b/docs/data/charts/radial-lines/ElementHighlights.tsx deleted file mode 100644 index 81e08b06ada0c..0000000000000 --- a/docs/data/charts/radial-lines/ElementHighlights.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Switch from '@mui/material/Switch'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import { RadialLineChart } from '@mui/x-charts-premium/RadialLineChart'; - -type HighlightOptions = 'none' | 'item' | 'series'; -type FadeOptions = 'none' | 'series' | 'global'; - -const params = { - series: [ - { - data: [3, 4, 1, 6, 5], - label: 'A', - area: false, - stack: 'total', - }, - { data: [4, 3, 1, 5, 8], label: 'B', area: false, stack: 'total' }, - { - data: [4, 2, 5, 4, 1], - label: 'C', - area: false, - stack: 'total', - }, - ], - rotationAxis: [ - { - scaleType: 'point' as const, - data: [1, 2, 3, 4, 5], - position: 'none' as const, - }, - ], - radiusAxis: [{ position: 'none' as const }], - height: 400, - grid: { rotation: true, radius: true }, -}; - -export default function ElementHighlights() { - const [withArea, setWithArea] = React.useState(false); - const [highlight, setHighlight] = React.useState('item'); - const [fade, setFade] = React.useState('global'); - - return ( - - - ({ - ...series, - area: withArea, - highlightScope: { - highlight, - fade, - }, - }))} - /> - - - setHighlight(event.target.value as HighlightOptions)} - sx={{ minWidth: 150 }} - > - none - item - series - - setFade(event.target.value as FadeOptions)} - sx={{ minWidth: 150 }} - > - none - series - global - - - setWithArea(event.target.checked)} - /> - } - label="Fill line area" - /> - - - ); -} diff --git a/docs/data/charts/radial-lines/RadialLineClick.js b/docs/data/charts/radial-lines/RadialLineClick.js deleted file mode 100644 index 56b6f6319d7bd..0000000000000 --- a/docs/data/charts/radial-lines/RadialLineClick.js +++ /dev/null @@ -1,103 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; -import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; -import { RadialLineChart } from '@mui/x-charts-premium/RadialLineChart'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -const highlightScope = { highlight: 'item' }; - -const series = [ - { - id: 'series-1', - data: [3, 4, 1, 6, 5], - label: 'A', - stack: 'total', - highlightScope, - }, - { - id: 'series-2', - data: [4, 3, 1, 5, 8], - label: 'B', - stack: 'total', - highlightScope, - }, - { - id: 'series-3', - data: [4, 2, 5, 4, 1], - label: 'C', - highlightScope, - }, -]; - -const radialChartParams = { - series, - rotationAxis: [ - { - data: [0, 3, 6, 9, 12], - id: 'axis1', - disableLine: true, - disableTicks: true, - }, - ], - radiusAxis: [{ position: 'none' }], - grid: { rotation: true, radius: true }, - height: 400, -}; - -export default function RadialLineClick() { - const [itemData, setItemData] = React.useState(); - const [axisData, setAxisData] = React.useState(); - - return ( - - - - setItemData(d)} - onAxisClick={(event, d) => setAxisData(d)} - /> - - - - - - Click on the chart - { - setItemData(undefined); - setAxisData(null); - }} - > - - - - - - - ); -} diff --git a/docs/data/charts/radial-lines/RadialLineMarkShape.js b/docs/data/charts/radial-lines/RadialLineMarkShape.js deleted file mode 100644 index c39fe13f924a7..0000000000000 --- a/docs/data/charts/radial-lines/RadialLineMarkShape.js +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import { RadialLineChart } from '@mui/x-charts-premium/RadialLineChart'; -import { dataset } from '../dataset/weather'; - -const shapes = ['circle', 'square', 'diamond', 'cross', 'star', 'triangle', 'wye']; - -export default function RadialLineMarkShape() { - const [shape, setShape] = React.useState('circle'); - - return ( - - setShape(event.target.value)} - sx={{ minWidth: 150 }} - > - {shapes.map((option) => ( - - {option} - - ))} - - - - - - ); -} diff --git a/docs/data/charts/radial-lines/BasicRadialLineChart.tsx b/docs/data/charts/radial-lines/demos/basic-radial-line-chart/BasicRadialLineChart.tsx similarity index 85% rename from docs/data/charts/radial-lines/BasicRadialLineChart.tsx rename to docs/data/charts/radial-lines/demos/basic-radial-line-chart/BasicRadialLineChart.tsx index e41143bf17755..37a88e48e78b9 100644 --- a/docs/data/charts/radial-lines/BasicRadialLineChart.tsx +++ b/docs/data/charts/radial-lines/demos/basic-radial-line-chart/BasicRadialLineChart.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { RadialLineChart } from '@mui/x-charts-premium/RadialLineChart'; -import { dataset } from '../dataset/weather'; +import { dataset } from '../../../dataset/weather'; export default function BasicRadialLineChart() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/radial-lines/demos/basic-radial-line-chart/client.ts b/docs/data/charts/radial-lines/demos/basic-radial-line-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radial-lines/demos/basic-radial-line-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radial-lines/demos/basic-radial-line-chart/index.ts b/docs/data/charts/radial-lines/demos/basic-radial-line-chart/index.ts new file mode 100644 index 0000000000000..b6f885a1766ce --- /dev/null +++ b/docs/data/charts/radial-lines/demos/basic-radial-line-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicRadialLineChart from './BasicRadialLineChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicRadialLineChart, { ClientProvider }); diff --git a/docs/data/charts/radial-lines/ClosedOpenRadialLineChart.tsx b/docs/data/charts/radial-lines/demos/closed-open-radial-line-chart/ClosedOpenRadialLineChart.tsx similarity index 97% rename from docs/data/charts/radial-lines/ClosedOpenRadialLineChart.tsx rename to docs/data/charts/radial-lines/demos/closed-open-radial-line-chart/ClosedOpenRadialLineChart.tsx index 0ede06b70a1d0..a28ddf6e2a8ff 100644 --- a/docs/data/charts/radial-lines/ClosedOpenRadialLineChart.tsx +++ b/docs/data/charts/radial-lines/demos/closed-open-radial-line-chart/ClosedOpenRadialLineChart.tsx @@ -21,6 +21,7 @@ const months = [ ]; export default function ClosedOpenRadialLineChart() { + // @focus-start @padding 1 const [area, setArea] = React.useState(false); const [closePath, setClosePath] = React.useState(true); @@ -58,4 +59,5 @@ export default function ClosedOpenRadialLineChart() { /> ); + // @focus-end } diff --git a/docs/data/charts/radial-lines/demos/closed-open-radial-line-chart/client.ts b/docs/data/charts/radial-lines/demos/closed-open-radial-line-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radial-lines/demos/closed-open-radial-line-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radial-lines/demos/closed-open-radial-line-chart/index.ts b/docs/data/charts/radial-lines/demos/closed-open-radial-line-chart/index.ts new file mode 100644 index 0000000000000..66a5da790155c --- /dev/null +++ b/docs/data/charts/radial-lines/demos/closed-open-radial-line-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ClosedOpenRadialLineChart from './ClosedOpenRadialLineChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ClosedOpenRadialLineChart, { ClientProvider }); diff --git a/docs/data/charts/radial-lines/ContinuousRadialLineChart.tsx b/docs/data/charts/radial-lines/demos/continuous-radial-line-chart/ContinuousRadialLineChart.tsx similarity index 95% rename from docs/data/charts/radial-lines/ContinuousRadialLineChart.tsx rename to docs/data/charts/radial-lines/demos/continuous-radial-line-chart/ContinuousRadialLineChart.tsx index 48e48abe851e6..dbf2170a795a9 100644 --- a/docs/data/charts/radial-lines/ContinuousRadialLineChart.tsx +++ b/docs/data/charts/radial-lines/demos/continuous-radial-line-chart/ContinuousRadialLineChart.tsx @@ -11,6 +11,7 @@ const cardioid = angles.map((angle) => 100 * (1 + Math.cos(angle * 3))); export default function ContinuousRadialLineChart() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/radial-lines/demos/continuous-radial-line-chart/client.ts b/docs/data/charts/radial-lines/demos/continuous-radial-line-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radial-lines/demos/continuous-radial-line-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radial-lines/demos/continuous-radial-line-chart/index.ts b/docs/data/charts/radial-lines/demos/continuous-radial-line-chart/index.ts new file mode 100644 index 0000000000000..dbd60e0bb689a --- /dev/null +++ b/docs/data/charts/radial-lines/demos/continuous-radial-line-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ContinuousRadialLineChart from './ContinuousRadialLineChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ContinuousRadialLineChart, { ClientProvider }); diff --git a/docs/data/charts/radial-lines/demos/element-highlights/ElementHighlights.tsx b/docs/data/charts/radial-lines/demos/element-highlights/ElementHighlights.tsx new file mode 100644 index 0000000000000..1755dfd9323c9 --- /dev/null +++ b/docs/data/charts/radial-lines/demos/element-highlights/ElementHighlights.tsx @@ -0,0 +1,108 @@ +import * as React from 'react'; +import Stack from '@mui/material/Stack'; +import Box from '@mui/material/Box'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Switch from '@mui/material/Switch'; +import TextField from '@mui/material/TextField'; +import MenuItem from '@mui/material/MenuItem'; +import { RadialLineChart } from '@mui/x-charts-premium/RadialLineChart'; + +type HighlightOptions = 'none' | 'item' | 'series'; +type FadeOptions = 'none' | 'series' | 'global'; + +const params = { + series: [ + { + data: [3, 4, 1, 6, 5], + label: 'A', + area: false, + stack: 'total', + }, + { data: [4, 3, 1, 5, 8], label: 'B', area: false, stack: 'total' }, + { + data: [4, 2, 5, 4, 1], + label: 'C', + area: false, + stack: 'total', + }, + ], + rotationAxis: [ + { + scaleType: 'point' as const, + data: [1, 2, 3, 4, 5], + position: 'none' as const, + }, + ], + radiusAxis: [{ position: 'none' as const }], + height: 400, + grid: { rotation: true, radius: true }, +}; + +export default function ElementHighlights() { + // @focus-start @padding 1 + const [withArea, setWithArea] = React.useState(false); + const [highlight, setHighlight] = React.useState('item'); + const [fade, setFade] = React.useState('global'); + + return ( + + + ({ + ...series, + area: withArea, + highlightScope: { + highlight, + fade, + }, + }))} + /> + + + setHighlight(event.target.value as HighlightOptions)} + sx={{ minWidth: 150 }} + > + none + item + series + + setFade(event.target.value as FadeOptions)} + sx={{ minWidth: 150 }} + > + none + series + global + + + setWithArea(event.target.checked)} + /> + } + label="Fill line area" + /> + + + ); + // @focus-end +} diff --git a/docs/data/charts/radial-lines/demos/element-highlights/client.ts b/docs/data/charts/radial-lines/demos/element-highlights/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radial-lines/demos/element-highlights/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radial-lines/demos/element-highlights/index.ts b/docs/data/charts/radial-lines/demos/element-highlights/index.ts new file mode 100644 index 0000000000000..0b59dc2ef94e8 --- /dev/null +++ b/docs/data/charts/radial-lines/demos/element-highlights/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ElementHighlights from './ElementHighlights'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ElementHighlights, { ClientProvider }); diff --git a/docs/data/charts/radial-lines/RadialLineClick.tsx b/docs/data/charts/radial-lines/demos/radial-line-click/RadialLineClick.tsx similarity index 88% rename from docs/data/charts/radial-lines/RadialLineClick.tsx rename to docs/data/charts/radial-lines/demos/radial-line-click/RadialLineClick.tsx index 4e91e50d27e50..e8bdc8dca6f62 100644 --- a/docs/data/charts/radial-lines/RadialLineClick.tsx +++ b/docs/data/charts/radial-lines/demos/radial-line-click/RadialLineClick.tsx @@ -4,13 +4,11 @@ import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import IconButton from '@mui/material/IconButton'; import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; -import { - RadialLineChart, - RadialLineSeries, -} from '@mui/x-charts-premium/RadialLineChart'; +import type { RadialLineSeries } from '@mui/x-charts-premium/RadialLineChart'; +import { RadialLineChart } from '@mui/x-charts-premium/RadialLineChart'; import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { ChartsAxisData } from '@mui/x-charts/models'; -import { RadialLineItemIdentifier } from '@mui/x-charts-premium/models'; +import type { ChartsAxisData } from '@mui/x-charts/models'; +import type { RadialLineItemIdentifier } from '@mui/x-charts-premium/models'; const highlightScope = { highlight: 'item' } as const; @@ -53,6 +51,7 @@ const radialChartParams = { }; export default function RadialLineClick() { + // @focus-start @padding 1 const [itemData, setItemData] = React.useState(); const [axisData, setAxisData] = React.useState(); @@ -105,4 +104,5 @@ ${axisData ? JSON.stringify(axisData, null, 2) : '// The data will appear here'} ); + // @focus-end } diff --git a/docs/data/charts/radial-lines/demos/radial-line-click/client.ts b/docs/data/charts/radial-lines/demos/radial-line-click/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radial-lines/demos/radial-line-click/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radial-lines/demos/radial-line-click/index.ts b/docs/data/charts/radial-lines/demos/radial-line-click/index.ts new file mode 100644 index 0000000000000..464417dc68f4b --- /dev/null +++ b/docs/data/charts/radial-lines/demos/radial-line-click/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RadialLineClick from './RadialLineClick'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RadialLineClick, { ClientProvider }); diff --git a/docs/data/charts/radial-lines/RadialLineMarkShape.tsx b/docs/data/charts/radial-lines/demos/radial-line-mark-shape/RadialLineMarkShape.tsx similarity index 94% rename from docs/data/charts/radial-lines/RadialLineMarkShape.tsx rename to docs/data/charts/radial-lines/demos/radial-line-mark-shape/RadialLineMarkShape.tsx index cb3c380d7911d..b413674c61645 100644 --- a/docs/data/charts/radial-lines/RadialLineMarkShape.tsx +++ b/docs/data/charts/radial-lines/demos/radial-line-mark-shape/RadialLineMarkShape.tsx @@ -4,7 +4,7 @@ import Box from '@mui/material/Box'; import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; import { RadialLineChart } from '@mui/x-charts-premium/RadialLineChart'; -import { dataset } from '../dataset/weather'; +import { dataset } from '../../../dataset/weather'; type Shape = 'circle' | 'square' | 'diamond' | 'cross' | 'star' | 'triangle' | 'wye'; @@ -19,6 +19,7 @@ const shapes: Shape[] = [ ]; export default function RadialLineMarkShape() { + // @focus-start @padding 1 const [shape, setShape] = React.useState('circle'); return ( @@ -62,4 +63,5 @@ export default function RadialLineMarkShape() { ); + // @focus-end } diff --git a/docs/data/charts/radial-lines/demos/radial-line-mark-shape/client.ts b/docs/data/charts/radial-lines/demos/radial-line-mark-shape/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/radial-lines/demos/radial-line-mark-shape/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/radial-lines/demos/radial-line-mark-shape/index.ts b/docs/data/charts/radial-lines/demos/radial-line-mark-shape/index.ts new file mode 100644 index 0000000000000..1ea0933193ada --- /dev/null +++ b/docs/data/charts/radial-lines/demos/radial-line-mark-shape/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RadialLineMarkShape from './RadialLineMarkShape'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RadialLineMarkShape, { ClientProvider }); diff --git a/docs/data/charts/radial-lines/radial-lines.md b/docs/data/charts/radial-lines/radial-lines.md index 08111666a723d..68125c950432c 100644 --- a/docs/data/charts/radial-lines/radial-lines.md +++ b/docs/data/charts/radial-lines/radial-lines.md @@ -12,13 +12,13 @@ components: ChartsRadialDataProvider, ChartsRadialDataProviderPremium, RadialLin The `RadialLineChart` component accepts `series`, `rotationAxis`, and `radiusAxis` props to render data in polar coordinates. -{{"demo": "BasicRadialLineChart.js", "bg": "outline"}} +{{"component": "file://./demos/basic-radial-line-chart/index.ts", "bg": "outline"}} ## Closing path To draw the line between the last and first point of the series, set the series property `closePath` to `true`. -{{"demo": "ClosedOpenRadialLineChart.js", "bg": "outline"}} +{{"component": "file://./demos/closed-open-radial-line-chart/index.ts", "bg": "outline"}} ## Axes @@ -28,7 +28,7 @@ For more information about radial axes configuration, visit the [dedicated page] Here is an example of a rotation axis with a continuous scale type. -{{"demo": "ContinuousRadialLineChart.js", "bg": "outline"}} +{{"component": "file://./demos/continuous-radial-line-chart/index.ts", "bg": "outline"}} ## Marks @@ -37,7 +37,7 @@ Add `showMark: true` to display marks. To modify the mark, use the property `shape`. It accepts 7 shapes: `'circle'`, `'square'`, `'diamond'`, `'cross'`, `'star'`, `'triangle'`, and `'wye'`. -{{"demo": "RadialLineMarkShape.js", "bg": "outline"}} +{{"component": "file://./demos/radial-line-mark-shape/index.ts", "bg": "outline"}} ## Highlight @@ -47,7 +47,7 @@ Like other series, the radial line series has a `highlightScope` property that a The radial line interaction uses the [pointer based interaction](/x/react-charts/lines/#pointer-interaction). ::: -{{"demo": "ElementHighlights.js", "bg": "outline"}} +{{"component": "file://./demos/element-highlights/index.ts", "bg": "outline"}} ## Click events @@ -65,7 +65,7 @@ const clickHandler = ( ) => {}; ``` -{{"demo": "RadialLineClick.js", "bg": "outline"}} +{{"component": "file://./demos/radial-line-click/index.ts", "bg": "outline"}} :::info There is a slight difference between the `event` of `onItemClick` and `onAxisClick`: diff --git a/docs/data/charts/range-bar/BasicRangeBar.js b/docs/data/charts/range-bar/BasicRangeBar.js deleted file mode 100644 index 3bf83b50640d8..0000000000000 --- a/docs/data/charts/range-bar/BasicRangeBar.js +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react'; -import Typography from '@mui/material/Typography'; -import Stack from '@mui/material/Stack'; - -import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium'; -import { temperatureBerlinPorto } from '../dataset/temperatureBerlinPorto'; - -export default function BasicRangeBar() { - return ( - - - Average monthly temperature ranges in °C for Porto and Berlin in 1991-2020 - - - context.location === 'tick' ? v.slice(0, 3) : v, - }, - ]} - yAxis={[{ valueFormatter: (value) => `${value}°C` }]} - series={[ - { - id: 'porto', - type: 'rangeBar', - label: 'Porto, Portugal', - valueFormatter: (value) => - value === null ? null : `${value[0]}°C - ${value[1]}°C`, - data: temperatureBerlinPorto.porto, - }, - { - id: 'berlin', - type: 'rangeBar', - label: 'Berlin, Germany', - valueFormatter: (value) => - value === null ? null : `${value[0]}°C - ${value[1]}°C`, - data: temperatureBerlinPorto.berlin, - }, - ]} - height={300} - /> - - Source: IPMA (Porto), climate-data.org (Berlin) - - - ); -} diff --git a/docs/data/charts/range-bar/RangeBarAnimation.js b/docs/data/charts/range-bar/RangeBarAnimation.js deleted file mode 100644 index 33aacb1b43157..0000000000000 --- a/docs/data/charts/range-bar/RangeBarAnimation.js +++ /dev/null @@ -1,328 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import Slider from '@mui/material/Slider'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; - -import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium'; - -export default function RangeBarAnimation() { - const [seriesNb, setSeriesNb] = React.useState(2); - const [itemNb, setItemNb] = React.useState(5); - const [skipAnimation, setSkipAnimation] = React.useState(false); - - const handleItemNbChange = (event, newValue) => { - if (typeof newValue !== 'number') { - return; - } - setItemNb(newValue); - }; - const handleSeriesNbChange = (event, newValue) => { - if (typeof newValue !== 'number') { - return; - } - setSeriesNb(newValue); - }; - - return ( - - ({ ...s, data: s.data.slice(0, itemNb) }))} - skipAnimation={skipAnimation} - margin={{ left: 0 }} - /> - setSkipAnimation(event.target.checked)} /> - } - label="skipAnimation" - labelPlacement="end" - /> - - Number of items - - - - Number of series - - - - ); -} - -const highlightScope = { - highlight: 'series', - fade: 'global', -}; - -const series = [ - { - label: 'series 1', - data: [ - [500, 2423], - [300, 2210], - [100, 764], - [400, 1879], - [200, 1478], - [300, 1373], - [500, 1891], - [600, 2171], - [100, 620], - [300, 1269], - [200, 724], - [400, 1707], - [300, 1188], - [500, 1879], - [100, 626], - [400, 1635], - [600, 2177], - [100, 516], - [500, 1793], - [400, 1598], - ], - }, - { - label: 'series 2', - data: [ - [600, 2362], - [500, 2254], - [400, 1962], - [300, 1336], - [100, 586], - [200, 1069], - [600, 2194], - [400, 1629], - [600, 2173], - [500, 2031], - [400, 1757], - [200, 862], - [700, 2446], - [200, 910], - [700, 2430], - [600, 2300], - [200, 805], - [500, 1835], - [400, 1684], - [600, 2197], - ], - }, - { - label: 'series 3', - data: [ - [300, 1145], - [300, 1214], - [200, 975], - [600, 2266], - [400, 1768], - [700, 2341], - [200, 747], - [300, 1282], - [500, 1780], - [400, 1766], - [600, 2115], - [400, 1720], - [300, 1057], - [500, 2000], - [400, 1716], - [600, 2253], - [100, 619], - [400, 1626], - [300, 1209], - [500, 1786], - ], - }, - { - label: 'series 4', - data: [ - [600, 2361], - [200, 979], - [700, 2430], - [400, 1768], - [500, 1913], - [700, 2342], - [500, 1868], - [300, 1319], - [200, 1038], - [600, 2139], - [400, 1691], - [200, 935], - [600, 2262], - [400, 1580], - [100, 692], - [400, 1559], - [300, 1344], - [300, 1442], - [400, 1593], - [500, 1889], - ], - }, - { - label: 'series 5', - data: [ - [200, 968], - [300, 1371], - [300, 1381], - [300, 1060], - [300, 1327], - [200, 934], - [500, 1779], - [300, 1361], - [200, 878], - [300, 1055], - [500, 1737], - [700, 2380], - [200, 875], - [700, 2408], - [300, 1066], - [500, 1802], - [300, 1442], - [400, 1567], - [400, 1552], - [500, 1742], - ], - }, - { - label: 'series 6', - data: [ - [600, 2316], - [500, 1845], - [600, 2057], - [300, 1479], - [500, 1859], - [300, 1015], - [400, 1569], - [300, 1448], - [300, 1354], - [300, 1007], - [200, 799], - [500, 1748], - [300, 1454], - [500, 1968], - [300, 1129], - [300, 1196], - [600, 2158], - [100, 540], - [300, 1482], - [200, 880], - ], - }, - { - label: 'series 7', - data: [ - [600, 2140], - [600, 2082], - [200, 708], - [600, 2032], - [100, 554], - [300, 1365], - [600, 2121], - [400, 1639], - [700, 2430], - [700, 2440], - [200, 814], - [300, 1328], - [200, 883], - [500, 1811], - [600, 2322], - [500, 1743], - [200, 700], - [600, 2131], - [300, 1473], - [200, 957], - ], - }, - { - label: 'series 8', - data: [ - [300, 1074], - [200, 744], - [700, 2487], - [200, 823], - [600, 2252], - [600, 2317], - [600, 2139], - [500, 1818], - [600, 2256], - [500, 1769], - [300, 1123], - [300, 1461], - [100, 672], - [300, 1335], - [200, 960], - [500, 1871], - [600, 2305], - [300, 1231], - [600, 2005], - [200, 908], - ], - }, - { - label: 'series 9', - data: [ - [500, 1792], - [200, 886], - [700, 2472], - [400, 1546], - [600, 2164], - [600, 2323], - [700, 2435], - [300, 1268], - [600, 2368], - [600, 2158], - [600, 2200], - [300, 1316], - [100, 552], - [500, 1874], - [500, 1771], - [300, 1038], - [500, 1838], - [600, 2029], - [500, 1793], - [300, 1117], - ], - }, - { - label: 'series 10', - data: [ - [300, 1433], - [300, 1161], - [300, 1107], - [400, 1517], - [300, 1410], - [300, 1058], - [100, 676], - [300, 1280], - [500, 1936], - [500, 1774], - [100, 698], - [500, 1721], - [300, 1421], - [200, 785], - [500, 1752], - [200, 800], - [200, 990], - [500, 1809], - [500, 1985], - [100, 665], - ], - }, -].map((s) => ({ type: 'rangeBar', ...s, highlightScope })); diff --git a/docs/data/charts/range-bar/RangeBarBorderRadius.js b/docs/data/charts/range-bar/RangeBarBorderRadius.js deleted file mode 100644 index deb65d07dc313..0000000000000 --- a/docs/data/charts/range-bar/RangeBarBorderRadius.js +++ /dev/null @@ -1,106 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import Slider from '@mui/material/Slider'; -import Typography from '@mui/material/Typography'; -import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; - -export default function RangeBarBorderRadius() { - const [layout, setLayout] = React.useState('vertical'); - const [radius, setRadius] = React.useState(10); - const [reverse, setReverse] = React.useState(false); - - return ( - - - - Border Radius - setRadius(value)} - valueLabelDisplay="auto" - min={0} - max={50} - sx={{ mt: 2 }} - /> - - setLayout(event.target.value)} - > - Horizontal - Vertical - - - setReverse(event.target.checked)} /> - } - label="Reverse" - labelPlacement="end" - /> - - - `} - language="jsx" - copyButtonHidden - /> - - ); -} - -const dataset = [ - [3, -7, '1st'], - [0, -5, '2nd'], - [10, 0, '3rd'], - [9, 6, '4th'], -].map(([high, low, order]) => ({ - high, - low, - order, -})); - -function getChartSettings(layout, reverse) { - return { - dataset, - height: 300, - xAxis: layout === 'horizontal' ? [{ reverse }] : [{ dataKey: 'order' }], - yAxis: - layout === 'horizontal' - ? [{ scaleType: 'band', dataKey: 'order' }] - : [{ reverse }], - slotProps: { - legend: { - direction: 'horizontal', - position: { vertical: 'bottom', horizontal: 'center' }, - }, - }, - }; -} diff --git a/docs/data/charts/range-bar/RangeBarClick.js b/docs/data/charts/range-bar/RangeBarClick.js deleted file mode 100644 index 49db75387ac80..0000000000000 --- a/docs/data/charts/range-bar/RangeBarClick.js +++ /dev/null @@ -1,99 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; -import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; -import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -const barChartsParams = { - series: [ - { - type: 'rangeBar', - id: 'series-1', - data: [ - [3, 5], - [4, 6], - [1, 4], - [6, 8], - [5, 6], - ], - label: 'A', - highlightScope: { - highlight: 'item', - }, - }, - { - type: 'rangeBar', - id: 'series-2', - data: [ - [4, 6], - [1, 4], - [6, 8], - [5, 6], - [3, 5], - ], - label: 'B', - highlightScope: { - highlight: 'item', - }, - }, - ], - xAxis: [{ data: ['0', '3', '6', '9', '12'], id: 'axis1' }], - height: 400, - margin: { left: 0 }, -}; - -export default function RangeBarClick() { - const [itemData, setItemData] = React.useState(); - const [axisData, setAxisData] = React.useState(); - - return ( - - - setItemData(d)} - onAxisClick={(event, d) => setAxisData(d)} - /> - - - - - Click on the chart - { - setItemData(undefined); - setAxisData(null); - }} - > - - - - - - - ); -} diff --git a/docs/data/charts/range-bar/RangeBarColorScale.js b/docs/data/charts/range-bar/RangeBarColorScale.js deleted file mode 100644 index 03a237a3d29f4..0000000000000 --- a/docs/data/charts/range-bar/RangeBarColorScale.js +++ /dev/null @@ -1,131 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium'; - -const series = [ - { - type: 'rangeBar', - data: [ - [-2, 4], - [4, 10], - [-1, 3], - [2, 13], - [6, 7], - [8, 12], - ], - }, -]; - -export default function RangeBarColorScale() { - const [colorX, setColorX] = React.useState('piecewise'); - - return ( - - - setColorX(event.target.value)} - > - None - piecewise - continuous - ordinal - - - - value.getFullYear().toString(), - colorMap: - (colorX === 'ordinal' && { - type: 'ordinal', - colors: [ - '#ccebc5', - '#a8ddb5', - '#7bccc4', - '#4eb3d3', - '#2b8cbe', - '#08589e', - ], - }) || - (colorX === 'continuous' && { - type: 'continuous', - min: new Date(2019, 1, 1), - max: new Date(2024, 1, 1), - color: ['green', 'orange'], - }) || - (colorX === 'piecewise' && { - type: 'piecewise', - thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)], - colors: ['blue', 'red', 'blue'], - }) || - undefined, - }, - ]} - margin={{ left: 0 }} - /> - `, - ].join('\n')} - language="jsx" - copyButtonHidden - /> - - ); -} diff --git a/docs/data/charts/range-bar/RangeBarGradient.js b/docs/data/charts/range-bar/RangeBarGradient.js deleted file mode 100644 index fd7717ee735c5..0000000000000 --- a/docs/data/charts/range-bar/RangeBarGradient.js +++ /dev/null @@ -1,67 +0,0 @@ -import * as React from 'react'; -import { barClasses } from '@mui/x-charts/BarChart'; -import { - BarChartPremium, - rangeBarClasses, -} from '@mui/x-charts-premium/BarChartPremium'; - -const settings = { - xAxis: [{ data: ['group A', 'group B', 'group C'] }], - series: [ - { - type: 'rangeBar', - id: '1', - data: [ - [4, 3], - [5, 8], - [2, 4], - ], - }, - { - type: 'rangeBar', - id: '2', - data: [ - [1, 6], - [5, 6], - [3, 9], - ], - }, - { - type: 'rangeBar', - id: '3', - data: [ - [1, 5], - [2, 4], - [3, 8], - ], - }, - ], - height: 300, - margin: { left: 0 }, -}; - -export default function RangeBarGradient() { - return ( - - - - - - ); -} - -function Gradient(props) { - return ( - - - - - ); -} diff --git a/docs/data/charts/range-bar/RangeBarGradient.tsx.preview b/docs/data/charts/range-bar/RangeBarGradient.tsx.preview deleted file mode 100644 index 88da323318104..0000000000000 --- a/docs/data/charts/range-bar/RangeBarGradient.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/charts/range-bar/RangeBarProjectSchedule.js b/docs/data/charts/range-bar/RangeBarProjectSchedule.js deleted file mode 100644 index 1d671190ed0c2..0000000000000 --- a/docs/data/charts/range-bar/RangeBarProjectSchedule.js +++ /dev/null @@ -1,353 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { RangeBarPlot } from '@mui/x-charts-premium/BarChartPremium'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath'; -import * as React from 'react'; -import { useDataset } from '@mui/x-charts/hooks'; -import { useTheme, styled } from '@mui/system'; -import { - ChartsTooltipContainer, - useAxesTooltip, - useItemTooltip, -} from '@mui/x-charts/ChartsTooltip'; -import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; - -import { rainbowSurgePalette } from '@mui/x-charts/colorPalettes'; -import { ChartsWrapper } from '@mui/x-charts-pro/ChartsWrapper'; -import { ChartsSurface } from '@mui/x-charts-pro/ChartsSurface'; -import { ScatterPlot } from '@mui/x-charts/ScatterChart'; -import { ChartsDataProviderPremium } from '@mui/x-charts-premium/ChartsDataProviderPremium'; - -const importantHappeningsLabels = [ - 'Exploratory archaeology digs begin.', - 'South Boston Haul Road opens.', - 'New Broadway Bridge opens.\nLeverett Circle Connector Bridge opens.', - 'Leonard P. Zakim Bunker Hill Bridge completed.', - 'I-90 Connector from South Boston to Rt. 1A in East Boston opens in January.\nI-93 Northbound opens in March.\nI-93 Southbound opens in December.', - 'Tunnel from Storrow Drive to Leverett Circle Connector opens.', - [ - 'Full opening of I-93 South.', - 'Opening of Dewey Square Tunnel, including new entrance and exit ramps.', - 'Opening of the two cantilevered lanes on Leonard P. Zakim Bunker Hill Bridge.', - 'Opening of permanent ramps and roadways at I-90/I-93 Interchange and in other areas.', - ].join('\n'), - 'Spectacle Island Park opens to the public.', - 'Restoration of Boston city streets.', -]; - -const importantHappenings = [ - { x: 1988, y: 3 }, - { x: 1993, y: 4 }, - { x: 1999, y: 5 }, - { x: 2002, y: 5 }, - { x: 2003, y: 5 }, - { x: 2004, y: 6 }, - { x: 2005, y: 6 }, - { x: 2006, y: 7 }, - { x: 2007, y: 8 }, -]; - -// Source: https://www.mass.gov/info-details/the-big-dig-project-background -const bigDigDataset = [ - { - phase: 1, - name: 'Conception & Initial Planning', - startYear: 1970, - endYear: 1982, - duration: '~10 years', - keyMilestones: [ - 'Concept development to address Central Artery congestion', - 'Federal Highway Administration involvement', - ], - }, - { - phase: 2, - name: 'Planning & Federal Approval', - startYear: 1982, - endYear: 1987, - duration: '5 years', - keyMilestones: [ - '1982: Official planning begins', - 'Environmental Impact Statement preparation', - '1985: Final EIS approval by FHWA', - 'April 1987: Congress approves federal funding and project scope', - ], - }, - { - phase: 3, - name: 'Design Development', - startYear: 1987, - endYear: 1991, - duration: '4 years', - keyMilestones: [ - 'Detailed engineering and design work', - 'Permits and approvals', - 'Contract procurement preparation', - 'Route and interchange finalization', - ], - }, - { - phase: 4, - name: 'Ted Williams Tunnel Construction', - startYear: 1991, - endYear: 1995, - duration: '4 years', - keyMilestones: [ - 'December 19, 1991: Official groundbreaking', - 'Underwater tunnel sections (steel tubes lowered by barges)', - 'December 1995: Ted Williams Tunnel opens (I-90 to Logan Airport)', - ], - }, - { - phase: 5, - name: 'Major Underground Construction', - startYear: 1995, - endYear: 2003, - duration: '8 years', - keyMilestones: [ - 'Central Artery tunnel excavation', - 'Tunnel-jacking operations (freezing soil beneath rail lines)', - 'Bridge construction (Zakim Bunker Hill Bridge)', - 'Four major highway interchanges', - ], - }, - { - phase: 6, - name: 'Systems Installation & Testing', - startYear: 2003, - endYear: 2005, - duration: '2-3 years', - keyMilestones: [ - 'Tunnel systems (ventilation, lighting, fire safety)', - 'Traffic management systems (1,400+ loop detectors, 430 CCTV cameras)', - 'Operations Control Center setup', - ], - }, - { - phase: 7, - name: 'Final Construction & Opening', - startYear: 2005, - endYear: 2006, - duration: '1-2 years', - keyMilestones: [ - 'January 13, 2006: Final ramp opens (Exit 20B)', - 'Elevated highway demolition begins', - "O'Neill Tunnel dedication", - ], - }, - { - phase: 8, - name: 'Rose Kennedy Greenway Development', - startYear: 2006, - endYear: 2007, - duration: '1-2 years', - keyMilestones: [ - 'Creation of 300+ acres of open space', - 'Park and public space development', - 'December 31, 2007: Official project completion', - ], - }, - { - phase: 9, - name: 'Claims Resolution & Final Closeout', - startYear: 2007, - endYear: 2008, - duration: '1 year', - keyMilestones: [ - 'Legal settlements ($407M from Bechtel/Parsons Brinckerhoff)', - 'Documentation finalization', - 'Warranty period begins', - ], - }, -]; - -const xAxis = [ - { - id: 'x', - scaleType: 'linear', - valueFormatter: (value) => value.toString(), - label: 'Year', - }, -]; - -const yAxis = [ - { - id: 'y', - scaleType: 'band', - dataKey: 'phase', - label: 'Project Phase', - width: 40, - }, -]; - -export default function RangeBarProjectSchedule() { - const clipPathId = React.useId(); - const theme = useTheme(); - const palette = rainbowSurgePalette(theme.palette.mode); - const colors = [palette[4], palette[1], palette[0]]; - - const series = [ - { - type: 'rangeBar', - datasetKeys: { start: 'startYear', end: 'endYear' }, - xAxisId: 'x', - yAxisId: 'y', - layout: 'horizontal', - colorGetter: (data) => { - if (data.dataIndex < 3) { - return colors[0]; - } - - if (data.dataIndex < 8) { - return colors[1]; - } - - return colors[2]; - }, - }, - { - type: 'scatter', - data: importantHappenings, - color: palette[2], - }, - ]; - - return ( - - - - - - - - - - - - - - - - - - - ); -} - -const TooltipContainer = styled('div')(({ theme }) => ({ - background: theme.palette.background.paper, - border: `1px solid ${theme.palette.divider}`, - padding: theme.spacing(1), - borderRadius: theme.shape.borderRadius, -})); - -function TooltipContent() { - const dataset = useDataset(); - const itemTooltipData = useItemTooltip(); - const axesTooltipData = useAxesTooltip(); - - if (itemTooltipData) { - return ; - } - - const dataIndex = axesTooltipData?.[0]?.dataIndex; - - if (dataIndex === undefined) { - return null; - } - - const phase = dataset[dataIndex]; - - return ( - - - Phase {phase.phase}: {phase.name} ({phase.startYear} -{' '} - {phase.endYear}) - - Key Milestones: -
    - {phase.keyMilestones.map((milestone, index) => ( -
  • - {milestone} -
    • - ))} -
- - ); -} - -function HappeningTooltip() { - const tooltipData = useItemTooltip(); - const dataIndex = tooltipData?.identifier.dataIndex; - - if (dataIndex === undefined) { - return null; - } - - const happening = importantHappenings[dataIndex]; - - return ( - - {happening.x} - - {importantHappeningsLabels[dataIndex].split('\n').map((line, index) => ( - - {line} -
- - ))} - - - ); -} - -function Legend({ series }) { - return ( - - {series.map((aSeries, index) => ( - -
- {aSeries.label} - - ))} - - ); -} diff --git a/docs/data/charts/range-bar/WebGLRangeBars.js b/docs/data/charts/range-bar/WebGLRangeBars.js deleted file mode 100644 index 92292abb85e50..0000000000000 --- a/docs/data/charts/range-bar/WebGLRangeBars.js +++ /dev/null @@ -1,71 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; -import RadioGroup from '@mui/material/RadioGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Radio from '@mui/material/Radio'; -import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium'; - -const POINTS = 5000; - -function generateRanges(seed) { - const data = new Array(POINTS); - let center = 50; - for (let i = 0; i < POINTS; i += 1) { - // Deterministic pseudo-random walk on the band center. - center += Math.sin(center * i * seed * 0.13) * 4; - const half = 4 + Math.abs(Math.sin(i * seed * 0.21)) * 6; - data[i] = [Math.round(center - half), Math.round(center + half)]; - } - return data; -} - -const xData = Array.from({ length: POINTS }, (_, i) => i); -const seriesA = generateRanges(1); -const seriesB = generateRanges(7); - -export default function WebGLRangeBars() { - const [renderer, setRenderer] = React.useState('webgl'); - - return ( - - - - Rendering Strategy - - setRenderer(event.target.value)} - > - } - label="Individual Bars (default)" - /> - } label="WebGL" /> - - - - - ); -} diff --git a/docs/data/charts/range-bar/BasicRangeBar.tsx b/docs/data/charts/range-bar/demos/basic-range-bar/BasicRangeBar.tsx similarity index 88% rename from docs/data/charts/range-bar/BasicRangeBar.tsx rename to docs/data/charts/range-bar/demos/basic-range-bar/BasicRangeBar.tsx index 12926cef1968a..cadf143b9dffe 100644 --- a/docs/data/charts/range-bar/BasicRangeBar.tsx +++ b/docs/data/charts/range-bar/demos/basic-range-bar/BasicRangeBar.tsx @@ -1,13 +1,14 @@ import * as React from 'react'; import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; -import { AxisValueFormatterContext } from '@mui/x-charts/models'; +import type { AxisValueFormatterContext } from '@mui/x-charts/models'; import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium'; -import { temperatureBerlinPorto } from '../dataset/temperatureBerlinPorto'; +import { temperatureBerlinPorto } from '../../../dataset/temperatureBerlinPorto'; export default function BasicRangeBar() { return ( + {/* @focus-start */} Average monthly temperature ranges in °C for Porto and Berlin in 1991-2020 @@ -43,6 +44,7 @@ export default function BasicRangeBar() { Source: IPMA (Porto), climate-data.org (Berlin) + {/* @focus-end */} ); } diff --git a/docs/data/charts/range-bar/demos/basic-range-bar/client.ts b/docs/data/charts/range-bar/demos/basic-range-bar/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/range-bar/demos/basic-range-bar/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/range-bar/demos/basic-range-bar/index.ts b/docs/data/charts/range-bar/demos/basic-range-bar/index.ts new file mode 100644 index 0000000000000..3ec698c008c23 --- /dev/null +++ b/docs/data/charts/range-bar/demos/basic-range-bar/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicRangeBar from './BasicRangeBar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicRangeBar, { ClientProvider }); diff --git a/docs/data/charts/range-bar/RangeBarAnimation.tsx b/docs/data/charts/range-bar/demos/range-bar-animation/RangeBarAnimation.tsx similarity index 95% rename from docs/data/charts/range-bar/RangeBarAnimation.tsx rename to docs/data/charts/range-bar/demos/range-bar-animation/RangeBarAnimation.tsx index 1560cfed14296..5c4bc246c18d1 100644 --- a/docs/data/charts/range-bar/RangeBarAnimation.tsx +++ b/docs/data/charts/range-bar/demos/range-bar-animation/RangeBarAnimation.tsx @@ -4,14 +4,13 @@ import Typography from '@mui/material/Typography'; import Slider from '@mui/material/Slider'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; -import { HighlightScope } from '@mui/x-charts-pro/context'; -import { - BarChartPremium, - RangeBarSeries, -} from '@mui/x-charts-premium/BarChartPremium'; -import { RangeBarValueType } from '@mui/x-charts-premium/models'; +import type { HighlightScope } from '@mui/x-charts-pro/context'; +import type { RangeBarSeries } from '@mui/x-charts-premium/BarChartPremium'; +import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium'; +import type { RangeBarValueType } from '@mui/x-charts-premium/models'; export default function RangeBarAnimation() { + // @focus-start @padding 1 const [seriesNb, setSeriesNb] = React.useState(2); const [itemNb, setItemNb] = React.useState(5); const [skipAnimation, setSkipAnimation] = React.useState(false); @@ -71,6 +70,7 @@ export default function RangeBarAnimation() { /> ); + // @focus-end } const highlightScope: HighlightScope<'rangeBar'> = { diff --git a/docs/data/charts/range-bar/demos/range-bar-animation/client.ts b/docs/data/charts/range-bar/demos/range-bar-animation/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/range-bar/demos/range-bar-animation/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/range-bar/demos/range-bar-animation/index.ts b/docs/data/charts/range-bar/demos/range-bar-animation/index.ts new file mode 100644 index 0000000000000..6b3634a243696 --- /dev/null +++ b/docs/data/charts/range-bar/demos/range-bar-animation/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RangeBarAnimation from './RangeBarAnimation'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RangeBarAnimation, { ClientProvider }); diff --git a/docs/data/charts/range-bar/RangeBarBorderRadius.tsx b/docs/data/charts/range-bar/demos/range-bar-border-radius/RangeBarBorderRadius.tsx similarity index 93% rename from docs/data/charts/range-bar/RangeBarBorderRadius.tsx rename to docs/data/charts/range-bar/demos/range-bar-border-radius/RangeBarBorderRadius.tsx index 1b7dae1dad5f3..7ee51cadea346 100644 --- a/docs/data/charts/range-bar/RangeBarBorderRadius.tsx +++ b/docs/data/charts/range-bar/demos/range-bar-border-radius/RangeBarBorderRadius.tsx @@ -5,14 +5,13 @@ import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; import Slider from '@mui/material/Slider'; import Typography from '@mui/material/Typography'; -import { - BarChartPremium, - BarChartPremiumProps, -} from '@mui/x-charts-premium/BarChartPremium'; +import type { BarChartPremiumProps } from '@mui/x-charts-premium/BarChartPremium'; +import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; export default function RangeBarBorderRadius() { + // @focus-start @padding 1 const [layout, setLayout] = React.useState<'horizontal' | 'vertical'>('vertical'); const [radius, setRadius] = React.useState(10); const [reverse, setReverse] = React.useState(false); @@ -79,6 +78,7 @@ export default function RangeBarBorderRadius() { /> ); + // @focus-end } const dataset = [ diff --git a/docs/data/charts/range-bar/demos/range-bar-border-radius/client.ts b/docs/data/charts/range-bar/demos/range-bar-border-radius/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/range-bar/demos/range-bar-border-radius/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/range-bar/demos/range-bar-border-radius/index.ts b/docs/data/charts/range-bar/demos/range-bar-border-radius/index.ts new file mode 100644 index 0000000000000..3d20b5771bcb0 --- /dev/null +++ b/docs/data/charts/range-bar/demos/range-bar-border-radius/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RangeBarBorderRadius from './RangeBarBorderRadius'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RangeBarBorderRadius, { ClientProvider }); diff --git a/docs/data/charts/range-bar/RangeBarClick.tsx b/docs/data/charts/range-bar/demos/range-bar-click/RangeBarClick.tsx similarity index 88% rename from docs/data/charts/range-bar/RangeBarClick.tsx rename to docs/data/charts/range-bar/demos/range-bar-click/RangeBarClick.tsx index fd992a5ff810f..f58d105428f3d 100644 --- a/docs/data/charts/range-bar/RangeBarClick.tsx +++ b/docs/data/charts/range-bar/demos/range-bar-click/RangeBarClick.tsx @@ -4,13 +4,11 @@ import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import IconButton from '@mui/material/IconButton'; import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; -import { - BarChartPremium, - RangeBarSeries, -} from '@mui/x-charts-premium/BarChartPremium'; +import type { RangeBarSeries } from '@mui/x-charts-premium/BarChartPremium'; +import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium'; import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { BarItemIdentifier, ChartsAxisData } from '@mui/x-charts/models'; -import { RangeBarItemIdentifier } from '@mui/x-charts-premium/models'; +import type { BarItemIdentifier, ChartsAxisData } from '@mui/x-charts/models'; +import type { RangeBarItemIdentifier } from '@mui/x-charts-premium/models'; import type {} from '@mui/x-charts-premium/moduleAugmentation/rangeBarOnClick'; @@ -53,6 +51,7 @@ const barChartsParams = { } as const; export default function RangeBarClick() { + // @focus-start @padding 1 const [itemData, setItemData] = React.useState< BarItemIdentifier | RangeBarItemIdentifier >(); @@ -105,4 +104,5 @@ ${axisData ? JSON.stringify(axisData, null, 2) : '// The data will appear here'} ); + // @focus-end } diff --git a/docs/data/charts/range-bar/demos/range-bar-click/client.ts b/docs/data/charts/range-bar/demos/range-bar-click/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/range-bar/demos/range-bar-click/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/range-bar/demos/range-bar-click/index.ts b/docs/data/charts/range-bar/demos/range-bar-click/index.ts new file mode 100644 index 0000000000000..b54972964e10f --- /dev/null +++ b/docs/data/charts/range-bar/demos/range-bar-click/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RangeBarClick from './RangeBarClick'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RangeBarClick, { ClientProvider }); diff --git a/docs/data/charts/range-bar/RangeBarColorScale.tsx b/docs/data/charts/range-bar/demos/range-bar-color-scale/RangeBarColorScale.tsx similarity index 95% rename from docs/data/charts/range-bar/RangeBarColorScale.tsx rename to docs/data/charts/range-bar/demos/range-bar-color-scale/RangeBarColorScale.tsx index bbd6219bb666d..453b4b6cba34b 100644 --- a/docs/data/charts/range-bar/RangeBarColorScale.tsx +++ b/docs/data/charts/range-bar/demos/range-bar-color-scale/RangeBarColorScale.tsx @@ -3,10 +3,8 @@ import Stack from '@mui/material/Stack'; import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { - BarChartPremium, - RangeBarSeries, -} from '@mui/x-charts-premium/BarChartPremium'; +import type { RangeBarSeries } from '@mui/x-charts-premium/BarChartPremium'; +import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium'; const series = [ { @@ -23,6 +21,7 @@ const series = [ ]; export default function RangeBarColorScale() { + // @focus-start @padding 1 const [colorX, setColorX] = React.useState< 'None' | 'piecewise' | 'continuous' | 'ordinal' >('piecewise'); @@ -138,4 +137,5 @@ export default function RangeBarColorScale() { /> ); + // @focus-end } diff --git a/docs/data/charts/range-bar/demos/range-bar-color-scale/client.ts b/docs/data/charts/range-bar/demos/range-bar-color-scale/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/range-bar/demos/range-bar-color-scale/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/range-bar/demos/range-bar-color-scale/index.ts b/docs/data/charts/range-bar/demos/range-bar-color-scale/index.ts new file mode 100644 index 0000000000000..728ace704c127 --- /dev/null +++ b/docs/data/charts/range-bar/demos/range-bar-color-scale/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RangeBarColorScale from './RangeBarColorScale'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RangeBarColorScale, { ClientProvider }); diff --git a/docs/data/charts/range-bar/RangeBarGradient.tsx b/docs/data/charts/range-bar/demos/range-bar-gradient/RangeBarGradient.tsx similarity index 91% rename from docs/data/charts/range-bar/RangeBarGradient.tsx rename to docs/data/charts/range-bar/demos/range-bar-gradient/RangeBarGradient.tsx index d9982635934aa..2edde5083df6c 100644 --- a/docs/data/charts/range-bar/RangeBarGradient.tsx +++ b/docs/data/charts/range-bar/demos/range-bar-gradient/RangeBarGradient.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { barClasses } from '@mui/x-charts/BarChart'; +import type { RangeBarSeries } from '@mui/x-charts-premium/BarChartPremium'; import { BarChartPremium, rangeBarClasses, - RangeBarSeries, } from '@mui/x-charts-premium/BarChartPremium'; const settings = { @@ -43,6 +43,7 @@ const settings = { export default function RangeBarGradient() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/range-bar/demos/range-bar-gradient/client.ts b/docs/data/charts/range-bar/demos/range-bar-gradient/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/range-bar/demos/range-bar-gradient/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/range-bar/demos/range-bar-gradient/index.ts b/docs/data/charts/range-bar/demos/range-bar-gradient/index.ts new file mode 100644 index 0000000000000..0c71059ea8e68 --- /dev/null +++ b/docs/data/charts/range-bar/demos/range-bar-gradient/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RangeBarGradient from './RangeBarGradient'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RangeBarGradient, { ClientProvider }); diff --git a/docs/data/charts/range-bar/RangeBarProjectSchedule.tsx b/docs/data/charts/range-bar/demos/range-bar-project-schedule/RangeBarProjectSchedule.tsx similarity index 96% rename from docs/data/charts/range-bar/RangeBarProjectSchedule.tsx rename to docs/data/charts/range-bar/demos/range-bar-project-schedule/RangeBarProjectSchedule.tsx index 1d40d05ad6bca..d1508f9aee85a 100644 --- a/docs/data/charts/range-bar/RangeBarProjectSchedule.tsx +++ b/docs/data/charts/range-bar/demos/range-bar-project-schedule/RangeBarProjectSchedule.tsx @@ -1,6 +1,7 @@ import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; -import { RangeBarPlot, RangeBarSeries } from '@mui/x-charts-premium/BarChartPremium'; +import type { RangeBarSeries } from '@mui/x-charts-premium/BarChartPremium'; +import { RangeBarPlot } from '@mui/x-charts-premium/BarChartPremium'; import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath'; @@ -13,11 +14,12 @@ import { useItemTooltip, } from '@mui/x-charts/ChartsTooltip'; import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; -import { ScatterValueType, XAxis, YAxis } from '@mui/x-charts/models'; +import type { ScatterValueType, XAxis, YAxis } from '@mui/x-charts/models'; import { rainbowSurgePalette } from '@mui/x-charts/colorPalettes'; import { ChartsWrapper } from '@mui/x-charts-pro/ChartsWrapper'; import { ChartsSurface } from '@mui/x-charts-pro/ChartsSurface'; -import { ScatterPlot, ScatterSeries } from '@mui/x-charts/ScatterChart'; +import type { ScatterSeries } from '@mui/x-charts/ScatterChart'; +import { ScatterPlot } from '@mui/x-charts/ScatterChart'; import { ChartsDataProviderPremium } from '@mui/x-charts-premium/ChartsDataProviderPremium'; const importantHappeningsLabels = [ @@ -181,6 +183,7 @@ const yAxis = [ ] satisfies YAxis[]; export default function RangeBarProjectSchedule() { + // @focus-start @padding 1 const clipPathId = React.useId(); const theme = useTheme(); const palette = rainbowSurgePalette(theme.palette.mode); @@ -253,6 +256,7 @@ export default function RangeBarProjectSchedule() { ); + // @focus-end } const TooltipContainer = styled('div')(({ theme }) => ({ diff --git a/docs/data/charts/range-bar/demos/range-bar-project-schedule/client.ts b/docs/data/charts/range-bar/demos/range-bar-project-schedule/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/range-bar/demos/range-bar-project-schedule/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/range-bar/demos/range-bar-project-schedule/index.ts b/docs/data/charts/range-bar/demos/range-bar-project-schedule/index.ts new file mode 100644 index 0000000000000..0713f037cd073 --- /dev/null +++ b/docs/data/charts/range-bar/demos/range-bar-project-schedule/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RangeBarProjectSchedule from './RangeBarProjectSchedule'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RangeBarProjectSchedule, { ClientProvider }); diff --git a/docs/data/charts/range-bar/WebGLRangeBars.tsx b/docs/data/charts/range-bar/demos/web-gl-range-bars/WebGLRangeBars.tsx similarity index 98% rename from docs/data/charts/range-bar/WebGLRangeBars.tsx rename to docs/data/charts/range-bar/demos/web-gl-range-bars/WebGLRangeBars.tsx index 4fbf4560bf869..c6ab9efe43694 100644 --- a/docs/data/charts/range-bar/WebGLRangeBars.tsx +++ b/docs/data/charts/range-bar/demos/web-gl-range-bars/WebGLRangeBars.tsx @@ -28,6 +28,7 @@ const seriesA = generateRanges(1); const seriesB = generateRanges(7); export default function WebGLRangeBars() { + // @focus-start @padding 1 const [renderer, setRenderer] = React.useState('webgl'); return ( @@ -70,4 +71,5 @@ export default function WebGLRangeBars() { /> ); + // @focus-end } diff --git a/docs/data/charts/range-bar/demos/web-gl-range-bars/client.ts b/docs/data/charts/range-bar/demos/web-gl-range-bars/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/range-bar/demos/web-gl-range-bars/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/range-bar/demos/web-gl-range-bars/index.ts b/docs/data/charts/range-bar/demos/web-gl-range-bars/index.ts new file mode 100644 index 0000000000000..019c6c6f38f3e --- /dev/null +++ b/docs/data/charts/range-bar/demos/web-gl-range-bars/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import WebGLRangeBars from './WebGLRangeBars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, WebGLRangeBars, { ClientProvider }); diff --git a/docs/data/charts/range-bar/range-bar.md b/docs/data/charts/range-bar/range-bar.md index 099274cedd20b..1f9b845998484 100644 --- a/docs/data/charts/range-bar/range-bar.md +++ b/docs/data/charts/range-bar/range-bar.md @@ -21,7 +21,7 @@ To create a range bar chart, render `BarChartPremium` with at least one series o Each data point in a range bar series consists of a `{ start: number, end: number }` object. -{{"demo": "BasicRangeBar.js"}} +{{"component": "file://./demos/basic-range-bar/index.ts"}} ### Using a dataset @@ -42,7 +42,7 @@ To achieve rounded corners, set the `borderRadius` prop on `BarChartPremium` to When composing a custom component, set the `borderRadius` prop on the `RangeBarPlot` component. -{{"demo": "RangeBarBorderRadius.js"}} +{{"component": "file://./demos/range-bar-border-radius/index.ts"}} ### Color @@ -57,7 +57,7 @@ Unlike other chart types, the `colorMap` property does not work for the numerica See [Styling—Value-based colors](/x/react-charts/styling/#value-based-colors) for more details on `colorMap`. -{{"demo": "RangeBarColorScale.js"}} +{{"component": "file://./demos/range-bar-color-scale/index.ts"}} ### CSS @@ -66,14 +66,14 @@ You can customize the range bar chart elements using CSS selectors. Like a bar chart, each series renders a `g` element that contains a `data-series` attribute. You can use this attribute to target elements based on their series. -{{"demo": "RangeBarGradient.js"}} +{{"component": "file://./demos/range-bar-gradient/index.ts"}} ## Click event The click event handlers work similarly to bar charts. See [Bars—Click events](/x/react-charts/bars/#click-events) for details. -{{"demo": "RangeBarClick.js"}} +{{"component": "file://./demos/range-bar-click/index.ts"}} :::info For `onAxisClick`, the `seriesValues` type will be missing `RangeBarValueType`. @@ -92,7 +92,7 @@ import type {} from '@mui/x-charts-pro/moduleAugmentation/rangeBarOnClick'; Animation works similarly to bar charts. See [Bars—Animation](/x/react-charts/bars/#animation) for details. -{{"demo": "RangeBarAnimation.js"}} +{{"component": "file://./demos/range-bar-animation/index.ts"}} ## Performance @@ -101,7 +101,7 @@ Set the `renderer` prop to `"webgl"` to enable it. The same trade-offs as the bar chart [WebGL renderer](/x/react-charts/bars/#webgl-renderer) apply. -{{"demo": "WebGLRangeBars.js"}} +{{"component": "file://./demos/web-gl-range-bars/index.ts"}} ## Composition @@ -135,4 +135,4 @@ The example below shows how `BarChartPremium` is composed: The example below follows a similar pattern and creates a project schedule chart using range bars to represent task durations. -{{"demo": "RangeBarProjectSchedule.js"}} +{{"component": "file://./demos/range-bar-project-schedule/index.ts"}} diff --git a/docs/data/charts/references/ReferenceAreaBasic.js b/docs/data/charts/references/ReferenceAreaBasic.js deleted file mode 100644 index 9b9d0161dc0b9..0000000000000 --- a/docs/data/charts/references/ReferenceAreaBasic.js +++ /dev/null @@ -1,100 +0,0 @@ -import * as React from 'react'; -import { LineHighlightPlot, LinePlot } from '@mui/x-charts/LineChart'; -import { ChartsDataProvider } from '@mui/x-charts/ChartsDataProvider'; -import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; -import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsLegend } from '@mui/x-charts/ChartsLegend'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; -import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; -import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; -import { ReferenceArea, ReferenceAreaLabel } from './ReferenceArea'; - -export default function ReferenceAreaBasic() { - return ( - - - - - - - - Error < 10% - - - - - - - - - - - - - - ); -} - -const N = 120; -const tValues = Array.from({ length: N + 1 }, (_, i) => -0.1 + (i * 3) / N); -const commandValues = tValues.map((t) => (t < 0 ? 0 : 1)); -const zValues = tValues.map((t) => - t < 0 ? 0 : 1 - 1 * Math.exp(-t) * (Math.cos(8 * t) - 0.5 * Math.sin(8 * t)), -); - -const IntlNumber = Intl.NumberFormat('en-US', { - notation: 'compact', - maximumFractionDigits: 2, -}); -const valueFormatter = (value) => (value === null ? '' : IntlNumber.format(value)); - -const chartsConfig = { - height: 300, - xAxis: [{ scaleType: 'linear', data: tValues, valueFormatter }], - series: [ - { - type: 'line', - data: commandValues, - label: 'command', - curve: 'stepAfter', - valueFormatter, - }, - { - type: 'line', - data: zValues, - showMark: false, - label: 'response', - valueFormatter, - }, - ], -}; diff --git a/docs/data/charts/references/ReferenceLineBasic.js b/docs/data/charts/references/ReferenceLineBasic.js deleted file mode 100644 index 8916dafe601cd..0000000000000 --- a/docs/data/charts/references/ReferenceLineBasic.js +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from 'react'; -import { LineChart } from '@mui/x-charts/LineChart'; -import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; - -export default function ReferenceLineBasic() { - return ( - - - - - ); -} - -const chartsConfig = { - height: 300, - xAxis: [ - { scaleType: 'point', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'] }, - ], - series: [{ data: [2, 5, 3, 7, 1, 6, 4] }], -}; diff --git a/docs/data/charts/references/ReferenceLineBasic.tsx.preview b/docs/data/charts/references/ReferenceLineBasic.tsx.preview deleted file mode 100644 index be1fcdcbf8167..0000000000000 --- a/docs/data/charts/references/ReferenceLineBasic.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/data/charts/references/ReferenceLineLabel.js b/docs/data/charts/references/ReferenceLineLabel.js deleted file mode 100644 index 225a67ba59093..0000000000000 --- a/docs/data/charts/references/ReferenceLineLabel.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import { LineChart } from '@mui/x-charts/LineChart'; -import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; - -export default function ReferenceLineLabel() { - return ( - - - - - - ); -} - -const chartsConfig = { - height: 300, - xAxis: [ - { scaleType: 'point', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'] }, - ], - series: [{ data: [2, 5, 3, 7, 1, 6, 4] }], -}; diff --git a/docs/data/charts/references/ReferenceLineLabel.tsx.preview b/docs/data/charts/references/ReferenceLineLabel.tsx.preview deleted file mode 100644 index 2f71456a4caa3..0000000000000 --- a/docs/data/charts/references/ReferenceLineLabel.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/charts/references/ReferenceLineStyled.js b/docs/data/charts/references/ReferenceLineStyled.js deleted file mode 100644 index 2d3dcdb1b70e7..0000000000000 --- a/docs/data/charts/references/ReferenceLineStyled.js +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import { LineChart } from '@mui/x-charts/LineChart'; -import { - ChartsReferenceLine, - referenceLineClasses, -} from '@mui/x-charts/ChartsReferenceLine'; - -const StyledReferenceLine = styled(ChartsReferenceLine)(() => ({ - [`& .${referenceLineClasses.line}`]: { - strokeDasharray: '10 5', - stroke: 'red', - }, -})); - -export default function ReferenceLineStyled() { - return ( - - - - - ); -} -const chartsConfig = { - height: 300, - xAxis: [ - { scaleType: 'point', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'] }, - ], - series: [{ data: [2, 5, 3, 7, 1, 6, 4] }], -}; diff --git a/docs/data/charts/references/ReferenceLineStyled.tsx.preview b/docs/data/charts/references/ReferenceLineStyled.tsx.preview deleted file mode 100644 index c587bce5d094a..0000000000000 --- a/docs/data/charts/references/ReferenceLineStyled.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/data/charts/references/ReferenceOverview.js b/docs/data/charts/references/ReferenceOverview.js deleted file mode 100644 index efa59b1489527..0000000000000 --- a/docs/data/charts/references/ReferenceOverview.js +++ /dev/null @@ -1,205 +0,0 @@ -import * as React from 'react'; -import Typography from '@mui/material/Typography'; -import Box from '@mui/material/Box'; -import { alpha, useTheme } from '@mui/material/styles'; -import { ChartsReferenceLine } from '@mui/x-charts-pro/ChartsReferenceLine'; -import { ChartsDataProviderPro } from '@mui/x-charts-pro/ChartsDataProviderPro'; -import { ChartsSurface } from '@mui/x-charts-pro/ChartsSurface'; -import { LinePlot } from '@mui/x-charts-pro/LineChart'; -import { ChartsXAxis } from '@mui/x-charts-pro/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts-pro/ChartsYAxis'; -import { ChartsTooltip } from '@mui/x-charts-pro/ChartsTooltip'; -import { ChartsGrid } from '@mui/x-charts-pro/ChartsGrid'; -import { ChartsZoomSlider } from '@mui/x-charts-pro/ChartsZoomSlider'; -import { ChartsClipPath } from '@mui/x-charts-pro/ChartsClipPath'; -import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; -import { ChartsLegend } from '@mui/x-charts-pro/ChartsLegend'; -import { usaUnemploymentAndGdp } from '../dataset/usaUnemploymentAndGdp'; -import { useReferencePoint } from './ReferencePoint'; -import { ReferenceArea } from './ReferenceArea'; - -const recessions = [ - { - start: new Date('2001-03-01'), - end: new Date('2001-11-01'), - label: 'Early 2000s', - }, - { - start: new Date('2007-12-01'), - end: new Date('2009-06-01'), - label: 'Great Recession', - }, - { start: new Date('2020-02-01'), end: new Date('2020-04-01'), label: 'COVID-19' }, -]; - -const elections = [ - { year: 2001, label: 'George\nW. Bush' }, - { year: 2009, label: 'Barack\nObama' }, - { year: 2017, label: 'Donald\nTrump' }, - { year: 2021, label: 'Joe\nBiden' }, - { year: 2025, label: 'Donald\nTrump' }, -]; - -function AreaWithLabel(period) { - const theme = useTheme(); - const labelFill = alpha(theme.palette.text.primary, 0.7); - - const xStart = useReferencePoint({ x: period.start.getTime() }); - const xEnd = useReferencePoint({ x: period.end.getTime() }); - - return ( - - - {xStart.x !== xEnd.x && ( - - {period.label} - - )} - - ); -} - -function ElectionMarker(election) { - return ( - - ); -} - -export default function ReferenceOverview() { - const clipPathId = React.useId(); - return ( - - - US unemployment rate comparison with GDP per capita - - (value == null ? '' : `${value.toFixed(1)}%`), - }, - { - type: 'line', - dataKey: 'gdpPerCapita', - label: 'GDP per capita', - color: '#4caf50', - yAxisId: 'gdp-axis', - connectNulls: true, - valueFormatter: (value) => - value == null ? '' : `${(value / 1000).toFixed(1)}k`, - }, - ]} - xAxis={[ - { - scaleType: 'time', - dataKey: 'date', - tickNumber: 4, - valueFormatter: (date, context) => { - if (context.location !== 'tick') { - return date.toLocaleDateString('en-US', { - year: 'numeric', - month: 'short', - }); - } - return date.getMonth() === 0 - ? date.toLocaleDateString('en-US', { - year: 'numeric', - }) - : date.toLocaleDateString('en-US', { - month: 'short', - }); - }, - zoom: { - slider: { enabled: true }, - }, - }, - ]} - yAxis={[ - { - id: 'unemployment-axis', - scaleType: 'linear', - valueFormatter: (value) => `${value}%`, - width: 55, - position: 'left', - }, - { - id: 'gdp-axis', - scaleType: 'linear', - width: 50, - position: 'right', - valueFormatter: (value) => `${(value / 1000).toLocaleString()}k`, - }, - ]} - > - - - - - - {recessions.map((period) => ( - - ))} - - - - - - {elections.map((election) => ( - - ))} - - - - - - - - - - - Source: FRED - - - ); -} diff --git a/docs/data/charts/references/ReferencePointBasic.js b/docs/data/charts/references/ReferencePointBasic.js deleted file mode 100644 index 2343b3b21e693..0000000000000 --- a/docs/data/charts/references/ReferencePointBasic.js +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import { LineChart } from '@mui/x-charts/LineChart'; -import { useXScale, useYScale } from '@mui/x-charts/hooks'; - -function useReferencePoint(params) { - const xScale = useXScale(); - const yScale = useYScale(); - - return { - cx: xScale(params.x), - cy: yScale(params.y), - }; -} - -function ReferencePoint(props) { - const { x, y, ...other } = props; - - const coordinates = useReferencePoint({ x, y }); - - return ; -} - -export default function ReferencePointBasic() { - return ( - - - - - ); -} - -const chartsConfig = { - height: 300, - xAxis: [ - { scaleType: 'point', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'] }, - ], - series: [{ data: [2, 5, 3, 7, 1, 6, 4] }], -}; diff --git a/docs/data/charts/references/ReferencePointBasic.tsx.preview b/docs/data/charts/references/ReferencePointBasic.tsx.preview deleted file mode 100644 index 6e90137c184a2..0000000000000 --- a/docs/data/charts/references/ReferencePointBasic.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/data/charts/references/ReferenceAreaBasic.tsx b/docs/data/charts/references/demos/reference-area-basic/ReferenceAreaBasic.tsx similarity index 96% rename from docs/data/charts/references/ReferenceAreaBasic.tsx rename to docs/data/charts/references/demos/reference-area-basic/ReferenceAreaBasic.tsx index 817262c5b54d4..ad6e809b67506 100644 --- a/docs/data/charts/references/ReferenceAreaBasic.tsx +++ b/docs/data/charts/references/demos/reference-area-basic/ReferenceAreaBasic.tsx @@ -9,10 +9,11 @@ import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; -import { ReferenceArea, ReferenceAreaLabel } from './ReferenceArea'; +import { ReferenceArea, ReferenceAreaLabel } from '../../ReferenceArea'; export default function ReferenceAreaBasic() { return ( + // @focus-start @padding 2 {...chartsConfig}> @@ -65,6 +66,7 @@ export default function ReferenceAreaBasic() { + // @focus-end ); } diff --git a/docs/data/charts/references/demos/reference-area-basic/client.ts b/docs/data/charts/references/demos/reference-area-basic/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/references/demos/reference-area-basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/references/demos/reference-area-basic/index.ts b/docs/data/charts/references/demos/reference-area-basic/index.ts new file mode 100644 index 0000000000000..8a8e170fbaa60 --- /dev/null +++ b/docs/data/charts/references/demos/reference-area-basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ReferenceAreaBasic from './ReferenceAreaBasic'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ReferenceAreaBasic, { ClientProvider }); diff --git a/docs/data/charts/references/ReferenceLineBasic.tsx b/docs/data/charts/references/demos/reference-line-basic/ReferenceLineBasic.tsx similarity index 75% rename from docs/data/charts/references/ReferenceLineBasic.tsx rename to docs/data/charts/references/demos/reference-line-basic/ReferenceLineBasic.tsx index ce0a4dc2dcd4a..ac9f6e3483d00 100644 --- a/docs/data/charts/references/ReferenceLineBasic.tsx +++ b/docs/data/charts/references/demos/reference-line-basic/ReferenceLineBasic.tsx @@ -1,13 +1,16 @@ import * as React from 'react'; -import { LineChart, LineChartProps } from '@mui/x-charts/LineChart'; +import type { LineChartProps } from '@mui/x-charts/LineChart'; +import { LineChart } from '@mui/x-charts/LineChart'; import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; export default function ReferenceLineBasic() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/references/demos/reference-line-basic/client.ts b/docs/data/charts/references/demos/reference-line-basic/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/references/demos/reference-line-basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/references/demos/reference-line-basic/index.ts b/docs/data/charts/references/demos/reference-line-basic/index.ts new file mode 100644 index 0000000000000..6fbdb2ea6ae30 --- /dev/null +++ b/docs/data/charts/references/demos/reference-line-basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ReferenceLineBasic from './ReferenceLineBasic'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ReferenceLineBasic, { ClientProvider }); diff --git a/docs/data/charts/references/ReferenceLineLabel.tsx b/docs/data/charts/references/demos/reference-line-label/ReferenceLineLabel.tsx similarity index 82% rename from docs/data/charts/references/ReferenceLineLabel.tsx rename to docs/data/charts/references/demos/reference-line-label/ReferenceLineLabel.tsx index 6c57b51cb63ed..8fcd8d126450a 100644 --- a/docs/data/charts/references/ReferenceLineLabel.tsx +++ b/docs/data/charts/references/demos/reference-line-label/ReferenceLineLabel.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; -import { LineChart, LineChartProps } from '@mui/x-charts/LineChart'; +import type { LineChartProps } from '@mui/x-charts/LineChart'; +import { LineChart } from '@mui/x-charts/LineChart'; import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine'; export default function ReferenceLineLabel() { return ( + // @focus-start @padding 2 @@ -16,6 +18,7 @@ export default function ReferenceLineLabel() { labelStyle={{ dominantBaseline: 'hanging' }} /> + // @focus-end ); } diff --git a/docs/data/charts/references/demos/reference-line-label/client.ts b/docs/data/charts/references/demos/reference-line-label/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/references/demos/reference-line-label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/references/demos/reference-line-label/index.ts b/docs/data/charts/references/demos/reference-line-label/index.ts new file mode 100644 index 0000000000000..4e83970fdcc05 --- /dev/null +++ b/docs/data/charts/references/demos/reference-line-label/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ReferenceLineLabel from './ReferenceLineLabel'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ReferenceLineLabel, { ClientProvider }); diff --git a/docs/data/charts/references/ReferenceLineStyled.tsx b/docs/data/charts/references/demos/reference-line-styled/ReferenceLineStyled.tsx similarity index 86% rename from docs/data/charts/references/ReferenceLineStyled.tsx rename to docs/data/charts/references/demos/reference-line-styled/ReferenceLineStyled.tsx index 632aed7227085..a600a8dd3ba63 100644 --- a/docs/data/charts/references/ReferenceLineStyled.tsx +++ b/docs/data/charts/references/demos/reference-line-styled/ReferenceLineStyled.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; -import { LineChart, LineChartProps } from '@mui/x-charts/LineChart'; +import type { LineChartProps } from '@mui/x-charts/LineChart'; +import { LineChart } from '@mui/x-charts/LineChart'; import { ChartsReferenceLine, referenceLineClasses, @@ -15,6 +16,7 @@ const StyledReferenceLine = styled(ChartsReferenceLine)(() => ({ export default function ReferenceLineStyled() { return ( + // @focus-start @padding 2 + // @focus-end ); } const chartsConfig: LineChartProps = { diff --git a/docs/data/charts/references/demos/reference-line-styled/client.ts b/docs/data/charts/references/demos/reference-line-styled/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/references/demos/reference-line-styled/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/references/demos/reference-line-styled/index.ts b/docs/data/charts/references/demos/reference-line-styled/index.ts new file mode 100644 index 0000000000000..7bac4b9626786 --- /dev/null +++ b/docs/data/charts/references/demos/reference-line-styled/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ReferenceLineStyled from './ReferenceLineStyled'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ReferenceLineStyled, { ClientProvider }); diff --git a/docs/data/charts/references/ReferenceOverview.tsx b/docs/data/charts/references/demos/reference-overview/ReferenceOverview.tsx similarity index 96% rename from docs/data/charts/references/ReferenceOverview.tsx rename to docs/data/charts/references/demos/reference-overview/ReferenceOverview.tsx index ec4147a1e78bc..cb4a765a9fe11 100644 --- a/docs/data/charts/references/ReferenceOverview.tsx +++ b/docs/data/charts/references/demos/reference-overview/ReferenceOverview.tsx @@ -14,9 +14,9 @@ import { ChartsZoomSlider } from '@mui/x-charts-pro/ChartsZoomSlider'; import { ChartsClipPath } from '@mui/x-charts-pro/ChartsClipPath'; import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; import { ChartsLegend } from '@mui/x-charts-pro/ChartsLegend'; -import { usaUnemploymentAndGdp } from '../dataset/usaUnemploymentAndGdp'; -import { useReferencePoint } from './ReferencePoint'; -import { ReferenceArea } from './ReferenceArea'; +import { usaUnemploymentAndGdp } from '../../../dataset/usaUnemploymentAndGdp'; +import { useReferencePoint } from '../../ReferencePoint'; +import { ReferenceArea } from '../../ReferenceArea'; type RecessionPeriod = { start: Date; @@ -107,6 +107,7 @@ function ElectionMarker(election: Election) { } export default function ReferenceOverview() { + // @focus-start @padding 1 const clipPathId = React.useId(); return ( @@ -214,4 +215,5 @@ export default function ReferenceOverview() { ); + // @focus-end } diff --git a/docs/data/charts/references/demos/reference-overview/client.ts b/docs/data/charts/references/demos/reference-overview/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/references/demos/reference-overview/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/references/demos/reference-overview/index.ts b/docs/data/charts/references/demos/reference-overview/index.ts new file mode 100644 index 0000000000000..f60e1f1af77e1 --- /dev/null +++ b/docs/data/charts/references/demos/reference-overview/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ReferenceOverview from './ReferenceOverview'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ReferenceOverview, { ClientProvider }); diff --git a/docs/data/charts/references/ReferencePointBasic.tsx b/docs/data/charts/references/demos/reference-point-basic/ReferencePointBasic.tsx similarity index 89% rename from docs/data/charts/references/ReferencePointBasic.tsx rename to docs/data/charts/references/demos/reference-point-basic/ReferencePointBasic.tsx index ba9a7bace5ae3..0ca40d5fdf88d 100644 --- a/docs/data/charts/references/ReferencePointBasic.tsx +++ b/docs/data/charts/references/demos/reference-point-basic/ReferencePointBasic.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { LineChart, LineChartProps } from '@mui/x-charts/LineChart'; +import type { LineChartProps } from '@mui/x-charts/LineChart'; +import { LineChart } from '@mui/x-charts/LineChart'; import { useXScale, useYScale } from '@mui/x-charts/hooks'; import type { ScaleLinear, ScalePoint } from '@mui/x-charts-vendor/d3-scale'; @@ -38,6 +39,7 @@ function ReferencePoint(props: ReferencePointProps) { export default function ReferencePointBasic() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/references/demos/reference-point-basic/client.ts b/docs/data/charts/references/demos/reference-point-basic/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/references/demos/reference-point-basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/references/demos/reference-point-basic/index.ts b/docs/data/charts/references/demos/reference-point-basic/index.ts new file mode 100644 index 0000000000000..79d310d72f6e0 --- /dev/null +++ b/docs/data/charts/references/demos/reference-point-basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ReferencePointBasic from './ReferencePointBasic'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ReferencePointBasic, { ClientProvider }); diff --git a/docs/data/charts/references/references.md b/docs/data/charts/references/references.md index ed1a4ad744d32..810c832a7226e 100644 --- a/docs/data/charts/references/references.md +++ b/docs/data/charts/references/references.md @@ -22,7 +22,7 @@ We encourage you to build you own component by reusing those demo helpers. If you miss some behaviors, feel free to [open an issue](https://github.com/mui/mui-x/issues/new?template=2.feature.yml). ::: -{{"demo": "ReferenceOverview.js"}} +{{"component": "file://./demos/reference-overview/index.ts"}} ## Reference line @@ -36,14 +36,14 @@ When a chart has multiple axes, use the `axisId` prop to specify which axis the By default, it targets the first defined axis. ::: -{{"demo": "ReferenceLineBasic.js"}} +{{"component": "file://./demos/reference-line-basic/index.ts"}} ### Label You can add a `label` prop to display text alongside the reference line. Position it with the `labelAlign` prop, which accepts `'start'`, `'middle'` (default), and `'end'`. -{{"demo": "ReferenceLineLabel.js"}} +{{"component": "file://./demos/reference-line-label/index.ts"}} ### Styling @@ -55,7 +55,7 @@ You can style the `ChartsReferenceLine` with two ways Using the `labelStyle` is necessary if you your label has multiple lines. This property is used to measure the text size and correctly space the multiple lines. -{{"demo": "ReferenceLineStyled.js"}} +{{"component": "file://./demos/reference-line-styled/index.ts"}} ## Reference area @@ -69,10 +69,10 @@ This allows for example adding some labels to the area. Notice the usage of composition to be able to put the reference area below the plots. -{{"demo": "ReferenceAreaBasic.js"}} +{{"component": "file://./demos/reference-area-basic/index.ts"}} ## Reference point With the same logic as the previous section, you can highlight specific points in the chart. -{{"demo": "ReferencePointBasic.js"}} +{{"component": "file://./demos/reference-point-basic/index.ts"}} diff --git a/docs/data/charts/sankey/CustomNodeLabelPlot.tsx b/docs/data/charts/sankey/CustomNodeLabelPlot.tsx index a134aed1c9840..2acae6fd0dbac 100644 --- a/docs/data/charts/sankey/CustomNodeLabelPlot.tsx +++ b/docs/data/charts/sankey/CustomNodeLabelPlot.tsx @@ -1,13 +1,13 @@ 'use client'; import * as React from 'react'; import { useTheme } from '@mui/material/styles'; +import type { SankeyLayoutNode } from '@mui/x-charts-pro/SankeyChart'; import { - SankeyLayoutNode, useSankeyLayout, useSankeyNodeHighlightState, useSankeySeries, } from '@mui/x-charts-pro/SankeyChart'; -import { SeriesId } from '@mui/x-charts-pro/models'; +import type { SeriesId } from '@mui/x-charts-pro/models'; export function CustomNodeLabelPlot() { const sankeySeries = useSankeySeries()[0]; diff --git a/docs/data/charts/sankey/SankeyBasicDataStructure.js b/docs/data/charts/sankey/SankeyBasicDataStructure.js deleted file mode 100644 index 0b84465875bc0..0000000000000 --- a/docs/data/charts/sankey/SankeyBasicDataStructure.js +++ /dev/null @@ -1,19 +0,0 @@ -import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; - -export default function SankeyBasicDataStructure() { - return ( - - ); -} diff --git a/docs/data/charts/sankey/SankeyBasicDataStructure.tsx.preview b/docs/data/charts/sankey/SankeyBasicDataStructure.tsx.preview deleted file mode 100644 index 4cf06459764ef..0000000000000 --- a/docs/data/charts/sankey/SankeyBasicDataStructure.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/sankey/SankeyClick.js b/docs/data/charts/sankey/SankeyClick.js deleted file mode 100644 index c64d7e470e5fd..0000000000000 --- a/docs/data/charts/sankey/SankeyClick.js +++ /dev/null @@ -1,111 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; -import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; -import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -const getCircularReplacer = () => { - const seen = new WeakSet(); - return (key, value) => { - if (key === 'source' || key === 'target') { - return '(Circular Node)'; - } - if (key === 'sourceLinks' || key === 'targetLinks') { - return '[...(Circular Links)]'; - } - - if (typeof value === 'object' && value !== null) { - if (seen.has(value)) { - return undefined; - } - seen.add(value); - } - return value; - }; -}; - -const sankeyChartsParams = { - series: { - data: { - nodes: [ - { id: 'Coal', label: 'Coal' }, - { id: 'Natural Gas', label: 'Natural Gas' }, - { id: 'Nuclear', label: 'Nuclear' }, - { id: 'Hydro', label: 'Hydro' }, - { id: 'Wind', label: 'Wind' }, - { id: 'Solar', label: 'Solar' }, - { id: 'Electricity', label: 'Electricity' }, - { id: 'Residential', label: 'Residential' }, - { id: 'Commercial', label: 'Commercial' }, - { id: 'Industrial', label: 'Industrial' }, - ], - links: [ - { source: 'Coal', target: 'Electricity', value: 30 }, - { source: 'Natural Gas', target: 'Electricity', value: 40 }, - { source: 'Nuclear', target: 'Electricity', value: 20 }, - { source: 'Hydro', target: 'Electricity', value: 10 }, - { source: 'Wind', target: 'Electricity', value: 15 }, - { source: 'Solar', target: 'Electricity', value: 8 }, - { source: 'Electricity', target: 'Residential', value: 45 }, - { source: 'Electricity', target: 'Commercial', value: 35 }, - { source: 'Electricity', target: 'Industrial', value: 43 }, - ], - }, - highlightScope: { - highlight: 'item', - }, - }, - height: 400, - margin: { left: 20, right: 120 }, -}; - -export default function SankeyClick() { - const [itemData, setItemData] = React.useState(); - - return ( - - - setItemData(d)} - onLinkClick={(event, d) => setItemData(d)} - /> - - - - - Click on the chart - { - setItemData(undefined); - }} - > - - - - - - - ); -} diff --git a/docs/data/charts/sankey/SankeyControlledHighlight.js b/docs/data/charts/sankey/SankeyControlledHighlight.js deleted file mode 100644 index 62496c6a0b45f..0000000000000 --- a/docs/data/charts/sankey/SankeyControlledHighlight.js +++ /dev/null @@ -1,118 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; -import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; - -export default function SankeyControlledHighlight() { - const [highlightedItem, setHighlightedItem] = React.useState({ - seriesId: 'series-id', - subType: 'node', - nodeId: 'A', - }); - - const handleHighlightChange = (item) => { - setHighlightedItem(item); - }; - - const handleToggleChange = (_event, newValue) => { - if (newValue === null) { - setHighlightedItem(null); - return; - } - - if (newValue.startsWith('node-')) { - const nodeId = newValue.replace('node-', ''); - setHighlightedItem({ - seriesId: 'series-id', - subType: 'node', - nodeId, - }); - } else if (newValue.startsWith('link-')) { - const [source, target] = newValue.replace('link-', '').split('-'); - setHighlightedItem({ - seriesId: 'series-id', - subType: 'link', - sourceId: source, - targetId: target, - }); - } - }; - - const getCurrentValue = () => { - if (!highlightedItem) { - return null; - } - if (highlightedItem.subType === 'node') { - return `node-${highlightedItem.nodeId}`; - } - return `link-${highlightedItem.sourceId}-${highlightedItem.targetId}`; - }; - - return ( - - - Controlled Highlighting - - - Node A - - - Node C - - - Node E - - - Link A→C - - - Link B→D - - - - - - - ); -} diff --git a/docs/data/charts/sankey/SankeyCurveCorrection.js b/docs/data/charts/sankey/SankeyCurveCorrection.js deleted file mode 100644 index f1a57638d6cca..0000000000000 --- a/docs/data/charts/sankey/SankeyCurveCorrection.js +++ /dev/null @@ -1,64 +0,0 @@ -import * as React from 'react'; -import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; -import Typography from '@mui/material/Typography'; -import Slider from '@mui/material/Slider'; -import Box from '@mui/material/Box'; - -const data = { - links: [ - { source: 'C', target: 'Y', value: 10 }, - { source: 'A', target: 'X', value: 25 }, - { source: 'B', target: 'X', value: 10 }, - { source: 'X', target: 'Z', value: 25 }, - { source: 'Y', target: 'Z', value: 8 }, - { source: 'B', target: 'Y', value: 5 }, - ], -}; - -export default function SankeyCurveCorrection() { - const [curveCorrection, setCurveCorrection] = React.useState(10); - - return ( - - - - - ); -} - -function SliderHandle(props) { - return ( - - - Curve Correction: {props.curveCorrection} - - props.setCurveCorrection(value)} - min={-20} - max={20} - step={1} - sx={{ mb: 3 }} - marks={[ - { value: -20, label: '-20' }, - { value: -10, label: '-10' }, - { value: 0, label: '0' }, - { value: 5, label: '5' }, - { value: 10, label: '10 (default)' }, - { value: 20, label: '20' }, - ]} - /> - - ); -} diff --git a/docs/data/charts/sankey/SankeyCurveCorrection.tsx.preview b/docs/data/charts/sankey/SankeyCurveCorrection.tsx.preview deleted file mode 100644 index 1f2a5d6be2daf..0000000000000 --- a/docs/data/charts/sankey/SankeyCurveCorrection.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/charts/sankey/SankeyDetailedDataStructure.js b/docs/data/charts/sankey/SankeyDetailedDataStructure.js deleted file mode 100644 index c63b93506b9b0..0000000000000 --- a/docs/data/charts/sankey/SankeyDetailedDataStructure.js +++ /dev/null @@ -1,25 +0,0 @@ -import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; - -export default function SankeyDetailedDataStructure() { - return ( - - ); -} diff --git a/docs/data/charts/sankey/SankeyDetailedDataStructure.tsx.preview b/docs/data/charts/sankey/SankeyDetailedDataStructure.tsx.preview deleted file mode 100644 index 3f05b764dea10..0000000000000 --- a/docs/data/charts/sankey/SankeyDetailedDataStructure.tsx.preview +++ /dev/null @@ -1,19 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/sankey/SankeyHighlighting.js b/docs/data/charts/sankey/SankeyHighlighting.js deleted file mode 100644 index 2df3c371d03c4..0000000000000 --- a/docs/data/charts/sankey/SankeyHighlighting.js +++ /dev/null @@ -1,109 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; - -export default function SankeyHighlighting() { - const [nodeHighlight, setNodeHighlight] = React.useState('links'); - const [nodeFade, setNodeFade] = React.useState('global'); - const [linkHighlight, setLinkHighlight] = React.useState('links'); - const [linkFade, setLinkFade] = React.useState('global'); - - return ( - - - - - - - setNodeHighlight(event.target.value)} - fullWidth - > - nodes - links - incoming - outgoing - none - - setNodeFade(event.target.value)} - fullWidth - > - global - none - - - - setLinkHighlight(event.target.value)} - fullWidth - > - links - nodes - source - target - none - - setLinkFade(event.target.value)} - fullWidth - > - global - none - - - - - ); -} diff --git a/docs/data/charts/sankey/SankeyIterations.js b/docs/data/charts/sankey/SankeyIterations.js deleted file mode 100644 index f96a349368cae..0000000000000 --- a/docs/data/charts/sankey/SankeyIterations.js +++ /dev/null @@ -1,69 +0,0 @@ -import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; - -const data = { - nodes: [ - { id: 'A', label: 'Energy' }, - { id: 'B', label: 'Coal' }, - { id: 'C', label: 'Gas' }, - { id: 'D', label: 'Oil' }, - { id: 'E', label: 'Electricity' }, - { id: 'F', label: 'Heat' }, - { id: 'G', label: 'Residential' }, - { id: 'H', label: 'Commercial' }, - { id: 'I', label: 'Industrial' }, - ], - links: [ - { source: 'A', target: 'B', value: 30 }, - { source: 'A', target: 'C', value: 25 }, - { source: 'A', target: 'D', value: 20 }, - { source: 'B', target: 'E', value: 25 }, - { source: 'C', target: 'E', value: 20 }, - { source: 'C', target: 'F', value: 5 }, - { source: 'D', target: 'F', value: 18 }, - { source: 'E', target: 'G', value: 15 }, - { source: 'E', target: 'H', value: 20 }, - { source: 'E', target: 'I', value: 10 }, - { source: 'F', target: 'G', value: 8 }, - { source: 'F', target: 'H', value: 10 }, - { source: 'F', target: 'I', value: 5 }, - ], -}; - -export default function SankeyIterations() { - return ( - ( - - )} - getCode={({ props }) => { - return `import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; - -`; - }} - /> - ); -} diff --git a/docs/data/charts/sankey/SankeyLinkKeywordColors.js b/docs/data/charts/sankey/SankeyLinkKeywordColors.js deleted file mode 100644 index a784bdace6183..0000000000000 --- a/docs/data/charts/sankey/SankeyLinkKeywordColors.js +++ /dev/null @@ -1,69 +0,0 @@ -import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; - -const data = { - nodes: [ - { id: 'Input', label: 'Input' }, - { id: 'ProcessA', label: 'Process A' }, - { id: 'ProcessB', label: 'Process B' }, - { id: 'Output', label: 'Output' }, - ], - links: [ - { source: 'Input', target: 'ProcessA', value: 30 }, - { source: 'Input', target: 'ProcessB', value: 20 }, - { source: 'ProcessA', target: 'Output', value: 25 }, - { source: 'ProcessB', target: 'Output', value: 15 }, - ], -}; - -export default function SankeyLinkKeywordColors() { - return ( - { - const linkColor = - props.linkColorMode === 'default' ? undefined : props.linkColorMode; - - return ( - - ); - }} - getCode={({ props }) => { - const linkColor = - props.linkColorMode === 'default' ? undefined : props.linkColorMode; - - return `import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; - -`; - }} - /> - ); -} diff --git a/docs/data/charts/sankey/SankeyLinkSorting.js b/docs/data/charts/sankey/SankeyLinkSorting.js deleted file mode 100644 index 024db55882f23..0000000000000 --- a/docs/data/charts/sankey/SankeyLinkSorting.js +++ /dev/null @@ -1,72 +0,0 @@ -import Stack from '@mui/material/Stack'; -import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; -import Typography from '@mui/material/Typography'; - -const data = { - links: [ - { source: 'C', target: 'Y', value: 10 }, - { source: 'B', target: 'X', value: 10 }, - { source: 'B', target: 'Y', value: 5 }, - { source: 'X', target: 'Z', value: 25 }, - { source: 'Y', target: 'Z', value: 8 }, - { source: 'A', target: 'X', value: 25 }, - ], -}; - -// Sort links by value (descending) -const linkSortFunction = (a, b) => b.value - a.value; - -export default function SankeyLinkSorting() { - return ( - div': { flex: '1 0 0' } }} - > -
- - auto (default) - - -
- -
- - fixed - - -
- -
- - Custom Function - - -
- - ); -} diff --git a/docs/data/charts/sankey/SankeyLinkStyling.js b/docs/data/charts/sankey/SankeyLinkStyling.js deleted file mode 100644 index 05972ab4f415d..0000000000000 --- a/docs/data/charts/sankey/SankeyLinkStyling.js +++ /dev/null @@ -1,75 +0,0 @@ -import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; - -const data = { - nodes: [ - { id: 'A', label: 'Source A' }, - { id: 'B', label: 'Process B' }, - { id: 'C', label: 'Process C' }, - { id: 'D', label: 'Output D' }, - ], - links: [ - { source: 'A', target: 'B', value: 15 }, - { source: 'A', target: 'C', value: 10 }, - { source: 'B', target: 'D', value: 12 }, - { source: 'C', target: 'D', value: 8 }, - ], -}; - -export default function SankeyLinkStyling() { - return ( - ( - - )} - getCode={({ props }) => { - return `import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; - -`; - }} - /> - ); -} diff --git a/docs/data/charts/sankey/SankeyNodeAlignment.js b/docs/data/charts/sankey/SankeyNodeAlignment.js deleted file mode 100644 index 4d4561ced50c0..0000000000000 --- a/docs/data/charts/sankey/SankeyNodeAlignment.js +++ /dev/null @@ -1,88 +0,0 @@ -import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; -import { Stack } from '@mui/system'; -import Typography from '@mui/material/Typography'; - -export default function SankeyNodeAlignment() { - return ( - - - - Left - - - - Right - - - - - - Justify - - - - Center - - - - - ); -} - -const data = { - nodes: [], - links: [ - { source: 'A', target: 'B', value: 2 }, - { source: 'B', target: 'D', value: 4 }, - { source: 'E', target: 'D', value: 4 }, - { source: 'D', target: 'F', value: 1 }, - { source: 'D', target: 'G', value: 7 }, - { source: 'G', target: 'H', value: 2 }, - { source: 'G', target: 'I', value: 5 }, - { source: 'I', target: 'J', value: 3 }, - { source: 'I', target: 'K', value: 2 }, - ], -}; - -// Sort nodes alphabetically by label -const nodeSortFunction = (a, b) => { - const labelA = a.label || a.id; - const labelB = b.label || b.id; - return labelA.localeCompare(labelB); -}; diff --git a/docs/data/charts/sankey/SankeyNodeSorting.js b/docs/data/charts/sankey/SankeyNodeSorting.js deleted file mode 100644 index 178201e76260b..0000000000000 --- a/docs/data/charts/sankey/SankeyNodeSorting.js +++ /dev/null @@ -1,84 +0,0 @@ -import Stack from '@mui/material/Stack'; -import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; -import Typography from '@mui/material/Typography'; - -const data = { - nodes: [ - { id: 'C' }, - { id: 'B' }, - { id: 'A' }, - { id: 'X' }, - { id: 'Y' }, - { id: 'Z' }, - ], - links: [ - { source: 'C', target: 'Y', value: 10 }, - { source: 'A', target: 'X', value: 25 }, - { source: 'B', target: 'X', value: 10 }, - { source: 'X', target: 'Z', value: 25 }, - { source: 'Y', target: 'Z', value: 8 }, - { source: 'B', target: 'Y', value: 5 }, - ], -}; - -// Sort nodes alphabetically by label -const nodeSortFunction = (a, b) => { - const labelA = a.label || a.id; - const labelB = b.label || b.id; - return labelB.localeCompare(labelA); -}; - -export default function SankeyNodeSorting() { - return ( - div': { flex: '1 0 0' } }} - > -
- - auto (default) - - -
- -
- - fixed - - -
- -
- - Custom Function - - -
- - ); -} diff --git a/docs/data/charts/sankey/SankeyNodeStyling.js b/docs/data/charts/sankey/SankeyNodeStyling.js deleted file mode 100644 index a8b4b6c6f1fd4..0000000000000 --- a/docs/data/charts/sankey/SankeyNodeStyling.js +++ /dev/null @@ -1,79 +0,0 @@ -import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; - -const data = { - nodes: [ - { id: 'A', label: 'Source A' }, - { id: 'B', label: 'Process B' }, - { id: 'C', label: 'Process C' }, - { id: 'D', label: 'Output D' }, - ], - links: [ - { source: 'A', target: 'B', value: 15 }, - { source: 'A', target: 'C', value: 10 }, - { source: 'B', target: 'D', value: 12 }, - { source: 'C', target: 'D', value: 8 }, - ], -}; - -export default function SankeyNodeStyling() { - return ( - ( - - )} - getCode={({ props }) => { - return `import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; - -`; - }} - /> - ); -} diff --git a/docs/data/charts/sankey/SankeyOverview.js b/docs/data/charts/sankey/SankeyOverview.js deleted file mode 100644 index 6fab5c950b408..0000000000000 --- a/docs/data/charts/sankey/SankeyOverview.js +++ /dev/null @@ -1,144 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import useMediaQuery from '@mui/material/useMediaQuery'; -import { useTheme } from '@mui/material/styles'; -import { - SankeyLinkPlot, - SankeyNodePlot, - SankeyTooltip, - SankeyDataProvider, -} from '@mui/x-charts-pro/SankeyChart'; -import { ChartsWrapper } from '@mui/x-charts-pro/ChartsWrapper'; -import { ChartsSurface } from '@mui/x-charts-pro/ChartsSurface'; -import { CustomNodeLabelPlot } from './CustomNodeLabelPlot'; - -const data = { - nodes: [ - // Sub-segment - { id: 'Server Products', color: '#595b63' }, - { id: 'Enterprise Services', color: '#595b63' }, - { id: 'M365 Commercial', color: '#595b63' }, - { id: 'M365 Consumer', color: '#595b63' }, - { id: 'LinkedIn', color: '#595b63' }, - { id: 'Dynamics', color: '#595b63' }, - { id: 'Gaming', color: '#595b63' }, - { id: 'Windows & Devices', color: '#595b63' }, - { id: 'Search & News Ads', color: '#595b63' }, - // Main revenue segments - { id: 'Intelligent Cloud', label: 'Cloud', color: '#595b63' }, - { id: 'Productivity', color: '#595b63' }, - { id: 'Personal Computing', label: 'Personal Computing', color: '#595b63' }, - { id: 'Revenue', label: 'Total Revenue', color: '#595b63' }, - // Gross Profit and breakdown - { id: 'Gross Profit', label: 'Gross Profit', color: '#44CE8D' }, - { id: 'Operating Profit', label: 'Operating Profit', color: '#44CE8D' }, - { id: 'Net Profit', label: 'Net Profit', color: '#44CE8D' }, - { id: 'Tax', label: 'Income Tax', color: '#F35865' }, - { id: 'Other Loss', label: 'Other Loss', color: '#F35865' }, - { id: 'Operating Expenses', label: 'Operating Expenses', color: '#F35865' }, - { id: 'R&D', label: 'R&D', color: '#F35865' }, - { id: 'S&M', label: 'Sales & Marketing', color: '#F35865' }, - { id: 'G&A', label: 'General & Administration', color: '#F35865' }, - // Cost of Revenue and breakdown - { id: 'Cost of Revenue', label: 'Cost of Revenue', color: '#F35865' }, - { id: 'Product Costs', label: 'Product Costs', color: '#F35865' }, - { id: 'Service Costs', label: 'Service Costs', color: '#F35865' }, - ], - links: [ - // Revenue-in links - { source: 'Server Products', target: 'Intelligent Cloud', value: 98.4 }, - { source: 'Enterprise Services', target: 'Intelligent Cloud', value: 7.7 }, - { source: 'M365 Commercial', target: 'Productivity', value: 87.7 }, - { source: 'M365 Consumer', target: 'Productivity', value: 7.4 }, - { source: 'LinkedIn', target: 'Productivity', value: 17.8 }, - { source: 'Dynamics', target: 'Productivity', value: 7.8 }, - { source: 'Gaming', target: 'Personal Computing', value: 23.4 }, - { source: 'Windows & Devices', target: 'Personal Computing', value: 17.3 }, - { source: 'Search & News Ads', target: 'Personal Computing', value: 13.8 }, - { source: 'Intelligent Cloud', target: 'Revenue', value: 106.2 }, - { source: 'Productivity', target: 'Revenue', value: 120.8 }, - { source: 'Personal Computing', target: 'Revenue', value: 54.6 }, - // Revenue-out links - { source: 'Revenue', target: 'Cost of Revenue', value: 87.8 }, - { source: 'Revenue', target: 'Gross Profit', value: 193.8 }, - { source: 'Gross Profit', target: 'Operating Profit', value: 128.5 }, - { source: 'Gross Profit', target: 'Operating Expenses', value: 65.3 }, - { source: 'Cost of Revenue', target: 'Product Costs', value: 13.5 }, - { source: 'Cost of Revenue', target: 'Service Costs', value: 74.3 }, - { source: 'Operating Profit', target: 'Tax', value: 21.7 }, - { source: 'Operating Profit', target: 'Other Loss', value: 4.9 }, - { source: 'Operating Profit', target: 'Net Profit', value: 101.8 }, - { source: 'Operating Expenses', target: 'R&D', value: 32.4 }, - { source: 'Operating Expenses', target: 'S&M', value: 25.6 }, - { source: 'Operating Expenses', target: 'G&A', value: 7.2 }, - ], -}; - -const valueFormatter = (value, context) => { - if (context.type === 'link') { - return `${value}B`; - } - // The value of a node is the sum of its incoming links - return `${value}B total`; -}; - -export default function SankeyOverview() { - const theme = useTheme(); - const isDesktop = useMediaQuery(theme.breakpoints.up('sm')); - - return ( - - - Microsoft FY 2025 Income Statement - - - Flow from Revenue to Net Income (in Billions USD) - - - - - - - - - - - {} - - - - - ); -} diff --git a/docs/data/charts/sankey/SankeyValueFormatter.js b/docs/data/charts/sankey/SankeyValueFormatter.js deleted file mode 100644 index d3dde01262836..0000000000000 --- a/docs/data/charts/sankey/SankeyValueFormatter.js +++ /dev/null @@ -1,53 +0,0 @@ -import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; - -const data = { - nodes: [ - { id: 'Coal', label: 'Coal' }, - { id: 'Natural Gas', label: 'Natural Gas' }, - { id: 'Nuclear', label: 'Nuclear' }, - { id: 'Hydro', label: 'Hydro' }, - { id: 'Wind', label: 'Wind' }, - { id: 'Solar', label: 'Solar' }, - { id: 'Electricity', label: 'Electricity' }, - { id: 'Residential', label: 'Residential' }, - { id: 'Commercial', label: 'Commercial' }, - { id: 'Industrial', label: 'Industrial' }, - ], - links: [ - { source: 'Coal', target: 'Electricity', value: 300 }, - { source: 'Natural Gas', target: 'Electricity', value: 400 }, - { source: 'Nuclear', target: 'Electricity', value: 200 }, - { source: 'Hydro', target: 'Electricity', value: 100 }, - { source: 'Wind', target: 'Electricity', value: 150 }, - { source: 'Solar', target: 'Electricity', value: 80 }, - { source: 'Electricity', target: 'Residential', value: 450 }, - { source: 'Electricity', target: 'Commercial', value: 350 }, - { source: 'Electricity', target: 'Industrial', value: 430 }, - ], -}; - -export default function SankeyValueFormatter() { - return ( - { - // Format the value as energy units - const formatted = - value >= 1000 ? `${(value / 1000).toFixed(1)} GWh` : `${value} MWh`; - - // You can customize formatting based on context type - if (context.type === 'link') { - return `${formatted}`; - } - - return `${formatted} total`; - }, - linkOptions: { - showValues: true, - }, - }} - /> - ); -} diff --git a/docs/data/charts/sankey/SankeyBasicDataStructure.tsx b/docs/data/charts/sankey/demos/sankey-basic-data-structure/SankeyBasicDataStructure.tsx similarity index 90% rename from docs/data/charts/sankey/SankeyBasicDataStructure.tsx rename to docs/data/charts/sankey/demos/sankey-basic-data-structure/SankeyBasicDataStructure.tsx index 0b84465875bc0..b26391c5f4127 100644 --- a/docs/data/charts/sankey/SankeyBasicDataStructure.tsx +++ b/docs/data/charts/sankey/demos/sankey-basic-data-structure/SankeyBasicDataStructure.tsx @@ -2,6 +2,7 @@ import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; export default function SankeyBasicDataStructure() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/sankey/demos/sankey-basic-data-structure/client.ts b/docs/data/charts/sankey/demos/sankey-basic-data-structure/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-basic-data-structure/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sankey/demos/sankey-basic-data-structure/index.ts b/docs/data/charts/sankey/demos/sankey-basic-data-structure/index.ts new file mode 100644 index 0000000000000..91807546e772b --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-basic-data-structure/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SankeyBasicDataStructure from './SankeyBasicDataStructure'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SankeyBasicDataStructure, { ClientProvider }); diff --git a/docs/data/charts/sankey/SankeyClick.tsx b/docs/data/charts/sankey/demos/sankey-click/SankeyClick.tsx similarity index 94% rename from docs/data/charts/sankey/SankeyClick.tsx rename to docs/data/charts/sankey/demos/sankey-click/SankeyClick.tsx index 32d6bb11c0f3a..d15733aa20684 100644 --- a/docs/data/charts/sankey/SankeyClick.tsx +++ b/docs/data/charts/sankey/demos/sankey-click/SankeyClick.tsx @@ -4,7 +4,8 @@ import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import IconButton from '@mui/material/IconButton'; import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; -import { SankeyChart, SankeyItemIdentifier } from '@mui/x-charts-pro/SankeyChart'; +import type { SankeyItemIdentifier } from '@mui/x-charts-pro/SankeyChart'; +import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; const getCircularReplacer = () => { @@ -63,6 +64,7 @@ const sankeyChartsParams = { } as const; export default function SankeyClick() { + // @focus-start @padding 1 const [itemData, setItemData] = React.useState(); return ( @@ -108,4 +110,5 @@ ${itemData ? JSON.stringify(itemData, getCircularReplacer(), 2) : '// The data w ); + // @focus-end } diff --git a/docs/data/charts/sankey/demos/sankey-click/client.ts b/docs/data/charts/sankey/demos/sankey-click/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-click/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sankey/demos/sankey-click/index.ts b/docs/data/charts/sankey/demos/sankey-click/index.ts new file mode 100644 index 0000000000000..29c6e8d12e05d --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-click/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SankeyClick from './SankeyClick'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SankeyClick, { ClientProvider }); diff --git a/docs/data/charts/sankey/SankeyControlledHighlight.tsx b/docs/data/charts/sankey/demos/sankey-controlled-highlight/SankeyControlledHighlight.tsx similarity index 96% rename from docs/data/charts/sankey/SankeyControlledHighlight.tsx rename to docs/data/charts/sankey/demos/sankey-controlled-highlight/SankeyControlledHighlight.tsx index fa3554e981542..d2a279ebf213f 100644 --- a/docs/data/charts/sankey/SankeyControlledHighlight.tsx +++ b/docs/data/charts/sankey/demos/sankey-controlled-highlight/SankeyControlledHighlight.tsx @@ -5,9 +5,10 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import FormControl from '@mui/material/FormControl'; import FormLabel from '@mui/material/FormLabel'; import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; -import { HighlightItemIdentifier } from '@mui/x-charts-pro/models'; +import type { HighlightItemIdentifier } from '@mui/x-charts-pro/models'; export default function SankeyControlledHighlight() { + // @focus-start @padding 1 type HighlightItem = HighlightItemIdentifier<'sankey'> | null; const [highlightedItem, setHighlightedItem] = React.useState({ seriesId: 'series-id', @@ -120,4 +121,5 @@ export default function SankeyControlledHighlight() { /> ); + // @focus-end } diff --git a/docs/data/charts/sankey/demos/sankey-controlled-highlight/client.ts b/docs/data/charts/sankey/demos/sankey-controlled-highlight/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-controlled-highlight/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sankey/demos/sankey-controlled-highlight/index.ts b/docs/data/charts/sankey/demos/sankey-controlled-highlight/index.ts new file mode 100644 index 0000000000000..5c76f420c6ad9 --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-controlled-highlight/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SankeyControlledHighlight from './SankeyControlledHighlight'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SankeyControlledHighlight, { ClientProvider }); diff --git a/docs/data/charts/sankey/SankeyCurveCorrection.tsx b/docs/data/charts/sankey/demos/sankey-curve-correction/SankeyCurveCorrection.tsx similarity index 97% rename from docs/data/charts/sankey/SankeyCurveCorrection.tsx rename to docs/data/charts/sankey/demos/sankey-curve-correction/SankeyCurveCorrection.tsx index 4d77408c293c2..2710fe7be78c0 100644 --- a/docs/data/charts/sankey/SankeyCurveCorrection.tsx +++ b/docs/data/charts/sankey/demos/sankey-curve-correction/SankeyCurveCorrection.tsx @@ -16,6 +16,7 @@ const data = { }; export default function SankeyCurveCorrection() { + // @focus-start @padding 1 const [curveCorrection, setCurveCorrection] = React.useState(10); return ( @@ -35,6 +36,7 @@ export default function SankeyCurveCorrection() { /> ); + // @focus-end } function SliderHandle(props: { diff --git a/docs/data/charts/sankey/demos/sankey-curve-correction/client.ts b/docs/data/charts/sankey/demos/sankey-curve-correction/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-curve-correction/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sankey/demos/sankey-curve-correction/index.ts b/docs/data/charts/sankey/demos/sankey-curve-correction/index.ts new file mode 100644 index 0000000000000..bc02d1bb50036 --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-curve-correction/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SankeyCurveCorrection from './SankeyCurveCorrection'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SankeyCurveCorrection, { ClientProvider }); diff --git a/docs/data/charts/sankey/SankeyDetailedDataStructure.tsx b/docs/data/charts/sankey/demos/sankey-detailed-data-structure/SankeyDetailedDataStructure.tsx similarity index 94% rename from docs/data/charts/sankey/SankeyDetailedDataStructure.tsx rename to docs/data/charts/sankey/demos/sankey-detailed-data-structure/SankeyDetailedDataStructure.tsx index c63b93506b9b0..e2f85dbb4e136 100644 --- a/docs/data/charts/sankey/SankeyDetailedDataStructure.tsx +++ b/docs/data/charts/sankey/demos/sankey-detailed-data-structure/SankeyDetailedDataStructure.tsx @@ -2,6 +2,7 @@ import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; export default function SankeyDetailedDataStructure() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/sankey/demos/sankey-detailed-data-structure/client.ts b/docs/data/charts/sankey/demos/sankey-detailed-data-structure/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-detailed-data-structure/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sankey/demos/sankey-detailed-data-structure/index.ts b/docs/data/charts/sankey/demos/sankey-detailed-data-structure/index.ts new file mode 100644 index 0000000000000..663b12432ff1f --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-detailed-data-structure/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SankeyDetailedDataStructure from './SankeyDetailedDataStructure'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SankeyDetailedDataStructure, { ClientProvider }); diff --git a/docs/data/charts/sankey/SankeyHighlighting.tsx b/docs/data/charts/sankey/demos/sankey-highlighting/SankeyHighlighting.tsx similarity index 98% rename from docs/data/charts/sankey/SankeyHighlighting.tsx rename to docs/data/charts/sankey/demos/sankey-highlighting/SankeyHighlighting.tsx index 64f83d97e7732..4a5dfc7339b09 100644 --- a/docs/data/charts/sankey/SankeyHighlighting.tsx +++ b/docs/data/charts/sankey/demos/sankey-highlighting/SankeyHighlighting.tsx @@ -6,6 +6,7 @@ import MenuItem from '@mui/material/MenuItem'; import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; export default function SankeyHighlighting() { + // @focus-start @padding 1 const [nodeHighlight, setNodeHighlight] = React.useState< 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none' >('links'); @@ -124,4 +125,5 @@ export default function SankeyHighlighting() { ); + // @focus-end } diff --git a/docs/data/charts/sankey/demos/sankey-highlighting/client.ts b/docs/data/charts/sankey/demos/sankey-highlighting/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-highlighting/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sankey/demos/sankey-highlighting/index.ts b/docs/data/charts/sankey/demos/sankey-highlighting/index.ts new file mode 100644 index 0000000000000..4819f48a89b08 --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-highlighting/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SankeyHighlighting from './SankeyHighlighting'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SankeyHighlighting, { ClientProvider }); diff --git a/docs/data/charts/sankey/SankeyIterations.tsx b/docs/data/charts/sankey/demos/sankey-iterations/SankeyIterations.tsx similarity index 97% rename from docs/data/charts/sankey/SankeyIterations.tsx rename to docs/data/charts/sankey/demos/sankey-iterations/SankeyIterations.tsx index f96a349368cae..06b4b84ec0e83 100644 --- a/docs/data/charts/sankey/SankeyIterations.tsx +++ b/docs/data/charts/sankey/demos/sankey-iterations/SankeyIterations.tsx @@ -32,6 +32,7 @@ const data = { export default function SankeyIterations() { return ( + // @focus-start @padding 2 `; }} /> + // @focus-end ); } diff --git a/docs/data/charts/sankey/demos/sankey-iterations/client.ts b/docs/data/charts/sankey/demos/sankey-iterations/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-iterations/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sankey/demos/sankey-iterations/index.ts b/docs/data/charts/sankey/demos/sankey-iterations/index.ts new file mode 100644 index 0000000000000..2c27363c7f6ad --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-iterations/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SankeyIterations from './SankeyIterations'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SankeyIterations, { ClientProvider }); diff --git a/docs/data/charts/sankey/SankeyLinkKeywordColors.tsx b/docs/data/charts/sankey/demos/sankey-link-keyword-colors/SankeyLinkKeywordColors.tsx similarity index 97% rename from docs/data/charts/sankey/SankeyLinkKeywordColors.tsx rename to docs/data/charts/sankey/demos/sankey-link-keyword-colors/SankeyLinkKeywordColors.tsx index a784bdace6183..1b3a3d6b7bf6d 100644 --- a/docs/data/charts/sankey/SankeyLinkKeywordColors.tsx +++ b/docs/data/charts/sankey/demos/sankey-link-keyword-colors/SankeyLinkKeywordColors.tsx @@ -18,6 +18,7 @@ const data = { export default function SankeyLinkKeywordColors() { return ( + // @focus-start @padding 2 `; }} /> + // @focus-end ); } diff --git a/docs/data/charts/sankey/demos/sankey-link-keyword-colors/client.ts b/docs/data/charts/sankey/demos/sankey-link-keyword-colors/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-link-keyword-colors/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sankey/demos/sankey-link-keyword-colors/index.ts b/docs/data/charts/sankey/demos/sankey-link-keyword-colors/index.ts new file mode 100644 index 0000000000000..d8d3eb4494e75 --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-link-keyword-colors/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SankeyLinkKeywordColors from './SankeyLinkKeywordColors'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SankeyLinkKeywordColors, { ClientProvider }); diff --git a/docs/data/charts/sankey/SankeyLinkSorting.tsx b/docs/data/charts/sankey/demos/sankey-link-sorting/SankeyLinkSorting.tsx similarity index 97% rename from docs/data/charts/sankey/SankeyLinkSorting.tsx rename to docs/data/charts/sankey/demos/sankey-link-sorting/SankeyLinkSorting.tsx index 12a3d7a133fa5..fd77023a747c1 100644 --- a/docs/data/charts/sankey/SankeyLinkSorting.tsx +++ b/docs/data/charts/sankey/demos/sankey-link-sorting/SankeyLinkSorting.tsx @@ -23,6 +23,7 @@ export default function SankeyLinkSorting() { spacing={3} sx={{ width: '100%', '&>div': { flex: '1 0 0' } }} > + {/* @focus-start */}
auto (default) @@ -67,6 +68,7 @@ export default function SankeyLinkSorting() { }} />
+ {/* @focus-end */} ); } diff --git a/docs/data/charts/sankey/demos/sankey-link-sorting/client.ts b/docs/data/charts/sankey/demos/sankey-link-sorting/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-link-sorting/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sankey/demos/sankey-link-sorting/index.ts b/docs/data/charts/sankey/demos/sankey-link-sorting/index.ts new file mode 100644 index 0000000000000..99676d70c7e38 --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-link-sorting/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SankeyLinkSorting from './SankeyLinkSorting'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SankeyLinkSorting, { ClientProvider }); diff --git a/docs/data/charts/sankey/SankeyLinkStyling.tsx b/docs/data/charts/sankey/demos/sankey-link-styling/SankeyLinkStyling.tsx similarity index 97% rename from docs/data/charts/sankey/SankeyLinkStyling.tsx rename to docs/data/charts/sankey/demos/sankey-link-styling/SankeyLinkStyling.tsx index 05972ab4f415d..a21d9df010dce 100644 --- a/docs/data/charts/sankey/SankeyLinkStyling.tsx +++ b/docs/data/charts/sankey/demos/sankey-link-styling/SankeyLinkStyling.tsx @@ -18,6 +18,7 @@ const data = { export default function SankeyLinkStyling() { return ( + // @focus-start @padding 2 `; }} /> + // @focus-end ); } diff --git a/docs/data/charts/sankey/demos/sankey-link-styling/client.ts b/docs/data/charts/sankey/demos/sankey-link-styling/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-link-styling/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sankey/demos/sankey-link-styling/index.ts b/docs/data/charts/sankey/demos/sankey-link-styling/index.ts new file mode 100644 index 0000000000000..70e51134a4c4e --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-link-styling/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SankeyLinkStyling from './SankeyLinkStyling'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SankeyLinkStyling, { ClientProvider }); diff --git a/docs/data/charts/sankey/SankeyNodeAlignment.tsx b/docs/data/charts/sankey/demos/sankey-node-alignment/SankeyNodeAlignment.tsx similarity index 97% rename from docs/data/charts/sankey/SankeyNodeAlignment.tsx rename to docs/data/charts/sankey/demos/sankey-node-alignment/SankeyNodeAlignment.tsx index 28dca2c499caf..86ca1efd08177 100644 --- a/docs/data/charts/sankey/SankeyNodeAlignment.tsx +++ b/docs/data/charts/sankey/demos/sankey-node-alignment/SankeyNodeAlignment.tsx @@ -5,6 +5,7 @@ import Typography from '@mui/material/Typography'; export default function SankeyNodeAlignment() { return ( + {/* @focus-start */} Left @@ -61,6 +62,7 @@ export default function SankeyNodeAlignment() { /> + {/* @focus-end */} ); } diff --git a/docs/data/charts/sankey/demos/sankey-node-alignment/client.ts b/docs/data/charts/sankey/demos/sankey-node-alignment/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-node-alignment/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sankey/demos/sankey-node-alignment/index.ts b/docs/data/charts/sankey/demos/sankey-node-alignment/index.ts new file mode 100644 index 0000000000000..4abbe37536c1c --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-node-alignment/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SankeyNodeAlignment from './SankeyNodeAlignment'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SankeyNodeAlignment, { ClientProvider }); diff --git a/docs/data/charts/sankey/SankeyNodeSorting.tsx b/docs/data/charts/sankey/demos/sankey-node-sorting/SankeyNodeSorting.tsx similarity index 97% rename from docs/data/charts/sankey/SankeyNodeSorting.tsx rename to docs/data/charts/sankey/demos/sankey-node-sorting/SankeyNodeSorting.tsx index 39f9979cdae6f..f2f01c745908b 100644 --- a/docs/data/charts/sankey/SankeyNodeSorting.tsx +++ b/docs/data/charts/sankey/demos/sankey-node-sorting/SankeyNodeSorting.tsx @@ -35,6 +35,7 @@ export default function SankeyNodeSorting() { spacing={3} sx={{ width: '100%', '&>div': { flex: '1 0 0' } }} > + {/* @focus-start */}
auto (default) @@ -79,6 +80,7 @@ export default function SankeyNodeSorting() { }} />
+ {/* @focus-end */} ); } diff --git a/docs/data/charts/sankey/demos/sankey-node-sorting/client.ts b/docs/data/charts/sankey/demos/sankey-node-sorting/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-node-sorting/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sankey/demos/sankey-node-sorting/index.ts b/docs/data/charts/sankey/demos/sankey-node-sorting/index.ts new file mode 100644 index 0000000000000..9f3a24c7443c1 --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-node-sorting/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SankeyNodeSorting from './SankeyNodeSorting'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SankeyNodeSorting, { ClientProvider }); diff --git a/docs/data/charts/sankey/SankeyNodeStyling.tsx b/docs/data/charts/sankey/demos/sankey-node-styling/SankeyNodeStyling.tsx similarity index 97% rename from docs/data/charts/sankey/SankeyNodeStyling.tsx rename to docs/data/charts/sankey/demos/sankey-node-styling/SankeyNodeStyling.tsx index a8b4b6c6f1fd4..cfaf469270056 100644 --- a/docs/data/charts/sankey/SankeyNodeStyling.tsx +++ b/docs/data/charts/sankey/demos/sankey-node-styling/SankeyNodeStyling.tsx @@ -18,6 +18,7 @@ const data = { export default function SankeyNodeStyling() { return ( + // @focus-start @padding 2 `; }} /> + // @focus-end ); } diff --git a/docs/data/charts/sankey/demos/sankey-node-styling/client.ts b/docs/data/charts/sankey/demos/sankey-node-styling/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-node-styling/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sankey/demos/sankey-node-styling/index.ts b/docs/data/charts/sankey/demos/sankey-node-styling/index.ts new file mode 100644 index 0000000000000..e0d6836f88ec1 --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-node-styling/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SankeyNodeStyling from './SankeyNodeStyling'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SankeyNodeStyling, { ClientProvider }); diff --git a/docs/data/charts/sankey/SankeyOverview.tsx b/docs/data/charts/sankey/demos/sankey-overview/SankeyOverview.tsx similarity index 98% rename from docs/data/charts/sankey/SankeyOverview.tsx rename to docs/data/charts/sankey/demos/sankey-overview/SankeyOverview.tsx index 7a871741c77e8..7772aab36a5bb 100644 --- a/docs/data/charts/sankey/SankeyOverview.tsx +++ b/docs/data/charts/sankey/demos/sankey-overview/SankeyOverview.tsx @@ -11,7 +11,7 @@ import { } from '@mui/x-charts-pro/SankeyChart'; import { ChartsWrapper } from '@mui/x-charts-pro/ChartsWrapper'; import { ChartsSurface } from '@mui/x-charts-pro/ChartsSurface'; -import { CustomNodeLabelPlot } from './CustomNodeLabelPlot'; +import { CustomNodeLabelPlot } from '../../CustomNodeLabelPlot'; const data = { nodes: [ @@ -89,6 +89,7 @@ const valueFormatter = (value: number, context: { type: string }) => { }; export default function SankeyOverview() { + // @focus-start @padding 1 const theme = useTheme(); const isDesktop = useMediaQuery(theme.breakpoints.up('sm')); @@ -146,4 +147,5 @@ export default function SankeyOverview() { ); + // @focus-end } diff --git a/docs/data/charts/sankey/demos/sankey-overview/client.ts b/docs/data/charts/sankey/demos/sankey-overview/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-overview/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sankey/demos/sankey-overview/index.ts b/docs/data/charts/sankey/demos/sankey-overview/index.ts new file mode 100644 index 0000000000000..93208587228bf --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-overview/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SankeyOverview from './SankeyOverview'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SankeyOverview, { ClientProvider }); diff --git a/docs/data/charts/sankey/SankeyValueFormatter.tsx b/docs/data/charts/sankey/demos/sankey-value-formatter/SankeyValueFormatter.tsx similarity index 89% rename from docs/data/charts/sankey/SankeyValueFormatter.tsx rename to docs/data/charts/sankey/demos/sankey-value-formatter/SankeyValueFormatter.tsx index cab369d304f9a..a43af4ba97f16 100644 --- a/docs/data/charts/sankey/SankeyValueFormatter.tsx +++ b/docs/data/charts/sankey/demos/sankey-value-formatter/SankeyValueFormatter.tsx @@ -1,7 +1,5 @@ -import { - SankeyChart, - type SankeyValueFormatterContext, -} from '@mui/x-charts-pro/SankeyChart'; +import { SankeyChart } from '@mui/x-charts-pro/SankeyChart'; +import type { SankeyValueFormatterContext } from '@mui/x-charts-pro/SankeyChart'; const data = { nodes: [ @@ -31,6 +29,7 @@ const data = { export default function SankeyValueFormatter() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/sankey/demos/sankey-value-formatter/client.ts b/docs/data/charts/sankey/demos/sankey-value-formatter/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-value-formatter/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sankey/demos/sankey-value-formatter/index.ts b/docs/data/charts/sankey/demos/sankey-value-formatter/index.ts new file mode 100644 index 0000000000000..e69f123d42a6b --- /dev/null +++ b/docs/data/charts/sankey/demos/sankey-value-formatter/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SankeyValueFormatter from './SankeyValueFormatter'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SankeyValueFormatter, { ClientProvider }); diff --git a/docs/data/charts/sankey/sankey.md b/docs/data/charts/sankey/sankey.md index 5c94c38ed6831..6f8106533e2c6 100644 --- a/docs/data/charts/sankey/sankey.md +++ b/docs/data/charts/sankey/sankey.md @@ -15,7 +15,7 @@ Links connect sources to targets, and link width shows how large each flow is. The demo below shows flow from revenue to net income in billions USD. -{{"demo": "SankeyOverview.js"}} +{{"component": "file://./demos/sankey-overview/index.ts"}} ## Basics @@ -28,13 +28,13 @@ Provide a data structure with `nodes` and `links`: If a node appears in `links` but not in `nodes`, the chart creates it automatically and uses its ID as the label. -{{"demo": "SankeyBasicDataStructure.js"}} +{{"component": "file://./demos/sankey-basic-data-structure/index.ts"}} ### Explicit nodes When you define nodes in the `nodes` array, you can set labels and colors for each. -{{"demo": "SankeyDetailedDataStructure.js"}} +{{"component": "file://./demos/sankey-detailed-data-structure/index.ts"}} ## Styling @@ -42,13 +42,13 @@ When you define nodes in the `nodes` array, you can set labels and colors for ea Use the `nodeOptions` prop to apply default styles to all nodes. -{{"demo": "SankeyNodeStyling.js"}} +{{"component": "file://./demos/sankey-node-styling/index.ts"}} ### Default link styles Use the `linkOptions` prop to apply default styles to all links. -{{"demo": "SankeyLinkStyling.js"}} +{{"component": "file://./demos/sankey-link-styling/index.ts"}} ### Link color keywords @@ -56,7 +56,7 @@ Link colors can use `'source'` to inherit from the source node or `'target'` to This works for individual link colors and for the default in `linkOptions`. -{{"demo": "SankeyLinkKeywordColors.js"}} +{{"component": "file://./demos/sankey-link-keyword-colors/index.ts"}} ### Node alignment @@ -73,7 +73,7 @@ In the demo below: - Node E can sit in the first or second column - Node F can sit in columns 4, 5, or 6 -{{"demo": "SankeyNodeAlignment.js"}} +{{"component": "file://./demos/sankey-node-alignment/index.ts"}} ### Curve correction @@ -82,7 +82,7 @@ The effect depends on the graph layout and chart height. Higher values make links look thicker; lower values make them look thinner. The default is `10`. -{{"demo": "SankeyCurveCorrection.js"}} +{{"component": "file://./demos/sankey-curve-correction/index.ts"}} ## Value formatting @@ -92,7 +92,7 @@ The context includes `location` (`'tooltip'` or `'label'`), `type` (`'node'` or The demo below adds units to values and shows "total" when the pointer is over a node. -{{"demo": "SankeyValueFormatter.js"}} +{{"component": "file://./demos/sankey-value-formatter/index.ts"}} ## Sorting @@ -109,7 +109,7 @@ It accepts: - `'auto'` (default): automatic sorting to reduce link crossings - `'fixed'`: keep the order from the `nodes` array -{{"demo": "SankeyNodeSorting.js"}} +{{"component": "file://./demos/sankey-node-sorting/index.ts"}} ### Link sorting @@ -120,14 +120,14 @@ It accepts: - `'auto'` (default): automatic sorting to reduce link crossings - `'fixed'`: keep the order from the `links` array -{{"demo": "SankeyLinkSorting.js"}} +{{"component": "file://./demos/sankey-link-sorting/index.ts"}} ## Layout iterations The `iterations` prop sets how many times the layout algorithm runs. More iterations usually improve the layout but take longer. -{{"demo": "SankeyIterations.js"}} +{{"component": "file://./demos/sankey-iterations/index.ts"}} ## Interaction @@ -137,14 +137,14 @@ Use the `onNodeClick` and `onLinkClick` props to handle clicks on nodes and link Each callback receives the mouse event and an identifier object (`SankeyNodeIdentifierWithData` or `SankeyLinkIdentifierWithData`) with details about the clicked item. Use `SankeyItemIdentifierWithData` when you handle both in one callback. -{{"demo": "SankeyClick.js"}} +{{"component": "file://./demos/sankey-click/index.ts"}} ### Highlighting You can highlight nodes and links by hovering or programmatically. When an item is highlighted, you can fade others to improve focus. -{{"demo": "SankeyHighlighting.js"}} +{{"component": "file://./demos/sankey-highlighting/index.ts"}} Highlighting is configured separately for nodes and links. @@ -214,7 +214,7 @@ For links: The `onHighlightChange` callback runs when the highlighted item changes (from user interaction or programmatic updates). -{{"demo": "SankeyControlledHighlight.js"}} +{{"component": "file://./demos/sankey-controlled-highlight/index.ts"}} ## Tooltip diff --git a/docs/data/charts/scatter-demo/MultipleYAxesScatterChart.js b/docs/data/charts/scatter-demo/MultipleYAxesScatterChart.js deleted file mode 100644 index 6e3aa2c172550..0000000000000 --- a/docs/data/charts/scatter-demo/MultipleYAxesScatterChart.js +++ /dev/null @@ -1,63 +0,0 @@ -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import { axisClasses } from '@mui/x-charts/ChartsAxis'; -import Box from '@mui/material/Box'; - -const data1 = [ - { x: 100, y: 200, id: 1 }, - { x: 120, y: 100, id: 2 }, - { x: 170, y: 300, id: 3 }, - { x: 140, y: 250, id: 4 }, - { x: 150, y: 400, id: 5 }, - { x: 110, y: 280, id: 6 }, -]; - -const data2 = [ - { x: 300, y: 300, id: 1 }, - { x: 400, y: 500, id: 2 }, - { x: 200, y: 700, id: 3 }, - { x: 340, y: 350, id: 4 }, - { x: 560, y: 500, id: 5 }, - { x: 230, y: 780, id: 6 }, - { x: 500, y: 400, id: 7 }, - { x: 300, y: 500, id: 8 }, - { x: 240, y: 300, id: 9 }, - { x: 320, y: 550, id: 10 }, - { x: 500, y: 400, id: 11 }, - { x: 420, y: 280, id: 12 }, -]; - -export default function MultipleYAxesScatterChart() { - return ( - - value && `${value.x}cm, ${value.y}kg`, - }, - { - data: data2, - yAxisId: 'rightAxis', - valueFormatter: (value) => value && `${value.x}cm, ${value.y}kg`, - }, - ]} - xAxis={[{ min: 0, height: 28 }]} - yAxis={[ - { id: 'leftAxis', min: 0 }, - { id: 'rightAxis', min: 0, position: 'right' }, - ]} - sx={{ - [`& .${axisClasses.left}`]: { - line: { stroke: '#8884d8' }, - text: { fill: '#8884d8' }, - }, - [`& .${axisClasses.right}`]: { - line: { stroke: '#82ca9d' }, - text: { fill: '#82ca9d' }, - }, - }} - /> - - ); -} diff --git a/docs/data/charts/scatter-demo/SimpleScatterChart.js b/docs/data/charts/scatter-demo/SimpleScatterChart.js deleted file mode 100644 index 071452d926a91..0000000000000 --- a/docs/data/charts/scatter-demo/SimpleScatterChart.js +++ /dev/null @@ -1,22 +0,0 @@ -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import Box from '@mui/material/Box'; - -const data = [ - { x: 100, y: 200, id: 1 }, - { x: 120, y: 100, id: 2 }, - { x: 170, y: 300, id: 3 }, - { x: 140, y: 250, id: 4 }, - { x: 150, y: 400, id: 5 }, - { x: 110, y: 280, id: 6 }, -]; - -export default function SimpleScatterChart() { - return ( - - - - ); -} diff --git a/docs/data/charts/scatter-demo/SimpleScatterChart.tsx.preview b/docs/data/charts/scatter-demo/SimpleScatterChart.tsx.preview deleted file mode 100644 index eee2107169640..0000000000000 --- a/docs/data/charts/scatter-demo/SimpleScatterChart.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/scatter-demo/MultipleYAxesScatterChart.tsx b/docs/data/charts/scatter-demo/demos/multiple-y-axes-scatter-chart/MultipleYAxesScatterChart.tsx similarity index 97% rename from docs/data/charts/scatter-demo/MultipleYAxesScatterChart.tsx rename to docs/data/charts/scatter-demo/demos/multiple-y-axes-scatter-chart/MultipleYAxesScatterChart.tsx index ceb114e973523..125ae6d1359eb 100644 --- a/docs/data/charts/scatter-demo/MultipleYAxesScatterChart.tsx +++ b/docs/data/charts/scatter-demo/demos/multiple-y-axes-scatter-chart/MultipleYAxesScatterChart.tsx @@ -28,6 +28,7 @@ const data2 = [ export default function MultipleYAxesScatterChart() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/scatter-demo/demos/multiple-y-axes-scatter-chart/client.ts b/docs/data/charts/scatter-demo/demos/multiple-y-axes-scatter-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/scatter-demo/demos/multiple-y-axes-scatter-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/scatter-demo/demos/multiple-y-axes-scatter-chart/index.ts b/docs/data/charts/scatter-demo/demos/multiple-y-axes-scatter-chart/index.ts new file mode 100644 index 0000000000000..6761c09e12e95 --- /dev/null +++ b/docs/data/charts/scatter-demo/demos/multiple-y-axes-scatter-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MultipleYAxesScatterChart from './MultipleYAxesScatterChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MultipleYAxesScatterChart, { ClientProvider }); diff --git a/docs/data/charts/scatter-demo/SimpleScatterChart.tsx b/docs/data/charts/scatter-demo/demos/simple-scatter-chart/SimpleScatterChart.tsx similarity index 91% rename from docs/data/charts/scatter-demo/SimpleScatterChart.tsx rename to docs/data/charts/scatter-demo/demos/simple-scatter-chart/SimpleScatterChart.tsx index 071452d926a91..601ce8b016046 100644 --- a/docs/data/charts/scatter-demo/SimpleScatterChart.tsx +++ b/docs/data/charts/scatter-demo/demos/simple-scatter-chart/SimpleScatterChart.tsx @@ -13,10 +13,12 @@ const data = [ export default function SimpleScatterChart() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/scatter-demo/demos/simple-scatter-chart/client.ts b/docs/data/charts/scatter-demo/demos/simple-scatter-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/scatter-demo/demos/simple-scatter-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/scatter-demo/demos/simple-scatter-chart/index.ts b/docs/data/charts/scatter-demo/demos/simple-scatter-chart/index.ts new file mode 100644 index 0000000000000..da123d3319597 --- /dev/null +++ b/docs/data/charts/scatter-demo/demos/simple-scatter-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleScatterChart from './SimpleScatterChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleScatterChart, { ClientProvider }); diff --git a/docs/data/charts/scatter-demo/scatter-demo.md b/docs/data/charts/scatter-demo/scatter-demo.md index 91a62948a9578..8b33028858ad7 100644 --- a/docs/data/charts/scatter-demo/scatter-demo.md +++ b/docs/data/charts/scatter-demo/scatter-demo.md @@ -10,8 +10,8 @@ components: Scatter, ScatterChart, ScatterPlot ## SimpleScatterChart -{{"demo": "SimpleScatterChart.js"}} +{{"component": "file://./demos/simple-scatter-chart/index.ts"}} ## MultipleYAxesScatterChart -{{"demo": "MultipleYAxesScatterChart.js"}} +{{"component": "file://./demos/multiple-y-axes-scatter-chart/index.ts"}} diff --git a/docs/data/charts/scatter/BasicScatter.js b/docs/data/charts/scatter/BasicScatter.js deleted file mode 100644 index 69815168efb78..0000000000000 --- a/docs/data/charts/scatter/BasicScatter.js +++ /dev/null @@ -1,20 +0,0 @@ -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import data from '../dataset/random/scatterParallel.json'; - -export default function BasicScatter() { - return ( - ({ x: v.x1, y: v.y1, id: v.id })), - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })), - }, - ]} - /> - ); -} diff --git a/docs/data/charts/scatter/BasicScatter.tsx.preview b/docs/data/charts/scatter/BasicScatter.tsx.preview deleted file mode 100644 index 2315905607c81..0000000000000 --- a/docs/data/charts/scatter/BasicScatter.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - ({ x: v.x1, y: v.y1, id: v.id })), - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })), - }, - ]} -/> \ No newline at end of file diff --git a/docs/data/charts/scatter/ClosestPointInteraction.js b/docs/data/charts/scatter/ClosestPointInteraction.js deleted file mode 100644 index e01fe2271a8fc..0000000000000 --- a/docs/data/charts/scatter/ClosestPointInteraction.js +++ /dev/null @@ -1,90 +0,0 @@ -/* eslint-disable no-nested-ternary */ - -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Typography from '@mui/material/Typography'; -import Slider from '@mui/material/Slider'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import Radio from '@mui/material/Radio'; -import RadioGroup from '@mui/material/RadioGroup'; -import data from '../dataset/random/scatterParallel.json'; - -export default function ClosestPointInteraction() { - const [option, setOption] = React.useState('numeric'); - const [hitAreaRadius, setVoronoiMaxRadius] = React.useState(25); - - const handleMaxRadiusChange = (event, newValue) => { - if (typeof newValue !== 'number') { - return; - } - setVoronoiMaxRadius(newValue); - }; - - return ( - - ({ x: v.x1, y: v.y1, id: v.id })), - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })), - }, - ]} - /> -
- Maximum radius - setOption(event.target.value)}> - - } - label="'item'" - labelPlacement="end" - value="item" - /> - } - label="undefined" - labelPlacement="end" - value="undefined" - /> - } - label="numeric radius" - labelPlacement="end" - value="numeric" - /> - - - - - Numeric radius - - -
- - ); -} diff --git a/docs/data/charts/scatter/CustomScatter.js b/docs/data/charts/scatter/CustomScatter.js deleted file mode 100644 index f3290adc1819f..0000000000000 --- a/docs/data/charts/scatter/CustomScatter.js +++ /dev/null @@ -1,59 +0,0 @@ -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import { useScatterSeries, useXScale, useYScale } from '@mui/x-charts/hooks'; - -const data1 = [ - { x: 95, y: 200, id: 1 }, - { x: 120, y: 100, id: 2 }, - { x: 170, y: 300, id: 3 }, - { x: 140, y: 250, id: 4 }, - { x: 150, y: 400, id: 5 }, - { x: 110, y: 280, id: 6 }, -]; - -const data2 = [ - { x: 300, y: 300, id: 1 }, - { x: 200, y: 700, id: 2 }, - { x: 400, y: 500, id: 3 }, - { x: 340, y: 350, id: 4 }, - { x: 420, y: 280, id: 5 }, -]; - -const series = [ - { id: 's1', data: data1, label: 'Open' }, - { id: 's2', data: data2, label: 'Closed' }, -]; - -function LinkPoints({ seriesId, close }) { - const scatter = useScatterSeries(seriesId); - const xScale = useXScale(); - const yScale = useYScale(); - - if (!scatter) { - return null; - } - const { color, data } = scatter; - - if (!data) { - return null; - } - - return ( - `${xScale(x)}, ${yScale(y)}`).join(' L')}${ - close ? 'Z' : '' - }`} - /> - ); -} - -export default function CustomScatter() { - return ( - - - - - ); -} diff --git a/docs/data/charts/scatter/CustomScatter.tsx.preview b/docs/data/charts/scatter/CustomScatter.tsx.preview deleted file mode 100644 index f69b4a311bb90..0000000000000 --- a/docs/data/charts/scatter/CustomScatter.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/data/charts/scatter/GridDemo.js b/docs/data/charts/scatter/GridDemo.js deleted file mode 100644 index 48dceb93c36d5..0000000000000 --- a/docs/data/charts/scatter/GridDemo.js +++ /dev/null @@ -1,21 +0,0 @@ -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import data from '../dataset/random/scatterParallel.json'; - -export default function GridDemo() { - return ( - ({ x: v.x1, y: v.y1, id: v.id })), - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })), - }, - ]} - grid={{ vertical: true, horizontal: true }} - /> - ); -} diff --git a/docs/data/charts/scatter/GridDemo.tsx b/docs/data/charts/scatter/GridDemo.tsx deleted file mode 100644 index 48dceb93c36d5..0000000000000 --- a/docs/data/charts/scatter/GridDemo.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import data from '../dataset/random/scatterParallel.json'; - -export default function GridDemo() { - return ( - ({ x: v.x1, y: v.y1, id: v.id })), - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })), - }, - ]} - grid={{ vertical: true, horizontal: true }} - /> - ); -} diff --git a/docs/data/charts/scatter/GridDemo.tsx.preview b/docs/data/charts/scatter/GridDemo.tsx.preview deleted file mode 100644 index 8d1ed52b8387d..0000000000000 --- a/docs/data/charts/scatter/GridDemo.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - ({ x: v.x1, y: v.y1, id: v.id })), - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })), - }, - ]} - grid={{ vertical: true, horizontal: true }} -/> \ No newline at end of file diff --git a/docs/data/charts/scatter/ScatterAsyncRenderer.js b/docs/data/charts/scatter/ScatterAsyncRenderer.js deleted file mode 100644 index 33c9e66a6bcdb..0000000000000 --- a/docs/data/charts/scatter/ScatterAsyncRenderer.js +++ /dev/null @@ -1,251 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; -import Tooltip from '@mui/material/Tooltip'; -import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; -import Chance from 'chance'; - -const NUMBER_OF_SERIES = 3; - -const POINT_COUNT = 40000; - -// Gaussian-ish blobs so the progressive, batched paint is easy to see. Points -// are split into `NUMBER_OF_SERIES` contiguous series, each offset into its -// own region. -function makeSeries(chance, count) { - const remainder = count % NUMBER_OF_SERIES; - return Array.from({ length: NUMBER_OF_SERIES }, (_, seriesIndex) => { - const size = - Math.floor(count / NUMBER_OF_SERIES) + (seriesIndex < remainder ? 1 : 0); - const offsetX = (seriesIndex % 2) * 50; - const offsetY = seriesIndex * 25; - const data = Array.from({ length: size }, () => { - const angle = chance.floating({ min: 0, max: 2 * Math.PI }); - const radius = Math.sqrt(chance.floating({ min: 0, max: 1 })) * 100; - const noiseX = chance.floating({ min: -100, max: 10 }); - const noiseY = chance.floating({ min: -100, max: 10 }); - return { - x: offsetX + radius * Math.cos(angle) + noiseX, - y: offsetY + radius * Math.sin(angle) + noiseY, - }; - }); - return { - id: `series-${seriesIndex}`, - label: `Series ${seriesIndex + 1}`, - data, - markerSize: 2, - }; - }); -} - -// Built once outside the component so toggling does not regenerate the points -// and the series keep stable references. -const syncSeries = makeSeries(new Chance(42), POINT_COUNT); -const asyncSeries = makeSeries(new Chance(43), POINT_COUNT); - -// A spinner whose rotation is advanced in JS on every animation frame (not a -// CSS animation, which runs on the compositor and stays smooth regardless). -// If the main thread is blocked, this visibly stutters — a live indicator of -// whether the progressive render keeps the main thread responsive. -function MainThreadSpinner() { - const ref = React.useRef(null); - - React.useEffect(() => { - let frame = 0; - let angle = 0; - const tick = () => { - angle = (angle + 6) % 360; - if (ref.current) { - ref.current.style.transform = `rotate(${angle}deg)`; - } - frame = requestAnimationFrame(tick); - }; - frame = requestAnimationFrame(tick); - return () => cancelAnimationFrame(frame); - }, []); - - return ( - - -
- - - ); -} - -// Renders the timing readout in its own component so that updating the -// measured values does NOT re-render the (heavy) chart — otherwise each -// state update would reconcile thousands of points and stall the main -// thread, making the spinner stutter exactly when a value appears. -function RenderTimers(props) { - const { containerRef, startRef, runId } = props; - const [firstMs, setFirstMs] = React.useState(null); - const [totalMs, setTotalMs] = React.useState(null); - // Number of distinct paint steps (frames on which the point count grew). - const [paints, setPaints] = React.useState(0); - - React.useEffect(() => { - setFirstMs(null); - setTotalMs(null); - setPaints(0); - if (runId === 0 || startRef.current === null) { - return undefined; - } - // Rendering is considered complete when the point count stops growing for - // this many consecutive frames (longer than the gap between batches). - const STABLE_FRAMES = 12; - let frame = 0; - let firstSeen = false; - let lastCount = 0; - let stableFrames = 0; - let paintCount = 0; - // Time of the most recent point-count change, so the reported total is the - // moment the last batch painted, not when stability was confirmed. - let lastChangeAt = 0; - const check = () => { - const now = performance.now(); - const count = containerRef.current?.querySelectorAll('circle').length ?? 0; - - if (!firstSeen && count > 0) { - firstSeen = true; - setFirstMs(now - startRef.current); - } - - if (firstSeen) { - if (count === lastCount) { - stableFrames += 1; - } else { - stableFrames = 0; - lastCount = count; - lastChangeAt = now; - paintCount += 1; - setPaints(paintCount); - } - if (stableFrames >= STABLE_FRAMES) { - setTotalMs(lastChangeAt - startRef.current); - return; - } - } - - frame = requestAnimationFrame(check); - }; - frame = requestAnimationFrame(check); - return () => cancelAnimationFrame(frame); - }, [runId, containerRef, startRef]); - - return ( - - - first paint: {firstMs === null ? '—' : `${firstMs.toFixed(0)} ms`} - - - total: {totalMs === null ? '—' : `${totalMs.toFixed(0)} ms`} - - - paints: {paints} - - - ); -} - -export default function ScatterAsyncRenderer() { - // Default to progressive so first paint on docs load does not block the - // main thread while rendering all points at once. - const [mode, setMode] = React.useState('async'); - const series = mode === 'sync' ? syncSeries : asyncSeries; - - const containerRef = React.useRef(null); - // Bumped on every click; `RenderTimers` keys its measurement off it. - const [runId, setRunId] = React.useState(0); - const startRef = React.useRef(null); - - const select = (next) => { - startRef.current = performance.now(); - setRunId((id) => id + 1); - setMode(next); - }; - - return ( - - - - - {mode === 'sync' - ? `${POINT_COUNT.toLocaleString()} points` - : `${POINT_COUNT.toLocaleString()} points`} - - - - - - - - - -
- -
- - ); -} diff --git a/docs/data/charts/scatter/ScatterBatchRenderer.js b/docs/data/charts/scatter/ScatterBatchRenderer.js deleted file mode 100644 index 0586f0c978beb..0000000000000 --- a/docs/data/charts/scatter/ScatterBatchRenderer.js +++ /dev/null @@ -1,124 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Paper from '@mui/material/Paper'; -import Divider from '@mui/material/Divider'; -import { ChartsTooltipContainer, useItemTooltip } from '@mui/x-charts/ChartsTooltip'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import Typography from '@mui/material/Typography'; -import { schemePaired } from 'd3-scale-chromatic'; -import { electricityGeneration2024Every6Hours } from '../dataset/electricityGeneration2024Every6Hours'; -import { carbonEmissions2024Every6Hours } from '../dataset/carbonEmissions2024Every6Hours'; -import { countryData, flags } from '../dataset/countryData'; - -const dateFormat = new Intl.DateTimeFormat(undefined, { - month: 'short', - day: 'numeric', -}); - -const timeRangeFormat = new Intl.DateTimeFormat(undefined, { - hour: '2-digit', - minute: '2-digit', -}); - -function getDatesFromIndex(index) { - const from = new Date(2024, 0, 1, index * 6); - const to = new Date(2024, 0, 1, index * 6 + 6); - return [from, to]; -} - -const scatterChartsParams = { - series: Object.entries(electricityGeneration2024Every6Hours).map( - ([countryCode, electricity]) => ({ - id: countryCode, - data: electricity.map((value, index) => ({ - x: value / 1000, - y: carbonEmissions2024Every6Hours[countryCode][index], - })), - markerSize: 1, - label: countryData[countryCode].country, - highlightScope: { - highlight: 'series', - fade: 'global', - }, - }), - ), - xAxis: [ - { min: 0, label: 'Electricity Generation (GWh)', domainSeries: 'visible' }, - ], - yAxis: [ - { - min: 0, - width: 60, - label: 'Life-cycle Carbon Intensity (gCO₂eq/kWh)', - domainSeries: 'visible', - }, - ], - height: 400, - colors: schemePaired, - slotProps: { - legend: { - toggleVisibilityOnClick: true, - position: { vertical: 'bottom' }, - sx: { justifyContent: 'center' }, - }, - }, - slots: { - tooltip: ElectricityTooltip, - }, -}; - -export default function ScatterBatchRenderer() { - return ( - - - Life-cycle Carbon Intensity of Electricity Generation - 2024 - - - Source: ENTSO-E, ElectricityMaps.com - - ); -} - -function ElectricityTooltip() { - return ( - - - - ); -} - -function ElectricityTooltipContent() { - const item = useItemTooltip(); - - if (!item) { - return null; - } - - const [from, to] = getDatesFromIndex(item.identifier.dataIndex); - - return ( - - - {item.label} {flags[item.identifier.seriesId]} - - - {`${dateFormat.format(from)} ${timeRangeFormat.format(from)} - ${timeRangeFormat.format(to)}`} - - - - Generated:{' '} - - {item.value.x.toFixed(2)} GWh - - - - Emitting:{' '} - - {item.value.y.toFixed(2)} gCO₂eq/kWh - - - - ); -} diff --git a/docs/data/charts/scatter/ScatterBatchRenderer.tsx.preview b/docs/data/charts/scatter/ScatterBatchRenderer.tsx.preview deleted file mode 100644 index 07b58972afd03..0000000000000 --- a/docs/data/charts/scatter/ScatterBatchRenderer.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - Life-cycle Carbon Intensity of Electricity Generation - 2024 - - -Source: ENTSO-E, ElectricityMaps.com \ No newline at end of file diff --git a/docs/data/charts/scatter/ScatterCSSSelectors.js b/docs/data/charts/scatter/ScatterCSSSelectors.js deleted file mode 100644 index 2364908ed3eb0..0000000000000 --- a/docs/data/charts/scatter/ScatterCSSSelectors.js +++ /dev/null @@ -1,36 +0,0 @@ -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import data from '../dataset/random/scatterParallel.json'; - -const series = [ - { - id: 'series-1', - label: 'Series A', - data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })), - highlightScope: { highlight: 'item', fade: 'global' }, - }, - { - id: 'series-2', - label: 'Series B', - data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })), - highlightScope: { highlight: 'item', fade: 'global' }, - }, -]; - -export default function ScatterCSSSelectors() { - return ( - - ); -} diff --git a/docs/data/charts/scatter/ScatterCSSSelectors.tsx.preview b/docs/data/charts/scatter/ScatterCSSSelectors.tsx.preview deleted file mode 100644 index d472c3c3577d9..0000000000000 --- a/docs/data/charts/scatter/ScatterCSSSelectors.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/scatter/ScatterClick.js b/docs/data/charts/scatter/ScatterClick.js deleted file mode 100644 index e5175d5cfeeb6..0000000000000 --- a/docs/data/charts/scatter/ScatterClick.js +++ /dev/null @@ -1,135 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import ToggleButton from '@mui/material/ToggleButton'; -import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -const scatterChartsParams = { - series: [ - { - id: 'series-1', - data: [ - { x: 6.5e-2, y: -1.3, id: 0 }, - { x: -2.1, y: -7.0e-1, id: 1 }, - { x: -7.6e-1, y: -6.7e-1, id: 2 }, - { x: -1.5e-2, y: -2.0e-1, id: 3 }, - { x: -1.4, y: -9.9e-1, id: 4 }, - { x: -1.1, y: -1.5, id: 5 }, - { x: -7.0e-1, y: -2.7e-1, id: 6 }, - { x: -5.1e-1, y: -8.8e-1, id: 7 }, - { x: -4.0e-3, y: -1.4, id: 8 }, - { x: -1.3, y: -2.2, id: 9 }, - ], - label: 'A', - highlightScope: { - highlight: 'item', - }, - }, - { - id: 'series-2', - data: [ - { x: 1.8, y: -1.7e-2, id: 0 }, - { x: 7.1e-1, y: 2.6e-1, id: 1 }, - { x: -1.2, y: 9.8e-1, id: 2 }, - { x: 2.0, y: -2.0e-1, id: 3 }, - { x: 9.4e-1, y: -2.7e-1, id: 4 }, - { x: -4.8e-1, y: -1.6e-1, id: 5 }, - { x: -1.5, y: 1.1, id: 6 }, - { x: 1.3, y: 3.4e-1, id: 7 }, - { x: -4.2e-1, y: 1.0e-1, id: 8 }, - { x: 5.4e-2, y: 4.0e-1, id: 9 }, - ], - label: 'B', - highlightScope: { - highlight: 'item', - }, - }, - ], - height: 300, -}; - -function getHitRadius(option) { - switch (option) { - case 'item': - return 'item'; - case 'infinite': - return undefined; - case '50px': - return 50; - default: - return undefined; - } -} -export default function ScatterClick() { - const [option, setOption] = React.useState('infinite'); - const [data, setData] = React.useState(); - - const { ...other } = data ?? {}; - const dataDisplayed = data && { - ...other, - }; - return ( - - { - if (newValue !== null) { - setOption(newValue); - } - }} - > - item - infinite - 50px - - - - - setData(d)} - /> - - - - Click on the chart - setData(undefined)} - > - - - - - - - - ); -} diff --git a/docs/data/charts/scatter/ScatterCustomShape.js b/docs/data/charts/scatter/ScatterCustomShape.js deleted file mode 100644 index 17715c1b6e897..0000000000000 --- a/docs/data/charts/scatter/ScatterCustomShape.js +++ /dev/null @@ -1,80 +0,0 @@ -import { ScatterChart } from '@mui/x-charts/ScatterChart'; - -import data from '../dataset/random/scatterParallel.json'; - -export default function ScatterCustomShape() { - return ( - ({ x: v.x1, y: v.y1, id: v.id })), - markerSize: 1, - labelMarkType: StarLabelMark, - }, - { - id: '2', - label: 'Series B', - data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })), - markerSize: 1, - labelMarkType: DiamondLabelMark, - }, - ]} - slots={{ marker: CustomMarker }} - /> - ); -} - -const star = - 'M0,-7.528L1.69,-2.326L7.16,-2.326L2.735,0.889L4.425,6.09L0,2.875L-4.425,6.09L-2.735,0.889L-7.16,-2.326L-1.69,-2.326Z'; -const diamond = 'M0,-7.423L4.285,0L0,7.423L-4.285,0Z'; - -function CustomMarker({ - size, - x, - y, - seriesId, - isHighlighted, - isFaded, - dataIndex, - color, - ...other -}) { - const props = { - x: 0, - y: 0, - width: (isHighlighted ? 1.2 : 1) * size, - height: (isHighlighted ? 1.2 : 1) * size, - transform: `translate(${x}, ${y})`, - fill: color, - opacity: isFaded ? 0.3 : 1, - ...other, - }; - - return ( - - - - ); -} - -function StarLabelMark({ color, ...props }) { - return ( - - - - ); -} - -function DiamondLabelMark({ color, ...props }) { - return ( - - - - ); -} diff --git a/docs/data/charts/scatter/ScatterCustomSize.js b/docs/data/charts/scatter/ScatterCustomSize.js deleted file mode 100644 index cb288d35bfa38..0000000000000 --- a/docs/data/charts/scatter/ScatterCustomSize.js +++ /dev/null @@ -1,22 +0,0 @@ -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import data from '../dataset/random/scatterParallel.json'; - -export default function ScatterCustomSize() { - return ( - ({ x: v.x1, y: v.y1, id: v.id })), - markerSize: 8, - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })), - markerSize: 4, - }, - ]} - /> - ); -} diff --git a/docs/data/charts/scatter/ScatterCustomSize.tsx.preview b/docs/data/charts/scatter/ScatterCustomSize.tsx.preview deleted file mode 100644 index 668c74ae178ce..0000000000000 --- a/docs/data/charts/scatter/ScatterCustomSize.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - ({ x: v.x1, y: v.y1, id: v.id })), - markerSize: 8, - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })), - markerSize: 4, - }, - ]} -/> \ No newline at end of file diff --git a/docs/data/charts/scatter/ScatterDataset.js b/docs/data/charts/scatter/ScatterDataset.js deleted file mode 100644 index 45a823c13715e..0000000000000 --- a/docs/data/charts/scatter/ScatterDataset.js +++ /dev/null @@ -1,77 +0,0 @@ -import { ScatterChart } from '@mui/x-charts/ScatterChart'; - -export default function ScatterDataset() { - return ( - - ); -} - -const dataset = [ - { x1: 373, y1: 434, x2: 304, y2: 349 }, - { x1: 173, y1: 437, x2: 208, y2: 347 }, - { x1: 68, y1: 292, x2: 151, y2: 280 }, - { x1: 121, y1: 116, x2: 185, y2: 176 }, - { x1: 322, y1: 61, x2: 278, y2: 170 }, - { x1: 466, y1: 210, x2: 346, y2: 246 }, - { x1: 418, y1: 403, x2: 326, y2: 333 }, - { x1: 224, y1: 449, x2: 235, y2: 352 }, - { x1: 87, y1: 335, x2: 158, y2: 311 }, - { x1: 104, y1: 167, x2: 166, y2: 218 }, - { x1: 262, y1: 70, x2: 251, y2: 161 }, - { x1: 421, y1: 167, x2: 335, y2: 199 }, - { x1: 442, y1: 352, x2: 341, y2: 302 }, - { x1: 294, y1: 474, x2: 264, y2: 366 }, - { x1: 101, y1: 386, x2: 174, y2: 318 }, - { x1: 64, y1: 198, x2: 154, y2: 227 }, - { x1: 222, y1: 75, x2: 223, y2: 181 }, - { x1: 411, y1: 105, x2: 316, y2: 204 }, - { x1: 457, y1: 290, x2: 349, y2: 274 }, - { x1: 348, y1: 455, x2: 291, y2: 357 }, - { x1: 165, y1: 427, x2: 195, y2: 358 }, - { x1: 65, y1: 277, x2: 150, y2: 265 }, - { x1: 153, y1: 94, x2: 197, y2: 175 }, - { x1: 340, y1: 93, x2: 294, y2: 163 }, - { x1: 476, y1: 253, x2: 352, y2: 264 }, - { x1: 385, y1: 425, x2: 317, y2: 332 }, - { x1: 221, y1: 448, x2: 221, y2: 376 }, - { x1: 60, y1: 327, x2: 154, y2: 281 }, - { x1: 129, y1: 128, x2: 175, y2: 213 }, - { x1: 304, y1: 67, x2: 267, y2: 173 }, - { x1: 447, y1: 175, x2: 343, y2: 223 }, - { x1: 425, y1: 378, x2: 335, y2: 313 }, - { x1: 273, y1: 463, x2: 250, y2: 377 }, - { x1: 80, y1: 387, x2: 166, y2: 304 }, - { x1: 86, y1: 172, x2: 159, y2: 224 }, - { x1: 247, y1: 64, x2: 238, y2: 172 }, - { x1: 419, y1: 126, x2: 328, y2: 200 }, - { x1: 463, y1: 317, x2: 347, y2: 301 }, - { x1: 308, y1: 473, x2: 278, y2: 352 }, - { x1: 147, y1: 405, x2: 183, y2: 356 }, - { x1: 64, y1: 224, x2: 151, y2: 246 }, - { x1: 175, y1: 78, x2: 210, y2: 163 }, - { x1: 384, y1: 96, x2: 308, y2: 187 }, - { x1: 473, y1: 275, x2: 354, y2: 273 }, - { x1: 387, y1: 455, x2: 306, y2: 367 }, - { x1: 193, y1: 445, x2: 208, y2: 372 }, - { x1: 51, y1: 298, x2: 151, y2: 264 }, - { x1: 154, y1: 116, x2: 187, y2: 205 }, - { x1: 342, y1: 73, x2: 283, y2: 184 }, - { x1: 467, y1: 199, x2: 348, y2: 246 }, -]; - -const chartSetting = { - yAxis: [ - { - label: 'rainfall (mm)', - width: 60, - }, - ], - height: 300, -}; diff --git a/docs/data/charts/scatter/ScatterDataset.tsx.preview b/docs/data/charts/scatter/ScatterDataset.tsx.preview deleted file mode 100644 index 822da56f5bcd3..0000000000000 --- a/docs/data/charts/scatter/ScatterDataset.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/scatter/ScatterOverview.js b/docs/data/charts/scatter/ScatterOverview.js deleted file mode 100644 index 39b2b968d05ac..0000000000000 --- a/docs/data/charts/scatter/ScatterOverview.js +++ /dev/null @@ -1,106 +0,0 @@ -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import { ChartsTooltipContainer, useItemTooltip } from '@mui/x-charts/ChartsTooltip'; -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import Divider from '@mui/material/Divider'; -import Stack from '@mui/material/Stack'; -import data from '../dataset/transistorCPUdata'; - -const chartSetting = { - yAxis: [{ width: 50, scaleType: 'log' }], - xAxis: [{ valueFormatter: (v) => (v ? v.toString() : '') }], -}; - -const constructors = ['Intel', 'Apple', 'AMD']; - -const series = [ - { - type: 'scatter', - label: 'Other', - highlightScope: { highlight: 'series', fade: 'global' }, - markerSize: 3, - data: data - .filter( - (item) => !constructors.includes(item.constructor) && item.density !== null, - ) - .map((item) => ({ x: item.year, y: item.density, id: item.id })), - }, - ...constructors.map((constructor) => ({ - label: constructor, - highlightScope: { highlight: 'series', fade: 'global' }, - markerSize: 3, - data: data - .filter((item) => item.constructor === constructor && item.density !== null) - .map((item) => ({ x: item.year, y: item.density, id: item.id })), - })), -]; - -const numberFormatter = new Intl.NumberFormat('en-US').format; - -const TooltipPaper = styled('div', { - name: 'Tooltip', - slot: 'Paper', -})(({ theme }) => { - return { - padding: theme.spacing(1), - backgroundColor: (theme.vars || theme).palette.background.paper, - color: (theme.vars || theme).palette.text.primary, - borderRadius: (theme.vars || theme).shape?.borderRadius, - border: `solid ${(theme.vars || theme).palette.divider} 1px`, - }; -}); - -function CustomTooltip() { - const item = useItemTooltip(); - - return ( - - - - - {item?.label} - - - - {item?.value.x} - - {item?.value.y == null - ? 'NaN' - : `${numberFormatter(item?.value.y)} transistor/mm²`} - - - - - ); -} - -export default function ScatterOverview() { - return ( - - Processor density (in transistor/mm²) - - - ); -} diff --git a/docs/data/charts/scatter/ScatterOverview.tsx.preview b/docs/data/charts/scatter/ScatterOverview.tsx.preview deleted file mode 100644 index 96f3df55f2f3d..0000000000000 --- a/docs/data/charts/scatter/ScatterOverview.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ -Processor density (in transistor/mm²) - \ No newline at end of file diff --git a/docs/data/charts/scatter/ScatterRegressionLine.js b/docs/data/charts/scatter/ScatterRegressionLine.js deleted file mode 100644 index 696c8ba4a9193..0000000000000 --- a/docs/data/charts/scatter/ScatterRegressionLine.js +++ /dev/null @@ -1,109 +0,0 @@ -import * as React from 'react'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import { useSeries, useXScale, useYScale } from '@mui/x-charts/hooks'; -import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath'; -import useId from '@mui/utils/useId'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { useTheme } from '@mui/material/styles'; -import { rainbowSurgePalette } from '@mui/x-charts/colorPalettes'; -import { diamonds } from '../dataset/diamonds'; - -const dollarFormatter = new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD', - maximumFractionDigits: 0, -}); - -export default function ScatterRegressionLine() { - return ( - - - Relation between Weight and Price of Diamonds - - dollarFormatter.format(value), - label: 'Price (USD)', - }, - ]} - series={[ - { - id: 'diamonds', - datasetKeys: { x: 'carat', y: 'price' }, - markerSize: 2, - valueFormatter: (v) => `${dollarFormatter.format(v.y)} for ${v.x} carat`, - }, - ]} - > - - - Source: OpenML - - ); -} - -function RegressionLine({ seriesId }) { - const theme = useTheme(); - const palette = rainbowSurgePalette(theme.palette.mode); - const stroke = palette[2]; - const allSeries = useSeries(); - // Scatter's series processor is async, so `allSeries.scatter` is `undefined` - // until it settles. Keep hooks unconditional and bail out of rendering only. - const series = allSeries.scatter?.series[seriesId]; - const xScale = useXScale(series?.xAxisId ?? undefined); - const yScale = useYScale(series?.yAxisId ?? undefined); - const clipPathId = `linear-regression-clip-${useId()}`; - - if (!series) { - return null; - } - - const { m, b } = linearRegression(series.data ?? []); - - const xDomain = xScale.domain(); - const x1 = xScale(xDomain[0]); - const x2 = xScale(xDomain[1]); - const y1 = yScale(m * xDomain[0] + b); - const y2 = yScale(m * xDomain[1] + b); - - return ( - - - - - - - ); -} - -function linearRegression(points) { - const n = points.length; - - // Calculate sums - let sumX = 0, - sumY = 0, - sumXY = 0, - sumX2 = 0; - - for (let i = 0; i < n; i += 1) { - const x = points[i].x; - const y = points[i].y; - sumX += x; - sumY += y; - sumXY += x * y; - sumX2 += x * x; - } - - // Calculate slope (m) and intercept (b) - const m = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX); - const b = (sumY - m * sumX) / n; - - return { m, b }; -} diff --git a/docs/data/charts/scatter/ScatterWebGLRenderer.js b/docs/data/charts/scatter/ScatterWebGLRenderer.js deleted file mode 100644 index 2c84be9e97d43..0000000000000 --- a/docs/data/charts/scatter/ScatterWebGLRenderer.js +++ /dev/null @@ -1,65 +0,0 @@ -import * as React from 'react'; -import { ScatterChartPremium } from '@mui/x-charts-premium/ScatterChartPremium'; - -const POINTS_PER_SERIES = 200_000; - -// Inline mulberry32 — deterministic, ~20x faster than `chance.floating`. -// 800k calls during module load with Chance takes several seconds and stalls -// the Next.js build; this runs in ~50ms. -/* eslint-disable no-bitwise */ -function makeRandom(seed) { - let state = seed; - return () => { - state = (state + 0x6d2b79f5) | 0; - let t = state; - t = Math.imul(t ^ (t >>> 15), t | 1); - t ^= t + Math.imul(t ^ (t >>> 7), t | 61); - return ((t ^ (t >>> 14)) >>> 0) / 4_294_967_296; - }; -} -/* eslint-enable no-bitwise */ - -function generateSeries(offset, spread, seed) { - const rand = makeRandom(seed); - const data = new Array(POINTS_PER_SERIES); - for (let i = 0; i < POINTS_PER_SERIES; i += 1) { - const u1 = Math.max(rand(), 1e-6); - const u2 = rand(); - const r = Math.sqrt(-2 * Math.log(u1)); - const theta = 2 * Math.PI * u2; - data[i] = { - id: i, - x: offset + r * Math.cos(theta) * spread, - y: offset + r * Math.sin(theta) * spread, - }; - } - return data; -} - -const DATA_1 = generateSeries(0, 1, 42); -const DATA_2 = generateSeries(4, 1.5, 7); - -export default function ScatterWebGLRenderer() { - const series = React.useMemo( - () => [ - { label: 'Cluster A', data: DATA_1, markerSize: 1 }, - { label: 'Cluster B', data: DATA_2, markerSize: 1 }, - ], - [], - ); - - return ( - - ); -} diff --git a/docs/data/charts/scatter/ScatterWebGLRenderer.tsx.preview b/docs/data/charts/scatter/ScatterWebGLRenderer.tsx.preview deleted file mode 100644 index 6d2212511699a..0000000000000 --- a/docs/data/charts/scatter/ScatterWebGLRenderer.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/scatter/BasicScatter.tsx b/docs/data/charts/scatter/demos/basic-scatter/BasicScatter.tsx similarity index 78% rename from docs/data/charts/scatter/BasicScatter.tsx rename to docs/data/charts/scatter/demos/basic-scatter/BasicScatter.tsx index 69815168efb78..c02e84e2b8866 100644 --- a/docs/data/charts/scatter/BasicScatter.tsx +++ b/docs/data/charts/scatter/demos/basic-scatter/BasicScatter.tsx @@ -1,8 +1,9 @@ import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import data from '../dataset/random/scatterParallel.json'; +import data from '../../../dataset/random/scatterParallel.json'; export default function BasicScatter() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/scatter/demos/basic-scatter/client.ts b/docs/data/charts/scatter/demos/basic-scatter/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/scatter/demos/basic-scatter/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/scatter/demos/basic-scatter/index.ts b/docs/data/charts/scatter/demos/basic-scatter/index.ts new file mode 100644 index 0000000000000..a437069905776 --- /dev/null +++ b/docs/data/charts/scatter/demos/basic-scatter/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicScatter from './BasicScatter'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicScatter, { ClientProvider }); diff --git a/docs/data/charts/scatter/ClosestPointInteraction.tsx b/docs/data/charts/scatter/demos/closest-point-interaction/ClosestPointInteraction.tsx similarity index 96% rename from docs/data/charts/scatter/ClosestPointInteraction.tsx rename to docs/data/charts/scatter/demos/closest-point-interaction/ClosestPointInteraction.tsx index ba526e26b776f..82a06a6d0496c 100644 --- a/docs/data/charts/scatter/ClosestPointInteraction.tsx +++ b/docs/data/charts/scatter/demos/closest-point-interaction/ClosestPointInteraction.tsx @@ -8,9 +8,10 @@ import Slider from '@mui/material/Slider'; import { ScatterChart } from '@mui/x-charts/ScatterChart'; import Radio from '@mui/material/Radio'; import RadioGroup from '@mui/material/RadioGroup'; -import data from '../dataset/random/scatterParallel.json'; +import data from '../../../dataset/random/scatterParallel.json'; export default function ClosestPointInteraction() { + // @focus-start @padding 1 const [option, setOption] = React.useState<'item' | 'undefined' | 'numeric'>( 'numeric', ); @@ -93,4 +94,5 @@ export default function ClosestPointInteraction() {
); + // @focus-end } diff --git a/docs/data/charts/scatter/demos/closest-point-interaction/client.ts b/docs/data/charts/scatter/demos/closest-point-interaction/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/scatter/demos/closest-point-interaction/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/scatter/demos/closest-point-interaction/index.ts b/docs/data/charts/scatter/demos/closest-point-interaction/index.ts new file mode 100644 index 0000000000000..da5a38bf36264 --- /dev/null +++ b/docs/data/charts/scatter/demos/closest-point-interaction/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ClosestPointInteraction from './ClosestPointInteraction'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ClosestPointInteraction, { ClientProvider }); diff --git a/docs/data/charts/scatter/CustomScatter.tsx b/docs/data/charts/scatter/demos/custom-scatter/CustomScatter.tsx similarity index 96% rename from docs/data/charts/scatter/CustomScatter.tsx rename to docs/data/charts/scatter/demos/custom-scatter/CustomScatter.tsx index 1cad25f5c7830..17dc26a028b74 100644 --- a/docs/data/charts/scatter/CustomScatter.tsx +++ b/docs/data/charts/scatter/demos/custom-scatter/CustomScatter.tsx @@ -49,9 +49,11 @@ function LinkPoints({ seriesId, close }: { seriesId: string; close?: boolean }) export default function CustomScatter() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/scatter/demos/custom-scatter/client.ts b/docs/data/charts/scatter/demos/custom-scatter/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/scatter/demos/custom-scatter/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/scatter/demos/custom-scatter/index.ts b/docs/data/charts/scatter/demos/custom-scatter/index.ts new file mode 100644 index 0000000000000..cf52ee4c00ce3 --- /dev/null +++ b/docs/data/charts/scatter/demos/custom-scatter/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomScatter from './CustomScatter'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomScatter, { ClientProvider }); diff --git a/docs/data/charts/scatter/demos/grid-demo/GridDemo.tsx b/docs/data/charts/scatter/demos/grid-demo/GridDemo.tsx new file mode 100644 index 0000000000000..e9b3cd11e4326 --- /dev/null +++ b/docs/data/charts/scatter/demos/grid-demo/GridDemo.tsx @@ -0,0 +1,23 @@ +import { ScatterChart } from '@mui/x-charts/ScatterChart'; +import data from '../../../dataset/random/scatterParallel.json'; + +export default function GridDemo() { + return ( + // @focus-start @padding 2 + ({ x: v.x1, y: v.y1, id: v.id })), + }, + { + label: 'Series B', + data: data.map((v) => ({ x: v.x2, y: v.y2, id: v.id })), + }, + ]} + grid={{ vertical: true, horizontal: true }} + /> + // @focus-end + ); +} diff --git a/docs/data/charts/scatter/demos/grid-demo/client.ts b/docs/data/charts/scatter/demos/grid-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/scatter/demos/grid-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/scatter/demos/grid-demo/index.ts b/docs/data/charts/scatter/demos/grid-demo/index.ts new file mode 100644 index 0000000000000..7686107ff7e74 --- /dev/null +++ b/docs/data/charts/scatter/demos/grid-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GridDemo from './GridDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GridDemo, { ClientProvider }); diff --git a/docs/data/charts/scatter/ScatterAsyncRenderer.tsx b/docs/data/charts/scatter/demos/scatter-async-renderer/ScatterAsyncRenderer.tsx similarity index 99% rename from docs/data/charts/scatter/ScatterAsyncRenderer.tsx rename to docs/data/charts/scatter/demos/scatter-async-renderer/ScatterAsyncRenderer.tsx index fa0ab3e57eae1..12c8f8080c438 100644 --- a/docs/data/charts/scatter/ScatterAsyncRenderer.tsx +++ b/docs/data/charts/scatter/demos/scatter-async-renderer/ScatterAsyncRenderer.tsx @@ -170,6 +170,7 @@ function RenderTimers(props: { export default function ScatterAsyncRenderer() { // Default to progressive so first paint on docs load does not block the // main thread while rendering all points at once. + // @focus-start @padding 1 const [mode, setMode] = React.useState<'sync' | 'async'>('async'); const series = mode === 'sync' ? syncSeries : asyncSeries; @@ -252,4 +253,5 @@ export default function ScatterAsyncRenderer() {
); + // @focus-end } diff --git a/docs/data/charts/scatter/demos/scatter-async-renderer/client.ts b/docs/data/charts/scatter/demos/scatter-async-renderer/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-async-renderer/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/scatter/demos/scatter-async-renderer/index.ts b/docs/data/charts/scatter/demos/scatter-async-renderer/index.ts new file mode 100644 index 0000000000000..1c2cc402194b8 --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-async-renderer/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScatterAsyncRenderer from './ScatterAsyncRenderer'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScatterAsyncRenderer, { ClientProvider }); diff --git a/docs/data/charts/scatter/ScatterBatchRenderer.tsx b/docs/data/charts/scatter/demos/scatter-batch-renderer/ScatterBatchRenderer.tsx similarity index 88% rename from docs/data/charts/scatter/ScatterBatchRenderer.tsx rename to docs/data/charts/scatter/demos/scatter-batch-renderer/ScatterBatchRenderer.tsx index 6964fbe184d96..2f1f0b7579494 100644 --- a/docs/data/charts/scatter/ScatterBatchRenderer.tsx +++ b/docs/data/charts/scatter/demos/scatter-batch-renderer/ScatterBatchRenderer.tsx @@ -2,12 +2,13 @@ import Stack from '@mui/material/Stack'; import Paper from '@mui/material/Paper'; import Divider from '@mui/material/Divider'; import { ChartsTooltipContainer, useItemTooltip } from '@mui/x-charts/ChartsTooltip'; -import { ScatterChart, ScatterChartProps } from '@mui/x-charts/ScatterChart'; +import type { ScatterChartProps } from '@mui/x-charts/ScatterChart'; +import { ScatterChart } from '@mui/x-charts/ScatterChart'; import Typography from '@mui/material/Typography'; import { schemePaired } from 'd3-scale-chromatic'; -import { electricityGeneration2024Every6Hours } from '../dataset/electricityGeneration2024Every6Hours'; -import { carbonEmissions2024Every6Hours } from '../dataset/carbonEmissions2024Every6Hours'; -import { countryData, flags } from '../dataset/countryData'; +import { electricityGeneration2024Every6Hours } from '../../../dataset/electricityGeneration2024Every6Hours'; +import { carbonEmissions2024Every6Hours } from '../../../dataset/carbonEmissions2024Every6Hours'; +import { countryData, flags } from '../../../dataset/countryData'; const dateFormat = new Intl.DateTimeFormat(undefined, { month: 'short', @@ -73,11 +74,13 @@ const scatterChartsParams = { export default function ScatterBatchRenderer() { return ( + {/* @focus-start */} Life-cycle Carbon Intensity of Electricity Generation - 2024 Source: ENTSO-E, ElectricityMaps.com + {/* @focus-end */} ); } diff --git a/docs/data/charts/scatter/demos/scatter-batch-renderer/client.ts b/docs/data/charts/scatter/demos/scatter-batch-renderer/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-batch-renderer/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/scatter/demos/scatter-batch-renderer/index.ts b/docs/data/charts/scatter/demos/scatter-batch-renderer/index.ts new file mode 100644 index 0000000000000..44e2e019bce5e --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-batch-renderer/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScatterBatchRenderer from './ScatterBatchRenderer'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScatterBatchRenderer, { ClientProvider }); diff --git a/docs/data/charts/scatter/ScatterClick.tsx b/docs/data/charts/scatter/demos/scatter-click/ScatterClick.tsx similarity index 97% rename from docs/data/charts/scatter/ScatterClick.tsx rename to docs/data/charts/scatter/demos/scatter-click/ScatterClick.tsx index b07a2473616ec..79fafeb0744c3 100644 --- a/docs/data/charts/scatter/ScatterClick.tsx +++ b/docs/data/charts/scatter/demos/scatter-click/ScatterClick.tsx @@ -8,7 +8,7 @@ import ToggleButton from '@mui/material/ToggleButton'; import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; import { ScatterChart } from '@mui/x-charts/ScatterChart'; import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { ScatterItemIdentifier } from '@mui/x-charts/models'; +import type { ScatterItemIdentifier } from '@mui/x-charts/models'; const scatterChartsParams = { series: [ @@ -67,6 +67,7 @@ function getHitRadius(option: 'item' | 'infinite' | '50px') { } } export default function ScatterClick() { + // @focus-start @padding 1 const [option, setOption] = React.useState<'item' | 'infinite' | '50px'>( 'infinite', ); @@ -135,4 +136,5 @@ export default function ScatterClick() { ); + // @focus-end } diff --git a/docs/data/charts/scatter/demos/scatter-click/client.ts b/docs/data/charts/scatter/demos/scatter-click/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-click/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/scatter/demos/scatter-click/index.ts b/docs/data/charts/scatter/demos/scatter-click/index.ts new file mode 100644 index 0000000000000..17871b48b0602 --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-click/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScatterClick from './ScatterClick'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScatterClick, { ClientProvider }); diff --git a/docs/data/charts/scatter/ScatterCSSSelectors.tsx b/docs/data/charts/scatter/demos/scatter-css-selectors/ScatterCSSSelectors.tsx similarity index 77% rename from docs/data/charts/scatter/ScatterCSSSelectors.tsx rename to docs/data/charts/scatter/demos/scatter-css-selectors/ScatterCSSSelectors.tsx index 1992a37edf0dd..d5b288feb30fe 100644 --- a/docs/data/charts/scatter/ScatterCSSSelectors.tsx +++ b/docs/data/charts/scatter/demos/scatter-css-selectors/ScatterCSSSelectors.tsx @@ -1,5 +1,6 @@ -import { ScatterChart, ScatterSeries } from '@mui/x-charts/ScatterChart'; -import data from '../dataset/random/scatterParallel.json'; +import type { ScatterSeries } from '@mui/x-charts/ScatterChart'; +import { ScatterChart } from '@mui/x-charts/ScatterChart'; +import data from '../../../dataset/random/scatterParallel.json'; const series: ScatterSeries[] = [ { @@ -18,6 +19,7 @@ const series: ScatterSeries[] = [ export default function ScatterCSSSelectors() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/scatter/demos/scatter-css-selectors/client.ts b/docs/data/charts/scatter/demos/scatter-css-selectors/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-css-selectors/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/scatter/demos/scatter-css-selectors/index.ts b/docs/data/charts/scatter/demos/scatter-css-selectors/index.ts new file mode 100644 index 0000000000000..f54c600cc0a55 --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-css-selectors/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScatterCSSSelectors from './ScatterCSSSelectors'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScatterCSSSelectors, { ClientProvider }); diff --git a/docs/data/charts/scatter/ScatterCustomShape.tsx b/docs/data/charts/scatter/demos/scatter-custom-shape/ScatterCustomShape.tsx similarity index 84% rename from docs/data/charts/scatter/ScatterCustomShape.tsx rename to docs/data/charts/scatter/demos/scatter-custom-shape/ScatterCustomShape.tsx index 5473e227ae793..c2f3448891e25 100644 --- a/docs/data/charts/scatter/ScatterCustomShape.tsx +++ b/docs/data/charts/scatter/demos/scatter-custom-shape/ScatterCustomShape.tsx @@ -1,9 +1,11 @@ -import { ScatterChart, ScatterMarkerProps } from '@mui/x-charts/ScatterChart'; -import { ChartsLabelCustomMarkProps } from '@mui/x-charts/ChartsLabel'; -import data from '../dataset/random/scatterParallel.json'; +import type { ScatterMarkerProps } from '@mui/x-charts/ScatterChart'; +import { ScatterChart } from '@mui/x-charts/ScatterChart'; +import type { ChartsLabelCustomMarkProps } from '@mui/x-charts/ChartsLabel'; +import data from '../../../dataset/random/scatterParallel.json'; export default function ScatterCustomShape() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/scatter/demos/scatter-custom-shape/client.ts b/docs/data/charts/scatter/demos/scatter-custom-shape/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-custom-shape/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/scatter/demos/scatter-custom-shape/index.ts b/docs/data/charts/scatter/demos/scatter-custom-shape/index.ts new file mode 100644 index 0000000000000..3b5818cd19633 --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-custom-shape/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScatterCustomShape from './ScatterCustomShape'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScatterCustomShape, { ClientProvider }); diff --git a/docs/data/charts/scatter/ScatterCustomSize.tsx b/docs/data/charts/scatter/demos/scatter-custom-size/ScatterCustomSize.tsx similarity index 80% rename from docs/data/charts/scatter/ScatterCustomSize.tsx rename to docs/data/charts/scatter/demos/scatter-custom-size/ScatterCustomSize.tsx index cb288d35bfa38..cd64e6a8b3f78 100644 --- a/docs/data/charts/scatter/ScatterCustomSize.tsx +++ b/docs/data/charts/scatter/demos/scatter-custom-size/ScatterCustomSize.tsx @@ -1,8 +1,9 @@ import { ScatterChart } from '@mui/x-charts/ScatterChart'; -import data from '../dataset/random/scatterParallel.json'; +import data from '../../../dataset/random/scatterParallel.json'; export default function ScatterCustomSize() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/scatter/demos/scatter-custom-size/client.ts b/docs/data/charts/scatter/demos/scatter-custom-size/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-custom-size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/scatter/demos/scatter-custom-size/index.ts b/docs/data/charts/scatter/demos/scatter-custom-size/index.ts new file mode 100644 index 0000000000000..0594ea248c932 --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-custom-size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScatterCustomSize from './ScatterCustomSize'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScatterCustomSize, { ClientProvider }); diff --git a/docs/data/charts/scatter/ScatterDataset.tsx b/docs/data/charts/scatter/demos/scatter-dataset/ScatterDataset.tsx similarity index 98% rename from docs/data/charts/scatter/ScatterDataset.tsx rename to docs/data/charts/scatter/demos/scatter-dataset/ScatterDataset.tsx index 45a823c13715e..3ff4c57045110 100644 --- a/docs/data/charts/scatter/ScatterDataset.tsx +++ b/docs/data/charts/scatter/demos/scatter-dataset/ScatterDataset.tsx @@ -2,6 +2,7 @@ import { ScatterChart } from '@mui/x-charts/ScatterChart'; export default function ScatterDataset() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/scatter/demos/scatter-dataset/client.ts b/docs/data/charts/scatter/demos/scatter-dataset/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-dataset/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/scatter/demos/scatter-dataset/index.ts b/docs/data/charts/scatter/demos/scatter-dataset/index.ts new file mode 100644 index 0000000000000..cd82e2ac9cb98 --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-dataset/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScatterDataset from './ScatterDataset'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScatterDataset, { ClientProvider }); diff --git a/docs/data/charts/scatter/ScatterOverview.tsx b/docs/data/charts/scatter/demos/scatter-overview/ScatterOverview.tsx similarity index 93% rename from docs/data/charts/scatter/ScatterOverview.tsx rename to docs/data/charts/scatter/demos/scatter-overview/ScatterOverview.tsx index 7c9497aa16b26..b710a60c12bfd 100644 --- a/docs/data/charts/scatter/ScatterOverview.tsx +++ b/docs/data/charts/scatter/demos/scatter-overview/ScatterOverview.tsx @@ -1,11 +1,12 @@ -import { ScatterChart, ScatterSeries } from '@mui/x-charts/ScatterChart'; +import type { ScatterSeries } from '@mui/x-charts/ScatterChart'; +import { ScatterChart } from '@mui/x-charts/ScatterChart'; import { ChartsTooltipContainer, useItemTooltip } from '@mui/x-charts/ChartsTooltip'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import Divider from '@mui/material/Divider'; import Stack from '@mui/material/Stack'; -import data from '../dataset/transistorCPUdata'; +import data from '../../../dataset/transistorCPUdata'; const chartSetting = { yAxis: [{ width: 50, scaleType: 'log' as const }], @@ -92,6 +93,7 @@ function CustomTooltip() { export default function ScatterOverview() { return ( + {/* @focus-start */} Processor density (in transistor/mm²) + {/* @focus-end */} ); } diff --git a/docs/data/charts/scatter/demos/scatter-overview/client.ts b/docs/data/charts/scatter/demos/scatter-overview/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-overview/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/scatter/demos/scatter-overview/index.ts b/docs/data/charts/scatter/demos/scatter-overview/index.ts new file mode 100644 index 0000000000000..980e11d5dfd14 --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-overview/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScatterOverview from './ScatterOverview'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScatterOverview, { ClientProvider }); diff --git a/docs/data/charts/scatter/ScatterRegressionLine.tsx b/docs/data/charts/scatter/demos/scatter-regression-line/ScatterRegressionLine.tsx similarity index 96% rename from docs/data/charts/scatter/ScatterRegressionLine.tsx rename to docs/data/charts/scatter/demos/scatter-regression-line/ScatterRegressionLine.tsx index ab9e632f55b25..ddecb906a6ccf 100644 --- a/docs/data/charts/scatter/ScatterRegressionLine.tsx +++ b/docs/data/charts/scatter/demos/scatter-regression-line/ScatterRegressionLine.tsx @@ -7,7 +7,7 @@ import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import { useTheme } from '@mui/material/styles'; import { rainbowSurgePalette } from '@mui/x-charts/colorPalettes'; -import { diamonds } from '../dataset/diamonds'; +import { diamonds } from '../../../dataset/diamonds'; const dollarFormatter = new Intl.NumberFormat('en-US', { style: 'currency', @@ -18,6 +18,7 @@ const dollarFormatter = new Intl.NumberFormat('en-US', { export default function ScatterRegressionLine() { return ( + {/* @focus-start */} Relation between Weight and Price of Diamonds @@ -46,6 +47,7 @@ export default function ScatterRegressionLine() { Source: OpenML + {/* @focus-end */} ); } diff --git a/docs/data/charts/scatter/demos/scatter-regression-line/client.ts b/docs/data/charts/scatter/demos/scatter-regression-line/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-regression-line/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/scatter/demos/scatter-regression-line/index.ts b/docs/data/charts/scatter/demos/scatter-regression-line/index.ts new file mode 100644 index 0000000000000..d46266f4a605d --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-regression-line/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScatterRegressionLine from './ScatterRegressionLine'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScatterRegressionLine, { ClientProvider }); diff --git a/docs/data/charts/scatter/ScatterWebGLRenderer.tsx b/docs/data/charts/scatter/demos/scatter-web-gl-renderer/ScatterWebGLRenderer.tsx similarity index 97% rename from docs/data/charts/scatter/ScatterWebGLRenderer.tsx rename to docs/data/charts/scatter/demos/scatter-web-gl-renderer/ScatterWebGLRenderer.tsx index 70655472912b7..72ff901ba4cec 100644 --- a/docs/data/charts/scatter/ScatterWebGLRenderer.tsx +++ b/docs/data/charts/scatter/demos/scatter-web-gl-renderer/ScatterWebGLRenderer.tsx @@ -40,6 +40,7 @@ const DATA_1 = generateSeries(0, 1, 42); const DATA_2 = generateSeries(4, 1.5, 7); export default function ScatterWebGLRenderer() { + // @focus-start @padding 1 const series = React.useMemo( () => [ { label: 'Cluster A', data: DATA_1, markerSize: 1 }, @@ -62,4 +63,5 @@ export default function ScatterWebGLRenderer() { }} /> ); + // @focus-end } diff --git a/docs/data/charts/scatter/demos/scatter-web-gl-renderer/client.ts b/docs/data/charts/scatter/demos/scatter-web-gl-renderer/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-web-gl-renderer/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/scatter/demos/scatter-web-gl-renderer/index.ts b/docs/data/charts/scatter/demos/scatter-web-gl-renderer/index.ts new file mode 100644 index 0000000000000..04969823a378d --- /dev/null +++ b/docs/data/charts/scatter/demos/scatter-web-gl-renderer/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScatterWebGLRenderer from './ScatterWebGLRenderer'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScatterWebGLRenderer, { ClientProvider }); diff --git a/docs/data/charts/scatter/scatter.md b/docs/data/charts/scatter/scatter.md index 059dc48aa2fca..649549327153f 100644 --- a/docs/data/charts/scatter/scatter.md +++ b/docs/data/charts/scatter/scatter.md @@ -14,7 +14,7 @@ A scatter chart plots two variables as points on a surface, so you can see how o Each point is one observation, placed by its values on the two axes. Scatter charts are often used for statistical analysis, scientific data, and performance metrics. -{{"demo": "ScatterOverview.js", "disableAd": true, "defaultCodeOpen": false}} +{{"component": "file://./demos/scatter-overview/index.ts", "disableAd": true, "collapseToEmpty": true}} ## Basics @@ -25,7 +25,7 @@ You can also use the `dataset` prop together with `datasetKeys` instead of putti Add an optional `id` on each point so it keeps a stable identity when the data changes. If you animate the series, `id` lets added or removed points transition predictably; without it, updates follow each point's index in the array and existing markers can be repurposed in ways that look wrong. -{{"demo": "BasicScatter.js"}} +{{"component": "file://./demos/basic-scatter/index.ts"}} ### Using a dataset @@ -37,7 +37,7 @@ You can also include optional `id`, `colorValue`, and `sizeValue` keys. See the [Dataset](/x/react-charts/dataset/) page to learn more. -{{"demo": "ScatterDataset.js"}} +{{"component": "file://./demos/scatter-dataset/index.ts"}} ## Interaction @@ -48,7 +48,7 @@ Use the `hitAreaRadius` prop with a number to limit how far the pointer can be f If the pointer is farther than that from any point, no item is selected. Use `hitAreaRadius` with `"item"` to trigger interactions only when the pointer is directly over a marker, instead of selecting whichever point is closest to the pointer in the drawing area. -{{"demo": "ClosestPointInteraction.js"}} +{{"component": "file://./demos/closest-point-interaction/index.ts"}} ## Click event @@ -66,7 +66,7 @@ When `hitAreaRadius` is `"item"`, the user must click directly on the point, and Otherwise, click behavior matches the [interaction section](#interaction), and the mouse event comes from the SVG container. -{{"demo": "ScatterClick.js"}} +{{"component": "file://./demos/scatter-click/index.ts"}} ## Bubble chart @@ -79,7 +79,7 @@ Those are configured with See the [Bubble chart](/x/react-charts/bubble/) page for demos and details. -{{"demo": "../bubble/BubbleChartCO2Emissions.js"}} +{{"component": "file://../bubble/demos/bubble-chart-co2-emissions/index.ts"}} ## Styling @@ -89,7 +89,7 @@ You can add a grid in the background of the chart with the `grid` prop. See [Axis—Grid](/x/react-charts/axis-ticks/#grid) for details. -{{"demo": "GridDemo.js"}} +{{"component": "file://./demos/grid-demo/index.ts"}} ### CSS @@ -103,7 +103,7 @@ Use the `scatterClasses.root` class to select all marker groups. The example below customizes the highlighted style by series. -{{"demo": "ScatterCSSSelectors.js"}} +{{"component": "file://./demos/scatter-css-selectors/index.ts"}} ### Shape @@ -111,7 +111,7 @@ Pass a component to the `marker` slot to customize the shape of scatter points. To keep the legend and tooltip in sync with the custom shape, set the `labelMarkType` property on each series, as shown in the example below. -{{"demo": "ScatterCustomShape.js"}} +{{"component": "file://./demos/scatter-custom-shape/index.ts"}} ### Size @@ -120,7 +120,7 @@ For circles, `markerSize` is the radius in pixels. See the [Bubble chart page](/x/react-charts/bubble/) to modify mark size based on their value. -{{"demo": "ScatterCustomSize.js"}} +{{"component": "file://./demos/scatter-custom-size/index.ts"}} ## Plot customization @@ -131,7 +131,7 @@ It returns the series order and details for each series (data points, color, and See [Custom components](/x/react-charts/components/) for more ways to customize charts. -{{"demo": "CustomScatter.js"}} +{{"component": "file://./demos/custom-scatter/index.ts"}} ## Performance @@ -177,7 +177,7 @@ Use the buttons to compare the single and progressive renderers: the spinner kee Zoom and pan the chart to see the progressive renderer keep only the first level painted while you interact, then fill in the rest once the interaction settles. The first level is the first N points of each series, so it is representative only when the data is unordered; data sorted along an axis may show a partial cloud until the interaction settles. -{{"demo": "ScatterAsyncRenderer.js"}} +{{"component": "file://./demos/scatter-async-renderer/index.ts"}} ### Batch renderer @@ -195,7 +195,7 @@ Behavior also differs in a few ways: The example below uses the `renderer` prop to render 16,000 points with better performance. -{{"demo": "ScatterBatchRenderer.js"}} +{{"component": "file://./demos/scatter-batch-renderer/index.ts"}} ### WebGL renderer [](/x/introduction/licensing/#premium-plan 'Premium plan') @@ -204,7 +204,7 @@ This bypasses per-point SVG entirely and trades item-level interactivity for thr The example below renders 200,000 points. -{{"demo": "ScatterWebGLRenderer.js"}} +{{"component": "file://./demos/scatter-web-gl-renderer/index.ts"}} ## Composition @@ -244,4 +244,4 @@ See [Composition—clipping](/x/react-charts/composition/#clipping) for details. Add a regression line to a scatter plot by composing a custom chart and drawing the line yourself. -{{"demo": "ScatterRegressionLine.js"}} +{{"component": "file://./demos/scatter-regression-line/index.ts"}} diff --git a/docs/data/charts/sparkline/AreaSparkLine.js b/docs/data/charts/sparkline/AreaSparkLine.js deleted file mode 100644 index 693c1553bda34..0000000000000 --- a/docs/data/charts/sparkline/AreaSparkLine.js +++ /dev/null @@ -1,21 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; - -export default function AreaSparkLine() { - return ( - - - - - - - - - ); -} diff --git a/docs/data/charts/sparkline/AreaSparkLine.tsx.preview b/docs/data/charts/sparkline/AreaSparkLine.tsx.preview deleted file mode 100644 index 962f056d4730c..0000000000000 --- a/docs/data/charts/sparkline/AreaSparkLine.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/docs/data/charts/sparkline/BasicSparkLine.js b/docs/data/charts/sparkline/BasicSparkLine.js deleted file mode 100644 index cad2597ecdcbe..0000000000000 --- a/docs/data/charts/sparkline/BasicSparkLine.js +++ /dev/null @@ -1,31 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; - -export default function BasicSparkLine() { - return ( - - - - - - - - - ); -} diff --git a/docs/data/charts/sparkline/BasicSparkLine.tsx.preview b/docs/data/charts/sparkline/BasicSparkLine.tsx.preview deleted file mode 100644 index 92a8fef31c48e..0000000000000 --- a/docs/data/charts/sparkline/BasicSparkLine.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/docs/data/charts/sparkline/BasicSparkLineCustomization.js b/docs/data/charts/sparkline/BasicSparkLineCustomization.js deleted file mode 100644 index 68ab42d27670f..0000000000000 --- a/docs/data/charts/sparkline/BasicSparkLineCustomization.js +++ /dev/null @@ -1,69 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Switch from '@mui/material/Switch'; -import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; - -export default function BasicSparkLineCustomization() { - const [showHighlight, setShowHighlight] = React.useState(true); - const [showTooltip, setShowTooltip] = React.useState(true); - - const handleHighlightChange = (event) => { - setShowHighlight(event.target.checked); - }; - - const handleTooltipChange = (event) => { - setShowTooltip(event.target.checked); - }; - - return ( - - - - } - label="showHighlight" - labelPlacement="end" - /> - - } - label="showTooltip" - labelPlacement="end" - /> - - - - - - - - - - - ); -} diff --git a/docs/data/charts/sparkline/ColorCustomization.js b/docs/data/charts/sparkline/ColorCustomization.js deleted file mode 100644 index f664f00dc3368..0000000000000 --- a/docs/data/charts/sparkline/ColorCustomization.js +++ /dev/null @@ -1,17 +0,0 @@ -import Stack from '@mui/material/Stack'; -import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; - -const settings = { - height: 100, - yAxis: { min: 0, max: 20 }, -}; - -const values = [0, 2, 3, 4, 6, 8, 7, 9, 15, 6, 8, 7, 12]; - -export default function ColorCustomization() { - return ( - - - - ); -} diff --git a/docs/data/charts/sparkline/ColorCustomization.tsx.preview b/docs/data/charts/sparkline/ColorCustomization.tsx.preview deleted file mode 100644 index 29e0fd333e956..0000000000000 --- a/docs/data/charts/sparkline/ColorCustomization.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/sparkline/ColorCustomizationMode.js b/docs/data/charts/sparkline/ColorCustomizationMode.js deleted file mode 100644 index 95667d9a91c2c..0000000000000 --- a/docs/data/charts/sparkline/ColorCustomizationMode.js +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react'; -import { createTheme, useTheme, ThemeProvider } from '@mui/material/styles'; -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; -import Brightness4Icon from '@mui/icons-material/Brightness4'; -import Brightness7Icon from '@mui/icons-material/Brightness7'; -import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; -import Paper from '@mui/material/Paper'; - -const settings = { - height: 100, - yAxis: { min: 0, max: 20 }, -}; - -const values = [0, 2, 3, 4, 6, 8, 7, 9, 15, 6, 8, 7, 12]; - -export default function ColorCustomizationMode() { - return ( - - (mode === 'light' ? 'black' : 'white')} - {...settings} - /> - - ); -} - -function DarkModeWrapper(props) { - const theme = useTheme(); - const [colorMode, setColorMode] = React.useState(theme.palette.mode); - - const newTheme = createTheme({ palette: { mode: colorMode } }); - return ( - - - - {props.children} - - - ); -} diff --git a/docs/data/charts/sparkline/ColorCustomizationMode.tsx.preview b/docs/data/charts/sparkline/ColorCustomizationMode.tsx.preview deleted file mode 100644 index 6aeac2f38438a..0000000000000 --- a/docs/data/charts/sparkline/ColorCustomizationMode.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - - (mode === 'light' ? 'black' : 'white')} - {...settings} - /> - \ No newline at end of file diff --git a/docs/data/charts/sparkline/CustomAxis.js b/docs/data/charts/sparkline/CustomAxis.js deleted file mode 100644 index d8db1c8b0e1b3..0000000000000 --- a/docs/data/charts/sparkline/CustomAxis.js +++ /dev/null @@ -1,55 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; - -export default function CustomAxis() { - return ( - - - value.toISOString().slice(0, 10), - }} - height={100} - showTooltip - showHighlight - /> - - - value.getFullYear(), - }} - /> - - - ); -} diff --git a/docs/data/charts/sparkline/CustomDomainYAxis.js b/docs/data/charts/sparkline/CustomDomainYAxis.js deleted file mode 100644 index dc93610adfb33..0000000000000 --- a/docs/data/charts/sparkline/CustomDomainYAxis.js +++ /dev/null @@ -1,88 +0,0 @@ -import * as React from 'react'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; - -import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; - -const settings = { - valueFormatter: (value) => `${value}%`, - height: 100, - showTooltip: true, - showHighlight: true, - data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91], - margin: { top: 10, bottom: 20, left: 5, right: 5 }, - sx: (theme) => ({ - borderWidth: 1, - borderStyle: 'solid', - borderColor: theme.palette.divider, - }), -}; - -// Extend a value to match a multiple of the step. -function extend(value, step) { - if (value > 0) { - // If >0 go to the next step - return step * Math.ceil(value / step); - } - // If <0 go to the previous step - return step * Math.floor(value / step); -} - -const yRange = { - nice: '-100, 100', - strict: '-15, 92', - function: '-20, 100', -}; -export default function CustomDomainYAxis() { - const [domainLimitKey, setDomainLimitKey] = React.useState('nice'); - - const domainLimit = - domainLimitKey === 'function' - ? (min, max) => ({ - min: extend(min.valueOf(), 10), - max: extend(max.valueOf(), 10), - }) - : domainLimitKey; - return ( - - - setDomainLimitKey(event.target.value)} - label="domain limit" - sx={{ minWidth: 150, mb: 2 }} - > - nice - strict - function - - y-axis range: {yRange[domainLimitKey]} - - - - - - - - - - - ); -} diff --git a/docs/data/charts/sparkline/CustomDomainYAxis.tsx b/docs/data/charts/sparkline/CustomDomainYAxis.tsx deleted file mode 100644 index 061f21a5ff9a1..0000000000000 --- a/docs/data/charts/sparkline/CustomDomainYAxis.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import * as React from 'react'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import { Theme } from '@mui/material/styles'; -import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; -import type { NumberValue } from '@mui/x-charts/models'; - -const settings = { - valueFormatter: (value: number | null) => `${value}%`, - height: 100, - showTooltip: true, - showHighlight: true, - data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91], - margin: { top: 10, bottom: 20, left: 5, right: 5 }, - sx: (theme: Theme) => ({ - borderWidth: 1, - borderStyle: 'solid', - borderColor: theme.palette.divider, - }), -}; - -// Extend a value to match a multiple of the step. -function extend(value: number, step: number) { - if (value > 0) { - // If >0 go to the next step - return step * Math.ceil(value / step); - } - // If <0 go to the previous step - return step * Math.floor(value / step); -} - -const yRange = { - nice: '-100, 100', - strict: '-15, 92', - function: '-20, 100', -}; -export default function CustomDomainYAxis() { - const [domainLimitKey, setDomainLimitKey] = React.useState< - 'nice' | 'strict' | 'function' - >('nice'); - - const domainLimit = - domainLimitKey === 'function' - ? (min: NumberValue, max: NumberValue) => ({ - min: extend(min.valueOf(), 10), - max: extend(max.valueOf(), 10), - }) - : domainLimitKey; - return ( - - - - setDomainLimitKey(event.target.value as 'nice' | 'strict' | 'function') - } - label="domain limit" - sx={{ minWidth: 150, mb: 2 }} - > - nice - strict - function - - y-axis range: {yRange[domainLimitKey]} - - - - - - - - - - - ); -} diff --git a/docs/data/charts/sparkline/CustomYAxis.js b/docs/data/charts/sparkline/CustomYAxis.js deleted file mode 100644 index fe4fe9faec8a7..0000000000000 --- a/docs/data/charts/sparkline/CustomYAxis.js +++ /dev/null @@ -1,53 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; - -const settings = { - valueFormatter: (value) => `${value}%`, - height: 100, - showTooltip: true, - showHighlight: true, -}; - -const smallValues = [0, 2, 3, 4, 6, 8, 7, 9, 15, 6, 8, 7, 12]; -const largeValues = [60, 65, 66, 68, 87, 82, 83, 89, 92, 75, 76, 77, 91]; -export default function CustomYAxis() { - return ( - - Without fixed y-range - - - - - - - - - With y-range fixed to [0, 100] - - - - - - - - - - ); -} diff --git a/docs/data/charts/sparkline/NpmSparkLine.js b/docs/data/charts/sparkline/NpmSparkLine.js deleted file mode 100644 index 6d77d958a2e4f..0000000000000 --- a/docs/data/charts/sparkline/NpmSparkLine.js +++ /dev/null @@ -1,136 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; -import { lineClasses } from '@mui/x-charts/LineChart'; -import { chartsAxisHighlightClasses } from '@mui/x-charts/ChartsAxisHighlight'; -import Box from '@mui/material/Box'; -import data from './weekly-downloads.json'; - -const downloads = data.map((item) => item.downloads); -const weeks = data.map((item) => `${item.start} to ${item.end}`); - -const settings = { - data: downloads, - baseline: 'min', - margin: { bottom: 0, top: 5, left: 4, right: 0 }, - xAxis: { id: 'week-axis', data: weeks }, - yAxis: { - domainLimit: (_, maxValue) => ({ - min: -maxValue / 6, // Hack to add 5px bellow 0 like npm. - max: maxValue, - }), - }, - sx: { - [`& .${lineClasses.area}`]: { opacity: 0.2 }, - [`& .${lineClasses.line}`]: { strokeWidth: 3 }, - [`& .${chartsAxisHighlightClasses.root}`]: { - stroke: 'rgb(137, 86, 255)', - strokeDasharray: 'none', - strokeWidth: 2, - }, - }, - slotProps: { - lineHighlight: { r: 4 }, // Reduce the radius of the axis highlight. - }, - clipAreaOffset: { top: 2, bottom: 2 }, - axisHighlight: { x: 'line' }, -}; - -export default function NpmSparkLine() { - const [weekIndex, setWeekIndex] = React.useState(null); - - return ( - { - switch (event.key) { - case 'ArrowLeft': - setWeekIndex((p) => - p === null ? weeks.length - 1 : (weeks.length + p - 1) % weeks.length, - ); - break; - case 'ArrowRight': - setWeekIndex((p) => (p === null ? 0 : (p + 1) % weeks.length)); - break; - default: - } - }} - onFocus={() => { - setWeekIndex((p) => (p === null ? 0 : p)); - }} - role="button" - aria-label="Showing weekly downloads" - tabIndex={0} - sx={{ - width: '100%', - height: '100%', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }} - > - - - - {weekIndex === null ? 'Weekly Downloads' : weeks[weekIndex]} - - - - {downloads[weekIndex ?? downloads.length - 1].toLocaleString()} - - - { - setWeekIndex(axisItems[0]?.dataIndex ?? null); - }} - highlightedAxis={ - weekIndex === null - ? [] - : [{ axisId: 'week-axis', dataIndex: weekIndex }] - } - {...settings} - /> - - - - ); -} - -function DownloadIcon(props) { - return ( - - ); -} diff --git a/docs/data/charts/sparkline/SparklineLineWidth.js b/docs/data/charts/sparkline/SparklineLineWidth.js deleted file mode 100644 index 99314cb49a324..0000000000000 --- a/docs/data/charts/sparkline/SparklineLineWidth.js +++ /dev/null @@ -1,89 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import Slider from '@mui/material/Slider'; - -const values = [8, 7, 9, 0, 0, 5, 20, 20, 7]; - -const settings = { - data: values, - height: 100, - showHighlight: true, - showTooltip: true, -}; - -export default function SparklineLineWidth() { - const [strokeWidth, setStrokeWidth] = React.useState(2); - const [disableClipping, setDisableClipping] = React.useState(false); - const [clipAreaOffset, setClipAreaOffset] = React.useState(1); - - return ( - - - setDisableClipping(event.target.checked)} - /> - } - label="Disable Clipping" - labelPlacement="end" - /> - setStrokeWidth(value)} - /> - } - label="Stroke Width" - labelPlacement="top" - /> - setClipAreaOffset(value)} - /> - } - label="Clip Area Offset" - labelPlacement="top" - /> - - - - - - ); -} diff --git a/docs/data/charts/sparkline/AreaSparkLine.tsx b/docs/data/charts/sparkline/demos/area-spark-line/AreaSparkLine.tsx similarity index 91% rename from docs/data/charts/sparkline/AreaSparkLine.tsx rename to docs/data/charts/sparkline/demos/area-spark-line/AreaSparkLine.tsx index 693c1553bda34..73f95a524cecb 100644 --- a/docs/data/charts/sparkline/AreaSparkLine.tsx +++ b/docs/data/charts/sparkline/demos/area-spark-line/AreaSparkLine.tsx @@ -5,6 +5,7 @@ import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; export default function AreaSparkLine() { return ( + {/* @focus-start */} @@ -16,6 +17,7 @@ export default function AreaSparkLine() { area /> + {/* @focus-end */} ); } diff --git a/docs/data/charts/sparkline/demos/area-spark-line/client.ts b/docs/data/charts/sparkline/demos/area-spark-line/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sparkline/demos/area-spark-line/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sparkline/demos/area-spark-line/index.ts b/docs/data/charts/sparkline/demos/area-spark-line/index.ts new file mode 100644 index 0000000000000..37baa2d5737ea --- /dev/null +++ b/docs/data/charts/sparkline/demos/area-spark-line/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AreaSparkLine from './AreaSparkLine'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AreaSparkLine, { ClientProvider }); diff --git a/docs/data/charts/sparkline/BasicSparkLineCustomization.tsx b/docs/data/charts/sparkline/demos/basic-spark-line-customization/BasicSparkLineCustomization.tsx similarity index 97% rename from docs/data/charts/sparkline/BasicSparkLineCustomization.tsx rename to docs/data/charts/sparkline/demos/basic-spark-line-customization/BasicSparkLineCustomization.tsx index 68fa54554f815..2da29c005c67d 100644 --- a/docs/data/charts/sparkline/BasicSparkLineCustomization.tsx +++ b/docs/data/charts/sparkline/demos/basic-spark-line-customization/BasicSparkLineCustomization.tsx @@ -6,6 +6,7 @@ import Switch from '@mui/material/Switch'; import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; export default function BasicSparkLineCustomization() { + // @focus-start @padding 1 const [showHighlight, setShowHighlight] = React.useState(true); const [showTooltip, setShowTooltip] = React.useState(true); @@ -66,4 +67,5 @@ export default function BasicSparkLineCustomization() { ); + // @focus-end } diff --git a/docs/data/charts/sparkline/demos/basic-spark-line-customization/client.ts b/docs/data/charts/sparkline/demos/basic-spark-line-customization/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sparkline/demos/basic-spark-line-customization/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sparkline/demos/basic-spark-line-customization/index.ts b/docs/data/charts/sparkline/demos/basic-spark-line-customization/index.ts new file mode 100644 index 0000000000000..5ac08de83cf03 --- /dev/null +++ b/docs/data/charts/sparkline/demos/basic-spark-line-customization/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicSparkLineCustomization from './BasicSparkLineCustomization'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicSparkLineCustomization, { ClientProvider }); diff --git a/docs/data/charts/sparkline/BasicSparkLine.tsx b/docs/data/charts/sparkline/demos/basic-spark-line/BasicSparkLine.tsx similarity index 93% rename from docs/data/charts/sparkline/BasicSparkLine.tsx rename to docs/data/charts/sparkline/demos/basic-spark-line/BasicSparkLine.tsx index 053469e82c220..7964fa760b461 100644 --- a/docs/data/charts/sparkline/BasicSparkLine.tsx +++ b/docs/data/charts/sparkline/demos/basic-spark-line/BasicSparkLine.tsx @@ -17,6 +17,7 @@ export default function BasicSparkLine() { }, }} > + {/* @focus-start */} @@ -27,6 +28,7 @@ export default function BasicSparkLine() { height={100} /> + {/* @focus-end */} ); } diff --git a/docs/data/charts/sparkline/demos/basic-spark-line/client.ts b/docs/data/charts/sparkline/demos/basic-spark-line/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sparkline/demos/basic-spark-line/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sparkline/demos/basic-spark-line/index.ts b/docs/data/charts/sparkline/demos/basic-spark-line/index.ts new file mode 100644 index 0000000000000..36f980e4026f0 --- /dev/null +++ b/docs/data/charts/sparkline/demos/basic-spark-line/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicSparkLine from './BasicSparkLine'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicSparkLine, { ClientProvider }); diff --git a/docs/data/charts/sparkline/ColorCustomizationMode.tsx b/docs/data/charts/sparkline/demos/color-customization-mode/ColorCustomizationMode.tsx similarity index 96% rename from docs/data/charts/sparkline/ColorCustomizationMode.tsx rename to docs/data/charts/sparkline/demos/color-customization-mode/ColorCustomizationMode.tsx index 352e5b4428b47..34a5c75807fb7 100644 --- a/docs/data/charts/sparkline/ColorCustomizationMode.tsx +++ b/docs/data/charts/sparkline/demos/color-customization-mode/ColorCustomizationMode.tsx @@ -16,6 +16,7 @@ const values = [0, 2, 3, 4, 6, 8, 7, 9, 15, 6, 8, 7, 12]; export default function ColorCustomizationMode() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/sparkline/demos/color-customization-mode/client.ts b/docs/data/charts/sparkline/demos/color-customization-mode/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sparkline/demos/color-customization-mode/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sparkline/demos/color-customization-mode/index.ts b/docs/data/charts/sparkline/demos/color-customization-mode/index.ts new file mode 100644 index 0000000000000..672d78221ffc3 --- /dev/null +++ b/docs/data/charts/sparkline/demos/color-customization-mode/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorCustomizationMode from './ColorCustomizationMode'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorCustomizationMode, { ClientProvider }); diff --git a/docs/data/charts/sparkline/ColorCustomization.tsx b/docs/data/charts/sparkline/demos/color-customization/ColorCustomization.tsx similarity index 95% rename from docs/data/charts/sparkline/ColorCustomization.tsx rename to docs/data/charts/sparkline/demos/color-customization/ColorCustomization.tsx index 49a97647b088d..40df6535a962b 100644 --- a/docs/data/charts/sparkline/ColorCustomization.tsx +++ b/docs/data/charts/sparkline/demos/color-customization/ColorCustomization.tsx @@ -11,6 +11,7 @@ const values = [0, 2, 3, 4, 6, 8, 7, 9, 15, 6, 8, 7, 12]; export default function ColorCustomization() { return ( + {/** @focus */} ); diff --git a/docs/data/charts/sparkline/demos/color-customization/client.ts b/docs/data/charts/sparkline/demos/color-customization/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sparkline/demos/color-customization/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sparkline/demos/color-customization/index.ts b/docs/data/charts/sparkline/demos/color-customization/index.ts new file mode 100644 index 0000000000000..fc4da6f045177 --- /dev/null +++ b/docs/data/charts/sparkline/demos/color-customization/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorCustomization from './ColorCustomization'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorCustomization, { ClientProvider }); diff --git a/docs/data/charts/sparkline/CustomAxis.tsx b/docs/data/charts/sparkline/demos/custom-axis/CustomAxis.tsx similarity index 96% rename from docs/data/charts/sparkline/CustomAxis.tsx rename to docs/data/charts/sparkline/demos/custom-axis/CustomAxis.tsx index d8db1c8b0e1b3..070070c8bb821 100644 --- a/docs/data/charts/sparkline/CustomAxis.tsx +++ b/docs/data/charts/sparkline/demos/custom-axis/CustomAxis.tsx @@ -5,6 +5,7 @@ import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; export default function CustomAxis() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/sparkline/demos/custom-axis/client.ts b/docs/data/charts/sparkline/demos/custom-axis/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sparkline/demos/custom-axis/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sparkline/demos/custom-axis/index.ts b/docs/data/charts/sparkline/demos/custom-axis/index.ts new file mode 100644 index 0000000000000..13ab9021e4c38 --- /dev/null +++ b/docs/data/charts/sparkline/demos/custom-axis/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomAxis from './CustomAxis'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomAxis, { ClientProvider }); diff --git a/docs/data/charts/sparkline/demos/custom-domain-y-axis/CustomDomainYAxis.tsx b/docs/data/charts/sparkline/demos/custom-domain-y-axis/CustomDomainYAxis.tsx new file mode 100644 index 0000000000000..373384daddf47 --- /dev/null +++ b/docs/data/charts/sparkline/demos/custom-domain-y-axis/CustomDomainYAxis.tsx @@ -0,0 +1,95 @@ +import * as React from 'react'; +import TextField from '@mui/material/TextField'; +import MenuItem from '@mui/material/MenuItem'; +import Stack from '@mui/material/Stack'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import type { Theme } from '@mui/material/styles'; +import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; +import type { NumberValue } from '@mui/x-charts/models'; + +const settings = { + valueFormatter: (value: number | null) => `${value}%`, + height: 100, + showTooltip: true, + showHighlight: true, + data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91], + margin: { top: 10, bottom: 20, left: 5, right: 5 }, + sx: (theme: Theme) => ({ + borderWidth: 1, + borderStyle: 'solid', + borderColor: theme.palette.divider, + }), +}; + +// Extend a value to match a multiple of the step. +function extend(value: number, step: number) { + if (value > 0) { + // If >0 go to the next step + return step * Math.ceil(value / step); + } + // If <0 go to the previous step + return step * Math.floor(value / step); +} + +const yRange = { + nice: '-100, 100', + strict: '-15, 92', + function: '-20, 100', +}; +export default function CustomDomainYAxis() { + // @focus-start @padding 1 + const [domainLimitKey, setDomainLimitKey] = React.useState< + 'nice' | 'strict' | 'function' + >('nice'); + + const domainLimit = + domainLimitKey === 'function' + ? (min: NumberValue, max: NumberValue) => ({ + min: extend(min.valueOf(), 10), + max: extend(max.valueOf(), 10), + }) + : domainLimitKey; + return ( + + + + setDomainLimitKey(event.target.value as 'nice' | 'strict' | 'function') + } + label="domain limit" + sx={{ minWidth: 150, mb: 2 }} + > + nice + strict + function + + y-axis range: {yRange[domainLimitKey]} + + + + + + + + + + + ); + // @focus-end +} diff --git a/docs/data/charts/sparkline/demos/custom-domain-y-axis/client.ts b/docs/data/charts/sparkline/demos/custom-domain-y-axis/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sparkline/demos/custom-domain-y-axis/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sparkline/demos/custom-domain-y-axis/index.ts b/docs/data/charts/sparkline/demos/custom-domain-y-axis/index.ts new file mode 100644 index 0000000000000..22009d536a290 --- /dev/null +++ b/docs/data/charts/sparkline/demos/custom-domain-y-axis/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomDomainYAxis from './CustomDomainYAxis'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomDomainYAxis, { ClientProvider }); diff --git a/docs/data/charts/sparkline/CustomYAxis.tsx b/docs/data/charts/sparkline/demos/custom-y-axis/CustomYAxis.tsx similarity index 96% rename from docs/data/charts/sparkline/CustomYAxis.tsx rename to docs/data/charts/sparkline/demos/custom-y-axis/CustomYAxis.tsx index dc21a0006ce26..16dee9e94690b 100644 --- a/docs/data/charts/sparkline/CustomYAxis.tsx +++ b/docs/data/charts/sparkline/demos/custom-y-axis/CustomYAxis.tsx @@ -15,6 +15,7 @@ const largeValues = [60, 65, 66, 68, 87, 82, 83, 89, 92, 75, 76, 77, 91]; export default function CustomYAxis() { return ( + {/* @focus-start */} Without fixed y-range @@ -48,6 +49,7 @@ export default function CustomYAxis() { /> + {/* @focus-end */} ); } diff --git a/docs/data/charts/sparkline/demos/custom-y-axis/client.ts b/docs/data/charts/sparkline/demos/custom-y-axis/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sparkline/demos/custom-y-axis/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sparkline/demos/custom-y-axis/index.ts b/docs/data/charts/sparkline/demos/custom-y-axis/index.ts new file mode 100644 index 0000000000000..5686d354b26e5 --- /dev/null +++ b/docs/data/charts/sparkline/demos/custom-y-axis/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomYAxis from './CustomYAxis'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomYAxis, { ClientProvider }); diff --git a/docs/data/charts/sparkline/NpmSparkLine.tsx b/docs/data/charts/sparkline/demos/npm-spark-line/NpmSparkLine.tsx similarity index 94% rename from docs/data/charts/sparkline/NpmSparkLine.tsx rename to docs/data/charts/sparkline/demos/npm-spark-line/NpmSparkLine.tsx index f096fe7d6b2cf..330eb5440aa62 100644 --- a/docs/data/charts/sparkline/NpmSparkLine.tsx +++ b/docs/data/charts/sparkline/demos/npm-spark-line/NpmSparkLine.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; -import { SparkLineChart, SparkLineChartProps } from '@mui/x-charts/SparkLineChart'; +import type { SparkLineChartProps } from '@mui/x-charts/SparkLineChart'; +import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; import { lineClasses } from '@mui/x-charts/LineChart'; import { chartsAxisHighlightClasses } from '@mui/x-charts/ChartsAxisHighlight'; import Box from '@mui/material/Box'; -import data from './weekly-downloads.json'; +import data from '../../weekly-downloads.json'; const downloads = data.map((item) => item.downloads); const weeks = data.map((item) => `${item.start} to ${item.end}`); @@ -38,6 +39,7 @@ const settings: SparkLineChartProps = { }; export default function NpmSparkLine() { + // @focus-start @padding 1 const [weekIndex, setWeekIndex] = React.useState(null); return ( @@ -118,6 +120,7 @@ export default function NpmSparkLine() { ); + // @focus-end } function DownloadIcon(props: React.SVGProps) { diff --git a/docs/data/charts/sparkline/demos/npm-spark-line/client.ts b/docs/data/charts/sparkline/demos/npm-spark-line/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sparkline/demos/npm-spark-line/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sparkline/demos/npm-spark-line/index.ts b/docs/data/charts/sparkline/demos/npm-spark-line/index.ts new file mode 100644 index 0000000000000..9e6acbc779282 --- /dev/null +++ b/docs/data/charts/sparkline/demos/npm-spark-line/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import NpmSparkLine from './NpmSparkLine'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, NpmSparkLine, { ClientProvider }); diff --git a/docs/data/charts/sparkline/SparklineLineWidth.tsx b/docs/data/charts/sparkline/demos/sparkline-line-width/SparklineLineWidth.tsx similarity index 93% rename from docs/data/charts/sparkline/SparklineLineWidth.tsx rename to docs/data/charts/sparkline/demos/sparkline-line-width/SparklineLineWidth.tsx index a8929f3d4763a..dbaa680fdd594 100644 --- a/docs/data/charts/sparkline/SparklineLineWidth.tsx +++ b/docs/data/charts/sparkline/demos/sparkline-line-width/SparklineLineWidth.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import Stack from '@mui/material/Stack'; import Box from '@mui/material/Box'; -import { SparkLineChart, SparkLineChartProps } from '@mui/x-charts/SparkLineChart'; +import type { SparkLineChartProps } from '@mui/x-charts/SparkLineChart'; +import { SparkLineChart } from '@mui/x-charts/SparkLineChart'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; import Slider from '@mui/material/Slider'; @@ -16,6 +17,7 @@ const settings = { } satisfies Partial; export default function SparklineLineWidth() { + // @focus-start @padding 1 const [strokeWidth, setStrokeWidth] = React.useState(2); const [disableClipping, setDisableClipping] = React.useState(false); const [clipAreaOffset, setClipAreaOffset] = React.useState(1); @@ -87,4 +89,5 @@ export default function SparklineLineWidth() { ); + // @focus-end } diff --git a/docs/data/charts/sparkline/demos/sparkline-line-width/client.ts b/docs/data/charts/sparkline/demos/sparkline-line-width/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/sparkline/demos/sparkline-line-width/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/sparkline/demos/sparkline-line-width/index.ts b/docs/data/charts/sparkline/demos/sparkline-line-width/index.ts new file mode 100644 index 0000000000000..c738c7a10083a --- /dev/null +++ b/docs/data/charts/sparkline/demos/sparkline-line-width/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SparklineLineWidth from './SparklineLineWidth'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SparklineLineWidth, { ClientProvider }); diff --git a/docs/data/charts/sparkline/sparkline.md b/docs/data/charts/sparkline/sparkline.md index d007c4e8a52c5..f988f2cc16bc0 100644 --- a/docs/data/charts/sparkline/sparkline.md +++ b/docs/data/charts/sparkline/sparkline.md @@ -16,14 +16,14 @@ The curve or bar shape conveys the trend without scales or labels. The demo below shows how npm displays a package's weekly download trend in a sparkline. -{{"demo": "NpmSparkLine.js"}} +{{"component": "file://./demos/npm-spark-line/index.ts"}} ## Basics `SparkLineChart` only needs the `data` prop, which is an array of numbers. Set `plotType` to `"bar"` to switch from a line chart to a bar chart. -{{"demo": "BasicSparkLine.js"}} +{{"component": "file://./demos/basic-spark-line/index.ts"}} ## Line customization @@ -31,7 +31,7 @@ Set the `area` prop to fill the area under the curve. Use the `curve` prop to change how the line is interpolated between points. See [Lines—Interpolation](/x/react-charts/lines/#interpolation) for curve options. -{{"demo": "AreaSparkLine.js"}} +{{"component": "file://./demos/area-spark-line/index.ts"}} ## Interaction @@ -40,7 +40,7 @@ Use the `showTooltip` and `showHighlight` props to enable the default tooltip an For more control, pass custom props to the `tooltip` and `highlight` slots. See [Tooltip](/x/react-charts/tooltip/) for details. -{{"demo": "BasicSparkLineCustomization.js"}} +{{"component": "file://./demos/basic-spark-line-customization/index.ts"}} ## Axis management @@ -56,7 +56,7 @@ The sparkline has a single axis, so `xAxis` takes one axis configuration object, ``` -{{"demo": "CustomAxis.js"}} +{{"component": "file://./demos/custom-axis/index.ts"}} ### Y-axis range @@ -64,26 +64,26 @@ Set `min` and `max` on the `yAxis` configuration to fix the y-axis range. The demo below shows two sparklines with different value scales: the first row uses the default y-axis, and the second row uses a fixed range from 0 to 100. -{{"demo": "CustomYAxis.js"}} +{{"component": "file://./demos/custom-y-axis/index.ts"}} Use the `domainLimit` option in the `yAxis` configuration to adjust the y-axis range relative to the data. See [Axis—Relative axis subdomain](/x/react-charts/axis/#relative-axis-subdomain) for details. The demo below uses the same data (values from -15 to 92) with different `domainLimit` settings. -{{"demo": "CustomDomainYAxis.js"}} +{{"component": "file://./demos/custom-domain-y-axis/index.ts"}} ## Color customization Pass a color to the `color` prop to set the sparkline color. -{{"demo": "ColorCustomization.js"}} +{{"component": "file://./demos/color-customization/index.ts"}} The `color` prop also accepts a function that receives the mode (`'light'` or `'dark'`), so you can change the color for the current theme. The demo below uses a white line in dark mode and a black line in light mode. -{{"demo": "ColorCustomizationMode.js"}} +{{"component": "file://./demos/color-customization-mode/index.ts"}} ## Line width @@ -96,4 +96,4 @@ Set `disableClipping` to `true` to turn clipping off. The demo below shows how stroke width, `disableClipping`, and `clipAreaOffset` affect the result. -{{"demo": "SparklineLineWidth.js"}} +{{"component": "file://./demos/sparkline-line-width/index.ts"}} diff --git a/docs/data/charts/stacking/BasicStacking.js b/docs/data/charts/stacking/BasicStacking.js deleted file mode 100644 index 7e44092f63ffa..0000000000000 --- a/docs/data/charts/stacking/BasicStacking.js +++ /dev/null @@ -1,26 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; - -const seriesA = { - data: [2, 3, 1, 4, 5], - label: 'Series A', -}; -const seriesB = { - data: [3, 1, 4, 2, 1], - label: 'Series B', -}; -const seriesC = { - data: [3, 2, 4, 5, 1], - label: 'Series C', -}; -export default function BasicStacking() { - return ( - - ); -} diff --git a/docs/data/charts/stacking/BasicStacking.tsx.preview b/docs/data/charts/stacking/BasicStacking.tsx.preview deleted file mode 100644 index 903d409f78fef..0000000000000 --- a/docs/data/charts/stacking/BasicStacking.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/stacking/StackOffsetDemo.js b/docs/data/charts/stacking/StackOffsetDemo.js deleted file mode 100644 index 22733b98dc1cf..0000000000000 --- a/docs/data/charts/stacking/StackOffsetDemo.js +++ /dev/null @@ -1,68 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Switch from '@mui/material/Switch'; -import { BarChart } from '@mui/x-charts/BarChart'; - -const availableStackOffset = ['expand', 'diverging', 'none']; - -const getSeries = ({ hasNegativeValue, stackOffset }) => [ - { - label: 'A', - data: [125, 450, 492, 625], - stack: 'total', - stackOffset, - }, - { - label: 'B', - data: [50, hasNegativeValue ? -150 : 150, 203, 620], - stack: 'total', - }, - { - label: 'C', - data: [134, 215, 342, 402].map((y) => (hasNegativeValue ? -y : y)), - stack: 'total', - }, - { - label: 'D', - data: [315, 421, 289, 321].map((y) => (hasNegativeValue ? -y : y)), - stack: 'total', - }, -]; - -export default function StackOffsetDemo() { - const [stackOffset, setStackOffset] = React.useState('diverging'); - const [hasNegativeValue, setHasNegativeValue] = React.useState(true); - - return ( - - - setStackOffset(event.target.value)} - > - {availableStackOffset.map((offset) => ( - - {offset} - - ))} - - - setHasNegativeValue(event.target.checked)} - control={} - label="data has negative value" - labelPlacement="end" - /> - - - - ); -} diff --git a/docs/data/charts/stacking/StackOrderDemo.js b/docs/data/charts/stacking/StackOrderDemo.js deleted file mode 100644 index 1997735d7ad33..0000000000000 --- a/docs/data/charts/stacking/StackOrderDemo.js +++ /dev/null @@ -1,127 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import { BarChart } from '@mui/x-charts/BarChart'; - -// Data coming from https://www.insee.fr/fr/statistiques/5013868 -const commonTransportation = [ - 6.5, 12.5, 17.2, 19.6, 20.1, 20.0, 19.5, 18.8, 18.2, 17.3, 16.4, 15.9, 15.2, 14.7, - 14.3, 14.3, 14.3, 14.1, 14.2, 14.2, 14.0, 13.8, 13.8, 13.9, 13.6, 14.0, 14.9, 14.8, - 15.2, 21.1, -]; - -const car = [ - 48.8, 56.3, 63.2, 67.3, 70.2, 72.3, 74.1, 75.8, 76.9, 78.4, 79.7, 80.5, 81.5, 82.4, - 83.0, 83.1, 83.2, 83.6, 83.6, 83.8, 83.9, 84.3, 84.4, 84.4, 84.6, 84.4, 83.6, 83.9, - 83.6, 77.6, -]; - -const motorcycle = [ - 1.3, 2.1, 2.5, 2.6, 2.7, 2.7, 2.6, 2.6, 2.6, 2.5, 2.5, 2.3, 2.2, 2.1, 1.9, 1.9, - 1.8, 1.7, 1.6, 1.6, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.0, 0.9, 0.8, 0.7, -]; - -const biking = [ - 4.0, 5.9, 5.8, 5.0, 4.0, 3.1, 2.4, 1.8, 1.5, 1.2, 0.9, 0.8, 0.7, 0.5, 0.5, 0.4, - 0.4, 0.3, 0.3, 0.2, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.1, 0.1, 0.3, -]; - -const walking = [ - 39.4, 23.2, 11.3, 5.5, 3.0, 1.9, 1.4, 1.0, 0.8, 0.6, 0.5, 0.5, 0.4, 0.3, 0.3, 0.3, - 0.3, 0.3, 0.3, 0.2, 0.2, 0.2, 0.3, 0.2, 0.3, 0.2, 0.3, 0.3, 0.3, 0.3, -]; - -const xAxis = { - label: 'Distance between home and office (km)', - data: [ - '0-1', - '1-2', - '2-3', - '3-4', - '4-5', - '5-6', - '6-7', - '7-8', - '8-9', - '9-10', - '10-11', - '11-12', - '12-13', - '13-14', - '14-15', - '15-16', - '16-17', - '17-18', - '18-19', - '19-20', - '20-21', - '21-22', - '22-23', - '23-24', - '24-25', - '25-30', - '30-35', - '35-40', - '40-50', - '>50', - ], -}; - -const series = [ - { label: 'Car', data: car, stack: 'total' }, - { label: 'Public T.', data: commonTransportation, stack: 'total' }, - { label: 'Motorcycle', data: motorcycle, stack: 'total' }, - { label: 'Walk', data: walking, stack: 'total' }, - { label: 'Bike', data: biking, stack: 'total' }, -]; - -const availableStackOrder = [ - 'none', - 'reverse', - 'appearance', - 'ascending', - 'descending', - 'insideOut', -]; - -export default function StackOrderDemo() { - const [stackOrder, setStackOrder] = React.useState('appearance'); - - const modifiedSeries = [{ ...series[0], stackOrder }, ...series.slice(1)]; - return ( - - setStackOrder(event.target.value)} - > - {availableStackOrder.map((offset) => ( - - {offset} - - ))} - - - - - - ); -} diff --git a/docs/data/charts/stacking/BasicStacking.tsx b/docs/data/charts/stacking/demos/basic-stacking/BasicStacking.tsx similarity index 91% rename from docs/data/charts/stacking/BasicStacking.tsx rename to docs/data/charts/stacking/demos/basic-stacking/BasicStacking.tsx index 7e44092f63ffa..aa9228464c8d8 100644 --- a/docs/data/charts/stacking/BasicStacking.tsx +++ b/docs/data/charts/stacking/demos/basic-stacking/BasicStacking.tsx @@ -14,6 +14,7 @@ const seriesC = { }; export default function BasicStacking() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/stacking/demos/basic-stacking/client.ts b/docs/data/charts/stacking/demos/basic-stacking/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/stacking/demos/basic-stacking/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/stacking/demos/basic-stacking/index.ts b/docs/data/charts/stacking/demos/basic-stacking/index.ts new file mode 100644 index 0000000000000..eb8a81c656fea --- /dev/null +++ b/docs/data/charts/stacking/demos/basic-stacking/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicStacking from './BasicStacking'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicStacking, { ClientProvider }); diff --git a/docs/data/charts/stacking/StackOffsetDemo.tsx b/docs/data/charts/stacking/demos/stack-offset-demo/StackOffsetDemo.tsx similarity index 95% rename from docs/data/charts/stacking/StackOffsetDemo.tsx rename to docs/data/charts/stacking/demos/stack-offset-demo/StackOffsetDemo.tsx index 42430294a4d27..faf50b0513fa7 100644 --- a/docs/data/charts/stacking/StackOffsetDemo.tsx +++ b/docs/data/charts/stacking/demos/stack-offset-demo/StackOffsetDemo.tsx @@ -6,7 +6,7 @@ import MenuItem from '@mui/material/MenuItem'; import FormControlLabel from '@mui/material/FormControlLabel'; import Switch from '@mui/material/Switch'; import { BarChart } from '@mui/x-charts/BarChart'; -import { StackOffsetType } from '@mui/x-charts/models'; +import type { StackOffsetType } from '@mui/x-charts/models'; type GetSeriesParams = { hasNegativeValue: boolean; @@ -40,6 +40,7 @@ const getSeries = ({ hasNegativeValue, stackOffset }: GetSeriesParams) => [ ]; export default function StackOffsetDemo() { + // @focus-start @padding 1 const [stackOffset, setStackOffset] = React.useState('diverging'); const [hasNegativeValue, setHasNegativeValue] = React.useState(true); @@ -71,4 +72,5 @@ export default function StackOffsetDemo() { ); + // @focus-end } diff --git a/docs/data/charts/stacking/demos/stack-offset-demo/client.ts b/docs/data/charts/stacking/demos/stack-offset-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/stacking/demos/stack-offset-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/stacking/demos/stack-offset-demo/index.ts b/docs/data/charts/stacking/demos/stack-offset-demo/index.ts new file mode 100644 index 0000000000000..dcce4e5188fde --- /dev/null +++ b/docs/data/charts/stacking/demos/stack-offset-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StackOffsetDemo from './StackOffsetDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StackOffsetDemo, { ClientProvider }); diff --git a/docs/data/charts/stacking/StackOrderDemo.tsx b/docs/data/charts/stacking/demos/stack-order-demo/StackOrderDemo.tsx similarity index 96% rename from docs/data/charts/stacking/StackOrderDemo.tsx rename to docs/data/charts/stacking/demos/stack-order-demo/StackOrderDemo.tsx index 98a3ec00b2260..67f2a0d965ddd 100644 --- a/docs/data/charts/stacking/StackOrderDemo.tsx +++ b/docs/data/charts/stacking/demos/stack-order-demo/StackOrderDemo.tsx @@ -3,7 +3,7 @@ import Box from '@mui/material/Box'; import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; import { BarChart } from '@mui/x-charts/BarChart'; -import { StackOrderType } from '@mui/x-charts/models'; +import type { StackOrderType } from '@mui/x-charts/models'; // Data coming from https://www.insee.fr/fr/statistiques/5013868 const commonTransportation = [ @@ -82,6 +82,7 @@ const availableStackOrder = [ ] as const; export default function StackOrderDemo() { + // @focus-start @padding 1 const [stackOrder, setStackOrder] = React.useState('appearance'); const modifiedSeries = [{ ...series[0], stackOrder }, ...series.slice(1)]; @@ -120,4 +121,5 @@ export default function StackOrderDemo() { ); + // @focus-end } diff --git a/docs/data/charts/stacking/demos/stack-order-demo/client.ts b/docs/data/charts/stacking/demos/stack-order-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/stacking/demos/stack-order-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/stacking/demos/stack-order-demo/index.ts b/docs/data/charts/stacking/demos/stack-order-demo/index.ts new file mode 100644 index 0000000000000..41051af560059 --- /dev/null +++ b/docs/data/charts/stacking/demos/stack-order-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StackOrderDemo from './StackOrderDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StackOrderDemo, { ClientProvider }); diff --git a/docs/data/charts/stacking/stacking.md b/docs/data/charts/stacking/stacking.md index 4ca2d4b701c79..cd6eb8af949dd 100644 --- a/docs/data/charts/stacking/stacking.md +++ b/docs/data/charts/stacking/stacking.md @@ -15,7 +15,7 @@ Bar and line charts support stacking. To stack series together, pass them a `stack` attribute. Series with the same `stack` value are stacked together. -{{"demo": "BasicStacking.js"}} +{{"component": "file://./demos/basic-stacking/index.ts"}} ## Stacking strategy @@ -47,7 +47,7 @@ When turned on: - Series B has one negative value - Series C and D have only negative values -{{"demo": "StackOffsetDemo.js"}} +{{"component": "file://./demos/stack-offset-demo/index.ts"}} ### Stack order @@ -69,7 +69,7 @@ Otherwise, you can order them based on different properties of their values as d To demonstrate stack order, the example below shows statistics about means of transportation used for commuting to work relative to the distance between home and office for commuters. -{{"demo": "StackOrderDemo.js"}} +{{"component": "file://./demos/stack-order-demo/index.ts"}} With the `'appearance'` order, **walking** is first since its maximal percentage is for **0-1km**, and **common transportation** is last because its maximum value is at the **>50km** distance. diff --git a/docs/data/charts/styling/BackgroundStyling.js b/docs/data/charts/styling/BackgroundStyling.js deleted file mode 100644 index 55a7f0298ec57..0000000000000 --- a/docs/data/charts/styling/BackgroundStyling.js +++ /dev/null @@ -1,67 +0,0 @@ -import { useTheme } from '@mui/material/styles'; -import { LinePlot } from '@mui/x-charts/LineChart'; - -import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; -import { ChartsGrid } from '@mui/x-charts/ChartsGrid'; -import { useDrawingArea } from '@mui/x-charts/hooks'; -import { - dateAxisFormatter, - percentageFormatter, - usUnemploymentRate, -} from '../dataset/usUnemploymentRate'; - -function Background() { - const drawingArea = useDrawingArea(); - const theme = useTheme(); - return ( - - ); -} - -export default function BackgroundStyling() { - return ( - - - - - - - - ); -} - -const xAxis = [ - { - dataKey: 'date', - scaleType: 'time', - valueFormatter: dateAxisFormatter, - }, -]; - -const yAxis = [ - { - valueFormatter: percentageFormatter, - }, -]; - -const series = [ - { - type: 'line', - dataKey: 'rate', - valueFormatter: percentageFormatter, - }, -]; diff --git a/docs/data/charts/styling/BackgroundStyling.tsx.preview b/docs/data/charts/styling/BackgroundStyling.tsx.preview deleted file mode 100644 index 64007c598c874..0000000000000 --- a/docs/data/charts/styling/BackgroundStyling.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/docs/data/charts/styling/BasicColor.js b/docs/data/charts/styling/BasicColor.js deleted file mode 100644 index 613b9d893a338..0000000000000 --- a/docs/data/charts/styling/BasicColor.js +++ /dev/null @@ -1,58 +0,0 @@ -import * as React from 'react'; -import { LineChart } from '@mui/x-charts/LineChart'; -import Stack from '@mui/material/Stack'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; - -const Tableau10 = [ - '#4e79a7', - '#f28e2c', - '#e15759', - '#76b7b2', - '#59a14f', - '#edc949', - '#af7aa1', - '#ff9da7', - '#9c755f', - '#bab0ab', -]; - -const chartsParams = { - height: 300, -}; -export default function BasicColor() { - const [color, setColor] = React.useState('#4e79a7'); - - const handleChange = (event, nextColor) => { - setColor(nextColor); - }; - - return ( - - - - {Tableau10.map((value) => ( - -
- - ))} - - - ); -} diff --git a/docs/data/charts/styling/ColorCallback.js b/docs/data/charts/styling/ColorCallback.js deleted file mode 100644 index 1df8dc9a99376..0000000000000 --- a/docs/data/charts/styling/ColorCallback.js +++ /dev/null @@ -1,89 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { BarChart } from '@mui/x-charts/BarChart'; - -const clubs = [ - 'Arsenal', - 'Liverpool', - 'Man Utd', - 'Tottenham', - 'Everton', - 'Sunderland', - 'Newcastle', - 'Nottingham Forest', - 'Leeds', - 'Man City', - 'West Ham', - 'Burnley', - 'Fulham', - 'Chelsea', - 'Aston Villa', - 'Wolves', - 'Crystal Palace', - 'Brentford', - 'Bournemouth', - 'Brighton', -]; - -// Source: https://www.squawka.com/en/news/premier-league-net-spend-2025-26/ -const netSpendInPounds = [ - 251.4, 235, 166.9, 137.8, 116, 113.4, 95.6, 95.4, 91.5, 80.2, 69.7, 57.8, 18.93, - 9.5, -8, -14.7, -23, -58.9, -63.3, -68.15, -]; - -const clubColors = [ - '#EF0107', // Arsenal - Red - '#C8102E', // Liverpool - Red - '#DA291C', // Man Utd - Red - '#132257', // Tottenham - Navy Blue - '#003399', // Everton - Royal Blue - '#E03A3E', // Sunderland - Red - '#241F20', // Newcastle - Black - '#DD0000', // Nottingham Forest - Red - '#FFCD00', // Leeds - Yellow - '#6CABDD', // Man City - Sky Blue - '#7A263A', // West Ham - Claret - '#6C1D45', // Burnley - Claret - '#CC0000', // Fulham - Red - '#034694', // Chelsea - Blue - '#670E36', // Aston Villa - Claret - '#FDB913', // Wolves - Gold - '#1B458F', // Crystal Palace - Blue - '#E30613', // Brentford - Red - '#DA291C', // Bournemouth - Red - '#0057B8', // Brighton - Blue -]; - -const valueFormatter = (v) => (v < 0 ? `-£${-v}m` : `£${v}m`); - -const chartsParams = { - margin: { top: 20, right: 40, bottom: 20, left: 20 }, - xAxis: [{ data: clubs, tickLabelStyle: { angle: 45 }, height: 80 }], - yAxis: [ - { - width: 60, - valueFormatter, - }, - ], - series: [ - { - data: netSpendInPounds, - colorGetter: (data) => clubColors[data.dataIndex], - valueFormatter, - }, - ], - height: 400, -}; - -export default function ColorCallback() { - return ( - - - Premier League Clubs Net Spend - Summer 2025 - - - Source: squawka.com - - ); -} diff --git a/docs/data/charts/styling/ColorCallback.tsx.preview b/docs/data/charts/styling/ColorCallback.tsx.preview deleted file mode 100644 index 6fd34cf4c092e..0000000000000 --- a/docs/data/charts/styling/ColorCallback.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - Premier League Clubs Net Spend - Summer 2025 - - -Source: squawka.com \ No newline at end of file diff --git a/docs/data/charts/styling/ColorTemplate.js b/docs/data/charts/styling/ColorTemplate.js deleted file mode 100644 index 4bd6112afc60f..0000000000000 --- a/docs/data/charts/styling/ColorTemplate.js +++ /dev/null @@ -1,215 +0,0 @@ -import * as React from 'react'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; - -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import Typography from '@mui/material/Typography'; -import { Chance } from 'chance'; - -const chance = new Chance(42); - -function getGaussianSeriesData(mean, stdev = [0.3, 0.4], N = 50) { - return [...Array(N)].map((_, i) => { - const x = - Math.sqrt(-2.0 * Math.log(1 - chance.floating({ min: 0, max: 0.99 }))) * - Math.cos(2.0 * Math.PI * chance.floating({ min: 0, max: 0.99 })) * - stdev[0] + - mean[0]; - const y = - Math.sqrt(-2.0 * Math.log(1 - chance.floating({ min: 0, max: 0.99 }))) * - Math.cos(2.0 * Math.PI * chance.floating({ min: 0, max: 0.99 })) * - stdev[1] + - mean[1]; - return { x, y, id: i }; - }); -} - -const legendPlacement = { - slotProps: { - legend: { - position: { - vertical: 'middle', - horizontal: 'end', - }, - direction: 'vertical', - }, - }, -}; -const series = [ - { label: 'Series 1', data: getGaussianSeriesData([-5, 0]) }, - { label: 'Series 2', data: getGaussianSeriesData([-4, 0]) }, - { label: 'Series 3', data: getGaussianSeriesData([-3, 0]) }, - { label: 'Series 4', data: getGaussianSeriesData([-2, 0]) }, - { label: 'Series 5', data: getGaussianSeriesData([-1, 0]) }, - { label: 'Series 6', data: getGaussianSeriesData([0, 0]) }, - { label: 'Series 7', data: getGaussianSeriesData([1, 0]) }, - { label: 'Series 8', data: getGaussianSeriesData([2, 0]) }, - { label: 'Series 9', data: getGaussianSeriesData([3, 0]) }, - { label: 'Series 10', data: getGaussianSeriesData([4, 0]) }, - { label: 'Series 11', data: getGaussianSeriesData([5, 0]) }, - { label: 'Series 12', data: getGaussianSeriesData([6, 0]) }, - { label: 'Series 13', data: getGaussianSeriesData([7, 0]) }, -].map((s) => ({ - ...s, - valueFormatter: (v) => v && `(${v.x.toFixed(1)}, ${v.y.toFixed(1)})`, -})); - -const categories = { - Category10: [ - '#1f77b4', - '#ff7f0e', - '#2ca02c', - '#d62728', - '#9467bd', - '#8c564b', - '#e377c2', - '#7f7f7f', - '#bcbd22', - '#17becf', - ], - Accent: [ - '#7fc97f', - '#beaed4', - '#fdc086', - '#ffff99', - '#386cb0', - '#f0027f', - '#bf5b17', - '#666666', - ], - Dark2: [ - '#1b9e77', - '#d95f02', - '#7570b3', - '#e7298a', - '#66a61e', - '#e6ab02', - '#a6761d', - '#666666', - ], - Paired: [ - '#a6cee3', - '#1f78b4', - '#b2df8a', - '#33a02c', - '#fb9a99', - '#e31a1c', - '#fdbf6f', - '#ff7f00', - '#cab2d6', - '#6a3d9a', - '#ffff99', - '#b15928', - ], - Pastel1: [ - '#fbb4ae', - '#b3cde3', - '#ccebc5', - '#decbe4', - '#fed9a6', - '#ffffcc', - '#e5d8bd', - '#fddaec', - '#f2f2f2', - ], - Pastel2: [ - '#b3e2cd', - '#fdcdac', - '#cbd5e8', - '#f4cae4', - '#e6f5c9', - '#fff2ae', - '#f1e2cc', - '#cccccc', - ], - Set1: [ - '#e41a1c', - '#377eb8', - '#4daf4a', - '#984ea3', - '#ff7f00', - '#ffff33', - '#a65628', - '#f781bf', - '#999999', - ], - Set2: [ - '#66c2a5', - '#fc8d62', - '#8da0cb', - '#e78ac3', - '#a6d854', - '#ffd92f', - '#e5c494', - '#b3b3b3', - ], - Set3: [ - '#8dd3c7', - '#ffffb3', - '#bebada', - '#fb8072', - '#80b1d3', - '#fdb462', - '#b3de69', - '#fccde5', - '#d9d9d9', - '#bc80bd', - '#ccebc5', - '#ffed6f', - ], - Tableau10: [ - '#4e79a7', - '#f28e2c', - '#e15759', - '#76b7b2', - '#59a14f', - '#edc949', - '#af7aa1', - '#ff9da7', - '#9c755f', - '#bab0ab', - ], -}; - -export default function ColorTemplate() { - const [colorScheme, setColorScheme] = React.useState('Category10'); - - return ( - - - setColorScheme(event.target.value)} - > - {Object.entries(categories).map(([name, colors]) => ( - - - {name} -
- {colors.map((c) => ( -
- ))} -
- - - ))} - - - ); -} diff --git a/docs/data/charts/styling/CustomOverlay.js b/docs/data/charts/styling/CustomOverlay.js deleted file mode 100644 index 3f85951ce2d3b..0000000000000 --- a/docs/data/charts/styling/CustomOverlay.js +++ /dev/null @@ -1,70 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Stack from '@mui/material/Stack'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { useDrawingArea, useXScale, useYScale } from '@mui/x-charts/hooks'; - -const ratios = [0.2, 0.8, 0.6, 0.5]; - -const LoadingRect = styled('rect')({ - opacity: 0.2, - fill: 'lightgray', -}); - -const LoadingText = styled('text')(({ theme }) => ({ - stroke: 'none', - fill: theme.palette.text.primary, - shapeRendering: 'crispEdges', - textAnchor: 'middle', - dominantBaseline: 'middle', -})); - -function LoadingOverlay() { - const xScale = useXScale(); - const yScale = useYScale(); - const { left, width, height } = useDrawingArea(); - - const bandWidth = xScale.bandwidth(); - - const [bottom, top] = yScale.range(); - - return ( - - {xScale.domain().map((item, index) => { - const ratio = ratios[index % ratios.length]; - const barHeight = ratio * (bottom - top); - - return ( - - ); - })} - - Loading data… - - - ); -} - -export default function CustomOverlay() { - return ( - - - - - ); -} diff --git a/docs/data/charts/styling/CustomOverlay.tsx.preview b/docs/data/charts/styling/CustomOverlay.tsx.preview deleted file mode 100644 index 8106bc5b571e3..0000000000000 --- a/docs/data/charts/styling/CustomOverlay.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/charts/styling/GradientTooltip.js b/docs/data/charts/styling/GradientTooltip.js deleted file mode 100644 index 7664447ac3fb7..0000000000000 --- a/docs/data/charts/styling/GradientTooltip.js +++ /dev/null @@ -1,41 +0,0 @@ -import { BarChart } from '@mui/x-charts/BarChart'; - -export default function GradientTooltip() { - return ( - - - - - - - - - - - ); -} diff --git a/docs/data/charts/styling/Margin.js b/docs/data/charts/styling/Margin.js deleted file mode 100644 index 3264dd9be84cd..0000000000000 --- a/docs/data/charts/styling/Margin.js +++ /dev/null @@ -1,190 +0,0 @@ -import * as React from 'react'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; -import { BarChart } from '@mui/x-charts/BarChart'; -import { useDrawingArea, useXAxis, useYAxis } from '@mui/x-charts/hooks'; - -const defaultMargin = { - knob: 'number', - defaultValue: 40, - step: 1, - min: 0, - max: 200, -}; - -const defaultAxisSize = { - knob: 'number', - defaultValue: 30, - step: 1, - min: 0, - max: 200, -}; - -export default function Margin() { - return ( - ( -
- - - - - -
- )} - getCode={({ props }) => - `import { BarChart } from '@mui/x-charts/BarChart'; - -` - } - /> - ); -} - -function MarginVisualization() { - const { bottom, left, right, top, height, width } = useDrawingArea(); - const xAxis = useXAxis('x-axis'); - const yAxis = useYAxis('y-axis'); - - const xSize = (xAxis.position !== 'none' ? xAxis.height : 0) ?? 0; - const ySize = (yAxis.position !== 'none' ? yAxis.width : 0) ?? 0; - - return ( - - - - - - - ); -} - -function AxisSizeVisualization() { - const { left, top, height, width } = useDrawingArea(); - const xAxis = useXAxis('x-axis'); - const yAxis = useYAxis('y-axis'); - - return ( - - {xAxis.position !== 'none' && ( - - )} - {yAxis.position !== 'none' && ( - - )} - - ); -} - -function DrawingAreaVisualization() { - const { left, top, height, width } = useDrawingArea(); - - return ( - - ); -} diff --git a/docs/data/charts/styling/MuiColorTemplate.js b/docs/data/charts/styling/MuiColorTemplate.js deleted file mode 100644 index f60fea3e3bbe5..0000000000000 --- a/docs/data/charts/styling/MuiColorTemplate.js +++ /dev/null @@ -1,208 +0,0 @@ -import * as React from 'react'; -import { createTheme, useTheme, ThemeProvider } from '@mui/material/styles'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import Typography from '@mui/material/Typography'; -import Paper from '@mui/material/Paper'; -import Button from '@mui/material/Button'; -import Brightness4Icon from '@mui/icons-material/Brightness4'; -import Brightness7Icon from '@mui/icons-material/Brightness7'; -import { Chance } from 'chance'; -import { ScatterChart } from '@mui/x-charts/ScatterChart'; - -import { - blueberryTwilightPalette, - mangoFusionPalette, - cheerfulFiestaPalette, - strawberrySkyPalette, - rainbowSurgePalette, - bluePalette, - greenPalette, - purplePalette, - redPalette, - orangePalette, - yellowPalette, - cyanPalette, - pinkPalette, -} from '@mui/x-charts/colorPalettes'; -import Divider from '@mui/material/Divider'; -import ListSubheader from '@mui/material/ListSubheader'; - -const chance = new Chance(42); - -function getGaussianSeriesData(mean, stdev = [0.3, 0.4], N = 50) { - return [...Array(N)].map((_, i) => { - const x = - Math.sqrt(-2.0 * Math.log(1 - chance.floating({ min: 0, max: 0.99 }))) * - Math.cos(2.0 * Math.PI * chance.floating({ min: 0, max: 0.99 })) * - stdev[0] + - mean[0]; - const y = - Math.sqrt(-2.0 * Math.log(1 - chance.floating({ min: 0, max: 0.99 }))) * - Math.cos(2.0 * Math.PI * chance.floating({ min: 0, max: 0.99 })) * - stdev[1] + - mean[1]; - return { x, y, id: i }; - }); -} - -const legendPlacement = { - slotProps: { - legend: { - direction: 'vertical', - }, - }, -}; - -const series = [ - { label: 'Series 1', data: getGaussianSeriesData([-5, 0]) }, - { label: 'Series 2', data: getGaussianSeriesData([-4, 0]) }, - { label: 'Series 3', data: getGaussianSeriesData([-3, 0]) }, - { label: 'Series 4', data: getGaussianSeriesData([-2, 0]) }, - { label: 'Series 5', data: getGaussianSeriesData([-1, 0]) }, - { label: 'Series 6', data: getGaussianSeriesData([0, 0]) }, - { label: 'Series 7', data: getGaussianSeriesData([1, 0]) }, - { label: 'Series 8', data: getGaussianSeriesData([2, 0]) }, - { label: 'Series 9', data: getGaussianSeriesData([3, 0]) }, - { label: 'Series 10', data: getGaussianSeriesData([4, 0]) }, - { label: 'Series 11', data: getGaussianSeriesData([5, 0]) }, - { label: 'Series 12', data: getGaussianSeriesData([6, 0]) }, - { label: 'Series 13', data: getGaussianSeriesData([7, 0]) }, -].map((s) => ({ - ...s, - valueFormatter: (v) => v && `(${v.x.toFixed(1)}, ${v.y.toFixed(1)})`, -})); - -const categorical = { - rainbowSurge: rainbowSurgePalette, - blueberryTwilight: blueberryTwilightPalette, - mangoFusion: mangoFusionPalette, - cheerfulFiesta: cheerfulFiestaPalette, -}; -const sequential = { - strawberrySky: strawberrySkyPalette, - purple: purplePalette, - blue: bluePalette, - cyan: cyanPalette, - green: greenPalette, - yellow: yellowPalette, - orange: orangePalette, - red: redPalette, - pink: pinkPalette, -}; - -const categories = { - ...categorical, - ...sequential, -}; - -export default function MuiColorTemplate() { - const theme = useTheme(); - const [colorScheme, setColorScheme] = React.useState('blueberryTwilight'); - const [colorMode, setColorMode] = React.useState(theme.palette.mode); - - React.useEffect(() => { - setColorMode(theme.palette.mode); - }, [theme.palette.mode]); - - const newTheme = createTheme({ palette: { mode: colorMode } }); - return ( - - - - - -
- -
- setColorScheme(event.target.value)} - > - Categorical - {Object.entries(categorical).map(([name, colors]) => ( - - - {name} -
- {colors(colorMode).map((c) => ( -
- ))} -
- - - ))} - - Sequential - {Object.entries(sequential).map(([name, colors]) => ( - - - {name} -
- {colors(colorMode).map((c) => ( -
- ))} -
- - - ))} - - - - - - ); -} diff --git a/docs/data/charts/styling/Overlay.js b/docs/data/charts/styling/Overlay.js deleted file mode 100644 index ca3b5ad0b9388..0000000000000 --- a/docs/data/charts/styling/Overlay.js +++ /dev/null @@ -1,16 +0,0 @@ -import Stack from '@mui/material/Stack'; -import { LineChart } from '@mui/x-charts/LineChart'; - -const emptySeries = { - series: [], - height: 150, -}; - -export default function Overlay() { - return ( - - - - - ); -} diff --git a/docs/data/charts/styling/Overlay.tsx.preview b/docs/data/charts/styling/Overlay.tsx.preview deleted file mode 100644 index caa7653ae1e29..0000000000000 --- a/docs/data/charts/styling/Overlay.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/charts/styling/OverlayWithAxis.js b/docs/data/charts/styling/OverlayWithAxis.js deleted file mode 100644 index 5bba8328764f4..0000000000000 --- a/docs/data/charts/styling/OverlayWithAxis.js +++ /dev/null @@ -1,36 +0,0 @@ -import Stack from '@mui/material/Stack'; -import { LineChart } from '@mui/x-charts/LineChart'; - -const emptySeries = { - series: [], - height: 150, -}; - -export default function OverlayWithAxis() { - return ( - - - - - ); -} diff --git a/docs/data/charts/styling/SxStyling.js b/docs/data/charts/styling/SxStyling.js deleted file mode 100644 index b2575adcbd5f3..0000000000000 --- a/docs/data/charts/styling/SxStyling.js +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from 'react'; -import { BarChart, barClasses } from '@mui/x-charts/BarChart'; -import { axisClasses } from '@mui/x-charts/ChartsAxis'; - -const labels = ['Group A', 'Group B', 'Group C', 'Group D', 'Group E']; -const lData = [42, 24, 56, 45, 3]; -const rData = [57, 7, 19, 16, 22]; -const colors = ['#006BD6', '#EC407A']; - -export default function SxStyling() { - return ( - ({ - [`.${barClasses.element}`]: { - fill: (theme.vars || theme).palette.background.paper, - strokeWidth: 2, - }, - [`[data-series="l_id"] .${barClasses.element}`]: { - stroke: colors[0], - }, - [`[data-series="r_id"] .${barClasses.element}`]: { - stroke: colors[1], - }, - [`.${axisClasses.root}`]: { - [`.${axisClasses.tick}, .${axisClasses.line}`]: { - stroke: '#006BD6', - strokeWidth: 3, - }, - [`.${axisClasses.tickLabel}`]: { - fill: '#006BD6', - }, - }, - border: '1px solid rgba(0, 0, 0, 0.1)', - backgroundImage: - 'linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px)', - backgroundSize: '35px 35px', - backgroundPosition: '20px 20px, 20px 20px', - ...theme.applyStyles('dark', { - borderColor: 'rgba(255,255,255, 0.1)', - backgroundImage: - 'linear-gradient(rgba(255,255,255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255, 0.1) 1px, transparent 1px)', - }), - })} - xAxis={[{ data: labels }]} - series={[ - { data: lData, label: 'l', id: 'l_id' }, - { data: rData, label: 'r', id: 'r_id' }, - ]} - colors={colors} - height={300} - /> - ); -} diff --git a/docs/data/charts/styling/TextStyling.js b/docs/data/charts/styling/TextStyling.js deleted file mode 100644 index dbbb3a4f20c01..0000000000000 --- a/docs/data/charts/styling/TextStyling.js +++ /dev/null @@ -1,63 +0,0 @@ -import * as React from 'react'; -import { BarChart } from '@mui/x-charts/BarChart'; - -const months = [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', -]; - -const data = [42, 65, 49, 78, 56, 90, 73, 81, 60, 88, 54, 95]; - -export default function TextStyling() { - return ( - - ); -} diff --git a/docs/data/charts/styling/BackgroundStyling.tsx b/docs/data/charts/styling/demos/background-styling/BackgroundStyling.tsx similarity index 90% rename from docs/data/charts/styling/BackgroundStyling.tsx rename to docs/data/charts/styling/demos/background-styling/BackgroundStyling.tsx index 4c96822218b52..58b4b5fdc4a83 100644 --- a/docs/data/charts/styling/BackgroundStyling.tsx +++ b/docs/data/charts/styling/demos/background-styling/BackgroundStyling.tsx @@ -1,6 +1,6 @@ import { useTheme } from '@mui/material/styles'; import { LinePlot } from '@mui/x-charts/LineChart'; -import { XAxis } from '@mui/x-charts/models'; +import type { XAxis } from '@mui/x-charts/models'; import { ChartsContainer } from '@mui/x-charts/ChartsContainer'; import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'; @@ -10,7 +10,7 @@ import { dateAxisFormatter, percentageFormatter, usUnemploymentRate, -} from '../dataset/usUnemploymentRate'; +} from '../../../dataset/usUnemploymentRate'; function Background() { const drawingArea = useDrawingArea(); @@ -28,6 +28,7 @@ function Background() { export default function BackgroundStyling() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/styling/demos/background-styling/client.ts b/docs/data/charts/styling/demos/background-styling/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/styling/demos/background-styling/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/styling/demos/background-styling/index.ts b/docs/data/charts/styling/demos/background-styling/index.ts new file mode 100644 index 0000000000000..b70973a3162e4 --- /dev/null +++ b/docs/data/charts/styling/demos/background-styling/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BackgroundStyling from './BackgroundStyling'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BackgroundStyling, { ClientProvider }); diff --git a/docs/data/charts/styling/BasicColor.tsx b/docs/data/charts/styling/demos/basic-color/BasicColor.tsx similarity index 96% rename from docs/data/charts/styling/BasicColor.tsx rename to docs/data/charts/styling/demos/basic-color/BasicColor.tsx index d16d803d3e23b..02bafa89ac980 100644 --- a/docs/data/charts/styling/BasicColor.tsx +++ b/docs/data/charts/styling/demos/basic-color/BasicColor.tsx @@ -21,6 +21,7 @@ const chartsParams = { height: 300, }; export default function BasicColor() { + // @focus-start @padding 1 const [color, setColor] = React.useState('#4e79a7'); const handleChange = (event: React.MouseEvent, nextColor: string) => { @@ -55,4 +56,5 @@ export default function BasicColor() { ); + // @focus-end } diff --git a/docs/data/charts/styling/demos/basic-color/client.ts b/docs/data/charts/styling/demos/basic-color/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/styling/demos/basic-color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/styling/demos/basic-color/index.ts b/docs/data/charts/styling/demos/basic-color/index.ts new file mode 100644 index 0000000000000..e6e870912679d --- /dev/null +++ b/docs/data/charts/styling/demos/basic-color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicColor from './BasicColor'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicColor, { ClientProvider }); diff --git a/docs/data/charts/styling/ColorCallback.tsx b/docs/data/charts/styling/demos/color-callback/ColorCallback.tsx similarity index 92% rename from docs/data/charts/styling/ColorCallback.tsx rename to docs/data/charts/styling/demos/color-callback/ColorCallback.tsx index dde96cfb0747c..a2a24b198965d 100644 --- a/docs/data/charts/styling/ColorCallback.tsx +++ b/docs/data/charts/styling/demos/color-callback/ColorCallback.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; -import { BarChart, BarChartProps, BarSeries } from '@mui/x-charts/BarChart'; +import type { BarChartProps, BarSeries } from '@mui/x-charts/BarChart'; +import { BarChart } from '@mui/x-charts/BarChart'; const clubs = [ 'Arsenal', @@ -78,11 +79,13 @@ const chartsParams = { export default function ColorCallback() { return ( + {/* @focus-start */} Premier League Clubs Net Spend - Summer 2025 Source: squawka.com + {/* @focus-end */} ); } diff --git a/docs/data/charts/styling/demos/color-callback/client.ts b/docs/data/charts/styling/demos/color-callback/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/styling/demos/color-callback/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/styling/demos/color-callback/index.ts b/docs/data/charts/styling/demos/color-callback/index.ts new file mode 100644 index 0000000000000..71dd05ebbfec5 --- /dev/null +++ b/docs/data/charts/styling/demos/color-callback/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorCallback from './ColorCallback'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorCallback, { ClientProvider }); diff --git a/docs/data/charts/styling/ColorTemplate.tsx b/docs/data/charts/styling/demos/color-template/ColorTemplate.tsx similarity index 95% rename from docs/data/charts/styling/ColorTemplate.tsx rename to docs/data/charts/styling/demos/color-template/ColorTemplate.tsx index 303e880771fd1..7d95212df8db6 100644 --- a/docs/data/charts/styling/ColorTemplate.tsx +++ b/docs/data/charts/styling/demos/color-template/ColorTemplate.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; -import { ScatterChart, ScatterChartProps } from '@mui/x-charts/ScatterChart'; -import { ScatterValueType } from '@mui/x-charts/models'; +import type { ScatterChartProps } from '@mui/x-charts/ScatterChart'; +import { ScatterChart } from '@mui/x-charts/ScatterChart'; +import type { ScatterValueType } from '@mui/x-charts/models'; import Stack from '@mui/material/Stack'; import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; @@ -178,6 +179,7 @@ const categories: { [key: string]: string[] } = { }; export default function ColorTemplate() { + // @focus-start @padding 1 const [colorScheme, setColorScheme] = React.useState('Category10'); return ( @@ -217,4 +219,5 @@ export default function ColorTemplate() { ); + // @focus-end } diff --git a/docs/data/charts/styling/demos/color-template/client.ts b/docs/data/charts/styling/demos/color-template/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/styling/demos/color-template/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/styling/demos/color-template/index.ts b/docs/data/charts/styling/demos/color-template/index.ts new file mode 100644 index 0000000000000..c25d26afa507e --- /dev/null +++ b/docs/data/charts/styling/demos/color-template/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorTemplate from './ColorTemplate'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorTemplate, { ClientProvider }); diff --git a/docs/data/charts/styling/CustomOverlay.tsx b/docs/data/charts/styling/demos/custom-overlay/CustomOverlay.tsx similarity index 97% rename from docs/data/charts/styling/CustomOverlay.tsx rename to docs/data/charts/styling/demos/custom-overlay/CustomOverlay.tsx index d9f541bc1b484..1536633d413d3 100644 --- a/docs/data/charts/styling/CustomOverlay.tsx +++ b/docs/data/charts/styling/demos/custom-overlay/CustomOverlay.tsx @@ -53,6 +53,7 @@ function LoadingOverlay() { export default function CustomOverlay() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/styling/demos/custom-overlay/client.ts b/docs/data/charts/styling/demos/custom-overlay/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/styling/demos/custom-overlay/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/styling/demos/custom-overlay/index.ts b/docs/data/charts/styling/demos/custom-overlay/index.ts new file mode 100644 index 0000000000000..0007950ad0cda --- /dev/null +++ b/docs/data/charts/styling/demos/custom-overlay/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomOverlay from './CustomOverlay'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomOverlay, { ClientProvider }); diff --git a/docs/data/charts/styling/GradientTooltip.tsx b/docs/data/charts/styling/demos/gradient-tooltip/GradientTooltip.tsx similarity index 95% rename from docs/data/charts/styling/GradientTooltip.tsx rename to docs/data/charts/styling/demos/gradient-tooltip/GradientTooltip.tsx index 7664447ac3fb7..cbded90d1dc13 100644 --- a/docs/data/charts/styling/GradientTooltip.tsx +++ b/docs/data/charts/styling/demos/gradient-tooltip/GradientTooltip.tsx @@ -2,6 +2,7 @@ import { BarChart } from '@mui/x-charts/BarChart'; export default function GradientTooltip() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/styling/demos/gradient-tooltip/client.ts b/docs/data/charts/styling/demos/gradient-tooltip/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/styling/demos/gradient-tooltip/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/styling/demos/gradient-tooltip/index.ts b/docs/data/charts/styling/demos/gradient-tooltip/index.ts new file mode 100644 index 0000000000000..53f4ff86bcaa8 --- /dev/null +++ b/docs/data/charts/styling/demos/gradient-tooltip/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GradientTooltip from './GradientTooltip'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GradientTooltip, { ClientProvider }); diff --git a/docs/data/charts/styling/Margin.tsx b/docs/data/charts/styling/demos/margin/Margin.tsx similarity index 98% rename from docs/data/charts/styling/Margin.tsx rename to docs/data/charts/styling/demos/margin/Margin.tsx index f89bff232f8fa..fbafe990f8eda 100644 --- a/docs/data/charts/styling/Margin.tsx +++ b/docs/data/charts/styling/demos/margin/Margin.tsx @@ -21,6 +21,7 @@ const defaultAxisSize = { export default function Margin() { return ( + // @focus-start @padding 2 ` } /> + // @focus-end ); } diff --git a/docs/data/charts/styling/demos/margin/client.ts b/docs/data/charts/styling/demos/margin/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/styling/demos/margin/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/styling/demos/margin/index.ts b/docs/data/charts/styling/demos/margin/index.ts new file mode 100644 index 0000000000000..5e4c9982d89b9 --- /dev/null +++ b/docs/data/charts/styling/demos/margin/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Margin from './Margin'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Margin, { ClientProvider }); diff --git a/docs/data/charts/styling/MuiColorTemplate.tsx b/docs/data/charts/styling/demos/mui-color-template/MuiColorTemplate.tsx similarity index 96% rename from docs/data/charts/styling/MuiColorTemplate.tsx rename to docs/data/charts/styling/demos/mui-color-template/MuiColorTemplate.tsx index cc00d3a9cdfa9..5efd4727a05d0 100644 --- a/docs/data/charts/styling/MuiColorTemplate.tsx +++ b/docs/data/charts/styling/demos/mui-color-template/MuiColorTemplate.tsx @@ -9,8 +9,9 @@ import Button from '@mui/material/Button'; import Brightness4Icon from '@mui/icons-material/Brightness4'; import Brightness7Icon from '@mui/icons-material/Brightness7'; import { Chance } from 'chance'; -import { ScatterChart, ScatterChartProps } from '@mui/x-charts/ScatterChart'; -import { ScatterValueType } from '@mui/x-charts/models'; +import type { ScatterChartProps } from '@mui/x-charts/ScatterChart'; +import { ScatterChart } from '@mui/x-charts/ScatterChart'; +import type { ScatterValueType } from '@mui/x-charts/models'; import { blueberryTwilightPalette, mangoFusionPalette, @@ -105,6 +106,7 @@ const categories = { type PaletteKey = keyof typeof categories; export default function MuiColorTemplate() { + // @focus-start @padding 1 const theme = useTheme(); const [colorScheme, setColorScheme] = React.useState('blueberryTwilight'); @@ -213,4 +215,5 @@ export default function MuiColorTemplate() { ); + // @focus-end } diff --git a/docs/data/charts/styling/demos/mui-color-template/client.ts b/docs/data/charts/styling/demos/mui-color-template/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/styling/demos/mui-color-template/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/styling/demos/mui-color-template/index.ts b/docs/data/charts/styling/demos/mui-color-template/index.ts new file mode 100644 index 0000000000000..bde0ee58ebc03 --- /dev/null +++ b/docs/data/charts/styling/demos/mui-color-template/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MuiColorTemplate from './MuiColorTemplate'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MuiColorTemplate, { ClientProvider }); diff --git a/docs/data/charts/styling/OverlayWithAxis.tsx b/docs/data/charts/styling/demos/overlay-with-axis/OverlayWithAxis.tsx similarity index 94% rename from docs/data/charts/styling/OverlayWithAxis.tsx rename to docs/data/charts/styling/demos/overlay-with-axis/OverlayWithAxis.tsx index 5bba8328764f4..3b8a9ee6bd775 100644 --- a/docs/data/charts/styling/OverlayWithAxis.tsx +++ b/docs/data/charts/styling/demos/overlay-with-axis/OverlayWithAxis.tsx @@ -9,6 +9,7 @@ const emptySeries = { export default function OverlayWithAxis() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/styling/demos/overlay-with-axis/client.ts b/docs/data/charts/styling/demos/overlay-with-axis/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/styling/demos/overlay-with-axis/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/styling/demos/overlay-with-axis/index.ts b/docs/data/charts/styling/demos/overlay-with-axis/index.ts new file mode 100644 index 0000000000000..472f590e12206 --- /dev/null +++ b/docs/data/charts/styling/demos/overlay-with-axis/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import OverlayWithAxis from './OverlayWithAxis'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, OverlayWithAxis, { ClientProvider }); diff --git a/docs/data/charts/styling/Overlay.tsx b/docs/data/charts/styling/demos/overlay/Overlay.tsx similarity index 87% rename from docs/data/charts/styling/Overlay.tsx rename to docs/data/charts/styling/demos/overlay/Overlay.tsx index ca3b5ad0b9388..736fea5faffc3 100644 --- a/docs/data/charts/styling/Overlay.tsx +++ b/docs/data/charts/styling/demos/overlay/Overlay.tsx @@ -9,8 +9,10 @@ const emptySeries = { export default function Overlay() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/styling/demos/overlay/client.ts b/docs/data/charts/styling/demos/overlay/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/styling/demos/overlay/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/styling/demos/overlay/index.ts b/docs/data/charts/styling/demos/overlay/index.ts new file mode 100644 index 0000000000000..60bfd616a74f0 --- /dev/null +++ b/docs/data/charts/styling/demos/overlay/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Overlay from './Overlay'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Overlay, { ClientProvider }); diff --git a/docs/data/charts/styling/SxStyling.tsx b/docs/data/charts/styling/demos/sx-styling/SxStyling.tsx similarity index 97% rename from docs/data/charts/styling/SxStyling.tsx rename to docs/data/charts/styling/demos/sx-styling/SxStyling.tsx index 80237b7fc6e2d..713d3b2ee560f 100644 --- a/docs/data/charts/styling/SxStyling.tsx +++ b/docs/data/charts/styling/demos/sx-styling/SxStyling.tsx @@ -9,6 +9,7 @@ const colors: string[] = ['#006BD6', '#EC407A']; export default function SxStyling(): React.JSX.Element { return ( + // @focus-start @padding 2 ({ [`.${barClasses.element}`]: { @@ -49,5 +50,6 @@ export default function SxStyling(): React.JSX.Element { colors={colors} height={300} /> + // @focus-end ); } diff --git a/docs/data/charts/styling/demos/sx-styling/client.ts b/docs/data/charts/styling/demos/sx-styling/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/styling/demos/sx-styling/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/styling/demos/sx-styling/index.ts b/docs/data/charts/styling/demos/sx-styling/index.ts new file mode 100644 index 0000000000000..cfb21192d0ec8 --- /dev/null +++ b/docs/data/charts/styling/demos/sx-styling/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SxStyling from './SxStyling'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SxStyling, { ClientProvider }); diff --git a/docs/data/charts/styling/TextStyling.tsx b/docs/data/charts/styling/demos/text-styling/TextStyling.tsx similarity index 96% rename from docs/data/charts/styling/TextStyling.tsx rename to docs/data/charts/styling/demos/text-styling/TextStyling.tsx index 07d5334af5069..c4fc1c2730e5a 100644 --- a/docs/data/charts/styling/TextStyling.tsx +++ b/docs/data/charts/styling/demos/text-styling/TextStyling.tsx @@ -19,6 +19,7 @@ const data = [42, 65, 49, 78, 56, 90, 73, 81, 60, 88, 54, 95]; export default function TextStyling(): React.JSX.Element { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/styling/demos/text-styling/client.ts b/docs/data/charts/styling/demos/text-styling/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/styling/demos/text-styling/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/styling/demos/text-styling/index.ts b/docs/data/charts/styling/demos/text-styling/index.ts new file mode 100644 index 0000000000000..f3c2591519245 --- /dev/null +++ b/docs/data/charts/styling/demos/text-styling/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TextStyling from './TextStyling'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TextStyling, { ClientProvider }); diff --git a/docs/data/charts/styling/styling.md b/docs/data/charts/styling/styling.md index 2827bcecfe49d..902272a918179 100644 --- a/docs/data/charts/styling/styling.md +++ b/docs/data/charts/styling/styling.md @@ -21,7 +21,7 @@ This is the base color used to render its components. ``` -{{"demo": "BasicColor.js"}} +{{"component": "file://./demos/basic-color/index.ts"}} ### Built-in color palettes @@ -31,7 +31,7 @@ If a series doesn't have a `color` prop, the chart assigns a color based on the You can set a custom color palette using the `colors` prop on chart components (or `ChartsContainer` when composing a custom component). You can pass an array of colors, or a callback whose input is the theme's mode (`'dark'` or `'light'`) and returns the array of colors. -{{"demo": "MuiColorTemplate.js"}} +{{"component": "file://./demos/mui-color-template/index.ts"}} ### Custom color palettes @@ -39,7 +39,7 @@ You can generate custom color palettes using [d3-scale-chromatic](https://observ The example below shows the d3 Categorical color palette. -{{"demo": "ColorTemplate.js"}} +{{"component": "file://./demos/color-template/index.ts"}} ### Value-based colors @@ -113,19 +113,19 @@ The callback function receives a `{ value, dataIndex }` object and should return In components where a series-level color is required (for example, the legend), the `color` prop is used instead. -{{"demo": "ColorCallback.js"}} +{{"component": "file://./demos/color-callback/index.ts"}} ## Overlay Charts have built-in overlays for loading and "no data" states that appear when the `loading` prop is `true` and when there is no data to display, respectively. -{{"demo": "Overlay.js"}} +{{"component": "file://./demos/overlay/index.ts"}} ### Axis display You can provide axis data to display axes while loading the data. -{{"demo": "OverlayWithAxis.js"}} +{{"component": "file://./demos/overlay-with-axis/index.ts"}} ### Custom overlay @@ -142,7 +142,7 @@ To modify the default overlay message or translate it, use the `noData` or `load For more advanced customization, use the `loadingOverlay` and `noDataOverlay` slots as shown in the demo below. -{{"demo": "CustomOverlay.js"}} +{{"component": "file://./demos/custom-overlay/index.ts"}} ## Styling @@ -169,13 +169,13 @@ You can update it using the `xAxis` and `yAxis` configuration: Axes only take up space on the side where they are positioned. If an axis is not displayed (`position: 'none'`), it does not take up any space, regardless of its size. -{{"demo": "Margin.js", "hideToolbar": true, "bg": "playground"}} +{{"component": "file://./demos/margin/index.ts", "hideToolbar": true, "bg": "playground"}} ### CSS Charts use SVG for rendering, so you can customize them using the `sx` prop and target any subcomponents using their class names. -{{"demo": "SxStyling.js"}} +{{"component": "file://./demos/sx-styling/index.ts"}} ### Text customization @@ -201,7 +201,7 @@ Visual attributes such as `fill` don't affect measurement and can be set either The demo below applies a custom font style to both axes and rotates the x-axis tick labels. -{{"demo": "TextStyling.js"}} +{{"component": "file://./demos/text-styling/index.ts"}} ### Drawing area background @@ -210,7 +210,7 @@ This is only possible when [composing custom charts](/x/react-charts/composition The demo below defines a basic `Background` component that adds a light gray background. -{{"demo": "BackgroundStyling.js"}} +{{"component": "file://./demos/background-styling/index.ts"}} ### Gradients and patterns @@ -219,4 +219,4 @@ You can use gradients and patterns to fill charts by passing gradient or pattern Gradients or patterns defined this way are only usable for SVG. A direct definition like `color: "url(#Pattern)"` causes undefined colors in HTML elements. -{{"demo": "GradientTooltip.js"}} +{{"component": "file://./demos/gradient-tooltip/index.ts"}} diff --git a/docs/data/charts/toolbar/ChartsToolbar.js b/docs/data/charts/toolbar/ChartsToolbar.js deleted file mode 100644 index 5882984a8c0c8..0000000000000 --- a/docs/data/charts/toolbar/ChartsToolbar.js +++ /dev/null @@ -1,25 +0,0 @@ -import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; -import { data } from './randomData'; - -const series = [ - { - label: 'Series A', - data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })), - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })), - }, -]; - -export default function ChartsToolbar() { - return ( - - ); -} diff --git a/docs/data/charts/toolbar/ChartsToolbar.tsx.preview b/docs/data/charts/toolbar/ChartsToolbar.tsx.preview deleted file mode 100644 index 436b591d0195a..0000000000000 --- a/docs/data/charts/toolbar/ChartsToolbar.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/toolbar/ChartsToolbarCustomElements.js b/docs/data/charts/toolbar/ChartsToolbarCustomElements.js deleted file mode 100644 index 6ee420035bc7f..0000000000000 --- a/docs/data/charts/toolbar/ChartsToolbarCustomElements.js +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from 'react'; -import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; - -import Button from '@mui/material/Button'; -import { chartsToolbarClasses } from '@mui/x-charts/Toolbar'; -import { data } from './randomData'; - -const params = { - height: 300, - series: [ - { - label: 'Series A', - data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })), - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })), - }, - ], -}; - -const CustomIconButton = React.forwardRef(function CustomIconButton(props, ref) { - return
); + // @focus-end } diff --git a/docs/data/charts/tooltip/demos/custom-tooltip-content/client.ts b/docs/data/charts/tooltip/demos/custom-tooltip-content/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/tooltip/demos/custom-tooltip-content/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/tooltip/demos/custom-tooltip-content/index.ts b/docs/data/charts/tooltip/demos/custom-tooltip-content/index.ts new file mode 100644 index 0000000000000..10476988b40e7 --- /dev/null +++ b/docs/data/charts/tooltip/demos/custom-tooltip-content/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomTooltipContent from './CustomTooltipContent'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomTooltipContent, { ClientProvider }); diff --git a/docs/data/charts/tooltip/CustomTooltipPosition.tsx b/docs/data/charts/tooltip/demos/custom-tooltip-position/CustomTooltipPosition.tsx similarity index 90% rename from docs/data/charts/tooltip/CustomTooltipPosition.tsx rename to docs/data/charts/tooltip/demos/custom-tooltip-position/CustomTooltipPosition.tsx index cff40a95aca5a..8617a4c0f0b04 100644 --- a/docs/data/charts/tooltip/CustomTooltipPosition.tsx +++ b/docs/data/charts/tooltip/demos/custom-tooltip-position/CustomTooltipPosition.tsx @@ -13,12 +13,13 @@ import { ChartsTooltipContainer, ChartsItemTooltipContent, } from '@mui/x-charts/ChartsTooltip'; -import { ItemTooltip } from './ItemTooltip'; -import { ItemTooltipFixedY } from './ItemTooltipFixedY'; -import { ItemTooltipTopElement } from './ItemTooltipTopElement'; -import { dataset, valueFormatter } from '../dataset/weather'; +import { ItemTooltip } from '../../ItemTooltip'; +import { ItemTooltipFixedY } from '../../ItemTooltipFixedY'; +import { ItemTooltipTopElement } from '../../ItemTooltipTopElement'; +import { dataset, valueFormatter } from '../../../dataset/weather'; export default function CustomTooltipPosition() { + // @focus-start @padding 1 const [tooltipType, setTootltipType] = React.useState< 'mouse' | 'fixedY' | 'itemTop' >('itemTop'); @@ -81,4 +82,5 @@ export default function CustomTooltipPosition() {
); + // @focus-end } diff --git a/docs/data/charts/tooltip/demos/custom-tooltip-position/client.ts b/docs/data/charts/tooltip/demos/custom-tooltip-position/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/tooltip/demos/custom-tooltip-position/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/tooltip/demos/custom-tooltip-position/index.ts b/docs/data/charts/tooltip/demos/custom-tooltip-position/index.ts new file mode 100644 index 0000000000000..895257dfcdd43 --- /dev/null +++ b/docs/data/charts/tooltip/demos/custom-tooltip-position/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomTooltipPosition from './CustomTooltipPosition'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomTooltipPosition, { ClientProvider }); diff --git a/docs/data/charts/tooltip/Formatting.tsx b/docs/data/charts/tooltip/demos/formatting/Formatting.tsx similarity index 98% rename from docs/data/charts/tooltip/Formatting.tsx rename to docs/data/charts/tooltip/demos/formatting/Formatting.tsx index f567618876240..717b28f673cb7 100644 --- a/docs/data/charts/tooltip/Formatting.tsx +++ b/docs/data/charts/tooltip/demos/formatting/Formatting.tsx @@ -81,6 +81,7 @@ const currencyFormatter = new Intl.NumberFormat('en-US', { export default function Formatting() { return ( + // @focus-start @padding 2 (v === null ? '' : currencyFormatter(v)), }))} /> + // @focus-end ); } diff --git a/docs/data/charts/tooltip/demos/formatting/client.ts b/docs/data/charts/tooltip/demos/formatting/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/tooltip/demos/formatting/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/tooltip/demos/formatting/index.ts b/docs/data/charts/tooltip/demos/formatting/index.ts new file mode 100644 index 0000000000000..d95e308870100 --- /dev/null +++ b/docs/data/charts/tooltip/demos/formatting/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Formatting from './Formatting'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Formatting, { ClientProvider }); diff --git a/docs/data/charts/tooltip/Interaction.tsx b/docs/data/charts/tooltip/demos/interaction/Interaction.tsx similarity index 93% rename from docs/data/charts/tooltip/Interaction.tsx rename to docs/data/charts/tooltip/demos/interaction/Interaction.tsx index c7215bae23f5f..bb0a8639aeed0 100644 --- a/docs/data/charts/tooltip/Interaction.tsx +++ b/docs/data/charts/tooltip/demos/interaction/Interaction.tsx @@ -15,8 +15,10 @@ const barChartsParams = { export default function Interaction() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/charts/tooltip/demos/interaction/client.ts b/docs/data/charts/tooltip/demos/interaction/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/tooltip/demos/interaction/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/tooltip/demos/interaction/index.ts b/docs/data/charts/tooltip/demos/interaction/index.ts new file mode 100644 index 0000000000000..15047bd70e1ef --- /dev/null +++ b/docs/data/charts/tooltip/demos/interaction/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Interaction from './Interaction'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Interaction, { ClientProvider }); diff --git a/docs/data/charts/tooltip/SeriesFormatter.tsx b/docs/data/charts/tooltip/demos/series-formatter/SeriesFormatter.tsx similarity index 84% rename from docs/data/charts/tooltip/SeriesFormatter.tsx rename to docs/data/charts/tooltip/demos/series-formatter/SeriesFormatter.tsx index 78f3dabbada43..e061b3e701d4d 100644 --- a/docs/data/charts/tooltip/SeriesFormatter.tsx +++ b/docs/data/charts/tooltip/demos/series-formatter/SeriesFormatter.tsx @@ -1,4 +1,5 @@ -import { PieChart, PieChartProps } from '@mui/x-charts/PieChart'; +import type { PieChartProps } from '@mui/x-charts/PieChart'; +import { PieChart } from '@mui/x-charts/PieChart'; import { legendClasses } from '@mui/x-charts/ChartsLegend'; const otherProps: Partial = { @@ -21,6 +22,7 @@ const data = [ export default function SeriesFormatter() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/tooltip/demos/series-formatter/client.ts b/docs/data/charts/tooltip/demos/series-formatter/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/tooltip/demos/series-formatter/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/tooltip/demos/series-formatter/index.ts b/docs/data/charts/tooltip/demos/series-formatter/index.ts new file mode 100644 index 0000000000000..00c5c30bc06cf --- /dev/null +++ b/docs/data/charts/tooltip/demos/series-formatter/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SeriesFormatter from './SeriesFormatter'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SeriesFormatter, { ClientProvider }); diff --git a/docs/data/charts/tooltip/SortDemo.tsx b/docs/data/charts/tooltip/demos/sort-demo/SortDemo.tsx similarity index 97% rename from docs/data/charts/tooltip/SortDemo.tsx rename to docs/data/charts/tooltip/demos/sort-demo/SortDemo.tsx index 64078e0c99a44..9f6b0a69d94f7 100644 --- a/docs/data/charts/tooltip/SortDemo.tsx +++ b/docs/data/charts/tooltip/demos/sort-demo/SortDemo.tsx @@ -15,6 +15,7 @@ function getExample(sort: 'none' | 'asc' | 'desc') { } export default function SortDemo() { + // @focus-start @padding 1 const [sort, setSort] = React.useState<'none' | 'asc' | 'desc'>('none'); return ( @@ -52,4 +53,5 @@ export default function SortDemo() { ); + // @focus-end } diff --git a/docs/data/charts/tooltip/demos/sort-demo/client.ts b/docs/data/charts/tooltip/demos/sort-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/tooltip/demos/sort-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/tooltip/demos/sort-demo/index.ts b/docs/data/charts/tooltip/demos/sort-demo/index.ts new file mode 100644 index 0000000000000..0d34bc7dd1586 --- /dev/null +++ b/docs/data/charts/tooltip/demos/sort-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SortDemo from './SortDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SortDemo, { ClientProvider }); diff --git a/docs/data/charts/tooltip/SyncTooltip.tsx b/docs/data/charts/tooltip/demos/sync-tooltip/SyncTooltip.tsx similarity index 87% rename from docs/data/charts/tooltip/SyncTooltip.tsx rename to docs/data/charts/tooltip/demos/sync-tooltip/SyncTooltip.tsx index a4465ea83199d..290a4091f47f9 100644 --- a/docs/data/charts/tooltip/SyncTooltip.tsx +++ b/docs/data/charts/tooltip/demos/sync-tooltip/SyncTooltip.tsx @@ -1,14 +1,17 @@ import * as React from 'react'; import Stack from '@mui/material/Stack'; import { styled } from '@mui/material/styles'; -import { BarChart, BarChartProps } from '@mui/x-charts/BarChart'; -import { PieChart, PieChartProps } from '@mui/x-charts/PieChart'; -import { BarItemIdentifier, PieItemIdentifier } from '@mui/x-charts/models'; +import type { BarChartProps } from '@mui/x-charts/BarChart'; +import { BarChart } from '@mui/x-charts/BarChart'; +import type { PieChartProps } from '@mui/x-charts/PieChart'; +import { PieChart } from '@mui/x-charts/PieChart'; +import type { BarItemIdentifier, PieItemIdentifier } from '@mui/x-charts/models'; const CodeBlock = styled('pre')({ minHeight: 125, }); export default function SyncTooltip() { + // @focus-start @padding 1 const [pieTooltipItem, setPieTooltipItem] = React.useState(null); const [barTooltipItem, setBarTooltipItem] = @@ -63,6 +66,7 @@ export default function SyncTooltip() { ); + // @focus-end } const barChartsProps: BarChartProps = { diff --git a/docs/data/charts/tooltip/demos/sync-tooltip/client.ts b/docs/data/charts/tooltip/demos/sync-tooltip/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/tooltip/demos/sync-tooltip/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/tooltip/demos/sync-tooltip/index.ts b/docs/data/charts/tooltip/demos/sync-tooltip/index.ts new file mode 100644 index 0000000000000..1cdb55e648b08 --- /dev/null +++ b/docs/data/charts/tooltip/demos/sync-tooltip/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SyncTooltip from './SyncTooltip'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SyncTooltip, { ClientProvider }); diff --git a/docs/data/charts/tooltip/SynchronizedTooltip.tsx b/docs/data/charts/tooltip/demos/synchronized-tooltip/SynchronizedTooltip.tsx similarity index 95% rename from docs/data/charts/tooltip/SynchronizedTooltip.tsx rename to docs/data/charts/tooltip/demos/synchronized-tooltip/SynchronizedTooltip.tsx index f92a9275e6e72..e2816d154274b 100644 --- a/docs/data/charts/tooltip/SynchronizedTooltip.tsx +++ b/docs/data/charts/tooltip/demos/synchronized-tooltip/SynchronizedTooltip.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; import NoSsr from '@mui/material/NoSsr'; import Paper from '@mui/material/Paper'; -import Popper, { PopperProps } from '@mui/material/Popper'; +import type { PopperProps } from '@mui/material/Popper'; +import Popper from '@mui/material/Popper'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import { LineChart } from '@mui/x-charts/LineChart'; -import { AxisItemIdentifier } from '@mui/x-charts/models'; +import type { AxisItemIdentifier } from '@mui/x-charts/models'; const X_AXIS_ID = 'shared-x'; @@ -50,6 +51,7 @@ const charts = [ export default function SynchronizedTooltip() { // Shared between every chart. `[]` when no chart is hovered. + // @focus-start @padding 1 const [highlightedAxis, setHighlightedAxis] = React.useState( [], ); @@ -165,6 +167,7 @@ export default function SynchronizedTooltip() { ); + // @focus-end } const popperModifiers = [ diff --git a/docs/data/charts/tooltip/demos/synchronized-tooltip/client.ts b/docs/data/charts/tooltip/demos/synchronized-tooltip/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/tooltip/demos/synchronized-tooltip/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/tooltip/demos/synchronized-tooltip/index.ts b/docs/data/charts/tooltip/demos/synchronized-tooltip/index.ts new file mode 100644 index 0000000000000..27cbd42704707 --- /dev/null +++ b/docs/data/charts/tooltip/demos/synchronized-tooltip/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SynchronizedTooltip from './SynchronizedTooltip'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SynchronizedTooltip, { ClientProvider }); diff --git a/docs/data/charts/tooltip/TooltipPosition.tsx b/docs/data/charts/tooltip/demos/tooltip-position/TooltipPosition.tsx similarity index 94% rename from docs/data/charts/tooltip/TooltipPosition.tsx rename to docs/data/charts/tooltip/demos/tooltip-position/TooltipPosition.tsx index c217c7d6c642a..7292b27ccb5b8 100644 --- a/docs/data/charts/tooltip/TooltipPosition.tsx +++ b/docs/data/charts/tooltip/demos/tooltip-position/TooltipPosition.tsx @@ -2,8 +2,8 @@ import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; import { BarChart } from '@mui/x-charts/BarChart'; -import { AxisValueFormatterContext } from '@mui/x-charts/models'; -import { dataset, valueFormatter } from '../dataset/weather'; +import type { AxisValueFormatterContext } from '@mui/x-charts/models'; +import { dataset, valueFormatter } from '../../../dataset/weather'; const chartSetting = { height: 300, @@ -11,6 +11,7 @@ const chartSetting = { export default function TooltipPosition() { return ( + // @focus-start @padding 2 `} /> + // @focus-end ); } diff --git a/docs/data/charts/tooltip/demos/tooltip-position/client.ts b/docs/data/charts/tooltip/demos/tooltip-position/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/tooltip/demos/tooltip-position/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/tooltip/demos/tooltip-position/index.ts b/docs/data/charts/tooltip/demos/tooltip-position/index.ts new file mode 100644 index 0000000000000..7777e27d00bfa --- /dev/null +++ b/docs/data/charts/tooltip/demos/tooltip-position/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TooltipPosition from './TooltipPosition'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TooltipPosition, { ClientProvider }); diff --git a/docs/data/charts/tooltip/TooltipStyle.tsx b/docs/data/charts/tooltip/demos/tooltip-style/TooltipStyle.tsx similarity index 91% rename from docs/data/charts/tooltip/TooltipStyle.tsx rename to docs/data/charts/tooltip/demos/tooltip-style/TooltipStyle.tsx index 6c86b0ba241a6..9e878b16b9467 100644 --- a/docs/data/charts/tooltip/TooltipStyle.tsx +++ b/docs/data/charts/tooltip/demos/tooltip-style/TooltipStyle.tsx @@ -10,6 +10,7 @@ const params = { export default function TooltipStyle() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/tooltip/demos/tooltip-style/client.ts b/docs/data/charts/tooltip/demos/tooltip-style/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/tooltip/demos/tooltip-style/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/tooltip/demos/tooltip-style/index.ts b/docs/data/charts/tooltip/demos/tooltip-style/index.ts new file mode 100644 index 0000000000000..a5efd01280e2e --- /dev/null +++ b/docs/data/charts/tooltip/demos/tooltip-style/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TooltipStyle from './TooltipStyle'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TooltipStyle, { ClientProvider }); diff --git a/docs/data/charts/tooltip/tooltip.md b/docs/data/charts/tooltip/tooltip.md index c7063c9c03b4a..cc966bfc84d7b 100644 --- a/docs/data/charts/tooltip/tooltip.md +++ b/docs/data/charts/tooltip/tooltip.md @@ -22,7 +22,7 @@ You can trigger the tooltip with two kinds of events: To pass this trigger attribute to the tooltip, use `slotProps.tooltip.trigger`. -{{"demo": "Interaction.js"}} +{{"component": "file://./demos/interaction/index.ts"}} ## Formatting @@ -34,7 +34,7 @@ The demo below shows: - Time axis values formatted to show only the year - Series values formatted in US dollars -{{"demo": "Formatting.js"}} +{{"component": "file://./demos/formatting/index.ts"}} ### Advanced formatting @@ -42,7 +42,7 @@ The series `valueFormatter` function receives a context as its second argument c The demo below uses `dataIndex` to add each team's rank in the tooltip. -{{"demo": "SeriesFormatter.js"}} +{{"component": "file://./demos/series-formatter/index.ts"}} ### Axis formatter @@ -55,7 +55,7 @@ In this demo, you can see: - The country axis displays only the country code - The label displays annotated data: `Country: name (code)` -{{"demo": "AxisFormatter.js"}} +{{"component": "file://./demos/axis-formatter/index.ts"}} ### Label formatting @@ -109,7 +109,7 @@ This prop accepts the following values: Regardless of the `sort` prop being `'asc'` or `'desc'`, series whose value is `null` are always sorted last. -{{"demo": "SortDemo.js"}} +{{"component": "file://./demos/sort-demo/index.ts"}} ## Position @@ -128,7 +128,7 @@ For example, setting `anchor: 'node'`, `position: 'bottom'`, and `placement: 'to You can pass these props to the tooltip using `slotProps.tooltip`, or directly to either `ChartsTooltip` or `ChartsTooltipContainer` if you're composing a custom component. -{{"demo": "TooltipPosition.js", "hideToolbar": true, "bg": "playground"}} +{{"component": "file://./demos/tooltip-position/index.ts", "hideToolbar": true, "bg": "playground"}} ## Portaling the tooltip @@ -165,7 +165,7 @@ import { chartsTooltipClasses } from '@mui/x-charts'; You can also use the `sx` prop of the tooltip itself via `slotProps.tooltip`. -{{"demo": "TooltipStyle.js"}} +{{"component": "file://./demos/tooltip-style/index.ts"}} ## Using a custom tooltip @@ -196,13 +196,13 @@ Make sure the tooltip `trigger` is set to `"item"`. Otherwise no tooltip will be shown. ::: -{{"demo": "ControlledTooltip.js"}} +{{"component": "file://./demos/controlled-tooltip/index.ts"}} ### Synchronizing item tooltip The item tooltip control can be used to sync tooltips between multiple charts. -{{"demo": "SyncTooltip.js"}} +{{"component": "file://./demos/sync-tooltip/index.ts"}} ## Controlling the axis tooltip @@ -216,7 +216,7 @@ Make sure the tooltip `trigger` is set to `"axis"`. Otherwise no tooltip will be shown. ::: -{{"demo": "ControlledAxisTooltip.js"}} +{{"component": "file://./demos/controlled-axis-tooltip/index.ts"}} ### Synchronizing tooltips across charts @@ -225,7 +225,7 @@ To compare values at the same position across stacked charts, share the highligh Each chart receives the same `highlightedAxis` state and updates it with `onHighlightedAxisChange`, so hovering one chart moves the crosshair on every chart. The built-in tooltip is turned off with `slotProps={{ tooltip: { trigger: 'none' } }}`, and one tooltip reads the value of every chart at the shared `dataIndex`. -{{"demo": "SynchronizedTooltip.js"}} +{{"component": "file://./demos/synchronized-tooltip/index.ts"}} ## Creating a tooltip @@ -263,7 +263,7 @@ Then you can either render built-in content (with `ChartsItemTooltipContent` or The demo below shows how to use additional hooks such as `useXAxis()` and `useDrawingArea()` to customize the tooltip position. -{{"demo": "CustomTooltipPosition.js"}} +{{"component": "file://./demos/custom-tooltip-position/index.ts"}} #### Modifying the content @@ -279,7 +279,7 @@ It contains: - `color`: The color used to display the item, which includes the impact of [`colorMap`](/x/react-charts/styling/#value-based-colors) - `label`, `value`, `formattedValue`: Values computed to simplify tooltip creation -{{"demo": "CustomTooltipContent.js"}} +{{"component": "file://./demos/custom-tooltip-content/index.ts"}} #### Axis content @@ -290,4 +290,4 @@ For each axis, it contains: - `color`: The color used to display the item, which includes the impact of [`colorMap`](/x/react-charts/styling/#value-based-colors) - `label`, `value`, `formattedValue`: Values computed to simplify tooltip creation -{{"demo": "CustomAxisTooltipContent.js"}} +{{"component": "file://./demos/custom-axis-tooltip-content/index.ts"}} diff --git a/docs/data/charts/zoom-and-pan/BrushZoom.js b/docs/data/charts/zoom-and-pan/BrushZoom.js deleted file mode 100644 index 889b9f5889b43..0000000000000 --- a/docs/data/charts/zoom-and-pan/BrushZoom.js +++ /dev/null @@ -1,54 +0,0 @@ -import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; - -export default function BrushZoom() { - return ( - - - Click and drag on the chart to select an area to zoom into. Double-tap to - reset the zoom. - - - - ); -} - -const xData = [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', -]; - -const yData = [2, 5.5, 9, 13.5, 18, 21, 23.5, 23, 20, 15, 9, 4]; diff --git a/docs/data/charts/zoom-and-pan/ExternalZoomManagement.js b/docs/data/charts/zoom-and-pan/ExternalZoomManagement.js deleted file mode 100644 index 34015b923e402..0000000000000 --- a/docs/data/charts/zoom-and-pan/ExternalZoomManagement.js +++ /dev/null @@ -1,67 +0,0 @@ -import * as React from 'react'; -import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; -import Button from '@mui/material/Button'; -import Stack from '@mui/material/Stack'; - -import { useChartProApiRef } from '@mui/x-charts-pro/hooks'; -import { randomData } from './randomData'; - -const initialZoomData = [ - { - axisId: 'my-x-axis', - start: 20, - end: 40, - }, -]; - -export default function ExternalZoomManagement() { - const apiRef = useChartProApiRef(); - const [zoomData, setZoomData] = React.useState(initialZoomData); - - return ( - - i), - }, - ]} - /> - 
{JSON.stringify(zoomData, null, 2)}
-
- -
- - ); -} - -const chartProps = { - height: 300, - sx: { width: '100%' }, - series: [ - { - label: 'Series A', - data: randomData.map((v) => v.y1), - }, - { - label: 'Series B', - data: randomData.map((v) => v.y2), - }, - ], -}; diff --git a/docs/data/charts/zoom-and-pan/ZoomAndPanInteractions.js b/docs/data/charts/zoom-and-pan/ZoomAndPanInteractions.js deleted file mode 100644 index 56c14dd7be037..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomAndPanInteractions.js +++ /dev/null @@ -1,220 +0,0 @@ -import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; - -const knobs = { - // Zoom interactions - zoom: { - knob: 'title', - displayName: 'Zoom interactions', - }, - wheel: { - displayName: 'Wheel', - knob: 'switch', - defaultValue: true, - }, - pinch: { - displayName: 'Pinch', - knob: 'switch', - defaultValue: true, - }, - tapAndDrag: { - displayName: 'Tap and drag', - knob: 'switch', - defaultValue: false, - }, - brush: { - displayName: 'Brush', - knob: 'switch', - defaultValue: false, - }, - doubleTapReset: { - displayName: 'Double tap reset', - knob: 'switch', - defaultValue: false, - }, - // Pan interactions - pan: { - knob: 'title', - displayName: 'Pan interactions', - }, - drag: { - displayName: 'Drag', - knob: 'switch', - defaultValue: true, - }, - pressAndDrag: { - displayName: 'Press and drag', - knob: 'switch', - defaultValue: false, - }, - wheelPan: { - displayName: 'Pan on wheel', - knob: 'switch', - defaultValue: true, - }, -}; - -export default function ZoomAndPanInteractions() { - return ( - { - // Build zoom interactions array - const zoomInteractions = []; - if (props.wheel) { - zoomInteractions.push('wheel'); - } - if (props.pinch) { - zoomInteractions.push('pinch'); - } - if (props.tapAndDrag) { - zoomInteractions.push('tapAndDrag'); - } - if (props.brush) { - zoomInteractions.push('brush'); - } - if (props.doubleTapReset) { - zoomInteractions.push('doubleTapReset'); - } - - // Build pan interactions array - const panInteractions = []; - if (props.drag) { - panInteractions.push('drag'); - } - if (props.pressAndDrag) { - panInteractions.push('pressAndDrag'); - } - if (props.wheelPan) { - panInteractions.push('wheel'); - } - - const zoomInteractionConfig = { - zoom: zoomInteractions, - pan: panInteractions, - }; - - return ( -
- i), - zoom: true, - }, - ]} - yAxis={[ - { - zoom: true, - width: 40, - }, - ]} - series={series} - zoomInteractionConfig={zoomInteractionConfig} - /> -
- ); - }} - getCode={({ props }) => { - // Build zoom interactions array for code generation - const zoomInteractions = []; - if (props.wheel) { - zoomInteractions.push('wheel'); - } - if (props.pinch) { - zoomInteractions.push('pinch'); - } - if (props.tapAndDrag) { - zoomInteractions.push('tapAndDrag'); - } - if (props.brush) { - zoomInteractions.push('brush'); - } - if (props.doubleTapReset) { - zoomInteractions.push('doubleTapReset'); - } - - // Build pan interactions array - const panInteractions = []; - if (props.drag) { - panInteractions.push('drag'); - } - if (props.pressAndDrag) { - panInteractions.push('pressAndDrag'); - } - if (props.wheelPan) { - panInteractions.push('wheel'); - } - - const zoomConfig = - zoomInteractions.length > 0 - ? `["${zoomInteractions.join('", "')}"]` - : '[]'; - const panConfig = - panInteractions.length > 0 ? `["${panInteractions.join('", "')}"]` : '[]'; - - return `import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; - -`; - }} - /> - ); -} - -const data = [ - { - x: 443, - y: 153, - }, - { - x: 110, - y: 217, - }, - { - x: 175, - y: 286, - }, - { - x: 195, - y: 325, - }, - { - x: 351, - y: 144, - }, - { - x: 43, - y: 146, - }, - { - x: 376, - y: 309, - }, - { - x: 31, - y: 236, - }, - { - x: 231, - y: 440, - }, - { - x: 108, - y: 20, - }, -]; - -const series = [ - { - label: 'Series A', - data, - }, -]; diff --git a/docs/data/charts/zoom-and-pan/ZoomBarChart.js b/docs/data/charts/zoom-and-pan/ZoomBarChart.js deleted file mode 100644 index 16f1b268ee852..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomBarChart.js +++ /dev/null @@ -1,117 +0,0 @@ -import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; - -export default function ZoomBarChart() { - return ( - i), zoom: true }]} - series={series} - /> - ); -} - -const data = [ - { - y1: 443.28, - y2: 153.9, - }, - { - y1: 110.5, - y2: 217.8, - }, - { - y1: 175.23, - y2: 286.32, - }, - { - y1: 195.97, - y2: 325.12, - }, - { - y1: 351.77, - y2: 144.58, - }, - { - y1: 43.253, - y2: 146.51, - }, - { - y1: 376.34, - y2: 309.69, - }, - { - y1: 31.514, - y2: 236.38, - }, - { - y1: 231.31, - y2: 440.72, - }, - { - y1: 108.04, - y2: 20.29, - }, - { - y1: 321.77, - y2: 484.17, - }, - { - y1: 120.18, - y2: 54.962, - }, - { - y1: 366.2, - y2: 418.5, - }, - { - y1: 451.45, - y2: 181.32, - }, - { - y1: 294.8, - y2: 440.9, - }, - { - y1: 121.83, - y2: 273.52, - }, - { - y1: 287.7, - y2: 346.7, - }, - { - y1: 134.06, - y2: 74.528, - }, - { - y1: 104.5, - y2: 150.9, - }, - { - y1: 413.07, - y2: 26.483, - }, - { - y1: 74.68, - y2: 333.2, - }, - { - y1: 360.6, - y2: 422.0, - }, - { - y1: 330.72, - y2: 488.06, - }, -]; - -const series = [ - { - label: 'Series A', - data: data.map((v) => v.y1), - }, - { - label: 'Series B', - data: data.map((v) => v.y2), - }, -]; diff --git a/docs/data/charts/zoom-and-pan/ZoomBarChart.tsx.preview b/docs/data/charts/zoom-and-pan/ZoomBarChart.tsx.preview deleted file mode 100644 index e30c5fb898652..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomBarChart.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - i), zoom: true }]} - series={series} -/> \ No newline at end of file diff --git a/docs/data/charts/zoom-and-pan/ZoomControlled.js b/docs/data/charts/zoom-and-pan/ZoomControlled.js deleted file mode 100644 index 7097bc9558529..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomControlled.js +++ /dev/null @@ -1,79 +0,0 @@ -import * as React from 'react'; -import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; -import Button from '@mui/material/Button'; -import Stack from '@mui/material/Stack'; - -import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; -import { randomData } from './randomData'; - -const lineAxis = [ - { - zoom: true, - scaleType: 'point', - id: 'shared-x-axis', - data: randomData.map((v, i) => i), - }, -]; - -const barAxis = [ - { - zoom: true, - id: 'shared-x-axis', - data: randomData.map((v, i) => i), - }, -]; - -const initialZoomData = [ - { - axisId: 'shared-x-axis', - start: 20, - end: 40, - }, -]; - -export default function ZoomControlled() { - const [zoomData, setZoomData] = React.useState(initialZoomData); - - return ( - - - - 
{JSON.stringify(zoomData, null, 2)}
-
- -
- - ); -} - -const chartProps = { - height: 300, - sx: { width: '100%' }, - series: [ - { - label: 'Series A', - data: randomData.map((v) => v.y1), - }, - { - label: 'Series B', - data: randomData.map((v) => v.y2), - }, - ], -}; diff --git a/docs/data/charts/zoom-and-pan/ZoomFilterMode.js b/docs/data/charts/zoom-and-pan/ZoomFilterMode.js deleted file mode 100644 index a0395292463e9..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomFilterMode.js +++ /dev/null @@ -1,19 +0,0 @@ -import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; -import { dataset, valueFormatter } from './letterFrequency'; - -export default function ZoomFilterMode() { - return ( - - ); -} diff --git a/docs/data/charts/zoom-and-pan/ZoomFilterMode.tsx.preview b/docs/data/charts/zoom-and-pan/ZoomFilterMode.tsx.preview deleted file mode 100644 index 6a8adcf1ca747..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomFilterMode.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/zoom-and-pan/ZoomHeatmap.js b/docs/data/charts/zoom-and-pan/ZoomHeatmap.js deleted file mode 100644 index dc9b884805091..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomHeatmap.js +++ /dev/null @@ -1,142 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { Heatmap } from '@mui/x-charts-pro/Heatmap'; - -import { useTheme } from '@mui/system'; -import { ChartsTooltipContainer, useItemTooltip } from '@mui/x-charts/ChartsTooltip'; -import data from '../dataset/muiXCommits2024.json'; - -const seriesData = []; - -let maxContributions = 0; - -const firstWeekDay = new Date('2023-12-31').getTime(); -for (const datum of data) { - const date = new Date(datum.date); - const weekNumber = Math.floor( - (date.getTime() - firstWeekDay) / (7 * 24 * 60 * 60 * 1000), - ); - const weekDay = date.getDay(); - const value = datum.count; - seriesData.push([weekNumber, weekDay, value]); - - maxContributions = Math.max(maxContributions, value); -} - -const weeks = Array.from({ length: 53 }).map( - (_, i) => new Date(2023, 11, 31 + i * 7), -); -const weekDays = Array.from({ length: 7 }).map((_, i) => i); - -const darkThemeColors = ['#151b23', '#033a16', '#196c2e', '#2ea043', '#56d364']; -const lightThemeColors = ['#eff2f5', '#aceebb', '#4ac26b', '#2da44e', '#116329']; - -const xAxis = { - data: weeks, - valueFormatter: (date) => { - if (date.getDate() < 8) { - return date.toLocaleString('en-US', { month: 'short' }); - } - - return ''; - }, - tickSize: 0, - ordinalTimeTicks: ['months', 'weeks'], - position: 'top', - disableLine: true, - categoryGapRatio: 0.1, -}; - -const yAxis = { - data: weekDays, - tickSize: 0, - valueFormatter: formatWeekDay, - disableLine: true, - categoryGapRatio: 0.1, -}; - -export default function ZoomHeatmap() { - const theme = useTheme(); - - return ( - - - Daily Commit Count to MUI X Repo (2024) - - v * maxContributions), - colors: - theme.palette.mode === 'light' ? lightThemeColors : darkThemeColors, - }, - }, - ]} - series={[{ data: seriesData }]} - borderRadius={4} - slots={{ tooltip: Tooltip }} - /> - Source: GitHub - - ); -} - -const formattedWeekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; - -function formatWeekDay(value, context) { - if (context.location === 'tick') { - switch (value) { - case 1: - case 3: - case 5: - return formattedWeekDays[value]; - default: - return ''; - } - } - - return formattedWeekDays[value]; -} - -function Tooltip() { - return ( - - - - ); -} - -function TooltipContent() { - const tooltipData = useItemTooltip(); - - if (!tooltipData) { - return null; - } - - const { identifier, value } = tooltipData; - - const date = new Date(2023, 11, 31 + identifier.xIndex * 7 + identifier.yIndex); - - return ( - ({ - background: theme.palette.background.paper, - borderRadius: 2, - paddingX: 1, - paddingY: 0.5, - })} - > - - {value} contribution{value === 1 ? '' : 's'} on{' '} - {date.toLocaleString('en-US', { month: 'long', day: 'numeric' })} - - - ); -} diff --git a/docs/data/charts/zoom-and-pan/ZoomInitialRange.js b/docs/data/charts/zoom-and-pan/ZoomInitialRange.js deleted file mode 100644 index 7bffe39c374f3..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomInitialRange.js +++ /dev/null @@ -1,153 +0,0 @@ -import * as React from 'react'; -import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; -import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; - -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import Stack from '@mui/material/Stack'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { dataset } from '../dataset/gdpPerCapitaEvolution'; - -// Time axis: calendar intervals, an absolute date range, a function, or a reset. -const linePresets = [ - { - label: '5Y', - code: "{ unit: 'year', step: 5 }", - value: { unit: 'year', step: 5 }, - }, - { - label: '10Y', - code: "{ unit: 'year', step: 10 }", - value: { unit: 'year', step: 10 }, - }, - { - label: '2000s', - code: '[new Date(2000, 0, 1), new Date(2010, 0, 1)]', - value: [new Date(2000, 0, 1), new Date(2010, 0, 1)], - }, - { - label: 'First half', - code: '() => ({ start: 0, end: 50 })', - value: () => ({ start: 0, end: 50 }), - }, - { label: 'All', code: 'null', value: null }, -]; - -// Band axis: a range expressed with the axis values themselves, or a reset. -const barPresets = [ - { label: 'H1', code: "['Jan', 'Jun']", value: ['Jan', 'Jun'] }, - { label: 'H2', code: "['Jul', 'Dec']", value: ['Jul', 'Dec'] }, - { label: 'Spring–Summer', code: "['Mar', 'Aug']", value: ['Mar', 'Aug'] }, - { label: 'All', code: 'null', value: null }, -]; - -const months = [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', -]; - -const sales = [42, 38, 55, 61, 73, 88, 95, 91, 70, 58, 49, 44]; - -export default function ZoomInitialRange() { - const [chartType, setChartType] = React.useState('line'); - const [label, setLabel] = React.useState('10Y'); - - const presets = chartType === 'line' ? linePresets : barPresets; - const preset = presets.find((item) => item.label === label) ?? presets[0]; - - const handleChartType = (_event, nextType) => { - if (nextType === null) { - return; - } - setChartType(nextType); - // Switch to a preset that exists for the newly selected chart. - setLabel((nextType === 'line' ? linePresets : barPresets)[1].label); - }; - - const initialZoom = [{ axisId: 'x', value: preset.value }]; - - return ( - - - - Line - Bar - - setLabel(event.target.value)} - sx={{ minWidth: 180 }} - > - {presets.map((item) => ( - - {item.label} - - ))} - - - - {chartType === 'line' ? ( - `$${(value / 1000).toFixed(0)}k`, - }, - ]} - series={[ - { dataKey: 'fr', label: 'France' }, - { dataKey: 'gb', label: 'UK' }, - { dataKey: 'dl', label: 'Germany' }, - ]} - height={300} - initialZoom={initialZoom} - /> - ) : ( - - )} - - ); -} diff --git a/docs/data/charts/zoom-and-pan/ZoomKeyboard.js b/docs/data/charts/zoom-and-pan/ZoomKeyboard.js deleted file mode 100644 index 0b962b76c8034..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomKeyboard.js +++ /dev/null @@ -1,24 +0,0 @@ -import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; -import { randomData } from './randomData'; - -export default function ZoomKeyboard() { - return ( - i), zoom: true }]} - yAxis={[{ zoom: true, width: 50 }]} - series={series} - /> - ); -} - -const series = [ - { - label: 'Series A', - data: randomData.map((v) => v.y1), - }, - { - label: 'Series B', - data: randomData.map((v) => v.y2), - }, -]; diff --git a/docs/data/charts/zoom-and-pan/ZoomKeyboard.tsx.preview b/docs/data/charts/zoom-and-pan/ZoomKeyboard.tsx.preview deleted file mode 100644 index e918cf967a0de..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomKeyboard.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - i), zoom: true }]} - yAxis={[{ zoom: true, width: 50 }]} - series={series} -/> \ No newline at end of file diff --git a/docs/data/charts/zoom-and-pan/ZoomLineChart.js b/docs/data/charts/zoom-and-pan/ZoomLineChart.js deleted file mode 100644 index 421253ac27a28..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomLineChart.js +++ /dev/null @@ -1,123 +0,0 @@ -import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; - -export default function ZoomLineChart() { - return ( - i), - }, - ]} - series={series} - /> - ); -} - -const data = [ - { - y1: 443.28, - y2: 153.9, - }, - { - y1: 110.5, - y2: 217.8, - }, - { - y1: 175.23, - y2: 286.32, - }, - { - y1: 195.97, - y2: 325.12, - }, - { - y1: 351.77, - y2: 144.58, - }, - { - y1: 43.253, - y2: 146.51, - }, - { - y1: 376.34, - y2: 309.69, - }, - { - y1: 31.514, - y2: 236.38, - }, - { - y1: 231.31, - y2: 440.72, - }, - { - y1: 108.04, - y2: 20.29, - }, - { - y1: 321.77, - y2: 484.17, - }, - { - y1: 120.18, - y2: 54.962, - }, - { - y1: 366.2, - y2: 418.5, - }, - { - y1: 451.45, - y2: 181.32, - }, - { - y1: 294.8, - y2: 440.9, - }, - { - y1: 121.83, - y2: 273.52, - }, - { - y1: 287.7, - y2: 346.7, - }, - { - y1: 134.06, - y2: 74.528, - }, - { - y1: 104.5, - y2: 150.9, - }, - { - y1: 413.07, - y2: 26.483, - }, - { - y1: 74.68, - y2: 333.2, - }, - { - y1: 360.6, - y2: 422.0, - }, - { - y1: 330.72, - y2: 488.06, - }, -]; - -const series = [ - { - label: 'Series A', - data: data.map((v) => v.y1), - }, - { - label: 'Series B', - data: data.map((v) => v.y2), - }, -]; diff --git a/docs/data/charts/zoom-and-pan/ZoomLineChart.tsx.preview b/docs/data/charts/zoom-and-pan/ZoomLineChart.tsx.preview deleted file mode 100644 index c1d5d38fb2776..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomLineChart.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - i), - }, - ]} - series={series} -/> \ No newline at end of file diff --git a/docs/data/charts/zoom-and-pan/ZoomOptions.js b/docs/data/charts/zoom-and-pan/ZoomOptions.js deleted file mode 100644 index 46b550a9f7057..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomOptions.js +++ /dev/null @@ -1,141 +0,0 @@ -import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; -import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo'; - -const knobs = { - panning: { - knob: 'switch', - defaultValue: true, - }, - minStart: { - knob: 'number', - defaultValue: 0, - step: 1, - min: 0, - max: 50, - }, - maxEnd: { - knob: 'number', - defaultValue: 100, - step: 1, - min: 50, - max: 100, - }, - minSpan: { - knob: 'number', - defaultValue: 10, - step: 1, - min: 0, - max: 100, - }, - maxSpan: { - knob: 'number', - defaultValue: 100, - step: 1, - min: 0, - max: 100, - }, - step: { - knob: 'number', - defaultValue: 5, - step: 1, - min: 1, - max: 100, - }, -}; - -export default function ZoomOptions() { - return ( - ( -
- i), - zoom: props, - }, - ]} - series={series} - /> -
- )} - getCode={({ props }) => { - return `import { BarChart } from '@mui/x-charts/BarChart'; - -`; - }} - /> - ); -} - -const data = [ - { - y1: 443.28, - y2: 153.9, - }, - { - y1: 110.5, - y2: 217.8, - }, - { - y1: 175.23, - y2: 286.32, - }, - { - y1: 195.97, - y2: 325.12, - }, - { - y1: 351.77, - y2: 144.58, - }, - { - y1: 43.253, - y2: 146.51, - }, - { - y1: 376.34, - y2: 309.69, - }, - { - y1: 31.514, - y2: 236.38, - }, - { - y1: 231.31, - y2: 440.72, - }, - { - y1: 108.04, - y2: 20.29, - }, -]; - -const series = [ - { - label: 'Series A', - data: data.map((v) => v.y1), - }, - { - label: 'Series B', - data: data.map((v) => v.y2), - }, -]; diff --git a/docs/data/charts/zoom-and-pan/ZoomScatterChart.js b/docs/data/charts/zoom-and-pan/ZoomScatterChart.js deleted file mode 100644 index 7442ec5ef66de..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomScatterChart.js +++ /dev/null @@ -1,195 +0,0 @@ -import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; - -export default function ZoomScatterChart() { - return ( - - ); -} - -const data = [ - { - id: 'data-0', - x1: 329.39, - x2: 391.29, - y1: 443.28, - y2: 153.9, - }, - { - id: 'data-1', - x1: 96.94, - x2: 139.6, - y1: 110.5, - y2: 217.8, - }, - { - id: 'data-2', - x1: 336.35, - x2: 282.34, - y1: 175.23, - y2: 286.32, - }, - { - id: 'data-3', - x1: 159.44, - x2: 384.85, - y1: 195.97, - y2: 325.12, - }, - { - id: 'data-4', - x1: 188.86, - x2: 182.27, - y1: 351.77, - y2: 144.58, - }, - { - id: 'data-5', - x1: 143.86, - x2: 360.22, - y1: 43.253, - y2: 146.51, - }, - { - id: 'data-6', - x1: 202.02, - x2: 209.5, - y1: 376.34, - y2: 309.69, - }, - { - id: 'data-7', - x1: 384.41, - x2: 258.93, - y1: 31.514, - y2: 236.38, - }, - { - id: 'data-8', - x1: 256.76, - x2: 70.571, - y1: 231.31, - y2: 440.72, - }, - { - id: 'data-9', - x1: 143.79, - x2: 419.02, - y1: 108.04, - y2: 20.29, - }, - { - id: 'data-10', - x1: 103.48, - x2: 15.886, - y1: 321.77, - y2: 484.17, - }, - { - id: 'data-11', - x1: 272.39, - x2: 189.03, - y1: 120.18, - y2: 54.962, - }, - { - id: 'data-12', - x1: 23.57, - x2: 456.4, - y1: 366.2, - y2: 418.5, - }, - { - id: 'data-13', - x1: 219.73, - x2: 235.96, - y1: 451.45, - y2: 181.32, - }, - { - id: 'data-14', - x1: 54.99, - x2: 434.5, - y1: 294.8, - y2: 440.9, - }, - { - id: 'data-15', - x1: 134.13, - x2: 383.8, - y1: 121.83, - y2: 273.52, - }, - { - id: 'data-16', - x1: 12.7, - x2: 270.8, - y1: 287.7, - y2: 346.7, - }, - { - id: 'data-17', - x1: 176.51, - x2: 119.17, - y1: 134.06, - y2: 74.528, - }, - { - id: 'data-18', - x1: 65.05, - x2: 78.93, - y1: 104.5, - y2: 150.9, - }, - { - id: 'data-19', - x1: 162.25, - x2: 63.707, - y1: 413.07, - y2: 26.483, - }, - { - id: 'data-20', - x1: 68.88, - x2: 150.8, - y1: 74.68, - y2: 333.2, - }, - { - id: 'data-21', - x1: 95.29, - x2: 329.1, - y1: 360.6, - y2: 422.0, - }, - { - id: 'data-22', - x1: 390.62, - x2: 10.01, - y1: 330.72, - y2: 488.06, - }, -]; - -const series = [ - { - label: 'Series A', - data: data.map((v) => ({ x: v.x1, y: v.y1, id: v.id })), - }, - { - label: 'Series B', - data: data.map((v) => ({ x: v.x1, y: v.y2, id: v.id })), - }, -]; diff --git a/docs/data/charts/zoom-and-pan/ZoomScatterChart.tsx.preview b/docs/data/charts/zoom-and-pan/ZoomScatterChart.tsx.preview deleted file mode 100644 index 81bed7a56087e..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomScatterChart.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/charts/zoom-and-pan/ZoomSlider.js b/docs/data/charts/zoom-and-pan/ZoomSlider.js deleted file mode 100644 index b66b5051a0950..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomSlider.js +++ /dev/null @@ -1,59 +0,0 @@ -import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; - -const dataLength = 801; -const data = Array.from({ length: dataLength }).map((_, i) => ({ - x: i, - y: 50 + Math.sin(i / 5) * 25, -})); -const series2Data = Array.from({ length: dataLength }).map((_, i) => ({ - x: i, - y: 50 + Math.sin(i / 10) * 25, -})); - -const xData = data.map((d) => d.x); - -export default function ZoomSlider() { - return ( - v.toLocaleString('en-US'), - }, - { - id: 'x2', - data: series2Data.map((d) => d.x), - position: 'top', - zoom: { - slider: { enabled: true }, - }, - }, - ]} - yAxis={[ - { id: 'y', width: 28, zoom: { slider: { enabled: true } } }, - { - id: 'y2', - position: 'right', - width: 28, - zoom: { slider: { enabled: true } }, - }, - ]} - series={[{ data }, { data: series2Data, xAxisId: 'x2', yAxisId: 'y2' }]} - height={400} - margin={{ bottom: 40 }} - initialZoom={[ - { axisId: 'x', start: 45, end: 55 }, - { axisId: 'x2', start: 30, end: 70 }, - { axisId: 'y', start: 40, end: 60 }, - { axisId: 'y2', start: 30, end: 70 }, - ]} - /> - ); -} diff --git a/docs/data/charts/zoom-and-pan/ZoomSliderComposition.js b/docs/data/charts/zoom-and-pan/ZoomSliderComposition.js deleted file mode 100644 index 7ebc8be22e4b3..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomSliderComposition.js +++ /dev/null @@ -1,49 +0,0 @@ -import * as React from 'react'; -import { BarPlot } from '@mui/x-charts/BarChart'; -import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; -import { LinePlot } from '@mui/x-charts/LineChart'; -import { ChartsContainerPro } from '@mui/x-charts-pro/ChartsContainerPro'; -import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath'; -import { ChartsZoomSlider } from '@mui/x-charts-pro/ChartsZoomSlider'; -import { Chance } from 'chance'; - -const chance = new Chance(42); - -const xAxisData = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i)); -const firstSeriesData = Array.from({ length: 26 }, () => - chance.integer({ min: 0, max: 10 }), -); -const secondSeriesData = Array.from({ length: 26 }, () => - chance.integer({ min: 0, max: 10 }), -); - -export default function ZoomSliderComposition() { - const clipPathId = React.useId(); - - return ( - - - - - - - - - - ); -} diff --git a/docs/data/charts/zoom-and-pan/ZoomSliderPreview.js b/docs/data/charts/zoom-and-pan/ZoomSliderPreview.js deleted file mode 100644 index 2ceac7eb4989c..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomSliderPreview.js +++ /dev/null @@ -1,330 +0,0 @@ -import * as React from 'react'; -import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; - -import Typography from '@mui/material/Typography'; -import Stack from '@mui/material/Stack'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import ToggleButton from '@mui/material/ToggleButton'; -import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; -import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; -import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium'; -import { CandlestickChart } from '@mui/x-charts-premium/CandlestickChart'; - -import { - dateAxisFormatter, - usUnemploymentRate, -} from '../dataset/usUnemploymentRate'; -import { globalCo2GdpPopulation } from '../dataset/globalCo2GdpPopulation'; -import { globalBirthPerWoman } from '../dataset/globalBirthsPerWoman'; -import { - continents, - countriesInContinent, - countryData, -} from '../dataset/countryData'; -import { shareOfRenewables } from '../dataset/shareOfRenewables'; -import { populationPrediction2050 } from '../dataset/populationPrediction2050'; -import { temperatureBerlinPorto } from '../dataset/temperatureBerlinPorto'; -import sp500 from '../dataset/sp500-intraday.json'; - -const lineData = usUnemploymentRate.map((d) => d.rate / 100); - -const percentageFormatter = new Intl.NumberFormat(undefined, { - style: 'percent', - minimumSignificantDigits: 1, - maximumSignificantDigits: 3, -}); -const gdpPerCapitaFormatter = new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD', - notation: 'compact', -}); -const populationFormatter = new Intl.NumberFormat('en-US', { notation: 'compact' }); -const dayFormatter = new Intl.DateTimeFormat(undefined, { - day: 'numeric', - month: '2-digit', - year: 'numeric', -}); - -const commonXAxisProps = { - id: 'x', - zoom: { filterMode: 'discard', slider: { enabled: true, preview: true } }, -}; - -const commonProps = { - initialZoom: [{ axisId: 'x', start: 20, end: 80 }], - height: 400, -}; - -const lineXAxis = { - scaleType: 'time', - id: 'x', - data: usUnemploymentRate.map((d) => d.date), - valueFormatter: dateAxisFormatter, -}; - -const lineSettings = { - yAxis: [ - { - id: 'y', - width: 44, - valueFormatter: (v) => percentageFormatter.format(v), - min: 0, - }, - ], - series: [ - { - data: lineData, - valueFormatter: (v) => percentageFormatter.format(v), - }, - ], -}; - -const areaXAxis = { - id: 'x', - data: new Array(101).fill(null).map((_, i) => i), - label: 'Age', - valueFormatter: (v) => (v === 100 ? '100+' : Math.round(v).toString()), -}; - -const areaSettings = { - yAxis: [ - { - id: 'y', - width: 44, - valueFormatter: (v) => populationFormatter.format(v), - }, - ], - series: ['Europe', 'Asia', 'Americas', 'Africa', 'Oceania'].map((continent) => ({ - data: populationPrediction2050 - .filter((point) => point.location === continent) - .map((point) => point.value), - area: true, - label: continent, - stack: 'population', - valueFormatter: (v) => populationFormatter.format(v), - })), -}; - -const scatterXAxis = { - valueFormatter: (v) => gdpPerCapitaFormatter.format(v), -}; -const scatterSettings = { - yAxis: [{ id: 'y', width: 16, min: 0 }], - series: continents.map((continent) => ({ - label: continent, - data: countriesInContinent[continent] - .map((code) => ({ - id: code, - x: globalCo2GdpPopulation.find((d) => d.code === code)?.gdpPerCapita, - y: globalBirthPerWoman.find((d) => d.code === code)?.rate, - })) - .filter((d) => d.x !== undefined && d.y !== undefined), - valueFormatter: (value) => - `${countryData[value.id].country} - Birth rate: ${value.y} - GDP per capita: ${gdpPerCapitaFormatter.format(value.x)}`, - })), -}; - -const sortedShareOfRenewables = shareOfRenewables.toSorted( - (a, b) => a.renewablesPercentage - b.renewablesPercentage, -); -const barXAxis = { - data: sortedShareOfRenewables.map((d) => countryData[d.code].country), - tickLabelStyle: { angle: -45 }, - height: 90, -}; -const barSettings = { - series: [ - { - data: sortedShareOfRenewables.map((d) => d.renewablesPercentage / 100), - valueFormatter: (v) => percentageFormatter.format(v), - }, - ], -}; - -const rangeBarXAxis = { - data: temperatureBerlinPorto.months, - valueFormatter: (v, context) => (context.location === 'tick' ? v.slice(0, 3) : v), -}; -const rangeBarSettings = { - yAxis: [{ valueFormatter: (value) => `${value}°C` }], - series: [ - { - id: 'porto', - type: 'rangeBar', - label: 'Porto, Portugal', - valueFormatter: (value) => - value === null ? null : `${value[0]}°C - ${value[1]}°C`, - data: temperatureBerlinPorto.porto, - }, - { - id: 'berlin', - type: 'rangeBar', - label: 'Berlin, Germany', - valueFormatter: (value) => - value === null ? null : `${value[0]}°C - ${value[1]}°C`, - data: temperatureBerlinPorto.berlin, - }, - ], -}; - -const candlestickXData = sp500.map((entry) => new Date(Date.parse(entry.date))); -const candlestickData = sp500.map((entry) => [ - entry.open, - entry.high, - entry.low, - entry.close, -]); - -export default function ZoomSliderPreview() { - const [chartType, setChartType] = React.useState('bar'); - - const handleChartType = (event, newChartType) => { - if (newChartType !== null) { - setChartType(newChartType); - } - }; - - return ( - - - {['bar', 'rangeBar', 'line', 'area', 'scatter', 'candlestick'].map( - (type) => ( - - {type} - - ), - )} - - {chartType === 'bar' && } - {chartType === 'rangeBar' && } - {chartType === 'line' && } - {chartType === 'area' && } - {chartType === 'scatter' && } - {chartType === 'candlestick' && } - - ); -} - -function LineChartPreview() { - return ( - - - Unemployment Rate in United States (1948-2025) - - - - Source: Federal Reserve Bank of St. Louis. Updated: Jun 6, 2025 7:46 AM CDT. - - - ); -} - -function AreaChartPreview() { - return ( - - - Population by Age Group in 2050 (Projected) - - - - Source: World Population Prospects: The 2024 Revision, United Nations. - - - ); -} - -function BarChartPreview() { - return ( - - - Share of Primary Energy Consumption from Renewables (2023) - - - - Source: Our World in Data. Updated: 2023. - - - ); -} - -function RangeBarChartPreview() { - return ( - - - Average monthly temperature ranges in °C for Porto and Berlin in 1991-2020 - - - - Source: IPMA (Porto), climate-data.org (Berlin) - - - ); -} - -function ScatterChartPreview() { - return ( - - - Births per woman vs GDP per capita (USD, 2023) - - - - GDP per capita is expressed in international dollars at 2021 prices.
- Source: Our World in Data. Updated: 2023. - - - ); -} - -function CandlestickChartPreview() { - return ( - - - S&P 500 Intraday Price - - - v === null ? '' : dayFormatter.format(new Date(v)), - zoom: { - minSpan: 1, - filterMode: 'discard', - slider: { enabled: true, preview: true }, - }, - }, - ]} - height={400} - /> - Source: Yahoo Finance - - ); -} diff --git a/docs/data/charts/zoom-and-pan/ZoomSliderPreviewCustomMarkerSize.js b/docs/data/charts/zoom-and-pan/ZoomSliderPreviewCustomMarkerSize.js deleted file mode 100644 index 6f1d6dafa1e57..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomSliderPreviewCustomMarkerSize.js +++ /dev/null @@ -1,98 +0,0 @@ -import * as React from 'react'; - -import Typography from '@mui/material/Typography'; -import Stack from '@mui/material/Stack'; -import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; -import Slider from '@mui/material/Slider'; -import { globalCo2GdpPopulation } from '../dataset/globalCo2GdpPopulation'; -import { globalBirthPerWoman } from '../dataset/globalBirthsPerWoman'; -import { - continents, - countriesInContinent, - countryData, -} from '../dataset/countryData'; - -const gdpPerCapitaFormatter = new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD', - notation: 'compact', -}); - -const scatterXAxis = { - valueFormatter: (v) => gdpPerCapitaFormatter.format(v), -}; - -const dataPerContinent = continents.map((continent) => - countriesInContinent[continent] - .map((code) => ({ - id: code, - x: globalCo2GdpPopulation.find((d) => d.code === code)?.gdpPerCapita, - y: globalBirthPerWoman.find((d) => d.code === code)?.rate, - })) - .filter((d) => d.x !== undefined && d.y !== undefined), -); - -const scatterSettings = { - yAxis: [{ id: 'y', width: 16, min: 0 }], - height: 300, -}; - -export default function ZoomSliderPreviewCustomMarkerSize() { - const [markerSize, setMarkerSize] = React.useState(2); - const series = continents.map((continent, continentIndex) => ({ - label: continent, - data: dataPerContinent[continentIndex], - preview: { markerSize }, - valueFormatter: (value) => - `${countryData[value.id].country} - Birth rate: ${value.y} - GDP per capita: ${gdpPerCapitaFormatter.format(value.x)}`, - })); - - return ( - - - - Births per woman vs GDP per capita (USD, 2023) - - - - GDP per capita is expressed in international dollars at 2021 prices.
- Source: Our World in Data. Updated: 2023. - - - - - Marker Size: {markerSize} - - setMarkerSize(value)} - value={markerSize} - /> - - - ); -} diff --git a/docs/data/charts/zoom-and-pan/ZoomSliderPreviewSeriesFilter.js b/docs/data/charts/zoom-and-pan/ZoomSliderPreviewSeriesFilter.js deleted file mode 100644 index 1cf6f88b44aeb..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomSliderPreviewSeriesFilter.js +++ /dev/null @@ -1,56 +0,0 @@ -import * as React from 'react'; -import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; -import { inflationData } from '../dataset/inflationRates'; - -const percentageFormatter = (v) => (v == null ? '' : `${v.toFixed(1)}%`); - -const dataset = inflationData.map((d) => ({ - ...d, - average: (d.rateDE + d.rateUK + d.rateFR) / 3, -})); - -const chartConfig = { - height: 400, - dataset, - yAxis: [{ valueFormatter: percentageFormatter }], - series: [ - { - id: 'germany', - dataKey: 'rateDE', - label: 'Germany', - valueFormatter: percentageFormatter, - }, - { - id: 'uk', - dataKey: 'rateUK', - label: 'United Kingdom', - valueFormatter: percentageFormatter, - }, - { - id: 'average', - dataKey: 'average', - label: 'Average', - valueFormatter: percentageFormatter, - }, - ], -}; - -export default function ZoomSliderPreviewSeriesFilter() { - return ( - `${v}`, - zoom: { - slider: { - enabled: true, - preview: { seriesIds: ['average'] }, - }, - }, - }, - ]} - /> - ); -} diff --git a/docs/data/charts/zoom-and-pan/ZoomSliderPreviewSeriesFilter.tsx.preview b/docs/data/charts/zoom-and-pan/ZoomSliderPreviewSeriesFilter.tsx.preview deleted file mode 100644 index e632d4c04e6b4..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomSliderPreviewSeriesFilter.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - `${v}`, - zoom: { - slider: { - enabled: true, - preview: { seriesIds: ['average'] }, - }, - }, - }, - ]} -/> \ No newline at end of file diff --git a/docs/data/charts/zoom-and-pan/ZoomSliderTooltip.js b/docs/data/charts/zoom-and-pan/ZoomSliderTooltip.js deleted file mode 100644 index 1c615b07de2c2..0000000000000 --- a/docs/data/charts/zoom-and-pan/ZoomSliderTooltip.js +++ /dev/null @@ -1,61 +0,0 @@ -import * as React from 'react'; -import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; -import Stack from '@mui/material/Stack'; -import FormControl from '@mui/material/FormControl'; -import InputLabel from '@mui/material/InputLabel'; -import Select from '@mui/material/Select'; -import MenuItem from '@mui/material/MenuItem'; - -const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490]; -const pData = [2400, 1398, -9800, 3908, 4800, -3800, 4300]; - -const xLabels = [ - 'Page A', - 'Page B', - 'Page C', - 'Page D', - 'Page E', - 'Page F', - 'Page G', -]; - -export default function ZoomSliderTooltip() { - const [showTooltip, setShowTooltip] = React.useState('hover'); - - return ( - - - Show Tooltip - - - - location === 'zoom-slider-tooltip' ? `${value.slice(5)}` : `${value}`, - zoom: { slider: { enabled: true, showTooltip } }, - }, - ]} - yAxis={[{ width: 60, max: 10000 }]} - initialZoom={[{ axisId: 'x', start: 20, end: 80 }]} - /> - - ); -} diff --git a/docs/data/charts/zoom-and-pan/BrushZoom.tsx b/docs/data/charts/zoom-and-pan/demos/brush-zoom/BrushZoom.tsx similarity index 95% rename from docs/data/charts/zoom-and-pan/BrushZoom.tsx rename to docs/data/charts/zoom-and-pan/demos/brush-zoom/BrushZoom.tsx index 889b9f5889b43..3df8f752e77aa 100644 --- a/docs/data/charts/zoom-and-pan/BrushZoom.tsx +++ b/docs/data/charts/zoom-and-pan/demos/brush-zoom/BrushZoom.tsx @@ -5,6 +5,7 @@ import Typography from '@mui/material/Typography'; export default function BrushZoom() { return ( + {/* @focus-start */} Click and drag on the chart to select an area to zoom into. Double-tap to reset the zoom. @@ -32,6 +33,7 @@ export default function BrushZoom() { pan: [], }} /> + {/* @focus-end */} ); } diff --git a/docs/data/charts/zoom-and-pan/demos/brush-zoom/client.ts b/docs/data/charts/zoom-and-pan/demos/brush-zoom/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/brush-zoom/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/zoom-and-pan/demos/brush-zoom/index.ts b/docs/data/charts/zoom-and-pan/demos/brush-zoom/index.ts new file mode 100644 index 0000000000000..200ea4b680cab --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/brush-zoom/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BrushZoom from './BrushZoom'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BrushZoom, { ClientProvider }); diff --git a/docs/data/charts/zoom-and-pan/ExternalZoomManagement.tsx b/docs/data/charts/zoom-and-pan/demos/external-zoom-management/ExternalZoomManagement.tsx similarity index 90% rename from docs/data/charts/zoom-and-pan/ExternalZoomManagement.tsx rename to docs/data/charts/zoom-and-pan/demos/external-zoom-management/ExternalZoomManagement.tsx index ef870a3796efb..30e0eeefe6d23 100644 --- a/docs/data/charts/zoom-and-pan/ExternalZoomManagement.tsx +++ b/docs/data/charts/zoom-and-pan/demos/external-zoom-management/ExternalZoomManagement.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; -import { ZoomData } from '@mui/x-charts-pro/models'; +import type { ZoomData } from '@mui/x-charts-pro/models'; import { useChartProApiRef } from '@mui/x-charts-pro/hooks'; -import { randomData } from './randomData'; +import { randomData } from '../../randomData'; const initialZoomData: ZoomData[] = [ { @@ -14,6 +14,7 @@ const initialZoomData: ZoomData[] = [ }, ]; export default function ExternalZoomManagement() { + // @focus-start @padding 1 const apiRef = useChartProApiRef<'line'>(); const [zoomData, setZoomData] = React.useState(initialZoomData); @@ -48,6 +49,7 @@ export default function ExternalZoomManagement() {
); + // @focus-end } const chartProps = { diff --git a/docs/data/charts/zoom-and-pan/demos/external-zoom-management/client.ts b/docs/data/charts/zoom-and-pan/demos/external-zoom-management/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/external-zoom-management/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/zoom-and-pan/demos/external-zoom-management/index.ts b/docs/data/charts/zoom-and-pan/demos/external-zoom-management/index.ts new file mode 100644 index 0000000000000..06495a98955ad --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/external-zoom-management/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ExternalZoomManagement from './ExternalZoomManagement'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ExternalZoomManagement, { ClientProvider }); diff --git a/docs/data/charts/zoom-and-pan/ZoomAndPanInteractions.tsx b/docs/data/charts/zoom-and-pan/demos/zoom-and-pan-interactions/ZoomAndPanInteractions.tsx similarity index 98% rename from docs/data/charts/zoom-and-pan/ZoomAndPanInteractions.tsx rename to docs/data/charts/zoom-and-pan/demos/zoom-and-pan-interactions/ZoomAndPanInteractions.tsx index 3c8bb3886a26d..2530093420cc0 100644 --- a/docs/data/charts/zoom-and-pan/ZoomAndPanInteractions.tsx +++ b/docs/data/charts/zoom-and-pan/demos/zoom-and-pan-interactions/ZoomAndPanInteractions.tsx @@ -57,6 +57,7 @@ const knobs = { export default function ZoomAndPanInteractions() { return ( + // @focus-start @padding 2 `; }} /> + // @focus-end ); } diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-and-pan-interactions/client.ts b/docs/data/charts/zoom-and-pan/demos/zoom-and-pan-interactions/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-and-pan-interactions/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-and-pan-interactions/index.ts b/docs/data/charts/zoom-and-pan/demos/zoom-and-pan-interactions/index.ts new file mode 100644 index 0000000000000..d95ac806fb0db --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-and-pan-interactions/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ZoomAndPanInteractions from './ZoomAndPanInteractions'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ZoomAndPanInteractions, { ClientProvider }); diff --git a/docs/data/charts/zoom-and-pan/ZoomBarChart.tsx b/docs/data/charts/zoom-and-pan/demos/zoom-bar-chart/ZoomBarChart.tsx similarity index 96% rename from docs/data/charts/zoom-and-pan/ZoomBarChart.tsx rename to docs/data/charts/zoom-and-pan/demos/zoom-bar-chart/ZoomBarChart.tsx index 16f1b268ee852..664e8bd05b178 100644 --- a/docs/data/charts/zoom-and-pan/ZoomBarChart.tsx +++ b/docs/data/charts/zoom-and-pan/demos/zoom-bar-chart/ZoomBarChart.tsx @@ -2,11 +2,13 @@ import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; export default function ZoomBarChart() { return ( + // @focus-start @padding 2 i), zoom: true }]} series={series} /> + // @focus-end ); } diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-bar-chart/client.ts b/docs/data/charts/zoom-and-pan/demos/zoom-bar-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-bar-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-bar-chart/index.ts b/docs/data/charts/zoom-and-pan/demos/zoom-bar-chart/index.ts new file mode 100644 index 0000000000000..c58e9dca65e40 --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-bar-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ZoomBarChart from './ZoomBarChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ZoomBarChart, { ClientProvider }); diff --git a/docs/data/charts/zoom-and-pan/ZoomControlled.tsx b/docs/data/charts/zoom-and-pan/demos/zoom-controlled/ZoomControlled.tsx similarity index 91% rename from docs/data/charts/zoom-and-pan/ZoomControlled.tsx rename to docs/data/charts/zoom-and-pan/demos/zoom-controlled/ZoomControlled.tsx index 7eb8fe9c07a4e..5800dc9538bb4 100644 --- a/docs/data/charts/zoom-and-pan/ZoomControlled.tsx +++ b/docs/data/charts/zoom-and-pan/demos/zoom-controlled/ZoomControlled.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; -import { ZoomData } from '@mui/x-charts-pro/models'; +import type { ZoomData } from '@mui/x-charts-pro/models'; import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; -import { randomData } from './randomData'; +import { randomData } from '../../randomData'; const lineAxis = [ { @@ -31,6 +31,7 @@ const initialZoomData: ZoomData[] = [ }, ]; export default function ZoomControlled() { + // @focus-start @padding 1 const [zoomData, setZoomData] = React.useState(initialZoomData); return ( @@ -60,6 +61,7 @@ export default function ZoomControlled() {
); + // @focus-end } const chartProps = { diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-controlled/client.ts b/docs/data/charts/zoom-and-pan/demos/zoom-controlled/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-controlled/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-controlled/index.ts b/docs/data/charts/zoom-and-pan/demos/zoom-controlled/index.ts new file mode 100644 index 0000000000000..fdcbd0ceebce7 --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-controlled/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ZoomControlled from './ZoomControlled'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ZoomControlled, { ClientProvider }); diff --git a/docs/data/charts/zoom-and-pan/ZoomFilterMode.tsx b/docs/data/charts/zoom-and-pan/demos/zoom-filter-mode/ZoomFilterMode.tsx similarity index 78% rename from docs/data/charts/zoom-and-pan/ZoomFilterMode.tsx rename to docs/data/charts/zoom-and-pan/demos/zoom-filter-mode/ZoomFilterMode.tsx index a0395292463e9..72db81460de17 100644 --- a/docs/data/charts/zoom-and-pan/ZoomFilterMode.tsx +++ b/docs/data/charts/zoom-and-pan/demos/zoom-filter-mode/ZoomFilterMode.tsx @@ -1,8 +1,9 @@ import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; -import { dataset, valueFormatter } from './letterFrequency'; +import { dataset, valueFormatter } from '../../letterFrequency'; export default function ZoomFilterMode() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-filter-mode/client.ts b/docs/data/charts/zoom-and-pan/demos/zoom-filter-mode/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-filter-mode/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-filter-mode/index.ts b/docs/data/charts/zoom-and-pan/demos/zoom-filter-mode/index.ts new file mode 100644 index 0000000000000..4470942d8e095 --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-filter-mode/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ZoomFilterMode from './ZoomFilterMode'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ZoomFilterMode, { ClientProvider }); diff --git a/docs/data/charts/zoom-and-pan/ZoomHeatmap.tsx b/docs/data/charts/zoom-and-pan/demos/zoom-heatmap/ZoomHeatmap.tsx similarity index 96% rename from docs/data/charts/zoom-and-pan/ZoomHeatmap.tsx rename to docs/data/charts/zoom-and-pan/demos/zoom-heatmap/ZoomHeatmap.tsx index 1a9c7fc43f640..4a4c4dee22112 100644 --- a/docs/data/charts/zoom-and-pan/ZoomHeatmap.tsx +++ b/docs/data/charts/zoom-and-pan/demos/zoom-heatmap/ZoomHeatmap.tsx @@ -1,7 +1,7 @@ import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import { Heatmap } from '@mui/x-charts-pro/Heatmap'; -import { +import type { AxisValueFormatterContext, HeatmapValueType, XAxis, @@ -9,7 +9,7 @@ import { } from '@mui/x-charts-pro/models'; import { useTheme } from '@mui/system'; import { ChartsTooltipContainer, useItemTooltip } from '@mui/x-charts/ChartsTooltip'; -import data from '../dataset/muiXCommits2024.json'; +import data from '../../../dataset/muiXCommits2024.json'; const seriesData: HeatmapValueType[] = []; @@ -61,6 +61,7 @@ const yAxis = { } satisfies YAxis<'band'>; export default function ZoomHeatmap() { + // @focus-start @padding 1 const theme = useTheme(); return ( @@ -91,6 +92,7 @@ export default function ZoomHeatmap() { Source: GitHub ); + // @focus-end } const formattedWeekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-heatmap/client.ts b/docs/data/charts/zoom-and-pan/demos/zoom-heatmap/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-heatmap/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-heatmap/index.ts b/docs/data/charts/zoom-and-pan/demos/zoom-heatmap/index.ts new file mode 100644 index 0000000000000..5abc1f8e3d0d3 --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-heatmap/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ZoomHeatmap from './ZoomHeatmap'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ZoomHeatmap, { ClientProvider }); diff --git a/docs/data/charts/zoom-and-pan/ZoomInitialRange.tsx b/docs/data/charts/zoom-and-pan/demos/zoom-initial-range/ZoomInitialRange.tsx similarity index 96% rename from docs/data/charts/zoom-and-pan/ZoomInitialRange.tsx rename to docs/data/charts/zoom-and-pan/demos/zoom-initial-range/ZoomInitialRange.tsx index 901af185600a8..69ae49ffff9c4 100644 --- a/docs/data/charts/zoom-and-pan/ZoomInitialRange.tsx +++ b/docs/data/charts/zoom-and-pan/demos/zoom-initial-range/ZoomInitialRange.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; -import { RangeButtonValue } from '@mui/x-charts-pro/ChartsToolbarPro'; +import type { RangeButtonValue } from '@mui/x-charts-pro/ChartsToolbarPro'; import TextField from '@mui/material/TextField'; import MenuItem from '@mui/material/MenuItem'; import Stack from '@mui/material/Stack'; import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; -import { dataset } from '../dataset/gdpPerCapitaEvolution'; +import { dataset } from '../../../dataset/gdpPerCapitaEvolution'; interface Preset { /** The label shown in the dropdown. */ @@ -69,6 +69,7 @@ const months = [ const sales = [42, 38, 55, 61, 73, 88, 95, 91, 70, 58, 49, 44]; export default function ZoomInitialRange() { + // @focus-start @padding 1 const [chartType, setChartType] = React.useState<'line' | 'bar'>('line'); const [label, setLabel] = React.useState('10Y'); @@ -161,4 +162,5 @@ export default function ZoomInitialRange() { )} ); + // @focus-end } diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-initial-range/client.ts b/docs/data/charts/zoom-and-pan/demos/zoom-initial-range/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-initial-range/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-initial-range/index.ts b/docs/data/charts/zoom-and-pan/demos/zoom-initial-range/index.ts new file mode 100644 index 0000000000000..9d4778b210cd8 --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-initial-range/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ZoomInitialRange from './ZoomInitialRange'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ZoomInitialRange, { ClientProvider }); diff --git a/docs/data/charts/zoom-and-pan/ZoomKeyboard.tsx b/docs/data/charts/zoom-and-pan/demos/zoom-keyboard/ZoomKeyboard.tsx similarity index 82% rename from docs/data/charts/zoom-and-pan/ZoomKeyboard.tsx rename to docs/data/charts/zoom-and-pan/demos/zoom-keyboard/ZoomKeyboard.tsx index 0b962b76c8034..c51d04119d618 100644 --- a/docs/data/charts/zoom-and-pan/ZoomKeyboard.tsx +++ b/docs/data/charts/zoom-and-pan/demos/zoom-keyboard/ZoomKeyboard.tsx @@ -1,14 +1,16 @@ import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; -import { randomData } from './randomData'; +import { randomData } from '../../randomData'; export default function ZoomKeyboard() { return ( + // @focus-start @padding 2 i), zoom: true }]} yAxis={[{ zoom: true, width: 50 }]} series={series} /> + // @focus-end ); } diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-keyboard/client.ts b/docs/data/charts/zoom-and-pan/demos/zoom-keyboard/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-keyboard/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-keyboard/index.ts b/docs/data/charts/zoom-and-pan/demos/zoom-keyboard/index.ts new file mode 100644 index 0000000000000..3f2cf8cf1bb46 --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-keyboard/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ZoomKeyboard from './ZoomKeyboard'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ZoomKeyboard, { ClientProvider }); diff --git a/docs/data/charts/zoom-and-pan/ZoomLineChart.tsx b/docs/data/charts/zoom-and-pan/demos/zoom-line-chart/ZoomLineChart.tsx similarity index 96% rename from docs/data/charts/zoom-and-pan/ZoomLineChart.tsx rename to docs/data/charts/zoom-and-pan/demos/zoom-line-chart/ZoomLineChart.tsx index 421253ac27a28..f3fbd8dff31a2 100644 --- a/docs/data/charts/zoom-and-pan/ZoomLineChart.tsx +++ b/docs/data/charts/zoom-and-pan/demos/zoom-line-chart/ZoomLineChart.tsx @@ -2,6 +2,7 @@ import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; export default function ZoomLineChart() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-line-chart/client.ts b/docs/data/charts/zoom-and-pan/demos/zoom-line-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-line-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-line-chart/index.ts b/docs/data/charts/zoom-and-pan/demos/zoom-line-chart/index.ts new file mode 100644 index 0000000000000..44fb8bd9f7b4b --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-line-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ZoomLineChart from './ZoomLineChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ZoomLineChart, { ClientProvider }); diff --git a/docs/data/charts/zoom-and-pan/ZoomOptions.tsx b/docs/data/charts/zoom-and-pan/demos/zoom-options/ZoomOptions.tsx similarity index 97% rename from docs/data/charts/zoom-and-pan/ZoomOptions.tsx rename to docs/data/charts/zoom-and-pan/demos/zoom-options/ZoomOptions.tsx index 17af2fcc409ba..d892335ea8d97 100644 --- a/docs/data/charts/zoom-and-pan/ZoomOptions.tsx +++ b/docs/data/charts/zoom-and-pan/demos/zoom-options/ZoomOptions.tsx @@ -45,6 +45,7 @@ const knobs = { export default function ZoomOptions() { return ( + // @focus-start @padding 2 `; }} /> + // @focus-end ); } diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-options/client.ts b/docs/data/charts/zoom-and-pan/demos/zoom-options/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-options/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-options/index.ts b/docs/data/charts/zoom-and-pan/demos/zoom-options/index.ts new file mode 100644 index 0000000000000..d18c0db40f148 --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-options/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ZoomOptions from './ZoomOptions'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ZoomOptions, { ClientProvider }); diff --git a/docs/data/charts/zoom-and-pan/ZoomScatterChart.tsx b/docs/data/charts/zoom-and-pan/demos/zoom-scatter-chart/ZoomScatterChart.tsx similarity index 98% rename from docs/data/charts/zoom-and-pan/ZoomScatterChart.tsx rename to docs/data/charts/zoom-and-pan/demos/zoom-scatter-chart/ZoomScatterChart.tsx index 7442ec5ef66de..58a5964149af6 100644 --- a/docs/data/charts/zoom-and-pan/ZoomScatterChart.tsx +++ b/docs/data/charts/zoom-and-pan/demos/zoom-scatter-chart/ZoomScatterChart.tsx @@ -2,6 +2,7 @@ import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; export default function ZoomScatterChart() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-scatter-chart/client.ts b/docs/data/charts/zoom-and-pan/demos/zoom-scatter-chart/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-scatter-chart/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-scatter-chart/index.ts b/docs/data/charts/zoom-and-pan/demos/zoom-scatter-chart/index.ts new file mode 100644 index 0000000000000..5a2b51f92e80e --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-scatter-chart/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ZoomScatterChart from './ZoomScatterChart'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ZoomScatterChart, { ClientProvider }); diff --git a/docs/data/charts/zoom-and-pan/ZoomSliderComposition.tsx b/docs/data/charts/zoom-and-pan/demos/zoom-slider-composition/ZoomSliderComposition.tsx similarity index 97% rename from docs/data/charts/zoom-and-pan/ZoomSliderComposition.tsx rename to docs/data/charts/zoom-and-pan/demos/zoom-slider-composition/ZoomSliderComposition.tsx index 7ebc8be22e4b3..921314807ee65 100644 --- a/docs/data/charts/zoom-and-pan/ZoomSliderComposition.tsx +++ b/docs/data/charts/zoom-and-pan/demos/zoom-slider-composition/ZoomSliderComposition.tsx @@ -18,6 +18,7 @@ const secondSeriesData = Array.from({ length: 26 }, () => ); export default function ZoomSliderComposition() { + // @focus-start @padding 1 const clipPathId = React.useId(); return ( @@ -46,4 +47,5 @@ export default function ZoomSliderComposition() { ); + // @focus-end } diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-slider-composition/client.ts b/docs/data/charts/zoom-and-pan/demos/zoom-slider-composition/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-slider-composition/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-slider-composition/index.ts b/docs/data/charts/zoom-and-pan/demos/zoom-slider-composition/index.ts new file mode 100644 index 0000000000000..b2dbb801cbe67 --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-slider-composition/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ZoomSliderComposition from './ZoomSliderComposition'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ZoomSliderComposition, { ClientProvider }); diff --git a/docs/data/charts/zoom-and-pan/ZoomSliderPreviewCustomMarkerSize.tsx b/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview-custom-marker-size/ZoomSliderPreviewCustomMarkerSize.tsx similarity index 86% rename from docs/data/charts/zoom-and-pan/ZoomSliderPreviewCustomMarkerSize.tsx rename to docs/data/charts/zoom-and-pan/demos/zoom-slider-preview-custom-marker-size/ZoomSliderPreviewCustomMarkerSize.tsx index 087382a1a1730..461dbcba43983 100644 --- a/docs/data/charts/zoom-and-pan/ZoomSliderPreviewCustomMarkerSize.tsx +++ b/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview-custom-marker-size/ZoomSliderPreviewCustomMarkerSize.tsx @@ -1,19 +1,17 @@ import * as React from 'react'; -import { ScatterValueType } from '@mui/x-charts/models'; +import type { ScatterValueType } from '@mui/x-charts/models'; import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; -import { - ScatterChartPro, - ScatterChartProProps, -} from '@mui/x-charts-pro/ScatterChartPro'; +import type { ScatterChartProProps } from '@mui/x-charts-pro/ScatterChartPro'; +import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; import Slider from '@mui/material/Slider'; -import { globalCo2GdpPopulation } from '../dataset/globalCo2GdpPopulation'; -import { globalBirthPerWoman } from '../dataset/globalBirthsPerWoman'; +import { globalCo2GdpPopulation } from '../../../dataset/globalCo2GdpPopulation'; +import { globalBirthPerWoman } from '../../../dataset/globalBirthsPerWoman'; import { continents, countriesInContinent, countryData, -} from '../dataset/countryData'; +} from '../../../dataset/countryData'; const gdpPerCapitaFormatter = new Intl.NumberFormat('en-US', { style: 'currency', @@ -44,6 +42,7 @@ const scatterSettings = { } satisfies Partial; export default function ZoomSliderPreviewCustomMarkerSize() { + // @focus-start @padding 1 const [markerSize, setMarkerSize] = React.useState(2); const series = continents.map((continent, continentIndex) => ({ label: continent, @@ -101,4 +100,5 @@ export default function ZoomSliderPreviewCustomMarkerSize() { ); + // @focus-end } diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview-custom-marker-size/client.ts b/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview-custom-marker-size/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview-custom-marker-size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview-custom-marker-size/index.ts b/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview-custom-marker-size/index.ts new file mode 100644 index 0000000000000..6e3d1c7b163b3 --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview-custom-marker-size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ZoomSliderPreviewCustomMarkerSize from './ZoomSliderPreviewCustomMarkerSize'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ZoomSliderPreviewCustomMarkerSize, { ClientProvider }); diff --git a/docs/data/charts/zoom-and-pan/ZoomSliderPreviewSeriesFilter.tsx b/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview-series-filter/ZoomSliderPreviewSeriesFilter.tsx similarity index 82% rename from docs/data/charts/zoom-and-pan/ZoomSliderPreviewSeriesFilter.tsx rename to docs/data/charts/zoom-and-pan/demos/zoom-slider-preview-series-filter/ZoomSliderPreviewSeriesFilter.tsx index dd5046bc54281..a74824958382a 100644 --- a/docs/data/charts/zoom-and-pan/ZoomSliderPreviewSeriesFilter.tsx +++ b/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview-series-filter/ZoomSliderPreviewSeriesFilter.tsx @@ -1,9 +1,7 @@ import * as React from 'react'; -import { - LineChartPro, - type LineChartProProps, -} from '@mui/x-charts-pro/LineChartPro'; -import { inflationData } from '../dataset/inflationRates'; +import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; +import type { LineChartProProps } from '@mui/x-charts-pro/LineChartPro'; +import { inflationData } from '../../../dataset/inflationRates'; const percentageFormatter = (v: number | null) => v == null ? '' : `${v.toFixed(1)}%`; @@ -41,6 +39,7 @@ const chartConfig = { export default function ZoomSliderPreviewSeriesFilter() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview-series-filter/client.ts b/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview-series-filter/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview-series-filter/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview-series-filter/index.ts b/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview-series-filter/index.ts new file mode 100644 index 0000000000000..8f218862b6c64 --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview-series-filter/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ZoomSliderPreviewSeriesFilter from './ZoomSliderPreviewSeriesFilter'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ZoomSliderPreviewSeriesFilter, { ClientProvider }); diff --git a/docs/data/charts/zoom-and-pan/ZoomSliderPreview.tsx b/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview/ZoomSliderPreview.tsx similarity index 88% rename from docs/data/charts/zoom-and-pan/ZoomSliderPreview.tsx rename to docs/data/charts/zoom-and-pan/demos/zoom-slider-preview/ZoomSliderPreview.tsx index da45b313fa81a..056c5bb4b123a 100644 --- a/docs/data/charts/zoom-and-pan/ZoomSliderPreview.tsx +++ b/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview/ZoomSliderPreview.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; -import { LineChartPro, LineChartProProps } from '@mui/x-charts-pro/LineChartPro'; -import { +import type { LineChartProProps } from '@mui/x-charts-pro/LineChartPro'; +import { LineChartPro } from '@mui/x-charts-pro/LineChartPro'; +import type { AxisValueFormatterContext, ScatterValueType, XAxis, @@ -9,32 +10,29 @@ import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import ToggleButton from '@mui/material/ToggleButton'; -import { - ScatterChartPro, - ScatterChartProProps, -} from '@mui/x-charts-pro/ScatterChartPro'; -import { BarChartPro, BarChartProProps } from '@mui/x-charts-pro/BarChartPro'; -import { - BarChartPremium, - BarChartPremiumProps, -} from '@mui/x-charts-premium/BarChartPremium'; +import type { ScatterChartProProps } from '@mui/x-charts-pro/ScatterChartPro'; +import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro'; +import type { BarChartProProps } from '@mui/x-charts-pro/BarChartPro'; +import { BarChartPro } from '@mui/x-charts-pro/BarChartPro'; +import type { BarChartPremiumProps } from '@mui/x-charts-premium/BarChartPremium'; +import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium'; import { CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart'; -import { OHLCValueType } from '@mui/x-charts-premium/models'; +import type { OHLCValueType } from '@mui/x-charts-premium/models'; import { dateAxisFormatter, usUnemploymentRate, -} from '../dataset/usUnemploymentRate'; -import { globalCo2GdpPopulation } from '../dataset/globalCo2GdpPopulation'; -import { globalBirthPerWoman } from '../dataset/globalBirthsPerWoman'; +} from '../../../dataset/usUnemploymentRate'; +import { globalCo2GdpPopulation } from '../../../dataset/globalCo2GdpPopulation'; +import { globalBirthPerWoman } from '../../../dataset/globalBirthsPerWoman'; import { continents, countriesInContinent, countryData, -} from '../dataset/countryData'; -import { shareOfRenewables } from '../dataset/shareOfRenewables'; -import { populationPrediction2050 } from '../dataset/populationPrediction2050'; -import { temperatureBerlinPorto } from '../dataset/temperatureBerlinPorto'; -import sp500 from '../dataset/sp500-intraday.json'; +} from '../../../dataset/countryData'; +import { shareOfRenewables } from '../../../dataset/shareOfRenewables'; +import { populationPrediction2050 } from '../../../dataset/populationPrediction2050'; +import { temperatureBerlinPorto } from '../../../dataset/temperatureBerlinPorto'; +import sp500 from '../../../dataset/sp500-intraday.json'; const lineData = usUnemploymentRate.map((d) => d.rate / 100); @@ -192,6 +190,7 @@ const candlestickData: Array = sp500.map((entry) => [ ]); export default function ZoomSliderPreview() { + // @focus-start @padding 1 const [chartType, setChartType] = React.useState('bar'); const handleChartType = (event: any, newChartType: string) => { @@ -225,6 +224,7 @@ export default function ZoomSliderPreview() { {chartType === 'candlestick' && } ); + // @focus-end } function LineChartPreview() { diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview/client.ts b/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview/index.ts b/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview/index.ts new file mode 100644 index 0000000000000..6596370fe39e9 --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-slider-preview/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ZoomSliderPreview from './ZoomSliderPreview'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ZoomSliderPreview, { ClientProvider }); diff --git a/docs/data/charts/zoom-and-pan/ZoomSliderTooltip.tsx b/docs/data/charts/zoom-and-pan/demos/zoom-slider-tooltip/ZoomSliderTooltip.tsx similarity index 97% rename from docs/data/charts/zoom-and-pan/ZoomSliderTooltip.tsx rename to docs/data/charts/zoom-and-pan/demos/zoom-slider-tooltip/ZoomSliderTooltip.tsx index 69b8a56ce8d01..027311ec87bd4 100644 --- a/docs/data/charts/zoom-and-pan/ZoomSliderTooltip.tsx +++ b/docs/data/charts/zoom-and-pan/demos/zoom-slider-tooltip/ZoomSliderTooltip.tsx @@ -22,6 +22,7 @@ const xLabels = [ ]; export default function ZoomSliderTooltip() { + // @focus-start @padding 1 const [showTooltip, setShowTooltip] = React.useState('hover'); @@ -66,4 +67,5 @@ export default function ZoomSliderTooltip() { /> ); + // @focus-end } diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-slider-tooltip/client.ts b/docs/data/charts/zoom-and-pan/demos/zoom-slider-tooltip/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-slider-tooltip/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-slider-tooltip/index.ts b/docs/data/charts/zoom-and-pan/demos/zoom-slider-tooltip/index.ts new file mode 100644 index 0000000000000..8dd2c33f99e4e --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-slider-tooltip/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ZoomSliderTooltip from './ZoomSliderTooltip'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ZoomSliderTooltip, { ClientProvider }); diff --git a/docs/data/charts/zoom-and-pan/ZoomSlider.tsx b/docs/data/charts/zoom-and-pan/demos/zoom-slider/ZoomSlider.tsx similarity index 96% rename from docs/data/charts/zoom-and-pan/ZoomSlider.tsx rename to docs/data/charts/zoom-and-pan/demos/zoom-slider/ZoomSlider.tsx index 7433c84ea7716..c568c97fcb779 100644 --- a/docs/data/charts/zoom-and-pan/ZoomSlider.tsx +++ b/docs/data/charts/zoom-and-pan/demos/zoom-slider/ZoomSlider.tsx @@ -14,6 +14,7 @@ const xData = data.map((d) => d.x); export default function ZoomSlider() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-slider/client.ts b/docs/data/charts/zoom-and-pan/demos/zoom-slider/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-slider/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/charts/zoom-and-pan/demos/zoom-slider/index.ts b/docs/data/charts/zoom-and-pan/demos/zoom-slider/index.ts new file mode 100644 index 0000000000000..7589dbc8b5874 --- /dev/null +++ b/docs/data/charts/zoom-and-pan/demos/zoom-slider/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ZoomSlider from './ZoomSlider'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ZoomSlider, { ClientProvider }); diff --git a/docs/data/charts/zoom-and-pan/zoom-and-pan.md b/docs/data/charts/zoom-and-pan/zoom-and-pan.md index 0e9947183a0fd..86e82aeca10a7 100644 --- a/docs/data/charts/zoom-and-pan/zoom-and-pan.md +++ b/docs/data/charts/zoom-and-pan/zoom-and-pan.md @@ -30,10 +30,10 @@ The following actions are enabled by default: You can enable additional zoom interactions through configuration. See [Interactions](#interactions) for the full list. -{{"demo": "ZoomScatterChart.js"}} -{{"demo": "ZoomBarChart.js"}} -{{"demo": "ZoomLineChart.js"}} -{{"demo": "ZoomHeatmap.js"}} +{{"component": "file://./demos/zoom-scatter-chart/index.ts"}} +{{"component": "file://./demos/zoom-bar-chart/index.ts"}} +{{"component": "file://./demos/zoom-line-chart/index.ts"}} +{{"component": "file://./demos/zoom-heatmap/index.ts"}} ## Zooming options @@ -48,7 +48,7 @@ The following options are available: - **maxSpan**: Restricts the maximum span size - **panning**: Enables or disables panning -{{"demo": "ZoomOptions.js", "hideToolbar": true, "bg": "playground"}} +{{"component": "file://./demos/zoom-options/index.ts", "hideToolbar": true, "bg": "playground"}} ## Zoom filtering @@ -59,13 +59,13 @@ Make the zoom of an axis affect one or more axes' extents by setting the `zoom.f The demo below shows how the secondary axis adapts to the visible part of the primary axis. -{{"demo": "ZoomFilterMode.js"}} +{{"component": "file://./demos/zoom-filter-mode/index.ts"}} ## Zoom slider Provide an overview that lets users manipulate the zoomed area by setting the `zoom.slider.enabled` property on the axis config. -{{"demo": "ZoomSlider.js"}} +{{"component": "file://./demos/zoom-slider/index.ts"}} Set the `zoom.slider.size` property to customize the size reserved for the zoom slider. This is useful if you're using a custom zoom slider and want to update the space reserved for it. @@ -90,7 +90,7 @@ Customize the value shown in the tooltip by using the `valueFormatter` property When formatting the zoom slider tooltip, the chart calls `valueFormatter()` with `zoom-slider-tooltip` as its location. -{{"demo": "ZoomSliderTooltip.js"}} +{{"component": "file://./demos/zoom-slider-tooltip/index.ts"}} ### Limits @@ -103,26 +103,26 @@ The zoom slider does not display values outside the range delimited by `minStart When composing a custom component, render the `ChartsZoomSlider` component to show the axes' sliders. -{{"demo": "ZoomSliderComposition.js"}} +{{"component": "file://./demos/zoom-slider-composition/index.ts"}} ## Preview When the zoom slider is enabled, preview the zoomed area by enabling the `zoom.slider.preview` property on the axis config. -{{"demo": "ZoomSliderPreview.js"}} +{{"component": "file://./demos/zoom-slider-preview/index.ts"}} ### Series filter Use `zoom.slider.preview.seriesIds` to select the series to display in the preview. -{{"demo": "ZoomSliderPreviewSeriesFilter.js"}} +{{"component": "file://./demos/zoom-slider-preview-series-filter/index.ts"}} ### Scatter marker size The size of the preview marker in scatter charts is 1px by default. Customize it by setting the `zoom.slider.preview.markerSize` property on the series configuration object. -{{"demo": "ZoomSliderPreviewCustomMarkerSize.js"}} +{{"component": "file://./demos/zoom-slider-preview-custom-marker-size/index.ts"}} ## Zoom management @@ -141,7 +141,7 @@ The `zoom` state is an array of objects that define the zoom state for each axis - **start**: The starting percentage of the axis range - **end**: The ending percentage of the zoom range -{{"demo": "ExternalZoomManagement.js"}} +{{"component": "file://./demos/external-zoom-management/index.ts"}} #### Initialize with a range value @@ -171,13 +171,13 @@ This feature does not support SSR. When providing a range value, the initial frame is rendered un-zoomed and the zoom is applied on the client right after hydration. ::: -{{"demo": "ZoomInitialRange.js"}} +{{"component": "file://./demos/zoom-initial-range/index.ts"}} ### Zoom synchronization Control the zoom state to synchronize zoom between multiple charts. -{{"demo": "ZoomControlled.js"}} +{{"component": "file://./demos/zoom-controlled/index.ts"}} ## Zoom interactions configuration @@ -232,14 +232,14 @@ For example, the "drag" and "brush" interactions do not work well together. If both are needed, the `pointerMode` and `requiredKeys` options described in the next sections can help. ::: -{{"demo": "ZoomAndPanInteractions.js"}} +{{"component": "file://./demos/zoom-and-pan-interactions/index.ts"}} ### Brush zoom The brush zoom interaction lets users select a specific area to zoom into by clicking and dragging to create a selection rectangle. This provides an intuitive way to focus on a particular region of interest in the chart. -{{"demo": "BrushZoom.js"}} +{{"component": "file://./demos/brush-zoom/index.ts"}} ### Keyboard zoom and pan @@ -280,7 +280,7 @@ The visible range is announced to screen readers each time it changes from the k The default message reads `Showing 5% to 95% of the horizontal axis`, and can be customized with the `zoomRangeDescription` [localization key](/x/react-charts/localization/#localize-text). A zoom coming from the pointer or from the application is not announced, because it is not the user driving the chart from the keyboard. -{{"demo": "ZoomKeyboard.js"}} +{{"component": "file://./demos/zoom-keyboard/index.ts"}} ### Key modifiers diff --git a/docs/data/chat/accessibility/accessibility.md b/docs/data/chat/accessibility/accessibility.md index cd832b1258850..dce539e6f9e01 100644 --- a/docs/data/chat/accessibility/accessibility.md +++ b/docs/data/chat/accessibility/accessibility.md @@ -13,7 +13,7 @@ githubLabel: 'scope: chat' The message list is a single Tab stop: a roving tabindex over the `role="article"` messages keeps only one message in the tab order at a time, so tabbing from the composer to the rest of the application never walks through every message. -{{"demo": "../material/message-list/KeyboardNavigation.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://../material/message-list/demos/keyboard-navigation/index.ts", "bg": "inline", "collapseToEmpty": true}} | Key | Action | | :----------------------------------------------- | :----------------------------------------------------------------------------------------------- | diff --git a/docs/data/chat/ai-and-agents/reasoning/ReasoningSlotsDemo.js b/docs/data/chat/ai-and-agents/reasoning/ReasoningSlotsDemo.js deleted file mode 100644 index fa647b4b6776c..0000000000000 --- a/docs/data/chat/ai-and-agents/reasoning/ReasoningSlotsDemo.js +++ /dev/null @@ -1,152 +0,0 @@ -'use client'; -import * as React from 'react'; -import { ChatBox } from '@mui/x-chat'; - -import AutoAwesomeOutlinedIcon from '@mui/icons-material/AutoAwesomeOutlined'; -import { createChunkStream } from 'docs/data/chat/core/examples/shared/demoUtils'; - -const CONVERSATION_ID = 'reasoning-slots-demo'; - -const initialConversations = [{ id: CONVERSATION_ID, title: 'Reasoning slots' }]; - -const initialMessages = [ - { - id: 'seed', - conversationId: CONVERSATION_ID, - role: 'assistant', - status: 'sent', - parts: [ - { - type: 'reasoning', - text: 'The user greeted me. A short, friendly reply is enough — no tools needed.', - state: 'done', - }, - { - type: 'text', - text: 'Hi! Send a message to see the restyled reasoning disclosure stream.', - }, - ], - }, -]; - -const adapter = { - async sendMessage({ message }) { - const messageId = `reply-${message.id}`; - // Emit one chunk at a time, with a small delay, so the disclosure visibly streams. - return createChunkStream( - [ - { type: 'start', messageId }, - { type: 'reasoning-start', id: 'r1' }, - { - type: 'reasoning-delta', - id: 'r1', - delta: 'Let me think about how to answer this. ', - }, - { - type: 'reasoning-delta', - id: 'r1', - delta: 'The question is straightforward, ', - }, - { - type: 'reasoning-delta', - id: 'r1', - delta: 'so a concise reply works best.', - }, - { type: 'reasoning-end', id: 'r1' }, - { type: 'text-start', id: 't1' }, - { type: 'text-delta', id: 't1', delta: 'Here is the answer, now that ' }, - { type: 'text-delta', id: 't1', delta: 'the reasoning above has finished.' }, - { type: 'text-end', id: 't1' }, - { type: 'finish', messageId }, - ], - { delayMs: 100 }, - ); - }, -}; - -// Custom `root` slot — a tinted disclosure container. -const CustomRoot = React.forwardRef(function CustomRoot(props, ref) { - const { ownerState, style, ...other } = props; - return ( -
- ); -}); - -// Custom `summary` slot — uses `ownerState.streaming` for a live affordance. -const CustomSummary = React.forwardRef(function CustomSummary(props, ref) { - const { ownerState, children, style, ...other } = props; - const streaming = ownerState?.streaming; - return ( - - - {children} - {streaming ? ( - - ) : null} - - - ); -}); - -export default function ReasoningSlotsDemo() { - return ( - - ); -} diff --git a/docs/data/chat/ai-and-agents/reasoning/ReasoningStreamingDemo.js b/docs/data/chat/ai-and-agents/reasoning/ReasoningStreamingDemo.js deleted file mode 100644 index 3f0c9d9ff7536..0000000000000 --- a/docs/data/chat/ai-and-agents/reasoning/ReasoningStreamingDemo.js +++ /dev/null @@ -1,82 +0,0 @@ -'use client'; -import { ChatBox } from '@mui/x-chat'; - -import { createChunkStream } from 'docs/data/chat/core/examples/shared/demoUtils'; - -const CONVERSATION_ID = 'reasoning-demo'; - -const initialConversations = [{ id: CONVERSATION_ID, title: 'Reasoning' }]; - -const initialMessages = [ - { - id: 'seed', - conversationId: CONVERSATION_ID, - role: 'assistant', - status: 'sent', - parts: [ - { - type: 'reasoning', - text: 'The user greeted me. A short, friendly reply is enough — no tools needed.', - state: 'done', - }, - { - type: 'text', - text: 'Hi! Send a message and watch the reasoning stream in above this reply.', - }, - ], - }, -]; - -const adapter = { - async sendMessage({ message }) { - const messageId = `reply-${message.id}`; - // Emit one chunk at a time, with a small delay, so the disclosure visibly streams. - return createChunkStream( - [ - { type: 'start', messageId }, - // Reasoning section — auto-expanded and labelled "Thinking…" while streaming. - { type: 'reasoning-start', id: 'r1' }, - { - type: 'reasoning-delta', - id: 'r1', - delta: 'Let me think about how to answer this. ', - }, - { - type: 'reasoning-delta', - id: 'r1', - delta: 'The question is straightforward, ', - }, - { - type: 'reasoning-delta', - id: 'r1', - delta: 'so a concise reply works best.', - }, - { type: 'reasoning-end', id: 'r1' }, - // Final answer — the reasoning collapses to a "Reasoning" summary as this streams. - { type: 'text-start', id: 't1' }, - { type: 'text-delta', id: 't1', delta: 'Here is the answer, now that ' }, - { type: 'text-delta', id: 't1', delta: 'the reasoning above has finished.' }, - { type: 'text-end', id: 't1' }, - { type: 'finish', messageId }, - ], - { delayMs: 100 }, - ); - }, -}; - -export default function ReasoningStreamingDemo() { - return ( - - ); -} diff --git a/docs/data/chat/ai-and-agents/reasoning/ReasoningStreamingDemo.tsx.preview b/docs/data/chat/ai-and-agents/reasoning/ReasoningStreamingDemo.tsx.preview deleted file mode 100644 index 6bccfce765ffc..0000000000000 --- a/docs/data/chat/ai-and-agents/reasoning/ReasoningStreamingDemo.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/chat/ai-and-agents/reasoning/ReasoningSlotsDemo.tsx b/docs/data/chat/ai-and-agents/reasoning/demos/reasoning-slots-demo/ReasoningSlotsDemo.tsx similarity index 98% rename from docs/data/chat/ai-and-agents/reasoning/ReasoningSlotsDemo.tsx rename to docs/data/chat/ai-and-agents/reasoning/demos/reasoning-slots-demo/ReasoningSlotsDemo.tsx index 4bb88c8398cbd..adfe5b2010368 100644 --- a/docs/data/chat/ai-and-agents/reasoning/ReasoningSlotsDemo.tsx +++ b/docs/data/chat/ai-and-agents/reasoning/demos/reasoning-slots-demo/ReasoningSlotsDemo.tsx @@ -137,6 +137,7 @@ const CustomSummary = React.forwardRef(function CustomSummary( export default function ReasoningSlotsDemo() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/ai-and-agents/reasoning/demos/reasoning-slots-demo/client.ts b/docs/data/chat/ai-and-agents/reasoning/demos/reasoning-slots-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/ai-and-agents/reasoning/demos/reasoning-slots-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/ai-and-agents/reasoning/demos/reasoning-slots-demo/index.ts b/docs/data/chat/ai-and-agents/reasoning/demos/reasoning-slots-demo/index.ts new file mode 100644 index 0000000000000..471c9a1df1d6d --- /dev/null +++ b/docs/data/chat/ai-and-agents/reasoning/demos/reasoning-slots-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ReasoningSlotsDemo from './ReasoningSlotsDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ReasoningSlotsDemo, { ClientProvider }); diff --git a/docs/data/chat/ai-and-agents/reasoning/ReasoningStreamingDemo.tsx b/docs/data/chat/ai-and-agents/reasoning/demos/reasoning-streaming-demo/ReasoningStreamingDemo.tsx similarity index 98% rename from docs/data/chat/ai-and-agents/reasoning/ReasoningStreamingDemo.tsx rename to docs/data/chat/ai-and-agents/reasoning/demos/reasoning-streaming-demo/ReasoningStreamingDemo.tsx index 848e5d174bdef..392d22e2615de 100644 --- a/docs/data/chat/ai-and-agents/reasoning/ReasoningStreamingDemo.tsx +++ b/docs/data/chat/ai-and-agents/reasoning/demos/reasoning-streaming-demo/ReasoningStreamingDemo.tsx @@ -66,6 +66,7 @@ const adapter: ChatAdapter = { export default function ReasoningStreamingDemo() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/ai-and-agents/reasoning/demos/reasoning-streaming-demo/client.ts b/docs/data/chat/ai-and-agents/reasoning/demos/reasoning-streaming-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/ai-and-agents/reasoning/demos/reasoning-streaming-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/ai-and-agents/reasoning/demos/reasoning-streaming-demo/index.ts b/docs/data/chat/ai-and-agents/reasoning/demos/reasoning-streaming-demo/index.ts new file mode 100644 index 0000000000000..1556744d772a6 --- /dev/null +++ b/docs/data/chat/ai-and-agents/reasoning/demos/reasoning-streaming-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ReasoningStreamingDemo from './ReasoningStreamingDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ReasoningStreamingDemo, { ClientProvider }); diff --git a/docs/data/chat/ai-and-agents/reasoning/reasoning.md b/docs/data/chat/ai-and-agents/reasoning/reasoning.md index 1a121ba91c140..a0c141798e788 100644 --- a/docs/data/chat/ai-and-agents/reasoning/reasoning.md +++ b/docs/data/chat/ai-and-agents/reasoning/reasoning.md @@ -21,7 +21,7 @@ Reasoning parts render automatically as a collapsible "Thinking…" section — Reasoning parts render automatically — you don't need to register a renderer to display them. The built-in renderer is a native `
`/`` disclosure that stays open while `state` is `'streaming'` (showing a "Thinking…" label), then collapses to a clickable "Reasoning" summary once the reasoning is `'done'`. -{{"demo": "ReasoningStreamingDemo.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/reasoning-streaming-demo/index.ts", "bg": "inline", "collapseToEmpty": true}} ### Labels @@ -76,7 +76,7 @@ import type { ReasoningPartOwnerState } from '@mui/x-chat/headless'; Partial overrides keep the remaining Material defaults, because the slot maps are merged: a `summary`-only override still uses the default `root` and `content`. -{{"demo": "ReasoningSlotsDemo.js", "bg": "inline", "defaultCodeOpen": true}} +{{"component": "file://./demos/reasoning-slots-demo/index.ts", "bg": "inline", "initialExpanded": true}} See the [`ChatMessageContent` API](/x/api/chat/chat-message-content/) for the full `partProps` shape. diff --git a/docs/data/chat/ai-and-agents/step-tracking/StepTrackingDemo.js b/docs/data/chat/ai-and-agents/step-tracking/StepTrackingDemo.js deleted file mode 100644 index 5a8482e24d26d..0000000000000 --- a/docs/data/chat/ai-and-agents/step-tracking/StepTrackingDemo.js +++ /dev/null @@ -1,164 +0,0 @@ -'use client'; -import * as React from 'react'; -import Divider from '@mui/material/Divider'; -import Typography from '@mui/material/Typography'; -import { ChatBox } from '@mui/x-chat'; - -import { createChunkStream } from 'docs/data/chat/core/examples/shared/demoUtils'; - -// --- Step delimiter renderer ------------------------------------------------- -// This is the exact Material UI renderer documented under -// "### Step progress with Material UI" — `Divider` + a "Step N" caption. - -const partRenderers = { - 'step-start': ({ index, message }) => { - const stepNumber = message.parts - .slice(0, index + 1) - .filter((part) => part.type === 'step-start').length; - return ( - - - Step {stepNumber} - - - ); - }, -}; - -// --- Scripted 3-step stream -------------------------------------------------- -// Mirrors the page's "Step boundary chunks" example: search tool, analyze tool, -// then a final text answer — each wrapped in start-step/finish-step. - -function createStepChunks(messageId) { - const textId = `${messageId}-text`; - - return [ - { type: 'start', messageId }, - // Step 1: Search for information - { type: 'start-step' }, - { - type: 'tool-input-start', - toolCallId: 'call-1', - toolName: 'search', - dynamic: true, - }, - { - type: 'tool-input-available', - toolCallId: 'call-1', - toolName: 'search', - input: { query: 'MUI X Chat documentation' }, - dynamic: true, - }, - { - type: 'tool-output-available', - toolCallId: 'call-1', - output: { results: ['Step tracking guide'] }, - }, - { type: 'finish-step' }, - // Step 2: Analyze results - { type: 'start-step' }, - { - type: 'tool-input-start', - toolCallId: 'call-2', - toolName: 'analyze', - dynamic: true, - }, - { - type: 'tool-input-available', - toolCallId: 'call-2', - toolName: 'analyze', - input: { data: 'Step tracking guide' }, - dynamic: true, - }, - { - type: 'tool-output-available', - toolCallId: 'call-2', - output: { summary: 'Use step-start parts as delimiters' }, - }, - { type: 'finish-step' }, - // Step 3: Final answer - { type: 'start-step' }, - { type: 'text-start', id: textId }, - { - type: 'text-delta', - id: textId, - delta: 'Step tracking delimits each phase with step-start parts.', - }, - { type: 'text-end', id: textId }, - { type: 'finish-step' }, - { type: 'finish', messageId }, - ]; -} - -// --- Seeded exchange --------------------------------------------------------- -// One completed user/assistant pair so the "Step 1/2/3" dividers are visible on -// initial load; the reader can send another message to watch them stream in. - -const seededMessages = [ - { - id: 'seed-user', - role: 'user', - parts: [{ type: 'text', text: 'Find and summarize the step tracking docs.' }], - }, - { - id: 'seed-assistant', - role: 'assistant', - parts: [ - { type: 'step-start' }, - { - type: 'dynamic-tool', - toolInvocation: { - toolCallId: 'seed-call-1', - toolName: 'search', - state: 'output-available', - input: { query: 'MUI X Chat documentation' }, - output: { results: ['Step tracking guide'] }, - }, - }, - { type: 'step-start' }, - { - type: 'dynamic-tool', - toolInvocation: { - toolCallId: 'seed-call-2', - toolName: 'analyze', - state: 'output-available', - input: { data: 'Step tracking guide' }, - output: { summary: 'Use step-start parts as delimiters' }, - }, - }, - { type: 'step-start' }, - { - type: 'text', - text: 'Step tracking delimits each phase with step-start parts.', - }, - ], - }, -]; - -// --- Component --------------------------------------------------------------- - -export default function StepTrackingDemo() { - const adapter = React.useMemo( - () => ({ - async sendMessage() { - return createChunkStream(createStepChunks('msg-1'), { delayMs: 170 }); - }, - }), - [], - ); - - return ( - - ); -} diff --git a/docs/data/chat/ai-and-agents/step-tracking/StepTrackingDemo.tsx.preview b/docs/data/chat/ai-and-agents/step-tracking/StepTrackingDemo.tsx.preview deleted file mode 100644 index ed690bebfb2ea..0000000000000 --- a/docs/data/chat/ai-and-agents/step-tracking/StepTrackingDemo.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/chat/ai-and-agents/step-tracking/StepTrackingDemo.tsx b/docs/data/chat/ai-and-agents/step-tracking/demos/step-tracking-demo/StepTrackingDemo.tsx similarity index 99% rename from docs/data/chat/ai-and-agents/step-tracking/StepTrackingDemo.tsx rename to docs/data/chat/ai-and-agents/step-tracking/demos/step-tracking-demo/StepTrackingDemo.tsx index 6ba2b24d4dd96..75e18b26a2020 100644 --- a/docs/data/chat/ai-and-agents/step-tracking/StepTrackingDemo.tsx +++ b/docs/data/chat/ai-and-agents/step-tracking/demos/step-tracking-demo/StepTrackingDemo.tsx @@ -147,6 +147,7 @@ const seededMessages: ChatMessage[] = [ // --- Component --------------------------------------------------------------- export default function StepTrackingDemo() { + // @focus-start @padding 1 const adapter = React.useMemo( () => ({ async sendMessage() { @@ -170,4 +171,5 @@ export default function StepTrackingDemo() { }} /> ); + // @focus-end } diff --git a/docs/data/chat/ai-and-agents/step-tracking/demos/step-tracking-demo/client.ts b/docs/data/chat/ai-and-agents/step-tracking/demos/step-tracking-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/ai-and-agents/step-tracking/demos/step-tracking-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/ai-and-agents/step-tracking/demos/step-tracking-demo/index.ts b/docs/data/chat/ai-and-agents/step-tracking/demos/step-tracking-demo/index.ts new file mode 100644 index 0000000000000..a124298a64a99 --- /dev/null +++ b/docs/data/chat/ai-and-agents/step-tracking/demos/step-tracking-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StepTrackingDemo from './StepTrackingDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StepTrackingDemo, { ClientProvider }); diff --git a/docs/data/chat/ai-and-agents/step-tracking/step-tracking.md b/docs/data/chat/ai-and-agents/step-tracking/step-tracking.md index bb15175d448ef..6d26362885eb2 100644 --- a/docs/data/chat/ai-and-agents/step-tracking/step-tracking.md +++ b/docs/data/chat/ai-and-agents/step-tracking/step-tracking.md @@ -132,7 +132,7 @@ When writing a custom step delimiter, preserve the `role="separator"` semantics Material UI's `Divider` renders `role="separator"` automatically. ::: -{{"demo": "StepTrackingDemo.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/step-tracking-demo/index.ts", "bg": "inline", "collapseToEmpty": true}} ### Step delimiter renderer diff --git a/docs/data/chat/ai-and-agents/tool-approval/ChatConfirmationPlayground.js b/docs/data/chat/ai-and-agents/tool-approval/ChatConfirmationPlayground.js deleted file mode 100644 index 7e106354fc09c..0000000000000 --- a/docs/data/chat/ai-and-agents/tool-approval/ChatConfirmationPlayground.js +++ /dev/null @@ -1,110 +0,0 @@ -import * as React from 'react'; -import Alert from '@mui/material/Alert'; -import Box from '@mui/material/Box'; -import Snackbar from '@mui/material/Snackbar'; -import { ChatConfirmation } from '@mui/x-chat'; -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { - DividerLabel, - TextControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; - -const CLASS_DEFS = [ - { name: 'root', description: 'The confirmation card.' }, - { - name: 'icon', - selector: '.MuiChatConfirmation-icon', - description: 'The warning icon container.', - }, - { - name: 'message', - selector: '.MuiChatConfirmation-message', - description: 'The message paragraph.', - }, - { - name: 'actions', - selector: '.MuiChatConfirmation-actions', - description: 'The button row.', - }, - { - name: 'confirmButton', - selector: '.MuiChatConfirmation-confirmButton', - description: 'The primary confirm button.', - }, - { - name: 'cancelButton', - selector: '.MuiChatConfirmation-cancelButton', - description: 'The cancel button.', - }, -]; - -export default function ChatConfirmationPlayground() { - const [message, setMessage] = React.useState( - 'The assistant wants to delete 3 files. Approve this action?', - ); - const [confirmLabel, setConfirmLabel] = React.useState('Allow'); - const [cancelLabel, setCancelLabel] = React.useState('Deny'); - const [resolution, setResolution] = React.useState(null); - const classesCustomizations = useCustomizations(CLASS_DEFS); - - const cardSx = classesCustomizations.toClassesSx(); - - return ( - - props - - - - - } - preview={ - - setResolution('confirm')} - onCancel={() => setResolution('cancel')} - sx={cardSx} - /> - setResolution(null)} - > - setResolution(null)} - > - {resolution === 'confirm' ? 'onConfirm fired' : 'onCancel fired'} - - - - } - /> - ); -} diff --git a/docs/data/chat/ai-and-agents/tool-approval/ToolApprovalFlow.js b/docs/data/chat/ai-and-agents/tool-approval/ToolApprovalFlow.js deleted file mode 100644 index ffa22f52a4750..0000000000000 --- a/docs/data/chat/ai-and-agents/tool-approval/ToolApprovalFlow.js +++ /dev/null @@ -1,145 +0,0 @@ -'use client'; -import * as React from 'react'; -import { ChatBox } from '@mui/x-chat'; - -import { demoUsers } from 'docs/data/chat/core/examples/shared/demoData'; -import { createChunkStream } from 'docs/data/chat/core/examples/shared/demoUtils'; - -const CONVERSATION_ID = 'tool-approval'; - -function createToolApprovalAdapter() { - let onEventRef = null; - let pendingMessage = null; - - return { - async sendMessage() { - const messageId = 'assistant-approval'; - const textId = 'assistant-approval-text'; - const toolCallId = 'cleanup-1'; - - pendingMessage = { - id: messageId, - conversationId: CONVERSATION_ID, - role: 'assistant', - author: demoUsers.agent, - status: 'sent', - parts: [ - { - type: 'text', - text: 'I need approval before deleting these files.', - }, - { - type: 'dynamic-tool', - toolInvocation: { - toolCallId, - toolName: 'delete_files', - state: 'approval-requested', - input: { path: '/tmp/cache', recursive: true }, - approvalId: 'approval-1', - }, - }, - ], - }; - - return createChunkStream( - [ - { type: 'start', messageId, author: demoUsers.agent }, - { type: 'text-start', id: textId }, - { - type: 'text-delta', - id: textId, - delta: 'I need approval before deleting these files.', - }, - { type: 'text-end', id: textId }, - { - type: 'tool-approval-request', - toolCallId, - toolName: 'delete_files', - input: { path: '/tmp/cache', recursive: true }, - // The optional approval id is round-tripped: the built-in widget - // responds with it, and the controller matches the invocation by it. - approvalId: 'approval-1', - dynamic: true, - }, - { type: 'finish', messageId, finishReason: 'tool-call' }, - ], - { delayMs: 240 }, - ); - }, - subscribe({ onEvent }) { - onEventRef = onEvent; - return () => { - onEventRef = null; - }; - }, - async addToolApprovalResponse({ approved, reason }) { - if (!pendingMessage) { - return; - } - - // 1. Move the tool invocation to its terminal state. - onEventRef?.({ - type: 'message-updated', - message: { - ...pendingMessage, - parts: [ - pendingMessage.parts[0], - { - type: 'dynamic-tool', - toolInvocation: { - toolCallId: 'cleanup-1', - toolName: 'delete_files', - state: approved ? 'output-available' : 'output-denied', - input: { path: '/tmp/cache', recursive: true }, - approvalId: 'approval-1', - approval: { approved, reason }, - output: approved ? { deleted: 3 } : undefined, - }, - }, - ], - }, - }); - - // 2. Emit a follow-up assistant message after a short delay. - setTimeout(() => { - onEventRef?.({ - type: 'message-added', - message: { - id: 'assistant-followup', - conversationId: CONVERSATION_ID, - role: 'assistant', - author: demoUsers.agent, - status: 'sent', - parts: [ - { - type: 'text', - text: approved - ? 'Deleted 3 files.' - : "Okay, I won't delete anything.", - }, - ], - }, - }); - }, 400); - }, - }; -} - -export default function ToolApprovalFlow() { - const adapter = React.useMemo(() => createToolApprovalAdapter(), []); - - return ( - - ); -} diff --git a/docs/data/chat/ai-and-agents/tool-approval/ToolApprovalFlow.tsx.preview b/docs/data/chat/ai-and-agents/tool-approval/ToolApprovalFlow.tsx.preview deleted file mode 100644 index ec0207c5b981d..0000000000000 --- a/docs/data/chat/ai-and-agents/tool-approval/ToolApprovalFlow.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/chat/ai-and-agents/tool-approval/ChatConfirmationPlayground.tsx b/docs/data/chat/ai-and-agents/tool-approval/demos/chat-confirmation-playground/ChatConfirmationPlayground.tsx similarity index 93% rename from docs/data/chat/ai-and-agents/tool-approval/ChatConfirmationPlayground.tsx rename to docs/data/chat/ai-and-agents/tool-approval/demos/chat-confirmation-playground/ChatConfirmationPlayground.tsx index d6822a8dc5d06..465be8bd45523 100644 --- a/docs/data/chat/ai-and-agents/tool-approval/ChatConfirmationPlayground.tsx +++ b/docs/data/chat/ai-and-agents/tool-approval/demos/chat-confirmation-playground/ChatConfirmationPlayground.tsx @@ -8,10 +8,8 @@ import { DividerLabel, TextControl, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; type ClassKey = 'root' | 'icon' | 'message' | 'actions' | 'confirmButton' | 'cancelButton'; @@ -46,6 +44,7 @@ const CLASS_DEFS: ReadonlyArray> = [ ]; export default function ChatConfirmationPlayground() { + // @focus-start @padding 1 const [message, setMessage] = React.useState( 'The assistant wants to delete 3 files. Approve this action?', ); @@ -115,4 +114,5 @@ export default function ChatConfirmationPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/ai-and-agents/tool-approval/demos/chat-confirmation-playground/client.ts b/docs/data/chat/ai-and-agents/tool-approval/demos/chat-confirmation-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/ai-and-agents/tool-approval/demos/chat-confirmation-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/ai-and-agents/tool-approval/demos/chat-confirmation-playground/index.ts b/docs/data/chat/ai-and-agents/tool-approval/demos/chat-confirmation-playground/index.ts new file mode 100644 index 0000000000000..6c42b5c2fe7e0 --- /dev/null +++ b/docs/data/chat/ai-and-agents/tool-approval/demos/chat-confirmation-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatConfirmationPlayground from './ChatConfirmationPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatConfirmationPlayground, { ClientProvider }); diff --git a/docs/data/chat/ai-and-agents/tool-approval/ToolApprovalFlow.tsx b/docs/data/chat/ai-and-agents/tool-approval/demos/tool-approval-flow/ToolApprovalFlow.tsx similarity index 98% rename from docs/data/chat/ai-and-agents/tool-approval/ToolApprovalFlow.tsx rename to docs/data/chat/ai-and-agents/tool-approval/demos/tool-approval-flow/ToolApprovalFlow.tsx index 269a09633ed4d..45973bdd6adfe 100644 --- a/docs/data/chat/ai-and-agents/tool-approval/ToolApprovalFlow.tsx +++ b/docs/data/chat/ai-and-agents/tool-approval/demos/tool-approval-flow/ToolApprovalFlow.tsx @@ -130,6 +130,7 @@ function createToolApprovalAdapter(): ChatAdapter { } export default function ToolApprovalFlow() { + // @focus-start @padding 1 const adapter = React.useMemo(() => createToolApprovalAdapter(), []); return ( @@ -146,4 +147,5 @@ export default function ToolApprovalFlow() { }} /> ); + // @focus-end } diff --git a/docs/data/chat/ai-and-agents/tool-approval/demos/tool-approval-flow/client.ts b/docs/data/chat/ai-and-agents/tool-approval/demos/tool-approval-flow/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/ai-and-agents/tool-approval/demos/tool-approval-flow/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/ai-and-agents/tool-approval/demos/tool-approval-flow/index.ts b/docs/data/chat/ai-and-agents/tool-approval/demos/tool-approval-flow/index.ts new file mode 100644 index 0000000000000..4d117c0b59f3f --- /dev/null +++ b/docs/data/chat/ai-and-agents/tool-approval/demos/tool-approval-flow/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ToolApprovalFlow from './ToolApprovalFlow'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ToolApprovalFlow, { ClientProvider }); diff --git a/docs/data/chat/ai-and-agents/tool-approval/tool-approval.md b/docs/data/chat/ai-and-agents/tool-approval/tool-approval.md index 217f222be73d3..6904c241217cc 100644 --- a/docs/data/chat/ai-and-agents/tool-approval/tool-approval.md +++ b/docs/data/chat/ai-and-agents/tool-approval/tool-approval.md @@ -33,7 +33,7 @@ The stream pauses at `approval-requested` until your UI calls `addToolApprovalRe Send the suggested prompt; the stream pauses at `approval-requested` until you approve or deny the call. -{{"demo": "ToolApprovalFlow.js", "bg": "inline"}} +{{"component": "file://./demos/tool-approval-flow/index.ts", "bg": "inline"}} ## Triggering an approval request @@ -126,7 +126,7 @@ import { ChatConfirmation } from '@mui/x-chat'; Preview the `ChatConfirmation` UI in different states: -{{"demo": "ChatConfirmationPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-confirmation-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} ### Custom labels diff --git a/docs/data/chat/ai-and-agents/tool-calling/ToolCallingLifecycle.js b/docs/data/chat/ai-and-agents/tool-calling/ToolCallingLifecycle.js deleted file mode 100644 index 62044760edd78..0000000000000 --- a/docs/data/chat/ai-and-agents/tool-calling/ToolCallingLifecycle.js +++ /dev/null @@ -1,137 +0,0 @@ -'use client'; -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Card from '@mui/material/Card'; -import CardContent from '@mui/material/CardContent'; -import Chip from '@mui/material/Chip'; -import CircularProgress from '@mui/material/CircularProgress'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { ChatBox } from '@mui/x-chat'; - -import { - createChunkStream, - randomId, -} from 'docs/data/chat/core/examples/shared/demoUtils'; - -// --- ToolCard: the complete implementation referenced from the docs ---------- - -const stateColor = { - 'input-streaming': 'info', - 'input-available': 'info', - 'approval-requested': 'warning', - 'approval-responded': 'warning', - 'output-available': 'success', - 'output-error': 'error', - 'output-denied': 'error', -}; - -function ToolCard({ invocation }) { - const isWorking = - invocation.state === 'input-streaming' || invocation.state === 'input-available'; - - return ( - - - - {isWorking && } - - {invocation.toolName} - - - - - {invocation.input != null && ( - - {JSON.stringify(invocation.input, null, 2)} - - )} - - {invocation.state === 'output-available' && invocation.output != null && ( - - {JSON.stringify(invocation.output, null, 2)} - - )} - - {invocation.state === 'output-error' && invocation.errorText && ( - - {invocation.errorText} - - )} - - - ); -} - -const partRenderers = { - tool: ({ part }) => , - 'dynamic-tool': ({ part }) => , -}; - -// --- Scripted tool-call stream ----------------------------------------------- - -function createWeatherChunks(messageId) { - const textId = `${messageId}-intro`; - const outroId = `${messageId}-outro`; - const toolCallId = `${messageId}-call`; - - return [ - { type: 'start', messageId }, - { type: 'text-start', id: textId }, - { type: 'text-delta', id: textId, delta: 'Let me check the weather in Paris.' }, - { type: 'text-end', id: textId }, - { type: 'tool-input-start', toolCallId, toolName: 'get_weather', dynamic: true }, - { type: 'tool-input-delta', toolCallId, inputTextDelta: '{"city":' }, - { type: 'tool-input-delta', toolCallId, inputTextDelta: '"Paris"}' }, - { - type: 'tool-input-available', - toolCallId, - toolName: 'get_weather', - input: { city: 'Paris' }, - dynamic: true, - }, - { - type: 'tool-output-available', - toolCallId, - output: { temperature: 22, condition: 'sunny' }, - }, - { type: 'text-start', id: outroId }, - { type: 'text-delta', id: outroId, delta: "It's 22°C and sunny in Paris." }, - { type: 'text-end', id: outroId }, - { type: 'finish', messageId }, - ]; -} - -// --- Component --------------------------------------------------------------- - -export default function ToolCallingLifecycle() { - const adapter = React.useMemo( - () => ({ - async sendMessage() { - return createChunkStream(createWeatherChunks(randomId()), { delayMs: 500 }); - }, - }), - [], - ); - - return ( - - ); -} diff --git a/docs/data/chat/ai-and-agents/tool-calling/ToolCallingLifecycle.tsx.preview b/docs/data/chat/ai-and-agents/tool-calling/ToolCallingLifecycle.tsx.preview deleted file mode 100644 index d67eeccb35dfc..0000000000000 --- a/docs/data/chat/ai-and-agents/tool-calling/ToolCallingLifecycle.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/chat/ai-and-agents/tool-calling/ToolCardExpansionPlayground.js b/docs/data/chat/ai-and-agents/tool-calling/ToolCardExpansionPlayground.js deleted file mode 100644 index 5d8bb66f7f93a..0000000000000 --- a/docs/data/chat/ai-and-agents/tool-calling/ToolCardExpansionPlayground.js +++ /dev/null @@ -1,203 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { - ChatMessage as ChatMessageComponent, - ChatMessageAvatar, - ChatMessageContent, - ChatMessageGroup, -} from '@mui/x-chat'; -import { useChatStore } from '@mui/x-chat/headless'; -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { ScopedChat } from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { - DividerLabel, - SelectControl, - SwitchControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { users } from 'docs/src/modules/components/chat-playground/data'; - -// Docs-build-specific: every demo compiles in one TS project, so this augmentation -// registers the `write` tool's typed input/output on the shared `ChatToolDefinitionMap`. - -const conversation = { - id: 'tool-expansion-playground', - title: 'Tool card expansion', - participants: [users.me, users.assistant], -}; - -const MESSAGE_ID = 'tool-expansion-demo'; - -// Builds the `write` tool invocation for a given lifecycle state so stepping the -// `state` control drives a real transition on the same card. -function buildInvocation(state) { - const input = { - path: 'src/App.tsx', - contents: 'export const App = () =>
Hello
;\n', - }; - const base = { - toolCallId: 'write-call', - toolName: 'write', - title: 'write', - }; - if (state === 'output-available') { - return { ...base, state, input, output: { bytesWritten: 48, ok: true } }; - } - if (state === 'output-error') { - return { ...base, state, input, errorText: 'EACCES: permission denied' }; - } - return { ...base, state, input }; -} - -// Stable seed so `ScopedChat` does not remount when the controls change — the -// transitions are driven through the store by `ToolStateEffect` instead. -const SEED_MESSAGE = { - id: MESSAGE_ID, - conversationId: conversation.id, - role: 'assistant', - author: users.assistant, - createdAt: '2026-05-03T09:30:00.000Z', - status: 'streaming', - parts: [{ type: 'tool', toolInvocation: buildInvocation('input-streaming') }], -}; - -// Each preset is a single `defaultExpanded` value for the `write` tool — the value -// passed to the component below. The displayed snippet is derived from it (see -// `formatDefaultExpanded`), so there is no separate code string to keep in sync. -const PRESETS = { - 'Built-in default': undefined, - 'Expand while running, collapse when done': { - write: (ownerState) => - ownerState.section - ? undefined - : ownerState.state === 'input-streaming' || - ownerState.state === 'input-available', - }, - 'Open while the message streams': { - write: (ownerState) => - ownerState.section ? undefined : ownerState.isMessageStreaming, - }, - 'Always expanded': { write: true }, - Collapsed: { write: false }, -}; - -// Renders the selected preset as the JSX a consumer would write, derived from the -// live `defaultExpanded` value (resolvers via `Function.prototype.toString`). -function formatDefaultExpanded(value) { - if (!value) { - return '// no defaultExpanded — the package default is used'; - } - const entries = Object.entries(value).map(([tool, expand]) => { - const rendered = - typeof expand === 'function' ? expand.toString() : String(expand); - return ` ${tool}: ${rendered},`; - }); - return `defaultExpanded={{\n${entries.join('\n')}\n}}`; -} - -const DEFAULTS = { - preset: 'Expand while running, collapse when done', - state: 'input-available', - streaming: true, -}; - -// Syncs the `state`/`streaming` controls into the store on the seeded message so the -// card sees genuine lifecycle transitions (same element identity, no remount). -function ToolStateEffect({ state, streaming }) { - const store = useChatStore(); - React.useEffect(() => { - store.updateMessage(MESSAGE_ID, { - status: streaming ? 'streaming' : 'sent', - parts: [{ type: 'tool', toolInvocation: buildInvocation(state) }], - }); - }, [store, state, streaming]); - return null; -} - -export default function ToolCardExpansionPlayground() { - const [preset, setPreset] = React.useState(DEFAULTS.preset); - const [state, setState] = React.useState(DEFAULTS.state); - const [streaming, setStreaming] = React.useState(DEFAULTS.streaming); - - const handleReset = React.useCallback(() => { - setPreset(DEFAULTS.preset); - setState(DEFAULTS.state); - setStreaming(DEFAULTS.streaming); - }, []); - - const defaultExpanded = PRESETS[preset]; - - return ( - - partProps.tool.defaultExpanded - ({ - value, - }))} - onChange={setPreset} - helperText="Each preset maps to a defaultExpanded entry for the write tool." - /> - - theme.typography.fontFamilyCode ?? 'Menlo, monospace', - }} - > - {formatDefaultExpanded(defaultExpanded)} - - fixture (tool lifecycle) - - - - } - preview={ - - - - - - - - - - - - } - /> - ); -} diff --git a/docs/data/chat/ai-and-agents/tool-calling/ToolCallingLifecycle.tsx b/docs/data/chat/ai-and-agents/tool-calling/demos/tool-calling-lifecycle/ToolCallingLifecycle.tsx similarity index 99% rename from docs/data/chat/ai-and-agents/tool-calling/ToolCallingLifecycle.tsx rename to docs/data/chat/ai-and-agents/tool-calling/demos/tool-calling-lifecycle/ToolCallingLifecycle.tsx index 5ec01c5a3bb1e..5745f03b78efc 100644 --- a/docs/data/chat/ai-and-agents/tool-calling/ToolCallingLifecycle.tsx +++ b/docs/data/chat/ai-and-agents/tool-calling/demos/tool-calling-lifecycle/ToolCallingLifecycle.tsx @@ -131,6 +131,7 @@ function createWeatherChunks(messageId: string): ChatMessageChunk[] { // --- Component --------------------------------------------------------------- export default function ToolCallingLifecycle() { + // @focus-start @padding 1 const adapter = React.useMemo( () => ({ async sendMessage() { @@ -153,4 +154,5 @@ export default function ToolCallingLifecycle() { }} /> ); + // @focus-end } diff --git a/docs/data/chat/ai-and-agents/tool-calling/demos/tool-calling-lifecycle/client.ts b/docs/data/chat/ai-and-agents/tool-calling/demos/tool-calling-lifecycle/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/ai-and-agents/tool-calling/demos/tool-calling-lifecycle/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/ai-and-agents/tool-calling/demos/tool-calling-lifecycle/index.ts b/docs/data/chat/ai-and-agents/tool-calling/demos/tool-calling-lifecycle/index.ts new file mode 100644 index 0000000000000..ed70d7b4b0895 --- /dev/null +++ b/docs/data/chat/ai-and-agents/tool-calling/demos/tool-calling-lifecycle/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ToolCallingLifecycle from './ToolCallingLifecycle'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ToolCallingLifecycle, { ClientProvider }); diff --git a/docs/data/chat/ai-and-agents/tool-calling/ToolCardExpansionPlayground.tsx b/docs/data/chat/ai-and-agents/tool-calling/demos/tool-card-expansion-playground/ToolCardExpansionPlayground.tsx similarity index 97% rename from docs/data/chat/ai-and-agents/tool-calling/ToolCardExpansionPlayground.tsx rename to docs/data/chat/ai-and-agents/tool-calling/demos/tool-card-expansion-playground/ToolCardExpansionPlayground.tsx index 3b6ca676ecdf8..7a8aa21938ec7 100644 --- a/docs/data/chat/ai-and-agents/tool-calling/ToolCardExpansionPlayground.tsx +++ b/docs/data/chat/ai-and-agents/tool-calling/demos/tool-card-expansion-playground/ToolCardExpansionPlayground.tsx @@ -6,13 +6,13 @@ import { ChatMessageContent, ChatMessageGroup, } from '@mui/x-chat'; -import { - useChatStore, - type ChatConversation, - type ChatMessage, - type ChatToolExpand, - type ChatToolInvocation, - type ChatToolInvocationState, +import { useChatStore } from '@mui/x-chat/headless'; +import type { + ChatConversation, + ChatMessage, + ChatToolExpand, + ChatToolInvocation, + ChatToolInvocationState, } from '@mui/x-chat/headless'; import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; import { ScopedChat } from 'docs/src/modules/components/chat-playground/sharedProviders'; @@ -140,6 +140,7 @@ function ToolStateEffect({ } export default function ToolCardExpansionPlayground() { + // @focus-start @padding 1 const [preset, setPreset] = React.useState(DEFAULTS.preset); const [state, setState] = React.useState(DEFAULTS.state); const [streaming, setStreaming] = React.useState(DEFAULTS.streaming); @@ -226,4 +227,5 @@ export default function ToolCardExpansionPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/ai-and-agents/tool-calling/demos/tool-card-expansion-playground/client.ts b/docs/data/chat/ai-and-agents/tool-calling/demos/tool-card-expansion-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/ai-and-agents/tool-calling/demos/tool-card-expansion-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/ai-and-agents/tool-calling/demos/tool-card-expansion-playground/index.ts b/docs/data/chat/ai-and-agents/tool-calling/demos/tool-card-expansion-playground/index.ts new file mode 100644 index 0000000000000..1ea4bf626b11c --- /dev/null +++ b/docs/data/chat/ai-and-agents/tool-calling/demos/tool-card-expansion-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ToolCardExpansionPlayground from './ToolCardExpansionPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ToolCardExpansionPlayground, { ClientProvider }); diff --git a/docs/data/chat/ai-and-agents/tool-calling/tool-calling.md b/docs/data/chat/ai-and-agents/tool-calling/tool-calling.md index c3f8d155f74ae..35b7eb7cd9ff1 100644 --- a/docs/data/chat/ai-and-agents/tool-calling/tool-calling.md +++ b/docs/data/chat/ai-and-agents/tool-calling/tool-calling.md @@ -17,7 +17,7 @@ The runtime tracks the full tool lifecycle through the streaming chunk protocol The demo below streams a `get_weather` tool call through `input-streaming` → `input-available` → `output-available` and renders each stage with a custom tool card: -{{"demo": "ToolCallingLifecycle.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/tool-calling-lifecycle/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Tool message part structure @@ -358,7 +358,7 @@ defaultExpanded={{ The playground below maps a few common policies to presets — pick one, then step the tool state and toggle message streaming to watch the card respond: -{{"demo": "ToolCardExpansionPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/tool-card-expansion-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} ## See also diff --git a/docs/data/chat/backend/adapters/MinimalAdapterDemo.js b/docs/data/chat/backend/adapters/MinimalAdapterDemo.js deleted file mode 100644 index f262f82ec955a..0000000000000 --- a/docs/data/chat/backend/adapters/MinimalAdapterDemo.js +++ /dev/null @@ -1,91 +0,0 @@ -'use client'; -import * as React from 'react'; -import { ChatBox } from '@mui/x-chat'; -import { - minimalConversation, - minimalMessages, - demoUsers, -} from 'docs/data/chat/core/examples/shared/demoData'; -import { randomId } from 'docs/data/chat/core/examples/shared/demoUtils'; - -function splitIntoDeltas(text, size = 15) { - const pieces = []; - for (let index = 0; index < text.length; index += size) { - pieces.push(text.slice(index, index + size)); - } - return pieces; -} - -// Minimal adapter — sendMessage is the only required method. -const adapter = { - async sendMessage({ signal }) { - const messageId = randomId(); - const textId = randomId(); - const reply = - 'This reply is hand-rolled from the documented chunk shapes: a start chunk, ' + - 'a text-start, several text-delta chunks, a text-end, and a finish chunk. ' + - 'Press stop mid-stream to see the abort signal honored.'; - - // Build the full chunk sequence up front, then emit it one chunk at a time. - const chunks = [ - { type: 'start', messageId, author: demoUsers.agent }, - { type: 'text-start', id: textId }, - ...splitIntoDeltas(reply).map((delta) => ({ - type: 'text-delta', - id: textId, - delta, - })), - { type: 'text-end', id: textId }, - { type: 'finish', messageId }, - ]; - - return new ReadableStream({ - start(controller) { - let index = 0; - let timer; - - const stop = () => { - // On abort, stop enqueuing and close the stream cleanly. - clearTimeout(timer); - signal.removeEventListener('abort', stop); - try { - controller.close(); - } catch { - // Already closed by the consumer; ignore. - } - }; - - const emitNext = () => { - if (signal.aborted || index >= chunks.length) { - stop(); - return; - } - controller.enqueue(chunks[index]); - index += 1; - // ~80ms apart so the bubble visibly grows delta-by-delta. - timer = setTimeout(emitNext, 80); - }; - - signal.addEventListener('abort', stop, { once: true }); - emitNext(); - }, - }); - }, -}; - -export default function MinimalAdapterDemo() { - return ( - - ); -} diff --git a/docs/data/chat/backend/adapters/MinimalAdapterDemo.tsx.preview b/docs/data/chat/backend/adapters/MinimalAdapterDemo.tsx.preview deleted file mode 100644 index b5370bb42b897..0000000000000 --- a/docs/data/chat/backend/adapters/MinimalAdapterDemo.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/chat/backend/adapters/adapters.md b/docs/data/chat/backend/adapters/adapters.md index 4c6bdcee3c73c..62cc49dd5a3b6 100644 --- a/docs/data/chat/backend/adapters/adapters.md +++ b/docs/data/chat/backend/adapters/adapters.md @@ -110,7 +110,7 @@ For the full chunk type reference, see [Streaming](/x/react-chat/behavior/stream Here is the same protocol running live — type a message and watch the chunks arrive: -{{"demo": "MinimalAdapterDemo.js", "bg": "inline"}} +{{"component": "file://./demos/minimal-adapter-demo/index.ts", "bg": "inline"}} ### Abort signal diff --git a/docs/data/chat/backend/adapters/MinimalAdapterDemo.tsx b/docs/data/chat/backend/adapters/demos/minimal-adapter-demo/MinimalAdapterDemo.tsx similarity index 98% rename from docs/data/chat/backend/adapters/MinimalAdapterDemo.tsx rename to docs/data/chat/backend/adapters/demos/minimal-adapter-demo/MinimalAdapterDemo.tsx index cedc4e88cd620..3e5ca448e3177 100644 --- a/docs/data/chat/backend/adapters/MinimalAdapterDemo.tsx +++ b/docs/data/chat/backend/adapters/demos/minimal-adapter-demo/MinimalAdapterDemo.tsx @@ -76,6 +76,7 @@ const adapter: ChatAdapter = { export default function MinimalAdapterDemo() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/backend/adapters/demos/minimal-adapter-demo/client.ts b/docs/data/chat/backend/adapters/demos/minimal-adapter-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/backend/adapters/demos/minimal-adapter-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/backend/adapters/demos/minimal-adapter-demo/index.ts b/docs/data/chat/backend/adapters/demos/minimal-adapter-demo/index.ts new file mode 100644 index 0000000000000..2db70bf8fabb9 --- /dev/null +++ b/docs/data/chat/backend/adapters/demos/minimal-adapter-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MinimalAdapterDemo from './MinimalAdapterDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MinimalAdapterDemo, { ClientProvider }); diff --git a/docs/data/chat/backend/building-an-adapter/ManualStreamAdapterDemo.js b/docs/data/chat/backend/building-an-adapter/ManualStreamAdapterDemo.js deleted file mode 100644 index 31b04ed13e2c3..0000000000000 --- a/docs/data/chat/backend/building-an-adapter/ManualStreamAdapterDemo.js +++ /dev/null @@ -1,112 +0,0 @@ -'use client'; -import * as React from 'react'; -import { ChatBox } from '@mui/x-chat'; -import { useChat } from '@mui/x-chat/headless'; - -import Button from '@mui/material/Button'; - -const CONVERSATION_ID = 'build-adapter-demo'; - -const initialConversations = [{ id: CONVERSATION_ID, title: 'Hand-rolled adapter' }]; - -const initialMessages = [ - { - id: 'welcome', - conversationId: CONVERSATION_ID, - role: 'assistant', - status: 'sent', - parts: [ - { - type: 'text', - text: 'Send a message to watch a hand-built ReadableStream stream the reply. Press Stop mid-stream to see the abort signal in action.', - }, - ], - }, -]; - -const REPLY = - 'Here is a reply streamed one word at a time by a hand-rolled adapter. ' + - 'Each word arrives as its own text-delta chunk. ' + - 'Press Stop at any point to fire the abort signal and halt the stream.'; - -const adapter = { - async sendMessage({ signal }) { - const messageId = `assistant-${Date.now()}`; - const textId = `${messageId}-text`; - const words = REPLY.split(' '); - - return new ReadableStream({ - start(controller) { - controller.enqueue({ type: 'start', messageId }); - controller.enqueue({ type: 'text-start', id: textId }); - - let index = 0; - let closed = false; - - const interval = setInterval(() => { - if (closed) { - return; - } - if (index < words.length) { - const delta = index === 0 ? words[index] : ` ${words[index]}`; - controller.enqueue({ type: 'text-delta', id: textId, delta }); - index += 1; - return; - } - clearInterval(interval); - closed = true; - controller.enqueue({ type: 'text-end', id: textId }); - controller.enqueue({ type: 'finish', messageId }); - controller.close(); - }, 40); - - signal.addEventListener('abort', () => { - if (closed) { - return; - } - clearInterval(interval); - closed = true; - controller.enqueue({ type: 'text-end', id: textId }); - controller.enqueue({ type: 'abort', messageId }); - controller.close(); - }); - }, - }); - }, -}; - -function StopStreamingButton() { - const { isStreaming, stopStreaming } = useChat(); - - return ( - - ); -} - -export default function ManualStreamAdapterDemo() { - return ( - - - - ); -} diff --git a/docs/data/chat/backend/building-an-adapter/ManualStreamAdapterDemo.tsx.preview b/docs/data/chat/backend/building-an-adapter/ManualStreamAdapterDemo.tsx.preview deleted file mode 100644 index 9d9ca50b01d16..0000000000000 --- a/docs/data/chat/backend/building-an-adapter/ManualStreamAdapterDemo.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/chat/backend/building-an-adapter/building-an-adapter.md b/docs/data/chat/backend/building-an-adapter/building-an-adapter.md index 3d50fc788777e..254aa167d5b54 100644 --- a/docs/data/chat/backend/building-an-adapter/building-an-adapter.md +++ b/docs/data/chat/backend/building-an-adapter/building-an-adapter.md @@ -142,7 +142,7 @@ stop() { The following demo combines Steps 2 and 3: a hand-rolled adapter that streams a canned reply chunk by chunk. `ChatBox` does not render a stop button of its own, so the demo adds one with the headless `stopStreaming()` action — pressing it mid-stream fires the abort signal. -{{"demo": "ManualStreamAdapterDemo.js"}} +{{"component": "file://./demos/manual-stream-adapter-demo/index.ts"}} ## Step 4: Adding message history diff --git a/docs/data/chat/backend/building-an-adapter/ManualStreamAdapterDemo.tsx b/docs/data/chat/backend/building-an-adapter/demos/manual-stream-adapter-demo/ManualStreamAdapterDemo.tsx similarity index 98% rename from docs/data/chat/backend/building-an-adapter/ManualStreamAdapterDemo.tsx rename to docs/data/chat/backend/building-an-adapter/demos/manual-stream-adapter-demo/ManualStreamAdapterDemo.tsx index 60703e1caa5ab..0db7c2610131f 100644 --- a/docs/data/chat/backend/building-an-adapter/ManualStreamAdapterDemo.tsx +++ b/docs/data/chat/backend/building-an-adapter/demos/manual-stream-adapter-demo/ManualStreamAdapterDemo.tsx @@ -93,6 +93,7 @@ function StopStreamingButton() { export default function ManualStreamAdapterDemo() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/backend/building-an-adapter/demos/manual-stream-adapter-demo/client.ts b/docs/data/chat/backend/building-an-adapter/demos/manual-stream-adapter-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/backend/building-an-adapter/demos/manual-stream-adapter-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/backend/building-an-adapter/demos/manual-stream-adapter-demo/index.ts b/docs/data/chat/backend/building-an-adapter/demos/manual-stream-adapter-demo/index.ts new file mode 100644 index 0000000000000..a528d9f1d1ddb --- /dev/null +++ b/docs/data/chat/backend/building-an-adapter/demos/manual-stream-adapter-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ManualStreamAdapterDemo from './ManualStreamAdapterDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ManualStreamAdapterDemo, { ClientProvider }); diff --git a/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/AiSdkMockStreamDemo.js b/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/AiSdkMockStreamDemo.js deleted file mode 100644 index d22f5fe8ecd05..0000000000000 --- a/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/AiSdkMockStreamDemo.js +++ /dev/null @@ -1,92 +0,0 @@ -'use client'; -import { ChatBox } from '@mui/x-chat'; -import { createAiSdkAdapter } from '@mui/x-chat/headless'; - -const CONVERSATION_ID = 'ai-sdk-mock'; - -const initialConversations = [{ id: CONVERSATION_ID, title: 'Mock stream' }]; - -const initialMessages = [ - { - id: 'welcome', - conversationId: CONVERSATION_ID, - role: 'assistant', - status: 'sent', - parts: [ - { - type: 'text', - text: 'Type anything — I stream the reply back word by word, like the AI SDK UI Message Stream.', - }, - ], - }, -]; - -function getMessageText(message) { - return message.parts - .map((part) => (part.type === 'text' ? part.text : '')) - .join(''); -} - -function replyFor(message) { - const text = getMessageText(message).trim() || 'nothing'; - return `You said: «${text}» — this reply was streamed as AI SDK UI-message chunks, no \`ai\` package involved.`; -} - -// Builds a ReadableStream of AI SDK UI Message Stream chunks, enqueuing one -// `text-delta` per word on a timer so the reply streams in visibly. The -// `start`/`finish` chunks deliberately omit `messageId`, exercising the -// adapter's synthetic-ID path. -function buildMockUiMessageStream(text) { - const words = text.split(' '); - let index = 0; - let timer; - - return new ReadableStream({ - start(controller) { - controller.enqueue({ type: 'start' }); - controller.enqueue({ type: 'text-start', id: 'reply-text' }); - - const pushWord = () => { - if (index >= words.length) { - controller.enqueue({ type: 'text-end', id: 'reply-text' }); - controller.enqueue({ type: 'finish' }); - controller.close(); - return; - } - const delta = index === 0 ? words[index] : ` ${words[index]}`; - controller.enqueue({ type: 'text-delta', id: 'reply-text', delta }); - index += 1; - timer = setTimeout(pushWord, 40); - }; - - timer = setTimeout(pushWord, 40); - }, - cancel() { - if (timer) { - clearTimeout(timer); - } - }, - }); -} - -const adapter = createAiSdkAdapter({ - stream: ({ message }) => buildMockUiMessageStream(replyFor(message)), -}); - -export default function AiSdkMockStreamDemo() { - return ( - - ); -} diff --git a/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/AiSdkMockStreamDemo.tsx.preview b/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/AiSdkMockStreamDemo.tsx.preview deleted file mode 100644 index 03e3272d52d03..0000000000000 --- a/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/AiSdkMockStreamDemo.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/MuiDocsAssistantDemo.js b/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/MuiDocsAssistantDemo.js deleted file mode 100644 index 401c46aec4a9f..0000000000000 --- a/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/MuiDocsAssistantDemo.js +++ /dev/null @@ -1,67 +0,0 @@ -'use client'; -import { ChatBox } from '@mui/x-chat'; -import { createAiSdkAdapter } from '@mui/x-chat/headless'; - -const CONVERSATION_ID = 'mui-docs'; - -const initialConversations = [{ id: CONVERSATION_ID, title: 'MUI docs assistant' }]; - -const initialMessages = [ - { - id: 'welcome', - conversationId: CONVERSATION_ID, - role: 'assistant', - status: 'sent', - parts: [ - { - type: 'text', - text: 'Hi! Ask me anything about Material UI, MUI X Data Grid, Date Pickers, Charts, Tree View, Scheduler, or Chat.', - }, - ], - }, -]; - -function toPlainMessages(messages) { - return messages.map((message) => ({ - role: message.role, - content: message.parts - .map((part) => (part.type === 'text' ? part.text : '')) - .join(''), - })); -} - -const adapter = createAiSdkAdapter({ - stream: async ({ messages, signal }) => { - const response = await fetch( - 'https://backend.mui.com/public/docs-assistant/chat', - { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ messages: toPlainMessages(messages) }), - signal, - }, - ); - if (!response.ok || !response.body) { - throw new Error(`Docs assistant unavailable (HTTP ${response.status})`); - } - return response.body; - }, -}); - -export default function MuiDocsAssistantDemo() { - return ( - - ); -} diff --git a/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/MuiDocsAssistantDemo.tsx.preview b/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/MuiDocsAssistantDemo.tsx.preview deleted file mode 100644 index 263c8c714a88f..0000000000000 --- a/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/MuiDocsAssistantDemo.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/ai-sdk-adapter.md b/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/ai-sdk-adapter.md index 558d57881e729..3534364f4340c 100644 --- a/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/ai-sdk-adapter.md +++ b/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/ai-sdk-adapter.md @@ -21,7 +21,7 @@ Use this adapter when your backend speaks the AI SDK's UI Message Stream; for pr The demo below talks to a live MUI documentation assistant served using AI SDK. Ask it anything about Material UI or MUI X—it streams text and reasoning back through the adapter. -{{"demo": "MuiDocsAssistantDemo.js", "defaultCodeOpen": true, "bg": "inline"}} +{{"component": "file://./demos/mui-docs-assistant-demo/index.ts", "bg": "inline", "initialExpanded": true}} :::warning The MUI docs assistant endpoint is rate-limited to 20 requests per window for fair public usage. @@ -106,7 +106,7 @@ Don't call this from a browser component with raw API keys—those keys would sh The demo below simulates `toUIMessageStream()` with a hand-built object stream, so you can watch the token-by-token flow without any backend: -{{"demo": "AiSdkMockStreamDemo.js", "bg": "inline"}} +{{"component": "file://./demos/ai-sdk-mock-stream-demo/index.ts", "bg": "inline"}} ## Pattern C: Sharing state with `useChat` diff --git a/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/AiSdkMockStreamDemo.tsx b/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/demos/ai-sdk-mock-stream-demo/AiSdkMockStreamDemo.tsx similarity index 98% rename from docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/AiSdkMockStreamDemo.tsx rename to docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/demos/ai-sdk-mock-stream-demo/AiSdkMockStreamDemo.tsx index 942fea8fefd43..135aaf6055fff 100644 --- a/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/AiSdkMockStreamDemo.tsx +++ b/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/demos/ai-sdk-mock-stream-demo/AiSdkMockStreamDemo.tsx @@ -78,6 +78,7 @@ const adapter = createAiSdkAdapter({ export default function AiSdkMockStreamDemo() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/demos/ai-sdk-mock-stream-demo/client.ts b/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/demos/ai-sdk-mock-stream-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/demos/ai-sdk-mock-stream-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/demos/ai-sdk-mock-stream-demo/index.ts b/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/demos/ai-sdk-mock-stream-demo/index.ts new file mode 100644 index 0000000000000..cc09f5912b88d --- /dev/null +++ b/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/demos/ai-sdk-mock-stream-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AiSdkMockStreamDemo from './AiSdkMockStreamDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AiSdkMockStreamDemo, { ClientProvider }); diff --git a/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/MuiDocsAssistantDemo.tsx b/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/demos/mui-docs-assistant-demo/MuiDocsAssistantDemo.tsx similarity index 97% rename from docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/MuiDocsAssistantDemo.tsx rename to docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/demos/mui-docs-assistant-demo/MuiDocsAssistantDemo.tsx index dc037ae389c23..117c2c692c3ac 100644 --- a/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/MuiDocsAssistantDemo.tsx +++ b/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/demos/mui-docs-assistant-demo/MuiDocsAssistantDemo.tsx @@ -51,6 +51,7 @@ const adapter = createAiSdkAdapter({ export default function MuiDocsAssistantDemo() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/demos/mui-docs-assistant-demo/client.ts b/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/demos/mui-docs-assistant-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/demos/mui-docs-assistant-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/demos/mui-docs-assistant-demo/index.ts b/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/demos/mui-docs-assistant-demo/index.ts new file mode 100644 index 0000000000000..a77897dfce2d0 --- /dev/null +++ b/docs/data/chat/backend/built-in-adapters/ai-sdk-adapter/demos/mui-docs-assistant-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MuiDocsAssistantDemo from './MuiDocsAssistantDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MuiDocsAssistantDemo, { ClientProvider }); diff --git a/docs/data/chat/backend/built-in-adapters/echo-adapter/EchoAdapterCannedReplies.js b/docs/data/chat/backend/built-in-adapters/echo-adapter/EchoAdapterCannedReplies.js deleted file mode 100644 index 0ffb45ed78fc6..0000000000000 --- a/docs/data/chat/backend/built-in-adapters/echo-adapter/EchoAdapterCannedReplies.js +++ /dev/null @@ -1,52 +0,0 @@ -'use client'; -import { ChatBox } from '@mui/x-chat'; -import { createEchoAdapter } from '@mui/x-chat/headless'; - -const CONVERSATION_ID = 'canned-demo'; - -const initialConversations = [{ id: CONVERSATION_ID, title: 'Canned replies' }]; - -const initialMessages = [ - { - id: 'welcome', - conversationId: CONVERSATION_ID, - role: 'assistant', - status: 'sent', - parts: [ - { - type: 'text', - text: 'Try asking about "pricing" or "support".', - }, - ], - }, -]; - -const adapter = createEchoAdapter({ - respond: (text) => { - const input = text.toLowerCase(); - if (input.includes('pricing')) { - return 'Plans start at $0 — the echo tier is free forever.'; - } - if (input.includes('support')) { - return 'Support is instant: I only ever talk to you.'; - } - return `I only know about "pricing" and "support", but you said: "${text}".`; - }, -}); - -export default function EchoAdapterCannedReplies() { - return ( - - ); -} diff --git a/docs/data/chat/backend/built-in-adapters/echo-adapter/EchoAdapterCannedReplies.tsx.preview b/docs/data/chat/backend/built-in-adapters/echo-adapter/EchoAdapterCannedReplies.tsx.preview deleted file mode 100644 index 6bccfce765ffc..0000000000000 --- a/docs/data/chat/backend/built-in-adapters/echo-adapter/EchoAdapterCannedReplies.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/chat/backend/built-in-adapters/echo-adapter/EchoAdapterDemo.js b/docs/data/chat/backend/built-in-adapters/echo-adapter/EchoAdapterDemo.js deleted file mode 100644 index 95712a8cda118..0000000000000 --- a/docs/data/chat/backend/built-in-adapters/echo-adapter/EchoAdapterDemo.js +++ /dev/null @@ -1,43 +0,0 @@ -'use client'; -import { ChatBox } from '@mui/x-chat'; -import { createEchoAdapter } from '@mui/x-chat/headless'; - -const CONVERSATION_ID = 'echo-demo'; - -const initialConversations = [{ id: CONVERSATION_ID, title: 'Echo' }]; - -const initialMessages = [ - { - id: 'welcome', - conversationId: CONVERSATION_ID, - role: 'assistant', - status: 'sent', - parts: [ - { - type: 'text', - text: 'Type anything — I echo it back with a small delay.', - }, - ], - }, -]; - -const adapter = createEchoAdapter({ - respond: (text) => `You typed: "${text || 'nothing'}".`, -}); - -export default function EchoAdapterDemo() { - return ( - - ); -} diff --git a/docs/data/chat/backend/built-in-adapters/echo-adapter/EchoAdapterDemo.tsx.preview b/docs/data/chat/backend/built-in-adapters/echo-adapter/EchoAdapterDemo.tsx.preview deleted file mode 100644 index 6bccfce765ffc..0000000000000 --- a/docs/data/chat/backend/built-in-adapters/echo-adapter/EchoAdapterDemo.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/chat/backend/built-in-adapters/echo-adapter/EchoAdapterCannedReplies.tsx b/docs/data/chat/backend/built-in-adapters/echo-adapter/demos/echo-adapter-canned-replies/EchoAdapterCannedReplies.tsx similarity index 96% rename from docs/data/chat/backend/built-in-adapters/echo-adapter/EchoAdapterCannedReplies.tsx rename to docs/data/chat/backend/built-in-adapters/echo-adapter/demos/echo-adapter-canned-replies/EchoAdapterCannedReplies.tsx index 00464b11f6118..db3d8c29a9b54 100644 --- a/docs/data/chat/backend/built-in-adapters/echo-adapter/EchoAdapterCannedReplies.tsx +++ b/docs/data/chat/backend/built-in-adapters/echo-adapter/demos/echo-adapter-canned-replies/EchoAdapterCannedReplies.tsx @@ -36,6 +36,7 @@ const adapter = createEchoAdapter({ export default function EchoAdapterCannedReplies() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/backend/built-in-adapters/echo-adapter/demos/echo-adapter-canned-replies/client.ts b/docs/data/chat/backend/built-in-adapters/echo-adapter/demos/echo-adapter-canned-replies/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/backend/built-in-adapters/echo-adapter/demos/echo-adapter-canned-replies/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/backend/built-in-adapters/echo-adapter/demos/echo-adapter-canned-replies/index.ts b/docs/data/chat/backend/built-in-adapters/echo-adapter/demos/echo-adapter-canned-replies/index.ts new file mode 100644 index 0000000000000..f0dbb3af52744 --- /dev/null +++ b/docs/data/chat/backend/built-in-adapters/echo-adapter/demos/echo-adapter-canned-replies/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import EchoAdapterCannedReplies from './EchoAdapterCannedReplies'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, EchoAdapterCannedReplies, { ClientProvider }); diff --git a/docs/data/chat/backend/built-in-adapters/echo-adapter/EchoAdapterDemo.tsx b/docs/data/chat/backend/built-in-adapters/echo-adapter/demos/echo-adapter-demo/EchoAdapterDemo.tsx similarity index 95% rename from docs/data/chat/backend/built-in-adapters/echo-adapter/EchoAdapterDemo.tsx rename to docs/data/chat/backend/built-in-adapters/echo-adapter/demos/echo-adapter-demo/EchoAdapterDemo.tsx index b68dd622e241e..e8e9827bc7645 100644 --- a/docs/data/chat/backend/built-in-adapters/echo-adapter/EchoAdapterDemo.tsx +++ b/docs/data/chat/backend/built-in-adapters/echo-adapter/demos/echo-adapter-demo/EchoAdapterDemo.tsx @@ -27,6 +27,7 @@ const adapter = createEchoAdapter({ export default function EchoAdapterDemo() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/backend/built-in-adapters/echo-adapter/demos/echo-adapter-demo/client.ts b/docs/data/chat/backend/built-in-adapters/echo-adapter/demos/echo-adapter-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/backend/built-in-adapters/echo-adapter/demos/echo-adapter-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/backend/built-in-adapters/echo-adapter/demos/echo-adapter-demo/index.ts b/docs/data/chat/backend/built-in-adapters/echo-adapter/demos/echo-adapter-demo/index.ts new file mode 100644 index 0000000000000..4828b8ef644c1 --- /dev/null +++ b/docs/data/chat/backend/built-in-adapters/echo-adapter/demos/echo-adapter-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import EchoAdapterDemo from './EchoAdapterDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, EchoAdapterDemo, { ClientProvider }); diff --git a/docs/data/chat/backend/built-in-adapters/echo-adapter/echo-adapter.md b/docs/data/chat/backend/built-in-adapters/echo-adapter/echo-adapter.md index 6a97bef6037bc..d098d8bdc3cbe 100644 --- a/docs/data/chat/backend/built-in-adapters/echo-adapter/echo-adapter.md +++ b/docs/data/chat/backend/built-in-adapters/echo-adapter/echo-adapter.md @@ -16,7 +16,7 @@ githubLabel: 'scope: chat' The adapter below echoes whatever you type after the default 400 ms simulated network delay. The reply arrives as a single text chunk once the delay elapses — the Echo adapter doesn't simulate token-by-token streaming. For real streamed output, swap in [`createAiSdkAdapter`](/x/react-chat/backend/built-in-adapters/ai-sdk-adapter/). -{{"demo": "EchoAdapterDemo.js", "defaultCodeOpen": true, "bg": "inline"}} +{{"component": "file://./demos/echo-adapter-demo/index.ts", "bg": "inline", "initialExpanded": true}} ## Usage @@ -35,7 +35,7 @@ const adapter = createEchoAdapter({ Return different replies based on the input to script deterministic flows for demos and tests: -{{"demo": "EchoAdapterCannedReplies.js", "bg": "inline"}} +{{"component": "file://./demos/echo-adapter-canned-replies/index.ts", "bg": "inline"}} ## Options diff --git a/docs/data/chat/backend/controlled-state/ControlledActiveConversation.js b/docs/data/chat/backend/controlled-state/ControlledActiveConversation.js deleted file mode 100644 index 282eacec94ad6..0000000000000 --- a/docs/data/chat/backend/controlled-state/ControlledActiveConversation.js +++ /dev/null @@ -1,143 +0,0 @@ -'use client'; -import * as React from 'react'; -import SendIcon from '@mui/icons-material/Send'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import { - ChatComposer, - ChatComposerSendButton, - ChatComposerTextArea, - ChatComposerToolbar, - ChatConversation, - ChatConversationList, - ChatMessageList, -} from '@mui/x-chat'; -import { ChatProvider, createEchoAdapter } from '@mui/x-chat/headless'; - -const BILLING_ID = 'conv-billing'; -const ONBOARDING_ID = 'conv-onboarding'; - -const adapter = createEchoAdapter({ - respond: (text) => - `You said: "${text || 'nothing'}". The runtime still works under a controlled model.`, -}); - -const initialConversations = [ - { id: BILLING_ID, title: 'Billing' }, - { id: ONBOARDING_ID, title: 'Onboarding' }, -]; - -const initialMessages = [ - { - id: 'billing-1', - conversationId: BILLING_ID, - role: 'assistant', - status: 'sent', - parts: [ - { - type: 'text', - text: 'Welcome to billing support. How can I help with your invoice?', - }, - ], - }, - { - id: 'billing-2', - conversationId: BILLING_ID, - role: 'user', - status: 'sent', - parts: [{ type: 'text', text: 'I was charged twice this month.' }], - }, - { - id: 'onboarding-1', - conversationId: ONBOARDING_ID, - role: 'assistant', - status: 'sent', - parts: [ - { - type: 'text', - text: 'Welcome aboard! Let me walk you through setup.', - }, - ], - }, - { - id: 'onboarding-2', - conversationId: ONBOARDING_ID, - role: 'user', - status: 'sent', - parts: [{ type: 'text', text: 'Where do I add my team members?' }], - }, -]; - -export default function ControlledActiveConversation() { - const [activeId, setActiveId] = React.useState(BILLING_ID); - - return ( - - - { - if (nextId) { - setActiveId(nextId); - } - }} - aria-label="Active conversation" - > - Billing - Onboarding - - - activeConversationId: {activeId ?? 'undefined'} - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/chat/backend/controlled-state/controlled-state.md b/docs/data/chat/backend/controlled-state/controlled-state.md index 83840245beca4..9053515f7dc37 100644 --- a/docs/data/chat/backend/controlled-state/controlled-state.md +++ b/docs/data/chat/backend/controlled-state/controlled-state.md @@ -109,7 +109,7 @@ Switching modes means changing which props your code passes — like other MUI c The demo below controls `activeConversationId` from outside the chat surface — select a conversation with the external buttons, or in the conversation list, and watch the single source of truth stay in sync: -{{"demo": "ControlledActiveConversation.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/controlled-active-conversation/index.ts", "bg": "inline", "collapseToEmpty": true}} ## State model reference @@ -175,7 +175,7 @@ The runtime still handles streaming, normalization, and derived state — you ju Each `ChatProvider` creates an isolated store. To render multiple independent chat surfaces, use separate `ChatBox` instances—each one creates its own provider internally. -{{"demo": "../../material/context/MultipleInstances.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://../../material/context/demos/multiple-instances/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Provider props reference diff --git a/docs/data/chat/backend/controlled-state/ControlledActiveConversation.tsx b/docs/data/chat/backend/controlled-state/demos/controlled-active-conversation/ControlledActiveConversation.tsx similarity index 98% rename from docs/data/chat/backend/controlled-state/ControlledActiveConversation.tsx rename to docs/data/chat/backend/controlled-state/demos/controlled-active-conversation/ControlledActiveConversation.tsx index 96c87ccefb001..50fcb2d0a6bdd 100644 --- a/docs/data/chat/backend/controlled-state/ControlledActiveConversation.tsx +++ b/docs/data/chat/backend/controlled-state/demos/controlled-active-conversation/ControlledActiveConversation.tsx @@ -71,6 +71,7 @@ const initialMessages = [ ]; export default function ControlledActiveConversation() { + // @focus-start @padding 1 const [activeId, setActiveId] = React.useState(BILLING_ID); return ( @@ -140,4 +141,5 @@ export default function ControlledActiveConversation() { ); + // @focus-end } diff --git a/docs/data/chat/backend/controlled-state/demos/controlled-active-conversation/client.ts b/docs/data/chat/backend/controlled-state/demos/controlled-active-conversation/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/backend/controlled-state/demos/controlled-active-conversation/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/backend/controlled-state/demos/controlled-active-conversation/index.ts b/docs/data/chat/backend/controlled-state/demos/controlled-active-conversation/index.ts new file mode 100644 index 0000000000000..8ddbb08b94f3a --- /dev/null +++ b/docs/data/chat/backend/controlled-state/demos/controlled-active-conversation/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ControlledActiveConversation from './ControlledActiveConversation'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ControlledActiveConversation, { ClientProvider }); diff --git a/docs/data/chat/backend/real-time-adapters/real-time-adapters.md b/docs/data/chat/backend/real-time-adapters/real-time-adapters.md index b8a0373d71b76..7aaa239d52c8d 100644 --- a/docs/data/chat/backend/real-time-adapters/real-time-adapters.md +++ b/docs/data/chat/backend/real-time-adapters/real-time-adapters.md @@ -128,7 +128,7 @@ async markRead({ conversationId, messageId }) { The demo below uses an in-memory adapter whose `subscribe()` hands `onEvent` to the buttons — click them to emit `typing`, `presence`, and `read` events and watch the hooks react. -{{"demo": "../../core/examples/realtime/RealtimeHeadlessChat.js", "bg": "inline", "defaultCodeOpen": false, "hideToolbar": true}} +{{"component": "file://../../core/examples/realtime/demos/realtime-headless-chat/index.ts", "bg": "inline", "hideToolbar": true, "collapseToEmpty": true}} ### Typing indicators diff --git a/docs/data/chat/basics/chatbox/ChatBoxFeatureFlags.js b/docs/data/chat/basics/chatbox/ChatBoxFeatureFlags.js deleted file mode 100644 index ef1db7fe6c4db..0000000000000 --- a/docs/data/chat/basics/chatbox/ChatBoxFeatureFlags.js +++ /dev/null @@ -1,92 +0,0 @@ -'use client'; -import * as React from 'react'; -import { ChatBox } from '@mui/x-chat'; - -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - createTextMessage, - demoUsers, -} from 'docs/data/chat/core/examples/shared/demoData'; - -const CONVERSATION_ID = 'feature-flags-conv'; - -const adapter = createEchoAdapter(); - -const conversations = [ - { - id: CONVERSATION_ID, - title: 'Feature flags', - subtitle: 'dateDivider + unreadMarker enabled', - participants: [demoUsers.you, demoUsers.agent], - readState: 'unread', - unreadCount: 2, - lastMessageAt: '2026-03-15T09:01:00.000Z', - }, -]; - -// The unread marker derives its boundary from the conversation's `unreadCount` -// (boundary = messageCount - unreadCount): with 5 messages and unreadCount 2, -// the marker sits above the 4th message — the first one dated March 15. -const messages = [ - createTextMessage({ - id: 'ff-msg-1', - conversationId: CONVERSATION_ID, - role: 'user', - author: demoUsers.you, - createdAt: '2026-03-14T15:00:00.000Z', - status: 'read', - text: "Can you summarize yesterday's release notes?", - }), - createTextMessage({ - id: 'ff-msg-2', - conversationId: CONVERSATION_ID, - role: 'assistant', - author: demoUsers.agent, - createdAt: '2026-03-14T15:00:30.000Z', - status: 'read', - text: 'Sure — the release shipped roving focus, landmarks, and a streaming announcer.', - }), - createTextMessage({ - id: 'ff-msg-3', - conversationId: CONVERSATION_ID, - role: 'user', - author: demoUsers.you, - createdAt: '2026-03-14T15:01:00.000Z', - status: 'read', - text: 'Great, thanks!', - }), - createTextMessage({ - id: 'ff-msg-4', - conversationId: CONVERSATION_ID, - role: 'assistant', - author: demoUsers.agent, - createdAt: '2026-03-15T09:00:00.000Z', - text: 'Morning! A new beta is out with the feature flags documented here.', - }), - createTextMessage({ - id: 'ff-msg-5', - conversationId: CONVERSATION_ID, - role: 'assistant', - author: demoUsers.agent, - createdAt: '2026-03-15T09:01:00.000Z', - text: 'Toggle dateDivider and unreadMarker to see the separators above.', - }), -]; - -export default function ChatBoxFeatureFlags() { - return ( - - ); -} diff --git a/docs/data/chat/basics/chatbox/ChatBoxFeatureFlags.tsx.preview b/docs/data/chat/basics/chatbox/ChatBoxFeatureFlags.tsx.preview deleted file mode 100644 index 42bd447b2d1af..0000000000000 --- a/docs/data/chat/basics/chatbox/ChatBoxFeatureFlags.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/chat/basics/chatbox/ChatBoxPlayground.js b/docs/data/chat/basics/chatbox/ChatBoxPlayground.js deleted file mode 100644 index 2da81a8b029b5..0000000000000 --- a/docs/data/chat/basics/chatbox/ChatBoxPlayground.js +++ /dev/null @@ -1,303 +0,0 @@ -import * as React from 'react'; -import { ChatBox } from '@mui/x-chat'; - -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { - ChoiceControl, - DividerLabel, - SwitchControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; -import { - conversations, - initialThreads, - makeAdapter, - sampleSuggestions, - users, -} from 'docs/src/modules/components/chat-playground/data'; - -const DEFAULTS = { - variant: 'default', - density: 'standard', - layoutMode: 'standard', - conversationList: true, - conversationHeader: true, - attachments: true, - suggestions: true, - scrollToBottom: true, - helperText: true, - autoScroll: true, - suggestionsAutoSubmit: false, -}; - -const CLASS_DEFS = [ - { name: 'root', description: 'The outermost ChatBox element.' }, - { - name: 'layout', - selector: '.MuiChatBox-layout', - description: 'The pane layout container.', - }, - { - name: 'threadPane', - selector: '.MuiChatBox-threadPane', - description: 'The active thread column.', - }, - { - name: 'conversationsPane', - selector: '.MuiChatBox-conversationsPane', - description: 'The sidebar listing conversations.', - }, -]; - -function indent(input, prefix) { - return input - .split('\n') - .map((line, idx) => (idx === 0 ? line : `${prefix}${line}`)) - .join('\n'); -} - -export default function ChatBoxPlayground(props = {}) { - const { hideHeader, defaults: defaultsOverride, defaultControlsCollapsed } = props; - const defaults = React.useMemo( - () => ({ ...DEFAULTS, ...defaultsOverride }), - [defaultsOverride], - ); - const [variant, setVariant] = React.useState(defaults.variant); - const [density, setDensity] = React.useState(defaults.density); - const [layoutMode, setLayoutMode] = React.useState(defaults.layoutMode); - const [conversationList, setConversationList] = React.useState( - defaults.conversationList, - ); - const [conversationHeader, setConversationHeader] = React.useState( - defaults.conversationHeader, - ); - const [attachments, setAttachments] = React.useState(defaults.attachments); - const [suggestions, setSuggestions] = React.useState(defaults.suggestions); - const [scrollToBottom, setScrollToBottom] = React.useState( - defaults.scrollToBottom, - ); - const [helperText, setHelperText] = React.useState(defaults.helperText); - const [autoScroll, setAutoScroll] = React.useState(defaults.autoScroll); - const [suggestionsAutoSubmit, setSuggestionsAutoSubmit] = React.useState( - defaults.suggestionsAutoSubmit, - ); - const [activeConversationId, setActiveConversationId] = React.useState( - conversations[0].id, - ); - const classesCustomizations = useCustomizations(CLASS_DEFS); - const threadMapRef = React.useRef(initialThreads); - const adapter = React.useMemo(() => makeAdapter(threadMapRef.current), []); - - const handleReset = React.useCallback(() => { - setVariant(defaults.variant); - setDensity(defaults.density); - setLayoutMode(defaults.layoutMode); - setConversationList(defaults.conversationList); - setConversationHeader(defaults.conversationHeader); - setAttachments(defaults.attachments); - setSuggestions(defaults.suggestions); - setScrollToBottom(defaults.scrollToBottom); - setHelperText(defaults.helperText); - setAutoScroll(defaults.autoScroll); - setSuggestionsAutoSubmit(defaults.suggestionsAutoSubmit); - setActiveConversationId(conversations[0].id); - }, [defaults]); - - const outerSx = React.useMemo( - () => classesCustomizations.toClassesSx({ height: '100%' }), - [classesCustomizations], - ); - - // split / overlay layouts only make sense alongside the conversation list and - // its header, so force them on (and lock the toggles) for those modes. - const layoutRequiresConversation = - layoutMode === 'split' || layoutMode === 'overlay'; - const effectiveConversationList = layoutRequiresConversation || conversationList; - const effectiveConversationHeader = - layoutRequiresConversation || conversationHeader; - const layoutLockHint = layoutRequiresConversation - ? `Required by layoutMode="${layoutMode}".` - : undefined; - - // Without the conversation list there's no UI to pick a conversation, so - // restore the first one whenever the user lands in that state (e.g. after - // a back-click in split mode cleared the selection). - React.useEffect(() => { - if (!effectiveConversationList && !activeConversationId) { - setActiveConversationId(conversations[0].id); - } - }, [effectiveConversationList, activeConversationId]); - - const copyCode = React.useCallback(() => { - const classEntries = Object.keys(classesCustomizations.values) - .filter((key) => classesCustomizations.values[key].trim()) - .map((key) => { - const def = CLASS_DEFS.find((d) => d.name === key); - if (key === 'root') { - return ` ...${indent(classesCustomizations.values[key].trim(), ' ')}`; - } - return ` '& ${def.selector}': ${indent(classesCustomizations.values[key].trim(), ' ')},`; - }); - - const sxLines = - classEntries.length > 0 - ? `\n sx={{\n height: '100%',\n${classEntries.join('\n')}\n }}` - : `\n sx={{ height: '100%' }}`; - - const featuresLines = [ - effectiveConversationList ? ' conversationList: true,' : null, - effectiveConversationHeader ? ' conversationHeader: true,' : null, - scrollToBottom ? ' scrollToBottom: true,' : ' scrollToBottom: false,', - attachments ? ' attachments: true,' : null, - helperText ? ' helperText: true,' : ' helperText: false,', - autoScroll ? ' autoScroll: true,' : ' autoScroll: false,', - suggestions ? ' suggestions: true,' : null, - ] - .filter(Boolean) - .join('\n'); - - return ``; - }, [ - variant, - density, - layoutMode, - effectiveConversationList, - effectiveConversationHeader, - attachments, - suggestions, - scrollToBottom, - helperText, - autoScroll, - suggestionsAutoSubmit, - classesCustomizations.values, - ]); - - return ( - - Appearance - - - - features - - - - - - - - Suggestions - - - } - preview={ - - } - /> - ); -} diff --git a/docs/data/chat/basics/chatbox/chatbox.md b/docs/data/chat/basics/chatbox/chatbox.md index 63409bca9d3ef..ad32d5e4bd5d6 100644 --- a/docs/data/chat/basics/chatbox/chatbox.md +++ b/docs/data/chat/basics/chatbox/chatbox.md @@ -21,7 +21,7 @@ ChatBox ships full keyboard navigation and screen-reader support out of the box Try the `ChatBox` props live—toggle variant, density, layout mode, and the built-in features: -{{"demo": "ChatBoxPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-box-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} The playground starts with `features.conversationList` enabled to showcase the full surface; on `ChatBox` itself the conversation list is off by default. @@ -47,7 +47,7 @@ No additional configuration is needed—`ChatBox` reads `palette`, `typography`, The demo below shows `ChatBox` picking up the active Material UI theme: -{{"demo": "../../material/examples/basic-ai-chat/BasicAiChat.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://../../material/examples/basic-ai-chat/demos/basic-ai-chat/index.ts", "bg": "inline", "collapseToEmpty": true}} ## ChatBox vs. ChatProvider @@ -56,17 +56,17 @@ The demo below shows `ChatBox` picking up the active Material UI theme: `ChatBox` is the right choice when you want a complete chat surface with minimal setup. It creates a `ChatProvider` internally, so all [hooks](/x/react-chat/resources/hooks/) work inside any component rendered as a child or descendant of `ChatBox`: -{{"demo": "../../material/context/ChatBoxWithHooks.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://../../material/context/demos/chat-box-with-hooks/index.ts", "bg": "inline", "collapseToEmpty": true}} ### Using ChatProvider for a custom layout When you need full control over the markup, use `ChatProvider` directly and compose only the pieces you need—here, just the message list and a composer: -{{"demo": "../../material/context/ChatProviderCustomLayout.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://../../material/context/demos/chat-provider-custom-layout/index.ts", "bg": "inline", "collapseToEmpty": true}} The same approach scales up to a full inbox layout—a conversation list in a sidebar next to the active thread. See the [Layout](/x/react-chat/basics/layout/) page for the building blocks: -{{"demo": "../layout/LayoutTwoPaneStandalone.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://../layout/demos/layout-two-pane-standalone/index.ts", "bg": "inline", "collapseToEmpty": true}} :::warning `ChatBox` always creates its own internal `ChatProvider`. @@ -96,7 +96,7 @@ Everything you saw in the all-in-one surface above is governed by the `features` The demo below enables `dateDivider` and `unreadMarker`—the divider marks the day boundary and the marker sits above the first unread message: -{{"demo": "ChatBoxFeatureFlags.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://./demos/chat-box-feature-flags/index.ts", "bg": "inline", "collapseToEmpty": true}} The `conversationList`, `dateDivider`, and `unreadMarker` flags each have a dedicated page: [Conversation list](/x/react-chat/multi-conversation/conversation-list/), [Date divider](/x/react-chat/display/date-divider/), and [Unread marker](/x/react-chat/display/unread-marker/). @@ -174,4 +174,4 @@ For example, control the active conversation while letting the internal store ma Each `ChatBox` creates its own isolated store. To render multiple independent chat surfaces side by side, use separate `ChatBox` instances: -{{"demo": "../../material/context/MultipleInstances.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://../../material/context/demos/multiple-instances/index.ts", "bg": "inline", "collapseToEmpty": true}} diff --git a/docs/data/chat/basics/chatbox/ChatBoxFeatureFlags.tsx b/docs/data/chat/basics/chatbox/demos/chat-box-feature-flags/ChatBoxFeatureFlags.tsx similarity index 98% rename from docs/data/chat/basics/chatbox/ChatBoxFeatureFlags.tsx rename to docs/data/chat/basics/chatbox/demos/chat-box-feature-flags/ChatBoxFeatureFlags.tsx index 95bd27c8d5a5f..ebfcdd976aaa6 100644 --- a/docs/data/chat/basics/chatbox/ChatBoxFeatureFlags.tsx +++ b/docs/data/chat/basics/chatbox/demos/chat-box-feature-flags/ChatBoxFeatureFlags.tsx @@ -75,6 +75,7 @@ const messages = [ export default function ChatBoxFeatureFlags() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/basics/chatbox/demos/chat-box-feature-flags/client.ts b/docs/data/chat/basics/chatbox/demos/chat-box-feature-flags/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/chatbox/demos/chat-box-feature-flags/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/chatbox/demos/chat-box-feature-flags/index.ts b/docs/data/chat/basics/chatbox/demos/chat-box-feature-flags/index.ts new file mode 100644 index 0000000000000..2708f8b174808 --- /dev/null +++ b/docs/data/chat/basics/chatbox/demos/chat-box-feature-flags/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatBoxFeatureFlags from './ChatBoxFeatureFlags'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatBoxFeatureFlags, { ClientProvider }); diff --git a/docs/data/chat/basics/chatbox/ChatBoxPlayground.tsx b/docs/data/chat/basics/chatbox/demos/chat-box-playground/ChatBoxPlayground.tsx similarity index 97% rename from docs/data/chat/basics/chatbox/ChatBoxPlayground.tsx rename to docs/data/chat/basics/chatbox/demos/chat-box-playground/ChatBoxPlayground.tsx index 7ea4b56a81a91..be7c5b45dd303 100644 --- a/docs/data/chat/basics/chatbox/ChatBoxPlayground.tsx +++ b/docs/data/chat/basics/chatbox/demos/chat-box-playground/ChatBoxPlayground.tsx @@ -8,10 +8,8 @@ import { DividerLabel, SwitchControl, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; import { conversations, initialThreads, @@ -72,6 +70,7 @@ export interface ChatBoxPlaygroundProps { } export default function ChatBoxPlayground(props: ChatBoxPlaygroundProps = {}) { + // @focus-start @padding 1 const { hideHeader, defaults: defaultsOverride, defaultControlsCollapsed } = props; const defaults = React.useMemo( () => ({ ...DEFAULTS, ...defaultsOverride }), @@ -317,4 +316,5 @@ ${featuresLines} } /> ); + // @focus-end } diff --git a/docs/data/chat/basics/chatbox/demos/chat-box-playground/client.ts b/docs/data/chat/basics/chatbox/demos/chat-box-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/chatbox/demos/chat-box-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/chatbox/demos/chat-box-playground/index.ts b/docs/data/chat/basics/chatbox/demos/chat-box-playground/index.ts new file mode 100644 index 0000000000000..4fc54a2143636 --- /dev/null +++ b/docs/data/chat/basics/chatbox/demos/chat-box-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatBoxPlayground from './ChatBoxPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatBoxPlayground, { ClientProvider }); diff --git a/docs/data/chat/basics/composer/ChatComposerPlayground.js b/docs/data/chat/basics/composer/ChatComposerPlayground.js deleted file mode 100644 index 4401d5f5c9610..0000000000000 --- a/docs/data/chat/basics/composer/ChatComposerPlayground.js +++ /dev/null @@ -1,260 +0,0 @@ -import * as React from 'react'; -import AttachIcon from '@mui/icons-material/AttachFile'; -import SendIcon from '@mui/icons-material/Send'; -import Box from '@mui/material/Box'; -import { - ChatComposer, - ChatComposerAttachButton, - ChatComposerAttachmentList, - ChatComposerHelperText, - ChatComposerSendButton, - ChatComposerTextArea, - ChatComposerToolbar, -} from '@mui/x-chat'; - -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { - ScopedChat, - ChatChrome, -} from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { emptyConversation } from 'docs/src/modules/components/chat-playground/sharedFixtures'; -import { - ChoiceControl, - DividerLabel, - NumberControl, - SwitchControl, - TextControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; - -const DEFAULTS = { - variant: 'default', - disabled: false, - attachments: true, - showHelperText: true, - maxFileCount: 0, - maxFileSizeMB: 0, - acceptedMimeTypes: 'image/*,application/pdf', - placeholder: 'Ask anything…', -}; - -const CLASS_DEFS = [ - { name: 'root', description: 'Outermost form element.' }, - { - name: 'disabled', - selector: '.MuiChatComposer-disabled', - description: 'Applied to the root when disabled.', - }, - { - name: 'variantCompact', - selector: '.MuiChatComposer-variantCompact', - description: 'Applied to the root when variant="compact".', - }, - { - name: 'textArea', - selector: '.MuiChatComposer-textArea', - description: 'Applied to the text area input.', - }, - { - name: 'sendButton', - selector: '.MuiChatComposer-sendButton', - description: 'Applied to the send button.', - }, - { - name: 'attachButton', - selector: '.MuiChatComposer-attachButton', - description: 'Applied to the attach button.', - }, - { - name: 'toolbar', - selector: '.MuiChatComposer-toolbar', - description: 'Applied to the toolbar row.', - }, - { - name: 'attachmentList', - selector: '.MuiChatComposer-attachmentList', - description: 'Applied to the attachment list above the textarea.', - }, - { - name: 'helperText', - selector: '.MuiChatComposer-helperText', - description: 'Applied to the helper text below the textarea.', - }, -]; - -export default function ChatComposerPlayground() { - const [variant, setVariant] = React.useState(DEFAULTS.variant); - const [disabled, setDisabled] = React.useState(DEFAULTS.disabled); - const [attachments, setAttachments] = React.useState(DEFAULTS.attachments); - const [showHelperText, setShowHelperText] = React.useState( - DEFAULTS.showHelperText, - ); - const [maxFileCount, setMaxFileCount] = React.useState(DEFAULTS.maxFileCount); - const [maxFileSizeMB, setMaxFileSizeMB] = React.useState(DEFAULTS.maxFileSizeMB); - const [acceptedMimeTypes, setAcceptedMimeTypes] = React.useState( - DEFAULTS.acceptedMimeTypes, - ); - const [placeholder, setPlaceholder] = React.useState(DEFAULTS.placeholder); - const classesCustomizations = useCustomizations(CLASS_DEFS); - - const handleReset = React.useCallback(() => { - setVariant(DEFAULTS.variant); - setDisabled(DEFAULTS.disabled); - setAttachments(DEFAULTS.attachments); - setShowHelperText(DEFAULTS.showHelperText); - setMaxFileCount(DEFAULTS.maxFileCount); - setMaxFileSizeMB(DEFAULTS.maxFileSizeMB); - setAcceptedMimeTypes(DEFAULTS.acceptedMimeTypes); - setPlaceholder(DEFAULTS.placeholder); - }, []); - - const attachmentConfig = React.useMemo(() => { - if (!attachments) { - return false; - } - const config = {}; - const types = acceptedMimeTypes - .split(',') - .map((s) => s.trim()) - .filter(Boolean); - if (types.length > 0) { - config.acceptedMimeTypes = types; - } - if (maxFileCount > 0) { - config.maxFileCount = maxFileCount; - } - if (maxFileSizeMB > 0) { - config.maxFileSize = maxFileSizeMB * 1024 * 1024; - } - return Object.keys(config).length === 0 ? true : config; - }, [attachments, acceptedMimeTypes, maxFileCount, maxFileSizeMB]); - - const composerSx = classesCustomizations.toClassesSx(); - return ( - - props - - - features.attachments - - - (value === 0 ? '∞' : value.toString())} - helperText="0 disables the limit." - onChange={setMaxFileCount} - /> - (value === 0 ? 'unlimited' : `${value}MB`)} - helperText="0 disables the limit." - onChange={setMaxFileSizeMB} - /> - composition (children) - - - - } - preview={ - - - - {variant === 'default' ? ( - - {attachments ? : null} - - {showHelperText ? ( - - Press Enter to send, Shift+Enter for a new line. - - ) : null} - - {attachments ? ( - - - - ) : null} - - - - - - ) : ( - - {attachments ? : null} - {attachments ? ( - - - - ) : null} - - - - - - )} - - - - } - /> - ); -} diff --git a/docs/data/chat/basics/composer/ComposerControlledStandalone.js b/docs/data/chat/basics/composer/ComposerControlledStandalone.js deleted file mode 100644 index 3e7b7ed839129..0000000000000 --- a/docs/data/chat/basics/composer/ComposerControlledStandalone.js +++ /dev/null @@ -1,21 +0,0 @@ -'use client'; -import * as React from 'react'; -import Typography from '@mui/material/Typography'; -import { ComposerDemoShell } from './ComposerDemoShell'; - -export default function ComposerControlledStandalone() { - const [value, setValue] = React.useState(''); - - return ( - - Composer value: {value ? `"${value}"` : '(empty)'} - - } - composerValue={value} - onComposerValueChange={setValue} - helperText="The current draft value is controlled outside the composer." - /> - ); -} diff --git a/docs/data/chat/basics/composer/ComposerControlledStandalone.tsx.preview b/docs/data/chat/basics/composer/ComposerControlledStandalone.tsx.preview deleted file mode 100644 index 40681f8a24e58..0000000000000 --- a/docs/data/chat/basics/composer/ComposerControlledStandalone.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - - Composer value: {value ? `"${value}"` : '(empty)'} - - } - composerValue={value} - onComposerValueChange={setValue} - helperText="The current draft value is controlled outside the composer." -/> \ No newline at end of file diff --git a/docs/data/chat/basics/composer/ComposerCustomPlaceholderStandalone.js b/docs/data/chat/basics/composer/ComposerCustomPlaceholderStandalone.js deleted file mode 100644 index ac3fc351611b8..0000000000000 --- a/docs/data/chat/basics/composer/ComposerCustomPlaceholderStandalone.js +++ /dev/null @@ -1,12 +0,0 @@ -'use client'; -import * as React from 'react'; -import { ComposerDemoShell } from './ComposerDemoShell'; - -export default function ComposerCustomPlaceholderStandalone() { - return ( - - ); -} diff --git a/docs/data/chat/basics/composer/ComposerCustomPlaceholderStandalone.tsx b/docs/data/chat/basics/composer/ComposerCustomPlaceholderStandalone.tsx deleted file mode 100644 index ac3fc351611b8..0000000000000 --- a/docs/data/chat/basics/composer/ComposerCustomPlaceholderStandalone.tsx +++ /dev/null @@ -1,12 +0,0 @@ -'use client'; -import * as React from 'react'; -import { ComposerDemoShell } from './ComposerDemoShell'; - -export default function ComposerCustomPlaceholderStandalone() { - return ( - - ); -} diff --git a/docs/data/chat/basics/composer/ComposerCustomPlaceholderStandalone.tsx.preview b/docs/data/chat/basics/composer/ComposerCustomPlaceholderStandalone.tsx.preview deleted file mode 100644 index ab275c31510e7..0000000000000 --- a/docs/data/chat/basics/composer/ComposerCustomPlaceholderStandalone.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/chat/basics/composer/ComposerDisabledStandalone.js b/docs/data/chat/basics/composer/ComposerDisabledStandalone.js deleted file mode 100644 index 23a64a3cdcf94..0000000000000 --- a/docs/data/chat/basics/composer/ComposerDisabledStandalone.js +++ /dev/null @@ -1,12 +0,0 @@ -'use client'; -import * as React from 'react'; -import { ComposerDemoShell } from './ComposerDemoShell'; - -export default function ComposerDisabledStandalone() { - return ( - - ); -} diff --git a/docs/data/chat/basics/composer/ComposerDisabledStandalone.tsx b/docs/data/chat/basics/composer/ComposerDisabledStandalone.tsx deleted file mode 100644 index 23a64a3cdcf94..0000000000000 --- a/docs/data/chat/basics/composer/ComposerDisabledStandalone.tsx +++ /dev/null @@ -1,12 +0,0 @@ -'use client'; -import * as React from 'react'; -import { ComposerDemoShell } from './ComposerDemoShell'; - -export default function ComposerDisabledStandalone() { - return ( - - ); -} diff --git a/docs/data/chat/basics/composer/ComposerDisabledStandalone.tsx.preview b/docs/data/chat/basics/composer/ComposerDisabledStandalone.tsx.preview deleted file mode 100644 index 71ab68ff651fe..0000000000000 --- a/docs/data/chat/basics/composer/ComposerDisabledStandalone.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/chat/basics/composer/ComposerHelperTextStandalone.js b/docs/data/chat/basics/composer/ComposerHelperTextStandalone.js deleted file mode 100644 index cf627e26f85f1..0000000000000 --- a/docs/data/chat/basics/composer/ComposerHelperTextStandalone.js +++ /dev/null @@ -1,7 +0,0 @@ -'use client'; -import * as React from 'react'; -import { ComposerDemoShell } from './ComposerDemoShell'; - -export default function ComposerHelperTextStandalone() { - return ; -} diff --git a/docs/data/chat/basics/composer/ComposerHelperTextStandalone.tsx b/docs/data/chat/basics/composer/ComposerHelperTextStandalone.tsx deleted file mode 100644 index cf627e26f85f1..0000000000000 --- a/docs/data/chat/basics/composer/ComposerHelperTextStandalone.tsx +++ /dev/null @@ -1,7 +0,0 @@ -'use client'; -import * as React from 'react'; -import { ComposerDemoShell } from './ComposerDemoShell'; - -export default function ComposerHelperTextStandalone() { - return ; -} diff --git a/docs/data/chat/basics/composer/ComposerHelperTextStandalone.tsx.preview b/docs/data/chat/basics/composer/ComposerHelperTextStandalone.tsx.preview deleted file mode 100644 index df460ee651804..0000000000000 --- a/docs/data/chat/basics/composer/ComposerHelperTextStandalone.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/chat/basics/composer/ComposerHiddenAttachButtonStandalone.js b/docs/data/chat/basics/composer/ComposerHiddenAttachButtonStandalone.js deleted file mode 100644 index 95c666ffae458..0000000000000 --- a/docs/data/chat/basics/composer/ComposerHiddenAttachButtonStandalone.js +++ /dev/null @@ -1,12 +0,0 @@ -'use client'; -import * as React from 'react'; -import { ComposerDemoShell } from './ComposerDemoShell'; - -export default function ComposerHiddenAttachButtonStandalone() { - return ( - - ); -} diff --git a/docs/data/chat/basics/composer/ComposerHiddenAttachButtonStandalone.tsx b/docs/data/chat/basics/composer/ComposerHiddenAttachButtonStandalone.tsx deleted file mode 100644 index 95c666ffae458..0000000000000 --- a/docs/data/chat/basics/composer/ComposerHiddenAttachButtonStandalone.tsx +++ /dev/null @@ -1,12 +0,0 @@ -'use client'; -import * as React from 'react'; -import { ComposerDemoShell } from './ComposerDemoShell'; - -export default function ComposerHiddenAttachButtonStandalone() { - return ( - - ); -} diff --git a/docs/data/chat/basics/composer/ComposerHiddenAttachButtonStandalone.tsx.preview b/docs/data/chat/basics/composer/ComposerHiddenAttachButtonStandalone.tsx.preview deleted file mode 100644 index 94937dc4d2d78..0000000000000 --- a/docs/data/chat/basics/composer/ComposerHiddenAttachButtonStandalone.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/chat/basics/composer/ComposerHookStateStandalone.js b/docs/data/chat/basics/composer/ComposerHookStateStandalone.js deleted file mode 100644 index aaf098ae917ad..0000000000000 --- a/docs/data/chat/basics/composer/ComposerHookStateStandalone.js +++ /dev/null @@ -1,40 +0,0 @@ -'use client'; -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; -import { useChatComposer } from '@mui/x-chat/headless'; -import { ComposerDemoShell } from './ComposerDemoShell'; - -function ComposerInfo() { - const composer = useChatComposer(); - return ( - - - Current value: {composer.value ? `"${composer.value}"` : '(empty)'} - - - Attachments: {composer.attachments.length} - - - Submitting: {composer.isSubmitting ? 'Yes' : 'No'} - - - - ); -} - -export default function ComposerHookStateStandalone() { - return ( - } - helperText="Type, attach a file, or send to watch the hook state update." - /> - ); -} diff --git a/docs/data/chat/basics/composer/ComposerHookStateStandalone.tsx.preview b/docs/data/chat/basics/composer/ComposerHookStateStandalone.tsx.preview deleted file mode 100644 index ccd3f61de7246..0000000000000 --- a/docs/data/chat/basics/composer/ComposerHookStateStandalone.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ -} - helperText="Type, attach a file, or send to watch the hook state update." -/> \ No newline at end of file diff --git a/docs/data/chat/basics/composer/ComposerVariantsStandalone.js b/docs/data/chat/basics/composer/ComposerVariantsStandalone.js deleted file mode 100644 index 61a1d4e871d9d..0000000000000 --- a/docs/data/chat/basics/composer/ComposerVariantsStandalone.js +++ /dev/null @@ -1,68 +0,0 @@ -'use client'; -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import { - ChatComposer, - ChatComposerAttachButton, - ChatComposerAttachmentList, - ChatComposerSendButton, - ChatComposerTextArea, - ChatComposerToolbar, -} from '@mui/x-chat'; -import { ChatProvider } from '@mui/x-chat/headless'; -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { minimalConversation } from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter({ - respond: (text) => `Draft submitted: "${text}".`, -}); - -export default function ComposerVariantsStandalone() { - return ( - - - - variant="default" - - - - - - Attach - Send - - - - - - - variant="compact" - - - - - Attach - - Send - - - - - ); -} diff --git a/docs/data/chat/basics/composer/composer.md b/docs/data/chat/basics/composer/composer.md index 9c7f638b72e16..266be257dc066 100644 --- a/docs/data/chat/basics/composer/composer.md +++ b/docs/data/chat/basics/composer/composer.md @@ -22,7 +22,7 @@ The demos on this page render only the composer plus the provider context it dep Try the `ChatComposer` props live: toggle variant, attachments, helper text, and placeholder: -{{"demo": "ChatComposerPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-composer-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Import @@ -64,7 +64,7 @@ ChatComposer ←
element, border-top divider The variant can also come from the surrounding chat context; an explicit prop wins over the context value. -{{"demo": "ComposerVariantsStandalone.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://./demos/composer-variants-standalone/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Text area @@ -77,7 +77,7 @@ Use `maxRows` to cap the auto-grow: the textarea starts at one row and grows up Customize the placeholder directly on `ChatComposerTextArea`: -{{"demo": "ComposerCustomPlaceholderStandalone.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://./demos/composer-custom-placeholder-standalone/index.ts", "bg": "inline", "collapseToEmpty": true}} ### IME composition @@ -100,7 +100,7 @@ Selected files are queued as draft attachments and previewed in the composer are Omit `ChatComposerAttachButton` from the toolbar when attachments are not part of the surface: -{{"demo": "ComposerHiddenAttachButtonStandalone.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://./demos/composer-hidden-attach-button-standalone/index.ts", "bg": "inline", "collapseToEmpty": true}} Files that exceed the configured limits (`maxFileCount`, `maxFileSize`, `acceptedMimeTypes`) are not queued and there is no built-in rejection UI — handle the `onAttachmentReject` callback to surface feedback. @@ -111,20 +111,20 @@ See [Attachments](/x/react-chat/behavior/attachments/) for details on accepted M A helper text line appears below the composer. Use it for legal disclaimers, character counts, or contextual hints. -{{"demo": "ComposerHelperTextStandalone.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://./demos/composer-helper-text-standalone/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Controlled composer value Control the composer value externally through `ChatProvider` state. The demo below mirrors the current composer value above the standalone composer: -{{"demo": "ComposerControlledStandalone.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://./demos/composer-controlled-standalone/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Accessing composer state with a hook For deeper control, the `useChatComposer()` hook provides direct access to the composer state: -{{"demo": "ComposerHookStateStandalone.js", "defaultCodeOpen": true, "bg": "inline"}} +{{"component": "file://./demos/composer-hook-state-standalone/index.ts", "bg": "inline", "initialExpanded": true}} The hook returns: @@ -144,7 +144,7 @@ The hook returns: Pass `disabled` to `ChatComposer` to prevent all interaction. When disabled, the text area is read-only and the send button is inert. -{{"demo": "ComposerDisabledStandalone.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://./demos/composer-disabled-standalone/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Accessibility diff --git a/docs/data/chat/basics/composer/ChatComposerPlayground.tsx b/docs/data/chat/basics/composer/demos/chat-composer-playground/ChatComposerPlayground.tsx similarity index 97% rename from docs/data/chat/basics/composer/ChatComposerPlayground.tsx rename to docs/data/chat/basics/composer/demos/chat-composer-playground/ChatComposerPlayground.tsx index cc01f923e201d..424c3e53b6620 100644 --- a/docs/data/chat/basics/composer/ChatComposerPlayground.tsx +++ b/docs/data/chat/basics/composer/demos/chat-composer-playground/ChatComposerPlayground.tsx @@ -25,10 +25,8 @@ import { SwitchControl, TextControl, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; const DEFAULTS = { variant: 'default' as ChatVariant, @@ -97,6 +95,7 @@ const CLASS_DEFS: ReadonlyArray> = [ ]; export default function ChatComposerPlayground() { + // @focus-start @padding 1 const [variant, setVariant] = React.useState(DEFAULTS.variant); const [disabled, setDisabled] = React.useState(DEFAULTS.disabled); const [attachments, setAttachments] = React.useState(DEFAULTS.attachments); @@ -271,4 +270,5 @@ export default function ChatComposerPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/basics/composer/demos/chat-composer-playground/client.ts b/docs/data/chat/basics/composer/demos/chat-composer-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/composer/demos/chat-composer-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/composer/demos/chat-composer-playground/index.ts b/docs/data/chat/basics/composer/demos/chat-composer-playground/index.ts new file mode 100644 index 0000000000000..07f7c25a2a3f4 --- /dev/null +++ b/docs/data/chat/basics/composer/demos/chat-composer-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatComposerPlayground from './ChatComposerPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatComposerPlayground, { ClientProvider }); diff --git a/docs/data/chat/basics/composer/ComposerControlledStandalone.tsx b/docs/data/chat/basics/composer/demos/composer-controlled-standalone/ComposerControlledStandalone.tsx similarity index 84% rename from docs/data/chat/basics/composer/ComposerControlledStandalone.tsx rename to docs/data/chat/basics/composer/demos/composer-controlled-standalone/ComposerControlledStandalone.tsx index 3e7b7ed839129..15ecb2762cb21 100644 --- a/docs/data/chat/basics/composer/ComposerControlledStandalone.tsx +++ b/docs/data/chat/basics/composer/demos/composer-controlled-standalone/ComposerControlledStandalone.tsx @@ -1,9 +1,10 @@ 'use client'; import * as React from 'react'; import Typography from '@mui/material/Typography'; -import { ComposerDemoShell } from './ComposerDemoShell'; +import { ComposerDemoShell } from '../../ComposerDemoShell'; export default function ComposerControlledStandalone() { + // @focus-start @padding 1 const [value, setValue] = React.useState(''); return ( @@ -18,4 +19,5 @@ export default function ComposerControlledStandalone() { helperText="The current draft value is controlled outside the composer." /> ); + // @focus-end } diff --git a/docs/data/chat/basics/composer/demos/composer-controlled-standalone/client.ts b/docs/data/chat/basics/composer/demos/composer-controlled-standalone/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/composer/demos/composer-controlled-standalone/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/composer/demos/composer-controlled-standalone/index.ts b/docs/data/chat/basics/composer/demos/composer-controlled-standalone/index.ts new file mode 100644 index 0000000000000..858aa77e6441b --- /dev/null +++ b/docs/data/chat/basics/composer/demos/composer-controlled-standalone/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ComposerControlledStandalone from './ComposerControlledStandalone'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ComposerControlledStandalone, { ClientProvider }); diff --git a/docs/data/chat/basics/composer/demos/composer-custom-placeholder-standalone/ComposerCustomPlaceholderStandalone.tsx b/docs/data/chat/basics/composer/demos/composer-custom-placeholder-standalone/ComposerCustomPlaceholderStandalone.tsx new file mode 100644 index 0000000000000..0616802af4268 --- /dev/null +++ b/docs/data/chat/basics/composer/demos/composer-custom-placeholder-standalone/ComposerCustomPlaceholderStandalone.tsx @@ -0,0 +1,14 @@ +'use client'; +import * as React from 'react'; +import { ComposerDemoShell } from '../../ComposerDemoShell'; + +export default function ComposerCustomPlaceholderStandalone() { + return ( + // @focus-start @padding 2 + + // @focus-end + ); +} diff --git a/docs/data/chat/basics/composer/demos/composer-custom-placeholder-standalone/client.ts b/docs/data/chat/basics/composer/demos/composer-custom-placeholder-standalone/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/composer/demos/composer-custom-placeholder-standalone/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/composer/demos/composer-custom-placeholder-standalone/index.ts b/docs/data/chat/basics/composer/demos/composer-custom-placeholder-standalone/index.ts new file mode 100644 index 0000000000000..a0336f4dace0b --- /dev/null +++ b/docs/data/chat/basics/composer/demos/composer-custom-placeholder-standalone/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ComposerCustomPlaceholderStandalone from './ComposerCustomPlaceholderStandalone'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ComposerCustomPlaceholderStandalone, { ClientProvider }); diff --git a/docs/data/chat/basics/composer/demos/composer-disabled-standalone/ComposerDisabledStandalone.tsx b/docs/data/chat/basics/composer/demos/composer-disabled-standalone/ComposerDisabledStandalone.tsx new file mode 100644 index 0000000000000..0e93b457eaa89 --- /dev/null +++ b/docs/data/chat/basics/composer/demos/composer-disabled-standalone/ComposerDisabledStandalone.tsx @@ -0,0 +1,14 @@ +'use client'; +import * as React from 'react'; +import { ComposerDemoShell } from '../../ComposerDemoShell'; + +export default function ComposerDisabledStandalone() { + return ( + // @focus-start @padding 2 + + // @focus-end + ); +} diff --git a/docs/data/chat/basics/composer/demos/composer-disabled-standalone/client.ts b/docs/data/chat/basics/composer/demos/composer-disabled-standalone/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/composer/demos/composer-disabled-standalone/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/composer/demos/composer-disabled-standalone/index.ts b/docs/data/chat/basics/composer/demos/composer-disabled-standalone/index.ts new file mode 100644 index 0000000000000..1a93de35565a7 --- /dev/null +++ b/docs/data/chat/basics/composer/demos/composer-disabled-standalone/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ComposerDisabledStandalone from './ComposerDisabledStandalone'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ComposerDisabledStandalone, { ClientProvider }); diff --git a/docs/data/chat/basics/composer/demos/composer-helper-text-standalone/ComposerHelperTextStandalone.tsx b/docs/data/chat/basics/composer/demos/composer-helper-text-standalone/ComposerHelperTextStandalone.tsx new file mode 100644 index 0000000000000..440a57d1f369b --- /dev/null +++ b/docs/data/chat/basics/composer/demos/composer-helper-text-standalone/ComposerHelperTextStandalone.tsx @@ -0,0 +1,10 @@ +'use client'; +import * as React from 'react'; +import { ComposerDemoShell } from '../../ComposerDemoShell'; + +export default function ComposerHelperTextStandalone() { + return ( + // @focus @padding 2 + + ); +} diff --git a/docs/data/chat/basics/composer/demos/composer-helper-text-standalone/client.ts b/docs/data/chat/basics/composer/demos/composer-helper-text-standalone/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/composer/demos/composer-helper-text-standalone/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/composer/demos/composer-helper-text-standalone/index.ts b/docs/data/chat/basics/composer/demos/composer-helper-text-standalone/index.ts new file mode 100644 index 0000000000000..345b2bf7f93fa --- /dev/null +++ b/docs/data/chat/basics/composer/demos/composer-helper-text-standalone/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ComposerHelperTextStandalone from './ComposerHelperTextStandalone'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ComposerHelperTextStandalone, { ClientProvider }); diff --git a/docs/data/chat/basics/composer/demos/composer-hidden-attach-button-standalone/ComposerHiddenAttachButtonStandalone.tsx b/docs/data/chat/basics/composer/demos/composer-hidden-attach-button-standalone/ComposerHiddenAttachButtonStandalone.tsx new file mode 100644 index 0000000000000..0722db3ca2e97 --- /dev/null +++ b/docs/data/chat/basics/composer/demos/composer-hidden-attach-button-standalone/ComposerHiddenAttachButtonStandalone.tsx @@ -0,0 +1,14 @@ +'use client'; +import * as React from 'react'; +import { ComposerDemoShell } from '../../ComposerDemoShell'; + +export default function ComposerHiddenAttachButtonStandalone() { + return ( + // @focus-start @padding 2 + + // @focus-end + ); +} diff --git a/docs/data/chat/basics/composer/demos/composer-hidden-attach-button-standalone/client.ts b/docs/data/chat/basics/composer/demos/composer-hidden-attach-button-standalone/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/composer/demos/composer-hidden-attach-button-standalone/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/composer/demos/composer-hidden-attach-button-standalone/index.ts b/docs/data/chat/basics/composer/demos/composer-hidden-attach-button-standalone/index.ts new file mode 100644 index 0000000000000..53de8b4c539ae --- /dev/null +++ b/docs/data/chat/basics/composer/demos/composer-hidden-attach-button-standalone/index.ts @@ -0,0 +1,8 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ComposerHiddenAttachButtonStandalone from './ComposerHiddenAttachButtonStandalone'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ComposerHiddenAttachButtonStandalone, { + ClientProvider, +}); diff --git a/docs/data/chat/basics/composer/ComposerHookStateStandalone.tsx b/docs/data/chat/basics/composer/demos/composer-hook-state-standalone/ComposerHookStateStandalone.tsx similarity index 91% rename from docs/data/chat/basics/composer/ComposerHookStateStandalone.tsx rename to docs/data/chat/basics/composer/demos/composer-hook-state-standalone/ComposerHookStateStandalone.tsx index aaf098ae917ad..f47829aed50ea 100644 --- a/docs/data/chat/basics/composer/ComposerHookStateStandalone.tsx +++ b/docs/data/chat/basics/composer/demos/composer-hook-state-standalone/ComposerHookStateStandalone.tsx @@ -4,7 +4,7 @@ import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; import { useChatComposer } from '@mui/x-chat/headless'; -import { ComposerDemoShell } from './ComposerDemoShell'; +import { ComposerDemoShell } from '../../ComposerDemoShell'; function ComposerInfo() { const composer = useChatComposer(); @@ -32,9 +32,11 @@ function ComposerInfo() { export default function ComposerHookStateStandalone() { return ( + // @focus-start @padding 2 } helperText="Type, attach a file, or send to watch the hook state update." /> + // @focus-end ); } diff --git a/docs/data/chat/basics/composer/demos/composer-hook-state-standalone/client.ts b/docs/data/chat/basics/composer/demos/composer-hook-state-standalone/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/composer/demos/composer-hook-state-standalone/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/composer/demos/composer-hook-state-standalone/index.ts b/docs/data/chat/basics/composer/demos/composer-hook-state-standalone/index.ts new file mode 100644 index 0000000000000..78238c32830b4 --- /dev/null +++ b/docs/data/chat/basics/composer/demos/composer-hook-state-standalone/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ComposerHookStateStandalone from './ComposerHookStateStandalone'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ComposerHookStateStandalone, { ClientProvider }); diff --git a/docs/data/chat/basics/composer/ComposerVariantsStandalone.tsx b/docs/data/chat/basics/composer/demos/composer-variants-standalone/ComposerVariantsStandalone.tsx similarity index 97% rename from docs/data/chat/basics/composer/ComposerVariantsStandalone.tsx rename to docs/data/chat/basics/composer/demos/composer-variants-standalone/ComposerVariantsStandalone.tsx index 61a1d4e871d9d..4b3339a5b8f56 100644 --- a/docs/data/chat/basics/composer/ComposerVariantsStandalone.tsx +++ b/docs/data/chat/basics/composer/demos/composer-variants-standalone/ComposerVariantsStandalone.tsx @@ -21,6 +21,7 @@ const adapter = createEchoAdapter({ export default function ComposerVariantsStandalone() { return ( + {/* @focus-start */} variant="default" @@ -63,6 +64,7 @@ export default function ComposerVariantsStandalone() { + {/* @focus-end */} ); } diff --git a/docs/data/chat/basics/composer/demos/composer-variants-standalone/client.ts b/docs/data/chat/basics/composer/demos/composer-variants-standalone/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/composer/demos/composer-variants-standalone/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/composer/demos/composer-variants-standalone/index.ts b/docs/data/chat/basics/composer/demos/composer-variants-standalone/index.ts new file mode 100644 index 0000000000000..4c07a1ef6c831 --- /dev/null +++ b/docs/data/chat/basics/composer/demos/composer-variants-standalone/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ComposerVariantsStandalone from './ComposerVariantsStandalone'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ComposerVariantsStandalone, { ClientProvider }); diff --git a/docs/data/chat/basics/conversation/ChatConversationPlayground.js b/docs/data/chat/basics/conversation/ChatConversationPlayground.js deleted file mode 100644 index 3786f35d11faf..0000000000000 --- a/docs/data/chat/basics/conversation/ChatConversationPlayground.js +++ /dev/null @@ -1,161 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { - ChatComposer, - ChatConversation, - ChatConversationHeader, - ChatConversationHeaderActions, - ChatConversationHeaderInfo, - ChatConversationSubtitle, - ChatConversationTitle, - ChatMessageList, -} from '@mui/x-chat'; - -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { - ChatChrome, - ScopedChat, -} from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { - directoryConversations, - longThreadMessages, -} from 'docs/src/modules/components/chat-playground/sharedFixtures'; -import { MessageBubble } from 'docs/src/modules/components/chat-playground/MessageBubble'; -import { - ChoiceControl, - DividerLabel, - SwitchControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; - -const DEFAULTS = { - variant: 'default', - density: 'standard', - showHeader: true, - showComposer: true, -}; - -const CLASS_DEFS = [ - { name: 'root', description: 'The outermost element of ChatConversation.' }, - { - name: 'header', - selector: '.MuiChatConversation-header', - description: 'The conversation header bar.', - }, - { - name: 'headerInfo', - selector: '.MuiChatConversation-headerInfo', - description: 'The title/subtitle group in the header.', - }, - { - name: 'headerActions', - selector: '.MuiChatConversation-headerActions', - description: 'The actions area on the right of the header.', - }, - { - name: 'title', - selector: '.MuiChatConversation-title', - description: 'The conversation title element.', - }, - { - name: 'subtitle', - selector: '.MuiChatConversation-subtitle', - description: 'The conversation subtitle element.', - }, -]; - -export default function ChatConversationPlayground() { - const [variant, setVariant] = React.useState(DEFAULTS.variant); - const [density, setDensity] = React.useState(DEFAULTS.density); - const [showHeader, setShowHeader] = React.useState(DEFAULTS.showHeader); - const [showComposer, setShowComposer] = React.useState(DEFAULTS.showComposer); - const classesCustomizations = useCustomizations(CLASS_DEFS); - - const handleReset = React.useCallback(() => { - setVariant(DEFAULTS.variant); - setDensity(DEFAULTS.density); - setShowHeader(DEFAULTS.showHeader); - setShowComposer(DEFAULTS.showComposer); - }, []); - - const conversationSx = classesCustomizations.toClassesSx(); - - return ( - - Chrome provider - - - Composition - - - - } - preview={ - - - - - {showHeader ? ( - - - - - - - - ) : null} - m.id)} - renderItem={({ id }) => } - /> - {showComposer ? : null} - - - - - } - /> - ); -} diff --git a/docs/data/chat/basics/conversation/ConversationBasicStandalone.js b/docs/data/chat/basics/conversation/ConversationBasicStandalone.js deleted file mode 100644 index 4133f636112b6..0000000000000 --- a/docs/data/chat/basics/conversation/ConversationBasicStandalone.js +++ /dev/null @@ -1,67 +0,0 @@ -'use client'; -import * as React from 'react'; -import MoreIcon from '@mui/icons-material/MoreVert'; -import Box from '@mui/material/Box'; -import IconButton from '@mui/material/IconButton'; -import { - ChatComposer, - ChatConversation, - ChatConversationHeader, - ChatConversationHeaderActions, - ChatConversationHeaderInfo, - ChatConversationSubtitle, - ChatConversationTitle, - ChatMessageGroup, - ChatMessageList, -} from '@mui/x-chat'; -import { ChatProvider } from '@mui/x-chat/headless'; -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - minimalConversation, - minimalMessages, -} from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter({ - respond: (text) => - `Received: "${text}". This thread is rendered by a single ChatConversation.`, -}); - -export default function ConversationBasicStandalone() { - const renderItem = React.useCallback( - (params) => , - [], - ); - - return ( - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/chat/basics/conversation/conversation.md b/docs/data/chat/basics/conversation/conversation.md index 45dc2943f9515..e1027a2f42896 100644 --- a/docs/data/chat/basics/conversation/conversation.md +++ b/docs/data/chat/basics/conversation/conversation.md @@ -58,13 +58,13 @@ See [Conversation header](/x/react-chat/multi-conversation/conversation-header/) The demo below wires `ChatConversation` to a `ChatProvider` with a demo adapter. The title and subtitle come from the active conversation; send a message to see the list scroll and the echo reply arrive. -{{"demo": "ConversationBasicStandalone.js", "bg": "inline", "defaultCodeOpen": true}} +{{"component": "file://./demos/conversation-basic-standalone/index.ts", "bg": "inline", "initialExpanded": true}} ## Interactive playground The demo below lets you toggle whether the header and composer are rendered, and switch the surrounding variant and density: -{{"demo": "ChatConversationPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-conversation-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} :::info The conversation surface is the chat's main scroll region: the message list manages roving focus and `Page Up`/`Page Down` scrolling, and the composer is reachable with `Tab`. diff --git a/docs/data/chat/basics/conversation/ChatConversationPlayground.tsx b/docs/data/chat/basics/conversation/demos/chat-conversation-playground/ChatConversationPlayground.tsx similarity index 95% rename from docs/data/chat/basics/conversation/ChatConversationPlayground.tsx rename to docs/data/chat/basics/conversation/demos/chat-conversation-playground/ChatConversationPlayground.tsx index 5ca7956eedee1..c91208137edd9 100644 --- a/docs/data/chat/basics/conversation/ChatConversationPlayground.tsx +++ b/docs/data/chat/basics/conversation/demos/chat-conversation-playground/ChatConversationPlayground.tsx @@ -26,10 +26,8 @@ import { DividerLabel, SwitchControl, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; const DEFAULTS = { variant: 'default' as ChatVariant, @@ -71,6 +69,7 @@ const CLASS_DEFS: ReadonlyArray> = [ ]; export default function ChatConversationPlayground() { + // @focus-start @padding 1 const [variant, setVariant] = React.useState(DEFAULTS.variant); const [density, setDensity] = React.useState(DEFAULTS.density); const [showHeader, setShowHeader] = React.useState(DEFAULTS.showHeader); @@ -164,4 +163,5 @@ export default function ChatConversationPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/basics/conversation/demos/chat-conversation-playground/client.ts b/docs/data/chat/basics/conversation/demos/chat-conversation-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/conversation/demos/chat-conversation-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/conversation/demos/chat-conversation-playground/index.ts b/docs/data/chat/basics/conversation/demos/chat-conversation-playground/index.ts new file mode 100644 index 0000000000000..59890723c476b --- /dev/null +++ b/docs/data/chat/basics/conversation/demos/chat-conversation-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatConversationPlayground from './ChatConversationPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatConversationPlayground, { ClientProvider }); diff --git a/docs/data/chat/basics/conversation/ConversationBasicStandalone.tsx b/docs/data/chat/basics/conversation/demos/conversation-basic-standalone/ConversationBasicStandalone.tsx similarity index 97% rename from docs/data/chat/basics/conversation/ConversationBasicStandalone.tsx rename to docs/data/chat/basics/conversation/demos/conversation-basic-standalone/ConversationBasicStandalone.tsx index f0be0607e7a34..7288d0e8d503e 100644 --- a/docs/data/chat/basics/conversation/ConversationBasicStandalone.tsx +++ b/docs/data/chat/basics/conversation/demos/conversation-basic-standalone/ConversationBasicStandalone.tsx @@ -27,6 +27,7 @@ const adapter = createEchoAdapter({ }); export default function ConversationBasicStandalone() { + // @focus-start @padding 1 const renderItem = React.useCallback( (params: { id: string }) => ( @@ -66,4 +67,5 @@ export default function ConversationBasicStandalone() { ); + // @focus-end } diff --git a/docs/data/chat/basics/conversation/demos/conversation-basic-standalone/client.ts b/docs/data/chat/basics/conversation/demos/conversation-basic-standalone/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/conversation/demos/conversation-basic-standalone/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/conversation/demos/conversation-basic-standalone/index.ts b/docs/data/chat/basics/conversation/demos/conversation-basic-standalone/index.ts new file mode 100644 index 0000000000000..ce0b143d10877 --- /dev/null +++ b/docs/data/chat/basics/conversation/demos/conversation-basic-standalone/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ConversationBasicStandalone from './ConversationBasicStandalone'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ConversationBasicStandalone, { ClientProvider }); diff --git a/docs/data/chat/basics/layout/LayoutRecomposedStandalone.js b/docs/data/chat/basics/layout/LayoutRecomposedStandalone.js deleted file mode 100644 index c7b5b5f2aa44d..0000000000000 --- a/docs/data/chat/basics/layout/LayoutRecomposedStandalone.js +++ /dev/null @@ -1,89 +0,0 @@ -'use client'; -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { - ChatComposer, - ChatComposerSendButton, - ChatComposerTextArea, - ChatComposerToolbar, - ChatConversation, - ChatConversationHeader, - ChatConversationHeaderActions, - ChatConversationSubtitle, - ChatConversationTitle, - ChatMessageGroup, - ChatMessageList, -} from '@mui/x-chat'; -import { ChatLayout, ChatProvider } from '@mui/x-chat/headless'; -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - minimalConversation, - minimalMessages, -} from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter({ - respond: (text) => - `Received: "${text}". This thread is recomposed from individual components, with a pinned notice between the header and the messages.`, -}); - -export default function LayoutRecomposedStandalone() { - const renderItem = React.useCallback( - (params) => ( - - ), - [], - ); - - return ( - - - - - - - - - - - - - - {/* Custom pinned notice between header and messages */} - - Responses are AI-generated. Verify before acting. - - - - - - - - - - - - - - ); -} diff --git a/docs/data/chat/basics/layout/LayoutResponsiveStandalone.js b/docs/data/chat/basics/layout/LayoutResponsiveStandalone.js deleted file mode 100644 index bd8958071f742..0000000000000 --- a/docs/data/chat/basics/layout/LayoutResponsiveStandalone.js +++ /dev/null @@ -1,183 +0,0 @@ -'use client'; -import * as React from 'react'; -import AttachIcon from '@mui/icons-material/AttachFile'; -import BackIcon from '@mui/icons-material/ArrowBack'; -import SendIcon from '@mui/icons-material/Send'; -import Box from '@mui/material/Box'; -import IconButton from '@mui/material/IconButton'; -import Slider from '@mui/material/Slider'; -import Tooltip from '@mui/material/Tooltip'; -import Typography from '@mui/material/Typography'; -import { - ChatComposer, - ChatComposerAttachButton, - ChatComposerSendButton, - ChatComposerTextArea, - ChatComposerToolbar, - ChatConversation, - ChatConversationHeader, - ChatConversationList, - ChatConversationSubtitle, - ChatConversationTitle, - ChatMessageGroup, - ChatMessageList, -} from '@mui/x-chat'; -import { ChatLayout, ChatProvider } from '@mui/x-chat/headless'; - -import { - createEchoAdapter, - syncConversationPreview, -} from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - inboxConversations, - inboxThreads, -} from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter({ - respond: (text) => - `Received: "${text}". This responsive example switches ChatLayout between two-pane and single-pane compositions.`, -}); - -export default function LayoutResponsiveStandalone() { - const [width, setWidth] = React.useState(720); - const [activeConversationId, setActiveConversationId] = React.useState( - () => inboxConversations[0].id, - ); - const [conversations, setConversations] = React.useState(() => - inboxConversations.map((conversation) => ({ ...conversation })), - ); - const [threads, setThreads] = React.useState(() => - Object.fromEntries( - Object.entries(inboxThreads).map(([id, messages]) => [ - id, - messages.map((message) => ({ ...message })), - ]), - ), - ); - - const isNarrow = width < 600; - const effectiveConversationId = activeConversationId ?? inboxConversations[0].id; - const messages = threads[effectiveConversationId] ?? []; - const showList = !isNarrow || !activeConversationId; - const showThread = !isNarrow || Boolean(activeConversationId); - - const renderItem = React.useCallback( - (params) => , - [], - ); - - return ( - - - - Container width - - setWidth(value)} - min={320} - max={900} - valueLabelDisplay="auto" - valueLabelFormat={(value) => `${value}px`} - /> - - {width}px - - - - { - if (!effectiveConversationId) { - return; - } - - setThreads((prev) => ({ - ...prev, - [effectiveConversationId]: nextMessages, - })); - setConversations((prev) => - syncConversationPreview(prev, effectiveConversationId, nextMessages), - ); - }} - onConversationsChange={setConversations} - > - - - {showList && ( - - )} - {showThread && ( - - - {isNarrow && activeConversationId ? ( - - setActiveConversationId(undefined)} - sx={{ mr: 1 }} - > - - - - ) : null} - - - - - - - - - - - - - - - - - - - )} - - - - - - ); -} diff --git a/docs/data/chat/basics/layout/LayoutThreadOnlyStandalone.js b/docs/data/chat/basics/layout/LayoutThreadOnlyStandalone.js deleted file mode 100644 index 6418fc9db75f3..0000000000000 --- a/docs/data/chat/basics/layout/LayoutThreadOnlyStandalone.js +++ /dev/null @@ -1,78 +0,0 @@ -'use client'; -import * as React from 'react'; -import AttachIcon from '@mui/icons-material/AttachFile'; -import SendIcon from '@mui/icons-material/Send'; -import Box from '@mui/material/Box'; -import { - ChatComposer, - ChatComposerAttachButton, - ChatComposerSendButton, - ChatComposerTextArea, - ChatComposerToolbar, - ChatConversation, - ChatConversationHeader, - ChatConversationSubtitle, - ChatConversationTitle, - ChatMessageGroup, - ChatMessageList, -} from '@mui/x-chat'; -import { ChatLayout, ChatProvider } from '@mui/x-chat/headless'; -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - minimalConversation, - minimalMessages, -} from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter({ - respond: (text) => - `Received: "${text}". Only the thread pane is mounted in this ChatLayout example.`, -}); - -export default function LayoutThreadOnlyStandalone() { - const renderItem = React.useCallback( - (params) => , - [], - ); - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/chat/basics/layout/LayoutTwoPaneStandalone.js b/docs/data/chat/basics/layout/LayoutTwoPaneStandalone.js deleted file mode 100644 index 622e69aa969dc..0000000000000 --- a/docs/data/chat/basics/layout/LayoutTwoPaneStandalone.js +++ /dev/null @@ -1,128 +0,0 @@ -'use client'; -import * as React from 'react'; -import AttachIcon from '@mui/icons-material/AttachFile'; -import SendIcon from '@mui/icons-material/Send'; -import Box from '@mui/material/Box'; -import { - ChatComposer, - ChatComposerAttachButton, - ChatComposerSendButton, - ChatComposerTextArea, - ChatComposerToolbar, - ChatConversation, - ChatConversationHeader, - ChatConversationList, - ChatConversationSubtitle, - ChatConversationTitle, - ChatMessageGroup, - ChatMessageList, -} from '@mui/x-chat'; -import { ChatLayout, ChatProvider } from '@mui/x-chat/headless'; - -import { - createEchoAdapter, - syncConversationPreview, -} from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - inboxConversations, - inboxThreads, -} from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter({ - respond: (text) => - `Received: "${text}". This demo renders ChatLayout with an explicit conversation pane and thread pane.`, -}); - -export default function LayoutTwoPaneStandalone() { - const [activeConversationId, setActiveConversationId] = React.useState( - () => inboxConversations[0].id, - ); - const [conversations, setConversations] = React.useState(() => - inboxConversations.map((conversation) => ({ ...conversation })), - ); - const [threads, setThreads] = React.useState(() => - Object.fromEntries( - Object.entries(inboxThreads).map(([id, messages]) => [ - id, - messages.map((message) => ({ ...message })), - ]), - ), - ); - - const messages = threads[activeConversationId] ?? []; - - const renderItem = React.useCallback( - (params) => , - [], - ); - - return ( - { - if (nextId) { - setActiveConversationId(nextId); - } - }} - onMessagesChange={(nextMessages) => { - setThreads((prev) => ({ - ...prev, - [activeConversationId]: nextMessages, - })); - setConversations((prev) => - syncConversationPreview(prev, activeConversationId, nextMessages), - ); - }} - onConversationsChange={setConversations} - > - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/chat/basics/layout/LayoutRecomposedStandalone.tsx b/docs/data/chat/basics/layout/demos/layout-recomposed-standalone/LayoutRecomposedStandalone.tsx similarity index 98% rename from docs/data/chat/basics/layout/LayoutRecomposedStandalone.tsx rename to docs/data/chat/basics/layout/demos/layout-recomposed-standalone/LayoutRecomposedStandalone.tsx index df3bc4d15572e..7a99624bec37e 100644 --- a/docs/data/chat/basics/layout/LayoutRecomposedStandalone.tsx +++ b/docs/data/chat/basics/layout/demos/layout-recomposed-standalone/LayoutRecomposedStandalone.tsx @@ -27,6 +27,7 @@ const adapter = createEchoAdapter({ }); export default function LayoutRecomposedStandalone() { + // @focus-start @padding 1 const renderItem = React.useCallback( (params: { id: string; index: number }) => ( @@ -87,4 +88,5 @@ export default function LayoutRecomposedStandalone() { ); + // @focus-end } diff --git a/docs/data/chat/basics/layout/demos/layout-recomposed-standalone/client.ts b/docs/data/chat/basics/layout/demos/layout-recomposed-standalone/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/layout/demos/layout-recomposed-standalone/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/layout/demos/layout-recomposed-standalone/index.ts b/docs/data/chat/basics/layout/demos/layout-recomposed-standalone/index.ts new file mode 100644 index 0000000000000..38ef071ac9838 --- /dev/null +++ b/docs/data/chat/basics/layout/demos/layout-recomposed-standalone/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LayoutRecomposedStandalone from './LayoutRecomposedStandalone'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LayoutRecomposedStandalone, { ClientProvider }); diff --git a/docs/data/chat/basics/layout/LayoutResponsiveStandalone.tsx b/docs/data/chat/basics/layout/demos/layout-responsive-standalone/LayoutResponsiveStandalone.tsx similarity index 99% rename from docs/data/chat/basics/layout/LayoutResponsiveStandalone.tsx rename to docs/data/chat/basics/layout/demos/layout-responsive-standalone/LayoutResponsiveStandalone.tsx index 2b119f88ecb3f..48fcea2afa3e6 100644 --- a/docs/data/chat/basics/layout/LayoutResponsiveStandalone.tsx +++ b/docs/data/chat/basics/layout/demos/layout-responsive-standalone/LayoutResponsiveStandalone.tsx @@ -42,6 +42,7 @@ const adapter = createEchoAdapter({ }); export default function LayoutResponsiveStandalone() { + // @focus-start @padding 1 const [width, setWidth] = React.useState(720); const [activeConversationId, setActiveConversationId] = React.useState< string | undefined @@ -185,4 +186,5 @@ export default function LayoutResponsiveStandalone() { ); + // @focus-end } diff --git a/docs/data/chat/basics/layout/demos/layout-responsive-standalone/client.ts b/docs/data/chat/basics/layout/demos/layout-responsive-standalone/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/layout/demos/layout-responsive-standalone/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/layout/demos/layout-responsive-standalone/index.ts b/docs/data/chat/basics/layout/demos/layout-responsive-standalone/index.ts new file mode 100644 index 0000000000000..510d515585590 --- /dev/null +++ b/docs/data/chat/basics/layout/demos/layout-responsive-standalone/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LayoutResponsiveStandalone from './LayoutResponsiveStandalone'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LayoutResponsiveStandalone, { ClientProvider }); diff --git a/docs/data/chat/basics/layout/LayoutThreadOnlyStandalone.tsx b/docs/data/chat/basics/layout/demos/layout-thread-only-standalone/LayoutThreadOnlyStandalone.tsx similarity index 98% rename from docs/data/chat/basics/layout/LayoutThreadOnlyStandalone.tsx rename to docs/data/chat/basics/layout/demos/layout-thread-only-standalone/LayoutThreadOnlyStandalone.tsx index b96ebf0b22313..1c590a032fcc1 100644 --- a/docs/data/chat/basics/layout/LayoutThreadOnlyStandalone.tsx +++ b/docs/data/chat/basics/layout/demos/layout-thread-only-standalone/LayoutThreadOnlyStandalone.tsx @@ -29,6 +29,7 @@ const adapter = createEchoAdapter({ }); export default function LayoutThreadOnlyStandalone() { + // @focus-start @padding 1 const renderItem = React.useCallback( (params: { id: string }) => ( @@ -77,4 +78,5 @@ export default function LayoutThreadOnlyStandalone() { ); + // @focus-end } diff --git a/docs/data/chat/basics/layout/demos/layout-thread-only-standalone/client.ts b/docs/data/chat/basics/layout/demos/layout-thread-only-standalone/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/layout/demos/layout-thread-only-standalone/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/layout/demos/layout-thread-only-standalone/index.ts b/docs/data/chat/basics/layout/demos/layout-thread-only-standalone/index.ts new file mode 100644 index 0000000000000..dcc738449c89b --- /dev/null +++ b/docs/data/chat/basics/layout/demos/layout-thread-only-standalone/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LayoutThreadOnlyStandalone from './LayoutThreadOnlyStandalone'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LayoutThreadOnlyStandalone, { ClientProvider }); diff --git a/docs/data/chat/basics/layout/LayoutTwoPaneStandalone.tsx b/docs/data/chat/basics/layout/demos/layout-two-pane-standalone/LayoutTwoPaneStandalone.tsx similarity index 98% rename from docs/data/chat/basics/layout/LayoutTwoPaneStandalone.tsx rename to docs/data/chat/basics/layout/demos/layout-two-pane-standalone/LayoutTwoPaneStandalone.tsx index 6714c572a0e59..f13df7ee44c5f 100644 --- a/docs/data/chat/basics/layout/LayoutTwoPaneStandalone.tsx +++ b/docs/data/chat/basics/layout/demos/layout-two-pane-standalone/LayoutTwoPaneStandalone.tsx @@ -37,6 +37,7 @@ const adapter = createEchoAdapter({ }); export default function LayoutTwoPaneStandalone() { + // @focus-start @padding 1 const [activeConversationId, setActiveConversationId] = React.useState( () => inboxConversations[0].id, ); @@ -130,4 +131,5 @@ export default function LayoutTwoPaneStandalone() { ); + // @focus-end } diff --git a/docs/data/chat/basics/layout/demos/layout-two-pane-standalone/client.ts b/docs/data/chat/basics/layout/demos/layout-two-pane-standalone/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/layout/demos/layout-two-pane-standalone/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/layout/demos/layout-two-pane-standalone/index.ts b/docs/data/chat/basics/layout/demos/layout-two-pane-standalone/index.ts new file mode 100644 index 0000000000000..9772b1fd5cf84 --- /dev/null +++ b/docs/data/chat/basics/layout/demos/layout-two-pane-standalone/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LayoutTwoPaneStandalone from './LayoutTwoPaneStandalone'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LayoutTwoPaneStandalone, { ClientProvider }); diff --git a/docs/data/chat/basics/layout/layout.md b/docs/data/chat/basics/layout/layout.md index 2ea4ce9ba2c89..8789fb93aad7b 100644 --- a/docs/data/chat/basics/layout/layout.md +++ b/docs/data/chat/basics/layout/layout.md @@ -50,7 +50,7 @@ ChatLayout The default composition renders the conversation list and the active thread side by side. Select a conversation in the sidebar to switch the thread: -{{"demo": "LayoutTwoPaneStandalone.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/layout-two-pane-standalone/index.ts", "bg": "inline", "collapseToEmpty": true}} ### Sizing the panes @@ -73,7 +73,7 @@ Each pane slot receives a `pane` owner state (`'conversations'` or `'thread'`), When your application manages conversations externally, render only the thread pane inside `ChatLayout`. The demo below keeps the provider, message list, and composer but omits the conversation pane: -{{"demo": "LayoutThreadOnlyStandalone.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/layout-thread-only-standalone/index.ts", "bg": "inline", "collapseToEmpty": true}} In thread-only mode the active conversation fills the entire `ChatLayout` container. @@ -140,7 +140,7 @@ function CustomThread() { } ``` -{{"demo": "LayoutRecomposedStandalone.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/layout-recomposed-standalone/index.ts", "bg": "inline", "collapseToEmpty": true}} Wrap `CustomThread` with a [`ChatProvider`](/x/react-chat/headless/) from `@mui/x-chat/headless` to wire runtime state to your adapter. @@ -174,7 +174,7 @@ Drag the slider below to switch the same composition between: The demo below keeps the logic explicit so you can swap it for route-based navigation, a drawer, or any other responsive pattern: -{{"demo": "LayoutResponsiveStandalone.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/layout-responsive-standalone/index.ts", "bg": "inline", "collapseToEmpty": true}} When collapsing to a single pane, keep the navigation accessible: label the conversation list (for example `aria-label="Conversations"`) and give the narrow-mode back control an explicit label such as `aria-label="Back to conversations"`, as the demo above does. diff --git a/docs/data/chat/basics/messages/ChatMessageAuthorLabelPlayground.js b/docs/data/chat/basics/messages/ChatMessageAuthorLabelPlayground.js deleted file mode 100644 index dcb67273df7f2..0000000000000 --- a/docs/data/chat/basics/messages/ChatMessageAuthorLabelPlayground.js +++ /dev/null @@ -1,91 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { - ChatMessage as ChatMessageComponent, - ChatMessageAuthorLabel, - ChatMessageGroup, -} from '@mui/x-chat'; - -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { ScopedChat } from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { - ChoiceControl, - DividerLabel, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; -import { users } from 'docs/src/modules/components/chat-playground/data'; - -const conversation = { - id: 'author-label-playground', - title: 'Parts', - participants: [users.me, users.assistant], -}; - -function makeMessage(role, status, text) { - const author = role === 'user' ? users.me : users.assistant; - return { - id: `author-label-${role}-${status}`, - conversationId: conversation.id, - role, - author, - createdAt: '2026-05-03T09:30:00.000Z', - status, - parts: [{ type: 'text', text }], - }; -} - -const CLASS_DEFS = [ - { - name: 'authorLabel', - selector: '.MuiChatMessage-authorLabel', - description: 'Applied to the author label element above the bubble group.', - }, -]; - -export default function ChatMessageAuthorLabelPlayground() { - const [role, setRole] = React.useState('assistant'); - const classesCustomizations = useCustomizations(CLASS_DEFS); - - const message = React.useMemo( - () => makeMessage(role, 'read', 'Author label preview message.'), - [role], - ); - - const labelSx = classesCustomizations.toClassesSx(); - - return ( - - fixture (message data) - - - } - preview={ - - - - - - - - - - } - /> - ); -} diff --git a/docs/data/chat/basics/messages/ChatMessageAvatarPlayground.js b/docs/data/chat/basics/messages/ChatMessageAvatarPlayground.js deleted file mode 100644 index e81d32dbb0b68..0000000000000 --- a/docs/data/chat/basics/messages/ChatMessageAvatarPlayground.js +++ /dev/null @@ -1,106 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { - ChatMessage as ChatMessageComponent, - ChatMessageAvatar, - ChatMessageContent, - ChatMessageGroup, -} from '@mui/x-chat'; - -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { - ChatChrome, - ScopedChat, -} from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { - ChoiceControl, - DividerLabel, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; -import { users } from 'docs/src/modules/components/chat-playground/data'; - -const conversation = { - id: 'avatar-playground', - title: 'Parts', - participants: [users.me, users.assistant], -}; - -function makeMessage(role, status, text) { - const author = role === 'user' ? users.me : users.assistant; - return { - id: `avatar-${role}-${status}`, - conversationId: conversation.id, - role, - author, - createdAt: '2026-05-03T09:30:00.000Z', - status, - parts: [{ type: 'text', text }], - }; -} - -const CLASS_DEFS = [ - { - name: 'avatar', - selector: '.MuiChatMessage-avatar', - description: 'Applied to the avatar element of the message row.', - }, -]; - -export default function ChatMessageAvatarPlayground() { - const [role, setRole] = React.useState('assistant'); - const [variant, setVariant] = React.useState('default'); - const classesCustomizations = useCustomizations(CLASS_DEFS); - - const message = React.useMemo( - () => makeMessage(role, 'read', 'Avatar preview message.'), - [role], - ); - - const avatarSx = classesCustomizations.toClassesSx(); - - return ( - - fixture (message data) - - chrome provider - - - } - preview={ - - - - - - - - - - - - - } - /> - ); -} diff --git a/docs/data/chat/basics/messages/ChatMessageContentPlayground.js b/docs/data/chat/basics/messages/ChatMessageContentPlayground.js deleted file mode 100644 index 0aeb75dd87ced..0000000000000 --- a/docs/data/chat/basics/messages/ChatMessageContentPlayground.js +++ /dev/null @@ -1,122 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { - ChatMessage as ChatMessageComponent, - ChatMessageAvatar, - ChatMessageContent, - ChatMessageGroup, -} from '@mui/x-chat'; - -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { - ChatChrome, - ScopedChat, -} from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { - ChoiceControl, - DividerLabel, - SelectControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; -import { users } from 'docs/src/modules/components/chat-playground/data'; - -const conversation = { - id: 'content-playground', - title: 'Parts', - participants: [users.me, users.assistant], -}; - -function makeMessage(role, status, text) { - const author = role === 'user' ? users.me : users.assistant; - return { - id: `content-${role}-${status}`, - conversationId: conversation.id, - role, - author, - createdAt: '2026-05-03T09:30:00.000Z', - status, - parts: [{ type: 'text', text }], - }; -} - -const CLASS_DEFS = [ - { - name: 'content', - selector: '.MuiChatMessage-content', - description: 'The content slot wrapping the bubble + inline meta.', - }, - { - name: 'bubble', - selector: '.MuiChatMessage-bubble', - description: 'The actual rounded bubble element.', - }, -]; - -export default function ChatMessageContentPlayground() { - const [content, setContent] = React.useState('markdown'); - const [role, setRole] = React.useState('assistant'); - const [variant, setVariant] = React.useState('default'); - const classesCustomizations = useCustomizations(CLASS_DEFS); - - const text = - content === 'markdown' - ? `**Markdown** is rendered automatically:\n\n- bullet one\n- bullet two\n\nInline \`code\` works too.` - : `Plain text with no formatting—just wraps naturally.`; - - const message = React.useMemo(() => makeMessage(role, 'read', text), [role, text]); - - const contentSx = classesCustomizations.toClassesSx(); - - return ( - - fixture (message data) - - - chrome provider - - - } - preview={ - - - - - - - - - - - - - } - /> - ); -} diff --git a/docs/data/chat/basics/messages/ChatMessageGroupPlayground.js b/docs/data/chat/basics/messages/ChatMessageGroupPlayground.js deleted file mode 100644 index b2ab1f60f5399..0000000000000 --- a/docs/data/chat/basics/messages/ChatMessageGroupPlayground.js +++ /dev/null @@ -1,143 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { - ChatMessage as ChatMessageComponent, - ChatMessageAvatar, - ChatMessageContent, - ChatMessageGroup, -} from '@mui/x-chat'; - -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { - ChatChrome, - ScopedChat, -} from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { - ChoiceControl, - DividerLabel, - NumberControl, - SwitchControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { users } from 'docs/src/modules/components/chat-playground/data'; - -const conversation = { - id: 'group-playground', - title: 'Grouped messages', - participants: [users.me, users.assistant], -}; - -const sampleSnippets = [ - 'Three quick notes on theming.', - 'First—the avatar only renders for the first message in a group.', - 'Second—bubbles tighten vertically when grouped.', - 'Third—the meta line stays attached to the last bubble.', - 'Bonus—try toggling the variant on the right.', -]; - -const DEFAULTS = { - count: 3, - author: 'assistant', - variant: 'default', - density: 'standard', - interleave: false, -}; - -export default function ChatMessageGroupPlayground() { - const [count, setCount] = React.useState(DEFAULTS.count); - const [author, setAuthor] = React.useState(DEFAULTS.author); - const [variant, setVariant] = React.useState(DEFAULTS.variant); - const [density, setDensity] = React.useState(DEFAULTS.density); - const [interleave, setInterleave] = React.useState(DEFAULTS.interleave); - - const handleReset = React.useCallback(() => { - setCount(DEFAULTS.count); - setAuthor(DEFAULTS.author); - setVariant(DEFAULTS.variant); - setDensity(DEFAULTS.density); - setInterleave(DEFAULTS.interleave); - }, []); - - const messages = React.useMemo(() => { - const created = Date.UTC(2026, 4, 3, 10, 0, 0); - const flippedAuthor = author === 'assistant' ? 'user' : 'assistant'; - return Array.from({ length: count }, (_, i) => { - const altAuthor = interleave && i % 2 === 1 ? flippedAuthor : author; - const messageAuthor = altAuthor === 'user' ? users.me : users.assistant; - return { - id: `group-msg-${i}`, - conversationId: conversation.id, - role: altAuthor, - author: messageAuthor, - createdAt: new Date(created + i * 30_000).toISOString(), - status: 'read', - parts: [{ type: 'text', text: sampleSnippets[i % sampleSnippets.length] }], - }; - }); - }, [count, author, interleave]); - return ( - - fixture data - - - - chrome provider - - - - } - preview={ - - - - {messages.map((message) => ( - - - - - - - ))} - - - - } - /> - ); -} diff --git a/docs/data/chat/basics/messages/ChatMessageInlineMetaPlayground.js b/docs/data/chat/basics/messages/ChatMessageInlineMetaPlayground.js deleted file mode 100644 index 9d8ab883d0946..0000000000000 --- a/docs/data/chat/basics/messages/ChatMessageInlineMetaPlayground.js +++ /dev/null @@ -1,116 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { - ChatMessage as ChatMessageComponent, - ChatMessageAvatar, - ChatMessageContent, - ChatMessageGroup, - ChatMessageInlineMeta, -} from '@mui/x-chat'; - -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { - ChatChrome, - ScopedChat, -} from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { - ChoiceControl, - DividerLabel, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; -import { users } from 'docs/src/modules/components/chat-playground/data'; - -const conversation = { - id: 'inline-meta-playground', - title: 'Parts', - participants: [users.me, users.assistant], -}; - -function makeMessage(role, status, text) { - const author = role === 'user' ? users.me : users.assistant; - return { - id: `inline-meta-${role}-${status}`, - conversationId: conversation.id, - role, - author, - createdAt: '2026-05-03T09:30:00.000Z', - status, - parts: [{ type: 'text', text }], - }; -} - -const CLASS_DEFS = [ - { - name: 'inlineMeta', - selector: '.MuiChatMessage-inlineMeta', - description: 'The container floating at the bottom-right of the bubble.', - }, - { - name: 'inlineMetaSpacer', - selector: '.MuiChatMessage-inlineMetaSpacer', - description: 'Reserved whitespace so text wraps around the meta block.', - }, -]; - -export default function ChatMessageInlineMetaPlayground() { - const [role, setRole] = React.useState('user'); - const [status, setStatus] = React.useState('read'); - const classesCustomizations = useCustomizations(CLASS_DEFS); - const message = React.useMemo( - () => - makeMessage( - role, - status, - 'Inline meta sits at the bottom-right of this bubble.', - ), - [role, status], - ); - - const inlineSx = classesCustomizations.toClassesSx(); - - return ( - - fixture (message data) - - - - } - preview={ - - - - - - - } /> - - - - - - } - /> - ); -} diff --git a/docs/data/chat/basics/messages/ChatMessageListPlayground.js b/docs/data/chat/basics/messages/ChatMessageListPlayground.js deleted file mode 100644 index c7184cf440071..0000000000000 --- a/docs/data/chat/basics/messages/ChatMessageListPlayground.js +++ /dev/null @@ -1,246 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import { ChatMessageList } from '@mui/x-chat'; - -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { - ChatChrome, - ScopedChat, -} from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { - ChoiceControl, - DividerLabel, - NumberControl, - SwitchControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; -import { users } from 'docs/src/modules/components/chat-playground/data'; - -const conversation = { - id: 'list-playground', - title: 'Message list', - participants: [users.me, users.assistant, users.alice], -}; - -function buildMessages(messageCount, spanDays) { - const baseDay = Date.UTC(2026, 4, 3, 9, 0, 0); - const dayMs = 24 * 60 * 60 * 1000; - const authorRotation = [users.alice, users.assistant, users.me]; - return Array.from({ length: messageCount }, (_, i) => { - const author = authorRotation[i % authorRotation.length]; - const role = author === users.assistant ? 'assistant' : 'user'; - const dayOffset = spanDays - ? Math.floor(i / Math.max(1, Math.ceil(messageCount / 3))) - : 0; - const created = baseDay - dayOffset * dayMs + (i % 6) * 60_000; - return { - id: `list-msg-${i}`, - conversationId: conversation.id, - role, - author, - createdAt: new Date(created).toISOString(), - status: 'read', - parts: [ - { - type: 'text', - text: `Message ${i + 1} from ${author.displayName}.`, - }, - ], - }; - }).reverse(); -} - -const DEFAULTS = { - count: 8, - spanDays: true, - dateDivider: true, - autoScroll: true, - autoScrollBuffer: 150, - showOverlay: false, - variant: 'default', - density: 'standard', -}; - -const CLASS_DEFS = [ - { name: 'root', description: 'The root list element.' }, - { - name: 'scroller', - selector: '.MuiChatMessageList-scroller', - description: 'Scroller wrapper.', - }, - { - name: 'content', - selector: '.MuiChatMessageList-content', - description: 'Inner content area.', - }, -]; - -export default function ChatMessageListPlayground() { - const [count, setCount] = React.useState(DEFAULTS.count); - const [spanDays, setSpanDays] = React.useState(DEFAULTS.spanDays); - const [dateDivider, setDateDivider] = React.useState(DEFAULTS.dateDivider); - const [autoScroll, setAutoScroll] = React.useState(DEFAULTS.autoScroll); - const [autoScrollBuffer, setAutoScrollBuffer] = React.useState( - DEFAULTS.autoScrollBuffer, - ); - const [showOverlay, setShowOverlay] = React.useState(DEFAULTS.showOverlay); - const [variant, setVariant] = React.useState(DEFAULTS.variant); - const [density, setDensity] = React.useState(DEFAULTS.density); - const classesCustomizations = useCustomizations(CLASS_DEFS); - - const handleReset = React.useCallback(() => { - setCount(DEFAULTS.count); - setSpanDays(DEFAULTS.spanDays); - setDateDivider(DEFAULTS.dateDivider); - setAutoScroll(DEFAULTS.autoScroll); - setAutoScrollBuffer(DEFAULTS.autoScrollBuffer); - setShowOverlay(DEFAULTS.showOverlay); - setVariant(DEFAULTS.variant); - setDensity(DEFAULTS.density); - }, []); - - const messages = React.useMemo( - () => buildMessages(count, spanDays), - [count, spanDays], - ); - - let autoScrollValue; - if (!autoScroll) { - autoScrollValue = false; - } else if (autoScrollBuffer === DEFAULTS.autoScrollBuffer) { - autoScrollValue = true; - } else { - autoScrollValue = { buffer: autoScrollBuffer }; - } - - const overlay = showOverlay ? ( - ({ - position: 'absolute', - inset: theme.spacing(1), - display: 'flex', - alignItems: 'flex-start', - justifyContent: 'flex-end', - pointerEvents: 'none', - })} - > - ({ - pointerEvents: 'auto', - padding: theme.spacing(0.5, 1.25), - borderRadius: 16, - bgcolor: 'background.paper', - border: '1px solid', - borderColor: 'divider', - boxShadow: theme.shadows[1], - })} - > - - overlay slot - - - - ) : null; - - const listSx = classesCustomizations.toClassesSx(); - return ( - - props - - `${value}px`} - helperText="Distance from bottom to still trigger auto-scroll." - onChange={setAutoScrollBuffer} - /> - - - fixture data - - - chrome provider - - - - } - preview={ - - - - m.id)} - autoScroll={autoScrollValue} - overlay={overlay} - features={{ dateDivider }} - sx={listSx} - /> - - - - } - /> - ); -} diff --git a/docs/data/chat/basics/messages/ChatMessageMetaPlayground.js b/docs/data/chat/basics/messages/ChatMessageMetaPlayground.js deleted file mode 100644 index ef59ea3c83a83..0000000000000 --- a/docs/data/chat/basics/messages/ChatMessageMetaPlayground.js +++ /dev/null @@ -1,114 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { - ChatMessage as ChatMessageComponent, - ChatMessageAvatar, - ChatMessageContent, - ChatMessageGroup, - ChatMessageMeta, -} from '@mui/x-chat'; - -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { - ChatChrome, - ScopedChat, -} from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { - ChoiceControl, - DividerLabel, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; -import { users } from 'docs/src/modules/components/chat-playground/data'; - -const conversation = { - id: 'meta-playground', - title: 'Parts', - participants: [users.me, users.assistant], -}; - -function makeMessage(role, status, text) { - const author = role === 'user' ? users.me : users.assistant; - return { - id: `meta-${role}-${status}`, - conversationId: conversation.id, - role, - author, - createdAt: '2026-05-03T09:30:00.000Z', - status, - parts: [{ type: 'text', text }], - }; -} - -const CLASS_DEFS = [ - { - name: 'meta', - selector: '.MuiChatMessage-meta', - description: 'External meta row containing timestamp + status.', - }, -]; - -export default function ChatMessageMetaPlayground() { - const [role, setRole] = React.useState('user'); - const [status, setStatus] = React.useState('read'); - const [variant, setVariant] = React.useState('compact'); - const classesCustomizations = useCustomizations(CLASS_DEFS); - const message = React.useMemo( - () => makeMessage(role, status, 'Meta preview message.'), - [role, status], - ); - - const metaSx = classesCustomizations.toClassesSx(); - - return ( - - fixture (message data) - - - chrome provider - - - } - preview={ - - - - - - - - - - - - - - } - /> - ); -} diff --git a/docs/data/chat/basics/messages/ChatMessagePlayground.js b/docs/data/chat/basics/messages/ChatMessagePlayground.js deleted file mode 100644 index 13cd343686b6d..0000000000000 --- a/docs/data/chat/basics/messages/ChatMessagePlayground.js +++ /dev/null @@ -1,201 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import { - ChatMessage as ChatMessageComponent, - ChatMessageAvatar, - ChatMessageContent, - ChatMessageGroup, -} from '@mui/x-chat'; - -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { - ChatChrome, - MessageErrorEffect, - ScopedChat, -} from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { sampleTexts } from 'docs/src/modules/components/chat-playground/sharedFixtures'; -import { - ChoiceControl, - DividerLabel, - SelectControl, - SwitchControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; -import { users } from 'docs/src/modules/components/chat-playground/data'; - -const conversation = { - id: 'msg-playground', - title: 'Single message', - participants: [users.me, users.assistant], -}; - -const DEFAULTS = { - role: 'assistant', - status: 'read', - length: 'medium', - variant: 'default', - density: 'standard', - grouped: false, -}; - -const CLASS_DEFS = [ - { name: 'root', description: 'The message row.' }, - { - name: 'bubble', - selector: '.MuiChatMessage-bubble', - description: 'The actual rounded bubble inside the content slot.', - }, - { - name: 'roleUser', - selector: '.MuiChatMessage-roleUser', - description: 'Applied to rows whose role is "user".', - }, - { - name: 'roleAssistant', - selector: '.MuiChatMessage-roleAssistant', - description: 'Applied to rows whose role is "assistant".', - }, - { - name: 'streaming', - selector: '.MuiChatMessage-streaming', - description: 'Applied while the message is streaming.', - }, - { - name: 'error', - selector: '.MuiChatMessage-error', - description: 'Applied when the message has an error status.', - }, -]; - -export default function ChatMessagePlayground() { - const [role, setRole] = React.useState(DEFAULTS.role); - const [status, setStatus] = React.useState(DEFAULTS.status); - const [length, setLength] = React.useState(DEFAULTS.length); - const [variant, setVariant] = React.useState(DEFAULTS.variant); - const [density, setDensity] = React.useState(DEFAULTS.density); - const [grouped, setGrouped] = React.useState(DEFAULTS.grouped); - const classesCustomizations = useCustomizations(CLASS_DEFS); - - const handleReset = React.useCallback(() => { - setRole(DEFAULTS.role); - setStatus(DEFAULTS.status); - setLength(DEFAULTS.length); - setVariant(DEFAULTS.variant); - setDensity(DEFAULTS.density); - setGrouped(DEFAULTS.grouped); - }, []); - - const author = role === 'user' ? users.me : users.assistant; - - const message = React.useMemo( - () => ({ - id: 'msg-playground-bubble', - conversationId: conversation.id, - role, - author, - createdAt: '2026-05-03T09:30:00.000Z', - status, - parts: [{ type: 'text', text: sampleTexts[length] }], - }), - [role, author, status, length], - ); - - const messageSx = classesCustomizations.toClassesSx(); - - return ( - - props - - fixture (message data) - - - - chrome provider - - - - variant and density mainly affect meta and bubble spacing—see the Meta - and Inline meta playgrounds below. - - - } - preview={ - - - - - - - - - - - - - - } - /> - ); -} diff --git a/docs/data/chat/basics/messages/StandaloneMessages.js b/docs/data/chat/basics/messages/StandaloneMessages.js deleted file mode 100644 index a5c6259022306..0000000000000 --- a/docs/data/chat/basics/messages/StandaloneMessages.js +++ /dev/null @@ -1,34 +0,0 @@ -'use client'; -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { ChatConversation, ChatMessageList } from '@mui/x-chat'; -import { ChatProvider } from '@mui/x-chat/headless'; -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - minimalConversation, - minimalMessages, -} from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter(); - -export default function StandaloneMessages() { - return ( - - - - - - - - ); -} diff --git a/docs/data/chat/basics/messages/ChatMessageAuthorLabelPlayground.tsx b/docs/data/chat/basics/messages/demos/chat-message-author-label-playground/ChatMessageAuthorLabelPlayground.tsx similarity index 92% rename from docs/data/chat/basics/messages/ChatMessageAuthorLabelPlayground.tsx rename to docs/data/chat/basics/messages/demos/chat-message-author-label-playground/ChatMessageAuthorLabelPlayground.tsx index b4e9209679652..42cb3b6bc5290 100644 --- a/docs/data/chat/basics/messages/ChatMessageAuthorLabelPlayground.tsx +++ b/docs/data/chat/basics/messages/demos/chat-message-author-label-playground/ChatMessageAuthorLabelPlayground.tsx @@ -12,10 +12,8 @@ import { ChoiceControl, DividerLabel, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; import { users } from 'docs/src/modules/components/chat-playground/data'; const conversation: ChatConversation = { @@ -51,6 +49,7 @@ const CLASS_DEFS: ReadonlyArray> = [ ]; export default function ChatMessageAuthorLabelPlayground() { + // @focus-start @padding 1 const [role, setRole] = React.useState('assistant'); const classesCustomizations = useCustomizations(CLASS_DEFS); @@ -96,4 +95,5 @@ export default function ChatMessageAuthorLabelPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/basics/messages/demos/chat-message-author-label-playground/client.ts b/docs/data/chat/basics/messages/demos/chat-message-author-label-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/messages/demos/chat-message-author-label-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/messages/demos/chat-message-author-label-playground/index.ts b/docs/data/chat/basics/messages/demos/chat-message-author-label-playground/index.ts new file mode 100644 index 0000000000000..98b36d2388d79 --- /dev/null +++ b/docs/data/chat/basics/messages/demos/chat-message-author-label-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatMessageAuthorLabelPlayground from './ChatMessageAuthorLabelPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatMessageAuthorLabelPlayground, { ClientProvider }); diff --git a/docs/data/chat/basics/messages/ChatMessageAvatarPlayground.tsx b/docs/data/chat/basics/messages/demos/chat-message-avatar-playground/ChatMessageAvatarPlayground.tsx similarity index 93% rename from docs/data/chat/basics/messages/ChatMessageAvatarPlayground.tsx rename to docs/data/chat/basics/messages/demos/chat-message-avatar-playground/ChatMessageAvatarPlayground.tsx index 2da7191c28640..4044d35b0f732 100644 --- a/docs/data/chat/basics/messages/ChatMessageAvatarPlayground.tsx +++ b/docs/data/chat/basics/messages/demos/chat-message-avatar-playground/ChatMessageAvatarPlayground.tsx @@ -20,10 +20,8 @@ import { ChoiceControl, DividerLabel, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; import { users } from 'docs/src/modules/components/chat-playground/data'; const conversation: ChatConversation = { @@ -59,6 +57,7 @@ const CLASS_DEFS: ReadonlyArray> = [ ]; export default function ChatMessageAvatarPlayground() { + // @focus-start @padding 1 const [role, setRole] = React.useState('assistant'); const [variant, setVariant] = React.useState('default'); const classesCustomizations = useCustomizations(CLASS_DEFS); @@ -115,4 +114,5 @@ export default function ChatMessageAvatarPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/basics/messages/demos/chat-message-avatar-playground/client.ts b/docs/data/chat/basics/messages/demos/chat-message-avatar-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/messages/demos/chat-message-avatar-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/messages/demos/chat-message-avatar-playground/index.ts b/docs/data/chat/basics/messages/demos/chat-message-avatar-playground/index.ts new file mode 100644 index 0000000000000..b171a8767c244 --- /dev/null +++ b/docs/data/chat/basics/messages/demos/chat-message-avatar-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatMessageAvatarPlayground from './ChatMessageAvatarPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatMessageAvatarPlayground, { ClientProvider }); diff --git a/docs/data/chat/basics/messages/ChatMessageContentPlayground.tsx b/docs/data/chat/basics/messages/demos/chat-message-content-playground/ChatMessageContentPlayground.tsx similarity index 94% rename from docs/data/chat/basics/messages/ChatMessageContentPlayground.tsx rename to docs/data/chat/basics/messages/demos/chat-message-content-playground/ChatMessageContentPlayground.tsx index ee71738d1a7be..b36467b2c1944 100644 --- a/docs/data/chat/basics/messages/ChatMessageContentPlayground.tsx +++ b/docs/data/chat/basics/messages/demos/chat-message-content-playground/ChatMessageContentPlayground.tsx @@ -21,10 +21,8 @@ import { DividerLabel, SelectControl, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; import { users } from 'docs/src/modules/components/chat-playground/data'; const conversation: ChatConversation = { @@ -65,6 +63,7 @@ const CLASS_DEFS: ReadonlyArray> = [ ]; export default function ChatMessageContentPlayground() { + // @focus-start @padding 1 const [content, setContent] = React.useState<'plain' | 'markdown'>('markdown'); const [role, setRole] = React.useState('assistant'); const [variant, setVariant] = React.useState('default'); @@ -131,4 +130,5 @@ export default function ChatMessageContentPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/basics/messages/demos/chat-message-content-playground/client.ts b/docs/data/chat/basics/messages/demos/chat-message-content-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/messages/demos/chat-message-content-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/messages/demos/chat-message-content-playground/index.ts b/docs/data/chat/basics/messages/demos/chat-message-content-playground/index.ts new file mode 100644 index 0000000000000..e06f36034ea01 --- /dev/null +++ b/docs/data/chat/basics/messages/demos/chat-message-content-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatMessageContentPlayground from './ChatMessageContentPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatMessageContentPlayground, { ClientProvider }); diff --git a/docs/data/chat/basics/messages/ChatMessageGroupPlayground.tsx b/docs/data/chat/basics/messages/demos/chat-message-group-playground/ChatMessageGroupPlayground.tsx similarity index 99% rename from docs/data/chat/basics/messages/ChatMessageGroupPlayground.tsx rename to docs/data/chat/basics/messages/demos/chat-message-group-playground/ChatMessageGroupPlayground.tsx index 1077d5bb396a8..9528e43fa82dd 100644 --- a/docs/data/chat/basics/messages/ChatMessageGroupPlayground.tsx +++ b/docs/data/chat/basics/messages/demos/chat-message-group-playground/ChatMessageGroupPlayground.tsx @@ -48,6 +48,7 @@ const DEFAULTS = { }; export default function ChatMessageGroupPlayground() { + // @focus-start @padding 1 const [count, setCount] = React.useState(DEFAULTS.count); const [author, setAuthor] = React.useState<'assistant' | 'user'>(DEFAULTS.author); const [variant, setVariant] = React.useState(DEFAULTS.variant); @@ -145,4 +146,5 @@ export default function ChatMessageGroupPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/basics/messages/demos/chat-message-group-playground/client.ts b/docs/data/chat/basics/messages/demos/chat-message-group-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/messages/demos/chat-message-group-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/messages/demos/chat-message-group-playground/index.ts b/docs/data/chat/basics/messages/demos/chat-message-group-playground/index.ts new file mode 100644 index 0000000000000..ec40e3b4a61ea --- /dev/null +++ b/docs/data/chat/basics/messages/demos/chat-message-group-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatMessageGroupPlayground from './ChatMessageGroupPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatMessageGroupPlayground, { ClientProvider }); diff --git a/docs/data/chat/basics/messages/ChatMessageInlineMetaPlayground.tsx b/docs/data/chat/basics/messages/demos/chat-message-inline-meta-playground/ChatMessageInlineMetaPlayground.tsx similarity index 93% rename from docs/data/chat/basics/messages/ChatMessageInlineMetaPlayground.tsx rename to docs/data/chat/basics/messages/demos/chat-message-inline-meta-playground/ChatMessageInlineMetaPlayground.tsx index 77ac3d2e2bf64..a4b0e9cac0d3f 100644 --- a/docs/data/chat/basics/messages/ChatMessageInlineMetaPlayground.tsx +++ b/docs/data/chat/basics/messages/demos/chat-message-inline-meta-playground/ChatMessageInlineMetaPlayground.tsx @@ -17,10 +17,8 @@ import { ChoiceControl, DividerLabel, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; import { users } from 'docs/src/modules/components/chat-playground/data'; const conversation: ChatConversation = { @@ -61,6 +59,7 @@ const CLASS_DEFS: ReadonlyArray> = [ ]; export default function ChatMessageInlineMetaPlayground() { + // @focus-start @padding 1 const [role, setRole] = React.useState('user'); const [status, setStatus] = React.useState('read'); const classesCustomizations = useCustomizations(CLASS_DEFS); @@ -121,4 +120,5 @@ export default function ChatMessageInlineMetaPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/basics/messages/demos/chat-message-inline-meta-playground/client.ts b/docs/data/chat/basics/messages/demos/chat-message-inline-meta-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/messages/demos/chat-message-inline-meta-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/messages/demos/chat-message-inline-meta-playground/index.ts b/docs/data/chat/basics/messages/demos/chat-message-inline-meta-playground/index.ts new file mode 100644 index 0000000000000..c03c798691779 --- /dev/null +++ b/docs/data/chat/basics/messages/demos/chat-message-inline-meta-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatMessageInlineMetaPlayground from './ChatMessageInlineMetaPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatMessageInlineMetaPlayground, { ClientProvider }); diff --git a/docs/data/chat/basics/messages/ChatMessageListPlayground.tsx b/docs/data/chat/basics/messages/demos/chat-message-list-playground/ChatMessageListPlayground.tsx similarity index 96% rename from docs/data/chat/basics/messages/ChatMessageListPlayground.tsx rename to docs/data/chat/basics/messages/demos/chat-message-list-playground/ChatMessageListPlayground.tsx index 9a4d21fb5b3e5..6537b0a85418f 100644 --- a/docs/data/chat/basics/messages/ChatMessageListPlayground.tsx +++ b/docs/data/chat/basics/messages/demos/chat-message-list-playground/ChatMessageListPlayground.tsx @@ -19,10 +19,8 @@ import { NumberControl, SwitchControl, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; import { users } from 'docs/src/modules/components/chat-playground/data'; const conversation: ChatConversation = { @@ -87,6 +85,7 @@ const CLASS_DEFS: ReadonlyArray> = [ ]; export default function ChatMessageListPlayground() { + // @focus-start @padding 1 const [count, setCount] = React.useState(DEFAULTS.count); const [spanDays, setSpanDays] = React.useState(DEFAULTS.spanDays); const [dateDivider, setDateDivider] = React.useState(DEFAULTS.dateDivider); @@ -253,4 +252,5 @@ export default function ChatMessageListPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/basics/messages/demos/chat-message-list-playground/client.ts b/docs/data/chat/basics/messages/demos/chat-message-list-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/messages/demos/chat-message-list-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/messages/demos/chat-message-list-playground/index.ts b/docs/data/chat/basics/messages/demos/chat-message-list-playground/index.ts new file mode 100644 index 0000000000000..bffe562ab1ac5 --- /dev/null +++ b/docs/data/chat/basics/messages/demos/chat-message-list-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatMessageListPlayground from './ChatMessageListPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatMessageListPlayground, { ClientProvider }); diff --git a/docs/data/chat/basics/messages/ChatMessageMetaPlayground.tsx b/docs/data/chat/basics/messages/demos/chat-message-meta-playground/ChatMessageMetaPlayground.tsx similarity index 93% rename from docs/data/chat/basics/messages/ChatMessageMetaPlayground.tsx rename to docs/data/chat/basics/messages/demos/chat-message-meta-playground/ChatMessageMetaPlayground.tsx index 1037b6a0a9de7..52a3ca7a7f25c 100644 --- a/docs/data/chat/basics/messages/ChatMessageMetaPlayground.tsx +++ b/docs/data/chat/basics/messages/demos/chat-message-meta-playground/ChatMessageMetaPlayground.tsx @@ -21,10 +21,8 @@ import { ChoiceControl, DividerLabel, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; import { users } from 'docs/src/modules/components/chat-playground/data'; const conversation: ChatConversation = { @@ -60,6 +58,7 @@ const CLASS_DEFS: ReadonlyArray> = [ ]; export default function ChatMessageMetaPlayground() { + // @focus-start @padding 1 const [role, setRole] = React.useState('user'); const [status, setStatus] = React.useState('read'); const [variant, setVariant] = React.useState('compact'); @@ -123,4 +122,5 @@ export default function ChatMessageMetaPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/basics/messages/demos/chat-message-meta-playground/client.ts b/docs/data/chat/basics/messages/demos/chat-message-meta-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/messages/demos/chat-message-meta-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/messages/demos/chat-message-meta-playground/index.ts b/docs/data/chat/basics/messages/demos/chat-message-meta-playground/index.ts new file mode 100644 index 0000000000000..a63e41806d6f6 --- /dev/null +++ b/docs/data/chat/basics/messages/demos/chat-message-meta-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatMessageMetaPlayground from './ChatMessageMetaPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatMessageMetaPlayground, { ClientProvider }); diff --git a/docs/data/chat/basics/messages/ChatMessagePlayground.tsx b/docs/data/chat/basics/messages/demos/chat-message-playground/ChatMessagePlayground.tsx similarity index 96% rename from docs/data/chat/basics/messages/ChatMessagePlayground.tsx rename to docs/data/chat/basics/messages/demos/chat-message-playground/ChatMessagePlayground.tsx index e196fddc0848f..71cadc11f2531 100644 --- a/docs/data/chat/basics/messages/ChatMessagePlayground.tsx +++ b/docs/data/chat/basics/messages/demos/chat-message-playground/ChatMessagePlayground.tsx @@ -26,10 +26,8 @@ import { SelectControl, SwitchControl, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; import { users } from 'docs/src/modules/components/chat-playground/data'; const conversation: ChatConversation = { @@ -84,6 +82,7 @@ const CLASS_DEFS: ReadonlyArray> = [ ]; export default function ChatMessagePlayground() { + // @focus-start @padding 1 const [role, setRole] = React.useState(DEFAULTS.role); const [status, setStatus] = React.useState(DEFAULTS.status); const [length, setLength] = React.useState(DEFAULTS.length); @@ -213,4 +212,5 @@ export default function ChatMessagePlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/basics/messages/demos/chat-message-playground/client.ts b/docs/data/chat/basics/messages/demos/chat-message-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/messages/demos/chat-message-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/messages/demos/chat-message-playground/index.ts b/docs/data/chat/basics/messages/demos/chat-message-playground/index.ts new file mode 100644 index 0000000000000..84dc93ec1ffb2 --- /dev/null +++ b/docs/data/chat/basics/messages/demos/chat-message-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatMessagePlayground from './ChatMessagePlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatMessagePlayground, { ClientProvider }); diff --git a/docs/data/chat/basics/messages/StandaloneMessages.tsx b/docs/data/chat/basics/messages/demos/standalone-messages/StandaloneMessages.tsx similarity index 94% rename from docs/data/chat/basics/messages/StandaloneMessages.tsx rename to docs/data/chat/basics/messages/demos/standalone-messages/StandaloneMessages.tsx index a5c6259022306..936ef136ade8e 100644 --- a/docs/data/chat/basics/messages/StandaloneMessages.tsx +++ b/docs/data/chat/basics/messages/demos/standalone-messages/StandaloneMessages.tsx @@ -13,6 +13,7 @@ const adapter = createEchoAdapter(); export default function StandaloneMessages() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/basics/messages/demos/standalone-messages/client.ts b/docs/data/chat/basics/messages/demos/standalone-messages/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/basics/messages/demos/standalone-messages/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/basics/messages/demos/standalone-messages/index.ts b/docs/data/chat/basics/messages/demos/standalone-messages/index.ts new file mode 100644 index 0000000000000..30c6fd3e3ec87 --- /dev/null +++ b/docs/data/chat/basics/messages/demos/standalone-messages/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StandaloneMessages from './StandaloneMessages'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StandaloneMessages, { ClientProvider }); diff --git a/docs/data/chat/basics/messages/messages.md b/docs/data/chat/basics/messages/messages.md index 8832b4ea796f3..67d6854f7dc6a 100644 --- a/docs/data/chat/basics/messages/messages.md +++ b/docs/data/chat/basics/messages/messages.md @@ -16,19 +16,19 @@ components: ChatMessageList, ChatMessageGroup, ChatMessageAvatar, ChatMessageAut Toggle role, status, density, and grouping on a single `ChatMessage` bubble: -{{"demo": "ChatMessagePlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-message-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} ### Group playground `ChatMessageGroup` collapses consecutive messages from the same author into a single visual cluster: -{{"demo": "ChatMessageGroupPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-message-group-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} ### List playground `ChatMessageList` virtualizes rendering, manages auto-scroll, and can insert opt-in dividers between days: -{{"demo": "ChatMessageListPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-message-list-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} ## The `ChatMessage` data model @@ -159,7 +159,7 @@ The message list is a single Tab stop: a roving tabindex over the `role="article - The scroller is a `role="log"` polite live region, and a visually hidden `role="status"` region announces streaming transitions ("Assistant is responding" / "Response complete") exactly once each. - The thread, composer, and conversation list are exposed as labeled landmarks. -{{"demo": "../../material/message-list/KeyboardNavigation.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://../../material/message-list/demos/keyboard-navigation/index.ts", "bg": "inline", "collapseToEmpty": true}} Set `enableRovingFocus={false}` on the message list to opt out, and use the `useMessageContentTabIndex()` hook from `@mui/x-chat/headless` to let custom interactive content participate. @@ -170,7 +170,7 @@ See the complete model—including the drill-in lifecycle, per-list focus memory When building a custom layout outside of `ChatBox`, render `ChatMessageList` inside `ChatConversation` within a `ChatProvider`. The demo below isolates the message surface with only the provider, an active conversation scope, a bounded frame, and the message list composition: -{{"demo": "StandaloneMessages.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://./demos/standalone-messages/index.ts", "bg": "inline", "collapseToEmpty": true}} ### Message slots @@ -180,28 +180,28 @@ Each slot inside the `ChatMessage` row has its own playground—iterate on a sin The author avatar slot—falls back to initials when no `avatarUrl` is set. -{{"demo": "ChatMessageAvatarPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-message-avatar-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} #### Author label Displays the author name above grouped messages. -{{"demo": "ChatMessageAuthorLabelPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-message-author-label-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} #### Content The bubble interior—renders markdown, code fences, and tool or source parts. -{{"demo": "ChatMessageContentPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-message-content-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} #### Meta External timestamp and delivery status, used by compact bubbles. -{{"demo": "ChatMessageMetaPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-message-meta-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} #### Inline meta Telegram-style timestamp and status flowing inside the bubble. -{{"demo": "ChatMessageInlineMetaPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-message-inline-meta-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} diff --git a/docs/data/chat/basics/variants-and-density/variants-and-density.md b/docs/data/chat/basics/variants-and-density/variants-and-density.md index 33394314724da..3e7d9bac0d6f4 100644 --- a/docs/data/chat/basics/variants-and-density/variants-and-density.md +++ b/docs/data/chat/basics/variants-and-density/variants-and-density.md @@ -41,7 +41,7 @@ Compact mode applies the following changes to the message list: The demo below shows the compact variant applied to a `ChatBox`: -{{"demo": "../../material/message-list/CompactVariant.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://../../material/message-list/demos/compact-variant/index.ts", "bg": "inline", "collapseToEmpty": true}} ### When to use each variant @@ -68,7 +68,7 @@ Three values are available—`compact`, `standard` (default), and `comfortable` Use the toggle in the demo below to compare the three density levels: -{{"demo": "../../material/message-list/DensityProp.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://../../material/message-list/demos/density-prop/index.ts", "bg": "inline", "collapseToEmpty": true}} ### Density effects diff --git a/docs/data/chat/behavior/attachments/AttachmentValidation.js b/docs/data/chat/behavior/attachments/AttachmentValidation.js deleted file mode 100644 index 3c3cf7604749e..0000000000000 --- a/docs/data/chat/behavior/attachments/AttachmentValidation.js +++ /dev/null @@ -1,56 +0,0 @@ -'use client'; -import * as React from 'react'; -import Alert from '@mui/material/Alert'; -import { ChatBox } from '@mui/x-chat'; - -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - minimalConversation, - minimalMessages, -} from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter(); - -const REASON_LABELS = { - 'mime-type': 'file type not accepted (images and PDF only)', - 'file-size': 'larger than 500 KB', - 'file-count': 'more than 3 files per message', -}; - -export default function AttachmentValidation() { - const [rejections, setRejections] = React.useState([]); - - return ( -
- - {rejections.length > 0 && ( - setRejections([])} sx={{ mt: 1 }}> - {rejections.map(({ file, reason }) => ( -
- {file.name} — {REASON_LABELS[reason]} -
- ))} - - )} -
- ); -} diff --git a/docs/data/chat/behavior/attachments/ChatComposerAttachButtonPlayground.js b/docs/data/chat/behavior/attachments/ChatComposerAttachButtonPlayground.js deleted file mode 100644 index daa846eccb332..0000000000000 --- a/docs/data/chat/behavior/attachments/ChatComposerAttachButtonPlayground.js +++ /dev/null @@ -1,99 +0,0 @@ -import * as React from 'react'; -import ImageIcon from '@mui/icons-material/Image'; -import PaperclipIcon from '@mui/icons-material/AttachFile'; -import Box from '@mui/material/Box'; -import { - ChatComposer, - ChatComposerAttachButton, - ChatComposerTextArea, -} from '@mui/x-chat'; -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { ScopedChat } from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { emptyConversation } from 'docs/src/modules/components/chat-playground/sharedFixtures'; -import { - ChoiceControl, - DividerLabel, - SwitchControl, - TextControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; - -const icons = { - paperclip: , - image: , -}; - -const CLASS_DEFS = [ - { - name: 'attachButton', - selector: '.MuiChatComposer-attachButton', - description: 'The attach button element inside the composer.', - }, -]; - -export default function ChatComposerAttachButtonPlayground() { - const [icon, setIcon] = React.useState('paperclip'); - const [accept, setAccept] = React.useState('image/*,application/pdf'); - const [disabled, setDisabled] = React.useState(false); - const classesCustomizations = useCustomizations(CLASS_DEFS); - - const wrapperSx = classesCustomizations.toClassesSx(); - - return ( - - props - - composition - - features.attachments (parent) - - - } - preview={ - - - s.trim()), - }, - }} - > - - - - {icons[icon]} - - - - - - } - /> - ); -} diff --git a/docs/data/chat/behavior/attachments/ChatComposerAttachmentListPlayground.js b/docs/data/chat/behavior/attachments/ChatComposerAttachmentListPlayground.js deleted file mode 100644 index 493acf13665d9..0000000000000 --- a/docs/data/chat/behavior/attachments/ChatComposerAttachmentListPlayground.js +++ /dev/null @@ -1,113 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { ChatComposerAttachmentList } from '@mui/x-chat'; -import { useChatStore } from '@mui/x-chat/headless'; -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { ScopedChat } from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { emptyConversation } from 'docs/src/modules/components/chat-playground/sharedFixtures'; -import { - ChoiceControl, - DividerLabel, - NumberControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; - -const POOL = [ - { name: 'design-spec.pdf', type: 'application/pdf', size: 134_512 }, - { name: 'screenshot.png', type: 'image/png', size: 982_146 }, - { name: 'release-notes.md', type: 'text/markdown', size: 4_220 }, - { name: 'palette.svg', type: 'image/svg+xml', size: 18_734 }, - { name: 'spec-v2.docx', type: 'application/vnd.openxmlformats', size: 76_891 }, -]; - -const PROGRESS_BY_STATUS = { - queued: 0, - uploading: 45, - uploaded: 100, - error: 0, -}; - -function makeDraftAttachments(files, status) { - return files.map((spec, index) => { - const file = new File(['placeholder'], spec.name, { type: spec.type }); - try { - Object.defineProperty(file, 'size', { value: spec.size }); - } catch { - // size is read-only in some runtimes; the preview still renders the chip. - } - return { - localId: `demo-attachment-${index}-${spec.name.replace(/[^a-z0-9]+/gi, '-').toLowerCase()}`, - file, - status, - progress: PROGRESS_BY_STATUS[status], - }; - }); -} - -function AttachmentsEffect({ files, status }) { - const store = useChatStore(); - React.useEffect(() => { - store.setComposerAttachments(makeDraftAttachments(files, status)); - return () => { - store.setComposerAttachments([]); - }; - }, [store, files, status]); - return null; -} - -const CLASS_DEFS = [ - { - name: 'attachmentList', - selector: '.MuiChatComposer-attachmentList', - description: 'The pending attachments row above the textarea.', - }, -]; - -export default function ChatComposerAttachmentListPlayground() { - const [count, setCount] = React.useState(2); - const [status, setStatus] = React.useState('uploaded'); - const classesCustomizations = useCustomizations(CLASS_DEFS); - const files = React.useMemo(() => POOL.slice(0, count), [count]); - - const wrapperSx = classesCustomizations.toClassesSx(); - - return ( - - state (store) - - - - } - preview={ - - - - - - - } - /> - ); -} diff --git a/docs/data/chat/behavior/attachments/attachments.md b/docs/data/chat/behavior/attachments/attachments.md index e82f9f2da4483..c6343a0925f54 100644 --- a/docs/data/chat/behavior/attachments/attachments.md +++ b/docs/data/chat/behavior/attachments/attachments.md @@ -20,9 +20,9 @@ Selected files are queued as draft attachments and previewed in the composer are The demos below let you tune the attach button and the pending-attachment list: The attachment-list playground seeds draft attachments directly into the chat store so that every status can be previewed without uploading files — in an app, attachments are added through the file picker or `addAttachment()`. -{{"demo": "ChatComposerAttachButtonPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-composer-attach-button-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} -{{"demo": "ChatComposerAttachmentListPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-composer-attachment-list-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Disabling attachments @@ -33,7 +33,7 @@ To hide the attach button entirely, set the `attachments` feature flag to `false ``` -{{"demo": "../../material/composer/ComposerHiddenAttachButton.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://../../material/composer/demos/composer-hidden-attach-button/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Validating attachments @@ -59,7 +59,7 @@ Pass a configuration object to the `attachments` feature flag to control which f Try attaching a file that is not an image or PDF, or one larger than 500 KB: -{{"demo": "AttachmentValidation.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/attachment-validation/index.ts", "bg": "inline", "collapseToEmpty": true}} ### Attachments configuration reference diff --git a/docs/data/chat/behavior/attachments/AttachmentValidation.tsx b/docs/data/chat/behavior/attachments/demos/attachment-validation/AttachmentValidation.tsx similarity index 97% rename from docs/data/chat/behavior/attachments/AttachmentValidation.tsx rename to docs/data/chat/behavior/attachments/demos/attachment-validation/AttachmentValidation.tsx index 37563dec7a386..d2c3b88e55a35 100644 --- a/docs/data/chat/behavior/attachments/AttachmentValidation.tsx +++ b/docs/data/chat/behavior/attachments/demos/attachment-validation/AttachmentValidation.tsx @@ -18,6 +18,7 @@ const REASON_LABELS: Record = { }; export default function AttachmentValidation() { + // @focus-start @padding 1 const [rejections, setRejections] = React.useState([]); return ( @@ -53,4 +54,5 @@ export default function AttachmentValidation() { )}
); + // @focus-end } diff --git a/docs/data/chat/behavior/attachments/demos/attachment-validation/client.ts b/docs/data/chat/behavior/attachments/demos/attachment-validation/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/behavior/attachments/demos/attachment-validation/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/behavior/attachments/demos/attachment-validation/index.ts b/docs/data/chat/behavior/attachments/demos/attachment-validation/index.ts new file mode 100644 index 0000000000000..3a4e56e6f3cc9 --- /dev/null +++ b/docs/data/chat/behavior/attachments/demos/attachment-validation/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AttachmentValidation from './AttachmentValidation'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AttachmentValidation, { ClientProvider }); diff --git a/docs/data/chat/behavior/attachments/ChatComposerAttachButtonPlayground.tsx b/docs/data/chat/behavior/attachments/demos/chat-composer-attach-button-playground/ChatComposerAttachButtonPlayground.tsx similarity index 93% rename from docs/data/chat/behavior/attachments/ChatComposerAttachButtonPlayground.tsx rename to docs/data/chat/behavior/attachments/demos/chat-composer-attach-button-playground/ChatComposerAttachButtonPlayground.tsx index 0f1ac281457ae..8776d6cd98db9 100644 --- a/docs/data/chat/behavior/attachments/ChatComposerAttachButtonPlayground.tsx +++ b/docs/data/chat/behavior/attachments/demos/chat-composer-attach-button-playground/ChatComposerAttachButtonPlayground.tsx @@ -16,10 +16,8 @@ import { SwitchControl, TextControl, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; type IconChoice = 'paperclip' | 'image'; @@ -39,6 +37,7 @@ const CLASS_DEFS: ReadonlyArray> = [ ]; export default function ChatComposerAttachButtonPlayground() { + // @focus-start @padding 1 const [icon, setIcon] = React.useState('paperclip'); const [accept, setAccept] = React.useState('image/*,application/pdf'); const [disabled, setDisabled] = React.useState(false); @@ -103,4 +102,5 @@ export default function ChatComposerAttachButtonPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/behavior/attachments/demos/chat-composer-attach-button-playground/client.ts b/docs/data/chat/behavior/attachments/demos/chat-composer-attach-button-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/behavior/attachments/demos/chat-composer-attach-button-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/behavior/attachments/demos/chat-composer-attach-button-playground/index.ts b/docs/data/chat/behavior/attachments/demos/chat-composer-attach-button-playground/index.ts new file mode 100644 index 0000000000000..34597f5424806 --- /dev/null +++ b/docs/data/chat/behavior/attachments/demos/chat-composer-attach-button-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatComposerAttachButtonPlayground from './ChatComposerAttachButtonPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatComposerAttachButtonPlayground, { ClientProvider }); diff --git a/docs/data/chat/behavior/attachments/ChatComposerAttachmentListPlayground.tsx b/docs/data/chat/behavior/attachments/demos/chat-composer-attachment-list-playground/ChatComposerAttachmentListPlayground.tsx similarity index 91% rename from docs/data/chat/behavior/attachments/ChatComposerAttachmentListPlayground.tsx rename to docs/data/chat/behavior/attachments/demos/chat-composer-attachment-list-playground/ChatComposerAttachmentListPlayground.tsx index 83f9fc8fc94b2..3d670e8eedf26 100644 --- a/docs/data/chat/behavior/attachments/ChatComposerAttachmentListPlayground.tsx +++ b/docs/data/chat/behavior/attachments/demos/chat-composer-attachment-list-playground/ChatComposerAttachmentListPlayground.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import { ChatComposerAttachmentList } from '@mui/x-chat'; -import { useChatStore, type ChatDraftAttachmentStatus } from '@mui/x-chat/headless'; +import { useChatStore } from '@mui/x-chat/headless'; +import type { ChatDraftAttachmentStatus } from '@mui/x-chat/headless'; import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; import { ScopedChat } from 'docs/src/modules/components/chat-playground/sharedProviders'; import { emptyConversation } from 'docs/src/modules/components/chat-playground/sharedFixtures'; @@ -10,10 +11,8 @@ import { DividerLabel, NumberControl, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; interface FileSpec { name: string; @@ -81,6 +80,7 @@ const CLASS_DEFS: ReadonlyArray> = [ ]; export default function ChatComposerAttachmentListPlayground() { + // @focus-start @padding 1 const [count, setCount] = React.useState(2); const [status, setStatus] = React.useState('uploaded'); const classesCustomizations = useCustomizations(CLASS_DEFS); @@ -127,4 +127,5 @@ export default function ChatComposerAttachmentListPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/behavior/attachments/demos/chat-composer-attachment-list-playground/client.ts b/docs/data/chat/behavior/attachments/demos/chat-composer-attachment-list-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/behavior/attachments/demos/chat-composer-attachment-list-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/behavior/attachments/demos/chat-composer-attachment-list-playground/index.ts b/docs/data/chat/behavior/attachments/demos/chat-composer-attachment-list-playground/index.ts new file mode 100644 index 0000000000000..9255bd87d10f1 --- /dev/null +++ b/docs/data/chat/behavior/attachments/demos/chat-composer-attachment-list-playground/index.ts @@ -0,0 +1,8 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatComposerAttachmentListPlayground from './ChatComposerAttachmentListPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatComposerAttachmentListPlayground, { + ClientProvider, +}); diff --git a/docs/data/chat/behavior/error-handling/ChatMessageErrorPlayground.js b/docs/data/chat/behavior/error-handling/ChatMessageErrorPlayground.js deleted file mode 100644 index 820700f79b7bf..0000000000000 --- a/docs/data/chat/behavior/error-handling/ChatMessageErrorPlayground.js +++ /dev/null @@ -1,143 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import { ChatMessage } from '@mui/x-chat'; - -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { - MessageErrorEffect, - ScopedChat, -} from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { - ChoiceControl, - DividerLabel, - SwitchControl, - TextControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; -import { users } from 'docs/src/modules/components/chat-playground/data'; - -const conversation = { - id: 'error-playground', - title: 'Error preview', - participants: [users.me, users.assistant], -}; - -const message = { - // A user message: the built-in retry button only renders for user messages - // (retrying re-sends the original prompt), so the `retryable` toggle below is - // only meaningful here. - id: 'error-msg', - conversationId: conversation.id, - role: 'user', - author: users.me, - createdAt: '2026-05-03T10:00:00.000Z', - status: 'error', - parts: [{ type: 'text', text: 'This message failed to send.' }], -}; - -const CLASS_DEFS = [ - { name: 'root', description: 'The error card root element.' }, - { - name: 'message', - selector: '.MuiChatMessageError-message', - description: 'The error message text.', - }, - { - name: 'retryButton', - selector: '.MuiChatMessageError-retryButton', - description: 'The retry button.', - }, -]; - -export default function ChatMessageErrorPlayground() { - const [enabled, setEnabled] = React.useState(true); - const [code, setCode] = React.useState('SEND_ERROR'); - const [retryable, setRetryable] = React.useState(true); - const [text, setText] = React.useState('Could not reach the chat server.'); - const classesCustomizations = useCustomizations(CLASS_DEFS); - - const errorRowSx = classesCustomizations.toClassesSx(); - - return ( - - state (message error) - - - - - - } - preview={ - - - - {/* - The retry button rendered inside ChatMessageError already calls the - public useChat().retry(messageId) action for you — no extra wiring - is needed here. - */} - - - {enabled - ? `ChatError — code: ${code} · retryable: ${retryable}` - : 'Error disabled'} - - - - } - /> - ); -} diff --git a/docs/data/chat/behavior/error-handling/RetryRecovery.js b/docs/data/chat/behavior/error-handling/RetryRecovery.js deleted file mode 100644 index f439bb74f95f1..0000000000000 --- a/docs/data/chat/behavior/error-handling/RetryRecovery.js +++ /dev/null @@ -1,80 +0,0 @@ -'use client'; -import * as React from 'react'; -import Alert from '@mui/material/Alert'; -import { ChatBox } from '@mui/x-chat'; - -import { - minimalConversation, - minimalMessages, - demoUsers, -} from 'docs/data/chat/core/examples/shared/demoData'; -import { - createChunkStream, - createTextResponseChunks, -} from 'docs/data/chat/core/examples/shared/demoUtils'; - -const demoMembers = [demoUsers.you, demoUsers.agent]; - -function useFlakyAdapter() { - // Tracks the message ids that already failed once. The first attempt for a - // given id always throws; the retry (same id) succeeds. - const failedOnce = React.useRef(new Set()); - - return React.useMemo( - () => ({ - async sendMessage({ message }) { - if (!failedOnce.current.has(message.id)) { - failedOnce.current.add(message.id); - throw new Error( - 'Network error: the first attempt always fails in this demo.', - ); - } - - return createChunkStream( - createTextResponseChunks( - `${message.id}-reply`, - 'Recovered! The retry reached the server and this reply streamed in.', - { author: demoUsers.agent }, - ), - ); - }, - }), - [], - ); -} - -export default function RetryRecovery() { - const adapter = useFlakyAdapter(); - const [error, setError] = React.useState(null); - - return ( -
- { - // A successful retry streams a reply to completion — clear the banner. - if (!isError && !isAbort && !isDisconnect) { - setError(null); - } - }} - sx={{ - height: 460, - border: '1px solid', - borderColor: 'divider', - borderRadius: 1, - }} - /> - {error && ( - - {error.code} · {error.source} · recoverable: {String(error.recoverable)} · - retryable: {String(error.retryable ?? false)} - - )} -
- ); -} diff --git a/docs/data/chat/behavior/error-handling/ChatMessageErrorPlayground.tsx b/docs/data/chat/behavior/error-handling/demos/chat-message-error-playground/ChatMessageErrorPlayground.tsx similarity index 95% rename from docs/data/chat/behavior/error-handling/ChatMessageErrorPlayground.tsx rename to docs/data/chat/behavior/error-handling/demos/chat-message-error-playground/ChatMessageErrorPlayground.tsx index 001790ce1ea70..2b0cfdbb9cffb 100644 --- a/docs/data/chat/behavior/error-handling/ChatMessageErrorPlayground.tsx +++ b/docs/data/chat/behavior/error-handling/demos/chat-message-error-playground/ChatMessageErrorPlayground.tsx @@ -17,10 +17,8 @@ import { SwitchControl, TextControl, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; import { users } from 'docs/src/modules/components/chat-playground/data'; const conversation: ChatConversation = { @@ -61,6 +59,7 @@ const CLASS_DEFS: ReadonlyArray> = [ ]; export default function ChatMessageErrorPlayground() { + // @focus-start @padding 1 const [enabled, setEnabled] = React.useState(true); const [code, setCode] = React.useState('SEND_ERROR'); const [retryable, setRetryable] = React.useState(true); @@ -152,4 +151,5 @@ export default function ChatMessageErrorPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/behavior/error-handling/demos/chat-message-error-playground/client.ts b/docs/data/chat/behavior/error-handling/demos/chat-message-error-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/behavior/error-handling/demos/chat-message-error-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/behavior/error-handling/demos/chat-message-error-playground/index.ts b/docs/data/chat/behavior/error-handling/demos/chat-message-error-playground/index.ts new file mode 100644 index 0000000000000..af28f9ab2255c --- /dev/null +++ b/docs/data/chat/behavior/error-handling/demos/chat-message-error-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatMessageErrorPlayground from './ChatMessageErrorPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatMessageErrorPlayground, { ClientProvider }); diff --git a/docs/data/chat/behavior/error-handling/RetryRecovery.tsx b/docs/data/chat/behavior/error-handling/demos/retry-recovery/RetryRecovery.tsx similarity index 98% rename from docs/data/chat/behavior/error-handling/RetryRecovery.tsx rename to docs/data/chat/behavior/error-handling/demos/retry-recovery/RetryRecovery.tsx index 065fb450ab9ac..6883988736ebf 100644 --- a/docs/data/chat/behavior/error-handling/RetryRecovery.tsx +++ b/docs/data/chat/behavior/error-handling/demos/retry-recovery/RetryRecovery.tsx @@ -44,6 +44,7 @@ function useFlakyAdapter(): ChatAdapter { } export default function RetryRecovery() { + // @focus-start @padding 1 const adapter = useFlakyAdapter(); const [error, setError] = React.useState(null); @@ -77,4 +78,5 @@ export default function RetryRecovery() { )} ); + // @focus-end } diff --git a/docs/data/chat/behavior/error-handling/demos/retry-recovery/client.ts b/docs/data/chat/behavior/error-handling/demos/retry-recovery/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/behavior/error-handling/demos/retry-recovery/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/behavior/error-handling/demos/retry-recovery/index.ts b/docs/data/chat/behavior/error-handling/demos/retry-recovery/index.ts new file mode 100644 index 0000000000000..b70062fb34ed9 --- /dev/null +++ b/docs/data/chat/behavior/error-handling/demos/retry-recovery/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RetryRecovery from './RetryRecovery'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RetryRecovery, { ClientProvider }); diff --git a/docs/data/chat/behavior/error-handling/error-handling.md b/docs/data/chat/behavior/error-handling/error-handling.md index 43917097e84ae..e2294e783c5a1 100644 --- a/docs/data/chat/behavior/error-handling/error-handling.md +++ b/docs/data/chat/behavior/error-handling/error-handling.md @@ -19,7 +19,7 @@ You don't need to catch errors inside adapter methods. The runtime handles them The demo below lets you toggle a message error and observe the `ChatMessageError` component rendered under the failed message: -{{"demo": "ChatMessageErrorPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-message-error-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Error propagation @@ -49,7 +49,7 @@ Use the `onError` prop on `ChatBox` to handle errors at the application level: The demo below shows the default error UI surfaced by `ChatBox` when `sendMessage()` fails: -{{"demo": "../../material/examples/error-state/ErrorState.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://../../material/examples/error-state/demos/error-state/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Error object structure @@ -133,7 +133,7 @@ function RetryButton({ messageId }: { messageId: string }) { The demo below fails the first send attempt, then succeeds when you click **Retry**: -{{"demo": "RetryRecovery.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://./demos/retry-recovery/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Error from adapter methods diff --git a/docs/data/chat/behavior/scrolling/AutoScrollBuffer.js b/docs/data/chat/behavior/scrolling/AutoScrollBuffer.js deleted file mode 100644 index d210b6820557f..0000000000000 --- a/docs/data/chat/behavior/scrolling/AutoScrollBuffer.js +++ /dev/null @@ -1,115 +0,0 @@ -'use client'; -import * as React from 'react'; -import Box from '@mui/material/Box'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Stack from '@mui/material/Stack'; -import Switch from '@mui/material/Switch'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import Typography from '@mui/material/Typography'; -import { ChatBox } from '@mui/x-chat'; - -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - createTextMessage, - demoUsers, - minimalConversation, -} from 'docs/data/chat/core/examples/shared/demoData'; - -// A handful of short messages so the list overflows and there is room to scroll -// up while a reply streams in. -const filler = Array.from({ length: 12 }, (_, i) => - createTextMessage({ - id: `buffer-msg-${i}`, - conversationId: minimalConversation.id, - role: i % 2 === 0 ? 'user' : 'assistant', - createdAt: new Date(Date.UTC(2026, 2, 15, 9, 30, i)).toISOString(), - text: - i % 2 === 0 - ? `Question ${i / 2 + 1}: how does the buffer threshold work?` - : `Answer ${Math.ceil(i / 2)}: auto-scroll keeps following until you scroll past it.`, - }), -); - -const initialMessages = filler; - -// A long, multi-sentence reply so streaming lasts long enough to scroll during it. -const longReply = [ - 'Auto-scroll keeps the newest content in view while a response streams in.', - 'It only follows along while you stay close to the bottom of the list.', - 'The buffer is the distance, in pixels, from the bottom where following stops.', - 'Scroll up past the buffer and the list stops chasing the stream.', - 'That lets you read earlier messages without the view yanking back down.', - 'Scroll back within the buffer and auto-scroll resumes immediately.', - 'A larger buffer keeps following even when you nudge the list up a little.', - 'A smaller buffer pauses sooner, the moment you start scrolling away.', - 'When auto-scroll is off, the stream never moves the viewport for you.', - 'Use the scroll-to-bottom affordance to jump back to the latest message.', -].join(' '); - -const adapter = createEchoAdapter({ - agent: demoUsers.agent, - delayMs: 120, - respond: () => longReply, -}); - -export default function AutoScrollBuffer() { - const [autoScroll, setAutoScroll] = React.useState(true); - const [buffer, setBuffer] = React.useState(150); - - return ( - - - setAutoScroll(event.target.checked)} - /> - } - label="Auto-scroll" - /> -
- - buffer (px) - - { - if (next != null) { - setBuffer(next); - } - }} - > - 150 - 300 - 600 - -
- - - - ); -} diff --git a/docs/data/chat/behavior/scrolling/ChatScrollToBottomAffordancePlayground.js b/docs/data/chat/behavior/scrolling/ChatScrollToBottomAffordancePlayground.js deleted file mode 100644 index a1c0ecdc11d2d..0000000000000 --- a/docs/data/chat/behavior/scrolling/ChatScrollToBottomAffordancePlayground.js +++ /dev/null @@ -1,177 +0,0 @@ -import * as React from 'react'; -import Alert from '@mui/material/Alert'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; - -import { ChatMessageList, ChatScrollToBottomAffordance } from '@mui/x-chat'; -import { useChat, useChatStore } from '@mui/x-chat/headless'; -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { ScopedChat } from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { MessageBubble } from 'docs/src/modules/components/chat-playground/MessageBubble'; -import { - ChoiceControl, - DividerLabel, - NumberControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; -import { users } from 'docs/src/modules/components/chat-playground/data'; - -const conversation = { - id: 'scroll-playground', - title: 'Scroll preview', - participants: [users.me, users.assistant], -}; - -function buildMessages(count) { - return Array.from({ length: count }, (_, i) => ({ - id: `scroll-msg-${i}`, - conversationId: conversation.id, - role: i % 2 === 0 ? 'assistant' : 'user', - author: i % 2 === 0 ? users.assistant : users.me, - createdAt: new Date(Date.UTC(2026, 4, 3, 9, 0, i)).toISOString(), - status: 'read', - parts: [{ type: 'text', text: `Message ${i + 1} of ${count}` }], - })); -} - -function buildAppendedMessage(n) { - return { - id: `scroll-extra-${n}`, - conversationId: conversation.id, - role: 'assistant', - author: users.assistant, - createdAt: new Date(Date.UTC(2026, 4, 3, 10, 0, n)).toISOString(), - status: 'read', - parts: [ - { - type: 'text', - text: `New message #${n} arrived while you were scrolled up.`, - }, - ], - }; -} - -const CLASS_DEFS = [ - { name: 'root', description: 'The floating affordance button.' }, -]; - -/** - * Renders the live message list and appends a message on demand. - * - * The list is fed from live store state (`useChat().messages`), not the seed - * array, so an appended message shows up as a pure append — which is what grows - * the affordance's `unseenMessageCount` badge while the user is scrolled up. - * - * `appendRequest` is a counter owned by the parent (bumped by the "Append - * message" button). Adding a message to a chat is a store operation, so we call - * the public `useChatStore().addMessage()` from inside the provider rather than - * plumbing a callback back out to the button. Each new counter value appends one - * assistant message; `addMessage` is idempotent per id, so re-runs are harmless. - */ -function ScrollPreview({ scrollBehavior, buttonSx, appendRequest }) { - const { messages: liveMessages } = useChat(); - const store = useChatStore(); - - React.useEffect(() => { - if (appendRequest > 0) { - store.addMessage(buildAppendedMessage(appendRequest)); - } - }, [store, appendRequest]); - - return ( - - m.id)} - autoScroll={false} - renderItem={({ id }) => } - overlay={ - - } - /> - - ); -} - -export default function ChatScrollToBottomAffordancePlayground() { - const [count, setCount] = React.useState(20); - const [scrollBehavior, setScrollBehavior] = React.useState('smooth'); - // Bumped by the "Append message" button; consumed by `ScrollPreview` inside - // the provider to append one message to the live store. - const [appendRequest, setAppendRequest] = React.useState(0); - const classesCustomizations = useCustomizations(CLASS_DEFS); - const messages = React.useMemo(() => buildMessages(count), [count]); - - const buttonSx = classesCustomizations.toClassesSx(); - - return ( - - props - - fixture data - { - setCount(next); - setAppendRequest(0); - }} - /> - - - Scroll up inside the preview to make the affordance appear. Auto-scroll - is disabled in this preview so the affordance stays reachable. Append - messages while scrolled up to see the unseen-count badge. - - - } - preview={ - - - - } - /> - ); -} diff --git a/docs/data/chat/behavior/scrolling/AutoScrollBuffer.tsx b/docs/data/chat/behavior/scrolling/demos/auto-scroll-buffer/AutoScrollBuffer.tsx similarity index 98% rename from docs/data/chat/behavior/scrolling/AutoScrollBuffer.tsx rename to docs/data/chat/behavior/scrolling/demos/auto-scroll-buffer/AutoScrollBuffer.tsx index 50c1d5e08de0d..e45fa935fe68d 100644 --- a/docs/data/chat/behavior/scrolling/AutoScrollBuffer.tsx +++ b/docs/data/chat/behavior/scrolling/demos/auto-scroll-buffer/AutoScrollBuffer.tsx @@ -56,6 +56,7 @@ const adapter = createEchoAdapter({ type Buffer = 150 | 300 | 600; export default function AutoScrollBuffer() { + // @focus-start @padding 1 const [autoScroll, setAutoScroll] = React.useState(true); const [buffer, setBuffer] = React.useState(150); @@ -114,4 +115,5 @@ export default function AutoScrollBuffer() { /> ); + // @focus-end } diff --git a/docs/data/chat/behavior/scrolling/demos/auto-scroll-buffer/client.ts b/docs/data/chat/behavior/scrolling/demos/auto-scroll-buffer/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/behavior/scrolling/demos/auto-scroll-buffer/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/behavior/scrolling/demos/auto-scroll-buffer/index.ts b/docs/data/chat/behavior/scrolling/demos/auto-scroll-buffer/index.ts new file mode 100644 index 0000000000000..026fb4e965bc2 --- /dev/null +++ b/docs/data/chat/behavior/scrolling/demos/auto-scroll-buffer/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AutoScrollBuffer from './AutoScrollBuffer'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AutoScrollBuffer, { ClientProvider }); diff --git a/docs/data/chat/behavior/scrolling/ChatScrollToBottomAffordancePlayground.tsx b/docs/data/chat/behavior/scrolling/demos/chat-scroll-to-bottom-affordance-playground/ChatScrollToBottomAffordancePlayground.tsx similarity index 94% rename from docs/data/chat/behavior/scrolling/ChatScrollToBottomAffordancePlayground.tsx rename to docs/data/chat/behavior/scrolling/demos/chat-scroll-to-bottom-affordance-playground/ChatScrollToBottomAffordancePlayground.tsx index 71ce13d8161ce..0aec6b53b992c 100644 --- a/docs/data/chat/behavior/scrolling/ChatScrollToBottomAffordancePlayground.tsx +++ b/docs/data/chat/behavior/scrolling/demos/chat-scroll-to-bottom-affordance-playground/ChatScrollToBottomAffordancePlayground.tsx @@ -4,12 +4,8 @@ import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import type { SxProps, Theme } from '@mui/system'; import { ChatMessageList, ChatScrollToBottomAffordance } from '@mui/x-chat'; -import { - useChat, - useChatStore, - type ChatConversation, - type ChatMessage, -} from '@mui/x-chat/headless'; +import { useChat, useChatStore } from '@mui/x-chat/headless'; +import type { ChatConversation, ChatMessage } from '@mui/x-chat/headless'; import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; import { ScopedChat } from 'docs/src/modules/components/chat-playground/sharedProviders'; import { MessageBubble } from 'docs/src/modules/components/chat-playground/MessageBubble'; @@ -18,10 +14,8 @@ import { DividerLabel, NumberControl, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; import { users } from 'docs/src/modules/components/chat-playground/data'; const conversation: ChatConversation = { @@ -125,6 +119,7 @@ interface ScrollPreviewProps { } export default function ChatScrollToBottomAffordancePlayground() { + // @focus-start @padding 1 const [count, setCount] = React.useState(20); const [scrollBehavior, setScrollBehavior] = React.useState('smooth'); @@ -197,4 +192,5 @@ export default function ChatScrollToBottomAffordancePlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/behavior/scrolling/demos/chat-scroll-to-bottom-affordance-playground/client.ts b/docs/data/chat/behavior/scrolling/demos/chat-scroll-to-bottom-affordance-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/behavior/scrolling/demos/chat-scroll-to-bottom-affordance-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/behavior/scrolling/demos/chat-scroll-to-bottom-affordance-playground/index.ts b/docs/data/chat/behavior/scrolling/demos/chat-scroll-to-bottom-affordance-playground/index.ts new file mode 100644 index 0000000000000..a3e7cb17e9352 --- /dev/null +++ b/docs/data/chat/behavior/scrolling/demos/chat-scroll-to-bottom-affordance-playground/index.ts @@ -0,0 +1,8 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatScrollToBottomAffordancePlayground from './ChatScrollToBottomAffordancePlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatScrollToBottomAffordancePlayground, { + ClientProvider, +}); diff --git a/docs/data/chat/behavior/scrolling/scrolling.md b/docs/data/chat/behavior/scrolling/scrolling.md index a033f1587159d..0a70bfea5d209 100644 --- a/docs/data/chat/behavior/scrolling/scrolling.md +++ b/docs/data/chat/behavior/scrolling/scrolling.md @@ -16,7 +16,7 @@ components: ChatMessageList, ChatScrollToBottomAffordance Try the scroll-to-bottom affordance live: scroll up inside the preview to reveal the jump-to-latest button, and try each `scrollBehavior`. -{{"demo": "ChatScrollToBottomAffordancePlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-scroll-to-bottom-affordance-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} The message list automatically manages scroll position so new messages and streaming content stay visible without user intervention. Users can still scroll up to read earlier messages without losing their place. @@ -52,7 +52,7 @@ When auto-scroll is disabled, users can still scroll to the bottom manually usin Send a message, then scroll up while the long reply streams in — auto-scroll pauses once you're more than `buffer` pixels from the bottom and resumes when you scroll back within it. -{{"demo": "AutoScrollBuffer.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://./demos/auto-scroll-buffer/index.ts", "bg": "inline", "collapseToEmpty": true}} :::info Scrolling to the bottom when the user sends a message is always active, regardless of the `autoScroll` setting. diff --git a/docs/data/chat/behavior/streaming/ChatStreamingIndicatorDemo.js b/docs/data/chat/behavior/streaming/ChatStreamingIndicatorDemo.js deleted file mode 100644 index 686bf72043dfc..0000000000000 --- a/docs/data/chat/behavior/streaming/ChatStreamingIndicatorDemo.js +++ /dev/null @@ -1,197 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import { ChatBox } from '@mui/x-chat'; - -import { users } from 'docs/src/modules/components/chat-playground/data'; - -const conversation = { - id: 'streaming-indicator-demo', - title: 'Streaming indicator preview', - participants: [users.me, users.assistant], -}; - -const greeting = { - id: 'streaming-indicator-greeting', - conversationId: conversation.id, - role: 'assistant', - author: users.assistant, - createdAt: '2026-05-03T10:00:00.000Z', - status: 'sent', - parts: [ - { - type: 'text', - text: 'Send a message — the dots appear while I "think", then follow the reply as it streams.', - }, - ], -}; - -let replyCounter = 0; -function nextReplyId() { - replyCounter += 1; - return `streaming-indicator-reply-${replyCounter}`; -} - -// `thinkingDelay` holds back the `start` chunk to simulate model latency — -// that gap is the indicator's waiting phase. Once `start` lands, the dots -// move inside the assistant bubble until `finish`. -function createStream(text, thinkingDelay) { - const messageId = nextReplyId(); - const words = text.split(' '); - const chunks = [ - { type: 'start', messageId, author: users.assistant }, - { type: 'text-start', id: `${messageId}-text` }, - ...words.map((word, index) => ({ - type: 'text-delta', - id: `${messageId}-text`, - delta: index === 0 ? word : ` ${word}`, - })), - { type: 'text-end', id: `${messageId}-text` }, - { type: 'finish', messageId, finishReason: 'stop' }, - ]; - - const timers = []; - let cancelled = false; - - return new ReadableStream({ - start(controller) { - chunks.forEach((chunk, index) => { - timers.push( - setTimeout( - () => { - if (cancelled) { - return; - } - controller.enqueue(chunk); - if (index === chunks.length - 1) { - controller.close(); - } - }, - thinkingDelay + 120 * index, - ), - ); - }); - }, - cancel() { - cancelled = true; - timers.forEach((timer) => clearTimeout(timer)); - }, - }); -} - -const MODE_OPTIONS = [ - { label: "'auto' (default)", value: 'auto' }, - { label: 'true (always)', value: 'always' }, - { label: 'false (never)', value: 'never' }, -]; - -const FEATURE_VALUE = { - auto: 'auto', - always: true, - never: false, -}; - -const THINKING_OPTIONS = [ - { label: '1 s', value: 1000 }, - { label: '2.5 s', value: 2500 }, - { label: '5 s', value: 5000 }, -]; - -export default function ChatStreamingIndicatorDemo() { - const [mode, setMode] = React.useState('auto'); - const [thinkingDelay, setThinkingDelay] = React.useState(2500); - - // Read the latest delay through a ref so the adapter identity stays stable - // while still honoring the current selector value on each send. - const thinkingDelayRef = React.useRef(thinkingDelay); - thinkingDelayRef.current = thinkingDelay; - - const adapter = React.useMemo( - () => ({ - async listMessages() { - return { messages: [greeting], hasMore: false }; - }, - async sendMessage({ message }) { - const prompt = message.parts - .map((part) => (part.type === 'text' ? part.text : '')) - .join(' ') - .trim(); - const reply = - prompt.length === 0 - ? 'The dots covered the silence while this reply was on its way.' - : `You said: "${prompt}". The animated dots bridged the wait, and now they trail this reply until it finishes streaming.`; - return createStream(reply, thinkingDelayRef.current); - }, - }), - [], - ); - - return ( - - - - - features.streamingIndicator - - { - if (value !== null) { - setMode(value); - } - }} - aria-label="Streaming indicator mode" - > - {MODE_OPTIONS.map((option) => ( - - {option.label} - - ))} - - - - - Thinking delay - - { - if (value !== null) { - setThinkingDelay(value); - } - }} - aria-label="Thinking delay" - > - {THINKING_OPTIONS.map((option) => ( - - {option.label} - - ))} - - - - - - - - ); -} diff --git a/docs/data/chat/behavior/streaming/ChatStreamingPlayground.js b/docs/data/chat/behavior/streaming/ChatStreamingPlayground.js deleted file mode 100644 index c1a730f7da947..0000000000000 --- a/docs/data/chat/behavior/streaming/ChatStreamingPlayground.js +++ /dev/null @@ -1,192 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import { ChatBox } from '@mui/x-chat'; - -import { users } from 'docs/src/modules/components/chat-playground/data'; - -const conversation = { - id: 'streaming-playground', - title: 'Streaming preview', - participants: [users.me, users.assistant], -}; - -const greeting = { - id: 'streaming-greeting', - conversationId: conversation.id, - role: 'assistant', - author: users.assistant, - createdAt: '2026-05-03T10:00:00.000Z', - status: 'sent', - parts: [ - { - type: 'text', - text: 'Ask me anything — I will stream the reply back one word at a time.', - }, - ], -}; - -let replyCounter = 0; -function nextReplyId() { - replyCounter += 1; - return `streaming-reply-${replyCounter}`; -} - -// Mirrors the "Building a stream" snippet: start → text-start → one -// text-delta per word → text-end → finish. Honors cancel() so the composer -// stop button clears pending timers and stops enqueuing mid-stream. -function createStream(text, chunkDelay) { - const messageId = nextReplyId(); - const words = text.split(' '); - const chunks = [ - { type: 'start', messageId, author: users.assistant }, - { type: 'text-start', id: `${messageId}-text` }, - ...words.map((word, index) => ({ - type: 'text-delta', - id: `${messageId}-text`, - delta: index === 0 ? word : ` ${word}`, - })), - { type: 'text-end', id: `${messageId}-text` }, - { type: 'finish', messageId, finishReason: 'stop' }, - ]; - - const timers = []; - let cancelled = false; - - return new ReadableStream({ - start(controller) { - chunks.forEach((chunk, index) => { - timers.push( - setTimeout( - () => { - if (cancelled) { - return; - } - controller.enqueue(chunk); - if (index === chunks.length - 1) { - controller.close(); - } - }, - chunkDelay * (index + 1), - ), - ); - }); - }, - cancel() { - cancelled = true; - timers.forEach((timer) => clearTimeout(timer)); - }, - }); -} - -const FLUSH_OPTIONS = [ - { label: '0 ms', value: 0 }, - { label: '16 ms (default)', value: 16 }, - { label: '100 ms', value: 100 }, - { label: '300 ms', value: 300 }, -]; - -const DELAY_OPTIONS = [ - { label: '10 ms', value: 10 }, - { label: '40 ms', value: 40 }, - { label: '120 ms', value: 120 }, -]; - -export default function ChatStreamingPlayground() { - const [flushInterval, setFlushInterval] = React.useState(16); - const [chunkDelay, setChunkDelay] = React.useState(40); - - // Read the latest chunk delay through a ref so the adapter identity stays - // stable while still honoring the current selector value on each send. - const chunkDelayRef = React.useRef(chunkDelay); - chunkDelayRef.current = chunkDelay; - - const adapter = React.useMemo( - () => ({ - async listMessages() { - return { messages: [greeting], hasMore: false }; - }, - async sendMessage({ message }) { - const prompt = message.parts - .map((part) => (part.type === 'text' ? part.text : '')) - .join(' ') - .trim(); - const reply = - prompt.length === 0 - ? 'Type a prompt and watch each word arrive as a separate chunk.' - : `You said: "${prompt}". Here is a streamed reply so you can watch tokens land and feel the flush interval.`; - return createStream(reply, chunkDelayRef.current); - }, - }), - [], - ); - - return ( - - - - - Flush interval - - { - if (value !== null) { - setFlushInterval(value); - } - }} - aria-label="Flush interval" - > - {FLUSH_OPTIONS.map((option) => ( - - {option.label} - - ))} - - - - - Chunk delay - - { - if (value !== null) { - setChunkDelay(value); - } - }} - aria-label="Chunk delay" - > - {DELAY_OPTIONS.map((option) => ( - - {option.label} - - ))} - - - - - - - - ); -} diff --git a/docs/data/chat/behavior/streaming/ChatStreamingIndicatorDemo.tsx b/docs/data/chat/behavior/streaming/demos/chat-streaming-indicator-demo/ChatStreamingIndicatorDemo.tsx similarity index 99% rename from docs/data/chat/behavior/streaming/ChatStreamingIndicatorDemo.tsx rename to docs/data/chat/behavior/streaming/demos/chat-streaming-indicator-demo/ChatStreamingIndicatorDemo.tsx index 4892645a18bd4..4b5d733023967 100644 --- a/docs/data/chat/behavior/streaming/ChatStreamingIndicatorDemo.tsx +++ b/docs/data/chat/behavior/streaming/demos/chat-streaming-indicator-demo/ChatStreamingIndicatorDemo.tsx @@ -108,6 +108,7 @@ const THINKING_OPTIONS = [ ]; export default function ChatStreamingIndicatorDemo() { + // @focus-start @padding 1 const [mode, setMode] = React.useState('auto'); const [thinkingDelay, setThinkingDelay] = React.useState(2500); @@ -201,4 +202,5 @@ export default function ChatStreamingIndicatorDemo() { ); + // @focus-end } diff --git a/docs/data/chat/behavior/streaming/demos/chat-streaming-indicator-demo/client.ts b/docs/data/chat/behavior/streaming/demos/chat-streaming-indicator-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/behavior/streaming/demos/chat-streaming-indicator-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/behavior/streaming/demos/chat-streaming-indicator-demo/index.ts b/docs/data/chat/behavior/streaming/demos/chat-streaming-indicator-demo/index.ts new file mode 100644 index 0000000000000..7547194abaf18 --- /dev/null +++ b/docs/data/chat/behavior/streaming/demos/chat-streaming-indicator-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatStreamingIndicatorDemo from './ChatStreamingIndicatorDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatStreamingIndicatorDemo, { ClientProvider }); diff --git a/docs/data/chat/behavior/streaming/ChatStreamingPlayground.tsx b/docs/data/chat/behavior/streaming/demos/chat-streaming-playground/ChatStreamingPlayground.tsx similarity index 99% rename from docs/data/chat/behavior/streaming/ChatStreamingPlayground.tsx rename to docs/data/chat/behavior/streaming/demos/chat-streaming-playground/ChatStreamingPlayground.tsx index 2b8e84bebafed..dbd47e6c8b01f 100644 --- a/docs/data/chat/behavior/streaming/ChatStreamingPlayground.tsx +++ b/docs/data/chat/behavior/streaming/demos/chat-streaming-playground/ChatStreamingPlayground.tsx @@ -101,6 +101,7 @@ const DELAY_OPTIONS = [ ]; export default function ChatStreamingPlayground() { + // @focus-start @padding 1 const [flushInterval, setFlushInterval] = React.useState(16); const [chunkDelay, setChunkDelay] = React.useState(40); @@ -194,4 +195,5 @@ export default function ChatStreamingPlayground() { ); + // @focus-end } diff --git a/docs/data/chat/behavior/streaming/demos/chat-streaming-playground/client.ts b/docs/data/chat/behavior/streaming/demos/chat-streaming-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/behavior/streaming/demos/chat-streaming-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/behavior/streaming/demos/chat-streaming-playground/index.ts b/docs/data/chat/behavior/streaming/demos/chat-streaming-playground/index.ts new file mode 100644 index 0000000000000..dccf028b2a925 --- /dev/null +++ b/docs/data/chat/behavior/streaming/demos/chat-streaming-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatStreamingPlayground from './ChatStreamingPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatStreamingPlayground, { ClientProvider }); diff --git a/docs/data/chat/behavior/streaming/streaming.md b/docs/data/chat/behavior/streaming/streaming.md index a495d9ace4f48..9b1933bfbb413 100644 --- a/docs/data/chat/behavior/streaming/streaming.md +++ b/docs/data/chat/behavior/streaming/streaming.md @@ -118,7 +118,7 @@ Lower values mean faster visual updates but more store mutations. Higher values reduce mutation frequency at the cost of perceived latency. ::: -{{"demo": "ChatStreamingPlayground.js"}} +{{"component": "file://./demos/chat-streaming-playground/index.ts"}} ## Streaming indicator @@ -128,7 +128,7 @@ The indicator covers two phases: 1. **Waiting** — after the user sends a message and before the `start` chunk arrives, the indicator renders as an incoming assistant row below the last message: the assistant's avatar (when resolvable from `members` or the conversation's `participants`) next to a typing bubble holding the dots. 2. **Streaming** — once the assistant message exists with `status: 'streaming'`, the dots move inside the real assistant bubble, below the streamed content, and disappear when the stream finishes. -{{"demo": "ChatStreamingIndicatorDemo.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-streaming-indicator-demo/index.ts", "bg": "inline", "collapseToEmpty": true}} ### Enabling and disabling diff --git a/docs/data/chat/behavior/suggestions/AutoSubmitSuggestions.js b/docs/data/chat/behavior/suggestions/AutoSubmitSuggestions.js deleted file mode 100644 index 9d8c76bcede46..0000000000000 --- a/docs/data/chat/behavior/suggestions/AutoSubmitSuggestions.js +++ /dev/null @@ -1,26 +0,0 @@ -'use client'; -import * as React from 'react'; -import { ChatBox } from '@mui/x-chat'; -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { minimalConversation } from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter(); - -export default function AutoSubmitSuggestions() { - return ( - - ); -} diff --git a/docs/data/chat/behavior/suggestions/AutoSubmitSuggestions.tsx.preview b/docs/data/chat/behavior/suggestions/AutoSubmitSuggestions.tsx.preview deleted file mode 100644 index 92c227b03ff6e..0000000000000 --- a/docs/data/chat/behavior/suggestions/AutoSubmitSuggestions.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/chat/behavior/suggestions/ChatSuggestionsPlayground.js b/docs/data/chat/behavior/suggestions/ChatSuggestionsPlayground.js deleted file mode 100644 index dafb9150263ef..0000000000000 --- a/docs/data/chat/behavior/suggestions/ChatSuggestionsPlayground.js +++ /dev/null @@ -1,113 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { ChatSuggestions } from '@mui/x-chat'; -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { ScopedChat } from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { - directoryConversations, - emptyConversation, - groupThreadMessages, -} from 'docs/src/modules/components/chat-playground/sharedFixtures'; -import { - DividerLabel, - NumberControl, - SwitchControl, - TextControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; - -const POOL = [ - 'Show me the default ChatComposer', - 'How do I style ChatMessage bubbles?', - 'Render code blocks with syntax highlighting', - 'Wire up RAG sources', - 'Toggle dark mode in MUI X Chat', - 'Customise the conversation list row', - 'Disable attachments on the composer', -]; - -const CLASS_DEFS = [ - { name: 'root', description: 'The root container of the suggestions row.' }, - { - name: 'item', - selector: '.MuiChatSuggestions-item', - description: 'Each suggestion pill.', - }, -]; - -export default function ChatSuggestionsPlayground() { - const [count, setCount] = React.useState(4); - const [autoSubmit, setAutoSubmit] = React.useState(false); - const [alwaysVisible, setAlwaysVisible] = React.useState(false); - const [hasMessages, setHasMessages] = React.useState(false); - const [first, setFirst] = React.useState(POOL[0]); - const classesCustomizations = useCustomizations(CLASS_DEFS); - - const suggestions = React.useMemo(() => { - const list = [first, ...POOL.slice(1)].slice(0, count); - return list; - }, [count, first]); - - const rootSx = classesCustomizations.toClassesSx(); - - return ( - - props - - - preview state - - suggestions data - - - - } - preview={ - - - - - - } - /> - ); -} diff --git a/docs/data/chat/behavior/suggestions/SuggestionsAboveComposer.js b/docs/data/chat/behavior/suggestions/SuggestionsAboveComposer.js deleted file mode 100644 index e1ac61ab4e750..0000000000000 --- a/docs/data/chat/behavior/suggestions/SuggestionsAboveComposer.js +++ /dev/null @@ -1,35 +0,0 @@ -'use client'; -import * as React from 'react'; -import { ChatBox } from '@mui/x-chat'; -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - minimalConversation, - minimalMessages, -} from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter(); - -export default function SuggestionsAboveComposer() { - return ( - - ); -} diff --git a/docs/data/chat/behavior/suggestions/SuggestionsWithLabels.js b/docs/data/chat/behavior/suggestions/SuggestionsWithLabels.js deleted file mode 100644 index 4b2d80bf3e410..0000000000000 --- a/docs/data/chat/behavior/suggestions/SuggestionsWithLabels.js +++ /dev/null @@ -1,39 +0,0 @@ -'use client'; -import * as React from 'react'; -import { ChatBox } from '@mui/x-chat'; -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { minimalConversation } from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter(); - -export default function SuggestionsWithLabels() { - return ( - - ); -} diff --git a/docs/data/chat/behavior/suggestions/AutoSubmitSuggestions.tsx b/docs/data/chat/behavior/suggestions/demos/auto-submit-suggestions/AutoSubmitSuggestions.tsx similarity index 94% rename from docs/data/chat/behavior/suggestions/AutoSubmitSuggestions.tsx rename to docs/data/chat/behavior/suggestions/demos/auto-submit-suggestions/AutoSubmitSuggestions.tsx index 9d8c76bcede46..57ac844cd2511 100644 --- a/docs/data/chat/behavior/suggestions/AutoSubmitSuggestions.tsx +++ b/docs/data/chat/behavior/suggestions/demos/auto-submit-suggestions/AutoSubmitSuggestions.tsx @@ -8,6 +8,7 @@ const adapter = createEchoAdapter(); export default function AutoSubmitSuggestions() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/behavior/suggestions/demos/auto-submit-suggestions/client.ts b/docs/data/chat/behavior/suggestions/demos/auto-submit-suggestions/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/behavior/suggestions/demos/auto-submit-suggestions/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/behavior/suggestions/demos/auto-submit-suggestions/index.ts b/docs/data/chat/behavior/suggestions/demos/auto-submit-suggestions/index.ts new file mode 100644 index 0000000000000..9359261b39654 --- /dev/null +++ b/docs/data/chat/behavior/suggestions/demos/auto-submit-suggestions/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AutoSubmitSuggestions from './AutoSubmitSuggestions'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AutoSubmitSuggestions, { ClientProvider }); diff --git a/docs/data/chat/behavior/suggestions/ChatSuggestionsPlayground.tsx b/docs/data/chat/behavior/suggestions/demos/chat-suggestions-playground/ChatSuggestionsPlayground.tsx similarity index 94% rename from docs/data/chat/behavior/suggestions/ChatSuggestionsPlayground.tsx rename to docs/data/chat/behavior/suggestions/demos/chat-suggestions-playground/ChatSuggestionsPlayground.tsx index 9628aeead8ccc..27c6371292ef5 100644 --- a/docs/data/chat/behavior/suggestions/ChatSuggestionsPlayground.tsx +++ b/docs/data/chat/behavior/suggestions/demos/chat-suggestions-playground/ChatSuggestionsPlayground.tsx @@ -14,10 +14,8 @@ import { SwitchControl, TextControl, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; const POOL = [ 'Show me the default ChatComposer', @@ -41,6 +39,7 @@ const CLASS_DEFS: ReadonlyArray> = [ ]; export default function ChatSuggestionsPlayground() { + // @focus-start @padding 1 const [count, setCount] = React.useState(4); const [autoSubmit, setAutoSubmit] = React.useState(false); const [alwaysVisible, setAlwaysVisible] = React.useState(false); @@ -115,4 +114,5 @@ export default function ChatSuggestionsPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/behavior/suggestions/demos/chat-suggestions-playground/client.ts b/docs/data/chat/behavior/suggestions/demos/chat-suggestions-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/behavior/suggestions/demos/chat-suggestions-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/behavior/suggestions/demos/chat-suggestions-playground/index.ts b/docs/data/chat/behavior/suggestions/demos/chat-suggestions-playground/index.ts new file mode 100644 index 0000000000000..8e468f557a87a --- /dev/null +++ b/docs/data/chat/behavior/suggestions/demos/chat-suggestions-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatSuggestionsPlayground from './ChatSuggestionsPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatSuggestionsPlayground, { ClientProvider }); diff --git a/docs/data/chat/behavior/suggestions/SuggestionsAboveComposer.tsx b/docs/data/chat/behavior/suggestions/demos/suggestions-above-composer/SuggestionsAboveComposer.tsx similarity index 94% rename from docs/data/chat/behavior/suggestions/SuggestionsAboveComposer.tsx rename to docs/data/chat/behavior/suggestions/demos/suggestions-above-composer/SuggestionsAboveComposer.tsx index e1ac61ab4e750..a6da50fdd4464 100644 --- a/docs/data/chat/behavior/suggestions/SuggestionsAboveComposer.tsx +++ b/docs/data/chat/behavior/suggestions/demos/suggestions-above-composer/SuggestionsAboveComposer.tsx @@ -11,6 +11,7 @@ const adapter = createEchoAdapter(); export default function SuggestionsAboveComposer() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/behavior/suggestions/demos/suggestions-above-composer/client.ts b/docs/data/chat/behavior/suggestions/demos/suggestions-above-composer/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/behavior/suggestions/demos/suggestions-above-composer/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/behavior/suggestions/demos/suggestions-above-composer/index.ts b/docs/data/chat/behavior/suggestions/demos/suggestions-above-composer/index.ts new file mode 100644 index 0000000000000..bdb4ac7d4afe4 --- /dev/null +++ b/docs/data/chat/behavior/suggestions/demos/suggestions-above-composer/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SuggestionsAboveComposer from './SuggestionsAboveComposer'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SuggestionsAboveComposer, { ClientProvider }); diff --git a/docs/data/chat/behavior/suggestions/SuggestionsWithLabels.tsx b/docs/data/chat/behavior/suggestions/demos/suggestions-with-labels/SuggestionsWithLabels.tsx similarity index 96% rename from docs/data/chat/behavior/suggestions/SuggestionsWithLabels.tsx rename to docs/data/chat/behavior/suggestions/demos/suggestions-with-labels/SuggestionsWithLabels.tsx index 4b2d80bf3e410..3055bf35e029f 100644 --- a/docs/data/chat/behavior/suggestions/SuggestionsWithLabels.tsx +++ b/docs/data/chat/behavior/suggestions/demos/suggestions-with-labels/SuggestionsWithLabels.tsx @@ -8,6 +8,7 @@ const adapter = createEchoAdapter(); export default function SuggestionsWithLabels() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/behavior/suggestions/demos/suggestions-with-labels/client.ts b/docs/data/chat/behavior/suggestions/demos/suggestions-with-labels/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/behavior/suggestions/demos/suggestions-with-labels/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/behavior/suggestions/demos/suggestions-with-labels/index.ts b/docs/data/chat/behavior/suggestions/demos/suggestions-with-labels/index.ts new file mode 100644 index 0000000000000..353ad27265465 --- /dev/null +++ b/docs/data/chat/behavior/suggestions/demos/suggestions-with-labels/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SuggestionsWithLabels from './SuggestionsWithLabels'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SuggestionsWithLabels, { ClientProvider }); diff --git a/docs/data/chat/behavior/suggestions/suggestions.md b/docs/data/chat/behavior/suggestions/suggestions.md index d4679a9396f80..8a7b6a34d6be5 100644 --- a/docs/data/chat/behavior/suggestions/suggestions.md +++ b/docs/data/chat/behavior/suggestions/suggestions.md @@ -20,7 +20,7 @@ Clicking a suggestion pre-fills the composer with the suggestion text, giving us Edit the suggestion list and toggle layout options: -{{"demo": "ChatSuggestionsPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-suggestions-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Implementing suggestions @@ -45,7 +45,7 @@ Once the first message appears, `ChatBox` moves them to a row above the composer For more control, pass `ChatSuggestion` objects instead of plain strings. This lets you set a display label that differs from the value pre-filled into the composer: -{{"demo": "SuggestionsWithLabels.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://./demos/suggestions-with-labels/index.ts", "bg": "inline", "collapseToEmpty": true}} ### Suggestion object structure @@ -62,13 +62,13 @@ Strings are internally normalized to `{ value: string }`. By default, clicking a suggestion pre-fills the composer so users can review or edit before sending. Set `suggestionsAutoSubmit` to automatically submit the message when a suggestion is clicked: -{{"demo": "AutoSubmitSuggestions.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://./demos/auto-submit-suggestions/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Suggestions in active conversations When the conversation already has messages, `ChatBox` keeps the suggestions visible as a horizontal, scrollable row above the composer — useful for offering follow-up prompts. -{{"demo": "SuggestionsAboveComposer.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://./demos/suggestions-above-composer/index.ts", "bg": "inline", "collapseToEmpty": true}} `ChatBox` switches between the two placements automatically and has no `alwaysVisible` prop. When composing a custom layout with the standalone `ChatSuggestions` component, suggestions only render while the thread is empty by default — set `alwaysVisible` to render them regardless of message count: diff --git a/docs/data/chat/behavior/typing-indicators/ChatTypingIndicatorPlayground.js b/docs/data/chat/behavior/typing-indicators/ChatTypingIndicatorPlayground.js deleted file mode 100644 index 86dd4b0105932..0000000000000 --- a/docs/data/chat/behavior/typing-indicators/ChatTypingIndicatorPlayground.js +++ /dev/null @@ -1,82 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import { ChatTypingIndicator } from '@mui/x-chat'; -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { - ScopedChat, - TypingEffect, -} from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { emptyConversation } from 'docs/src/modules/components/chat-playground/sharedFixtures'; -import { - DividerLabel, - NumberControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; -import { users } from 'docs/src/modules/components/chat-playground/data'; - -const candidates = [users.alice, users.mira]; - -const CLASS_DEFS = [ - { name: 'root', description: 'The typing indicator container.' }, -]; - -export default function ChatTypingIndicatorPlayground() { - const [count, setCount] = React.useState(1); - const classesCustomizations = useCustomizations(CLASS_DEFS); - const userIds = React.useMemo( - () => candidates.slice(0, count).map((u) => u.id), - [count], - ); - - const indicatorSx = classesCustomizations.toClassesSx(); - - const label = React.useMemo(() => { - if (count === 0) { - return '(renders nothing)'; - } - const names = candidates.slice(0, count).map((u) => u.displayName ?? u.id); - return `${names.join(', ')}${count === 1 ? ' is typing' : ' are typing'}`; - }, [count]); - - return ( - - state (store) - - - } - preview={ - - - - - - count: {count} · data-count="{count}" · label: {label} - - - - } - /> - ); -} diff --git a/docs/data/chat/behavior/typing-indicators/ChatTypingIndicatorPlayground.tsx b/docs/data/chat/behavior/typing-indicators/demos/chat-typing-indicator-playground/ChatTypingIndicatorPlayground.tsx similarity index 91% rename from docs/data/chat/behavior/typing-indicators/ChatTypingIndicatorPlayground.tsx rename to docs/data/chat/behavior/typing-indicators/demos/chat-typing-indicator-playground/ChatTypingIndicatorPlayground.tsx index 6970e07448588..a58591081214d 100644 --- a/docs/data/chat/behavior/typing-indicators/ChatTypingIndicatorPlayground.tsx +++ b/docs/data/chat/behavior/typing-indicators/demos/chat-typing-indicator-playground/ChatTypingIndicatorPlayground.tsx @@ -12,10 +12,8 @@ import { DividerLabel, NumberControl, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; import { users } from 'docs/src/modules/components/chat-playground/data'; const candidates = [users.alice, users.mira]; @@ -27,6 +25,7 @@ const CLASS_DEFS: ReadonlyArray> = [ ]; export default function ChatTypingIndicatorPlayground() { + // @focus-start @padding 1 const [count, setCount] = React.useState(1); const classesCustomizations = useCustomizations(CLASS_DEFS); const userIds = React.useMemo( @@ -84,4 +83,5 @@ export default function ChatTypingIndicatorPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/behavior/typing-indicators/demos/chat-typing-indicator-playground/client.ts b/docs/data/chat/behavior/typing-indicators/demos/chat-typing-indicator-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/behavior/typing-indicators/demos/chat-typing-indicator-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/behavior/typing-indicators/demos/chat-typing-indicator-playground/index.ts b/docs/data/chat/behavior/typing-indicators/demos/chat-typing-indicator-playground/index.ts new file mode 100644 index 0000000000000..0ee9cfe1021f7 --- /dev/null +++ b/docs/data/chat/behavior/typing-indicators/demos/chat-typing-indicator-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatTypingIndicatorPlayground from './ChatTypingIndicatorPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatTypingIndicatorPlayground, { ClientProvider }); diff --git a/docs/data/chat/behavior/typing-indicators/typing-indicators.md b/docs/data/chat/behavior/typing-indicators/typing-indicators.md index 3b30e594483a9..b7487428a22fe 100644 --- a/docs/data/chat/behavior/typing-indicators/typing-indicators.md +++ b/docs/data/chat/behavior/typing-indicators/typing-indicators.md @@ -21,7 +21,7 @@ For the animated dots shown while the _assistant_ generates a response, see the Toggle which users appear as typing in the current conversation: -{{"demo": "ChatTypingIndicatorPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-typing-indicator-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} Typing indicators show labels like "Alice Chen is typing" or "Alice Chen, Mira Patel are typing" in the chat UI. The feature connects the adapter's `setTyping()` method (outbound) with real-time `typing` events (inbound) so the local composer's typing state and remote participants' typing state stay in sync. diff --git a/docs/data/chat/core/adapters/adapters.md b/docs/data/chat/core/adapters/adapters.md index bd1e076eefeb3..f90e483431ee5 100644 --- a/docs/data/chat/core/adapters/adapters.md +++ b/docs/data/chat/core/adapters/adapters.md @@ -19,7 +19,7 @@ import type { ChatAdapter } from '@mui/x-chat/headless'; The following demo shows a minimal adapter in action: -{{"demo": "../examples/minimal-chat/MinimalHeadlessChat.js", "bg": "inline", "defaultCodeOpen": false, "hideToolbar": true}} +{{"component": "file://../examples/minimal-chat/demos/minimal-headless-chat/index.ts", "bg": "inline", "hideToolbar": true, "collapseToEmpty": true}} ## Minimal adapter diff --git a/docs/data/chat/core/core.md b/docs/data/chat/core/core.md index 0b89755895cde..e5ce29d3935ea 100644 --- a/docs/data/chat/core/core.md +++ b/docs/data/chat/core/core.md @@ -40,7 +40,7 @@ Those concerns belong to [Headless](/x/react-chat/headless/). The demo below shows the core runtime with a minimal custom UI: -{{"demo": "examples/minimal-chat/MinimalHeadlessChat.js", "bg": "inline", "defaultCodeOpen": false, "hideToolbar": true}} +{{"component": "file://./examples/minimal-chat/demos/minimal-headless-chat/index.ts", "bg": "inline", "hideToolbar": true, "collapseToEmpty": true}} The runtime works as a pipeline: diff --git a/docs/data/chat/core/examples/advanced-store-access/AdvancedStoreAccessHeadlessChat.js b/docs/data/chat/core/examples/advanced-store-access/AdvancedStoreAccessHeadlessChat.js deleted file mode 100644 index f9cc6dcbd4700..0000000000000 --- a/docs/data/chat/core/examples/advanced-store-access/AdvancedStoreAccessHeadlessChat.js +++ /dev/null @@ -1,255 +0,0 @@ -import * as React from 'react'; -import { useStore } from '@base-ui/utils/store'; -import { - ChatProvider, - chatSelectors, - useChat, - useChatComposer, - useChatStore, -} from '@mui/x-chat/headless'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import Typography from '@mui/material/Typography'; -import SendRoundedIcon from '@mui/icons-material/SendRounded'; -import { - cloneConversations, - demoConversations, - demoThreads, - demoUsers, -} from 'docs/data/chat/core/examples/shared/demoData'; -import { - createChunkStream, - createTextResponseChunks, -} from 'docs/data/chat/core/examples/shared/demoUtils'; - -const adapter = { - async sendMessage({ conversationId }) { - return createChunkStream( - createTextResponseChunks( - `advanced-${conversationId}`, - 'The store escape hatch lets you build custom dashboards with chatSelectors.', - ), - { delayMs: 160 }, - ); - }, -}; - -function AdvancedMetrics() { - const store = useChatStore(); - const messageCount = useStore(store, chatSelectors.messageCount); - const conversationCount = useStore(store, chatSelectors.conversationCount); - const activeConversation = useStore(store, chatSelectors.activeConversation); - const composerValue = useStore(store, chatSelectors.composerValue); - const typingUserIds = useStore( - store, - chatSelectors.typingUserIdsForActiveConversation, - ); - const { messages, sendMessage, setActiveConversation } = useChat(); - const composer = useChatComposer(); - - return ( - - {/* Header */} - - - Store escape hatch - - - The runtime stays headless, but advanced consumers can subscribe to exactly - the slices they need. - - - - {/* Stats row */} - - - {[ - { label: 'Messages', value: messageCount }, - { label: 'Conversations', value: conversationCount }, - { label: 'Active title', value: activeConversation?.title ?? 'none' }, - { label: 'Composer value', value: composerValue || 'empty' }, - { label: 'Typing users', value: typingUserIds.join(', ') || 'none' }, - ].map((stat) => ( - - - {stat.label} - - - {stat.value} - - - ))} - - - {/* Action buttons */} - - - - - - - {/* Message list */} - - {messages.length === 0 ? ( - - No messages yet. - - ) : ( - messages.map((message) => { - const isUser = message.role === 'user'; - return ( - - - {message.author?.displayName ?? message.role} - {message.status ? ` · ${message.status}` : ''} - - {message.parts.map((part, index) => ( - - {'text' in part ? part.text : JSON.stringify(part)} - - ))} - - ); - }) - )} - - - {/* Input area */} - - composer.setValue(event.target.value)} - placeholder="Type a message…" - /> - - - - - ); -} - -export default function AdvancedStoreAccessHeadlessChat() { - return ( - - - - ); -} diff --git a/docs/data/chat/core/examples/advanced-store-access/AdvancedStoreAccessHeadlessChat.tsx.preview b/docs/data/chat/core/examples/advanced-store-access/AdvancedStoreAccessHeadlessChat.tsx.preview deleted file mode 100644 index df496e78448ec..0000000000000 --- a/docs/data/chat/core/examples/advanced-store-access/AdvancedStoreAccessHeadlessChat.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/chat/core/examples/advanced-store-access/advanced-store-access.md b/docs/data/chat/core/examples/advanced-store-access/advanced-store-access.md index 6515eeb85cc88..f2c7cc7d520c6 100644 --- a/docs/data/chat/core/examples/advanced-store-access/advanced-store-access.md +++ b/docs/data/chat/core/examples/advanced-store-access/advanced-store-access.md @@ -76,7 +76,7 @@ For standard rendering, the built-in hooks (`useChat()`, `useMessageIds()`, `use The demo below shows how to combine `useChatStore()` with `chatSelectors` to render live counts and streaming state: -{{"demo": "AdvancedStoreAccessHeadlessChat.js"}} +{{"component": "file://./demos/advanced-store-access-headless-chat/index.ts"}} ## Key takeaways diff --git a/docs/data/chat/core/examples/advanced-store-access/AdvancedStoreAccessHeadlessChat.tsx b/docs/data/chat/core/examples/advanced-store-access/demos/advanced-store-access-headless-chat/AdvancedStoreAccessHeadlessChat.tsx similarity index 98% rename from docs/data/chat/core/examples/advanced-store-access/AdvancedStoreAccessHeadlessChat.tsx rename to docs/data/chat/core/examples/advanced-store-access/demos/advanced-store-access-headless-chat/AdvancedStoreAccessHeadlessChat.tsx index 59292b26f7912..3b41b995de364 100644 --- a/docs/data/chat/core/examples/advanced-store-access/AdvancedStoreAccessHeadlessChat.tsx +++ b/docs/data/chat/core/examples/advanced-store-access/demos/advanced-store-access-headless-chat/AdvancedStoreAccessHeadlessChat.tsx @@ -6,8 +6,8 @@ import { useChat, useChatComposer, useChatStore, - type ChatAdapter, } from '@mui/x-chat/headless'; +import type { ChatAdapter } from '@mui/x-chat/headless'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Paper from '@mui/material/Paper'; @@ -243,6 +243,7 @@ function AdvancedMetrics() { export default function AdvancedStoreAccessHeadlessChat() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/core/examples/advanced-store-access/demos/advanced-store-access-headless-chat/client.ts b/docs/data/chat/core/examples/advanced-store-access/demos/advanced-store-access-headless-chat/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/core/examples/advanced-store-access/demos/advanced-store-access-headless-chat/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/core/examples/advanced-store-access/demos/advanced-store-access-headless-chat/index.ts b/docs/data/chat/core/examples/advanced-store-access/demos/advanced-store-access-headless-chat/index.ts new file mode 100644 index 0000000000000..8c4921dc18aa9 --- /dev/null +++ b/docs/data/chat/core/examples/advanced-store-access/demos/advanced-store-access-headless-chat/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AdvancedStoreAccessHeadlessChat from './AdvancedStoreAccessHeadlessChat'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AdvancedStoreAccessHeadlessChat, { ClientProvider }); diff --git a/docs/data/chat/core/examples/composer/ComposerHeadlessChat.js b/docs/data/chat/core/examples/composer/ComposerHeadlessChat.js deleted file mode 100644 index db3d8f301f00b..0000000000000 --- a/docs/data/chat/core/examples/composer/ComposerHeadlessChat.js +++ /dev/null @@ -1,299 +0,0 @@ -import * as React from 'react'; -import { - ChatProvider, - useChat, - useChatComposer, - useChatStore, -} from '@mui/x-chat/headless'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Chip from '@mui/material/Chip'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import Typography from '@mui/material/Typography'; -import AttachFileRoundedIcon from '@mui/icons-material/AttachFileRounded'; -import SendRoundedIcon from '@mui/icons-material/SendRounded'; -import { - createChunkStream, - createTextResponseChunks, -} from 'docs/data/chat/core/examples/shared/demoUtils'; - -const adapter = { - async sendMessage({ message }) { - return createChunkStream( - createTextResponseChunks( - `composer-assistant-${message.id}`, - 'The composer demo covers attachments, preview URLs, and IME-safe submit behavior.', - ), - { delayMs: 180 }, - ); - }, -}; - -function ComposerInner() { - const { messages } = useChat(); - const composer = useChatComposer(); - const store = useChatStore(); - const inputRef = React.useRef(null); - const listRef = React.useRef(null); - - React.useEffect(() => { - if (listRef.current) { - listRef.current.scrollTop = listRef.current.scrollHeight; - } - }, [messages]); - - return ( - - {/* Header */} - - - Composer with attachments - - - - - {/* Messages */} - - {messages.length === 0 ? ( - - Use the composer to create the first message. - - ) : ( - messages.map((message) => { - const isUser = message.role === 'user'; - return ( - - - - {message.author?.displayName ?? message.role} - - {message.parts.map((part, index) => { - if (part.type === 'text') { - return ( - - {part.text} - - ); - } - if (part.type === 'file') { - return part.mediaType.startsWith('image/') ? ( - - ) : ( - - {part.filename ?? part.url} - - ); - } - return null; - })} - - - ); - }) - )} - - - {/* Attachments */} - {composer.attachments.length > 0 ? ( - - {composer.attachments.map((attachment) => ( - - {attachment.previewUrl ? ( - - ) : null} - - - {attachment.file.name} - - - {attachment.status} - - - - - ))} - - ) : null} - - {/* Textarea */} - - composer.setValue(event.target.value)} - onCompositionStart={() => store.setComposerIsComposing(true)} - onCompositionEnd={() => store.setComposerIsComposing(false)} - onKeyDown={(event) => { - if (event.key === 'Enter' && !event.shiftKey) { - event.preventDefault(); - void composer.submit(); - } - }} - /> - - - {/* Hidden file input */} - { - Array.from(event.target.files ?? []).forEach((file) => - composer.addAttachment(file), - ); - event.target.value = ''; - }} - /> - {/* Action buttons */} - - - - - - - ); -} - -export default function ComposerHeadlessChat() { - return ( - - - - ); -} diff --git a/docs/data/chat/core/examples/composer/ComposerHeadlessChat.tsx.preview b/docs/data/chat/core/examples/composer/ComposerHeadlessChat.tsx.preview deleted file mode 100644 index a199f3e16c7ba..0000000000000 --- a/docs/data/chat/core/examples/composer/ComposerHeadlessChat.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/chat/core/examples/composer/composer.md b/docs/data/chat/core/examples/composer/composer.md index 6be8215b9a1d7..de62f68bcedbf 100644 --- a/docs/data/chat/core/examples/composer/composer.md +++ b/docs/data/chat/core/examples/composer/composer.md @@ -88,7 +88,7 @@ Wire composition events on your input element: The demo below shows the full composer wired up with attachments, image previews, and IME-safe submission: -{{"demo": "ComposerHeadlessChat.js"}} +{{"component": "file://./demos/composer-headless-chat/index.ts"}} ## See also diff --git a/docs/data/chat/core/examples/composer/ComposerHeadlessChat.tsx b/docs/data/chat/core/examples/composer/demos/composer-headless-chat/ComposerHeadlessChat.tsx similarity index 98% rename from docs/data/chat/core/examples/composer/ComposerHeadlessChat.tsx rename to docs/data/chat/core/examples/composer/demos/composer-headless-chat/ComposerHeadlessChat.tsx index 5d8b63923288c..b30452a261c4b 100644 --- a/docs/data/chat/core/examples/composer/ComposerHeadlessChat.tsx +++ b/docs/data/chat/core/examples/composer/demos/composer-headless-chat/ComposerHeadlessChat.tsx @@ -4,8 +4,8 @@ import { useChat, useChatComposer, useChatStore, - type ChatAdapter, } from '@mui/x-chat/headless'; +import type { ChatAdapter } from '@mui/x-chat/headless'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Chip from '@mui/material/Chip'; @@ -294,8 +294,10 @@ function ComposerInner() { export default function ComposerHeadlessChat() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/core/examples/composer/demos/composer-headless-chat/client.ts b/docs/data/chat/core/examples/composer/demos/composer-headless-chat/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/core/examples/composer/demos/composer-headless-chat/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/core/examples/composer/demos/composer-headless-chat/index.ts b/docs/data/chat/core/examples/composer/demos/composer-headless-chat/index.ts new file mode 100644 index 0000000000000..4a37ea9cc135b --- /dev/null +++ b/docs/data/chat/core/examples/composer/demos/composer-headless-chat/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ComposerHeadlessChat from './ComposerHeadlessChat'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ComposerHeadlessChat, { ClientProvider }); diff --git a/docs/data/chat/core/examples/controlled-state/ControlledStateHeadlessChat.js b/docs/data/chat/core/examples/controlled-state/ControlledStateHeadlessChat.js deleted file mode 100644 index 687b51847166d..0000000000000 --- a/docs/data/chat/core/examples/controlled-state/ControlledStateHeadlessChat.js +++ /dev/null @@ -1,268 +0,0 @@ -import * as React from 'react'; -import { ChatProvider, useChat, useChatComposer } from '@mui/x-chat/headless'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Chip from '@mui/material/Chip'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import Typography from '@mui/material/Typography'; -import SendRoundedIcon from '@mui/icons-material/SendRounded'; -import { - cloneConversations, - cloneMessages, - demoConversations, - demoThreads, - demoUsers, -} from 'docs/data/chat/core/examples/shared/demoData'; -import { - createChunkStream, - createTextResponseChunks, - getMessageText, -} from 'docs/data/chat/core/examples/shared/demoUtils'; - -function ControlledStateChat({ activeConversationId }) { - const { messages, conversations, setActiveConversation } = useChat(); - const composer = useChatComposer(); - const listRef = React.useRef(null); - - React.useEffect(() => { - if (listRef.current) { - listRef.current.scrollTop = listRef.current.scrollHeight; - } - }, [messages]); - - return ( - - {/* Header */} - - - Controlled headless state - - - - - {/* Conversation selector */} - - {conversations.map((conversation) => ( - { - void setActiveConversation(conversation.id); - }} - /> - ))} - - - {/* Stats */} - - {[ - { label: 'Messages', value: messages.length }, - { label: 'Conversations', value: conversations.length }, - { label: 'Active', value: activeConversationId ?? 'none' }, - { label: 'Composer', value: composer.value || 'empty' }, - ].map((stat) => ( - - - {stat.label} - - - {stat.value} - - - ))} - - - {/* Messages */} - - {messages.length === 0 ? ( - - Switch conversations to load controlled messages. - - ) : ( - messages.map((message) => { - const isUser = message.role === 'user'; - return ( - - - - {message.author?.displayName ?? message.role} - - {message.parts.map((part, index) => ( - - {part.type === 'text' ? part.text : null} - - ))} - - - ); - }) - )} - - - {/* Input */} - - composer.setValue(event.target.value)} - onKeyDown={(event) => { - if (event.key === 'Enter' && !event.shiftKey) { - event.preventDefault(); - void composer.submit(); - } - }} - /> - - - - ); -} - -export default function ControlledStateHeadlessChat() { - const allConversations = React.useMemo( - () => cloneConversations(demoConversations.slice(0, 2)), - [], - ); - const [conversations, setConversations] = React.useState(allConversations); - const [activeConversationId, setActiveConversationId] = React.useState('product'); - const [composerValue, setComposerValue] = React.useState( - 'Document the controlled models.', - ); - const [messagesByConversation, setMessagesByConversation] = React.useState({ - support: cloneMessages(demoThreads.support), - product: cloneMessages(demoThreads.product), - }); - - const messages = activeConversationId - ? (messagesByConversation[activeConversationId] ?? []) - : []; - - const adapter = React.useMemo( - () => ({ - async sendMessage({ conversationId: _conversationId, message }) { - return createChunkStream( - createTextResponseChunks( - `controlled-${message.id}`, - `Controlled state still streams through the normalized runtime: "${getMessageText(message)}".`, - ), - { delayMs: 160 }, - ); - }, - }), - [], - ); - - return ( - { - setMessagesByConversation((previous) => ({ - ...previous, - [activeConversationId ?? 'support']: nextMessages.map((message) => ({ - ...message, - author: - message.author ?? - (message.role === 'user' ? demoUsers.sam : demoUsers.agent), - })), - })); - }} - composerValue={composerValue} - onComposerValueChange={setComposerValue} - > - - - ); -} diff --git a/docs/data/chat/core/examples/controlled-state/controlled-state.md b/docs/data/chat/core/examples/controlled-state/controlled-state.md index 241868d065a6d..ba6a20903d172 100644 --- a/docs/data/chat/core/examples/controlled-state/controlled-state.md +++ b/docs/data/chat/core/examples/controlled-state/controlled-state.md @@ -56,7 +56,7 @@ Use controlled state when you need to: The demo below shows controlled state wired through `ChatProvider`: -{{"demo": "ControlledStateHeadlessChat.js"}} +{{"component": "file://./demos/controlled-state-headless-chat/index.ts"}} ## Key takeaways diff --git a/docs/data/chat/core/examples/controlled-state/ControlledStateHeadlessChat.tsx b/docs/data/chat/core/examples/controlled-state/demos/controlled-state-headless-chat/ControlledStateHeadlessChat.tsx similarity index 97% rename from docs/data/chat/core/examples/controlled-state/ControlledStateHeadlessChat.tsx rename to docs/data/chat/core/examples/controlled-state/demos/controlled-state-headless-chat/ControlledStateHeadlessChat.tsx index 9b65c91e3f449..4ca856ddba86e 100644 --- a/docs/data/chat/core/examples/controlled-state/ControlledStateHeadlessChat.tsx +++ b/docs/data/chat/core/examples/controlled-state/demos/controlled-state-headless-chat/ControlledStateHeadlessChat.tsx @@ -1,11 +1,9 @@ import * as React from 'react'; -import { - ChatProvider, - useChat, - useChatComposer, - type ChatAdapter, - type ChatConversation, - type ChatMessage, +import { ChatProvider, useChat, useChatComposer } from '@mui/x-chat/headless'; +import type { + ChatAdapter, + ChatConversation, + ChatMessage, } from '@mui/x-chat/headless'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; @@ -218,6 +216,7 @@ function ControlledStateChat({ } export default function ControlledStateHeadlessChat() { + // @focus-start @padding 1 const allConversations = React.useMemo( () => cloneConversations(demoConversations.slice(0, 2)), [], @@ -281,4 +280,5 @@ export default function ControlledStateHeadlessChat() { ); + // @focus-end } diff --git a/docs/data/chat/core/examples/controlled-state/demos/controlled-state-headless-chat/client.ts b/docs/data/chat/core/examples/controlled-state/demos/controlled-state-headless-chat/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/core/examples/controlled-state/demos/controlled-state-headless-chat/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/core/examples/controlled-state/demos/controlled-state-headless-chat/index.ts b/docs/data/chat/core/examples/controlled-state/demos/controlled-state-headless-chat/index.ts new file mode 100644 index 0000000000000..b65b28363d0f3 --- /dev/null +++ b/docs/data/chat/core/examples/controlled-state/demos/controlled-state-headless-chat/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ControlledStateHeadlessChat from './ControlledStateHeadlessChat'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ControlledStateHeadlessChat, { ClientProvider }); diff --git a/docs/data/chat/core/examples/minimal-chat/MinimalHeadlessChat.js b/docs/data/chat/core/examples/minimal-chat/MinimalHeadlessChat.js deleted file mode 100644 index 8c58e998a0a92..0000000000000 --- a/docs/data/chat/core/examples/minimal-chat/MinimalHeadlessChat.js +++ /dev/null @@ -1,185 +0,0 @@ -import * as React from 'react'; -import { ChatProvider, useChat } from '@mui/x-chat/headless'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Chip from '@mui/material/Chip'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import Typography from '@mui/material/Typography'; -import SendRoundedIcon from '@mui/icons-material/SendRounded'; -import { demoUsers } from 'docs/data/chat/core/examples/shared/demoData'; -import { - createChunkStream, - createTextResponseChunks, - getMessageText, -} from 'docs/data/chat/core/examples/shared/demoUtils'; - -const adapter = { - async sendMessage({ message }) { - return createChunkStream( - createTextResponseChunks( - `minimal-assistant-${message.id}`, - `You said: "${getMessageText(message)}". This response came from a streamed headless adapter.`, - ), - { delayMs: 220 }, - ); - }, -}; - -function MinimalChatInner() { - const { messages, sendMessage, isStreaming } = useChat(); - const [draft, setDraft] = React.useState('Show me the smallest working chat.'); - const listRef = React.useRef(null); - - const submit = React.useCallback(async () => { - if (draft.trim() === '') { - return; - } - - await sendMessage({ - conversationId: 'support', - author: demoUsers.alice, - parts: [{ type: 'text', text: draft }], - }); - - setDraft(''); - }, [draft, sendMessage]); - - React.useEffect(() => { - if (listRef.current) { - listRef.current.scrollTop = listRef.current.scrollHeight; - } - }, [messages]); - - return ( - - {/* Header */} - - - Minimal headless chat - - - - - {/* Messages */} - - {messages.length === 0 ? ( - - Send the first message to start the thread. - - ) : ( - messages.map((message) => { - const isUser = message.role === 'user'; - return ( - - - - {message.author?.displayName ?? message.role} - - {message.parts.map((part, index) => ( - - {part.type === 'text' ? part.text : null} - - ))} - - - ); - }) - )} - - - {/* Input */} - - setDraft(event.target.value)} - onKeyDown={(event) => { - if (event.key === 'Enter' && !event.shiftKey) { - event.preventDefault(); - submit(); - } - }} - /> - - - - ); -} - -export default function MinimalHeadlessChat() { - return ( - - - - ); -} diff --git a/docs/data/chat/core/examples/minimal-chat/MinimalHeadlessChat.tsx.preview b/docs/data/chat/core/examples/minimal-chat/MinimalHeadlessChat.tsx.preview deleted file mode 100644 index c5e1312469fe9..0000000000000 --- a/docs/data/chat/core/examples/minimal-chat/MinimalHeadlessChat.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/chat/core/examples/minimal-chat/MinimalHeadlessChat.tsx b/docs/data/chat/core/examples/minimal-chat/demos/minimal-headless-chat/MinimalHeadlessChat.tsx similarity index 96% rename from docs/data/chat/core/examples/minimal-chat/MinimalHeadlessChat.tsx rename to docs/data/chat/core/examples/minimal-chat/demos/minimal-headless-chat/MinimalHeadlessChat.tsx index 69e8760a807ae..d99bfb96d1a61 100644 --- a/docs/data/chat/core/examples/minimal-chat/MinimalHeadlessChat.tsx +++ b/docs/data/chat/core/examples/minimal-chat/demos/minimal-headless-chat/MinimalHeadlessChat.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { ChatProvider, useChat, type ChatAdapter } from '@mui/x-chat/headless'; +import { ChatProvider, useChat } from '@mui/x-chat/headless'; +import type { ChatAdapter } from '@mui/x-chat/headless'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Chip from '@mui/material/Chip'; @@ -178,8 +179,10 @@ function MinimalChatInner() { export default function MinimalHeadlessChat() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/core/examples/minimal-chat/demos/minimal-headless-chat/client.ts b/docs/data/chat/core/examples/minimal-chat/demos/minimal-headless-chat/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/core/examples/minimal-chat/demos/minimal-headless-chat/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/core/examples/minimal-chat/demos/minimal-headless-chat/index.ts b/docs/data/chat/core/examples/minimal-chat/demos/minimal-headless-chat/index.ts new file mode 100644 index 0000000000000..1a5058805da14 --- /dev/null +++ b/docs/data/chat/core/examples/minimal-chat/demos/minimal-headless-chat/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MinimalHeadlessChat from './MinimalHeadlessChat'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MinimalHeadlessChat, { ClientProvider }); diff --git a/docs/data/chat/core/examples/minimal-chat/minimal-chat.md b/docs/data/chat/core/examples/minimal-chat/minimal-chat.md index d9e6acd901eb4..6a1c6bc07cd9d 100644 --- a/docs/data/chat/core/examples/minimal-chat/minimal-chat.md +++ b/docs/data/chat/core/examples/minimal-chat/minimal-chat.md @@ -59,7 +59,7 @@ Inside `ChatProvider`, call `useChat()` to get messages, streaming state, and ac const { messages, sendMessage, isStreaming } = useChat(); ``` -{{"demo": "MinimalHeadlessChat.js"}} +{{"component": "file://./demos/minimal-headless-chat/index.ts"}} ## Key takeaways diff --git a/docs/data/chat/core/examples/realtime-thread-sync/RealtimeThreadSyncHeadlessChat.js b/docs/data/chat/core/examples/realtime-thread-sync/RealtimeThreadSyncHeadlessChat.js deleted file mode 100644 index 9f0f7a7e167e7..0000000000000 --- a/docs/data/chat/core/examples/realtime-thread-sync/RealtimeThreadSyncHeadlessChat.js +++ /dev/null @@ -1,363 +0,0 @@ -import * as React from 'react'; -import { ChatProvider, useChat } from '@mui/x-chat/headless'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Chip from '@mui/material/Chip'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { - cloneConversations, - cloneMessages, - demoConversations, - demoThreads, - demoUsers, -} from 'docs/data/chat/core/examples/shared/demoData'; - -function createRealtimeSyncAdapter() { - let onEventRef = null; - - return { - adapter: { - async sendMessage() { - return new ReadableStream({ - start(controller) { - controller.close(); - }, - }); - }, - subscribe({ onEvent }) { - onEventRef = onEvent; - return () => { - onEventRef = null; - }; - }, - }, - emit(event) { - onEventRef?.(event); - }, - }; -} - -function RealtimeThreadSyncInner({ emit }) { - const { conversations, messages, activeConversationId, setActiveConversation } = - useChat(); - const messageCounter = React.useRef(0); - const conversationCounter = React.useRef(0); - const activeConversation = conversations.find( - (conversation) => conversation.id === activeConversationId, - ); - - const addMessage = () => { - if (!activeConversationId) { - return; - } - - messageCounter.current += 1; - const nextMessage = { - id: `live-message-${messageCounter.current}`, - conversationId: activeConversationId, - role: 'assistant', - author: demoUsers.agent, - status: 'sent', - parts: [ - { - type: 'text', - text: `Realtime message ${messageCounter.current} arrived for ${activeConversationId}.`, - }, - ], - }; - - emit({ type: 'message-added', message: nextMessage }); - }; - - const updateLastMessage = () => { - const target = [...messages] - .reverse() - .find((message) => message.role === 'assistant'); - - if (!target) { - return; - } - - emit({ - type: 'message-updated', - message: { - ...target, - parts: [ - { - type: 'text', - text: 'This assistant message was patched by a realtime update.', - }, - ], - }, - }); - }; - - const removeLastMessage = () => { - const target = [...messages] - .reverse() - .find((message) => message.role === 'assistant'); - - if (!target) { - return; - } - - emit({ type: 'message-removed', messageId: target.id }); - }; - - const addConversation = () => { - conversationCounter.current += 1; - const conversation = { - id: `live-conversation-${conversationCounter.current}`, - title: `Escalation ${conversationCounter.current}`, - subtitle: 'Created by realtime sync', - readState: 'unread', - unreadCount: 1, - participants: [demoUsers.alice, demoUsers.agent], - }; - - emit({ type: 'conversation-added', conversation }); - }; - - const renameActiveConversation = () => { - if (!activeConversation) { - return; - } - - emit({ - type: 'conversation-updated', - conversation: { - ...activeConversation, - title: `${activeConversation.title} (live)`, - subtitle: 'Renamed by realtime event', - }, - }); - }; - - const removeActiveConversation = () => { - if (!activeConversationId) { - return; - } - - emit({ type: 'conversation-removed', conversationId: activeConversationId }); - }; - - return ( - - {/* Header */} - - - Realtime collection sync - - - Message and conversation events can reshape the thread without a manual - refetch. - - - - {/* Conversation selector */} - - {conversations.map((conversation) => ( - { - void setActiveConversation(conversation.id); - }} - /> - ))} - - - {/* Stats */} - - {[ - { label: 'Conversations', value: conversations.length }, - { label: 'Active', value: activeConversation?.title ?? 'none' }, - { label: 'Messages', value: messages.length }, - ].map((stat) => ( - - - {stat.label} - - - {stat.value} - - - ))} - - - {/* Action buttons */} - - - - - - - - - - {/* Messages */} - - {messages.length === 0 ? ( - - Select or create a conversation. Removing the active thread clears the - message view. - - ) : ( - messages.map((message) => { - const isUser = message.role === 'user'; - return ( - - - - {message.author?.displayName ?? message.role} - - {message.parts.map((part, index) => ( - - {part.type === 'text' ? part.text : null} - - ))} - - - ); - }) - )} - - - ); -} - -export default function RealtimeThreadSyncHeadlessChat() { - const { adapter, emit } = React.useMemo(() => createRealtimeSyncAdapter(), []); - - return ( - - - - ); -} diff --git a/docs/data/chat/core/examples/realtime-thread-sync/RealtimeThreadSyncHeadlessChat.tsx.preview b/docs/data/chat/core/examples/realtime-thread-sync/RealtimeThreadSyncHeadlessChat.tsx.preview deleted file mode 100644 index 4a63aedb29731..0000000000000 --- a/docs/data/chat/core/examples/realtime-thread-sync/RealtimeThreadSyncHeadlessChat.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/chat/core/examples/realtime-thread-sync/RealtimeThreadSyncHeadlessChat.tsx b/docs/data/chat/core/examples/realtime-thread-sync/demos/realtime-thread-sync-headless-chat/RealtimeThreadSyncHeadlessChat.tsx similarity index 98% rename from docs/data/chat/core/examples/realtime-thread-sync/RealtimeThreadSyncHeadlessChat.tsx rename to docs/data/chat/core/examples/realtime-thread-sync/demos/realtime-thread-sync-headless-chat/RealtimeThreadSyncHeadlessChat.tsx index 3ccb4258f0966..09e3597fa3e6f 100644 --- a/docs/data/chat/core/examples/realtime-thread-sync/RealtimeThreadSyncHeadlessChat.tsx +++ b/docs/data/chat/core/examples/realtime-thread-sync/demos/realtime-thread-sync-headless-chat/RealtimeThreadSyncHeadlessChat.tsx @@ -1,11 +1,10 @@ import * as React from 'react'; -import { - ChatProvider, - useChat, - type ChatAdapter, - type ChatConversation, - type ChatMessage, - type ChatRealtimeEvent, +import { ChatProvider, useChat } from '@mui/x-chat/headless'; +import type { + ChatAdapter, + ChatConversation, + ChatMessage, + ChatRealtimeEvent, } from '@mui/x-chat/headless'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; @@ -356,6 +355,7 @@ function RealtimeThreadSyncInner({ } export default function RealtimeThreadSyncHeadlessChat() { + // @focus-start @padding 1 const { adapter, emit } = React.useMemo(() => createRealtimeSyncAdapter(), []); return ( @@ -371,4 +371,5 @@ export default function RealtimeThreadSyncHeadlessChat() { ); + // @focus-end } diff --git a/docs/data/chat/core/examples/realtime-thread-sync/demos/realtime-thread-sync-headless-chat/client.ts b/docs/data/chat/core/examples/realtime-thread-sync/demos/realtime-thread-sync-headless-chat/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/core/examples/realtime-thread-sync/demos/realtime-thread-sync-headless-chat/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/core/examples/realtime-thread-sync/demos/realtime-thread-sync-headless-chat/index.ts b/docs/data/chat/core/examples/realtime-thread-sync/demos/realtime-thread-sync-headless-chat/index.ts new file mode 100644 index 0000000000000..fd14bdee210fb --- /dev/null +++ b/docs/data/chat/core/examples/realtime-thread-sync/demos/realtime-thread-sync-headless-chat/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RealtimeThreadSyncHeadlessChat from './RealtimeThreadSyncHeadlessChat'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RealtimeThreadSyncHeadlessChat, { ClientProvider }); diff --git a/docs/data/chat/core/examples/realtime-thread-sync/realtime-thread-sync.md b/docs/data/chat/core/examples/realtime-thread-sync/realtime-thread-sync.md index fcab1ebdd37aa..c27351df522c2 100644 --- a/docs/data/chat/core/examples/realtime-thread-sync/realtime-thread-sync.md +++ b/docs/data/chat/core/examples/realtime-thread-sync/realtime-thread-sync.md @@ -51,7 +51,7 @@ The UI can respond by showing a placeholder or selecting the next conversation. The demo below shows collection events driving thread and sidebar updates in real time: -{{"demo": "RealtimeThreadSyncHeadlessChat.js"}} +{{"component": "file://./demos/realtime-thread-sync-headless-chat/index.ts"}} ## Key takeaways diff --git a/docs/data/chat/core/examples/realtime/RealtimeHeadlessChat.js b/docs/data/chat/core/examples/realtime/RealtimeHeadlessChat.js deleted file mode 100644 index 8c961e2141d8c..0000000000000 --- a/docs/data/chat/core/examples/realtime/RealtimeHeadlessChat.js +++ /dev/null @@ -1,282 +0,0 @@ -import * as React from 'react'; -import { - ChatProvider, - useChat, - useChatStatus, - useConversation, - useConversations, -} from '@mui/x-chat/headless'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { - cloneConversations, - demoConversations, - demoUsers, -} from 'docs/data/chat/core/examples/shared/demoData'; -import { - createChunkStream, - createTextResponseChunks, -} from 'docs/data/chat/core/examples/shared/demoUtils'; - -function createRealtimeAdapter() { - let onEventRef = null; - - return { - adapter: { - async sendMessage({ conversationId }) { - return createChunkStream( - createTextResponseChunks( - `realtime-${conversationId}`, - 'Realtime subscriptions keep presence, typing, and read state synced.', - ), - ); - }, - subscribe({ onEvent }) { - onEventRef = onEvent; - return () => { - onEventRef = null; - }; - }, - }, - emit(event) { - onEventRef?.(event); - }, - }; -} - -function getOnlineNames(conversations) { - const seen = new Set(); - const names = []; - - for (const conversation of conversations) { - for (const participant of conversation.participants ?? []) { - if (participant.isOnline && !seen.has(participant.id)) { - seen.add(participant.id); - names.push(participant.displayName ?? participant.id); - } - } - } - - return names.join(', ') || 'none'; -} - -function RealtimeInner({ emit }) { - const { messages } = useChat(); - const { typingUserIds } = useChatStatus(); - const conversations = useConversations(); - const activeConversation = useConversation('support'); - - return ( - - {/* Header */} - - - Realtime presence and typing - - - Typing, presence, and read-state changes come in through - adapter.subscribe(). - - - - {/* Stats */} - - {[ - { label: 'Typing users', value: typingUserIds.join(', ') || 'none' }, - { label: 'Online', value: getOnlineNames(conversations) }, - { label: 'Unread', value: activeConversation?.unreadCount ?? 0 }, - { - label: 'Read state', - value: activeConversation?.readState ?? 'unknown', - }, - ].map((item) => ( - - - {item.label} - - - {item.value} - - - ))} - - - {/* Action buttons */} - - - - - - - - - {/* Messages */} - - {messages.length === 0 ? ( - - This example focuses on state reactions from realtime events. - - ) : ( - messages.map((message) => { - const isUser = message.role === 'user'; - return ( - - - - {message.author?.displayName ?? message.role} - - {message.parts.map((part, index) => ( - - {part.type === 'text' ? part.text : null} - - ))} - - - ); - }) - )} - - - ); -} - -export default function RealtimeHeadlessChat() { - const { adapter, emit } = React.useMemo(() => createRealtimeAdapter(), []); - - return ( - - - - ); -} diff --git a/docs/data/chat/core/examples/realtime/RealtimeHeadlessChat.tsx.preview b/docs/data/chat/core/examples/realtime/RealtimeHeadlessChat.tsx.preview deleted file mode 100644 index 7e7928d7011b0..0000000000000 --- a/docs/data/chat/core/examples/realtime/RealtimeHeadlessChat.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/chat/core/examples/realtime/RealtimeHeadlessChat.tsx b/docs/data/chat/core/examples/realtime/demos/realtime-headless-chat/RealtimeHeadlessChat.tsx similarity index 98% rename from docs/data/chat/core/examples/realtime/RealtimeHeadlessChat.tsx rename to docs/data/chat/core/examples/realtime/demos/realtime-headless-chat/RealtimeHeadlessChat.tsx index 5a86b0c5f8249..ccb4852c7c13f 100644 --- a/docs/data/chat/core/examples/realtime/RealtimeHeadlessChat.tsx +++ b/docs/data/chat/core/examples/realtime/demos/realtime-headless-chat/RealtimeHeadlessChat.tsx @@ -5,9 +5,8 @@ import { useChatStatus, useConversation, useConversations, - type ChatAdapter, - type ChatRealtimeEvent, } from '@mui/x-chat/headless'; +import type { ChatAdapter, ChatRealtimeEvent } from '@mui/x-chat/headless'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Paper from '@mui/material/Paper'; @@ -270,6 +269,7 @@ function RealtimeInner({ emit }: { emit: (event: ChatRealtimeEvent) => void }) { } export default function RealtimeHeadlessChat() { + // @focus-start @padding 1 const { adapter, emit } = React.useMemo(() => createRealtimeAdapter(), []); return ( @@ -281,4 +281,5 @@ export default function RealtimeHeadlessChat() { ); + // @focus-end } diff --git a/docs/data/chat/core/examples/realtime/demos/realtime-headless-chat/client.ts b/docs/data/chat/core/examples/realtime/demos/realtime-headless-chat/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/core/examples/realtime/demos/realtime-headless-chat/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/core/examples/realtime/demos/realtime-headless-chat/index.ts b/docs/data/chat/core/examples/realtime/demos/realtime-headless-chat/index.ts new file mode 100644 index 0000000000000..a91fa548bee2e --- /dev/null +++ b/docs/data/chat/core/examples/realtime/demos/realtime-headless-chat/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RealtimeHeadlessChat from './RealtimeHeadlessChat'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RealtimeHeadlessChat, { ClientProvider }); diff --git a/docs/data/chat/core/examples/realtime/realtime.md b/docs/data/chat/core/examples/realtime/realtime.md index ea62b28c35669..366a07bdde4f1 100644 --- a/docs/data/chat/core/examples/realtime/realtime.md +++ b/docs/data/chat/core/examples/realtime/realtime.md @@ -89,7 +89,7 @@ onEvent({ The demo below wires all three event types into a single adapter: -{{"demo": "RealtimeHeadlessChat.js"}} +{{"component": "file://./demos/realtime-headless-chat/index.ts"}} ## Key takeaways diff --git a/docs/data/chat/core/examples/selector-driven-thread/SelectorDrivenThread.js b/docs/data/chat/core/examples/selector-driven-thread/SelectorDrivenThread.js deleted file mode 100644 index 0eef8a70ece35..0000000000000 --- a/docs/data/chat/core/examples/selector-driven-thread/SelectorDrivenThread.js +++ /dev/null @@ -1,203 +0,0 @@ -import * as React from 'react'; -import { - ChatProvider, - useConversation, - useConversations, - useMessage, - useMessageIds, -} from '@mui/x-chat/headless'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Chip from '@mui/material/Chip'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { demoUsers } from 'docs/data/chat/core/examples/shared/demoData'; - -function createMessages() { - return Array.from({ length: 14 }, (_, index) => ({ - id: `selector-${index + 1}`, - conversationId: 'selectors', - role: index % 2 === 0 ? 'assistant' : 'user', - author: index % 2 === 0 ? demoUsers.agent : demoUsers.alice, - status: 'sent', - parts: [ - { - type: 'text', - text: `Row ${index + 1} is subscribed independently.`, - }, - ], - })); -} - -const MessageRow = React.memo(function MessageRow({ id }) { - const message = useMessage(id); - const renders = React.useRef(0); - - React.useEffect(() => { - renders.current += 1; - }); - - if (!message) { - return null; - } - - return ( - - - {message.id} · renders {renders.current} - - - {message.author?.displayName ?? message.role} - - - {message.parts[0]?.type === 'text' ? message.parts[0].text : null} - - - ); -}); - -function SelectorThread() { - const messageIds = useMessageIds(); - const conversations = useConversations(); - const conversation = useConversation('selectors'); - - return ( - - {/* Header */} - - - {conversation?.title ?? 'Selector lab'} - - - Update one controlled message from the parent to see only the matching row - rerender. - - - - {/* Conversations */} - - - {conversations.map((conv) => ( - - ))} - - - - {/* Message rows */} - - {messageIds.map((id) => ( - - ))} - - - ); -} - -export default function SelectorDrivenThread() { - const [messages, setMessages] = React.useState(createMessages); - const [conversations] = React.useState([ - { - id: 'selectors', - title: 'Selector-driven thread', - subtitle: 'Row-level subscriptions', - }, - ]); - - const adapter = React.useMemo( - () => ({ - async sendMessage() { - return new ReadableStream({ - start(controller) { - controller.close(); - }, - }); - }, - }), - [], - ); - - return ( - - - - - - - - - - ); -} diff --git a/docs/data/chat/core/examples/selector-driven-thread/SelectorDrivenThread.tsx b/docs/data/chat/core/examples/selector-driven-thread/demos/selector-driven-thread/SelectorDrivenThread.tsx similarity index 97% rename from docs/data/chat/core/examples/selector-driven-thread/SelectorDrivenThread.tsx rename to docs/data/chat/core/examples/selector-driven-thread/demos/selector-driven-thread/SelectorDrivenThread.tsx index 765e6ab762221..79491bcae7985 100644 --- a/docs/data/chat/core/examples/selector-driven-thread/SelectorDrivenThread.tsx +++ b/docs/data/chat/core/examples/selector-driven-thread/demos/selector-driven-thread/SelectorDrivenThread.tsx @@ -5,9 +5,11 @@ import { useConversations, useMessage, useMessageIds, - type ChatAdapter, - type ChatConversation, - type ChatMessage, +} from '@mui/x-chat/headless'; +import type { + ChatAdapter, + ChatConversation, + ChatMessage, } from '@mui/x-chat/headless'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; @@ -120,6 +122,7 @@ function SelectorThread() { } export default function SelectorDrivenThread() { + // @focus-start @padding 1 const [messages, setMessages] = React.useState(createMessages); const [conversations] = React.useState([ { @@ -203,4 +206,5 @@ export default function SelectorDrivenThread() { ); + // @focus-end } diff --git a/docs/data/chat/core/examples/selector-driven-thread/demos/selector-driven-thread/client.ts b/docs/data/chat/core/examples/selector-driven-thread/demos/selector-driven-thread/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/core/examples/selector-driven-thread/demos/selector-driven-thread/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/core/examples/selector-driven-thread/demos/selector-driven-thread/index.ts b/docs/data/chat/core/examples/selector-driven-thread/demos/selector-driven-thread/index.ts new file mode 100644 index 0000000000000..c292ce982a005 --- /dev/null +++ b/docs/data/chat/core/examples/selector-driven-thread/demos/selector-driven-thread/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SelectorDrivenThread from './SelectorDrivenThread'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SelectorDrivenThread, { ClientProvider }); diff --git a/docs/data/chat/core/examples/selector-driven-thread/selector-driven-thread.md b/docs/data/chat/core/examples/selector-driven-thread/selector-driven-thread.md index e106c07587519..c17ede45d11ba 100644 --- a/docs/data/chat/core/examples/selector-driven-thread/selector-driven-thread.md +++ b/docs/data/chat/core/examples/selector-driven-thread/selector-driven-thread.md @@ -65,7 +65,7 @@ const conversation = useConversation('selectors'); The demo below shows the selector-driven thread pattern end to end: -{{"demo": "SelectorDrivenThread.js"}} +{{"component": "file://./demos/selector-driven-thread/index.ts"}} ## Key takeaways diff --git a/docs/data/chat/core/examples/streaming-lifecycle/StreamingLifecycleHeadlessChat.js b/docs/data/chat/core/examples/streaming-lifecycle/StreamingLifecycleHeadlessChat.js deleted file mode 100644 index 7b9fc8f62c6e2..0000000000000 --- a/docs/data/chat/core/examples/streaming-lifecycle/StreamingLifecycleHeadlessChat.js +++ /dev/null @@ -1,324 +0,0 @@ -import * as React from 'react'; -import { ChatProvider, useChat } from '@mui/x-chat/headless'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import Typography from '@mui/material/Typography'; -import SendRoundedIcon from '@mui/icons-material/SendRounded'; -import { demoUsers } from 'docs/data/chat/core/examples/shared/demoData'; -import { - createChunkStream, - createTextResponseChunks, - getMessageText, -} from 'docs/data/chat/core/examples/shared/demoUtils'; - -function createStreamingAdapter() { - return { - async sendMessage({ message }) { - const text = getMessageText(message); - const messageId = `streaming-assistant-${message.id}`; - const textId = `${messageId}-text`; - - if (text.includes('fail')) { - return createChunkStream( - [ - { type: 'start', messageId }, - { type: 'text-start', id: textId }, - { - type: 'text-delta', - id: textId, - delta: 'The stream will fail', - }, - { - type: 'text-delta', - id: textId, - delta: ' after this chunk.', - }, - ], - { - delayMs: 260, - errorAfterChunk: 3, - error: new Error('Demo transport lost the stream.'), - }, - ); - } - - if (text.includes('slow')) { - return createChunkStream( - createTextResponseChunks( - messageId, - 'This long-running stream is useful for demonstrating stopStreaming().', - ), - { delayMs: 420 }, - ); - } - - return createChunkStream( - [ - { type: 'start', messageId }, - { type: 'text-start', id: textId }, - { - type: 'text-delta', - id: textId, - delta: 'Streaming updates are visible', - }, - { - type: 'text-delta', - id: textId, - delta: ' before the final chunk arrives.', - }, - { - type: 'data-insight', - id: `${messageId}-data`, - data: { source: 'demo', confidence: 0.92 }, - }, - { type: 'text-end', id: textId }, - { type: 'finish', messageId, finishReason: 'stop' }, - ], - { delayMs: 220 }, - ); - }, - }; -} - -export default function StreamingLifecycleHeadlessChat() { - const adapter = React.useMemo(() => createStreamingAdapter(), []); - - return ( - { - console.log('onData', part.type); - }} - onFinish={(payload) => { - console.log( - 'onFinish', - payload.finishReason, - payload.isError, - payload.isAbort, - ); - }} - onError={(error) => { - console.log('onError', error.message); - }} - > - - - ); -} - -function StreamingLifecycleWithLogs() { - const { messages, isStreaming, sendMessage, stopStreaming, retry } = useChat(); - const [draft, setDraft] = React.useState('success'); - const [events, setEvents] = React.useState([]); - - const appendLog = React.useCallback((entry) => { - setEvents((previous) => [entry, ...previous].slice(0, 8)); - }, []); - - React.useEffect(() => { - const originalLog = console.log; - - console.log = (...args) => { - appendLog( - args - .map((arg) => (typeof arg === 'string' ? arg : JSON.stringify(arg))) - .join(' '), - ); - originalLog(...args); - }; - - return () => { - console.log = originalLog; - }; - }, [appendLog]); - - return ( - - {/* Header */} - - - Streaming lifecycle - - - - - {/* Event log */} - - - {events.join('\n') || 'Callback events will appear here.'} - - - - {/* Messages */} - - {messages.length === 0 ? ( - - No messages yet. - - ) : ( - messages.map((message) => { - const isUser = message.role === 'user'; - return ( - - - - {message.author?.displayName ?? message.role} - {message.status ? ` · ${message.status}` : null} - - {message.parts.map((part, index) => ( - - {part.type === 'text' ? part.text : null} - {part.type.startsWith('data-') && 'data' in part - ? JSON.stringify(part.data, null, 2) - : null} - - ))} - - - ); - }) - )} - - - {/* Input */} - - setDraft(event.target.value)} - onKeyDown={(event) => { - if (event.key === 'Enter' && !event.shiftKey) { - event.preventDefault(); - void sendMessage({ - conversationId: 'support', - author: demoUsers.alice, - parts: [{ type: 'text', text: draft }], - }); - } - }} - /> - - - - {/* Scenario buttons */} - - - - - {messages - .filter( - (message) => - message.role === 'user' && - (message.status === 'error' || message.status === 'cancelled'), - ) - .map((message) => ( - - ))} - - - ); -} diff --git a/docs/data/chat/core/examples/streaming-lifecycle/StreamingLifecycleHeadlessChat.tsx b/docs/data/chat/core/examples/streaming-lifecycle/demos/streaming-lifecycle-headless-chat/StreamingLifecycleHeadlessChat.tsx similarity index 98% rename from docs/data/chat/core/examples/streaming-lifecycle/StreamingLifecycleHeadlessChat.tsx rename to docs/data/chat/core/examples/streaming-lifecycle/demos/streaming-lifecycle-headless-chat/StreamingLifecycleHeadlessChat.tsx index f78ebda87780a..25fb1a43fd7b5 100644 --- a/docs/data/chat/core/examples/streaming-lifecycle/StreamingLifecycleHeadlessChat.tsx +++ b/docs/data/chat/core/examples/streaming-lifecycle/demos/streaming-lifecycle-headless-chat/StreamingLifecycleHeadlessChat.tsx @@ -1,10 +1,6 @@ import * as React from 'react'; -import { - ChatProvider, - useChat, - type ChatAdapter, - type ChatDataMessagePart, -} from '@mui/x-chat/headless'; +import { ChatProvider, useChat } from '@mui/x-chat/headless'; +import type { ChatAdapter, ChatDataMessagePart } from '@mui/x-chat/headless'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Paper from '@mui/material/Paper'; @@ -89,6 +85,7 @@ function createStreamingAdapter(): ChatAdapter { } export default function StreamingLifecycleHeadlessChat() { + // @focus-start @padding 1 const adapter = React.useMemo(() => createStreamingAdapter(), []); return ( @@ -113,6 +110,7 @@ export default function StreamingLifecycleHeadlessChat() { ); + // @focus-end } function StreamingLifecycleWithLogs() { diff --git a/docs/data/chat/core/examples/streaming-lifecycle/demos/streaming-lifecycle-headless-chat/client.ts b/docs/data/chat/core/examples/streaming-lifecycle/demos/streaming-lifecycle-headless-chat/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/core/examples/streaming-lifecycle/demos/streaming-lifecycle-headless-chat/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/core/examples/streaming-lifecycle/demos/streaming-lifecycle-headless-chat/index.ts b/docs/data/chat/core/examples/streaming-lifecycle/demos/streaming-lifecycle-headless-chat/index.ts new file mode 100644 index 0000000000000..0d1ad5737c59a --- /dev/null +++ b/docs/data/chat/core/examples/streaming-lifecycle/demos/streaming-lifecycle-headless-chat/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StreamingLifecycleHeadlessChat from './StreamingLifecycleHeadlessChat'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StreamingLifecycleHeadlessChat, { ClientProvider }); diff --git a/docs/data/chat/core/examples/streaming-lifecycle/streaming-lifecycle.md b/docs/data/chat/core/examples/streaming-lifecycle/streaming-lifecycle.md index c425ba4acbba9..6bb106d55d968 100644 --- a/docs/data/chat/core/examples/streaming-lifecycle/streaming-lifecycle.md +++ b/docs/data/chat/core/examples/streaming-lifecycle/streaming-lifecycle.md @@ -56,7 +56,7 @@ Register callbacks on `ChatProvider` to observe lifecycle events: The demo below exercises every lifecycle callback alongside `sendMessage()`, `stopStreaming()`, and `retry()`: -{{"demo": "StreamingLifecycleHeadlessChat.js"}} +{{"component": "file://./demos/streaming-lifecycle-headless-chat/index.ts"}} ## Lifecycle summary diff --git a/docs/data/chat/core/examples/tool-approval-and-renderers/ToolApprovalAndRenderersHeadlessChat.js b/docs/data/chat/core/examples/tool-approval-and-renderers/ToolApprovalAndRenderersHeadlessChat.js deleted file mode 100644 index b442ec0cae293..0000000000000 --- a/docs/data/chat/core/examples/tool-approval-and-renderers/ToolApprovalAndRenderersHeadlessChat.js +++ /dev/null @@ -1,340 +0,0 @@ -import * as React from 'react'; -import { ChatProvider, useChat, useChatPartRenderer } from '@mui/x-chat/headless'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Chip from '@mui/material/Chip'; -import Divider from '@mui/material/Divider'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { demoUsers } from 'docs/data/chat/core/examples/shared/demoData'; -import { createChunkStream } from 'docs/data/chat/core/examples/shared/demoUtils'; - -function createToolAdapter() { - let onEventRef = null; - let callCounter = 0; - let latestAssistantMessage = null; - - const pollPart = { - type: 'poll', - question: 'Was this approval flow understandable?', - options: ['Yes', 'Mostly', 'Needs work'], - }; - - return { - adapter: { - async sendMessage() { - callCounter += 1; - const messageId = `assistant-tool-${callCounter}`; - const textId = `assistant-tool-text-${callCounter}`; - const toolCallId = `weather-approval-${callCounter}`; - - latestAssistantMessage = { - id: messageId, - conversationId: 'tools', - role: 'assistant', - author: demoUsers.agent, - status: 'sent', - parts: [ - { - type: 'text', - text: 'I can fetch the weather, but the tool call needs approval first.', - }, - { - type: 'tool', - toolInvocation: { - toolCallId, - toolName: 'weather', - state: 'approval-requested', - input: { location: 'Prague' }, - }, - }, - ], - }; - - return createChunkStream( - [ - { type: 'start', messageId }, - { type: 'text-start', id: textId }, - { - type: 'text-delta', - id: textId, - delta: - 'I can fetch the weather, but the tool call needs approval first.', - }, - { type: 'text-end', id: textId }, - { - type: 'tool-approval-request', - toolCallId, - toolName: 'weather', - input: { location: 'Prague' }, - }, - { - type: 'finish', - messageId, - finishReason: 'tool-call', - }, - ], - { delayMs: 220 }, - ); - }, - subscribe({ onEvent }) { - onEventRef = onEvent; - return () => { - onEventRef = null; - }; - }, - async addToolApprovalResponse({ id, approved, reason }) { - if (!latestAssistantMessage) { - return; - } - - // 1. Update the tool invocation state on the current message - onEventRef?.({ - type: 'message-updated', - message: { - ...latestAssistantMessage, - parts: [ - latestAssistantMessage.parts[0], - { - type: 'tool', - toolInvocation: { - toolCallId: id, - toolName: 'weather', - state: approved ? 'output-available' : 'output-denied', - input: { location: 'Prague' }, - approval: { - approved, - reason, - }, - output: approved - ? { - forecast: 'Cloudy', - temperatureC: 18, - } - : undefined, - }, - }, - ...(approved ? [pollPart] : []), - ], - }, - }); - - // 2. Emit a follow-up assistant message after a short delay - setTimeout(() => { - const followUpText = approved - ? 'The weather in Prague is Cloudy with a temperature of 18 °C.' - : `The weather tool call was denied${reason ? `: ${reason}` : ''}. Let me know if you change your mind.`; - - onEventRef?.({ - type: 'message-added', - message: { - id: `assistant-followup-${id}`, - conversationId: 'tools', - role: 'assistant', - author: demoUsers.agent, - status: 'sent', - parts: [{ type: 'text', text: followUpText }], - }, - }); - }, 400); - }, - }, - }; -} - -function PollPart({ message, index, part }) { - const renderer = useChatPartRenderer('poll'); - - if (!renderer) { - return null; - } - - return {renderer({ part, message, index })}; -} - -function ToolAndRendererInner() { - const { messages, sendMessage, addToolApprovalResponse } = useChat(); - - return ( - - {/* Header */} - -
- - Tool approval and custom renderers - - - Approve or deny the tool call, then render the custom poll part through - the registry. - -
- - - - {/* Message list */} - - {messages.map((message) => ( - - - {message.role} - - - {message.parts.map((part, index) => { - if (part.type === 'text') { - return ( - - {part.text} - - ); - } - - if (part.type === 'tool') { - return ( - - - - {part.toolInvocation.toolName} - {' · '} - {part.toolInvocation.state} - - {part.toolInvocation.output ? ( - - {JSON.stringify(part.toolInvocation.output, null, 2)} - - ) : null} - {part.toolInvocation.state === 'output-denied' ? ( - - {part.toolInvocation.approval?.reason ?? - 'Tool execution was denied'} - - ) : null} - {part.toolInvocation.state === 'approval-requested' ? ( - - - - - ) : null} - - ); - } - - if (part.type === 'poll') { - return ( - - ); - } - - return null; - })} - - - ))} - - - ); -} - -const partRenderers = { - poll: ({ part }) => ( -
- - - {part.question} - - - {part.options.map((option) => ( - - ))} - -
- ), -}; - -export default function ToolApprovalAndRenderersHeadlessChat() { - const { adapter } = React.useMemo(() => createToolAdapter(), []); - - return ( - - - - ); -} diff --git a/docs/data/chat/core/examples/tool-approval-and-renderers/ToolApprovalAndRenderersHeadlessChat.tsx.preview b/docs/data/chat/core/examples/tool-approval-and-renderers/ToolApprovalAndRenderersHeadlessChat.tsx.preview deleted file mode 100644 index 8e03636e84d85..0000000000000 --- a/docs/data/chat/core/examples/tool-approval-and-renderers/ToolApprovalAndRenderersHeadlessChat.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/chat/core/examples/tool-approval-and-renderers/ToolApprovalAndRenderersHeadlessChat.tsx b/docs/data/chat/core/examples/tool-approval-and-renderers/demos/tool-approval-and-renderers-headless-chat/ToolApprovalAndRenderersHeadlessChat.tsx similarity index 98% rename from docs/data/chat/core/examples/tool-approval-and-renderers/ToolApprovalAndRenderersHeadlessChat.tsx rename to docs/data/chat/core/examples/tool-approval-and-renderers/demos/tool-approval-and-renderers-headless-chat/ToolApprovalAndRenderersHeadlessChat.tsx index 77c5df4eaa3c8..47fbfa94d5a39 100644 --- a/docs/data/chat/core/examples/tool-approval-and-renderers/ToolApprovalAndRenderersHeadlessChat.tsx +++ b/docs/data/chat/core/examples/tool-approval-and-renderers/demos/tool-approval-and-renderers-headless-chat/ToolApprovalAndRenderersHeadlessChat.tsx @@ -1,12 +1,10 @@ import * as React from 'react'; -import { - ChatProvider, - useChat, - useChatPartRenderer, - type ChatAdapter, - type ChatMessage, - type ChatRealtimeEvent, - type ChatPartRendererMap, +import { ChatProvider, useChat, useChatPartRenderer } from '@mui/x-chat/headless'; +import type { + ChatAdapter, + ChatMessage, + ChatRealtimeEvent, + ChatPartRendererMap, } from '@mui/x-chat/headless'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; @@ -352,6 +350,7 @@ const partRenderers: ChatPartRendererMap = { }; export default function ToolApprovalAndRenderersHeadlessChat() { + // @focus-start @padding 1 const { adapter } = React.useMemo(() => createToolAdapter(), []); return ( @@ -363,4 +362,5 @@ export default function ToolApprovalAndRenderersHeadlessChat() { ); + // @focus-end } diff --git a/docs/data/chat/core/examples/tool-approval-and-renderers/demos/tool-approval-and-renderers-headless-chat/client.ts b/docs/data/chat/core/examples/tool-approval-and-renderers/demos/tool-approval-and-renderers-headless-chat/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/core/examples/tool-approval-and-renderers/demos/tool-approval-and-renderers-headless-chat/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/core/examples/tool-approval-and-renderers/demos/tool-approval-and-renderers-headless-chat/index.ts b/docs/data/chat/core/examples/tool-approval-and-renderers/demos/tool-approval-and-renderers-headless-chat/index.ts new file mode 100644 index 0000000000000..be61160921bbc --- /dev/null +++ b/docs/data/chat/core/examples/tool-approval-and-renderers/demos/tool-approval-and-renderers-headless-chat/index.ts @@ -0,0 +1,8 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ToolApprovalAndRenderersHeadlessChat from './ToolApprovalAndRenderersHeadlessChat'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ToolApprovalAndRenderersHeadlessChat, { + ClientProvider, +}); diff --git a/docs/data/chat/core/examples/tool-approval-and-renderers/tool-approval-and-renderers.md b/docs/data/chat/core/examples/tool-approval-and-renderers/tool-approval-and-renderers.md index 60e300ef764c0..60ff00fdc9497 100644 --- a/docs/data/chat/core/examples/tool-approval-and-renderers/tool-approval-and-renderers.md +++ b/docs/data/chat/core/examples/tool-approval-and-renderers/tool-approval-and-renderers.md @@ -81,7 +81,7 @@ See [Type augmentation](/x/react-chat/core/examples/type-augmentation/) for deta The demo below combines the approval flow and a custom part renderer: -{{"demo": "ToolApprovalAndRenderersHeadlessChat.js"}} +{{"component": "file://./demos/tool-approval-and-renderers-headless-chat/index.ts"}} ## Key takeaways diff --git a/docs/data/chat/core/examples/tool-call-events/ToolCallEventsHeadlessChat.js b/docs/data/chat/core/examples/tool-call-events/ToolCallEventsHeadlessChat.js deleted file mode 100644 index f6e5a5b9eccb1..0000000000000 --- a/docs/data/chat/core/examples/tool-call-events/ToolCallEventsHeadlessChat.js +++ /dev/null @@ -1,233 +0,0 @@ -import * as React from 'react'; -import { ChatProvider, useChat } from '@mui/x-chat/headless'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { demoUsers } from 'docs/data/chat/core/examples/shared/demoData'; -import { createChunkStream } from 'docs/data/chat/core/examples/shared/demoUtils'; - -const adapter = { - async sendMessage({ message }) { - const messageId = `tool-events-assistant-${message.id}`; - const textId = `${messageId}-text`; - const toolCallId = `inventory-${message.id}`; - - return createChunkStream( - [ - { type: 'start', messageId }, - { type: 'text-start', id: textId }, - { - type: 'text-delta', - id: textId, - delta: - 'I am checking inventory and will keep the tool state in sync as it changes.', - }, - { type: 'text-end', id: textId }, - { - type: 'tool-input-start', - toolCallId, - toolName: 'inventory.search', - }, - { - type: 'tool-input-available', - toolCallId, - toolName: 'inventory.search', - input: { sku: 'CHAIR-04', warehouse: 'prg-1' }, - }, - { - type: 'tool-output-available', - toolCallId, - output: { - sku: 'CHAIR-04', - available: 14, - warehouse: 'prg-1', - }, - }, - { type: 'finish', messageId, finishReason: 'stop' }, - ], - { delayMs: 220 }, - ); - }, -}; - -function ToolCallEventsInner() { - const { messages, sendMessage, isStreaming } = useChat(); - - return ( - - {/* Header */} - - - Tool call callback log - - - - - {/* Messages */} - - {messages.length === 0 ? ( - - Send a message to stream a tool invocation and watch the callback log - update. - - ) : ( - messages.map((message) => { - const isUser = message.role === 'user'; - return ( - - - - {message.author?.displayName ?? message.role} - - {message.parts.map((part, index) => ( - - {part.type === 'text' ? part.text : null} - {part.type === 'tool' - ? `${part.toolInvocation.toolName}: ${part.toolInvocation.state}` - : null} - - ))} - - - ); - }) - )} - - - ); -} - -export default function ToolCallEventsHeadlessChat() { - const [events, setEvents] = React.useState([]); - const [latestState, setLatestState] = React.useState('idle'); - const [toolName, setToolName] = React.useState('none'); - - const handleToolCall = React.useCallback((payload) => { - const entry = `${payload.toolCall.toolName} -> ${payload.toolCall.state}`; - - setToolName(payload.toolCall.toolName); - setLatestState(payload.toolCall.state); - setEvents((previous) => [entry, ...previous].slice(0, 8)); - }, []); - - return ( - - - - {/* Stats */} - - {[ - { label: 'Tool', value: toolName }, - { label: 'Latest state', value: latestState }, - { label: 'Events', value: events.length }, - ].map((stat) => ( - - - {stat.label} - - - {stat.value} - - - ))} - - - {/* Event log */} - - - {events.join('\n') || 'Tool events will appear here.'} - - - - - ); -} diff --git a/docs/data/chat/core/examples/tool-call-events/ToolCallEventsHeadlessChat.tsx b/docs/data/chat/core/examples/tool-call-events/demos/tool-call-events-headless-chat/ToolCallEventsHeadlessChat.tsx similarity index 97% rename from docs/data/chat/core/examples/tool-call-events/ToolCallEventsHeadlessChat.tsx rename to docs/data/chat/core/examples/tool-call-events/demos/tool-call-events-headless-chat/ToolCallEventsHeadlessChat.tsx index 5283357057249..526031ceee30c 100644 --- a/docs/data/chat/core/examples/tool-call-events/ToolCallEventsHeadlessChat.tsx +++ b/docs/data/chat/core/examples/tool-call-events/demos/tool-call-events-headless-chat/ToolCallEventsHeadlessChat.tsx @@ -1,10 +1,6 @@ import * as React from 'react'; -import { - ChatProvider, - useChat, - type ChatAdapter, - type ChatOnToolCallPayload, -} from '@mui/x-chat/headless'; +import { ChatProvider, useChat } from '@mui/x-chat/headless'; +import type { ChatAdapter, ChatOnToolCallPayload } from '@mui/x-chat/headless'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Paper from '@mui/material/Paper'; @@ -167,6 +163,7 @@ function ToolCallEventsInner() { } export default function ToolCallEventsHeadlessChat() { + // @focus-start @padding 1 const [events, setEvents] = React.useState([]); const [latestState, setLatestState] = React.useState('idle'); const [toolName, setToolName] = React.useState('none'); @@ -236,4 +233,5 @@ export default function ToolCallEventsHeadlessChat() { ); + // @focus-end } diff --git a/docs/data/chat/core/examples/tool-call-events/demos/tool-call-events-headless-chat/client.ts b/docs/data/chat/core/examples/tool-call-events/demos/tool-call-events-headless-chat/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/core/examples/tool-call-events/demos/tool-call-events-headless-chat/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/core/examples/tool-call-events/demos/tool-call-events-headless-chat/index.ts b/docs/data/chat/core/examples/tool-call-events/demos/tool-call-events-headless-chat/index.ts new file mode 100644 index 0000000000000..dd3b5c5ebb933 --- /dev/null +++ b/docs/data/chat/core/examples/tool-call-events/demos/tool-call-events-headless-chat/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ToolCallEventsHeadlessChat from './ToolCallEventsHeadlessChat'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ToolCallEventsHeadlessChat, { ClientProvider }); diff --git a/docs/data/chat/core/examples/tool-call-events/tool-call-events.md b/docs/data/chat/core/examples/tool-call-events/tool-call-events.md index 2d20132ff9198..c86c19fabfed3 100644 --- a/docs/data/chat/core/examples/tool-call-events/tool-call-events.md +++ b/docs/data/chat/core/examples/tool-call-events/tool-call-events.md @@ -62,7 +62,7 @@ The `toolCall` object includes `toolCallId`, `toolName`, `state`, `input`, `outp The demo below shows how `onToolCall` observes state transitions and feeds an external audit log: -{{"demo": "ToolCallEventsHeadlessChat.js"}} +{{"component": "file://./demos/tool-call-events-headless-chat/index.ts"}} ## Key takeaways diff --git a/docs/data/chat/core/examples/type-augmentation/TypeAugmentationHeadlessChat.js b/docs/data/chat/core/examples/type-augmentation/TypeAugmentationHeadlessChat.js deleted file mode 100644 index e705c224ba97f..0000000000000 --- a/docs/data/chat/core/examples/type-augmentation/TypeAugmentationHeadlessChat.js +++ /dev/null @@ -1,404 +0,0 @@ -import * as React from 'react'; -import { - ChatProvider, - useChat, - useChatPartRenderer, - useConversation, -} from '@mui/x-chat/headless'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Chip from '@mui/material/Chip'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { demoUsers } from 'docs/data/chat/core/examples/shared/demoData'; -import { createChunkStream } from 'docs/data/chat/core/examples/shared/demoUtils'; - -const triageUser = { - ...demoUsers.alice, - metadata: { - team: 'support', - shift: 'day', - }, -}; - -const triageAgent = { - ...demoUsers.agent, - metadata: { - team: 'ops', - shift: 'day', - }, -}; - -const conversations = [ - { - id: 'triage', - title: 'Typed extensions', - subtitle: 'Module augmentation in action', - readState: 'read', - participants: [triageUser, triageAgent], - metadata: { - channel: 'support', - slaMinutes: 45, - escalated: true, - }, - }, -]; - -const initialMessages = [ - { - id: 'typed-seed', - conversationId: 'triage', - role: 'assistant', - author: triageAgent, - status: 'sent', - metadata: { - model: 'gpt-5', - confidence: 'high', - }, - parts: [ - { - type: 'text', - text: 'This thread is using app-specific metadata, typed tools, typed data parts, and a custom summary card.', - }, - { - type: 'ticket-summary', - ticketId: 'CHAT-128', - severity: 'high', - summary: - 'Checkout assistance is blocked by an expired integration token and needs ops review.', - }, - ], - }, -]; - -const partRenderers = { - 'ticket-summary': ({ part }) => ( - - - - {part.ticketId} - - - - {part.summary} - - ), -}; - -const adapter = { - async sendMessage({ message }) { - const messageId = `typed-response-${message.id}`; - const textId = `${messageId}-text`; - const toolCallId = `ticket-lookup-${message.id}`; - - return createChunkStream( - [ - { type: 'start', messageId }, - { type: 'text-start', id: textId }, - { - type: 'text-delta', - id: textId, - delta: - 'The runtime is now streaming typed tool, metadata, and data-part updates.', - }, - { type: 'text-end', id: textId }, - { - type: 'tool-input-available', - toolCallId, - toolName: 'ticket.lookup', - input: { - ticketId: 'CHAT-128', - }, - }, - { - type: 'tool-output-available', - toolCallId, - output: { - status: 'blocked', - owner: 'Sam', - priority: 'high', - }, - }, - { - type: 'data-ticket-status', - id: `${messageId}-ticket-status`, - data: { - ticketId: 'CHAT-128', - status: 'blocked', - lastUpdated: '10:24 UTC', - }, - }, - { - type: 'message-metadata', - metadata: { - model: 'gpt-5', - confidence: 'high', - }, - }, - { type: 'finish', messageId, finishReason: 'stop' }, - ], - { delayMs: 180 }, - ); - }, -}; - -function TicketSummaryPart({ message, index, part }) { - const renderer = useChatPartRenderer('ticket-summary'); - - if (!renderer) { - return null; - } - - return {renderer({ part, message, index })}; -} - -function isTicketLookupInvocation(invocation) { - return invocation.toolName === 'ticket.lookup'; -} - -function renderPart(part, message, index) { - if (part.type === 'text') { - return ( - - {part.text} - {index === 0 ? ( - - {message.author?.metadata ? ( - - ) : null} - {message.metadata?.model ? ( - - ) : null} - {message.metadata?.confidence ? ( - - ) : null} - - ) : null} - - ); - } - - if (part.type === 'tool') { - const { toolInvocation } = part; - const ticketLookup = isTicketLookupInvocation(toolInvocation) - ? toolInvocation - : null; - - return ( - - - {toolInvocation.toolName} · {toolInvocation.state} - - {ticketLookup?.input ? ( - - Lookup ticket: {ticketLookup.input.ticketId} - - ) : null} - {ticketLookup?.output ? ( - - {ticketLookup.output.status} · owner {ticketLookup.output.owner}{' '} - · {ticketLookup.output.priority} priority - - ) : null} - - ); - } - - if (part.type === 'data-ticket-status') { - return ( - - - data-ticket-status - - - {part.data.ticketId} is - - - Last updated {part.data.lastUpdated} - - - ); - } - - if (part.type === 'ticket-summary') { - return ; - } - - return null; -} - -function TypeAugmentationInner() { - const { messages, sendMessage, isStreaming } = useChat(); - const conversation = useConversation('triage'); - - return ( - - {/* Header */} - - - Type augmentation - - - - - {/* Stats */} - - {[ - { - label: 'Channel', - value: conversation?.metadata?.channel ?? 'n/a', - }, - { - label: 'SLA', - value: `${conversation?.metadata?.slaMinutes ?? 0}m`, - }, - { - label: 'Escalated', - value: conversation?.metadata?.escalated ? 'yes' : 'no', - }, - ].map((stat) => ( - - - {stat.label} - - - {stat.value} - - - ))} - - - {/* Messages */} - - {messages.length === 0 ? ( - - Send a message to stream typed tool and data-part updates. - - ) : ( - messages.map((message) => { - const isUser = message.role === 'user'; - return ( - - - - {message.author?.displayName ?? message.role} - - - {message.parts.map((part, index) => ( - - {renderPart(part, message, index)} - - ))} - - - - ); - }) - )} - - - ); -} - -export default function TypeAugmentationHeadlessChat() { - return ( - - - - ); -} diff --git a/docs/data/chat/core/examples/type-augmentation/TypeAugmentationHeadlessChat.tsx.preview b/docs/data/chat/core/examples/type-augmentation/TypeAugmentationHeadlessChat.tsx.preview deleted file mode 100644 index 7bcc95ae41dfa..0000000000000 --- a/docs/data/chat/core/examples/type-augmentation/TypeAugmentationHeadlessChat.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/chat/core/examples/type-augmentation/TypeAugmentationHeadlessChat.tsx b/docs/data/chat/core/examples/type-augmentation/demos/type-augmentation-headless-chat/TypeAugmentationHeadlessChat.tsx similarity index 98% rename from docs/data/chat/core/examples/type-augmentation/TypeAugmentationHeadlessChat.tsx rename to docs/data/chat/core/examples/type-augmentation/demos/type-augmentation-headless-chat/TypeAugmentationHeadlessChat.tsx index 547a551e66a84..c50f1057beb68 100644 --- a/docs/data/chat/core/examples/type-augmentation/TypeAugmentationHeadlessChat.tsx +++ b/docs/data/chat/core/examples/type-augmentation/demos/type-augmentation-headless-chat/TypeAugmentationHeadlessChat.tsx @@ -4,11 +4,13 @@ import { useChat, useChatPartRenderer, useConversation, - type ChatAdapter, - type ChatConversation, - type ChatMessage, - type ChatPartRendererMap, - type ChatUser, +} from '@mui/x-chat/headless'; +import type { + ChatAdapter, + ChatConversation, + ChatMessage, + ChatPartRendererMap, + ChatUser, } from '@mui/x-chat/headless'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; @@ -503,6 +505,7 @@ function TypeAugmentationInner() { export default function TypeAugmentationHeadlessChat() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/core/examples/type-augmentation/demos/type-augmentation-headless-chat/client.ts b/docs/data/chat/core/examples/type-augmentation/demos/type-augmentation-headless-chat/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/core/examples/type-augmentation/demos/type-augmentation-headless-chat/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/core/examples/type-augmentation/demos/type-augmentation-headless-chat/index.ts b/docs/data/chat/core/examples/type-augmentation/demos/type-augmentation-headless-chat/index.ts new file mode 100644 index 0000000000000..8dc7281a8c346 --- /dev/null +++ b/docs/data/chat/core/examples/type-augmentation/demos/type-augmentation-headless-chat/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TypeAugmentationHeadlessChat from './TypeAugmentationHeadlessChat'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TypeAugmentationHeadlessChat, { ClientProvider }); diff --git a/docs/data/chat/core/examples/type-augmentation/type-augmentation.md b/docs/data/chat/core/examples/type-augmentation/type-augmentation.md index 06c8177f0f6ca..a7e50a4104bd0 100644 --- a/docs/data/chat/core/examples/type-augmentation/type-augmentation.md +++ b/docs/data/chat/core/examples/type-augmentation/type-augmentation.md @@ -88,7 +88,7 @@ const renderer = useChatPartRenderer('ticket-summary'); The demo below shows how a single augmentation flows through metadata, a typed tool, a typed `data-*` part, and a custom message part: -{{"demo": "TypeAugmentationHeadlessChat.js"}} +{{"component": "file://./demos/type-augmentation-headless-chat/index.ts"}} ## Key takeaways diff --git a/docs/data/chat/core/hooks/hooks.md b/docs/data/chat/core/hooks/hooks.md index 4705f6db97ee3..b484dc1ad0b70 100644 --- a/docs/data/chat/core/hooks/hooks.md +++ b/docs/data/chat/core/hooks/hooks.md @@ -30,7 +30,7 @@ All hooks must be called inside a ``. The demo below shows hooks in action inside a minimal custom chat: -{{"demo": "../examples/minimal-chat/MinimalHeadlessChat.js", "bg": "inline", "defaultCodeOpen": false, "hideToolbar": true}} +{{"component": "file://../examples/minimal-chat/demos/minimal-headless-chat/index.ts", "bg": "inline", "hideToolbar": true, "collapseToEmpty": true}} ## `useChat()` diff --git a/docs/data/chat/core/realtime/realtime.md b/docs/data/chat/core/realtime/realtime.md index abf86383c6e6c..76b4e7ab61fee 100644 --- a/docs/data/chat/core/realtime/realtime.md +++ b/docs/data/chat/core/realtime/realtime.md @@ -14,7 +14,7 @@ The runtime calls it on mount and cleans it up on unmount, keeping the subscript The demo below shows real-time events flowing into the runtime: -{{"demo": "../examples/realtime/RealtimeHeadlessChat.js", "bg": "inline", "defaultCodeOpen": false, "hideToolbar": true}} +{{"component": "file://../examples/realtime/demos/realtime-headless-chat/index.ts", "bg": "inline", "hideToolbar": true, "collapseToEmpty": true}} ## Subscription lifecycle diff --git a/docs/data/chat/core/selectors/selectors.md b/docs/data/chat/core/selectors/selectors.md index 8eb6189676fc8..ef1ffa0670e7e 100644 --- a/docs/data/chat/core/selectors/selectors.md +++ b/docs/data/chat/core/selectors/selectors.md @@ -18,7 +18,7 @@ import { chatSelectors, useChatStore } from '@mui/x-chat/headless'; The demo below shows selectors driving row-level subscriptions in a chat thread: -{{"demo": "../examples/selector-driven-thread/SelectorDrivenThread.js", "bg": "inline", "defaultCodeOpen": false, "hideToolbar": true}} +{{"component": "file://../examples/selector-driven-thread/demos/selector-driven-thread/index.ts", "bg": "inline", "hideToolbar": true, "collapseToEmpty": true}} ## Selector reference diff --git a/docs/data/chat/core/state/state.md b/docs/data/chat/core/state/state.md index d86016ed72723..64f2f755d4a62 100644 --- a/docs/data/chat/core/state/state.md +++ b/docs/data/chat/core/state/state.md @@ -14,7 +14,7 @@ It creates the chat store, wires the adapter, and makes hooks and selectors avai The following demo shows controlled state in action: -{{"demo": "../examples/controlled-state/ControlledStateHeadlessChat.js", "bg": "inline", "defaultCodeOpen": false, "hideToolbar": true}} +{{"component": "file://../examples/controlled-state/demos/controlled-state-headless-chat/index.ts", "bg": "inline", "hideToolbar": true, "collapseToEmpty": true}} ## Configuring the runtime diff --git a/docs/data/chat/core/streaming/streaming.md b/docs/data/chat/core/streaming/streaming.md index 6407866796668..eb2729f3f6f0a 100644 --- a/docs/data/chat/core/streaming/streaming.md +++ b/docs/data/chat/core/streaming/streaming.md @@ -15,7 +15,7 @@ UI components consume the updates through hooks and selectors. The following demo visualizes the streaming lifecycle: -{{"demo": "../examples/streaming-lifecycle/StreamingLifecycleHeadlessChat.js", "bg": "inline", "defaultCodeOpen": false, "hideToolbar": true}} +{{"component": "file://../examples/streaming-lifecycle/demos/streaming-lifecycle-headless-chat/index.ts", "bg": "inline", "hideToolbar": true, "collapseToEmpty": true}} ## Chunk categories diff --git a/docs/data/chat/core/types/types.md b/docs/data/chat/core/types/types.md index 6b30d482b08c2..f11d5678c891b 100644 --- a/docs/data/chat/core/types/types.md +++ b/docs/data/chat/core/types/types.md @@ -14,7 +14,7 @@ Your app-specific types flow through the entire stack—messages, stream chunks, The demo below shows type augmentation in practice: -{{"demo": "../examples/type-augmentation/TypeAugmentationHeadlessChat.js", "bg": "inline", "defaultCodeOpen": false, "hideToolbar": true}} +{{"component": "file://../examples/type-augmentation/demos/type-augmentation-headless-chat/index.ts", "bg": "inline", "hideToolbar": true, "collapseToEmpty": true}} ## Registry interface reference diff --git a/docs/data/chat/customization/look-and-feel/ComposerVariantsDemo.js b/docs/data/chat/customization/look-and-feel/ComposerVariantsDemo.js deleted file mode 100644 index dcd111ec0cca9..0000000000000 --- a/docs/data/chat/customization/look-and-feel/ComposerVariantsDemo.js +++ /dev/null @@ -1,82 +0,0 @@ -'use client'; -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { ChatComposer } from '@mui/x-chat'; -import { ChatProvider } from '@mui/x-chat/headless'; -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - demoUsers, - minimalConversation, -} from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter({ respond: () => 'echo' }); - -function VariantCard({ title, description, children }) { - return ( - - - {title} - - {description} - - -
{children}
- - ); -} - -export default function ComposerVariantsDemo() { - return ( - - - - - - - - - - - - - - ); -} diff --git a/docs/data/chat/customization/look-and-feel/DensityComparisonDemo.js b/docs/data/chat/customization/look-and-feel/DensityComparisonDemo.js deleted file mode 100644 index dab02581c5d2d..0000000000000 --- a/docs/data/chat/customization/look-and-feel/DensityComparisonDemo.js +++ /dev/null @@ -1,64 +0,0 @@ -'use client'; -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Typography from '@mui/material/Typography'; -import { ChatBox } from '@mui/x-chat'; - -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - demoUsers, - minimalConversation, - minimalMessages, -} from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter({ respond: () => 'echo' }); - -function DensityPanel({ density, caption }) { - return ( - - - {caption} - - - - - - ); -} - -export default function DensityComparisonDemo() { - return ( - - - - - - ); -} diff --git a/docs/data/chat/customization/look-and-feel/DensityComparisonDemo.tsx.preview b/docs/data/chat/customization/look-and-feel/DensityComparisonDemo.tsx.preview deleted file mode 100644 index 7023a7fab94c0..0000000000000 --- a/docs/data/chat/customization/look-and-feel/DensityComparisonDemo.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/chat/customization/look-and-feel/LookAndFeelPlayground.js b/docs/data/chat/customization/look-and-feel/LookAndFeelPlayground.js deleted file mode 100644 index 99b3aa7758307..0000000000000 --- a/docs/data/chat/customization/look-and-feel/LookAndFeelPlayground.js +++ /dev/null @@ -1,168 +0,0 @@ -'use client'; -import * as React from 'react'; -import Box from '@mui/material/Box'; -import CssBaseline from '@mui/material/CssBaseline'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import Typography from '@mui/material/Typography'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; -import { ChatBox } from '@mui/x-chat'; - -import { - ChoiceControl, - NumberControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - inboxConversations, - inboxThreads, - minimalConversation, - minimalMessages, -} from 'docs/data/chat/core/examples/shared/demoData'; - -// Enough height to show the conversation list, header, and a few messages at once. -const PREVIEW_HEIGHT = 540; -// `shape.borderRadius` stays in a range that reads on chat bubbles without turning them into pills. -const MAX_BORDER_RADIUS = 28; - -const PRIMARY_PRESETS = [ - { label: 'Indigo', value: '#5b6cff' }, - { label: 'Slack', value: '#611f69' }, - { label: 'WhatsApp', value: '#25d366' }, - { label: 'Telegram', value: '#0088cc' }, - { label: 'Claude', value: '#da7756' }, -]; - -const allConversations = [minimalConversation, ...inboxConversations]; -const allMessages = [...minimalMessages, ...Object.values(inboxThreads).flat()]; - -const adapter = createEchoAdapter({ - respond: (text) => - `Echo: "${text}". Every bubble color, radius, and density above is driven by the props on the right.`, -}); - -export default function LookAndFeelPlayground() { - const [variant, setVariant] = React.useState('default'); - const [density, setDensity] = React.useState('standard'); - const [primary, setPrimary] = React.useState(PRIMARY_PRESETS[0].value); - const [radius, setRadius] = React.useState(12); - - const theme = React.useMemo( - () => - createTheme({ - palette: { primary: { main: primary } }, - shape: { borderRadius: radius }, - }), - [primary, radius], - ); - - return ( - - - - - - - - - - - Every change re-themes the live chat on the left. - - - - - - - palette.primary.main - - { - if (next !== null) { - setPrimary(next); - } - }} - aria-label="palette.primary.main" - sx={{ flexWrap: 'wrap', gap: 0.5, border: 0 }} - > - {PRIMARY_PRESETS.map((preset) => ( - - ))} - - - - `${value}px`} - onChange={setRadius} - /> - - - ); -} diff --git a/docs/data/chat/customization/look-and-feel/MessageStatesDemo.js b/docs/data/chat/customization/look-and-feel/MessageStatesDemo.js deleted file mode 100644 index 4a2ce60390a19..0000000000000 --- a/docs/data/chat/customization/look-and-feel/MessageStatesDemo.js +++ /dev/null @@ -1,147 +0,0 @@ -'use client'; -import * as React from 'react'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import { - ChatMessage, - ChatMessageAvatar, - ChatMessageContent, - ChatMessageGroup, -} from '@mui/x-chat'; -import { ChatProvider, useChatStore } from '@mui/x-chat/headless'; - -import { - demoUsers, - createTextMessage, -} from 'docs/data/chat/core/examples/shared/demoData'; - -const noopAdapter = { - async sendMessage() { - return new ReadableStream({ - start(controller) { - controller.close(); - }, - }); - }, -}; - -const conversation = { - id: 'message-states-demo', - title: 'Message states', - participants: [demoUsers.you, demoUsers.agent], - readState: 'read', - unreadCount: 0, -}; - -const messages = [ - createTextMessage({ - id: 'states-msg-assistant', - conversationId: conversation.id, - role: 'assistant', - author: demoUsers.agent, - createdAt: '2026-03-15T09:30:00.000Z', - text: 'Default assistant bubble — uses palette.grey[100] (light) / palette.grey[800] (dark).', - }), - createTextMessage({ - id: 'states-msg-user', - conversationId: conversation.id, - role: 'user', - author: demoUsers.you, - createdAt: '2026-03-15T09:31:00.000Z', - text: 'Outgoing user bubble — uses `palette.primary.main`.', - }), - { - ...createTextMessage({ - id: 'states-msg-streaming', - conversationId: conversation.id, - role: 'assistant', - author: demoUsers.agent, - createdAt: '2026-03-15T09:32:00.000Z', - text: 'Streaming bubble — animates while the assistant is typing…', - }), - status: 'streaming', - }, - { - ...createTextMessage({ - id: 'states-msg-error', - conversationId: conversation.id, - role: 'assistant', - author: demoUsers.agent, - createdAt: '2026-03-15T09:33:00.000Z', - text: 'This message failed to send.', - }), - status: 'error', - }, -]; - -function ErrorEffect({ messageId }) { - const store = useChatStore(); - React.useEffect(() => { - store.setMessageError(messageId, { - code: 'SEND_ERROR', - source: 'send', - message: 'Could not reach the chat server.', - recoverable: true, - retryable: true, - }); - return () => { - store.setMessageError(messageId, null); - }; - }, [store, messageId]); - return null; -} - -function MessageBubble({ messageId }) { - return ( - - - - - - - ); -} - -const STATE_LABELS = { - 'states-msg-assistant': 'role="assistant" — status="sent"', - 'states-msg-user': 'role="user" — status="sent"', - 'states-msg-streaming': 'role="assistant" — status="streaming"', - 'states-msg-error': 'role="assistant" — status="error"', -}; - -export default function MessageStatesDemo() { - return ( - - - - - {messages.map((message) => ( - - - {STATE_LABELS[message.id]} - -
- -
- - ))} - - - - ); -} diff --git a/docs/data/chat/customization/look-and-feel/MessageVariantsDemo.js b/docs/data/chat/customization/look-and-feel/MessageVariantsDemo.js deleted file mode 100644 index f4aa2138de817..0000000000000 --- a/docs/data/chat/customization/look-and-feel/MessageVariantsDemo.js +++ /dev/null @@ -1,63 +0,0 @@ -'use client'; -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Typography from '@mui/material/Typography'; -import { ChatBox } from '@mui/x-chat'; - -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - demoUsers, - minimalConversation, - minimalMessages, -} from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter({ respond: () => 'echo' }); - -function VariantPanel({ variant, caption }) { - return ( - - - {caption} - - - - - - ); -} - -export default function MessageVariantsDemo() { - return ( - - - - - ); -} diff --git a/docs/data/chat/customization/look-and-feel/MessageVariantsDemo.tsx.preview b/docs/data/chat/customization/look-and-feel/MessageVariantsDemo.tsx.preview deleted file mode 100644 index c5e18f5177b75..0000000000000 --- a/docs/data/chat/customization/look-and-feel/MessageVariantsDemo.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/chat/customization/look-and-feel/ThemeAndSlotsDemo.js b/docs/data/chat/customization/look-and-feel/ThemeAndSlotsDemo.js deleted file mode 100644 index c0288de1eb629..0000000000000 --- a/docs/data/chat/customization/look-and-feel/ThemeAndSlotsDemo.js +++ /dev/null @@ -1,57 +0,0 @@ -'use client'; -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; -import { ChatBox } from '@mui/x-chat'; - -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - demoUsers, - minimalConversation, - minimalMessages, -} from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter({ respond: () => 'echo' }); - -const theme = createTheme({ - typography: { fontFamily: '"Inter", sans-serif' }, - components: { - MuiChatBox: { - styleOverrides: { - root: ({ theme: t }) => ({ - border: '1px solid', - borderColor: t.palette.divider, - }), - }, - }, - MuiChatMessage: { - styleOverrides: { - bubble: ({ theme: t }) => ({ - borderRadius: Number(t.shape.borderRadius) * 3, - }), - }, - }, - }, -}); - -export default function ThemeAndSlotsDemo() { - return ( - - - - - - ); -} diff --git a/docs/data/chat/customization/look-and-feel/ComposerVariantsDemo.tsx b/docs/data/chat/customization/look-and-feel/demos/composer-variants-demo/ComposerVariantsDemo.tsx similarity index 97% rename from docs/data/chat/customization/look-and-feel/ComposerVariantsDemo.tsx rename to docs/data/chat/customization/look-and-feel/demos/composer-variants-demo/ComposerVariantsDemo.tsx index b432062b54297..471d89c627c19 100644 --- a/docs/data/chat/customization/look-and-feel/ComposerVariantsDemo.tsx +++ b/docs/data/chat/customization/look-and-feel/demos/composer-variants-demo/ComposerVariantsDemo.tsx @@ -54,6 +54,7 @@ export default function ComposerVariantsDemo() { width: '100%', }} > + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/chat/customization/look-and-feel/demos/composer-variants-demo/client.ts b/docs/data/chat/customization/look-and-feel/demos/composer-variants-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/customization/look-and-feel/demos/composer-variants-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/customization/look-and-feel/demos/composer-variants-demo/index.ts b/docs/data/chat/customization/look-and-feel/demos/composer-variants-demo/index.ts new file mode 100644 index 0000000000000..9e0111c52dedc --- /dev/null +++ b/docs/data/chat/customization/look-and-feel/demos/composer-variants-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ComposerVariantsDemo from './ComposerVariantsDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ComposerVariantsDemo, { ClientProvider }); diff --git a/docs/data/chat/customization/look-and-feel/DensityComparisonDemo.tsx b/docs/data/chat/customization/look-and-feel/demos/density-comparison-demo/DensityComparisonDemo.tsx similarity index 97% rename from docs/data/chat/customization/look-and-feel/DensityComparisonDemo.tsx rename to docs/data/chat/customization/look-and-feel/demos/density-comparison-demo/DensityComparisonDemo.tsx index ff63352cb36ff..7c9f1adfa2c6a 100644 --- a/docs/data/chat/customization/look-and-feel/DensityComparisonDemo.tsx +++ b/docs/data/chat/customization/look-and-feel/demos/density-comparison-demo/DensityComparisonDemo.tsx @@ -61,9 +61,11 @@ export default function DensityComparisonDemo() { width: '100%', }} > + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/chat/customization/look-and-feel/demos/density-comparison-demo/client.ts b/docs/data/chat/customization/look-and-feel/demos/density-comparison-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/customization/look-and-feel/demos/density-comparison-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/customization/look-and-feel/demos/density-comparison-demo/index.ts b/docs/data/chat/customization/look-and-feel/demos/density-comparison-demo/index.ts new file mode 100644 index 0000000000000..962b976a60d4d --- /dev/null +++ b/docs/data/chat/customization/look-and-feel/demos/density-comparison-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DensityComparisonDemo from './DensityComparisonDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DensityComparisonDemo, { ClientProvider }); diff --git a/docs/data/chat/customization/look-and-feel/LookAndFeelPlayground.tsx b/docs/data/chat/customization/look-and-feel/demos/look-and-feel-playground/LookAndFeelPlayground.tsx similarity index 99% rename from docs/data/chat/customization/look-and-feel/LookAndFeelPlayground.tsx rename to docs/data/chat/customization/look-and-feel/demos/look-and-feel-playground/LookAndFeelPlayground.tsx index da75c13678b1d..438f8175d052a 100644 --- a/docs/data/chat/customization/look-and-feel/LookAndFeelPlayground.tsx +++ b/docs/data/chat/customization/look-and-feel/demos/look-and-feel-playground/LookAndFeelPlayground.tsx @@ -44,6 +44,7 @@ const adapter = createEchoAdapter({ }); export default function LookAndFeelPlayground() { + // @focus-start @padding 1 const [variant, setVariant] = React.useState('default'); const [density, setDensity] = React.useState('standard'); const [primary, setPrimary] = React.useState(PRIMARY_PRESETS[0].value); @@ -166,4 +167,5 @@ export default function LookAndFeelPlayground() { ); + // @focus-end } diff --git a/docs/data/chat/customization/look-and-feel/demos/look-and-feel-playground/client.ts b/docs/data/chat/customization/look-and-feel/demos/look-and-feel-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/customization/look-and-feel/demos/look-and-feel-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/customization/look-and-feel/demos/look-and-feel-playground/index.ts b/docs/data/chat/customization/look-and-feel/demos/look-and-feel-playground/index.ts new file mode 100644 index 0000000000000..a155f7be7056c --- /dev/null +++ b/docs/data/chat/customization/look-and-feel/demos/look-and-feel-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LookAndFeelPlayground from './LookAndFeelPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LookAndFeelPlayground, { ClientProvider }); diff --git a/docs/data/chat/customization/look-and-feel/MessageStatesDemo.tsx b/docs/data/chat/customization/look-and-feel/demos/message-states-demo/MessageStatesDemo.tsx similarity index 98% rename from docs/data/chat/customization/look-and-feel/MessageStatesDemo.tsx rename to docs/data/chat/customization/look-and-feel/demos/message-states-demo/MessageStatesDemo.tsx index 95ef4ab4f4238..e3c70bc375c16 100644 --- a/docs/data/chat/customization/look-and-feel/MessageStatesDemo.tsx +++ b/docs/data/chat/customization/look-and-feel/demos/message-states-demo/MessageStatesDemo.tsx @@ -116,6 +116,7 @@ const STATE_LABELS: Record = { export default function MessageStatesDemo() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/customization/look-and-feel/demos/message-states-demo/client.ts b/docs/data/chat/customization/look-and-feel/demos/message-states-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/customization/look-and-feel/demos/message-states-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/customization/look-and-feel/demos/message-states-demo/index.ts b/docs/data/chat/customization/look-and-feel/demos/message-states-demo/index.ts new file mode 100644 index 0000000000000..64f8d5818fbd6 --- /dev/null +++ b/docs/data/chat/customization/look-and-feel/demos/message-states-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MessageStatesDemo from './MessageStatesDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MessageStatesDemo, { ClientProvider }); diff --git a/docs/data/chat/customization/look-and-feel/MessageVariantsDemo.tsx b/docs/data/chat/customization/look-and-feel/demos/message-variants-demo/MessageVariantsDemo.tsx similarity index 97% rename from docs/data/chat/customization/look-and-feel/MessageVariantsDemo.tsx rename to docs/data/chat/customization/look-and-feel/demos/message-variants-demo/MessageVariantsDemo.tsx index 539bc0c65a29f..887ee70924fb3 100644 --- a/docs/data/chat/customization/look-and-feel/MessageVariantsDemo.tsx +++ b/docs/data/chat/customization/look-and-feel/demos/message-variants-demo/MessageVariantsDemo.tsx @@ -61,8 +61,10 @@ export default function MessageVariantsDemo() { width: '100%', }} > + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/chat/customization/look-and-feel/demos/message-variants-demo/client.ts b/docs/data/chat/customization/look-and-feel/demos/message-variants-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/customization/look-and-feel/demos/message-variants-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/customization/look-and-feel/demos/message-variants-demo/index.ts b/docs/data/chat/customization/look-and-feel/demos/message-variants-demo/index.ts new file mode 100644 index 0000000000000..de6076d280d47 --- /dev/null +++ b/docs/data/chat/customization/look-and-feel/demos/message-variants-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MessageVariantsDemo from './MessageVariantsDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MessageVariantsDemo, { ClientProvider }); diff --git a/docs/data/chat/customization/look-and-feel/ThemeAndSlotsDemo.tsx b/docs/data/chat/customization/look-and-feel/demos/theme-and-slots-demo/ThemeAndSlotsDemo.tsx similarity index 97% rename from docs/data/chat/customization/look-and-feel/ThemeAndSlotsDemo.tsx rename to docs/data/chat/customization/look-and-feel/demos/theme-and-slots-demo/ThemeAndSlotsDemo.tsx index c21aa9b821d3d..7774444c5b414 100644 --- a/docs/data/chat/customization/look-and-feel/ThemeAndSlotsDemo.tsx +++ b/docs/data/chat/customization/look-and-feel/demos/theme-and-slots-demo/ThemeAndSlotsDemo.tsx @@ -36,6 +36,7 @@ const theme = createTheme({ export default function ThemeAndSlotsDemo() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/customization/look-and-feel/demos/theme-and-slots-demo/client.ts b/docs/data/chat/customization/look-and-feel/demos/theme-and-slots-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/customization/look-and-feel/demos/theme-and-slots-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/customization/look-and-feel/demos/theme-and-slots-demo/index.ts b/docs/data/chat/customization/look-and-feel/demos/theme-and-slots-demo/index.ts new file mode 100644 index 0000000000000..612dd1b1976f2 --- /dev/null +++ b/docs/data/chat/customization/look-and-feel/demos/theme-and-slots-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ThemeAndSlotsDemo from './ThemeAndSlotsDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ThemeAndSlotsDemo, { ClientProvider }); diff --git a/docs/data/chat/customization/look-and-feel/look-and-feel.md b/docs/data/chat/customization/look-and-feel/look-and-feel.md index 44c2fac324811..669447d6db49c 100644 --- a/docs/data/chat/customization/look-and-feel/look-and-feel.md +++ b/docs/data/chat/customization/look-and-feel/look-and-feel.md @@ -16,7 +16,7 @@ components: ChatBox The same `ChatBox` re-themes itself when you swap the layout variant, density, primary color, or border radius—every change comes from a single Material UI theme and two top-level props (`variant` and `density`): -{{"demo": "LookAndFeelPlayground.js", "bg": "inline"}} +{{"component": "file://./demos/look-and-feel-playground/index.ts", "bg": "inline"}} :::warning Own-message bubbles use `palette.primary.main` as their background with `palette.primary.contrastText` text—when picking a brand primary, check the pair meets WCAG contrast. @@ -36,11 +36,11 @@ The `variant` prop controls how messages and the composer are arranged: The same conversation rendered with each variant—`default` uses colored bubbles with own messages on the trailing edge; `compact` drops the bubble and shows the author inline: -{{"demo": "MessageVariantsDemo.js", "bg": "inline"}} +{{"component": "file://./demos/message-variants-demo/index.ts", "bg": "inline"}} The demo below shows how the same `variant` prop drives the composer's two stock layouts: -{{"demo": "ComposerVariantsDemo.js", "bg": "inline"}} +{{"component": "file://./demos/composer-variants-demo/index.ts", "bg": "inline"}} ## Choosing a density @@ -54,13 +54,13 @@ The `density` prop controls vertical spacing between messages: `standard` is the default when the prop is omitted. -{{"demo": "DensityComparisonDemo.js", "bg": "inline"}} +{{"component": "file://./demos/density-comparison-demo/index.ts", "bg": "inline"}} ## Message states `ChatMessage` adapts to the role and status it reads from the store—no extra props required: -{{"demo": "MessageStatesDemo.js", "bg": "inline"}} +{{"component": "file://./demos/message-states-demo/index.ts", "bg": "inline"}} ## Applying one-off styles with `sx` @@ -126,7 +126,7 @@ Style any internal subcomponent without replacing it: Both techniques applied to a live `ChatBox`—the theme override rounds every bubble, and `slotProps` restyles the send button and placeholder: -{{"demo": "ThemeAndSlotsDemo.js", "bg": "inline"}} +{{"component": "file://./demos/theme-and-slots-demo/index.ts", "bg": "inline"}} To replace subcomponents entirely, see [Slot overrides](/x/react-chat/material/slot-overrides/). diff --git a/docs/data/chat/customization/overview/EightyTwentyDemo.js b/docs/data/chat/customization/overview/EightyTwentyDemo.js deleted file mode 100644 index b0def39744e41..0000000000000 --- a/docs/data/chat/customization/overview/EightyTwentyDemo.js +++ /dev/null @@ -1,62 +0,0 @@ -'use client'; -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; -import { ChatBox } from '@mui/x-chat'; -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - minimalConversation, - minimalMessages, -} from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter({ - respond: (text) => - `Echo: "${text}". Switch to Branded above to restyle this chat with theme + sx alone.`, -}); - -const brandTheme = createTheme({ - palette: { primary: { main: '#5b6cff' } }, - shape: { borderRadius: 16 }, -}); - -export default function EightyTwentyDemo() { - const [skin, setSkin] = React.useState('default'); - - const chat = ( - - ); - - return ( - - { - if (next !== null) { - setSkin(next); - } - }} - aria-label="Theme skin" - > - Default - Branded - - - {skin === 'branded' ? ( - {chat} - ) : ( - chat - )} - - ); -} diff --git a/docs/data/chat/customization/overview/EightyTwentyDemo.tsx b/docs/data/chat/customization/overview/demos/eighty-twenty-demo/EightyTwentyDemo.tsx similarity index 97% rename from docs/data/chat/customization/overview/EightyTwentyDemo.tsx rename to docs/data/chat/customization/overview/demos/eighty-twenty-demo/EightyTwentyDemo.tsx index c8fc89df5f111..e65c24543cfe1 100644 --- a/docs/data/chat/customization/overview/EightyTwentyDemo.tsx +++ b/docs/data/chat/customization/overview/demos/eighty-twenty-demo/EightyTwentyDemo.tsx @@ -24,6 +24,7 @@ const brandTheme = createTheme({ type Skin = 'default' | 'branded'; export default function EightyTwentyDemo() { + // @focus-start @padding 1 const [skin, setSkin] = React.useState('default'); const chat = ( @@ -61,4 +62,5 @@ export default function EightyTwentyDemo() { )} ); + // @focus-end } diff --git a/docs/data/chat/customization/overview/demos/eighty-twenty-demo/client.ts b/docs/data/chat/customization/overview/demos/eighty-twenty-demo/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/customization/overview/demos/eighty-twenty-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/customization/overview/demos/eighty-twenty-demo/index.ts b/docs/data/chat/customization/overview/demos/eighty-twenty-demo/index.ts new file mode 100644 index 0000000000000..ea8aef7a63963 --- /dev/null +++ b/docs/data/chat/customization/overview/demos/eighty-twenty-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import EightyTwentyDemo from './EightyTwentyDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, EightyTwentyDemo, { ClientProvider }); diff --git a/docs/data/chat/customization/overview/overview.md b/docs/data/chat/customization/overview/overview.md index f32b30a5616ec..e2afec30d6f94 100644 --- a/docs/data/chat/customization/overview/overview.md +++ b/docs/data/chat/customization/overview/overview.md @@ -58,7 +58,7 @@ Most apps only need the top two layers: ``` -{{"demo": "EightyTwentyDemo.js", "bg": "inline"}} +{{"component": "file://./demos/eighty-twenty-demo/index.ts", "bg": "inline"}} Reach for `slots` or `partRenderers` only when the theme can't express what you need—for example, replacing the Composer with a fully custom input, or rendering tool-call results as cards instead of JSON. diff --git a/docs/data/chat/customization/structure/StructureRecipes.js b/docs/data/chat/customization/structure/StructureRecipes.js deleted file mode 100644 index f4be6b4a4ab2a..0000000000000 --- a/docs/data/chat/customization/structure/StructureRecipes.js +++ /dev/null @@ -1,48 +0,0 @@ -'use client'; -import * as React from 'react'; -import IconButton from '@mui/material/IconButton'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; -import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'; -import SendRoundedIcon from '@mui/icons-material/SendRounded'; -import { ChatBox } from '@mui/x-chat'; -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; - -const adapter = createEchoAdapter(); - -function CustomEmptyState() { - return ( - - - Ask me anything - - ); -} - -function CustomSendButton(props) { - return ( - - - - ); -} - -export default function StructureRecipes() { - return ( - - ); -} diff --git a/docs/data/chat/customization/structure/StructureRecipes.tsx.preview b/docs/data/chat/customization/structure/StructureRecipes.tsx.preview deleted file mode 100644 index 415a5cc1b0b2a..0000000000000 --- a/docs/data/chat/customization/structure/StructureRecipes.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/chat/customization/structure/StructureRecipes.tsx b/docs/data/chat/customization/structure/demos/structure-recipes/StructureRecipes.tsx similarity index 96% rename from docs/data/chat/customization/structure/StructureRecipes.tsx rename to docs/data/chat/customization/structure/demos/structure-recipes/StructureRecipes.tsx index b22d6cbbf1531..3acc94073774e 100644 --- a/docs/data/chat/customization/structure/StructureRecipes.tsx +++ b/docs/data/chat/customization/structure/demos/structure-recipes/StructureRecipes.tsx @@ -29,6 +29,7 @@ function CustomSendButton(props: React.ComponentProps) { export default function StructureRecipes() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/customization/structure/demos/structure-recipes/client.ts b/docs/data/chat/customization/structure/demos/structure-recipes/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/customization/structure/demos/structure-recipes/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/customization/structure/demos/structure-recipes/index.ts b/docs/data/chat/customization/structure/demos/structure-recipes/index.ts new file mode 100644 index 0000000000000..adcddc125bb65 --- /dev/null +++ b/docs/data/chat/customization/structure/demos/structure-recipes/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StructureRecipes from './StructureRecipes'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StructureRecipes, { ClientProvider }); diff --git a/docs/data/chat/customization/structure/structure.md b/docs/data/chat/customization/structure/structure.md index 8220d04badabf..3d1ed657e3acb 100644 --- a/docs/data/chat/customization/structure/structure.md +++ b/docs/data/chat/customization/structure/structure.md @@ -16,7 +16,7 @@ components: ChatBox The recipes below cover common customizations. -{{"demo": "StructureRecipes.js"}} +{{"component": "file://./demos/structure-recipes/index.ts"}} Several of the recipes below applied at once. diff --git a/docs/data/chat/display/date-divider/ChatDateDividerPlayground.js b/docs/data/chat/display/date-divider/ChatDateDividerPlayground.js deleted file mode 100644 index 9c4cfbbda4c28..0000000000000 --- a/docs/data/chat/display/date-divider/ChatDateDividerPlayground.js +++ /dev/null @@ -1,171 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { ChatDateDivider, ChatMessage } from '@mui/x-chat'; - -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { ScopedChat } from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { - ChoiceControl, - DividerLabel, - SelectControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; -import { users } from 'docs/src/modules/components/chat-playground/data'; - -const conversation = { - id: 'date-playground', - title: 'Date divider', - participants: [users.me, users.assistant], -}; - -const NOW = new Date('2026-05-03T09:00:00.000Z'); - -function makeMessage(id, day) { - const created = new Date(NOW); - if (day === 'yesterday') { - created.setUTCDate(NOW.getUTCDate() - 1); - } - if (day === 'lastWeek') { - created.setUTCDate(NOW.getUTCDate() - 7); - } - if (day === 'lastYear') { - created.setUTCFullYear(NOW.getUTCFullYear() - 1); - } - return { - id, - conversationId: conversation.id, - role: 'assistant', - author: users.assistant, - createdAt: created.toISOString(), - status: 'read', - parts: [{ type: 'text', text: `Sent ${day}` }], - }; -} - -function relativeFormat(date) { - const diffMs = - Date.UTC(NOW.getUTCFullYear(), NOW.getUTCMonth(), NOW.getUTCDate()) - - Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()); - const days = Math.floor(diffMs / (24 * 60 * 60 * 1000)); - if (days === 0) { - return 'today'; - } - if (days === 1) { - return 'yesterday'; - } - if (days < 7) { - return `${days} days ago`; - } - if (days < 365) { - return `${Math.floor(days / 7)} weeks ago`; - } - return `${Math.floor(days / 365)} year(s) ago`; -} - -const FORMATTERS = { - default: undefined, - iso: (date) => date.toISOString().slice(0, 10), - relative: relativeFormat, -}; - -const CLASS_DEFS = [ - { - name: 'dateDivider', - selector: '.MuiChatMessage-dateDivider', - description: 'The date divider element.', - }, - { - name: 'dateDividerLine', - selector: '.MuiChatMessage-dateDividerLine', - description: 'The horizontal rule on each side of the label.', - }, - { - name: 'dateDividerLabel', - selector: '.MuiChatMessage-dateDividerLabel', - description: 'The formatted day label.', - }, -]; - -export default function ChatDateDividerPlayground() { - const [day, setDay] = React.useState('today'); - const [format, setFormat] = React.useState('default'); - const classesCustomizations = useCustomizations(CLASS_DEFS); - - // ChatDateDivider only renders at a calendar boundary, so we seed a prior - // message with an old `createdAt` to guarantee the boundary regardless of - // the selected `day`. - const messages = React.useMemo(() => { - const prior = makeMessage('date-prior', 'lastYear'); - // For `lastYear`, pull the prior even further back so the boundary still triggers. - if (day === 'lastYear') { - prior.createdAt = new Date( - Date.UTC(NOW.getUTCFullYear() - 2, NOW.getUTCMonth(), NOW.getUTCDate()), - ).toISOString(); - } - return [prior, makeMessage('date-target', day)]; - }, [day]); - const items = React.useMemo(() => messages.map((m) => m.id), [messages]); - - const dividerSx = classesCustomizations.toClassesSx(); - - return ( - - props - - fixture (message data) - - - } - preview={ - - - - - - - - } - /> - ); -} diff --git a/docs/data/chat/display/date-divider/DateDividerByWeek.js b/docs/data/chat/display/date-divider/DateDividerByWeek.js deleted file mode 100644 index b0493f27a7733..0000000000000 --- a/docs/data/chat/display/date-divider/DateDividerByWeek.js +++ /dev/null @@ -1,111 +0,0 @@ -'use client'; -import * as React from 'react'; -import { ChatBox } from '@mui/x-chat'; - -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - createTextMessage, - demoUsers, -} from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter(); - -const CONV_ID = 'date-divider-by-week'; - -const conversation = { - id: CONV_ID, - title: 'Date divider by week', - participants: [demoUsers.you, demoUsers.agent], - readState: 'read', - unreadCount: 0, - lastMessageAt: '2026-03-17T10:00:00.000Z', -}; - -const messages = [ - createTextMessage({ - id: 'dd-week-1', - conversationId: CONV_ID, - role: 'assistant', - author: demoUsers.agent, - createdAt: '2026-03-02T15:00:00.000Z', - text: 'Kicking off the project this week.', - }), - createTextMessage({ - id: 'dd-week-2', - conversationId: CONV_ID, - role: 'user', - author: demoUsers.you, - createdAt: '2026-03-04T09:30:00.000Z', - text: 'Same week — no new divider above me.', - }), - createTextMessage({ - id: 'dd-week-3', - conversationId: CONV_ID, - role: 'assistant', - author: demoUsers.agent, - createdAt: '2026-03-10T10:00:00.000Z', - text: 'A new week starts here.', - }), - createTextMessage({ - id: 'dd-week-4', - conversationId: CONV_ID, - role: 'user', - author: demoUsers.you, - createdAt: '2026-03-12T11:00:00.000Z', - text: 'Still the same week as the previous message.', - }), - createTextMessage({ - id: 'dd-week-5', - conversationId: CONV_ID, - role: 'assistant', - author: demoUsers.agent, - createdAt: '2026-03-17T08:00:00.000Z', - text: 'And another week begins.', - }), -]; - -// Back to the Monday that starts the date's ISO week, in UTC. -function startOfWeek(date) { - const d = new Date(date); - d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 6) % 7)); - return d; -} - -function startOfWeekIso(date) { - return startOfWeek(date).toISOString().slice(0, 10); -} - -const shouldShowDivider = ({ date, previousDate }) => - date != null && - previousDate != null && - startOfWeekIso(date) !== startOfWeekIso(previousDate); - -const formatDate = (date) => - `Week of ${startOfWeek(date).toLocaleDateString('en-US', { - month: 'short', - day: 'numeric', - })}`; - -export default function DateDividerByWeek() { - return ( - - ); -} diff --git a/docs/data/chat/display/date-divider/date-divider.md b/docs/data/chat/display/date-divider/date-divider.md index 925c011d3e255..58dc943265117 100644 --- a/docs/data/chat/display/date-divider/date-divider.md +++ b/docs/data/chat/display/date-divider/date-divider.md @@ -59,7 +59,7 @@ Divider slot customizations only take effect while the feature is enabled. Witho The demo below enables the feature on a conversation spanning three days — a divider appears at each day boundary: -{{"demo": "../../material/message-list/DateDividerFormat.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://../../material/message-list/demos/date-divider-format/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Customizing divider placement @@ -84,7 +84,7 @@ const shouldShowDivider = ({ date, previousDate }) => startOfWeekIso(date) !== startOfWeekIso(previousDate); ``` -{{"demo": "DateDividerByWeek.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/date-divider-by-week/index.ts", "bg": "inline", "collapseToEmpty": true}} ### Divider every N messages @@ -111,7 +111,7 @@ The same hook supports any rule: for example, group by the viewer's **local** da The playground below renders the divider between two messages and lets you change `formatDate` and the second message's `createdAt`: -{{"demo": "ChatDateDividerPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-date-divider-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} ## See also diff --git a/docs/data/chat/display/date-divider/ChatDateDividerPlayground.tsx b/docs/data/chat/display/date-divider/demos/chat-date-divider-playground/ChatDateDividerPlayground.tsx similarity index 95% rename from docs/data/chat/display/date-divider/ChatDateDividerPlayground.tsx rename to docs/data/chat/display/date-divider/demos/chat-date-divider-playground/ChatDateDividerPlayground.tsx index 787927b145011..0a89101ccbc17 100644 --- a/docs/data/chat/display/date-divider/ChatDateDividerPlayground.tsx +++ b/docs/data/chat/display/date-divider/demos/chat-date-divider-playground/ChatDateDividerPlayground.tsx @@ -12,10 +12,8 @@ import { DividerLabel, SelectControl, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; import { users } from 'docs/src/modules/components/chat-playground/data'; const conversation: ChatConversation = { @@ -102,6 +100,7 @@ const CLASS_DEFS: ReadonlyArray> = [ ]; export default function ChatDateDividerPlayground() { + // @focus-start @padding 1 const [day, setDay] = React.useState('today'); const [format, setFormat] = React.useState('default'); const classesCustomizations = useCustomizations(CLASS_DEFS); @@ -183,4 +182,5 @@ export default function ChatDateDividerPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/display/date-divider/demos/chat-date-divider-playground/client.ts b/docs/data/chat/display/date-divider/demos/chat-date-divider-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/display/date-divider/demos/chat-date-divider-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/display/date-divider/demos/chat-date-divider-playground/index.ts b/docs/data/chat/display/date-divider/demos/chat-date-divider-playground/index.ts new file mode 100644 index 0000000000000..6fd51aa6c4527 --- /dev/null +++ b/docs/data/chat/display/date-divider/demos/chat-date-divider-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatDateDividerPlayground from './ChatDateDividerPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatDateDividerPlayground, { ClientProvider }); diff --git a/docs/data/chat/display/date-divider/DateDividerByWeek.tsx b/docs/data/chat/display/date-divider/demos/date-divider-by-week/DateDividerByWeek.tsx similarity index 98% rename from docs/data/chat/display/date-divider/DateDividerByWeek.tsx rename to docs/data/chat/display/date-divider/demos/date-divider-by-week/DateDividerByWeek.tsx index 538937d3e31d6..0463d3104bec6 100644 --- a/docs/data/chat/display/date-divider/DateDividerByWeek.tsx +++ b/docs/data/chat/display/date-divider/demos/date-divider-by-week/DateDividerByWeek.tsx @@ -94,6 +94,7 @@ const formatDate = (date: Date) => export default function DateDividerByWeek() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/display/date-divider/demos/date-divider-by-week/client.ts b/docs/data/chat/display/date-divider/demos/date-divider-by-week/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/display/date-divider/demos/date-divider-by-week/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/display/date-divider/demos/date-divider-by-week/index.ts b/docs/data/chat/display/date-divider/demos/date-divider-by-week/index.ts new file mode 100644 index 0000000000000..41e36e6d8086b --- /dev/null +++ b/docs/data/chat/display/date-divider/demos/date-divider-by-week/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DateDividerByWeek from './DateDividerByWeek'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DateDividerByWeek, { ClientProvider }); diff --git a/docs/data/chat/display/loading-and-empty-states/ChatMessageSkeletonPlayground.js b/docs/data/chat/display/loading-and-empty-states/ChatMessageSkeletonPlayground.js deleted file mode 100644 index 381218296f90b..0000000000000 --- a/docs/data/chat/display/loading-and-empty-states/ChatMessageSkeletonPlayground.js +++ /dev/null @@ -1,52 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { ChatMessageSkeleton } from '@mui/x-chat'; -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { - DividerLabel, - NumberControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; - -const CLASS_DEFS = [ - { name: 'root', description: 'The skeleton container.' }, - { - name: 'line', - selector: '.MuiChatMessageSkeleton-line', - description: 'Each shimmer line.', - }, -]; - -export default function ChatMessageSkeletonPlayground() { - const [lines, setLines] = React.useState(3); - const classesCustomizations = useCustomizations(CLASS_DEFS); - - const skeletonSx = classesCustomizations.toClassesSx(); - - return ( - - props - - - } - preview={ - - - - } - /> - ); -} diff --git a/docs/data/chat/display/loading-and-empty-states/CustomEmptyState.js b/docs/data/chat/display/loading-and-empty-states/CustomEmptyState.js deleted file mode 100644 index 3a2466a893b1b..0000000000000 --- a/docs/data/chat/display/loading-and-empty-states/CustomEmptyState.js +++ /dev/null @@ -1,107 +0,0 @@ -'use client'; -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; -import { - ChatConversation, - ChatConversationHeader, - ChatMessageList, - ChatMessageGroup, - ChatComposer, -} from '@mui/x-chat'; -import { ChatProvider, useChat } from '@mui/x-chat/headless'; -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; - -const emptyConversation = { - id: 'custom-empty-conv', - title: 'New conversation', - subtitle: 'Pick a prompt to get started', - participants: [], - readState: 'read', - unreadCount: 0, - lastMessageAt: '2026-03-15T10:00:00.000Z', -}; - -function EmptyStateContent() { - const { messages, sendMessage } = useChat(); - - if (messages.length > 0) { - return null; - } - - return ( - - How can I help you today? - - - - - - ); -} - -const adapter = createEchoAdapter(); - -export default function CustomEmptyState() { - return ( - - - - - } - renderItem={({ id, index }) => ( - - )} - /> - - - - - ); -} diff --git a/docs/data/chat/display/loading-and-empty-states/LoadingSkeletonInList.js b/docs/data/chat/display/loading-and-empty-states/LoadingSkeletonInList.js deleted file mode 100644 index 51349570c6e39..0000000000000 --- a/docs/data/chat/display/loading-and-empty-states/LoadingSkeletonInList.js +++ /dev/null @@ -1,102 +0,0 @@ -'use client'; -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import { - ChatConversation, - ChatConversationHeader, - ChatMessageList, - ChatMessageGroup, - ChatComposer, - ChatMessageSkeleton, -} from '@mui/x-chat'; -import { ChatProvider } from '@mui/x-chat/headless'; -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - minimalConversation, - minimalMessages, -} from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter(); - -function LoadingMessages() { - return ( - - - - - - ); -} - -export default function LoadingSkeletonInList() { - const [loading, setLoading] = React.useState(true); - - React.useEffect(() => { - if (!loading) { - return undefined; - } - const timer = setTimeout(() => setLoading(false), 1500); - return () => clearTimeout(timer); - }, [loading]); - - return ( - - - - - - - - - {loading ? ( - - ) : ( - ( - - )} - /> - )} - - - - - - ); -} diff --git a/docs/data/chat/display/loading-and-empty-states/ChatMessageSkeletonPlayground.tsx b/docs/data/chat/display/loading-and-empty-states/demos/chat-message-skeleton-playground/ChatMessageSkeletonPlayground.tsx similarity index 86% rename from docs/data/chat/display/loading-and-empty-states/ChatMessageSkeletonPlayground.tsx rename to docs/data/chat/display/loading-and-empty-states/demos/chat-message-skeleton-playground/ChatMessageSkeletonPlayground.tsx index e93f173da1fbf..3b8a3bc2cfad5 100644 --- a/docs/data/chat/display/loading-and-empty-states/ChatMessageSkeletonPlayground.tsx +++ b/docs/data/chat/display/loading-and-empty-states/demos/chat-message-skeleton-playground/ChatMessageSkeletonPlayground.tsx @@ -6,10 +6,8 @@ import { DividerLabel, NumberControl, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; type ClassKey = 'root' | 'line'; @@ -23,6 +21,7 @@ const CLASS_DEFS: ReadonlyArray> = [ ]; export default function ChatMessageSkeletonPlayground() { + // @focus-start @padding 1 const [lines, setLines] = React.useState(3); const classesCustomizations = useCustomizations(CLASS_DEFS); @@ -54,4 +53,5 @@ export default function ChatMessageSkeletonPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/display/loading-and-empty-states/demos/chat-message-skeleton-playground/client.ts b/docs/data/chat/display/loading-and-empty-states/demos/chat-message-skeleton-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/display/loading-and-empty-states/demos/chat-message-skeleton-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/display/loading-and-empty-states/demos/chat-message-skeleton-playground/index.ts b/docs/data/chat/display/loading-and-empty-states/demos/chat-message-skeleton-playground/index.ts new file mode 100644 index 0000000000000..6aa1ea2731be9 --- /dev/null +++ b/docs/data/chat/display/loading-and-empty-states/demos/chat-message-skeleton-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatMessageSkeletonPlayground from './ChatMessageSkeletonPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatMessageSkeletonPlayground, { ClientProvider }); diff --git a/docs/data/chat/display/loading-and-empty-states/CustomEmptyState.tsx b/docs/data/chat/display/loading-and-empty-states/demos/custom-empty-state/CustomEmptyState.tsx similarity index 98% rename from docs/data/chat/display/loading-and-empty-states/CustomEmptyState.tsx rename to docs/data/chat/display/loading-and-empty-states/demos/custom-empty-state/CustomEmptyState.tsx index 242783b85c93b..28eeb329274d4 100644 --- a/docs/data/chat/display/loading-and-empty-states/CustomEmptyState.tsx +++ b/docs/data/chat/display/loading-and-empty-states/demos/custom-empty-state/CustomEmptyState.tsx @@ -78,6 +78,7 @@ const adapter = createEchoAdapter(); export default function CustomEmptyState() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/display/loading-and-empty-states/demos/custom-empty-state/client.ts b/docs/data/chat/display/loading-and-empty-states/demos/custom-empty-state/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/display/loading-and-empty-states/demos/custom-empty-state/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/display/loading-and-empty-states/demos/custom-empty-state/index.ts b/docs/data/chat/display/loading-and-empty-states/demos/custom-empty-state/index.ts new file mode 100644 index 0000000000000..9aba12d5f2c6c --- /dev/null +++ b/docs/data/chat/display/loading-and-empty-states/demos/custom-empty-state/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomEmptyState from './CustomEmptyState'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomEmptyState, { ClientProvider }); diff --git a/docs/data/chat/display/loading-and-empty-states/LoadingSkeletonInList.tsx b/docs/data/chat/display/loading-and-empty-states/demos/loading-skeleton-in-list/LoadingSkeletonInList.tsx similarity index 98% rename from docs/data/chat/display/loading-and-empty-states/LoadingSkeletonInList.tsx rename to docs/data/chat/display/loading-and-empty-states/demos/loading-skeleton-in-list/LoadingSkeletonInList.tsx index 51349570c6e39..b9fc15f27d709 100644 --- a/docs/data/chat/display/loading-and-empty-states/LoadingSkeletonInList.tsx +++ b/docs/data/chat/display/loading-and-empty-states/demos/loading-skeleton-in-list/LoadingSkeletonInList.tsx @@ -43,6 +43,7 @@ function LoadingMessages() { } export default function LoadingSkeletonInList() { + // @focus-start @padding 1 const [loading, setLoading] = React.useState(true); React.useEffect(() => { @@ -99,4 +100,5 @@ export default function LoadingSkeletonInList() { ); + // @focus-end } diff --git a/docs/data/chat/display/loading-and-empty-states/demos/loading-skeleton-in-list/client.ts b/docs/data/chat/display/loading-and-empty-states/demos/loading-skeleton-in-list/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/display/loading-and-empty-states/demos/loading-skeleton-in-list/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/display/loading-and-empty-states/demos/loading-skeleton-in-list/index.ts b/docs/data/chat/display/loading-and-empty-states/demos/loading-skeleton-in-list/index.ts new file mode 100644 index 0000000000000..85b76101f1271 --- /dev/null +++ b/docs/data/chat/display/loading-and-empty-states/demos/loading-skeleton-in-list/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LoadingSkeletonInList from './LoadingSkeletonInList'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LoadingSkeletonInList, { ClientProvider }); diff --git a/docs/data/chat/display/loading-and-empty-states/loading-and-empty-states.md b/docs/data/chat/display/loading-and-empty-states/loading-and-empty-states.md index a2f82e3e995e1..bb16630f320de 100644 --- a/docs/data/chat/display/loading-and-empty-states/loading-and-empty-states.md +++ b/docs/data/chat/display/loading-and-empty-states/loading-and-empty-states.md @@ -21,7 +21,7 @@ Use it during initial data fetching or when loading older messages via [history Use the demo below to adjust the number of shimmer lines: -{{"demo": "ChatMessageSkeletonPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-message-skeleton-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} ### Importing the component @@ -53,7 +53,7 @@ Nothing renders the skeleton automatically — you decide where it appears. Render skeletons in the message area while the fetch is in flight, then swap to `ChatMessageList` once the data arrives. Set `aria-busy` on the swapping container and `aria-hidden` on each skeleton so assistive technology treats the placeholders as decorative. -{{"demo": "LoadingSkeletonInList.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://./demos/loading-skeleton-in-list/index.ts", "bg": "inline", "collapseToEmpty": true}} When older messages are being fetched via history pagination, render a skeleton at the top of the list instead. The `isLoadingHistory` flag from `useChat()` reports when a page is in flight. @@ -148,7 +148,7 @@ if (messages.length === 0) { The message area below is intentionally empty — only the conversation header and the composer render: -{{"demo": "../../material/examples/empty-state/EmptyState.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://../../material/examples/empty-state/demos/empty-state/index.ts", "bg": "inline", "collapseToEmpty": true}} Key characteristics of the empty state: @@ -161,7 +161,7 @@ Key characteristics of the empty state: Provide custom empty state content by composing the thread from individual components. A common pattern is to display suggested prompts that help users start a conversation: -{{"demo": "CustomEmptyState.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://./demos/custom-empty-state/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Streaming indicator diff --git a/docs/data/chat/display/message-actions/BasicMessageActions.js b/docs/data/chat/display/message-actions/BasicMessageActions.js deleted file mode 100644 index 45dcd01a07988..0000000000000 --- a/docs/data/chat/display/message-actions/BasicMessageActions.js +++ /dev/null @@ -1,50 +0,0 @@ -'use client'; -import * as React from 'react'; -import IconButton from '@mui/material/IconButton'; -import ContentCopyIcon from '@mui/icons-material/ContentCopy'; -import EditIcon from '@mui/icons-material/Edit'; -import DeleteIcon from '@mui/icons-material/Delete'; -import { ChatBox } from '@mui/x-chat'; -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - minimalConversation, - minimalMessages, -} from 'docs/data/chat/core/examples/shared/demoData'; - -function MyMessageActions() { - return ( - - - - - - - - - - - - ); -} - -const adapter = createEchoAdapter(); - -export default function BasicMessageActions() { - return ( - - ); -} diff --git a/docs/data/chat/display/message-actions/BasicMessageActions.tsx.preview b/docs/data/chat/display/message-actions/BasicMessageActions.tsx.preview deleted file mode 100644 index f350afaaba058..0000000000000 --- a/docs/data/chat/display/message-actions/BasicMessageActions.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/chat/display/message-actions/ChatMessageActionsPlayground.js b/docs/data/chat/display/message-actions/ChatMessageActionsPlayground.js deleted file mode 100644 index 94ad4c140bf26..0000000000000 --- a/docs/data/chat/display/message-actions/ChatMessageActionsPlayground.js +++ /dev/null @@ -1,163 +0,0 @@ -import * as React from 'react'; -import CopyIcon from '@mui/icons-material/ContentCopy'; -import ThumbsUpIcon from '@mui/icons-material/ThumbUp'; -import Box from '@mui/material/Box'; -import IconButton from '@mui/material/IconButton'; -import Tooltip from '@mui/material/Tooltip'; -import { - ChatMessage as ChatMessageComponent, - ChatMessageActions, - ChatMessageAvatar, - ChatMessageContent, - ChatMessageGroup, -} from '@mui/x-chat'; - -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { - ChatChrome, - ScopedChat, -} from 'docs/src/modules/components/chat-playground/sharedProviders'; -import { - ChoiceControl, - DividerLabel, - SwitchControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; -import { users } from 'docs/src/modules/components/chat-playground/data'; - -const conversation = { - id: 'actions-playground', - title: 'Actions', - participants: [users.me, users.assistant], -}; - -function makeMessage(role, status, text) { - const author = role === 'user' ? users.me : users.assistant; - return { - id: `actions-${role}-${status}`, - conversationId: conversation.id, - role, - author, - createdAt: '2026-05-03T09:30:00.000Z', - status, - parts: [{ type: 'text', text }], - }; -} - -const CLASS_DEFS = [ - { - name: 'actions', - selector: '.MuiChatMessage-actions', - description: 'The hover-revealed action toolbar.', - }, -]; - -export default function ChatMessageActionsPlayground() { - const [showCopy, setShowCopy] = React.useState(true); - const [showLike, setShowLike] = React.useState(true); - const [revealed, setRevealed] = React.useState(true); - const [variant, setVariant] = React.useState('default'); - const [density, setDensity] = React.useState('standard'); - const classesCustomizations = useCustomizations(CLASS_DEFS); - const message = React.useMemo( - () => - makeMessage( - 'assistant', - 'read', - 'Toggle "reveal actions", or hover this bubble.', - ), - [], - ); - - const wrapperSx = classesCustomizations.toClassesSx(); - - return ( - - composition (children) - - - visibility - - chrome provider - - - - } - preview={ - - - - - - - - - {showCopy ? ( - - - - - - ) : null} - {showLike ? ( - - - - - - ) : null} - - - - - - - } - /> - ); -} diff --git a/docs/data/chat/display/message-actions/ExtraActionsMessageActions.js b/docs/data/chat/display/message-actions/ExtraActionsMessageActions.js deleted file mode 100644 index aadac96c5415f..0000000000000 --- a/docs/data/chat/display/message-actions/ExtraActionsMessageActions.js +++ /dev/null @@ -1,43 +0,0 @@ -'use client'; -import * as React from 'react'; -import RefreshIcon from '@mui/icons-material/Refresh'; -import { ChatBox } from '@mui/x-chat'; -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - minimalConversation, - minimalMessages, -} from 'docs/data/chat/core/examples/shared/demoData'; - -const adapter = createEchoAdapter(); - -export default function ExtraActionsMessageActions() { - return ( - - message?.role === 'assistant' - ? { - extraActions: [ - { - id: 'regenerate', - label: 'Regenerate', - icon: , - onClick: (event, { chat }) => chat.regenerate(message.id), - }, - ], - } - : {}, - }} - sx={{ - height: 500, - border: '1px solid', - borderColor: 'divider', - borderRadius: 1, - }} - /> - ); -} diff --git a/docs/data/chat/display/message-actions/RoleBasedMessageActions.js b/docs/data/chat/display/message-actions/RoleBasedMessageActions.js deleted file mode 100644 index c1374bffc4c54..0000000000000 --- a/docs/data/chat/display/message-actions/RoleBasedMessageActions.js +++ /dev/null @@ -1,65 +0,0 @@ -'use client'; -import * as React from 'react'; -import IconButton from '@mui/material/IconButton'; -import ContentCopyIcon from '@mui/icons-material/ContentCopy'; -import EditIcon from '@mui/icons-material/Edit'; -import RefreshIcon from '@mui/icons-material/Refresh'; -import { ChatBox } from '@mui/x-chat'; -import { useChatActions, useMessage } from '@mui/x-chat/headless'; -import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils'; -import { - minimalConversation, - minimalMessages, -} from 'docs/data/chat/core/examples/shared/demoData'; - -function RoleBasedActions({ messageId }) { - const message = useMessage(messageId); - // `useChatActions` exposes the runtime actions without subscribing to message - // state, so the toolbar never re-renders as the conversation streams. - const chat = useChatActions(); - const role = message?.role; - - return ( - - - - - {role === 'assistant' && ( - chat.regenerate(messageId)} - > - - - )} - {role === 'user' && ( - - - - )} - - ); -} - -const adapter = createEchoAdapter(); - -export default function RoleBasedMessageActions() { - return ( - - ); -} diff --git a/docs/data/chat/display/message-actions/RoleBasedMessageActions.tsx.preview b/docs/data/chat/display/message-actions/RoleBasedMessageActions.tsx.preview deleted file mode 100644 index 4c0ed9209f9ed..0000000000000 --- a/docs/data/chat/display/message-actions/RoleBasedMessageActions.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/chat/display/message-actions/BasicMessageActions.tsx b/docs/data/chat/display/message-actions/demos/basic-message-actions/BasicMessageActions.tsx similarity index 96% rename from docs/data/chat/display/message-actions/BasicMessageActions.tsx rename to docs/data/chat/display/message-actions/demos/basic-message-actions/BasicMessageActions.tsx index 45dcd01a07988..e8fa18891d9e0 100644 --- a/docs/data/chat/display/message-actions/BasicMessageActions.tsx +++ b/docs/data/chat/display/message-actions/demos/basic-message-actions/BasicMessageActions.tsx @@ -31,6 +31,7 @@ const adapter = createEchoAdapter(); export default function BasicMessageActions() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/display/message-actions/demos/basic-message-actions/client.ts b/docs/data/chat/display/message-actions/demos/basic-message-actions/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/display/message-actions/demos/basic-message-actions/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/display/message-actions/demos/basic-message-actions/index.ts b/docs/data/chat/display/message-actions/demos/basic-message-actions/index.ts new file mode 100644 index 0000000000000..8757a39d90e11 --- /dev/null +++ b/docs/data/chat/display/message-actions/demos/basic-message-actions/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicMessageActions from './BasicMessageActions'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicMessageActions, { ClientProvider }); diff --git a/docs/data/chat/display/message-actions/ChatMessageActionsPlayground.tsx b/docs/data/chat/display/message-actions/demos/chat-message-actions-playground/ChatMessageActionsPlayground.tsx similarity index 95% rename from docs/data/chat/display/message-actions/ChatMessageActionsPlayground.tsx rename to docs/data/chat/display/message-actions/demos/chat-message-actions-playground/ChatMessageActionsPlayground.tsx index 2f0951dd7e9dc..4f69848d6b11e 100644 --- a/docs/data/chat/display/message-actions/ChatMessageActionsPlayground.tsx +++ b/docs/data/chat/display/message-actions/demos/chat-message-actions-playground/ChatMessageActionsPlayground.tsx @@ -27,10 +27,8 @@ import { DividerLabel, SwitchControl, } from 'docs/src/modules/components/chat-playground/controls'; -import { - useCustomizations, - type CustomizationDef, -} from 'docs/src/modules/components/chat-playground/useCustomizations'; +import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; +import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations'; import { users } from 'docs/src/modules/components/chat-playground/data'; const conversation: ChatConversation = { @@ -66,6 +64,7 @@ const CLASS_DEFS: ReadonlyArray> = [ ]; export default function ChatMessageActionsPlayground() { + // @focus-start @padding 1 const [showCopy, setShowCopy] = React.useState(true); const [showLike, setShowLike] = React.useState(true); const [revealed, setRevealed] = React.useState(true); @@ -173,4 +172,5 @@ export default function ChatMessageActionsPlayground() { } /> ); + // @focus-end } diff --git a/docs/data/chat/display/message-actions/demos/chat-message-actions-playground/client.ts b/docs/data/chat/display/message-actions/demos/chat-message-actions-playground/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/display/message-actions/demos/chat-message-actions-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/display/message-actions/demos/chat-message-actions-playground/index.ts b/docs/data/chat/display/message-actions/demos/chat-message-actions-playground/index.ts new file mode 100644 index 0000000000000..c810b6e4addf6 --- /dev/null +++ b/docs/data/chat/display/message-actions/demos/chat-message-actions-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChatMessageActionsPlayground from './ChatMessageActionsPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChatMessageActionsPlayground, { ClientProvider }); diff --git a/docs/data/chat/display/message-actions/ExtraActionsMessageActions.tsx b/docs/data/chat/display/message-actions/demos/extra-actions-message-actions/ExtraActionsMessageActions.tsx similarity index 96% rename from docs/data/chat/display/message-actions/ExtraActionsMessageActions.tsx rename to docs/data/chat/display/message-actions/demos/extra-actions-message-actions/ExtraActionsMessageActions.tsx index aadac96c5415f..97b61381af6e4 100644 --- a/docs/data/chat/display/message-actions/ExtraActionsMessageActions.tsx +++ b/docs/data/chat/display/message-actions/demos/extra-actions-message-actions/ExtraActionsMessageActions.tsx @@ -12,6 +12,7 @@ const adapter = createEchoAdapter(); export default function ExtraActionsMessageActions() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/display/message-actions/demos/extra-actions-message-actions/client.ts b/docs/data/chat/display/message-actions/demos/extra-actions-message-actions/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/display/message-actions/demos/extra-actions-message-actions/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/display/message-actions/demos/extra-actions-message-actions/index.ts b/docs/data/chat/display/message-actions/demos/extra-actions-message-actions/index.ts new file mode 100644 index 0000000000000..f2d10c71c2cff --- /dev/null +++ b/docs/data/chat/display/message-actions/demos/extra-actions-message-actions/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ExtraActionsMessageActions from './ExtraActionsMessageActions'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ExtraActionsMessageActions, { ClientProvider }); diff --git a/docs/data/chat/display/message-actions/RoleBasedMessageActions.tsx b/docs/data/chat/display/message-actions/demos/role-based-message-actions/RoleBasedMessageActions.tsx similarity index 97% rename from docs/data/chat/display/message-actions/RoleBasedMessageActions.tsx rename to docs/data/chat/display/message-actions/demos/role-based-message-actions/RoleBasedMessageActions.tsx index 6d863c95689e0..f575352ceb53c 100644 --- a/docs/data/chat/display/message-actions/RoleBasedMessageActions.tsx +++ b/docs/data/chat/display/message-actions/demos/role-based-message-actions/RoleBasedMessageActions.tsx @@ -46,6 +46,7 @@ const adapter = createEchoAdapter(); export default function RoleBasedMessageActions() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/chat/display/message-actions/demos/role-based-message-actions/client.ts b/docs/data/chat/display/message-actions/demos/role-based-message-actions/client.ts new file mode 100644 index 0000000000000..c874a2038b3ef --- /dev/null +++ b/docs/data/chat/display/message-actions/demos/role-based-message-actions/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/chat/display/message-actions/demos/role-based-message-actions/index.ts b/docs/data/chat/display/message-actions/demos/role-based-message-actions/index.ts new file mode 100644 index 0000000000000..6d6a27c4b9cec --- /dev/null +++ b/docs/data/chat/display/message-actions/demos/role-based-message-actions/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RoleBasedMessageActions from './RoleBasedMessageActions'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RoleBasedMessageActions, { ClientProvider }); diff --git a/docs/data/chat/display/message-actions/message-actions.md b/docs/data/chat/display/message-actions/message-actions.md index afdc27e6c759b..e155ea152413b 100644 --- a/docs/data/chat/display/message-actions/message-actions.md +++ b/docs/data/chat/display/message-actions/message-actions.md @@ -19,7 +19,7 @@ The actions area occupies the `actions` grid area of the message row; the reveal Toggle action buttons, variant, and density to preview the hover-revealed toolbar: -{{"demo": "ChatMessageActionsPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://./demos/chat-message-actions-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Import @@ -82,14 +82,14 @@ There are three ways to customize message actions: - The standalone `ChatMessageActions` component (custom layouts) exposes an `actions` slot whose slot props callback receives the message [owner state](#owner-state). ::: -{{"demo": "BasicMessageActions.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://./demos/basic-message-actions/index.ts", "bg": "inline", "collapseToEmpty": true}} ### Accessing message context The component you pass to the `messageActions` slot receives a `messageId` prop. Pass it to the `useMessage()` hook (exported from `@mui/x-chat/headless`) to read the current message and show different actions for user and assistant messages. Reach the runtime actions with [`useChatActions()`](/x/react-chat/core/hooks/)—it returns `sendMessage`, `retry`, `regenerate`, and the rest without subscribing to message state, so the toolbar does not re-render while a response streams: -{{"demo": "RoleBasedMessageActions.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://./demos/role-based-message-actions/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Adding actions declaratively @@ -97,7 +97,7 @@ Instead of replacing the `messageActions` slot component, pass a function to `sl The function receives the message context, so you can target specific rows—for example, a working "Regenerate" button on assistant replies. Each action's `onClick` receives `(event, { message, chat })`; call `chat.regenerate(message.id)` to request a fresh reply through the runtime: -{{"demo": "ExtraActionsMessageActions.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://./demos/extra-actions-message-actions/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Owner state diff --git a/docs/data/chat/display/message-appearance/message-appearance.md b/docs/data/chat/display/message-appearance/message-appearance.md index dbc3d9d74b854..7df0bcc5cc98b 100644 --- a/docs/data/chat/display/message-appearance/message-appearance.md +++ b/docs/data/chat/display/message-appearance/message-appearance.md @@ -23,7 +23,7 @@ By default, all consecutive messages from the same author are grouped together, To split groups by time, pass `createTimeWindowGroupKey(windowMs)` (from `@mui/x-chat/headless`; the window defaults to 5 minutes) as the group's `groupKey` through `slotProps.messageGroup`. The demo below uses a 1-minute window: -{{"demo": "../../material/message-list/MessageGrouping.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://../../material/message-list/demos/message-grouping/index.ts", "bg": "inline", "collapseToEmpty": true}} By default, a new group starts when: @@ -38,7 +38,7 @@ Dividers are disabled by default—enable them with `features={{ dateDivider: tr The demo below enables the feature and customizes the date format through `slotProps`: -{{"demo": "../../material/message-list/DateDividerFormat.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://../../material/message-list/demos/date-divider-format/index.ts", "bg": "inline", "collapseToEmpty": true}} Date dividers render with `role="separator"` and are not focusable; message rows remain individually focusable — see [Accessibility](/x/react-chat/accessibility/) for the focus model. @@ -53,7 +53,7 @@ Avatar resolution follows the same rules as the built-in message primitives: The avatar is omitted entirely (the component returns `null`, no placeholder) in two cases: for every message after the first in a group, and for the first message when no `avatarUrl` resolves and no custom `messageAvatar` slot is provided. -{{"demo": "../../basics/messages/ChatMessageAvatarPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://../../basics/messages/demos/chat-message-avatar-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Timestamps and metadata @@ -64,11 +64,11 @@ Both derive the timestamp from `createdAt` and the edited label from `editedAt`. The default variant renders inline meta inside the bubble: -{{"demo": "../../basics/messages/ChatMessageInlineMetaPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://../../basics/messages/demos/chat-message-inline-meta-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} The compact variant renders external meta beside the message: -{{"demo": "../../basics/messages/ChatMessageMetaPlayground.js", "bg": "inline", "defaultCodeOpen": false}} +{{"component": "file://../../basics/messages/demos/chat-message-meta-playground/index.ts", "bg": "inline", "collapseToEmpty": true}} ## Component anatomy @@ -92,7 +92,7 @@ ChatMessageList ← scrollable container Set `variant="compact"` on `ChatBox` to switch to a dense, messenger-style layout with no bubbles, left-aligned messages, and group header timestamps. In the compact layout the inline meta is replaced by the external `ChatMessageMeta` rendered beside the message (use the `messageMeta` slot to customize it; in the default variant use `messageInlineMeta` instead). -{{"demo": "../../material/message-list/CompactVariant.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://../../material/message-list/demos/compact-variant/index.ts", "bg": "inline", "collapseToEmpty": true}} See [Variants and density](/x/react-chat/basics/variants-and-density/) for details. @@ -100,7 +100,7 @@ See [Variants and density](/x/react-chat/basics/variants-and-density/) for detai The `density` prop controls the vertical spacing between messages independently of the variant. Three values are available: `compact`, `standard` (default), and `comfortable`. -{{"demo": "../../material/message-list/DensityProp.js", "defaultCodeOpen": false, "bg": "inline"}} +{{"component": "file://../../material/message-list/demos/density-prop/index.ts", "bg": "inline", "collapseToEmpty": true}} See [Variants and density](/x/react-chat/basics/variants-and-density/) for details. diff --git a/docs/data/chat/display/message-parts/code-blocks/ChatCodeBlockPlayground.js b/docs/data/chat/display/message-parts/code-blocks/ChatCodeBlockPlayground.js deleted file mode 100644 index 7da55bb17cb84..0000000000000 --- a/docs/data/chat/display/message-parts/code-blocks/ChatCodeBlockPlayground.js +++ /dev/null @@ -1,162 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { ChatCodeBlock } from '@mui/x-chat'; -import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard'; -import { - DividerLabel, - SelectControl, - TextControl, -} from 'docs/src/modules/components/chat-playground/controls'; -import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations'; - -const SAMPLES = { - tsx: `import { ChatBox } from '@mui/x-chat'; - -export function MyChat() { - return ; -}`, - bash: `pnpm add @mui/x-chat -pnpm add @mui/material @emotion/react`, - json: `{ - "name": "@mui/x-chat", - "version": "8.0.0", - "main": "./dist/index.js" -}`, - css: `.MuiChatComposer-root { - border-radius: 16px; - box-shadow: var(--mui-shadows-1); -}`, -}; - -// Simple demo "highlighter" — splits on whitespace and shades the tokens. -function tokensHighlighter(code) { - return code.split(/(\s+)/).map((part, i) => { - if (/^\s+$/.test(part)) { - return part; - } - if ( - /^(import|export|function|return|const|let|var|from|class|interface)$/.test( - part, - ) - ) { - return ( - - {part} - - ); - } - if (/^["'`].*/.test(part)) { - return ( - - {part} - - ); - } - if (/^\d+$/.test(part)) { - return ( - - {part} - - ); - } - return part; - }); -} - -const HIGHLIGHTERS = { - none: undefined, - tokens: tokensHighlighter, -}; - -const CLASS_DEFS = [ - { name: 'root', description: 'The outer code block container.' }, - { - name: 'header', - selector: '.MuiChatCodeBlock-header', - description: 'The header row (language label + copy).', - }, - { - name: 'languageLabel', - selector: '.MuiChatCodeBlock-languageLabel', - description: 'The language identifier label.', - }, - { - name: 'copyButton', - selector: '.MuiChatCodeBlock-copyButton', - description: 'The copy button.', - }, - { - name: 'pre', - selector: '.MuiChatCodeBlock-pre', - description: 'The 
 wrapper.',
-  },
-  {
-    name: 'code',
-    selector: '.MuiChatCodeBlock-code',
-    description: 'The  element.',
-  },
-];
-
-export default function ChatCodeBlockPlayground() {
-  const [language, setLanguage] = React.useState('tsx');
-  const [code, setCode] = React.useState(SAMPLES.tsx);
-  const [highlighter, setHighlighter] = React.useState('none');
-  const classesCustomizations = useCustomizations(CLASS_DEFS);
-
-  React.useEffect(() => {
-    setCode(SAMPLES[language]);
-  }, [language]);
-
-  const blockSx = classesCustomizations.toClassesSx();
-
-  return (
-    
-          props
-           ({
-              value,
-            }))}
-            onChange={setLanguage}
-          />
-          
-          
-        
-      }
-      preview={
-        
-          
-            {code}
-          
-        
-      }
-    />
-  );
-}
diff --git a/docs/data/chat/display/message-parts/code-blocks/code-blocks.md b/docs/data/chat/display/message-parts/code-blocks/code-blocks.md
index 143eeaf028fa0..49113619acc12 100644
--- a/docs/data/chat/display/message-parts/code-blocks/code-blocks.md
+++ b/docs/data/chat/display/message-parts/code-blocks/code-blocks.md
@@ -18,7 +18,7 @@ components: ChatCodeBlock
 
 The demo below lets you swap languages and content live:
 
-{{"demo": "ChatCodeBlockPlayground.js", "bg": "inline", "defaultCodeOpen": false}}
+{{"component": "file://./demos/chat-code-block-playground/index.ts", "bg": "inline", "collapseToEmpty": true}}
 
 ## Import
 
@@ -39,7 +39,7 @@ def greet(name):
 
 The language specified after the opening backticks (for example, `python`) appears in the header bar, as the demo below shows:
 
-{{"demo": "../../../material/examples/code-block/CodeBlock.js", "defaultCodeOpen": false, "bg": "inline"}}
+{{"component": "file://../../../material/examples/code-block/demos/code-block/index.ts", "bg": "inline", "collapseToEmpty": true}}
 
 ## Standalone usage
 
diff --git a/docs/data/chat/display/message-parts/code-blocks/ChatCodeBlockPlayground.tsx b/docs/data/chat/display/message-parts/code-blocks/demos/chat-code-block-playground/ChatCodeBlockPlayground.tsx
similarity index 94%
rename from docs/data/chat/display/message-parts/code-blocks/ChatCodeBlockPlayground.tsx
rename to docs/data/chat/display/message-parts/code-blocks/demos/chat-code-block-playground/ChatCodeBlockPlayground.tsx
index 8d0c403300d42..5a10ab2cc2138 100644
--- a/docs/data/chat/display/message-parts/code-blocks/ChatCodeBlockPlayground.tsx
+++ b/docs/data/chat/display/message-parts/code-blocks/demos/chat-code-block-playground/ChatCodeBlockPlayground.tsx
@@ -7,10 +7,8 @@ import {
   SelectControl,
   TextControl,
 } from 'docs/src/modules/components/chat-playground/controls';
-import {
-  useCustomizations,
-  type CustomizationDef,
-} from 'docs/src/modules/components/chat-playground/useCustomizations';
+import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations';
+import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations';
 
 const SAMPLES: Record = {
   tsx: `import { ChatBox } from '@mui/x-chat';
@@ -110,6 +108,7 @@ const CLASS_DEFS: ReadonlyArray> = [
 ];
 
 export default function ChatCodeBlockPlayground() {
+  // @focus-start @padding 1
   const [language, setLanguage] = React.useState('tsx');
   const [code, setCode] = React.useState(SAMPLES.tsx);
   const [highlighter, setHighlighter] = React.useState('none');
@@ -171,4 +170,5 @@ export default function ChatCodeBlockPlayground() {
       }
     />
   );
+  // @focus-end
 }
diff --git a/docs/data/chat/display/message-parts/code-blocks/demos/chat-code-block-playground/client.ts b/docs/data/chat/display/message-parts/code-blocks/demos/chat-code-block-playground/client.ts
new file mode 100644
index 0000000000000..c874a2038b3ef
--- /dev/null
+++ b/docs/data/chat/display/message-parts/code-blocks/demos/chat-code-block-playground/client.ts
@@ -0,0 +1,7 @@
+'use client';
+
+import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient';
+
+const ClientProvider = createDemoClient(import.meta.url);
+
+export default ClientProvider;
diff --git a/docs/data/chat/display/message-parts/code-blocks/demos/chat-code-block-playground/index.ts b/docs/data/chat/display/message-parts/code-blocks/demos/chat-code-block-playground/index.ts
new file mode 100644
index 0000000000000..d432c96686fc7
--- /dev/null
+++ b/docs/data/chat/display/message-parts/code-blocks/demos/chat-code-block-playground/index.ts
@@ -0,0 +1,6 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ChatCodeBlockPlayground from './ChatCodeBlockPlayground';
+import ClientProvider from './client';
+
+export default createDemo(import.meta.url, ChatCodeBlockPlayground, { ClientProvider });
diff --git a/docs/data/chat/display/message-parts/custom-parts/CustomDataPartChat.js b/docs/data/chat/display/message-parts/custom-parts/CustomDataPartChat.js
deleted file mode 100644
index 66a15da3cd514..0000000000000
--- a/docs/data/chat/display/message-parts/custom-parts/CustomDataPartChat.js
+++ /dev/null
@@ -1,146 +0,0 @@
-'use client';
-import * as React from 'react';
-import { ChatBox } from '@mui/x-chat';
-
-import {
-  createChunkStream,
-  randomId,
-} from 'docs/data/chat/core/examples/shared/demoUtils';
-
-// Register the payload type for the `data-ticket-status` part. This merges with
-// the docs-wide augmentation, so the `data` field is typed everywhere below.
-
-const STATUS_COLORS = {
-  open: { fg: '#0b5cad', bg: 'rgba(25, 118, 210, 0.12)' },
-  blocked: { fg: '#b3261e', bg: 'rgba(211, 47, 47, 0.12)' },
-  resolved: { fg: '#1b5e20', bg: 'rgba(46, 125, 50, 0.12)' },
-};
-
-const STATUS_CYCLE = ['open', 'blocked', 'resolved'];
-
-function TicketStatusBadge({ ticketId, status, lastUpdated }) {
-  const colors = STATUS_COLORS[status];
-  return (
-    
-      
-        {ticketId} · {status}
-      
-      
-        updated {lastUpdated}
-      
-    
-  );
-}
-
-const partRenderers = {
-  'data-ticket-status': ({ part }) => (
-    
-  ),
-};
-
-const initialMessages = [
-  {
-    id: 'seed-user',
-    role: 'user',
-    status: 'sent',
-    parts: [{ type: 'text', text: "What's the status of ticket T-1042?" }],
-  },
-  {
-    id: 'seed-assistant',
-    role: 'assistant',
-    status: 'sent',
-    parts: [
-      { type: 'text', text: 'Here is the latest status:' },
-      {
-        type: 'data-ticket-status',
-        data: {
-          ticketId: 'T-1042',
-          status: 'blocked',
-          lastUpdated: '2026-06-10',
-        },
-      },
-    ],
-  },
-];
-
-export default function CustomDataPartChat() {
-  const cycleRef = React.useRef(0);
-
-  const adapter = React.useMemo(
-    () => ({
-      async sendMessage() {
-        const messageId = randomId();
-        const textId = `${messageId}-text`;
-        const status = STATUS_CYCLE[cycleRef.current % STATUS_CYCLE.length];
-        cycleRef.current += 1;
-
-        return createChunkStream(
-          [
-            { type: 'start', messageId },
-            { type: 'text-start', id: textId },
-            {
-              type: 'text-delta',
-              id: textId,
-              delta: 'Latest ticket status:',
-            },
-            { type: 'text-end', id: textId },
-            {
-              type: 'data-ticket-status',
-              id: `${messageId}-ticket-status`,
-              data: {
-                ticketId: 'T-1042',
-                status,
-                lastUpdated: new Date().toISOString().slice(0, 10),
-              },
-            },
-            { type: 'finish', messageId, finishReason: 'stop' },
-          ],
-          { delayMs: 120 },
-        );
-      },
-    }),
-    [],
-  );
-
-  return (
-    
-  );
-}
diff --git a/docs/data/chat/display/message-parts/custom-parts/CustomDataPartChat.tsx.preview b/docs/data/chat/display/message-parts/custom-parts/CustomDataPartChat.tsx.preview
deleted file mode 100644
index 2bb0c4e4a5492..0000000000000
--- a/docs/data/chat/display/message-parts/custom-parts/CustomDataPartChat.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/chat/display/message-parts/custom-parts/custom-parts.md b/docs/data/chat/display/message-parts/custom-parts/custom-parts.md
index 5234fb270eb8b..a771b90cb481d 100644
--- a/docs/data/chat/display/message-parts/custom-parts/custom-parts.md
+++ b/docs/data/chat/display/message-parts/custom-parts/custom-parts.md
@@ -87,7 +87,7 @@ Custom parts are included in the `ChatMessagePart` union, so they appear in `mes
 
 A renderer is a function that receives the part and returns the JSX to display in its place. The following demo registers a `data-ticket-status` renderer that turns the raw payload into a colored status badge—send a message to see new badges stream in instead of the default JSON fallback.
 
-{{"demo": "CustomDataPartChat.js", "bg": "inline", "defaultCodeOpen": false}}
+{{"component": "file://./demos/custom-data-part-chat/index.ts", "bg": "inline", "collapseToEmpty": true}}
 
 ### With `ChatProvider`
 
diff --git a/docs/data/chat/display/message-parts/custom-parts/CustomDataPartChat.tsx b/docs/data/chat/display/message-parts/custom-parts/demos/custom-data-part-chat/CustomDataPartChat.tsx
similarity index 98%
rename from docs/data/chat/display/message-parts/custom-parts/CustomDataPartChat.tsx
rename to docs/data/chat/display/message-parts/custom-parts/demos/custom-data-part-chat/CustomDataPartChat.tsx
index f30ff63f0a384..343e510997d8c 100644
--- a/docs/data/chat/display/message-parts/custom-parts/CustomDataPartChat.tsx
+++ b/docs/data/chat/display/message-parts/custom-parts/demos/custom-data-part-chat/CustomDataPartChat.tsx
@@ -115,6 +115,7 @@ const initialMessages: ChatMessage[] = [
 ];
 
 export default function CustomDataPartChat() {
+  // @focus-start @padding 1
   const cycleRef = React.useRef(0);
 
   const adapter = React.useMemo(
@@ -166,4 +167,5 @@ export default function CustomDataPartChat() {
       }}
     />
   );
+  // @focus-end
 }
diff --git a/docs/data/chat/display/message-parts/custom-parts/demos/custom-data-part-chat/client.ts b/docs/data/chat/display/message-parts/custom-parts/demos/custom-data-part-chat/client.ts
new file mode 100644
index 0000000000000..c874a2038b3ef
--- /dev/null
+++ b/docs/data/chat/display/message-parts/custom-parts/demos/custom-data-part-chat/client.ts
@@ -0,0 +1,7 @@
+'use client';
+
+import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient';
+
+const ClientProvider = createDemoClient(import.meta.url);
+
+export default ClientProvider;
diff --git a/docs/data/chat/display/message-parts/custom-parts/demos/custom-data-part-chat/index.ts b/docs/data/chat/display/message-parts/custom-parts/demos/custom-data-part-chat/index.ts
new file mode 100644
index 0000000000000..18b7fd96c268f
--- /dev/null
+++ b/docs/data/chat/display/message-parts/custom-parts/demos/custom-data-part-chat/index.ts
@@ -0,0 +1,6 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import CustomDataPartChat from './CustomDataPartChat';
+import ClientProvider from './client';
+
+export default createDemo(import.meta.url, CustomDataPartChat, { ClientProvider });
diff --git a/docs/data/chat/display/message-parts/files-and-images/ChatFilePartCustomizationDemo.js b/docs/data/chat/display/message-parts/files-and-images/ChatFilePartCustomizationDemo.js
deleted file mode 100644
index 65e08bb56b109..0000000000000
--- a/docs/data/chat/display/message-parts/files-and-images/ChatFilePartCustomizationDemo.js
+++ /dev/null
@@ -1,79 +0,0 @@
-'use client';
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
-import { ChatConversation, ChatMessageList } from '@mui/x-chat';
-import { ChatProvider } from '@mui/x-chat/headless';
-
-import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils';
-
-const adapter = createEchoAdapter();
-
-const LargePreview = styled('img')({
-  width: '100%',
-  maxWidth: 240,
-  borderRadius: 8,
-  display: 'block',
-});
-
-const conversation = {
-  id: 'files-custom-conv',
-  title: 'Files and images',
-  participants: [],
-  readState: 'read',
-  unreadCount: 0,
-  lastMessageAt: '2026-03-15T10:00:00.000Z',
-};
-
-const messages = [
-  {
-    id: 'files-custom-msg-1',
-    conversationId: 'files-custom-conv',
-    role: 'assistant',
-    status: 'sent',
-    createdAt: '2026-03-15T10:00:00.000Z',
-    parts: [
-      { type: 'text', text: 'Here are the requested files:' },
-      {
-        type: 'file',
-        mediaType: 'image/svg+xml',
-        url: '/static/x/chat/quarterly-chart.svg',
-        filename: 'quarterly-chart.svg',
-      },
-      {
-        type: 'file',
-        mediaType: 'text/csv',
-        url: '/static/x/chat/q4-metrics.csv',
-        filename: 'q4-metrics.csv',
-      },
-    ],
-  },
-];
-
-export default function ChatFilePartCustomizationDemo() {
-  return (
-    
-      
-        
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/chat/display/message-parts/files-and-images/ChatFilePartsDemo.js b/docs/data/chat/display/message-parts/files-and-images/ChatFilePartsDemo.js
deleted file mode 100644
index daa8f5fef602e..0000000000000
--- a/docs/data/chat/display/message-parts/files-and-images/ChatFilePartsDemo.js
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client';
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import { ChatConversation, ChatMessageList } from '@mui/x-chat';
-import { ChatProvider } from '@mui/x-chat/headless';
-
-import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils';
-
-const adapter = createEchoAdapter();
-
-const conversation = {
-  id: 'files-conv',
-  title: 'Files and images',
-  participants: [],
-  readState: 'read',
-  unreadCount: 0,
-  lastMessageAt: '2026-03-15T10:00:00.000Z',
-};
-
-const messages = [
-  {
-    id: 'files-msg-1',
-    conversationId: 'files-conv',
-    role: 'assistant',
-    status: 'sent',
-    createdAt: '2026-03-15T10:00:00.000Z',
-    parts: [
-      { type: 'text', text: 'Here are the requested files:' },
-      {
-        type: 'file',
-        mediaType: 'image/svg+xml',
-        url: '/static/x/chat/quarterly-chart.svg',
-        filename: 'quarterly-chart.svg',
-      },
-      {
-        type: 'file',
-        mediaType: 'text/csv',
-        url: '/static/x/chat/q4-metrics.csv',
-        filename: 'q4-metrics.csv',
-      },
-    ],
-  },
-];
-
-export default function ChatFilePartsDemo() {
-  return (
-    
-      
-        
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/chat/display/message-parts/files-and-images/ChatFilePartsDemo.tsx.preview b/docs/data/chat/display/message-parts/files-and-images/ChatFilePartsDemo.tsx.preview
deleted file mode 100644
index 0d25ec5c3ff8e..0000000000000
--- a/docs/data/chat/display/message-parts/files-and-images/ChatFilePartsDemo.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
-  
-    
-      
-    
-  
-
\ No newline at end of file
diff --git a/docs/data/chat/display/message-parts/files-and-images/ChatFilePartCustomizationDemo.tsx b/docs/data/chat/display/message-parts/files-and-images/demos/chat-file-part-customization-demo/ChatFilePartCustomizationDemo.tsx
similarity index 97%
rename from docs/data/chat/display/message-parts/files-and-images/ChatFilePartCustomizationDemo.tsx
rename to docs/data/chat/display/message-parts/files-and-images/demos/chat-file-part-customization-demo/ChatFilePartCustomizationDemo.tsx
index 28eea98471e23..c0d2c090a31b9 100644
--- a/docs/data/chat/display/message-parts/files-and-images/ChatFilePartCustomizationDemo.tsx
+++ b/docs/data/chat/display/message-parts/files-and-images/demos/chat-file-part-customization-demo/ChatFilePartCustomizationDemo.tsx
@@ -55,6 +55,7 @@ const messages: ChatMessage[] = [
 
 export default function ChatFilePartCustomizationDemo() {
   return (
+    // @focus-start @padding 2
     
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/chat/display/message-parts/files-and-images/demos/chat-file-part-customization-demo/client.ts b/docs/data/chat/display/message-parts/files-and-images/demos/chat-file-part-customization-demo/client.ts
new file mode 100644
index 0000000000000..c874a2038b3ef
--- /dev/null
+++ b/docs/data/chat/display/message-parts/files-and-images/demos/chat-file-part-customization-demo/client.ts
@@ -0,0 +1,7 @@
+'use client';
+
+import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient';
+
+const ClientProvider = createDemoClient(import.meta.url);
+
+export default ClientProvider;
diff --git a/docs/data/chat/display/message-parts/files-and-images/demos/chat-file-part-customization-demo/index.ts b/docs/data/chat/display/message-parts/files-and-images/demos/chat-file-part-customization-demo/index.ts
new file mode 100644
index 0000000000000..5c5a9fdc1d17a
--- /dev/null
+++ b/docs/data/chat/display/message-parts/files-and-images/demos/chat-file-part-customization-demo/index.ts
@@ -0,0 +1,6 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ChatFilePartCustomizationDemo from './ChatFilePartCustomizationDemo';
+import ClientProvider from './client';
+
+export default createDemo(import.meta.url, ChatFilePartCustomizationDemo, { ClientProvider });
diff --git a/docs/data/chat/display/message-parts/files-and-images/ChatFilePartsDemo.tsx b/docs/data/chat/display/message-parts/files-and-images/demos/chat-file-parts-demo/ChatFilePartsDemo.tsx
similarity index 97%
rename from docs/data/chat/display/message-parts/files-and-images/ChatFilePartsDemo.tsx
rename to docs/data/chat/display/message-parts/files-and-images/demos/chat-file-parts-demo/ChatFilePartsDemo.tsx
index 380e54f8e3d69..ad6b9b25652e1 100644
--- a/docs/data/chat/display/message-parts/files-and-images/ChatFilePartsDemo.tsx
+++ b/docs/data/chat/display/message-parts/files-and-images/demos/chat-file-parts-demo/ChatFilePartsDemo.tsx
@@ -47,6 +47,7 @@ const messages: ChatMessage[] = [
 
 export default function ChatFilePartsDemo() {
   return (
+    // @focus-start @padding 2
     
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/chat/display/message-parts/files-and-images/demos/chat-file-parts-demo/client.ts b/docs/data/chat/display/message-parts/files-and-images/demos/chat-file-parts-demo/client.ts
new file mode 100644
index 0000000000000..c874a2038b3ef
--- /dev/null
+++ b/docs/data/chat/display/message-parts/files-and-images/demos/chat-file-parts-demo/client.ts
@@ -0,0 +1,7 @@
+'use client';
+
+import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient';
+
+const ClientProvider = createDemoClient(import.meta.url);
+
+export default ClientProvider;
diff --git a/docs/data/chat/display/message-parts/files-and-images/demos/chat-file-parts-demo/index.ts b/docs/data/chat/display/message-parts/files-and-images/demos/chat-file-parts-demo/index.ts
new file mode 100644
index 0000000000000..638b9f35afcc8
--- /dev/null
+++ b/docs/data/chat/display/message-parts/files-and-images/demos/chat-file-parts-demo/index.ts
@@ -0,0 +1,6 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ChatFilePartsDemo from './ChatFilePartsDemo';
+import ClientProvider from './client';
+
+export default createDemo(import.meta.url, ChatFilePartsDemo, { ClientProvider });
diff --git a/docs/data/chat/display/message-parts/files-and-images/files-and-images.md b/docs/data/chat/display/message-parts/files-and-images/files-and-images.md
index 1878d9c54b40d..8b0dcb5e8dae6 100644
--- a/docs/data/chat/display/message-parts/files-and-images/files-and-images.md
+++ b/docs/data/chat/display/message-parts/files-and-images/files-and-images.md
@@ -21,7 +21,7 @@ See [Attachments](/x/react-chat/behavior/attachments/) for the upload flow.
 
 The demo below shows a message containing an image part and a document part:
 
-{{"demo": "ChatFilePartsDemo.js", "bg": "inline", "defaultCodeOpen": false}}
+{{"component": "file://./demos/chat-file-parts-demo/index.ts", "bg": "inline", "collapseToEmpty": true}}
 
 ## File part structure
 
@@ -124,7 +124,7 @@ Override file part rendering through `slotProps.messageContent.partProps.file`:
 
 The demo below replaces the default chip with a card-style preview:
 
-{{"demo": "ChatFilePartCustomizationDemo.js", "bg": "inline", "defaultCodeOpen": false}}
+{{"component": "file://./demos/chat-file-part-customization-demo/index.ts", "bg": "inline", "collapseToEmpty": true}}
 
 ## Streaming
 
diff --git a/docs/data/chat/display/message-parts/sources-and-citations/ChatMessageSourcesPlayground.js b/docs/data/chat/display/message-parts/sources-and-citations/ChatMessageSourcesPlayground.js
deleted file mode 100644
index 5110e3ef410ec..0000000000000
--- a/docs/data/chat/display/message-parts/sources-and-citations/ChatMessageSourcesPlayground.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import * as React from 'react';
-import { ChatMessageSource, ChatMessageSources } from '@mui/x-chat';
-import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard';
-import {
-  DividerLabel,
-  NumberControl,
-  TextControl,
-} from 'docs/src/modules/components/chat-playground/controls';
-import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations';
-
-const POOL = [
-  { href: 'https://mui.com/x/react-chat/', title: 'MUI X Chat overview' },
-  {
-    href: 'https://mui.com/material-ui/customization/theming/',
-    title: 'Material UI theming',
-  },
-  { href: 'https://mui.com/x/api/chat/chat-box/', title: 'ChatBox API' },
-  { href: 'https://mui.com/x/react-chat/material/', title: 'Material adapter' },
-  { href: 'https://mui.com/system/styled/', title: 'styled() utility' },
-];
-
-const CLASS_DEFS = [
-  { name: 'root', description: 'The sources container.' },
-  {
-    name: 'label',
-    selector: '.MuiChatMessageSources-label',
-    description: 'The "Sources" label above the list.',
-  },
-  {
-    name: 'list',
-    selector: '.MuiChatMessageSources-list',
-    description: 'The ordered list element.',
-  },
-];
-
-export default function ChatMessageSourcesPlayground() {
-  const [count, setCount] = React.useState(3);
-  const [label, setLabel] = React.useState('Sources');
-  const classesCustomizations = useCustomizations(CLASS_DEFS);
-
-  const rootSx = classesCustomizations.toClassesSx();
-
-  return (
-    
-          props
-          
-          fixture data
-          
-        
-      }
-      preview={
-        
-          {POOL.slice(0, count).map((source, i) => (
-            
-          ))}
-        
-      }
-    />
-  );
-}
diff --git a/docs/data/chat/display/message-parts/sources-and-citations/SourcePartsDemo.js b/docs/data/chat/display/message-parts/sources-and-citations/SourcePartsDemo.js
deleted file mode 100644
index 1251e33e261da..0000000000000
--- a/docs/data/chat/display/message-parts/sources-and-citations/SourcePartsDemo.js
+++ /dev/null
@@ -1,76 +0,0 @@
-'use client';
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import { ChatConversation, ChatMessageList } from '@mui/x-chat';
-import { ChatProvider } from '@mui/x-chat/headless';
-
-import { createEchoAdapter } from 'docs/data/chat/core/examples/shared/demoUtils';
-
-const adapter = createEchoAdapter();
-
-const conversation = {
-  id: 'sources-demo',
-  title: 'Sources and citations',
-  participants: [],
-  readState: 'read',
-  unreadCount: 0,
-  lastMessageAt: '2026-03-15T10:00:00.000Z',
-};
-
-const messages = [
-  {
-    id: 'msg-1',
-    conversationId: conversation.id,
-    role: 'user',
-    status: 'sent',
-    createdAt: '2026-03-15T09:59:00.000Z',
-    parts: [{ type: 'text', text: 'How do I override the source link styles?' }],
-  },
-  {
-    id: 'msg-2',
-    conversationId: conversation.id,
-    role: 'assistant',
-    status: 'sent',
-    createdAt: '2026-03-15T10:00:00.000Z',
-    parts: [
-      {
-        type: 'text',
-        text: 'According to the documentation [1], use the partProps slot overrides. The theming guide covers the resolution order:',
-      },
-      {
-        type: 'source-url',
-        sourceId: 'src-1',
-        url: 'https://mui.com/x/react-chat/',
-        title: 'MUI X Chat documentation',
-      },
-      {
-        type: 'source-document',
-        sourceId: 'src-2',
-        title: 'Theming guide — slot overrides',
-        text: 'Slots are resolved in order: theme defaults first, then component-level props.',
-      },
-    ],
-  },
-];
-
-export default function SourcePartsDemo() {
-  return (
-    
-      
-        
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/chat/display/message-parts/sources-and-citations/ChatMessageSourcesPlayground.tsx b/docs/data/chat/display/message-parts/sources-and-citations/demos/chat-message-sources-playground/ChatMessageSourcesPlayground.tsx
similarity index 91%
rename from docs/data/chat/display/message-parts/sources-and-citations/ChatMessageSourcesPlayground.tsx
rename to docs/data/chat/display/message-parts/sources-and-citations/demos/chat-message-sources-playground/ChatMessageSourcesPlayground.tsx
index 9cac7c8c53fde..18af999a627fa 100644
--- a/docs/data/chat/display/message-parts/sources-and-citations/ChatMessageSourcesPlayground.tsx
+++ b/docs/data/chat/display/message-parts/sources-and-citations/demos/chat-message-sources-playground/ChatMessageSourcesPlayground.tsx
@@ -6,10 +6,8 @@ import {
   NumberControl,
   TextControl,
 } from 'docs/src/modules/components/chat-playground/controls';
-import {
-  useCustomizations,
-  type CustomizationDef,
-} from 'docs/src/modules/components/chat-playground/useCustomizations';
+import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations';
+import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations';
 
 const POOL = [
   { href: 'https://mui.com/x/react-chat/', title: 'MUI X Chat overview' },
@@ -39,6 +37,7 @@ const CLASS_DEFS: ReadonlyArray> = [
 ];
 
 export default function ChatMessageSourcesPlayground() {
+  // @focus-start @padding 1
   const [count, setCount] = React.useState(3);
   const [label, setLabel] = React.useState('Sources');
   const classesCustomizations = useCustomizations(CLASS_DEFS);
@@ -80,4 +79,5 @@ export default function ChatMessageSourcesPlayground() {
       }
     />
   );
+  // @focus-end
 }
diff --git a/docs/data/chat/display/message-parts/sources-and-citations/demos/chat-message-sources-playground/client.ts b/docs/data/chat/display/message-parts/sources-and-citations/demos/chat-message-sources-playground/client.ts
new file mode 100644
index 0000000000000..c874a2038b3ef
--- /dev/null
+++ b/docs/data/chat/display/message-parts/sources-and-citations/demos/chat-message-sources-playground/client.ts
@@ -0,0 +1,7 @@
+'use client';
+
+import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient';
+
+const ClientProvider = createDemoClient(import.meta.url);
+
+export default ClientProvider;
diff --git a/docs/data/chat/display/message-parts/sources-and-citations/demos/chat-message-sources-playground/index.ts b/docs/data/chat/display/message-parts/sources-and-citations/demos/chat-message-sources-playground/index.ts
new file mode 100644
index 0000000000000..9b55ff2ca7f5f
--- /dev/null
+++ b/docs/data/chat/display/message-parts/sources-and-citations/demos/chat-message-sources-playground/index.ts
@@ -0,0 +1,6 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ChatMessageSourcesPlayground from './ChatMessageSourcesPlayground';
+import ClientProvider from './client';
+
+export default createDemo(import.meta.url, ChatMessageSourcesPlayground, { ClientProvider });
diff --git a/docs/data/chat/display/message-parts/sources-and-citations/SourcePartsDemo.tsx b/docs/data/chat/display/message-parts/sources-and-citations/demos/source-parts-demo/SourcePartsDemo.tsx
similarity index 97%
rename from docs/data/chat/display/message-parts/sources-and-citations/SourcePartsDemo.tsx
rename to docs/data/chat/display/message-parts/sources-and-citations/demos/source-parts-demo/SourcePartsDemo.tsx
index 546f52a2702d1..d5195b03d5d8a 100644
--- a/docs/data/chat/display/message-parts/sources-and-citations/SourcePartsDemo.tsx
+++ b/docs/data/chat/display/message-parts/sources-and-citations/demos/source-parts-demo/SourcePartsDemo.tsx
@@ -58,6 +58,7 @@ const messages: ChatMessage[] = [
 
 export default function SourcePartsDemo() {
   return (
+    // @focus-start @padding 2
     
       
     
+    // @focus-end
   );
 }
diff --git a/docs/data/chat/display/message-parts/sources-and-citations/demos/source-parts-demo/client.ts b/docs/data/chat/display/message-parts/sources-and-citations/demos/source-parts-demo/client.ts
new file mode 100644
index 0000000000000..c874a2038b3ef
--- /dev/null
+++ b/docs/data/chat/display/message-parts/sources-and-citations/demos/source-parts-demo/client.ts
@@ -0,0 +1,7 @@
+'use client';
+
+import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient';
+
+const ClientProvider = createDemoClient(import.meta.url);
+
+export default ClientProvider;
diff --git a/docs/data/chat/display/message-parts/sources-and-citations/demos/source-parts-demo/index.ts b/docs/data/chat/display/message-parts/sources-and-citations/demos/source-parts-demo/index.ts
new file mode 100644
index 0000000000000..62d4dce0ffd7b
--- /dev/null
+++ b/docs/data/chat/display/message-parts/sources-and-citations/demos/source-parts-demo/index.ts
@@ -0,0 +1,6 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import SourcePartsDemo from './SourcePartsDemo';
+import ClientProvider from './client';
+
+export default createDemo(import.meta.url, SourcePartsDemo, { ClientProvider });
diff --git a/docs/data/chat/display/message-parts/sources-and-citations/sources-and-citations.md b/docs/data/chat/display/message-parts/sources-and-citations/sources-and-citations.md
index c529b26792103..3d46736279234 100644
--- a/docs/data/chat/display/message-parts/sources-and-citations/sources-and-citations.md
+++ b/docs/data/chat/display/message-parts/sources-and-citations/sources-and-citations.md
@@ -19,7 +19,7 @@ Two part types cover the common citation patterns: URL references and document e
 
 The demo below seeds an assistant message containing a `source-url` and a `source-document` part. Both are rendered automatically by the built-in part renderers:
 
-{{"demo": "SourcePartsDemo.js", "bg": "inline", "defaultCodeOpen": false}}
+{{"component": "file://./demos/source-parts-demo/index.ts", "bg": "inline", "collapseToEmpty": true}}
 
 ## Source URL parts
 
@@ -190,7 +190,7 @@ Source parts render inline where they appear in the message. To present a consol
 
 `ChatMessageSources` renders an ordered list (`ol`/`li`), so assistive technology announces the citation count and position.
 
-{{"demo": "ChatMessageSourcesPlayground.js", "bg": "inline", "defaultCodeOpen": false}}
+{{"component": "file://./demos/chat-message-sources-playground/index.ts", "bg": "inline", "collapseToEmpty": true}}
 
 ## See also
 
diff --git a/docs/data/chat/display/message-parts/text-and-markdown/MarkdownPlayground.js b/docs/data/chat/display/message-parts/text-and-markdown/MarkdownPlayground.js
deleted file mode 100644
index 5374e5e1cac42..0000000000000
--- a/docs/data/chat/display/message-parts/text-and-markdown/MarkdownPlayground.js
+++ /dev/null
@@ -1,93 +0,0 @@
-'use client';
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
-import { ChatConversation, ChatMessageList } from '@mui/x-chat';
-
-import { ScopedChat } from 'docs/src/modules/components/chat-playground/sharedProviders';
-
-const MARKDOWN_SAMPLE = `### Markdown rendering
-
-The built-in renderer turns model output into **bold**, _italic_, and \`inline code\`.
-
-- First item
-- Second item with a [link](https://mui.com)
-- Third item
-
-\`\`\`ts
-const greeting: string = 'Hello, markdown!';
-console.log(greeting);
-\`\`\`
-
-Footnotes are supported too.[^1]
-
-Raw HTML stays escaped text.
-
-[^1]: This is the footnote definition.
-`;
-
-const conversation = {
-  id: 'markdown-playground',
-  title: 'Markdown playground',
-  participants: [],
-};
-
-export default function MarkdownPlayground() {
-  const [source, setSource] = React.useState(MARKDOWN_SAMPLE);
-
-  // The assistant message is re-seeded whenever the textarea changes; ScopedChat
-  // remounts the provider on seed-key change so the bubble re-renders live.
-  const messages = React.useMemo(
-    () => [
-      {
-        id: 'markdown-playground-msg',
-        conversationId: conversation.id,
-        role: 'assistant',
-        status: 'sent',
-        createdAt: '2026-03-15T10:00:00.000Z',
-        parts: [{ type: 'text', text: source }],
-      },
-    ],
-    [source],
-  );
-
-  return (
-    
-      
-        Markdown source
-         setSource(event.target.value)}
-          multiline
-          minRows={14}
-          fullWidth
-          slotProps={{ input: { sx: { fontFamily: 'monospace', fontSize: 13 } } }}
-        />
-      
-      
-        Rendered message
-        
-          
-            
-              
-            
-          
-        
-      
-    
-  );
-}
diff --git a/docs/data/chat/display/message-parts/text-and-markdown/StreamingMarkdown.js b/docs/data/chat/display/message-parts/text-and-markdown/StreamingMarkdown.js
deleted file mode 100644
index 65e8b4bffe183..0000000000000
--- a/docs/data/chat/display/message-parts/text-and-markdown/StreamingMarkdown.js
+++ /dev/null
@@ -1,70 +0,0 @@
-'use client';
-import * as React from 'react';
-import { ChatBox } from '@mui/x-chat';
-
-import {
-  createChunkStream,
-  createTextResponseChunks,
-  randomId,
-} from 'docs/data/chat/core/examples/shared/demoUtils';
-
-// A markdown-rich answer whose bold span and fenced code block are deliberately
-// long enough that mid-stream chunks split inside `**…**` and inside the fence —
-// so you can watch the built-in streaming repair render them cleanly instead of
-// flashing raw `**` or an unclosed code fence.
-const MARKDOWN_REPLY = `**Here is what I found** for your request:
-
-1. Markdown streams in token by token.
-2. Partial **bold** and code fences are repaired mid-stream.
-3. The bubble never leaks raw \`**\` markers.
-
-\`\`\`ts
-function greet(name: string): string {
-  return \`Hello, \${name}!\`;
-}
-\`\`\`
-`;
-
-const conversation = {
-  id: 'streaming-markdown',
-  title: 'Streaming markdown',
-  participants: [],
-};
-
-const messages = [
-  {
-    id: 'streaming-markdown-welcome',
-    conversationId: conversation.id,
-    role: 'assistant',
-    status: 'sent',
-    createdAt: '2026-03-15T10:00:00.000Z',
-    parts: [
-      { type: 'text', text: 'Send anything — I reply with streaming markdown.' },
-    ],
-  },
-];
-
-const streamingAdapter = {
-  async sendMessage() {
-    return createChunkStream(createTextResponseChunks(randomId(), MARKDOWN_REPLY), {
-      delayMs: 60,
-    });
-  },
-};
-
-export default function StreamingMarkdown() {
-  return (
-    
-  );
-}
diff --git a/docs/data/chat/display/message-parts/text-and-markdown/StreamingMarkdown.tsx.preview b/docs/data/chat/display/message-parts/text-and-markdown/StreamingMarkdown.tsx.preview
deleted file mode 100644
index 6a63e37967041..0000000000000
--- a/docs/data/chat/display/message-parts/text-and-markdown/StreamingMarkdown.tsx.preview
+++ /dev/null
@@ -1,12 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/chat/display/message-parts/text-and-markdown/MarkdownPlayground.tsx b/docs/data/chat/display/message-parts/text-and-markdown/demos/markdown-playground/MarkdownPlayground.tsx
similarity index 98%
rename from docs/data/chat/display/message-parts/text-and-markdown/MarkdownPlayground.tsx
rename to docs/data/chat/display/message-parts/text-and-markdown/demos/markdown-playground/MarkdownPlayground.tsx
index a8ce2a5a82177..ad41c73e5960b 100644
--- a/docs/data/chat/display/message-parts/text-and-markdown/MarkdownPlayground.tsx
+++ b/docs/data/chat/display/message-parts/text-and-markdown/demos/markdown-playground/MarkdownPlayground.tsx
@@ -38,6 +38,7 @@ const conversation: ChatConversationType = {
 };
 
 export default function MarkdownPlayground() {
+  // @focus-start @padding 1
   const [source, setSource] = React.useState(MARKDOWN_SAMPLE);
 
   // The assistant message is re-seeded whenever the textarea changes; ScopedChat
@@ -93,4 +94,5 @@ export default function MarkdownPlayground() {
       
     
   );
+  // @focus-end
 }
diff --git a/docs/data/chat/display/message-parts/text-and-markdown/demos/markdown-playground/client.ts b/docs/data/chat/display/message-parts/text-and-markdown/demos/markdown-playground/client.ts
new file mode 100644
index 0000000000000..c874a2038b3ef
--- /dev/null
+++ b/docs/data/chat/display/message-parts/text-and-markdown/demos/markdown-playground/client.ts
@@ -0,0 +1,7 @@
+'use client';
+
+import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient';
+
+const ClientProvider = createDemoClient(import.meta.url);
+
+export default ClientProvider;
diff --git a/docs/data/chat/display/message-parts/text-and-markdown/demos/markdown-playground/index.ts b/docs/data/chat/display/message-parts/text-and-markdown/demos/markdown-playground/index.ts
new file mode 100644
index 0000000000000..bb1970f817acc
--- /dev/null
+++ b/docs/data/chat/display/message-parts/text-and-markdown/demos/markdown-playground/index.ts
@@ -0,0 +1,6 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import MarkdownPlayground from './MarkdownPlayground';
+import ClientProvider from './client';
+
+export default createDemo(import.meta.url, MarkdownPlayground, { ClientProvider });
diff --git a/docs/data/chat/display/message-parts/text-and-markdown/StreamingMarkdown.tsx b/docs/data/chat/display/message-parts/text-and-markdown/demos/streaming-markdown/StreamingMarkdown.tsx
similarity index 97%
rename from docs/data/chat/display/message-parts/text-and-markdown/StreamingMarkdown.tsx
rename to docs/data/chat/display/message-parts/text-and-markdown/demos/streaming-markdown/StreamingMarkdown.tsx
index d52cf23102ab2..a285ee2d02b46 100644
--- a/docs/data/chat/display/message-parts/text-and-markdown/StreamingMarkdown.tsx
+++ b/docs/data/chat/display/message-parts/text-and-markdown/demos/streaming-markdown/StreamingMarkdown.tsx
@@ -58,6 +58,7 @@ const streamingAdapter: ChatAdapter = {
 
 export default function StreamingMarkdown() {
   return (
+    // @focus-start @padding 2
     
+    // @focus-end
   );
 }
diff --git a/docs/data/chat/display/message-parts/text-and-markdown/demos/streaming-markdown/client.ts b/docs/data/chat/display/message-parts/text-and-markdown/demos/streaming-markdown/client.ts
new file mode 100644
index 0000000000000..c874a2038b3ef
--- /dev/null
+++ b/docs/data/chat/display/message-parts/text-and-markdown/demos/streaming-markdown/client.ts
@@ -0,0 +1,7 @@
+'use client';
+
+import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient';
+
+const ClientProvider = createDemoClient(import.meta.url);
+
+export default ClientProvider;
diff --git a/docs/data/chat/display/message-parts/text-and-markdown/demos/streaming-markdown/index.ts b/docs/data/chat/display/message-parts/text-and-markdown/demos/streaming-markdown/index.ts
new file mode 100644
index 0000000000000..2208c5b0343d6
--- /dev/null
+++ b/docs/data/chat/display/message-parts/text-and-markdown/demos/streaming-markdown/index.ts
@@ -0,0 +1,6 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import StreamingMarkdown from './StreamingMarkdown';
+import ClientProvider from './client';
+
+export default createDemo(import.meta.url, StreamingMarkdown, { ClientProvider });
diff --git a/docs/data/chat/display/message-parts/text-and-markdown/text-and-markdown.md b/docs/data/chat/display/message-parts/text-and-markdown/text-and-markdown.md
index 72889937f777e..49f1e4f2698d3 100644
--- a/docs/data/chat/display/message-parts/text-and-markdown/text-and-markdown.md
+++ b/docs/data/chat/display/message-parts/text-and-markdown/text-and-markdown.md
@@ -75,7 +75,7 @@ The built-in parser supports:
 This keeps untrusted model output XSS-safe by construction.
 :::
 
-{{"demo": "MarkdownPlayground.js"}}
+{{"component": "file://./demos/markdown-playground/index.ts"}}
 
 ### Customizing text rendering
 
@@ -121,7 +121,7 @@ Once the `text-end` chunk arrives, `state` transitions to `'done'`, as shown bel
 { type: 'text', text: 'The answer is 42.', state: 'done' }
 ```
 
-{{"demo": "StreamingMarkdown.js"}}
+{{"component": "file://./demos/streaming-markdown/index.ts"}}
 
 When composing a fully custom message renderer (for example with the headless package), use the part's `state` field to show a typing indicator or pulsing cursor while content is arriving:
 
diff --git a/docs/data/chat/display/unread-marker/ChatUnreadMarkerPlayground.js b/docs/data/chat/display/unread-marker/ChatUnreadMarkerPlayground.js
deleted file mode 100644
index d7a9f9465e8a9..0000000000000
--- a/docs/data/chat/display/unread-marker/ChatUnreadMarkerPlayground.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import { ChatUnreadMarker } from '@mui/x-chat';
-
-import { PlaygroundCard } from 'docs/src/modules/components/chat-playground/PlaygroundCard';
-import { ScopedChat } from 'docs/src/modules/components/chat-playground/sharedProviders';
-import { MessageBubble } from 'docs/src/modules/components/chat-playground/MessageBubble';
-import {
-  DividerLabel,
-  NumberControl,
-  TextControl,
-} from 'docs/src/modules/components/chat-playground/controls';
-import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations';
-import { users } from 'docs/src/modules/components/chat-playground/data';
-
-const CONVERSATION_ID = 'unread-playground';
-
-function buildMessages(count) {
-  const base = Date.UTC(2026, 4, 3, 8, 30, 0);
-  return Array.from({ length: count }, (_, i) => ({
-    id: `unread-msg-${i}`,
-    conversationId: CONVERSATION_ID,
-    role: 'assistant',
-    author: users.assistant,
-    createdAt: new Date(base + i * 60_000).toISOString(),
-    status: i < Math.floor(count / 2) ? 'read' : 'sent',
-    parts: [{ type: 'text', text: `Message ${i + 1}` }],
-  }));
-}
-
-const CLASS_DEFS = [
-  { name: 'root', description: 'The unread marker row.' },
-  {
-    name: 'label',
-    selector: '.MuiChatUnreadMarker-label',
-    description: 'The "New messages" label inside the divider.',
-  },
-];
-
-export default function ChatUnreadMarkerPlayground() {
-  const [count, setCount] = React.useState(4);
-  const [boundary, setBoundary] = React.useState(2);
-  const [label, setLabel] = React.useState('');
-  const classesCustomizations = useCustomizations(CLASS_DEFS);
-  const messages = React.useMemo(() => buildMessages(count), [count]);
-  const safeBoundary = Math.min(boundary, count - 1);
-
-  // The headless UnreadMarker derives its boundary from the conversation's
-  // `unreadCount` (boundary = messageCount - unreadCount). Keep it in sync with
-  // the slider so the marker renders at the selected index for any message count.
-  const conversation = React.useMemo(
-    () => ({
-      id: CONVERSATION_ID,
-      title: 'Unread thread',
-      participants: [users.me, users.assistant],
-      unreadCount: count - safeBoundary,
-      readState: 'unread',
-    }),
-    [count, safeBoundary],
-  );
-
-  const markerSx = classesCustomizations.toClassesSx();
-
-  return (
-    
-          fixture (thread shape)
-          
-          
-          props
-          
-        
-      }
-      preview={
-        
-          
-            {messages.map((message, i) => (
-              
-                {i === safeBoundary ? (
-                  
-                ) : null}
-                
-              
-            ))}
-          
-        
-      }
-    />
-  );
-}
diff --git a/docs/data/chat/display/unread-marker/UnreadMarkerStandalone.js b/docs/data/chat/display/unread-marker/UnreadMarkerStandalone.js
deleted file mode 100644
index 1fe7d6b0ef87d..0000000000000
--- a/docs/data/chat/display/unread-marker/UnreadMarkerStandalone.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import { ChatUnreadMarker } from '@mui/x-chat';
-
-import { ScopedChat } from 'docs/src/modules/components/chat-playground/sharedProviders';
-import { MessageBubble } from 'docs/src/modules/components/chat-playground/MessageBubble';
-import { users } from 'docs/src/modules/components/chat-playground/data';
-
-const CONVERSATION_ID = 'standalone-thread';
-
-const conversation = {
-  id: CONVERSATION_ID,
-  title: 'Standalone thread',
-  participants: [users.me, users.assistant],
-  unreadCount: 2,
-  readState: 'unread',
-};
-
-const base = Date.UTC(2026, 4, 3, 8, 30, 0);
-
-const messages = Array.from({ length: 5 }, (_, i) => ({
-  id: `standalone-msg-${i}`,
-  conversationId: CONVERSATION_ID,
-  role: i % 2 === 0 ? 'assistant' : 'user',
-  author: i % 2 === 0 ? users.assistant : users.me,
-  createdAt: new Date(base + i * 60_000).toISOString(),
-  parts: [{ type: 'text', text: `Message ${i + 1}` }],
-}));
-
-export default function UnreadMarkerStandalone() {
-  return (
-    
-      
-        {messages.map((message) => (
-          
-            
-            
-          
-        ))}
-      
-    
-  );
-}
diff --git a/docs/data/chat/display/unread-marker/UnreadMarkerStandalone.tsx.preview b/docs/data/chat/display/unread-marker/UnreadMarkerStandalone.tsx.preview
deleted file mode 100644
index 190a772691521..0000000000000
--- a/docs/data/chat/display/unread-marker/UnreadMarkerStandalone.tsx.preview
+++ /dev/null
@@ -1,14 +0,0 @@
-
-  
-    {messages.map((message) => (
-      
-        
-        
-      
-    ))}
-  
-
\ No newline at end of file
diff --git a/docs/data/chat/display/unread-marker/ChatUnreadMarkerPlayground.tsx b/docs/data/chat/display/unread-marker/demos/chat-unread-marker-playground/ChatUnreadMarkerPlayground.tsx
similarity index 94%
rename from docs/data/chat/display/unread-marker/ChatUnreadMarkerPlayground.tsx
rename to docs/data/chat/display/unread-marker/demos/chat-unread-marker-playground/ChatUnreadMarkerPlayground.tsx
index 1e08213670b0f..3584c09887eaf 100644
--- a/docs/data/chat/display/unread-marker/ChatUnreadMarkerPlayground.tsx
+++ b/docs/data/chat/display/unread-marker/demos/chat-unread-marker-playground/ChatUnreadMarkerPlayground.tsx
@@ -10,10 +10,8 @@ import {
   NumberControl,
   TextControl,
 } from 'docs/src/modules/components/chat-playground/controls';
-import {
-  useCustomizations,
-  type CustomizationDef,
-} from 'docs/src/modules/components/chat-playground/useCustomizations';
+import { useCustomizations } from 'docs/src/modules/components/chat-playground/useCustomizations';
+import type { CustomizationDef } from 'docs/src/modules/components/chat-playground/useCustomizations';
 import { users } from 'docs/src/modules/components/chat-playground/data';
 
 const CONVERSATION_ID = 'unread-playground';
@@ -43,6 +41,7 @@ const CLASS_DEFS: ReadonlyArray> = [
 ];
 
 export default function ChatUnreadMarkerPlayground() {
+  // @focus-start @padding 1
   const [count, setCount] = React.useState(4);
   const [boundary, setBoundary] = React.useState(2);
   const [label, setLabel] = React.useState('');
@@ -124,4 +123,5 @@ export default function ChatUnreadMarkerPlayground() {
       }
     />
   );
+  // @focus-end
 }
diff --git a/docs/data/chat/display/unread-marker/demos/chat-unread-marker-playground/client.ts b/docs/data/chat/display/unread-marker/demos/chat-unread-marker-playground/client.ts
new file mode 100644
index 0000000000000..c874a2038b3ef
--- /dev/null
+++ b/docs/data/chat/display/unread-marker/demos/chat-unread-marker-playground/client.ts
@@ -0,0 +1,7 @@
+'use client';
+
+import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient';
+
+const ClientProvider = createDemoClient(import.meta.url);
+
+export default ClientProvider;
diff --git a/docs/data/chat/display/unread-marker/demos/chat-unread-marker-playground/index.ts b/docs/data/chat/display/unread-marker/demos/chat-unread-marker-playground/index.ts
new file mode 100644
index 0000000000000..1a6b1beb7f402
--- /dev/null
+++ b/docs/data/chat/display/unread-marker/demos/chat-unread-marker-playground/index.ts
@@ -0,0 +1,6 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import ChatUnreadMarkerPlayground from './ChatUnreadMarkerPlayground';
+import ClientProvider from './client';
+
+export default createDemo(import.meta.url, ChatUnreadMarkerPlayground, { ClientProvider });
diff --git a/docs/data/chat/display/unread-marker/UnreadMarkerStandalone.tsx b/docs/data/chat/display/unread-marker/demos/unread-marker-standalone/UnreadMarkerStandalone.tsx
similarity index 97%
rename from docs/data/chat/display/unread-marker/UnreadMarkerStandalone.tsx
rename to docs/data/chat/display/unread-marker/demos/unread-marker-standalone/UnreadMarkerStandalone.tsx
index 0eb909464b39a..41fed626a3a30 100644
--- a/docs/data/chat/display/unread-marker/UnreadMarkerStandalone.tsx
+++ b/docs/data/chat/display/unread-marker/demos/unread-marker-standalone/UnreadMarkerStandalone.tsx
@@ -29,6 +29,7 @@ const messages: ChatMessage[] = Array.from({ length: 5 }, (_, i) => ({
 
 export default function UnreadMarkerStandalone() {
   return (
+    // @focus-start @padding 2
     
     
+    // @focus-end
   );
 }
diff --git a/docs/data/chat/display/unread-marker/demos/unread-marker-standalone/client.ts b/docs/data/chat/display/unread-marker/demos/unread-marker-standalone/client.ts
new file mode 100644
index 0000000000000..c874a2038b3ef
--- /dev/null
+++ b/docs/data/chat/display/unread-marker/demos/unread-marker-standalone/client.ts
@@ -0,0 +1,7 @@
+'use client';
+
+import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient';
+
+const ClientProvider = createDemoClient(import.meta.url);
+
+export default ClientProvider;
diff --git a/docs/data/chat/display/unread-marker/demos/unread-marker-standalone/index.ts b/docs/data/chat/display/unread-marker/demos/unread-marker-standalone/index.ts
new file mode 100644
index 0000000000000..39ff70ef1932a
--- /dev/null
+++ b/docs/data/chat/display/unread-marker/demos/unread-marker-standalone/index.ts
@@ -0,0 +1,6 @@
+import { createDemo } from '@mui/internal-core-docs/utils/createDemo';
+
+import UnreadMarkerStandalone from './UnreadMarkerStandalone';
+import ClientProvider from './client';
+
+export default createDemo(import.meta.url, UnreadMarkerStandalone, { ClientProvider });
diff --git a/docs/data/chat/display/unread-marker/unread-marker.md b/docs/data/chat/display/unread-marker/unread-marker.md
index c6d76fcd479f3..9b3f63d3284b9 100644
--- a/docs/data/chat/display/unread-marker/unread-marker.md
+++ b/docs/data/chat/display/unread-marker/unread-marker.md
@@ -53,7 +53,7 @@ Render it once per message and pass the required `messageId` prop — the compon
 When you pass a custom `renderItem` to `ChatMessageList`, the `features` prop is ignored — including `features.unreadMarker`. Embed `ChatUnreadMarker` inside your `renderItem` as shown below to keep the marker.
 :::
 
-{{"demo": "UnreadMarkerStandalone.js", "bg": "inline"}}
+{{"component": "file://./demos/unread-marker-standalone/index.ts", "bg": "inline"}}
 
 ## Accessibility
 
@@ -67,4 +67,4 @@ For the full keyboard navigation and screen-reader model of the message list, se
 
 The demo below shows the unread marker rendering above the first unread message:
 
-{{"demo": "ChatUnreadMarkerPlayground.js", "bg": "inline", "defaultCodeOpen": false}}
+{{"component": "file://./demos/chat-unread-marker-playground/index.ts", "bg": "inline", "collapseToEmpty": true}}
diff --git a/docs/data/chat/headless/composer/composer.md b/docs/data/chat/headless/composer/composer.md
index 51c399fb38b5a..98ee022f4429f 100644
--- a/docs/data/chat/headless/composer/composer.md
+++ b/docs/data/chat/headless/composer/composer.md
@@ -12,7 +12,7 @@ githubLabel: 'scope: chat'
 
 {{"component": "@mui/internal-core-docs/ComponentLinkHeader"}}
 
-{{"demo": "../examples/composer-with-attachments/ComposerWithAttachments.js", "hideToolbar": true}}
+{{"component": "file://../examples/composer-with-attachments/demos/composer-with-attachments/index.ts", "hideToolbar": true}}
 
 ## Composer primitives
 
diff --git a/docs/data/chat/headless/composition/composition.md b/docs/data/chat/headless/composition/composition.md
index 2b6f8ad56ae10..8b2d2e13ee878 100644
--- a/docs/data/chat/headless/composition/composition.md
+++ b/docs/data/chat/headless/composition/composition.md
@@ -14,7 +14,7 @@ githubLabel: 'scope: chat'
 
 The demo below shows a minimal unstyled chat shell composed from the headless primitives:
 
-{{"demo": "../examples/minimal-shell/MinimalUnstyledShell.js", "hideToolbar": true}}
+{{"component": "file://../examples/minimal-shell/demos/minimal-unstyled-shell/index.ts", "hideToolbar": true}}
 
 The canonical headless shell combines a provider-backed root, pane layout, conversation rail, thread view, message list, and composer:
 
diff --git a/docs/data/chat/headless/conversation-list/conversation-list.md b/docs/data/chat/headless/conversation-list/conversation-list.md
index e9a15341ff9ec..3b86bacf0506c 100644
--- a/docs/data/chat/headless/conversation-list/conversation-list.md
+++ b/docs/data/chat/headless/conversation-list/conversation-list.md
@@ -12,7 +12,7 @@ githubLabel: 'scope: chat'
 
 {{"component": "@mui/internal-core-docs/ComponentLinkHeader"}}
 
-{{"demo": "../examples/two-pane-inbox/TwoPaneInbox.js", "hideToolbar": true}}
+{{"component": "file://../examples/two-pane-inbox/demos/two-pane-inbox/index.ts", "hideToolbar": true}}
 
 ## Conversation list primitives
 
diff --git a/docs/data/chat/headless/customization/customization.md b/docs/data/chat/headless/customization/customization.md
index 420ff964560d4..74327e55debfd 100644
--- a/docs/data/chat/headless/customization/customization.md
+++ b/docs/data/chat/headless/customization/customization.md
@@ -11,7 +11,7 @@ githubLabel: 'scope: chat'
 
 The demo below replaces multiple headless slots in a single surface:
 
-{{"demo": "../examples/slot-customization/SlotCustomization.js", "hideToolbar": true}}
+{{"component": "file://../examples/slot-customization/demos/slot-customization/index.ts", "hideToolbar": true}}
 
 ## Customization model
 
diff --git a/docs/data/chat/headless/examples/chatgpt-style/ChatGptStyleChat.js b/docs/data/chat/headless/examples/chatgpt-style/ChatGptStyleChat.js
deleted file mode 100644
index 40438949f1319..0000000000000
--- a/docs/data/chat/headless/examples/chatgpt-style/ChatGptStyleChat.js
+++ /dev/null
@@ -1,1141 +0,0 @@
-import * as React from 'react';
-import ArchiveOutlinedIcon from '@mui/icons-material/ArchiveOutlined';
-import ArrowUpwardRoundedIcon from '@mui/icons-material/ArrowUpwardRounded';
-import AutoAwesomeOutlinedIcon from '@mui/icons-material/AutoAwesomeOutlined';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
-import DriveFileRenameOutlineOutlinedIcon from '@mui/icons-material/DriveFileRenameOutlineOutlined';
-import IosShareIcon from '@mui/icons-material/IosShare';
-import ManageSearchRoundedIcon from '@mui/icons-material/ManageSearchRounded';
-import MicNoneRoundedIcon from '@mui/icons-material/MicNoneRounded';
-import MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';
-import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
-import {
-  Chat,
-  Conversation,
-  Composer,
-  ConversationList,
-  Message,
-  MessageGroup,
-  MessageList,
-} from '@mui/x-chat/headless';
-
-import {
-  createEchoAdapter,
-  cloneConversations,
-  cloneMessages,
-  syncConversationPreview,
-} from 'docs/data/chat/headless/examples/shared/demoUtils';
-
-// ---------------------------------------------------------------------------
-// ChatGPT-style brand tokens
-// ---------------------------------------------------------------------------
-const gpt = {
-  bg: '#212121',
-  sidebar: '#171717',
-  sidebarHover: '#2f2f2f',
-  sidebarSelected: '#2f2f2f',
-  surface: '#212121',
-  text: '#ececec',
-  textSecondary: '#b4b4b4',
-  textMuted: '#8e8e8e',
-  border: '#2f2f2f',
-  composerBg: '#2f2f2f',
-  composerBorder: '#424242',
-  accent: '#10a37f',
-  userBubble: '#2f2f2f',
-  unreadDot: '#3b82f6',
-};
-
-// ---------------------------------------------------------------------------
-// Demo data
-// ---------------------------------------------------------------------------
-const assistant = {
-  id: 'chatgpt',
-  displayName: 'ChatGPT',
-  avatarUrl: undefined,
-};
-
-const you = {
-  id: 'you',
-  displayName: 'You',
-  avatarUrl: undefined,
-};
-
-const conversations = [
-  {
-    id: 'historical',
-    title: 'Fascinating Historical Figure',
-    subtitle: 'Tell me about a fascinating historical figure',
-    participants: [you, assistant],
-    readState: 'read',
-    unreadCount: 0,
-    lastMessageAt: '2026-03-15T14:00:00.000Z',
-  },
-  {
-    id: 'cooking',
-    title: 'Quick Pasta Recipe',
-    subtitle: 'What is a quick pasta recipe?',
-    participants: [you, assistant],
-    readState: 'unread',
-    unreadCount: 1,
-    lastMessageAt: '2026-03-14T10:00:00.000Z',
-  },
-  {
-    id: 'coding',
-    title: 'React Custom Hooks',
-    subtitle: 'How do I create a custom hook in React?',
-    participants: [you, assistant],
-    readState: 'read',
-    unreadCount: 0,
-    lastMessageAt: '2026-03-13T16:30:00.000Z',
-  },
-];
-
-const allThreads = {
-  historical: [
-    {
-      id: 'h-u1',
-      conversationId: 'historical',
-      role: 'user',
-      status: 'sent',
-      createdAt: '2026-03-15T13:55:00.000Z',
-      author: you,
-      parts: [
-        {
-          type: 'text',
-          text: 'Tell me about a fascinating historical figure that most people have never heard of.',
-        },
-      ],
-    },
-    {
-      id: 'h-a1',
-      conversationId: 'historical',
-      role: 'assistant',
-      status: 'sent',
-      createdAt: '2026-03-15T14:00:00.000Z',
-      author: assistant,
-      parts: [
-        {
-          type: 'reasoning',
-          text: "The user wants someone truly remarkable yet underrecognized.\n\nRamanujan immediately stands out — a self-taught prodigy from rural India who independently discovered thousands of theorems with no formal training. His partnership with Hardy, the taxicab number story, and results still being verified today make him a perfect answer.\n\nI'll highlight the most striking facts: the sheer volume of his work, the Hardy letter, and the 1729 number.",
-          state: 'done',
-        },
-        {
-          type: 'text',
-          text: 'One of history\'s most fascinating yet overlooked figures is **Srinivasa Ramanujan** (1887\u20131920), an Indian mathematician who made extraordinary contributions to number theory, continued fractions, and infinite series.\n\nHere are some remarkable facts about him:\n\n- He had almost no formal training in mathematics, yet independently compiled nearly 3,900 results\n- Many of his theorems were so ahead of their time that mathematicians are still proving them correct today\n- He famously wrote a letter to G.H. Hardy at Cambridge, which Hardy described as "the most remarkable letter I have ever received"\n- The number 1729 is known as the "Hardy-Ramanujan number" \u2014 the smallest number expressible as the sum of two cubes in two different ways',
-        },
-      ],
-    },
-  ],
-  cooking: [
-    {
-      id: 'c-u1',
-      conversationId: 'cooking',
-      role: 'user',
-      status: 'sent',
-      createdAt: '2026-03-14T09:55:00.000Z',
-      author: you,
-      parts: [
-        {
-          type: 'text',
-          text: 'What is a quick pasta recipe I can make in 15 minutes?',
-        },
-      ],
-    },
-    {
-      id: 'c-a1',
-      conversationId: 'cooking',
-      role: 'assistant',
-      status: 'sent',
-      createdAt: '2026-03-14T10:00:00.000Z',
-      author: assistant,
-      parts: [
-        {
-          type: 'text',
-          text: "Here's a quick **Aglio e Olio** recipe:\n\n1. Boil spaghetti in salted water until al dente\n2. Slice 4-5 garlic cloves thinly\n3. Heat olive oil in a pan, saut\u00e9 garlic until golden\n4. Add red pepper flakes to taste\n5. Toss the drained pasta in the garlic oil\n6. Finish with fresh parsley and parmesan\n\nTotal time: about 12 minutes. Simple and delicious!",
-        },
-      ],
-    },
-  ],
-  coding: [
-    {
-      id: 'r-u1',
-      conversationId: 'coding',
-      role: 'user',
-      status: 'sent',
-      createdAt: '2026-03-13T16:25:00.000Z',
-      author: you,
-      parts: [{ type: 'text', text: 'How do I create a custom hook in React?' }],
-    },
-    {
-      id: 'r-a1',
-      conversationId: 'coding',
-      role: 'assistant',
-      status: 'sent',
-      createdAt: '2026-03-13T16:30:00.000Z',
-      author: assistant,
-      parts: [
-        {
-          type: 'dynamic-tool',
-          toolInvocation: {
-            toolCallId: 'tc-search-1',
-            toolName: 'search_docs',
-            title: 'Search React Docs',
-            state: 'output-available',
-            input: { query: 'custom hooks React rules' },
-            output: {
-              results: [
-                'Hook names must start with "use" followed by a capital letter',
-                'Only call hooks at the top level — not inside loops or conditions',
-                'Only call hooks from React function components or other custom hooks',
-              ],
-            },
-          },
-        },
-        {
-          type: 'text',
-          text: "A custom hook is just a JavaScript function whose name starts with `use` and that can call other hooks.\n\nHere's a simple example:\n\n```tsx\nfunction useWindowWidth() {\n  const [width, setWidth] = React.useState(window.innerWidth);\n\n  React.useEffect(() => {\n    const handleResize = () => setWidth(window.innerWidth);\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return width;\n}\n```\n\nKey rules:\n- Always prefix with `use`\n- Only call hooks at the top level\n- Only call hooks from React functions",
-        },
-      ],
-    },
-  ],
-};
-
-// ---------------------------------------------------------------------------
-// 3-dot dropdown menu
-// ---------------------------------------------------------------------------
-function ConversationMenu({ anchorEl, onClose }) {
-  if (!anchorEl) {
-    return null;
-  }
-
-  const rect = anchorEl.getBoundingClientRect();
-  const menuItems = [
-    { icon: , label: 'Share' },
-    {
-      icon: ,
-      label: 'Rename',
-    },
-    { icon: , label: 'Pin chat' },
-    { icon: , label: 'Archive' },
-    {
-      icon: ,
-      label: 'Delete',
-      color: '#ef4444',
-    },
-  ];
-
-  return (
-    
-      {/* Backdrop */}
-      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-      

-      {/* Menu */}
-      

-        {menuItems.map((item) => (
-          
-        ))}
-      

-    
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Slot components — Sidebar
-// ---------------------------------------------------------------------------
-const GptConversationItem = React.forwardRef(
-  function GptConversationItem(props, ref) {
-    const {
-      children,
-      ownerState,
-      conversation,
-      selected,
-      unread,
-      focused,
-      style,
-      ...other
-    } = props;
-    const [hovered, setHovered] = React.useState(false);
-    const [menuAnchor, setMenuAnchor] = React.useState(null);
-    const hasUnread = conversation?.unreadCount
-      ? conversation.unreadCount > 0
-      : false;
-
-    return (
-      
-        
 setHovered(true)}
-          onMouseLeave={() => setHovered(false)}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 8,
-            padding: '6px 8px',
-            borderRadius: 8,
-            background: (() => {
-              if (ownerState?.selected) {
-                return gpt.sidebarSelected;
-              }
-              if (hovered) {
-                return gpt.sidebarHover;
-              }
-              return 'transparent';
-            })(),
-            color: gpt.text,
-            fontSize: 14,
-            cursor: 'pointer',
-            position: 'relative',
-            ...style,
-          }}
-          {...other}
-        >
-          {children}
-          {/* Unread dot */}
-          {hasUnread && !ownerState?.selected ? (
-            
-          ) : null}
-          {/* 3-dot menu button on hover */}
-          {hovered ? (
-            
-          ) : null}
-        

-         setMenuAnchor(null)}
-        />
-      
-    );
-  },
-);
-
-const GptConversationAvatar = React.forwardRef(
-  function GptConversationAvatar(props, ref) {
-    const { ownerState, conversation, selected, unread, focused, style, ...other } =
-      props;
-    return 
;
-  },
-);
-
-const GptConversationTitle = React.forwardRef(
-  function GptConversationTitle(props, ref) {
-    const { conversation, ownerState, selected, unread, focused, style, ...other } =
-      props;
-    return (
-      

-        {conversation?.title}
-      

-    );
-  },
-);
-
-const GptConversationPreview = React.forwardRef(
-  function GptConversationPreview(props, ref) {
-    const { ownerState, conversation, selected, unread, focused, ...other } = props;
-    return 
;
-  },
-);
-
-const GptConversationTimestamp = React.forwardRef(
-  function GptConversationTimestamp(props, ref) {
-    const { ownerState, conversation, selected, unread, focused, ...other } = props;
-    return 
;
-  },
-);
-
-const GptConversationUnreadBadge = React.forwardRef(
-  function GptConversationUnreadBadge(props, ref) {
-    const { ownerState, conversation, selected, unread, focused, ...other } = props;
-    return ;
-  },
-);
-
-// ---------------------------------------------------------------------------
-// Slot components — Messages
-// ---------------------------------------------------------------------------
-const GptMessageGroup = React.forwardRef(function GptMessageGroup(props, ref) {
-  const { children, ownerState, style, ...other } = props;
-  return (
-    

-      {children}
-    

-  );
-});
-
-// Hide author name completely
-const GptAuthorName = React.forwardRef(function GptAuthorName(props, ref) {
-  const { children, ownerState, style, ...other } = props;
-  return 
;
-});
-
-const GptMessageRoot = React.forwardRef(function GptMessageRoot(props, ref) {
-  const { children, ownerState, style, ...other } = props;
-  const isUser = ownerState?.role === 'user';
-
-  return (
-    

-      {children}
-    

-  );
-});
-
-// Avatar: show only for assistant (ChatGPT sparkle icon), hide for user
-const GptAvatar = React.forwardRef(function GptAvatar(props, ref) {
-  const { ownerState, children, style, ...other } = props;
-
-  return 
;
-});
-
-// Bubble: user gets a rounded bubble, assistant gets flat text
-const GptBubble = React.forwardRef(function GptBubble(props, ref) {
-  const { children, ownerState, style, ...other } = props;
-  const isUser = ownerState?.role === 'user';
-
-  return (
-    

-      {children}
-    

-  );
-});
-
-// Hide timestamps
-const GptMeta = React.forwardRef(function GptMeta(props, ref) {
-  const { ownerState, style, ...other } = props;
-  return 
;
-});
-
-// ---------------------------------------------------------------------------
-// Slot components — Reasoning (thinking block)
-// ---------------------------------------------------------------------------
-const GptReasoningRoot = React.forwardRef(function GptReasoningRoot(props, ref) {
-  const { ownerState, style, ...other } = props;
-  return (
-    

-  );
-});
-
-const GptReasoningSummary = React.forwardRef(
-  function GptReasoningSummary(props, ref) {
-    const { ownerState, children, style, ...other } = props;
-    return (
-      
-        
-        {children}
-      
-    );
-  },
-);
-
-const GptReasoningContent = React.forwardRef(
-  function GptReasoningContent(props, ref) {
-    const { ownerState, style, ...other } = props;
-    return (
-      

-    );
-  },
-);
-
-// ---------------------------------------------------------------------------
-// Slot components — Tool call block
-// ---------------------------------------------------------------------------
-const GptToolRoot = React.forwardRef(function GptToolRoot(props, ref) {
-  const { ownerState, style, ...other } = props;
-  return (
-    

-  );
-});
-
-const GptToolHeader = React.forwardRef(function GptToolHeader(props, ref) {
-  const { ownerState, style, ...other } = props;
-  return (
-    

-  );
-});
-
-const GptToolTitle = React.forwardRef(function GptToolTitle(props, ref) {
-  const { ownerState, children, style, ...other } = props;
-  return (
-    

-      
-      {children}
-    

-  );
-});
-
-const GptToolState = React.forwardRef(function GptToolState(props, ref) {
-  const { ownerState, style, ...other } = props;
-  const isDone = ownerState?.state === 'output-available';
-  return (
-    
-      {isDone ?  : null}
-    
-  );
-});
-
-const GptToolSection = React.forwardRef(function GptToolSection(props, ref) {
-  const { ownerState, style, ...other } = props;
-  return (
-    

-  );
-});
-
-const GptToolSectionContent = React.forwardRef(
-  function GptToolSectionContent(props, ref) {
-    const { ownerState, style, ...other } = props;
-    return (
-      
-    );
-  },
-);
-
-// ---------------------------------------------------------------------------
-// Slot components — Composer
-// ---------------------------------------------------------------------------
-const GptComposerRoot = React.forwardRef(function GptComposerRoot(props, ref) {
-  const { children, ownerState, style, ...other } = props;
-  return (
-    
-      {children}
-    
-  );
-});
-
-const GptTextArea = React.forwardRef(function GptTextArea(props, ref) {
-  const { ownerState, style, ...other } = props;
-  return (
-