[charts] Replace tooltip mark with style (#16117)

mui · Jan 10, 2025 · 9c2224f · 9c2224f
1 parent 7d5dd73
commit 9c2224f
Show file tree

Hide file tree

Showing 27 changed files with 94 additions and 190 deletions.
diff --git 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 (
     <BarChart
-      sx={{
-        '--my-custom-gradient': 'url(#GlobalGradient)',
-      }}
-      slotProps={{
-        tooltip: {
-          sx: {
-            '--my-custom-gradient': 'linear-gradient(0deg, #123456, #81b2e4);',
-          },
-        },
-      }}
       series={[
         {
           label: 'series A',
           data: [50],
+          color: 'url(#Pattern)',
         },
         {
           label: 'series B',
           data: [100],
-          color: 'var(--my-custom-gradient, #123456)',
+          color: 'url(#Gradient)',
         },
       ]}
       width={400}
       height={200}
     >
-      <linearGradient id="GlobalGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+      <linearGradient id="Gradient" x1="0%" y1="100%" x2="0%" y2="0%">
         <stop offset="0" stopColor="#123456" />
         <stop offset="1" stopColor="#81b2e4" />
       </linearGradient>
+      <pattern
+        id="Pattern"
+        patternUnits="userSpaceOnUse"
+        width="20"
+        height="40"
+        patternTransform="scale(0.5)"
+      >
+        <rect x="0" y="0" width="100%" height="100%" fill="#123456" />
+        <path
+          d="M0 30h20L10 50zm-10-20h20L0 30zm20 0h20L20 30zM0-10h20L10 10z"
+          strokeWidth="1"
+          stroke="#81b2e4"
+          fill="none"
+        />
+      </pattern>
     </BarChart>
   );
 }
diff --git 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 (
     <BarChart
-      sx={{
-        '--my-custom-gradient': 'url(#GlobalGradient)',
-      }}
-      slotProps={{
-        tooltip: {
-          sx: {
-            '--my-custom-gradient': 'linear-gradient(0deg, #123456, #81b2e4);',
-          },
-        },
-      }}
       series={[
         {
           label: 'series A',
           data: [50],
+          color: 'url(#Pattern)',
         },
         {
           label: 'series B',
           data: [100],
-          color: 'var(--my-custom-gradient, #123456)',
+          color: 'url(#Gradient)',
         },
       ]}
       width={400}
       height={200}
     >
-      <linearGradient id="GlobalGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+      <linearGradient id="Gradient" x1="0%" y1="100%" x2="0%" y2="0%">
         <stop offset="0" stopColor="#123456" />
         <stop offset="1" stopColor="#81b2e4" />
       </linearGradient>
+      <pattern
+        id="Pattern"
+        patternUnits="userSpaceOnUse"
+        width="20"
+        height="40"
+        patternTransform="scale(0.5)"
+      >
+        <rect x="0" y="0" width="100%" height="100%" fill="#123456" />
+        <path
+          d="M0 30h20L10 50zm-10-20h20L0 30zm20 0h20L20 30zM0-10h20L10 10z"
+          strokeWidth="1"
+          stroke="#81b2e4"
+          fill="none"
+        />
+      </pattern>
     </BarChart>
   );
 }
diff --git a/docs/data/charts/styling/PatternPie.js b/docs/data/charts/styling/PatternPie.js
diff --git a/docs/data/charts/styling/PatternPie.tsx b/docs/data/charts/styling/PatternPie.tsx
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<HeatmapTooltipProps, 'classes'
   const { series, seriesOrder } = heatmapSeries;
   const seriesId = seriesOrder[0];
 
-  const { color, value, identifier } = tooltipData;
+  const { color, value, identifier, markType } = tooltipData;
 
   const [xIndex, yIndex] = value;
 
@@ -85,7 +84,7 @@ function DefaultHeatmapTooltipContent(props: Pick<HeatmapTooltipProps, 'classes'
         <tbody>
           <ChartsTooltipRow className={classes?.row}>
             <ChartsTooltipCell className={clsx(classes?.markCell, classes?.cell)}>
-              <ChartsTooltipMark color={color} className={classes?.mark} />
+              <ChartsLabelMark type={markType} color={color} className={classes?.mark} />
             </ChartsTooltipCell>
             <ChartsTooltipCell className={clsx(classes?.labelCell, classes?.cell)}>
               {seriesLabel}

diff --git 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
@@ -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
@@ -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
@@ -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) {
         )}
 
         <tbody>
-          {seriesItems.map(({ seriesId, color, formattedValue, formattedLabel }) => {
+          {seriesItems.map(({ seriesId, color, formattedValue, formattedLabel, markType }) => {
             if (formattedValue == null) {
               return null;
             }
             return (
               <ChartsTooltipRow key={seriesId} className={classes.row}>
                 <ChartsTooltipCell className={clsx(classes.markCell, classes.cell)}>
-                  {color && <ChartsTooltipMark color={color} className={classes.mark} />}
+                  {color && (
+                    <ChartsLabelMark type={markType} color={color} className={classes.mark} />
+                  )}
                 </ChartsTooltipCell>
                 <ChartsTooltipCell className={clsx(classes.labelCell, classes.cell)}>
                   {formattedLabel ? <Typography>{formattedLabel}</Typography> : null}