@aclymatepackages/modules 1.0.25 → 1.0.26

package/dist/components/EmissionsChart.js

@@ -2,27 +2,31 @@
 
 require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 require("core-js/modules/es.array.reduce.js");
-require("core-js/modules/es.object.from-entries.js");
 require("core-js/modules/web.dom-collections.iterator.js");
-var _react = _interopRequireDefault(require("react"));
+require("core-js/modules/es.object.from-entries.js");
+var _react = _interopRequireWildcard(require("react"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
-var _dayOfYear = _interopRequireDefault(require("dayjs/plugin/dayOfYear"));
 var _recharts = require("recharts");
 var _material = require("@mui/material");
 var _formatters = require("@aclymatepackages/formatters");
 var _otherHelpers = require("@aclymatepackages/other-helpers");
-var _EmissionsCustomTooltip = _interopRequireDefault(require("./EmissionsCustomTooltip"));
-var _useChartWarningLabels = _interopRequireDefault(require("./useChartWarningLabels"));
+var _converters = require("@aclymatepackages/converters");
 var _chartHelpers = require("@aclymatepackages/chart-helpers");
 var _subcategories = require("@aclymatepackages/subcategories");
+var _EmissionsCustomTooltip = _interopRequireDefault(require("./EmissionsCustomTooltip"));
+var _useChartWarningLabels = _interopRequireDefault(require("./useChartWarningLabels"));
 const _excluded = ["totalEmissionsSumTons"],
-  _excluded2 = ["subcategory", "color"];
+  _excluded2 = ["viewBox", "labels", "setLabels", "label"],
+  _excluded3 = ["subcategory", "color"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -31,7 +35,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-_dayjs.default.extend(_dayOfYear.default);
 const findObjectValuesSum = object => Object.values(object).reduce((sum, value) => sum + value, 0);
 const buildGroupedChartData = _ref => {
   let {
@@ -40,7 +43,7 @@ const buildGroupedChartData = _ref => {
     viewMode
   } = _ref;
   return groupedEmissions.map((emissionsArray, idx) => {
-    const subcategoriesObj = buildRealDataObj(emissionsArray, _subcategories.allSubcategoriesWithOther);
+    const subcategoriesObj = buildRealDataObj(emissionsArray, [..._subcategories.subcategories, _subcategories.otherSubcategoryObj]);
     const buildWarningObj = () => {
       const singleEmissionWarning = emissionsArray.find(_ref2 => {
         let {
@@ -111,17 +114,72 @@ const addTrendlineToChartData = chartData => {
     });
   });
 };
-const LabeledEmissionsChart = _ref8 => {
+const ReferenceLineLabelChips = _ref8 => {
+  let {
+    x,
+    y,
+    label
+  } = _ref8;
+  const CHIP_HEIGHT_PX = 24;
+  const {
+    palette
+  } = (0, _material.useTheme)();
+  const [chipWidth, setChipWidth] = (0, _react.useState)(0);
+  const chipRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    if (chipRef.current) {
+      setChipWidth(chipRef.current.offsetWidth);
+    }
+  }, [chipRef]);
+  return /*#__PURE__*/_react.default.createElement(_material.Chip, {
+    elevation: 3,
+    ref: chipRef,
+    label: label,
+    style: {
+      position: "absolute",
+      top: y - CHIP_HEIGHT_PX / 2,
+      left: x - chipWidth / 2,
+      background: (0, _converters.hexToRgba)(palette.backgroundGray.main, 0.85)
+      // boxShadow:
+      //   "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)",
+    },
+    size: "small"
+  });
+};
+const ChartLineLabelSetter = _ref9 => {
+  let {
+      viewBox,
+      labels,
+      setLabels,
+      label
+    } = _ref9,
+    otherProps = _objectWithoutProperties(_ref9, _excluded2);
+  (0, _react.useEffect)(() => {
+    const {
+      y
+    } = viewBox;
+    if (!labels.find(existingLabel => existingLabel.label === label)) {
+      setLabels(existingLabels => [...existingLabels, _objectSpread({
+        y,
+        label
+      }, otherProps)]);
+    }
+  }, [viewBox, label, labels, setLabels, otherProps]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+};
+const LabeledEmissionsChart = _ref10 => {
   var _data$, _data;
   let {
+    graphPeriod,
     data,
-    chartRef,
     type,
     displayUnitLabel,
     chartArray,
     aspect = 3,
-    showTooltip
-  } = _ref8;
+    showTooltip,
+    netZeroPercentage,
+    baseline
+  } = _ref10;
   const {
     palette
   } = (0, _material.useTheme)();
@@ -133,17 +191,66 @@ const LabeledEmissionsChart = _ref8 => {
     warningField: "warning",
     barSumField: "totalEmissionsSumTons"
   });
+  const [chartWidth, setChartWidth] = (0, _react.useState)(0);
+  const [referenceLineLabels, setReferenceLineLabels] = (0, _react.useState)([]);
+  const chartContainerRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    if (chartContainerRef.current) {
+      setChartWidth(chartContainerRef.current.offsetWidth);
+    }
+  }, [chartContainerRef]);
   const isTrendLineGood = ((_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.trendLine) > ((_data = data[data.length - 1]) === null || _data === void 0 ? void 0 : _data.trendLine);
   const ChartElement = type === "bar" ? _recharts.Bar : _recharts.Area;
+  const buildReferenceLinesArray = () => {
+    if (!baseline) {
+      return [];
+    }
+    const baselineReferenceLine = {
+      value: baseline,
+      label: "".concat((0, _formatters.ucFirstLetters)(graphPeriod), "ly Baseline"),
+      labelPosition: "top"
+    };
+    const ghgReductionLine = {
+      value: baseline * 0.5,
+      label: "GHG Reduction Mandate (50% by 2030)",
+      labelPosition: "top"
+    };
+    const companyPledgeLabel = "Company pledge to reduce emissions by ".concat(netZeroPercentage, "% by 2030");
+    const pledgeReductionValue = baseline * (1 - netZeroPercentage / 100);
+    if (!netZeroPercentage) {
+      return [baselineReferenceLine, ghgReductionLine];
+    }
+    if (netZeroPercentage >= 55) {
+      return [baselineReferenceLine, ghgReductionLine, {
+        value: pledgeReductionValue,
+        label: companyPledgeLabel,
+        labelPosition: "bottom"
+      }];
+    }
+    return [baselineReferenceLine, {
+      label: companyPledgeLabel,
+      value: pledgeReductionValue,
+      labelPosition: "bottom"
+    }];
+  };
+  const referenceLines = buildReferenceLinesArray();
+
+  //This weird hack is needed because for some reason every label shows up in referenceLineLabels twice.
+  const uniqueReferenceLineLabels = [...new Set(referenceLineLabels.map(_ref11 => {
+    let {
+      label
+    } = _ref11;
+    return label;
+  }))].map(label => referenceLineLabels.find(lineLabel => lineLabel.label === label));
   return /*#__PURE__*/_react.default.createElement(_material.Box, {
-    position: "relative"
+    position: "relative",
+    ref: chartContainerRef
   }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
     aspect: aspect
   }, /*#__PURE__*/_react.default.createElement(_recharts.ComposedChart, {
     width: 500,
     height: 300,
-    data: data,
-    ref: chartRef
+    data: data
   }, /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
     dataKey: "label",
     interval: "preserveStartEnd",
@@ -161,12 +268,12 @@ const LabeledEmissionsChart = _ref8 => {
       categoriesArray: chartArray,
       displayUnitLabel: displayUnitLabel
     })
-  }), chartArray.map(_ref9 => {
+  }), chartArray.map(_ref12 => {
     let {
         subcategory,
         color
-      } = _ref9,
-      otherProps = _objectWithoutProperties(_ref9, _excluded2);
+      } = _ref12,
+      otherProps = _objectWithoutProperties(_ref12, _excluded3);
     return /*#__PURE__*/_react.default.createElement(ChartElement, _extends({
       key: "emissions-chart-element-".concat(subcategory),
       type: "monotone",
@@ -184,15 +291,34 @@ const LabeledEmissionsChart = _ref8 => {
     strokeWidth: 4,
     dot: false,
     strokeDasharray: "5 5"
-  }))), warningLabels);
+  }), !!referenceLines.length && referenceLines.map((_ref13, idx) => {
+    let {
+      label,
+      value,
+      labelPosition
+    } = _ref13;
+    return /*#__PURE__*/_react.default.createElement(_recharts.ReferenceLine, {
+      key: "chart-reference-line-".concat(idx),
+      y: value,
+      strokeWidth: 2,
+      stroke: palette.backgroundGray.dark,
+      label: /*#__PURE__*/_react.default.createElement(ChartLineLabelSetter, {
+        label: label,
+        labels: referenceLineLabels,
+        setLabels: setReferenceLineLabels
+      })
+    });
+  }))), warningLabels, !!uniqueReferenceLineLabels.length && uniqueReferenceLineLabels.map((label, idx) => /*#__PURE__*/_react.default.createElement(ReferenceLineLabelChips, _extends({
+    key: "reference-line-label-chip-".concat(idx),
+    x: chartWidth / 2
+  }, label))));
 };
-const EmissionsChart = _ref10 => {
+const EmissionsChart = _ref14 => {
   let {
     dataArray: emissions,
     type,
     viewMode = "subcategories",
     graphPeriod,
-    chartRef,
     showTrendline,
     displayUnit,
     unitConverter,
@@ -202,8 +328,9 @@ const EmissionsChart = _ref10 => {
     startDate,
     convertCarbonUnits,
     displayUnitLabel,
-    branding
-  } = _ref10;
+    branding,
+    netZeroPercentage
+  } = _ref14;
   const {
     chartLabelsArray,
     scopesArray,
@@ -217,8 +344,8 @@ const EmissionsChart = _ref10 => {
       buildRealDataObj,
       viewMode
     });
-    const convertChartDataObject = (chartDataObj, converter) => Object.fromEntries(Object.entries(chartDataObj).map(_ref11 => {
-      let [key, value] = _ref11;
+    const convertChartDataObject = (chartDataObj, converter) => Object.fromEntries(Object.entries(chartDataObj).map(_ref15 => {
+      let [key, value] = _ref15;
       if (typeof value !== "number") {
         return [key, value];
       }
@@ -229,28 +356,28 @@ const EmissionsChart = _ref10 => {
     }));
     if (isPercentageChart) {
       const percentageConvertedChartData = preliminaryChartData.map(chartDataObj => {
-        const objectSubcategoryProperties = Object.keys(chartDataObj).filter(key => _subcategories.subcategories.find(_ref12 => {
+        const objectSubcategoryProperties = Object.keys(chartDataObj).filter(key => _subcategories.subcategories.find(_ref16 => {
           let {
             subcategory
-          } = _ref12;
+          } = _ref16;
           return subcategory === key;
         }));
         const objectSubcategoryValues = objectSubcategoryProperties.map(subcategory => ({
           key: subcategory,
           value: chartDataObj[subcategory]
         }));
-        const periodEmissionsSum = objectSubcategoryValues.reduce((sum, _ref13) => {
+        const periodEmissionsSum = objectSubcategoryValues.reduce((sum, _ref17) => {
           let {
             value
-          } = _ref13;
+          } = _ref17;
           return value + sum;
         }, 0);
         const percentageConverter = value => value / periodEmissionsSum * 100;
-        const newObject = Object.fromEntries(objectSubcategoryValues.map(_ref14 => {
+        const newObject = Object.fromEntries(objectSubcategoryValues.map(_ref18 => {
           let {
             key,
             value
-          } = _ref14;
+          } = _ref18;
           return [key, value];
         }));
         return convertChartDataObject(newObject, percentageConverter);
@@ -265,6 +392,26 @@ const EmissionsChart = _ref10 => {
     return labeledChartData;
   };
   const chartData = buildChartData();
+  const findFirstYearBaseline = () => {
+    if ((0, _dayjs.default)().diff((0, _dayjs.default)(startDate), "month") < 12) {
+      return false;
+    }
+    const {
+      groupedEmissions: firstYearBaselineMonthlyEmissions
+    } = (0, _chartHelpers.buildEmissionGroupData)(emissions, "month", startDate);
+    const firstYearMonthlyGroupedEmissions = [...new Array(11)].map((_, idx) => firstYearBaselineMonthlyEmissions[idx]);
+    const firstYearMonthlyEmissionsSum = firstYearMonthlyGroupedEmissions.map(emissions => ({
+      tonsCo2e: (0, _otherHelpers.sumTonsCo2e)(emissions)
+    }));
+    const monthlyBaseline = (0, _otherHelpers.sumTonsCo2e)(firstYearMonthlyEmissionsSum) / 12;
+    if (graphPeriod === "year") {
+      return monthlyBaseline * 12;
+    }
+    if (graphPeriod === "quarter") {
+      return monthlyBaseline * 3;
+    }
+    return monthlyBaseline;
+  };
   const chartArray = viewMode === "scopes" ? scopesArray : subcategoriesArray;
   return /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
@@ -273,14 +420,16 @@ const EmissionsChart = _ref10 => {
     item: true
   }, /*#__PURE__*/_react.default.createElement(LabeledEmissionsChart, {
     data: chartData,
-    chartRef: chartRef,
     type: type,
     displayUnitLabel: isPercentageChart ? "%" : displayUnit || displayUnitLabel,
     chartArray: chartArray.map(obj => _objectSpread(_objectSpread({}, obj), {}, {
       viewMode
     })),
     aspect: aspect,
-    showTooltip: showTooltip
+    showTooltip: showTooltip,
+    graphPeriod: graphPeriod,
+    netZeroPercentage: netZeroPercentage,
+    baseline: findFirstYearBaseline()
   })));
 };
 var _default = exports.default = EmissionsChart;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aclymatepackages/modules",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "description": "Aclymate modules",
   "author": "William Loopesko",
   "main": "dist/index.js",

package/src/components/EmissionsChart.js

@@ -1,6 +1,5 @@
-import React from "react";
+import React, { useEffect, useState, useRef } from "react";
 import dayjs from "dayjs";
-import dayOfYear from "dayjs/plugin/dayOfYear";
 
 import {
   XAxis,
@@ -11,17 +10,15 @@ import {
   Bar,
   ComposedChart,
   Line,
+  ReferenceLine,
   Tooltip as ChartTooltip,
 } from "recharts";
 
-import { Grid, Box, useTheme } from "@mui/material";
+import { Grid, Box, Chip, useTheme } from "@mui/material";
 
-import { formatDecimal } from "@aclymatepackages/formatters";
+import { formatDecimal, ucFirstLetters } from "@aclymatepackages/formatters";
 import { sumTonsCo2e } from "@aclymatepackages/other-helpers";
-
-import EmissionsCustomTooltip from "./EmissionsCustomTooltip";
-import useChartWarningLabels from "./useChartWarningLabels";
-
+import { hexToRgba } from "@aclymatepackages/converters";
 import {
   buildScopesRealDataObj,
   buildSubcategoriesDataObj,
@@ -29,10 +26,11 @@ import {
 } from "@aclymatepackages/chart-helpers";
 import {
   subcategories,
-  allSubcategoriesWithOther,
+  otherSubcategoryObj,
 } from "@aclymatepackages/subcategories";
 
-dayjs.extend(dayOfYear);
+import EmissionsCustomTooltip from "./EmissionsCustomTooltip";
+import useChartWarningLabels from "./useChartWarningLabels";
 
 const findObjectValuesSum = (object) =>
   Object.values(object).reduce((sum, value) => sum + value, 0);
@@ -43,10 +41,10 @@ const buildGroupedChartData = ({
   viewMode,
 }) => {
   return groupedEmissions.map((emissionsArray, idx) => {
-    const subcategoriesObj = buildRealDataObj(
-      emissionsArray,
-      allSubcategoriesWithOther
-    );
+    const subcategoriesObj = buildRealDataObj(emissionsArray, [
+      ...subcategories,
+      otherSubcategoryObj,
+    ]);
 
     const buildWarningObj = () => {
       const singleEmissionWarning = emissionsArray.find(
@@ -110,14 +108,69 @@ const addTrendlineToChartData = (chartData) => {
   }));
 };
 
+const ReferenceLineLabelChips = ({ x, y, label }) => {
+  const CHIP_HEIGHT_PX = 24;
+
+  const { palette } = useTheme();
+
+  const [chipWidth, setChipWidth] = useState(0);
+  const chipRef = useRef();
+
+  useEffect(() => {
+    if (chipRef.current) {
+      setChipWidth(chipRef.current.offsetWidth);
+    }
+  }, [chipRef]);
+
+  return (
+    <Chip
+      elevation={3}
+      ref={chipRef}
+      label={label}
+      style={{
+        position: "absolute",
+        top: y - CHIP_HEIGHT_PX / 2,
+        left: x - chipWidth / 2,
+        background: hexToRgba(palette.backgroundGray.main, 0.85),
+        // boxShadow:
+        //   "0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12)",
+      }}
+      size="small"
+    />
+  );
+};
+
+const ChartLineLabelSetter = ({
+  viewBox,
+  labels,
+  setLabels,
+  label,
+  ...otherProps
+}) => {
+  useEffect(() => {
+    const { y } = viewBox;
+
+    if (!labels.find((existingLabel) => existingLabel.label === label)) {
+      setLabels((existingLabels) => [
+        ...existingLabels,
+        { y, label, ...otherProps },
+      ]);
+    }
+  }, [viewBox, label, labels, setLabels, otherProps]);
+
+  return <></>;
+};
+
 const LabeledEmissionsChart = ({
+  graphPeriod,
   data,
-  chartRef,
   type,
   displayUnitLabel,
   chartArray,
   aspect = 3,
   showTooltip,
+  netZeroPercentage,
+  baseline,
 }) => {
   const { palette } = useTheme();
 
@@ -127,14 +180,80 @@ const LabeledEmissionsChart = ({
     barSumField: "totalEmissionsSumTons",
   });
 
+  const [chartWidth, setChartWidth] = useState(0);
+  const [referenceLineLabels, setReferenceLineLabels] = useState([]);
+
+  const chartContainerRef = useRef();
+
+  useEffect(() => {
+    if (chartContainerRef.current) {
+      setChartWidth(chartContainerRef.current.offsetWidth);
+    }
+  }, [chartContainerRef]);
+
   const isTrendLineGood = data[0]?.trendLine > data[data.length - 1]?.trendLine;
 
   const ChartElement = type === "bar" ? Bar : Area;
 
+  const buildReferenceLinesArray = () => {
+    if (!baseline) {
+      return [];
+    }
+
+    const baselineReferenceLine = {
+      value: baseline,
+      label: `${ucFirstLetters(graphPeriod)}ly Baseline`,
+      labelPosition: "top",
+    };
+
+    const ghgReductionLine = {
+      value: baseline * 0.5,
+      label: "GHG Reduction Mandate (50% by 2030)",
+      labelPosition: "top",
+    };
+
+    const companyPledgeLabel = `Company pledge to reduce emissions by ${netZeroPercentage}% by 2030`;
+    const pledgeReductionValue = baseline * (1 - netZeroPercentage / 100);
+
+    if (!netZeroPercentage) {
+      return [baselineReferenceLine, ghgReductionLine];
+    }
+
+    if (netZeroPercentage >= 55) {
+      return [
+        baselineReferenceLine,
+        ghgReductionLine,
+        {
+          value: pledgeReductionValue,
+          label: companyPledgeLabel,
+          labelPosition: "bottom",
+        },
+      ];
+    }
+
+    return [
+      baselineReferenceLine,
+      {
+        label: companyPledgeLabel,
+        value: pledgeReductionValue,
+        labelPosition: "bottom",
+      },
+    ];
+  };
+
+  const referenceLines = buildReferenceLinesArray();
+
+  //This weird hack is needed because for some reason every label shows up in referenceLineLabels twice.
+  const uniqueReferenceLineLabels = [
+    ...new Set(referenceLineLabels.map(({ label }) => label)),
+  ].map((label) =>
+    referenceLineLabels.find((lineLabel) => lineLabel.label === label)
+  );
+
   return (
-    <Box position="relative">
+    <Box position="relative" ref={chartContainerRef}>
       <ResponsiveContainer aspect={aspect}>
-        <ComposedChart width={500} height={300} data={data} ref={chartRef}>
+        <ComposedChart width={500} height={300} data={data}>
           <XAxis dataKey="label" interval="preserveStartEnd" height={20} />
           <YAxis
             tickFormatter={(tick) =>
@@ -179,9 +298,33 @@ const LabeledEmissionsChart = ({
             dot={false}
             strokeDasharray="5 5"
           />
+          {!!referenceLines.length &&
+            referenceLines.map(({ label, value, labelPosition }, idx) => (
+              <ReferenceLine
+                key={`chart-reference-line-${idx}`}
+                y={value}
+                strokeWidth={2}
+                stroke={palette.backgroundGray.dark}
+                label={
+                  <ChartLineLabelSetter
+                    label={label}
+                    labels={referenceLineLabels}
+                    setLabels={setReferenceLineLabels}
+                  />
+                }
+              />
+            ))}
         </ComposedChart>
       </ResponsiveContainer>
       {warningLabels}
+      {!!uniqueReferenceLineLabels.length &&
+        uniqueReferenceLineLabels.map((label, idx) => (
+          <ReferenceLineLabelChips
+            key={`reference-line-label-chip-${idx}`}
+            x={chartWidth / 2}
+            {...label}
+          />
+        ))}
     </Box>
   );
 };
@@ -191,7 +334,6 @@ const EmissionsChart = ({
   type,
   viewMode = "subcategories",
   graphPeriod,
-  chartRef,
   showTrendline,
   displayUnit,
   unitConverter,
@@ -202,6 +344,7 @@ const EmissionsChart = ({
   convertCarbonUnits,
   displayUnitLabel,
   branding,
+  netZeroPercentage,
 }) => {
   const {
     chartLabelsArray,
@@ -287,6 +430,33 @@ const EmissionsChart = ({
 
   const chartData = buildChartData();
 
+  const findFirstYearBaseline = () => {
+    if (dayjs().diff(dayjs(startDate), "month") < 12) {
+      return false;
+    }
+
+    const { groupedEmissions: firstYearBaselineMonthlyEmissions } =
+      buildEmissionGroupData(emissions, "month", startDate);
+
+    const firstYearMonthlyGroupedEmissions = [...new Array(11)].map(
+      (_, idx) => firstYearBaselineMonthlyEmissions[idx]
+    );
+    const firstYearMonthlyEmissionsSum = firstYearMonthlyGroupedEmissions.map(
+      (emissions) => ({ tonsCo2e: sumTonsCo2e(emissions) })
+    );
+    const monthlyBaseline = sumTonsCo2e(firstYearMonthlyEmissionsSum) / 12;
+
+    if (graphPeriod === "year") {
+      return monthlyBaseline * 12;
+    }
+
+    if (graphPeriod === "quarter") {
+      return monthlyBaseline * 3;
+    }
+
+    return monthlyBaseline;
+  };
+
   const chartArray = viewMode === "scopes" ? scopesArray : subcategoriesArray;
 
   return (
@@ -294,7 +464,6 @@ const EmissionsChart = ({
       <Grid item>
         <LabeledEmissionsChart
           data={chartData}
-          chartRef={chartRef}
           type={type}
           displayUnitLabel={
             isPercentageChart ? "%" : displayUnit || displayUnitLabel
@@ -302,6 +471,9 @@ const EmissionsChart = ({
           chartArray={chartArray.map((obj) => ({ ...obj, viewMode }))}
           aspect={aspect}
           showTooltip={showTooltip}
+          graphPeriod={graphPeriod}
+          netZeroPercentage={netZeroPercentage}
+          baseline={findFirstYearBaseline()}
         />
       </Grid>
     </Grid>