@aclymatepackages/modules 1.0.11 → 1.0.14

package/dist/components/EmissionsChart.js

@@ -348,7 +348,8 @@ const EmissionsChart = _ref13 => {
     showTooltip,
     startDate,
     convertCarbonUnits,
-    displayUnitLabel
+    displayUnitLabel,
+    scopes
   } = _ref13;
   const {
     chartLabelsArray,
@@ -357,7 +358,7 @@ const EmissionsChart = _ref13 => {
     subcategoriesArray,
     period,
     groupedEmissions
-  } = (0, _chartHelpers.buildEmissionGroupData)(emissions, graphPeriod, startDate);
+  } = (0, _chartHelpers.buildEmissionGroupData)(emissions, graphPeriod, startDate, scopes);
   const isDataProjected = findIsDataProjected(latestEmissionDate);
   const isFirstPeriodEstimated = findIsFirstPeriodEstimated(chartLabelsArray, graphPeriod);
   const buildProjectionObj = viewMode === "subcategories" ? buildSubcategoriesProjectionObj : buildScopesProjectionObj;

package/dist/components/EmissionsPieChart.js

@@ -63,10 +63,11 @@ const EmissionsPieChart = _ref2 => {
   let {
     dataArray: emissions,
     viewMode = "subcategories",
-    pieChartRef
+    pieChartRef,
+    scopes
   } = _ref2;
   const subcategoriesArray = (0, _subcategories.buildSubcategoriesArray)(emissions);
-  const scopesArray = (0, _subcategories.buildScopesArray)();
+  const scopesArray = scopes || (0, _subcategories.buildScopesArray)();
   const emissionsSum = (0, _otherHelpers.sumTonsCo2e)(emissions);
   const formatChartPieSlices = () => {
     const filterFunction = subcategory => emission => {

package/dist/components/EmissionsSummarySentence.js

@@ -5,17 +5,32 @@ 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");
 var _otherHelpers = require("@aclymatepackages/other-helpers");
-var _material = require("@mui/material");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const EmissionsSummarySentence = _ref => {
   let {
     label,
-    emissions
+    emissions,
+    color,
+    scope
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_material.Typography, {
+  return /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    spacing: 1,
+    alignItems: "center",
+    wrap: "nowrap"
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_atoms.CategoriesAvatar, {
+    scope: scope,
+    color: color
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     variant: "body2"
-  }, label, ": ", (0, _formatters.formatDecimal)((0, _otherHelpers.sumTonsCo2e)(emissions)), " tons CO2e");
+  }, label, ": ", (0, _formatters.formatDecimal)((0, _otherHelpers.sumTonsCo2e)(emissions)), " tons CO2e")));
 };
 var _default = exports.default = EmissionsSummarySentence;

package/dist/components/ReportGraphContentLayout.js

@@ -17,7 +17,8 @@ const ReportGraphContentLayout = _ref => {
     emissions,
     interval = "quarter",
     isPercentageChart,
-    height
+    height,
+    scopes
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_material.Box, {
     p: 2,
@@ -52,7 +53,8 @@ const ReportGraphContentLayout = _ref => {
     unitConverter: tons => tons,
     aspect: 2,
     isPercentageChart: isPercentageChart,
-    showTooltip: false
+    showTooltip: false,
+    scopes: scopes
   }))));
 };
 var _default = exports.default = ReportGraphContentLayout;

package/dist/components/ReportSummaryBlock.js

@@ -0,0 +1,228 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.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.match.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/es.array.sort.js");
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _modules = require("@aclymatepackages/modules");
+var _otherHelpers = require("@aclymatepackages/other-helpers");
+var _emissionsCalcs = require("@aclymatepackages/emissions-calcs");
+var _converters = require("@aclymatepackages/converters");
+var _themes = _interopRequireDefault(require("@aclymatepackages/themes"));
+var _subcategories = require("@aclymatepackages/subcategories");
+var _EmissionsSummarySentence = _interopRequireDefault(require("./EmissionsSummarySentence"));
+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 : 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); }
+const adjustHexColorHue = function adjustHexColorHue(hexColor) {
+  let hueChange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 20;
+  const rgbaColor = (0, _converters.hexToRgba)(hexColor);
+  const extractColorValueFromString = color => color.match(/\d+/g).map(value => Number(value));
+
+  //This function was assisted by Chat GPT
+  const rgbaToHslParams = () => {
+    const [r, g, b] = extractColorValueFromString(rgbaColor);
+    const rFraction = r / 255;
+    const gFraction = g / 255;
+    const bFraction = b / 255;
+    const fractionsArray = [rFraction, gFraction, bFraction];
+    const maxValue = Math.max(...fractionsArray);
+    const minValue = Math.min(...fractionsArray);
+    const luminance = (maxValue + minValue) / 2;
+    const maxMinDelta = maxValue - minValue;
+    const calcSaturationValue = () => {
+      if (maxValue === minValue) {
+        return 0;
+      }
+      if (luminance > 0.5) {
+        return maxMinDelta / (2 - maxValue - minValue);
+      }
+      return maxMinDelta / (maxValue + minValue);
+    };
+    const saturation = calcSaturationValue();
+    const calcHueValue = () => {
+      if (maxValue === minValue) {
+        return 0;
+      }
+      if (maxValue === rFraction) {
+        return (gFraction - bFraction) / maxMinDelta + (gFraction < bFraction ? 6 : 0);
+      }
+      if (maxValue === gFraction) {
+        return (bFraction - rFraction) / maxMinDelta + 2;
+      }
+      return (rFraction - gFraction) / maxMinDelta + 4;
+    };
+    const hue = Math.round(calcHueValue() * 60) % 360;
+    return {
+      hue,
+      saturation: Math.round(saturation * 100),
+      luminance: Math.round(luminance * 100)
+    };
+  };
+  const {
+    hue,
+    saturation,
+    luminance
+  } = rgbaToHslParams();
+  const adjustHue = () => {
+    const adjustedHue = hue + hueChange;
+    if (adjustedHue < 360) {
+      return adjustedHue;
+    }
+    return adjustedHue - 360;
+  };
+  const adjustedHue = adjustHue();
+
+  //This functions was assisted by Chat GPT
+  const hslToHex = hue => {
+    const saturationFraction = saturation / 100;
+    const luminanceFraction = luminance / 100;
+    const chroma = (1 - Math.abs(2 * luminanceFraction - 1)) * saturationFraction;
+    const chromaScaled = chroma * (1 - Math.abs(hue / 60 % 2 - 1));
+    const lightnessAdjustment = luminanceFraction - chroma / 2;
+    const findRgbParts = () => {
+      if (hue >= 0 && hue < 60) {
+        return {
+          rFraction: chroma,
+          gFraction: chromaScaled,
+          bFraction: 0
+        };
+      }
+      if (hue >= 60 && hue < 120) {
+        return {
+          rFraction: chromaScaled,
+          gFraction: chroma,
+          bFraction: 0
+        };
+      }
+      if (hue >= 120 && hue < 180) {
+        return {
+          rFraction: 0,
+          gFraction: chroma,
+          bFraction: chromaScaled
+        };
+      }
+      if (hue >= 180 && hue < 240) {
+        return {
+          rFraction: 0,
+          gFraction: chromaScaled,
+          bFraction: chroma
+        };
+      }
+      if (hue >= 240 && hue < 300) {
+        return {
+          rFraction: chromaScaled,
+          gFraction: 0,
+          bFraction: chroma
+        };
+      }
+      return {
+        rFraction: chroma,
+        gFraction: 0,
+        bFraction: chromaScaled
+      };
+    };
+    const {
+      rFraction,
+      gFraction,
+      bFraction
+    } = findRgbParts();
+    const buildFullRgbColors = fraction => Math.round((fraction + lightnessAdjustment) * 255);
+    const red = buildFullRgbColors(rFraction);
+    const green = buildFullRgbColors(gFraction);
+    const blue = buildFullRgbColors(bFraction);
+    const toHex = color => color.toString(16).padStart(2, "0");
+    return "#".concat(toHex(red)).concat(toHex(green)).concat(toHex(blue));
+  };
+  return hslToHex(adjustedHue);
+};
+const ReportSummaryBlock = _ref => {
+  let {
+    emissions,
+    interval,
+    branding
+  } = _ref;
+  const buildScopesArrayWithColors = () => {
+    const colorizeScopesArray = (scopesArray, colorsArray) => scopesArray.map((scopeObj, idx) => _objectSpread(_objectSpread({}, scopeObj), {}, {
+      color: colorsArray[idx]
+    }));
+    const scopesArray = [1, 2, 3].map(scope => {
+      const scopeEmissions = (0, _emissionsCalcs.filterEmissionsByScope)(emissions, scope);
+      const totalTonsCo2e = (0, _otherHelpers.sumTonsCo2e)(scopeEmissions);
+      return {
+        scope,
+        subcategory: "scope".concat(scope),
+        name: "Scope ".concat(scope),
+        emissions: scopeEmissions,
+        totalTonsCo2e,
+        icon: /*#__PURE__*/_react.default.createElement(_material.Typography, {
+          variant: "h6"
+        }, scope)
+      };
+    });
+    if (!branding) {
+      const colorsArray = _subcategories.scopesList.map(_ref2 => {
+        var _mainTheme$palette$co;
+        let {
+          color
+        } = _ref2;
+        return (_mainTheme$palette$co = _themes.default.palette[color]) === null || _mainTheme$palette$co === void 0 ? void 0 : _mainTheme$palette$co.main;
+      });
+      return colorizeScopesArray(scopesArray, colorsArray);
+    }
+    const {
+      primaryColor,
+      secondaryColor
+    } = branding;
+    if (!primaryColor || !secondaryColor) {
+      return scopesArray;
+    }
+    const sortedScopes = scopesArray.sort((a, b) => b.totalTonsCo2e - a.totalTonsCo2e);
+    const adjustedPrimaryColor = adjustHexColorHue(primaryColor);
+    const colorsArray = [primaryColor, secondaryColor, adjustedPrimaryColor];
+    return colorizeScopesArray(sortedScopes, colorsArray).sort((a, b) => a.scope - b.scope);
+  };
+  const scopesWithColors = buildScopesArrayWithColors();
+  const chartScopes = branding ? scopesWithColors : null;
+  return /*#__PURE__*/_react.default.createElement(_modules.ReportGraphContentLayout, {
+    scopes: chartScopes,
+    contentTitle: (0, _otherHelpers.buildEmissionsSummarySentence)({
+      label: "Total Emissions",
+      emissions
+    }),
+    interval: interval,
+    emissions: emissions,
+    contentRows: [/*#__PURE__*/_react.default.createElement(_modules.EmissionsPieChart, {
+      dataArray: emissions,
+      viewMode: "scopes",
+      scopes: chartScopes
+    }), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+      variant: "subtitle1"
+    }, "Emissions Scope Breakdown"), ...scopesWithColors.map((_ref3, idx) => {
+      let {
+        scope,
+        emissions,
+        color
+      } = _ref3;
+      return /*#__PURE__*/_react.default.createElement(_EmissionsSummarySentence.default, {
+        key: "summary-sentence-".concat(idx),
+        label: "Total Scope ".concat(scope),
+        emissions: emissions,
+        scope: scope,
+        color: color
+      });
+    })]
+  });
+};
+var _default = exports.default = ReportSummaryBlock;

package/dist/index.js

@@ -81,28 +81,22 @@ Object.defineProperty(exports, "PlacesAutocomplete", {
     return _PlacesAutocomplete.default;
   }
 });
-Object.defineProperty(exports, "ReportContentTitle", {
-  enumerable: true,
-  get: function get() {
-    return _ReportContentTitle.default;
-  }
-});
 Object.defineProperty(exports, "ReportGraphContentLayout", {
   enumerable: true,
   get: function get() {
     return _ReportGraphContentLayout.default;
   }
 });
-Object.defineProperty(exports, "StripeElements", {
+Object.defineProperty(exports, "ReportSummaryBlock", {
   enumerable: true,
   get: function get() {
-    return _StripeElements.default;
+    return _ReportSummaryBlock.default;
   }
 });
-Object.defineProperty(exports, "SummaryBlock", {
+Object.defineProperty(exports, "StripeElements", {
   enumerable: true,
   get: function get() {
-    return _SummaryBlock.default;
+    return _StripeElements.default;
   }
 });
 Object.defineProperty(exports, "YesNoQuestion", {
@@ -140,7 +134,6 @@ var _EmissionsCustomTooltip = _interopRequireDefault(require("./components/Emiss
 var _EmissionsPieChart = _interopRequireDefault(require("./components/EmissionsPieChart"));
 var _useChartWarningLabels = _interopRequireDefault(require("./components/useChartWarningLabels"));
 var _EmissionsSummaryTable = _interopRequireDefault(require("./components/EmissionsSummaryTable"));
-var _ReportContentTitle = _interopRequireDefault(require("./components/ReportContentTitle"));
-var _SummaryBlock = _interopRequireDefault(require("./components/SummaryBlock"));
+var _ReportSummaryBlock = _interopRequireDefault(require("./components/ReportSummaryBlock"));
 var _ReportGraphContentLayout = _interopRequireDefault(require("./components/ReportGraphContentLayout"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@aclymatepackages/modules",
-  "version": "1.0.11",
+  "version": "1.0.14",
   "description": "Aclymate modules",
   "author": "William Loopesko",
   "main": "dist/index.js",
   "dependencies": {
     "@aclymatepackages/array-immutability-helpers": "^1.0.0",
-    "@aclymatepackages/atoms": "^1.0.0",
-    "@aclymatepackages/chart-helpers": "^1.0.5",
+    "@aclymatepackages/atoms": "^1.0.10",
+    "@aclymatepackages/chart-helpers": "^1.0.6",
     "@aclymatepackages/constants": "^1.0.0",
     "@aclymatepackages/converters": "^1.0.0",
     "@aclymatepackages/date-helpers": "^1.0.0",

package/src/components/EmissionsChart.js

@@ -412,6 +412,7 @@ const EmissionsChart = ({
   startDate,
   convertCarbonUnits,
   displayUnitLabel,
+  scopes,
 }) => {
   const {
     chartLabelsArray,
@@ -420,7 +421,7 @@ const EmissionsChart = ({
     subcategoriesArray,
     period,
     groupedEmissions,
-  } = buildEmissionGroupData(emissions, graphPeriod, startDate);
+  } = buildEmissionGroupData(emissions, graphPeriod, startDate, scopes);
 
   const isDataProjected = findIsDataProjected(latestEmissionDate);
   const isFirstPeriodEstimated = findIsFirstPeriodEstimated(

package/src/components/EmissionsPieChart.js

@@ -49,9 +49,10 @@ const EmissionsPieChart = ({
   dataArray: emissions,
   viewMode = "subcategories",
   pieChartRef,
+  scopes,
 }) => {
   const subcategoriesArray = buildSubcategoriesArray(emissions);
-  const scopesArray = buildScopesArray();
+  const scopesArray = scopes || buildScopesArray();
 
   const emissionsSum = sumTonsCo2e(emissions);
 

package/src/components/EmissionsSummarySentence.js

@@ -1,12 +1,22 @@
 import React from "react";
+
+import { Typography, Grid } from "@mui/material";
+
+import { CategoriesAvatar } from "@aclymatepackages/atoms";
 import { formatDecimal } from "@aclymatepackages/formatters";
 import { sumTonsCo2e } from "@aclymatepackages/other-helpers";
-import { Typography } from "@mui/material";
 
-const EmissionsSummarySentence = ({ label, emissions }) => (
-  <Typography variant="body2">
-    {label}: {formatDecimal(sumTonsCo2e(emissions))} tons CO2e
-  </Typography>
+const EmissionsSummarySentence = ({ label, emissions, color, scope }) => (
+  <Grid container spacing={1} alignItems="center" wrap="nowrap">
+    <Grid item>
+      <CategoriesAvatar scope={scope} color={color} />
+    </Grid>
+    <Grid item>
+      <Typography variant="body2">
+        {label}: {formatDecimal(sumTonsCo2e(emissions))} tons CO2e
+      </Typography>
+    </Grid>
+  </Grid>
 );
 
 export default EmissionsSummarySentence;

package/src/components/ReportGraphContentLayout.js

@@ -13,6 +13,7 @@ const ReportGraphContentLayout = ({
   interval = "quarter",
   isPercentageChart,
   height,
+  scopes,
 }) => {
   return (
     <Box p={2} style={{ height: height || "auto" }}>
@@ -38,6 +39,7 @@ const ReportGraphContentLayout = ({
             aspect={2}
             isPercentageChart={isPercentageChart}
             showTooltip={false}
+            scopes={scopes}
           />
         </Grid>
       </Grid>

package/src/components/ReportSummaryBlock.js

@@ -0,0 +1,217 @@
+import React from "react";
+
+import { Typography } from "@mui/material";
+
+import {
+  EmissionsPieChart,
+  ReportGraphContentLayout,
+} from "@aclymatepackages/modules";
+import {
+  buildEmissionsSummarySentence,
+  sumTonsCo2e,
+} from "@aclymatepackages/other-helpers";
+import { filterEmissionsByScope } from "@aclymatepackages/emissions-calcs";
+import { hexToRgba } from "@aclymatepackages/converters";
+import mainTheme from "@aclymatepackages/themes";
+import { scopesList } from "@aclymatepackages/subcategories";
+
+import EmissionsSummarySentence from "./EmissionsSummarySentence";
+
+const adjustHexColorHue = (hexColor, hueChange = 20) => {
+  const rgbaColor = hexToRgba(hexColor);
+
+  const extractColorValueFromString = (color) =>
+    color.match(/\d+/g).map((value) => Number(value));
+
+  //This function was assisted by Chat GPT
+  const rgbaToHslParams = () => {
+    const [r, g, b] = extractColorValueFromString(rgbaColor);
+
+    const rFraction = r / 255;
+    const gFraction = g / 255;
+    const bFraction = b / 255;
+
+    const fractionsArray = [rFraction, gFraction, bFraction];
+
+    const maxValue = Math.max(...fractionsArray);
+    const minValue = Math.min(...fractionsArray);
+
+    const luminance = (maxValue + minValue) / 2;
+
+    const maxMinDelta = maxValue - minValue;
+    const calcSaturationValue = () => {
+      if (maxValue === minValue) {
+        return 0;
+      }
+      if (luminance > 0.5) {
+        return maxMinDelta / (2 - maxValue - minValue);
+      }
+      return maxMinDelta / (maxValue + minValue);
+    };
+
+    const saturation = calcSaturationValue();
+
+    const calcHueValue = () => {
+      if (maxValue === minValue) {
+        return 0;
+      }
+
+      if (maxValue === rFraction) {
+        return (
+          (gFraction - bFraction) / maxMinDelta +
+          (gFraction < bFraction ? 6 : 0)
+        );
+      }
+
+      if (maxValue === gFraction) {
+        return (bFraction - rFraction) / maxMinDelta + 2;
+      }
+
+      return (rFraction - gFraction) / maxMinDelta + 4;
+    };
+    const hue = Math.round(calcHueValue() * 60) % 360;
+
+    return {
+      hue,
+      saturation: Math.round(saturation * 100),
+      luminance: Math.round(luminance * 100),
+    };
+  };
+
+  const { hue, saturation, luminance } = rgbaToHslParams();
+  const adjustHue = () => {
+    const adjustedHue = hue + hueChange;
+    if (adjustedHue < 360) {
+      return adjustedHue;
+    }
+    return adjustedHue - 360;
+  };
+
+  const adjustedHue = adjustHue();
+
+  //This functions was assisted by Chat GPT
+  const hslToHex = (hue) => {
+    const saturationFraction = saturation / 100;
+    const luminanceFraction = luminance / 100;
+
+    const chroma =
+      (1 - Math.abs(2 * luminanceFraction - 1)) * saturationFraction;
+    const chromaScaled = chroma * (1 - Math.abs(((hue / 60) % 2) - 1));
+    const lightnessAdjustment = luminanceFraction - chroma / 2;
+
+    const findRgbParts = () => {
+      if (hue >= 0 && hue < 60) {
+        return { rFraction: chroma, gFraction: chromaScaled, bFraction: 0 };
+      }
+      if (hue >= 60 && hue < 120) {
+        return { rFraction: chromaScaled, gFraction: chroma, bFraction: 0 };
+      }
+      if (hue >= 120 && hue < 180) {
+        return { rFraction: 0, gFraction: chroma, bFraction: chromaScaled };
+      }
+      if (hue >= 180 && hue < 240) {
+        return { rFraction: 0, gFraction: chromaScaled, bFraction: chroma };
+      }
+      if (hue >= 240 && hue < 300) {
+        return { rFraction: chromaScaled, gFraction: 0, bFraction: chroma };
+      }
+      return { rFraction: chroma, gFraction: 0, bFraction: chromaScaled };
+    };
+
+    const { rFraction, gFraction, bFraction } = findRgbParts();
+
+    const buildFullRgbColors = (fraction) =>
+      Math.round((fraction + lightnessAdjustment) * 255);
+
+    const red = buildFullRgbColors(rFraction);
+    const green = buildFullRgbColors(gFraction);
+    const blue = buildFullRgbColors(bFraction);
+
+    const toHex = (color) => color.toString(16).padStart(2, "0");
+
+    return `#${toHex(red)}${toHex(green)}${toHex(blue)}`;
+  };
+
+  return hslToHex(adjustedHue);
+};
+
+const ReportSummaryBlock = ({ emissions, interval, branding }) => {
+  const buildScopesArrayWithColors = () => {
+    const colorizeScopesArray = (scopesArray, colorsArray) =>
+      scopesArray.map((scopeObj, idx) => ({
+        ...scopeObj,
+        color: colorsArray[idx],
+      }));
+
+    const scopesArray = [1, 2, 3].map((scope) => {
+      const scopeEmissions = filterEmissionsByScope(emissions, scope);
+      const totalTonsCo2e = sumTonsCo2e(scopeEmissions);
+      return {
+        scope,
+        subcategory: `scope${scope}`,
+        name: `Scope ${scope}`,
+        emissions: scopeEmissions,
+        totalTonsCo2e,
+        icon: <Typography variant="h6">{scope}</Typography>,
+      };
+    });
+
+    if (!branding) {
+      const colorsArray = scopesList.map(
+        ({ color }) => mainTheme.palette[color]?.main
+      );
+
+      return colorizeScopesArray(scopesArray, colorsArray);
+    }
+
+    const { primaryColor, secondaryColor } = branding;
+    if (!primaryColor || !secondaryColor) {
+      return scopesArray;
+    }
+
+    const sortedScopes = scopesArray.sort(
+      (a, b) => b.totalTonsCo2e - a.totalTonsCo2e
+    );
+    const adjustedPrimaryColor = adjustHexColorHue(primaryColor);
+
+    const colorsArray = [primaryColor, secondaryColor, adjustedPrimaryColor];
+    return colorizeScopesArray(sortedScopes, colorsArray).sort(
+      (a, b) => a.scope - b.scope
+    );
+  };
+
+  const scopesWithColors = buildScopesArrayWithColors();
+
+  const chartScopes = branding ? scopesWithColors : null;
+
+  return (
+    <ReportGraphContentLayout
+      scopes={chartScopes}
+      contentTitle={buildEmissionsSummarySentence({
+        label: "Total Emissions",
+        emissions,
+      })}
+      interval={interval}
+      emissions={emissions}
+      contentRows={[
+        <EmissionsPieChart
+          dataArray={emissions}
+          viewMode="scopes"
+          scopes={chartScopes}
+        />,
+        <Typography variant="subtitle1">Emissions Scope Breakdown</Typography>,
+        ...scopesWithColors.map(({ scope, emissions, color }, idx) => (
+          <EmissionsSummarySentence
+            key={`summary-sentence-${idx}`}
+            label={`Total Scope ${scope}`}
+            emissions={emissions}
+            scope={scope}
+            color={color}
+          />
+        )),
+      ]}
+    />
+  );
+};
+
+export default ReportSummaryBlock;

package/src/index.js

@@ -15,8 +15,7 @@ import EmissionsCustomTooltip from "./components/EmissionsCustomTooltip";
 import EmissionsPieChart from "./components/EmissionsPieChart";
 import useChartWarningLabels from "./components/useChartWarningLabels";
 import EmissionsSummaryTable from "./components/EmissionsSummaryTable";
-import ReportContentTitle from "./components/ReportContentTitle";
-import SummaryBlock from "./components/SummaryBlock";
+import ReportSummaryBlock from "./components/ReportSummaryBlock";
 import ReportGraphContentLayout from "./components/ReportGraphContentLayout";
 
 export {
@@ -37,7 +36,6 @@ export {
   EmissionsPieChart,
   useChartWarningLabels,
   EmissionsSummaryTable,
-  ReportContentTitle,
-  SummaryBlock,
+  ReportSummaryBlock,
   ReportGraphContentLayout,
 };

package/dist/components/FuelTypesSelect.js

@@ -1,35 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _atoms = require("@aclymatepackages/atoms");
-var _formatters = require("@aclymatepackages/formatters");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const FuelTypesSelect = _ref => {
-  let {
-    fuelType,
-    editVehicle,
-    availableFuelTypes,
-    id,
-    smallFont,
-    variant,
-    noLabel
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_atoms.Select, {
-    id: id,
-    size: "small",
-    label: noLabel || "Fuel Type",
-    value: fuelType || "",
-    editValue: editVehicle,
-    options: availableFuelTypes.map(option => ({
-      label: (0, _formatters.ucFirstLetters)(option),
-      value: option
-    })),
-    smallFont: smallFont,
-    variant: variant
-  });
-};
-var _default = exports.default = FuelTypesSelect;

package/dist/components/ReportContentTitle.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const ReportContentTitle = _ref => {
-  let {
-    title
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    variant: "subtitle1"
-  }, title);
-};
-var _default = exports.default = ReportContentTitle;

package/dist/components/SummaryBlock.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-var _emissionsCalcs = require("@aclymatepackages/emissions-calcs");
-var _otherHelpers = require("@aclymatepackages/other-helpers");
-var _EmissionsPieChart = _interopRequireDefault(require("./EmissionsPieChart"));
-var _ReportContentTitle = _interopRequireDefault(require("./ReportContentTitle"));
-var _ReportGraphContentLayout = _interopRequireDefault(require("./ReportGraphContentLayout"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const SummaryBlock = _ref => {
-  let {
-    emissions,
-    interval
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_ReportGraphContentLayout.default, {
-    contentTitle: (0, _otherHelpers.buildEmissionsSummarySentence)({
-      label: "Total Emissions",
-      emissions
-    }),
-    interval: interval,
-    emissions: emissions,
-    contentRows: [/*#__PURE__*/_react.default.createElement(_EmissionsPieChart.default, {
-      dataArray: emissions,
-      viewMode: "scopes"
-    }), /*#__PURE__*/_react.default.createElement(_material.Typography, {
-      variant: "subtitle1"
-    }, "Emissions Summary"), [1, 2, 3].map((scope, idx) => /*#__PURE__*/_react.default.createElement(EmissionsSummarySentence, {
-      key: "summary-sentence-".concat(idx),
-      label: "Total Scope ".concat(scope),
-      emissions: (0, _emissionsCalcs.filterEmissionsByScope)(emissions, scope)
-    }))]
-  });
-};
-var _default = exports.default = SummaryBlock;

package/src/components/FuelTypesSelect.js

@@ -1,29 +0,0 @@
-import React from "react";
-
-import { Select } from "@aclymatepackages/atoms";
-import { ucFirstLetters } from "@aclymatepackages/formatters";
-
-const FuelTypesSelect = ({
-  fuelType,
-  editVehicle,
-  availableFuelTypes,
-  id,
-  smallFont,
-  variant,
-  noLabel,
-}) => (
-  <Select
-    id={id}
-    size="small"
-    label={noLabel || "Fuel Type"}
-    value={fuelType || ""}
-    editValue={editVehicle}
-    options={availableFuelTypes.map((option) => ({
-      label: ucFirstLetters(option),
-      value: option,
-    }))}
-    smallFont={smallFont}
-    variant={variant}
-  />
-);
-export default FuelTypesSelect;

package/src/components/ReportContentTitle.js

@@ -1,8 +0,0 @@
-import React from "react";
-import { Typography } from "@mui/material";
-
-const ReportContentTitle = ({ title }) => {
-  return <Typography variant="subtitle1">{title}</Typography>;
-};
-
-export default ReportContentTitle;

package/src/components/SummaryBlock.js

@@ -1,36 +0,0 @@
-import React from "react";
-
-import { Typography } from "@mui/material";
-
-import { filterEmissionsByScope } from "@aclymatepackages/emissions-calcs";
-import { buildEmissionsSummarySentence } from "@aclymatepackages/other-helpers";
-
-import EmissionsPieChart from "./EmissionsPieChart";
-import ReportContentTitle from "./ReportContentTitle";
-import ReportGraphContentLayout from "./ReportGraphContentLayout";
-
-const SummaryBlock = ({ emissions, interval }) => {
-  return (
-    <ReportGraphContentLayout
-      contentTitle={buildEmissionsSummarySentence({
-        label: "Total Emissions",
-        emissions,
-      })}
-      interval={interval}
-      emissions={emissions}
-      contentRows={[
-        <EmissionsPieChart dataArray={emissions} viewMode="scopes" />,
-        <Typography variant="subtitle1">Emissions Summary</Typography>,
-        [1, 2, 3].map((scope, idx) => (
-          <EmissionsSummarySentence
-            key={`summary-sentence-${idx}`}
-            label={`Total Scope ${scope}`}
-            emissions={filterEmissionsByScope(emissions, scope)}
-          />
-        )),
-      ]}
-    />
-  );
-};
-
-export default SummaryBlock;