From 56a1f011b82e44bb02a1183a788cb1002de2582f Mon Sep 17 00:00:00 2001 From: Nouman Tahir Date: Mon, 14 Feb 2022 20:44:10 +0500 Subject: [PATCH] implemented chart introduced simple chart component to reuse same chart in coin card and details --- src/components/index.js | 2 + src/components/simpleChart/index.ts | 1 + src/components/simpleChart/simpleChart.tsx | 45 +++++ .../coinDetails/children/children.styles.ts | 11 +- .../coinDetails/children/coinChart.tsx | 171 +++++++++++++++++- .../{styles.ts => children.styles.ts} | 0 src/screens/wallet/children/coinCard.tsx | 40 +--- src/screens/wallet/children/index.ts | 1 + src/screens/wallet/screen/walletScreen.tsx | 4 +- 9 files changed, 236 insertions(+), 39 deletions(-) create mode 100644 src/components/simpleChart/index.ts create mode 100644 src/components/simpleChart/simpleChart.tsx rename src/screens/wallet/children/{styles.ts => children.styles.ts} (100%) create mode 100644 src/screens/wallet/children/index.ts diff --git a/src/components/index.js b/src/components/index.js index 816758a65..25ac1ea22 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -95,6 +95,7 @@ import { QuickProfileModal } from './organisms'; import QuickReplyModal from './quickReplyModal/quickReplyModalView'; import Tooltip from './tooltip/tooltipView'; import VideoPlayer from './videoPlayer/videoPlayerView'; +import { SimpleChart } from './simpleChart'; // Basic UI Elements import { @@ -238,4 +239,5 @@ export { QuickReplyModal, Tooltip, VideoPlayer, + SimpleChart, }; diff --git a/src/components/simpleChart/index.ts b/src/components/simpleChart/index.ts new file mode 100644 index 000000000..b36f7beda --- /dev/null +++ b/src/components/simpleChart/index.ts @@ -0,0 +1 @@ +export * from './simpleChart'; \ No newline at end of file diff --git a/src/components/simpleChart/simpleChart.tsx b/src/components/simpleChart/simpleChart.tsx new file mode 100644 index 000000000..1f48c4b41 --- /dev/null +++ b/src/components/simpleChart/simpleChart.tsx @@ -0,0 +1,45 @@ +import React from 'react' +import { LineChart } from 'react-native-chart-kit' +import EStyleSheet from 'react-native-extended-stylesheet'; + +interface CoinChartProps { + data:number[], + baseWidth:number, + chartHeight:number, + showLine:boolean, +} + +export const SimpleChart = ({data, baseWidth, chartHeight, showLine}:CoinChartProps) => { + const _chartWidth = baseWidth + baseWidth/(data.length -1) + const _chartBackgroundColor = EStyleSheet.value('$primaryLightBackground'); + return ( + EStyleSheet.value('$primaryDarkText'), + color: () => showLine?EStyleSheet.value('$chartBlue'):'transparent', + }} + /> + ) +} + diff --git a/src/screens/coinDetails/children/children.styles.ts b/src/screens/coinDetails/children/children.styles.ts index f3355157f..684b292c2 100644 --- a/src/screens/coinDetails/children/children.styles.ts +++ b/src/screens/coinDetails/children/children.styles.ts @@ -6,6 +6,7 @@ export default EStyleSheet.create({ marginHorizontal:16, marginVertical:8, borderRadius:12, + overflow: 'hidden', backgroundColor: '$primaryLightBackground' } as ViewStyle, basicsContainer:{ @@ -42,7 +43,7 @@ export default EStyleSheet.create({ textBasicLabel:{ color: '$primaryDarkText', fontSize: 14, - marginBottom:24, + marginBottom:16, } as TextStyle, rangeContainer:{ @@ -58,5 +59,11 @@ export default EStyleSheet.create({ } as ViewStyle, textRange:{ fontSize:18, - } as TextStyle + } as TextStyle, + chartContainer:{ + height: 168, + marginTop: 16, + marginLeft:-66, + overflow: 'hidden', + } as ViewStyle }); diff --git a/src/screens/coinDetails/children/coinChart.tsx b/src/screens/coinDetails/children/coinChart.tsx index a68dd556e..623ab4110 100644 --- a/src/screens/coinDetails/children/coinChart.tsx +++ b/src/screens/coinDetails/children/coinChart.tsx @@ -1,11 +1,174 @@ -import React from 'react' -import { View, Text } from 'react-native' +import React, { useEffect, useState } from 'react' +import { View, Text, Dimensions } from 'react-native' +import { LineChart } from 'react-native-chart-kit' +import EStyleSheet from 'react-native-extended-stylesheet' +import { SimpleChart } from '../../../components' import styles from './children.styles' export const CoinChart = () => { + + const [from, setFrom] = useState(0); + + useEffect(() => { + let min = Number.MAX_VALUE; + let max = 0; + CHART_DATA.forEach((val)=>{ + if(val < min){ + min = val; + } + + if(val > max){ + max = val; + } + }) + + const diff = max - min; + setFrom(min - (diff * 0.3)); + + }, []) + + const _renderGraph = () => { + const _baseWidth = Dimensions.get("window").width - 32 + 66; + return ( + + + + )} return ( - Coin Chart goes here + {_renderGraph()} ) -} \ No newline at end of file +} + +const CHART_DATA = [ + [ + 1642291200000, + 1.3428898215662057 + ], + [ + 1642377600000, + 1.3351678528969129 + ], + [ + 1642464000000, + 1.2749425473242615 + ], + [ + 1642550400000, + 1.2258748579053047 + ], + [ + 1642636800000, + 1.1522017088554435 + ], + [ + 1642723200000, + 1.087432032619008 + ], + [ + 1642809600000, + 0.9222835552405058 + ], + [ + 1642896000000, + 0.8129802124971723 + ], + [ + 1642982400000, + 0.8415726660928751 + ], + [ + 1643068800000, + 0.8488466667559603 + ], + [ + 1643155200000, + 0.8505431837963656 + ], + [ + 1643241600000, + 0.8770820205186732 + ], + [ + 1643328000000, + 0.8948392884061332 + ], + [ + 1643414400000, + 0.9452860097843626 + ], + [ + 1643500800000, + 0.9630356286077462 + ], + [ + 1643587200000, + 0.9592456765509505 + ], + [ + 1643673600000, + 0.9742561651887766 + ], + [ + 1643760000000, + 0.9680029802915636 + ], + [ + 1643846400000, + 0.9546563904418895 + ], + [ + 1643932800000, + 1.0731739971075753 + ], + [ + 1644019200000, + 1.1191111700809502 + ], + [ + 1644105600000, + 1.1913425380739 + ], + [ + 1644192000000, + 1.2294271885832133 + ], + [ + 1644278400000, + 1.2478837581918967 + ], + [ + 1644364800000, + 1.2010842601365885 + ], + [ + 1644451200000, + 1.180185002237196 + ], + [ + 1644537600000, + 1.1255145830154643 + ], + [ + 1644624000000, + 1.0889391869544809 + ], + [ + 1644710400000, + 1.0608665319539667 + ], + [ + 1644796800000, + 1.0830413804669103 + ], + [ + 1644850711000, + 1.0617638577051183 + ] +].map((item)=>item[1]).reverse() diff --git a/src/screens/wallet/children/styles.ts b/src/screens/wallet/children/children.styles.ts similarity index 100% rename from src/screens/wallet/children/styles.ts rename to src/screens/wallet/children/children.styles.ts diff --git a/src/screens/wallet/children/coinCard.tsx b/src/screens/wallet/children/coinCard.tsx index 25e15be4b..74257a12b 100644 --- a/src/screens/wallet/children/coinCard.tsx +++ b/src/screens/wallet/children/coinCard.tsx @@ -1,11 +1,12 @@ import { View, Text, Dimensions } from 'react-native'; import React from 'react'; -import styles from './styles'; +import styles from './children.styles'; import { LineChart, } from "react-native-chart-kit"; import EStyleSheet from 'react-native-extended-stylesheet'; import { TouchableOpacity } from 'react-native-gesture-handler'; +import { SimpleChart } from '../../../components'; export interface CoinCardProps { chartData:number[] @@ -20,7 +21,7 @@ export interface CoinCardProps { onPress:()=>void } -const CoinCard = ({ +export const CoinCard = ({ id, notCryptoToken, chartData, @@ -56,36 +57,14 @@ const CoinCard = ({ const _renderGraph = () => { const _baseWidth = Dimensions.get("window").width - 32; - const _chartWidth = _baseWidth + _baseWidth/(chartData.length -1) - const _chartBackgroundColor = EStyleSheet.value('$primaryLightBackground'); return ( - 'transparent', - }} - /> + )} @@ -108,4 +87,3 @@ const CoinCard = ({ ); }; -export default CoinCard; diff --git a/src/screens/wallet/children/index.ts b/src/screens/wallet/children/index.ts new file mode 100644 index 000000000..dbfc6f6e6 --- /dev/null +++ b/src/screens/wallet/children/index.ts @@ -0,0 +1 @@ +export * from './coinCard'; \ No newline at end of file diff --git a/src/screens/wallet/screen/walletScreen.tsx b/src/screens/wallet/screen/walletScreen.tsx index 224788709..fefc810df 100644 --- a/src/screens/wallet/screen/walletScreen.tsx +++ b/src/screens/wallet/screen/walletScreen.tsx @@ -27,7 +27,7 @@ import globalStyles from '../../../globalStyles'; import styles from './walletScreenStyles'; import { useAppSelector } from '../../../hooks'; -import CurrencyCard from '../children/coinCard'; +import {CoinCard} from '../children'; import WALLET_TOKENS from '../../../constants/walletTokens'; import { fetchMarketChart } from '../../../providers/coingecko/coingecko'; import { withNavigation } from 'react-navigation'; @@ -162,7 +162,7 @@ const WalletScreen = ({navigation}) => { : 0; return ( -