@mui/x-charts 8.0.0-beta.2 → 8.0.0-beta.3

package/modern/LineChart/seriesConfig/index.js

@@ -2,13 +2,14 @@ import { getExtremumX, getExtremumY } from "./extremums.js";
 import seriesProcessor from "./seriesProcessor.js";
 import getColor from "./getColor.js";
 import legendGetter from "./legend.js";
-import tooltipGetter from "./tooltip.js";
+import tooltipGetter, { axisTooltipGetter } from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 export const seriesConfig = {
   colorProcessor: getColor,
   seriesProcessor,
   legendGetter,
   tooltipGetter,
+  axisTooltipGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
   getSeriesWithDefaultValues

package/modern/LineChart/seriesConfig/tooltip.d.ts

@@ -1,3 +1,4 @@
-import type { TooltipGetter } from '../../internals/plugins/models';
+import type { AxisTooltipGetter, TooltipGetter } from '../../internals/plugins/models';
 declare const tooltipGetter: TooltipGetter<'line'>;
+export declare const axisTooltipGetter: AxisTooltipGetter<'line', 'x' | 'y'>;
 export default tooltipGetter;

package/modern/LineChart/seriesConfig/tooltip.js

@@ -22,4 +22,10 @@ const tooltipGetter = params => {
     markType: series.labelMarkType
   };
 };
+export const axisTooltipGetter = series => {
+  return Object.values(series).map(s => ({
+    direction: 'x',
+    axisId: s.xAxisId
+  }));
+};
 export default tooltipGetter;

package/modern/PieChart/PieArc.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { SpringValue } from '@react-spring/web';
 import { PieItemId } from "../models/index.js";
 export interface PieArcClasses {
   /** Styles applied to the root element. */
@@ -21,16 +20,25 @@ interface PieArcOwnerState {
 export declare function getPieArcUtilityClass(slot: string): string;
 export declare const pieArcClasses: PieArcClasses;
 export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & PieArcOwnerState & {
-  cornerRadius: SpringValue<number>;
-  endAngle: SpringValue<number>;
-  innerRadius: SpringValue<number>;
+  cornerRadius: number;
+  endAngle: number;
+  innerRadius: number;
   onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
-  outerRadius: SpringValue<number>;
-  paddingAngle: SpringValue<number>;
-  startAngle: SpringValue<number>;
+  outerRadius: number;
+  paddingAngle: number;
+  startAngle: number;
+  /** @default false */
+  skipAnimation: boolean;
 };
-declare function PieArc(props: PieArcProps): React.JSX.Element;
-declare namespace PieArc {
-  var propTypes: any;
-}
+declare const PieArc: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGPathElement>, "ref" | "id"> & PieArcOwnerState & {
+  cornerRadius: number;
+  endAngle: number;
+  innerRadius: number;
+  onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
+  outerRadius: number;
+  paddingAngle: number;
+  startAngle: number;
+  /** @default false */
+  skipAnimation: boolean;
+} & React.RefAttributes<SVGPathElement>>;
 export { PieArc };

package/modern/PieChart/PieArc.js

@@ -2,15 +2,15 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle"];
+const _excluded = ["classes", "color", "dataIndex", "id", "isFaded", "isHighlighted", "onClick", "cornerRadius", "startAngle", "endAngle", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
-import { animated, to } from '@react-spring/web';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { useAnimatePieArc } from "../hooks/index.js";
+import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getPieArcUtilityClass(slot) {
@@ -30,7 +30,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getPieArcUtilityClass, classes);
 };
-const PieArcRoot = styled(animated.path, {
+const PieArcRoot = styled('path', {
   name: 'MuiPieArc',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.arc
@@ -39,23 +39,26 @@ const PieArcRoot = styled(animated.path, {
 }) => ({
   // Got to move stroke to an element prop instead of style.
   stroke: (theme.vars || theme).palette.background.paper,
-  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in, filter 0.2s ease-in'
+  transitionProperty: 'opacity, fill, filter',
+  transitionDuration: `${ANIMATION_DURATION_MS}ms`,
+  transitionTimingFunction: ANIMATION_TIMING_FUNCTION
 }));
-function PieArc(props) {
+const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) {
   const {
       classes: innerClasses,
       color,
-      cornerRadius,
       dataIndex,
-      endAngle,
       id,
-      innerRadius,
       isFaded,
       isHighlighted,
       onClick,
+      cornerRadius,
+      startAngle,
+      endAngle,
+      innerRadius,
       outerRadius,
       paddingAngle,
-      startAngle
+      skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = {
@@ -72,17 +75,17 @@ function PieArc(props) {
     seriesId: id,
     dataIndex
   });
+  const animatedProps = useAnimatePieArc({
+    cornerRadius,
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius,
+    paddingAngle,
+    skipAnimation,
+    ref
+  });
   return /*#__PURE__*/_jsx(PieArcRoot, _extends({
-    d: to([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], (sA, eA, pA, iR, oR, cR) => d3Arc().cornerRadius(cR)({
-      padAngle: pA,
-      startAngle: sA,
-      endAngle: eA,
-      innerRadius: iR,
-      outerRadius: oR
-    })),
-    visibility: to([startAngle, endAngle], (sA, eA) => sA === eA ? 'hidden' : 'visible')
-    // @ts-expect-error
-    ,
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
@@ -92,17 +95,27 @@ function PieArc(props) {
     filter: ownerState.isHighlighted ? 'brightness(120%)' : 'none',
     strokeWidth: 1,
     strokeLinejoin: "round"
-  }, other, interactionProps));
-}
+  }, other, interactionProps, animatedProps));
+});
 process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
+  cornerRadius: PropTypes.number.isRequired,
   dataIndex: PropTypes.number.isRequired,
+  endAngle: PropTypes.number.isRequired,
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  innerRadius: PropTypes.number.isRequired,
   isFaded: PropTypes.bool.isRequired,
-  isHighlighted: PropTypes.bool.isRequired
+  isHighlighted: PropTypes.bool.isRequired,
+  outerRadius: PropTypes.number.isRequired,
+  paddingAngle: PropTypes.number.isRequired,
+  /**
+   * @default false
+   */
+  skipAnimation: PropTypes.bool.isRequired,
+  startAngle: PropTypes.number.isRequired
 } : void 0;
 export { PieArc };

package/modern/PieChart/PieArcLabel.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { SpringValue } from '@react-spring/web';
 import { PieItemId } from "../models/seriesType/pie.js";
 export interface PieArcLabelClasses {
   /** Styles applied to the root element. */
@@ -8,6 +7,8 @@ export interface PieArcLabelClasses {
   highlighted: string;
   /** Styles applied to the root element when faded. */
   faded: string;
+  /** Styles applied to the root element when animation is not skipped. */
+  animate: string;
 }
 export type PieArcLabelClassKey = keyof PieArcLabelClasses;
 interface PieArcLabelOwnerState {
@@ -15,23 +16,31 @@ interface PieArcLabelOwnerState {
   color: string;
   isFaded: boolean;
   isHighlighted: boolean;
+  skipAnimation: boolean;
   classes?: Partial<PieArcLabelClasses>;
 }
 export declare function getPieArcLabelUtilityClass(slot: string): string;
 export declare const pieArcLabelClasses: PieArcLabelClasses;
 export type PieArcLabelProps = PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, 'ref' | 'color' | 'id'> & {
-  startAngle: SpringValue<number>;
-  endAngle: SpringValue<number>;
-  innerRadius: SpringValue<number>;
-  outerRadius: SpringValue<number>;
-  arcLabelRadius: SpringValue<number>;
-  cornerRadius: SpringValue<number>;
-  paddingAngle: SpringValue<number>;
-} & {
+  startAngle: number;
+  endAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  arcLabelRadius: number;
+  cornerRadius: number;
+  paddingAngle: number;
+  skipAnimation: boolean;
   formattedArcLabel?: string | null;
 };
-declare function PieArcLabel(props: PieArcLabelProps): React.JSX.Element;
-declare namespace PieArcLabel {
-  var propTypes: any;
-}
+declare const PieArcLabel: React.ForwardRefExoticComponent<PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, "ref" | "color" | "id"> & {
+  startAngle: number;
+  endAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  arcLabelRadius: number;
+  cornerRadius: number;
+  paddingAngle: number;
+  skipAnimation: boolean;
+  formattedArcLabel?: string | null;
+} & React.RefAttributes<SVGTextElement>>;
 export { PieArcLabel };

package/modern/PieChart/PieArcLabel.js

@@ -2,33 +2,34 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { animated, to } from '@react-spring/web';
-import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
+import { useAnimatePieArcLabel } from "../hooks/animation/useAnimatePieArcLabel.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getPieArcLabelUtilityClass(slot) {
   return generateUtilityClass('MuiPieArcLabel', slot);
 }
-export const pieArcLabelClasses = generateUtilityClasses('MuiPieArcLabel', ['root', 'highlighted', 'faded']);
+export const pieArcLabelClasses = generateUtilityClasses('MuiPieArcLabel', ['root', 'highlighted', 'faded', 'animate']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
     id,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    skipAnimation
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded', !skipAnimation && 'animate']
   };
   return composeClasses(slots, getPieArcLabelUtilityClass, classes);
 };
-const PieArcLabelRoot = styled(animated.text, {
+const PieArcLabelRoot = styled('text', {
   name: 'MuiPieArcLabel',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -38,29 +39,20 @@ const PieArcLabelRoot = styled(animated.text, {
   fill: (theme.vars || theme).palette.text.primary,
   textAnchor: 'middle',
   dominantBaseline: 'middle',
-  pointerEvents: 'none'
-}));
-/**
- * Helper to compute label position.
- * It's not an inline function because we need it in interpolation.
- */
-const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle, padAngle, arcLabelRadius, cornerRadius) => {
-  if (!formattedArcLabel) {
-    return 0;
-  }
-  const [x, y] = d3Arc().cornerRadius(cornerRadius).centroid({
-    padAngle,
-    startAngle,
-    endAngle,
-    innerRadius: arcLabelRadius,
-    outerRadius: arcLabelRadius
-  });
-  if (variable === 'x') {
-    return x;
+  pointerEvents: 'none',
+  animationName: 'animate-opacity',
+  animationDuration: '0s',
+  animationTimingFunction: ANIMATION_TIMING_FUNCTION,
+  [`&.${pieArcLabelClasses.animate}`]: {
+    animationDuration: `${ANIMATION_DURATION_MS}ms`
+  },
+  '@keyframes animate-opacity': {
+    from: {
+      opacity: 0
+    }
   }
-  return y;
-};
-function PieArcLabel(props) {
+}));
+const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, ref) {
   const {
       id,
       classes: innerClasses,
@@ -68,12 +60,13 @@ function PieArcLabel(props) {
       startAngle,
       endAngle,
       paddingAngle,
-      arcLabelRadius,
+      innerRadius,
+      outerRadius,
       cornerRadius,
       formattedArcLabel,
       isHighlighted,
       isFaded,
-      style
+      skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = {
@@ -81,33 +74,44 @@ function PieArcLabel(props) {
     classes: innerClasses,
     color,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    skipAnimation
   };
   const classes = useUtilityClasses(ownerState);
-  return (
-    /*#__PURE__*/
-    // @ts-expect-error
-    _jsx(PieArcLabelRoot, _extends({
-      className: classes.root
-    }, other, {
-      style: _extends({
-        x: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
-        y: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
-      }, style),
-      children: formattedArcLabel
-    }))
-  );
-}
+  const animatedProps = useAnimatePieArcLabel({
+    cornerRadius,
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius,
+    paddingAngle,
+    skipAnimation,
+    ref
+  });
+  return /*#__PURE__*/_jsx(PieArcLabelRoot, _extends({
+    className: classes.root
+  }, other, animatedProps, {
+    children: formattedArcLabel
+  }));
+});
 process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  arcLabelRadius: PropTypes.number.isRequired,
   classes: PropTypes.object,
   color: PropTypes.string.isRequired,
+  cornerRadius: PropTypes.number.isRequired,
+  endAngle: PropTypes.number.isRequired,
   formattedArcLabel: PropTypes.string,
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  innerRadius: PropTypes.number.isRequired,
   isFaded: PropTypes.bool.isRequired,
-  isHighlighted: PropTypes.bool.isRequired
+  isHighlighted: PropTypes.bool.isRequired,
+  outerRadius: PropTypes.number.isRequired,
+  paddingAngle: PropTypes.number.isRequired,
+  skipAnimation: PropTypes.bool.isRequired,
+  startAngle: PropTypes.number.isRequired
 } : void 0;
 export { PieArcLabel };

package/modern/PieChart/PieArcLabelPlot.js

@@ -2,12 +2,9 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],
-  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius"];
+const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTransition } from '@react-spring/web';
-import { getDefaultLabelTransitionConfig } from "./dataTransform/transition.js";
 import { useTransformData } from "./dataTransform/useTransformData.js";
 import { PieArcLabel } from "./PieArcLabel.js";
 import { getLabel } from "../internals/getLabel.js";
@@ -65,41 +62,26 @@ function PieArcLabelPlot(props) {
     faded,
     data
   });
-  const transition = useTransition(transformedData, _extends({}, getDefaultLabelTransitionConfig(skipAnimation), {
-    immediate: skipAnimation
-  }));
   if (data.length === 0) {
     return null;
   }
   const ArcLabel = slots?.pieArcLabel ?? PieArcLabel;
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: transition((_ref, item) => {
-      let {
-          startAngle,
-          endAngle,
-          paddingAngle: pA,
-          innerRadius: iR,
-          outerRadius: oR,
-          arcLabelRadius: aLR,
-          cornerRadius: cR
-        } = _ref,
-        style = _objectWithoutPropertiesLoose(_ref, _excluded2);
-      return /*#__PURE__*/_jsx(ArcLabel, _extends({
-        startAngle: startAngle,
-        endAngle: endAngle,
-        paddingAngle: pA,
-        innerRadius: iR,
-        outerRadius: oR,
-        arcLabelRadius: aLR,
-        cornerRadius: cR,
-        style: style,
-        id: id,
-        color: item.color,
-        isFaded: item.isFaded,
-        isHighlighted: item.isHighlighted,
-        formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
-      }, slotProps?.pieArcLabel));
-    })
+    children: transformedData.map(item => /*#__PURE__*/_jsx(ArcLabel, _extends({
+      startAngle: item.startAngle,
+      endAngle: item.endAngle,
+      paddingAngle: item.paddingAngle,
+      innerRadius: item.innerRadius,
+      outerRadius: item.outerRadius,
+      arcLabelRadius: item.arcLabelRadius,
+      cornerRadius: item.cornerRadius,
+      id: id,
+      color: item.color,
+      isFaded: item.isFaded,
+      isHighlighted: item.isHighlighted,
+      formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item),
+      skipAnimation: skipAnimation ?? false
+    }, slotProps?.pieArcLabel), item.id ?? item.dataIndex))
   }));
 }
 process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {

package/modern/PieChart/PieArcPlot.js

@@ -5,9 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTransition } from '@react-spring/web';
 import { PieArc } from "./PieArc.js";
-import { getDefaultTransitionConfig } from "./dataTransform/transition.js";
 import { useTransformData } from "./dataTransform/useTransformData.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function PieArcPlot(props) {
@@ -38,43 +36,32 @@ function PieArcPlot(props) {
     faded,
     data
   });
-  const transition = useTransition(transformedData, _extends({}, getDefaultTransitionConfig(skipAnimation), {
-    immediate: skipAnimation
-  }));
   if (data.length === 0) {
     return null;
   }
   const Arc = slots?.pieArc ?? PieArc;
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: transition(({
-      startAngle,
-      endAngle,
-      paddingAngle: pA,
-      innerRadius: iR,
-      outerRadius: oR,
-      cornerRadius: cR
-    }, item, _, index) => {
-      return /*#__PURE__*/_jsx(Arc, _extends({
-        startAngle: startAngle,
-        endAngle: endAngle,
-        paddingAngle: pA,
-        innerRadius: iR,
-        outerRadius: oR,
-        cornerRadius: cR,
-        id: id,
-        color: item.color,
-        dataIndex: index,
-        isFaded: item.isFaded,
-        isHighlighted: item.isHighlighted,
-        onClick: onItemClick && (event => {
-          onItemClick(event, {
-            type: 'pie',
-            seriesId: id,
-            dataIndex: index
-          }, item);
-        })
-      }, slotProps?.pieArc));
-    })
+    children: transformedData.map((item, index) => /*#__PURE__*/_jsx(Arc, _extends({
+      startAngle: item.startAngle,
+      endAngle: item.endAngle,
+      paddingAngle: item.paddingAngle,
+      innerRadius: item.innerRadius,
+      outerRadius: item.outerRadius,
+      cornerRadius: item.cornerRadius,
+      skipAnimation: skipAnimation ?? false,
+      id: id,
+      color: item.color,
+      dataIndex: index,
+      isFaded: item.isFaded,
+      isHighlighted: item.isHighlighted,
+      onClick: onItemClick && (event => {
+        onItemClick(event, {
+          type: 'pie',
+          seriesId: id,
+          dataIndex: index
+        }, item);
+      })
+    }, slotProps?.pieArc), item.dataIndex))
   }));
 }
 process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {

package/modern/PieChart/seriesConfig/tooltip.js

@@ -10,6 +10,9 @@ const tooltipGetter = params => {
     return null;
   }
   const point = series.data[identifier.dataIndex];
+  if (point == null) {
+    return null;
+  }
   const label = getLabel(point.label, 'tooltip');
   const value = _extends({}, point, {
     label

package/modern/ScatterChart/ScatterChart.js

@@ -229,6 +229,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -284,6 +285,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),

package/modern/SparkLineChart/SparkLineChart.js

@@ -292,6 +292,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -346,6 +347,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),

package/modern/colorPalettes/colorPalettes.js

@@ -1,5 +1,5 @@
-export const rainbowSurgePaletteLight = ['#4254FB', '#FFB219', '#54C690', '#FF5463', '#F287B3', '#2EAFFF', '#FD8731'];
-export const rainbowSurgePaletteDark = ['#273DFF', '#FAC04E', '#32ae6a', '#F3616E', '#F286B3', '#2EAFFF', '#FD8731'];
+export const rainbowSurgePaletteLight = ['#4254FB', '#FFB422', '#FA4F58', '#0DBEFF', '#22BF75', '#FA83B4', '#FF7511'];
+export const rainbowSurgePaletteDark = ['#495AFB', '#FFC758', '#F35865', '#30C8FF', '#44CE8D', '#F286B3', '#FF8C39'];
 export const rainbowSurgePalette = mode => mode === 'dark' ? rainbowSurgePaletteDark : rainbowSurgePaletteLight;
 export const blueberryTwilightPaletteLight = ['#02B2AF', '#2E96FF', '#B800D8', '#60009B', '#2731C8', '#03008D'];
 export const blueberryTwilightPaletteDark = ['#02B2AF', '#72CCFF', '#DA00FF', '#9001CB', '#2E96FF', '#3B48E0'];

package/modern/constants/index.d.ts

@@ -8,6 +8,6 @@ export declare const DEFAULT_MARGINS: {
   left: number;
   right: number;
 };
-export declare const DEFAULT_AXIS_SIZE_WIDTH = 30;
+export declare const DEFAULT_AXIS_SIZE_WIDTH = 45;
 export declare const DEFAULT_AXIS_SIZE_HEIGHT = 25;
 export declare const AXIS_LABEL_DEFAULT_HEIGHT = 20;

package/modern/constants/index.js

@@ -8,7 +8,7 @@ export const DEFAULT_MARGINS = {
   left: 20,
   right: 20
 };
-export const DEFAULT_AXIS_SIZE_WIDTH = 30;
+export const DEFAULT_AXIS_SIZE_WIDTH = 45;
 export const DEFAULT_AXIS_SIZE_HEIGHT = 25;
 
 // How many pixels to add to the default axis size if that axis has a label