hophiphip/react-fishbone

React fishbone (Ishikawa) diagram component.

React Fishbone

React fishbone (Ishikawa) diagram component.

Installation

npm i @hophiphip/react-fishbone

Usage

Import the component

import Fishbone from '@hophiphip/react-fishbone';

Component usage example

<Fishbone 
    items={{
        "name": "Flaws",
        "children": [
            {
                "name": "Machines",
                "children": [
                    {"name": "Speed"},
                    {"name": "Bits"},
                    {"name": "Sockets"}
                ]
            }
        ]
    }}
    wrapperStyle={{ 
        width: 1000, 
        height: 500,
    }}
/>

API

FishboneNode

Fishbone diagram node.

Property	Type	Description
name	string	Text content
children	FishboneNode[], undefined	Nested children

LineConfig

Fishbone line/link parameters for specific level of nesting

Property	Type	Description
color	string	Line color
strokeWidthPx	number	Line width in px

NodeConfig

Fishbone node parameters for specific level of nesting

Property	Type	Description
color	string	Text color
fontSizeEm	number	Text size in em

FishboneProps

Fishbone component props.

Property	Type	Description
width	string, number, undefined	Component width
height	string, number, undefined	Component height
items	FishboneNode, undefined	Component node items
linesConfig	LineConfig[], undefined	Component line config for each level of nesting
nodesConfig	NodeConfig[], undefined	Component node items for each level of nesting
wrapperStyle	React.CSSProperties, undefined	Component wrapper <div /> style

Storybook

Building/Running storybook might cause an error

Error: error:0308010C:digital envelope routines::unsupported

That error appears in NodeJS versions > 16. Temporary solution is to set NODE_OPTIONS to --openssl-legacy-provider

cross-env NODE_OPTIONS=--openssl-legacy-provider npm run storybook
cross-env NODE_OPTIONS=--openssl-legacy-provider npm run build-storybook

react-fishbone's Issues

Node Overlap

Nodes are overlapping to each other, it is difficult to view by dragging the node!