Improvement trends

apiko-dev · Jun 4, 2018 · 29cdd9c · 29cdd9c
1 parent 8a4d854
commit 29cdd9c
Show file tree

Hide file tree

Showing 8 changed files with 285 additions and 269 deletions.
diff --git a/app/components/SimpleDateFilter/SimpleDateFilter.js b/app/components/SimpleDateFilter/SimpleDateFilter.js
@@ -1,13 +1,11 @@
 import React from 'react';
-import T from 'prop-types';
+// import T from 'prop-types';
 import { View } from 'react-native';
-import {
-  Select,
-  Calendar,
-  Button,
-} from '../../components';
+// import DatePicker from 'react-native-datepicker';
+import { Button } from '../../components';
 import s from './styles';
-import { colors, scalingUtils } from '../../styles';
+import { colors } from '../../styles';
+
 
 const ButtonFiler = props => (
   <Button
@@ -20,53 +18,60 @@ const ButtonFiler = props => (
 );
 
 const SimpleDateFilter = ({
-  onToggleCalendar,
-  isVisibleCalendar,
-  onChangeCalendar,
-  isActiveCalendar,
-  dateForFiltering,
-  onChangeSelector,
-
-
-                      isActiveCurrentMonth,
-                      isActiveHalfYear,
-                      isActiveAllTime,
-                      onSetActiveCurrentMonth,
-                      onSetActiveHalfYear,
-                      onSetActiveAllTime,
+  // onToggleCalendar,
+  // isVisibleCalendar,
+  // onChangeCalendar,
+  // isActiveCalendar,
+  // dateForFiltering,
+  // onChangeSelector,
+  isActiveCurrentMonth,
+  isActiveHalfYear,
+  isActiveLast12,
+  isActiveAllTime,
+  onSetActiveCurrentMonth,
+  onSetActiveHalfYear,
+  onSetActiveLast12,
+  onSetActiveAllTime,
 }) => (
-  <View style={s.selectors}>
-    {/*<Select*/}
-      {/*selectorsWidth={scalingUtils.moderateScale(100)}*/}
-      {/*options={['Week', 'Month', 'Year']}*/}
-      {/*style={s.dateSelector}*/}
-      {/*defaultValue="Select"*/}
-      {/*onSelect={onChangeSelector}*/}
-      {/*isActiveSelector={isActiveSelector}*/}
-    {/*/>*/}
-    <ButtonFiler
-      title="Current month"
-      onPress={onSetActiveCurrentMonth}
-      isActive={isActiveCurrentMonth}
-    />
-    <ButtonFiler
-      title="Last 6 month"
-      onPress={onSetActiveHalfYear}
-      isActive={isActiveHalfYear}
-    />
-    <ButtonFiler
-      title="All time"
-      onPress={onSetActiveAllTime}
-      isActive={isActiveAllTime}
-    />
-
-    {/*<Calendar*/}
-      {/*isVisible={isVisibleCalendar}*/}
-      {/*isActiveIcon={isActiveCalendar}*/}
-      {/*onToggleCalendar={onToggleCalendar}*/}
-      {/*onSelectedDate={onChangeCalendar}*/}
-      {/*initialDate={dateForFiltering}*/}
-    {/*/>*/}
+  <View>
+    {/*<View style={s.rangeContainer}>*/}
+      {/*<DatePicker*/}
+        {/*isSelected*/}
+        {/*// onDateChange={val => setDate(val)}*/}
+        {/*// defaultValue={data}*/}
+        {/*// format={dateFormat.newAccountDateFormat}*/}
+        {/*// date={date}*/}
+      {/*/>*/}
+      {/*<DatePicker*/}
+        {/*isSelected*/}
+        {/*// onDateChange={val => setDate(val)}*/}
+        {/*// defaultValue={data}*/}
+        {/*// format={dateFormat.newAccountDateFormat}*/}
+        {/*// date={date}*/}
+      {/*/>*/}
+    {/*</View>*/}
+    <View style={s.selectors}>
+      <ButtonFiler
+        title="Current month"
+        onPress={onSetActiveCurrentMonth}
+        isActive={isActiveCurrentMonth}
+      />
+      <ButtonFiler
+        title="6 months"
+        onPress={onSetActiveHalfYear}
+        isActive={isActiveHalfYear}
+      />
+      <ButtonFiler
+        title="12 months"
+        onPress={onSetActiveLast12}
+        isActive={isActiveLast12}
+      />
+      <ButtonFiler
+        title="All time"
+        onPress={onSetActiveAllTime}
+        isActive={isActiveAllTime}
+      />
+    </View>
   </View>
 );
 

diff --git a/app/components/SimpleDateFilter/index.js b/app/components/SimpleDateFilter/index.js
@@ -10,11 +10,9 @@ import SimpleDateFilter from './SimpleDateFilter';
 import {
   startOfCurrentMonth,
   startOfHalfYearAgo,
+  startOfYear,
   startOf10YearsAgo,
 
-  startOfWeek,
-  startOfMonthAgo,
-  startOfYear,
   isYesterday,
   isToday,
 } from '../../utils/dateHelpers';
@@ -23,6 +21,7 @@ const enhance = compose(
   withState('isActiveCurrentMonth', 'setActiveCurrentMonth', false),
   withState('isActiveHalfYear', 'setActiveHalfYear', false),
   withState('isActiveAllTime', 'setActiveAllTime', false),
+  withState('isActiveLast12', 'setActiveLast12', true),
 
 
   withState('isActiveSelector', 'setActiveSelector', false),
@@ -38,10 +37,9 @@ const enhance = compose(
     setActive: props => (item) => {
       props.setActiveCurrentMonth(false);
       props.setActiveHalfYear(false);
+      props.setActiveLast12(false);
       props.setActiveAllTime(false);
 
-
-      // props.setActiveSelector(false);
       // props.setActiveCalendar(false);
       props[item](true);
     },
@@ -62,27 +60,6 @@ const enhance = compose(
       setDateForFiltering(date.to ? date : date.from);
     },
 
-    onChangeSelector: props => (res) => {
-      props.setActive('setActiveSelector');
-      const period = { from: null, to: moment().endOf('day') };
-
-      switch (res) {
-        case '0':
-          period.from = startOfWeek;
-          break;
-        case '1':
-          period.from = startOfMonthAgo;
-          break;
-        case '2':
-          period.from = startOfYear;
-          break;
-        default:
-          break;
-      }
-
-      props.setDateForFiltering(period);
-    },
-
     onSetActiveCurrentMonth: props => () => {
       props.setActive('setActiveCurrentMonth');
       if (!props.isActiveCurrentMonth) {
@@ -95,6 +72,12 @@ const enhance = compose(
         props.setDateForFiltering({ from: startOfHalfYearAgo, to: moment().endOf('day') });
       }
     },
+    onSetActiveLast12: props => () => {
+      props.setActive('setActiveLast12');
+      if (!props.isActiveLast12) {
+        props.setDateForFiltering({ from: startOfYear, to: moment().endOf('day') });
+      }
+    },
 
     onSetActiveAllTime: props => () => {
       props.setActive('setActiveAllTime');

diff --git a/app/components/SimpleDateFilter/styles.js b/app/components/SimpleDateFilter/styles.js
@@ -12,26 +12,35 @@ const styles = StyleSheet.create({
     paddingHorizontal: dimensions.indent,
     flexDirection: 'row',
     justifyContent: 'space-between',
+    height: dimensions.verticalIndent * 2.8,
   },
   btnContainer: {
     height: undefined,
     borderRadius: 4,
-    width: scalingUtils.moderateScale(75),
+    // width: scalingUtils.moderateScale(75),
     borderColor: colors.grey,
     borderWidth: 1,
     backgroundColor: colors.white,
+    // paddingHorizontal: dimensions.indent,
+    paddingHorizontal: dimensions.halfIndent,
 
   },
   btTitleStyle: {
     height: undefined,
-    fontSize: fontSizes.verySmall,
+    fontSize: fontSizes.verySmall - 1.5,
     color: colors.greyDarker,
     fontWeight: fontWeights.normal,
   },
   activeButtonBackgroundColor: {
     backgroundColor: colors.green,
     borderColor: colors.green,
   },
+  rangeContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+
+
+  },
 });
 
 export default styles;
diff --git a/app/modules/transactions/selectors.js b/app/modules/transactions/selectors.js
@@ -1,8 +1,8 @@
 import { createSelector } from 'reselect';
+import moment from 'moment';
 import R from 'ramda';
 import { inPeriod } from '../../utils/transactionsHelpers';
 import { categoriesTypes as types } from '../../constants/categories';
-import moment from 'moment';
 
 const getTransactionsIds = state => R.pathOr([], ['transactions', 'ids'], state);
 const getTransactionsEntities = state => R.pathOr({}, ['transactions', 'byId'], state);
@@ -81,23 +81,6 @@ export const getAccountsStats = createSelector(
   },
 );
 
-
-const def = {
-  1: 0,
-  2: 0,
-  3: 0,
-  4: 0,
-  5: 0,
-  6: 0,
-  7: 0,
-  8: 0,
-  9: 0,
-  10: 0,
-  11: 0,
-  12: 0,
-};
-
-
 export const getTrendsStats = createSelector(
   [
     getTransactionsIds,
@@ -110,73 +93,74 @@ export const getTrendsStats = createSelector(
       Income: {},
       Expense: {},
       tickValues: [],
+      maxValue: 0,
+      totalIncome: 0,
+      totalExpense: 0,
     };
+
+    const diff = moment(date.to).diff(date.from, 'month');
+    const def = {};
+
+    if (diff <= 12) {
+      for (let i = 0; i <= diff; i++) {
+        const key = moment(date.to).subtract(i, 'months').startOf('month');
+        def[key] = 0;
+        data.tickValues.push(key.toString());
+      }
+      data.Income = def;
+      data.Expense = def;
+    }
+
     ids.forEach((id) => {
       const transaction = entities[id];
       const period = !date.format ? date : { from: +date.startOf('day'), to: +date.endOf('day') };
       if (inPeriod(period, transaction.date)) {
         const type = categorEnt[transaction.category].type;
 
-        // const diff = moment(period.to).diff(period.from, "month");
+        const startOfMonth = moment(transaction.date).startOf('month').toString();
 
-        const startOfMonth = +moment(transaction.date).startOf('month');
+        if (!data.tickValues.includes(startOfMonth.toString())) {
+          data.tickValues.push(startOfMonth.toString());
+        }
 
+        const value = Math.abs(transaction.value);
+        const currentValue = value + R.pathOr(0, [type, startOfMonth], data);
+        if (currentValue > data.maxValue) data.maxValue = currentValue;
 
-        // if (diff === 0) {
-        //
-        // } else if (diff <= 31) {
-        //   dateNumber = moment(transaction.date).startOf('month');
-        //   console.log("dateNumber" , dateNumber)
-        // } else {
-        //
-        // }
-
-        // const dateNumber = moment(transaction.date).startOf('month').format('M');
-
-        data.tickValues.push(moment(startOfMonth).format('MM/YYYY'));
+        data[`total${type}`] = data[`total${type}`] + value;
 
         data[type] = {
           ...data[type],
-          [startOfMonth]: Math.abs(transaction.value) + R.pathOr(0, [type, startOfMonth], data),
+          [startOfMonth]: currentValue,
         };
       }
     });
 
     const Income = [];
     const Expense = [];
 
-    R.forEachObjIndexed((val, key) => { Income.push({ y: val, date: +key }); }, data.Income);
-    R.forEachObjIndexed((val, key) => { Expense.push({ y: val, date: +key }); }, data.Expense);
+    R.forEachObjIndexed((val, key) => { Income.push({ y: val, date: key }); }, data.Income);
+    R.forEachObjIndexed((val, key) => { Expense.push({ y: val, date: key }); }, data.Expense);
 
+    Income.sort((a, b) => +moment(a.date) - +moment(b.date));
+    Expense.sort((a, b) => +moment(a.date) - +moment(b.date));
 
-    R.sortBy(R.prop('date'), Income);
-    R.sortBy(R.prop('date'), Expense);
+    data.tickValues.sort((a, b) => +moment(a) - +moment(b));
 
-    Income.sort((a, b) => a.date - b.date);
-    Expense.sort((a, b) => a.date - b.date);
-    data.tickValues.sort();
 
     Income.forEach((element, id) => element.x = id + 1);
     Expense.forEach((element, id) => element.x = id + 1);
 
-    // res {
-   //    "Expense": [
-   //       Object {
-   //         "x": "5",
-   //         "y": 1500,
-   //       },
-   //    ],
-   //     "Income": [
-   //       Object {
-   //         "x": "5",
-   //         "y": 1500,
-   //       },
-   //     ],
-   //   }
-
-    // console.log('res', { Income, Expense });
-    console.log("{ Income, Expense, tickValues: data.tickValues }", { Income, Expense, tickValues: data.tickValues })
-    return { Income, Expense, tickValues: data.tickValues };
+    console.log("dataValue", data.totalIncome, data.totalExpense )
+    // console.log('{ Income, Expense, tickValues: data.tickValues }', { Income, Expense, tickValues: data.tickValues });
+    return {
+      Income,
+      Expense,
+      tickValues: data.tickValues,
+      maxValue: data.maxValue + 300,
+      totalIncome: data.totalIncome,
+      totalExpense: -data.totalExpense,
+    };
   },
 );