@aclymatepackages/modules 1.0.3 → 1.0.5

package/dist/components/EmissionsSummarySentence.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+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
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "body2"
+  }, label, ": ", (0, _formatters.formatDecimal)((0, _otherHelpers.sumTonsCo2e)(emissions)), " tons CO2e");
+};
+var _default = exports.default = EmissionsSummarySentence;

package/dist/components/EmissionsSummaryTable.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _chartHelpers = require("@aclymatepackages/chart-helpers");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const SummaryTableRow = _ref => {
+  let {
+    name,
+    data
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_material.TableRow, null, /*#__PURE__*/_react.default.createElement(_material.TableCell, null, name), data.map((value, idx) => /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    key: "table-row-cell-".concat(idx)
+  }, value)));
+};
+const EmissionsSummaryTable = _ref2 => {
+  let {
+    emissions,
+    rows,
+    interval,
+    blockTitle,
+    tableTitle = "",
+    rowType,
+    startDate
+  } = _ref2;
+  const {
+    groupedEmissions,
+    chartLabelsArray
+  } = (0, _chartHelpers.buildEmissionGroupData)(emissions, interval, startDate);
+  const summaryTableData = groupedEmissions.map(emission => rowType === "scopes" ? (0, _chartHelpers.buildScopesRealDataObj)(emission) : (0, _chartHelpers.buildSubcategoriesDataObj)(emission));
+  return /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "h6"
+  }, blockTitle), /*#__PURE__*/_react.default.createElement(_material.TableContainer, null, /*#__PURE__*/_react.default.createElement(_material.Table, null, /*#__PURE__*/_react.default.createElement(_material.TableHead, null, /*#__PURE__*/_react.default.createElement(_material.TableRow, null, [tableTitle, ...chartLabelsArray].map((label, idx) => /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    key: "table-head-cell-".concat(idx)
+  }, label)))), /*#__PURE__*/_react.default.createElement(_material.TableBody, null, rows.map((_ref3, idx) => {
+    let {
+      name,
+      subcategory
+    } = _ref3;
+    return /*#__PURE__*/_react.default.createElement(SummaryTableRow, {
+      name: name,
+      data: summaryTableData.map(dataRow => dataRow[subcategory]),
+      key: "summary-table-row-".concat(idx)
+    });
+  })))));
+};
+var _default = exports.default = EmissionsSummaryTable;

package/dist/components/ReportContentTitle.js

@@ -0,0 +1,18 @@
+"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/ReportGraphContentLayout.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _ReportContentTitle = _interopRequireDefault(require("./ReportContentTitle"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ReportGraphContentLayout = _ref => {
+  let {
+    EmissionsChart,
+    contentTitle,
+    contentRows = [],
+    chartType = "bar",
+    chartViewMode = "scopes",
+    emissions,
+    interval = "quarter",
+    isPercentageChart,
+    height
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    p: 2,
+    style: {
+      height: height || "auto"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    spacing: 2
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    sm: 4,
+    container: true,
+    direction: "column",
+    spacing: 2
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_ReportContentTitle.default, {
+    title: contentTitle
+  })), contentRows.map((row, idx) => /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    key: "content-row-".concat(idx)
+  }, row))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    sm: 8
+  }, /*#__PURE__*/_react.default.createElement(EmissionsChart, {
+    dataArray: emissions,
+    type: chartType,
+    viewMode: chartViewMode,
+    graphPeriod: interval,
+    displayUnit: "tons",
+    unitConverter: tons => tons,
+    aspect: 2,
+    isPercentageChart: isPercentageChart,
+    showTooltip: false
+  }))));
+};
+var _default = exports.default = ReportGraphContentLayout;

package/dist/components/SummaryBlock.js

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

package/dist/index.js

@@ -51,6 +51,18 @@ Object.defineProperty(exports, "EmissionsReductionGraph", {
     return _EmissionsReductionGraph.default;
   }
 });
+Object.defineProperty(exports, "EmissionsSummarySentence", {
+  enumerable: true,
+  get: function get() {
+    return _EmissionsSummarySentence.default;
+  }
+});
+Object.defineProperty(exports, "EmissionsSummaryTable", {
+  enumerable: true,
+  get: function get() {
+    return _EmissionsSummaryTable.default;
+  }
+});
 Object.defineProperty(exports, "FootprintEquivalencies", {
   enumerable: true,
   get: function get() {
@@ -75,12 +87,24 @@ Object.defineProperty(exports, "PlacesAutocomplete", {
     return _PlacesAutocomplete.default;
   }
 });
+Object.defineProperty(exports, "ReportContentTitle", {
+  enumerable: true,
+  get: function get() {
+    return _ReportContentTitle.default;
+  }
+});
 Object.defineProperty(exports, "StripeElements", {
   enumerable: true,
   get: function get() {
     return _StripeElements.default;
   }
 });
+Object.defineProperty(exports, "SummaryBlock", {
+  enumerable: true,
+  get: function get() {
+    return _SummaryBlock.default;
+  }
+});
 Object.defineProperty(exports, "YesNoQuestion", {
   enumerable: true,
   get: function get() {
@@ -115,4 +139,8 @@ var _EmissionsChart = _interopRequireDefault(require("./components/EmissionsChar
 var _EmissionsCustomTooltip = _interopRequireDefault(require("./components/EmissionsCustomTooltip"));
 var _EmissionsPieChart = _interopRequireDefault(require("./components/EmissionsPieChart"));
 var _useChartWarningLabels = _interopRequireDefault(require("./components/useChartWarningLabels"));
+var _EmissionsSummaryTable = _interopRequireDefault(require("./components/EmissionsSummaryTable"));
+var _EmissionsSummarySentence = _interopRequireDefault(require("./components/EmissionsSummarySentence"));
+var _ReportContentTitle = _interopRequireDefault(require("./components/ReportContentTitle"));
+var _SummaryBlock = _interopRequireDefault(require("./components/SummaryBlock"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@aclymatepackages/modules",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "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.2",
+    "@aclymatepackages/chart-helpers": "^1.0.3",
     "@aclymatepackages/constants": "^1.0.0",
     "@aclymatepackages/converters": "^1.0.0",
     "@aclymatepackages/date-helpers": "^1.0.0",
+    "@aclymatepackages/emissions-calcs": "^1.1.1",
     "@aclymatepackages/fetch-aclymate-api": "^1.0.0",
     "@aclymatepackages/formatters": "^1.0.0",
     "@aclymatepackages/lists": "^1.0.0",

package/src/components/EmissionsSummarySentence.js

@@ -0,0 +1,12 @@
+import React from "react";
+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>
+);
+
+export default EmissionsSummarySentence;

package/src/components/EmissionsSummaryTable.js

@@ -0,0 +1,75 @@
+import React from "react";
+import {
+  Box,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import {
+  buildScopesRealDataObj,
+  buildSubcategoriesDataObj,
+  buildEmissionGroupData,
+} from "@aclymatepackages/chart-helpers";
+
+const SummaryTableRow = ({ name, data }) => (
+  <TableRow>
+    <TableCell>{name}</TableCell>
+    {data.map((value, idx) => (
+      <TableCell key={`table-row-cell-${idx}`}>{value}</TableCell>
+    ))}
+  </TableRow>
+);
+
+const EmissionsSummaryTable = ({
+  emissions,
+  rows,
+  interval,
+  blockTitle,
+  tableTitle = "",
+  rowType,
+  startDate,
+}) => {
+  const { groupedEmissions, chartLabelsArray } = buildEmissionGroupData(
+    emissions,
+    interval,
+    startDate
+  );
+
+  const summaryTableData = groupedEmissions.map((emission) =>
+    rowType === "scopes"
+      ? buildScopesRealDataObj(emission)
+      : buildSubcategoriesDataObj(emission)
+  );
+
+  return (
+    <Box>
+      <Typography variant="h6">{blockTitle}</Typography>
+      <TableContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              {[tableTitle, ...chartLabelsArray].map((label, idx) => (
+                <TableCell key={`table-head-cell-${idx}`}>{label}</TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map(({ name, subcategory }, idx) => (
+              <SummaryTableRow
+                name={name}
+                data={summaryTableData.map((dataRow) => dataRow[subcategory])}
+                key={`summary-table-row-${idx}`}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </Box>
+  );
+};
+
+export default EmissionsSummaryTable;

package/src/components/ReportContentTitle.js

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

package/src/components/ReportGraphContentLayout.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { Box, Grid } from "@mui/material";
+
+import ReportContentTitle from "./ReportContentTitle";
+
+const ReportGraphContentLayout = ({
+  EmissionsChart,
+  contentTitle,
+  contentRows = [],
+  chartType = "bar",
+  chartViewMode = "scopes",
+  emissions,
+  interval = "quarter",
+  isPercentageChart,
+  height,
+}) => {
+  return (
+    <Box p={2} style={{ height: height || "auto" }}>
+      <Grid container spacing={2}>
+        <Grid item sm={4} container direction="column" spacing={2}>
+          <Grid item>
+            <ReportContentTitle title={contentTitle} />
+          </Grid>
+          {contentRows.map((row, idx) => (
+            <Grid item key={`content-row-${idx}`}>
+              {row}
+            </Grid>
+          ))}
+        </Grid>
+        <Grid item sm={8}>
+          <EmissionsChart
+            dataArray={emissions}
+            type={chartType}
+            viewMode={chartViewMode}
+            graphPeriod={interval}
+            displayUnit={"tons"}
+            unitConverter={(tons) => tons}
+            aspect={2}
+            isPercentageChart={isPercentageChart}
+            showTooltip={false}
+          />
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default ReportGraphContentLayout;

package/src/components/SummaryBlock.js

@@ -0,0 +1,37 @@
+import React from "react";
+
+import { EmissionsChart as EmissionsChartModule } from "./EmissionsChart";
+
+import { filterEmissionsByScope } from "@aclymatepackages/emissions-calcs";
+import EmissionsPieChart from "./EmissionsPieChart";
+import ReportContentTitle from "./ReportContentTitle";
+import EmissionsSummarySentence from "./EmissionsSummarySentence";
+import ReportGraphContentLayout from "./ReportGraphContentLayout";
+
+const SummaryBlock = ({ emissions, interval, EmissionsChart }) => {
+  return (
+    <ReportGraphContentLayout
+      EmissionsChart={EmissionsChart || EmissionsChartModule}
+      contentTitle="Summary"
+      interval={interval}
+      emissions={emissions}
+      contentRows={[
+        <EmissionsPieChart dataArray={emissions} viewMode="scopes" />,
+        <ReportContentTitle title="Emissions Summary" />,
+        <EmissionsSummarySentence
+          label="Total Emissions"
+          emissions={emissions}
+        />,
+        [1, 2, 3].map((scope, idx) => (
+          <EmissionsSummarySentence
+            key={`summary-sentence-${idx}`}
+            label={`Total Scope ${scope}`}
+            emissions={filterEmissionsByScope(emissions, scope)}
+          />
+        )),
+      ]}
+    />
+  );
+};
+
+export default SummaryBlock;

package/src/index.js

@@ -14,6 +14,10 @@ import EmissionsChart from "./components/EmissionsChart";
 import EmissionsCustomTooltip from "./components/EmissionsCustomTooltip";
 import EmissionsPieChart from "./components/EmissionsPieChart";
 import useChartWarningLabels from "./components/useChartWarningLabels";
+import EmissionsSummaryTable from "./components/EmissionsSummaryTable";
+import EmissionsSummarySentence from "./components/EmissionsSummarySentence";
+import ReportContentTitle from "./components/ReportContentTitle";
+import SummaryBlock from "./components/SummaryBlock";
 
 export {
   FootprintVideo,
@@ -32,4 +36,8 @@ export {
   EmissionsCustomTooltip,
   EmissionsPieChart,
   useChartWarningLabels,
+  EmissionsSummaryTable,
+  EmissionsSummarySentence,
+  ReportContentTitle,
+  SummaryBlock,
 };