# circle-divided-by-chord

> ```bash npm install --save circle-divided-by-chord ```

Latest version **0.0.3** (published 2020-09-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install circle-divided-by-chord
pnpm add circle-divided-by-chord
yarn add circle-divided-by-chord
bun add circle-divided-by-chord
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2020-09-27 |
| First published | 2019-09-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 7.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Ilaria Venturini |
| Maintainers | ilav |

## Links

- npm: https://www.npmjs.com/package/circle-divided-by-chord
- Repository: https://github.com/ilariaventurini/circle-divided-by-chord
- npm.io page: https://npm.io/package/circle-divided-by-chord

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^16.6.3
- [react-dom](https://npm.io/package/react-dom.md) ^16.6.3
- [@types/react](https://npm.io/package/@types/react.md) ^16.9.48
- [tachyons-extra](https://npm.io/package/tachyons-extra.md) ^1.0.3
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^16.9.8
- [divide-up-circle-in-circular-segments](https://npm.io/package/divide-up-circle-in-circular-segments.md) ^1.0.5

## Recent versions

- 0.0.3 (latest) — 2020-09-27
- 2.0.2 — 2019-09-20
- 2.0.1 — 2019-09-20
- 2.0.0 — 2019-09-15

## README

<div align="center" style="text-align: center">
  <h1>Circle divided by chord</h1>
  <p>Divide a circle into two circular segments whose area is proportional to the data</p>
</div>

<p align="center">
  <a href="https://www.npmjs.com/package/circle-divided-by-chord">
    <img alt="npm"
      src="https://img.shields.io/npm/v/circle-divided-by-chord.svg">
  </a>
</p>

---

This React component allows you to divide a circle into two circular segments whose area is proportional to the data received in input.\
Take a look to [divide-up-circle-in-circular-segments](https://github.com/ilariaventurini/divide-up-circle-in-circular-segments) for more information.

## Install

```bash
npm install --save circle-divided-by-chord
```

or

```bash
yarn add circle-divided-by-chord
```

## API

Props are all optional:

| Prop      |   Type   | Default value | Description                 |
| --------- | :------: | ------------: | --------------------------- |
| `color1`  | `string` |     `#8DC0B1` | color of the first section  |
| `color2`  | `string` |     `#F3E0D2` | color of the second section |
| `radius`  | `number` |         `200` | radius of the circle (px)   |
| `datum1`  | `number` |          `20` | first datum in `[0-100]`    |
| `datum2`  | `number` |          `80` | second datum in `[0-100]`   |
| `angle`   | `number` |         `135` | rotation angle (degree)     |

## Demo page

[Here](https://circle-divided-by-chord.netlify.app/) the demo page.

![demo](https://user-images.githubusercontent.com/44204353/94367340-5bee0f80-00de-11eb-9a1e-e8096bf21661.gif)

## Examples

```tsx
import React from "react"
import CircleDividedByChord from "circle-divided-by-chord"

const Example = () => {
  return <CircleDividedByChord />
}
```

![example1](https://user-images.githubusercontent.com/44204353/64919110-5fe71200-d7a7-11e9-870c-4378fec77039.png)

---

```tsx
import React from "react"
import CircleDividedByChord from "circle-divided-by-chord"

const Example = () => {
  return (
    <CircleDividedByChord
      radius={150}
      datum1={50}
      datum2={50}
      angle={0}
      color1="#FF6663"
      color2="#0B3954"
    />
  )
}
```

![example2](https://user-images.githubusercontent.com/44204353/94367513-84c2d480-00df-11eb-9a1a-eb5182a49f73.png)

---

```tsx
import React from "react"
import CircleDividedByChord from "circle-divided-by-chord"

const Example = () => {
  return (
    <CircleDividedByChord
      radius={150}
      datum1={70}
      datum2={30}
      angle={0}
      color1="#525174"
      color2="#5DD39E"
    />
  )
}
```

![example3](https://user-images.githubusercontent.com/44204353/94367662-74f7c000-00e0-11eb-827e-8f5e08f49374.png)

## License

[MIT](https://github.com/ilariaventurini/circle-divided-by-chord/blob/master/LICENSE) © [Ilaria Venturini](https://github.com/ilariaventurini)

---

This project was bootstrapped with [urca generator](https://github.com/ilariaventurini/urca/).

---
_Source: https://npm.io/package/circle-divided-by-chord · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._