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 from SDG-01 to SDG-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.