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.
npm install --save react-pswot-plotimport React from 'react'
import PSwotPlot from 'react-pswot-plot'
const App = () => {
...
return (
<Root>
<PSwotPlot
id={'react-pswot-plot-demo'}
data={data}
/>
</Root>
)
}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
- left (optional):
- axisMinMax (optional):
- minX (optional):
number - maxX (optional):
number - minY (optional):
number - maxY (optional):
number
- minX (optional):
- 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
- I (optional):
- axisLabelColor (optional):
string - quadrantLabelColor (optional):
string - quadrantBackgroundColors (optional):
- I (optional):
string - II (optional):
string - III (optional):
string - IV (optional):
string - V (optional):
string
- I (optional):
- onQuadrantLabelMouseMove (optional):
(quadrant: {id: string, label: string}, coords: {x: number, y: number}) => void - onQuadrantLabelMouseLeave (optional):
(quadrant: {id: string, label: string}) => void
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