Merge branch '66-graph' into 'main'

Resolve "graph"

Closes #66

See merge request thschleicher/interaktive-systeme!57
This commit is contained in:
Thomas Schleicher 2024-01-25 17:50:49 +00:00
commit 0edc962bc9
7 changed files with 224 additions and 71 deletions

View file

@ -1,53 +1,24 @@
import React from 'react';
import { StyleSheet, View, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-native';
import { Graph } from '../../../components';
import BudgetOverview from '../../../components/stats/BudgetOverview';
import { useTheme } from '../../contexts/ThemeContext';
import Widget from '../../../components/stats/Widget';
import CategoryProgressBarList from '../../../components/stats/CategoryProgressBarList';
import BudgetRemaining from '../../../components/stats/BudgetRemaining';
import DebugMenu from '../../../services/DebugMenu';
import SavingsOverview from '../../../components/stats/SavingsOverview';
import FinancialAdvice from '../../../components/stats/FinancialAdvice';
import Widget from '../../../components/stats/Widget';
export default function Page() {
const { colors } = useTheme();
// Mock data #TODO Database einbinden
// what to do when amount too small?
const spent = 120.75;
const budget = 696.96;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.backgroundColor,
marginTop: 50,
alignItems: 'center',
},
});
return (
<View style={styles.container}>
<ScrollView>
<DebugMenu />
<Widget title='"Financial" Tips' backgroundColor='orange'>
<FinancialAdvice/>
</Widget>
<Widget title="Budget Overview" />
<Widget>
<BudgetRemaining/>
</Widget>
<Widget title='Your Expenses so far' image={require('../../../assets/images/8b14el.jpg')}/>
<Widget>
<BudgetOverview/>
</Widget>
<Widget>
<SavingsOverview/>
</Widget>
</ScrollView>
</View>
<SafeAreaView style={{flex: 1}}>
<Widget title="Budget Overview"/>
<Graph/>
<BudgetRemaining/>
<Widget>
<BudgetOverview/>
</Widget>
<Widget>
<SavingsOverview/>
</Widget>
</SafeAreaView>
);
}

View file

@ -3,9 +3,9 @@ import { StyleSheet } from "react-native";
import { FontAwesome } from "@expo/vector-icons";
import { Redirect } from "expo-router";
import React, { useEffect } from "react";
import { useTheme } from "../contexts/ThemeContext";
import React from "react";
import { useAuth } from "../contexts/AuthContext";
import { useTheme } from "../contexts/ThemeContext";
export default function Layout() {
const {authState} = useAuth()
@ -52,6 +52,7 @@ export default function Layout() {
<Tabs.Screen name="(stats)/index" options={
{
tabBarLabel: "Stats",
unmountOnBlur: true,
tabBarIcon: ({size, color}) => (
<FontAwesome name="bar-chart" size={size} color={color}/>),
}