Merge branch '42-columna-porcentaje-datos' into develop

app/package-lock.json

@@ -28,6 +28,9 @@
         "react-scripts": "4.0.3",
         "typescript": "^4.1.2",
         "web-vitals": "^1.0.1"
+      },
+      "devDependencies": {
+        "react-error-overlay": "^6.0.9"
       }
     },
     "node_modules/@babel/code-frame": {

app/package.json

@@ -47,5 +47,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "react-error-overlay": "^6.0.9"
   }
 }

app/src/components/UI/dashboard/detail/index.tsx

@@ -26,21 +26,21 @@ const Detail: FC = () => {
 
       {viewSeasonState ? (
         <section className="row my-4">
-          <div className="col-xl-8">
+          <div className="col-xl-10">
             <GeneralPerSeason />
           </div>
         </section>
       ) : null}
       {viewPrepState ? (
         <section className="row my-4">
-          <div className="col-xl-8">
+          <div className="col-xl-10">
             <Precipitation />
           </div>
         </section>
       ) : null}
       {viewDegreeState ? (
         <section className="row my-4">
-          <div className="col-xl-8">
+          <div className="col-xl-10">
             <DegreeDay />
           </div>
         </section>

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

@@ -39,6 +39,9 @@ const DegreeDay: FC<DegreesProps> = () => {
       <ResultTd value={x.months[1]} />
       <ResultTd value={x.months[2]} />
       <ResultTd value={x.months[3]} />
+      <td className={classes.cell}>
+        {x.data_percentage ? `${x.data_percentage}%` : "-"}
+      </td>
     </tr>
   ));
 
@@ -47,7 +50,7 @@ const DegreeDay: FC<DegreesProps> = () => {
       <h5>
         Grados días promedio mensuales - {data ? data[0].station.title : null}
       </h5>
-      <table className={`${classes.table} ${classes.widthSeven}`}>
+      <table className={`${classes.table}`}>
         <thead>
           <th className={`${classes.cell} ${classes.dateCell}`}>Temporada</th>
           <td className={classes.cell}>Octubre</td>
@@ -56,6 +59,7 @@ const DegreeDay: FC<DegreesProps> = () => {
           <td className={classes.cell}>Enero</td>
           <td className={classes.cell}>Febrero</td>
           <td className={classes.cell}>Marzo</td>
+          <td className={classes.cell}>Porcentaje de datos</td>
         </thead>
         <tbody>{data && rows}</tbody>
       </table>

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

@@ -65,6 +65,9 @@ const TemperaturePerSeason: FC = () => {
       >
         {x.precip_acumulada ?? "-"}
       </td>
+      <td className={classes.cell}>
+        {x.data_percentage ? `${x.data_percentage}%` : "-"}
+      </td>
     </tr>
   ));
 

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

@@ -75,6 +75,9 @@ const GeneralPerSector: FC = () => {
       >
         {x.precip_acumulada ?? "-"}
       </td>
+      <td className={classes.cell}>
+        {x.data_percentage ? `${x.data_percentage}%` : "-"}
+      </td>
     </tr>
   ));
 

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

@@ -40,6 +40,9 @@ const Precipitation: FC<PrecipitationProps> = () => {
       <ResultTd value={x.months[1]} />
       <ResultTd value={x.months[2]} />
       <ResultTd value={x.months[3]} />
+      <td className={classes.cell}>
+        {x.data_percentage ? `${x.data_percentage}%` : "-"}
+      </td>
     </tr>
   ));
 
@@ -56,6 +59,7 @@ const Precipitation: FC<PrecipitationProps> = () => {
           <td className={classes.cell}>Enero</td>
           <td className={classes.cell}>Febrero</td>
           <td className={classes.cell}>Marzo</td>
+          <td className={classes.cell}>Porcentaje de datos</td>
         </thead>
         <tbody>{data && rows}</tbody>
       </table>

app/src/components/data/shared.tsx

@@ -79,6 +79,7 @@ export const TableHeader: FC<tableHeaderProps> = ({
       >
         Precipitaciones acumuladas [mm]
       </td>
+      <td className={classes.cell}>Porcentaje de datos</td>
     </thead>
   );
 };

app/src/components/data/tables.module.css

@@ -6,17 +6,7 @@
 .table tr,
 .table thead {
   display: grid;
-  grid-template-columns: 180px 180px 1fr 1fr 1fr;
-}
-
-.widthSix.table tr,
-.widthSix.table thead {
-  grid-template-columns: 180px 180px 1fr 1fr 1fr 1fr;
-}
-
-.widthSeven.table tr,
-.widthSeven.table thead {
-  grid-template-columns: 180px repeat(6, 1fr);
+  grid-template-columns: 180px 180px repeat(auto-fit, minmax(50px, 1fr));
 }
 
 .table .threeSlot {

app/src/components/pages/Home.tsx

@@ -1,8 +1,5 @@
 import React, { useContext, FC, useState } from "react";
 import GeneralPerSector from "../data/GeneralPerSector";
-import GeneralPerSeason from "../data/GeneralPerSeason";
-import DegreeDay from "../data/DegreeDay";
-import Precipitation from "../data/Precipitation";
 import { UserStateContext } from "../../context/auth/AuthProvider";
 import DashboardProvider from "../../context/dashboard/Provider";
 import { Redirect } from "react-router-dom";
@@ -25,7 +22,7 @@ const Home: FC = () => {
           <div className="p-2">
             <Cockpit />
             <section className="row mb-5">
-              <div className="col-xl-8">
+              <div className="col-xl-10">
                 <GeneralPerSector />
               </div>
             </section>

app/src/types/degreedays.ts

@@ -9,4 +9,5 @@ export interface DegreeDays {
     [index: string]: number;
   };
   precip_acumulada: number;
+  data_percentage: number;
 }

app/src/types/precipitations.ts

@@ -9,4 +9,5 @@ export interface Precipitations {
     [index: string]: number;
   };
   precip_acumulada: number;
+  data_percentage: number;
 }

app/src/types/summary.ts

@@ -13,6 +13,7 @@ export interface Summary {
   grados_acumulados: number;
   amplitud_termica: number;
   precip_acumulada: number;
+  data_percentage: number;
 
   // Intigers
   dias_igualar_temporada: number;