util-sdg-wheel
Wheel chart showing positive and negative impact on 17 SDGs (Sustainable Development Goals). Built using React and Typescript.
Installation and usage
The easiest way to use util-sdg-wheel is to install it from npm:
npm install @util-co/sdg-wheel
React version 18.0.0 or higher is required. Sdg wheel includes bundled TypeScript declarations.
Then use it in your app:
const WHEEL_DATA = [
{
id: 'SDG-01',
scoreNegative: -20,
scorePositive: 25
},
{
id: 'SDG-02',
scorePositive: 40
}
];
<Wheel data={WHEEL_DATA} />
Sdg wheel segments can be selected and deselected:
const ClickableWheelExample = () => {
const [selectedSdgs, setSelectedSdgs] = useState<string[]>([]);
return (
<>
<Wheel
data={WHEEL_DATA}
handleSegmentClick={(event, { id }) => setSelectedSdgs([id])}
handleCenterClick={() => setSelectedSdgs([])}
selectSegments={selectedSdgs}
/>
<button
onClick={() =>
setSelectedSdgs(['SDG-12', 'SDG-13', 'SDG-14', 'SDG-15'])
}
>
Select Environment Goals
</button>
</>
);
};
Example above illustrates the following behavior:
- Segment can be selected on click on it
- Segment can be selected / deselected using custom trigger
- All segments can be deselected on click on center of the wheel
Requirements to data
Data should be an array of up to 17 objects of the following shape:
-
id
: sdg id fromSDG-01
toSDG-17
-
scorePositive
: number from 0 to 100 -
scoreNegative
: number from -100 to 0. Minus sign can be omitted.
Both scorePositive
and scoreNegative
are optional.
Example:
const WHEEL_DATA = [
{
id: 'SDG-01',
scoreNegative: -20,
scorePositive: 25
},
{
id: 'SDG-02',
scorePositive: 40
}
];
Development mode
Once you clone the repo and install dependencies, you can start development server:
npm start
Navigate to localhost:1704
to see wheel examples.
You can modify wheel examples in playground.tsx file.