{
+ const {
+ handlerAccordionGeometry,
+ } = props;
+
+ const componentsArray = [
+ {
+ label: {
+ id: 'tropicalDryForest',
+ name: 'Plantas del bosque seco',
+ },
+ component: TropicalDryForest,
+ },
+ ];
+ return (
+
+ );
+};
+
+FunctionalDiversity.propTypes = {
+ handlerAccordionGeometry: PropTypes.func,
+};
+
+FunctionalDiversity.defaultProps = {
+ handlerAccordionGeometry: () => {},
+};
+
+export default FunctionalDiversity;
diff --git a/src/pages/search/drawer/species/Richness.jsx b/src/pages/search/drawer/species/Richness.jsx
new file mode 100644
index 000000000..045f99e64
--- /dev/null
+++ b/src/pages/search/drawer/species/Richness.jsx
@@ -0,0 +1,56 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import NumberOfSpecies from 'pages/search/drawer/species/richness/NumberOfSpecies';
+import SpeciesRecordsGaps from 'pages/search/drawer/species/richness/SpeciesRecordsGaps';
+import Accordion from 'pages/search/drawer/Accordion';
+
+const Richness = (props) => {
+ const {
+ handlerAccordionGeometry,
+ openTab,
+ } = props;
+
+ const componentsArray = [
+ {
+ label: {
+ id: 'numberOfSpecies',
+ name: 'Número de especies',
+ collapsed: openTab !== 'numberOfSpecies',
+ },
+ component: NumberOfSpecies,
+ },
+ {
+ label: {
+ id: 'speciesRecordsGaps',
+ name: 'Vacíos en registros de especies',
+ collapsed: openTab !== 'speciesRecordsGaps',
+ disabled: true,
+ },
+ component: SpeciesRecordsGaps,
+ },
+ ];
+ return (
+
+ );
+};
+
+Richness.propTypes = {
+ handlerAccordionGeometry: PropTypes.func,
+ openTab: PropTypes.string,
+};
+
+Richness.defaultProps = {
+ handlerAccordionGeometry: () => {},
+ openTab: '',
+};
+
+export default Richness;
diff --git a/src/pages/search/drawer/species/functionalDiversity/TropicalDryForest.jsx b/src/pages/search/drawer/species/functionalDiversity/TropicalDryForest.jsx
new file mode 100644
index 000000000..3dcdf7bcd
--- /dev/null
+++ b/src/pages/search/drawer/species/functionalDiversity/TropicalDryForest.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+class TropicalDryForest extends React.Component {
+ mounted = false;
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ showInfoGraph: false,
+ };
+ }
+
+ componentDidMount() {
+ this.mounted = true;
+ }
+
+ componentWillUnmount() {
+ this.mounted = false;
+ }
+
+ /**
+ * Show or hide the detailed information on each graph
+ */
+ toggleInfoGraph = () => {
+ this.setState((prevState) => ({
+ showInfoGraph: !prevState.showInfoGraph,
+ }));
+ };
+
+ render() {
+ return (
+
+ );
+ }
+}
+
+export default TropicalDryForest;
diff --git a/src/pages/search/drawer/species/richness/InfoTexts.jsx b/src/pages/search/drawer/species/richness/InfoTexts.jsx
new file mode 100644
index 000000000..3273475f4
--- /dev/null
+++ b/src/pages/search/drawer/species/richness/InfoTexts.jsx
@@ -0,0 +1,63 @@
+export const NumberOfSpeciesText = `La riqueza de especies mide el número de especies que se encuentran en un área de consulta, identificando zonas con alta o baja concentración. La riqueza puede ser utilizada como un indicador del estado de la biodiversidad del área consultada siempre y cuando se acompañe de información sobre la identidad y estado de las especies presentes. Un valor alto de riqueza, no necesariamente indica un buen estado de conservación. Se recomienda leer este indicador en conjunto con los demás indicadores de las secciones Ecosistemas y Paisajes en BioTablero, para identificar un panorama más amplio sobre el estado de la biodiversidad del área de consulta.
+
+
+Los valores de riqueza de especies se presentan de manera relativa para que el usuario pueda tener puntos de comparación para el área consultada. Cada una de las barras que representan la riqueza de los tipos de especies (total, endémicas, amenazadas e invasoras) se encuentra dividida en dos secciones, representando el rango de riqueza de especies en las unidades de consulta (p.ej. departamentos · color amarillo) respecto a su región natural correspondiente (p.ej. región Andes, Caribe, Pacífico, Orinoquia o Amazonas · color naranja). Adicionalmente, se muestra con un punto sobre la barra el valor de riqueza de la unidad de consulta (p.ej. Antioquia), y el valor mínimo y máximo de las demás unidades de consulta del mismo tipo (p.ej. departamentos).
+
+
+Dado que las especies presentes en Colombia se encuentra heterogéneamente representadas en las bases de datos, y la cuantificación real del número de especies tiene retos importantes de investigación relacionados con el diseño y esfuerzo de muestreo, y con la identificación taxonómica, presentamos dos aproximaciones a la cuantificación de la riqueza: riqueza inferida calculada a partir de BioModelos, y riqueza observada calculada a partir de registros georreferenciados de GBIF.
+
+
+
+Riqueza inferida de especies
+Los mapas y valores de riqueza inferida representan el número de especies que potencialmente se encuentran en un área de consulta y es calculada a partir de 5808 modelos de distribución de especies, en donde se identifican las condiciones climáticas idóneas donde las especies podrían estar presentes. Estos modelos se encuentran disponibles en BioModelos (Velásquez-Tibatá et al. 2019)
+
+Los mapas de riqueza de especies presentan valores desde 1 hasta n, dependiendo de la concentración de especies que se puedan encontrar en celdas de 1km2. Las rutinas empleadas para la construcción de los modelos se encuentran disponibles en el repositorio de código abierto del Laboratorio de Biogeografía Aplicada del Instituto Humboldt.
+
+Para el caso de la riqueza de especies amenazadas se incluyen aquellas especies categorizadas como en peligro crítico de extinción (CR), en peligro de extinción (EN) y vulnerable (VU) según la UICN. Para las especies invasoras se construyeron 23 BioModelos de especies de plantas (Salgado-Negret et al. Sometido) usando registros de presencias y variables bioclimáticas para obtener mapas de su distribución potencial (Phillips & Dudik 2008). Las especies invasoras modeladas fueron priorizadas por su alto potencial de invasión en el país (Cárdenas-López et al. 2010). Las especies endémicas se identificaron considerando los listados nacionales de especies publicados a través del SiB Colombia, y se espacializaron con los mapas disponibles en el portal de la UICN (González et al. 2018).
+
+Al momento de interpretar los valores de riqueza inferida se debe tener en cuenta que:
+
+ -
+ Al ser un indicador calculado a partir de modelos de distribución de especies, es importante considerar que el número de especies reportado corresponde a un número potencial que se relaciona con la presencia probable de las especies en respuesta a las condiciones climáticas idóneas, más no de hábitat o de otro tipo de interacciones bióticas que determinan la presencia real de las especies. Mayor información puede ser consultada en BioModelos o comunicarse directamente por correo electrónico a biomodelos@humboldt.org.co.
+
+ -
+ La riqueza inferida de especies se calculó con base en 5808 especies modeladas, los cuales representan sólo una muestra de las especies existentes en el país, por lo que los valores presentados no reflejan el número real de especies sobre el territorio; estos valores pueden estar sobre o subestimados. Se recomienda ver este indicador en conjunto con la riqueza observada de especies y el mapa de vacíos de información para tener un panorama más amplio de la riqueza del área de consulta.
+
+
+
+Riqueza observada de especies
+Los valores de riqueza observada representan el número de especies registradas para cada unidad de consulta, y es calculada a partir de los registros georeferenciados de GBIF. Los mapas de riqueza de especies presentan valores desde 1 hasta n, dependiendo del número de especies encontradas en los registros georeferenciados de cada unidad de consulta. El proceso de obtención de los registros y la cuantificación de la riqueza de especies está a cargo de la Infraestructura Institucional de Datos (I2D) del Instituto Humboldt. Las rutinas para estos cálculos pueden consultarse en su repositorio de código abierto.
+
+Los valores de riqueza total fueron estimados a partir de 11.730.023 registros. La información asociada a esta descarga puede ser consultada en este enlace. Para el caso de la riqueza de especies amenazadas se incluyen aquellas especies categorizadas como en peligro crítico de extinción (CR), en peligro de extinción (EN) y vulnerable (VU) según la resolución 1912 de 2017 del Ministerio de Ambiente y Desarrollo Sostenible. Para definir las especies exóticas se utilizaron distintas fuentes de información, entre las que se encuentran Invasive Species Compendium (ISC), Global Invasive Species Database (GISD), Inter-American Biodiversity Information Network (IABIN), además de diversos artículos científicos. En el caso de las especies endémicas se utilizaron múltiples fuentes para validar la categoría de endemismo a nivel de país: AmphibiaWeb, Bernal et al., 2015, Maldonado-Ocampo et al, 2008, Solari et al., 2013, Species lists of birds for South American countries and territories, The Reptile Database, Lista del Catálogo de Plantas y Líquenes de Colombia, Lista de referencias de Mamíferos de Colombia, Lista de especies de agua dulce de Colombia, Lista de referencia de especies de aves de Colombia.
+
+Al momento de interpretar los valores de riqueza observada se debe tener en cuenta que:
+
+ -
+ Los registros georeferenciados no cuentan con una depuración exhaustiva y pueden contener errores de identificación taxonómica de las especies y de georeferenciación, por lo que los valores presentados no reflejan el número real de especies sobre el territorio, estos valores pueden estar sobre o subestimados.
+
+ -
+ Los registros georeferenciados tienen un sesgo geográfico que está dado principalmente por la accesibilidad a los sitios de muestreo. Por esta razón, existen áreas que no han sido muestreadas en el país, y en este sentido los valores de riqueza pueden estar subestimados. Se recomienda leer este indicador en conjunto con el Análisis de Vacíos en Biodiversidad Continental para Colombia (AVBCC) disponible en BioTablero, con el fin de evaluar la representatividad de los registros en el área de consulta.
+
+
+
+`;
+
+export const SpeciesRecordsGapsText = `El Análisis de Vacíos en Biodiversidad Continental para Colombia (AVBCC) permite identificar las áreas del país que cuentan con datos primarios de biodiversidad disponibles en bases de datos como el SiB Colombia y GBIF, por lo que identifica sitios con vacíos de información, y por ende las áreas en las cuales se requieren esfuerzos de muestreos adicionales para mejorar el conocimiento de la biodiversidad. Esta aproximación se realiza calculando tres componentes: i) Concentración de los datos en el espacio geográfico a partir de un cálculo de densidad de registros. ii) Representatividad ambiental, siguiendo la metodología propuesta por Aguiar et al. (2020), la cual modela los registros de especies sobre variables bioclimáticas para identificar las regiones no estudiadas que son ambientalmente diferentes. iii) Complementariedad de la riqueza de especies, la cual calcula la presencia de especies según la densidad de registros en celdas de 1km2, y con base estimaciones no paramétricas de Jackknife de primer orden, se estima la riqueza esperada en cada celda, siendo el valor de complementariedad, la diferencia entre el valor estimado y el esperado. La ruta metodológica hace parte de la propuesta de García Márquez et al. (2012) para la estimación de un índice espacial de los registros de especies, y cuenta con algunos ajustes para el país.
+
+Cada uno de los componentes del AVBCC resulta en un mapa con valores entre 0 y 100 %, siendo 100 sobre lugares donde ocurren mayores vacíos de información en registros, información ambiental o complementariedad en la riqueza de especies, y 0 sobre áreas bien representadas de acuerdo a cada componente. El índice integrado AVBCC se obtiene de promediar los tres componentes. En las gráficas, se representa el AVBCC como un punto sobre la barra, y además se presentan otros seis valores útiles para su comparación: 1) el valor mínimo y 2) máximo del AVBCC en el área de consulta (p.ej. región Antioquia), 3) el valor mínimo y 4) máximo del AVBCC en las demás áreas de consulta del mismo tipo (p.ej. departamentos), 5) el valor mínimo y 6) máximo del AVBCC en la región biótica correspondiente al área de consulta (p.ej. región Andes) (Caribe, Andes, Pacífico, Orinoquia, Amazonas) (color naranja).
+
+El mapa de vacíos se encuentra disponible en el repositorio de datos geográficos del Instituto Humboldt. Todos los análisis se hicieron en el paquete estadístico R, y las rutinas que se emplearon para el cálculo del AVBCC se encuentran disponibles en el repositorio de código abierto del Programa de Evaluación y Monitoreo del Instituto Humboldt.
+
+Al momento de interpretar los valores del AVBCC se debe tener en cuenta que:
+
+ -
+ Los registros obtenidos para el presente análisis fueron descargados en enero del 2021, de forma tal que contará con los insumos disponibles hasta diciembre 31 del 2020. A dicho conjunto de datos se les aplicaron rutinas de verificación geográfica y taxonómica que pueden ser consultadas en los siguientes enlaces: Verificación Geográfica, Verificación Taxonómica.
+
+ -
+ La información obtenida en el presente análisis no cuantifica el nivel de sesgo de la información obtenida, dado que el número de registros presente en un sector puede estar influenciado por su cercanía a vías, ríos u otras unidades político-administrativas.
+
+
+
+`;
+
+export const NumberOfSpeciesTextHelper = 'Para escoger entre riqueza observada o inferida haga clic en el texto correspondiente. Para ver la riqueza observada e inferida al mismo tiempo desactívelas. En la sección de riqueza inferida puede hacer clic en cada barra para visualizar el mapa de riqueza correspondiente';
diff --git a/src/pages/search/drawer/species/richness/NumberOfSpecies.jsx b/src/pages/search/drawer/species/richness/NumberOfSpecies.jsx
new file mode 100644
index 000000000..bdf75c657
--- /dev/null
+++ b/src/pages/search/drawer/species/richness/NumberOfSpecies.jsx
@@ -0,0 +1,399 @@
+import React from 'react';
+import InfoIcon from '@material-ui/icons/Info';
+
+import { IconTooltip } from 'components/Tooltips';
+import GraphLoader from 'components/charts/GraphLoader';
+import {
+ LegendColor,
+ LineLegend,
+ TextLegend,
+ ThickLineLegend,
+} from 'components/CssLegends';
+import Icon from 'components/CssIcons';
+import matchColor from 'utils/matchColor';
+import RestAPI from 'utils/restAPI';
+import SearchContext from 'pages/search/SearchContext';
+import ShortInfo from 'components/ShortInfo';
+import { NumberOfSpeciesText, NumberOfSpeciesTextHelper } from 'pages/search/drawer/species/richness/InfoTexts';
+
+import biomodelos from 'images/biomodelos.png';
+import mappoint from 'images/mappoint.png';
+import biomodelos2 from 'images/biomodelos2.png';
+import mappoint2 from 'images/mappoint2.png';
+import biomodeloslink from 'images/biomodeloslink.png';
+import biomodeloslink2 from 'images/biomodeloslink2.png';
+
+const getLabel = (key, area, region) => {
+ let areaLbl = 'cerca';
+ switch (area) {
+ case 'states':
+ areaLbl = 'departamentos';
+ break;
+ case 'pa':
+ areaLbl = 'áreas de manejo especial';
+ break;
+ case 'ea':
+ areaLbl = 'jurisdicciones ambientales';
+ break;
+ case 'basinSubzones':
+ areaLbl = 'subzonas hidrográficas';
+ break;
+ default:
+ break;
+ }
+
+ return {
+ total: 'TOTAL',
+ endemic: 'ENDÉMICAS',
+ invasive: 'INVASORAS',
+ threatened: 'AMENAZADAS',
+ inferred: 'Inferido (BioModelos)',
+ observed: 'Observado (visor I2D)',
+ min_inferred: `Min. inferido ${areaLbl} de la región ${region}`,
+ min_observed: `Min. observado ${areaLbl} de la región ${region}`,
+ max_inferred: `Max. inferido ${areaLbl} de la región ${region}`,
+ max_observed: `Max. observado ${areaLbl} de la región ${region}`,
+ region_observed: `Observado región ${region}`,
+ region_inferred: `Inferido región ${region}`,
+ area: `${areaLbl.replace(/^\w/, (l) => l.toUpperCase())} de la región ${region}`,
+ region: `Región ${region}`,
+ inferred2: 'Inferido en el área de consulta',
+ observed2: 'Observado en el área de consulta',
+ national_inferred: `Max. inferido en ${areaLbl} a nivel nacional: `,
+ national_observed: `Max. observado en ${areaLbl} a nivel nacional: `,
+ }[key];
+};
+
+class NumberOfSpecies extends React.Component {
+ mounted = false;
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ showInfoGraph: false,
+ data: [],
+ allData: [],
+ filter: 'all',
+ message: 'loading',
+ selected: 'total',
+ bioticRegion: 'Región Biótica',
+ maximumValues: [],
+ showErrorMessage: false,
+ };
+ }
+
+ componentDidMount() {
+ this.mounted = true;
+ const {
+ areaId,
+ geofenceId,
+ } = this.context;
+
+ Promise.all([
+ RestAPI.requestNumberOfSpecies(areaId, geofenceId, 'all'),
+ RestAPI.requestNSThresholds(areaId, geofenceId, 'all'),
+ RestAPI.requestNSNationalMax(areaId, 'all'),
+ ])
+ .then(([values, thresholds, nationalMax]) => {
+ const data = [];
+ let region = null;
+ let showErrorMessage = false;
+ values.forEach((groupVal) => {
+ if (!region) region = groupVal.region_name;
+ const { id, ...limits } = thresholds.find((e) => e.id === groupVal.id);
+ showErrorMessage = groupVal.inferred > groupVal.region_inferred;
+ data.push({
+ id: groupVal.id,
+ ranges: {
+ area: {
+ max: Math.max(limits.max_inferred, limits.max_observed),
+ max_inferred: limits.max_inferred,
+ max_observed: limits.max_observed,
+ },
+ region: {
+ max: Math.max(groupVal.region_observed, groupVal.region_inferred),
+ region_observed: groupVal.region_observed,
+ region_inferred: groupVal.region_inferred,
+ },
+ },
+ markers: {
+ inferred: groupVal.inferred,
+ observed: groupVal.observed,
+ },
+ measures: {
+ ...limits,
+ region_inferred: groupVal.region_inferred,
+ region_observed: groupVal.region_observed,
+ },
+ title: '',
+ });
+ });
+ this.setState({
+ allData: data,
+ maximumValues: nationalMax,
+ message: null,
+ bioticRegion: region,
+ showErrorMessage,
+ }, () => {
+ this.filter('inferred')();
+ });
+ })
+ .catch(() => {
+ this.setState({ message: 'no-data' });
+ });
+ }
+
+ componentWillUnmount() {
+ this.mounted = false;
+ }
+
+ /**
+ * Show or hide the detailed information on each graph
+ */
+ toggleInfoGraph = () => {
+ this.setState((prevState) => ({
+ showInfoGraph: !prevState.showInfoGraph,
+ }));
+ };
+
+ /**
+ * Filter data by the given category
+ *
+ * @param {String} category category to filter by
+ * @returns void
+ */
+ filter = (category) => () => {
+ const { allData, filter, selected } = this.state;
+ const { handlerClickOnGraph } = this.context;
+ if (category === filter) {
+ this.setState({
+ data: allData.map((group) => ({
+ ...group,
+ ranges: {
+ area: group.ranges.area.max,
+ region: group.ranges.region.max,
+ },
+ })),
+ filter: 'all',
+ });
+ handlerClickOnGraph({
+ chartType: 'numberOfSpecies',
+ chartSection: 'all',
+ selectedKey: selected,
+ });
+ } else {
+ const newData = allData.map((group) => {
+ const regex = new RegExp(`${category}$`);
+ const measureKeys = Object.keys(group.measures).filter((key) => regex.test(key));
+ const areaKey = Object.keys(group.ranges.area).filter((key) => regex.test(key));
+ const regionKey = Object.keys(group.ranges.region).filter((key) => regex.test(key));
+ return {
+ id: group.id,
+ markers: {
+ [category]: group.markers[category],
+ },
+ measures: measureKeys.reduce(
+ (result, key) => ({ ...result, [key]: group.measures[key] }),
+ {},
+ ),
+ ranges: {
+ area: group.ranges.area[areaKey],
+ region: group.ranges.region[regionKey],
+ },
+ };
+ });
+ this.setState({ data: newData, filter: category });
+ handlerClickOnGraph({
+ chartType: 'numberOfSpecies',
+ chartSection: category,
+ selectedKey: selected,
+ });
+ }
+ }
+
+ render() {
+ const {
+ areaId,
+ handlerClickOnGraph,
+ } = this.context;
+ const {
+ showInfoGraph,
+ message,
+ data,
+ selected,
+ maximumValues,
+ filter,
+ bioticRegion,
+ showErrorMessage,
+ } = this.state;
+
+ let legends = ['inferred', 'min_inferred', 'max_inferred', 'region_inferred',
+ 'observed', 'min_observed', 'max_observed', 'region_observed'];
+
+ if (filter !== 'all') {
+ legends = legends.filter((leg) => {
+ const regex = new RegExp(`${filter}$`);
+ return regex.test(leg);
+ });
+ }
+
+ return (
+
+
+
+ this.toggleInfoGraph()}
+ />
+
+
+ {(
+ showInfoGraph && (
+
+ )
+ )}
+
+ {NumberOfSpeciesTextHelper}
+
+ {showErrorMessage && (
+
+ La riqueza inferida del área de consulta supera la de la región biótica en algunos
+ casos pues sus límites intersectan dos o más regiones bióticas.
+
+ )}
+
+
+ {getLabel('inferred', areaId)}
+
+
+ {getLabel('observed', areaId)}
+
+
+
+ {message === 'no-data' && (
+
+ )}
+ {data.map((bar) => (
+
+
+
+ {getLabel(bar.id)}
+
+
+
+ {(filter === 'all' || filter === 'inferred') && (
+ <>
+ {getLabel('national_inferred', areaId)}
+
+ {maximumValues.find((e) => e.id === bar.id).max_inferred}
+
+
+ )}
+ {filter === 'all' && (
+
+ )}
+ {(filter === 'all' || filter === 'observed') && (
+ <>
+ {getLabel('national_observed', areaId)}
+
+ {maximumValues.find((e) => e.id === bar.id).max_observed}
+
+
+ )}
+
+
+
+
+
+ {/* TODO:
+ Add I2D link when it's ready (import mappointlink and mappointlink2 images)
+ */}
+
+
+
+
+ {
+ this.setState({ selected: bar.id });
+ handlerClickOnGraph({
+ chartType: 'numberOfSpecies',
+ chartSection: filter,
+ selectedKey: bar.id,
+ });
+ }}
+ />
+
+
+ ))}
+
+
+ {data[0] && Object.keys(data[0].ranges).map((key) => (
+
+ {getLabel(key, areaId, bioticRegion)}
+
+ ))}
+ {data[0] && legends.map((key) => {
+ if (key === 'inferred' || key === 'observed') {
+ return (
+
+ {getLabel(`${key}2`, areaId, bioticRegion)}
+
+ );
+ }
+ return (
+
+ {getLabel(key, areaId, bioticRegion)}
+
+ );
+ })}
+
+
+
+
+ this.toggleInfoGraph()}
+ />
+
+
+ {(
+ showInfoGraph && (
+
+ )
+ )}
+
+ Vacios de datos
+
+
+ { this.setState({ selected: 'gaps' }); }}
+ reverse
+ labelXLeft="Pocos datos"
+ labelXRight="Muchos datos"
+ />
+
+
+ {gaps.measures && Object.keys(gaps.measures).map((key) => (
+
+ {getLabelGaps(key, areaId)}
+
+
+ ))}
+
+ {getLabelGaps('value', areaId)}
+
+
+
+
+ Concentración de registros
+
+ 5 km x 5 km
+
+
+ { this.setState({ selected: 'concentration' }); }}
+ labelXLeft="Poco representado"
+ labelXRight="Bien representado"
+ />
+
+
+ {concentration.measures && Object.keys(concentration.measures).map((key) => (
+
+ {getLabelConcentration(key, areaId)}
+
+
+ ))}
+
+ {getLabelConcentration('value', areaId)}
+
+
+