How to use the @nivo/core.patternLinesDef function in @nivo/core

To help you get started, we’ve selected a few @nivo/core 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.

github plouc / nivo / website / src / components / guides / patterns / PatternsIllustrations.js View on Github external
children: generateCountriesData(['value'], { size: 9 }),
                        }}
                        identity="country"
                        value="value"
                        leavesOnly={true}
                        colors={{ scheme: 'spectral' }}
                        colorBy="country"
                        borderWidth={4}
                        outerPadding={8}
                        innerPadding={8}
                        borderColor="inherit"
                        isInteractive={false}
                        animate={false}
                        enableLabel={false}
                        defs={[
                            patternLinesDef('example3.lines', {
                                rotation: -45,
                                lineWidth: 4,
                                spacing: 6,
                                background: 'transparent',
                                color: 'inherit',
                            }),
                        ]}
                        fill={[{ match: '*', id: 'example3.lines' }]}
                        theme={theme.nivo}
                    />
                
                <div>
                    patterns applied to various nivo components.
                </div>
github plouc / nivo / website / src / pages / heatmap / index.js View on Github external
cellShape: 'rect',
    cellOpacity: 1,
    cellBorderWidth: 0,
    cellBorderColor: {
        from: 'color',
        modifiers: [['darker', 0.4]],
    },

    enableLabels: true,
    labelTextColor: {
        from: 'color',
        modifiers: [['darker', 1.8]],
    },

    defs: [
        patternLinesDef('lines', {
            background: 'inherit',
            color: 'rgba(0, 0, 0, 0.1)',
            rotation: -45,
            lineWidth: 4,
            spacing: 7,
        }),
    ],
    fill: [{ match: d =&gt; false &amp;&amp; d.value &lt; 30, id: 'lines' }],

    animate: true,
    motionStiffness: 80,
    motionDamping: 9,

    isInteractive: true,
    hoverTarget: 'cell',
    cellHoverOpacity: 1,
github plouc / nivo / website / src / data / components / pie / mapper.js View on Github external
defs: (value, values) => {
            if (!values['showcase pattern usage']) return

            return [
                patternDotsDef('dots', {
                    background: 'inherit',
                    color: 'rgba(255, 255, 255, 0.3)',
                    size: 4,
                    padding: 1,
                    stagger: true,
                }),
                patternLinesDef('lines', {
                    background: 'inherit',
                    color: 'rgba(255, 255, 255, 0.3)',
                    rotation: -45,
                    lineWidth: 6,
                    spacing: 10,
                }),
            ]
        },
        fill: (value, values) => {
github plouc / nivo / website / src / pages / bar / index.js View on Github external
groupMode: 'stacked',
    layout: 'vertical',
    reverse: false,

    colors: { scheme: 'nivo' },
    colorBy: 'id',
    defs: [
        patternDotsDef('dots', {
            background: 'inherit',
            color: '#38bcb2',
            size: 4,
            padding: 1,
            stagger: true,
        }),
        patternLinesDef('lines', {
            background: 'inherit',
            color: '#eed312',
            rotation: -45,
            lineWidth: 6,
            spacing: 10,
        }),
    ],
    fill: [
        { match: { id: 'fries' }, id: 'dots' },
        { match: { id: 'sandwich' }, id: 'lines' },
    ],
    borderRadius: 0,
    borderWidth: 0,
    borderColor: {
        from: 'color',
        modifiers: [['darker', 1.6]],
github plouc / nivo / website / src / components / guides / patterns / PatternsLines.js View on Github external
{settings =&gt; (
                <svg height="{SAMPLE_SIZE}" width="{SAMPLE_SIZE}">
                    <defs></defs>
                    <rect fill="{`url(#${patternId})`}" height="{SAMPLE_SIZE}" width="{SAMPLE_SIZE}"></rect>
                </svg>
            )}
github plouc / nivo / website / src / components / guides / patterns / PatternsIllustrations.js View on Github external
data={generateCountriesData(['a', 'b', 'c'], { size: 7 })}
                        indexBy="country"
                        keys={['a', 'b', 'c']}
                        offsetType="expand"
                        axisLeft={null}
                        axisBottom={null}
                        enableGridX={false}
                        defs={[
                            patternLinesDef('example1.lines.1', {
                                rotation: 45,
                                lineWidth: 4,
                                spacing: 6,
                                background: 'transparent',
                                color: 'inherit',
                            }),
                            patternLinesDef('example1.lines.2', {
                                rotation: -45,
                                lineWidth: 1,
                                spacing: 3,
                                background: 'transparent',
                                color: 'inherit',
                            }),
                            patternDotsDef('example1.dots', {
                                background: 'transparent',
                                color: 'inherit',
                                size: 4,
                                padding: 0,
                                stagger: true,
                            }),
                        ]}
                        fill={[
                            { match: { id: 'a' }, id: 'example1.lines.1' },
github plouc / nivo / website / src / components / charts / rose / Rose.js View on Github external
bottom: 20,
                left: 60,
            },

            minValue: 'auto',
            maxValue: 'auto',

            defs: [
                patternDotsDef('dots', {
                    background: 'inherit',
                    color: '#38bcb2',
                    size: 4,
                    padding: 1,
                    stagger: true,
                }),
                patternLinesDef('lines', {
                    background: 'inherit',
                    color: '#eed312',
                    rotation: -45,
                    lineWidth: 6,
                    spacing: 10,
                }),
            ],
            fill: [
                { match: { id: 'fries' }, id: 'dots' },
                { match: { id: 'sandwich' }, id: 'lines' },
            ],
            borderWidth: 1,
            borderColor: {
                type: 'inherit:darker',
                gamma: 1.6,
            },