Creating new IncomeStatistics.jsx components

Frnn4268 · Nov 10, 2024 · f0c18c0 · f0c18c0
1 parent 076372a
commit f0c18c0
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 98 deletions.
diff --git a/frontend/components/incomeStatistics/IncomeChart.jsx b/frontend/components/incomeStatistics/IncomeChart.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Card } from 'antd';
+import { BarChart } from '@mui/x-charts/BarChart';
+
+const IncomeChart = ({ title, data, color }) => (
+  <Card title={title} style={{ width: 700 }}>
+    <BarChart
+      series={[{ data: data.map(income => income.totalIncome), color }]}
+      height={250}
+      xAxis={[{ data: data.map(income => income._id), scaleType: 'band' }]}
+    />
+  </Card>
+);
+
+export default IncomeChart;
diff --git a/frontend/components/incomeStatistics/IncomeHeader.jsx b/frontend/components/incomeStatistics/IncomeHeader.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Layout } from 'antd';
+import TopMenu from '../../src/pages/dashboard/TopMenu.jsx';
+
+const { Header } = Layout;
+
+const IncomeHeader = () => (
+  <Header className='home-header-dashboard'>
+    <TopMenu />
+  </Header>
+);
+
+export default IncomeHeader;
diff --git a/frontend/components/incomeStatistics/IncomeLayout.jsx b/frontend/components/incomeStatistics/IncomeLayout.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Layout } from 'antd';
+import LeftMenu from '../../src/pages/dashboard/LeftMenu.jsx';
+
+const IncomeLayout = ({ children }) => (
+  <Layout>
+    <Layout.Sider>
+      <LeftMenu />
+    </Layout.Sider>
+    <Layout.Content>
+      {children}
+    </Layout.Content>
+  </Layout>
+);
+
+export default IncomeLayout;
diff --git a/frontend/src/pages/income/IncomeStatistics.jsx b/frontend/src/pages/income/IncomeStatistics.jsx
@@ -1,108 +1,94 @@
+// IncomeStatistics.jsx
 import React, { useState, useEffect } from "react";
-import { Layout, Row, Col, Card } from 'antd';
-import { BarChart } from '@mui/x-charts/BarChart';
+import { Layout, Row, Col } from 'antd';
 
-import TopMenu from '../dashboard/TopMenu.jsx';
-import LeftMenu from '../dashboard/LeftMenu.jsx';
+import IncomeHeader from '../../../components/incomeStatistics/IncomeHeader';
+import IncomeLayout from '../../../components/incomeStatistics/IncomeLayout';
+import IncomeChart from '../../../components/incomeStatistics/IncomeChart';
 
-const { Header } = Layout;
+import '../../css/DashboardMenu.css';
+import '../../css/IncomeStatistics.css';
 
 const IncomeStatistics = () => {
-    const [dailyIncome, setDailyIncome] = useState([]);
-    const [weeklyIncome, setWeeklyIncome] = useState([]);
-    const [monthlyIncome, setMonthlyIncome] = useState([]);
-    const [yearlyIncome, setYearlyIncome] = useState([]);
+  const [dailyIncome, setDailyIncome] = useState([]);
+  const [weeklyIncome, setWeeklyIncome] = useState([]);
+  const [monthlyIncome, setMonthlyIncome] = useState([]);
+  const [yearlyIncome, setYearlyIncome] = useState([]);
 
-    useEffect(() => {
-        fetchIncomeData('day');
-        fetchIncomeData('week');
-        fetchIncomeData('month');
-        fetchIncomeData('year');
-    }, []);
+  useEffect(() => {
+    fetchIncomeData('day');
+    fetchIncomeData('week');
+    fetchIncomeData('month');
+    fetchIncomeData('year');
+  }, []);
 
-    const fetchIncomeData = async (period) => {
-        try {
-            const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/income/${period}`);
-            const data = await response.json();
-            switch (period) {
-                case 'day':
-                    setDailyIncome(data.data);
-                    break;
-                case 'week':
-                    setWeeklyIncome(data.data);
-                    break;
-                case 'month':
-                    setMonthlyIncome(data.data);
-                    break;
-                case 'year':
-                    // Ordenar los ingresos anuales de menor a mayor año
-                    const sortedYearlyIncome = data.data.sort((a, b) => parseInt(a._id.split(" ")[1]) - parseInt(b._id.split(" ")[1]));
-                    setYearlyIncome(sortedYearlyIncome);
-                    break;
-                default:
-                    break;
-            }
-        } catch (error) {
-            console.error(`Error fetching ${period} income data:`, error);
-        }
-    };
+  const fetchIncomeData = async (period) => {
+    try {
+      const response = await fetch(`${import.meta.env.VITE_APP_API_URL}/income/${period}`);
+      const data = await response.json();
+      switch (period) {
+        case 'day':
+          setDailyIncome(data.data);
+          break;
+        case 'week':
+          setWeeklyIncome(data.data);
+          break;
+        case 'month':
+          setMonthlyIncome(data.data);
+          break;
+        case 'year':
+          const sortedYearlyIncome = data.data.sort((a, b) => parseInt(a._id.split(" ")[1]) - parseInt(b._id.split(" ")[1]));
+          setYearlyIncome(sortedYearlyIncome);
+          break;
+        default:
+          break;
+      }
+    } catch (error) {
+      console.error(`Error fetching ${period} income data:`, error);
+    }
+  };
 
-    return (
-        <Layout>
-            <Header className='home-header-dashboard'>
-                <TopMenu />
-            </Header>
-            <Layout>
-                <Layout.Sider>
-                    <LeftMenu />
-                </Layout.Sider>
-                <Layout.Content>
-                    <div style={{ marginTop: 45, marginLeft: -60 }}>
-                        <Row gutter={16} justify="space-around">
-                            <Col span={8} style={{ marginBottom: 45 }}>
-                                <Card title="Ingresos Diarios" style={{ width: 700 }}>
-                                    <BarChart
-                                        series={[{ data: dailyIncome.map(income => income.totalIncome), color: '#8884d8' }]}
-                                        height={250}
-                                        xAxis={[{ data: dailyIncome.map(income => income._id), scaleType: 'band' }]}
-                                    />
-                                </Card>
-                            </Col>
-                            <Col span={8} style={{ marginBottom: 45 }}>
-                                <Card title="Ingresos Semanales" style={{ width: 700 }}>
-                                    <BarChart
-                                        series={[{ data: weeklyIncome.map(income => income.totalIncome), color: '#82ca9d' }]}
-                                        height={250}
-                                        xAxis={[{ data: weeklyIncome.map(income => income._id), scaleType: 'band' }]}
-                                    />
-                                </Card>
-                            </Col>
-                        </Row>
-                        <Row gutter={16} justify="space-around">
-                            <Col span={8}>
-                                <Card title="Ingresos Mensuales" style={{ width: 700 }}>
-                                    <BarChart
-                                        series={[{ data: monthlyIncome.map(income => income.totalIncome), color: '#ffc658' }]}
-                                        height={250}
-                                        xAxis={[{ data: monthlyIncome.map(income => income._id), scaleType: 'band' }]}
-                                    />
-                                </Card>
-                            </Col>
-                            <Col span={8}>
-                                <Card title="Ingresos Anuales" style={{ width: 700 }}>
-                                    <BarChart
-                                        series={[{ data: yearlyIncome.map(income => income.totalIncome), color: '#ff7f0e' }]}
-                                        height={250}
-                                        xAxis={[{ data: yearlyIncome.map(income => income._id), scaleType: 'band' }]}
-                                    />
-                                </Card>
-                            </Col>
-                        </Row>
-                    </div>
-                </Layout.Content>
-            </Layout>
-        </Layout>
-    );
+  return (
+    <Layout>
+      <IncomeHeader />
+      <IncomeLayout>
+        <div style={{ marginTop: 45, marginLeft: -60 }}>
+          <Row gutter={16} justify="space-around">
+            <Col span={8} style={{ marginBottom: 45 }}>
+              <IncomeChart
+                title="Ingresos Diarios"
+                data={dailyIncome}
+                color="#8884d8"
+              />
+            </Col>
+            <Col span={8} style={{ marginBottom: 45 }}>
+              <IncomeChart
+                title="Ingresos Semanales"
+                data={weeklyIncome}
+                color="#82ca9d"
+              />
+            </Col>
+          </Row>
+          <Row gutter={16} justify="space-around">
+            <Col span={8}>
+              <IncomeChart
+                title="Ingresos Mensuales"
+                data={monthlyIncome}
+                color="#ffc658"
+              />
+            </Col>
+            <Col span={8}>
+              <IncomeChart
+                title="Ingresos Anuales"
+                data={yearlyIncome}
+                color="#ff7f0e"
+              />
+            </Col>
+          </Row>
+        </div>
+      </IncomeLayout>
+    </Layout>
+  );
 }
 
-export default IncomeStatistics;
+export default IncomeStatistics;