@aclymatepackages/modules 2.0.15 → 2.1.0

package/dist/components/EmissionsChart.js

@@ -1,7 +1,6 @@
 "use strict";
 
 require("core-js/modules/es.object.assign.js");
-require("core-js/modules/es.weak-map.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,23 +8,19 @@ 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 = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _recharts = require("recharts");
 var _material = require("@mui/material");
 var _formatters = require("@aclymatepackages/formatters");
 var _otherHelpers = require("@aclymatepackages/other-helpers");
-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 = ["viewBox", "labels", "setLabels", "label"],
-  _excluded3 = ["subcategory", "color"];
+  _excluded2 = ["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 && {}.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; }
@@ -113,70 +108,16 @@ const addTrendlineToChartData = chartData => {
     });
   });
 };
-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)
-    },
-    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 => {
+const LabeledEmissionsChart = _ref8 => {
   var _data$, _data;
   let {
-    graphPeriod,
     data,
     type,
     displayUnitLabel,
     chartArray,
     aspect = 3,
-    showTooltip,
-    netZeroPercentage,
-    baseline
-  } = _ref10;
+    showTooltip
+  } = _ref8;
   const {
     palette
   } = (0, _material.useTheme)();
@@ -188,60 +129,10 @@ const LabeledEmissionsChart = _ref10 => {
     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",
-    ref: chartContainerRef
+    position: "relative"
   }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
     aspect: aspect
   }, /*#__PURE__*/_react.default.createElement(_recharts.ComposedChart, {
@@ -265,12 +156,12 @@ const LabeledEmissionsChart = _ref10 => {
       categoriesArray: chartArray,
       displayUnitLabel: displayUnitLabel
     })
-  }), chartArray.map(_ref12 => {
+  }), chartArray.map(_ref9 => {
     let {
         subcategory,
         color
-      } = _ref12,
-      otherProps = _objectWithoutProperties(_ref12, _excluded3);
+      } = _ref9,
+      otherProps = _objectWithoutProperties(_ref9, _excluded2);
     return /*#__PURE__*/_react.default.createElement(ChartElement, _extends({
       key: "emissions-chart-element-".concat(subcategory),
       type: "monotone",
@@ -288,29 +179,9 @@ const LabeledEmissionsChart = _ref10 => {
     strokeWidth: 4,
     dot: false,
     strokeDasharray: "5 5"
-  }), !!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))));
+  }))), warningLabels);
 };
-const EmissionsChart = _ref14 => {
+const EmissionsChart = _ref10 => {
   let {
     dataArray: emissions,
     type,
@@ -327,7 +198,7 @@ const EmissionsChart = _ref14 => {
     branding,
     netZeroPercentage,
     noLine = true
-  } = _ref14;
+  } = _ref10;
   const {
     chartLabelsArray,
     scopesArray,
@@ -341,8 +212,8 @@ const EmissionsChart = _ref14 => {
       buildRealDataObj,
       viewMode
     });
-    const convertChartDataObject = (chartDataObj, converter) => Object.fromEntries(Object.entries(chartDataObj).map(_ref15 => {
-      let [key, value] = _ref15;
+    const convertChartDataObject = (chartDataObj, converter) => Object.fromEntries(Object.entries(chartDataObj).map(_ref11 => {
+      let [key, value] = _ref11;
       if (typeof value !== "number") {
         return [key, value];
       }
@@ -353,28 +224,28 @@ const EmissionsChart = _ref14 => {
     }));
     if (isPercentageChart) {
       const percentageConvertedChartData = preliminaryChartData.map(chartDataObj => {
-        const objectSubcategoryProperties = Object.keys(chartDataObj).filter(key => _subcategories.subcategories.find(_ref16 => {
+        const objectSubcategoryProperties = Object.keys(chartDataObj).filter(key => _subcategories.subcategories.find(_ref12 => {
           let {
             subcategory
-          } = _ref16;
+          } = _ref12;
           return subcategory === key;
         }));
         const objectSubcategoryValues = objectSubcategoryProperties.map(subcategory => ({
           key: subcategory,
           value: chartDataObj[subcategory]
         }));
-        const periodEmissionsSum = objectSubcategoryValues.reduce((sum, _ref17) => {
+        const periodEmissionsSum = objectSubcategoryValues.reduce((sum, _ref13) => {
           let {
             value
-          } = _ref17;
+          } = _ref13;
           return value + sum;
         }, 0);
         const percentageConverter = value => value / periodEmissionsSum * 100;
-        const newObject = Object.fromEntries(objectSubcategoryValues.map(_ref18 => {
+        const newObject = Object.fromEntries(objectSubcategoryValues.map(_ref14 => {
           let {
             key,
             value
-          } = _ref18;
+          } = _ref14;
           return [key, value];
         }));
         return convertChartDataObject(newObject, percentageConverter);

package/dist/components/ReportGraphContentLayout.js

@@ -22,6 +22,7 @@ const ReportGraphContentLayout = _ref => {
     showTooltip
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    p: 2,
     style: {
       height: height || "auto"
     }

package/package.json

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

package/src/components/EmissionsChart.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import React from "react";
 import dayjs from "dayjs";
 
 import {
@@ -10,15 +10,13 @@ import {
   Bar,
   ComposedChart,
   Line,
-  ReferenceLine,
   Tooltip as ChartTooltip,
 } from "recharts";
 
-import { Grid, Box, Chip, useTheme } from "@mui/material";
+import { Grid, Box, useTheme } from "@mui/material";
 
-import { formatDecimal, ucFirstLetters } from "@aclymatepackages/formatters";
+import { formatDecimal } from "@aclymatepackages/formatters";
 import { sumTonsCo2e } from "@aclymatepackages/other-helpers";
-import { hexToRgba } from "@aclymatepackages/converters";
 import {
   buildScopesRealDataObj,
   buildSubcategoriesDataObj,
@@ -108,67 +106,13 @@ 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),
-      }}
-      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,
   type,
   displayUnitLabel,
   chartArray,
   aspect = 3,
   showTooltip,
-  netZeroPercentage,
-  baseline,
 }) => {
   const { palette } = useTheme();
 
@@ -178,78 +122,12 @@ 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" ref={chartContainerRef}>
+    <Box position="relative">
       <ResponsiveContainer aspect={aspect}>
         <ComposedChart width={500} height={300} data={data}>
           <XAxis dataKey="label" interval="preserveStartEnd" height={20} />
@@ -296,33 +174,9 @@ 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>
   );
 };

package/src/components/ReportGraphContentLayout.js

@@ -17,7 +17,7 @@ const ReportGraphContentLayout = ({
   showTooltip,
 }) => {
   return (
-    <Box style={{ height: height || "auto" }}>
+    <Box p={2} style={{ height: height || "auto" }}>
       <Grid container spacing={2}>
         <Grid item md={4} xs={12} container direction="column" spacing={2}>
           <Grid item>