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