How to use @nivo/parallel-coordinates - 10 common examples
To help you get started, we’ve selected a few @nivo/parallel-coordinates 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 / website / src / data / components / parallel-coordinates / props.js View on Github 
},
},
{
key: 'margin',
help: 'Chart margin.',
type: 'object',
required: false,
controlType: 'margin',
group: 'Base',
},
{
key: 'colors',
help: 'Defines color range.',
type: 'string | Function | string[]',
required: false,
defaultValue: defaults.colors,
controlType: 'ordinalColors',
group: 'Style',
},
// {
// key: 'colorBy',
// help:
// 'Property used to determine line color. If a function is provided, it will receive current line data and must return a valid color.',
// required: false,
// defaultValue: defaults.colorBy,
// controlType: 'choices',
// group: 'Style',
// controlOptions: {
// choices: [
// {
// label: 'index',
// value: 'index',// controlOptions: {
// when: ({ type }) => type === 'point',
// min: 0,
// max: 1,
// step: 0.01,
// },
// },
],
},
},
{
key: 'layout',
help: `Chart layout.`,
type: 'string',
required: false,
defaultValue: defaults.layout,
controlType: 'radio',
group: 'Base',
controlOptions: {
choices: [
{ label: 'horizontal', value: 'horizontal' },
{ label: 'vertical', value: 'vertical' },
],
},
},
{
key: 'curve',
help: 'Curve interpolation.',
description: `
Defines the curve factory to use for the line generator.
`,
type: 'string',// },
{
key: 'strokeWidth',
help: 'Lines stroke width.',
type: 'number',
required: false,
defaultValue: defaults.strokeWidth,
controlType: 'lineWidth',
group: 'Style',
},
{
key: 'lineOpacity',
help: 'Lines opacity.',
type: 'number',
required: false,
defaultValue: defaults.lineOpacity,
controlType: 'opacity',
group: 'Style',
},
...motionProperties(['svg'], defaults),
]
export const groups = groupProperties(props)// label: 'target',
// value: 'target',
// },
// {
// label: `custom using 'color' variable`,
// value: `custom using 'color' variable`,
// },
// ],
// },
// },
{
key: 'strokeWidth',
help: 'Lines stroke width.',
type: 'number',
required: false,
defaultValue: defaults.strokeWidth,
controlType: 'lineWidth',
group: 'Style',
},
{
key: 'lineOpacity',
help: 'Lines opacity.',
type: 'number',
required: false,
defaultValue: defaults.lineOpacity,
controlType: 'opacity',
group: 'Style',
},
...motionProperties(['svg'], defaults),
]
export const groups = groupProperties(props)defaultValue: defaults.curve,
controlType: 'choices',
group: 'Base',
controlOptions: {
choices: lineCurvePropKeys.map(key => ({
label: key,
value: key,
})),
},
},
{
key: 'axesPlan',
help: `Axes plan.`,
type: `string`,
required: false,
defaultValue: defaults.axesPlan,
controlType: 'radio',
group: 'Base',
controlOptions: {
choices: [
{ label: 'foreground', value: 'foreground' },
{ label: 'background', value: 'background' },
],
},
},
{
key: 'axesTicksPosition',
help: `Axes ticks position.`,
type: `string`,
required: false,
defaultValue: defaults.axesTicksPosition,
controlType: 'radio',const initialProperties = {
variables,
margin: {
top: 50,
right: 60,
bottom: 50,
left: 60,
},
layout: commonDefaultProps.layout,
curve: commonDefaultProps.curve,
colors: commonDefaultProps.colors,
colorBy: commonDefaultProps.colorBy,
strokeWidth: 1,
lineOpacity: 0.2,
axesPlan: commonDefaultProps.axesPlan,
axesTicksPosition: commonDefaultProps.axesTicksPosition,
pixelRatio:
typeof window !== 'undefined' && window.devicePixelRatio ? window.devicePixelRatio : 1,
}
const generateData = () => generateParallelCoordinatesData({ size: lineCount })
const ParallelCoordinatesCanvas = () => {
return (data: generateParallelCoordinatesData({ size: 32 }),
settings: {
variables,
margin: {
top: 50,
right: 60,
bottom: 50,
left: 60,
},
layout: defaultProps.layout,
curve: defaultProps.curve,
colors: defaultProps.colors,
colorBy: defaultProps.colorBy,
strokeWidth: defaultProps.strokeWidth,
lineOpacity: defaultProps.lineOpacity,
axesPlan: defaultProps.axesPlan,
axesTicksPosition: defaultProps.axesTicksPosition,
animate: true,
motionStiffness: 90,
motionDamping: 12,
theme: merge({}, nivoTheme, {
axis: {
ticks: {
line: {
strokeWidth: 2,
strokeLinecap: 'square',
},
},
domain: {
line: {
strokeWidth: 2,
strokeLinecap: 'square',const initialProperties = {
variables,
margin: {
top: 50,
right: 60,
bottom: 50,
left: 60,
},
layout: commonDefaultProps.layout,
curve: commonDefaultProps.curve,
colors: commonDefaultProps.colors,
colorBy: commonDefaultProps.colorBy,
strokeWidth: commonDefaultProps.strokeWidth,
lineOpacity: commonDefaultProps.lineOpacity,
axesPlan: commonDefaultProps.axesPlan,
axesTicksPosition: commonDefaultProps.axesTicksPosition,
animate: true,
motionStiffness: 90,
motionDamping: 12,
}
const generateData = () => generateParallelCoordinatesData({ size: 32 })
const ParallelCoordinates = () => {
return (data: generateParallelCoordinatesData({ size: lineCount }),
settings: {
variables,
margin: {
top: 50,
right: 60,
bottom: 50,
left: 60,
},
layout: defaultProps.layout,
curve: defaultProps.curve,
colors: defaultProps.colors,
colorBy: defaultProps.colorBy,
strokeWidth: 1,
lineOpacity: 0.2,
axesPlan: defaultProps.axesPlan,
axesTicksPosition: defaultProps.axesTicksPosition,
pixelRatio: window && window.devicePixelRatio ? window.devicePixelRatio : 1,
theme: merge({}, nivoTheme, {
axis: {
ticks: {
line: {
strokeWidth: 2,
strokeLinecap: 'square',
},
},
domain: {
line: {
strokeWidth: 2,
strokeLinecap: 'square',
},
},settings: {
variables,
margin: {
top: 50,
right: 60,
bottom: 50,
left: 60,
},
layout: defaultProps.layout,
curve: defaultProps.curve,
colors: defaultProps.colors,
colorBy: defaultProps.colorBy,
strokeWidth: 1,
lineOpacity: 0.2,
axesPlan: defaultProps.axesPlan,
axesTicksPosition: defaultProps.axesTicksPosition,
pixelRatio: window && window.devicePixelRatio ? window.devicePixelRatio : 1,
theme: merge({}, nivoTheme, {
axis: {
ticks: {
line: {
strokeWidth: 2,
strokeLinecap: 'square',
},
},
domain: {
line: {
strokeWidth: 2,
strokeLinecap: 'square',
},
},
},
Popular @nivo/parallel-coordinates functions
- @nivo/parallel-coordinates.commonDefaultProps.axesPlan
- @nivo/parallel-coordinates.commonDefaultProps.axesTicksPosition
- @nivo/parallel-coordinates.commonDefaultProps.colorBy
- @nivo/parallel-coordinates.commonDefaultProps.colors
- @nivo/parallel-coordinates.commonDefaultProps.curve
- @nivo/parallel-coordinates.commonDefaultProps.layout
- @nivo/parallel-coordinates.commonDefaultProps.lineOpacity
- @nivo/parallel-coordinates.commonDefaultProps.strokeWidth