Merge pull request #545 from PEM-Humboldt/release/1.8.0

Release/1.8.0
PEM-Humboldt · Oct 27, 2021 · 8ef6a7d · 8ef6a7d
2 parents dcfbf41 + 5686e36
commit 8ef6a7d
Show file tree

Hide file tree

Showing 39 changed files with 1,849 additions and 122 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "biotablero",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
@@ -13,9 +13,11 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@nivo/bar": "^0.69.0",
+    "@nivo/bullet": "^0.69.1",
     "@nivo/core": "^0.69.0",
     "@nivo/line": "^0.69.0",
     "@nivo/pie": "^0.69.0",
+    "@nivo/tooltip": "^0.69.0",
     "@vx/axis": "0.0.170",
     "@vx/glyph": "0.0.170",
     "@vx/grid": "0.0.170",
@@ -35,6 +37,7 @@
     "react-masonry-component": "6.2.1",
     "react-router-dom": "5.2.0",
     "react-scripts": "4.0.2",
+    "react-spring": "^9.1.2",
     "styled-components": "^5.2.3"
   },
   "devDependencies": {

diff --git a/src/app/layout/Footer.jsx b/src/app/layout/Footer.jsx
@@ -6,18 +6,20 @@ import nasa from 'images/nasa.png';
 import temple from 'images/temple.png';
 import geobon from 'images/geobonlogo.png';
 import usaid from 'images/usaidlogo.png';
+import umed from 'images/umed.png';
 
 const logosData = {
   nasa: { img: nasa, url: 'https://www.nasa.gov/' },
   temple: { img: temple, url: 'https://www.temple.edu/' },
   siac: { img: logoSiac, url: 'http://www.siac.gov.co/siac.html' },
   geobon: { img: geobon, url: 'https://geobon.org/' },
   usaid: { img: usaid, url: 'https://www.usaid.gov/' },
+  umed: { img: umed, url: 'https://udemedellin.edu.co/' },
 };
 
 const logoSet = {
   default: ['nasa', 'temple', 'siac'],
-  monitoreo: ['usaid', 'geobon', 'temple'],
+  monitoreo: ['usaid', 'geobon', 'umed', 'temple'],
 };
 
 const Footer = (

diff --git a/src/components/CssIcons.jsx b/src/components/CssIcons.jsx
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Icon = styled.div`
+  background: ${({ image }) => `url(${image}) no-repeat center center`};
+  width: 25px;
+  height: 27px;
+  display: inline-block;
+
+  &:hover {
+    background: ${({ hoverImage }) => `url(${hoverImage}) no-repeat center center`};
+    width: 25px;
+    height: 27px;
+  }
+`;
+
+export default Icon;
diff --git a/src/components/CssLegends.jsx b/src/components/CssLegends.jsx
@@ -9,33 +9,93 @@ const Legend = styled.p`
   color: #424242;
   line-height: 1;
   margin-right: 10px;
+`;
 
+const PointLegend = styled(Legend)`
   &:before {
     display: inline-block;
     content: "";
     width: 12px;
     height: 12px;
-    margin-right: 5px;
+    margin-right: ${(props) => (props.marginRight ? props.marginRight : '5px')};
     border-radius: 6px;
     vertical-align: middle;
+    margin-left: ${(props) => (props.marginLeft ? props.marginLeft : '0')};
   }
 `;
 
-const LegendColor = styled(Legend)`
+const LegendColor = styled(PointLegend)`
   &:before {
     background-color: ${({ color }) => color};
   }
 `;
 
-const BorderLegendColor = styled(Legend)`
+const BorderLegendColor = styled(PointLegend)`
   &:before {
     color: #ffffff;
     border: 2px solid ${({ color }) => color};
     width: 7px;
     height: 7px;
     border-radius: 0;
-    vertical-align: bottom;
   }
 `;
 
-export { LegendColor, BorderLegendColor };
+const LineLegend = styled(Legend)`
+  &:before {
+    display: inline-block;
+    content: "";
+    width: 15px;
+    height: 3px;
+    margin-right: 5px;
+    margin-bottom: 4px;
+    border-bottom: 3px solid ${({ color }) => color};
+    vertical-align: middle;
+  }
+`;
+
+const ThickLineLegend = styled(LineLegend)`
+  &:before {
+    border-bottom: 8px solid ${({ color }) => color};
+    height: 0px;
+  }
+`;
+
+const TextLegend = styled(Legend)`
+  margin-right: 1px;
+  padding-bottom: 3px;
+  color: ${({ color }) => color};
+
+  &:before {
+    display: inline-block;
+    content: "";
+    background: ${({ image }) => (image ? `url(${image}) no-repeat center` : '')};
+    background-size: 15px;
+    width: 15px;
+    height: 26px;
+    margin-right: 5px;
+    vertical-align: middle;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:hover:before {
+    background: ${({ hoverImage }) => (hoverImage ? `url(${hoverImage}) no-repeat center` : '')};
+    background-size: 15px;
+    width: 15px;
+    height: 26px;
+  }
+
+  &.filtered {
+    border-bottom: 2px solid tomato;
+  }
+`;
+
+export {
+  LegendColor,
+  BorderLegendColor,
+  LineLegend,
+  ThickLineLegend,
+  TextLegend,
+};
diff --git a/src/components/GradientLegend.jsx b/src/components/GradientLegend.jsx
@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import styled from 'styled-components';
+
+const Gradient = styled.div`
+  height: 12px;
+  width: 95%;
+  margin: 0 auto;
+  background: linear-gradient(0.25turn, ${({ fromColor }) => fromColor}, ${({ toColor }) => toColor});
+`;
+
+const GradientLegend = (props) => {
+  const {
+    from,
+    to,
+    fromColor,
+    toColor,
+  } = props;
+  return (
+    <div className="gradientLegend">
+      <Gradient fromColor={fromColor} toColor={toColor} />
+      <div className="text">
+        <span>{from}</span>
+        <span>{to}</span>
+      </div>
+    </div>
+  );
+};
+
+GradientLegend.propTypes = {
+  from: PropTypes.string.isRequired,
+  to: PropTypes.string.isRequired,
+  fromColor: PropTypes.string.isRequired,
+  toColor: PropTypes.string.isRequired,
+};
+
+export default GradientLegend;
diff --git a/src/components/MapViewer.jsx b/src/components/MapViewer.jsx
@@ -1,4 +1,9 @@
-import { Map, TileLayer, WMSTileLayer } from 'react-leaflet';
+import {
+  ImageOverlay,
+  Map,
+  TileLayer,
+  WMSTileLayer,
+} from 'react-leaflet';
 import { Modal } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
 import PropTypes from 'prop-types';
@@ -43,15 +48,17 @@ class MapViewer extends React.Component {
 
   componentDidUpdate() {
     const { layers, activeLayers, update } = this.state;
-    const { loadingLayer } = this.props;
+    const { loadingLayer, rasterBounds } = this.props;
     if (update) {
       Object.keys(layers).forEach((layerName) => {
         if (activeLayers.includes(layerName)) this.showLayer(layers[layerName], true);
         else this.showLayer(layers[layerName], false);
       });
     }
     const countActiveLayers = Object.values(activeLayers).filter(Boolean).length;
-    if (countActiveLayers === 0 && !loadingLayer) {
+    if (rasterBounds) {
+      this.mapRef.current.leafletElement.fitBounds(rasterBounds);
+    } else if (countActiveLayers === 0 && !loadingLayer) {
       this.mapRef.current.leafletElement.setView(config.params.center, 5);
     }
   }
@@ -99,10 +106,14 @@ class MapViewer extends React.Component {
       userLogged,
       loadingLayer,
       layerError,
+      rasterLayer,
+      rasterBounds,
+      mapTitle,
     } = this.props;
     const { openErrorModal } = this.state;
     return (
       <Map ref={this.mapRef} center={config.params.center} zoom={5} onClick={this.onMapClick}>
+        {mapTitle}
         <Modal
           aria-labelledby="simple-modal-title"
           aria-describedby="simple-modal-description"
@@ -154,6 +165,12 @@ class MapViewer extends React.Component {
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
           attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
         />
+        {rasterLayer && rasterBounds && (
+          <ImageOverlay
+            url={rasterLayer}
+            bounds={rasterBounds}
+          />
+        )}
         {/* TODO: Catch warning from OpenStreetMap when cannot load the tiles */}
         {/** TODO: Mostrar bajo este formato raster this.CapaBiomasSogamoso de cada estrategia de
           Compensaciones */}
@@ -192,12 +209,18 @@ MapViewer.propTypes = {
   layers: PropTypes.object.isRequired,
   // eslint-disable-next-line react/no-unused-prop-types
   layerError: PropTypes.bool,
+  rasterLayer: PropTypes.string,
+  rasterBounds: PropTypes.object,
+  mapTitle: PropTypes.object,
 };
 
 MapViewer.defaultProps = {
   userLogged: null,
   loadingLayer: false,
   layerError: false,
+  rasterLayer: '',
+  rasterBounds: null,
+  mapTitle: null,
 };
 
 export default MapViewer;
diff --git a/src/components/TabContainer.jsx b/src/components/TabContainer.jsx
@@ -20,7 +20,7 @@ class TabContainer extends React.Component {
   changeTab = (event, value) => {
     const { handlerSwitchLayer } = this.props;
     this.setState({ value });
-    if (value === 0 || value === 2) {
+    if (value === 0) {
       handlerSwitchLayer('geofence');
     }
   };

diff --git a/src/components/charts/GraphLoader.jsx b/src/components/charts/GraphLoader.jsx
@@ -2,6 +2,7 @@ import DownloadIcon from '@material-ui/icons/Save';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import SingleBulletGraph from 'components/charts/SingleBulletGraph';
 import DotInfo from 'components/charts/DotInfo';
 import DotsGraph from 'components/charts/DotsGraph';
 import LargeBarStackGraph from 'components/charts/LargeBarStackGraph';
@@ -27,21 +28,22 @@ const GraphLoader = (props) => {
     padding,
     onClickGraphHandler,
     markers,
-    loading,
+    message,
     selectedIndexValue,
     yMax,
+    reverse,
+    labelXRight,
+    labelXLeft,
   } = props;
 
-  // While data is being retrieved from server
   let errorMessage = null;
-  // (data === null) while waiting for API response
-  if (data === null || loading) errorMessage = 'Cargando información...';
-  // (!data) if API doesn't respond
-  else if (!data) errorMessage = 'Información no disponible';
-  // (data.length <= 0) if API response in not object
-  else if (data.length <= 0) errorMessage = 'Información no disponible';
+  // TODO: don't relay on data being null for a loading state
+  if (data === null || message === 'loading') {
+    errorMessage = 'Cargando información...';
+  } else if (!data || data.length <= 0 || Object.keys(data).length === 0 || message === 'no-data') {
+    errorMessage = 'Información no disponible';
+  }
   if (errorMessage) {
-    // TODO: ask Cesar to make this message nicer
     return (
       <div className="errorData">
         {errorMessage}
@@ -105,6 +107,18 @@ const GraphLoader = (props) => {
           onClickHandler={onClickGraphHandler}
         />
       );
+    case 'singleBullet':
+      return (
+        <SingleBulletGraph
+          data={data}
+          height={62}
+          colors={colors}
+          onClickHandler={onClickGraphHandler}
+          reverse={reverse}
+          labelXRight={labelXRight}
+          labelXLeft={labelXLeft}
+        />
+      );
     case 'Dots':
       return (
         <div className="graphcard pb">
@@ -198,8 +212,11 @@ GraphLoader.propTypes = {
     type: PropTypes.string,
     legendPosition: PropTypes.string,
   })),
-  loading: PropTypes.bool,
+  loading: PropTypes.string,
   selectedIndexValue: PropTypes.string,
+  reverse: PropTypes.bool,
+  labelXRight: PropTypes.string,
+  labelXLeft: PropTypes.string,
 };
 
 GraphLoader.defaultProps = {
@@ -215,8 +232,11 @@ GraphLoader.defaultProps = {
   padding: 0.25,
   onClickGraphHandler: () => {},
   markers: [],
-  loading: false,
+  message: null,
   selectedIndexValue: '',
+  reverse: false,
+  labelXRight: null,
+  labelXLeft: null,
 };
 
 export default GraphLoader;