https://github.com/stemmlerjs/react-quant-breakdown
A React component to visualize the quantitative breakdown of a process
https://github.com/stemmlerjs/react-quant-breakdown
Last synced: 4 months ago
JSON representation
A React component to visualize the quantitative breakdown of a process
- Host: GitHub
- URL: https://github.com/stemmlerjs/react-quant-breakdown
- Owner: stemmlerjs
- License: mit
- Created: 2018-02-02T01:39:48.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-24T20:52:37.000Z (almost 7 years ago)
- Last Synced: 2025-02-11T20:27:17.582Z (4 months ago)
- Language: JavaScript
- Size: 115 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-quant-breakdown
A react component to visualize the quantitative breakdown of a process and it's subprocesses.
## Getting Started
```
npm install quantity-breakdown
```
## Usage
```jsx
import QuantityBreakdown from 'quantity-breakdown';
class App extends Component {
render() {
return (
);
}
}
```
| 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