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

How to use @nivo/bullet - 10 common examples

To help you get started, we’ve selected a few @nivo/bullet 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 / pages / bullet / index.js View on Github external
top: 50,
        right: 90,
        bottom: 50,
        left: 90,
    },
    layout: BulletDefaultProps.layout,
    reverse: BulletDefaultProps.reverse,
    spacing: 46,
    titlePosition: BulletDefaultProps.titlePosition,
    titleAlign: 'start',
    titleOffsetX: -70,
    titleOffsetY: BulletDefaultProps.titleOffsetY,
    titleRotation: BulletDefaultProps.titleRotation,
    measureSize: 0.2,
    markerSize: 0.6,
    axisPosition: BulletDefaultProps.axisPosition,
    rangeColors: BulletDefaultProps.rangeColors,
    measureColors: BulletDefaultProps.measureColors,
    markerColors: BulletDefaultProps.markerColors,
    animate: true,
    motionStiffness: 90,
    motionDamping: 12,
}

const Bullet = () => {
    return (
github plouc / nivo / website / src / components / charts / bullet / Bullet.js View on Github external
top: 50,
                right: 90,
                bottom: 50,
                left: 90,
            },
            layout: BulletDefaultProps.layout,
            reverse: BulletDefaultProps.reverse,
            spacing: 46,
            titlePosition: BulletDefaultProps.titlePosition,
            titleAlign: 'start',
            titleOffsetX: -70,
            titleOffsetY: BulletDefaultProps.titleOffsetY,
            titleRotation: BulletDefaultProps.titleRotation,
            measureSize: 0.2,
            markerSize: 0.6,
            axisPosition: BulletDefaultProps.axisPosition,
            rangeColors: BulletDefaultProps.rangeColors,
            measureColors: BulletDefaultProps.measureColors,
            markerColors: BulletDefaultProps.markerColors,
            animate: true,
            motionStiffness: 90,
            motionDamping: 12,
            theme: nivoTheme,
        },
    }

    diceRoll = () => {
        this.setState({ data: generateData() })
    }

    handleSettingsUpdate = settings => {
        this.setState({ settings })
github plouc / nivo / website / src / data / components / bullet / props.js View on Github external
`,
        type: 'string | Function| string[]',
        required: false,
        defaultValue: defaults.markerColors,
        controlType: 'colors',
        group: 'Style',
        controlOptions: {
            includeSequential: true,
        },
    },
    {
        key: 'axisPosition',
        help: `Where to put axis.`,
        type: 'string',
        required: false,
        defaultValue: defaults.axisPosition,
        controlType: 'radio',
        group: 'Axes',
        controlOptions: {
            choices: [
                { label: 'before', value: 'before' },
                { label: 'after', value: 'after' },
            ],
        },
    },
    {
        key: 'titlePosition',
        help: `Where to put title.`,
        type: 'string',
        required: false,
        defaultValue: defaults.titlePosition,
        controlType: 'radio',
github plouc / nivo / website / src / data / components / bullet / props.js View on Github external
required: true,
        controlType: 'range',
        controlOptions: {
            unit: 'px',
            min: 100,
            max: 1000,
            step: 5,
        },
    },
    {
        key: 'layout',
        group: 'Base',
        help: `How to display items.`,
        type: 'string',
        required: false,
        defaultValue: defaults.layout,
        controlType: 'radio',
        controlOptions: {
            choices: [
                { label: 'horizontal', value: 'horizontal' },
                { label: 'vertical', value: 'vertical' },
            ],
        },
    },
    {
        key: 'reverse',
        group: 'Base',
        help: 'Reverse chart.',
        description: `
            Reverse chart, starts on top instead of bottom
            for vertical layout and right instead of left
            for horizontal one.
github plouc / nivo / website / src / pages / bullet / index.js View on Github external
const generateData = () => [
    generateBulletData('temp.', shuffle([100, 120, 140])[0]),
    generateBulletData('power', 2, { float: true, measureCount: 2 }),
    generateBulletData('volume', shuffle([40, 60, 80])[0], { rangeCount: 8 }),
    generateBulletData('cost', 500000, { measureCount: 2 }),
    generateBulletData('revenue', shuffle([9, 11, 13])[0], { markerCount: 2 }),
]

const initialProperties = {
    margin: {
        top: 50,
        right: 90,
        bottom: 50,
        left: 90,
    },
    layout: BulletDefaultProps.layout,
    reverse: BulletDefaultProps.reverse,
    spacing: 46,
    titlePosition: BulletDefaultProps.titlePosition,
    titleAlign: 'start',
    titleOffsetX: -70,
    titleOffsetY: BulletDefaultProps.titleOffsetY,
    titleRotation: BulletDefaultProps.titleRotation,
    measureSize: 0.2,
    markerSize: 0.6,
    axisPosition: BulletDefaultProps.axisPosition,
    rangeColors: BulletDefaultProps.rangeColors,
    measureColors: BulletDefaultProps.measureColors,
    markerColors: BulletDefaultProps.markerColors,
    animate: true,
    motionStiffness: 90,
    motionDamping: 12,
github plouc / nivo / website / src / components / charts / bullet / Bullet.js View on Github external
generateBulletData('volume', shuffle([40, 60, 80])[0], { rangeCount: 8 }),
    generateBulletData('cost', 500000, { measureCount: 2 }),
    generateBulletData('revenue', shuffle([9, 11, 13])[0], { markerCount: 2 }),
]

export default class Bullet extends Component {
    state = {
        data: generateData(),
        settings: {
            margin: {
                top: 50,
                right: 90,
                bottom: 50,
                left: 90,
            },
            layout: BulletDefaultProps.layout,
            reverse: BulletDefaultProps.reverse,
            spacing: 46,
            titlePosition: BulletDefaultProps.titlePosition,
            titleAlign: 'start',
            titleOffsetX: -70,
            titleOffsetY: BulletDefaultProps.titleOffsetY,
            titleRotation: BulletDefaultProps.titleRotation,
            measureSize: 0.2,
            markerSize: 0.6,
            axisPosition: BulletDefaultProps.axisPosition,
            rangeColors: BulletDefaultProps.rangeColors,
            measureColors: BulletDefaultProps.measureColors,
            markerColors: BulletDefaultProps.markerColors,
            animate: true,
            motionStiffness: 90,
            motionDamping: 12,
github plouc / nivo / website / src / pages / bullet / index.js View on Github external
left: 90,
    },
    layout: BulletDefaultProps.layout,
    reverse: BulletDefaultProps.reverse,
    spacing: 46,
    titlePosition: BulletDefaultProps.titlePosition,
    titleAlign: 'start',
    titleOffsetX: -70,
    titleOffsetY: BulletDefaultProps.titleOffsetY,
    titleRotation: BulletDefaultProps.titleRotation,
    measureSize: 0.2,
    markerSize: 0.6,
    axisPosition: BulletDefaultProps.axisPosition,
    rangeColors: BulletDefaultProps.rangeColors,
    measureColors: BulletDefaultProps.measureColors,
    markerColors: BulletDefaultProps.markerColors,
    animate: true,
    motionStiffness: 90,
    motionDamping: 12,
}

const Bullet = () => {
    return (
github plouc / nivo / website / src / data / components / bullet / props.js View on Github external
group: 'Style',
        help: 'Custom component for markers.',
        type: 'Function',
        required: false,
    },
    {
        key: 'markerColors',
        help: 'Markers colors.',
        description: `
            Defines colors for markers,
            you can either use categorical colors:
            \`greens\` or sequential form: \`seq:green\`.
        `,
        type: 'string | Function| string[]',
        required: false,
        defaultValue: defaults.markerColors,
        controlType: 'colors',
        group: 'Style',
        controlOptions: {
            includeSequential: true,
        },
    },
    {
        key: 'axisPosition',
        help: `Where to put axis.`,
        type: 'string',
        required: false,
        defaultValue: defaults.axisPosition,
        controlType: 'radio',
        group: 'Axes',
        controlOptions: {
            choices: [
github plouc / nivo / website / src / components / charts / bullet / Bullet.js View on Github external
left: 90,
            },
            layout: BulletDefaultProps.layout,
            reverse: BulletDefaultProps.reverse,
            spacing: 46,
            titlePosition: BulletDefaultProps.titlePosition,
            titleAlign: 'start',
            titleOffsetX: -70,
            titleOffsetY: BulletDefaultProps.titleOffsetY,
            titleRotation: BulletDefaultProps.titleRotation,
            measureSize: 0.2,
            markerSize: 0.6,
            axisPosition: BulletDefaultProps.axisPosition,
            rangeColors: BulletDefaultProps.rangeColors,
            measureColors: BulletDefaultProps.measureColors,
            markerColors: BulletDefaultProps.markerColors,
            animate: true,
            motionStiffness: 90,
            motionDamping: 12,
            theme: nivoTheme,
        },
    }

    diceRoll = () => {
        this.setState({ data: generateData() })
    }

    handleSettingsUpdate = settings => {
        this.setState({ settings })
    }

    handleRangeClick = (range, event) => {
github plouc / nivo / website / src / data / components / bullet / props.js View on Github external
group: 'Style',
        help: 'Custom component for measures.',
        type: 'Function',
        required: false,
    },
    {
        key: 'measureColors',
        help: 'Measures colors.',
        description: `
            Defines colors for measures,
            you can either use categorical colors:
            \`greens\` or sequential form: \`seq:green\`.
        `,
        type: 'string | Function | string[]',
        required: false,
        defaultValue: defaults.measureColors,
        controlType: 'colors',
        group: 'Style',
        controlOptions: {
            includeSequential: true,
        },
    },
    {
        key: 'markerComponent',
        flavors: ['svg'],
        group: 'Style',
        help: 'Custom component for markers.',
        type: 'Function',
        required: false,
    },
    {
        key: 'markerColors',

@nivo/bullet

GitHub
MIT
Latest version published 7 months ago

Package Health Score

82 / 100
Full package analysis

Popular @nivo/bullet functions

Similar packages