-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Partials chart should be mostly done now
- Loading branch information
Showing
29 changed files
with
1,701 additions
and
316 deletions.
There are no files selected for viewing
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
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
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import React from 'react'; | ||
| import { View, StyleSheet } from 'react-native'; | ||
| import { PanGestureHandler } from 'react-native-gesture-handler'; | ||
| import Animated, { | ||
| useAnimatedGestureHandler, | ||
| useSharedValue, | ||
| useAnimatedStyle, | ||
| withSpring, | ||
| } from 'react-native-reanimated'; | ||
|
|
||
| const CURSOR = 50; | ||
| const styles = StyleSheet.create({ | ||
| cursor: { | ||
| width: CURSOR, | ||
| height: CURSOR, | ||
| borderRadius: CURSOR / 2, | ||
| backgroundColor: 'rgba(0, 0, 0, 0.1)', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| }, | ||
| cursorBody: { | ||
| width: 15, | ||
| height: 15, | ||
| borderRadius: 7.5, | ||
| backgroundColor: 'black', | ||
| }, | ||
| }); | ||
|
|
||
| const Cursor = ({ index, translation }) => { | ||
| const isActive = useSharedValue(false); | ||
| const onGestureEvent = useAnimatedGestureHandler({ | ||
| onStart: () => { | ||
| console.log('Start'); | ||
| isActive.value = true; | ||
| }, | ||
| onActive: (event) => { | ||
| // translation.x.value = event.x; | ||
| // translation.y.value = getYForX(graphs[index.value].data.path, translation.x.value) || 0; | ||
| }, | ||
| onEnd: () => { | ||
| console.log('End'); | ||
| isActive.value = false; | ||
| }, | ||
| }); | ||
|
|
||
| // const style = useAnimatedStyle(() => { | ||
| // const translateX = translation.x.value - CURSOR / 2; | ||
| // const translateY = translation.y.value - CURSOR / 2; | ||
| // return { | ||
| // transform: [{ translateX }, { translateY }, { scale: withSpring(isActive.value ? 1 : 0) }], | ||
| // }; | ||
| // }); | ||
|
|
||
| return ( | ||
| <View style={StyleSheet.absoluteFill}> | ||
| <PanGestureHandler {...{ onGestureEvent }}> | ||
| <Animated.View style={StyleSheet.absoluteFill}> | ||
| {/* <Animated.View style={[styles.cursor, style]}> | ||
| <View style={styles.cursorBody} /> | ||
| </Animated.View> */} | ||
| </Animated.View> | ||
| </PanGestureHandler> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| export default Cursor; |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,89 +1,63 @@ | ||
| /* eslint-disable no-restricted-globals */ | ||
| import React from 'react'; | ||
| import { useWindowDimensions, View } from 'react-native'; | ||
| import * as shape from 'd3-shape'; | ||
| import * as array from 'd3-array'; | ||
| import * as scale from 'd3-scale'; | ||
| import { Text } from 'react-native-paper'; | ||
| import { Svg, Rect, Path } from 'react-native-svg'; | ||
| import Animated, { useAnimatedProps, useSharedValue } from 'react-native-reanimated'; | ||
| import { mixPath } from 'react-native-redash'; | ||
| import { View } from 'react-native'; | ||
| import { PanGestureHandler } from 'react-native-gesture-handler'; | ||
| import Animated, { useAnimatedGestureHandler, useSharedValue } from 'react-native-reanimated'; | ||
| import { Path, Svg } from 'react-native-svg'; | ||
| import useAnimatedPath from './useAnimatedPath'; | ||
| import { createPaths } from './Utils'; | ||
|
|
||
| const AnimatedPath = Animated.createAnimatedComponent(Path); | ||
|
|
||
| const TestStackedBarChart = ({ data, height, keys, colors }) => { | ||
| const { width } = useWindowDimensions(); | ||
| const spacingInner = 0.05; | ||
| const spacingOuter = 0.05; | ||
| const previous = useSharedValue(0); | ||
| const current = useSharedValue(0); | ||
| const transition = useSharedValue(0); | ||
| const Bar = ({ color, path, itemKey, points, pressed, selectedPoints }) => { | ||
| const { animatedProps } = useAnimatedPath({ | ||
| enabled: true, | ||
| itemKey, | ||
| pressed, | ||
| path, | ||
| }); | ||
|
|
||
| const eventHandler = useAnimatedGestureHandler({ | ||
| onStart: (event, ctx) => { | ||
| selectedPoints.value = points; | ||
| pressed.value = itemKey; | ||
| }, | ||
|
|
||
| onFinish: (event, ctx) => { | ||
| selectedPoints.value = null; | ||
| pressed.value = -1; | ||
| }, | ||
| }); | ||
|
|
||
| const valueAccessor = ({ item, key }) => item[key]; | ||
|
|
||
| const series = shape | ||
| .stack() | ||
| .keys(keys) | ||
| .order(shape.stackOrderNone) | ||
| .value((item, key) => valueAccessor({ item, key })) | ||
| .offset(shape.stackOffsetNone)(data); | ||
|
|
||
| const values = array.merge(array.merge(series)); | ||
| const indexes = values.map((_, index) => index); | ||
|
|
||
| const extent = array.extent([...values, 0, height]); | ||
|
|
||
| const y = scale.scaleLinear().domain(extent).range([height, 0]); | ||
| const x = scale | ||
| .scaleBand() | ||
| .domain(data.map((_, index) => index)) | ||
| .range([0, width]) | ||
| .paddingInner([spacingInner]) | ||
| .paddingOuter([spacingOuter]); | ||
|
|
||
| const bandwidth = x.bandwidth(); | ||
|
|
||
| const areas = array.merge( | ||
| series.map((serie, keyIndex) => | ||
| serie.map((entry, entryIndex) => { | ||
| const path = shape | ||
| .area() | ||
| .y0((d) => y(d[0])) | ||
| .y1((d) => y(d[1])) | ||
| .x((d, _index) => (_index === 0 ? x(entryIndex) : x(entryIndex) + x.bandwidth())) | ||
| .defined((d) => !isNaN(d[0]) && !isNaN(d[1]))([entry, entry]); | ||
|
|
||
| return { | ||
| path, | ||
| color: colors[keyIndex], | ||
| key: keys[keyIndex], | ||
| }; | ||
| }) | ||
| ) | ||
| return ( | ||
| <PanGestureHandler onGestureEvent={eventHandler}> | ||
| <AnimatedPath animatedProps={animatedProps} fill={color} /> | ||
| </PanGestureHandler> | ||
| ); | ||
| }; | ||
|
|
||
| const TestStackedBarChart = ({ data, height, width, keys, colors, selectedPoints }) => { | ||
| const pressed = useSharedValue(false); | ||
| return ( | ||
| <View height={height}> | ||
| <Svg height={height} width={width}> | ||
| {areas.map((bar, index) => { | ||
| <Svg width={width} height={height}> | ||
| {createPaths({ data, keys, colors, height, width }).map((bar, index) => { | ||
| const keyIndex = index % data.length; | ||
| const key = `${keyIndex}-${bar.key}`; | ||
| const { svg } = data[keyIndex][bar.key]; | ||
|
|
||
| return ( | ||
| // <AnimatedPath | ||
| // animatedProps={animatedProps} | ||
| // {...svg} | ||
| // fill={bar.color} | ||
| // // stroke="black" | ||
| // // strokeWidth={3} | ||
| // /> | ||
| <Path key={key} fill={bar.color} {...svg} d={bar.path} /> | ||
| <Bar | ||
| key={key} | ||
| itemKey={keyIndex} | ||
| selectedPoints={selectedPoints} | ||
| color={bar.color} | ||
| points={bar.points} | ||
| path={bar.path} | ||
| pressed={pressed} | ||
| /> | ||
| ); | ||
| })} | ||
| </Svg> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| export default TestStackedBarChart; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| /* eslint-disable import/prefer-default-export */ | ||
| /* eslint-disable no-restricted-globals */ | ||
| import * as shape from 'd3-shape'; | ||
| import * as array from 'd3-array'; | ||
| import * as scale from 'd3-scale'; | ||
|
|
||
| export const createPaths = ({ data, keys, colors, height, width }) => { | ||
| const spacingInner = 0.05; | ||
| const spacingOuter = 0.05; | ||
|
|
||
| const valueAccessor = ({ item, key }) => item[key]; | ||
|
|
||
| const series = shape | ||
| .stack() | ||
| .keys(keys) | ||
| .order(shape.stackOrderNone) | ||
| .value((item, key) => valueAccessor({ item, key })) | ||
| .offset(shape.stackOffsetNone)(data); | ||
|
|
||
| const values = array.merge(array.merge(series)); | ||
|
|
||
| const extent = array.extent([...values, 0, 0]); | ||
|
|
||
| const y = scale.scaleLinear().domain(extent).range([height, 0]); | ||
| const x = scale | ||
| .scaleBand() | ||
| .domain(data.map((_, index) => index)) | ||
| .range([0, width]) | ||
| .paddingInner([spacingInner]) | ||
| .paddingOuter([spacingOuter]); | ||
|
|
||
| const test = array.merge( | ||
| series.map((serie, keyIndex) => | ||
| serie.map((entry, entryIndex) => { | ||
| const path = shape | ||
| .area() | ||
| .y0((d) => y(d[0])) | ||
| .y1((d) => y(d[1])) | ||
| .x((d, _index) => (_index === 0 ? x(entryIndex) : x(entryIndex) + x.bandwidth())) | ||
| .defined((d) => !isNaN(d[0]) && !isNaN(d[1]))([entry, entry]); | ||
|
|
||
| return { | ||
| points: data[entryIndex], | ||
| path, | ||
| color: colors[keyIndex], | ||
| key: keys[keyIndex], | ||
| }; | ||
| }) | ||
| ) | ||
| ); | ||
| return test; | ||
| }; |
Oops, something went wrong.