@aclymatepackages/modules 4.3.0 → 4.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1,104 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _recharts = require("recharts");
|
|
9
|
+
var _material = require("@mui/material");
|
|
10
|
+
var _atoms = require("@aclymatepackages/atoms");
|
|
11
|
+
var _formatters = require("@aclymatepackages/formatters");
|
|
12
|
+
var _addOns = require("@aclymatepackages/add-ons");
|
|
13
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
+
const CustomTooltipDisplayRow = _ref => {
|
|
15
|
+
let {
|
|
16
|
+
name,
|
|
17
|
+
percentage,
|
|
18
|
+
kgs,
|
|
19
|
+
customAvatar
|
|
20
|
+
} = _ref;
|
|
21
|
+
return /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
22
|
+
container: true,
|
|
23
|
+
spacing: 2,
|
|
24
|
+
alignItems: "center"
|
|
25
|
+
}, /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
26
|
+
item: true
|
|
27
|
+
}, customAvatar), /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
28
|
+
item: true
|
|
29
|
+
}, /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
30
|
+
variant: "body2",
|
|
31
|
+
style: {
|
|
32
|
+
fontWeight: "bold"
|
|
33
|
+
}
|
|
34
|
+
}, name), /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
35
|
+
variant: "caption",
|
|
36
|
+
color: "textSecondary"
|
|
37
|
+
}, (0, _formatters.formatDecimal)(kgs), " kgs (", percentage, "%)")));
|
|
38
|
+
};
|
|
39
|
+
const FootprintPieChartTooltip = _ref2 => {
|
|
40
|
+
let {
|
|
41
|
+
payload
|
|
42
|
+
} = _ref2;
|
|
43
|
+
return /*#__PURE__*/_react.default.createElement(_atoms.DefaultPaper, null, (payload === null || payload === void 0 ? void 0 : payload[0]) && /*#__PURE__*/_react.default.createElement(CustomTooltipDisplayRow, {
|
|
44
|
+
name: payload[0].payload.name,
|
|
45
|
+
percentage: (0, _formatters.formatDecimal)(payload[0].payload.percentage),
|
|
46
|
+
kgs: payload[0].payload.kgs,
|
|
47
|
+
color: payload[0].payload.color,
|
|
48
|
+
customAvatar: /*#__PURE__*/_react.default.createElement(_atoms.ProductFootprintCategoryAvatar, payload[0].payload)
|
|
49
|
+
}));
|
|
50
|
+
};
|
|
51
|
+
const ProductFootprintPieChart = _ref3 => {
|
|
52
|
+
let {
|
|
53
|
+
footprintBreakdownKgs,
|
|
54
|
+
totalFootprintKgs
|
|
55
|
+
} = _ref3;
|
|
56
|
+
const pieData = _addOns.displayProductFootprintCategories.map(_ref4 => {
|
|
57
|
+
let {
|
|
58
|
+
dataKey,
|
|
59
|
+
name,
|
|
60
|
+
color,
|
|
61
|
+
icon
|
|
62
|
+
} = _ref4;
|
|
63
|
+
const kgs = footprintBreakdownKgs[dataKey] || 0;
|
|
64
|
+
const percentage = totalFootprintKgs > 0 ? kgs / totalFootprintKgs * 100 : 0;
|
|
65
|
+
return {
|
|
66
|
+
name,
|
|
67
|
+
kgs,
|
|
68
|
+
percentage,
|
|
69
|
+
color,
|
|
70
|
+
icon,
|
|
71
|
+
dataKey
|
|
72
|
+
};
|
|
73
|
+
}).filter(_ref5 => {
|
|
74
|
+
let {
|
|
75
|
+
kgs
|
|
76
|
+
} = _ref5;
|
|
77
|
+
return kgs > 0;
|
|
78
|
+
}); // Only show categories with actual values
|
|
79
|
+
|
|
80
|
+
if (pieData.length === 0) {
|
|
81
|
+
return /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
82
|
+
variant: "body2",
|
|
83
|
+
align: "center",
|
|
84
|
+
color: "textSecondary"
|
|
85
|
+
}, "No footprint data available");
|
|
86
|
+
}
|
|
87
|
+
return /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
|
|
88
|
+
width: 300,
|
|
89
|
+
height: 300
|
|
90
|
+
}, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, null, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
|
|
91
|
+
data: pieData,
|
|
92
|
+
dataKey: "kgs",
|
|
93
|
+
outerRadius: "80%",
|
|
94
|
+
fill: "#8884d8",
|
|
95
|
+
cx: "50%",
|
|
96
|
+
cy: "50%"
|
|
97
|
+
}, pieData.map((entry, index) => /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
|
|
98
|
+
key: "cell-".concat(index),
|
|
99
|
+
fill: entry.color
|
|
100
|
+
}))), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
|
|
101
|
+
content: /*#__PURE__*/_react.default.createElement(FootprintPieChartTooltip, null)
|
|
102
|
+
})));
|
|
103
|
+
};
|
|
104
|
+
var _default = exports.default = ProductFootprintPieChart;
|
package/package.json
CHANGED
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
import {
|
|
4
|
+
PieChart,
|
|
5
|
+
Pie,
|
|
6
|
+
Cell,
|
|
7
|
+
Tooltip as ChartTooltip,
|
|
8
|
+
ResponsiveContainer,
|
|
9
|
+
} from "recharts";
|
|
10
|
+
|
|
11
|
+
import { Grid, Typography } from "@mui/material";
|
|
12
|
+
|
|
13
|
+
import {
|
|
14
|
+
DefaultPaper,
|
|
15
|
+
ProductFootprintCategoryAvatar,
|
|
16
|
+
} from "@aclymatepackages/atoms";
|
|
17
|
+
import { formatDecimal } from "@aclymatepackages/formatters";
|
|
18
|
+
import { displayProductFootprintCategories } from "@aclymatepackages/add-ons";
|
|
19
|
+
|
|
20
|
+
const CustomTooltipDisplayRow = ({ name, percentage, kgs, customAvatar }) => (
|
|
21
|
+
<Grid container spacing={2} alignItems="center">
|
|
22
|
+
<Grid item>{customAvatar}</Grid>
|
|
23
|
+
<Grid item>
|
|
24
|
+
<Typography variant="body2" style={{ fontWeight: "bold" }}>
|
|
25
|
+
{name}
|
|
26
|
+
</Typography>
|
|
27
|
+
<Typography variant="caption" color="textSecondary">
|
|
28
|
+
{formatDecimal(kgs)} kgs ({percentage}%)
|
|
29
|
+
</Typography>
|
|
30
|
+
</Grid>
|
|
31
|
+
</Grid>
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
const FootprintPieChartTooltip = ({ payload }) => (
|
|
35
|
+
<DefaultPaper>
|
|
36
|
+
{payload?.[0] && (
|
|
37
|
+
<CustomTooltipDisplayRow
|
|
38
|
+
name={payload[0].payload.name}
|
|
39
|
+
percentage={formatDecimal(payload[0].payload.percentage)}
|
|
40
|
+
kgs={payload[0].payload.kgs}
|
|
41
|
+
color={payload[0].payload.color}
|
|
42
|
+
customAvatar={
|
|
43
|
+
<ProductFootprintCategoryAvatar {...payload[0].payload} />
|
|
44
|
+
}
|
|
45
|
+
/>
|
|
46
|
+
)}
|
|
47
|
+
</DefaultPaper>
|
|
48
|
+
);
|
|
49
|
+
|
|
50
|
+
const ProductFootprintPieChart = ({
|
|
51
|
+
footprintBreakdownKgs,
|
|
52
|
+
totalFootprintKgs,
|
|
53
|
+
}) => {
|
|
54
|
+
const pieData = displayProductFootprintCategories
|
|
55
|
+
.map(({ dataKey, name, color, icon }) => {
|
|
56
|
+
const kgs = footprintBreakdownKgs[dataKey] || 0;
|
|
57
|
+
const percentage =
|
|
58
|
+
totalFootprintKgs > 0 ? (kgs / totalFootprintKgs) * 100 : 0;
|
|
59
|
+
|
|
60
|
+
return {
|
|
61
|
+
name,
|
|
62
|
+
kgs,
|
|
63
|
+
percentage,
|
|
64
|
+
color,
|
|
65
|
+
icon,
|
|
66
|
+
dataKey,
|
|
67
|
+
};
|
|
68
|
+
})
|
|
69
|
+
.filter(({ kgs }) => kgs > 0); // Only show categories with actual values
|
|
70
|
+
|
|
71
|
+
if (pieData.length === 0) {
|
|
72
|
+
return (
|
|
73
|
+
<Typography variant="body2" align="center" color="textSecondary">
|
|
74
|
+
No footprint data available
|
|
75
|
+
</Typography>
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
return (
|
|
80
|
+
<ResponsiveContainer width={300} height={300}>
|
|
81
|
+
<PieChart>
|
|
82
|
+
<Pie
|
|
83
|
+
data={pieData}
|
|
84
|
+
dataKey="kgs"
|
|
85
|
+
outerRadius="80%"
|
|
86
|
+
fill="#8884d8"
|
|
87
|
+
cx="50%"
|
|
88
|
+
cy="50%"
|
|
89
|
+
>
|
|
90
|
+
{pieData.map((entry, index) => (
|
|
91
|
+
<Cell key={`cell-${index}`} fill={entry.color} />
|
|
92
|
+
))}
|
|
93
|
+
</Pie>
|
|
94
|
+
<ChartTooltip content={<FootprintPieChartTooltip />} />
|
|
95
|
+
</PieChart>
|
|
96
|
+
</ResponsiveContainer>
|
|
97
|
+
);
|
|
98
|
+
};
|
|
99
|
+
export default ProductFootprintPieChart;
|