Jsaem2 52 create linegraph for spending

package.json

@@ -26,10 +26,12 @@
     "react": "16.9.0",
     "react-dom": "16.9.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
+    "react-native-chart-kit": "^4.3.0",
     "react-native-elements": "^1.2.7",
     "react-native-gesture-handler": "~1.3.0",
     "react-native-modal-datetime-picker": "^7.6.1",
     "react-native-reanimated": "~1.2.0",
+    "react-native-svg": "^10.0.0",
     "react-native-web": "^0.11.7",
     "react-navigation": "^4.0.10",
     "react-navigation-stack": "^1.10.3",

src/Chart/LineGraph.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View, Dimensions } from 'react-native';
+import { LineChart } from 'react-native-chart-kit';
+import PropTypes from 'prop-types';
+
+export default function LineGraph({ dataSet }) {
+  const screenWidth = Dimensions.get('window').width * 0.85;
+
+  const chartConfig = {
+    backgroundGradientFrom: '#e96d9e',
+    backgroundGradientTo: '#ffaa8f',
+    color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
+    strokeWidth: 2,
+  };
+
+  const data = {
+    labels: dataSet.labels,
+    datasets: [{
+      data: dataSet.total,
+      color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
+      strokeWidth: 2,
+    }],
+  };
+  return (
+    <View>
+      <LineChart
+        style={{ flex: 1 }}
+        fromZero
+        data={data}
+        height={220}
+        width={screenWidth}
+        chartConfig={chartConfig}
+        bezier
+      />
+    </View>
+  );
+}
+
+LineGraph.propTypes = {
+  dataSet: PropTypes.shape({ labels: PropTypes.array, total: PropTypes.array }),
+};
+
+LineGraph.defaultProps = {
+  dataSet: {},
+};

src/Chart/chartUtils.js

@@ -0,0 +1,60 @@
+const moment = require('moment');
+
+const convertToLineGraphDataset = (dataList, dataType) => {
+  const labels = [];
+  const total = [];
+  dataList.map((groupedRecordsByDate) => {
+    const filterData = groupedRecordsByDate.filter((item) => item.type === dataType);
+    const result = filterData.reduce((sum, { amount }) => {
+      const parsedAmount = parseFloat(amount);
+      return sum + parsedAmount;
+    }, 0);
+    if (filterData.length !== 0) {
+      const formatDate = moment(groupedRecordsByDate[0].date, 'MMMM Do YYYY').format('D');
+      labels.push(formatDate);
+      total.push(result);
+    }
+    return null;
+  });
+  return { labels: labels.reverse(), total: total.reverse() };
+};
+
+const filterDataByPeriod = (dataList, range, view) => {
+  const monthRange = range.format('MMM YYYY');
+  const yearRange = range.format('YYYY');
+  let result;
+  switch (view) {
+    case 'month':
+      result = dataList.filter((value) => moment.unix(value.date).format('MMM YYYY') === monthRange);
+      break;
+    case 'year':
+      result = dataList.filter((value) => moment.unix(value.date).format('YYYY') === yearRange);
+      break;
+    default:
+      break;
+  }
+  return result;
+};
+
+const filterData = (dataList, range, view) => {
+  const monthRange = range.format('MMM YYYY');
+  const yearRange = range.format('YYYY');
+  let result;
+  switch (view) {
+    case 'month':
+      result = dataList.filter((value) => moment(value[0].date, 'MMMM Do YYYY').format('MMM YYYY') === monthRange);
+      break;
+    case 'year':
+      result = dataList.filter((value) => moment(value[0].date, 'MMMM Do YYYY').format('YYYY') === yearRange);
+      break;
+    default:
+      break;
+  }
+  return result;
+};
+
+export default {
+  convertToLineGraphDataset,
+  filterDataByPeriod,
+  filterData,
+};

src/Chart/index.jsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { View, ScrollView } from 'react-native';
+import { useSelector } from 'react-redux';
+import styles from '../Common/themeStyle';
+import MainHeader from '../Common/MainHeader';
+import DateSlider from '../Common/DateSlider';
+import DateOverlay from '../Common/DateOverlay';
+import utils from '../Stats/utils';
+import statsUtils from './chartUtils';
+import LineGraph from './LineGraph';
+
+const moment = require('moment');
+
+export default function Chart() {
+  const { transactions } = useSelector((state) => state.transactions);
+  const [view, setCurrentView] = useState('month');
+  const [timePeriodOptions, setTimePeriod] = useState(utils.getDateSet(moment(), view));
+  const [isOverlayVisible, setOverlayVisibility] = useState(false);
+  const updateHeaderView = (type) => {
+    setCurrentView(type);
+    setTimePeriod(utils.getDateSet(moment(), type));
+    setOverlayVisibility(!isOverlayVisible);
+  };
+
+  const filterListView = (transactionRecords) => {
+    const current = timePeriodOptions[1];
+    return statsUtils.filterData(transactionRecords, current, view);
+  };
+
+
+  const navBarFunc = [
+    {
+      name: 'filter',
+      func: () => setOverlayVisibility(true),
+    },
+  ];
+
+  const filteredDataByDate = filterListView(utils.groupTransactionsByDate(transactions));
+
+  const filterDataByPeriod = statsUtils.filterDataByPeriod(
+    transactions, timePeriodOptions[1], view,
+  );
+
+  const dataSetByDate = statsUtils.convertToLineGraphDataset(filteredDataByDate, 'Expense');
+
+  return (
+    <View style={{ flex: 1, flexDirection: 'column' }}>
+      <DateOverlay
+        isOverlayVisible={isOverlayVisible}
+        onPressBtn={(viewValue) => updateHeaderView(viewValue)}
+        onPressClose={() => setOverlayVisibility(false)}
+      />
+      <MainHeader title="Chart" btnType={navBarFunc} />
+      <DateSlider
+        viewSet={timePeriodOptions}
+        onPressBtn={(value, type) => setTimePeriod(utils.getDateSet(value, type))}
+        viewType={view}
+      />
+      <ScrollView style={styles.deviceBody}>
+        <View style={styles.card}>
+          {filterDataByPeriod.length !== 0 && dataSetByDate.labels.length !== 0
+            ? <LineGraph dataSet={dataSetByDate} style={{ flex: 1 }} />
+            : <View />}
+        </View>
+      </ScrollView>
+    </View>
+  );
+}