This component is called in a parent component as <GraphComponent />.
Example import is calling for a graph to be displayed.
I tried placing the code in the componentWillMount for switching the weeks in the render method, but was just re-rendering continuously and returning errors.
I want when I click on a week1 and the month of July displays the data corresponding to that.
import React, { Component } from "react";
import { connect } from "react-redux";
import Example from "../../../components/UI/Recharts/BarChartts/BarChartts";
import * as actions from "../../../store/actions/index";
import Spinner from "../../../components/UI/Spinner/Spinner";
import Input from "../../../components/UI/Input/Input";
import "./GraphComponent.css";
class GraphComponent extends Component {
state = {
formInputs: {
month: {
label: "Choose a month: ",
id: "month",
elementType: "select",
elementConfig: {
options: [
{ value: 0, displayValue: "January" },
{ value: 1, displayValue: "February" },
{ value: 2, displayValue: "March" },
{ value: 3, displayValue: "April" },
{ value: 4, displayValue: "May" },
{ value: 5, displayValue: "June" },
{ value: 6, displayValue: "July" },
{ value: 7, displayValue: "August" },
{ value: 8, displayValue: "September" },
{ value: 9, displayValue: "October" },
{ value: 10, displayValue: "November" },
{ value: 11, displayValue: "December" },
],
},
value: new Date().getMonth() - 1,
},
week: {
label: "Choose a week: ",
id: "week",
elementType: "select",
elementConfig: {
options: [
{ value: 8, displayValue: "Week 1" },
{ value: 15, displayValue: "Week 2" },
{ value: 22, displayValue: "Week 3" },
{ value: 32, displayValue: "Week 4" },
],
},
value: 15,
},
},
weekArray: [],
};
componentWillMount() {
//feteching the data from firebase
this.props.onFetchSavedExpenses(this.props.token, this.props.userId);
console.log(this.state.formInputs.week.value);
*This is for changing the set value for the week*
if (this.state.formInputs.week.value === 8) {
const weekOneArray = this.props.expenses.filter(
(expense) =>
new Date(expense.date).getDate() < this.state.formInputs.week.value &&
new Date(expense.date).getMonth() ===
this.state.formInputs.month.value
);
console.log("WEEK 1", weekOneArray);
this.setState({ weekArray: weekOneArray });
}
if (this.state.formInputs.week.value === 15) {
const weekTwoArray = this.props.expenses.filter(
(expense) =>
new Date(expense.date).getDate() < this.state.formInputs.week.value &&
new Date(expense.date).getDate() > 7 &&
new Date(expense.date).getMonth() ===
this.state.formInputs.month.value
);
console.log("WEEK 2", weekTwoArray);
this.setState({ weekArray: weekTwoArray });
}
if (this.state.formInputs.week.value === 22) {
const weekThreeArray = this.props.expenses.filter(
(expense) =>
new Date(expense.date).getDate() < this.state.formInputs.week.value &&
new Date(expense.date).getDate() > 14 &&
new Date(expense.date).getMonth() ===
this.state.formInputs.month.value
);
console.log("WEEK 3", weekThreeArray);
this.setState({ weekArray: weekThreeArray });
}
if (this.state.formInputs.week.value === 32) {
const weekFourArray = this.props.expenses.filter(
(expense) =>
new Date(expense.date).getDate() < this.state.formInputs.week.value &&
new Date(expense.date).getDate() > 21 &&
new Date(expense.date).getMonth() ===
this.state.formInputs.month.value
);
console.log("WEEK 4", weekFourArray);
this.setState({ weekArray: weekFourArray });
}
}
//this is for getting the set value of the select input
inputChangedHandler = (event, inputIdentifier) => {
//event.preventDefault();
//console.log(event.target.value);
const updatedInputs = {
...this.state.formInputs,
};
const updatedFormElement = {
...updatedInputs[inputIdentifier],
};
updatedFormElement.value = event.target.value;
updatedInputs[inputIdentifier] = updatedFormElement;
this.setState({ formInputs: updatedInputs });
};
render() {
//Assigning the arrays of data to a specfic day of the week specified
const monArray = this.state.weekArray.filter(
(exp) => new Date(exp.date).getDay() === 1
);
const tueArray = this.state.weekArray.filter(
(exp) => new Date(exp.date).getDay() === 2
);
const wedArray = this.state.weekArray.filter(
(exp) => new Date(exp.date).getDay() === 3
);
const thurArray = this.state.weekArray.filter(
(exp) => new Date(exp.date).getDay() === 4
);
const friArray = this.state.weekArray.filter(
(exp) => new Date(exp.date).getDay() === 5
);
const satArray = this.state.weekArray.filter(
(exp) => new Date(exp.date).getDay() === 6
);
const sunArray = this.state.weekArray.filter(
(exp) => new Date(exp.date).getDay() === 7
);
>>getting the total amount of items in the array and assigning it to a lebal of a graph
const data = [
{
name: "Mo",
totalAmount: monArray.reduce(
(total, currentValue) => (total = total + currentValue.totalAmount),
0
),
},
{
name: "Tu",
totalAmount: tueArray.reduce(
(total, currentValue) => (total = total + currentValue.totalAmount),
0
),
},
{
name: "We",
totalAmount: wedArray.reduce(
(total, currentValue) => (total = total + currentValue.totalAmount),
0
),
},
{
name: "Th",
totalAmount: thurArray.reduce(
(total, currentValue) => (total = total + currentValue.totalAmount),
0
),
},
{
name: "Fr",
totalAmount: friArray.reduce(
(total, currentValue) => (total = total + currentValue.totalAmount),
0
),
},
{
name: "Sa",
totalAmount: satArray.reduce(
(total, currentValue) => (total = total + currentValue.totalAmount),
0
),
},
{
name: "Su",
totalAmount: sunArray.reduce(
(total, currentValue) => (total = total + currentValue.totalAmount),
0
),
},
];
//////////////////////////////
const exp = this.props.expenses
const billsArray = exp.filter(
(expense) =>
expense.category === "bills" &&
new Date(expense.date).getMonth() === this.state.formInputs.month.value
);
const transportArray = this.props.expenses.filter(
(expense) =>
expense.category === "transport" &&
new Date(expense.date).getMonth() === this.state.formInputs.month.value
);
const shopingArray = this.props.expenses.filter(
(expense) =>
expense.category === "shoping" &&
new Date(expense.date).getMonth() === this.state.formInputs.month.value
);
const othersArray = this.props.expenses.filter(
(expense) =>
expense.category === "others" &&
new Date(expense.date).getMonth() === this.state.formInputs.month.value
);
const healthArray = this.props.expenses.filter(
(expense) =>
expense.category === "health" &&
new Date(expense.date).getMonth() === this.state.formInputs.month.value
);
const savingArray = this.props.expenses.filter(
(expense) =>
expense.category === "saving" &&
new Date(expense.date).getMonth() === this.state.formInputs.month.value
);
const investmentArray = this.props.expenses.filter(
(expense) =>
expense.category === "investment" &&
new Date(expense.date).getMonth() === this.state.formInputs.month.value
);
const totalExpenses = [
{
name: "Sh",
totalAmount: shopingArray.reduce(
(total, currentValue) => (total = total + currentValue.totalAmount),
0
),
},
{
name: "Bi",
totalAmount: billsArray.reduce(
(total, currentValue) => (total = total + currentValue.totalAmount),
0
),
},
{
name: "Tr",
totalAmount: transportArray.reduce(
(total, currentValue) => (total = total + currentValue.totalAmount),
0
),
},
{
name: "He",
totalAmount: healthArray.reduce(
(total, currentValue) => (total = total + currentValue.totalAmount),
0
),
},
{
name: "Sa",
totalAmount: savingArray.reduce(
(total, currentValue) => (total = total + currentValue.totalAmount),
0
),
},
{
name: "In",
totalAmount: investmentArray.reduce(
(total, currentValue) => (total = total + currentValue.totalAmount),
0
),
},
{
name: "Ot",
totalAmount: othersArray.reduce(
(total, currentValue) => (total = total + currentValue.totalAmount),
0
),
},
];
console.log(totalExpenses);
let expenseOutput = <Spinner />;
if (!this.props.loading) {
expenseOutput = (
<div className="GraphComponent">
<div className="Choose-compmn">
<Input
label={this.state.formInputs.month.label}
elementType={this.state.formInputs.month.elementType}
elementConfig={this.state.formInputs.month.elementConfig}
value={this.state.formInputs.month.value}
changed={(event) =>
this.inputChangedHandler(event, this.state.formInputs.month.id)
}
/>
</div>
<div className="Choose-compmm">
<Input
label={this.state.formInputs.week.label}
elementType={this.state.formInputs.week.elementType}
elementConfig={this.state.formInputs.week.elementConfig}
value={this.state.formInputs.week.value}
changed={(event) =>
this.inputChangedHandler(event, this.state.formInputs.week.id)
}
/>
</div>
<div className="Container">
<div className="Periods">
<h3>Expenditures in a week </h3>
<Example data={data} xaxisLabel="Week days" />
</div>
<div className="Expenditures">
<h3>Total expenditures in a month</h3>
<Example data={totalExpenses} xaxisLabel="Expenses" />
</div>
</div>
</div>
);
}
return expenseOutput;
}
}
const mapStateToProps = (state) => {
return {
expenses: state.storexp.expenses,
loading: state.storexp.loading,
userId: state.auth.userId,
token: state.auth.token,
};
};
const mapDispatchToProps = (dispatch) => {
return {
onFetchSavedExpenses: (token, userId) =>
dispatch(actions.fetchSavedExpenses(token, userId)),
// onInitAdd: () => dispatch(actions.addInit()),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(GraphComponent);