feat: Agrego gráfico de tiempo para mostrar totales

package.json

@@ -10,6 +10,7 @@
     "@material-ui/core": "^4.10.1",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
+    "@nivo/line": "^0.62.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

src/components/ResponsiveLineChart.jsx

@@ -0,0 +1,72 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { ResponsiveLine } from "@nivo/line";
+
+const ResponsiveLineChart = ({ data }) => (
+  <ResponsiveLine
+    data={data}
+    margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
+    xScale={{ type: "point" }}
+    yScale={{
+      type: "linear",
+      min: "auto",
+      max: "auto",
+      stacked: true,
+      reverse: false,
+    }}
+    axisTop={null}
+    axisRight={null}
+    axisBottom={{
+      orient: "bottom",
+      tickSize: 5,
+      tickPadding: 5,
+      tickRotation: 0,
+    }}
+    axisLeft={{
+      orient: "left",
+      tickSize: 5,
+      tickPadding: 5,
+      tickRotation: 0,
+    }}
+    colors={{ scheme: "nivo" }}
+    pointSize={10}
+    pointColor={{ theme: "background" }}
+    pointBorderWidth={2}
+    pointBorderColor={{ from: "serieColor" }}
+    pointLabel="y"
+    pointLabelYOffset={-12}
+    useMesh
+    legends={[
+      {
+        anchor: "bottom-right",
+        direction: "column",
+        justify: false,
+        translateX: 100,
+        translateY: 0,
+        itemsSpacing: 0,
+        itemDirection: "left-to-right",
+        itemWidth: 80,
+        itemHeight: 20,
+        itemOpacity: 0.75,
+        symbolSize: 12,
+        symbolShape: "circle",
+        symbolBorderColor: "rgba(0, 0, 0, .5)",
+        effects: [
+          {
+            on: "hover",
+            style: {
+              itemBackground: "rgba(0, 0, 0, .03)",
+              itemOpacity: 1,
+            },
+          },
+        ],
+      },
+    ]}
+  />
+);
+
+ResponsiveLineChart.propTypes = {
+  data: PropTypes.node.isRequired,
+};
+
+export default ResponsiveLineChart;

src/components/StyledTable.jsx

@@ -4,7 +4,7 @@ import { withStyles } from "@material-ui/core/styles";
 
 const StyledTableCell = withStyles((theme) => ({
   head: {
-    backgroundColor: theme.palette.common.black,
+    backgroundColor: "#668c99",
     color: theme.palette.common.white,
   },
   body: {

src/comunications/MediaServerService.js

@@ -40,4 +40,51 @@ const totalVideos = async () => {
   });
 };
 
-export { obtenerVideos, obtenerVideo, cambiarEstado, editarVideo, totalVideos };
+const obtenerEstadisticas = async (fechaInicio, fechaFinal) => {
+  return new Promise((resolve) => {
+    console.log(fechaInicio, fechaFinal);
+    setTimeout(() => {
+      resolve({
+        "2020-07-01": 1,
+        "2020-07-02": 3,
+        "2020-07-03": 2,
+        "2020-07-04": 1,
+        "2020-07-05": 2,
+        "2020-07-06": 3,
+        "2020-07-07": 4,
+        "2020-07-08": 1,
+        "2020-07-09": 2,
+        "2020-07-10": 2,
+        "2020-07-11": 0,
+        "2020-07-12": 3,
+        "2020-07-13": 1,
+        "2020-07-14": 3,
+        "2020-07-15": 2,
+        "2020-07-16": 1,
+        "2020-07-17": 2,
+        "2020-07-18": 3,
+        "2020-07-19": 4,
+        "2020-07-20": 1,
+        "2020-07-21": 2,
+        "2020-07-22": 2,
+        "2020-07-23": 0,
+        "2020-07-24": 1,
+        "2020-07-25": 3,
+        "2020-07-26": 2,
+        "2020-07-27": 1,
+        "2020-07-28": 2,
+        "2020-07-29": 3,
+        "2020-07-30": 4,
+      });
+    }, 1000);
+  });
+};
+
+export {
+  obtenerVideos,
+  obtenerVideo,
+  cambiarEstado,
+  editarVideo,
+  totalVideos,
+  obtenerEstadisticas,
+};

src/estadisticas/PantallaEstadisticas.jsx

@@ -1,13 +1,21 @@
-import React from "react";
+/* eslint-disable guard-for-in */
+import React, { useState, useEffect } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import { Typography, Grid } from "@material-ui/core";
 import Paper from "@material-ui/core/Paper";
+import InputLabel from "@material-ui/core/InputLabel";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
+import BeatLoader from "react-spinners/BeatLoader";
+
 import VideoImagen from "../assets/videos.png";
 import UsuarioImagen from "../assets/usuarios.webp";
 import ReaccionImagen from "../assets/reacciones.png";
 import ComentarioImagen from "../assets/comentarios.png";
 
 import MediaCard from "../components/MediaCard";
+import ResponsiveLineChart from "../components/ResponsiveLineChart";
 
 import * as MediaServerService from "../comunications/MediaServerService";
 import * as AuthServerService from "../comunications/AuthServerService";
@@ -24,10 +32,63 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.text.secondary,
     border: 0,
   },
+  chart: {
+    height: 350,
+    width: 700,
+    textAlign: "center",
+    backgroundColor: "#f0f5f5",
+  },
+  formControl: {
+    minWidth: 120,
+  },
 }));
 
 const PantallaEstadisticas = () => {
   const classes = useStyles();
+  const [escala, setEscala] = useState(7);
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    // eslint-disable-next-line no-use-before-define
+    obtenerEstadisticas();
+  }, [escala]);
+
+  const obtenerDatosVideos = async () => {
+    try {
+      const fechaFinal = new Date();
+      const fechaInicio = new Date();
+      fechaInicio.setDate(fechaFinal.getDate() - escala);
+      const estadisticas = await MediaServerService.obtenerEstadisticas(
+        fechaInicio.toISOString().substring(0, 10),
+        fechaFinal.toISOString().substring(0, 10)
+      );
+      // eslint-disable-next-line no-use-before-define
+      return armarDatos(estadisticas, "video", "hsl(17, 70%, 50%)");
+    } catch (error) {
+      console.log("error");
+      return [];
+    }
+  };
+
+  const armarDatos = (estadisticas, titulo, color) => {
+    const datos = [];
+
+    // eslint-disable-next-line no-restricted-syntax
+    for (const key in estadisticas) {
+      datos.push({
+        x: key.substring(key.length - 2, key.length),
+        y: estadisticas[key],
+      });
+    }
+    return { id: titulo, color, data: datos };
+  };
+
+  const obtenerEstadisticas = async () => {
+    const datos = [];
+    const videos = await obtenerDatosVideos();
+    datos.push(videos);
+    setData(datos);
+  };
 
   const historicoVideos = async () => {
     const total = await MediaServerService.totalVideos();
@@ -49,6 +110,10 @@ const PantallaEstadisticas = () => {
     return total;
   };
 
+  const handleChange = (event) => {
+    setEscala(event.target.value);
+  };
+
   return (
     <div className={classes.root}>
       <Typography variant="h3" gutterBottom>
@@ -99,8 +164,27 @@ const PantallaEstadisticas = () => {
             />
           </Paper>
         </Grid>
-        <Grid item xs={12}>
-          <Paper className={classes.paper}>grafico videos</Paper>
+        <Grid container direction="row" item xs={12} justify="center">
+          <FormControl className={classes.formControl}>
+            <InputLabel id="demo-simple-select-label">Escala</InputLabel>
+            <Select
+              labelId="demo-simple-select-label"
+              id="demo-simple-select"
+              value={escala}
+              onChange={handleChange}
+            >
+              <MenuItem value={7}>Último Semana</MenuItem>
+              <MenuItem value={14}>Últimas 2 semanas</MenuItem>
+              <MenuItem value={30}>Último mes</MenuItem>
+            </Select>
+          </FormControl>
+          <Paper className={classes.chart}>
+            {data.length === 0 ? (
+              <BeatLoader size={10} margin={2} color="#298FDA" loading />
+            ) : (
+              <ResponsiveLineChart data={data} />
+            )}
+          </Paper>
         </Grid>
       </Grid>
     </div>