diff --git a/.env b/.env index 77602a0..7c3a28b 100644 --- a/.env +++ b/.env @@ -1,2 +1,2 @@ -REACT_APP_API_PATH=http://localhost:3000/ -# REACT_APP_API_PATH=https://br-ipti-beneficiarios.azurewebsites.net/ \ No newline at end of file +# REACT_APP_API_PATH=http://localhost:3000/ +REACT_APP_API_PATH=https://br-ipti-beneficiarios.azurewebsites.net/ \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index b902667..8e5c91a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@types/react-dom": "^18.2.18", "axios": "^1.6.7", "buffer": "^6.0.3", + "chart.js": "^4.4.7", "cross-env": "^7.0.3", "file-saver": "^2.0.5", "formik": "^2.4.5", @@ -3316,6 +3317,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@kurkle/color": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz", + "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==" + }, "node_modules/@leichtgewicht/ip-codec": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", @@ -6093,6 +6099,17 @@ "node": ">=10" } }, + "node_modules/chart.js": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.7.tgz", + "integrity": "sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw==", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=8" + } + }, "node_modules/check-types": { "version": "11.2.3", "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.2.3.tgz", diff --git a/package.json b/package.json index eef5d73..6eccdcd 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@types/react-dom": "^18.2.18", "axios": "^1.6.7", "buffer": "^6.0.3", + "chart.js": "^4.4.7", "cross-env": "^7.0.3", "file-saver": "^2.0.5", "formik": "^2.4.5", diff --git a/src/Components/Calendar/index.tsx b/src/Components/Calendar/index.tsx index 205b92e..ae74bc0 100644 --- a/src/Components/Calendar/index.tsx +++ b/src/Components/Calendar/index.tsx @@ -11,6 +11,8 @@ const CalendarComponent = ({ name, view, dateFormat, + selectionMode + }: PropsInputCalendar) => { addLocale("pt-br", { firstDayOfWeek: 1, @@ -61,7 +63,7 @@ const CalendarComponent = ({ value={value} onChange={onChange} dateFormat={dateFormat} - + selectionMode={selectionMode} style={{ width: "100%" }} locale="pt-br" name={name} diff --git a/src/Pages/InitialPage/index.tsx b/src/Pages/InitialPage/index.tsx index 4580c7c..3e74bc5 100644 --- a/src/Pages/InitialPage/index.tsx +++ b/src/Pages/InitialPage/index.tsx @@ -1,98 +1,256 @@ import { Button } from "primereact/button"; -import { useContext, useState } from "react"; +import { Chart as ChartPrime } from "primereact/chart"; +import { Nullable } from "primereact/ts-helpers"; +import { useContext, useEffect, useState } from "react"; + import CardQuant from "../../Components/Chart/CardQuant"; import ContentPage from "../../Components/ContentPage"; import DropdownComponent from "../../Components/Dropdown"; import Loading from "../../Components/Loading"; +import CalendarComponent from "../../Components/Calendar"; + import { AplicationContext } from "../../Context/Aplication/context"; -import { useFetchRequestUsersChart } from "../../Services/Users/query"; -import { Padding, Row } from "../../Styles/styles"; -import { PropsAplicationContext } from "../../Types/types"; +import { ROLE } from "../../Controller/controllerGlobal"; + import http from "../../Services/axios"; import { getYear } from "../../Services/localstorage"; -import { ROLE } from "../../Controller/controllerGlobal"; +import { useFetchRequestUsersChart } from "../../Services/Users/query"; + +import { Column, Padding, Row } from "../../Styles/styles"; +import { PropsAplicationContext } from "../../Types/types"; +import { requestChartMatriculated } from "../../Services/Chart/request"; +import color from "../../Styles/colors"; export interface Chart { - totalUserSocialTechnologies: number; - totalProjects: number; - totalClassrooms: number; - totalRegisterClassrooms: number; - approvedRegisterClassrooms: number; - totalMeetings: number; + year: number; + month: number; + n_registers: number; + n_approved: number; } -const State = () => { - - const [ts, setTs] = useState() - const { data, isLoading, isError } = useFetchRequestUsersChart(ts?.toString()); - - console.log(ts) +const month = [ + "Janeiro", + "Fevereiro", + "Março", + "Abril", + "Maio", + "Junho", + "Julho", + "Agosto", + "Setembro", + "Outubro", + "Novembro", + "Dezembro", +]; - var chart: Chart | undefined = data; +const subtractMonths = (date: Date, months: number): Date => { + const newDate = new Date(date); + newDate.setMonth(newDate.getMonth() - months); + return newDate; +}; - return { - chart, - isLoading, - isError, ts, setTs - }; +const renderChart = (data: Chart[], type: number) => { + return month.map((item, index) => { + const found = data.find((element) => element.month === index); + if (!found) return 0; + return type === 1 ? found.n_approved : found.n_registers; + }); }; const InitialPage = () => { - const propsAplication = useContext(AplicationContext) as PropsAplicationContext - const props = State(); + const propsAplication = useContext( + AplicationContext + ) as PropsAplicationContext; - const downloadCSV = async () => { + const [dates, setDates] = useState>(null); + const [formattedDates, setFormattedDates] = useState<{ + start: string; + end: string; + }>({ + start: "", + end: "", + }); + const [ts, setTs] = useState(); + const [chartData, setChartData] = useState(null); - console.log("Njnsdans") - try { - const response = await http.get('/user-bff/chart-csv?year=' + getYear()) + // Ao carregar o componente, seleciona por padrão os últimos 6 meses + useEffect(() => { + setDates([subtractMonths(new Date(Date.now()), 6), new Date(Date.now())]); + }, []); + + useEffect(() => { + if (!dates || dates.length < 2 || !dates[0] || !dates[1]) return; - // Criar um link para download + const formatDate = (date: Date) => { + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, "0"); + const day = String(date.getDate()).padStart(2, "0"); + return `${year}-${month}-${day}`; + }; + + const start = formatDate(dates[0]); + const end = formatDate(dates[1]); + + setFormattedDates({ start, end }); + + const fetchData = async () => { + try { + const response = await requestChartMatriculated(start, end); + + const data: Chart[] = response.data; + const updatedChartData = { + labels: month, + datasets: [ + { + label: "Total de Matrículas Confirmadas", + data: renderChart(data, 1), + borderColor: color.blue, + fill: false, + }, + { + label: "Total de Matrículas", + data: renderChart(data, 2), + borderColor: color.colorCardOrange, + fill: false, + }, + ], + }; + setChartData(updatedChartData); + } catch (error) { + console.error("Erro ao buscar dados do gráfico:", error); + } + }; + + fetchData(); + }, [dates]); + + const { + data: chart, + isLoading, + isError, + } = useFetchRequestUsersChart(ts?.toString()); + + const downloadCSV = async () => { + try { + const response = await http.get("/user-bff/chart-csv?year=" + getYear()); const url = window.URL.createObjectURL(new Blob([response.data])); - const link = document.createElement('a'); + const link = document.createElement("a"); link.href = url; - link.setAttribute('download', 'meuben.csv'); // Nome do arquivo + link.setAttribute("download", "meuben.csv"); document.body.appendChild(link); link.click(); - - // Remover o link } catch (error) { - console.error('Erro ao baixar o arquivo:', error); + console.error("Erro ao baixar o arquivo:", error); } }; - if (props.isLoading) return ; + if (isLoading) return ; + if (isError) return
Erro ao carregar os dados
; + return ( - - {propsAplication.user?.role === ROLE.ADMIN && -