Permalink
Browse files

fix svg transform, add contribution guidelines

  • Loading branch information...
Hermanya committed Jul 3, 2018
1 parent b3f1133 commit 1fd81c503bb1208b9216116a309afcac3519916f
Showing with 41 additions and 18 deletions.
  1. +3 βˆ’0 README.md
  2. +26 βˆ’0 contributing.md
  3. +6 βˆ’9 src/pie-chart.js
  4. +6 βˆ’9 src/progress-chart.js
@@ -315,3 +315,6 @@ This library is built on top of the following open-source projects:
* react-native-svg (https://github.com/react-native-community/react-native-svg)
* paths-js (https://github.com/andreaferretti/paths-js)
* react-native-calendar-heatmap (https://github.com/ayooby/react-native-calendar-heatmap)

## Contribute
See the [contribution guide](contributing.md) and join [the contributors](https://github.com/indiespirit/react-native-chart-kit/graphs/contributors)!
@@ -0,0 +1,26 @@
# Contributing to React Native Chart Kit

πŸ‘πŸŽ‰ First off, thanks for taking the time to contribute! πŸŽ‰πŸ‘

Suggestions and pull requests are highly encouraged! Have a look at the [open issues](https://github.com/indiespirit/react-native-chart-kit/issues).

## Workflow

First clone:

```sh
git clone git@github.com:indiespirit/react-native-chart-kit.git
cd react-native-chart-kit
yarn install
```

In order to run it, you are gonna have to flip values for "main" and "_main" in package json. This is nessesary because both npm and expo have a notion of a main file, but for npm it's the file that you run when you import this library in your app; and for expo it's the file that it uses to display the example app.
Don't forget to flip it back before commiting.
**After you update fix the package.json**
```sh
yarn start # And get you expo app ready on your phone
```
@@ -39,16 +39,14 @@ class PieChart extends AbstractChart {
fill={this.props.chartConfig.color(0.2 * (i + 1))}
rx={8}
ry={8}
transform={{
translate: [(this.props.width / 2.5) - 24, -(this.props.height / 2.5) + ((this.props.height * 0.8) / this.props.data.length * i) + 12].join(',')
}}
x={(this.props.width / 2.5) - 24}
y={-(this.props.height / 2.5) + ((this.props.height * 0.8) / this.props.data.length * i) + 12}
/>
<Text
fill={this.props.chartConfig.color(0.5)}
fontSize="11"
transform={{
translate: [this.props.width / 2.5, -(this.props.height / 2.5) + ((this.props.height * 0.8) / this.props.data.length * i) + 12].join(',')
}}
x={this.props.width / 2.5}
y={-(this.props.height / 2.5) + ((this.props.height * 0.8) / this.props.data.length * i) + 12}
>{Math.round(100 / total * c.item[this.props.accessor])}% { c.item.name }
</Text>
</G>
@@ -74,9 +72,8 @@ class PieChart extends AbstractChart {
})}
<Rect width="100%" height={this.props.height} rx={this.props.style.borderRadius} ry={this.props.style.borderRadius} fill="url(#backgroundGradient)"/>
<G
transform={{
translate: `${this.props.width / 2.5}, ${this.props.height / 2}`
}}
x={this.props.width / 2.5}
y={this.props.height / 2}
>
{slices}
</G>
@@ -59,9 +59,8 @@ class ProgressChart extends AbstractChart {
})}
<Rect width="100%" height={this.props.height} rx={this.props.style.borderRadius} ry={this.props.style.borderRadius} fill="url(#backgroundGradient)"/>
<G
transform={{
translate: `${this.props.width / 2.5}, ${this.props.height / 2}`
}}
x={this.props.width / 2.5}
y={this.props.height / 2}
>
{pieBackgrounds.map(pie => {
return (
@@ -94,9 +93,8 @@ class ProgressChart extends AbstractChart {
fill={this.props.chartConfig.color(0.2 * (i + 1))}
rx={8}
ry={8}
transform={{
translate: [(this.props.width / 2.5) - 24, -(this.props.height / 2.5) + ((this.props.height * 0.8) / this.props.data.length * i) + 12].join(',')
}}
x={(this.props.width / 2.5) - 24}
y={-(this.props.height / 2.5) + ((this.props.height * 0.8) / this.props.data.length * i) + 12}
/>
)
})}
@@ -106,9 +104,8 @@ class ProgressChart extends AbstractChart {
key={Math.random()}
fill={this.props.chartConfig.color(0.5)}
fontSize="11"
transform={{
translate: [this.props.width / 2.5, -(this.props.height / 2.5) + ((this.props.height * 0.8) / this.props.data.length * i) + 12].join(',')
}}
x={this.props.width / 2.5}
y={-(this.props.height / 2.5) + ((this.props.height * 0.8) / this.props.data.length * i) + 12}
>
{Math.round(100 * this.props.data[i]) + '%'}
</Text>)

0 comments on commit 1fd81c5

Please sign in to comment.