react-pswot-plot
by the Growth Lab at Harvard's Center for International Development
React component for creating a SWOT scatterplot with a beeswarm at the zero-axis for Potential
This package is part of Harvard Growth Lab’s portfolio of software packages, digital products and interactive data visualizations. To browse our entire portfolio, please visit The Viz Hub at growthlab.app. To learn more about our research, please visit Harvard Growth Lab’s home page.
Install
npm install --save react-pswot-plot
Usage
import React from 'react'
import PSwotPlot from 'react-pswot-plot'
const App = () => {
...
return (
<Root>
<PSwotPlot
id={'react-pswot-plot-demo'}
data={data}
/>
</Root>
)
}
Props
The PSwotPlot component takes the following props:
- id:
string
- data:
Datum[]
- chartTitle:
string
- axisLabels (optional):
- left (optional):
string
- leftUp (optional):
string
- leftDown (optional):
string
- bottom (optional):
string
- bottomLeft (optional):
string
- bottomRight (optional):
string
- axisMinMax (optional):
- minX (optional):
number
- maxX (optional):
number
- minY (optional):
number
- maxY (optional):
number
- averageLineText (optional):
string
- averageLineTextDesc (optional):
string
- yLineText (optional):
string
- yLineTextDesc (optional):
string
- zeroAxisLabel (optional):
string
- quadrantLabels (optional):
- I (optional):
string
- II (optional):
string
- III (optional):
string
- IV (optional):
string
- V (optional):
string
- axisLabelColor (optional):
string
- quadrantLabelColor (optional):
string
- quadrantBackgroundColors (optional):
- I (optional):
string
- II (optional):
string
- III (optional):
string
- IV (optional):
string
- V (optional):
string
- onQuadrantLabelMouseMove (optional):
(quadrant: {id: string, label: string}, coords: {x: number, y: number}) => void
- onQuadrantLabelMouseLeave (optional):
(quadrant: {id: string, label: string}) => void
Datum
The Datum type is an interface of the following values:
- id:
string
- label:
string
- x:
number
- y:
number
- fill (optional):
string
- stroke (optional):
string
- radius (optional):
number
- onClick (optional):
(datum: Datum) => void
- onMouseMove (optional):
(datum: Datum, coords: {x: number, y: number}) => void
- onMouseLeave (optional):
(datum: Datum) => void
- highlighted (optional):
boolean
- faded (optional):
boolean
License
MIT © The President and Fellows of Harvard College