diff --git a/packages/core/src/components/cartesian/markers/CartesianMarkersItem.js b/packages/core/src/components/cartesian/markers/CartesianMarkersItem.js
index ce9cc7d61..18cd34c3e 100644
--- a/packages/core/src/components/cartesian/markers/CartesianMarkersItem.js
+++ b/packages/core/src/components/cartesian/markers/CartesianMarkersItem.js
@@ -171,10 +171,10 @@ const CartesianMarkersItem = ({
lineStyle,
textStyle,
legend,
- legendPosition,
- legendOffsetX,
- legendOffsetY,
- legendOrientation,
+ legendPosition = 'top-right',
+ legendOffsetX = 14,
+ legendOffsetY = 14,
+ legendOrientation = 'horizontal',
}) => {
const theme = useTheme()
@@ -256,11 +256,5 @@ CartesianMarkersItem.propTypes = {
legendOffsetY: PropTypes.number.isRequired,
legendOrientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
}
-CartesianMarkersItem.defaultProps = {
- legendPosition: 'top-right',
- legendOffsetX: 14,
- legendOffsetY: 14,
- legendOrientation: 'horizontal',
-}
export default memo(CartesianMarkersItem)
diff --git a/packages/core/src/components/defs/patterns/PatternDots.js b/packages/core/src/components/defs/patterns/PatternDots.js
index 30c307e12..d4a1cee03 100644
--- a/packages/core/src/components/defs/patterns/PatternDots.js
+++ b/packages/core/src/components/defs/patterns/PatternDots.js
@@ -1,7 +1,20 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
-export const PatternDots = memo(({ id, background, color, size, padding, stagger }) => {
+export const PatternDotsDefaultProps = {
+ color: '#000000',
+ background: '#ffffff',
+ size: 4,
+ padding: 4,
+ stagger: false,
+}
+
+export const PatternDots = memo(props => {
+ const { id, background, color, size, padding, stagger } = {
+ ...PatternDotsDefaultProps,
+ ...props,
+ }
+
let fullSize = size + padding
const radius = size / 2
const halfPadding = padding / 2
@@ -35,14 +48,6 @@ PatternDots.propTypes = {
stagger: PropTypes.bool.isRequired,
}
-PatternDots.defaultProps = {
- color: '#000000',
- background: '#ffffff',
- size: 4,
- padding: 4,
- stagger: false,
-}
-
export const patternDotsDef = (id, options = {}) => ({
id,
type: 'patternDots',
diff --git a/packages/core/src/components/defs/patterns/PatternLines.js b/packages/core/src/components/defs/patterns/PatternLines.js
index 0e7402986..7829f7100 100644
--- a/packages/core/src/components/defs/patterns/PatternLines.js
+++ b/packages/core/src/components/defs/patterns/PatternLines.js
@@ -2,8 +2,23 @@ import { memo } from 'react'
import PropTypes from 'prop-types'
import { degreesToRadians } from '../../../lib/polar'
+export const PatternLinesDefaultProps = {
+ spacing: 5,
+ rotation: 0,
+ background: '#000000',
+ color: '#ffffff',
+ lineWidth: 2,
+}
+
export const PatternLines = memo(
- ({ id, spacing: _spacing, rotation: _rotation, background, color, lineWidth }) => {
+ ({
+ id,
+ spacing: _spacing = PatternLinesDefaultProps.spacing,
+ rotation: _rotation = PatternLinesDefaultProps.rotation,
+ background = PatternLinesDefaultProps.background,
+ color = PatternLinesDefaultProps.color,
+ lineWidth = PatternLinesDefaultProps.lineWidth,
+ }) => {
let rotation = Math.round(_rotation) % 360
const spacing = Math.abs(_spacing)
@@ -69,13 +84,6 @@ PatternLines.propTypes = {
color: PropTypes.string.isRequired,
lineWidth: PropTypes.number.isRequired,
}
-PatternLines.defaultProps = {
- spacing: 5,
- rotation: 0,
- color: '#000000',
- background: '#ffffff',
- lineWidth: 2,
-}
export const patternLinesDef = (id, options = {}) => ({
id,
diff --git a/packages/core/src/components/defs/patterns/PatternSquares.js b/packages/core/src/components/defs/patterns/PatternSquares.js
index fc3a8e26c..141619a13 100644
--- a/packages/core/src/components/defs/patterns/PatternSquares.js
+++ b/packages/core/src/components/defs/patterns/PatternSquares.js
@@ -1,7 +1,20 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
-export const PatternSquares = memo(({ id, background, color, size, padding, stagger }) => {
+export const PatternSquaresDefaultProps = {
+ color: '#000000',
+ background: '#ffffff',
+ size: 4,
+ padding: 4,
+ stagger: false,
+}
+
+export const PatternSquares = memo(props => {
+ const { id, color, background, size, padding, stagger } = {
+ ...PatternSquaresDefaultProps,
+ ...props,
+ }
+
let fullSize = size + padding
const halfPadding = padding / 2
if (stagger === true) {
@@ -34,13 +47,6 @@ PatternSquares.propTypes = {
padding: PropTypes.number.isRequired,
stagger: PropTypes.bool.isRequired,
}
-PatternSquares.defaultProps = {
- color: '#000000',
- background: '#ffffff',
- size: 4,
- padding: 4,
- stagger: false,
-}
export const patternSquaresDef = (id, options = {}) => ({
id,
diff --git a/packages/core/src/motion/context.js b/packages/core/src/motion/context.js
index dbd7aa25b..cae001b6f 100644
--- a/packages/core/src/motion/context.js
+++ b/packages/core/src/motion/context.js
@@ -5,7 +5,14 @@ import { config as presets } from '@react-spring/web'
export const motionConfigContext = createContext()
-export const MotionConfigProvider = ({ children, animate, config }) => {
+export const motionDefaultProps = {
+ animate: true,
+ config: 'default',
+}
+
+export const MotionConfigProvider = props => {
+ const { children, animate, config } = { ...motionDefaultProps, ...props }
+
const value = useMemo(() => {
const reactSpringConfig = isString(config) ? presets[config] : config
@@ -40,10 +47,3 @@ MotionConfigProvider.propTypes = {
animate: motionPropTypes.animate,
config: motionPropTypes.motionConfig,
}
-
-export const motionDefaultProps = {
- animate: true,
- config: 'default',
-}
-
-MotionConfigProvider.defaultProps = motionDefaultProps
diff --git a/packages/funnel/src/props.tsx b/packages/funnel/src/props.tsx
index ed8b05636..94c9dac33 100644
--- a/packages/funnel/src/props.tsx
+++ b/packages/funnel/src/props.tsx
@@ -1,5 +1,5 @@
// @ts-ignore
-import { MotionConfigProvider } from '@nivo/core'
+import { motionDefaultProps } from '@nivo/core'
import { FunnelLayerId } from './types'
export const svgDefaultProps = {
@@ -34,6 +34,6 @@ export const svgDefaultProps = {
role: 'img',
- animate: MotionConfigProvider.defaultProps.animate,
- motionConfig: MotionConfigProvider.defaultProps.config,
+ animate: motionDefaultProps.animate,
+ motionConfig: motionDefaultProps.config,
}
diff --git a/packages/geo/src/Choropleth.js b/packages/geo/src/Choropleth.js
index 80ab7eb7f..6598584bb 100644
--- a/packages/geo/src/Choropleth.js
+++ b/packages/geo/src/Choropleth.js
@@ -15,8 +15,8 @@ import GeoGraticule from './GeoGraticule'
import GeoMapFeature from './GeoMapFeature'
import { useGeoMap, useChoropleth } from './hooks'
-const Choropleth = memo(
- ({
+const Choropleth = memo(props => {
+ const {
width,
height,
margin: partialMargin,
@@ -44,130 +44,126 @@ const Choropleth = memo(
onClick,
tooltip: Tooltip,
role,
- defs = ChoroplethDefaultProps.defs,
- fill = ChoroplethDefaultProps.fill,
- }) => {
- const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin)
- const { graticule, path, getBorderWidth, getBorderColor } = useGeoMap({
- width,
- height,
- projectionType,
- projectionScale,
- projectionTranslation,
- projectionRotation,
- fillColor: () => {},
- borderWidth,
- borderColor,
- })
- const { getFillColor, boundFeatures, legendData } = useChoropleth({
- features,
- data,
- match,
- label,
- value,
- valueFormat,
- colors,
- unknownColor,
- domain,
- })
+ defs,
+ fill,
+ } = { ...ChoroplethDefaultProps, ...props }
- const theme = useTheme()
+ const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin)
+ const { graticule, path, getBorderWidth, getBorderColor } = useGeoMap({
+ width,
+ height,
+ projectionType,
+ projectionScale,
+ projectionTranslation,
+ projectionRotation,
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
+ fillColor: () => {},
+ borderWidth,
+ borderColor,
+ })
+ const { getFillColor, boundFeatures, legendData } = useChoropleth({
+ features,
+ data,
+ match,
+ label,
+ value,
+ valueFormat,
+ colors,
+ unknownColor,
+ domain,
+ })
- const boundDefs = bindDefs(defs, boundFeatures, fill, {
- dataKey: 'data',
- targetKey: 'fill',
- })
+ const theme = useTheme()
- const { showTooltipFromEvent, hideTooltip } = useTooltip()
- const handleClick = useCallback(
- (feature, event) => isInteractive && onClick && onClick(feature, event),
- [isInteractive, onClick]
- )
- const handleMouseEnter = useCallback(
- (feature, event) =>
- isInteractive &&
- Tooltip &&
- showTooltipFromEvent(, event),
- [isInteractive, showTooltipFromEvent, Tooltip]
- )
- const handleMouseMove = useCallback(
- (feature, event) =>
- isInteractive &&
- Tooltip &&
- showTooltipFromEvent(, event),
- [isInteractive, showTooltipFromEvent, Tooltip]
- )
- const handleMouseLeave = useCallback(
- () => isInteractive && hideTooltip(),
- [isInteractive, hideTooltip]
- )
+ const boundDefs = bindDefs(defs, boundFeatures, fill, {
+ dataKey: 'data',
+ targetKey: 'fill',
+ })
- return (
-
- {layers.map((layer, i) => {
- if (layer === 'graticule') {
- if (enableGraticule !== true) return null
+ const { showTooltipFromEvent, hideTooltip } = useTooltip()
+ const handleClick = useCallback(
+ (feature, event) => isInteractive && onClick && onClick(feature, event),
+ [isInteractive, onClick]
+ )
+ const handleMouseEnter = useCallback(
+ (feature, event) =>
+ isInteractive && Tooltip && showTooltipFromEvent(, event),
+ [isInteractive, showTooltipFromEvent, Tooltip]
+ )
+ const handleMouseMove = useCallback(
+ (feature, event) =>
+ isInteractive && Tooltip && showTooltipFromEvent(, event),
+ [isInteractive, showTooltipFromEvent, Tooltip]
+ )
+ const handleMouseLeave = useCallback(
+ () => isInteractive && hideTooltip(),
+ [isInteractive, hideTooltip]
+ )
+ return (
+
+ {layers.map((layer, i) => {
+ if (layer === 'graticule') {
+ if (enableGraticule !== true) return null
+
+ return (
+
+ )
+ }
+ if (layer === 'features') {
+ return (
+
+ {boundFeatures.map(feature => (
+
+ ))}
+
+ )
+ }
+ if (layer === 'legends') {
+ return legends.map((legend, i) => {
return (
-
)
- }
- if (layer === 'features') {
- return (
-
- {boundFeatures.map(feature => (
-
- ))}
-
- )
- }
- if (layer === 'legends') {
- return legends.map((legend, i) => {
- return (
-
- )
- })
- }
+ })
+ }
- return {layer({})}
- })}
-
- )
- }
-)
+ return {layer({})}
+ })}
+
+ )
+})
Choropleth.displayName = 'Choropleth'
Choropleth.propTypes = ChoroplethPropTypes
-Choropleth.defaultProps = ChoroplethDefaultProps
export default withContainer(Choropleth)
diff --git a/packages/geo/src/ChoroplethCanvas.js b/packages/geo/src/ChoroplethCanvas.js
index d9886e9c8..a52ed88d9 100644
--- a/packages/geo/src/ChoroplethCanvas.js
+++ b/packages/geo/src/ChoroplethCanvas.js
@@ -20,8 +20,8 @@ const getFeatureFromMouseEvent = (event, el, features, projection) => {
return features.find(f => geoContains(f, projection.invert([x, y])))
}
-const ChoroplethCanvas = memo(
- ({
+const ChoroplethCanvas = memo(props => {
+ const {
width,
height,
margin: partialMargin,
@@ -50,172 +50,170 @@ const ChoroplethCanvas = memo(
onClick,
onMouseMove,
tooltip: Tooltip,
- }) => {
- const canvasEl = useRef(null)
- const theme = useTheme()
- const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin)
- const { projection, graticule, path, getBorderWidth, getBorderColor } = useGeoMap({
- width,
- height,
- projectionType,
- projectionScale,
- projectionTranslation,
- projectionRotation,
- fillColor: () => {},
- borderWidth,
- borderColor,
- })
- const { getFillColor, boundFeatures, legendData } = useChoropleth({
- features,
- data,
- match,
- label,
- value,
- valueFormat,
- colors,
- unknownColor,
- domain,
- })
+ } = { ...ChoroplethCanvasDefaultProps, ...props }
+ const canvasEl = useRef(null)
+ const theme = useTheme()
+ const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin)
+ const { projection, graticule, path, getBorderWidth, getBorderColor } = useGeoMap({
+ width,
+ height,
+ projectionType,
+ projectionScale,
+ projectionTranslation,
+ projectionRotation,
+ fillColor: () => {},
+ borderWidth,
+ borderColor,
+ })
+ const { getFillColor, boundFeatures, legendData } = useChoropleth({
+ features,
+ data,
+ match,
+ label,
+ value,
+ valueFormat,
+ colors,
+ unknownColor,
+ domain,
+ })
- useEffect(() => {
- if (!canvasEl) return
+ useEffect(() => {
+ if (!canvasEl) return
- canvasEl.current.width = outerWidth * pixelRatio
- canvasEl.current.height = outerHeight * pixelRatio
+ canvasEl.current.width = outerWidth * pixelRatio
+ canvasEl.current.height = outerHeight * pixelRatio
- const ctx = canvasEl.current.getContext('2d')
+ const ctx = canvasEl.current.getContext('2d')
- ctx.scale(pixelRatio, pixelRatio)
+ ctx.scale(pixelRatio, pixelRatio)
- ctx.fillStyle = theme.background
- ctx.fillRect(0, 0, outerWidth, outerHeight)
- ctx.translate(margin.left, margin.top)
+ ctx.fillStyle = theme.background
+ ctx.fillRect(0, 0, outerWidth, outerHeight)
+ ctx.translate(margin.left, margin.top)
- path.context(ctx)
+ path.context(ctx)
- layers.forEach(layer => {
- if (layer === 'graticule') {
- if (enableGraticule === true) {
- ctx.lineWidth = graticuleLineWidth
- ctx.strokeStyle = graticuleLineColor
- ctx.beginPath()
- path(graticule())
+ layers.forEach(layer => {
+ if (layer === 'graticule') {
+ if (enableGraticule === true) {
+ ctx.lineWidth = graticuleLineWidth
+ ctx.strokeStyle = graticuleLineColor
+ ctx.beginPath()
+ path(graticule())
+ ctx.stroke()
+ }
+ } else if (layer === 'features') {
+ boundFeatures.forEach(feature => {
+ ctx.beginPath()
+ path(feature)
+ ctx.fillStyle = getFillColor(feature)
+ ctx.fill()
+
+ const borderWidth = getBorderWidth(feature)
+ if (borderWidth > 0) {
+ ctx.strokeStyle = getBorderColor(feature)
+ ctx.lineWidth = borderWidth
ctx.stroke()
}
- } else if (layer === 'features') {
- boundFeatures.forEach(feature => {
- ctx.beginPath()
- path(feature)
- ctx.fillStyle = getFillColor(feature)
- ctx.fill()
-
- const borderWidth = getBorderWidth(feature)
- if (borderWidth > 0) {
- ctx.strokeStyle = getBorderColor(feature)
- ctx.lineWidth = borderWidth
- ctx.stroke()
- }
+ })
+ } else if (layer === 'legends') {
+ legends.forEach(legend => {
+ renderLegendToCanvas(ctx, {
+ ...legend,
+ data: legendData,
+ containerWidth: width,
+ containerHeight: height,
+ theme,
})
- } else if (layer === 'legends') {
- legends.forEach(legend => {
- renderLegendToCanvas(ctx, {
- ...legend,
- data: legendData,
- containerWidth: width,
- containerHeight: height,
- theme,
- })
- })
- } else {
- // layer(ctx, {})
- }
- })
- }, [
+ })
+ } else {
+ // layer(ctx, {})
+ }
+ })
+ }, [
+ canvasEl,
+ outerWidth,
+ outerHeight,
+ margin,
+ pixelRatio,
+ theme,
+ path,
+ graticule,
+ getFillColor,
+ getBorderWidth,
+ getBorderColor,
+ boundFeatures,
+ legends,
+ layers,
+ ])
+
+ const { showTooltipFromEvent, hideTooltip } = useTooltip()
+ const handleMouseMove = useCallback(
+ event => {
+ if (!isInteractive || !Tooltip) return
+
+ const feature = getFeatureFromMouseEvent(
+ event,
+ canvasEl.current,
+ boundFeatures,
+ projection
+ )
+ if (feature) {
+ showTooltipFromEvent(, event)
+ } else {
+ hideTooltip()
+ }
+ onMouseMove && onMouseMove(feature || null, event)
+ },
+ [
+ showTooltipFromEvent,
+ hideTooltip,
+ isInteractive,
+ Tooltip,
canvasEl,
- outerWidth,
- outerHeight,
- margin,
- pixelRatio,
- theme,
- path,
- graticule,
- getFillColor,
- getBorderWidth,
- getBorderColor,
boundFeatures,
- legends,
- layers,
- ])
-
- const { showTooltipFromEvent, hideTooltip } = useTooltip()
- const handleMouseMove = useCallback(
- event => {
- if (!isInteractive || !Tooltip) return
-
- const feature = getFeatureFromMouseEvent(
- event,
- canvasEl.current,
- boundFeatures,
- projection
- )
- if (feature) {
- showTooltipFromEvent(, event)
- } else {
- hideTooltip()
- }
- onMouseMove && onMouseMove(feature || null, event)
- },
- [
- showTooltipFromEvent,
- hideTooltip,
- isInteractive,
- Tooltip,
- canvasEl,
+ projection,
+ ]
+ )
+ const handleMouseLeave = useCallback(
+ () => isInteractive && hideTooltip(),
+ [isInteractive, hideTooltip]
+ )
+ const handleClick = useCallback(
+ event => {
+ if (!isInteractive || !onClick) return
+
+ const feature = getFeatureFromMouseEvent(
+ event,
+ canvasEl.current,
boundFeatures,
- projection,
- ]
- )
- const handleMouseLeave = useCallback(
- () => isInteractive && hideTooltip(),
- [isInteractive, hideTooltip]
- )
- const handleClick = useCallback(
- event => {
- if (!isInteractive || !onClick) return
-
- const feature = getFeatureFromMouseEvent(
- event,
- canvasEl.current,
- boundFeatures,
- projection
- )
- if (feature) {
- onClick(feature, event)
- }
- },
- [isInteractive, canvasEl, boundFeatures, projection, onClick]
- )
-
- return (
-
- )
- }
-)
+ projection
+ )
+ if (feature) {
+ onClick(feature, event)
+ }
+ },
+ [isInteractive, canvasEl, boundFeatures, projection, onClick]
+ )
+
+ return (
+
+ )
+})
ChoroplethCanvas.displayName = 'ChoroplethCanvas'
ChoroplethCanvas.propTypes = ChoroplethCanvasPropTypes
-ChoroplethCanvas.defaultProps = ChoroplethCanvasDefaultProps
export default withContainer(ChoroplethCanvas)
diff --git a/packages/geo/src/GeoMap.js b/packages/geo/src/GeoMap.js
index fb4394906..1f2f3cacf 100644
--- a/packages/geo/src/GeoMap.js
+++ b/packages/geo/src/GeoMap.js
@@ -35,7 +35,7 @@ const GeoMap = memo(props => {
onClick,
tooltip: Tooltip,
role,
- } = props
+ } = { ...GeoMapDefaultProps, ...props }
const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin)
const { graticule, path, getFillColor, getBorderWidth, getBorderColor } = useGeoMap({
width,
@@ -122,6 +122,5 @@ const GeoMap = memo(props => {
GeoMap.displayName = 'GeoMap'
GeoMap.propTypes = GeoMapPropTypes
-GeoMap.defaultProps = GeoMapDefaultProps
export default withContainer(GeoMap)
diff --git a/packages/geo/src/GeoMapCanvas.js b/packages/geo/src/GeoMapCanvas.js
index 22a727455..ec749f526 100644
--- a/packages/geo/src/GeoMapCanvas.js
+++ b/packages/geo/src/GeoMapCanvas.js
@@ -45,7 +45,7 @@ const GeoMapCanvas = memo(props => {
onClick,
onMouseMove,
tooltip: Tooltip,
- } = props
+ } = { ...GeoMapCanvasDefaultProps, ...props }
const canvasEl = useRef(null)
const theme = useTheme()
@@ -173,6 +173,5 @@ const GeoMapCanvas = memo(props => {
GeoMapCanvas.displatName = 'GeoMapCanvas'
GeoMapCanvas.propTypes = GeoMapCanvasPropTypes
-GeoMapCanvas.defaultProps = GeoMapCanvasDefaultProps
export default withContainer(GeoMapCanvas)
diff --git a/packages/line/src/Line.js b/packages/line/src/Line.js
index 613734740..bf39d6958 100644
--- a/packages/line/src/Line.js
+++ b/packages/line/src/Line.js
@@ -95,7 +95,7 @@ const Line = props => {
crosshairType,
role,
- } = props
+ } = { ...LineDefaultProps, ...props }
const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
width,
@@ -331,6 +331,5 @@ const Line = props => {
}
Line.propTypes = LinePropTypes
-Line.defaultProps = LineDefaultProps
export default withContainer(Line)
diff --git a/packages/line/src/LineCanvas.js b/packages/line/src/LineCanvas.js
index d47660d15..dfd1dbf32 100644
--- a/packages/line/src/LineCanvas.js
+++ b/packages/line/src/LineCanvas.js
@@ -21,56 +21,56 @@ import { useVoronoiMesh, renderVoronoiToCanvas, renderVoronoiCellToCanvas } from
import { LineCanvasPropTypes, LineCanvasDefaultProps } from './props'
import { useLine } from './hooks'
-const LineCanvas = ({
- width,
- height,
- margin: partialMargin,
- pixelRatio,
-
- data,
- xScale: xScaleSpec,
- xFormat,
- yScale: yScaleSpec,
- yFormat,
- curve,
-
- layers,
-
- colors,
- lineWidth,
-
- enableArea,
- areaBaselineValue,
- areaOpacity,
-
- enablePoints,
- pointSize,
- pointColor,
- pointBorderWidth,
- pointBorderColor,
-
- enableGridX,
- gridXValues,
- enableGridY,
- gridYValues,
- axisTop,
- axisRight,
- axisBottom,
- axisLeft,
-
- legends,
-
- isInteractive,
- debugMesh,
- //onMouseEnter,
- //onMouseMove,
- onMouseLeave,
- onClick,
- tooltip,
-
- canvasRef,
-}) => {
+const LineCanvas = props => {
const canvasEl = useRef(null)
+ const {
+ width,
+ height,
+ margin: partialMargin,
+ pixelRatio,
+
+ data,
+ xScale: xScaleSpec,
+ xFormat,
+ yScale: yScaleSpec,
+ yFormat,
+ curve,
+
+ layers,
+
+ colors,
+ lineWidth,
+
+ enableArea,
+ areaBaselineValue,
+ areaOpacity,
+
+ enablePoints,
+ pointSize,
+ pointColor,
+ pointBorderWidth,
+ pointBorderColor,
+
+ enableGridX,
+ gridXValues,
+ enableGridY,
+ gridYValues,
+ axisTop,
+ axisRight,
+ axisBottom,
+ axisLeft,
+
+ legends,
+
+ isInteractive,
+ debugMesh,
+ //onMouseEnter,
+ //onMouseMove,
+ onMouseLeave,
+ onClick,
+ tooltip,
+ canvasRef,
+ } = { ...LineCanvasDefaultProps, ...props }
const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
width,
height,
@@ -330,7 +330,6 @@ const LineCanvas = ({
}
LineCanvas.propTypes = LineCanvasPropTypes
-LineCanvas.defaultProps = LineCanvasDefaultProps
const LineCanvasWithContainer = withContainer(LineCanvas)
diff --git a/website/src/components/guides/patterns/PatternsDotsDemo.tsx b/website/src/components/guides/patterns/PatternsDotsDemo.tsx
index 2ffaa7610..98641dad2 100644
--- a/website/src/components/guides/patterns/PatternsDotsDemo.tsx
+++ b/website/src/components/guides/patterns/PatternsDotsDemo.tsx
@@ -1,9 +1,9 @@
import React from 'react'
-import { Defs, patternDotsDef, PatternDots } from '@nivo/core'
+import { Defs, patternDotsDef, PatternDotsDefaultProps } from '@nivo/core'
import { ChartProperty } from '../../../types'
import { GuideDemoBlock } from '../GuideDemoBlock'
-const defaults = (PatternDots as unknown as any).defaultProps as Settings
+const defaults = PatternDotsDefaultProps as Settings
const SAMPLE_SIZE = 120
const patternId = 'dots-pattern'
diff --git a/website/src/components/guides/patterns/PatternsLinesDemo.tsx b/website/src/components/guides/patterns/PatternsLinesDemo.tsx
index 1841765e7..771366337 100644
--- a/website/src/components/guides/patterns/PatternsLinesDemo.tsx
+++ b/website/src/components/guides/patterns/PatternsLinesDemo.tsx
@@ -1,9 +1,9 @@
import React from 'react'
-import { Defs, PatternLines, patternLinesDef } from '@nivo/core'
+import { Defs, patternLinesDef, PatternLinesDefaultProps } from '@nivo/core'
import { ChartProperty } from '../../../types'
import { GuideDemoBlock } from '../GuideDemoBlock'
-const defaults = (PatternLines as unknown as any).defaultProps as Settings
+const defaults = PatternLinesDefaultProps as Settings
const SAMPLE_SIZE = 120
const patternId = 'lines-pattern'
diff --git a/website/src/components/guides/patterns/PatternsSquaresDemo.tsx b/website/src/components/guides/patterns/PatternsSquaresDemo.tsx
index f86fb7025..41925fb78 100644
--- a/website/src/components/guides/patterns/PatternsSquaresDemo.tsx
+++ b/website/src/components/guides/patterns/PatternsSquaresDemo.tsx
@@ -1,9 +1,9 @@
import React from 'react'
-import { Defs, patternSquaresDef, PatternSquares } from '@nivo/core'
+import { Defs, patternSquaresDef, PatternSquaresDefaultProps } from '@nivo/core'
import { ChartProperty } from '../../../types'
import { GuideDemoBlock } from '../GuideDemoBlock'
-const defaults = (PatternSquares as unknown as any).defaultProps as Settings
+const defaults = PatternSquaresDefaultProps as Settings
const SAMPLE_SIZE = 120
const patternId = 'squares-pattern'