@aclymatepackages/modules 1.0.20 → 1.0.21

package/dist/components/EmissionsChart.js

@@ -120,7 +120,7 @@ const LabeledEmissionsChart = _ref8 => {
     displayUnitLabel,
     chartArray,
     aspect = 3,
-    showTooltip = true
+    showTooltip
   } = _ref8;
   const {
     palette
@@ -198,7 +198,7 @@ const EmissionsChart = _ref10 => {
     unitConverter,
     aspect,
     isPercentageChart,
-    showTooltip,
+    showTooltip = true,
     startDate,
     convertCarbonUnits,
     displayUnitLabel,

package/dist/components/EmissionsPieChart.js

@@ -61,7 +61,8 @@ const EmissionsPieChart = _ref2 => {
     dataArray: emissions,
     viewMode = "subcategories",
     pieChartRef,
-    branding
+    branding,
+    showTooltip = true
   } = _ref2;
   const subcategoriesArray = (0, _subcategories.buildSubcategoriesArray)(emissions);
   const scopesArray = (0, _subcategories.buildScopesWithColors)(branding);
@@ -118,7 +119,7 @@ const EmissionsPieChart = _ref2 => {
       name: name,
       fill: color
     });
-  })), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
+  })), showTooltip && /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
     wrapperStyle: {
       zIndex: 99
     },

package/dist/components/{EmissionsSummarySentence.js → EmissionsScopeSummarySentence.js}

@@ -9,7 +9,7 @@ var _material = require("@mui/material");
 var _atoms = require("@aclymatepackages/atoms");
 var _otherHelpers = require("@aclymatepackages/other-helpers");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const EmissionsSummarySentence = _ref => {
+const EmissionsScopeSummarySentence = _ref => {
   let {
     label,
     emissions,
@@ -25,7 +25,9 @@ const EmissionsSummarySentence = _ref => {
     item: true
   }, /*#__PURE__*/_react.default.createElement(_atoms.CategoriesAvatar, {
     scope: scope,
-    color: color
+    color: color,
+    viewMode: "scopes",
+    size: "small"
   })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
     item: true
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
@@ -35,4 +37,4 @@ const EmissionsSummarySentence = _ref => {
     emissions
   }))));
 };
-var _default = exports.default = EmissionsSummarySentence;
+var _default = exports.default = EmissionsScopeSummarySentence;

package/dist/components/ReportGraphContentLayout.js

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

package/dist/components/ReportSummaryBlock.js

@@ -1,234 +1,65 @@
 "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");
+require("core-js/modules/es.symbol.description.js");
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 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 _ReportGraphContentLayout = _interopRequireDefault(require("./ReportGraphContentLayout"));
+var _EmissionsPieChart = _interopRequireDefault(require("./EmissionsPieChart"));
+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); }
-// import ReportGraphContentLayout from "./ReportGraphContentLayout";
-// import EmissionsPieChart from "./EmissionsPieChart";
-// import EmissionsSummarySentence from "./EmissionsSummarySentence";
-
-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);
-};
-
-//Sort emissions by scope
-//Calculate total tons for emissions
-
-//define colors for scopes
-//use branding colors OR theme colors
-//if branding colors: Primary = scope 1, modifedPrimary = scope 2, secondary = scope 3
-
-//build projected scope categories/colors
-//Build a function to lighten colors for projections
-
-const buildScopesArrayWithColors = (emissions, branding) => {
-  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(_ref => {
-      var _mainTheme$palette$co;
-      let {
-        color
-      } = _ref;
-      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 ReportSummaryBlock = _ref2 => {
+const ReportSummaryBlock = _ref => {
   let {
     emissions,
     interval,
-    branding
-  } = _ref2;
-  const scopesWithColors = buildScopesArrayWithColors();
-  const chartScopes = branding ? scopesWithColors : null;
-  return /*#__PURE__*/_react.default.createElement(ReportGraphContentLayout, {
-    scopes: chartScopes,
+    branding,
+    showTooltip
+  } = _ref;
+  const scopesWithColors = (0, _subcategories.buildScopesWithColors)(branding);
+  const scopesWithEmissions = scopesWithColors.map(scopeObj => {
+    const {
+      scope
+    } = scopeObj;
+    const scopeEmissions = (0, _emissionsCalcs.filterEmissionsByScope)(emissions, scope);
+    return _objectSpread(_objectSpread({}, scopeObj), {}, {
+      emissions: scopeEmissions
+    });
+  });
+  return /*#__PURE__*/_react.default.createElement(_ReportGraphContentLayout.default, {
+    showTooltip: showTooltip,
+    branding: branding,
     contentTitle: (0, _otherHelpers.buildEmissionsSummarySentence)({
       label: "Total Emissions",
       emissions
     }),
     interval: interval,
     emissions: emissions,
-    contentRows: [/*#__PURE__*/_react.default.createElement(EmissionsPieChart, {
+    contentRows: [/*#__PURE__*/_react.default.createElement(_EmissionsPieChart.default, {
       dataArray: emissions,
       viewMode: "scopes",
-      scopes: chartScopes
+      branding: branding,
+      showTooltip: showTooltip
     }), /*#__PURE__*/_react.default.createElement(_material.Typography, {
       variant: "subtitle1"
-    }, "Emissions Scope Breakdown"), ...scopesWithColors.map((_ref3, idx) => {
+    }, "Emissions Scope Breakdown"), ...scopesWithEmissions.map((_ref2, idx) => {
       let {
         scope,
         emissions,
         color
-      } = _ref3;
-      return /*#__PURE__*/_react.default.createElement(EmissionsSummarySentence, {
+      } = _ref2;
+      return /*#__PURE__*/_react.default.createElement(_EmissionsSummarySentence.default, {
         key: "summary-sentence-".concat(idx),
         label: "Total Scope ".concat(scope),
         emissions: emissions,

package/dist/index.js

@@ -51,10 +51,10 @@ Object.defineProperty(exports, "EmissionsReductionGraph", {
     return _EmissionsReductionGraph.default;
   }
 });
-Object.defineProperty(exports, "EmissionsSummarySentence", {
+Object.defineProperty(exports, "EmissionsScopeSummarySentence", {
   enumerable: true,
   get: function get() {
-    return _EmissionsSummarySentence.default;
+    return _EmissionsScopeSummarySentence.default;
   }
 });
 Object.defineProperty(exports, "EmissionsSummaryTable", {
@@ -142,5 +142,5 @@ var _useChartWarningLabels = _interopRequireDefault(require("./components/useCha
 var _EmissionsSummaryTable = _interopRequireDefault(require("./components/EmissionsSummaryTable"));
 var _ReportSummaryBlock = _interopRequireDefault(require("./components/ReportSummaryBlock"));
 var _ReportGraphContentLayout = _interopRequireDefault(require("./components/ReportGraphContentLayout"));
-var _EmissionsSummarySentence = _interopRequireDefault(require("./components/EmissionsSummarySentence"));
+var _EmissionsScopeSummarySentence = _interopRequireDefault(require("./components/EmissionsScopeSummarySentence"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aclymatepackages/modules",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "Aclymate modules",
   "author": "William Loopesko",
   "main": "dist/index.js",
@@ -16,7 +16,7 @@
     "@aclymatepackages/multi-part-form": "1.0.1",
     "@aclymatepackages/other-helpers": "^1.0.3",
     "@aclymatepackages/reg-exp": "^1.0.0",
-    "@aclymatepackages/subcategories": "^1.0.4",
+    "@aclymatepackages/subcategories": "^1.0.5",
     "@aclymatepackages/themes": "^1.0.0",
     "@babel/preset-react": "^7.16.7",
     "@emotion/react": "^11.11.1",

package/src/components/EmissionsChart.js

@@ -117,7 +117,7 @@ const LabeledEmissionsChart = ({
   displayUnitLabel,
   chartArray,
   aspect = 3,
-  showTooltip = true,
+  showTooltip,
 }) => {
   const { palette } = useTheme();
 
@@ -197,7 +197,7 @@ const EmissionsChart = ({
   unitConverter,
   aspect,
   isPercentageChart,
-  showTooltip,
+  showTooltip = true,
   startDate,
   convertCarbonUnits,
   displayUnitLabel,

package/src/components/EmissionsPieChart.js

@@ -53,6 +53,7 @@ const EmissionsPieChart = ({
   viewMode = "subcategories",
   pieChartRef,
   branding,
+  showTooltip = true,
 }) => {
   const subcategoriesArray = buildSubcategoriesArray(emissions);
   const scopesArray = buildScopesWithColors(branding);
@@ -114,10 +115,12 @@ const EmissionsPieChart = ({
             />
           ))}
         </Pie>
-        <ChartTooltip
-          wrapperStyle={{ zIndex: 99 }}
-          content={<PieChartCustomTooltip />}
-        />
+        {showTooltip && (
+          <ChartTooltip
+            wrapperStyle={{ zIndex: 99 }}
+            content={<PieChartCustomTooltip />}
+          />
+        )}
       </PieChart>
     </ResponsiveContainer>
   );

package/src/components/{EmissionsSummarySentence.js → EmissionsScopeSummarySentence.js}

@@ -5,10 +5,15 @@ import { Typography, Grid } from "@mui/material";
 import { CategoriesAvatar } from "@aclymatepackages/atoms";
 import { buildEmissionsSummarySentence } from "@aclymatepackages/other-helpers";
 
-const EmissionsSummarySentence = ({ label, emissions, color, scope }) => (
+const EmissionsScopeSummarySentence = ({ label, emissions, color, scope }) => (
   <Grid container spacing={1} alignItems="center" wrap="nowrap">
     <Grid item>
-      <CategoriesAvatar scope={scope} color={color} />
+      <CategoriesAvatar
+        scope={scope}
+        color={color}
+        viewMode="scopes"
+        size="small"
+      />
     </Grid>
     <Grid item>
       <Typography variant="body2">
@@ -17,5 +22,4 @@ const EmissionsSummarySentence = ({ label, emissions, color, scope }) => (
     </Grid>
   </Grid>
 );
-
-export default EmissionsSummarySentence;
+export default EmissionsScopeSummarySentence;

package/src/components/ReportGraphContentLayout.js

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

package/src/components/ReportSummaryBlock.js

@@ -2,199 +2,27 @@ import React from "react";
 
 import { Typography } from "@mui/material";
 
-import {
-  buildEmissionsSummarySentence,
-  sumTonsCo2e,
-} from "@aclymatepackages/other-helpers";
+import { buildEmissionsSummarySentence } 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 { buildScopesWithColors } from "@aclymatepackages/subcategories";
 
-// import ReportGraphContentLayout from "./ReportGraphContentLayout";
-// import EmissionsPieChart from "./EmissionsPieChart";
-// import EmissionsSummarySentence from "./EmissionsSummarySentence";
+import ReportGraphContentLayout from "./ReportGraphContentLayout";
+import EmissionsPieChart from "./EmissionsPieChart";
+import EmissionsSummarySentence from "./EmissionsSummarySentence";
 
-const adjustHexColorHue = (hexColor, hueChange = 20) => {
-  const rgbaColor = hexToRgba(hexColor);
+const ReportSummaryBlock = ({ emissions, interval, branding, showTooltip }) => {
+  const scopesWithColors = buildScopesWithColors(branding);
 
-  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);
-};
-
-//Sort emissions by scope
-//Calculate total tons for emissions
-
-//define colors for scopes
-//use branding colors OR theme colors
-//if branding colors: Primary = scope 1, modifedPrimary = scope 2, secondary = scope 3
-
-//build projected scope categories/colors
-//Build a function to lighten colors for projections
-
-const buildScopesArrayWithColors = (emissions, branding) => {
-  const colorizeScopesArray = (scopesArray, colorsArray) =>
-    scopesArray.map((scopeObj, idx) => ({
-      ...scopeObj,
-      color: colorsArray[idx],
-    }));
-
-  const scopesArray = [1, 2, 3].map((scope) => {
+  const scopesWithEmissions = scopesWithColors.map((scopeObj) => {
+    const { scope } = scopeObj;
     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>,
-    };
+    return { ...scopeObj, emissions: scopeEmissions };
   });
 
-  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 ReportSummaryBlock = ({ emissions, interval, branding }) => {
-  const scopesWithColors = buildScopesArrayWithColors();
-
-  const chartScopes = branding ? scopesWithColors : null;
-
   return (
     <ReportGraphContentLayout
-      scopes={chartScopes}
+      showTooltip={showTooltip}
+      branding={branding}
       contentTitle={buildEmissionsSummarySentence({
         label: "Total Emissions",
         emissions,
@@ -205,10 +33,11 @@ const ReportSummaryBlock = ({ emissions, interval, branding }) => {
         <EmissionsPieChart
           dataArray={emissions}
           viewMode="scopes"
-          scopes={chartScopes}
+          branding={branding}
+          showTooltip={showTooltip}
         />,
         <Typography variant="subtitle1">Emissions Scope Breakdown</Typography>,
-        ...scopesWithColors.map(({ scope, emissions, color }, idx) => (
+        ...scopesWithEmissions.map(({ scope, emissions, color }, idx) => (
           <EmissionsSummarySentence
             key={`summary-sentence-${idx}`}
             label={`Total Scope ${scope}`}
@@ -221,5 +50,4 @@ const ReportSummaryBlock = ({ emissions, interval, branding }) => {
     />
   );
 };
-
 export default ReportSummaryBlock;

package/src/index.js

@@ -17,7 +17,7 @@ import useChartWarningLabels from "./components/useChartWarningLabels";
 import EmissionsSummaryTable from "./components/EmissionsSummaryTable";
 import ReportSummaryBlock from "./components/ReportSummaryBlock";
 import ReportGraphContentLayout from "./components/ReportGraphContentLayout";
-import EmissionsSummarySentence from "./components/EmissionsSummarySentence";
+import EmissionsScopeSummarySentence from "./components/EmissionsScopeSummarySentence";
 
 export {
   FootprintVideo,
@@ -39,5 +39,5 @@ export {
   EmissionsSummaryTable,
   ReportSummaryBlock,
   ReportGraphContentLayout,
-  EmissionsSummarySentence,
+  EmissionsScopeSummarySentence,
 };