@aclymatepackages/modules 4.2.1 → 4.3.1

package/dist/components/ProductFootprintPieChart.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _recharts = require("recharts");
+var _material = require("@mui/material");
+var _atoms = require("@aclymatepackages/atoms");
+var _formatters = require("@aclymatepackages/formatters");
+var _addOns = require("@aclymatepackages/add-ons");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CustomTooltipDisplayRow = _ref => {
+  let {
+    name,
+    percentage,
+    kgs,
+    customAvatar
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    spacing: 2,
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, customAvatar), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "body2",
+    style: {
+      fontWeight: "bold"
+    }
+  }, name), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "caption",
+    color: "textSecondary"
+  }, (0, _formatters.formatDecimal)(kgs), " kgs (", percentage, "%)")));
+};
+const FootprintPieChartTooltip = _ref2 => {
+  let {
+    payload
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement(_atoms.DefaultPaper, null, (payload === null || payload === void 0 ? void 0 : payload[0]) && /*#__PURE__*/_react.default.createElement(CustomTooltipDisplayRow, {
+    name: payload[0].payload.name,
+    percentage: (0, _formatters.formatDecimal)(payload[0].payload.percentage),
+    kgs: payload[0].payload.kgs,
+    color: payload[0].payload.color,
+    customAvatar: /*#__PURE__*/_react.default.createElement(_atoms.ProductFootprintCategoryAvatar, payload[0].payload)
+  }));
+};
+const ProductFootprintPieChart = _ref3 => {
+  let {
+    footprintBreakdownKgs,
+    totalFootprintKgs
+  } = _ref3;
+  const pieData = _addOns.displayProductFootprintCategories.map(_ref4 => {
+    let {
+      dataKey,
+      name,
+      color,
+      icon
+    } = _ref4;
+    const kgs = footprintBreakdownKgs[dataKey] || 0;
+    const percentage = totalFootprintKgs > 0 ? kgs / totalFootprintKgs * 100 : 0;
+    return {
+      name,
+      kgs,
+      percentage,
+      color,
+      icon,
+      dataKey
+    };
+  }).filter(_ref5 => {
+    let {
+      kgs
+    } = _ref5;
+    return kgs > 0;
+  }); // Only show categories with actual values
+
+  if (pieData.length === 0) {
+    return /*#__PURE__*/_react.default.createElement(_material.Typography, {
+      variant: "body2",
+      align: "center",
+      color: "textSecondary"
+    }, "No footprint data available");
+  }
+  return /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
+    width: 300,
+    height: 300
+  }, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, null, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
+    data: pieData,
+    dataKey: "kgs",
+    outerRadius: "80%",
+    fill: "#8884d8",
+    cx: "50%",
+    cy: "50%"
+  }, pieData.map((entry, index) => /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
+    key: "cell-".concat(index),
+    fill: entry.color
+  }))), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
+    content: /*#__PURE__*/_react.default.createElement(FootprintPieChartTooltip, null)
+  })));
+};
+var _default = exports.default = ProductFootprintPieChart;

package/dist/index.js

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "PlacesAutocomplete", {
     return _PlacesAutocomplete.default;
   }
 });
+Object.defineProperty(exports, "ProductFootprintPieChart", {
+  enumerable: true,
+  get: function get() {
+    return _ProductFootprintPieChart.default;
+  }
+});
 Object.defineProperty(exports, "YesNoQuestion", {
   enumerable: true,
   get: function get() {
@@ -101,4 +107,5 @@ var _useChartWarningLabels = _interopRequireDefault(require("./components/useCha
 var _EmissionsSummarySentence = _interopRequireDefault(require("./components/EmissionsSummarySentence"));
 var _DbCompanySelect = _interopRequireDefault(require("./components/DbCompanySelect"));
 var _CompanyDataConfirmation = _interopRequireDefault(require("./components/CompanyDataConfirmation"));
+var _ProductFootprintPieChart = _interopRequireDefault(require("./components/ProductFootprintPieChart"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/package.json

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

package/src/components/ProductFootprintPieChart.js

@@ -0,0 +1,99 @@
+import React from "react";
+
+import {
+  PieChart,
+  Pie,
+  Cell,
+  Tooltip as ChartTooltip,
+  ResponsiveContainer,
+} from "recharts";
+
+import { Grid, Typography } from "@mui/material";
+
+import {
+  DefaultPaper,
+  ProductFootprintCategoryAvatar,
+} from "@aclymatepackages/atoms";
+import { formatDecimal } from "@aclymatepackages/formatters";
+import { displayProductFootprintCategories } from "@aclymatepackages/add-ons";
+
+const CustomTooltipDisplayRow = ({ name, percentage, kgs, customAvatar }) => (
+  <Grid container spacing={2} alignItems="center">
+    <Grid item>{customAvatar}</Grid>
+    <Grid item>
+      <Typography variant="body2" style={{ fontWeight: "bold" }}>
+        {name}
+      </Typography>
+      <Typography variant="caption" color="textSecondary">
+        {formatDecimal(kgs)} kgs ({percentage}%)
+      </Typography>
+    </Grid>
+  </Grid>
+);
+
+const FootprintPieChartTooltip = ({ payload }) => (
+  <DefaultPaper>
+    {payload?.[0] && (
+      <CustomTooltipDisplayRow
+        name={payload[0].payload.name}
+        percentage={formatDecimal(payload[0].payload.percentage)}
+        kgs={payload[0].payload.kgs}
+        color={payload[0].payload.color}
+        customAvatar={
+          <ProductFootprintCategoryAvatar {...payload[0].payload} />
+        }
+      />
+    )}
+  </DefaultPaper>
+);
+
+const ProductFootprintPieChart = ({
+  footprintBreakdownKgs,
+  totalFootprintKgs,
+}) => {
+  const pieData = displayProductFootprintCategories
+    .map(({ dataKey, name, color, icon }) => {
+      const kgs = footprintBreakdownKgs[dataKey] || 0;
+      const percentage =
+        totalFootprintKgs > 0 ? (kgs / totalFootprintKgs) * 100 : 0;
+
+      return {
+        name,
+        kgs,
+        percentage,
+        color,
+        icon,
+        dataKey,
+      };
+    })
+    .filter(({ kgs }) => kgs > 0); // Only show categories with actual values
+
+  if (pieData.length === 0) {
+    return (
+      <Typography variant="body2" align="center" color="textSecondary">
+        No footprint data available
+      </Typography>
+    );
+  }
+
+  return (
+    <ResponsiveContainer width={300} height={300}>
+      <PieChart>
+        <Pie
+          data={pieData}
+          dataKey="kgs"
+          outerRadius="80%"
+          fill="#8884d8"
+          cx="50%"
+          cy="50%"
+        >
+          {pieData.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={entry.color} />
+          ))}
+        </Pie>
+        <ChartTooltip content={<FootprintPieChartTooltip />} />
+      </PieChart>
+    </ResponsiveContainer>
+  );
+};
+export default ProductFootprintPieChart;

package/src/index.js

@@ -12,6 +12,7 @@ import useChartWarningLabels from "./components/useChartWarningLabels";
 import EmissionsSummarySentence from "./components/EmissionsSummarySentence";
 import DbCompanySelect from "./components/DbCompanySelect";
 import CompanyDataConfirmation from "./components/CompanyDataConfirmation";
+import ProductFootprintPieChart from "./components/ProductFootprintPieChart";
 
 export {
   AccountingChart,
@@ -28,4 +29,5 @@ export {
   EmissionsSummarySentence,
   DbCompanySelect,
   CompanyDataConfirmation,
+  ProductFootprintPieChart,
 };