[charts-pro] Show zoom slider tooltip when selecting range (mui#18028)

Author: bernardobelchior

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx

@@ -32,6 +32,7 @@ export function ChartAxisZoomSlider({ axisDirection, axisId }: ChartZoomSliderPr
   const store = useStore();
   const drawingArea = useDrawingArea();
   const zoomData = useSelector(store, selectorChartAxisZoomData, axisId);
+  const [showTooltip, setShowTooltip] = React.useState(false);
   const { xAxis } = useXAxes();
   const { yAxis } = useYAxes();
 
@@ -92,13 +93,18 @@ export function ChartAxisZoomSlider({ axisDirection, axisId }: ChartZoomSliderPr
         axisId={axisId}
         axisDirection={axisDirection}
         reverse={reverse}
+        onSelectStart={() => setShowTooltip(true)}
+        onSelectEnd={() => setShowTooltip(false)}
       />
       <ChartAxisZoomSliderActiveTrack
         zoomData={zoomData}
         axisId={axisId}
         axisPosition={axisPosition}
         axisDirection={axisDirection}
         reverse={reverse}
+        showTooltip={showTooltip}
+        onPointerEnter={() => setShowTooltip(true)}
+        onPointerLeave={() => setShowTooltip(false)}
       />
     </g>
   );

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.tsx

@@ -37,28 +37,35 @@ const ZoomSliderActiveTrackRect = styled('rect')(({ theme }) => ({
 const formatter = Intl.NumberFormat(undefined, { maximumFractionDigits: 0 });
 const zoomValueFormatter = (value: number) => formatter.format(value);
 
+export interface ChartAxisZoomSliderActiveTrackProps {
+  axisId: AxisId;
+  axisDirection: 'x' | 'y';
+  axisPosition: 'top' | 'bottom' | 'left' | 'right';
+  zoomData: ZoomData;
+  reverse?: boolean;
+  valueFormatter?: (value: number) => string;
+  showTooltip: boolean;
+  onPointerEnter?: () => void;
+  onPointerLeave?: () => void;
+}
+
 export function ChartAxisZoomSliderActiveTrack({
   axisId,
   axisDirection,
   axisPosition,
   zoomData,
   reverse,
   valueFormatter = zoomValueFormatter,
-}: {
-  axisId: AxisId;
-  axisDirection: 'x' | 'y';
-  axisPosition: 'top' | 'bottom' | 'left' | 'right';
-  zoomData: ZoomData;
-  reverse: boolean;
-  valueFormatter?: (value: number) => string;
-}) {
+  showTooltip,
+  onPointerEnter,
+  onPointerLeave,
+}: ChartAxisZoomSliderActiveTrackProps) {
   const { instance, svgRef } = useChartContext<[UseChartProZoomSignature]>();
   const store = useStore<[UseChartProZoomSignature]>();
   const drawingArea = useDrawingArea();
   const activePreviewRectRef = React.useRef<SVGRectElement>(null);
   const [startThumbEl, setStartThumbEl] = React.useState<SVGRectElement | null>(null);
   const [endThumbEl, setEndThumbEl] = React.useState<SVGRectElement | null>(null);
-  const [showTooltip, setShowTooltip] = React.useState(false);
 
   const previewThumbWidth =
     axisDirection === 'x' ? ZOOM_SLIDER_THUMB_WIDTH : ZOOM_SLIDER_THUMB_HEIGHT;
@@ -102,7 +109,6 @@ export function ChartAxisZoomSliderActiveTrack({
     const onPointerUp = () => {
       activePreviewRect.removeEventListener('pointermove', onPointerMove);
       document.removeEventListener('pointerup', onPointerUp);
-      setShowTooltip(false);
     };
 
     const onPointerDown = (event: PointerEvent) => {
@@ -128,7 +134,6 @@ export function ChartAxisZoomSliderActiveTrack({
       pointerZoomMin = pointerDownZoom - axisZoomData.start;
       pointerZoomMax = 100 - (axisZoomData.end - pointerDownZoom);
 
-      setShowTooltip(true);
       document.addEventListener('pointerup', onPointerUp);
       activePreviewRect.addEventListener('pointermove', onPointerMove);
     };
@@ -272,8 +277,8 @@ export function ChartAxisZoomSliderActiveTrack({
         y={previewY + (axisDirection === 'x' ? previewOffset : 0)}
         width={previewWidth}
         height={previewHeight}
-        onPointerEnter={() => setShowTooltip(true)}
-        onPointerLeave={() => setShowTooltip(false)}
+        onPointerEnter={onPointerEnter}
+        onPointerLeave={onPointerLeave}
       />
       <ChartAxisZoomSliderThumb
         ref={setStartThumbEl}
@@ -283,8 +288,8 @@ export function ChartAxisZoomSliderActiveTrack({
         height={previewThumbHeight}
         orientation={axisDirection === 'x' ? 'horizontal' : 'vertical'}
         onMove={onStartThumbMove}
-        onPointerEnter={() => setShowTooltip(true)}
-        onPointerLeave={() => setShowTooltip(false)}
+        onPointerEnter={onPointerEnter}
+        onPointerLeave={onPointerLeave}
         placement="start"
       />
       <ChartAxisZoomSliderThumb
@@ -295,8 +300,8 @@ export function ChartAxisZoomSliderActiveTrack({
         height={previewThumbHeight}
         orientation={axisDirection === 'x' ? 'horizontal' : 'vertical'}
         onMove={onEndThumbMove}
-        onPointerEnter={() => setShowTooltip(true)}
-        onPointerLeave={() => setShowTooltip(false)}
+        onPointerEnter={onPointerEnter}
+        onPointerLeave={onPointerLeave}
         placement="end"
       />
       <ChartsTooltipZoomSliderValue

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.tsx

@@ -41,12 +41,16 @@ interface ChartAxisZoomSliderTrackProps extends React.ComponentProps<'rect'> {
   axisId: AxisId;
   axisDirection: 'x' | 'y';
   reverse: boolean;
+  onSelectStart?: () => void;
+  onSelectEnd?: () => void;
 }
 
 export function ChartAxisZoomSliderTrack({
   axisId,
   axisDirection,
   reverse,
+  onSelectStart,
+  onSelectEnd,
   ...other
 }: ChartAxisZoomSliderTrackProps) {
   const ref = React.useRef<SVGRectElement>(null);
@@ -133,6 +137,7 @@ export function ChartAxisZoomSliderTrack({
       rect.removeEventListener('pointermove', onPointerMove);
       document.removeEventListener('pointerup', onPointerUp);
       setIsSelecting(false);
+      onSelectEnd?.();
 
       if (pointerMoved) {
         return;
@@ -163,6 +168,7 @@ export function ChartAxisZoomSliderTrack({
     document.addEventListener('pointerup', onPointerUp);
     rect.addEventListener('pointermove', onPointerMove);
 
+    onSelectStart?.();
     setIsSelecting(true);
     instance.setAxisZoomData(axisId, (prev) => ({
       ...prev,