Tabla de resumenes general

app/src/components/data/TemperaturePerSector/index.tsx

@@ -1,91 +1,37 @@
-import React, { FC } from "react";
+import React, { useState, useEffect, FC } from "react";
+import { generalTable } from "../../../api/tables";
+import { Summary } from "../../../types/summary";
 import { TableHeader as Header, TdGroup } from "../shared";
 import * as classes from "../tables.module.css";
 
 const TemperaturePerSector: FC = () => {
+  const [data, setData] = useState<Summary[]>([]);
+
+  useEffect(() => {
+    generalTable("", "", "").then((res) => {
+      setData(JSON.parse(res));
+    });
+  }, []);
+
+  // Formato de los summaries(filas)
+  const rows = data?.map((x) => (
+    <tr key={x.station.code}>
+      <th className={classes.cell}>{x.station.name}</th>
+      <TdGroup>
+        <td>{x.lt10}%</td>
+        <td>{x.gt30}%</td>
+        <td>{x.gt33}%</td>
+      </TdGroup>
+      <td className={classes.cell}>{x.grados_acumulados}</td>
+      <td className={classes.cell}>{x.amplitud_termica}</td>
+      <td className={classes.cell}>{x.precip_acumulada}</td>
+    </tr>
+  ));
+
   return (
     <table className={classes.table}>
-      <Header daysToMatchCurrentTemperature={false}/>
-      <tbody>
-        {/* Esto va a ser dinamico */}
-        <tr>
-          <th className={classes.cell}>Paraje Altamira</th>
-          <TdGroup>
-            <td>8,58%</td>
-            <td>7,28%</td>
-            <td>1,72%</td>
-          </TdGroup>
-          <td className={classes.cell}>16%</td>
-          <td className={classes.cell}>16.0</td>
-          <td className={classes.cell}>523</td>
-        </tr>
-        <tr>
-          <th className={classes.cell}>San Pablo</th>
-          <TdGroup>
-            <td>8,58%</td>
-            <td>7,28%</td>
-            <td>1,72%</td>
-          </TdGroup>
-          <td className={classes.cell}>16%</td>
-          <td className={classes.cell}>16.0</td>
-          <td className={classes.cell}>523</td>
-        </tr>
-        <tr>
-          <th className={classes.cell}>Gualtallary</th>
-          <TdGroup>
-            <td>8,58%</td>
-            <td>7,28%</td>
-            <td>1,72%</td>
-          </TdGroup>
-          <td className={classes.cell}>16%</td>
-          <td className={classes.cell}>16.0</td>
-          <td className={classes.cell}>523</td>
-        </tr>
-        <tr>
-          <th className={classes.cell}>Vista Flores</th>
-          <TdGroup>
-            <td>8,58%</td>
-            <td>7,28%</td>
-            <td>1,72%</td>
-          </TdGroup>
-          <td className={classes.cell}>16%</td>
-          <td className={classes.cell}>16.0</td>
-          <td className={classes.cell}>523</td>
-        </tr>
-        <tr>
-          <th className={classes.cell}>La Ribera</th>
-          <TdGroup>
-            <td>8,58%</td>
-            <td>7,28%</td>
-            <td>1,72%</td>
-          </TdGroup>
-          <td className={classes.cell}>16%</td>
-          <td className={classes.cell}>16.0</td>
-          <td className={classes.cell}>523</td>
-        </tr>
-        <tr>
-          <th className={classes.cell}>Maipú</th>
-          <TdGroup>
-            <td>8,58%</td>
-            <td>7,28%</td>
-            <td>1,72%</td>
-          </TdGroup>
-          <td className={classes.cell}>16%</td>
-          <td className={classes.cell}>16.0</td>
-          <td className={classes.cell}>523</td>
-        </tr>
-        <tr>
-          <th className={classes.cell}>Santa Rosa</th>
-          <TdGroup>
-            <td>8,58%</td>
-            <td>7,28%</td>
-            <td>1,72%</td>
-          </TdGroup>
-          <td className={classes.cell}>16%</td>
-          <td className={classes.cell}>16.0</td>
-          <td className={classes.cell}>523</td>
-        </tr>
-      </tbody>
+      <Header daysToMatchCurrentTemperature={false} />
+      <tbody>{rows}</tbody>
     </table>
   );
 };

app/src/components/pages/Home.tsx

@@ -67,22 +67,22 @@ const Home: FC = () => {
           </div>
         </section>
 
-        {/* <section className="row"> */}
-        {/*   <div className="col-xl-6"> */}
-        {/*     <TemperaturePerSeason /> */}
-        {/*     <DegreeDay */}
-        {/*       title={"Vista flores"} */}
-        {/*       periodString={"1ro Octubre - 31 Marzo"} */}
-        {/*     /> */}
-        {/*     <Precipitation */}
-        {/*       title={"Maipú"} */}
-        {/*       periodString={"1ro Octubre - 31 Marzo"} */}
-        {/*     /> */}
-        {/*   </div> */}
-        {/*   <div className="col-xl-6"> */}
-        {/*     <TemperaturePerSector /> */}
-        {/*   </div> */}
-        {/* </section> */}
+        <section className="row">
+          {/*   <div className="col-xl-6"> */}
+          {/*     <TemperaturePerSeason /> */}
+          {/*     <DegreeDay */}
+          {/*       title={"Vista flores"} */}
+          {/*       periodString={"1ro Octubre - 31 Marzo"} */}
+          {/*     /> */}
+          {/*     <Precipitation */}
+          {/*       title={"Maipú"} */}
+          {/*       periodString={"1ro Octubre - 31 Marzo"} */}
+          {/*     /> */}
+          {/*   </div> */}
+          <div className="col-xl-6">
+            <TemperaturePerSector />
+          </div>
+        </section>
       </Layout>
     </>
   );