Created
August 21, 2019 12:44
-
-
Save eikhunter/982a4a56d6f062ec1a12fa3ca3481e3c to your computer and use it in GitHub Desktop.
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
const DATA_POINTS_ON_SCREEN = 6; | |
const WIDTH = Math.round((DATA.length / DATA_POINTS_ON_SCREEN) * Dimensions.get('window').width); | |
calculateXPosition = (index: number): number => { | |
const linearScale = scaleLinear() | |
.domain([0, DATA.length]) | |
.range([0, WIDTH]); | |
return linearScale(index); | |
} | |
_updateDataPointOnGraph = (event) => { | |
const { pinIndex } = this.state; | |
const scrollPos = event.nativeEvent.contentOffset.x; | |
const index = pinIndex + 1; | |
if (scrollPos > this.calculateXPosition(index)) { | |
this.setState({ pinIndex: this.state.pinIndex + 1 }); | |
} if (scrollPos < this.calculateXPosition(index) && scrollPos < this.calculateXPosition(index - 1)) { | |
this.setState({ pinIndex: this.state.pinIndex - 1 }); | |
} | |
} |
const INCREMENT_WIDTH = DIMENSION_WIDTH / (DATA_POINTS_ON_SCREEN - 1); Is the way I have now calculated the width, as each new screen afterwards needs to be divisible by the what you have on screen - 1 to take into account the fact that you're only adding -1 data points on each screen each time, if that makes sense
const DIMENSION_WIDTH * ((data.length - DATA_POINTS_ON_SCREEN) / (DATA_POINTS_ON_SCREEN - 1) + 1);
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://github.com/eikhunter/horizontal-line-chart-react-native - this is the repo I was working out of, but it hasn't been updated to use the code above, this version tries to calculate each increment between the points and update it that way, but I then realised d3 had the
scaleLinear()
func but it shows the way I render the graphhttps://github.com/eikhunter/horizontal-line-chart-react-native/blob/master/GradientLine.js