npm - @mui/x-charts - Versions diffs - 9.3.0 → 9.4.0 - Mend

@mui/x-charts 9.3.0 → 9.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (168) hide show

package/ChartsReferenceLine/ChartsYReferenceLine.js CHANGED Viewed

@@ -75,6 +75,8 @@ function ChartsYReferenceLine(props) {
     axisId
   } = props;
   const {
+    top,
+    height,
     left,
     width
   } = (0, _hooks.useDrawingArea)();
@@ -86,6 +88,9 @@ function ChartsYReferenceLine(props) {
     }
     return null;
   }
+  if (yPosition < top || yPosition > top + height) {
+    return null;
+  }
   const d = `M ${left} ${yPosition} l ${width} 0`;
   const classes = getYReferenceLineClasses(inClasses);
   const textParams = (0, _extends2.default)({

package/ChartsReferenceLine/ChartsYReferenceLine.mjs CHANGED Viewed

@@ -68,6 +68,8 @@ function ChartsYReferenceLine(props) {
     axisId
   } = props;
   const {
+    top,
+    height,
     left,
     width
   } = useDrawingArea();
@@ -79,6 +81,9 @@ function ChartsYReferenceLine(props) {
     }
     return null;
   }
+  if (yPosition < top || yPosition > top + height) {
+    return null;
+  }
   const d = `M ${left} ${yPosition} l ${width} 0`;
   const classes = getYReferenceLineClasses(inClasses);
   const textParams = _extends({

package/ChartsTooltip/ChartTooltip.types.d.mts CHANGED Viewed

@@ -1,16 +1,17 @@
 import { type ChartsTooltipProps } from "./ChartsTooltip.mjs";
 import { type TriggerOptions } from "./utils.mjs";
+import type { TooltipPropsOverrides } from "../models/chartsSlotsComponentsProps.mjs";
 export interface ChartsTooltipSlots<T extends TriggerOptions = TriggerOptions> {
   /**
    * Custom component for the tooltip popper.
    * @default ChartsTooltipRoot
    */
-  tooltip?: React.ElementType<ChartsTooltipProps<T>>;
+  tooltip?: React.ElementType<ChartsTooltipProps<T> & TooltipPropsOverrides>;
 }
 export interface ChartsTooltipSlotProps<T extends TriggerOptions = TriggerOptions> {
   /**
    * Custom component for the tooltip popper.
    * @default ChartsTooltipRoot
    */
-  tooltip?: Partial<ChartsTooltipProps<T>>;
+  tooltip?: Partial<ChartsTooltipProps<T>> & TooltipPropsOverrides;
 }

package/ChartsTooltip/ChartTooltip.types.d.ts CHANGED Viewed

@@ -1,16 +1,17 @@
 import { type ChartsTooltipProps } from "./ChartsTooltip.js";
 import { type TriggerOptions } from "./utils.js";
+import type { TooltipPropsOverrides } from "../models/chartsSlotsComponentsProps.js";
 export interface ChartsTooltipSlots<T extends TriggerOptions = TriggerOptions> {
   /**
    * Custom component for the tooltip popper.
    * @default ChartsTooltipRoot
    */
-  tooltip?: React.ElementType<ChartsTooltipProps<T>>;
+  tooltip?: React.ElementType<ChartsTooltipProps<T> & TooltipPropsOverrides>;
 }
 export interface ChartsTooltipSlotProps<T extends TriggerOptions = TriggerOptions> {
   /**
    * Custom component for the tooltip popper.
    * @default ChartsTooltipRoot
    */
-  tooltip?: Partial<ChartsTooltipProps<T>>;
+  tooltip?: Partial<ChartsTooltipProps<T>> & TooltipPropsOverrides;
 }

package/ChartsTooltip/useAxesTooltip.js CHANGED Viewed

@@ -137,11 +137,11 @@ function useAxesTooltip(params) {
       }) => axisDirection === 'x' && axisId === providedXAxisId || axisDirection === 'y' && axisId === providedYAxisId);
       // Test if the series uses the default axis
       if (tooltipItemIndex >= 0) {
-        const zAxisId = 'zAxisId' in seriesToAdd ? seriesToAdd.zAxisId : zAxisIds[0];
+        const colorAxisId = 'colorAxisId' in seriesToAdd && seriesToAdd.colorAxisId || 'zAxisId' in seriesToAdd && seriesToAdd.zAxisId || zAxisIds[0];
         const {
           dataIndex
         } = tooltipAxes[tooltipItemIndex];
-        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[providedXAxisId], yAxis[providedYAxisId], zAxisId ? zAxis[zAxisId] : undefined)(dataIndex) ?? '';
+        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[providedXAxisId], yAxis[providedYAxisId], colorAxisId ? zAxis[colorAxisId] : undefined)(dataIndex) ?? '';
         const rawValue = seriesToAdd.data[dataIndex] ?? null;
         const formattedLabel = (0, _getLabel.getLabel)(seriesToAdd.label, 'tooltip') ?? null;
         let value;

package/ChartsTooltip/useAxesTooltip.mjs CHANGED Viewed

@@ -132,11 +132,11 @@ export function useAxesTooltip(params) {
       }) => axisDirection === 'x' && axisId === providedXAxisId || axisDirection === 'y' && axisId === providedYAxisId);
       // Test if the series uses the default axis
       if (tooltipItemIndex >= 0) {
-        const zAxisId = 'zAxisId' in seriesToAdd ? seriesToAdd.zAxisId : zAxisIds[0];
+        const colorAxisId = 'colorAxisId' in seriesToAdd && seriesToAdd.colorAxisId || 'zAxisId' in seriesToAdd && seriesToAdd.zAxisId || zAxisIds[0];
         const {
           dataIndex
         } = tooltipAxes[tooltipItemIndex];
-        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[providedXAxisId], yAxis[providedYAxisId], zAxisId ? zAxis[zAxisId] : undefined)(dataIndex) ?? '';
+        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[providedXAxisId], yAxis[providedYAxisId], colorAxisId ? zAxis[colorAxisId] : undefined)(dataIndex) ?? '';
         const rawValue = seriesToAdd.data[dataIndex] ?? null;
         const formattedLabel = getLabel(seriesToAdd.label, 'tooltip') ?? null;
         let value;

package/ChartsTooltip/useItemTooltip.js CHANGED Viewed

@@ -50,14 +50,14 @@ function useInternalItemTooltip() {
   const yAxisId = (0, _isCartesian.isCartesianSeries)(itemSeries) ? itemSeries.yAxisId ?? yAxisIds[0] : undefined;
   const radiusAxisId = (0, _isPolar.isPolarSeries)(itemSeries) ? ('radiusAxisId' in itemSeries ? itemSeries.radiusAxisId : undefined) ?? radiusAxisIds[0] : undefined;
   const rotationAxisId = (0, _isPolar.isPolarSeries)(itemSeries) ? ('rotationAxisId' in itemSeries ? itemSeries.rotationAxisId : undefined) ?? rotationAxisIds[0] : undefined;
-  const zAxisId = 'zAxisId' in itemSeries ? itemSeries.zAxisId ?? zAxisIds[0] : zAxisIds[0];
+  const colorAxisId = ('colorAxisId' in itemSeries ? itemSeries.colorAxisId : undefined) ?? ('zAxisId' in itemSeries ? itemSeries.zAxisId : undefined) ?? zAxisIds[0];
   const mainAxis =
   // eslint-disable-next-line no-nested-ternary
   rotationAxisId !== undefined ? rotationAxis[rotationAxisId] : xAxisId !== undefined ? xAxis[xAxisId] : undefined;
   const secondAxis =
   // eslint-disable-next-line no-nested-ternary
   radiusAxisId !== undefined ? radiusAxis[radiusAxisId] : yAxisId !== undefined ? yAxis[yAxisId] : undefined;
-  const getColor = seriesConfig[itemSeries.type].colorProcessor(itemSeries, mainAxis, secondAxis, zAxisId !== undefined ? zAxis[zAxisId] : undefined);
+  const getColor = seriesConfig[itemSeries.type].colorProcessor(itemSeries, mainAxis, secondAxis, colorAxisId !== undefined ? zAxis[colorAxisId] : undefined);
   const axesConfig = {};
   if (xAxisId !== undefined) {
     axesConfig.x = xAxis[xAxisId];

package/ChartsTooltip/useItemTooltip.mjs CHANGED Viewed

@@ -44,14 +44,14 @@ export function useInternalItemTooltip() {
   const yAxisId = isCartesianSeries(itemSeries) ? itemSeries.yAxisId ?? yAxisIds[0] : undefined;
   const radiusAxisId = isPolarSeries(itemSeries) ? ('radiusAxisId' in itemSeries ? itemSeries.radiusAxisId : undefined) ?? radiusAxisIds[0] : undefined;
   const rotationAxisId = isPolarSeries(itemSeries) ? ('rotationAxisId' in itemSeries ? itemSeries.rotationAxisId : undefined) ?? rotationAxisIds[0] : undefined;
-  const zAxisId = 'zAxisId' in itemSeries ? itemSeries.zAxisId ?? zAxisIds[0] : zAxisIds[0];
+  const colorAxisId = ('colorAxisId' in itemSeries ? itemSeries.colorAxisId : undefined) ?? ('zAxisId' in itemSeries ? itemSeries.zAxisId : undefined) ?? zAxisIds[0];
   const mainAxis =
   // eslint-disable-next-line no-nested-ternary
   rotationAxisId !== undefined ? rotationAxis[rotationAxisId] : xAxisId !== undefined ? xAxis[xAxisId] : undefined;
   const secondAxis =
   // eslint-disable-next-line no-nested-ternary
   radiusAxisId !== undefined ? radiusAxis[radiusAxisId] : yAxisId !== undefined ? yAxis[yAxisId] : undefined;
-  const getColor = seriesConfig[itemSeries.type].colorProcessor(itemSeries, mainAxis, secondAxis, zAxisId !== undefined ? zAxis[zAxisId] : undefined);
+  const getColor = seriesConfig[itemSeries.type].colorProcessor(itemSeries, mainAxis, secondAxis, colorAxisId !== undefined ? zAxis[colorAxisId] : undefined);
   const axesConfig = {};
   if (xAxisId !== undefined) {
     axesConfig.x = xAxis[xAxisId];