Data viz components

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

@@ -0,0 +1,6 @@
+import React, { FC } from "react";
+
+const DegreeDay: FC = () => {
+  return null;
+};
+export default DegreeDay;

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

@@ -0,0 +1,6 @@
+import React, { FC } from "react";
+
+const HeatMap: FC = () => {
+  return null;
+};
+export default HeatMap;

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

@@ -0,0 +1,6 @@
+import React, { FC } from "react";
+
+const Precipitation: FC = () => {
+  return null;
+};
+export default Precipitation;

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

@@ -0,0 +1,6 @@
+import React, { FC } from "react";
+
+const TemperaturePerSeason: FC = () => {
+  return null;
+};
+export default TemperaturePerSeason;

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

@@ -0,0 +1,6 @@
+import React, { FC } from "react";
+
+const TemperaturePerSector: FC = () => {
+  return null;
+};
+export default TemperaturePerSector;

app/src/components/pages/Home.tsx

@@ -1,71 +1,90 @@
 import React, { ChangeEvent, FC } from "react";
 import Select from "../UI/forms/select";
+import DegreeDay from "../data/DegreeDay";
+import TemperaturePerSeason from "../data/TemperaturePerSeason";
+import TemperaturePerSector from "../data/TemperaturePerSector";
+import Precipitation from "../data/Precipitation";
 
 const Home: FC = () => {
-    let optionList: string[] | number[] = ["a", "b", "c", "d"];
-    let campaignList: string[] | number[] = ["2018", "2019", "2020", "2021"];
-    let monthList: string[] | number[] = ["Enero",
-        "Febrero",
-        "Marzo",
-        "Abril",
-        "Mayo",
-        "Junio",
-        "Julio",
-        "Agosto",
-        "Septiembre",
-        "Octubre",
-        "Noviembre",
-        "Diciembre"];
+  let optionList: string[] | number[] = ["a", "b", "c", "d"];
+  let campaignList: string[] | number[] = ["2018", "2019", "2020", "2021"];
+  let monthList: string[] | number[] = [
+    "Enero",
+    "Febrero",
+    "Marzo",
+    "Abril",
+    "Mayo",
+    "Junio",
+    "Julio",
+    "Agosto",
+    "Septiembre",
+    "Octubre",
+    "Noviembre",
+    "Diciembre",
+  ];
 
-    return (
-        <div className="row p-lg-4 p-md-3 p-2">
+  return (
+    <>
+      <section className="row p-lg-4 p-md-3 p-2">
+        <div className="row mb-2 mb-md-4">
+          <div className="col-12 col-lg-1 mb-2 mb-sm-3 mb-md-0 align-self-center">
+            Titulo
+          </div>
 
-            <div className="row mb-2 mb-md-4">
-                <div className="col-12 col-lg-1 mb-2 mb-sm-3 mb-md-0 align-self-center">
-                    Titulo
-                </div>
+          <div className="col-12 col-sm-4 col-lg-3 mb-2 mb-sm-0">
+            <Select
+              list={optionList}
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                console.log(e.target.value)
+              }
+              name="Comparación"
+              placeholder="Selección de finca"
+              data-algo="algo"
+            />
+          </div>
+          <div className="col-6 col-sm-3 col-lg-2 mb-2 mb-sm-0">
+            <Select
+              list={campaignList}
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                console.log(e.target.value)
+              }
+              name="Comparación"
+              placeholder="Campaña"
+              data-algo="algo"
+            />
+          </div>
+          <div className="col-6 col-sm-3 col-lg-2 mb-2 mb-sm-0">
+            <Select
+              list={monthList}
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                console.log(e.target.value)
+              }
+              name="Comparación"
+              placeholder="Mes"
+              data-algo="algo"
+            />
+          </div>
 
-                <div className="col-12 col-sm-4 col-lg-3 mb-2 mb-sm-0">
-                    <Select
-                        list={optionList}
-                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                            console.log(e.target.value)
-                        }
-                        name="Comparación"
-                        placeholder="Selección de finca"
-                        data-algo="algo"
-                    />
-                </div>
-                <div className="col-6 col-sm-3 col-lg-2 mb-2 mb-sm-0">
-                    <Select
-                        list={campaignList}
-                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                            console.log(e.target.value)
-                        }
-                        name="Comparación"
-                        placeholder="Campaña"
-                        data-algo="algo"
-                    />
-                </div>
-                <div className="col-6 col-sm-3 col-lg-2 mb-2 mb-sm-0">
-                    <Select
-                        list={monthList}
-                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                            console.log(e.target.value)
-                        }
-                        name="Comparación"
-                        placeholder="Mes"
-                        data-algo="algo"
-                    />
-                </div>
+          <div className="col-12 col-sm-2 col-lg-2">
+            <button type="button" className="btn btn-primary">
+              Buscar
+            </button>
+          </div>
+        </div>
+      </section>
 
-                <div className="col-12 col-sm-2 col-lg-2">
-                    <button type="button" className="btn btn-primary">Buscar</button>
-                </div>
-            </div>
+      <section className="row">
+        <div className="col-md-6">
+          <TemperaturePerSeason />
+          <DegreeDay />
+          <Precipitation />
+        </div>
+        <div className="col-md-6">
+          <TemperaturePerSector />
         </div>
-    );
+      </section>
+    </>
+  );
 };
 
 export default Home;
-