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

The community edition of MUI X Charts components.

"use strict";
'use client';

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ChartsBrushOverlay = ChartsBrushOverlay;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _styles = require("@mui/material/styles");
var _ChartsBrushOverlay = require("./ChartsBrushOverlay.classes");
var _useChartDimensions = require("../internals/plugins/corePlugins/useChartDimensions");
var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
var _useStore = require("../internals/store/useStore");
var _jsxRuntime = require("react/jsx-runtime");
function BrushRect(props) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
    className: _ChartsBrushOverlay.brushOverlayClasses.rect,
    strokeWidth: 1,
    fillOpacity: 0.2,
    pointerEvents: 'none'
  }, props));
}
/**
 * Component that renders visual feedback during brush interaction
 */
function ChartsBrushOverlay(props) {
  const {
    className
  } = props;
  const store = (0, _useStore.useStore)();
  const drawingArea = store.use(_useChartDimensions.selectorChartDrawingArea);
  const theme = (0, _styles.useTheme)();
  const brushStartX = store.use(_useChartBrush.selectorBrushStartX);
  const brushStartY = store.use(_useChartBrush.selectorBrushStartY);
  const brushCurrentX = store.use(_useChartBrush.selectorBrushCurrentX);
  const brushCurrentY = store.use(_useChartBrush.selectorBrushCurrentY);
  const brushConfig = store.use(_useChartBrush.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__*/(0, _jsxRuntime.jsx)("g", {
      className: (0, _clsx.default)(_ChartsBrushOverlay.brushOverlayClasses.root, _ChartsBrushOverlay.brushOverlayClasses.x, _ChartsBrushOverlay.brushOverlayClasses.y, className),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrushRect, {
        fill: rectColor,
        x: rectWidth >= 0 ? startX : currentX,
        y: rectHeight >= 0 ? startY : currentY,
        width: Math.abs(rectWidth),
        height: Math.abs(rectHeight)
      })
    });
  }
  if (brushConfig === 'y') {
    const minY = Math.min(startY, currentY);
    const maxY = Math.max(startY, currentY);
    const rectHeight = maxY - minY;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
      className: (0, _clsx.default)(_ChartsBrushOverlay.brushOverlayClasses.root, _ChartsBrushOverlay.brushOverlayClasses.y, className),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrushRect, {
        fill: rectColor,
        x: left,
        y: minY,
        width: width,
        height: rectHeight
      })
    });
  }
  const minX = Math.min(startX, currentX);
  const maxX = Math.max(startX, currentX);
  const rectWidth = maxX - minX;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
    className: (0, _clsx.default)(_ChartsBrushOverlay.brushOverlayClasses.root, _ChartsBrushOverlay.brushOverlayClasses.x, className),
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrushRect, {
      fill: rectColor,
      x: minX,
      y: top,
      width: rectWidth,
      height: height
    })
  });
}