diff --git a/docs/data/charts/styling/GradientTooltip.js b/docs/data/charts/styling/GradientTooltip.js index 91d3f04fdbacd..b18e442dbaa09 100644 --- a/docs/data/charts/styling/GradientTooltip.js +++ b/docs/data/charts/styling/GradientTooltip.js @@ -4,34 +4,40 @@ import { BarChart } from '@mui/x-charts/BarChart'; export default function GradientTooltip() { return ( - + + + + + ); } diff --git a/docs/data/charts/styling/GradientTooltip.tsx b/docs/data/charts/styling/GradientTooltip.tsx index 91d3f04fdbacd..b18e442dbaa09 100644 --- a/docs/data/charts/styling/GradientTooltip.tsx +++ b/docs/data/charts/styling/GradientTooltip.tsx @@ -4,34 +4,40 @@ import { BarChart } from '@mui/x-charts/BarChart'; export default function GradientTooltip() { return ( - + + + + + ); } diff --git a/docs/data/charts/styling/PatternPie.js b/docs/data/charts/styling/PatternPie.js deleted file mode 100644 index 8749891afa008..0000000000000 --- a/docs/data/charts/styling/PatternPie.js +++ /dev/null @@ -1,47 +0,0 @@ -import * as React from 'react'; -import { PieChart } from '@mui/x-charts/PieChart'; -import { Stack } from '@mui/system'; - -export default function PatternPie() { - return ( - - - - - - - - - ); -} diff --git a/docs/data/charts/styling/PatternPie.tsx b/docs/data/charts/styling/PatternPie.tsx deleted file mode 100644 index 8749891afa008..0000000000000 --- a/docs/data/charts/styling/PatternPie.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import * as React from 'react'; -import { PieChart } from '@mui/x-charts/PieChart'; -import { Stack } from '@mui/system'; - -export default function PatternPie() { - return ( - - - - - - - - - ); -} diff --git a/docs/data/charts/styling/styling.md b/docs/data/charts/styling/styling.md index fc64c9cb923d9..6ec9ede685dcb 100644 --- a/docs/data/charts/styling/styling.md +++ b/docs/data/charts/styling/styling.md @@ -171,15 +171,6 @@ It is possible to use gradients and patterns to fill the charts. This can be done by passing your gradient or pattern definition as children of the chart component. Note that the gradient or pattern defined that way is only usable for SVG. -So a direct definition like `color: "url(#Pattern)'` would cause undefined colors in HTML elements such as the tooltip. -The demo solves this issue by using a CSS variable `'--my-custom-pattern': 'url(#Pattern)'` to specify fallback color with `color: 'var(--my-custom-pattern, #123456)'`. - -{{"demo": "PatternPie.js"}} - -#### Using gradients on tooltips - -Gradients defined as SVG elements are not directly supported in HTML. -However you can use the [gradient functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#gradient_functions) to define a gradient in CSS. -This gradient can be used in the tooltip by setting the `sx` prop on the tooltip component, instead of the fallback color used in the previous examples. +So a direct definition like `color: "url(#Pattern)'` would cause undefined colors in HTML elements. {{"demo": "GradientTooltip.js"}} diff --git a/docs/data/charts/tooltip/CustomAxisTooltip.js b/docs/data/charts/tooltip/CustomAxisTooltip.js index 9689757aa66a9..34e877e571616 100644 --- a/docs/data/charts/tooltip/CustomAxisTooltip.js +++ b/docs/data/charts/tooltip/CustomAxisTooltip.js @@ -28,11 +28,11 @@ export function CustomAxisTooltip() { }, }, tbody: { - 'tr:first-child': { td: { paddingTop: 1.5 } }, - 'tr:last-child': { td: { paddingBottom: 1.5 } }, + 'tr:first-of-type': { td: { paddingTop: 1.5 } }, + 'tr:last-of-type': { td: { paddingBottom: 1.5 } }, tr: { - 'td:first-child': { paddingLeft: 1.5 }, - 'td:last-child': { paddingRight: 1.5 }, + 'td:first-of-type': { paddingLeft: 1.5 }, + 'td:last-of-type': { paddingRight: 1.5 }, td: { paddingRight: '7px', paddingBottom: '10px', diff --git a/docs/data/charts/tooltip/CustomAxisTooltip.tsx b/docs/data/charts/tooltip/CustomAxisTooltip.tsx index 9689757aa66a9..34e877e571616 100644 --- a/docs/data/charts/tooltip/CustomAxisTooltip.tsx +++ b/docs/data/charts/tooltip/CustomAxisTooltip.tsx @@ -28,11 +28,11 @@ export function CustomAxisTooltip() { }, }, tbody: { - 'tr:first-child': { td: { paddingTop: 1.5 } }, - 'tr:last-child': { td: { paddingBottom: 1.5 } }, + 'tr:first-of-type': { td: { paddingTop: 1.5 } }, + 'tr:last-of-type': { td: { paddingBottom: 1.5 } }, tr: { - 'td:first-child': { paddingLeft: 1.5 }, - 'td:last-child': { paddingRight: 1.5 }, + 'td:first-of-type': { paddingLeft: 1.5 }, + 'td:last-of-type': { paddingRight: 1.5 }, td: { paddingRight: '7px', paddingBottom: '10px', diff --git a/docs/data/charts/tooltip/ItemTooltipFixedY.js b/docs/data/charts/tooltip/ItemTooltipFixedY.js index 93f94d31c0e80..42d45c9576292 100644 --- a/docs/data/charts/tooltip/ItemTooltipFixedY.js +++ b/docs/data/charts/tooltip/ItemTooltipFixedY.js @@ -67,7 +67,7 @@ export function ItemTooltipFixedY({ children }) { const handleMove = (event) => { positionRef.current = { x: event.clientX, - y: event.clientY, + y: (svgRef.current?.getBoundingClientRect().top ?? 0) + drawingArea.top, }; popperRef.current?.update(); }; @@ -99,8 +99,8 @@ export function ItemTooltipFixedY({ children }) { y: positionRef.current.y, top: positionRef.current.y, left: positionRef.current.x, - right: positionRef.current.x, - bottom: positionRef.current.y, + right: 0, + bottom: 0, width: 0, height: 0, toJSON: () => '', diff --git a/docs/data/charts/tooltip/ItemTooltipFixedY.tsx b/docs/data/charts/tooltip/ItemTooltipFixedY.tsx index 70c7bf29ec7db..84dcb6f7e7740 100644 --- a/docs/data/charts/tooltip/ItemTooltipFixedY.tsx +++ b/docs/data/charts/tooltip/ItemTooltipFixedY.tsx @@ -73,7 +73,7 @@ export function ItemTooltipFixedY({ children }: React.PropsWithChildren) { const handleMove = (event: PointerEvent) => { positionRef.current = { x: event.clientX, - y: event.clientY, + y: (svgRef.current?.getBoundingClientRect().top ?? 0) + drawingArea.top, }; popperRef.current?.update(); }; @@ -105,8 +105,8 @@ export function ItemTooltipFixedY({ children }: React.PropsWithChildren) { y: positionRef.current.y, top: positionRef.current.y, left: positionRef.current.x, - right: positionRef.current.x, - bottom: positionRef.current.y, + right: 0, + bottom: 0, width: 0, height: 0, toJSON: () => '', diff --git a/packages/x-charts-pro/src/Heatmap/HeatmapTooltip.tsx b/packages/x-charts-pro/src/Heatmap/HeatmapTooltip.tsx index 58d00b0fd093c..bce80b58c67ae 100644 --- a/packages/x-charts-pro/src/Heatmap/HeatmapTooltip.tsx +++ b/packages/x-charts-pro/src/Heatmap/HeatmapTooltip.tsx @@ -9,14 +9,13 @@ import { ChartsTooltipTable, ChartsTooltipRow, ChartsTooltipCell, - ChartsTooltipMark, useItemTooltip, ChartsTooltipContainerProps, getChartsTooltipUtilityClass, ChartsTooltipContainer, } from '@mui/x-charts/ChartsTooltip'; import { useXAxis, useYAxis } from '@mui/x-charts/hooks'; -import { getLabel } from '@mui/x-charts/internals'; +import { getLabel, ChartsLabelMark } from '@mui/x-charts/internals'; import { useHeatmapSeries } from '../hooks/useSeries'; export interface HeatmapTooltipProps @@ -56,7 +55,7 @@ function DefaultHeatmapTooltipContent(props: Pick - + {seriesLabel} diff --git a/packages/x-charts-pro/src/Heatmap/formatter.ts b/packages/x-charts-pro/src/Heatmap/formatter.ts index 26fa5f2b2c1fc..bf9e042b1802a 100644 --- a/packages/x-charts-pro/src/Heatmap/formatter.ts +++ b/packages/x-charts-pro/src/Heatmap/formatter.ts @@ -10,6 +10,7 @@ const formatter: SeriesFormatter<'heatmap'> = (params) => { // Defaultize the data and the value formatter. valueFormatter: (v) => v[2].toString(), data: [], + labelMarkType: 'square', ...series[seriesId], }; }); diff --git a/packages/x-charts/src/BarChart/formatter.ts b/packages/x-charts/src/BarChart/formatter.ts index 64175e646d303..4c11a1ab32c5e 100644 --- a/packages/x-charts/src/BarChart/formatter.ts +++ b/packages/x-charts/src/BarChart/formatter.ts @@ -57,6 +57,7 @@ const formatter: SeriesFormatter<'bar'> = (params, dataset) => { const dataKey = series[id].dataKey; completedSeries[id] = { layout: 'vertical', + labelMarkType: 'square', ...series[id], data: dataKey ? dataset!.map((data) => { diff --git a/packages/x-charts/src/BarChart/legend.ts b/packages/x-charts/src/BarChart/legend.ts index 254e34c6a1170..5108b5646c50d 100644 --- a/packages/x-charts/src/BarChart/legend.ts +++ b/packages/x-charts/src/BarChart/legend.ts @@ -12,7 +12,7 @@ const legendGetter: LegendGetter<'bar'> = (params) => { } acc.push({ - markType: series[seriesId].labelMarkType ?? 'square', + markType: series[seriesId].labelMarkType, id: seriesId, seriesId, color: series[seriesId].color, diff --git a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx index 6af034904d1ac..d28f6f3c96bd1 100644 --- a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx @@ -7,13 +7,13 @@ import clsx from 'clsx'; import { ChartsTooltipClasses, useUtilityClasses } from './chartsTooltipClasses'; import { ChartsTooltipCell, - ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable, } from './ChartsTooltipTable'; import { useAxisTooltip } from './useAxisTooltip'; import { useXAxis, useYAxis } from '../hooks'; +import { ChartsLabelMark } from '../ChartsLabel/ChartsLabelMark'; export interface ChartsAxisTooltipContentProps { /** @@ -53,14 +53,16 @@ function ChartsAxisTooltipContent(props: ChartsAxisTooltipContentProps) { )} - {seriesItems.map(({ seriesId, color, formattedValue, formattedLabel }) => { + {seriesItems.map(({ seriesId, color, formattedValue, formattedLabel, markType }) => { if (formattedValue == null) { return null; } return ( - {color && } + {color && ( + + )} {formattedLabel ? {formattedLabel} : null} diff --git a/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx index fc2b33395c150..ce6424b6d0b2f 100644 --- a/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx @@ -7,11 +7,11 @@ import { ChartsTooltipClasses, useUtilityClasses } from './chartsTooltipClasses' import { useItemTooltip } from './useItemTooltip'; import { ChartsTooltipCell, - ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable, } from './ChartsTooltipTable'; +import { ChartsLabelMark } from '../ChartsLabel/ChartsLabelMark'; export interface ChartsItemTooltipContentProps { /** @@ -30,7 +30,7 @@ function ChartsItemTooltipContent(props: ChartsItemTooltipContentProps) { if (!tooltipData) { return null; } - const { color, label, formattedValue } = tooltipData; + const { color, label, formattedValue, markType } = tooltipData; return ( @@ -38,7 +38,7 @@ function ChartsItemTooltipContent(props: ChartsItemTooltipContentProps) { - + {label} diff --git a/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts b/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts index 2569dd7b07d42..eaed72a237076 100644 --- a/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts +++ b/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts @@ -1,5 +1,4 @@ import { styled } from '@mui/material/styles'; -import { shouldForwardProp } from '@mui/system/createStyled'; import { chartsTooltipClasses } from './chartsTooltipClasses'; /** @@ -77,19 +76,3 @@ export const ChartsTooltipCell = styled('td', { paddingRight: theme.spacing(1.5), }, })); - -/** - * @ignore - internal component. - */ -export const ChartsTooltipMark = styled('div', { - name: 'MuiChartsTooltip', - slot: 'Mark', - overridesResolver: (props, styles) => styles.mark, - shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'color', -})<{ color: string }>(({ theme, color }) => ({ - width: theme.spacing(1), - height: theme.spacing(1), - borderRadius: '50%', - background: color, - boxSizing: 'content-box', -})); diff --git a/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx b/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx index 6bd94c3d615a4..54c30d370f306 100644 --- a/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx +++ b/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx @@ -15,6 +15,7 @@ import { selectorChartsInteractionXAxis, selectorChartsInteractionYAxis, } from '../internals/plugins/featurePlugins/useChartInteraction'; +import { ChartsLabelMarkProps } from '../ChartsLabel'; export interface UseAxisTooltipReturnValue< SeriesT extends CartesianChartSeriesType = CartesianChartSeriesType, @@ -33,9 +34,10 @@ interface SeriesItem { value: ChartsSeriesConfig[T]['valueType']; formattedValue: string; formattedLabel: string | null; + markType: ChartsLabelMarkProps['type']; } -export function useAxisTooltip(): null | UseAxisTooltipReturnValue { +export function useAxisTooltip(): UseAxisTooltipReturnValue | null { const defaultXAxis = useXAxis(); const defaultYAxis = useYAxis(); @@ -104,12 +106,17 @@ export function useAxisTooltip(): null | UseAxisTooltipReturnValue { value, formattedValue, formattedLabel, - } as SeriesItem; + markType: seriesToAdd.labelMarkType, + }; } return undefined; }); }) - .filter((item) => item != null); + .filter(function truthy( + item: T, + ): item is T extends false | '' | 0 | null | undefined ? never : T { + return Boolean(item); + }); const axisFormatter = usedAxis.valueFormatter ?? diff --git a/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx b/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx index 921a6ff86790b..2a607943c22ee 100644 --- a/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx +++ b/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx @@ -9,18 +9,19 @@ import { ChartsSeriesConfig, } from '../models/seriesType/config'; import { getLabel } from '../internals/getLabel'; -import { CommonSeriesType } from '../models/seriesType/common'; import { selectorChartsInteractionItem } from '../internals/plugins/featurePlugins/useChartInteraction'; import { useSelector } from '../internals/store/useSelector'; import { useStore } from '../internals/store/useStore'; import { useZAxis } from '../hooks/useZAxis'; +import { ChartsLabelMarkProps } from '../ChartsLabel'; export interface UseItemTooltipReturnValue { identifier: ChartItemIdentifier; color: string; label: string | undefined; value: ChartsSeriesConfig[T]['valueType']; - formattedValue: string | undefined; + formattedValue: string | null; + markType: ChartsLabelMarkProps['type']; } export function useItemTooltip(): null | UseItemTooltipReturnValue { @@ -54,30 +55,28 @@ export function useItemTooltip(): null | UseItemToolt const point = itemSeries.data[item.dataIndex]; const label = getLabel(point.label, 'tooltip'); const value = { ...point, label }; - const formattedValue = ( - itemSeries.valueFormatter as CommonSeriesType['valueFormatter'] - )?.(value, { dataIndex: item.dataIndex }); + const formattedValue = itemSeries.valueFormatter(value, { dataIndex: item.dataIndex }); return { - identifier: item as ChartItemIdentifier, + identifier: item, color: getColor(item.dataIndex), label, value, formattedValue, - } as UseItemTooltipReturnValue; + markType: point.labelMarkType ?? itemSeries.labelMarkType, + }; } const label = getLabel(itemSeries.label, 'tooltip'); const value = itemSeries.data[item.dataIndex]; - const formattedValue = ( - itemSeries.valueFormatter as CommonSeriesType['valueFormatter'] - )?.(value, { dataIndex: item.dataIndex }); + const formattedValue = itemSeries.valueFormatter(value as any, { dataIndex: item.dataIndex }); return { - identifier: item as ChartItemIdentifier, + identifier: item, color: getColor(item.dataIndex), label, value, formattedValue, - } as UseItemTooltipReturnValue; + markType: itemSeries.labelMarkType, + }; } diff --git a/packages/x-charts/src/LineChart/formatter.ts b/packages/x-charts/src/LineChart/formatter.ts index 9364ed579e3e5..dc7d6b51fd4c4 100644 --- a/packages/x-charts/src/LineChart/formatter.ts +++ b/packages/x-charts/src/LineChart/formatter.ts @@ -54,6 +54,7 @@ const formatter: SeriesFormatter<'line'> = (params, dataset) => { ids.forEach((id, index) => { const dataKey = series[id].dataKey; completedSeries[id] = { + labelMarkType: 'line', ...series[id], data: dataKey ? dataset!.map((data) => { diff --git a/packages/x-charts/src/LineChart/legend.ts b/packages/x-charts/src/LineChart/legend.ts index 0dcd25e97ae22..53285208b1972 100644 --- a/packages/x-charts/src/LineChart/legend.ts +++ b/packages/x-charts/src/LineChart/legend.ts @@ -12,7 +12,7 @@ const legendGetter: LegendGetter<'line'> = (params) => { } acc.push({ - markType: series[seriesId].labelMarkType ?? 'line', + markType: series[seriesId].labelMarkType, id: seriesId, seriesId, color: series[seriesId].color, diff --git a/packages/x-charts/src/PieChart/formatter.ts b/packages/x-charts/src/PieChart/formatter.ts index a8c46b2e369bd..ee788b4e89bd2 100644 --- a/packages/x-charts/src/PieChart/formatter.ts +++ b/packages/x-charts/src/PieChart/formatter.ts @@ -34,6 +34,7 @@ const formatter: SeriesFormatter<'pie'> = (params) => { series[seriesId].data.map((piePoint) => piePoint.value), ); defaultizedSeries[seriesId] = { + labelMarkType: 'circle', valueFormatter: (item: PieValueType) => item.value.toLocaleString(), ...series[seriesId], data: series[seriesId].data @@ -43,6 +44,7 @@ const formatter: SeriesFormatter<'pie'> = (params) => { ...arcs[index], })) .map((item, index) => ({ + labelMarkType: 'circle', ...item, formattedValue: series[seriesId].valueFormatter?.( diff --git a/packages/x-charts/src/PieChart/legend.ts b/packages/x-charts/src/PieChart/legend.ts index 89ed3254d4f6b..ee963cee47f50 100644 --- a/packages/x-charts/src/PieChart/legend.ts +++ b/packages/x-charts/src/PieChart/legend.ts @@ -13,7 +13,7 @@ const legendGetter: LegendGetter<'pie'> = (params) => { } acc.push({ - markType: item.labelMarkType ?? series[seriesId].labelMarkType ?? 'circle', + markType: series[seriesId].labelMarkType, id: item.id, seriesId, color: item.color, diff --git a/packages/x-charts/src/ScatterChart/formatter.ts b/packages/x-charts/src/ScatterChart/formatter.ts index 8095e099c38b5..62c9cfaf07466 100644 --- a/packages/x-charts/src/ScatterChart/formatter.ts +++ b/packages/x-charts/src/ScatterChart/formatter.ts @@ -33,6 +33,7 @@ const formatter: SeriesFormatter<'scatter'> = ({ series, seriesOrder }, dataset) return [ seriesId, { + labelMarkType: 'circle' as const, ...seriesData, data, valueFormatter: seriesData.valueFormatter ?? ((v) => v && `(${v.x}, ${v.y})`), diff --git a/packages/x-charts/src/ScatterChart/legend.ts b/packages/x-charts/src/ScatterChart/legend.ts index c08d7e9bd5a65..544704d8bffaf 100644 --- a/packages/x-charts/src/ScatterChart/legend.ts +++ b/packages/x-charts/src/ScatterChart/legend.ts @@ -12,7 +12,7 @@ const legendGetter: LegendGetter<'scatter'> = (params) => { } acc.push({ - markType: series[seriesId].labelMarkType ?? 'circle', + markType: series[seriesId].labelMarkType, id: seriesId, seriesId, color: series[seriesId].color, diff --git a/packages/x-charts/src/internals/index.ts b/packages/x-charts/src/internals/index.ts index 93f32cab9e1e9..5ddd304311505 100644 --- a/packages/x-charts/src/internals/index.ts +++ b/packages/x-charts/src/internals/index.ts @@ -1,6 +1,7 @@ // Components export * from './components/ChartsAxesGradients'; export * from './components/ChartsWrapper'; +export * from '../ChartsLabel/ChartsLabelMark'; // hooks export { useSeries } from '../hooks/useSeries'; diff --git a/scripts/x-charts-pro.exports.json b/scripts/x-charts-pro.exports.json index fcd6d9d961a59..10d95e8c43190 100644 --- a/scripts/x-charts-pro.exports.json +++ b/scripts/x-charts-pro.exports.json @@ -107,7 +107,6 @@ { "name": "ChartsTooltipClassKey", "kind": "TypeAlias" }, { "name": "ChartsTooltipContainer", "kind": "Function" }, { "name": "ChartsTooltipContainerProps", "kind": "Interface" }, - { "name": "ChartsTooltipMark", "kind": "Variable" }, { "name": "ChartsTooltipPaper", "kind": "Variable" }, { "name": "ChartsTooltipProps", "kind": "Interface" }, { "name": "ChartsTooltipRow", "kind": "Variable" }, diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json index 9ef2b3170bc35..052ac9be288c8 100644 --- a/scripts/x-charts.exports.json +++ b/scripts/x-charts.exports.json @@ -109,7 +109,6 @@ { "name": "ChartsTooltipClassKey", "kind": "TypeAlias" }, { "name": "ChartsTooltipContainer", "kind": "Function" }, { "name": "ChartsTooltipContainerProps", "kind": "Interface" }, - { "name": "ChartsTooltipMark", "kind": "Variable" }, { "name": "ChartsTooltipPaper", "kind": "Variable" }, { "name": "ChartsTooltipProps", "kind": "Interface" }, { "name": "ChartsTooltipRow", "kind": "Variable" },