diff --git a/packages/core/src/components/defs/patterns/PatternDots.js b/packages/core/src/components/defs/patterns/PatternDots.js index d4a1cee035..85e1135c27 100644 --- a/packages/core/src/components/defs/patterns/PatternDots.js +++ b/packages/core/src/components/defs/patterns/PatternDots.js @@ -10,10 +10,14 @@ export const PatternDotsDefaultProps = { } export const PatternDots = memo(props => { - const { id, background, color, size, padding, stagger } = { - ...PatternDotsDefaultProps, - ...props, - } + const { + id, + background = PatternDotsDefaultProps.background, + color = PatternDotsDefaultProps.color, + size = PatternDotsDefaultProps.size, + padding = PatternDotsDefaultProps.padding, + stagger = PatternDotsDefaultProps.stagger, + } = props let fullSize = size + padding const radius = size / 2 diff --git a/packages/core/src/components/defs/patterns/PatternSquares.js b/packages/core/src/components/defs/patterns/PatternSquares.js index 141619a136..c4e423e9d1 100644 --- a/packages/core/src/components/defs/patterns/PatternSquares.js +++ b/packages/core/src/components/defs/patterns/PatternSquares.js @@ -10,10 +10,14 @@ export const PatternSquaresDefaultProps = { } export const PatternSquares = memo(props => { - const { id, color, background, size, padding, stagger } = { - ...PatternSquaresDefaultProps, - ...props, - } + const { + id, + color = PatternSquaresDefaultProps.color, + background = PatternSquaresDefaultProps.background, + size = PatternSquaresDefaultProps.size, + padding = PatternSquaresDefaultProps.padding, + stagger = PatternSquaresDefaultProps.stagger, + } = props let fullSize = size + padding const halfPadding = padding / 2 diff --git a/packages/core/src/motion/context.js b/packages/core/src/motion/context.js index cae001b6fe..e917d72b25 100644 --- a/packages/core/src/motion/context.js +++ b/packages/core/src/motion/context.js @@ -11,7 +11,7 @@ export const motionDefaultProps = { } export const MotionConfigProvider = props => { - const { children, animate, config } = { ...motionDefaultProps, ...props } + const { children, animate = true, config = 'default' } = props const value = useMemo(() => { const reactSpringConfig = isString(config) ? presets[config] : config diff --git a/packages/geo/src/Choropleth.js b/packages/geo/src/Choropleth.js index 6598584bb8..8bb7b3bcdd 100644 --- a/packages/geo/src/Choropleth.js +++ b/packages/geo/src/Choropleth.js @@ -10,10 +10,11 @@ import { memo, Fragment, useCallback } from 'react' import { SvgWrapper, withContainer, useDimensions, useTheme, bindDefs } from '@nivo/core' import { BoxLegendSvg } from '@nivo/legends' import { useTooltip } from '@nivo/tooltip' -import { ChoroplethPropTypes, ChoroplethDefaultProps } from './props' +import { ChoroplethPropTypes } from './props' import GeoGraticule from './GeoGraticule' import GeoMapFeature from './GeoMapFeature' import { useGeoMap, useChoropleth } from './hooks' +import ChoroplethTooltip from './ChoroplethTooltip' const Choropleth = memo(props => { const { @@ -22,31 +23,31 @@ const Choropleth = memo(props => { margin: partialMargin, features, data, - match, - label, - value, + match = 'id', + label = 'id', + value = 'value', valueFormat, - projectionType, - projectionScale, - projectionTranslation, - projectionRotation, - colors, + projectionType = 'mercator', + projectionScale = 100, + projectionTranslation = [0.5, 0.5], + projectionRotation = [0, 0, 0], + colors = 'PuBuGn', domain, - unknownColor, - borderWidth, - borderColor, - enableGraticule, - graticuleLineWidth, - graticuleLineColor, - layers, - legends, - isInteractive, - onClick, - tooltip: Tooltip, - role, - defs, - fill, - } = { ...ChoroplethDefaultProps, ...props } + unknownColor = '#999', + borderWidth = 0, + borderColor = '#000000', + enableGraticule = false, + graticuleLineWidth = 0.5, + graticuleLineColor = '#999999', + layers = ['graticule', 'features', 'legends'], + legends = [], + isInteractive = true, + onClick = () => {}, + tooltip: Tooltip = ChoroplethTooltip, + role = 'img', + defs = [], + fill = [], + } = props const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin) const { graticule, path, getBorderWidth, getBorderColor } = useGeoMap({ diff --git a/packages/geo/src/ChoroplethCanvas.js b/packages/geo/src/ChoroplethCanvas.js index a52ed88d9f..4489492907 100644 --- a/packages/geo/src/ChoroplethCanvas.js +++ b/packages/geo/src/ChoroplethCanvas.js @@ -11,8 +11,9 @@ import { geoContains } from 'd3-geo' import { getRelativeCursor, withContainer, useDimensions, useTheme } from '@nivo/core' import { renderLegendToCanvas } from '@nivo/legends' import { useTooltip } from '@nivo/tooltip' -import { ChoroplethCanvasDefaultProps, ChoroplethCanvasPropTypes } from './props' +import { ChoroplethCanvasPropTypes } from './props' import { useGeoMap, useChoropleth } from './hooks' +import ChoroplethTooltip from './ChoroplethTooltip' const getFeatureFromMouseEvent = (event, el, features, projection) => { const [x, y] = getRelativeCursor(el, event) @@ -25,32 +26,32 @@ const ChoroplethCanvas = memo(props => { width, height, margin: partialMargin, - pixelRatio, + pixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1, features, data, - match, - label, - value, + match = 'id', + label = 'id', + value = 'value', valueFormat, - projectionType, - projectionScale, - projectionTranslation, - projectionRotation, - colors, + projectionType = 'mercator', + projectionScale = 100, + projectionTranslation = [0.5, 0.5], + projectionRotation = [0, 0, 0], + colors = 'PuBuGn', domain, - unknownColor, - borderWidth, - borderColor, - enableGraticule, - graticuleLineWidth, - graticuleLineColor, - layers, - legends, - isInteractive, - onClick, - onMouseMove, - tooltip: Tooltip, - } = { ...ChoroplethCanvasDefaultProps, ...props } + unknownColor = '#999', + borderWidth = 0, + borderColor = '#000000', + enableGraticule = false, + graticuleLineWidth = 0.5, + graticuleLineColor = '#999999', + layers = ['graticule', 'features', 'legends'], + legends = [], + isInteractive = true, + onClick = () => {}, + onMouseMove = () => {}, + tooltip: Tooltip = ChoroplethTooltip, + } = props const canvasEl = useRef(null) const theme = useTheme() const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin) diff --git a/packages/geo/src/GeoMap.js b/packages/geo/src/GeoMap.js index 1f2f3cacfa..a1fd404da4 100644 --- a/packages/geo/src/GeoMap.js +++ b/packages/geo/src/GeoMap.js @@ -9,7 +9,7 @@ import { Fragment, useCallback, memo } from 'react' import { SvgWrapper, withContainer, useDimensions, useTheme } from '@nivo/core' import { useTooltip } from '@nivo/tooltip' -import { GeoMapPropTypes, GeoMapDefaultProps } from './props' +import { GeoMapPropTypes } from './props' import GeoGraticule from './GeoGraticule' import GeoMapFeature from './GeoMapFeature' import { useGeoMap } from './hooks' @@ -20,22 +20,22 @@ const GeoMap = memo(props => { height, margin: partialMargin, features, - layers, - projectionType, - projectionScale, - projectionTranslation, - projectionRotation, - fillColor, - borderWidth, - borderColor, - enableGraticule, - graticuleLineWidth, - graticuleLineColor, - isInteractive, - onClick, + layers = ['graticule', 'features'], + projectionType = 'mercator', + projectionScale = 100, + projectionTranslation = [0.5, 0.5], + projectionRotation = [0, 0, 0], + fillColor = '#dddddd', + borderWidth = 0, + borderColor = '#000000', + enableGraticule = false, + graticuleLineWidth = 0.5, + graticuleLineColor = '#999999', + isInteractive = true, + onClick = () => {}, tooltip: Tooltip, - role, - } = { ...GeoMapDefaultProps, ...props } + role = 'img', + } = props const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin) const { graticule, path, getFillColor, getBorderWidth, getBorderColor } = useGeoMap({ width, diff --git a/packages/geo/src/GeoMapCanvas.js b/packages/geo/src/GeoMapCanvas.js index ec749f526a..bffe79969d 100644 --- a/packages/geo/src/GeoMapCanvas.js +++ b/packages/geo/src/GeoMapCanvas.js @@ -10,7 +10,7 @@ import { memo, useRef, useEffect, useCallback } from 'react' import { geoContains } from 'd3-geo' import { getRelativeCursor, withContainer, useDimensions, useTheme } from '@nivo/core' import { useTooltip } from '@nivo/tooltip' -import { GeoMapCanvasDefaultProps, GeoMapCanvasPropTypes } from './props' +import { GeoMapCanvasPropTypes } from './props' import { useGeoMap } from './hooks' const getFeatureFromMouseEvent = (event, el, features, projection) => { @@ -24,28 +24,28 @@ const GeoMapCanvas = memo(props => { width, height, margin: partialMargin, - pixelRatio, + pixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1, features, layers, - projectionType, - projectionScale, - projectionTranslation, - projectionRotation, + projectionType = 'mercator', + projectionScale = 100, + projectionTranslation = [0.5, 0.5], + projectionRotation = [0, 0, 0], - fillColor, - borderWidth, - borderColor, + fillColor = '#dddddd', + borderWidth = 0, + borderColor = '#000000', - enableGraticule, - graticuleLineWidth, - graticuleLineColor, + enableGraticule = false, + graticuleLineWidth = 0.5, + graticuleLineColor = '#999999', - isInteractive, - onClick, - onMouseMove, + isInteractive = true, + onClick = () => {}, + onMouseMove = () => {}, tooltip: Tooltip, - } = { ...GeoMapCanvasDefaultProps, ...props } + } = props const canvasEl = useRef(null) const theme = useTheme() diff --git a/packages/line/src/Line.js b/packages/line/src/Line.js index bf39d6958a..48b6b7e686 100644 --- a/packages/line/src/Line.js +++ b/packages/line/src/Line.js @@ -20,25 +20,42 @@ import { Axes, Grid } from '@nivo/axes' import { BoxLegendSvg } from '@nivo/legends' import { Crosshair } from '@nivo/tooltip' import { useLine } from './hooks' -import { LinePropTypes, LineDefaultProps } from './props' +import { LinePropTypes } from './props' import Areas from './Areas' import Lines from './Lines' import Slices from './Slices' import Points from './Points' import Mesh from './Mesh' +import PointTooltip from './PointTooltip' +import SliceTooltip from './SliceTooltip' const Line = props => { const { data, - xScale: xScaleSpec, + xScale: xScaleSpec = { type: 'point' }, xFormat, - yScale: yScaleSpec, + yScale: yScaleSpec = { + type: 'linear', + min: 0, + max: 'auto', + }, yFormat, - layers, - curve, - areaBaselineValue, + layers = [ + 'grid', + 'markers', + 'axes', + 'areas', + 'crosshair', + 'lines', + 'points', + 'slices', + 'mesh', + 'legends', + ], + curve = 'linear', + areaBaselineValue = 0, - colors, + colors = { scheme: 'nivo' }, margin: partialMargin, width, @@ -46,56 +63,56 @@ const Line = props => { axisTop, axisRight, - axisBottom, - axisLeft, - enableGridX, - enableGridY, + axisBottom = {}, + axisLeft = {}, + enableGridX = true, + enableGridY = true, gridXValues, gridYValues, - lineWidth, - enableArea, - areaOpacity, - areaBlendMode, + lineWidth = 2, + enableArea = false, + areaOpacity = 0.2, + areaBlendMode = 'normal', - enablePoints, + enablePoints = true, pointSymbol, - pointSize, - pointColor, - pointBorderWidth, - pointBorderColor, - enablePointLabel, - pointLabel, + pointSize = 6, + pointColor = { from: 'color' }, + pointBorderWidth = 0, + pointBorderColor = { theme: 'background' }, + enablePointLabel = false, + pointLabel = 'yFormatted', pointLabelYOffset, - defs, - fill, + defs = [], + fill = [], markers, - legends, + legends = [], - isInteractive, + isInteractive = true, - useMesh, - debugMesh, + useMesh = false, + debugMesh = false, onMouseEnter, onMouseMove, onMouseLeave, onClick, - tooltip, + tooltip = PointTooltip, - enableSlices, - debugSlices, - sliceTooltip, + enableSlices = false, + debugSlices = false, + sliceTooltip = SliceTooltip, - enableCrosshair, - crosshairType, + enableCrosshair = true, + crosshairType = 'bottom-left', - role, - } = { ...LineDefaultProps, ...props } + role = 'img', + } = props const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions( width, diff --git a/packages/line/src/LineCanvas.js b/packages/line/src/LineCanvas.js index dfd1dbf329..d148b4bf7d 100644 --- a/packages/line/src/LineCanvas.js +++ b/packages/line/src/LineCanvas.js @@ -18,8 +18,9 @@ import { renderAxesToCanvas, renderGridLinesToCanvas } from '@nivo/axes' import { renderLegendToCanvas } from '@nivo/legends' import { useTooltip } from '@nivo/tooltip' import { useVoronoiMesh, renderVoronoiToCanvas, renderVoronoiCellToCanvas } from '@nivo/voronoi' -import { LineCanvasPropTypes, LineCanvasDefaultProps } from './props' +import { LineCanvasPropTypes } from './props' import { useLine } from './hooks' +import PointTooltip from './PointTooltip' const LineCanvas = props => { const canvasEl = useRef(null) @@ -27,50 +28,65 @@ const LineCanvas = props => { width, height, margin: partialMargin, - pixelRatio, + pixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1, data, - xScale: xScaleSpec, + xScale: xScaleSpec = { type: 'point' }, xFormat, - yScale: yScaleSpec, + yScale: yScaleSpec = { + type: 'linear', + min: 0, + max: 'auto', + }, yFormat, - curve, - - layers, - - colors, - lineWidth, - - enableArea, - areaBaselineValue, - areaOpacity, - - enablePoints, - pointSize, - pointColor, - pointBorderWidth, - pointBorderColor, - - enableGridX, + curve = 'linear', + + layers = [ + 'grid', + 'markers', + 'axes', + 'areas', + 'crosshair', + 'lines', + 'points', + 'slices', + 'mesh', + 'legends', + ], + + colors = { scheme: 'nivo' }, + lineWidth = 2, + + enableArea = false, + areaBaselineValue = 0, + areaOpacity = 0.2, + + enablePoints = true, + pointSize = 6, + pointColor = { from: 'color' }, + pointBorderWidth = 0, + pointBorderColor = { theme: 'background' }, + + enableGridX = true, gridXValues, - enableGridY, + enableGridY = true, gridYValues, axisTop, axisRight, - axisBottom, - axisLeft, + axisBottom = {}, + axisLeft = {}, - legends, + legends = [], - isInteractive, - debugMesh, + isInteractive = true, + debugMesh = false, //onMouseEnter, //onMouseMove, onMouseLeave, onClick, - tooltip, + tooltip = PointTooltip, canvasRef, - } = { ...LineCanvasDefaultProps, ...props } + } = props const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions( width, height,