pem-humboldt/biotablero-frontend

Módulos de la interfaz gráfica del proyecto Biotablero

Programa de Evaluación y Monitoreo de la biodiversidad

Diseña, implementa y da realimentación sobre metodologías para la evaluación y monitoreo de la biodiversidad, a través de la recolección, integración, análisis, interpretación y divulgación de datos propios o producto de la articulación con otros actores, para sintetizar y posicionar conocimiento sobre el estado y tendencias de la biodiversidad y los servicios ecosistémicos en Colombia, de manera incidente y oportuna. Así mismo, almacena, estructura y analiza, por medio de un enfoque transdisciplinario que incluye aproximaciones estadísticas, matemáticas y socioeconómicas, los datos e información obtenidos por Colecciones Biológicas y los programas de Ciencias Básicas y Ciencias Sociales.

biotablero-frontend's Issues

Geofence overview

Description:

The first component for representative data per search selected area.

Acceptance criteria:

• Show total ha by selected area ( = search area) and percentage
• Show ha sum of all strategic ecosystems by selected area and percentage in this selected area
• Add graph coverage N/T by geofence
• Add graph AP/NP by geofence

Strategic Ecosystems component

Cambiar ícono del header

Descripción:

Para el header usar la imagen que no tiene la cinta de proximamente

Resultado:

La imagen del header no lleva el proximamente

Endpoints relacionados con esta tarea:

Consideraciones:

• Definir con Cesar si cambiar también la imagen del carrusel del home
• La imagen existe en versiones anteriores del código, se puede buscar en el historial de cambios del home

Map interaction

Description:

Acceptance criteria:

• Click on the map and then load geofence selected

Validate and adjust endpoints required for pa

Description:

Currently, the pa endpoints response has wrong data, so those responses will change and we need to validate data in the graphs and inside component whose implement these endpoints.

Acceptance criteria:

• Review graphs
• Review endpoints implementation

[delete] Test issue

Description:

Acceptance criteria:

• one criterion
• maybe two?

Creación de plantilla para tarjetas cerradas

Descripción

Con base a los mockups entregados por Cesar crear la plantilla que tenga los siguientes elementos:

• Panel de la izquierda para los filtros. No poner nada dentro de este panel
• Panel de la derecha con las tarjetas cerradas y el campo superior con la cantidad de resultados. Crear los componentes necesarios para mostrar las tarjetas cerradas, pero no crear componentes ni funcionalidades para abrir las tarjetas

Resultado:

Vista del catalogo general, sin funcionalidades de ampliar tarjetas o filtrar.

Consideraciones

Revisar qué se puede sacar del código viejo para la plantilla, pero evitar agregar código (y nuevas dependencias) que no sea utilizados por esta primera implementación

AMBA or AMVA

Description:

Reviewing data queries in BioTablero, we discover an inconsistency between AMVA and AMBA in the database, which refers to the same object. Then, the issue was checking the data integrity of "Área metropolitana del Valle de Aburrá"

Acceptance criteria:

• Change the data in the database

[Indicators] Create test files for indicator's index

• filtersData
• cardsData

Dounut for national strategic ecosystems

Description:

Replace bar for dounut

Acceptance criteria:

• Show area, percentage and name for national strategic ecosystem
• National vs ecosystem type searched

Disable SHZ request when clicking Bioma in map

Description:

Inability of this request to remove console errors before release

Acceptance criteria:

• Check console errors before launching new release
• Adjust maps load order, to control what happens when a layer is called after another one

Change Meter graph for BarStackHorizontal

Description:

Reuse D3 developed graphs instead to use external components

Acceptance criteria:

• BarStackHorizontal smaller without labels to simulate Meter
• Replace in current Meter component
• Implement in the strategic ecosystems, overview and details

Catálogo de indicadores 2021

Tareas asociadas al módulo de indicadores. Este módulo se va a desarrollar como un paquete aparte a los módulos de consultas y compensaciones

Fix popup location in graphs

Description:

The box is not near to the cursor or inside the bounds.

Acceptance criteria:

• Popup readible for all values in the graph.

Geofence detailed view per strategic ecosystem

Description:

Show details by strategic ecosystem selected in the search area

Acceptance criteria:

• Connect endpoints to show accurate area and percentage values
• Graph: PA/NP for this strategical ecosystem
• Graph: Transformed and Natural for this strategical ecosystem
• Show in text the national percentage per strategical ecosystem in this geofence

[Indicators] Spike: Filtering indicators by category

• Clickable option in the category list to identify indicators selected
• Remove / hide indicators unselected
• Update current filters

(Cambiar nombre) Extraer funcionalidades de organización de información en Compensation y Search

Descripción:

Extraer las funcionalidades de organización de información entre el mapa y el menú lateral para ser reusado entre componentes.

Resultado:

Componente nuevo con los helpers relacionados a la organización de la información y que sea coherente entre los endpoints para mapa y para menús laterales, que sean producto de refactor como: organizar estructuras de datos para mapas y menús laterales

Endpoints relacionados con esta tarea:

• Ninguno

Consideraciones:

• Nuevos componentes funcionales creados
• Nuevo componente funcional importado en los componentes Compensation y Search
• Las modificaciones no deben afectar las interacciones del usuario con el Front-End

Strategic ecosystems section per search area

Description:

Create components to achieve this structure:

Updated structure (20/05/2019)

Acceptance criteria:

• Strategic ecosystems with three new components: strategic ecosystems list, details option, and details view

Spike: Componente o clase para hacer match de colores entre gráficas y mapa

Descripción:

Buscar la mejor forma de que los colores de cada sección del mapa hagan match con los colores de cada valor de la gráfica correspondiente. Esto se puede realizar basado en el id de las secciones de cada uno o por algún otro criterio, se deja a consideración del desarrollador.

Resultado:

Componente o Clase que se encarga de determinar los colores para cada sección del mapa y de la gráfica. Debe poder usarse desde todos los componentes que tengan la información cruda o en estructuras (pero sin que hayan perdido información) en forma de función o lista (objeto).

Endpoints relacionados con esta tarea:

No es precisamente para mostrar información de un endpoint pero sí utilizaría la información de todos los que expongan información relacionada a gráficas y mapas.

Consideraciones:

En caso de que se requiera mayor información por parte del backend para realizar este match, crear mockups hasta terminar el componente y luego crear una tarea con la lista de los atributos necesarios para traer esa información desde el backend.

Implementar filtros

Descripción

Conectar el panel de los filtros con la búsqueda de los indicadores correspondientes. Esta conexión se debe hacer enviando las consultas correspondientes al backend.

Resultado

Al seleccionar filtros, las tarjetas que se muestran son aquellas que tienen los tags seleccionados.

Consideraciones

A pesar de que la lista de tags parece fija, la misma se debe cargar desde el backend.

Debug-0.1

Review documentation, imports and fixing typos before new functionalities

Load Ecosystems graphics when the option is selected

When an user goes to Consultas --> Geofence Option --> Ecosistemas tab

The next information should load on the tab:

1. Graphic (Area percentage and Ha per strategic ecosystems: Bosque seco, páramos y humedales).
2. Graphic (Ecosystem percentage per Protected area per category).
3. Cover type percentage (Natural and transformed).

This information could be loaded using endpoints implemented by @erikasv here PEM-Humboldt/biotablero-backend#60

Compensation: Adjust window scroll when SZH and CAR are selected

The options at the bottom are hard to access:

Create BiomesIAvH view and graph

20200327: Se revisó con César y la caja de factor de compensación va a agrupar los gráficos de factor de compensación, biomas y regiones bióticas, por lo tanto sólo se va a mostrar el mapa de factor de compensación (que actualmente ya coincide los colores del mapa con el gráfico).
20190419: Esta tarea debe ser revisada con el equipo BioTablero.

Description:

Create a new representation for BiomesIAvH in the tab "Paisajes", because the map shows BiomesIAvH instead of Compensation Factor.

Acceptance criteria:

• Filter by compensation factor those biomes represented in the map
• Shows another graph

Compesation lists

Details option by strategic ecosystem

Description:

The second component is a list with each strategic ecosystem (paramos, tropical dry forest, wetland).

Acceptance criteria:

• Show graph
• Option to show more details
• Load details view

Gráfico para visualizar el valor promedio de la huella humana para el año más reciente discriminado por categoría

Descripción:

Crear gráfica tipo barra horizontal apilada que mostrará la proporción de cada categoría para el año más reciente: Natural (0-15), Baja (15-30), Media (30-60), Alta (60-100). Lo anterior se visualizará de la misma manera como se muestra actualmente la proporción de coberturas.

Resultado:

• Gráfico que permita visualizar el valor promedio de la huella humana en el año más reciente

Endpoints relacionados con esta tarea:

Ninguno

Consideraciones:

• Crear el gráfico con datos de prueba usando un mockup en el front con la misma estructura de como llegarían los datos del API.
• Verificar los colores para este gráfico con César, para crear dentro de la función de colores (matchColor) la paleta de colores correspondiente a este gráfico.

Compensaciones: Add new status option when creating a Project

Cuando se crea un nuevo proyecto, el Grupo de Energía solicita la inclusión de un nuevo estado: Prefactibilidad.

Resultado esperado: Al seleccionar la opción +Agregar nuevo proyecto, la selección estado de proyecto debería mostrar la opción "Prefactibilidad". Igualmente este estado debe aparecer en el menú de selección de proyectos en la página inicial del módulo de compensaciones.

Extraer funcionalidades clickFeature, highlightFeature, y resetHighlight de Compensation y Search

Descripción:

Extraer las funcionalidades de los componentes Compensation y Search relacionados a la manipulación de la capa hacia un componente independiente para ser reusado por otros componentes.

Resultado:

• Componente con información reusable de las acciones de usuario sobre el mapa, que son resaltar el mapa (highlightFeature), hacer clic en el mapa (clickFeature) y cambiar de foco en el mapa (resetHighlight)

Endpoints relacionados con esta tarea:

• Ninguno

Consideraciones:

• Nuevos componentes funcionales creados
• Funciones de mapa removidas de los componentes Compensation y Search
• Las modificaciones no deben afectar las interacciones del usuario con el Front-End

Change notifications from English to Spanish

Change map when another area is selected

Description:

Acceptance criteria:

• Hide area selected on the map when the selection changes

Create new component

Create new component and implement the action on the search menu.

Load geofences options with endpoints results

• Dynamic load

Close all selected strategies

Fixing popup during interactions

Description:

Adjust the form and kind of popup showed on the map

Acceptance criteria:

• Remove close button for interaction in area level

Compensaciones: Browser freezes when saving strategies

Browser freezes after confirming you want to save the strategies, even though it saves them to the database.

Browser: Firefox 63.0.1

Restructure geofences accordion

• Create necessary sublevels
• Restructure handlers for buttons / autocomplete for new data structure.
• Automate the option type classification (if it's a button, and autocomplete or what)

Connect layer endpoints to load more areas

Description:

Acceptance criteria:

• Change area selected
• Load another layer

Disconnect load layer and Selector behavior

Description:

Acceptance criteria:

• Next step in Selector

Graphs information

Description:

Defining styles and space for graphs information

Acceptance criteria:

• Show graph description for landscapes (BarStackHorizontal)

Showing error on Selector

Description:

Change when dataError is true and not depending on maps.

Acceptance criteria:

• Show error only when Selector doesn't have data.

Cargar BulletChart para jurisdicciones

Jurisdicción de prueba: CORPOBOYACÁ.
Estado de aceptación: BulletChart cargando en la pestaña "Paisaje".

Compensaciones: Fix number of decimals when showing totals

Cuando se están agregando biomas a un nuevo proyecto, es posible ingresar valores decimales. Como resultado, si se está trabajando con muchas cifras decimales el total a compensar en la parte superior crecerá con tendencia a desbordarse.

Resultado esperado: el número de cifras a mostrar en los totales debería estar ajustado a un número fijo (propongo 5 cifras decimales) para los totales.

Compensaciones: Blank screen when selecting a combination of Subzone and CAR

En la sección DÓNDE - CÓMO, al seleccionar un bioma determinado y su respectiva combinación de Subzona Hidrográfica y CAR, la pantalla se pone en blanco y hay que volver a ingresar a BioTablero perdiendo la sesión actual.

Ejemplo:

Proyecto Zona Norte --> DAA --> Sabana Larga Bolivar 1 --> Zonobioma Alternohigrico Tropical Cartagena y delta del Magdalena --> Ciénaga Mallorquin --> Corporación Autónoma Regional del Magdalena.

Resultado esperado: en caso de error de contenido se debería mostrar en pantalla para información del usuario y permitir la selección de otra combinación.

Validate graphs with César and Maria Cecilia

Description:

Validate graph types

Acceptance criteria:

• Three geofences and national (strategic ecosystem) approved

[Indicators] Create indicators index template

• Show the lists using dynamic data (currently in two local files: categories and indicators cards)
• Organize styles and sections to divide sections

Ajuste de estilos del Selector.js

Footer, estilos entre módulos Home y Consultas

Compensation: Blank screen when change strategies in the same combination of subzone and CAR

Update strategies layer when strategies change in the same combination.

Loading maps error

Description:

Check loading maps error and other navigation errors

Acceptance criteria:

• Loading maps
• State errors
• Props errors
• Performance errors

Estructura de acordeón para las secciones de huella humana

Descripción:

Implementar estructura de acordeón bajo el título de Huella Humana el cual va a contener 3 secciones cada una con su correspondiente gráfica.

• Sección 1: Huella humana en el área de consulta para el último año del que se tenga información
• Sección 2: Huella humana a través del tiempo + información de ecosistemas estratégicos
• Sección 3: Persistencia de la huella humana en la unidad de consulta

Cada sección está contenida en un frame interno el cual debe poder abrirse y cerrarse tipo acordeón. En esta tarea deben crearse los frames internos vacios que posteriormente serán completados en otras tareas. Al iniciar la primera sección está abierta. Al abrir una sección las otras 2 se cierran y se actualiza el mapa. Es decir, sólo hay una sección abierta al tiempo.

Resultado:

Estructura del acordeón bajo el título de Huella Humana en la pestaña "Paisaje" con las 3 secciones.

Endpoints relacionados con esta tarea:

Consideraciones:

Este sería el equivalente al segundo nivel del acordeón.