Merge pull request #187 from carbonplan/freeman-lab/stripe-2021

add new entries for stripe sprint 2021

.isort.cfg

@@ -1,2 +1,2 @@
 [settings]
-known_third_party = click,gspread,msft2021,oauth2client,pandas,strp2020,utils
+known_third_party = click,gspread,msft2021,oauth2client,pandas,strp2020,strp2021,utils

components/main.js

@@ -11,11 +11,13 @@ const initFilters = {
   soil: true,
   biomass: true,
   ocean: true,
-  STRP2020: true,
-  MSFT2021: true,
+  stripe: true,
+  microsoft: true,
   avoided: true,
   removal: true,
   group: false,
+  2020: true,
+  2021: true,
   search: '',
   rating: 3,
 }
@@ -25,6 +27,10 @@ const initBounds = {
   permanence: [],
 }
 
+const near = (a, b) => {
+  return Math.abs(a - b) < 0.000001
+}
+
 const Main = ({ projects, metrics, settingsExpanded }) => {
   const [filters, setFilters] = useState(initFilters)
   const [filtered, setFiltered] = useState({ count: 0, init: false })
@@ -49,9 +55,10 @@ const Main = ({ projects, metrics, settingsExpanded }) => {
   function checkBounds(value, bounds, min, max) {
     if (bounds.length == 0) return true
     return (
-      (value > bounds[0] && value < bounds[1]) ||
-      (bounds[1] === max && value >= max) ||
-      (bounds[0] === min && value <= min)
+      ((near(value, bounds[0]) || value > bounds[0]) &&
+        (near(value, bounds[1]) || value < bounds[1])) ||
+      ((near(max, bounds[1]) || bounds[1] > max) && value >= max) ||
+      ((near(min, bounds[0]) || bounds[0] < min) && value <= min)
     )
   }
 
@@ -66,9 +73,11 @@ const Main = ({ projects, metrics, settingsExpanded }) => {
       (filters.biomass && d.tags.length > 0 && d.tags[0] == 'biomass') ||
       (filters.ocean && d.tags.length > 0 && d.tags[0] == 'ocean')
     const inSource =
-      (filters.STRP2020 &&
-        d.source.name == 'Stripe 2020 Negative Emissions Purchase') ||
-      (filters.MSFT2021 && d.source.name == 'Microsoft 2021 CDR RFP')
+      (filters.stripe && d.source.id.includes('STRP')) ||
+      (filters.microsoft && d.source.id.includes('MSFT'))
+    const inYear =
+      (filters['2020'] && d.source.date.includes('2020')) ||
+      (filters['2021'] && d.source.date.includes('2021'))
     const inMechanism =
       (filters.removal && d.metrics[0].value == 0) ||
       (filters.avoided && d.metrics[0].value == 1) ||
@@ -86,7 +95,7 @@ const Main = ({ projects, metrics, settingsExpanded }) => {
         (d.tags.length > 1 && d.tags[1].toLowerCase().includes(searchTerm)))
     const isValidated = d.rating >= filters.rating
     const inFilter =
-      inTags && inSource && inBounds && inMechanism && isValidated
+      inTags && inSource && inYear && inBounds && inMechanism && isValidated
     if (filters.search.length > 0 && inSearch && inFilter) return true
     if (filters.search.length == 0 && inFilter) return true
     else return false

components/methods/intro.js

@@ -38,10 +38,14 @@ const Intro = ({ setSection }) => {
         <InternalLink href='/research/stripe-2020-insights'>
           Stripe in 2020
         </InternalLink>{' '}
-        and to{' '}
+        ,{' '}
         <InternalLink href='/research/microsoft-2021-insights'>
           Microsoft in 2021
         </InternalLink>
+        , or{' '}
+        <InternalLink href='/research/stripe-2021-insights'>
+          Stripe in 2021
+        </InternalLink>
         . If you have questions or want to get in touch. check out the{' '}
         <Link
           sx={{

components/methods/table.js

@@ -46,7 +46,7 @@ const Table = ({ one, two, three, type, children }) => {
     >
       <TableRow final={type == 'icons'}>
         <Column start={[starts[0]]} width={[widths[0]]}>
-          {type == 'icons' && <Check sx={{ width: 48, height: 48 }} />}
+          {type == 'icons' && <Check sx={{ width: 36, height: 36 }} />}
           {type == 'squares' && (
             <Box sx={{ mt: ['9px'] }}>
               <Squares data={2} />

components/projects/report/graphics/rating.js

@@ -5,17 +5,16 @@ const { Check } = Icons
 
 const Rating = ({ sx, value }) => {
   return (
-    <Box sx={{ ml: ['-5px'], mt: ['6px'] }}>
+    <Box sx={{ ml: ['-5px'], mt: ['5px'] }}>
       {[0, 1, 2, 3, 4].map((d, i) => (
         <Box key={'rating-' + i} sx={{ display: 'inline-block' }}>
           <Check
             sx={{
               position: 'relative',
               cursor: 'pointer',
-              width: '21px',
-              ml: ['-1px'],
+              width: '28px',
+              ml: ['0px'],
               mr: ['0px'],
-              strokeWidth: 2.25,
               opacity: d < value ? 1 : 0.3,
               zIndex: -1,
               ...sx,

components/projects/report/graphics/scales.js

@@ -14,7 +14,7 @@ module.exports = {
     min: 10,
     max: 1000,
   },
-  cost: {
+  price: {
     type: 'log',
     min: 3,
     max: 3000,

components/projects/report/index.js

@@ -18,7 +18,7 @@ const showMetrics = [
   'volume',
   'negativity',
   'permanence',
-  'cost',
+  'price',
   'additionality',
   'specificity',
 ]
@@ -39,19 +39,22 @@ const Report = ({ data, setHighlighted, tooltips, embed }) => {
     metrics,
     location,
     rating,
+    notes,
   } = data
 
   metrics = showMetrics.map((metric) => {
     return metrics.filter((m) => m.name == metric)[0]
   })
 
-  metrics.push({
-    name: 'rating',
-    value: rating,
-    units: '',
-    notes: '',
-    comment: '',
-  })
+  metrics = [
+    {
+      name: 'rating',
+      value: rating,
+      units: '',
+      notes: '',
+      comment: '',
+    },
+  ].concat(metrics)
 
   const ml = embed ? [0, 0, 0] : [0, 0, '24px', '36px']
   const pl = embed ? [0, 0, 0] : [0, 0, '24px', '36px']
@@ -206,8 +209,13 @@ const Report = ({ data, setHighlighted, tooltips, embed }) => {
           color: 'secondary',
         }}
       >
-        {id.includes('STRP') && 'Stripe 2020'}
-        {id.includes('MSFT') && 'Microsoft 2021'}
+        {id.includes('STRP') & (parseInt(id.split('STRP')[1]) <= 24)
+          ? 'Stripe 2020'
+          : ''}
+        {id.includes('STRP') & (parseInt(id.split('STRP')[1]) > 24)
+          ? 'Stripe 2021'
+          : ''}
+        {id.includes('MSFT') ? 'Microsoft 2021' : ''}
         <Box as='span' sx={{ mx: [2] }}>
           /
         </Box>
@@ -241,6 +249,17 @@ const Report = ({ data, setHighlighted, tooltips, embed }) => {
                 cursor: 'default',
               }}
             >
+              {!(notes === '') && (
+                <Box
+                  sx={{
+                    color: 'secondary',
+                    mt: [2],
+                    mb: [3],
+                  }}
+                >
+                  Note: {notes}
+                </Box>
+              )}
               <Box sx={{ display: 'inline-block', color: 'secondary' }}>
                 <Box as='span' sx={{ mr: [2] }}>
                   <Link

components/projects/report/metric/desktop.js

@@ -27,12 +27,12 @@ const sx = {
     fontFamily: 'mono',
     fontSize: [3],
     textAlign: 'right',
-    mt: ['5px'],
+    mt: ['6px'],
   },
   label: {
     fontFamily: 'mono',
     fontSize: [2, 2, 2, 3],
-    mt: ['6px'],
+    mt: ['8px', '8px', '8px', '6px'],
     textTransform: 'capitalize',
   },
   units: {
@@ -70,15 +70,15 @@ const MetricDesktop = ({
       <Box
         onClick={hasDetails ? toggle : (e) => e.stopPropagation()}
         sx={{
-          cursor: hasDetails ? 'pointer' : 'inherit',
+          cursor: hasDetails ? 'pointer' : 'initial',
           pointerEvents: 'all',
           '&:hover > #grid > #container > #expander': {
             fill: 'primary',
             stroke: 'primary',
           },
-          pt: [2],
+          pt: [1],
           pb: ['6px'],
-          pl: embed ? [2, 2, 2] : [0, 0, '24px'],
+          pl: embed ? [2, 2, 2] : [0, 0, '24px', '38px'],
         }}
       >
         <Grid id='grid' gap={['16px']} columns={['55px 95px 1fr 15px 30px']}>
@@ -112,8 +112,8 @@ const MetricDesktop = ({
                 scale={scales['negativity']}
               ></Bar>
             )}
-            {metric.name == 'cost' && (
-              <Bar tag={tag} data={metric.value} scale={scales['cost']}></Bar>
+            {metric.name == 'price' && (
+              <Bar tag={tag} data={metric.value} scale={scales['price']}></Bar>
             )}
             {metric.name == 'additionality' && (
               <Box sx={{ mt: '13px' }}>
@@ -126,7 +126,7 @@ const MetricDesktop = ({
               </Box>
             )}
             {metric.name == 'rating' && (
-              <Box sx={{ mb: '6px' }}>
+              <Box sx={{ width: 'calc(100% + 40px)', ml: '-40px', mb: '0px' }}>
                 <Rating
                   sx={{ color: theme.tags[tag] }}
                   value={metric.value}
@@ -161,7 +161,8 @@ const MetricDesktop = ({
             )}
           </Text>
           <Text sx={{ mt: ['3px'] }}>
-            {metric.rating === 1 && (
+            {(metric.rating === 1 ||
+              (metric.name === 'additionality' && metric.value === 2)) && (
               <Check sx={{ width: '28px', color: theme.tags[tag] }} />
             )}
             {metric.rating === 0 && <Box />}
@@ -185,7 +186,7 @@ const MetricDesktop = ({
           ml={'0px'}
           sx={{
             cursor: 'text',
-            pl: embed ? ['190px'] : ['182px', '182px', '206px'],
+            pl: embed ? ['190px'] : ['182px', '182px', '206px', '220px'],
             pr: ['30px'],
             mt: ['-4px'],
             pb: ['10px'],
@@ -202,7 +203,7 @@ const MetricDesktop = ({
             sx={{
               pb: [1],
               cursor: 'text',
-              pl: embed ? [2, 2, 2] : [0, 0, '24px'],
+              pl: embed ? [2, 2, 2] : [0, 0, '24px', '38px'],
             }}
             onClick={(e) => e.stopPropagation()}
           >
@@ -272,7 +273,7 @@ const MetricDesktop = ({
       </AnimateHeight>
       <Divider
         sx={{
-          ml: embed ? [0, 0, 0] : [0, 0, '24px'],
+          ml: embed ? [0, 0, 0] : [0, 0, '24px', '38px'],
           mr: [0],
           mt: [0],
           mb: [0],

components/projects/report/metric/index.js

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { Box } from 'theme-ui'
+import { format as _format } from 'd3-format'
 import { useMeasure } from 'react-use'
 import MetricMobile from './mobile'
 import MetricDesktop from './desktop'
@@ -37,8 +38,13 @@ const Metric = ({ metric, tag, tooltips, embed }) => {
       if (key == 'mechanism' && value == 1) return 'AVD'
     }
     if (key == 'mechanism' && value == 2) return 'BOTH'
-    else if (key == 'cost') return '$' + parseFloat(value).toFixed(0)
-    else if (key == 'negativity') return parseFloat(value).toFixed(2)
+    else if (key == 'price') {
+      if (parseFloat(value) < 1000) {
+        return '$' + _format('.3~s')(parseFloat(value).toFixed(0))
+      } else {
+        return '$' + _format('.2~s')(parseFloat(value).toFixed(0))
+      }
+    } else if (key == 'negativity') return parseFloat(value).toFixed(2)
     else if (key == 'volume') {
       if (value < 1000) return value
       else if (value >= 1000 && value < 1000000)

components/projects/report/metric/mobile.js

@@ -84,7 +84,8 @@ const MetricMobile = ({
               </Text>
             )}
           </Text>
-          {metric.rating === 1 && (
+          {(metric.rating === 1 ||
+            (metric.name === 'additionality' && metric.value === 2)) && (
             <Check
               sx={{
                 position: 'relative',
@@ -96,7 +97,10 @@ const MetricMobile = ({
               }}
             />
           )}
-          {!(metric.rating === 1) && <Box />}
+          {!(
+            metric.rating === 1 ||
+            (metric.name === 'additionality' && metric.value === 2)
+          ) && <Box />}
           {hasDetails && (
             <Box id='container' sx={{ mt: ['10px'], ml: ['-5px'] }}>
               <Expander