| 1 | react-native-stats
|
| 2 | ========
|
| 3 |
|
| 4 | <p align="center">
|
| 5 | <img src="https://raw.githubusercontent.com/JensDebergh/react-native-stats/master/preview.gif" width="250" alt="preview">
|
| 6 | </p>
|
| 7 |
|
| 8 | ## Installation
|
| 9 |
|
| 10 | npm install react-native-stats --save
|
| 11 |
|
| 12 | ## Usage
|
| 13 |
|
| 14 | ```javascript
|
| 15 | import Stats from 'react-native-stats';
|
| 16 |
|
| 17 | <Stats
|
| 18 | stats={[
|
| 19 | { label: 'Sex', labelColor: '#F54EA2', value: 100, blockColor: '#F54EA2' },
|
| 20 | { label: 'Dating', labelColor: '#6078EA', value: 10, blockColor: '#0A83E1' },
|
| 21 | { label: 'Lifestyle', labelColor: '#FF7676', value: 50, blockColor: '#FF7676' },
|
| 22 | { label: 'Unicorn', labelColor: '#7117EA', value: 30, blockColor: '#7117EA' },
|
| 23 | { label: 'Religion', labelColor: '#42E695', value: 70, blockColor: '#42E695' },
|
| 24 | { label: 'Life', labelColor: '#F54EA2', value: 100, blockColor: '#F54EA2' },
|
| 25 | { label: 'Sport', labelColor: '#6078EA', value: 10, blockColor: '#0A83E1' },
|
| 26 | { label: 'Gaming', labelColor: '#FF7676', value: 50, blockColor: '#FF7676' },
|
| 27 | { label: 'Graphics', labelColor: '#7117EA', value: 30, blockColor: '#7117EA' },
|
| 28 | { label: 'Fart lvl', labelColor: '#42E695', value: 70, blockColor: '#42E695' },
|
| 29 | ]}
|
| 30 | />
|
| 31 | ```
|
| 32 |
|
| 33 | ## Get started
|
| 34 |
|
| 35 | `react-native-stats` comes with a default data set for demo purposes.
|
| 36 |
|
| 37 | ```
|
| 38 | <Stats
|
| 39 | stats={Stats.DEMO_STATS}
|
| 40 | isRtl={false}
|
| 41 | minBlockHeight={2}
|
| 42 | maxBlockHeight={96}
|
| 43 | blockWidth={96}
|
| 44 | labelColor={'#FFFF'}
|
| 45 | blockColor={'#FFFF'}
|
| 46 | />
|
| 47 | ```
|
| 48 |
|
| 49 | ### Options
|
| 50 |
|
| 51 | React Native Stats options:
|
| 52 |
|
| 53 | * `stats` an array of objects containing the data to be displayed - `default: []`
|
| 54 | * `isRtl` (defaults: false) enables right to left language support - `default: false`
|
| 55 | * `minBlockHeight` determines the minimum height of a block - `default: 2`
|
| 56 | * `maxBlockHeight` determines the maximum height of a block - `default: 96`
|
| 57 | * `blockWidth` determines the maximum width of a block - `default: 96`
|
| 58 | * `labelColor` sets the default label color when non provided in the data set - `default: '#FFFF'`
|
| 59 | * `blockColor` set the default block color when non provided in the data set - `default: '#FFFF'`
|