@mui/x-charts/esm/ChartsBrushOverlay/ChartsBrushOverlay.js

The community edition of MUI X Charts components.

'use client';

import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import clsx from 'clsx';
import { useTheme } from '@mui/material/styles';
import { brushOverlayClasses } from "./ChartsBrushOverlay.classes.js";
import { selectorChartDrawingArea } from "../internals/plugins/corePlugins/useChartDimensions/index.js";
import { selectorBrushStartX, selectorBrushStartY, selectorBrushCurrentX, selectorBrushCurrentY, selectorBrushConfig } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
import { useStore } from "../internals/store/useStore.js";
import { jsx as _jsx } from "react/jsx-runtime";
function BrushRect(props) {
  return /*#__PURE__*/_jsx("rect", _extends({
    className: brushOverlayClasses.rect,
    strokeWidth: 1,
    fillOpacity: 0.2,
    pointerEvents: 'none'
  }, props));
}
/**
 * Component that renders visual feedback during brush interaction
 */
export function ChartsBrushOverlay(props) {
  const store = useStore();
  const drawingArea = store.use(selectorChartDrawingArea);
  const theme = useTheme();
  const brushStartX = store.use(selectorBrushStartX);
  const brushStartY = store.use(selectorBrushStartY);
  const brushCurrentX = store.use(selectorBrushCurrentX);
  const brushCurrentY = store.use(selectorBrushCurrentY);
  const brushConfig = store.use(selectorBrushConfig);
  if (brushStartX === null || brushStartY === null || brushCurrentX === null || brushCurrentY === null) {
    return null;
  }
  const {
    left,
    top,
    width,
    height
  } = drawingArea;

  // Clamp coordinates to drawing area
  const clampX = x => Math.max(left, Math.min(left + width, x));
  const clampY = y => Math.max(top, Math.min(top + height, y));
  const startX = clampX(brushStartX);
  const startY = clampY(brushStartY);
  const currentX = clampX(brushCurrentX);
  const currentY = clampY(brushCurrentY);
  const rectColor = theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white;

  // For scatter charts, show only the rectangle without guide lines
  if (brushConfig === 'xy') {
    const rectWidth = currentX - startX;
    const rectHeight = currentY - startY;
    return /*#__PURE__*/_jsx("g", {
      className: clsx(brushOverlayClasses.root, brushOverlayClasses.x, brushOverlayClasses.y),
      children: /*#__PURE__*/_jsx(BrushRect, _extends({
        fill: rectColor,
        x: rectWidth >= 0 ? startX : currentX,
        y: rectHeight >= 0 ? startY : currentY,
        width: Math.abs(rectWidth),
        height: Math.abs(rectHeight)
      }, props))
    });
  }
  if (brushConfig === 'y') {
    const minY = Math.min(startY, currentY);
    const maxY = Math.max(startY, currentY);
    const rectHeight = maxY - minY;
    return /*#__PURE__*/_jsx("g", {
      className: clsx(brushOverlayClasses.root, brushOverlayClasses.y),
      children: /*#__PURE__*/_jsx(BrushRect, _extends({
        fill: rectColor,
        x: left,
        y: minY,
        width: width,
        height: rectHeight
      }, props))
    });
  }
  const minX = Math.min(startX, currentX);
  const maxX = Math.max(startX, currentX);
  const rectWidth = maxX - minX;
  return /*#__PURE__*/_jsx("g", {
    className: clsx(brushOverlayClasses.root, brushOverlayClasses.x),
    children: /*#__PURE__*/_jsx(BrushRect, _extends({
      fill: rectColor,
      x: minX,
      y: top,
      width: rectWidth,
      height: height
    }, props))
  });
}