@aclymatepackages/modules 1.0.0

package/src/components/EmissionsPieChart.js

@@ -0,0 +1,120 @@
+import React from "react";
+
+import {
+  Tooltip as ChartTooltip,
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+} from "recharts";
+
+import { Typography, Grid, Avatar } from "@mui/material";
+
+import { DefaultPaper } from "@aclymatepackages/atoms";
+import { formatDecimal } from "@aclymatepackages/formatters";
+import { sumTonsCo2e } from "@aclymatepackages/other-helpers";
+import {
+  buildSubcategoriesArray,
+  buildScopesArray,
+} from "@aclymatepackages/subcategories";
+
+const PieChartCustomTooltip = ({ payload: passedPayload }) => {
+  const [payloadObj] = passedPayload;
+  const { payload = {} } = payloadObj || [{}];
+  const { name, emissionPercentage, color, icon, Icon } = payload;
+
+  return (
+    <DefaultPaper>
+      <Grid container spacing={2} alignItems="center">
+        <Grid item>
+          <Avatar style={{ backgroundColor: color, color: "white" }}>
+            {icon}
+            {Icon && <Icon style={{ color: "inherit" }} />}
+          </Avatar>
+        </Grid>
+        <Grid item>
+          <Typography variant="subtitle1" color="textPrimary">
+            {name}
+          </Typography>
+          <Typography variant="caption" color="textSecondary">{`${formatDecimal(
+            emissionPercentage
+          )}% of total emissions`}</Typography>
+        </Grid>
+      </Grid>
+    </DefaultPaper>
+  );
+};
+
+const EmissionsPieChart = ({
+  dataArray: emissions,
+  viewMode = "subcategories",
+  pieChartRef,
+}) => {
+  const subcategoriesArray = buildSubcategoriesArray(emissions);
+  const scopesArray = buildScopesArray();
+
+  const emissionsSum = sumTonsCo2e(emissions);
+
+  const formatChartPieSlices = () => {
+    const filterFunction = (subcategory) => (emission) => {
+      if (viewMode === "subcategories") {
+        return emission.subcategory === subcategory;
+      }
+
+      const scopeNumber = Number(subcategory.charAt(subcategory.length - 1));
+      return emission.scope === scopeNumber;
+    };
+
+    const slicesArray =
+      viewMode === "subcategories" ? subcategoriesArray : scopesArray;
+
+    const unProjectedSlices = slicesArray.filter(({ subcategory }) => {
+      const projectedStringArray = subcategory.split("_");
+      return projectedStringArray.length === 1;
+    });
+
+    return unProjectedSlices.map((subcategoryObj) => {
+      const { subcategory } = subcategoryObj;
+      const emissionsWithThisCategory = emissions.filter(
+        filterFunction(subcategory)
+      );
+
+      const categoryEmissionsSum = sumTonsCo2e(emissionsWithThisCategory);
+
+      return {
+        ...subcategoryObj,
+        emissionPercentage: (categoryEmissionsSum / emissionsSum) * 100,
+      };
+    });
+  };
+
+  const pieSlicesWithPercentages = formatChartPieSlices();
+
+  return (
+    <ResponsiveContainer height="100%" aspect={1.5}>
+      <PieChart ref={pieChartRef}>
+        <Pie
+          data={pieSlicesWithPercentages}
+          outerRadius={"100%"}
+          fill="#8884d8"
+          dataKey="emissionPercentage"
+          cx="50%"
+          cy="50%"
+        >
+          {pieSlicesWithPercentages.map(({ category, name, color }) => (
+            <Cell
+              key={`emissions-pie-chart-cell-${category}`}
+              name={name}
+              fill={color}
+            />
+          ))}
+        </Pie>
+        <ChartTooltip
+          wrapperStyle={{ zIndex: 99 }}
+          content={<PieChartCustomTooltip />}
+        />
+      </PieChart>
+    </ResponsiveContainer>
+  );
+};
+export default EmissionsPieChart;

package/src/components/EmissionsReductionGraph.js

@@ -0,0 +1,107 @@
+import React from "react";
+
+import { Box, Typography } from "@mui/material";
+import { useTheme } from "@mui/styles";
+import {
+  ResponsiveContainer,
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+} from "recharts";
+
+import { calculateEmissionsDecayRate } from "@aclymatepackages/other-helpers";
+
+const CustomTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    const { remainingAmount } = payload[0].payload;
+    return (
+      <Box
+        style={{
+          background: "#fff",
+          border: "1px solid #ccc",
+          padding: "10px",
+          borderRadius: "5px",
+          boxShadow: "0 2px 5px rgba(0, 0, 0, 0.3)",
+          fontSize: "14px",
+        }}
+      >
+        <Typography
+          variant="body2"
+          style={{ marginBottom: "5px", fontWeight: "bold" }}
+        >
+          Year: {label}
+        </Typography>
+        <Typography variant="body2" style={{ marginBottom: "5px" }}>
+          Remaining Amount: {remainingAmount.toFixed(2)}
+        </Typography>
+      </Box>
+    );
+  }
+  return null;
+};
+
+const EmissionsReductionGraph = ({
+  initialEmissionAmount = 100,
+  desiredReductionPercentage = 0.5,
+  targetYear = 2030,
+  startYear = new Date().getFullYear(),
+  lineColor = null,
+  width = "100%",
+  height = 450,
+  carbonUnit = "lbs",
+}) => {
+  const { palette } = useTheme();
+
+  const totalYears = targetYear - startYear;
+
+  const buildDecayLineArray = () => {
+    const decayRate = calculateEmissionsDecayRate(
+      desiredReductionPercentage,
+      totalYears
+    );
+
+    return [...new Array(totalYears + 1)].map((_, idx) => ({
+      year: startYear + idx,
+      remainingAmount: initialEmissionAmount * Math.exp(decayRate * idx),
+      decayRate,
+    }));
+  };
+
+  return (
+    <ResponsiveContainer width={width} height={height}>
+      <LineChart
+        data={buildDecayLineArray()}
+        margin={{ top: 20, right: 30, left: 10, bottom: 10 }}
+      >
+        <CartesianGrid strokeDasharray="3 3" stroke="#bbb" />
+        <XAxis
+          dataKey="year"
+          stroke="#333"
+          tick={{ fill: "#333", fontSize: 12 }}
+        />
+        <YAxis
+          tickFormatter={(value) => `${value} ${carbonUnit}`}
+          stroke="#333"
+          tick={{ fill: "#333", fontSize: 12 }}
+        />
+        <Tooltip content={<CustomTooltip />} />
+        <Line
+          type="monotone"
+          dataKey="remainingAmount"
+          stroke={lineColor || palette.error.main}
+          strokeWidth={2}
+          dot={{
+            stroke: lineColor || palette.error.main,
+            strokeWidth: 2,
+            r: 6,
+          }}
+          activeDot={{ r: 8 }}
+        />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+};
+export default EmissionsReductionGraph;

package/src/components/FootprintEquivalencies.js

@@ -0,0 +1,203 @@
+import React, { useState } from "react";
+
+import { Box, Grid, ButtonBase, Typography, Paper } from "@mui/material";
+import { ThemeProvider } from "@mui/material/styles";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faSteeringWheel,
+  faTrees,
+  faIcicles,
+  faHamburger,
+  faPiggyBank,
+  faMobile,
+} from "@fortawesome/pro-solid-svg-icons";
+
+import {
+  kgsToTons,
+  hexToRgba,
+  tonsToLbs,
+  convertFootprintToDriving,
+  convertFootprintToIce,
+  footprintToHamburgers,
+} from "@aclymatepackages/converters";
+import { formatDecimal } from "@aclymatepackages/formatters";
+import { useLayoutHelpers, mergeDarkTheme } from "@aclymatepackages/themes";
+
+//source: Google Drive: Aclymate Team\Climate Accounting\Data\Tree Carbon Calculator\CarbonCalculator31.xls
+const convertFootprintToTreeYears = (footprintTons) => {
+  const treeYearsDecimal = footprintTons / kgsToTons(160.6);
+  return formatDecimal(treeYearsDecimal.toFixed(1));
+};
+
+//source: https://shrinkthatfootprint.com/carbon-targets-for-your-footprint/
+const footprintToCarbonBudgetPercent = (footprintTons) =>
+  `${formatDecimal((footprintTons / 4.1) * 100)}%`;
+
+//SOURCE:  https://news.energysage.com/how-many-watts-does-a-phone-charger-use/
+//US average carbon intensity comes from carbon intensity data in app backend
+const footprintToCellphoneYears = (footprintTons) => {
+  const US_AVG_TONS_CO2E_PER_KWH = 0.00043222913699413057;
+  const CELLPHONE_KWH_PER_YEAR = 1.83;
+  const footprintYears =
+    footprintTons / US_AVG_TONS_CO2E_PER_KWH / CELLPHONE_KWH_PER_YEAR;
+
+  return formatDecimal(footprintYears.toFixed(1));
+};
+
+const FootprintEquivalencies = ({
+  footprintTons,
+  exclusionCategories = [],
+}) => {
+  const { theme, isMobile, isMedium } = useLayoutHelpers();
+
+  const [selectedCategoryIdx, setSelectedCategoryIdx] = useState(0);
+
+  const footprintEquivalentsCategories = [
+    {
+      type: "driving-emissions",
+      icon: faSteeringWheel,
+      buildString: (carbon, equivalency) =>
+        `Your ${carbon} lbs. of carbon is like driving a car ${equivalency} miles.`,
+      equivalency: convertFootprintToDriving(footprintTons),
+      color: "vehicles",
+      backgroundOpacity: 0.5,
+    },
+    {
+      type: "tree-sequestration",
+      icon: faTrees,
+      buildString: (carbon, equivalency) =>
+        `It would take an average oak tree ${equivalency} years to absorb your ${carbon} lbs. of carbon`,
+      equivalency: convertFootprintToTreeYears(footprintTons),
+      color: "secondary",
+      backgroundOpacity: 0.3,
+    },
+    {
+      type: "melting-polar-bear",
+      icon: faIcicles,
+      buildString: (carbon, equivalency) =>
+        `Your ${carbon} lbs. of carbon is enough to permanently melt ${equivalency} square ${
+          equivalency === "1" ? "foot" : "feet"
+        } of Arctic sea ice`,
+      equivalency: formatDecimal(convertFootprintToIce(footprintTons)),
+      color: "travel",
+      backgroundOpacity: 0.3,
+    },
+    {
+      type: "eating-hamburgers",
+      icon: faHamburger,
+      buildString: (carbon, equivalency) =>
+        `Your ${carbon} lbs. of carbon is equivalent to the emissions of eating ${equivalency} hamburgers`,
+      equivalency: formatDecimal(footprintToHamburgers(footprintTons)),
+      color: "mileage",
+      backgroundOpacity: 0.4,
+    },
+    {
+      type: "carbon-budget",
+      icon: faPiggyBank,
+      buildString: (carbon, equivalency) =>
+        `Your ${carbon} lbs. of carbon is ${equivalency} of the annual carbon budget that we all need to achieve to reach our global climate goals.`,
+      equivalency: footprintToCarbonBudgetPercent(footprintTons),
+      color: "offices",
+      backgroundOpacity: 0.5,
+    },
+    {
+      type: "cell-phone-charging",
+      icon: faMobile,
+      buildString: (carbon, equivalency) =>
+        `Your ${carbon} lbs. of carbon is enough to keep your cellphone charged for ${equivalency} years`,
+      equivalency: footprintToCellphoneYears(footprintTons),
+      color: "rides",
+      backgroundOpacity: 0.5,
+    },
+  ];
+
+  const filteredEquivalentCategories = footprintEquivalentsCategories.filter(
+    ({ type }) => !exclusionCategories.includes(type)
+  );
+
+  const { type, color, buildString, equivalency } =
+    filteredEquivalentCategories[selectedCategoryIdx];
+
+  return (
+    <Grid container spacing={2} alignItems="stretch" justifyContent="center">
+      <Grid item lg={2} xs={12}>
+        <Grid
+          container
+          direction={isMedium ? "row" : "column"}
+          spacing={2}
+          justifyContent={isMedium ? "space-around" : "center"}
+          wrap="nowrap"
+        >
+          {filteredEquivalentCategories.map(({ icon, color }, idx) => (
+            <Grid item key={`grid-equivalency-carousel-icon-${idx}`}>
+              <ButtonBase onClick={() => setSelectedCategoryIdx(idx)}>
+                <Box
+                  style={{
+                    height: "50px",
+                    width: "50px",
+                    backgroundColor:
+                      idx === selectedCategoryIdx
+                        ? theme.palette[color].main
+                        : "white",
+                    borderRadius: "50%",
+                  }}
+                  display="flex"
+                  alignItems="center"
+                  justifyContent="center"
+                >
+                  <FontAwesomeIcon
+                    icon={icon}
+                    size="2x"
+                    style={{
+                      color:
+                        idx === selectedCategoryIdx
+                          ? "white"
+                          : theme.palette[color].main,
+                    }}
+                  />
+                </Box>
+              </ButtonBase>
+            </Grid>
+          ))}
+        </Grid>
+      </Grid>
+      <Grid item lg={6} xs={12}>
+        <Box display="flex" justifyContent="center">
+          <Box position="relative">
+            <img
+              alt={`${type}-image`}
+              src={`https://dashboard.aclymate.com/images/footprint-equivalencies/${type}.svg`}
+              style={{ width: "100%" }}
+            />
+            <Paper
+              style={{
+                backgroundColor: hexToRgba(theme.palette[color].main, 0.85),
+                position: "absolute",
+                bottom: 0,
+                left: 0,
+                right: 0,
+              }}
+            >
+              <Box p={isMobile ? 0.25 : 1}>
+                <ThemeProvider theme={mergeDarkTheme}>
+                  <Typography
+                    variant={isMobile ? "subtitle2" : "subtitle1"}
+                    align="center"
+                    color="textPrimary"
+                  >
+                    {buildString(
+                      formatDecimal(tonsToLbs(footprintTons)),
+                      equivalency
+                    )}
+                  </Typography>
+                </ThemeProvider>
+              </Box>
+            </Paper>
+          </Box>
+        </Box>
+      </Grid>
+    </Grid>
+  );
+};
+export default FootprintEquivalencies;