# @nicktomlin/pie

> A tiny pie chart plugin for (P)React.

Latest version **1.0.0-alpha.5** (published 2017-09-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nicktomlin/pie
pnpm add @nicktomlin/pie
yarn add @nicktomlin/pie
bun add @nicktomlin/pie
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha.5 |
| Published | 2017-09-28 |
| First published | 2017-08-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | nicktomlin |

## Links

- npm: https://www.npmjs.com/package/@nicktomlin/pie
- npm.io page: https://npm.io/package/@nicktomlin/pie

## Recent versions

- 1.0.0-alpha.5 (latest) — 2017-09-28
- 1.0.0-alpha.4 — 2017-08-18
- 1.0.0-alpha.3 — 2017-08-13
- 1.0.0-alpha.2 — 2017-08-13
- 1.0.0-alpha.1 — 2017-08-12

## README

pie [![npm version](https://badge.fury.io/js/%40nicktomlin%2Fpie.svg)](https://badge.fury.io/js/%40nicktomlin%2Fpie) [![Build Status](https://travis-ci.org/NickTomlin/pie.svg?branch=master)](https://travis-ci.org/NickTomlin/pie)
---

Create deliciously declarative pie charts with (P)React.

:warning: this is published as an alpha not considered ready for wide use. I'm just playing around :warning:

```shell
npm i @nicktomlin/pie
```

```jsx
import {Pie, Slice} from '@nicktomlin/pie' // OR @nicktomlin/pie/dist/pie.preact

<Pie>
  <Slice percent={0.1} fill='Coral' />
  <Slice percent={0.7} fill='CornFlowerBlue' />
  <Slice percent={0.2} fill='#00ab6b' />
</Pie>
```

Features
---

- [x] Actually renders a pie chart
- [x] Preact compatible (vanilla without needing `preact-compat`)
- [x] Doughnut chart
- [ ] Top/Bottom Labels
- [ ] Hover effects (technically one could just pass props through to `Slice>` and be done with it but we could also make this easier)

Prior Art
---

- [hard things stolen from a simple pie chart in SVG](https://hackernoon.com/a-simple-pie-chart-in-svg-dbdd653b6936)
- Structure stolen from [Ryan Florence's "Compound Components" talk](https://www.youtube.com/watch?v=hEGg-3pIHlE)
- You should probably just use [charts.js](http://www.chartjs.org/) or [d3](https://d3js.org/)

Contributing
---

1. Fork and clone this repo
2. Make your changes
3. Please add a test if possible
4. Ensure that `npm test` passes
5. Open up a pull request

---
_Source: https://npm.io/package/@nicktomlin/pie · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._