[charts] Provide hooks to create custom tooltip (#14377)

Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
mui · Sep 16, 2024 · c54f01d · c54f01d
1 parent 149cecd
commit c54f01d
Show file tree

Hide file tree

Showing 41 changed files with 1,353 additions and 36 deletions.
diff --git a/docs/data/charts/axis/AxisTextCustomizationNoSnap.js b/docs/data/charts/axis/AxisTextCustomizationNoSnap.js
@@ -2,14 +2,12 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   height: 300,
 };
 
-const valueFormatter = (value) => `${value}mm`;
-
 export default function AxisTextCustomizationNoSnap() {
   return (
     <ChartsUsageDemo

diff --git a/docs/data/charts/axis/GridDemo.js b/docs/data/charts/axis/GridDemo.js
@@ -2,15 +2,13 @@ import * as React from 'react';
 import { axisClasses } from '@mui/x-charts/ChartsAxis';
 import { chartsGridClasses } from '@mui/x-charts/ChartsGrid';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   yAxis: [{ label: 'rainfall (mm)' }],
   height: 300,
 };
 
-const valueFormatter = (value) => `${value}mm`;
-
 export default function GridDemo() {
   return (
     <BarChart

diff --git a/docs/data/charts/axis/GridDemo.tsx b/docs/data/charts/axis/GridDemo.tsx
@@ -2,15 +2,13 @@ import * as React from 'react';
 import { axisClasses } from '@mui/x-charts/ChartsAxis';
 import { chartsGridClasses } from '@mui/x-charts/ChartsGrid';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   yAxis: [{ label: 'rainfall (mm)' }],
   height: 300,
 };
 
-const valueFormatter = (value: number | null) => `${value}mm`;
-
 export default function GridDemo() {
   return (
     <BarChart

diff --git a/docs/data/charts/bars/BarsDataset.js b/docs/data/charts/bars/BarsDataset.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
 import { axisClasses } from '@mui/x-charts/ChartsAxis';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   yAxis: [
@@ -18,8 +18,6 @@ const chartSetting = {
   },
 };
 
-const valueFormatter = (value) => `${value}mm`;
-
 export default function BarsDataset() {
   return (
     <BarChart

diff --git a/docs/data/charts/bars/BarsDataset.tsx b/docs/data/charts/bars/BarsDataset.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
 import { axisClasses } from '@mui/x-charts/ChartsAxis';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   yAxis: [
@@ -18,8 +18,6 @@ const chartSetting = {
   },
 };
 
-const valueFormatter = (value: number | null) => `${value}mm`;
-
 export default function BarsDataset() {
   return (
     <BarChart

diff --git a/docs/data/charts/bars/GridDemo.js b/docs/data/charts/bars/GridDemo.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   xAxis: [
@@ -12,8 +12,6 @@ const chartSetting = {
   height: 400,
 };
 
-const valueFormatter = (value) => `${value}mm`;
-
 export default function GridDemo() {
   return (
     <BarChart

diff --git a/docs/data/charts/bars/GridDemo.tsx b/docs/data/charts/bars/GridDemo.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   xAxis: [
@@ -12,8 +12,6 @@ const chartSetting = {
   height: 400,
 };
 
-const valueFormatter = (value: number | null) => `${value}mm`;
-
 export default function GridDemo() {
   return (
     <BarChart

diff --git a/docs/data/charts/bars/HorizontalBars.js b/docs/data/charts/bars/HorizontalBars.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   xAxis: [
@@ -12,8 +12,6 @@ const chartSetting = {
   height: 400,
 };
 
-const valueFormatter = (value) => `${value}mm`;
-
 export default function HorizontalBars() {
   return (
     <BarChart

diff --git a/docs/data/charts/bars/HorizontalBars.tsx b/docs/data/charts/bars/HorizontalBars.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarChart } from '@mui/x-charts/BarChart';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 const chartSetting = {
   xAxis: [
@@ -12,8 +12,6 @@ const chartSetting = {
   height: 400,
 };
 
-const valueFormatter = (value: number | null) => `${value}mm`;
-
 export default function HorizontalBars() {
   return (
     <BarChart

diff --git a/docs/data/charts/bars/TickPlacementBars.js b/docs/data/charts/bars/TickPlacementBars.js
@@ -7,7 +7,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Radio from '@mui/material/Radio';
 import { BarChart } from '@mui/x-charts/BarChart';
 import { axisClasses } from '@mui/x-charts/ChartsAxis';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 function TickParamsSelector({
   tickPlacement,
@@ -57,8 +57,6 @@ function TickParamsSelector({
   );
 }
 
-const valueFormatter = (value) => `${value}mm`;
-
 const chartSetting = {
   yAxis: [
     {

diff --git a/docs/data/charts/bars/TickPlacementBars.tsx b/docs/data/charts/bars/TickPlacementBars.tsx
@@ -7,7 +7,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Radio from '@mui/material/Radio';
 import { BarChart } from '@mui/x-charts/BarChart';
 import { axisClasses } from '@mui/x-charts/ChartsAxis';
-import { dataset } from '../dataset/weather';
+import { dataset, valueFormatter } from '../dataset/weather';
 
 type TickParamsSelectorProps = {
   tickPlacement: 'end' | 'start' | 'middle' | 'extremities';
@@ -72,8 +72,6 @@ function TickParamsSelector({
   );
 }
 
-const valueFormatter = (value: number | null) => `${value}mm`;
-
 const chartSetting = {
   yAxis: [
     {

diff --git a/docs/data/charts/dataset/weather.ts b/docs/data/charts/dataset/weather.ts
@@ -84,3 +84,7 @@ export const dataset = [
     month: 'Dec',
   },
 ];
+
+export function valueFormatter(value: number | null) {
+  return `${value}mm`;
+}
diff --git a/docs/data/charts/tooltip/CustomAxisTooltip.js b/docs/data/charts/tooltip/CustomAxisTooltip.js
@@ -0,0 +1,110 @@
+import * as React from 'react';
+import NoSsr from '@mui/material/NoSsr';
+import Popper from '@mui/material/Popper';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import { useAxisTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip';
+import { generateVirtualElement } from './generateVirtualElement';
+
+export function CustomAxisTooltip() {
+  const tooltipData = useAxisTooltip();
+  const mousePosition = useMouseTracker(); // Track the mouse position on chart.
+
+  if (!tooltipData || !mousePosition) {
+    // No data to display
+    return null;
+  }
+
+  // The pointer type can be used to have different behavior based on pointer type.
+  const isMousePointer = mousePosition?.pointerType === 'mouse';
+  // Adapt the tooltip offset to the size of the pointer.
+  const yOffset = isMousePointer ? 0 : 40 - mousePosition.height;
+
+  return (
+    <NoSsr>
+      <Popper
+        sx={{
+          pointerEvents: 'none',
+          zIndex: (theme) => theme.zIndex.modal,
+        }}
+        open
+        placement={isMousePointer ? 'top-end' : 'top'}
+        anchorEl={generateVirtualElement(mousePosition)}
+        modifiers={[
+          {
+            name: 'offset',
+            options: {
+              offset: [0, yOffset],
+            },
+          },
+        ]}
+      >
+        <Paper
+          elevation={0}
+          sx={{
+            m: 1,
+            border: 'solid',
+            borderWidth: 2,
+            borderColor: 'divider',
+            table: { borderSpacing: 0 },
+            thead: {
+              td: {
+                px: 1.5,
+                py: 0.75,
+                borderBottom: 'solid',
+                borderWidth: 2,
+                borderColor: 'divider',
+              },
+            },
+            tbody: {
+              'tr:first-child': { td: { paddingTop: 1.5 } },
+              'tr:last-child': { td: { paddingBottom: 1.5 } },
+              tr: {
+                'td:first-child': { paddingLeft: 1.5 },
+                'td:last-child': { paddingRight: 1.5 },
+                td: {
+                  paddingRight: '7px',
+                  paddingBottom: '10px',
+                },
+              },
+            },
+          }}
+        >
+          <table>
+            <thead>
+              <tr>
+                <td colSpan={3}>
+                  <Typography>{tooltipData.axisFormattedValue}</Typography>
+                </td>
+              </tr>
+            </thead>
+            <tbody>
+              {tooltipData.seriesItems.map((seriesItem) => (
+                <tr key={seriesItem.seriesId}>
+                  <td>
+                    <div
+                      style={{
+                        width: 10,
+                        height: 10,
+                        borderRadius: 2,
+                        backgroundColor: seriesItem.color,
+                      }}
+                    />
+                  </td>
+                  <td>
+                    <Typography fontWeight="light">
+                      {seriesItem.formattedLabel}
+                    </Typography>
+                  </td>
+                  <td>
+                    <Typography>{seriesItem.formattedValue}</Typography>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Paper>
+      </Popper>
+    </NoSsr>
+  );
+}