<commit_before>react-native-histogram
===

> histogram component for React Native

[![npm](https://img.shields.io/npm/v/react-native-histogram.svg)]()[![npm](https://img.shields.io/npm/l/react-native-histogram.svg)]()

[![NPM](https://nodei.co/npm/react-native-histogram.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-native-histogram/)


Demo
---
![](./doc/beta2.gif)


Installation
==

```
npm i -S react-native-histogram
```

## Getting Started

Simple
---
```
<Histogram data={this.state.data} />
```


Advenced
---
```
import Histogram from 'react-native-histogram';

var HistogramExample = React.createClass({
  getInitialState: function() {
    return {data: [{}]}
  },
  componentWillMount: function() {
    var row_datas = [];
    for (var i=0; i<500; i++) {
      row_datas[i] = Math.random() * 100;
    }
    this.setState({
      data: [{ data: row_datas }]
    })
  },
  render: function() {
    return (
      <View style={styles.container}>
        <View>
          <Histogram
            data={this.state.data}
            height={200}
            width={300}
            split={20}
          />
        </View>
      </View>
    );
  }
});

```


Props
===

data `Default: []`
---
The list of value for histogram. Ex. `[{data: [10, 13, 8, 19, 17]}]`

width `Default: 0`
---
The width of graph.

height `Default: 0`
---
The height of graph.

sprit `Default: 0`
---
Interval of value


TODO
===
- [x] show simple histogram
- [x] show values
- [ ] show balloon
- [ ] show multiple historgams
- [ ] show unit


Contributing
==
Of course! Welcome :)<commit_msg>add new task<commit_after>react-native-histogram
===

> histogram component for React Native

[![npm](https://img.shields.io/npm/v/react-native-histogram.svg)]()[![npm](https://img.shields.io/npm/l/react-native-histogram.svg)]()

[![NPM](https://nodei.co/npm/react-native-histogram.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-native-histogram/)


Demo
---
![](./doc/beta2.gif)


Installation
==

```
npm i -S react-native-histogram
```

## Getting Started

Simple
---
```
<Histogram data={this.state.data} />
```


Advenced
---
```
import Histogram from 'react-native-histogram';

var HistogramExample = React.createClass({
  getInitialState: function() {
    return {data: [{}]}
  },
  componentWillMount: function() {
    var row_datas = [];
    for (var i=0; i<500; i++) {
      row_datas[i] = Math.random() * 100;
    }
    this.setState({
      data: [{ data: row_datas }]
    })
  },
  render: function() {
    return (
      <View style={styles.container}>
        <View>
          <Histogram
            data={this.state.data}
            height={200}
            width={300}
            split={20}
          />
        </View>
      </View>
    );
  }
});

```


Props
===

data `Default: []`
---
The list of value for histogram. Ex. `[{data: [10, 13, 8, 19, 17]}]`

width `Default: 0`
---
The width of graph.

height `Default: 0`
---
The height of graph.

sprit `Default: 0`
---
Interval of value


TODO
===
- [x] show simple histogram
- [x] show values
- [ ] show balloon
- [ ] show multiple historgams
- [ ] show unit
- [ ] color option


Contributing
==
Of course! Welcome :)
{'fraction_non_alphanumeric': 0.190136476426799, 'fraction_numerical': 0.017369727047146403, 'mean_word_length': 2.6689419795221845, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4342778', 'n_tokens_mistral': 1231, 'n_tokens_neox': 1124, 'n_words': 236}