How to use @nivo/scales - 10 common examples
To help you get started, we’ve selected a few @nivo/scales examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
plouc / nivo / packages / scatterplot / src / props.js View on Github 
PropTypes.number,
PropTypes.string,
PropTypes.instanceOf(Date),
]).isRequired,
y: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
PropTypes.instanceOf(Date),
]).isRequired,
})
).isRequired,
})
).isRequired,
xScale: scalePropType.isRequired,
xFormat: PropTypes.any,
yScale: scalePropType.isRequired,
yFormat: PropTypes.any,
layers: PropTypes.arrayOf(
PropTypes.oneOfType([
PropTypes.oneOf(['grid', 'axes', 'nodes', 'markers', 'mesh', 'legends']),
PropTypes.func,
])
).isRequired,
enableGridX: PropTypes.bool.isRequired,
enableGridY: PropTypes.bool.isRequired,
axisTop: axisPropType,
axisRight: axisPropType,
axisBottom: axisPropType,
axisLeft: axisPropType,x: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
PropTypes.instanceOf(Date),
]),
y: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
PropTypes.instanceOf(Date),
]),
})
).isRequired,
})
).isRequired,
xScale: scalePropType.isRequired,
xFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
yScale: scalePropType.isRequired,
yFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
layers: PropTypes.arrayOf(
PropTypes.oneOfType([
PropTypes.oneOf([
'grid',
'markers',
'axes',
'areas',
'crosshair',
'lines',
'slices',
'points',
'mesh',PropTypes.string,
PropTypes.instanceOf(Date),
]),
y: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
PropTypes.instanceOf(Date),
]),
})
).isRequired,
})
).isRequired,
xScale: scalePropType.isRequired,
xFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
yScale: scalePropType.isRequired,
yFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
layers: PropTypes.arrayOf(
PropTypes.oneOfType([
PropTypes.oneOf([
'grid',
'markers',
'axes',
'areas',
'crosshair',
'lines',
'slices',
'points',
'mesh',
'legends',
]),ordinalColorsPropType,
inheritedColorPropType,
colorPropertyAccessorPropType,
} from '@nivo/colors'
import { scalePropType } from '@nivo/scales'
import { annotationSpecPropType } from '@nivo/annotations'
const commonPropTypes = {
data: PropTypes.arrayOf(PropTypes.object).isRequired,
groups: PropTypes.arrayOf(PropTypes.string).isRequired,
groupBy: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
identity: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
valueScale: scalePropType.isRequired,
size: PropTypes.oneOfType([
PropTypes.number,
PropTypes.shape({
key: PropTypes.string.isRequired,
values: PropTypes.arrayOf(PropTypes.number).isRequired,
sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
}),
PropTypes.func,
]).isRequired,
layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
gap: PropTypes.number.isRequired,
forceStrength: PropTypes.number.isRequired,
simulationIterations: PropTypes.number.isRequired,
layers: PropTypes.arrayOf(PropTypes.shape({
x: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
PropTypes.instanceOf(Date),
]).isRequired,
y: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
PropTypes.instanceOf(Date),
]).isRequired,
})
).isRequired,
})
).isRequired,
xScale: scalePropType.isRequired,
xFormat: PropTypes.any,
yScale: scalePropType.isRequired,
yFormat: PropTypes.any,
layers: PropTypes.arrayOf(
PropTypes.oneOfType([
PropTypes.oneOf(['grid', 'axes', 'nodes', 'markers', 'mesh', 'legends']),
PropTypes.func,
])
).isRequired,
enableGridX: PropTypes.bool.isRequired,
enableGridY: PropTypes.bool.isRequired,
axisTop: axisPropType,
axisRight: axisPropType,
axisBottom: axisPropType,export const computeScale = (scaleSpec, dimensions, data) => {
if (scaleSpec.type === 'linear') {
return linearScale(scaleSpec, dimensions, data)
} else if (scaleSpec.type === 'point') {
return pointScale(scaleSpec, dimensions, data)
} else if (scaleSpec.type === 'time') {
return timeScale(scaleSpec, dimensions, data)
}
}export const computeScale = (scaleSpec, dimensions, data) => {
if (scaleSpec.type === 'linear') {
return linearScale(scaleSpec, dimensions, data)
} else if (scaleSpec.type === 'point') {
return pointScale(scaleSpec, dimensions, data)
} else if (scaleSpec.type === 'time') {
return timeScale(scaleSpec, dimensions, data)
}
}export const computeScale = (scaleSpec, dimensions, data) => {
if (scaleSpec.type === 'linear') {
return linearScale(scaleSpec, dimensions, data)
} else if (scaleSpec.type === 'point') {
return pointScale(scaleSpec, dimensions, data)
} else if (scaleSpec.type === 'time') {
return timeScale(scaleSpec, dimensions, data)
}
} () => computeXYScalesForSeries(data, xScaleSpec, yScaleSpec, width, height),
[data, xScaleSpec, yScaleSpec, width, height] () => computeXYScalesForSeries(data, xScaleSpec, yScaleSpec, width, height),
[data, xScaleSpec, yScaleSpec, width, height]@nivo/scales
<a href="https://nivo.rocks"><img alt="nivo" src="https://raw.githubusercontent.com/plouc/nivo/master/nivo.png" width="216" height="68"/></a>
