Merge pull request #42 from ipti/feat-gráfico-linhas-de-matriculados

feat grafico matriculas
ipti · Dec 13, 2024 · 10296cb · 10296cb
2 parents a7d5f74 + 4df5f44
commit 10296cb
Show file tree

Hide file tree

Showing 9 changed files with 282 additions and 60 deletions.
diff --git 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/
+# REACT_APP_API_PATH=http://localhost:3000/
+REACT_APP_API_PATH=https://br-ipti-beneficiarios.azurewebsites.net/
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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<number | undefined>()
-  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<Nullable<(Date | null)[]>>(null);
+  const [formattedDates, setFormattedDates] = useState<{
+    start: string;
+    end: string;
+  }>({
+    start: "",
+    end: "",
+  });
+  const [ts, setTs] = useState<number | undefined>();
+  const [chartData, setChartData] = useState<any>(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 <Loading />;
+  if (isLoading) return <Loading />;
+  if (isError) return <div>Erro ao carregar os dados</div>;
+
   return (
-    <ContentPage title={"Bem vindo, " + propsAplication.user?.name + "!"} description="Visualização dos dados gerais do meuBen.">
-      {propsAplication.user?.role === ROLE.ADMIN && <Row id="end">
-        <Button label="Baixar CSV" icon="pi pi-download" iconPos="left" onClick={downloadCSV} />
-      </Row>}
+    <ContentPage
+      title={`Bem vindo, ${propsAplication.user?.name}!`}
+      description="Visualização dos dados gerais do meuBen."
+    >
+      {propsAplication.user?.role === ROLE.ADMIN && (
+        <Row id="end">
+          <Button
+            label="Baixar CSV"
+            icon="pi pi-download"
+            iconPos="left"
+            onClick={downloadCSV}
+          />
+        </Row>
+      )}
       <Padding padding="8px" />
-      {propsAplication.project && <Row id="end"><DropdownComponent options={[...propsAplication.project, { id: undefined, name: "Todos" }]} optionsLabel="name" optionsValue="id" value={props.ts} onChange={(e) => props.setTs(e.target.value)} placerholder="Filtrar por Tecnologia" /></Row>
-      }      <Padding padding="16px" />
+      {propsAplication.project && (
+        <Row id="end">
+          <DropdownComponent
+            options={[
+              ...propsAplication.project,
+              { id: undefined, name: "Todos" },
+            ]}
+            optionsLabel="name"
+            optionsValue="id"
+            value={ts}
+            onChange={(e) => setTs(e.target.value)}
+            placerholder="Filtrar por Tecnologia"
+          />
+        </Row>
+      )}
+
+      <Padding padding="16px" />
       <div className="grid">
-        <div className="col-12 md:col-4 lg:col-4">
-          <CardQuant title="Total de Ts" quant={props.chart?.totalUserSocialTechnologies!} color="navy_blue" />
+        <div className="col-12 md:col-4 lg:col-2">
+          <CardQuant
+            title="Total de Ts"
+            quant={chart?.totalUserSocialTechnologies!}
+            color="navy_blue"
+          />
         </div>
-        <div className="col-12 md:col-4 lg:col-4">
-          <CardQuant title="Total de Projetos" quant={props.chart?.totalProjects!} color="blue" />
+        <div className="col-12 md:col-4 lg:col-2">
+          <CardQuant
+            title="Total de Projetos"
+            quant={chart?.totalProjects!}
+            color="blue"
+          />
         </div>
-
-        <div className="col-12 md:col-4 lg:col-4">
-          <CardQuant title="Total de Turmas" quant={props.chart?.totalClassrooms!} color="orange" />
+        <div className="col-12 md:col-4 lg:col-2">
+          <CardQuant
+            title="Total de Turmas"
+            quant={chart?.totalClassrooms!}
+            color="orange"
+          />
         </div>
-      </div>
-      <div className="grid">
-        <div className="col-12 md:col-4 lg:col-4">
-          <CardQuant title="Total de matriculas" quant={props.chart?.totalRegisterClassrooms!} color="orange" />
+        <div className="col-12 md:col-4 lg:col-2">
+          <CardQuant
+            title="Total de matrículas"
+            quant={chart?.totalRegisterClassrooms!}
+            color="navy_blue"
+          />
         </div>
-        <div className="col-12 md:col-4 lg:col-4">
-          <CardQuant title="Total de matriculas confirmadas" quant={props.chart?.approvedRegisterClassrooms!} color="navy_blue" />
+        <div className="col-12 md:col-4 lg:col-2">
+          <CardQuant
+            title="Total de matrículas confirmadas"
+            quant={chart?.approvedRegisterClassrooms!}
+            color="blue"
+          />
         </div>
-        <div className="col-12 md:col-4 lg:col-4">
-          <CardQuant title="Total de encontros" quant={props.chart?.totalMeetings!} color="blue" />
+        <div className="col-12 md:col-4 lg:col-2">
+          <CardQuant
+            title="Total de encontros"
+            quant={chart?.totalMeetings!}
+            color="orange"
+          />
         </div>
       </div>
+
+      <Padding padding="20px" />
+      <div
+        className="card col-12 md:col-12 lg:col-6"
+        style={{ padding: "20px" }}
+      >
+        <Row id="start">
+          <Column>
+            <h2>Gráfico de Matrículas</h2>
+            <Padding padding="8px" />
+            <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+              <p style={{ marginBottom: "0", whiteSpace: "nowrap" }}>
+                Selecione o período:
+              </p>
+              <CalendarComponent
+                value={dates}
+                onChange={(e: any) => setDates(e.value)}
+                selectionMode="range"
+                placeholder="Selecione o período"
+                dateFormat="dd/mm/yy"
+                name="dates"
+              />
+            </div>
+          </Column>
+        </Row>
+        <div>{chartData && <ChartPrime type="line" data={chartData} />}</div>
+      </div>
     </ContentPage>
   );
 };

diff --git a/src/Services/Chart/controller.tsx b/src/Services/Chart/controller.tsx
@@ -0,0 +1 @@
+import '';
diff --git a/src/Services/Chart/query.tsx b/src/Services/Chart/query.tsx
@@ -0,0 +1,9 @@
+import { useQuery } from "react-query";
+import {
+    requestChartMatriculated
+} from "./request";
+
+export const useRequestChartMatriculated = (start_time: String, end_time: String) => {
+  return useQuery(["requestChartMatriculated"], () => requestChartMatriculated(start_time, end_time));  
+};
+