@util-co/sdg-wheel v0.0.29
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: 1. Segment can be selected on click on it 2. Segment can be selected / deselected using custom trigger 3. 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 100scoreNegative
: 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.
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago