laboratoria / cdmx-2018-06-bc-core-am-data-dashboard Goto Github PK

Revisado ✅

Detalles de Implementación

data.js

El corazón de este proyecto es la manipulación de datos a través de arreglos y
objetos. La idea de este archivo es contener toda la funcionalidad
que corresponda a obtener, procesar y manipular datos.

Parte de un buen proyecto es que esté ordenado y que otras programadoras puedan
acceder a el código rápidamente. Es por esto que este orden no es casualidad y
es una convención que generalmente encontrarás en internet bajo el nombre MVC o
Modelo Vista Controlador. En este proyecto Controlador y Modelo estarán bajo
el archivo data.js.

El boilerplate incluye tests que esperan que implementes las
siguientes 3 funciones y las exportes al entorno global (window) dentro del
script src/data.js, ten en cuenta que esto es solo lo básico, si necesitas más
funciones puedes hacerlo:

1) computarUsuarios(usuarios)

Esta función es la responsable de "crear" la lista de usuarios (estudiantes)
que vamos a "pintar" en la pantalla. La idea es "recorrer" el arreglo de
usuarios (estudiantes) que se encuentra dentro de la "data".

La función debe devolver un nuevo arreglo de usuarios donde cada objeto
de usuario deberá tener una propiedad con el nombre status y dentro,
sólo los datos requeridos.

Argumentos

• usuarios: Arreglo de objetos obtenido de la data en bruto.

Valor de retorno

Un arreglo de objetos donde cada uno de ellos incluye estas propiedades:

nombre: Nombre respectivo de la estudiante.
correo: Correo electrónico de la estudiante.
sede: Sede a la cual la estudiante pertenece.
generacion: Generación a la cual la estudiante pertenece.
status: Un objeto con las siguientes propiedades:

• porcentajeCompletado: Número entero entre 0 y 100 que indica el porcentaje de completitud
  general del usuario con respecto a todos los temas asignados.
• temas: Un objeto que incluye como propiedades los temas del programa.
  • porcentajeCompletado: Número entero entre 0 y 100 que indica el porcentaje de completitud
    general del usuario con respecto al tema respectivo.
  • duracionTema: Número entero que indica el tiempo necesario a invertir para completar el tema.
  • subtemas: Un objeto que incluye como propiedades los subtemas de ese tema en particular.
    • porcentajeCompletado: Número entero entre 0 y 100 que indica el porcentaje de completitud
      general del usuario con respecto al subtema.
    • tipo: String que indica la modalidad del subtema.
    • duracion: Número entero que indica el tiempo necesario a invertir para completar el subtema.

2) filtrarUsuarios(usuarios, ordenadoPor, direccion)

La función filtrarUsuarios() se encarga de ordenar la lista de usuarios creada con
computeUsersStats() en base a ordenadoPor y direccion.

Argumentos

• usuarios: Arreglo de objetos creado con computarUsuarios().
• ordenadoPor: String que indica el criterio de ordenado. Debe permitir ordenar
  por nombre, porcentaje de completitud total, porcentaje de ejercicios
  autocorregidos completados, porcentaje de quizzes completados, puntuación
  promedio en quizzes completados, y porcentaje de lecturas completadas.
• direccion: La dirección en la que queremos ordenar. Posibles valores:
  ASC y DESC (ascendiente y descendiente).

Valor de retorno

Arreglo de usuarios ordenado.

3) buscarUsuarios(usuarios, busqueda)

Argumentos

• usuarios: Arreglo de objetos creado con computarUsuarios().
• busqueda: String de búsqueda.

Valor de retorno

Nuevo arreglo de usuarios incluyendo solo aquellos que cumplan la condición de
filtrado, es decir, aquellos que contengan el string busqueda en el nombre
(nombre) del usuario.

main.js

Ten en cuenta también que existe otro archivo main.js que no está solo por
casualidad en la estructura del proyecto. En general es una buena idea ir
separando la funcionalidad en varios archivos, ya que a medida que un proyecto
crece, se vuelve insostenible dejar todo en un solo archivo. En este caso puedes
usar main.js para todo tu código que tenga que ver con mostrar los datos en la
pantalla, y data.js para todas las funciones que vimos que obtienen y
manipulan los datos.

Esta no es la única forma de dividir tu código, puedes usar más archivos y
carpetas, siempre y cuando la estructura sea clara para tus compañeras.

index.html

Al igual que en el proyecto anterior, también existe un archivo index.html.
Como ya sabrás, acá va la página que se mostrará al usuario de este tablero de
información. También nos sirve para indicar qué scripts se usarán y unir todo lo
que hemos hecho.