Merge pull request #206 from NASA-IMPACT/add/201-adjustable-co2-scale

Make CO2 type gradient-adjustable
NASA-IMPACT · Jun 18, 2020 · 1d091a3 · 1d091a3
2 parents 7a75aff + 65f7c66
commit 1d091a3
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/app/assets/scripts/components/common/gradient-legend-chart/chart.js b/app/assets/scripts/components/common/gradient-legend-chart/chart.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import T from 'prop-types';
 import * as d3 from 'd3';
 
 import SizeAwareElement from '../../common/size-aware-element';
@@ -113,6 +114,7 @@ class DataBrowserChart extends React.Component {
       <SizeAwareElement
         element={ChartWrapper}
         trackSize={this.trackSize}
+        id={this.props.id}
         ref={el => {
           this.container = el;
         }}
@@ -123,6 +125,7 @@ class DataBrowserChart extends React.Component {
 }
 
 DataBrowserChart.propTypes = {
+  id: T.string
 };
 
 export default DataBrowserChart;
diff --git a/app/assets/scripts/components/common/gradient-legend-chart/track.layer.js b/app/assets/scripts/components/common/gradient-legend-chart/track.layer.js
@@ -4,7 +4,7 @@ import { css } from 'styled-components';
 const styles = props => css`
   .track {
     stroke-width: ${({ trackSize }) => trackSize}px;
-    stroke: url(#trackGradient);
+    stroke: ${({ id }) => `url(#trackGradient-${id})`};
     stroke-linecap: round;
   }
 `;
@@ -19,7 +19,7 @@ export default {
 
     ctx.svg.select('defs')
       .append('linearGradient')
-      .attr('id', 'trackGradient')
+      .attr('id', `trackGradient-${ctx.props.id}`)
       .attr('gradientUnits', 'userSpaceOnUse');
   },
 
@@ -45,7 +45,7 @@ export default {
       .domain([0, 1])
       .range([Math.max(0, midPointDiff), Math.min(1, 1 + midPointDiff)]);
 
-    const trackGradient = ctx.svg.select('#trackGradient');
+    const trackGradient = ctx.svg.select(`#trackGradient-${ctx.props.id}`);
 
     // Set the gradient size so it matched the element is being used on.
     // Used in conjunction with gradientUnits='userSpaceOnUse'

diff --git a/app/assets/scripts/components/common/layer.js b/app/assets/scripts/components/common/layer.js
@@ -142,7 +142,8 @@ class Layer extends React.Component {
       dataOrder,
       legend,
       knobPos,
-      onLegendKnobChange
+      onLegendKnobChange,
+      id
     } = this.props;
 
     if (!legend) return null;
@@ -187,6 +188,7 @@ class Layer extends React.Component {
                 }}
                 stops={stops}
                 knobPos={knobPos !== undefined ? knobPos : 50}
+                id={id}
               />
             </dt>
             <dd>

diff --git a/app/assets/scripts/components/common/layers/layer-co2.js b/app/assets/scripts/components/common/layers/layer-co2.js
@@ -13,7 +13,8 @@ export default {
   source: {
     type: 'raster',
     tiles: [
-      `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2/xco2_15day_mean.{date}.tif&resampling_method=bilinear&bidx=1&rescale=0.0004%2C0.00042`
+      `${config.api}/{z}/{x}/{y}@1x?url=s3://covid-eo-data/xco2/xco2_15day_mean.{date}.tif&resampling_method=bilinear&bidx=1&rescale=0.0004%2C0.00042&color_map=reds&color_formula=gamma r {gamma}`
+
     ]
   },
   exclusiveWith: ['no2', 'co2-diff', 'gibs-population', 'car-count', 'nightlights-viirs', 'nightlights-hd', 'detection-ship', 'detection-multi', 'water-chlorophyll', 'water-spm'],
@@ -23,12 +24,12 @@ export default {
     name: 'Grey'
   },
   legend: {
-    type: 'gradient',
+    type: 'gradient-adjustable',
     min: 'less',
     max: 'more',
     stops: [
-      '#BDBDBD',
-      '#7E7E7E'
+      '#FFFFFF',
+      '#FF0000'
     ]
   },
   info: null