0.0.2 • Published 6 years ago

quant-breakdown v0.0.2

Weekly downloads
5
License
MIT
Repository
github
Last release
6 years ago

react-quant-breakdown

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

component

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 nameDescriptionTypeExample
titleThe title of the process breakdown componentStringWeekly Spending Report
typeType of data to be aggregatedString: ("cost", "time")time
chunksThe chunks of data to be aggregatedArray 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