# quant-breakdown

> A React component to visualize the quantitative breakdown of a process.

Latest version **0.0.2** (published 2018-02-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install quant-breakdown
pnpm add quant-breakdown
yarn add quant-breakdown
bun add quant-breakdown
```

## 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.2 |
| Published | 2018-02-02 |
| First published | 2018-02-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Khalil Stemmler |
| Maintainers | stemmlerjs |

## Links

- npm: https://www.npmjs.com/package/quant-breakdown
- Repository: https://github.com/stemmlerjs/react-quant-breakdown
- Issues: https://github.com/stemmlerjs/react-quant-breakdown/issues
- npm.io page: https://npm.io/package/quant-breakdown

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^15.5.4
- [moment](https://npm.io/package/moment.md) ^2.20.1
- [webpack](https://npm.io/package/webpack.md) ^2.6.1

## Recent versions

- 0.0.2 (latest) — 2018-02-02
- 0.0.1 — 2018-02-02

## README

# react-quant-breakdown

A react component to visualize the quantitative breakdown of a process and it's subprocesses.

![component](https://user-images.githubusercontent.com/6892666/35712531-6c6212ac-0790-11e8-8402-2003d216d30a.PNG)

## Getting Started

```
npm install quantity-breakdown
```

## Usage

```jsx
import QuantityBreakdown from 'quantity-breakdown';

class App extends Component {
  render() {
    return (
      <div>
        <QuantityBreakdown 
          text="Daily Spend Report" 
          type="cost"
          chunks={[
            { name: 'Coffee', value: 4.23 },
            { name: 'Lunch', value: 9.32 },
            { name: 'Gas', value: 50.00 },
            { name: 'Drinks', value: 23.90 },
          ]} 
          />
      </div>
    );
  }
}

```

| Prop name | Description                                  | Type                                        | Example                                                         |
|-----------|----------------------------------------------|---------------------------------------------|-----------------------------------------------------------------|
| title     | The title of the process breakdown component | String                                      | Weekly Spending Report                                          |
| type      | Type of data to be aggregated                | String: ("cost", "time")                    | time                                                            |
| chunks    | The chunks of data to be aggregated          | Array of objects containing name and value | [{ name: 'Gas', value: 50.00 }, {name: 'Drinks', value: 32.23}] |

## Setting up a dev environment

To run the tests, we can create a link to this project to be used in dev:

```
npm i
npm run build
npm link
```

Then, in the ```tests``` folder, run:

```
npm install
npm link quantity-breakdown
npm run start
```

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details

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