thiagoferrax/fishbone-chart

Get a fishbone chart that can be used as a react component.

fishbone-chart

Get a fishbone chart as a react component.

Install

npm install --save fishbone-chart

Usage

import React, { Component } from 'react'

import FishboneChart from 'fishbone-chart'

class Example extends Component {
  render () {
    const data = {
      'Bad coffee': {
        'Procedures': ['Too much water', 'Too many grounds', 'Lack of training'],
        'Equipment': ['Dirty cups', 'Coffee not hot enough', 'Dirty basket'],
        'Material': ['Bad sugar', 'Lids do not fit cup', 'Bad cream'],
        'People': ['Wrong fee', 'No training', 'Rude'],
        'Machine': ['Not working', 'Deregulated', 'Dirty']
      },
      'Scrum not working': {
        'Principles': ['Functional software (SW) is not released'],
        'Product Owner (PO)': ['No authority to prioritize', 'Poor interaction with the team'],
        'Sprint': ['SW not released for validation', 'Sprint speed is not measured', 'Team is controlled from outside'],
        'Planning': ['PO does not explain the backlog'],
        'Development Team': ['Members dedicated to specific roles', 'Does not deliver what was promised'],
      },
      'Security Incident': {
        'Technology': ['Weak encryption', 'No technology for remote data destruction'],
        'Process': ['No process for reporting incident'],
        'People': ['Worker lost laptop', 'Distraction was a factor'],
        'Controls': ['Week password policy', 'No audit trail of the laptop information'],
        'Procedure': ['No procedure for securing laptop at public locations'],
        'Environment': ['No place to secure laptop overnight at workplace']
      }
    }

    return (
      <FishboneChart data={data} />
    )
  }
}

License

MIT © thiagoferrax