| 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' | |
| } | |
| }); |