@mui/x-charts 9.0.3 → 9.1.0

package/ChartsRadialAxisHighlight/ChartsRadialAxisHighlight.d.mts

@@ -0,0 +1,15 @@
+import { type ChartsRadialAxisHighlightProps } from "./ChartsRadialAxisHighlight.types.mjs";
+/**
+ * Demos:
+ *
+ * - [Radial Lines](https://mui.com/x/react-charts/radial-lines/)
+ *
+ * API:
+ *
+ * - [ChartsRadialAxisHighlight API](https://mui.com/x/api/charts/charts-radial-axis-highlight/)
+ */
+declare function ChartsRadialAxisHighlight(props: ChartsRadialAxisHighlightProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChartsRadialAxisHighlight {
+  var propTypes: any;
+}
+export { ChartsRadialAxisHighlight };

package/ChartsRadialAxisHighlight/ChartsRadialAxisHighlight.d.ts

@@ -0,0 +1,15 @@
+import { type ChartsRadialAxisHighlightProps } from "./ChartsRadialAxisHighlight.types.js";
+/**
+ * Demos:
+ *
+ * - [Radial Lines](https://mui.com/x/react-charts/radial-lines/)
+ *
+ * API:
+ *
+ * - [ChartsRadialAxisHighlight API](https://mui.com/x/api/charts/charts-radial-axis-highlight/)
+ */
+declare function ChartsRadialAxisHighlight(props: ChartsRadialAxisHighlightProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChartsRadialAxisHighlight {
+  var propTypes: any;
+}
+export { ChartsRadialAxisHighlight };

package/ChartsRadialAxisHighlight/ChartsRadialAxisHighlight.js

@@ -0,0 +1,56 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsRadialAxisHighlight = ChartsRadialAxisHighlight;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _chartsRadialAxisHighlightClasses = require("./chartsRadialAxisHighlightClasses");
+var _ChartsRotationAxisHighlight = _interopRequireDefault(require("./ChartsRotationAxisHighlight"));
+var _ChartsRadiusAxisHighlight = _interopRequireDefault(require("./ChartsRadiusAxisHighlight"));
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = () => {
+  const slots = {
+    root: ['root']
+  };
+  return (0, _composeClasses.default)(slots, _chartsRadialAxisHighlightClasses.getRadialAxisHighlightUtilityClass);
+};
+
+/**
+ * Demos:
+ *
+ * - [Radial Lines](https://mui.com/x/react-charts/radial-lines/)
+ *
+ * API:
+ *
+ * - [ChartsRadialAxisHighlight API](https://mui.com/x/api/charts/charts-radial-axis-highlight/)
+ */
+function ChartsRadialAxisHighlight(props) {
+  const {
+    rotation: rotationHighlight,
+    radius: radiusHighlight
+  } = props;
+  const classes = useUtilityClasses();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [rotationHighlight && rotationHighlight !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRotationAxisHighlight.default, {
+      type: rotationHighlight,
+      classes: classes
+    }), radiusHighlight && radiusHighlight !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadiusAxisHighlight.default, {
+      type: radiusHighlight,
+      classes: classes
+    })]
+  });
+}
+process.env.NODE_ENV !== "production" ? ChartsRadialAxisHighlight.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  radius: _propTypes.default.oneOf(['line', 'none']),
+  rotation: _propTypes.default.oneOf(['band', 'line', 'none'])
+} : void 0;

package/ChartsRadialAxisHighlight/ChartsRadialAxisHighlight.mjs

@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import composeClasses from '@mui/utils/composeClasses';
+import { getRadialAxisHighlightUtilityClass } from "./chartsRadialAxisHighlightClasses.mjs";
+import ChartsRotationAxisHighlight from "./ChartsRotationAxisHighlight.mjs";
+import ChartsRadiusAxisHighlight from "./ChartsRadiusAxisHighlight.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = () => {
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getRadialAxisHighlightUtilityClass);
+};
+
+/**
+ * Demos:
+ *
+ * - [Radial Lines](https://mui.com/x/react-charts/radial-lines/)
+ *
+ * API:
+ *
+ * - [ChartsRadialAxisHighlight API](https://mui.com/x/api/charts/charts-radial-axis-highlight/)
+ */
+function ChartsRadialAxisHighlight(props) {
+  const {
+    rotation: rotationHighlight,
+    radius: radiusHighlight
+  } = props;
+  const classes = useUtilityClasses();
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [rotationHighlight && rotationHighlight !== 'none' && /*#__PURE__*/_jsx(ChartsRotationAxisHighlight, {
+      type: rotationHighlight,
+      classes: classes
+    }), radiusHighlight && radiusHighlight !== 'none' && /*#__PURE__*/_jsx(ChartsRadiusAxisHighlight, {
+      type: radiusHighlight,
+      classes: classes
+    })]
+  });
+}
+process.env.NODE_ENV !== "production" ? ChartsRadialAxisHighlight.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  radius: PropTypes.oneOf(['line', 'none']),
+  rotation: PropTypes.oneOf(['band', 'line', 'none'])
+} : void 0;
+export { ChartsRadialAxisHighlight };

package/ChartsRadialAxisHighlight/ChartsRadialAxisHighlight.types.d.mts

@@ -0,0 +1,6 @@
+export type ChartsRadialAxisHighlightRotationType = 'none' | 'line' | 'band';
+export type ChartsRadialAxisHighlightRadiusType = 'none' | 'line';
+export type ChartsRadialAxisHighlightProps = {
+  rotation?: ChartsRadialAxisHighlightRotationType;
+  radius?: ChartsRadialAxisHighlightRadiusType;
+};

package/ChartsRadialAxisHighlight/ChartsRadialAxisHighlight.types.d.ts

@@ -0,0 +1,6 @@
+export type ChartsRadialAxisHighlightRotationType = 'none' | 'line' | 'band';
+export type ChartsRadialAxisHighlightRadiusType = 'none' | 'line';
+export type ChartsRadialAxisHighlightProps = {
+  rotation?: ChartsRadialAxisHighlightRotationType;
+  radius?: ChartsRadialAxisHighlightRadiusType;
+};

package/ChartsRadialAxisHighlight/ChartsRadialAxisHighlight.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/ChartsRadialAxisHighlight/ChartsRadialAxisHighlight.types.mjs

@@ -0,0 +1 @@
+export {};

package/ChartsRadialAxisHighlight/ChartsRadialAxisHighlightPath.d.mts

@@ -0,0 +1,11 @@
+export type ChartsRadialAxisHighlightPathType = 'line' | 'band';
+export declare const ChartsRadialAxisHighlightPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+  ownerState: {
+    axisHighlight: ChartsRadialAxisHighlightPathType;
+  };
+}, Pick<import("react").SVGProps<SVGPathElement>, keyof import("react").SVGProps<SVGPathElement>>, {}>;
+export declare const ChartsRadialAxisHighlightCircle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+  ownerState: {
+    axisHighlight: ChartsRadialAxisHighlightPathType;
+  };
+}, Pick<import("react").SVGProps<SVGCircleElement>, keyof import("react").SVGProps<SVGCircleElement>>, {}>;

package/ChartsRadialAxisHighlight/ChartsRadialAxisHighlightPath.d.ts

@@ -0,0 +1,11 @@
+export type ChartsRadialAxisHighlightPathType = 'line' | 'band';
+export declare const ChartsRadialAxisHighlightPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+  ownerState: {
+    axisHighlight: ChartsRadialAxisHighlightPathType;
+  };
+}, Pick<import("react").SVGProps<SVGPathElement>, keyof import("react").SVGProps<SVGPathElement>>, {}>;
+export declare const ChartsRadialAxisHighlightCircle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+  ownerState: {
+    axisHighlight: ChartsRadialAxisHighlightPathType;
+  };
+}, Pick<import("react").SVGProps<SVGCircleElement>, keyof import("react").SVGProps<SVGCircleElement>>, {}>;

package/ChartsRadialAxisHighlight/ChartsRadialAxisHighlightPath.js

@@ -0,0 +1,70 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsRadialAxisHighlightPath = exports.ChartsRadialAxisHighlightCircle = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _styles = require("@mui/material/styles");
+const ChartsRadialAxisHighlightPath = exports.ChartsRadialAxisHighlightPath = (0, _styles.styled)('path', {
+  name: 'MuiChartsRadialAxisHighlight',
+  slot: 'Root'
+})(({
+  theme
+}) => ({
+  pointerEvents: 'none',
+  variants: [{
+    props: {
+      axisHighlight: 'band'
+    },
+    style: (0, _extends2.default)({
+      fill: 'white',
+      fillOpacity: 0.1
+    }, theme.applyStyles('light', {
+      fill: 'gray'
+    }))
+  }, {
+    props: {
+      axisHighlight: 'line'
+    },
+    style: (0, _extends2.default)({
+      fill: 'none',
+      strokeDasharray: '5 2',
+      stroke: '#ffffff'
+    }, theme.applyStyles('light', {
+      stroke: '#000000'
+    }))
+  }]
+}));
+const ChartsRadialAxisHighlightCircle = exports.ChartsRadialAxisHighlightCircle = (0, _styles.styled)('circle', {
+  name: 'MuiChartsRadialAxisHighlight',
+  slot: 'Root'
+})(({
+  theme
+}) => ({
+  pointerEvents: 'none',
+  variants: [{
+    props: {
+      axisHighlight: 'band'
+    },
+    style: (0, _extends2.default)({
+      fill: 'white',
+      fillOpacity: 0.1
+    }, theme.applyStyles('light', {
+      fill: 'gray'
+    }))
+  }, {
+    props: {
+      axisHighlight: 'line'
+    },
+    style: (0, _extends2.default)({
+      fill: 'none',
+      strokeDasharray: '5 2',
+      stroke: '#ffffff'
+    }, theme.applyStyles('light', {
+      stroke: '#000000'
+    }))
+  }]
+}));

package/ChartsRadialAxisHighlight/ChartsRadialAxisHighlightPath.mjs

@@ -0,0 +1,64 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { styled } from '@mui/material/styles';
+export const ChartsRadialAxisHighlightPath = styled('path', {
+  name: 'MuiChartsRadialAxisHighlight',
+  slot: 'Root'
+})(({
+  theme
+}) => ({
+  pointerEvents: 'none',
+  variants: [{
+    props: {
+      axisHighlight: 'band'
+    },
+    style: _extends({
+      fill: 'white',
+      fillOpacity: 0.1
+    }, theme.applyStyles('light', {
+      fill: 'gray'
+    }))
+  }, {
+    props: {
+      axisHighlight: 'line'
+    },
+    style: _extends({
+      fill: 'none',
+      strokeDasharray: '5 2',
+      stroke: '#ffffff'
+    }, theme.applyStyles('light', {
+      stroke: '#000000'
+    }))
+  }]
+}));
+export const ChartsRadialAxisHighlightCircle = styled('circle', {
+  name: 'MuiChartsRadialAxisHighlight',
+  slot: 'Root'
+})(({
+  theme
+}) => ({
+  pointerEvents: 'none',
+  variants: [{
+    props: {
+      axisHighlight: 'band'
+    },
+    style: _extends({
+      fill: 'white',
+      fillOpacity: 0.1
+    }, theme.applyStyles('light', {
+      fill: 'gray'
+    }))
+  }, {
+    props: {
+      axisHighlight: 'line'
+    },
+    style: _extends({
+      fill: 'none',
+      strokeDasharray: '5 2',
+      stroke: '#ffffff'
+    }, theme.applyStyles('light', {
+      stroke: '#000000'
+    }))
+  }]
+}));

package/ChartsRadialAxisHighlight/ChartsRadiusAxisHighlight.d.mts

@@ -0,0 +1,9 @@
+import { type ChartsRadialAxisHighlightRadiusType } from "./ChartsRadialAxisHighlight.types.mjs";
+import { type ChartsRadialAxisHighlightClasses } from "./chartsRadialAxisHighlightClasses.mjs";
+/**
+ * @ignore - internal component.
+ */
+export default function ChartsRadiusAxisHighlight(props: {
+  type: ChartsRadialAxisHighlightRadiusType;
+  classes: ChartsRadialAxisHighlightClasses;
+}): import("react/jsx-runtime").JSX.Element | null;

package/ChartsRadialAxisHighlight/ChartsRadiusAxisHighlight.d.ts

@@ -0,0 +1,9 @@
+import { type ChartsRadialAxisHighlightRadiusType } from "./ChartsRadialAxisHighlight.types.js";
+import { type ChartsRadialAxisHighlightClasses } from "./chartsRadialAxisHighlightClasses.js";
+/**
+ * @ignore - internal component.
+ */
+export default function ChartsRadiusAxisHighlight(props: {
+  type: ChartsRadialAxisHighlightRadiusType;
+  classes: ChartsRadialAxisHighlightClasses;
+}): import("react/jsx-runtime").JSX.Element | null;

package/ChartsRadialAxisHighlight/ChartsRadiusAxisHighlight.js

@@ -0,0 +1,87 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ChartsRadiusAxisHighlight;
+var React = _interopRequireWildcard(require("react"));
+var _useStore = require("../internals/store/useStore");
+var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPolarAxis");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _ChartsRadialAxisHighlightPath = require("./ChartsRadialAxisHighlightPath");
+var _jsxRuntime = require("react/jsx-runtime");
+function polarToSvg(cx, cy, radius, angle) {
+  return [cx + radius * Math.sin(angle), cy - radius * Math.cos(angle)];
+}
+
+/**
+ * @ignore - internal component.
+ */
+function ChartsRadiusAxisHighlight(props) {
+  const {
+    type,
+    classes
+  } = props;
+  const store = (0, _useStore.useStore)();
+  const {
+    cx,
+    cy
+  } = store.use(_useChartPolarAxis.selectorChartPolarCenter);
+  const {
+    axis: radiusAxes,
+    axisIds: radiusAxisIds
+  } = store.use(_useChartPolarAxis.selectorChartRadiusAxis);
+  const {
+    axis: rotationAxes,
+    axisIds: rotationAxisIds
+  } = store.use(_useChartPolarAxis.selectorChartRotationAxis);
+  const pointerX = store.use(_useChartInteraction.selectorChartsInteractionPointerX);
+  const pointerY = store.use(_useChartInteraction.selectorChartsInteractionPointerY);
+  if (pointerX === null || pointerY === null) {
+    return null;
+  }
+  const radiusAxisId = radiusAxisIds[0];
+  if (radiusAxisId === undefined) {
+    return null;
+  }
+  const radiusAxis = radiusAxes[radiusAxisId];
+  const radiusScale = radiusAxis.scale;
+  const innerRadius = radiusScale.range()[0];
+  const outerRadius = radiusScale.range()[1];
+  const pointerRadius = Math.sqrt((pointerX - cx) ** 2 + (pointerY - cy) ** 2);
+  if (pointerRadius < innerRadius || pointerRadius > outerRadius) {
+    return null;
+  }
+  if (type === 'line') {
+    const rotationAxisId = rotationAxisIds[0];
+    const rotationAxis = rotationAxisId !== undefined ? rotationAxes[rotationAxisId] : undefined;
+    const startAngle = rotationAxis?.scale.range()[0] ?? 0;
+    const endAngle = rotationAxis?.scale.range()[1] ?? 2 * Math.PI;
+    const isFullCircle = rotationAxis?.isFullCircle ?? Math.abs(endAngle - startAngle) >= 2 * Math.PI;
+    if (isFullCircle) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadialAxisHighlightPath.ChartsRadialAxisHighlightCircle, {
+        cx: cx,
+        cy: cy,
+        r: pointerRadius,
+        className: classes.root,
+        ownerState: {
+          axisHighlight: 'line'
+        }
+      });
+    }
+    const [startX, startY] = polarToSvg(cx, cy, pointerRadius, startAngle);
+    const [endX, endY] = polarToSvg(cx, cy, pointerRadius, endAngle);
+    const isLargeArc = Math.abs(endAngle - startAngle) >= Math.PI;
+    const isDirectArc = endAngle > startAngle;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadialAxisHighlightPath.ChartsRadialAxisHighlightPath, {
+      d: `M ${startX} ${startY} A ${pointerRadius} ${pointerRadius} 0 ${isLargeArc ? 1 : 0} ${isDirectArc ? 1 : 0} ${endX} ${endY}`,
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'line'
+      }
+    });
+  }
+  return null;
+}

package/ChartsRadialAxisHighlight/ChartsRadiusAxisHighlight.mjs

@@ -0,0 +1,81 @@
+'use client';
+
+import * as React from 'react';
+import { useStore } from "../internals/store/useStore.mjs";
+import { selectorChartPolarCenter, selectorChartRadiusAxis, selectorChartRotationAxis } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.mjs";
+import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../internals/plugins/featurePlugins/useChartInteraction/index.mjs";
+import { ChartsRadialAxisHighlightCircle, ChartsRadialAxisHighlightPath } from "./ChartsRadialAxisHighlightPath.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+function polarToSvg(cx, cy, radius, angle) {
+  return [cx + radius * Math.sin(angle), cy - radius * Math.cos(angle)];
+}
+
+/**
+ * @ignore - internal component.
+ */
+export default function ChartsRadiusAxisHighlight(props) {
+  const {
+    type,
+    classes
+  } = props;
+  const store = useStore();
+  const {
+    cx,
+    cy
+  } = store.use(selectorChartPolarCenter);
+  const {
+    axis: radiusAxes,
+    axisIds: radiusAxisIds
+  } = store.use(selectorChartRadiusAxis);
+  const {
+    axis: rotationAxes,
+    axisIds: rotationAxisIds
+  } = store.use(selectorChartRotationAxis);
+  const pointerX = store.use(selectorChartsInteractionPointerX);
+  const pointerY = store.use(selectorChartsInteractionPointerY);
+  if (pointerX === null || pointerY === null) {
+    return null;
+  }
+  const radiusAxisId = radiusAxisIds[0];
+  if (radiusAxisId === undefined) {
+    return null;
+  }
+  const radiusAxis = radiusAxes[radiusAxisId];
+  const radiusScale = radiusAxis.scale;
+  const innerRadius = radiusScale.range()[0];
+  const outerRadius = radiusScale.range()[1];
+  const pointerRadius = Math.sqrt((pointerX - cx) ** 2 + (pointerY - cy) ** 2);
+  if (pointerRadius < innerRadius || pointerRadius > outerRadius) {
+    return null;
+  }
+  if (type === 'line') {
+    const rotationAxisId = rotationAxisIds[0];
+    const rotationAxis = rotationAxisId !== undefined ? rotationAxes[rotationAxisId] : undefined;
+    const startAngle = rotationAxis?.scale.range()[0] ?? 0;
+    const endAngle = rotationAxis?.scale.range()[1] ?? 2 * Math.PI;
+    const isFullCircle = rotationAxis?.isFullCircle ?? Math.abs(endAngle - startAngle) >= 2 * Math.PI;
+    if (isFullCircle) {
+      return /*#__PURE__*/_jsx(ChartsRadialAxisHighlightCircle, {
+        cx: cx,
+        cy: cy,
+        r: pointerRadius,
+        className: classes.root,
+        ownerState: {
+          axisHighlight: 'line'
+        }
+      });
+    }
+    const [startX, startY] = polarToSvg(cx, cy, pointerRadius, startAngle);
+    const [endX, endY] = polarToSvg(cx, cy, pointerRadius, endAngle);
+    const isLargeArc = Math.abs(endAngle - startAngle) >= Math.PI;
+    const isDirectArc = endAngle > startAngle;
+    return /*#__PURE__*/_jsx(ChartsRadialAxisHighlightPath, {
+      d: `M ${startX} ${startY} A ${pointerRadius} ${pointerRadius} 0 ${isLargeArc ? 1 : 0} ${isDirectArc ? 1 : 0} ${endX} ${endY}`,
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'line'
+      }
+    });
+  }
+  return null;
+}

package/ChartsRadialAxisHighlight/ChartsRotationAxisHighlight.d.mts

@@ -0,0 +1,9 @@
+import { type ChartsRadialAxisHighlightRotationType } from "./ChartsRadialAxisHighlight.types.mjs";
+import { type ChartsRadialAxisHighlightClasses } from "./chartsRadialAxisHighlightClasses.mjs";
+/**
+ * @ignore - internal component.
+ */
+export default function ChartsRotationAxisHighlight(props: {
+  type: ChartsRadialAxisHighlightRotationType;
+  classes: ChartsRadialAxisHighlightClasses;
+}): import("react/jsx-runtime").JSX.Element | null;

package/ChartsRadialAxisHighlight/ChartsRotationAxisHighlight.d.ts

@@ -0,0 +1,9 @@
+import { type ChartsRadialAxisHighlightRotationType } from "./ChartsRadialAxisHighlight.types.js";
+import { type ChartsRadialAxisHighlightClasses } from "./chartsRadialAxisHighlightClasses.js";
+/**
+ * @ignore - internal component.
+ */
+export default function ChartsRotationAxisHighlight(props: {
+  type: ChartsRadialAxisHighlightRotationType;
+  classes: ChartsRadialAxisHighlightClasses;
+}): import("react/jsx-runtime").JSX.Element | null;

package/ChartsRadialAxisHighlight/ChartsRotationAxisHighlight.js

@@ -0,0 +1,98 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ChartsRotationAxisHighlight;
+var React = _interopRequireWildcard(require("react"));
+var _scaleGuards = require("../internals/scaleGuards");
+var _useStore = require("../internals/store/useStore");
+var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPolarAxis");
+var _useChartPolarInteraction = require("../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors");
+var _ChartsRadialAxisHighlightPath = require("./ChartsRadialAxisHighlightPath");
+var _jsxRuntime = require("react/jsx-runtime");
+function polarToSvg(cx, cy, radius, angle) {
+  return [cx + radius * Math.sin(angle), cy - radius * Math.cos(angle)];
+}
+
+/**
+ * @ignore - internal component.
+ */
+function ChartsRotationAxisHighlight(props) {
+  const {
+    type,
+    classes
+  } = props;
+  const store = (0, _useStore.useStore)();
+  const {
+    cx,
+    cy
+  } = store.use(_useChartPolarAxis.selectorChartPolarCenter);
+  const {
+    axis: rotationAxes,
+    axisIds: rotationAxisIds
+  } = store.use(_useChartPolarAxis.selectorChartRotationAxis);
+  const {
+    axis: radiusAxes,
+    axisIds: radiusAxisIds
+  } = store.use(_useChartPolarAxis.selectorChartRadiusAxis);
+  const rotationIndex = store.use(_useChartPolarInteraction.selectorChartsInteractionRotationAxisIndex);
+  const rotationValue = store.use(_useChartPolarInteraction.selectorChartsInteractionRotationAxisValue);
+  if (rotationIndex === null || rotationIndex === -1) {
+    return null;
+  }
+  const rotationAxisId = rotationAxisIds[0];
+  const radiusAxisId = radiusAxisIds[0];
+  if (rotationAxisId === undefined || radiusAxisId === undefined) {
+    return null;
+  }
+  const rotationAxis = rotationAxes[rotationAxisId];
+  const radiusAxis = radiusAxes[radiusAxisId];
+  const rotationScale = rotationAxis.scale;
+  const radiusScale = radiusAxis.scale;
+  const innerRadius = radiusScale.range()[0];
+  const outerRadius = radiusScale.range()[1];
+  const angle = rotationScale(rotationValue);
+  if (angle === undefined) {
+    return null;
+  }
+  if (type === 'band') {
+    if (!(0, _scaleGuards.isOrdinalScale)(rotationScale)) {
+      return null;
+    }
+    const step = rotationScale.step();
+    const bandwidth = rotationScale.bandwidth();
+    // For point scale: bandwidth = 0, the band is centered on the value.
+    // For band scale: scale(value) returns the band start, the band size is bandwidth.
+    const startAngle = angle - (step - bandwidth) / 2;
+    const endAngle = startAngle + step;
+    const [x1Outer, y1Outer] = polarToSvg(cx, cy, outerRadius, startAngle);
+    const [x2Outer, y2Outer] = polarToSvg(cx, cy, outerRadius, endAngle);
+    const [x1Inner, y1Inner] = polarToSvg(cx, cy, innerRadius, startAngle);
+    const [x2Inner, y2Inner] = polarToSvg(cx, cy, innerRadius, endAngle);
+    const isLargeArc = Math.abs(endAngle - startAngle) >= Math.PI;
+    const innerArc = innerRadius > 0 ? `L ${x2Inner} ${y2Inner} A ${innerRadius} ${innerRadius} 0 ${isLargeArc ? 1 : 0} 0 ${x1Inner} ${y1Inner}` : `L ${cx} ${cy}`;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadialAxisHighlightPath.ChartsRadialAxisHighlightPath, {
+      d: `M ${x1Outer} ${y1Outer} A ${outerRadius} ${outerRadius} 0 ${isLargeArc ? 1 : 0} 1 ${x2Outer} ${y2Outer} ${innerArc} Z`,
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'band'
+      }
+    });
+  }
+  if (type === 'line') {
+    const lineAngle = (0, _scaleGuards.isOrdinalScale)(rotationScale) ? angle + rotationScale.bandwidth() / 2 : angle;
+    const [x1, y1] = polarToSvg(cx, cy, innerRadius, lineAngle);
+    const [x2, y2] = polarToSvg(cx, cy, outerRadius, lineAngle);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsRadialAxisHighlightPath.ChartsRadialAxisHighlightPath, {
+      d: `M ${x1} ${y1} L ${x2} ${y2}`,
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'line'
+      }
+    });
+  }
+  return null;
+}