Skip to content

Instantly share code, notes, and snippets.

@browniefed
Created January 20, 2018 22:44
Show Gist options
  • Save browniefed/78ce291212245a11616f5807536d51a7 to your computer and use it in GitHub Desktop.
Save browniefed/78ce291212245a11616f5807536d51a7 to your computer and use it in GitHub Desktop.
import { StyleSheet, View, Text, ActivityIndicator } from "react-native";
import Sizer from "react-native-size";
import {
VictoryChart,
VictoryLine,
VictoryTheme,
VictoryAxis,
VictoryContainer,
VictoryCursorContainer,
Line,
} from "victory-native";
// other imports
const CursorComp = props => {
return <Line {...props} />;
};
const EmptyCursor = props => {
return null;
};
class PerformanceGraph extends PureComponent {
static defaultProps = {
data: [],
closePrice: 0,
};
state = {
touched: false,
};
render() {
const { data, closePrice } = this.props;
const transformed = data
.slice(0)
.reverse()
.map(({ close }, i) => ({ x: i, y: close }));
if (transformed.length === 0) {
return (
<View style={styles.centerContainer}>
<ActivityIndicator animating size="large" />
</View>
);
}
const lastPrice = (last(transformed) || {}).y
const color = lastPrice > closePrice ? blue : "#F45E43";
return (
<Sizer style={styles.container}>
{({ measured, x, y, width, height }) => {
if (!measured) return <View />;
return (
<VictoryChart
theme={VictoryTheme.material}
width={width}
height={height}
domainPadding={{ x: 5, y: 5 }}
padding={{
top: 10,
bottom: 10,
left: 20,
right: 20,
}}
containerComponent={
<VictoryCursorContainer
cursorDimension="x"
onTouchStart={() => {
this.timeout = setTimeout(() => {
this.props.onScrollControl(false);
this.setState({ touched: true });
}, 500);
}}
onCursorChange={(value, props) => {
if (!this.state.touched) return;
this.props.onValueChange(transformed[Math.floor(value)].y);
}}
onTouchEnd={() => {
clearTimeout(this.timeout);
this.props.onScrollControl(true);
this.setState({ touched: false, pinching: false });
}}
cursorComponent={this.state.touched ? <CursorComp /> : <EmptyCursor />}
/>
}
>
<VictoryLine
style={{
data: { stroke: color, strokeWidth: 2 },
}}
data={transformed}
/>
<VictoryLine
y={() => closePrice}
style={{
data: {
strokeDasharray: [2, 2],
stroke: "#000",
strokeWidth: 1,
},
}}
/>
<VictoryAxis
tickFormat={() => ""}
style={{
axis: { stroke: "none" },
grid: {
stroke: "transparent",
},
ticks: {
stroke: "transparent",
},
tickLabels: {
stroke: "transparent",
},
}}
/>
</VictoryChart>
);
}}
</Sizer>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment