@mui/x-charts-premium 9.0.4 → 9.1.0

package/RadialLineChart/RadialArea.js

@@ -11,6 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _internals = require("@mui/x-charts/internals");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "color", "hidden", "curve", "points"];
 function RadialArea(props) {
@@ -22,12 +23,23 @@ function RadialArea(props) {
       points
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const identifier = React.useMemo(() => ({
+    type: 'radialLine',
+    seriesId
+  }), [seriesId]);
+  const highlightState = (0, _hooks.useItemHighlightState)(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const d = (0, _d3Shape.areaRadial)().angle(p => p.angle).innerRadius(p => p.baseRadius).outerRadius(p => p.radius).curve((0, _internals.getCurveFactory)(curve))(points) || '';
+  const fadedOpacity = isFaded ? 0.3 : 1;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({
     "data-series": seriesId,
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined,
     d: d,
     fill: color,
     stroke: "none",
-    opacity: hidden ? 0 : 1
+    filter: isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: hidden ? 0 : fadedOpacity
   }, other));
 }

package/RadialLineChart/RadialArea.mjs

@@ -4,6 +4,7 @@ const _excluded = ["seriesId", "color", "hidden", "curve", "points"];
 import * as React from 'react';
 import { areaRadial as d3AreaRadial } from '@mui/x-charts-vendor/d3-shape';
 import { getCurveFactory } from '@mui/x-charts/internals';
+import { useItemHighlightState } from "../hooks/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 function RadialArea(props) {
   const {
@@ -14,13 +15,24 @@ function RadialArea(props) {
       points
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const identifier = React.useMemo(() => ({
+    type: 'radialLine',
+    seriesId
+  }), [seriesId]);
+  const highlightState = useItemHighlightState(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const d = d3AreaRadial().angle(p => p.angle).innerRadius(p => p.baseRadius).outerRadius(p => p.radius).curve(getCurveFactory(curve))(points) || '';
+  const fadedOpacity = isFaded ? 0.3 : 1;
   return /*#__PURE__*/_jsx("path", _extends({
     "data-series": seriesId,
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined,
     d: d,
     fill: color,
     stroke: "none",
-    opacity: hidden ? 0 : 1
+    filter: isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: hidden ? 0 : fadedOpacity
   }, other));
 }
 export { RadialArea };

package/RadialLineChart/RadialLine.js

@@ -11,6 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _internals = require("@mui/x-charts/internals");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "color", "hidden", "points", "curve"];
 function RadialLine(props) {
@@ -22,12 +23,23 @@ function RadialLine(props) {
       curve
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const identifier = React.useMemo(() => ({
+    type: 'radialLine',
+    seriesId
+  }), [seriesId]);
+  const highlightState = (0, _hooks.useItemHighlightState)(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const d = (0, _d3Shape.lineRadial)().angle(p => p.angle).radius(p => p.radius).curve((0, _internals.getCurveFactory)(curve))(points) || '';
+  const fadedOpacity = isFaded ? 0.3 : 1;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({
     "data-series": seriesId,
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined,
     d: d,
     stroke: color,
     fill: "none",
-    opacity: hidden ? 0 : 1
+    filter: isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: hidden ? 0 : fadedOpacity
   }, other));
 }

package/RadialLineChart/RadialLine.mjs

@@ -4,6 +4,7 @@ const _excluded = ["seriesId", "color", "hidden", "points", "curve"];
 import * as React from 'react';
 import { lineRadial as d3LineRadial } from '@mui/x-charts-vendor/d3-shape';
 import { getCurveFactory } from '@mui/x-charts/internals';
+import { useItemHighlightState } from "../hooks/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 function RadialLine(props) {
   const {
@@ -14,13 +15,24 @@ function RadialLine(props) {
       curve
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const identifier = React.useMemo(() => ({
+    type: 'radialLine',
+    seriesId
+  }), [seriesId]);
+  const highlightState = useItemHighlightState(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const d = d3LineRadial().angle(p => p.angle).radius(p => p.radius).curve(getCurveFactory(curve))(points) || '';
+  const fadedOpacity = isFaded ? 0.3 : 1;
   return /*#__PURE__*/_jsx("path", _extends({
     "data-series": seriesId,
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined,
     d: d,
     stroke: color,
     fill: "none",
-    opacity: hidden ? 0 : 1
+    filter: isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: hidden ? 0 : fadedOpacity
   }, other));
 }
 export { RadialLine };

package/RadialLineChart/RadialLineChart.d.mts

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { type ChartsSlots, type ChartsSlotProps } from '@mui/x-charts/internals';
 import { type ChartsRadialGridProps } from '@mui/x-charts/ChartsRadialGrid';
+import { type ChartsRadialAxisHighlightProps } from '@mui/x-charts/ChartsRadialAxisHighlight';
 import { type ChartsLegendSlots, type ChartsLegendSlotProps } from "../ChartsLegend/index.mjs";
 import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/index.mjs";
 import { type RadialLineChartPluginSignatures } from "./RadialLineChart.plugins.mjs";
 import { type ChartsOverlayProps, type ChartsOverlaySlots, type ChartsOverlaySlotProps } from "../ChartsOverlay/index.mjs";
 import type { LinePlotSlots, LinePlotSlotProps, LineSeries } from "../LineChart/index.mjs";
 import { type ChartsToolbarSlots, type ChartsToolbarSlotProps } from "../Toolbar/index.mjs";
+import { type RadialLineHighlightPlotSlots, type RadialLineHighlightPlotSlotProps } from "./RadialLineHighlightPlot.mjs";
 import { type ChartsRadialDataProviderPremiumProps } from "../ChartsRadialDataProviderPremium/index.mjs";
-export interface RadialLineChartSlots extends LinePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
-export interface RadialLineChartSlotProps extends LinePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
+export interface RadialLineChartSlots extends LinePlotSlots, RadialLineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface RadialLineChartSlotProps extends LinePlotSlotProps, RadialLineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export interface RadialLineChartProps extends Omit<ChartsRadialDataProviderPremiumProps<'radialLine', RadialLineChartPluginSignatures>, 'series' | 'plugins' | 'zAxis' | 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the line chart.
@@ -17,9 +19,15 @@ export interface RadialLineChartProps extends Omit<ChartsRadialDataProviderPremi
    */
   series: Readonly<LineSeries[]>;
   /**
-   * Option to display a cartesian grid in the background.
+   * Option to display a radial grid in the background.
    */
   grid?: Pick<ChartsRadialGridProps, 'radius' | 'rotation'>;
+  /**
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+   * @default { rotation: 'line' }
+   */
+  axisHighlight?: ChartsRadialAxisHighlightProps;
   /**
    * If `true`, the legend is not rendered.
    */

package/RadialLineChart/RadialLineChart.d.ts

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { type ChartsSlots, type ChartsSlotProps } from '@mui/x-charts/internals';
 import { type ChartsRadialGridProps } from '@mui/x-charts/ChartsRadialGrid';
+import { type ChartsRadialAxisHighlightProps } from '@mui/x-charts/ChartsRadialAxisHighlight';
 import { type ChartsLegendSlots, type ChartsLegendSlotProps } from "../ChartsLegend/index.js";
 import { type ChartsTooltipSlots, type ChartsTooltipSlotProps } from "../ChartsTooltip/index.js";
 import { type RadialLineChartPluginSignatures } from "./RadialLineChart.plugins.js";
 import { type ChartsOverlayProps, type ChartsOverlaySlots, type ChartsOverlaySlotProps } from "../ChartsOverlay/index.js";
 import type { LinePlotSlots, LinePlotSlotProps, LineSeries } from "../LineChart/index.js";
 import { type ChartsToolbarSlots, type ChartsToolbarSlotProps } from "../Toolbar/index.js";
+import { type RadialLineHighlightPlotSlots, type RadialLineHighlightPlotSlotProps } from "./RadialLineHighlightPlot.js";
 import { type ChartsRadialDataProviderPremiumProps } from "../ChartsRadialDataProviderPremium/index.js";
-export interface RadialLineChartSlots extends LinePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
-export interface RadialLineChartSlotProps extends LinePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
+export interface RadialLineChartSlots extends LinePlotSlots, RadialLineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface RadialLineChartSlotProps extends LinePlotSlotProps, RadialLineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export interface RadialLineChartProps extends Omit<ChartsRadialDataProviderPremiumProps<'radialLine', RadialLineChartPluginSignatures>, 'series' | 'plugins' | 'zAxis' | 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the line chart.
@@ -17,9 +19,15 @@ export interface RadialLineChartProps extends Omit<ChartsRadialDataProviderPremi
    */
   series: Readonly<LineSeries[]>;
   /**
-   * Option to display a cartesian grid in the background.
+   * Option to display a radial grid in the background.
    */
   grid?: Pick<ChartsRadialGridProps, 'radius' | 'rotation'>;
+  /**
+   * The configuration of axes highlight.
+   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+   * @default { rotation: 'line' }
+   */
+  axisHighlight?: ChartsRadialAxisHighlightProps;
   /**
    * If `true`, the legend is not rendered.
    */