@aclymatepackages/modules 2.0.9 → 2.0.11

package/dist/components/AccountingChart.js

@@ -0,0 +1,239 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireDefault(require("react"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _recharts = require("recharts");
+var _material = require("@mui/material");
+var _atoms = require("@aclymatepackages/atoms");
+var _converters = require("@aclymatepackages/converters");
+var _formatters = require("@aclymatepackages/formatters");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 : 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); }
+const AccountingChartTooltip = _ref => {
+  let {
+    convertCarbonUnits,
+    displayUnitLabel,
+    payload: passedPayload
+  } = _ref;
+  const {
+    payload
+  } = passedPayload[0] || {};
+  if (!payload) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  }
+  const {
+    year,
+    baseline,
+    tonsCo2e,
+    isPledgeYear,
+    overEmitted,
+    underEmitted,
+    expectedPercentage,
+    future,
+    expectedTonsCo2e
+  } = payload;
+  const buildTextIcon = () => {
+    const title = "".concat(year, "- ").concat((0, _formatters.formatDecimal)(convertCarbonUnits(tonsCo2e || expectedTonsCo2e)), " ").concat(displayUnitLabel);
+    if (baseline) {
+      return {
+        title,
+        subtitle: "Baseline Year"
+      };
+    }
+    if (isPledgeYear) {
+      return {
+        title,
+        subtitle: "Pledge Year"
+      };
+    }
+    if (future) {
+      return {
+        title,
+        subtitle: "No more than ".concat((0, _formatters.formatDecimal)(convertCarbonUnits(expectedTonsCo2e)), " ").concat(displayUnitLabel, " allowed")
+      };
+    }
+    if (!expectedPercentage) {
+      return {
+        title,
+        subtitle: "You emitted ".concat((0, _formatters.formatDecimal)(overEmitted || underEmitted), "% of your baseline")
+      };
+    }
+    return {
+      title,
+      subtitle: "You emitted ".concat((0, _formatters.formatDecimal)(overEmitted || underEmitted), "% of your reduction pledge")
+    };
+  };
+  const {
+    title,
+    subtitle
+  } = buildTextIcon();
+  return /*#__PURE__*/_react.default.createElement(_atoms.DefaultPaper, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    direction: "column",
+    spacing: 2
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "h4"
+  }, title), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "subtitle1",
+    color: "textSecondary"
+  }, subtitle))));
+};
+const AccountingChart = _ref2 => {
+  let {
+    accountingYears,
+    pledgeYear,
+    pledgeYears,
+    baselineDate,
+    pledgeTons,
+    baselineTons,
+    convertCarbonUnits = tons => tons,
+    displayUnitLabel = "tons",
+    card
+  } = _ref2;
+  const {
+    palette
+  } = (0, _material.useTheme)();
+  const buildChartData = () => {
+    const pledgeBaselineTonsMultiplier = pledgeTons / baselineTons;
+    const findYearChartProps = _ref3 => {
+      let {
+        baseline,
+        baselinePercentage,
+        year,
+        pledgePercentage,
+        expectedPercentage,
+        tonsCo2e
+      } = _ref3;
+      if (baseline) {
+        return {
+          baseline: 100,
+          year,
+          tonsCo2e
+        };
+      }
+      if (!pledgeYear || pledgeYear > year) {
+        const underEmittedObj = baselinePercentage <= 100 ? {
+          underEmitted: baselinePercentage
+        } : {};
+        const overEmittedObj = baselinePercentage > 100 ? {
+          overEmitted: baselinePercentage
+        } : {};
+        return _objectSpread(_objectSpread({
+          year,
+          tonsCo2e
+        }, underEmittedObj), overEmittedObj);
+      }
+      const buildPledgeYearProps = function buildPledgeYearProps() {
+        let multiplier = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+        const underEmittedObj = pledgePercentage <= expectedPercentage ? {
+          underEmitted: pledgePercentage * multiplier,
+          expectedPercentage: (expectedPercentage - pledgePercentage) * multiplier
+        } : {};
+        const overEmittedObj = pledgePercentage > expectedPercentage ? {
+          overEmitted: (pledgePercentage - expectedPercentage) * multiplier,
+          expectedPercentage: expectedPercentage * multiplier
+        } : {};
+        return _objectSpread(_objectSpread({
+          year,
+          tonsCo2e,
+          isPledgeYear: year === pledgeYear
+        }, underEmittedObj), overEmittedObj);
+      };
+      if (pledgeYear === (0, _dayjs.default)(baselineDate).year()) {
+        return buildPledgeYearProps();
+      }
+      return buildPledgeYearProps(pledgeBaselineTonsMultiplier);
+    };
+    const existingYearsChartData = accountingYears.map(findYearChartProps);
+    const futureYearsChartData = pledgeYears ? pledgeYears.filter(_ref4 => {
+      let {
+        year
+      } = _ref4;
+      return !existingYearsChartData.find(existingYear => existingYear.year === year);
+    }).map(_ref5 => {
+      let {
+        year,
+        expectedPercentage,
+        expectedTonsCo2e
+      } = _ref5;
+      return {
+        year,
+        future: expectedPercentage * pledgeBaselineTonsMultiplier,
+        expectedTonsCo2e
+      };
+    }) : [];
+    return [...existingYearsChartData, ...futureYearsChartData];
+  };
+  const chartDataArray = buildChartData();
+  const barAreasArray = [{
+    dataKey: "baseline",
+    color: palette.primary.main
+  }, {
+    dataKey: "underEmitted",
+    color: palette.secondary.main
+  }, {
+    dataKey: "expectedPercentage",
+    color: palette.backgroundGray.dark
+  }, {
+    dataKey: "overEmitted",
+    color: palette.error.main
+  }, {
+    dataKey: "future",
+    color: (0, _converters.hexToRgba)(palette.backgroundGray.main, 0.8)
+  }];
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    position: "relative",
+    style: {
+      width: "100%"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
+    width: "100%",
+    aspect: card ? 3 : 2.5
+  }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
+    data: chartDataArray
+  }, /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
+    strokeDasharray: "3 3"
+  }), /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
+    dataKey: "year",
+    interval: "equidistantPreserveChart",
+    height: 20
+  }), /*#__PURE__*/_react.default.createElement(_recharts.YAxis, {
+    width: 70,
+    name: "Percentage",
+    tickFormatter: tick => "".concat((0, _formatters.formatDecimal)(tick), "%")
+  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
+    wrapperStyle: {
+      zIndex: 99
+    },
+    content: /*#__PURE__*/_react.default.createElement(AccountingChartTooltip, {
+      convertCarbonUnits: convertCarbonUnits,
+      displayUnitLabel: displayUnitLabel
+    })
+  }), barAreasArray.map((_ref6, idx) => {
+    let {
+      dataKey,
+      color
+    } = _ref6;
+    return /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
+      key: "view-chart-bar-".concat(idx),
+      dataKey: dataKey,
+      fill: color,
+      stackId: "a",
+      isAnimationActive: false
+    });
+  }), /*#__PURE__*/_react.default.createElement(_recharts.ReferenceLine, {
+    y: 100
+  }))));
+};
+var _default = exports.default = AccountingChart;

package/dist/components/EmissionsChart.js

@@ -323,7 +323,7 @@ const EmissionsChart = _ref14 => {
     showTooltip = true,
     startDate,
     convertCarbonUnits = tons => tons,
-    displayUnitLabel,
+    displayUnitLabel = "tons",
     branding,
     netZeroPercentage,
     noLine = true

package/dist/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "AccountingChart", {
+  enumerable: true,
+  get: function get() {
+    return _AccountingChart.default;
+  }
+});
 Object.defineProperty(exports, "CompaniesAutocomplete", {
   enumerable: true,
   get: function get() {
@@ -117,6 +123,7 @@ Object.defineProperty(exports, "useStripeInput", {
     return _stripeInput.default;
   }
 });
+var _AccountingChart = _interopRequireDefault(require("./components/AccountingChart"));
 var _FootprintVideo = _interopRequireDefault(require("./components/FootprintVideo"));
 var _IndustryAutocomplete = _interopRequireDefault(require("./components/IndustryAutocomplete"));
 var _PlacesAutocomplete = _interopRequireDefault(require("./components/PlacesAutocomplete"));

package/package.json

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

package/src/components/AccountingChart.js

@@ -0,0 +1,240 @@
+import React from "react";
+import dayjs from "dayjs";
+
+import {
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  ResponsiveContainer,
+  Bar,
+  BarChart,
+  ReferenceLine,
+  Tooltip,
+} from "recharts";
+
+import { Box, Typography, Grid, useTheme } from "@mui/material";
+
+import { DefaultPaper } from "@aclymatepackages/atoms";
+import { hexToRgba } from "@aclymatepackages/converters";
+import { formatDecimal } from "@aclymatepackages/formatters";
+
+const AccountingChartTooltip = ({
+  convertCarbonUnits,
+  displayUnitLabel,
+  payload: passedPayload,
+}) => {
+  const { payload } = passedPayload[0] || {};
+  if (!payload) {
+    return <></>;
+  }
+
+  const {
+    year,
+    baseline,
+    tonsCo2e,
+    isPledgeYear,
+    overEmitted,
+    underEmitted,
+    expectedPercentage,
+    future,
+    expectedTonsCo2e,
+  } = payload;
+
+  const buildTextIcon = () => {
+    const title = `${year}- ${formatDecimal(
+      convertCarbonUnits(tonsCo2e || expectedTonsCo2e)
+    )} ${displayUnitLabel}`;
+
+    if (baseline) {
+      return { title, subtitle: "Baseline Year" };
+    }
+
+    if (isPledgeYear) {
+      return { title, subtitle: "Pledge Year" };
+    }
+    if (future) {
+      return {
+        title,
+        subtitle: `No more than ${formatDecimal(
+          convertCarbonUnits(expectedTonsCo2e)
+        )} ${displayUnitLabel} allowed`,
+      };
+    }
+
+    if (!expectedPercentage) {
+      return {
+        title,
+        subtitle: `You emitted ${formatDecimal(
+          overEmitted || underEmitted
+        )}% of your baseline`,
+      };
+    }
+
+    return {
+      title,
+      subtitle: `You emitted ${formatDecimal(
+        overEmitted || underEmitted
+      )}% of your reduction pledge`,
+    };
+  };
+
+  const { title, subtitle } = buildTextIcon();
+
+  return (
+    <DefaultPaper>
+      <Grid container direction="column" spacing={2}>
+        <Grid item>
+          <Typography variant="h4">{title}</Typography>
+          <Typography variant="subtitle1" color="textSecondary">
+            {subtitle}
+          </Typography>
+        </Grid>
+      </Grid>
+    </DefaultPaper>
+  );
+};
+
+const AccountingChart = ({
+  accountingYears,
+  pledgeYear,
+  pledgeYears,
+  baselineDate,
+  pledgeTons,
+  baselineTons,
+  convertCarbonUnits = (tons) => tons,
+  displayUnitLabel = "tons",
+  card,
+}) => {
+  const { palette } = useTheme();
+
+  const buildChartData = () => {
+    const pledgeBaselineTonsMultiplier = pledgeTons / baselineTons;
+
+    const findYearChartProps = ({
+      baseline,
+      baselinePercentage,
+      year,
+      pledgePercentage,
+      expectedPercentage,
+      tonsCo2e,
+    }) => {
+      if (baseline) {
+        return { baseline: 100, year, tonsCo2e };
+      }
+
+      if (!pledgeYear || pledgeYear > year) {
+        const underEmittedObj =
+          baselinePercentage <= 100 ? { underEmitted: baselinePercentage } : {};
+
+        const overEmittedObj =
+          baselinePercentage > 100 ? { overEmitted: baselinePercentage } : {};
+
+        return { year, tonsCo2e, ...underEmittedObj, ...overEmittedObj };
+      }
+
+      const buildPledgeYearProps = (multiplier = 1) => {
+        const underEmittedObj =
+          pledgePercentage <= expectedPercentage
+            ? {
+                underEmitted: pledgePercentage * multiplier,
+                expectedPercentage:
+                  (expectedPercentage - pledgePercentage) * multiplier,
+              }
+            : {};
+
+        const overEmittedObj =
+          pledgePercentage > expectedPercentage
+            ? {
+                overEmitted:
+                  (pledgePercentage - expectedPercentage) * multiplier,
+                expectedPercentage: expectedPercentage * multiplier,
+              }
+            : {};
+
+        return {
+          year,
+          tonsCo2e,
+          isPledgeYear: year === pledgeYear,
+          ...underEmittedObj,
+          ...overEmittedObj,
+        };
+      };
+
+      if (pledgeYear === dayjs(baselineDate).year()) {
+        return buildPledgeYearProps();
+      }
+
+      return buildPledgeYearProps(pledgeBaselineTonsMultiplier);
+    };
+
+    const existingYearsChartData = accountingYears.map(findYearChartProps);
+
+    const futureYearsChartData = pledgeYears
+      ? pledgeYears
+          .filter(
+            ({ year }) =>
+              !existingYearsChartData.find(
+                (existingYear) => existingYear.year === year
+              )
+          )
+          .map(({ year, expectedPercentage, expectedTonsCo2e }) => ({
+            year,
+            future: expectedPercentage * pledgeBaselineTonsMultiplier,
+            expectedTonsCo2e,
+          }))
+      : [];
+
+    return [...existingYearsChartData, ...futureYearsChartData];
+  };
+
+  const chartDataArray = buildChartData();
+
+  const barAreasArray = [
+    { dataKey: "baseline", color: palette.primary.main },
+    { dataKey: "underEmitted", color: palette.secondary.main },
+    { dataKey: "expectedPercentage", color: palette.backgroundGray.dark },
+    { dataKey: "overEmitted", color: palette.error.main },
+    { dataKey: "future", color: hexToRgba(palette.backgroundGray.main, 0.8) },
+  ];
+
+  return (
+    <Box position="relative" style={{ width: "100%" }}>
+      <ResponsiveContainer width="100%" aspect={card ? 3 : 2.5}>
+        <BarChart data={chartDataArray}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis
+            dataKey="year"
+            interval="equidistantPreserveChart"
+            height={20}
+          />
+          <YAxis
+            width={70}
+            name="Percentage"
+            tickFormatter={(tick) => `${formatDecimal(tick)}%`}
+          />
+          <Tooltip
+            wrapperStyle={{ zIndex: 99 }}
+            content={
+              <AccountingChartTooltip
+                convertCarbonUnits={convertCarbonUnits}
+                displayUnitLabel={displayUnitLabel}
+              />
+            }
+          />
+          {barAreasArray.map(({ dataKey, color }, idx) => (
+            <Bar
+              key={`view-chart-bar-${idx}`}
+              dataKey={dataKey}
+              fill={color}
+              stackId="a"
+              isAnimationActive={false}
+            />
+          ))}
+          <ReferenceLine y={100} />
+        </BarChart>
+      </ResponsiveContainer>
+    </Box>
+  );
+};
+
+export default AccountingChart;

package/src/components/EmissionsChart.js

@@ -339,7 +339,7 @@ const EmissionsChart = ({
   showTooltip = true,
   startDate,
   convertCarbonUnits = (tons) => tons,
-  displayUnitLabel,
+  displayUnitLabel = "tons",
   branding,
   netZeroPercentage,
   noLine = true,

package/src/index.js

@@ -1,3 +1,4 @@
+import AccountingChart from "./components/AccountingChart";
 import FootprintVideo from "./components/FootprintVideo";
 import IndustryAutocomplete from "./components/IndustryAutocomplete";
 import PlacesAutocomplete from "./components/PlacesAutocomplete";
@@ -19,6 +20,7 @@ import ReportGraphContentLayout from "./components/ReportGraphContentLayout";
 import EmissionsSummarySentence from "./components/EmissionsSummarySentence";
 
 export {
+  AccountingChart,
   FootprintVideo,
   IndustryAutocomplete,
   PlacesAutocomplete,