import React from 'react';
import { StyleSheet, ART } from 'react-native';
import { scaleLinear } from 'd3-scale';
const {
Surface,
Group,
Shape,
Path,
Text
} = ART;
export default function yAxis({ width, height, isNap }) {
let yValues = ['14', '12', '10', '8', '6', '4', '2', '0'];
let gridPoints = this.generateGridPoints(yValues.length);
return (
<Surface style={styles.yAxis} width={width} height={height}>
{gridPoints.map((point, index) => (
<Group key={index} x={0} y={-20}>
<Shape
d={this.getScaleTicks(index, gridPoints, width, height)}
fill="#121212"
stroke="#121212"
strokeWidth={1}
/>
<Group x={10}>
<Text
fill="#717171"
x={40}
y={this.getScalePosition(index, gridPoints, height)}
font={`14px Arial`}
alignment='right'
>
{yValues[index]}
</Text>
</Group>
</Group>
))}
</Surface>
);
}
generateGridPoints = amount => {
let points = [];
Array(amount).fill().forEach((i, index) => {
let pos = (100 / amount) * index ;
points.push(pos);
});
points.shift();
points.push(100);
return points;
}
getScaleTicks = (index, gridPoints, width, height) => {
let y = scaleLinear().domain([0, 100]).range([0, height - 10]);
let position = y(gridPoints[index]);
return new Path().moveTo(0, position).line(width, 0)
}
getScalePosition = (index, gridPoints, height) => {
let y = scaleLinear().domain([0, 100]).range([-10, height - 20]);
return y(gridPoints[index]);
}
const styles = StyleSheet.create({
yAxis: {
position: 'absolute'
}
});
view raw yAxis.js hosted with ❤ by GitHub