Add new commentary

Author: katamartin

commentary/icvcm-landfill-additionality/components/annotated-project.js

@@ -0,0 +1,83 @@
+import { Box, Flex } from 'theme-ui'
+import {
+  Axis,
+  Chart,
+  Grid,
+  Plot,
+  TickLabels,
+  Ticks,
+  Label,
+} from '@carbonplan/charts'
+
+import Project from './project'
+
+const YEARS = [
+  2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022,
+]
+
+const Summary = () => {
+  return (
+    <Box sx={{ height: 200 }}>
+      <Chart x={[2010, 2023]} y={[10, 0]} padding={{ top: 20, left: 0 }}>
+        <Grid vertical values={YEARS} />
+        <Axis bottom />
+        <Ticks bottom />
+        <TickLabels bottom />
+        <Grid
+          vertical
+          values={[2012]}
+          sx={{ borderColor: 'primary', borderStyle: 'dashed' }}
+        />
+        <Grid
+          vertical
+          values={[2022]}
+          sx={{ borderColor: 'primary', borderStyle: 'dashed' }}
+        />
+
+        <Plot>
+          <Project years={YEARS} project={'CAR516'} y={3} />
+        </Plot>
+
+        <Label x={2012} y={0} sx={{ ml: 2, maxWidth: '40%', color: 'primary' }}>
+          <Box as='span' sx={{ color: 'green' }}>
+            Crediting stops,
+          </Box>{' '}
+          <Box as='span' sx={{ color: 'blue' }}>
+            gas collection continues
+          </Box>{' '}
+        </Label>
+
+        <Label x={2022} y={0} align='right' sx={{ mr: 2, color: 'primary' }}>
+          <Flex sx={{ justifyContent: 'flex-end' }}>
+            <Box sx={{ maxWidth: ['80%', 'inherit', 'inherit', 'inherit'] }}>
+              <Box as='span' sx={{ color: 'yellow' }}>
+                non-additional <br />
+                crediting begins
+              </Box>{' '}
+            </Box>
+          </Flex>
+        </Label>
+
+        <Label
+          x={2010}
+          y={3}
+          sx={{ color: 'background', ml: 2 }}
+          height={2}
+          verticalAlign='middle'
+        >
+          Crediting
+        </Label>
+        <Label
+          x={2010}
+          y={6}
+          sx={{ color: 'background', ml: 2 }}
+          height={2}
+          verticalAlign='middle'
+        >
+          Gas collection operation
+        </Label>
+      </Chart>
+    </Box>
+  )
+}
+export default Summary

commentary/icvcm-landfill-additionality/components/data.json

@@ -0,0 +1,46 @@
+{
+  "CAR466": {
+    "credit_data": [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2022],
+    "epa_data": [
+      2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
+      2022
+    ]
+  },
+  "CAR473": {
+    "credit_data": [2010, 2011, 2018, 2019, 2020, 2021, 2022],
+    "epa_data": [
+      2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
+      2022
+    ]
+  },
+  "CAR512": {
+    "credit_data": [
+      2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2021, 2022, 2023
+    ],
+    "epa_data": [
+      2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
+      2022
+    ]
+  },
+  "CAR514": {
+    "credit_data": [2010, 2011, 2012, 2022],
+    "epa_data": [
+      2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
+      2022
+    ]
+  },
+  "CAR515": {
+    "credit_data": [2010, 2011, 2022],
+    "epa_data": [
+      2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
+      2022
+    ]
+  },
+  "CAR516": {
+    "credit_data": [2010, 2011, 2022],
+    "epa_data": [
+      2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021,
+      2022
+    ]
+  }
+}

commentary/icvcm-landfill-additionality/components/project.js

@@ -0,0 +1,67 @@
+import { useMemo } from 'react'
+import { Rect } from '@carbonplan/charts'
+
+import data from './data.json'
+
+const Timeline = ({ activeYears, color, y, years }) => {
+  const yearData = useMemo(() => {
+    let hasInactivated
+    const result = years.reduce((rects, year) => {
+      const currentRect = rects[rects.length - 1]
+      const active = activeYears.includes(year)
+      let status = 'active'
+      let fill = color
+      if (!active) {
+        fill = 'none'
+        status = 'inactive'
+      } else if (hasInactivated) {
+        fill = 'yellow'
+        status = 'reactivated'
+      }
+
+      if (!currentRect || currentRect.end || currentRect.status !== status) {
+        rects.push({
+          start: year,
+          status,
+          fill,
+        })
+        if (currentRect && currentRect.status !== status) {
+          currentRect.end = year - 1
+        }
+      }
+      hasInactivated ||= !active
+      return rects
+    }, [])
+    result[result.length - 1].end ||= years[years.length - 1]
+    return result
+  }, [activeYears, color, years])
+
+  return (
+    <g>
+      {yearData.map(({ start, end, fill }) => (
+        <Rect key={start} x={[start, end + 1]} y={[y, y + 2]} color={fill} />
+      ))}
+    </g>
+  )
+}
+
+const Project = ({ project, y, years }) => {
+  return (
+    <>
+      <Timeline
+        years={years}
+        color='green'
+        activeYears={data[project].credit_data}
+        y={y}
+      />
+      <Timeline
+        years={years}
+        color='blue'
+        activeYears={data[project].epa_data}
+        y={y + 3}
+      />
+    </>
+  )
+}
+
+export default Project

commentary/icvcm-landfill-additionality/components/summary.js

@@ -0,0 +1,56 @@
+import { Box } from 'theme-ui'
+import {
+  Axis,
+  Chart,
+  Grid,
+  Plot,
+  TickLabels,
+  Ticks,
+  Label,
+} from '@carbonplan/charts'
+
+import Project from './project'
+import data from './data.json'
+const YEARS = [
+  2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022,
+]
+
+const Summary = () => {
+  return (
+    <Box sx={{ height: 400 }}>
+      <Chart x={[2010, 2023]} y={[70, 0]} padding={{ left: 0 }}>
+        <Grid vertical values={YEARS} />
+        <Axis bottom />
+        <Ticks bottom />
+        <TickLabels bottom />
+        <Plot>
+          {Object.keys(data).map((project, i) => (
+            <g key={project}>
+              <Project
+                years={YEARS}
+                key={project}
+                project={project}
+                y={(i + 0.24) * 12}
+              />
+            </g>
+          ))}
+        </Plot>
+        {Object.keys(data).map((project, i) => (
+          <Label
+            key={project}
+            x={0}
+            y={(i + 0.24) * 12 - 2.75}
+            sx={{
+              mr: [4, 5, 5, 6],
+              color: 'primary',
+              mt: '-5px',
+            }}
+          >
+            {project}
+          </Label>
+        ))}
+      </Chart>
+    </Box>
+  )
+}
+export default Summary