Merge pull request #369 from NASA-IMPACT/develop

Release 1.3.0
NASA-IMPACT · Aug 4, 2020 · 5a3cb02 · 5a3cb02
2 parents df7e183 + d45e57d
commit 5a3cb02
Show file tree

Hide file tree

Showing 19 changed files with 285 additions and 59 deletions.
diff --git a/app/assets/scripts/components/common/bar-chart/chart.js b/app/assets/scripts/components/common/bar-chart/chart.js
@@ -222,10 +222,11 @@ class BarChart extends React.Component {
     const matrix = this.dataCanvas.node().getScreenCTM();
     if (!matrix) return;
 
+    const offsetY = window.scrollY;
     const translatedMatrix = matrix.translate(xPos, 0);
 
     const popoverWidth = 160;
-    const posY = translatedMatrix.f + height / 2;
+    const posY = translatedMatrix.f + offsetY + height / 2;
     const posX = translatedMatrix.e;
 
     const direction = posX + popoverWidth + 8 > matrix.e + width

diff --git a/app/assets/scripts/components/common/gradient-legend-chart/chart.js b/app/assets/scripts/components/common/gradient-legend-chart/chart.js
@@ -10,6 +10,7 @@ import knobLayer from './knob.layer';
 
 const ChartWrapper = styled.div`
   flex-grow: 1;
+  margin: 0 -4px;
 
   svg {
     display: block;

diff --git a/app/assets/scripts/components/common/layer.js b/app/assets/scripts/components/common/layer.js
@@ -20,21 +20,21 @@ const makeGradient = (stops) => {
   const steps = stops.map((s, i) => `${s} ${i * d}%`);
   return `linear-gradient(to right, ${steps.join(', ')})`;
 };
-const renderTitle = input => {
+
+const renderTitle = (input) => {
   const content = input.split('\u2082');
 
-  return (
-    <>
-      {
-        content.reduce((accum, el, ind) => (
-          ind < content.length - 1 ? [...accum, el, <sub key={el}>2</sub>] : [...accum, el]
-        ), [])
-      }
-    </>
+  return content.reduce(
+    (accum, el, ind) =>
+      ind < content.length - 1
+        ? [...accum, el, <sub key={el}>2</sub>]
+        : [...accum, el],
+    []
   );
 };
 
-const printLegendVal = (val) => typeof val === 'number' ? formatThousands(val, { shorten: true }) : val;
+const printLegendVal = (val) =>
+  typeof val === 'number' ? formatThousands(val, { shorten: true }) : val;
 
 const LayerSelf = styled(AccordionFold)`
   position: relative;
@@ -100,28 +100,67 @@ const LayerToolbar = styled.div`
 const LayerLegend = styled.div`
   grid-row: 2;
   grid-column: 1 / span 2;
+`;
+
+const LegendList = styled.dl`
+  display: grid;
+  grid-gap: 0 ${glsp(1 / 8)};
+  grid-auto-columns: minmax(1rem, 1fr);
+  grid-auto-flow: column;
+
+  dt {
+    grid-row: 1;
+  }
 
   dd {
     ${headingAlt()}
     font-size: 0.75rem;
     line-height: 1rem;
+    grid-row: 2;
     display: flex;
 
+    /* stylelint-disable-next-line no-descending-specificity */
+    > * {
+      width: 8rem;
+
+      /* stylelint-disable-next-line no-descending-specificity */
+      > * {
+        ${truncated()}
+        display: block;
+      }
+
+      &:last-child:not(:first-child) {
+        text-align: right;
+      }
+    }
+
+    &:last-of-type:not(:first-of-type) {
+      justify-content: flex-end;
+      text-align: right;
+    }
+
+    &:not(:first-of-type):not(:last-of-type) {
+      ${visuallyHidden()}
+    }
+
     i {
       margin: 0 auto;
       opacity: 0;
     }
   }
 `;
 
-const LayerLegendGradientTrack = styled.dt`
+const LegendSwatch = styled.span`
   display: block;
   font-size: 0;
   height: 0.5rem;
   border-radius: ${themeVal('shape.rounded')};
-  background: ${({ stops }) => makeGradient(stops)};
+  background: ${({ stops }) => typeof stops === 'string'
+    ? stops
+    : makeGradient(stops)};
   margin: 0 0 ${glsp(1 / 8)} 0;
   box-shadow: inset 0 0 0 1px ${themeVal('color.baseAlphaB')};
+  cursor: help;
 `;
 
 const LayerLegendTitle = styled.h2`
@@ -138,7 +177,7 @@ const LayerBodyInner = styled(Prose)`
   backdrop-filter: saturate(48%);
   padding: ${glsp()};
 
-  /* stylelint-disable-next-line */
+  /* stylelint-disable-next-line no-descending-specificity */
   > * {
     margin-bottom: ${glsp(0.75)};
   }
@@ -155,22 +194,47 @@ class Layer extends React.Component {
   }
 
   renderLegend () {
-    const {
-      dataOrder,
-      legend,
-      knobPos,
-      onLegendKnobChange,
-      id
-    } = this.props;
+    const { dataOrder, legend, knobPos, onLegendKnobChange, id } = this.props;
 
     if (!legend) return null;
 
+    // The categorical legend uses stops differently than the others.
+    if (legend.type === 'categorical') {
+      return (
+        <LayerLegend>
+          <LayerLegendTitle>Legend</LayerLegendTitle>
+          <LegendList>
+            {legend.stops.map(stop => (
+              <React.Fragment key={stop.color}>
+                <dt>
+                  <LegendSwatch stops={stop.color} data-tip={stop.label}>
+                    {stop.color}
+                  </LegendSwatch>
+                </dt>
+                <dd>
+                  {/*
+                    The 2 spans are needed so that the text can be correctly
+                    truncated. The dd element is part of a grid and has an
+                    implicit width. The first span overflows the dd, setting
+                    the final width and the second span truncates the text.
+                  */}
+                  <span>
+                    <span>{stop.label}</span>
+                  </span>
+                </dd>
+              </React.Fragment>
+            ))}
+          </LegendList>
+        </LayerLegend>
+      );
+    }
+
     let defaultStops;
     // Two default styles:
     // - highlight-high - where a high value needs to be highlighted (high % of 65+)
     // - highlight-low - where low values are highlighted (m2 living area per person)
     switch (dataOrder) {
-      case ('highlight-low'):
+      case 'highlight-low':
         defaultStops = [
           'hsla(105, 91%, 67%, 0.69)',
           'hsla(173, 75%, 66%, 0.69)',
@@ -189,15 +253,14 @@ class Layer extends React.Component {
         ];
     }
 
-    const stops = legend.stops && legend.stops !== 'default'
-      ? legend.stops
-      : defaultStops;
+    const stops =
+      legend.stops && legend.stops !== 'default' ? legend.stops : defaultStops;
 
     if (legend.type === 'gradient-adjustable') {
       return (
         <LayerLegend>
           <LayerLegendTitle>Legend</LayerLegendTitle>
-          <dl>
+          <LegendList>
             <dt>
               <GradientChart
                 onAction={(a, p) => {
@@ -213,22 +276,26 @@ class Layer extends React.Component {
               <i> – </i>
               <span>{printLegendVal(legend.max)}</span>
             </dd>
-          </dl>
+          </LegendList>
         </LayerLegend>
       );
     }
 
     return (
       <LayerLegend>
         <LayerLegendTitle>Legend</LayerLegendTitle>
-        <dl>
-          <LayerLegendGradientTrack stops={stops}>Gradient</LayerLegendGradientTrack>
+        <LegendList>
+          <dt>
+            <LegendSwatch stops={stops}>
+              {stops[0]} to {stops[stops.length - 1]}
+            </LegendSwatch>
+          </dt>
           <dd>
             <span>{printLegendVal(legend.min)}</span>
             <i> – </i>
             <span>{printLegendVal(legend.max)}</span>
           </dd>
-        </dl>
+        </LegendList>
       </LayerLegend>
     );
   }

diff --git a/app/assets/scripts/components/common/layers/index.js b/app/assets/scripts/components/common/layers/index.js
@@ -9,6 +9,7 @@ import nightlightsHd from './layer-nightlights-hd';
 import detectionShip from './layer-detection-ship';
 import waterChlorophyll from './layer-water-chlorophyll';
 import waterSpm from './layer-water-spm';
+import agriculture from './layer-agriculture';
 
 const layers = [
   no2,
@@ -19,19 +20,20 @@ const layers = [
   nightlightsHd,
   detectionShip,
   waterChlorophyll,
-  waterSpm
+  waterSpm,
+  agriculture
 ];
 
 export default layers;
 
 const layersBySpotlight = {
-  be: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs'],
-  du: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs'],
-  gh: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs'],
-  la: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs', 'detection-ship'],
-  sf: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs', 'detection-ship', 'water-chlorophyll', 'water-spm'],
-  tk: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs'],
-  ny: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs', 'detection-ship', 'water-chlorophyll', 'water-spm']
+  be: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs', 'agriculture'],
+  du: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs', 'agriculture'],
+  gh: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs', 'agriculture'],
+  la: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs', 'agriculture', 'detection-ship'],
+  sf: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs', 'agriculture', 'detection-ship', 'water-chlorophyll', 'water-spm'],
+  tk: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs', 'agriculture'],
+  ny: ['no2', 'co2', 'co2-diff', 'nightlights-hd', 'nightlights-viirs', 'agriculture', 'detection-ship', 'water-chlorophyll', 'water-spm']
 };
 
 const layerOverridesBySpotlight = {
@@ -134,7 +136,7 @@ export function getSpotlightLayers (spotlightId) {
 }
 
 export function getGlobalLayers () {
-  const layersToUse = ['no2', 'co2', 'co2-diff', 'gibs-population'];
+  const layersToUse = ['no2', 'co2', 'co2-diff', 'gibs-population', 'agriculture'];
   return layers.filter((l) => layersToUse.includes(l.id));
 }
 

diff --git a/app/assets/scripts/components/common/layers/layer-agriculture.js b/app/assets/scripts/components/common/layers/layer-agriculture.js
@@ -0,0 +1,35 @@
+import config from '../../../config';
+
+import { indicatorGroupColors } from '../../../styles/theme/theme.js';
+
+export default {
+  id: 'agriculture',
+  name: 'Agriculture',
+  type: 'raster-timeseries',
+  timeUnit: 'day',
+  domain: [
+    '2020-01-28', '2020-02-28', '2020-03-28', '2020-04-28', '2020-05-28', '2020-06-28'
+  ],
+  source: {
+    type: 'raster',
+    tiles: [
+      `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/agriculture/CropMonitor_{date}.tif&resampling_method=nearest&bidx=1&color_map=custom_cropmonitor`
+    ]
+  },
+  exclusiveWith: ['no2', 'co2', 'co2-diff', 'gibs-population', 'car-count', 'nightlights-viirs', 'nightlights-hd', 'detection-ship', 'detection-multi', 'water-chlorophyll', 'water-spm'],
+  enabled: false,
+  swatch: indicatorGroupColors.economic,
+  legend: {
+    type: 'categorical',
+    stops: [
+      { color: '#3C8EC4', label: 'Exceptional' },
+      { color: '#6ECC51', label: 'Favourable' },
+      { color: '#F3EF4F', label: 'Watch' },
+      { color: '#DF6335', label: 'Poor' },
+      { color: '#7E170E', label: 'Failure' },
+      { color: '#777879', label: 'Out of season' },
+      { color: '#794416', label: 'No data' }
+    ]
+  },
+  info: null
+};
diff --git a/app/assets/scripts/components/common/layers/layer-co2-diff.js b/app/assets/scripts/components/common/layers/layer-co2-diff.js
@@ -9,15 +9,15 @@ export default {
   timeUnit: 'day',
   domain: [
     '2020-01-01',
-    '2020-04-16'
+    '2020-05-17'
   ],
   source: {
     type: 'raster',
     tiles: [
       `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2/xco2_15day_diff.{date}.tif&resampling_method=bilinear&bidx=1&rescale=-0.000001%2C0.000001&color_map=rdbu_r`
     ]
   },
-  exclusiveWith: ['no2', 'co2', 'gibs-population', 'car-count', 'nightlights-viirs', 'nightlights-hd', 'detection-ship', 'detection-multi', 'water-chlorophyll', 'water-spm'],
+  exclusiveWith: ['agriculture', 'no2', 'co2', 'gibs-population', 'car-count', 'nightlights-viirs', 'nightlights-hd', 'detection-ship', 'detection-multi', 'water-chlorophyll', 'water-spm'],
   enabled: false,
   swatch: indicatorGroupColors['greenhouse-gas'],
   legend: {

diff --git a/app/assets/scripts/components/common/layers/layer-co2.js b/app/assets/scripts/components/common/layers/layer-co2.js
@@ -11,7 +11,7 @@ export default {
   timeUnit: 'day',
   domain: [
     '2020-01-01',
-    '2020-04-16'
+    '2020-05-17'
   ],
   source: {
     type: 'raster',
@@ -20,7 +20,7 @@ export default {
 
     ]
   },
-  exclusiveWith: ['no2', 'co2-diff', 'gibs-population', 'car-count', 'nightlights-viirs', 'nightlights-hd', 'detection-ship', 'detection-multi', 'water-chlorophyll', 'water-spm'],
+  exclusiveWith: ['agriculture', 'no2', 'co2-diff', 'gibs-population', 'car-count', 'nightlights-viirs', 'nightlights-hd', 'detection-ship', 'detection-multi', 'water-chlorophyll', 'water-spm'],
   enabled: false,
   compare: {
     enabled: true,

diff --git a/app/assets/scripts/components/common/layers/layer-detection-ship.js b/app/assets/scripts/components/common/layers/layer-detection-ship.js
@@ -20,7 +20,7 @@ export default {
       ]
     }
   },
-  exclusiveWith: ['no2', 'co2-diff', 'co2', 'gibs-population', 'car-count', 'nightlights-viirs', 'nightlights-hd', 'detection-multi', 'water-chlorophyll', 'water-spm'],
+  exclusiveWith: ['agriculture', 'no2', 'co2-diff', 'co2', 'gibs-population', 'car-count', 'nightlights-viirs', 'nightlights-hd', 'detection-multi', 'water-chlorophyll', 'water-spm'],
   enabled: false,
   swatch: indicatorGroupColors.economic,
   timeUnit: 'day',

diff --git a/app/assets/scripts/components/common/layers/layer-nightlights-hd.js b/app/assets/scripts/components/common/layers/layer-nightlights-hd.js
@@ -8,15 +8,15 @@ export default {
   timeUnit: 'month',
   domain: [
     '2020-01-01',
-    '2020-05-01'
+    '2020-07-01'
   ],
   source: {
     type: 'raster',
     tiles: [
       `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/BMHD_30M_MONTHLY/BMHD_VNP46A2_{spotlightId}_{date}_cog.tif&resampling_method=bilinear&bidx=1%2C2%2C3`
     ]
   },
-  exclusiveWith: ['no2', 'co2-diff', 'co2', 'gibs-population', 'car-count', 'nightlights-viirs', 'detection-ship', 'detection-multi', 'water-chlorophyll', 'water-spm'],
+  exclusiveWith: ['agriculture', 'no2', 'co2-diff', 'co2', 'gibs-population', 'car-count', 'nightlights-viirs', 'detection-ship', 'detection-multi', 'water-chlorophyll', 'water-spm'],
   swatch: indicatorGroupColors.economic,
   legend: {
     type: 'gradient',