diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-07-14 17:27:11 +0200 |
---|---|---|
committer | Thomas F. K. Jorna <[email protected]> | 2021-07-14 17:27:11 +0200 |
commit | cbe1ca72068ad1b279d1e78a4ae0e2fc8780ecc8 (patch) | |
tree | 644b33afa3434217697e40395ca33582d545380b /app/components/graph/graph.tsx | |
parent | c829168f361501cab68fc4171c97542d8013bd7b (diff) |
added random graph with colored edged
Diffstat (limited to 'app/components/graph/graph.tsx')
-rw-r--r-- | app/components/graph/graph.tsx | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx new file mode 100644 index 0000000..d41cfc7 --- /dev/null +++ b/app/components/graph/graph.tsx @@ -0,0 +1,71 @@ +import * as React from "react" +import { StyleProp, TextStyle, View, ViewStyle } from "react-native" +import { observer } from "mobx-react-lite" +import { color, typography } from "../../theme" +import { Text } from "../" +import { flatten } from "ramda" + +import data from "../../data/miserables.json" +import genRandomTree from "../../data/randomdata"; + +import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from 'react-force-graph'; +import Slider from '@react-native-community/slider'; + +const CONTAINER: ViewStyle = { + justifyContent: "center", +} + +const TEXT: TextStyle = { + fontFamily: typography.primary, + fontSize: 14, + color: color.primary, +} + +export interface GraphProps { + /** + * An optional style override useful for padding & margin. + */ + style?: StyleProp<ViewStyle> +} + +/** + * Describe your component here + */ +export const Graph = observer(function Graph(props: GraphProps) { + const { style } = props + const styles = flatten([CONTAINER, style]) + + // const fgRef= React.useRef(); + + + const GROUPS=12; + const gData = genRandomTree(); + + const [visco, setVisco] = React.useState(0.4); + + // React.useEffect(()=> { + // const fg = fgRef.current; + + // fg.d3Force('center', visco); + // }); + + return ( + <View> + <Slider style={{position: "absolute", zIndex: 100, width: "20%", height: 40}} + minimumValue={0} + maximumValue={1} + onValueChange={(value)=>{setVisco(value)}} + value={visco} + /> + <ForceGraph2D + // ref={fgRef} + graphData={gData} + nodeAutoColorBy={d => d.id%GROUPS} + linkAutoColorBy={d => gData.nodes[d.source].id%GROUPS} + linkColor={"#ffffff"} + linkWidth={2} + d3VelocityDecay={visco} + /> + </View> + ) +}) |