@aclymatepackages/modules 1.0.17 → 1.0.19

package/dist/components/CustomTooltipDisplayRow.js

@@ -6,17 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
+var _atoms = require("@aclymatepackages/atoms");
 var _formatters = require("@aclymatepackages/formatters");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const CustomTooltipDisplayRow = _ref => {
   let {
     category,
-    Icon,
-    icon,
     customAvatar,
     color,
     name,
-    subtitle
+    subtitle,
+    viewMode,
+    subcategory,
+    scope
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
@@ -26,16 +28,12 @@ const CustomTooltipDisplayRow = _ref => {
     alignItems: "center"
   }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true
-  }, customAvatar || /*#__PURE__*/_react.default.createElement(_material.Avatar, {
-    style: {
-      backgroundColor: color,
-      color: "white"
-    }
-  }, icon, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
-    style: {
-      color: "inherit"
-    }
-  }))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  }, customAvatar || /*#__PURE__*/_react.default.createElement(_atoms.CategoriesAvatar, {
+    viewMode: viewMode,
+    color: color,
+    subcategory: subcategory,
+    scope: scope
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true,
     container: true,
     direction: "column",

package/dist/components/EmissionsChart.js

@@ -36,7 +36,8 @@ const findObjectValuesSum = object => Object.values(object).reduce((sum, value)
 const buildGroupedChartData = _ref => {
   let {
     groupedEmissions,
-    buildRealDataObj
+    buildRealDataObj,
+    viewMode
   } = _ref;
   return groupedEmissions.map((emissionsArray, idx) => {
     const subcategoriesObj = buildRealDataObj(emissionsArray, _subcategories.allSubcategoriesWithOther);
@@ -59,7 +60,8 @@ const buildGroupedChartData = _ref => {
       warning: buildWarningObj(),
       id: "emissions-chart-group-".concat(idx),
       emissionsSumTons: (0, _otherHelpers.sumTonsCo2e)(emissionsArray),
-      totalEmissionsSumTons: findObjectValuesSum(subcategoriesObj)
+      totalEmissionsSumTons: findObjectValuesSum(subcategoriesObj),
+      viewMode
     });
   });
 };
@@ -212,7 +214,8 @@ const EmissionsChart = _ref10 => {
   const buildChartData = () => {
     const preliminaryChartData = buildGroupedChartData({
       groupedEmissions,
-      buildRealDataObj
+      buildRealDataObj,
+      viewMode
     });
     const convertChartDataObject = (chartDataObj, converter) => Object.fromEntries(Object.entries(chartDataObj).map(_ref11 => {
       let [key, value] = _ref11;
@@ -273,7 +276,9 @@ const EmissionsChart = _ref10 => {
     chartRef: chartRef,
     type: type,
     displayUnitLabel: isPercentageChart ? "%" : displayUnit || displayUnitLabel,
-    chartArray: chartArray,
+    chartArray: chartArray.map(obj => _objectSpread(_objectSpread({}, obj), {}, {
+      viewMode
+    })),
     aspect: aspect,
     showTooltip: showTooltip
   })));

package/dist/components/EmissionsCustomTooltip.js

@@ -1,15 +1,12 @@
 "use strict";
 
-require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.object.assign.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("core-js/modules/es.regexp.exec.js");
-require("core-js/modules/es.string.replace.js");
-require("core-js/modules/esnext.string.replace-all.js");
-require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.array.reduce.js");
+require("core-js/modules/es.symbol.description.js");
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _atoms = require("@aclymatepackages/atoms");
@@ -17,8 +14,6 @@ var _formatters = require("@aclymatepackages/formatters");
 var _themes = require("@aclymatepackages/themes");
 var _CustomTooltipDisplayRow = _interopRequireDefault(require("./CustomTooltipDisplayRow"));
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
-const _excluded = ["label", "trendline", "emissionsSumTons", "projectedEmissionsSumTons", "id"],
-  _excluded2 = ["subcategory"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 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; }
@@ -26,8 +21,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); }
-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; }
 const StatusDisplay = _ref => {
   let {
     dataArray,
@@ -74,85 +67,52 @@ const StatusDisplay = _ref => {
   }, tooltip)))))));
 };
 const EmissionsCustomTooltip = _ref2 => {
-  var _payload$;
   let {
-    payload,
+    payload: passedPayload,
     categoriesArray,
     labelAnnotation = "",
     dataArray = [],
     displayUnitLabel
   } = _ref2;
-  const buildSubtitle = (realCarbonVolume, projectedCarbonVolume) => {
-    const baseSubtitle = "".concat((0, _formatters.formatDecimal)(realCarbonVolume), " ").concat(displayUnitLabel, " CO2");
-    if (!projectedCarbonVolume) {
-      return baseSubtitle;
-    }
-    return "".concat(baseSubtitle, " (").concat((0, _formatters.formatDecimal)(projectedCarbonVolume), " projected)");
-  };
-  const columnDetails = payload === null || payload === void 0 || (_payload$ = payload[0]) === null || _payload$ === void 0 ? void 0 : _payload$.payload;
-  const _ref3 = columnDetails || {},
-    {
-      label = "",
-      trendline,
-      emissionsSumTons,
-      projectedEmissionsSumTons,
-      id
-    } = _ref3,
-    graphValues = _objectWithoutProperties(_ref3, _excluded);
-  const cleanLabel = label.replaceAll(/[*]/gi, "");
-  const filteredFormattedGraphValuesArray = Object.entries(graphValues).filter(_ref4 => {
-    let [_, value] = _ref4;
-    return value;
-  }).map(_ref5 => {
-    let [key, value] = _ref5;
-    const [subcategory, projected] = key.split("_");
-    return {
-      subcategory,
-      projected: !!projected,
-      value
-    };
-  });
-  const uniqueSubcategories = [...new Set(filteredFormattedGraphValuesArray.map(_ref6 => {
+  if (!passedPayload.length) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  }
+  const buildSubtitle = carbonValue => "".concat((0, _formatters.formatDecimal)(carbonValue), " ").concat(displayUnitLabel, " CO2");
+  const {
+    payload: columnDetails
+  } = passedPayload[0];
+  const {
+    label = "",
+    id
+  } = columnDetails || {};
+  const payloadDisplayArray = passedPayload.filter(_ref3 => {
     let {
-      subcategory
-    } = _ref6;
-    return subcategory;
-  }))];
-  const subcategoryDisplayArray = uniqueSubcategories.map(subcategory => {
-    var _filteredFormattedGra, _filteredFormattedGra2;
-    const realValue = (_filteredFormattedGra = filteredFormattedGraphValuesArray.find(graphValue => graphValue.subcategory === subcategory && !graphValue.projected)) === null || _filteredFormattedGra === void 0 ? void 0 : _filteredFormattedGra.value;
-    const projectedValue = (_filteredFormattedGra2 = filteredFormattedGraphValuesArray.find(graphValue => graphValue.subcategory === subcategory && !!graphValue.projected)) === null || _filteredFormattedGra2 === void 0 ? void 0 : _filteredFormattedGra2.value;
-    return {
-      subcategory,
-      realValue,
-      projectedValue,
-      subtitle: buildSubtitle(realValue, projectedValue)
-    };
+      value,
+      dataKey
+    } = _ref3;
+    return !!value && dataKey !== "trendline";
   });
-  const displayArrayWithIcons = subcategoryDisplayArray.map(_ref7 => {
+  const formattedDisplayArray = payloadDisplayArray.map(_ref4 => {
     let {
+      dataKey,
+      value
+    } = _ref4;
+    const chartSubcategory = categoriesArray.find(_ref5 => {
+      let {
         subcategory
-      } = _ref7,
-      otherProps = _objectWithoutProperties(_ref7, _excluded2);
-    const {
-      Icon,
-      color,
-      icon,
-      name
-    } = categoriesArray.find(categoryObj => categoryObj.subcategory === subcategory) || {};
-    return _objectSpread({
-      subcategory,
-      Icon,
-      icon,
-      color,
-      name
-    }, otherProps);
-  }).filter(_ref8 => {
-    let {
-      color
-    } = _ref8;
-    return color;
+      } = _ref5;
+      return subcategory === dataKey;
+    });
+    return _objectSpread(_objectSpread({}, chartSubcategory), {}, {
+      subtitle: buildSubtitle(value)
+    });
   });
+  const emissionsSumTons = payloadDisplayArray.reduce((sum, _ref6) => {
+    let {
+      value
+    } = _ref6;
+    return value + sum;
+  }, 0);
   return /*#__PURE__*/_react.default.createElement(_atoms.DefaultPaper, {
     style: {
       zIndex: 99999,
@@ -167,10 +127,10 @@ const EmissionsCustomTooltip = _ref2 => {
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     variant: "h6",
     color: "textPrimary"
-  }, "".concat(cleanLabel, " Emissions")), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+  }, "".concat(label, " Emissions")), /*#__PURE__*/_react.default.createElement(_material.Typography, {
     variant: "subtitle2",
     color: "textSecondary"
-  }, "".concat(buildSubtitle(emissionsSumTons, projectedEmissionsSumTons), " ").concat(labelAnnotation))), displayArrayWithIcons.map((displayData, idx) => /*#__PURE__*/_react.default.createElement(_CustomTooltipDisplayRow.default, _extends({
+  }, "".concat(buildSubtitle(emissionsSumTons), " ").concat(labelAnnotation))), formattedDisplayArray.map((displayData, idx) => /*#__PURE__*/_react.default.createElement(_CustomTooltipDisplayRow.default, _extends({
     key: "tooltip-display-row-".concat(idx)
   }, displayData))), /*#__PURE__*/_react.default.createElement(StatusDisplay, {
     id: id,

package/dist/components/EmissionsPieChart.js

@@ -30,9 +30,10 @@ const PieChartCustomTooltip = _ref => {
   const {
     name,
     emissionPercentage,
-    color,
-    icon,
-    Icon
+    scope,
+    subcategory,
+    viewMode,
+    color
   } = payload;
   return /*#__PURE__*/_react.default.createElement(_atoms.DefaultPaper, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     container: true,
@@ -40,16 +41,12 @@ const PieChartCustomTooltip = _ref => {
     alignItems: "center"
   }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true
-  }, /*#__PURE__*/_react.default.createElement(_material.Avatar, {
-    style: {
-      backgroundColor: color,
-      color: "white"
-    }
-  }, icon, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
-    style: {
-      color: "inherit"
-    }
-  }))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+  }, /*#__PURE__*/_react.default.createElement(_atoms.CategoriesAvatar, {
+    scope: scope,
+    subcategory: subcategory,
+    viewMode: viewMode,
+    color: color
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     variant: "subtitle1",
@@ -92,6 +89,7 @@ const EmissionsPieChart = _ref2 => {
       const emissionsWithThisCategory = emissions.filter(filterFunction(subcategory));
       const categoryEmissionsSum = (0, _otherHelpers.sumTonsCo2e)(emissionsWithThisCategory);
       return _objectSpread(_objectSpread({}, subcategoryObj), {}, {
+        viewMode,
         emissionPercentage: categoryEmissionsSum / emissionsSum * 100
       });
     });

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@aclymatepackages/modules",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "Aclymate modules",
   "author": "William Loopesko",
   "main": "dist/index.js",
   "dependencies": {
     "@aclymatepackages/array-immutability-helpers": "^1.0.0",
-    "@aclymatepackages/atoms": "^1.0.10",
+    "@aclymatepackages/atoms": "^1.0.14",
     "@aclymatepackages/chart-helpers": "^1.0.10",
     "@aclymatepackages/converters": "^1.0.0",
     "@aclymatepackages/emissions-calcs": "^1.1.1",

package/src/components/CustomTooltipDisplayRow.js

@@ -1,25 +1,29 @@
 import React from "react";
 
-import { Grid, Typography, Avatar } from "@mui/material";
+import { Grid, Typography } from "@mui/material";
 
+import { CategoriesAvatar } from "@aclymatepackages/atoms";
 import { ucFirstLetters } from "@aclymatepackages/formatters";
 
 const CustomTooltipDisplayRow = ({
   category,
-  Icon,
-  icon,
   customAvatar,
   color,
   name,
   subtitle,
+  viewMode,
+  subcategory,
+  scope,
 }) => (
   <Grid item container spacing={1} wrap="nowrap" alignItems="center">
     <Grid item>
       {customAvatar || (
-        <Avatar style={{ backgroundColor: color, color: "white" }}>
-          {icon}
-          {Icon && <Icon style={{ color: "inherit" }} />}
-        </Avatar>
+        <CategoriesAvatar
+          viewMode={viewMode}
+          color={color}
+          subcategory={subcategory}
+          scope={scope}
+        />
       )}
     </Grid>
     <Grid item container direction="column" wrap="nowrap">

package/src/components/EmissionsChart.js

@@ -37,7 +37,11 @@ dayjs.extend(dayOfYear);
 const findObjectValuesSum = (object) =>
   Object.values(object).reduce((sum, value) => sum + value, 0);
 
-const buildGroupedChartData = ({ groupedEmissions, buildRealDataObj }) => {
+const buildGroupedChartData = ({
+  groupedEmissions,
+  buildRealDataObj,
+  viewMode,
+}) => {
   return groupedEmissions.map((emissionsArray, idx) => {
     const subcategoriesObj = buildRealDataObj(
       emissionsArray,
@@ -63,6 +67,7 @@ const buildGroupedChartData = ({ groupedEmissions, buildRealDataObj }) => {
       id: `emissions-chart-group-${idx}`,
       emissionsSumTons: sumTonsCo2e(emissionsArray),
       totalEmissionsSumTons: findObjectValuesSum(subcategoriesObj),
+      viewMode,
     };
   });
 };
@@ -214,6 +219,7 @@ const EmissionsChart = ({
     const preliminaryChartData = buildGroupedChartData({
       groupedEmissions,
       buildRealDataObj,
+      viewMode,
     });
 
     const convertChartDataObject = (chartDataObj, converter) =>
@@ -293,7 +299,7 @@ const EmissionsChart = ({
           displayUnitLabel={
             isPercentageChart ? "%" : displayUnit || displayUnitLabel
           }
-          chartArray={chartArray}
+          chartArray={chartArray.map((obj) => ({ ...obj, viewMode }))}
           aspect={aspect}
           showTooltip={showTooltip}
         />

package/src/components/EmissionsCustomTooltip.js

@@ -44,78 +44,40 @@ const StatusDisplay = ({ dataArray, id }) => {
 };
 
 const EmissionsCustomTooltip = ({
-  payload,
+  payload: passedPayload,
   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, "");
+  if (!passedPayload.length) {
+    return <></>;
+  }
 
-  const filteredFormattedGraphValuesArray = Object.entries(graphValues)
-    .filter(([_, value]) => value)
-    .map(([key, value]) => {
-      const [subcategory, projected] = key.split("_");
-      return { subcategory, projected: !!projected, value };
-    });
+  const buildSubtitle = (carbonValue) =>
+    `${formatDecimal(carbonValue)} ${displayUnitLabel} CO2`;
 
-  const uniqueSubcategories = [
-    ...new Set(
-      filteredFormattedGraphValuesArray.map(({ subcategory }) => subcategory)
-    ),
-  ];
+  const { payload: columnDetails } = passedPayload[0];
+  const { label = "", id } = columnDetails || {};
 
-  const subcategoryDisplayArray = uniqueSubcategories.map((subcategory) => {
-    const realValue = filteredFormattedGraphValuesArray.find(
-      (graphValue) =>
-        graphValue.subcategory === subcategory && !graphValue.projected
-    )?.value;
+  const payloadDisplayArray = passedPayload.filter(
+    ({ value, dataKey }) => !!value && dataKey !== "trendline"
+  );
 
-    const projectedValue = filteredFormattedGraphValuesArray.find(
-      (graphValue) =>
-        graphValue.subcategory === subcategory && !!graphValue.projected
-    )?.value;
+  const formattedDisplayArray = payloadDisplayArray.map(
+    ({ dataKey, value }) => {
+      const chartSubcategory = categoriesArray.find(
+        ({ subcategory }) => subcategory === dataKey
+      );
 
-    return {
-      subcategory,
-      realValue,
-      projectedValue,
-      subtitle: buildSubtitle(realValue, projectedValue),
-    };
-  });
+      return { ...chartSubcategory, subtitle: buildSubtitle(value) };
+    }
+  );
 
-  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);
+  const emissionsSumTons = payloadDisplayArray.reduce(
+    (sum, { value }) => value + sum,
+    0
+  );
 
   return (
     <DefaultPaper style={{ zIndex: 99999, borderColor: "transparent" }}>
@@ -124,15 +86,12 @@ const EmissionsCustomTooltip = ({
           <Typography
             variant="h6"
             color="textPrimary"
-          >{`${cleanLabel} Emissions`}</Typography>
+          >{`${label} Emissions`}</Typography>
           <Typography variant="subtitle2" color="textSecondary">
-            {`${buildSubtitle(
-              emissionsSumTons,
-              projectedEmissionsSumTons
-            )} ${labelAnnotation}`}
+            {`${buildSubtitle(emissionsSumTons)} ${labelAnnotation}`}
           </Typography>
         </Grid>
-        {displayArrayWithIcons.map((displayData, idx) => (
+        {formattedDisplayArray.map((displayData, idx) => (
           <CustomTooltipDisplayRow
             key={`tooltip-display-row-${idx}`}
             {...displayData}

package/src/components/EmissionsPieChart.js

@@ -8,9 +8,9 @@ import {
   Cell,
 } from "recharts";
 
-import { Typography, Grid, Avatar } from "@mui/material";
+import { Typography, Grid } from "@mui/material";
 
-import { DefaultPaper } from "@aclymatepackages/atoms";
+import { DefaultPaper, CategoriesAvatar } from "@aclymatepackages/atoms";
 import { formatDecimal } from "@aclymatepackages/formatters";
 import { sumTonsCo2e } from "@aclymatepackages/other-helpers";
 import {
@@ -21,16 +21,19 @@ import {
 const PieChartCustomTooltip = ({ payload: passedPayload }) => {
   const [payloadObj] = passedPayload;
   const { payload = {} } = payloadObj || [{}];
-  const { name, emissionPercentage, color, icon, Icon } = payload;
+  const { name, emissionPercentage, scope, subcategory, viewMode, color } =
+    payload;
 
   return (
     <DefaultPaper>
       <Grid container spacing={2} alignItems="center">
         <Grid item>
-          <Avatar style={{ backgroundColor: color, color: "white" }}>
-            {icon}
-            {Icon && <Icon style={{ color: "inherit" }} />}
-          </Avatar>
+          <CategoriesAvatar
+            scope={scope}
+            subcategory={subcategory}
+            viewMode={viewMode}
+            color={color}
+          />
         </Grid>
         <Grid item>
           <Typography variant="subtitle1" color="textPrimary">
@@ -84,6 +87,7 @@ const EmissionsPieChart = ({
 
       return {
         ...subcategoryObj,
+        viewMode,
         emissionPercentage: (categoryEmissionsSum / emissionsSum) * 100,
       };
     });