implemented chart

introduced simple chart component to reuse same chart in coin card and details

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,
 };

src/components/simpleChart/index.ts

@@ -0,0 +1 @@
+export * from './simpleChart';

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 (
+         <LineChart 
+            data={{
+                labels: [],
+                datasets: [
+                  {
+                    data
+                  }
+                ],
+              }}
+              width={_chartWidth} // from react-native
+              height={chartHeight}
+              withHorizontalLabels={true}
+              withVerticalLabels={false}
+              withHorizontalLines={false}
+              withDots={false}
+              withInnerLines={false}
+            
+              chartConfig={{
+                backgroundColor:_chartBackgroundColor,
+                backgroundGradientFrom: _chartBackgroundColor,
+                backgroundGradientTo: _chartBackgroundColor,
+                fillShadowGradient: EStyleSheet.value('$chartBlue'),
+                fillShadowGradientOpacity:0.8,
+                labelColor:() => EStyleSheet.value('$primaryDarkText'),
+                color: () => showLine?EStyleSheet.value('$chartBlue'):'transparent',
+              }}
+            />
+    )
+}
+

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
 });

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 (
+          <View style={styles.chartContainer}>
+            <SimpleChart 
+                data={CHART_DATA}
+                baseWidth={_baseWidth} // from react-native
+                chartHeight={200}
+                showLine={true}
+              />
+          </View>
+      )}
     return (
         <View style={styles.card}>
-            <Text>Coin Chart goes here</Text>
+            {_renderGraph()}
         </View>
     )
-}
+}
+
+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()

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 (
         <View style={styles.chartContainer}>
-          <LineChart 
-            data={{
-                labels: [],
-                datasets: [
-                  {
-                    data:chartData
-                  }
-                ],
-              }}
-              width={_chartWidth} // from react-native
-              height={130}
-              withHorizontalLabels={true}
-              withVerticalLabels={false}
-              withDots={false}
-              withInnerLines={false}
-           
-              
-              chartConfig={{
-                backgroundColor:_chartBackgroundColor,
-                backgroundGradientFrom: _chartBackgroundColor,
-                backgroundGradientTo: _chartBackgroundColor,
-                fillShadowGradient: EStyleSheet.value('$chartBlue'),
-                fillShadowGradientOpacity:0.8,
-                color: () => 'transparent',
-              }}
-            />
+          <SimpleChart 
+            data={chartData}
+            baseWidth={_baseWidth}
+            showLine={false}
+            chartHeight={130}
+          />
         </View>
     )}
 
@@ -108,4 +87,3 @@ const CoinCard = ({
   );
 };
 
-export default CoinCard;

src/screens/wallet/children/index.ts

@@ -0,0 +1 @@
+export * from './coinCard';

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 (
-        <CurrencyCard 
+        <CoinCard 
           chartData={_tokenMarketData || []} 
           currentValue={_currentValue}
           changePercent={_changePercent}