@mui/x-charts 9.0.1 → 9.0.3

package/ChartsRadialGrid/ChartsRadiusGrid.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsRadiusGrid = ChartsRadiusGrid;
+var React = _interopRequireWildcard(require("react"));
+var _useTicks = require("../hooks/useTicks");
+var _styledComponents = require("./styledComponents");
+var _ChartsProvider = require("../context/ChartsProvider");
+var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPolarAxis");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @ignore - internal component.
+ */
+function ChartsRadiusGrid(props) {
+  const {
+    store
+  } = (0, _ChartsProvider.useChartsContext)();
+  const {
+    axis,
+    startAngle,
+    endAngle,
+    isFullCircle,
+    classes
+  } = props;
+  const {
+    cx,
+    cy
+  } = store.use(_useChartPolarAxis.selectorChartPolarCenter);
+  const {
+    scale,
+    tickNumber,
+    tickInterval,
+    tickSpacing
+  } = axis;
+  const ticks = (0, _useTicks.useTicks)({
+    scale,
+    tickNumber,
+    tickInterval,
+    tickSpacing,
+    direction: 'radius'
+  });
+  if (isFullCircle) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+      children: ticks.map(({
+        offset: radius
+      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridCircle, {
+        cx: cx,
+        cy: cy,
+        r: radius,
+        className: classes.radiusLine
+      }, `radius-${radius}`))
+    });
+  }
+  const startDx = Math.cos(startAngle - Math.PI / 2);
+  const startDy = Math.sin(startAngle - Math.PI / 2);
+  const endDx = Math.cos(endAngle - Math.PI / 2);
+  const endDy = Math.sin(endAngle - Math.PI / 2);
+  const isLargeArc = Math.abs(endAngle - startAngle) >= Math.PI;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: ticks.map(({
+      offset: radius
+    }) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridPath, {
+        d: `M${cx + startDx * radius},${cy + startDy * radius} A ${radius} ${radius} 0 ${isLargeArc ? 1 : 0} 1 ${cx + endDx * radius},${cy + endDy * radius}`,
+        className: classes.radiusLine
+      }, `radius-${radius}`);
+    })
+  });
+}

package/ChartsRadialGrid/ChartsRadiusGrid.mjs

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { useTicks } from "../hooks/useTicks.mjs";
+import { GridCircle, GridPath } from "./styledComponents.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
+import { selectorChartPolarCenter } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+export function ChartsRadiusGrid(props) {
+  const {
+    store
+  } = useChartsContext();
+  const {
+    axis,
+    startAngle,
+    endAngle,
+    isFullCircle,
+    classes
+  } = props;
+  const {
+    cx,
+    cy
+  } = store.use(selectorChartPolarCenter);
+  const {
+    scale,
+    tickNumber,
+    tickInterval,
+    tickSpacing
+  } = axis;
+  const ticks = useTicks({
+    scale,
+    tickNumber,
+    tickInterval,
+    tickSpacing,
+    direction: 'radius'
+  });
+  if (isFullCircle) {
+    return /*#__PURE__*/_jsx(React.Fragment, {
+      children: ticks.map(({
+        offset: radius
+      }) => /*#__PURE__*/_jsx(GridCircle, {
+        cx: cx,
+        cy: cy,
+        r: radius,
+        className: classes.radiusLine
+      }, `radius-${radius}`))
+    });
+  }
+  const startDx = Math.cos(startAngle - Math.PI / 2);
+  const startDy = Math.sin(startAngle - Math.PI / 2);
+  const endDx = Math.cos(endAngle - Math.PI / 2);
+  const endDy = Math.sin(endAngle - Math.PI / 2);
+  const isLargeArc = Math.abs(endAngle - startAngle) >= Math.PI;
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: ticks.map(({
+      offset: radius
+    }) => {
+      return /*#__PURE__*/_jsx(GridPath, {
+        d: `M${cx + startDx * radius},${cy + startDy * radius} A ${radius} ${radius} 0 ${isLargeArc ? 1 : 0} 1 ${cx + endDx * radius},${cy + endDy * radius}`,
+        className: classes.radiusLine
+      }, `radius-${radius}`);
+    })
+  });
+}

package/ChartsRadialGrid/ChartsRotationGrid.d.mts

@@ -0,0 +1,13 @@
+import { type ChartsRadialGridClasses } from "./chartsRadialGridClasses.mjs";
+import { type PolarAxisDefaultized } from "../models/axis.mjs";
+interface ChartsRotationGridProps {
+  axis: PolarAxisDefaultized<any, any, any>;
+  innerRadius: number;
+  outerRadius: number;
+  classes: Partial<ChartsRadialGridClasses>;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function ChartsRotationGrid(props: ChartsRotationGridProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/ChartsRadialGrid/ChartsRotationGrid.d.ts

@@ -0,0 +1,13 @@
+import { type ChartsRadialGridClasses } from "./chartsRadialGridClasses.js";
+import { type PolarAxisDefaultized } from "../models/axis.js";
+interface ChartsRotationGridProps {
+  axis: PolarAxisDefaultized<any, any, any>;
+  innerRadius: number;
+  outerRadius: number;
+  classes: Partial<ChartsRadialGridClasses>;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function ChartsRotationGrid(props: ChartsRotationGridProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/ChartsRadialGrid/ChartsRotationGrid.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsRotationGrid = ChartsRotationGrid;
+var React = _interopRequireWildcard(require("react"));
+var _useTicks = require("../hooks/useTicks");
+var _styledComponents = require("./styledComponents");
+var _ChartsProvider = require("../context/ChartsProvider");
+var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPolarAxis");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @ignore - internal component.
+ */
+function ChartsRotationGrid(props) {
+  const {
+    store
+  } = (0, _ChartsProvider.useChartsContext)();
+  const {
+    axis,
+    innerRadius,
+    outerRadius,
+    classes
+  } = props;
+  const {
+    cx,
+    cy
+  } = store.use(_useChartPolarAxis.selectorChartPolarCenter);
+  const {
+    scale,
+    tickNumber,
+    tickInterval,
+    tickSpacing
+  } = axis;
+  const ticks = (0, _useTicks.useTicks)({
+    scale,
+    tickNumber,
+    tickInterval,
+    tickSpacing,
+    direction: 'rotation'
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: ticks.map(({
+      value,
+      offset
+    }) => {
+      const angle = offset - Math.PI / 2;
+      const dx = Math.cos(angle);
+      const dy = Math.sin(angle);
+      const x1 = cx + innerRadius * dx;
+      const y1 = cy + innerRadius * dy;
+      const x2 = cx + outerRadius * dx;
+      const y2 = cy + outerRadius * dy;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridLine, {
+        x1: x1,
+        y1: y1,
+        x2: x2,
+        y2: y2,
+        className: classes.rotationLine
+      }, `rotation-${value?.getTime?.() ?? value}`);
+    })
+  });
+}

package/ChartsRadialGrid/ChartsRotationGrid.mjs

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { useTicks } from "../hooks/useTicks.mjs";
+import { GridLine } from "./styledComponents.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
+import { selectorChartPolarCenter } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+export function ChartsRotationGrid(props) {
+  const {
+    store
+  } = useChartsContext();
+  const {
+    axis,
+    innerRadius,
+    outerRadius,
+    classes
+  } = props;
+  const {
+    cx,
+    cy
+  } = store.use(selectorChartPolarCenter);
+  const {
+    scale,
+    tickNumber,
+    tickInterval,
+    tickSpacing
+  } = axis;
+  const ticks = useTicks({
+    scale,
+    tickNumber,
+    tickInterval,
+    tickSpacing,
+    direction: 'rotation'
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: ticks.map(({
+      value,
+      offset
+    }) => {
+      const angle = offset - Math.PI / 2;
+      const dx = Math.cos(angle);
+      const dy = Math.sin(angle);
+      const x1 = cx + innerRadius * dx;
+      const y1 = cy + innerRadius * dy;
+      const x2 = cx + outerRadius * dx;
+      const y2 = cy + outerRadius * dy;
+      return /*#__PURE__*/_jsx(GridLine, {
+        x1: x1,
+        y1: y1,
+        x2: x2,
+        y2: y2,
+        className: classes.rotationLine
+      }, `rotation-${value?.getTime?.() ?? value}`);
+    })
+  });
+}

package/ChartsRadialGrid/chartsRadialGridClasses.d.mts

@@ -0,0 +1,13 @@
+export interface ChartsRadialGridClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to every line element. */
+  line: string;
+  /** Styles applied to rotation (spoke) lines. */
+  rotationLine: string;
+  /** Styles applied to radius (circular) lines. */
+  radiusLine: string;
+}
+export type ChartsRadialGridClassKey = keyof ChartsRadialGridClasses;
+export declare function getChartsRadialGridUtilityClass(slot: string): string;
+export declare const chartsRadialGridClasses: ChartsRadialGridClasses;

package/ChartsRadialGrid/chartsRadialGridClasses.d.ts

@@ -0,0 +1,13 @@
+export interface ChartsRadialGridClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to every line element. */
+  line: string;
+  /** Styles applied to rotation (spoke) lines. */
+  rotationLine: string;
+  /** Styles applied to radius (circular) lines. */
+  radiusLine: string;
+}
+export type ChartsRadialGridClassKey = keyof ChartsRadialGridClasses;
+export declare function getChartsRadialGridUtilityClass(slot: string): string;
+export declare const chartsRadialGridClasses: ChartsRadialGridClasses;

package/ChartsRadialGrid/chartsRadialGridClasses.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.chartsRadialGridClasses = void 0;
+exports.getChartsRadialGridUtilityClass = getChartsRadialGridUtilityClass;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getChartsRadialGridUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsRadialGrid', slot);
+}
+const chartsRadialGridClasses = exports.chartsRadialGridClasses = (0, _generateUtilityClasses.default)('MuiChartsRadialGrid', ['root', 'line', 'rotationLine', 'radiusLine']);

package/ChartsRadialGrid/chartsRadialGridClasses.mjs

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getChartsRadialGridUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsRadialGrid', slot);
+}
+export const chartsRadialGridClasses = generateUtilityClasses('MuiChartsRadialGrid', ['root', 'line', 'rotationLine', 'radiusLine']);

package/ChartsRadialGrid/index.d.mts

@@ -0,0 +1,3 @@
+export { type ChartsRadialGridProps, ChartsRadialGrid as Unstable_ChartsRadialGrid } from "./ChartsRadialGrid.mjs";
+export { chartsRadialGridClasses } from "./chartsRadialGridClasses.mjs";
+export type { ChartsRadialGridClasses, ChartsRadialGridClassKey } from "./chartsRadialGridClasses.mjs";

package/ChartsRadialGrid/index.d.ts

@@ -0,0 +1,3 @@
+export { type ChartsRadialGridProps, ChartsRadialGrid as Unstable_ChartsRadialGrid } from "./ChartsRadialGrid.js";
+export { chartsRadialGridClasses } from "./chartsRadialGridClasses.js";
+export type { ChartsRadialGridClasses, ChartsRadialGridClassKey } from "./chartsRadialGridClasses.js";

package/ChartsRadialGrid/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Unstable_ChartsRadialGrid", {
+  enumerable: true,
+  get: function () {
+    return _ChartsRadialGrid.ChartsRadialGrid;
+  }
+});
+Object.defineProperty(exports, "chartsRadialGridClasses", {
+  enumerable: true,
+  get: function () {
+    return _chartsRadialGridClasses.chartsRadialGridClasses;
+  }
+});
+var _ChartsRadialGrid = require("./ChartsRadialGrid");
+var _chartsRadialGridClasses = require("./chartsRadialGridClasses");

package/ChartsRadialGrid/index.mjs

@@ -0,0 +1,2 @@
+export { ChartsRadialGrid as Unstable_ChartsRadialGrid } from "./ChartsRadialGrid.mjs";
+export { chartsRadialGridClasses } from "./chartsRadialGridClasses.mjs";

package/ChartsRadialGrid/styledComponents.d.mts

@@ -0,0 +1,4 @@
+export declare const GridRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;
+export declare const GridLine: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGLineElementAttributes<SVGLineElement>, keyof import("react").SVGLineElementAttributes<SVGLineElement>>, {}>;
+export declare const GridPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGPathElement>, keyof import("react").SVGProps<SVGPathElement>>, {}>;
+export declare const GridCircle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGCircleElement>, keyof import("react").SVGProps<SVGCircleElement>>, {}>;

package/ChartsRadialGrid/styledComponents.d.ts

@@ -0,0 +1,4 @@
+export declare const GridRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;
+export declare const GridLine: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGLineElementAttributes<SVGLineElement>, keyof import("react").SVGLineElementAttributes<SVGLineElement>>, {}>;
+export declare const GridPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGPathElement>, keyof import("react").SVGProps<SVGPathElement>>, {}>;
+export declare const GridCircle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGCircleElement>, keyof import("react").SVGProps<SVGCircleElement>>, {}>;

package/ChartsRadialGrid/styledComponents.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridRoot = exports.GridPath = exports.GridLine = exports.GridCircle = void 0;
+var _styles = require("@mui/material/styles");
+var _chartsRadialGridClasses = require("./chartsRadialGridClasses");
+const GridRoot = exports.GridRoot = (0, _styles.styled)('g', {
+  name: 'MuiChartsRadialGrid',
+  slot: 'Root',
+  overridesResolver: (props, styles) => [{
+    [`& .${_chartsRadialGridClasses.chartsRadialGridClasses.rotationLine}`]: styles.rotationLine
+  }, {
+    [`& .${_chartsRadialGridClasses.chartsRadialGridClasses.radiusLine}`]: styles.radiusLine
+  }, styles.root]
+})({});
+const GridLine = exports.GridLine = (0, _styles.styled)('line', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
+  theme
+}) => ({
+  stroke: (theme.vars || theme).palette.divider,
+  shapeRendering: 'crispEdges',
+  strokeWidth: 1,
+  fill: 'none'
+}));
+const GridPath = exports.GridPath = (0, _styles.styled)('path', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
+  theme
+}) => ({
+  stroke: (theme.vars || theme).palette.divider,
+  shapeRendering: 'crispEdges',
+  strokeWidth: 1,
+  fill: 'none'
+}));
+const GridCircle = exports.GridCircle = (0, _styles.styled)('circle', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
+  theme
+}) => ({
+  stroke: (theme.vars || theme).palette.divider,
+  shapeRendering: 'crispEdges',
+  strokeWidth: 1,
+  fill: 'none'
+}));

package/ChartsRadialGrid/styledComponents.mjs

@@ -0,0 +1,44 @@
+import { styled } from '@mui/material/styles';
+import { chartsRadialGridClasses } from "./chartsRadialGridClasses.mjs";
+export const GridRoot = styled('g', {
+  name: 'MuiChartsRadialGrid',
+  slot: 'Root',
+  overridesResolver: (props, styles) => [{
+    [`& .${chartsRadialGridClasses.rotationLine}`]: styles.rotationLine
+  }, {
+    [`& .${chartsRadialGridClasses.radiusLine}`]: styles.radiusLine
+  }, styles.root]
+})({});
+export const GridLine = styled('line', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
+  theme
+}) => ({
+  stroke: (theme.vars || theme).palette.divider,
+  shapeRendering: 'crispEdges',
+  strokeWidth: 1,
+  fill: 'none'
+}));
+export const GridPath = styled('path', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
+  theme
+}) => ({
+  stroke: (theme.vars || theme).palette.divider,
+  shapeRendering: 'crispEdges',
+  strokeWidth: 1,
+  fill: 'none'
+}));
+export const GridCircle = styled('circle', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
+  theme
+}) => ({
+  stroke: (theme.vars || theme).palette.divider,
+  shapeRendering: 'crispEdges',
+  strokeWidth: 1,
+  fill: 'none'
+}));

package/ChartsRadiusAxis/ChartsRadiusAxis.d.mts

@@ -0,0 +1,48 @@
+import type { AxisId } from "../models/axis.mjs";
+import { type ChartsRadialAxisClasses } from "./chartsRadiusAxisClasses.mjs";
+export interface ChartsRadiusAxisProps {
+  /**
+   * Id of the radius axis to render.
+   * If not provided, it will use the first defined radius axis.
+   */
+  axisId?: AxisId;
+  /**
+   * The position of the axis in polar coordinates.
+   * It can be 'start', 'end', or a specific angle in degrees.
+   * @default 'start'
+   */
+  position?: 'start' | 'end' | number;
+  /**
+   * If `true`, the axis line is not rendered.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If `true`, the ticks are not rendered.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /**
+   * The size (in pixels) of the tick marks.
+   * @default 6
+   */
+  tickSize?: number;
+  /**
+   * Set the position of the tick labels relative to the axis line.
+   * The before/after is defined based on clockwise direction.
+   * @default 'after'
+   */
+  tickLabelPosition?: 'center' | 'after' | 'before';
+  /**
+   * Set the position of the tick relative to the axis line.
+   * The before/after is defined based on clockwise direction.
+   * @default 'after'
+   */
+  tickPosition?: 'after' | 'before';
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
+  classes?: Partial<ChartsRadialAxisClasses>;
+}
+export declare function ChartsRadiusAxis(props: ChartsRadiusAxisProps): import("react/jsx-runtime").JSX.Element | null;

package/ChartsRadiusAxis/ChartsRadiusAxis.d.ts

@@ -0,0 +1,48 @@
+import type { AxisId } from "../models/axis.js";
+import { type ChartsRadialAxisClasses } from "./chartsRadiusAxisClasses.js";
+export interface ChartsRadiusAxisProps {
+  /**
+   * Id of the radius axis to render.
+   * If not provided, it will use the first defined radius axis.
+   */
+  axisId?: AxisId;
+  /**
+   * The position of the axis in polar coordinates.
+   * It can be 'start', 'end', or a specific angle in degrees.
+   * @default 'start'
+   */
+  position?: 'start' | 'end' | number;
+  /**
+   * If `true`, the axis line is not rendered.
+   * @default false
+   */
+  disableLine?: boolean;
+  /**
+   * If `true`, the ticks are not rendered.
+   * @default false
+   */
+  disableTicks?: boolean;
+  /**
+   * The size (in pixels) of the tick marks.
+   * @default 6
+   */
+  tickSize?: number;
+  /**
+   * Set the position of the tick labels relative to the axis line.
+   * The before/after is defined based on clockwise direction.
+   * @default 'after'
+   */
+  tickLabelPosition?: 'center' | 'after' | 'before';
+  /**
+   * Set the position of the tick relative to the axis line.
+   * The before/after is defined based on clockwise direction.
+   * @default 'after'
+   */
+  tickPosition?: 'after' | 'before';
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
+  classes?: Partial<ChartsRadialAxisClasses>;
+}
+export declare function ChartsRadiusAxis(props: ChartsRadiusAxisProps): import("react/jsx-runtime").JSX.Element | null;