@aclymatepackages/modules 1.0.0

package/src/components/EmissionsChart.js

@@ -0,0 +1,579 @@
+import React from "react";
+import dayjs from "dayjs";
+import dayOfYear from "dayjs/plugin/dayOfYear";
+
+import {
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  ResponsiveContainer,
+  Area,
+  Bar,
+  ComposedChart,
+  Line,
+  Tooltip as ChartTooltip,
+} from "recharts";
+
+import { useTheme } from "@mui/styles";
+import { Grid, Typography, Box } from "@mui/material";
+
+import { formatDecimal } from "@aclymatepackages/formatters";
+import {
+  findInclusiveDateDifference,
+  findYearFirstDate,
+  findQuarterDate,
+} from "@aclymatepackages/date-helpers";
+import { DAYS_PER_YEAR } from "@aclymatepackages/constants";
+import { sumTonsCo2e } from "@aclymatepackages/other-helpers";
+
+import EmissionsCustomTooltip from "./EmissionsCustomTooltip";
+import useChartWarningLabels from "./useChartWarningLabels";
+
+import {
+  buildScopesRealDataObj,
+  buildSubcategoriesDataObj,
+  sumEmissionsTonsBySubcategory,
+  buildEmissionGroupData,
+} from "@aclymatepackages/chart-helpers";
+import {
+  subcategories,
+  allSubcategoriesWithOther,
+} from "@aclymatepackages/subcategories";
+
+dayjs.extend(dayOfYear);
+
+const DAYS_IN_QUARTER = DAYS_PER_YEAR / 4;
+
+const findObjectValuesSum = (object) =>
+  Object.values(object).reduce((sum, value) => sum + value, 0);
+
+const findLabelDate = (period, label) => {
+  if (period === "quarter") {
+    return findQuarterDate(label);
+  }
+
+  if (period === "year") {
+    return findYearFirstDate(label);
+  }
+
+  return dayjs(label, "MM-YY");
+};
+
+const isDateFirstDateOfPeriod = (date, period) => {
+  if (period === "quarter") {
+    const quarterFirstDate = findQuarterDate(date);
+    return dayjs(date).isSame(quarterFirstDate, "day");
+  }
+
+  if (period === "year") {
+    const yearFirstDate = findYearFirstDate(date);
+    return dayjs(date).isSame(yearFirstDate, "day");
+  }
+
+  return dayjs(date).date() === 1;
+};
+
+const findIsEstimatedFirstDateLabel = ({
+  startDate,
+  earliestEmissionDate,
+  label,
+  period,
+}) => {
+  const labelDate = findLabelDate(period, label);
+  const labelStartDateDifference = findInclusiveDateDifference(
+    labelDate,
+    startDate,
+    period
+  );
+  const labelDateIsFirstOfPeriod = isDateFirstDateOfPeriod(
+    earliestEmissionDate,
+    period
+  );
+
+  return labelStartDateDifference === 1 && !labelDateIsFirstOfPeriod;
+};
+
+const findIsFirstPeriodEstimated = (chartLabelsArray, period) =>
+  !chartLabelsArray.reduce(
+    (acc, label) => acc && !findIsEstimatedFirstDateLabel({ label, period }),
+    true
+  );
+
+const findIsDataProjected = (latestEmissionDate) => {
+  if (!dayjs(latestEmissionDate).isSame(dayjs(), "month")) {
+    return false;
+  }
+  return dayjs(latestEmissionDate).date() !== dayjs().daysInMonth();
+};
+
+const findProjectedSubcategoryValueFromEmissions =
+  ({ emissions, projectionMultiplier }) =>
+  (subcategory) => {
+    const recurringSubcategoryEmissionsSum = sumEmissionsTonsBySubcategory(
+      emissions,
+      subcategory
+    );
+
+    return projectionMultiplier * recurringSubcategoryEmissionsSum;
+  };
+
+const buildSubcategoriesProjectionObj = (emissions, projectionMultiplier) => {
+  const findProjectedSubcategoryValue =
+    findProjectedSubcategoryValueFromEmissions({
+      emissions,
+      projectionMultiplier,
+    });
+
+  return {
+    "commuting-auto_projected": findProjectedSubcategoryValue("commuting-auto"),
+    "home-office_projected": findProjectedSubcategoryValue("home-office"),
+    utilities_projected: findProjectedSubcategoryValue("utilities"),
+  };
+};
+
+const buildScopesProjectionObj = (emissions, projectionMultiplier) => {
+  const findProjectedSubcategoryValue =
+    findProjectedSubcategoryValueFromEmissions({
+      emissions,
+      projectionMultiplier,
+    });
+
+  const projectedCommutingEmissionsTons =
+    findProjectedSubcategoryValue("commuting-auto");
+  const projectedHomeOfficeEmissionsTons =
+    findProjectedSubcategoryValue("homeOffice");
+  const projectedElectricityEmissionsTons =
+    findProjectedSubcategoryValue("electricity");
+  const projectedGasEmissionsTons = findProjectedSubcategoryValue("gas");
+
+  return {
+    scope1_projected: projectedGasEmissionsTons,
+    scope2_projected: projectedElectricityEmissionsTons,
+    scope3_projected:
+      projectedHomeOfficeEmissionsTons + projectedCommutingEmissionsTons,
+  };
+};
+
+const buildGroupedChartData = ({
+  startDate = "",
+  period,
+  isDataProjected,
+  isFirstPeriodEstimated,
+  groupedEmissions,
+  buildProjectionObj,
+  buildRealDataObj,
+  showProjection,
+}) => {
+  const findPeriodPosition = (idx) => {
+    if (!idx) {
+      return "first";
+    }
+    if (idx === groupedEmissions.length - 1) {
+      return "last";
+    }
+    return "middle";
+  };
+
+  const forwardProjectionPeriodFraction = (period) => {
+    if (period === "month") {
+      const daysInMonth = dayjs().daysInMonth();
+      return dayjs().date() / daysInMonth;
+    }
+
+    if (period === "quarter") {
+      const firstDayInQuarter = findQuarterDate(dayjs());
+      const currentDaysIntoQuarter = dayjs().diff(firstDayInQuarter, "day");
+      return currentDaysIntoQuarter / DAYS_IN_QUARTER;
+    }
+
+    const currentDaysIntoYear = dayjs().dayOfYear();
+    return currentDaysIntoYear / DAYS_PER_YEAR;
+  };
+
+  const backwardsProjectionPeriodFraction = (period) => {
+    const formattedStartDate = dayjs(startDate);
+    if (period === "month") {
+      const daysInMonth = formattedStartDate.daysInMonth();
+      const daysFromEndOfMonth = daysInMonth - formattedStartDate.date();
+      return daysFromEndOfMonth / daysInMonth;
+    }
+
+    if (period === "quarter") {
+      const lastDateInQuarter = findQuarterDate(startDate, false);
+      const daysFromEndOfQuarter =
+        Math.abs(formattedStartDate.diff(lastDateInQuarter, "day")) + 1;
+      return daysFromEndOfQuarter / DAYS_IN_QUARTER;
+    }
+
+    const daysFromEndOfYear = Math.abs(
+      formattedStartDate.diff(
+        dayjs(new Date(formattedStartDate.year(), 12, 31)),
+        "day"
+      )
+    );
+
+    return daysFromEndOfYear / DAYS_PER_YEAR;
+  };
+
+  const findPeriodProjectionMultiplier = ({ period, position }) => {
+    if (
+      !showProjection ||
+      position === "middle" ||
+      (position === "first" && !isFirstPeriodEstimated) ||
+      (position === "last" && !isDataProjected)
+    ) {
+      return 0;
+    }
+
+    //TODO: -UPDATE: this projection function doesn't take into account closed offices or terminated employee, so we probably need to rethink it
+    const projectionFraction =
+      position === "first"
+        ? backwardsProjectionPeriodFraction(period)
+        : forwardProjectionPeriodFraction(period);
+
+    return 1 / projectionFraction - 1;
+  };
+
+  return groupedEmissions.map((emissionsArray, idx) => {
+    const position = findPeriodPosition(idx, groupedEmissions);
+    const projectionMultiplier = findPeriodProjectionMultiplier({
+      startDate,
+      position,
+      period,
+      isDataProjected,
+      isFirstPeriodEstimated,
+    });
+
+    const projectedCategoriesObj = buildProjectionObj(
+      emissionsArray,
+      projectionMultiplier
+    );
+
+    const subcategoriesObj = buildRealDataObj(
+      emissionsArray,
+      allSubcategoriesWithOther
+    );
+
+    const chartCategoriesObj = {
+      ...projectedCategoriesObj,
+      ...subcategoriesObj,
+    };
+
+    const buildWarningObj = () => {
+      const singleEmissionWarning = emissionsArray.find(
+        ({ warning }) => !!warning
+      );
+
+      if (!singleEmissionWarning) {
+        return null;
+      }
+
+      const { warning } = singleEmissionWarning;
+      return warning;
+    };
+
+    return {
+      ...chartCategoriesObj,
+      warning: buildWarningObj(),
+      id: `emissions-chart-group-${idx}`,
+      emissionsSumTons: sumTonsCo2e(emissionsArray),
+      totalEmissionsSumTons: findObjectValuesSum(chartCategoriesObj),
+      projectedEmissionsSumTons: findObjectValuesSum(projectedCategoriesObj),
+    };
+  });
+};
+
+const addTrendlineToChartData = (chartData) => {
+  const averageX = (chartData.length - 1) / 2;
+  const averageY =
+    chartData.reduce(
+      (sum, { totalEmissionsSumTons }) =>
+        Number(sum) + Number(totalEmissionsSumTons),
+      0
+    ) / chartData.length;
+
+  const trendLineCalcData = chartData.map(({ totalEmissionsSumTons }, idx) => {
+    const xDifferenceFromMean = idx - averageX;
+    const yDifferenceFromMean = totalEmissionsSumTons - averageY;
+    const xDifferenceSquared = xDifferenceFromMean * xDifferenceFromMean;
+    const xyDifferenceFromMean = xDifferenceFromMean * yDifferenceFromMean;
+    return { xDifferenceSquared, xyDifferenceFromMean };
+  });
+
+  const xDifferenceSquaredSum = trendLineCalcData.reduce(
+    (sum, { xDifferenceSquared }) => sum + xDifferenceSquared,
+    0
+  );
+  const xyDifferenceFromMeanSum = trendLineCalcData.reduce(
+    (sum, { xyDifferenceFromMean }) => sum + xyDifferenceFromMean,
+    0
+  );
+
+  const trendlineSlope = xyDifferenceFromMeanSum / xDifferenceSquaredSum;
+
+  const trendlineIntercept = averageY - trendlineSlope * averageX;
+
+  const findTrendlineValue = (x) => trendlineSlope * x + trendlineIntercept;
+
+  return chartData.map(({ totalEmissionsSumTons, ...otherProps }, idx) => ({
+    ...otherProps,
+    trendline: findTrendlineValue(idx),
+  }));
+};
+
+const LabeledEmissionsChart = ({
+  data,
+  chartRef,
+  type,
+  displayUnitLabel,
+  chartArray,
+  aspect = 3,
+  showTooltip = true,
+}) => {
+  const { palette } = useTheme();
+
+  const { warningLabels, labelSetter } = useChartWarningLabels({
+    data,
+    warningField: "warning",
+    barSumField: "totalEmissionsSumTons",
+  });
+
+  const isTrendLineGood = data[0]?.trendLine > data[data.length - 1]?.trendLine;
+
+  const ChartElement = type === "bar" ? Bar : Area;
+
+  return (
+    <Box position="relative">
+      <ResponsiveContainer aspect={aspect}>
+        <ComposedChart width={500} height={300} data={data} ref={chartRef}>
+          <XAxis dataKey="label" interval="preserveStartEnd" height={20} />
+          <YAxis
+            tickFormatter={(tick) =>
+              `${formatDecimal(tick)} ${displayUnitLabel}`
+            }
+            width={100}
+          />
+          <CartesianGrid strokeDasharray="3 3" />
+          {showTooltip && (
+            <ChartTooltip
+              wrapperStyle={{ zIndex: 99 }}
+              content={
+                <EmissionsCustomTooltip
+                  categoriesArray={chartArray}
+                  displayUnitLabel={displayUnitLabel}
+                />
+              }
+            />
+          )}
+          {chartArray.map(({ subcategory, color, ...otherProps }) => (
+            <ChartElement
+              key={`emissions-chart-element-${subcategory}`}
+              type="monotone"
+              stroke="none"
+              fillOpacity={1}
+              stackId="a"
+              fill={color}
+              dataKey={subcategory}
+              {...otherProps}
+            >
+              {labelSetter}
+            </ChartElement>
+          ))}
+          <Line
+            name="6 Month Trend"
+            connectNulls
+            dataKey="trendline"
+            stroke={
+              isTrendLineGood ? palette.secondary.main : palette.error.main
+            }
+            strokeWidth={4}
+            dot={false}
+            strokeDasharray="5 5"
+          />
+        </ComposedChart>
+      </ResponsiveContainer>
+      {warningLabels}
+    </Box>
+  );
+};
+
+const EmissionsChart = ({
+  dataArray: emissions,
+  type,
+  viewMode = "subcategories",
+  graphPeriod,
+  chartRef,
+  showTrendline,
+  showProjection,
+  displayUnit,
+  unitConverter,
+  aspect,
+  isPercentageChart,
+  showTooltip,
+  startDate,
+  convertCarbonUnits,
+  displayUnitLabel,
+}) => {
+  const {
+    chartLabelsArray,
+    latestEmissionDate,
+    scopesArray,
+    subcategoriesArray,
+    period,
+    groupedEmissions,
+  } = buildEmissionGroupData(emissions, graphPeriod, startDate);
+
+  const isDataProjected = findIsDataProjected(latestEmissionDate);
+  const isFirstPeriodEstimated = findIsFirstPeriodEstimated(
+    chartLabelsArray,
+    graphPeriod
+  );
+
+  const buildProjectionObj =
+    viewMode === "subcategories"
+      ? buildSubcategoriesProjectionObj
+      : buildScopesProjectionObj;
+
+  const buildRealDataObj =
+    viewMode === "subcategories"
+      ? buildSubcategoriesDataObj
+      : buildScopesRealDataObj;
+
+  const buildChartData = () => {
+    const preliminaryChartData = buildGroupedChartData({
+      startDate,
+      period,
+      isDataProjected,
+      isFirstPeriodEstimated,
+      groupedEmissions,
+      buildProjectionObj,
+      buildRealDataObj,
+      showProjection,
+    });
+
+    const formattedLabels = chartLabelsArray.map((label, idx) => {
+      if (idx === chartLabelsArray.length - 1 && isDataProjected) {
+        return `${label}*`;
+      }
+
+      if (idx || !isFirstPeriodEstimated) {
+        return label;
+      }
+
+      return `${label}**`;
+    });
+
+    const convertChartDataObject = (chartDataObj, converter) =>
+      Object.fromEntries(
+        Object.entries(chartDataObj).map(([key, value]) => {
+          if (typeof value !== "number") {
+            return [key, value];
+          }
+          return [key, converter(value)];
+        })
+      );
+
+    const labelChartData = (chartData) =>
+      chartData.map((data, idx) => ({
+        ...data,
+        label: formattedLabels[idx],
+      }));
+
+    if (isPercentageChart) {
+      const percentageConvertedChartData = preliminaryChartData.map(
+        (chartDataObj) => {
+          const objectSubcategoryProperties = Object.keys(chartDataObj).filter(
+            (key) =>
+              subcategories.find(({ subcategory }) => subcategory === key)
+          );
+          const objectSubcategoryValues = objectSubcategoryProperties.map(
+            (subcategory) => ({
+              key: subcategory,
+              value: chartDataObj[subcategory],
+            })
+          );
+
+          const periodEmissionsSum = objectSubcategoryValues.reduce(
+            (sum, { value }) => value + sum,
+            0
+          );
+
+          const percentageConverter = (value) =>
+            (value / periodEmissionsSum) * 100;
+
+          const newObject = Object.fromEntries(
+            objectSubcategoryValues.map(({ key, value }) => [key, value])
+          );
+
+          return convertChartDataObject(newObject, percentageConverter);
+        }
+      );
+      return labelChartData(percentageConvertedChartData);
+    }
+
+    const unitConvertedChartData = preliminaryChartData.map((chartDataObj) =>
+      convertChartDataObject(chartDataObj, (value) =>
+        unitConverter ? unitConverter(value) : convertCarbonUnits(value)
+      )
+    );
+
+    const labeledChartData = labelChartData(unitConvertedChartData);
+
+    if (showTrendline) {
+      return addTrendlineToChartData(labeledChartData);
+    }
+
+    return labeledChartData;
+  };
+
+  const chartData = buildChartData();
+
+  const chartArray = viewMode === "scopes" ? scopesArray : subcategoriesArray;
+
+  return (
+    <Grid container direction="column">
+      <Grid item>
+        <LabeledEmissionsChart
+          data={chartData}
+          chartRef={chartRef}
+          type={type}
+          displayUnitLabel={
+            isPercentageChart ? "%" : displayUnit || displayUnitLabel
+          }
+          chartArray={chartArray}
+          aspect={aspect}
+          showTooltip={showTooltip}
+        />
+      </Grid>
+      {(isDataProjected || isFirstPeriodEstimated) && (
+        <Grid item container justifyContent="flex-end">
+          <Grid item>
+            {isDataProjected && showProjection && (
+              <Typography
+                variant="caption"
+                color="textSecondary"
+                display="block"
+                align="right"
+              >
+                *Data in the most recent period is projected since this period
+                isn't complete yet.
+              </Typography>
+            )}
+            {isFirstPeriodEstimated && showProjection && (
+              <Typography
+                variant="caption"
+                color="textSecondary"
+                display="block"
+                align="right"
+              >
+                **Data in the first period is estimated since your start date is
+                in the middle of this period.
+              </Typography>
+            )}
+          </Grid>
+        </Grid>
+      )}
+    </Grid>
+  );
+};
+export default EmissionsChart;

package/src/components/EmissionsCustomTooltip.js

@@ -0,0 +1,146 @@
+import React from "react";
+
+import { Grid, Typography, Paper, Box, ThemeProvider } from "@mui/material";
+
+import { DefaultPaper } from "@aclymatepackages/atoms";
+import { formatDecimal } from "@aclymatepackages/formatters";
+import { mergeDarkTheme } from "@aclymatepackages/themes";
+
+import CustomTooltipDisplayRow from "./CustomTooltipDisplayRow";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const StatusDisplay = ({ dataArray, id }) => {
+  const { status } = dataArray.find((dataObj) => dataObj?.id === id) || {};
+  if (!status) {
+    return <></>;
+  }
+
+  const { color, icon, tooltip } = status;
+  return (
+    <Grid item>
+      <Paper style={{ backgroundColor: color }}>
+        <Box p={1}>
+          <Grid container spacing={2} alignItems="center">
+            <Grid item>
+              <FontAwesomeIcon
+                icon={icon}
+                style={{ color: "white" }}
+                size="2x"
+              />
+            </Grid>
+            <Grid item>
+              <ThemeProvider theme={mergeDarkTheme}>
+                <Typography variant="subtitle2" color="textPrimary">
+                  {tooltip}
+                </Typography>
+              </ThemeProvider>
+            </Grid>
+          </Grid>
+        </Box>
+      </Paper>
+    </Grid>
+  );
+};
+
+const EmissionsCustomTooltip = ({
+  payload,
+  categoriesArray,
+  labelAnnotation = "",
+  dataArray = [],
+  displayUnitLabel,
+}) => {
+  const buildSubtitle = (realCarbonVolume, projectedCarbonVolume) => {
+    const baseSubtitle = `${formatDecimal(
+      realCarbonVolume
+    )} ${displayUnitLabel} CO2`;
+
+    if (!projectedCarbonVolume) {
+      return baseSubtitle;
+    }
+
+    return `${baseSubtitle} (${formatDecimal(
+      projectedCarbonVolume
+    )} projected)`;
+  };
+
+  const columnDetails = payload?.[0]?.payload;
+  const {
+    label = "",
+    trendline,
+    emissionsSumTons,
+    projectedEmissionsSumTons,
+    id,
+    ...graphValues
+  } = columnDetails || {};
+  const cleanLabel = label.replaceAll(/[*]/gi, "");
+
+  const filteredFormattedGraphValuesArray = Object.entries(graphValues)
+    .filter(([_, value]) => value)
+    .map(([key, value]) => {
+      const [subcategory, projected] = key.split("_");
+      return { subcategory, projected: !!projected, value };
+    });
+
+  const uniqueSubcategories = [
+    ...new Set(
+      filteredFormattedGraphValuesArray.map(({ subcategory }) => subcategory)
+    ),
+  ];
+
+  const subcategoryDisplayArray = uniqueSubcategories.map((subcategory) => {
+    const realValue = filteredFormattedGraphValuesArray.find(
+      (graphValue) =>
+        graphValue.subcategory === subcategory && !graphValue.projected
+    )?.value;
+
+    const projectedValue = filteredFormattedGraphValuesArray.find(
+      (graphValue) =>
+        graphValue.subcategory === subcategory && !!graphValue.projected
+    )?.value;
+
+    return {
+      subcategory,
+      realValue,
+      projectedValue,
+      subtitle: buildSubtitle(realValue, projectedValue),
+    };
+  });
+
+  const displayArrayWithIcons = subcategoryDisplayArray
+    .map(({ subcategory, ...otherProps }) => {
+      const { Icon, color, icon, name } =
+        categoriesArray.find(
+          (categoryObj) => categoryObj.subcategory === subcategory
+        ) || {};
+      return { subcategory, Icon, icon, color, name, ...otherProps };
+    })
+    .filter(({ color }) => color);
+
+  return (
+    <DefaultPaper style={{ zIndex: 99999, borderColor: "transparent" }}>
+      <Grid container direction="column" spacing={2}>
+        <Grid item>
+          <Typography
+            variant="h6"
+            color="textPrimary"
+          >{`${cleanLabel} Emissions`}</Typography>
+          <Typography variant="subtitle2" color="textSecondary">
+            {`${buildSubtitle(
+              emissionsSumTons,
+              projectedEmissionsSumTons
+            )} ${labelAnnotation}`}
+          </Typography>
+        </Grid>
+        {displayArrayWithIcons.map((displayData, idx) => (
+          <CustomTooltipDisplayRow
+            key={`tooltip-display-row-${idx}`}
+            {...displayData}
+          />
+        ))}
+        <StatusDisplay id={id} dataArray={dataArray} />
+      </Grid>
+    </DefaultPaper>
+  );
+};
+export default EmissionsCustomTooltip;