Skip to content

Instantly share code, notes, and snippets.

@MrToph
Created October 21, 2016 13:55
Show Gist options
  • Save MrToph/5ed5d9ba03a84eb98e46d707ffbb8783 to your computer and use it in GitHub Desktop.
Save MrToph/5ed5d9ba03a84eb98e46d707ffbb8783 to your computer and use it in GitHub Desktop.
import React, { Component, PropTypes } from 'react'
import { G, Line, Text } from 'react-native-svg'
import * as d3scale from 'd3-scale'
export default class Axis extends Component {
static propTypes = {
width: PropTypes.number.isRequired,
ticks: PropTypes.number.isRequired,
x: PropTypes.number,
y: PropTypes.number,
startVal: PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.object]),
endVal: PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.object]),
vertical: PropTypes.bool,
scale: PropTypes.func // if scale is specified use that scale
}
render () {
let { width, ticks, x, y, startVal, endVal, vertical } = this.props
const TICKSIZE = width / 35
x = x || 0
y = y || 0
let endX = vertical ? x : x + width
let endY = vertical ? y - width : y
let scale = this.props.scale
if (!scale) {
scale = typeof startVal === 'number' ? d3scale.scaleLinear() : d3scale.scaleTime()
scale.domain(vertical ? [y, endY] : [x, endX]).range([startVal, endVal])
}
let tickPoints = vertical ? this.getTickPoints(vertical, y, endY, ticks)
: this.getTickPoints(vertical, x, endX, ticks)
return (
<G fill='none'>
<Line
stroke='#000'
strokeWidth='3'
x1={x}
x2={endX}
y1={y}
y2={endY} />
{tickPoints.map(
pos => <Line
key={pos}
stroke='#000'
strokeWidth='3'
x1={vertical ? x : pos}
y1={vertical ? pos : y}
x2={vertical ? x - TICKSIZE : pos}
y2={vertical ? pos : y + TICKSIZE} />
)}
{tickPoints.map(
pos => <Text
key={pos}
fill='#000'
stroke='#000'
fontSize='30'
textAnchor='middle'
x={vertical ? x - 2 * TICKSIZE : pos}
y={vertical ? pos : y + 2 * TICKSIZE}>
{typeof startVal === 'number' ? Math.round(scale(pos), 2) : scale(pos).toLocaleDateString()}
</Text>
)}
</G>
)
}
getTickPoints (vertical, start, end, numTicks) {
let res = []
let ticksEvery = Math.floor(this.props.width / (numTicks - 1))
if (vertical) {
for (let cur = start; cur >= end; cur -= ticksEvery) res.push(cur)
} else {
for (let cur = start; cur <= end; cur += ticksEvery) res.push(cur)
}
return res
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment