From 9c2224f430626d90f3dfe09e4c2cfc2cd1c05226 Mon Sep 17 00:00:00 2001 From: Jose C Quintas Jr Date: Fri, 10 Jan 2025 16:24:43 +0100 Subject: [PATCH] [charts] Replace tooltip mark with style (#16117) --- docs/data/charts/styling/GradientTooltip.js | 30 +++++++----- docs/data/charts/styling/GradientTooltip.tsx | 30 +++++++----- docs/data/charts/styling/PatternPie.js | 47 ------------------- docs/data/charts/styling/PatternPie.tsx | 47 ------------------- docs/data/charts/styling/styling.md | 11 +---- docs/data/charts/tooltip/CustomAxisTooltip.js | 8 ++-- .../data/charts/tooltip/CustomAxisTooltip.tsx | 8 ++-- docs/data/charts/tooltip/ItemTooltipFixedY.js | 6 +-- .../data/charts/tooltip/ItemTooltipFixedY.tsx | 6 +-- .../src/Heatmap/HeatmapTooltip.tsx | 7 ++- .../x-charts-pro/src/Heatmap/formatter.ts | 1 + packages/x-charts/src/BarChart/formatter.ts | 1 + packages/x-charts/src/BarChart/legend.ts | 2 +- .../ChartsAxisTooltipContent.tsx | 8 ++-- .../ChartsItemTooltipContent.tsx | 6 +-- .../src/ChartsTooltip/ChartsTooltipTable.ts | 17 ------- .../src/ChartsTooltip/useAxisTooltip.tsx | 13 +++-- .../src/ChartsTooltip/useItemTooltip.tsx | 23 +++++---- packages/x-charts/src/LineChart/formatter.ts | 1 + packages/x-charts/src/LineChart/legend.ts | 2 +- packages/x-charts/src/PieChart/formatter.ts | 2 + packages/x-charts/src/PieChart/legend.ts | 2 +- .../x-charts/src/ScatterChart/formatter.ts | 1 + packages/x-charts/src/ScatterChart/legend.ts | 2 +- packages/x-charts/src/internals/index.ts | 1 + scripts/x-charts-pro.exports.json | 1 - scripts/x-charts.exports.json | 1 - 27 files changed, 94 insertions(+), 190 deletions(-) delete mode 100644 docs/data/charts/styling/PatternPie.js delete mode 100644 docs/data/charts/styling/PatternPie.tsx 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 8cad5a7cc17e5..5fb53bfc4b049 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: SeriesProcessor<'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 6e6ab02fbc84c..43724a34e4600 100644 --- a/packages/x-charts/src/BarChart/formatter.ts +++ b/packages/x-charts/src/BarChart/formatter.ts @@ -57,6 +57,7 @@ const formatter: SeriesProcessor<'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 fc2a4cbd0a8d5..894abc6c3adf5 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 72be7e14a751f..0004b28032981 100644 --- a/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx +++ b/packages/x-charts/src/ChartsTooltip/useAxisTooltip.tsx @@ -14,6 +14,7 @@ import { selectorChartsInteractionXAxis, selectorChartsInteractionYAxis, } from '../internals/plugins/featurePlugins/useChartInteraction'; +import { ChartsLabelMarkProps } from '../ChartsLabel'; export interface UseAxisTooltipReturnValue< SeriesT extends CartesianChartSeriesType = CartesianChartSeriesType, @@ -32,9 +33,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 ed58a96bbd385..885856da21b0c 100644 --- a/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx +++ b/packages/x-charts/src/ChartsTooltip/useItemTooltip.tsx @@ -8,19 +8,20 @@ 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 { useXAxes, useYAxes } from '../hooks'; 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 { @@ -55,30 +56,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 8d4ead32d190d..74ffe97235102 100644 --- a/packages/x-charts/src/LineChart/formatter.ts +++ b/packages/x-charts/src/LineChart/formatter.ts @@ -54,6 +54,7 @@ const formatter: SeriesProcessor<'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 6cc33a2a8f03b..48fcc054aab99 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 22df52087fdbb..9913d835b4fdf 100644 --- a/packages/x-charts/src/PieChart/formatter.ts +++ b/packages/x-charts/src/PieChart/formatter.ts @@ -34,6 +34,7 @@ const formatter: SeriesProcessor<'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: SeriesProcessor<'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 b574d5f7aaa1d..ac986d5593e4c 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 c80e45eff6c84..fb1af114026f0 100644 --- a/packages/x-charts/src/ScatterChart/formatter.ts +++ b/packages/x-charts/src/ScatterChart/formatter.ts @@ -33,6 +33,7 @@ const formatter: SeriesProcessor<'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 0b29810f318bf..8355e894b8043 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 f72adf88b2586..8b08bc54f2691 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 f15263aae4eb2..861893ba3bb69 100644 --- a/scripts/x-charts-pro.exports.json +++ b/scripts/x-charts-pro.exports.json @@ -108,7 +108,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 dc7f6b28e7fde..2749f317484ce 100644 --- a/scripts/x-charts.exports.json +++ b/scripts/x-charts.exports.json @@ -110,7 +110,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" },