@util-co/sdg-wheel/README.md

Wheel chart showing positive and negative impact on 17 SDGs (Sustainable Development Goals)

# util-sdg-wheel

<a href="https://codeclimate.com/repos/6509bf66c7608469a23a799a/maintainability"><img src="https://api.codeclimate.com/v1/badges/fe2ab1bc1be4ede5868c/maintainability" /></a>   <a href="https://codeclimate.com/repos/6509bf66c7608469a23a799a/test_coverage"><img src="https://api.codeclimate.com/v1/badges/fe2ab1bc1be4ede5868c/test_coverage" /></a>

Wheel chart showing positive and negative impact on 17 SDGs (Sustainable Development Goals). Built using React and Typescript.

![Wheel Image](https://public-assets.util.co/github/images/wheel.png)

# 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:

```jsx
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:
```jsx
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:
```js
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](src/playground.tsx) file.