-
Notifications
You must be signed in to change notification settings - Fork 408
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #240 from alburdette619/feature/grouped-line-chart…
…s-new Grouped Line Charts
- Loading branch information
Showing
8 changed files
with
253 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,163 @@ | ||
import * as array from 'd3-array' | ||
import PropTypes from 'prop-types' | ||
import React, { PureComponent } from 'react' | ||
import { View } from 'react-native' | ||
import Svg from 'react-native-svg' | ||
import Path from '../animated-path' | ||
import Chart from './chart' | ||
|
||
class ChartGrouped extends PureComponent { | ||
|
||
state = { | ||
width: 0, | ||
height: 0, | ||
} | ||
|
||
_onLayout(event) { | ||
const { nativeEvent: { layout: { height, width } } } = event | ||
this.setState({ height, width }) | ||
} | ||
|
||
createPaths() { | ||
throw 'Extending "ChartGrouped" requires you to override "createPaths' | ||
} | ||
|
||
render() { | ||
|
||
const { | ||
data, | ||
xAccessor, | ||
yAccessor, | ||
yScale, | ||
xScale, | ||
style, | ||
animate, | ||
animationDuration, | ||
numberOfTicks, | ||
contentInset: { | ||
top = 0, | ||
bottom = 0, | ||
left = 0, | ||
right = 0, | ||
}, | ||
gridMax, | ||
gridMin, | ||
clampX, | ||
clampY, | ||
svg, | ||
children, | ||
} = this.props | ||
|
||
const { width, height } = this.state | ||
|
||
if (data.length === 0) { | ||
return <View style={ style } /> | ||
} | ||
|
||
const mappedData = data.map((dataArray) => dataArray.data.map((item, index) => ({ | ||
y: yAccessor({ item, index }), | ||
x: xAccessor({ item, index }), | ||
}))) | ||
|
||
const yValues = array.merge(mappedData).map(item => item.y) | ||
const xValues = array.merge(mappedData).map(item => item.x) | ||
|
||
const yExtent = array.extent([ ...yValues, gridMin, gridMax ]) | ||
const xExtent = array.extent([ ...xValues ]) | ||
|
||
const { | ||
yMin = yExtent[0], | ||
yMax = yExtent[1], | ||
xMin = xExtent[0], | ||
xMax = xExtent[1], | ||
} = this.props | ||
|
||
//invert range to support svg coordinate system | ||
const y = yScale() | ||
.domain([ yMin, yMax ]) | ||
.range([ height - bottom, top ]) | ||
.clamp(clampY) | ||
|
||
const x = xScale() | ||
.domain([ xMin, xMax ]) | ||
.range([ left, width - right ]) | ||
.clamp(clampX) | ||
|
||
const paths = this.createPaths({ | ||
data: mappedData, | ||
x, | ||
y, | ||
}) | ||
|
||
const ticks = y.ticks(numberOfTicks) | ||
|
||
const extraProps = { | ||
x, | ||
y, | ||
data, | ||
ticks, | ||
width, | ||
height, | ||
...paths, | ||
} | ||
|
||
return ( | ||
<View style={ style }> | ||
<View style={{ flex: 1 }} onLayout={ event => this._onLayout(event) }> | ||
{ | ||
height > 0 && width > 0 && | ||
<Svg style={{ height, width }}> | ||
{ | ||
React.Children.map(children, child => { | ||
if (child && child.props.belowChart) { | ||
return React.cloneElement(child, extraProps) | ||
} | ||
return null | ||
}) | ||
} | ||
{paths.path.map((path, index) => { | ||
const { svg: pathSvg } = data[index] | ||
return ( | ||
<Path | ||
key={ path } | ||
fill={ 'none' } | ||
{ ...svg } | ||
{ ...pathSvg } | ||
d={ path } | ||
animate={ animate } | ||
animationDuration={ animationDuration } | ||
/>) | ||
})} | ||
{ | ||
React.Children.map(children, child => { | ||
if (child && !child.props.belowChart) { | ||
return React.cloneElement(child, extraProps) | ||
} | ||
return null | ||
}) | ||
} | ||
</Svg> | ||
} | ||
</View> | ||
</View> | ||
) | ||
} | ||
} | ||
|
||
ChartGrouped.propTypes = { | ||
...Chart.propTypes, | ||
data: PropTypes.arrayOf(PropTypes.shape({ | ||
data: PropTypes.oneOfType([ | ||
PropTypes.arrayOf(PropTypes.object), | ||
PropTypes.arrayOf(PropTypes.number), | ||
PropTypes.arrayOf(PropTypes.array), | ||
]), | ||
svg: PropTypes.object, | ||
})).isRequired, | ||
} | ||
|
||
ChartGrouped.defaultProps = { | ||
...Chart.defaultProps, | ||
} | ||
|
||
export default ChartGrouped |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import React from 'react' | ||
import LineChart from './line-chart' | ||
import LineChartGrouped from './line-chart-grouped' | ||
|
||
const LineChartGate = (props) => { | ||
const { data } = props | ||
|
||
if (data[0].hasOwnProperty('data')) { | ||
return <LineChartGrouped { ...props } /> | ||
} | ||
|
||
return <LineChart { ...props } /> | ||
} | ||
|
||
export default LineChartGate |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import * as shape from 'd3-shape' | ||
import ChartGrouped from '../chart/chart-grouped' | ||
|
||
class LineChartGrouped extends ChartGrouped { | ||
|
||
createPaths({ data, x, y }) { | ||
const { curve } = this.props | ||
|
||
const lines = data.map((line) => shape.line() | ||
.x((d) => x(d.x)) | ||
.y(d => y(d.y)) | ||
.defined(item => typeof item.y === 'number') | ||
.curve(curve) | ||
(line)) | ||
|
||
return { | ||
path: lines, | ||
lines, | ||
} | ||
} | ||
} | ||
|
||
LineChartGrouped.propTypes = { | ||
...ChartGrouped.propTypes, | ||
} | ||
|
||
LineChartGrouped.defaultProps = { | ||
...ChartGrouped.defaultProps, | ||
} | ||
|
||
export default LineChartGrouped |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import React from 'react' | ||
import { LineChart, Grid } from 'react-native-svg-charts' | ||
|
||
class GroupedLineChartExample extends React.PureComponent { | ||
|
||
render() { | ||
|
||
const data1 = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ] | ||
const data2 = [ -87, 66, -69, 92, -40, -61, 16, 62, 20, -93, -54, 47, -89, -44, 18 ] | ||
|
||
const data = [ | ||
{ | ||
data: data1, | ||
svg: { stroke: '#8800cc' }, | ||
}, | ||
{ | ||
data: data2, | ||
svg: { stroke: 'green' }, | ||
}, | ||
] | ||
|
||
return ( | ||
<LineChart | ||
style={{ height: 200 }} | ||
data={ data } | ||
contentInset={{ top: 20, bottom: 20 }} | ||
> | ||
<Grid /> | ||
</LineChart> | ||
) | ||
} | ||
|
||
} | ||
|
||
export default GroupedLineChartExample |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters