How to use the @nivo/parallel-coordinates.commonDefaultProps.layout function in @nivo/parallel-coordinates

//     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',

import meta from '../../data/components/parallel-coordinates/meta.yml'
import mapper from '../../data/components/parallel-coordinates/mapper'
import { groups } from '../../data/components/parallel-coordinates/props'
import variables from '../../data/components/parallel-coordinates/variables'

const lineCount = 320

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 (

import properties from './props'
import propsMapper from './propsMapper'
import variables from './variables'

export default class ParallelCoordinates extends Component {
    state = {
        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',

import { generateParallelCoordinatesData } from '@nivo/generators'
import ComponentTemplate from '../../components/components/ComponentTemplate'
import meta from '../../data/components/parallel-coordinates/meta.yml'
import mapper from '../../data/components/parallel-coordinates/mapper'
import { groups } from '../../data/components/parallel-coordinates/props'
import variables from '../../data/components/parallel-coordinates/variables'

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 (

import variables from './variables'

const lineCount = 320

export default class ParallelCoordinatesCanvas extends Component {
    state = {
        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',
                        },
                    },