@aclymatepackages/modules 1.0.17 → 1.0.18
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.
- package/dist/components/CustomTooltipDisplayRow.js +11 -13
- package/dist/components/EmissionsChart.js +6 -3
- package/dist/components/EmissionsCustomTooltip.js +4 -17
- package/dist/components/EmissionsPieChart.js +11 -13
- package/package.json +2 -2
- package/src/components/CustomTooltipDisplayRow.js +11 -7
- package/src/components/EmissionsChart.js +7 -1
- package/src/components/EmissionsCustomTooltip.js +6 -25
- package/src/components/EmissionsPieChart.js +11 -7
|
@@ -6,17 +6,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _material = require("@mui/material");
|
|
9
|
+
var _atoms = require("@aclymatepackages/atoms");
|
|
9
10
|
var _formatters = require("@aclymatepackages/formatters");
|
|
10
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
12
|
const CustomTooltipDisplayRow = _ref => {
|
|
12
13
|
let {
|
|
13
14
|
category,
|
|
14
|
-
Icon,
|
|
15
|
-
icon,
|
|
16
15
|
customAvatar,
|
|
17
16
|
color,
|
|
18
17
|
name,
|
|
19
|
-
subtitle
|
|
18
|
+
subtitle,
|
|
19
|
+
viewMode,
|
|
20
|
+
subcategory,
|
|
21
|
+
scope
|
|
20
22
|
} = _ref;
|
|
21
23
|
return /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
22
24
|
item: true,
|
|
@@ -26,16 +28,12 @@ const CustomTooltipDisplayRow = _ref => {
|
|
|
26
28
|
alignItems: "center"
|
|
27
29
|
}, /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
28
30
|
item: true
|
|
29
|
-
}, customAvatar || /*#__PURE__*/_react.default.createElement(
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
},
|
|
35
|
-
style: {
|
|
36
|
-
color: "inherit"
|
|
37
|
-
}
|
|
38
|
-
}))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
31
|
+
}, customAvatar || /*#__PURE__*/_react.default.createElement(_atoms.CategoriesAvatar, {
|
|
32
|
+
viewMode: viewMode,
|
|
33
|
+
color: color,
|
|
34
|
+
subcategory: subcategory,
|
|
35
|
+
scope: scope
|
|
36
|
+
})), /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
39
37
|
item: true,
|
|
40
38
|
container: true,
|
|
41
39
|
direction: "column",
|
|
@@ -36,7 +36,8 @@ const findObjectValuesSum = object => Object.values(object).reduce((sum, value)
|
|
|
36
36
|
const buildGroupedChartData = _ref => {
|
|
37
37
|
let {
|
|
38
38
|
groupedEmissions,
|
|
39
|
-
buildRealDataObj
|
|
39
|
+
buildRealDataObj,
|
|
40
|
+
viewMode
|
|
40
41
|
} = _ref;
|
|
41
42
|
return groupedEmissions.map((emissionsArray, idx) => {
|
|
42
43
|
const subcategoriesObj = buildRealDataObj(emissionsArray, _subcategories.allSubcategoriesWithOther);
|
|
@@ -59,7 +60,8 @@ const buildGroupedChartData = _ref => {
|
|
|
59
60
|
warning: buildWarningObj(),
|
|
60
61
|
id: "emissions-chart-group-".concat(idx),
|
|
61
62
|
emissionsSumTons: (0, _otherHelpers.sumTonsCo2e)(emissionsArray),
|
|
62
|
-
totalEmissionsSumTons: findObjectValuesSum(subcategoriesObj)
|
|
63
|
+
totalEmissionsSumTons: findObjectValuesSum(subcategoriesObj),
|
|
64
|
+
viewMode
|
|
63
65
|
});
|
|
64
66
|
});
|
|
65
67
|
};
|
|
@@ -212,7 +214,8 @@ const EmissionsChart = _ref10 => {
|
|
|
212
214
|
const buildChartData = () => {
|
|
213
215
|
const preliminaryChartData = buildGroupedChartData({
|
|
214
216
|
groupedEmissions,
|
|
215
|
-
buildRealDataObj
|
|
217
|
+
buildRealDataObj,
|
|
218
|
+
viewMode
|
|
216
219
|
});
|
|
217
220
|
const convertChartDataObject = (chartDataObj, converter) => Object.fromEntries(Object.entries(chartDataObj).map(_ref11 => {
|
|
218
221
|
let [key, value] = _ref11;
|
|
@@ -82,13 +82,7 @@ const EmissionsCustomTooltip = _ref2 => {
|
|
|
82
82
|
dataArray = [],
|
|
83
83
|
displayUnitLabel
|
|
84
84
|
} = _ref2;
|
|
85
|
-
const buildSubtitle = (realCarbonVolume,
|
|
86
|
-
const baseSubtitle = "".concat((0, _formatters.formatDecimal)(realCarbonVolume), " ").concat(displayUnitLabel, " CO2");
|
|
87
|
-
if (!projectedCarbonVolume) {
|
|
88
|
-
return baseSubtitle;
|
|
89
|
-
}
|
|
90
|
-
return "".concat(baseSubtitle, " (").concat((0, _formatters.formatDecimal)(projectedCarbonVolume), " projected)");
|
|
91
|
-
};
|
|
85
|
+
const buildSubtitle = realCarbonVolume => "".concat((0, _formatters.formatDecimal)(realCarbonVolume), " ").concat(displayUnitLabel, " CO2");
|
|
92
86
|
const columnDetails = payload === null || payload === void 0 || (_payload$ = payload[0]) === null || _payload$ === void 0 ? void 0 : _payload$.payload;
|
|
93
87
|
const _ref3 = columnDetails || {},
|
|
94
88
|
{
|
|
@@ -119,14 +113,11 @@ const EmissionsCustomTooltip = _ref2 => {
|
|
|
119
113
|
return subcategory;
|
|
120
114
|
}))];
|
|
121
115
|
const subcategoryDisplayArray = uniqueSubcategories.map(subcategory => {
|
|
122
|
-
var _filteredFormattedGra
|
|
123
|
-
const realValue = (_filteredFormattedGra = filteredFormattedGraphValuesArray.find(graphValue => graphValue.subcategory === subcategory
|
|
124
|
-
const projectedValue = (_filteredFormattedGra2 = filteredFormattedGraphValuesArray.find(graphValue => graphValue.subcategory === subcategory && !!graphValue.projected)) === null || _filteredFormattedGra2 === void 0 ? void 0 : _filteredFormattedGra2.value;
|
|
116
|
+
var _filteredFormattedGra;
|
|
117
|
+
const realValue = (_filteredFormattedGra = filteredFormattedGraphValuesArray.find(graphValue => graphValue.subcategory === subcategory)) === null || _filteredFormattedGra === void 0 ? void 0 : _filteredFormattedGra.value;
|
|
125
118
|
return {
|
|
126
119
|
subcategory,
|
|
127
|
-
realValue
|
|
128
|
-
projectedValue,
|
|
129
|
-
subtitle: buildSubtitle(realValue, projectedValue)
|
|
120
|
+
subtitle: buildSubtitle(realValue)
|
|
130
121
|
};
|
|
131
122
|
});
|
|
132
123
|
const displayArrayWithIcons = subcategoryDisplayArray.map(_ref7 => {
|
|
@@ -135,15 +126,11 @@ const EmissionsCustomTooltip = _ref2 => {
|
|
|
135
126
|
} = _ref7,
|
|
136
127
|
otherProps = _objectWithoutProperties(_ref7, _excluded2);
|
|
137
128
|
const {
|
|
138
|
-
Icon,
|
|
139
129
|
color,
|
|
140
|
-
icon,
|
|
141
130
|
name
|
|
142
131
|
} = categoriesArray.find(categoryObj => categoryObj.subcategory === subcategory) || {};
|
|
143
132
|
return _objectSpread({
|
|
144
133
|
subcategory,
|
|
145
|
-
Icon,
|
|
146
|
-
icon,
|
|
147
134
|
color,
|
|
148
135
|
name
|
|
149
136
|
}, otherProps);
|
|
@@ -30,9 +30,10 @@ const PieChartCustomTooltip = _ref => {
|
|
|
30
30
|
const {
|
|
31
31
|
name,
|
|
32
32
|
emissionPercentage,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
scope,
|
|
34
|
+
subcategory,
|
|
35
|
+
viewMode,
|
|
36
|
+
color
|
|
36
37
|
} = payload;
|
|
37
38
|
return /*#__PURE__*/_react.default.createElement(_atoms.DefaultPaper, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
38
39
|
container: true,
|
|
@@ -40,16 +41,12 @@ const PieChartCustomTooltip = _ref => {
|
|
|
40
41
|
alignItems: "center"
|
|
41
42
|
}, /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
42
43
|
item: true
|
|
43
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
},
|
|
49
|
-
style: {
|
|
50
|
-
color: "inherit"
|
|
51
|
-
}
|
|
52
|
-
}))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
44
|
+
}, /*#__PURE__*/_react.default.createElement(_atoms.CategoriesAvatar, {
|
|
45
|
+
scope: scope,
|
|
46
|
+
subcategory: subcategory,
|
|
47
|
+
viewMode: viewMode,
|
|
48
|
+
color: color
|
|
49
|
+
})), /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
53
50
|
item: true
|
|
54
51
|
}, /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
55
52
|
variant: "subtitle1",
|
|
@@ -92,6 +89,7 @@ const EmissionsPieChart = _ref2 => {
|
|
|
92
89
|
const emissionsWithThisCategory = emissions.filter(filterFunction(subcategory));
|
|
93
90
|
const categoryEmissionsSum = (0, _otherHelpers.sumTonsCo2e)(emissionsWithThisCategory);
|
|
94
91
|
return _objectSpread(_objectSpread({}, subcategoryObj), {}, {
|
|
92
|
+
viewMode,
|
|
95
93
|
emissionPercentage: categoryEmissionsSum / emissionsSum * 100
|
|
96
94
|
});
|
|
97
95
|
});
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aclymatepackages/modules",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.18",
|
|
4
4
|
"description": "Aclymate modules",
|
|
5
5
|
"author": "William Loopesko",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"dependencies": {
|
|
8
8
|
"@aclymatepackages/array-immutability-helpers": "^1.0.0",
|
|
9
|
-
"@aclymatepackages/atoms": "^1.0.
|
|
9
|
+
"@aclymatepackages/atoms": "^1.0.14",
|
|
10
10
|
"@aclymatepackages/chart-helpers": "^1.0.10",
|
|
11
11
|
"@aclymatepackages/converters": "^1.0.0",
|
|
12
12
|
"@aclymatepackages/emissions-calcs": "^1.1.1",
|
|
@@ -1,25 +1,29 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
|
|
3
|
-
import { Grid, Typography
|
|
3
|
+
import { Grid, Typography } from "@mui/material";
|
|
4
4
|
|
|
5
|
+
import { CategoriesAvatar } from "@aclymatepackages/atoms";
|
|
5
6
|
import { ucFirstLetters } from "@aclymatepackages/formatters";
|
|
6
7
|
|
|
7
8
|
const CustomTooltipDisplayRow = ({
|
|
8
9
|
category,
|
|
9
|
-
Icon,
|
|
10
|
-
icon,
|
|
11
10
|
customAvatar,
|
|
12
11
|
color,
|
|
13
12
|
name,
|
|
14
13
|
subtitle,
|
|
14
|
+
viewMode,
|
|
15
|
+
subcategory,
|
|
16
|
+
scope,
|
|
15
17
|
}) => (
|
|
16
18
|
<Grid item container spacing={1} wrap="nowrap" alignItems="center">
|
|
17
19
|
<Grid item>
|
|
18
20
|
{customAvatar || (
|
|
19
|
-
<
|
|
20
|
-
{
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
<CategoriesAvatar
|
|
22
|
+
viewMode={viewMode}
|
|
23
|
+
color={color}
|
|
24
|
+
subcategory={subcategory}
|
|
25
|
+
scope={scope}
|
|
26
|
+
/>
|
|
23
27
|
)}
|
|
24
28
|
</Grid>
|
|
25
29
|
<Grid item container direction="column" wrap="nowrap">
|
|
@@ -37,7 +37,11 @@ dayjs.extend(dayOfYear);
|
|
|
37
37
|
const findObjectValuesSum = (object) =>
|
|
38
38
|
Object.values(object).reduce((sum, value) => sum + value, 0);
|
|
39
39
|
|
|
40
|
-
const buildGroupedChartData = ({
|
|
40
|
+
const buildGroupedChartData = ({
|
|
41
|
+
groupedEmissions,
|
|
42
|
+
buildRealDataObj,
|
|
43
|
+
viewMode,
|
|
44
|
+
}) => {
|
|
41
45
|
return groupedEmissions.map((emissionsArray, idx) => {
|
|
42
46
|
const subcategoriesObj = buildRealDataObj(
|
|
43
47
|
emissionsArray,
|
|
@@ -63,6 +67,7 @@ const buildGroupedChartData = ({ groupedEmissions, buildRealDataObj }) => {
|
|
|
63
67
|
id: `emissions-chart-group-${idx}`,
|
|
64
68
|
emissionsSumTons: sumTonsCo2e(emissionsArray),
|
|
65
69
|
totalEmissionsSumTons: findObjectValuesSum(subcategoriesObj),
|
|
70
|
+
viewMode,
|
|
66
71
|
};
|
|
67
72
|
});
|
|
68
73
|
};
|
|
@@ -214,6 +219,7 @@ const EmissionsChart = ({
|
|
|
214
219
|
const preliminaryChartData = buildGroupedChartData({
|
|
215
220
|
groupedEmissions,
|
|
216
221
|
buildRealDataObj,
|
|
222
|
+
viewMode,
|
|
217
223
|
});
|
|
218
224
|
|
|
219
225
|
const convertChartDataObject = (chartDataObj, converter) =>
|
|
@@ -50,19 +50,8 @@ const EmissionsCustomTooltip = ({
|
|
|
50
50
|
dataArray = [],
|
|
51
51
|
displayUnitLabel,
|
|
52
52
|
}) => {
|
|
53
|
-
const buildSubtitle = (realCarbonVolume
|
|
54
|
-
|
|
55
|
-
realCarbonVolume
|
|
56
|
-
)} ${displayUnitLabel} CO2`;
|
|
57
|
-
|
|
58
|
-
if (!projectedCarbonVolume) {
|
|
59
|
-
return baseSubtitle;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
return `${baseSubtitle} (${formatDecimal(
|
|
63
|
-
projectedCarbonVolume
|
|
64
|
-
)} projected)`;
|
|
65
|
-
};
|
|
53
|
+
const buildSubtitle = (realCarbonVolume) =>
|
|
54
|
+
`${formatDecimal(realCarbonVolume)} ${displayUnitLabel} CO2`;
|
|
66
55
|
|
|
67
56
|
const columnDetails = payload?.[0]?.payload;
|
|
68
57
|
const {
|
|
@@ -90,30 +79,22 @@ const EmissionsCustomTooltip = ({
|
|
|
90
79
|
|
|
91
80
|
const subcategoryDisplayArray = uniqueSubcategories.map((subcategory) => {
|
|
92
81
|
const realValue = filteredFormattedGraphValuesArray.find(
|
|
93
|
-
(graphValue) =>
|
|
94
|
-
graphValue.subcategory === subcategory && !graphValue.projected
|
|
95
|
-
)?.value;
|
|
96
|
-
|
|
97
|
-
const projectedValue = filteredFormattedGraphValuesArray.find(
|
|
98
|
-
(graphValue) =>
|
|
99
|
-
graphValue.subcategory === subcategory && !!graphValue.projected
|
|
82
|
+
(graphValue) => graphValue.subcategory === subcategory
|
|
100
83
|
)?.value;
|
|
101
84
|
|
|
102
85
|
return {
|
|
103
86
|
subcategory,
|
|
104
|
-
realValue,
|
|
105
|
-
projectedValue,
|
|
106
|
-
subtitle: buildSubtitle(realValue, projectedValue),
|
|
87
|
+
subtitle: buildSubtitle(realValue),
|
|
107
88
|
};
|
|
108
89
|
});
|
|
109
90
|
|
|
110
91
|
const displayArrayWithIcons = subcategoryDisplayArray
|
|
111
92
|
.map(({ subcategory, ...otherProps }) => {
|
|
112
|
-
const {
|
|
93
|
+
const { color, name } =
|
|
113
94
|
categoriesArray.find(
|
|
114
95
|
(categoryObj) => categoryObj.subcategory === subcategory
|
|
115
96
|
) || {};
|
|
116
|
-
return { subcategory,
|
|
97
|
+
return { subcategory, color, name, ...otherProps };
|
|
117
98
|
})
|
|
118
99
|
.filter(({ color }) => color);
|
|
119
100
|
|
|
@@ -8,9 +8,9 @@ import {
|
|
|
8
8
|
Cell,
|
|
9
9
|
} from "recharts";
|
|
10
10
|
|
|
11
|
-
import { Typography, Grid
|
|
11
|
+
import { Typography, Grid } from "@mui/material";
|
|
12
12
|
|
|
13
|
-
import { DefaultPaper } from "@aclymatepackages/atoms";
|
|
13
|
+
import { DefaultPaper, CategoriesAvatar } from "@aclymatepackages/atoms";
|
|
14
14
|
import { formatDecimal } from "@aclymatepackages/formatters";
|
|
15
15
|
import { sumTonsCo2e } from "@aclymatepackages/other-helpers";
|
|
16
16
|
import {
|
|
@@ -21,16 +21,19 @@ import {
|
|
|
21
21
|
const PieChartCustomTooltip = ({ payload: passedPayload }) => {
|
|
22
22
|
const [payloadObj] = passedPayload;
|
|
23
23
|
const { payload = {} } = payloadObj || [{}];
|
|
24
|
-
const { name, emissionPercentage,
|
|
24
|
+
const { name, emissionPercentage, scope, subcategory, viewMode, color } =
|
|
25
|
+
payload;
|
|
25
26
|
|
|
26
27
|
return (
|
|
27
28
|
<DefaultPaper>
|
|
28
29
|
<Grid container spacing={2} alignItems="center">
|
|
29
30
|
<Grid item>
|
|
30
|
-
<
|
|
31
|
-
{
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
<CategoriesAvatar
|
|
32
|
+
scope={scope}
|
|
33
|
+
subcategory={subcategory}
|
|
34
|
+
viewMode={viewMode}
|
|
35
|
+
color={color}
|
|
36
|
+
/>
|
|
34
37
|
</Grid>
|
|
35
38
|
<Grid item>
|
|
36
39
|
<Typography variant="subtitle1" color="textPrimary">
|
|
@@ -84,6 +87,7 @@ const EmissionsPieChart = ({
|
|
|
84
87
|
|
|
85
88
|
return {
|
|
86
89
|
...subcategoryObj,
|
|
90
|
+
viewMode,
|
|
87
91
|
emissionPercentage: (categoryEmissionsSum / emissionsSum) * 100,
|
|
88
92
|
};
|
|
89
93
|
});
|