1. Advisor
  2. @nivo/bump
  3. @nivo/bump code examples
View all @nivo/bump analysis

How to use @nivo/bump - 10 common examples

To help you get started, we’ve selected a few @nivo/bump 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 / data / components / area-bump / props.js View on Github external
group: 'Style',
    },
    {
        key: 'borderOpacity',
        group: 'Style',
        type: 'number | (serie: Serie) => number',
        help: 'Area border opacity.',
        defaultValue: defaults.borderOpacity,
        controlType: 'opacity',
    },
    {
        key: 'activeBorderOpacity',
        group: 'Style',
        type: 'number | (serie: Serie) => number',
        help: 'Area border opacity for active series.',
        defaultValue: defaults.activeBorderOpacity,
        controlType: 'opacity',
    },
    {
        key: 'inactiveBorderOpacity',
        group: 'Style',
        type: 'number | (serie: Serie) => number',
        help: 'Area border opacity for inactive series.',
        defaultValue: defaults.inactiveBorderOpacity,
        controlType: 'opacity',
    },
    {
        key: 'startLabel',
        group: 'Labels',
        type: 'false | string | (serie: Serie) => string',
        defaultValue: defaults.startLabel,
    },
github plouc / nivo / website / src / pages / area-bump / index.js View on Github external
align: AreaBumpDefaultProps.align,
    interpolation: AreaBumpDefaultProps.interpolation,
    spacing: 8,
    xPadding: AreaBumpDefaultProps.xPadding,

    colors: { scheme: 'nivo' },
    blendMode: 'multiply',
    fillOpacity: AreaBumpDefaultProps.fillOpacity,
    activeFillOpacity: AreaBumpDefaultProps.activeFillOpacity,
    inactiveFillOpacity: AreaBumpDefaultProps.inactiveFillOpacity,
    borderWidth: AreaBumpDefaultProps.borderWidth,
    activeBorderWidth: AreaBumpDefaultProps.activeBorderWidth,
    inactiveBorderWidth: AreaBumpDefaultProps.inactiveBorderWidth,
    borderColor: AreaBumpDefaultProps.borderColor,
    borderOpacity: AreaBumpDefaultProps.borderOpacity,
    activeBorderOpacity: AreaBumpDefaultProps.activeBorderOpacity,
    inactiveBorderOpacity: AreaBumpDefaultProps.inactiveBorderOpacity,

    startLabel: 'id',
    startLabelPadding: AreaBumpDefaultProps.startLabelPadding,
    startLabelTextColor: AreaBumpDefaultProps.startLabelTextColor,
    endLabel: 'id',
    endLabelPadding: AreaBumpDefaultProps.endLabelPadding,
    endLabelTextColor: AreaBumpDefaultProps.endLabelTextColor,

    enableGridX: AreaBumpDefaultProps.enableGridX,
    axisTop: {
        enable: true,
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: '',
github plouc / nivo / website / src / pages / area-bump / index.js View on Github external
bottom: 40,
        left: 100,
    },

    align: AreaBumpDefaultProps.align,
    interpolation: AreaBumpDefaultProps.interpolation,
    spacing: 8,
    xPadding: AreaBumpDefaultProps.xPadding,

    colors: { scheme: 'nivo' },
    blendMode: 'multiply',
    fillOpacity: AreaBumpDefaultProps.fillOpacity,
    activeFillOpacity: AreaBumpDefaultProps.activeFillOpacity,
    inactiveFillOpacity: AreaBumpDefaultProps.inactiveFillOpacity,
    borderWidth: AreaBumpDefaultProps.borderWidth,
    activeBorderWidth: AreaBumpDefaultProps.activeBorderWidth,
    inactiveBorderWidth: AreaBumpDefaultProps.inactiveBorderWidth,
    borderColor: AreaBumpDefaultProps.borderColor,
    borderOpacity: AreaBumpDefaultProps.borderOpacity,
    activeBorderOpacity: AreaBumpDefaultProps.activeBorderOpacity,
    inactiveBorderOpacity: AreaBumpDefaultProps.inactiveBorderOpacity,

    startLabel: 'id',
    startLabelPadding: AreaBumpDefaultProps.startLabelPadding,
    startLabelTextColor: AreaBumpDefaultProps.startLabelTextColor,
    endLabel: 'id',
    endLabelPadding: AreaBumpDefaultProps.endLabelPadding,
    endLabelTextColor: AreaBumpDefaultProps.endLabelTextColor,

    enableGridX: AreaBumpDefaultProps.enableGridX,
    axisTop: {
        enable: true,
github plouc / nivo / website / src / data / components / area-bump / props.js View on Github external
controlType: 'opacity',
    },
    {
        key: 'borderWidth',
        group: 'Style',
        type: 'number | (serie: Serie) => number',
        help: 'Area border width.',
        defaultValue: defaults.borderWidth,
        controlType: 'lineWidth',
    },
    {
        key: 'activeBorderWidth',
        group: 'Style',
        type: 'number | (serie: Serie) => number',
        help: 'Area border width for active series.',
        defaultValue: defaults.activeBorderWidth,
        controlType: 'lineWidth',
    },
    {
        key: 'inactiveBorderWidth',
        group: 'Style',
        type: 'number | (serie: Serie) => number',
        help: 'Area border width for inactive series.',
        defaultValue: defaults.inactiveBorderWidth,
        controlType: 'lineWidth',
    },
    {
        key: 'borderColor',
        help: 'Method to compute area border color.',
        type: 'string | object | Function',
        required: false,
        defaultValue: defaults.borderColor,
github plouc / nivo / website / src / data / components / area-bump / props.js View on Github external
controlType: 'blendMode',
    },
    {
        key: 'fillOpacity',
        group: 'Style',
        type: 'number | (serie: Serie) => number',
        help: 'Area fill opacity.',
        defaultValue: defaults.fillOpacity,
        controlType: 'opacity',
    },
    {
        key: 'activeFillOpacity',
        group: 'Style',
        type: 'number | (serie: Serie) => number',
        help: 'Area fill opacity for active series.',
        defaultValue: defaults.activeFillOpacity,
        controlType: 'opacity',
    },
    {
        key: 'inactiveFillOpacity',
        group: 'Style',
        type: 'number | (serie: Serie) => number',
        help: 'Area fill opacity for inactive series.',
        defaultValue: defaults.inactiveFillOpacity,
        controlType: 'opacity',
    },
    {
        key: 'borderWidth',
        group: 'Style',
        type: 'number | (serie: Serie) => number',
        help: 'Area border width.',
        defaultValue: defaults.borderWidth,
github plouc / nivo / website / src / pages / area-bump / index.js View on Github external
margin: {
        top: 40,
        right: 100,
        bottom: 40,
        left: 100,
    },

    align: AreaBumpDefaultProps.align,
    interpolation: AreaBumpDefaultProps.interpolation,
    spacing: 8,
    xPadding: AreaBumpDefaultProps.xPadding,

    colors: { scheme: 'nivo' },
    blendMode: 'multiply',
    fillOpacity: AreaBumpDefaultProps.fillOpacity,
    activeFillOpacity: AreaBumpDefaultProps.activeFillOpacity,
    inactiveFillOpacity: AreaBumpDefaultProps.inactiveFillOpacity,
    borderWidth: AreaBumpDefaultProps.borderWidth,
    activeBorderWidth: AreaBumpDefaultProps.activeBorderWidth,
    inactiveBorderWidth: AreaBumpDefaultProps.inactiveBorderWidth,
    borderColor: AreaBumpDefaultProps.borderColor,
    borderOpacity: AreaBumpDefaultProps.borderOpacity,
    activeBorderOpacity: AreaBumpDefaultProps.activeBorderOpacity,
    inactiveBorderOpacity: AreaBumpDefaultProps.inactiveBorderOpacity,

    startLabel: 'id',
    startLabelPadding: AreaBumpDefaultProps.startLabelPadding,
    startLabelTextColor: AreaBumpDefaultProps.startLabelTextColor,
    endLabel: 'id',
    endLabelPadding: AreaBumpDefaultProps.endLabelPadding,
    endLabelTextColor: AreaBumpDefaultProps.endLabelTextColor,
github plouc / nivo / website / src / data / components / area-bump / props.js View on Github external
},
    },
    {
        key: 'margin',
        group: 'Base',
        type: 'object',
        help: 'Chart margin.',
        controlType: 'margin',
    },
    {
        key: 'align',
        group: 'Base',
        help: `Chart alignment.`,
        type: 'string',
        required: false,
        defaultValue: defaults.align,
        controlType: 'choices',
        controlOptions: {
            choices: [
                { label: 'start', value: 'start' },
                { label: 'middle', value: 'middle' },
                { label: 'end', value: 'end' },
            ],
        },
    },
    {
        key: 'interpolation',
        group: 'Base',
        type: 'string',
        help: `Area interpolation.`,
        required: false,
        defaultValue: defaults.interpolation,
github plouc / nivo / website / src / pages / area-bump / index.js View on Github external
y: random(10, 30),
        })),
    }))

    return series
}

const initialProperties = {
    margin: {
        top: 40,
        right: 100,
        bottom: 40,
        left: 100,
    },

    align: AreaBumpDefaultProps.align,
    interpolation: AreaBumpDefaultProps.interpolation,
    spacing: 8,
    xPadding: AreaBumpDefaultProps.xPadding,

    colors: { scheme: 'nivo' },
    blendMode: 'multiply',
    fillOpacity: AreaBumpDefaultProps.fillOpacity,
    activeFillOpacity: AreaBumpDefaultProps.activeFillOpacity,
    inactiveFillOpacity: AreaBumpDefaultProps.inactiveFillOpacity,
    borderWidth: AreaBumpDefaultProps.borderWidth,
    activeBorderWidth: AreaBumpDefaultProps.activeBorderWidth,
    inactiveBorderWidth: AreaBumpDefaultProps.inactiveBorderWidth,
    borderColor: AreaBumpDefaultProps.borderColor,
    borderOpacity: AreaBumpDefaultProps.borderOpacity,
    activeBorderOpacity: AreaBumpDefaultProps.activeBorderOpacity,
    inactiveBorderOpacity: AreaBumpDefaultProps.inactiveBorderOpacity,
github plouc / nivo / website / src / data / components / area-bump / props.js View on Github external
controlType: 'lineWidth',
    },
    {
        key: 'inactiveBorderWidth',
        group: 'Style',
        type: 'number | (serie: Serie) => number',
        help: 'Area border width for inactive series.',
        defaultValue: defaults.inactiveBorderWidth,
        controlType: 'lineWidth',
    },
    {
        key: 'borderColor',
        help: 'Method to compute area border color.',
        type: 'string | object | Function',
        required: false,
        defaultValue: defaults.borderColor,
        controlType: 'inheritedColor',
        group: 'Style',
    },
    {
        key: 'borderOpacity',
        group: 'Style',
        type: 'number | (serie: Serie) => number',
        help: 'Area border opacity.',
        defaultValue: defaults.borderOpacity,
        controlType: 'opacity',
    },
    {
        key: 'activeBorderOpacity',
        group: 'Style',
        type: 'number | (serie: Serie) => number',
        help: 'Area border opacity for active series.',
github plouc / nivo / website / src / pages / area-bump / index.js View on Github external
},

    align: AreaBumpDefaultProps.align,
    interpolation: AreaBumpDefaultProps.interpolation,
    spacing: 8,
    xPadding: AreaBumpDefaultProps.xPadding,

    colors: { scheme: 'nivo' },
    blendMode: 'multiply',
    fillOpacity: AreaBumpDefaultProps.fillOpacity,
    activeFillOpacity: AreaBumpDefaultProps.activeFillOpacity,
    inactiveFillOpacity: AreaBumpDefaultProps.inactiveFillOpacity,
    borderWidth: AreaBumpDefaultProps.borderWidth,
    activeBorderWidth: AreaBumpDefaultProps.activeBorderWidth,
    inactiveBorderWidth: AreaBumpDefaultProps.inactiveBorderWidth,
    borderColor: AreaBumpDefaultProps.borderColor,
    borderOpacity: AreaBumpDefaultProps.borderOpacity,
    activeBorderOpacity: AreaBumpDefaultProps.activeBorderOpacity,
    inactiveBorderOpacity: AreaBumpDefaultProps.inactiveBorderOpacity,

    startLabel: 'id',
    startLabelPadding: AreaBumpDefaultProps.startLabelPadding,
    startLabelTextColor: AreaBumpDefaultProps.startLabelTextColor,
    endLabel: 'id',
    endLabelPadding: AreaBumpDefaultProps.endLabelPadding,
    endLabelTextColor: AreaBumpDefaultProps.endLabelTextColor,

    enableGridX: AreaBumpDefaultProps.enableGridX,
    axisTop: {
        enable: true,
        tickSize: 5,
        tickPadding: 5,

@nivo/bump

<a href="https://nivo.rocks"><img alt="nivo" src="https://raw.githubusercontent.com/plouc/nivo/master/nivo.png" width="216" height="68"/></a>

GitHub
MIT
Latest version published 11 days ago

Package Health Score

90 / 100
Full package analysis

Popular @nivo/bump functions

Similar packages