Skip to content
This repository has been archived by the owner on Sep 17, 2021. It is now read-only.

Commit

Permalink
Enhanced pie chart multicolor support, jest tests, & updated example …
Browse files Browse the repository at this point in the history
…sync util (#36)

* Initial attempt at better pie multicolor support

* Added sync-rnpc script as an alternative to prior filewatch util

* Added jest snapshot tests for Pie chart

* Added test kickoff for circleci config
  • Loading branch information
marzolfb committed Jan 6, 2017
1 parent 944e184 commit c55c723
Show file tree
Hide file tree
Showing 15 changed files with 428 additions and 64 deletions.
3 changes: 3 additions & 0 deletions .babelrc
@@ -0,0 +1,3 @@
{
"presets": ["react-native"]
}
6 changes: 5 additions & 1 deletion README.md
Expand Up @@ -53,8 +53,12 @@ react-native run-android

### Developing and Testing With The Example App

Please see the [util/watchman-update-example-src/README.md](util/watchman-update-example-src/README.md) for information on how to setup a [Watchman](https://facebook.github.io/watchman/)-based file watch that automates source file copying between [project source](src) and the [example app](example) to make manual testing easier
As you are working on changing src files in this library and testing those changes against the example app, it is necessary to copy files to example/node_modules/react-native-pathjs-charts each time a change is made. To automate this, a `sync-rnpc` script has been added that will create a background process to watch for src file changes and automatically copy them. To enable this:

```
cd example
npm run sync-rnpc
```

## Todo

Expand Down
3 changes: 1 addition & 2 deletions circle.yml
Expand Up @@ -4,8 +4,7 @@ dependencies:

test:
override:
- echo "Verifying login successful prior to npm publish..."
- npm owner ls
- npm test

deployment:
release:
Expand Down
6 changes: 5 additions & 1 deletion example/package.json
Expand Up @@ -3,12 +3,16 @@
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
"start": "node node_modules/react-native/local-cli/cli.js start",
"sync-rnpc": "rm -rf ./node_modules/react-native-pathjs-charts; sane '/usr/bin/rsync -v -a --exclude .git --exclude example --exclude node_modules ../ ./node_modules/react-native-pathjs-charts/' .. --glob='{**/*.json,**/*.js}'"
},
"dependencies": {
"react": "^15.4.1",
"react-native": "^0.38.1",
"react-native-pathjs-charts": "file:../",
"react-native-side-menu": "^0.20.1"
},
"devDependencies": {
"sane": "^1.4.1"
}
}
30 changes: 26 additions & 4 deletions example/src/pie/PieChartBasic.js
Expand Up @@ -30,7 +30,8 @@ class PieChartBasic extends Component {
"population": 2584160
}, {
"name": "Minnesota",
"population": 6590667
"population": 6590667,
"color": {'r':223,'g':154,'b':20}
}, {
"name": "Alaska",
"population": 7284698
Expand Down Expand Up @@ -64,10 +65,31 @@ class PieChartBasic extends Component {

return (
<View>
<Pie
data={data}
<Pie data={data}
options={options}
accessorKey="population" />
accessorKey="population"
margin={{top: 20, left: 20, right: 20, bottom: 20}}
color="#2980B9"
pallete={
[
{'r':25,'g':99,'b':201},
{'r':24,'g':175,'b':35},
{'r':190,'g':31,'b':69},
{'r':100,'g':36,'b':199},
{'r':214,'g':207,'b':32},
{'r':198,'g':84,'b':45}
]
}
r={50}
R={150}
legendPosition="topLeft"
label={{
fontFamily: 'Arial',
fontSize: 8,
fontWeight: true,
color: '#ECF0F1'
}}
/>
</View>
)
}
Expand Down
14 changes: 12 additions & 2 deletions package.json
Expand Up @@ -9,7 +9,8 @@
"main": "src/index.js",
"scripts": {
"start": "node_modules/react-native/packager/packager.sh",
"lint": "eslint --ext .js,.jsx src"
"lint": "eslint --ext .js,.jsx src",
"test": "jest"
},
"keywords": [
"react-native",
Expand Down Expand Up @@ -41,7 +42,16 @@
"react-native-svg": "^4.4.1"
},
"devDependencies": {
"babel-jest": "*",
"babel-preset-react-native": "^1.9.0",
"diff": "^3.1.0",
"jest": "^18.0.0",
"jest-react-native": "*",
"react": "~15.4.1",
"react-native": "^0.38.1"
"react-native": "^0.38.1",
"react-test-renderer": "*"
},
"jest": {
"preset": "jest-react-native"
}
}
17 changes: 9 additions & 8 deletions src/Pie.js
Expand Up @@ -42,14 +42,15 @@ export default class PieChart extends Component {
bold: true,
color: '#ECF0F1'
}
}
},
}

color(i) {
let color = this.props.options.color
let color = this.props.color || (this.props.options && this.props.options.color)
if (color && !_.isString(color)) color = color.color
let pallete = this.props.pallete || Colors.mix(color || '#9ac7f7')
return Colors.string(cyclic(pallete, i)) }
let pallete = this.props.pallete || (this.props.options && this.props.options.pallete) || Colors.mix(color || '#9ac7f7')
return Colors.string(cyclic(pallete, i))
}


get defaultRange() {
Expand All @@ -68,17 +69,17 @@ export default class PieChart extends Component {
let radius = Math.min(x, y)

let chart = Pie({
center: this.props.options.center || [0,0],
r: this.props.options.r || radius /2,
R: this.props.options.R || radius,
center: this.props.center || (this.props.options && this.props.options.center) || [0,0] ,
r: this.props.r || (this.props.options && this.props.options.r) || radius /2,
R: this.props.R || (this.props.options && this.props.options.R) || radius,
data: this.props.data,
accessor: this.props.accessor || identity(this.props.accessorKey)
})

let textStyle = fontAdapt(options.label)

let slices = chart.curves.map( (c, i) => {
let fill = this.color(i)
let fill = (c.item.color && Colors.string(c.item.color)) || this.color(i)
let stroke = Colors.darkenColor(fill)
return (
<G key={ i } x={x - options.margin.left} y={y - options.margin.top}>
Expand Down
41 changes: 41 additions & 0 deletions src/__mocks__/react-native-svg.js
@@ -0,0 +1,41 @@
import React from 'react'

export default function({ children }) {
return (
<view mockedComponent="svg-component">
{children}
</view>
)
}

export const Rect = (props) => {
return (
<view mockedComponent="svg-Rect" {...props} />
)
}

export const Path = (props) => {
return (
<view mockedComponent="svg-Path" {...props} />
)
}

export const G = ({ children }) => {
return (
<view mockedComponent="svg-G">
{children}
</view>
)
}

export const Svg = (props) => {
return (
<view mockedComponent="svg-Svg" {...props} />
)
}

export const Text = (props) => {
return (
<view mockedComponent="svg-Text" {...props} />
)
}
7 changes: 7 additions & 0 deletions src/__mocks__/react-native.js
@@ -0,0 +1,7 @@
import React from 'react'

export const View = ({ children }) => {
return (
<div>{children}</div>
)
}
97 changes: 97 additions & 0 deletions src/__tests__/PieBasic-test.js
@@ -0,0 +1,97 @@
import 'react-native'
import React from 'react'
import Pie from '../Pie'
import renderer from 'react-test-renderer'
import { diffJson } from 'diff'

let data = [{
"name": "Washington",
"population": 7694980
}, {
"name": "Oregon",
"population": 2584160
}, {
"name": "Minnesota",
"population": 6590667,
"color": {'r':223,'g':154,'b':20}
}, {
"name": "Alaska",
"population": 7284698
}]

let options = {
margin: {
top: 20,
left: 20,
right: 20,
bottom: 20
},
width: 350,
height: 350,
color: '#2980B9',
r: 50,
R: 150,
legendPosition: 'topLeft',
animate: {
type: 'oneByOne',
duration: 200,
fillTransition: 3
},
label: {
fontFamily: 'Arial',
fontSize: 8,
fontWeight: true,
color: '#ECF0F1'
}
}

it('renders using options property correctly', () => {
let tree = renderer.create(
<Pie data={data}
options={options}/>
).toJSON()
expect(tree).toMatchSnapshot()
})

it('renders using flattened properties correctly', () => {
let tree = renderer.create(
<Pie data={data}
options={options}
r={10} />
).toJSON()
expect(tree).toMatchSnapshot()
})

it('contains expected diff between flattened vs non-flattened option usage', () => {
let treeUsingOptionsProp = renderer.create(
<Pie data={data}
options={options}/>
).toJSON()

let treeUsingFlattenedProps = renderer.create(
<Pie data={data}
options={options}
r={10}/>
).toJSON()

let jsonDiff = diffJson(treeUsingOptionsProp, treeUsingFlattenedProps)

const expectedRemoveCount = 4
const expectedAddCount = 4
var actualRemoveCount = 0
var actualAddCount = 0

jsonDiff.forEach((part) => {
if (part.removed && part.value.trim()
=== '"d": "M NaN NaN A 150 150 0 0 1 NaN NaN L NaN NaN A 50 50 0 0 0 NaN NaN Z ",') {
actualRemoveCount++
}
if (part.added && part.value.trim()
=== '"d": "M NaN NaN A 150 150 0 0 1 NaN NaN L NaN NaN A 10 10 0 0 0 NaN NaN Z ",') {
actualAddCount++
}
})
expect(actualRemoveCount).toBe(expectedRemoveCount)
expect(actualAddCount).toBe(expectedAddCount)

})

0 comments on commit c55c723

Please sign in to comment.