0.0.2 • Published 6 years ago
quant-breakdown v0.0.2
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
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 file for details