@aclymatepackages/modules 2.4.5 → 3.0.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.
- package/dist/components/FootprintVideo.js +1 -1
- package/dist/index.js +0 -35
- package/package.json +1 -1
- package/src/components/FootprintVideo.js +1 -1
- package/src/index.js +0 -10
- package/dist/components/CustomTooltipDisplayRow.js +0 -56
- package/dist/components/EmissionsChart.js +0 -305
- package/dist/components/EmissionsCustomTooltip.js +0 -139
- package/dist/components/ReportGraphContentLayout.js +0 -62
- package/dist/components/ReportSummaryBlock.js +0 -69
- package/src/components/CustomTooltipDisplayRow.js +0 -45
- package/src/components/EmissionsChart.js +0 -331
- package/src/components/EmissionsCustomTooltip.js +0 -105
- package/src/components/ReportGraphContentLayout.js +0 -49
- package/src/components/ReportSummaryBlock.js +0 -56
|
@@ -198,7 +198,7 @@ const FootprintVideo = _ref6 => {
|
|
|
198
198
|
// eslint-disable-next-line
|
|
199
199
|
}, [videoStep, showVideos]);
|
|
200
200
|
const onAdvanceSlide = () => setVideoStep(currentStep => currentStep + 1);
|
|
201
|
-
const intermediateStepLabels = ["That's as much carbon as driving ".concat((0, _converters.convertFootprintToDriving)(monthlyFootprintTons), " miles."), "Or cutting down more than ".concat((0, _converters.convertFootprintToTrees)(monthlyFootprintTons), " 50-year-old tree").concat((0, _formatters.letterSBoolean)((0, _converters.convertFootprintToTrees)(monthlyFootprintTons)), "."), "It's enough to melt more than ".concat(formatDecimal((0, _converters.convertFootprintToIce)(monthlyFootprintTons)), " square feet of Arctic sea ice that will never come back."), "And your company emits this much carbon every single month."];
|
|
201
|
+
const intermediateStepLabels = ["That's as much carbon as driving ".concat((0, _converters.convertFootprintToDriving)(monthlyFootprintTons), " miles."), "Or cutting down more than ".concat((0, _converters.convertFootprintToTrees)(monthlyFootprintTons), " 50-year-old tree").concat((0, _formatters.letterSBoolean)((0, _converters.convertFootprintToTrees)(monthlyFootprintTons)), "."), "It's enough to melt more than ".concat((0, _formatters.formatDecimal)((0, _converters.convertFootprintToIce)(monthlyFootprintTons)), " square feet of Arctic sea ice that will never come back."), "And your company emits this much carbon every single month."];
|
|
202
202
|
const onboardingFootprintSteps = [/*#__PURE__*/_react.default.createElement(VideoFootprintDisplay, {
|
|
203
203
|
monthlyFootprintTons: monthlyFootprintTons,
|
|
204
204
|
onAdvanceSlide: onAdvanceSlide
|
package/dist/index.js
CHANGED
|
@@ -21,24 +21,6 @@ Object.defineProperty(exports, "ComparisonChart", {
|
|
|
21
21
|
return _ComparisonChart.default;
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
|
-
Object.defineProperty(exports, "CustomTooltipDisplayRow", {
|
|
25
|
-
enumerable: true,
|
|
26
|
-
get: function get() {
|
|
27
|
-
return _CustomTooltipDisplayRow.default;
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
Object.defineProperty(exports, "EmissionsChart", {
|
|
31
|
-
enumerable: true,
|
|
32
|
-
get: function get() {
|
|
33
|
-
return _EmissionsChart.default;
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
Object.defineProperty(exports, "EmissionsCustomTooltip", {
|
|
37
|
-
enumerable: true,
|
|
38
|
-
get: function get() {
|
|
39
|
-
return _EmissionsCustomTooltip.default;
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
24
|
Object.defineProperty(exports, "EmissionsPieChart", {
|
|
43
25
|
enumerable: true,
|
|
44
26
|
get: function get() {
|
|
@@ -87,18 +69,6 @@ Object.defineProperty(exports, "PlacesAutocomplete", {
|
|
|
87
69
|
return _PlacesAutocomplete.default;
|
|
88
70
|
}
|
|
89
71
|
});
|
|
90
|
-
Object.defineProperty(exports, "ReportGraphContentLayout", {
|
|
91
|
-
enumerable: true,
|
|
92
|
-
get: function get() {
|
|
93
|
-
return _ReportGraphContentLayout.default;
|
|
94
|
-
}
|
|
95
|
-
});
|
|
96
|
-
Object.defineProperty(exports, "ReportSummaryBlock", {
|
|
97
|
-
enumerable: true,
|
|
98
|
-
get: function get() {
|
|
99
|
-
return _ReportSummaryBlock.default;
|
|
100
|
-
}
|
|
101
|
-
});
|
|
102
72
|
Object.defineProperty(exports, "YesNoQuestion", {
|
|
103
73
|
enumerable: true,
|
|
104
74
|
get: function get() {
|
|
@@ -120,13 +90,8 @@ var _FootprintEquivalencies = _interopRequireDefault(require("./components/Footp
|
|
|
120
90
|
var _ComparisonChart = _interopRequireDefault(require("./components/ComparisonChart"));
|
|
121
91
|
var _EmissionsReductionGraph = _interopRequireDefault(require("./components/EmissionsReductionGraph"));
|
|
122
92
|
var _CompanyOnboardingInput = _interopRequireDefault(require("./components/CompanyOnboardingInput"));
|
|
123
|
-
var _CustomTooltipDisplayRow = _interopRequireDefault(require("./components/CustomTooltipDisplayRow"));
|
|
124
|
-
var _EmissionsChart = _interopRequireDefault(require("./components/EmissionsChart"));
|
|
125
|
-
var _EmissionsCustomTooltip = _interopRequireDefault(require("./components/EmissionsCustomTooltip"));
|
|
126
93
|
var _EmissionsPieChart = _interopRequireDefault(require("./components/EmissionsPieChart"));
|
|
127
94
|
var _useChartWarningLabels = _interopRequireDefault(require("./components/useChartWarningLabels"));
|
|
128
|
-
var _ReportSummaryBlock = _interopRequireDefault(require("./components/ReportSummaryBlock"));
|
|
129
|
-
var _ReportGraphContentLayout = _interopRequireDefault(require("./components/ReportGraphContentLayout"));
|
|
130
95
|
var _EmissionsSummarySentence = _interopRequireDefault(require("./components/EmissionsSummarySentence"));
|
|
131
96
|
var _PdlCompanySelect = _interopRequireDefault(require("./components/PdlCompanySelect"));
|
|
132
97
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
package/package.json
CHANGED
|
@@ -15,7 +15,7 @@ import {
|
|
|
15
15
|
convertFootprintToIce,
|
|
16
16
|
convertFootprintToTrees,
|
|
17
17
|
} from "@aclymatepackages/converters";
|
|
18
|
-
import { letterSBoolean } from "@aclymatepackages/formatters";
|
|
18
|
+
import { letterSBoolean, formatDecimal } from "@aclymatepackages/formatters";
|
|
19
19
|
|
|
20
20
|
const OnboardingFootprintLayout = ({ children }) => {
|
|
21
21
|
const [backgroundFade, setBackgroundFade] = useState(false);
|
package/src/index.js
CHANGED
|
@@ -7,13 +7,8 @@ import FootprintEquivalencies from "./components/FootprintEquivalencies";
|
|
|
7
7
|
import ComparisonChart from "./components/ComparisonChart";
|
|
8
8
|
import EmissionsReductionGraph from "./components/EmissionsReductionGraph";
|
|
9
9
|
import CompanyOnboardingInput from "./components/CompanyOnboardingInput";
|
|
10
|
-
import CustomTooltipDisplayRow from "./components/CustomTooltipDisplayRow";
|
|
11
|
-
import EmissionsChart from "./components/EmissionsChart";
|
|
12
|
-
import EmissionsCustomTooltip from "./components/EmissionsCustomTooltip";
|
|
13
10
|
import EmissionsPieChart from "./components/EmissionsPieChart";
|
|
14
11
|
import useChartWarningLabels from "./components/useChartWarningLabels";
|
|
15
|
-
import ReportSummaryBlock from "./components/ReportSummaryBlock";
|
|
16
|
-
import ReportGraphContentLayout from "./components/ReportGraphContentLayout";
|
|
17
12
|
import EmissionsSummarySentence from "./components/EmissionsSummarySentence";
|
|
18
13
|
import PdlCompanySelect from "./components/PdlCompanySelect";
|
|
19
14
|
|
|
@@ -27,13 +22,8 @@ export {
|
|
|
27
22
|
ComparisonChart,
|
|
28
23
|
EmissionsReductionGraph,
|
|
29
24
|
CompanyOnboardingInput,
|
|
30
|
-
CustomTooltipDisplayRow,
|
|
31
|
-
EmissionsChart,
|
|
32
|
-
EmissionsCustomTooltip,
|
|
33
25
|
EmissionsPieChart,
|
|
34
26
|
useChartWarningLabels,
|
|
35
|
-
ReportSummaryBlock,
|
|
36
|
-
ReportGraphContentLayout,
|
|
37
27
|
EmissionsSummarySentence,
|
|
38
28
|
PdlCompanySelect,
|
|
39
29
|
};
|
|
@@ -1,56 +0,0 @@
|
|
|
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 _material = require("@mui/material");
|
|
9
|
-
var _atoms = require("@aclymatepackages/atoms");
|
|
10
|
-
var _formatters = require("@aclymatepackages/formatters");
|
|
11
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
-
const CustomTooltipDisplayRow = _ref => {
|
|
13
|
-
let {
|
|
14
|
-
category,
|
|
15
|
-
customAvatar,
|
|
16
|
-
color,
|
|
17
|
-
name,
|
|
18
|
-
subtitle,
|
|
19
|
-
viewMode,
|
|
20
|
-
subcategory,
|
|
21
|
-
scope
|
|
22
|
-
} = _ref;
|
|
23
|
-
return /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
24
|
-
item: true,
|
|
25
|
-
container: true,
|
|
26
|
-
spacing: 1,
|
|
27
|
-
wrap: "nowrap",
|
|
28
|
-
alignItems: "center"
|
|
29
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
30
|
-
item: true
|
|
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, {
|
|
37
|
-
item: true,
|
|
38
|
-
container: true,
|
|
39
|
-
direction: "column",
|
|
40
|
-
wrap: "nowrap"
|
|
41
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
42
|
-
item: true,
|
|
43
|
-
xs: 12
|
|
44
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
45
|
-
variant: "subtitle1",
|
|
46
|
-
color: "textPrimary",
|
|
47
|
-
noWrap: true
|
|
48
|
-
}, "".concat((0, _formatters.ucFirstLetters)(name || category)))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
49
|
-
item: true,
|
|
50
|
-
xs: 12
|
|
51
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
52
|
-
variant: "caption",
|
|
53
|
-
color: "textSecondary"
|
|
54
|
-
}, subtitle))));
|
|
55
|
-
};
|
|
56
|
-
var _default = exports.default = CustomTooltipDisplayRow;
|
|
@@ -1,305 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
require("core-js/modules/es.array.includes.js");
|
|
4
|
-
require("core-js/modules/es.object.assign.js");
|
|
5
|
-
require("core-js/modules/es.string.includes.js");
|
|
6
|
-
Object.defineProperty(exports, "__esModule", {
|
|
7
|
-
value: true
|
|
8
|
-
});
|
|
9
|
-
exports.default = void 0;
|
|
10
|
-
require("core-js/modules/es.array.reduce.js");
|
|
11
|
-
require("core-js/modules/es.object.from-entries.js");
|
|
12
|
-
require("core-js/modules/web.dom-collections.iterator.js");
|
|
13
|
-
var _react = _interopRequireDefault(require("react"));
|
|
14
|
-
var _dayjs = _interopRequireDefault(require("dayjs"));
|
|
15
|
-
var _recharts = require("recharts");
|
|
16
|
-
var _material = require("@mui/material");
|
|
17
|
-
var _formatters = require("@aclymatepackages/formatters");
|
|
18
|
-
var _otherHelpers = require("@aclymatepackages/other-helpers");
|
|
19
|
-
var _chartHelpers = require("@aclymatepackages/chart-helpers");
|
|
20
|
-
var _subcategories = require("@aclymatepackages/subcategories");
|
|
21
|
-
var _EmissionsCustomTooltip = _interopRequireDefault(require("./EmissionsCustomTooltip"));
|
|
22
|
-
var _useChartWarningLabels = _interopRequireDefault(require("./useChartWarningLabels"));
|
|
23
|
-
const _excluded = ["totalEmissionsSumTons"],
|
|
24
|
-
_excluded2 = ["subcategory", "color"];
|
|
25
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
26
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
27
|
-
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
28
|
-
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
|
|
29
|
-
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; }
|
|
30
|
-
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; }
|
|
31
|
-
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
32
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
33
|
-
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); }
|
|
34
|
-
const findObjectValuesSum = object => Object.values(object).reduce((sum, value) => sum + value, 0);
|
|
35
|
-
const buildGroupedChartData = _ref => {
|
|
36
|
-
let {
|
|
37
|
-
groupedEmissions,
|
|
38
|
-
buildRealDataObj,
|
|
39
|
-
viewMode
|
|
40
|
-
} = _ref;
|
|
41
|
-
return groupedEmissions.map((emissionsArray, idx) => {
|
|
42
|
-
const subcategoriesObj = buildRealDataObj(emissionsArray, [..._subcategories.subcategories, _subcategories.otherSubcategoryObj]);
|
|
43
|
-
const buildWarningObj = () => {
|
|
44
|
-
const singleEmissionWarning = emissionsArray.find(_ref2 => {
|
|
45
|
-
let {
|
|
46
|
-
warning
|
|
47
|
-
} = _ref2;
|
|
48
|
-
return !!warning;
|
|
49
|
-
});
|
|
50
|
-
if (!singleEmissionWarning) {
|
|
51
|
-
return null;
|
|
52
|
-
}
|
|
53
|
-
const {
|
|
54
|
-
warning
|
|
55
|
-
} = singleEmissionWarning;
|
|
56
|
-
return warning;
|
|
57
|
-
};
|
|
58
|
-
return _objectSpread(_objectSpread({}, subcategoriesObj), {}, {
|
|
59
|
-
warning: buildWarningObj(),
|
|
60
|
-
id: "emissions-chart-group-".concat(idx),
|
|
61
|
-
emissionsSumTons: (0, _otherHelpers.sumTonsCo2e)(emissionsArray),
|
|
62
|
-
totalEmissionsSumTons: findObjectValuesSum(subcategoriesObj),
|
|
63
|
-
viewMode
|
|
64
|
-
});
|
|
65
|
-
});
|
|
66
|
-
};
|
|
67
|
-
const addTrendlineToChartData = chartData => {
|
|
68
|
-
const averageX = (chartData.length - 1) / 2;
|
|
69
|
-
const averageY = chartData.reduce((sum, _ref3) => {
|
|
70
|
-
let {
|
|
71
|
-
totalEmissionsSumTons
|
|
72
|
-
} = _ref3;
|
|
73
|
-
return Number(sum) + Number(totalEmissionsSumTons);
|
|
74
|
-
}, 0) / chartData.length;
|
|
75
|
-
const trendLineCalcData = chartData.map((_ref4, idx) => {
|
|
76
|
-
let {
|
|
77
|
-
totalEmissionsSumTons
|
|
78
|
-
} = _ref4;
|
|
79
|
-
const xDifferenceFromMean = idx - averageX;
|
|
80
|
-
const yDifferenceFromMean = totalEmissionsSumTons - averageY;
|
|
81
|
-
const xDifferenceSquared = xDifferenceFromMean * xDifferenceFromMean;
|
|
82
|
-
const xyDifferenceFromMean = xDifferenceFromMean * yDifferenceFromMean;
|
|
83
|
-
return {
|
|
84
|
-
xDifferenceSquared,
|
|
85
|
-
xyDifferenceFromMean
|
|
86
|
-
};
|
|
87
|
-
});
|
|
88
|
-
const xDifferenceSquaredSum = trendLineCalcData.reduce((sum, _ref5) => {
|
|
89
|
-
let {
|
|
90
|
-
xDifferenceSquared
|
|
91
|
-
} = _ref5;
|
|
92
|
-
return sum + xDifferenceSquared;
|
|
93
|
-
}, 0);
|
|
94
|
-
const xyDifferenceFromMeanSum = trendLineCalcData.reduce((sum, _ref6) => {
|
|
95
|
-
let {
|
|
96
|
-
xyDifferenceFromMean
|
|
97
|
-
} = _ref6;
|
|
98
|
-
return sum + xyDifferenceFromMean;
|
|
99
|
-
}, 0);
|
|
100
|
-
const trendlineSlope = xyDifferenceFromMeanSum / xDifferenceSquaredSum;
|
|
101
|
-
const trendlineIntercept = averageY - trendlineSlope * averageX;
|
|
102
|
-
const findTrendlineValue = x => trendlineSlope * x + trendlineIntercept;
|
|
103
|
-
return chartData.map((_ref7, idx) => {
|
|
104
|
-
let {
|
|
105
|
-
totalEmissionsSumTons
|
|
106
|
-
} = _ref7,
|
|
107
|
-
otherProps = _objectWithoutProperties(_ref7, _excluded);
|
|
108
|
-
return _objectSpread(_objectSpread({}, otherProps), {}, {
|
|
109
|
-
trendline: findTrendlineValue(idx)
|
|
110
|
-
});
|
|
111
|
-
});
|
|
112
|
-
};
|
|
113
|
-
const LabeledEmissionsChart = _ref8 => {
|
|
114
|
-
var _data$, _data;
|
|
115
|
-
let {
|
|
116
|
-
data,
|
|
117
|
-
type,
|
|
118
|
-
displayUnitLabel,
|
|
119
|
-
chartArray,
|
|
120
|
-
aspect = 3,
|
|
121
|
-
showTooltip
|
|
122
|
-
} = _ref8;
|
|
123
|
-
const {
|
|
124
|
-
palette
|
|
125
|
-
} = (0, _material.useTheme)();
|
|
126
|
-
const {
|
|
127
|
-
warningLabels,
|
|
128
|
-
labelSetter
|
|
129
|
-
} = (0, _useChartWarningLabels.default)({
|
|
130
|
-
data,
|
|
131
|
-
warningField: "warning",
|
|
132
|
-
barSumField: "totalEmissionsSumTons"
|
|
133
|
-
});
|
|
134
|
-
const isTrendLineGood = ((_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.trendLine) > ((_data = data[data.length - 1]) === null || _data === void 0 ? void 0 : _data.trendLine);
|
|
135
|
-
const ChartElement = type === "bar" ? _recharts.Bar : _recharts.Area;
|
|
136
|
-
return /*#__PURE__*/_react.default.createElement(_material.Box, {
|
|
137
|
-
position: "relative"
|
|
138
|
-
}, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
|
|
139
|
-
aspect: aspect
|
|
140
|
-
}, /*#__PURE__*/_react.default.createElement(_recharts.ComposedChart, {
|
|
141
|
-
width: 500,
|
|
142
|
-
height: 300,
|
|
143
|
-
data: data
|
|
144
|
-
}, /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
|
|
145
|
-
dataKey: "label",
|
|
146
|
-
interval: "preserveStartEnd",
|
|
147
|
-
height: 20
|
|
148
|
-
}), /*#__PURE__*/_react.default.createElement(_recharts.YAxis, {
|
|
149
|
-
tickFormatter: tick => "".concat((0, _formatters.formatDecimal)(tick), " ").concat(displayUnitLabel),
|
|
150
|
-
width: 100
|
|
151
|
-
}), /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
|
|
152
|
-
strokeDasharray: "3 3"
|
|
153
|
-
}), showTooltip && /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
|
|
154
|
-
wrapperStyle: {
|
|
155
|
-
zIndex: 99
|
|
156
|
-
},
|
|
157
|
-
content: /*#__PURE__*/_react.default.createElement(_EmissionsCustomTooltip.default, {
|
|
158
|
-
categoriesArray: chartArray,
|
|
159
|
-
displayUnitLabel: displayUnitLabel
|
|
160
|
-
})
|
|
161
|
-
}), chartArray.map(_ref9 => {
|
|
162
|
-
let {
|
|
163
|
-
subcategory,
|
|
164
|
-
color
|
|
165
|
-
} = _ref9,
|
|
166
|
-
otherProps = _objectWithoutProperties(_ref9, _excluded2);
|
|
167
|
-
return /*#__PURE__*/_react.default.createElement(ChartElement, _extends({
|
|
168
|
-
key: "emissions-chart-element-".concat(subcategory),
|
|
169
|
-
type: "monotone",
|
|
170
|
-
stroke: "none",
|
|
171
|
-
fillOpacity: 1,
|
|
172
|
-
stackId: "a",
|
|
173
|
-
fill: color,
|
|
174
|
-
dataKey: subcategory
|
|
175
|
-
}, otherProps), labelSetter);
|
|
176
|
-
}), /*#__PURE__*/_react.default.createElement(_recharts.Line, {
|
|
177
|
-
name: "6 Month Trend",
|
|
178
|
-
connectNulls: true,
|
|
179
|
-
dataKey: "trendline",
|
|
180
|
-
stroke: isTrendLineGood ? palette.secondary.main : palette.error.main,
|
|
181
|
-
strokeWidth: 4,
|
|
182
|
-
dot: false,
|
|
183
|
-
strokeDasharray: "5 5"
|
|
184
|
-
}))), warningLabels);
|
|
185
|
-
};
|
|
186
|
-
const EmissionsChart = _ref10 => {
|
|
187
|
-
let {
|
|
188
|
-
dataArray: emissions,
|
|
189
|
-
type,
|
|
190
|
-
viewMode = "subcategories",
|
|
191
|
-
graphPeriod,
|
|
192
|
-
showTrendline,
|
|
193
|
-
displayUnit,
|
|
194
|
-
aspect,
|
|
195
|
-
isPercentageChart,
|
|
196
|
-
showTooltip = true,
|
|
197
|
-
startDate,
|
|
198
|
-
convertCarbonUnits = tons => tons,
|
|
199
|
-
displayUnitLabel = "tons",
|
|
200
|
-
branding,
|
|
201
|
-
netZeroPercentage,
|
|
202
|
-
noLine = true
|
|
203
|
-
} = _ref10;
|
|
204
|
-
const {
|
|
205
|
-
chartLabelsArray,
|
|
206
|
-
scopesArray,
|
|
207
|
-
subcategoriesArray,
|
|
208
|
-
groupedEmissions
|
|
209
|
-
} = (0, _chartHelpers.buildEmissionGroupData)(emissions, graphPeriod, startDate, branding);
|
|
210
|
-
const buildRealDataObj = viewMode === "subcategories" ? _chartHelpers.buildSubcategoriesDataObj : _chartHelpers.buildScopesRealDataObj;
|
|
211
|
-
const buildChartData = () => {
|
|
212
|
-
const preliminaryChartData = buildGroupedChartData({
|
|
213
|
-
groupedEmissions,
|
|
214
|
-
buildRealDataObj,
|
|
215
|
-
viewMode
|
|
216
|
-
});
|
|
217
|
-
const convertChartDataObject = (chartDataObj, converter) => Object.fromEntries(Object.entries(chartDataObj).map(_ref11 => {
|
|
218
|
-
let [key, value] = _ref11;
|
|
219
|
-
if (typeof value !== "number") {
|
|
220
|
-
return [key, value];
|
|
221
|
-
}
|
|
222
|
-
return [key, converter(value)];
|
|
223
|
-
}));
|
|
224
|
-
const labelChartData = chartData => chartData.map((data, idx) => _objectSpread(_objectSpread({}, data), {}, {
|
|
225
|
-
label: chartLabelsArray[idx]
|
|
226
|
-
}));
|
|
227
|
-
if (isPercentageChart) {
|
|
228
|
-
const percentageConvertedChartData = preliminaryChartData.map(chartDataObj => {
|
|
229
|
-
const objectSubcategoryProperties = Object.keys(chartDataObj).filter(key => _subcategories.subcategories.find(_ref12 => {
|
|
230
|
-
let {
|
|
231
|
-
subcategory
|
|
232
|
-
} = _ref12;
|
|
233
|
-
return subcategory === key;
|
|
234
|
-
}));
|
|
235
|
-
const objectSubcategoryValues = objectSubcategoryProperties.map(subcategory => ({
|
|
236
|
-
key: subcategory,
|
|
237
|
-
value: chartDataObj[subcategory]
|
|
238
|
-
}));
|
|
239
|
-
const periodEmissionsSum = objectSubcategoryValues.reduce((sum, _ref13) => {
|
|
240
|
-
let {
|
|
241
|
-
value
|
|
242
|
-
} = _ref13;
|
|
243
|
-
return value + sum;
|
|
244
|
-
}, 0);
|
|
245
|
-
const percentageConverter = value => value / periodEmissionsSum * 100;
|
|
246
|
-
const newObject = Object.fromEntries(objectSubcategoryValues.map(_ref14 => {
|
|
247
|
-
let {
|
|
248
|
-
key,
|
|
249
|
-
value
|
|
250
|
-
} = _ref14;
|
|
251
|
-
return [key, value];
|
|
252
|
-
}));
|
|
253
|
-
return convertChartDataObject(newObject, percentageConverter);
|
|
254
|
-
});
|
|
255
|
-
return labelChartData(percentageConvertedChartData);
|
|
256
|
-
}
|
|
257
|
-
const unitConvertedChartData = preliminaryChartData.map(chartDataObj => convertChartDataObject(chartDataObj, convertCarbonUnits));
|
|
258
|
-
const labeledChartData = labelChartData(unitConvertedChartData);
|
|
259
|
-
if (showTrendline) {
|
|
260
|
-
return addTrendlineToChartData(labeledChartData);
|
|
261
|
-
}
|
|
262
|
-
return labeledChartData;
|
|
263
|
-
};
|
|
264
|
-
const chartData = buildChartData();
|
|
265
|
-
const findFirstYearBaseline = () => {
|
|
266
|
-
if ((0, _dayjs.default)().diff((0, _dayjs.default)(startDate), "month") < 12 || noLine) {
|
|
267
|
-
return false;
|
|
268
|
-
}
|
|
269
|
-
const {
|
|
270
|
-
groupedEmissions: firstYearBaselineMonthlyEmissions
|
|
271
|
-
} = (0, _chartHelpers.buildEmissionGroupData)(emissions, "month", startDate);
|
|
272
|
-
const firstYearMonthlyGroupedEmissions = [...new Array(11)].map((_, idx) => firstYearBaselineMonthlyEmissions[idx]);
|
|
273
|
-
const firstYearMonthlyEmissionsSum = firstYearMonthlyGroupedEmissions.map(emissions => ({
|
|
274
|
-
tonsCo2e: (0, _otherHelpers.sumTonsCo2e)(emissions)
|
|
275
|
-
}));
|
|
276
|
-
const monthlyBaselineTons = (0, _otherHelpers.sumTonsCo2e)(firstYearMonthlyEmissionsSum) / 12;
|
|
277
|
-
if (graphPeriod === "year") {
|
|
278
|
-
return convertCarbonUnits(monthlyBaselineTons * 12);
|
|
279
|
-
}
|
|
280
|
-
if (graphPeriod === "quarter") {
|
|
281
|
-
return convertCarbonUnits(monthlyBaselineTons * 3);
|
|
282
|
-
}
|
|
283
|
-
return convertCarbonUnits(monthlyBaselineTons);
|
|
284
|
-
};
|
|
285
|
-
const chartArray = viewMode === "scopes" ? scopesArray : subcategoriesArray;
|
|
286
|
-
return /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
287
|
-
container: true,
|
|
288
|
-
direction: "column"
|
|
289
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
290
|
-
item: true
|
|
291
|
-
}, /*#__PURE__*/_react.default.createElement(LabeledEmissionsChart, {
|
|
292
|
-
data: chartData,
|
|
293
|
-
type: type,
|
|
294
|
-
displayUnitLabel: isPercentageChart ? "%" : displayUnit || displayUnitLabel,
|
|
295
|
-
chartArray: chartArray.map(obj => _objectSpread(_objectSpread({}, obj), {}, {
|
|
296
|
-
viewMode
|
|
297
|
-
})),
|
|
298
|
-
aspect: aspect,
|
|
299
|
-
showTooltip: showTooltip,
|
|
300
|
-
graphPeriod: graphPeriod,
|
|
301
|
-
netZeroPercentage: netZeroPercentage,
|
|
302
|
-
baseline: findFirstYearBaseline()
|
|
303
|
-
})));
|
|
304
|
-
};
|
|
305
|
-
var _default = exports.default = EmissionsChart;
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
require("core-js/modules/es.object.assign.js");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
require("core-js/modules/es.array.reduce.js");
|
|
9
|
-
var _react = _interopRequireDefault(require("react"));
|
|
10
|
-
var _material = require("@mui/material");
|
|
11
|
-
var _atoms = require("@aclymatepackages/atoms");
|
|
12
|
-
var _formatters = require("@aclymatepackages/formatters");
|
|
13
|
-
var _themes = require("@aclymatepackages/themes");
|
|
14
|
-
var _CustomTooltipDisplayRow = _interopRequireDefault(require("./CustomTooltipDisplayRow"));
|
|
15
|
-
var _reactFontawesome = require("@fortawesome/react-fontawesome");
|
|
16
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
18
|
-
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; }
|
|
19
|
-
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; }
|
|
20
|
-
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
21
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
22
|
-
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); }
|
|
23
|
-
const StatusDisplay = _ref => {
|
|
24
|
-
let {
|
|
25
|
-
dataArray,
|
|
26
|
-
id
|
|
27
|
-
} = _ref;
|
|
28
|
-
const {
|
|
29
|
-
status
|
|
30
|
-
} = dataArray.find(dataObj => (dataObj === null || dataObj === void 0 ? void 0 : dataObj.id) === id) || {};
|
|
31
|
-
if (!status) {
|
|
32
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
|
|
33
|
-
}
|
|
34
|
-
const {
|
|
35
|
-
color,
|
|
36
|
-
icon,
|
|
37
|
-
tooltip
|
|
38
|
-
} = status;
|
|
39
|
-
return /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
40
|
-
item: true
|
|
41
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Paper, {
|
|
42
|
-
style: {
|
|
43
|
-
backgroundColor: color
|
|
44
|
-
}
|
|
45
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Box, {
|
|
46
|
-
p: 1
|
|
47
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
48
|
-
container: true,
|
|
49
|
-
spacing: 2,
|
|
50
|
-
alignItems: "center"
|
|
51
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
52
|
-
item: true
|
|
53
|
-
}, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
|
|
54
|
-
icon: icon,
|
|
55
|
-
style: {
|
|
56
|
-
color: "white"
|
|
57
|
-
},
|
|
58
|
-
size: "2x"
|
|
59
|
-
})), /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
60
|
-
item: true
|
|
61
|
-
}, /*#__PURE__*/_react.default.createElement(_material.ThemeProvider, {
|
|
62
|
-
theme: _themes.mergeDarkTheme
|
|
63
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
64
|
-
variant: "subtitle2",
|
|
65
|
-
color: "textPrimary"
|
|
66
|
-
}, tooltip)))))));
|
|
67
|
-
};
|
|
68
|
-
const EmissionsCustomTooltip = _ref2 => {
|
|
69
|
-
let {
|
|
70
|
-
payload: passedPayload,
|
|
71
|
-
categoriesArray,
|
|
72
|
-
labelAnnotation = "",
|
|
73
|
-
dataArray = [],
|
|
74
|
-
displayUnitLabel
|
|
75
|
-
} = _ref2;
|
|
76
|
-
if (!passedPayload.length) {
|
|
77
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
|
|
78
|
-
}
|
|
79
|
-
const buildSubtitle = carbonValue => "".concat((0, _formatters.formatDecimal)(carbonValue), " ").concat(displayUnitLabel, " CO2");
|
|
80
|
-
const {
|
|
81
|
-
payload: columnDetails
|
|
82
|
-
} = passedPayload[0];
|
|
83
|
-
const {
|
|
84
|
-
label = "",
|
|
85
|
-
id
|
|
86
|
-
} = columnDetails || {};
|
|
87
|
-
const payloadDisplayArray = passedPayload.filter(_ref3 => {
|
|
88
|
-
let {
|
|
89
|
-
value,
|
|
90
|
-
dataKey
|
|
91
|
-
} = _ref3;
|
|
92
|
-
return !!value && dataKey !== "trendline";
|
|
93
|
-
});
|
|
94
|
-
const formattedDisplayArray = payloadDisplayArray.map(_ref4 => {
|
|
95
|
-
let {
|
|
96
|
-
dataKey,
|
|
97
|
-
value
|
|
98
|
-
} = _ref4;
|
|
99
|
-
const chartSubcategory = categoriesArray.find(_ref5 => {
|
|
100
|
-
let {
|
|
101
|
-
subcategory
|
|
102
|
-
} = _ref5;
|
|
103
|
-
return subcategory === dataKey;
|
|
104
|
-
});
|
|
105
|
-
return _objectSpread(_objectSpread({}, chartSubcategory), {}, {
|
|
106
|
-
subtitle: buildSubtitle(value)
|
|
107
|
-
});
|
|
108
|
-
});
|
|
109
|
-
const emissionsSumTons = payloadDisplayArray.reduce((sum, _ref6) => {
|
|
110
|
-
let {
|
|
111
|
-
value
|
|
112
|
-
} = _ref6;
|
|
113
|
-
return value + sum;
|
|
114
|
-
}, 0);
|
|
115
|
-
return /*#__PURE__*/_react.default.createElement(_atoms.DefaultPaper, {
|
|
116
|
-
style: {
|
|
117
|
-
zIndex: 99999,
|
|
118
|
-
borderColor: "transparent"
|
|
119
|
-
}
|
|
120
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
121
|
-
container: true,
|
|
122
|
-
direction: "column",
|
|
123
|
-
spacing: 2
|
|
124
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
125
|
-
item: true
|
|
126
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
127
|
-
variant: "h4",
|
|
128
|
-
color: "textPrimary"
|
|
129
|
-
}, "".concat(label, " Emissions")), /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
130
|
-
variant: "subtitle2",
|
|
131
|
-
color: "textSecondary"
|
|
132
|
-
}, "".concat(buildSubtitle(emissionsSumTons), " ").concat(labelAnnotation))), formattedDisplayArray.map((displayData, idx) => /*#__PURE__*/_react.default.createElement(_CustomTooltipDisplayRow.default, _extends({
|
|
133
|
-
key: "tooltip-display-row-".concat(idx)
|
|
134
|
-
}, displayData))), /*#__PURE__*/_react.default.createElement(StatusDisplay, {
|
|
135
|
-
id: id,
|
|
136
|
-
dataArray: dataArray
|
|
137
|
-
})));
|
|
138
|
-
};
|
|
139
|
-
var _default = exports.default = EmissionsCustomTooltip;
|
|
@@ -1,62 +0,0 @@
|
|
|
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 _material = require("@mui/material");
|
|
9
|
-
var _EmissionsChart = _interopRequireDefault(require("./EmissionsChart"));
|
|
10
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
-
const ReportGraphContentLayout = _ref => {
|
|
12
|
-
let {
|
|
13
|
-
contentTitle,
|
|
14
|
-
contentRows = [],
|
|
15
|
-
chartType = "bar",
|
|
16
|
-
chartViewMode = "scopes",
|
|
17
|
-
emissions,
|
|
18
|
-
interval = "quarter",
|
|
19
|
-
isPercentageChart,
|
|
20
|
-
height,
|
|
21
|
-
branding,
|
|
22
|
-
showTooltip
|
|
23
|
-
} = _ref;
|
|
24
|
-
return /*#__PURE__*/_react.default.createElement(_material.Box, {
|
|
25
|
-
p: 2,
|
|
26
|
-
style: {
|
|
27
|
-
height: height || "auto"
|
|
28
|
-
}
|
|
29
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
30
|
-
container: true,
|
|
31
|
-
spacing: 2
|
|
32
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
33
|
-
item: true,
|
|
34
|
-
md: 4,
|
|
35
|
-
xs: 12,
|
|
36
|
-
container: true,
|
|
37
|
-
direction: "column",
|
|
38
|
-
spacing: 2
|
|
39
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
40
|
-
item: true
|
|
41
|
-
}, /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
42
|
-
variant: "subtitle1"
|
|
43
|
-
}, contentTitle)), contentRows.map((row, idx) => /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
44
|
-
item: true,
|
|
45
|
-
key: "content-row-".concat(idx)
|
|
46
|
-
}, row))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
|
|
47
|
-
item: true,
|
|
48
|
-
md: 8,
|
|
49
|
-
xs: 12
|
|
50
|
-
}, /*#__PURE__*/_react.default.createElement(_EmissionsChart.default, {
|
|
51
|
-
dataArray: emissions,
|
|
52
|
-
type: chartType,
|
|
53
|
-
viewMode: chartViewMode,
|
|
54
|
-
graphPeriod: interval,
|
|
55
|
-
displayUnit: "tons",
|
|
56
|
-
aspect: 2,
|
|
57
|
-
isPercentageChart: isPercentageChart,
|
|
58
|
-
showTooltip: showTooltip,
|
|
59
|
-
branding: branding
|
|
60
|
-
}))));
|
|
61
|
-
};
|
|
62
|
-
var _default = exports.default = ReportGraphContentLayout;
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
require("core-js/modules/web.dom-collections.iterator.js");
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var _material = require("@mui/material");
|
|
10
|
-
var _otherHelpers = require("@aclymatepackages/other-helpers");
|
|
11
|
-
var _ReportGraphContentLayout = _interopRequireDefault(require("./ReportGraphContentLayout"));
|
|
12
|
-
var _EmissionsPieChart = _interopRequireDefault(require("./EmissionsPieChart"));
|
|
13
|
-
var _EmissionsSummarySentence = _interopRequireDefault(require("./EmissionsSummarySentence"));
|
|
14
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
|
-
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; }
|
|
16
|
-
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; }
|
|
17
|
-
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
18
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
19
|
-
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); }
|
|
20
|
-
const ReportSummaryBlock = _ref => {
|
|
21
|
-
let {
|
|
22
|
-
emissions,
|
|
23
|
-
interval,
|
|
24
|
-
branding,
|
|
25
|
-
showTooltip,
|
|
26
|
-
scopesWithColors
|
|
27
|
-
} = _ref;
|
|
28
|
-
const scopesWithEmissions = scopesWithColors.map(scopeObj => {
|
|
29
|
-
const {
|
|
30
|
-
scope
|
|
31
|
-
} = scopeObj;
|
|
32
|
-
const scopeEmissions = (0, _otherHelpers.filterEmissionsByScope)(emissions, scope);
|
|
33
|
-
return _objectSpread(_objectSpread({}, scopeObj), {}, {
|
|
34
|
-
emissions: scopeEmissions
|
|
35
|
-
});
|
|
36
|
-
});
|
|
37
|
-
return /*#__PURE__*/_react.default.createElement(_ReportGraphContentLayout.default, {
|
|
38
|
-
showTooltip: showTooltip,
|
|
39
|
-
branding: branding,
|
|
40
|
-
contentTitle: (0, _otherHelpers.buildEmissionsSummarySentence)({
|
|
41
|
-
label: "Total Emissions",
|
|
42
|
-
emissions
|
|
43
|
-
}),
|
|
44
|
-
interval: interval,
|
|
45
|
-
emissions: emissions,
|
|
46
|
-
contentRows: [/*#__PURE__*/_react.default.createElement(_EmissionsPieChart.default, {
|
|
47
|
-
dataArray: emissions,
|
|
48
|
-
viewMode: "scopes",
|
|
49
|
-
branding: branding,
|
|
50
|
-
showTooltip: showTooltip
|
|
51
|
-
}), /*#__PURE__*/_react.default.createElement(_material.Typography, {
|
|
52
|
-
variant: "subtitle1"
|
|
53
|
-
}, "Emissions Scope Breakdown"), ...scopesWithEmissions.map((_ref2, idx) => {
|
|
54
|
-
let {
|
|
55
|
-
scope,
|
|
56
|
-
emissions,
|
|
57
|
-
color
|
|
58
|
-
} = _ref2;
|
|
59
|
-
return /*#__PURE__*/_react.default.createElement(_EmissionsSummarySentence.default, {
|
|
60
|
-
key: "summary-sentence-".concat(idx),
|
|
61
|
-
label: "Total Scope ".concat(scope),
|
|
62
|
-
emissions: emissions,
|
|
63
|
-
scope: scope,
|
|
64
|
-
color: color
|
|
65
|
-
});
|
|
66
|
-
})]
|
|
67
|
-
});
|
|
68
|
-
};
|
|
69
|
-
var _default = exports.default = ReportSummaryBlock;
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
|
|
3
|
-
import { Grid, Typography } from "@mui/material";
|
|
4
|
-
|
|
5
|
-
import { CategoriesAvatar } from "@aclymatepackages/atoms";
|
|
6
|
-
import { ucFirstLetters } from "@aclymatepackages/formatters";
|
|
7
|
-
|
|
8
|
-
const CustomTooltipDisplayRow = ({
|
|
9
|
-
category,
|
|
10
|
-
customAvatar,
|
|
11
|
-
color,
|
|
12
|
-
name,
|
|
13
|
-
subtitle,
|
|
14
|
-
viewMode,
|
|
15
|
-
subcategory,
|
|
16
|
-
scope,
|
|
17
|
-
}) => (
|
|
18
|
-
<Grid item container spacing={1} wrap="nowrap" alignItems="center">
|
|
19
|
-
<Grid item>
|
|
20
|
-
{customAvatar || (
|
|
21
|
-
<CategoriesAvatar
|
|
22
|
-
viewMode={viewMode}
|
|
23
|
-
color={color}
|
|
24
|
-
subcategory={subcategory}
|
|
25
|
-
scope={scope}
|
|
26
|
-
/>
|
|
27
|
-
)}
|
|
28
|
-
</Grid>
|
|
29
|
-
<Grid item container direction="column" wrap="nowrap">
|
|
30
|
-
<Grid item xs={12}>
|
|
31
|
-
<Typography
|
|
32
|
-
variant="subtitle1"
|
|
33
|
-
color="textPrimary"
|
|
34
|
-
noWrap
|
|
35
|
-
>{`${ucFirstLetters(name || category)}`}</Typography>
|
|
36
|
-
</Grid>
|
|
37
|
-
<Grid item xs={12}>
|
|
38
|
-
<Typography variant="caption" color="textSecondary">
|
|
39
|
-
{subtitle}
|
|
40
|
-
</Typography>
|
|
41
|
-
</Grid>
|
|
42
|
-
</Grid>
|
|
43
|
-
</Grid>
|
|
44
|
-
);
|
|
45
|
-
export default CustomTooltipDisplayRow;
|
|
@@ -1,331 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import dayjs from "dayjs";
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
XAxis,
|
|
6
|
-
YAxis,
|
|
7
|
-
CartesianGrid,
|
|
8
|
-
ResponsiveContainer,
|
|
9
|
-
Area,
|
|
10
|
-
Bar,
|
|
11
|
-
ComposedChart,
|
|
12
|
-
Line,
|
|
13
|
-
Tooltip as ChartTooltip,
|
|
14
|
-
} from "recharts";
|
|
15
|
-
|
|
16
|
-
import { Grid, Box, useTheme } from "@mui/material";
|
|
17
|
-
|
|
18
|
-
import { formatDecimal } from "@aclymatepackages/formatters";
|
|
19
|
-
import { sumTonsCo2e } from "@aclymatepackages/other-helpers";
|
|
20
|
-
import {
|
|
21
|
-
buildScopesRealDataObj,
|
|
22
|
-
buildSubcategoriesDataObj,
|
|
23
|
-
buildEmissionGroupData,
|
|
24
|
-
} from "@aclymatepackages/chart-helpers";
|
|
25
|
-
import {
|
|
26
|
-
subcategories,
|
|
27
|
-
otherSubcategoryObj,
|
|
28
|
-
} from "@aclymatepackages/subcategories";
|
|
29
|
-
|
|
30
|
-
import EmissionsCustomTooltip from "./EmissionsCustomTooltip";
|
|
31
|
-
import useChartWarningLabels from "./useChartWarningLabels";
|
|
32
|
-
|
|
33
|
-
const findObjectValuesSum = (object) =>
|
|
34
|
-
Object.values(object).reduce((sum, value) => sum + value, 0);
|
|
35
|
-
|
|
36
|
-
const buildGroupedChartData = ({
|
|
37
|
-
groupedEmissions,
|
|
38
|
-
buildRealDataObj,
|
|
39
|
-
viewMode,
|
|
40
|
-
}) => {
|
|
41
|
-
return groupedEmissions.map((emissionsArray, idx) => {
|
|
42
|
-
const subcategoriesObj = buildRealDataObj(emissionsArray, [
|
|
43
|
-
...subcategories,
|
|
44
|
-
otherSubcategoryObj,
|
|
45
|
-
]);
|
|
46
|
-
|
|
47
|
-
const buildWarningObj = () => {
|
|
48
|
-
const singleEmissionWarning = emissionsArray.find(
|
|
49
|
-
({ warning }) => !!warning
|
|
50
|
-
);
|
|
51
|
-
|
|
52
|
-
if (!singleEmissionWarning) {
|
|
53
|
-
return null;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
const { warning } = singleEmissionWarning;
|
|
57
|
-
return warning;
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
return {
|
|
61
|
-
...subcategoriesObj,
|
|
62
|
-
warning: buildWarningObj(),
|
|
63
|
-
id: `emissions-chart-group-${idx}`,
|
|
64
|
-
emissionsSumTons: sumTonsCo2e(emissionsArray),
|
|
65
|
-
totalEmissionsSumTons: findObjectValuesSum(subcategoriesObj),
|
|
66
|
-
viewMode,
|
|
67
|
-
};
|
|
68
|
-
});
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
const addTrendlineToChartData = (chartData) => {
|
|
72
|
-
const averageX = (chartData.length - 1) / 2;
|
|
73
|
-
const averageY =
|
|
74
|
-
chartData.reduce(
|
|
75
|
-
(sum, { totalEmissionsSumTons }) =>
|
|
76
|
-
Number(sum) + Number(totalEmissionsSumTons),
|
|
77
|
-
0
|
|
78
|
-
) / chartData.length;
|
|
79
|
-
|
|
80
|
-
const trendLineCalcData = chartData.map(({ totalEmissionsSumTons }, idx) => {
|
|
81
|
-
const xDifferenceFromMean = idx - averageX;
|
|
82
|
-
const yDifferenceFromMean = totalEmissionsSumTons - averageY;
|
|
83
|
-
const xDifferenceSquared = xDifferenceFromMean * xDifferenceFromMean;
|
|
84
|
-
const xyDifferenceFromMean = xDifferenceFromMean * yDifferenceFromMean;
|
|
85
|
-
return { xDifferenceSquared, xyDifferenceFromMean };
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
const xDifferenceSquaredSum = trendLineCalcData.reduce(
|
|
89
|
-
(sum, { xDifferenceSquared }) => sum + xDifferenceSquared,
|
|
90
|
-
0
|
|
91
|
-
);
|
|
92
|
-
const xyDifferenceFromMeanSum = trendLineCalcData.reduce(
|
|
93
|
-
(sum, { xyDifferenceFromMean }) => sum + xyDifferenceFromMean,
|
|
94
|
-
0
|
|
95
|
-
);
|
|
96
|
-
|
|
97
|
-
const trendlineSlope = xyDifferenceFromMeanSum / xDifferenceSquaredSum;
|
|
98
|
-
|
|
99
|
-
const trendlineIntercept = averageY - trendlineSlope * averageX;
|
|
100
|
-
|
|
101
|
-
const findTrendlineValue = (x) => trendlineSlope * x + trendlineIntercept;
|
|
102
|
-
|
|
103
|
-
return chartData.map(({ totalEmissionsSumTons, ...otherProps }, idx) => ({
|
|
104
|
-
...otherProps,
|
|
105
|
-
trendline: findTrendlineValue(idx),
|
|
106
|
-
}));
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
const LabeledEmissionsChart = ({
|
|
110
|
-
data,
|
|
111
|
-
type,
|
|
112
|
-
displayUnitLabel,
|
|
113
|
-
chartArray,
|
|
114
|
-
aspect = 3,
|
|
115
|
-
showTooltip,
|
|
116
|
-
}) => {
|
|
117
|
-
const { palette } = useTheme();
|
|
118
|
-
|
|
119
|
-
const { warningLabels, labelSetter } = useChartWarningLabels({
|
|
120
|
-
data,
|
|
121
|
-
warningField: "warning",
|
|
122
|
-
barSumField: "totalEmissionsSumTons",
|
|
123
|
-
});
|
|
124
|
-
|
|
125
|
-
const isTrendLineGood = data[0]?.trendLine > data[data.length - 1]?.trendLine;
|
|
126
|
-
|
|
127
|
-
const ChartElement = type === "bar" ? Bar : Area;
|
|
128
|
-
|
|
129
|
-
return (
|
|
130
|
-
<Box position="relative">
|
|
131
|
-
<ResponsiveContainer aspect={aspect}>
|
|
132
|
-
<ComposedChart width={500} height={300} data={data}>
|
|
133
|
-
<XAxis dataKey="label" interval="preserveStartEnd" height={20} />
|
|
134
|
-
<YAxis
|
|
135
|
-
tickFormatter={(tick) =>
|
|
136
|
-
`${formatDecimal(tick)} ${displayUnitLabel}`
|
|
137
|
-
}
|
|
138
|
-
width={100}
|
|
139
|
-
/>
|
|
140
|
-
<CartesianGrid strokeDasharray="3 3" />
|
|
141
|
-
{showTooltip && (
|
|
142
|
-
<ChartTooltip
|
|
143
|
-
wrapperStyle={{ zIndex: 99 }}
|
|
144
|
-
content={
|
|
145
|
-
<EmissionsCustomTooltip
|
|
146
|
-
categoriesArray={chartArray}
|
|
147
|
-
displayUnitLabel={displayUnitLabel}
|
|
148
|
-
/>
|
|
149
|
-
}
|
|
150
|
-
/>
|
|
151
|
-
)}
|
|
152
|
-
{chartArray.map(({ subcategory, color, ...otherProps }) => (
|
|
153
|
-
<ChartElement
|
|
154
|
-
key={`emissions-chart-element-${subcategory}`}
|
|
155
|
-
type="monotone"
|
|
156
|
-
stroke="none"
|
|
157
|
-
fillOpacity={1}
|
|
158
|
-
stackId="a"
|
|
159
|
-
fill={color}
|
|
160
|
-
dataKey={subcategory}
|
|
161
|
-
{...otherProps}
|
|
162
|
-
>
|
|
163
|
-
{labelSetter}
|
|
164
|
-
</ChartElement>
|
|
165
|
-
))}
|
|
166
|
-
<Line
|
|
167
|
-
name="6 Month Trend"
|
|
168
|
-
connectNulls
|
|
169
|
-
dataKey="trendline"
|
|
170
|
-
stroke={
|
|
171
|
-
isTrendLineGood ? palette.secondary.main : palette.error.main
|
|
172
|
-
}
|
|
173
|
-
strokeWidth={4}
|
|
174
|
-
dot={false}
|
|
175
|
-
strokeDasharray="5 5"
|
|
176
|
-
/>
|
|
177
|
-
</ComposedChart>
|
|
178
|
-
</ResponsiveContainer>
|
|
179
|
-
{warningLabels}
|
|
180
|
-
</Box>
|
|
181
|
-
);
|
|
182
|
-
};
|
|
183
|
-
|
|
184
|
-
const EmissionsChart = ({
|
|
185
|
-
dataArray: emissions,
|
|
186
|
-
type,
|
|
187
|
-
viewMode = "subcategories",
|
|
188
|
-
graphPeriod,
|
|
189
|
-
showTrendline,
|
|
190
|
-
displayUnit,
|
|
191
|
-
aspect,
|
|
192
|
-
isPercentageChart,
|
|
193
|
-
showTooltip = true,
|
|
194
|
-
startDate,
|
|
195
|
-
convertCarbonUnits = (tons) => tons,
|
|
196
|
-
displayUnitLabel = "tons",
|
|
197
|
-
branding,
|
|
198
|
-
netZeroPercentage,
|
|
199
|
-
noLine = true,
|
|
200
|
-
}) => {
|
|
201
|
-
const {
|
|
202
|
-
chartLabelsArray,
|
|
203
|
-
scopesArray,
|
|
204
|
-
subcategoriesArray,
|
|
205
|
-
groupedEmissions,
|
|
206
|
-
} = buildEmissionGroupData(emissions, graphPeriod, startDate, branding);
|
|
207
|
-
const buildRealDataObj =
|
|
208
|
-
viewMode === "subcategories"
|
|
209
|
-
? buildSubcategoriesDataObj
|
|
210
|
-
: buildScopesRealDataObj;
|
|
211
|
-
|
|
212
|
-
const buildChartData = () => {
|
|
213
|
-
const preliminaryChartData = buildGroupedChartData({
|
|
214
|
-
groupedEmissions,
|
|
215
|
-
buildRealDataObj,
|
|
216
|
-
viewMode,
|
|
217
|
-
});
|
|
218
|
-
|
|
219
|
-
const convertChartDataObject = (chartDataObj, converter) =>
|
|
220
|
-
Object.fromEntries(
|
|
221
|
-
Object.entries(chartDataObj).map(([key, value]) => {
|
|
222
|
-
if (typeof value !== "number") {
|
|
223
|
-
return [key, value];
|
|
224
|
-
}
|
|
225
|
-
return [key, converter(value)];
|
|
226
|
-
})
|
|
227
|
-
);
|
|
228
|
-
|
|
229
|
-
const labelChartData = (chartData) =>
|
|
230
|
-
chartData.map((data, idx) => ({
|
|
231
|
-
...data,
|
|
232
|
-
label: chartLabelsArray[idx],
|
|
233
|
-
}));
|
|
234
|
-
|
|
235
|
-
if (isPercentageChart) {
|
|
236
|
-
const percentageConvertedChartData = preliminaryChartData.map(
|
|
237
|
-
(chartDataObj) => {
|
|
238
|
-
const objectSubcategoryProperties = Object.keys(chartDataObj).filter(
|
|
239
|
-
(key) =>
|
|
240
|
-
subcategories.find(({ subcategory }) => subcategory === key)
|
|
241
|
-
);
|
|
242
|
-
const objectSubcategoryValues = objectSubcategoryProperties.map(
|
|
243
|
-
(subcategory) => ({
|
|
244
|
-
key: subcategory,
|
|
245
|
-
value: chartDataObj[subcategory],
|
|
246
|
-
})
|
|
247
|
-
);
|
|
248
|
-
|
|
249
|
-
const periodEmissionsSum = objectSubcategoryValues.reduce(
|
|
250
|
-
(sum, { value }) => value + sum,
|
|
251
|
-
0
|
|
252
|
-
);
|
|
253
|
-
|
|
254
|
-
const percentageConverter = (value) =>
|
|
255
|
-
(value / periodEmissionsSum) * 100;
|
|
256
|
-
|
|
257
|
-
const newObject = Object.fromEntries(
|
|
258
|
-
objectSubcategoryValues.map(({ key, value }) => [key, value])
|
|
259
|
-
);
|
|
260
|
-
|
|
261
|
-
return convertChartDataObject(newObject, percentageConverter);
|
|
262
|
-
}
|
|
263
|
-
);
|
|
264
|
-
return labelChartData(percentageConvertedChartData);
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
const unitConvertedChartData = preliminaryChartData.map((chartDataObj) =>
|
|
268
|
-
convertChartDataObject(chartDataObj, convertCarbonUnits)
|
|
269
|
-
);
|
|
270
|
-
|
|
271
|
-
const labeledChartData = labelChartData(unitConvertedChartData);
|
|
272
|
-
|
|
273
|
-
if (showTrendline) {
|
|
274
|
-
return addTrendlineToChartData(labeledChartData);
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
return labeledChartData;
|
|
278
|
-
};
|
|
279
|
-
|
|
280
|
-
const chartData = buildChartData();
|
|
281
|
-
|
|
282
|
-
const findFirstYearBaseline = () => {
|
|
283
|
-
if (dayjs().diff(dayjs(startDate), "month") < 12 || noLine) {
|
|
284
|
-
return false;
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
const { groupedEmissions: firstYearBaselineMonthlyEmissions } =
|
|
288
|
-
buildEmissionGroupData(emissions, "month", startDate);
|
|
289
|
-
|
|
290
|
-
const firstYearMonthlyGroupedEmissions = [...new Array(11)].map(
|
|
291
|
-
(_, idx) => firstYearBaselineMonthlyEmissions[idx]
|
|
292
|
-
);
|
|
293
|
-
const firstYearMonthlyEmissionsSum = firstYearMonthlyGroupedEmissions.map(
|
|
294
|
-
(emissions) => ({ tonsCo2e: sumTonsCo2e(emissions) })
|
|
295
|
-
);
|
|
296
|
-
const monthlyBaselineTons = sumTonsCo2e(firstYearMonthlyEmissionsSum) / 12;
|
|
297
|
-
|
|
298
|
-
if (graphPeriod === "year") {
|
|
299
|
-
return convertCarbonUnits(monthlyBaselineTons * 12);
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
if (graphPeriod === "quarter") {
|
|
303
|
-
return convertCarbonUnits(monthlyBaselineTons * 3);
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
return convertCarbonUnits(monthlyBaselineTons);
|
|
307
|
-
};
|
|
308
|
-
|
|
309
|
-
const chartArray = viewMode === "scopes" ? scopesArray : subcategoriesArray;
|
|
310
|
-
|
|
311
|
-
return (
|
|
312
|
-
<Grid container direction="column">
|
|
313
|
-
<Grid item>
|
|
314
|
-
<LabeledEmissionsChart
|
|
315
|
-
data={chartData}
|
|
316
|
-
type={type}
|
|
317
|
-
displayUnitLabel={
|
|
318
|
-
isPercentageChart ? "%" : displayUnit || displayUnitLabel
|
|
319
|
-
}
|
|
320
|
-
chartArray={chartArray.map((obj) => ({ ...obj, viewMode }))}
|
|
321
|
-
aspect={aspect}
|
|
322
|
-
showTooltip={showTooltip}
|
|
323
|
-
graphPeriod={graphPeriod}
|
|
324
|
-
netZeroPercentage={netZeroPercentage}
|
|
325
|
-
baseline={findFirstYearBaseline()}
|
|
326
|
-
/>
|
|
327
|
-
</Grid>
|
|
328
|
-
</Grid>
|
|
329
|
-
);
|
|
330
|
-
};
|
|
331
|
-
export default EmissionsChart;
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
|
|
3
|
-
import { Grid, Typography, Paper, Box, ThemeProvider } from "@mui/material";
|
|
4
|
-
|
|
5
|
-
import { DefaultPaper } from "@aclymatepackages/atoms";
|
|
6
|
-
import { formatDecimal } from "@aclymatepackages/formatters";
|
|
7
|
-
import { mergeDarkTheme } from "@aclymatepackages/themes";
|
|
8
|
-
|
|
9
|
-
import CustomTooltipDisplayRow from "./CustomTooltipDisplayRow";
|
|
10
|
-
|
|
11
|
-
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
12
|
-
|
|
13
|
-
const StatusDisplay = ({ dataArray, id }) => {
|
|
14
|
-
const { status } = dataArray.find((dataObj) => dataObj?.id === id) || {};
|
|
15
|
-
if (!status) {
|
|
16
|
-
return <></>;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
const { color, icon, tooltip } = status;
|
|
20
|
-
return (
|
|
21
|
-
<Grid item>
|
|
22
|
-
<Paper style={{ backgroundColor: color }}>
|
|
23
|
-
<Box p={1}>
|
|
24
|
-
<Grid container spacing={2} alignItems="center">
|
|
25
|
-
<Grid item>
|
|
26
|
-
<FontAwesomeIcon
|
|
27
|
-
icon={icon}
|
|
28
|
-
style={{ color: "white" }}
|
|
29
|
-
size="2x"
|
|
30
|
-
/>
|
|
31
|
-
</Grid>
|
|
32
|
-
<Grid item>
|
|
33
|
-
<ThemeProvider theme={mergeDarkTheme}>
|
|
34
|
-
<Typography variant="subtitle2" color="textPrimary">
|
|
35
|
-
{tooltip}
|
|
36
|
-
</Typography>
|
|
37
|
-
</ThemeProvider>
|
|
38
|
-
</Grid>
|
|
39
|
-
</Grid>
|
|
40
|
-
</Box>
|
|
41
|
-
</Paper>
|
|
42
|
-
</Grid>
|
|
43
|
-
);
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
const EmissionsCustomTooltip = ({
|
|
47
|
-
payload: passedPayload,
|
|
48
|
-
categoriesArray,
|
|
49
|
-
labelAnnotation = "",
|
|
50
|
-
dataArray = [],
|
|
51
|
-
displayUnitLabel,
|
|
52
|
-
}) => {
|
|
53
|
-
if (!passedPayload.length) {
|
|
54
|
-
return <></>;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
const buildSubtitle = (carbonValue) =>
|
|
58
|
-
`${formatDecimal(carbonValue)} ${displayUnitLabel} CO2`;
|
|
59
|
-
|
|
60
|
-
const { payload: columnDetails } = passedPayload[0];
|
|
61
|
-
const { label = "", id } = columnDetails || {};
|
|
62
|
-
|
|
63
|
-
const payloadDisplayArray = passedPayload.filter(
|
|
64
|
-
({ value, dataKey }) => !!value && dataKey !== "trendline"
|
|
65
|
-
);
|
|
66
|
-
|
|
67
|
-
const formattedDisplayArray = payloadDisplayArray.map(
|
|
68
|
-
({ dataKey, value }) => {
|
|
69
|
-
const chartSubcategory = categoriesArray.find(
|
|
70
|
-
({ subcategory }) => subcategory === dataKey
|
|
71
|
-
);
|
|
72
|
-
|
|
73
|
-
return { ...chartSubcategory, subtitle: buildSubtitle(value) };
|
|
74
|
-
}
|
|
75
|
-
);
|
|
76
|
-
|
|
77
|
-
const emissionsSumTons = payloadDisplayArray.reduce(
|
|
78
|
-
(sum, { value }) => value + sum,
|
|
79
|
-
0
|
|
80
|
-
);
|
|
81
|
-
|
|
82
|
-
return (
|
|
83
|
-
<DefaultPaper style={{ zIndex: 99999, borderColor: "transparent" }}>
|
|
84
|
-
<Grid container direction="column" spacing={2}>
|
|
85
|
-
<Grid item>
|
|
86
|
-
<Typography
|
|
87
|
-
variant="h4"
|
|
88
|
-
color="textPrimary"
|
|
89
|
-
>{`${label} Emissions`}</Typography>
|
|
90
|
-
<Typography variant="subtitle2" color="textSecondary">
|
|
91
|
-
{`${buildSubtitle(emissionsSumTons)} ${labelAnnotation}`}
|
|
92
|
-
</Typography>
|
|
93
|
-
</Grid>
|
|
94
|
-
{formattedDisplayArray.map((displayData, idx) => (
|
|
95
|
-
<CustomTooltipDisplayRow
|
|
96
|
-
key={`tooltip-display-row-${idx}`}
|
|
97
|
-
{...displayData}
|
|
98
|
-
/>
|
|
99
|
-
))}
|
|
100
|
-
<StatusDisplay id={id} dataArray={dataArray} />
|
|
101
|
-
</Grid>
|
|
102
|
-
</DefaultPaper>
|
|
103
|
-
);
|
|
104
|
-
};
|
|
105
|
-
export default EmissionsCustomTooltip;
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
|
|
3
|
-
import { Box, Grid, Typography } from "@mui/material";
|
|
4
|
-
|
|
5
|
-
import EmissionsChart from "./EmissionsChart";
|
|
6
|
-
|
|
7
|
-
const ReportGraphContentLayout = ({
|
|
8
|
-
contentTitle,
|
|
9
|
-
contentRows = [],
|
|
10
|
-
chartType = "bar",
|
|
11
|
-
chartViewMode = "scopes",
|
|
12
|
-
emissions,
|
|
13
|
-
interval = "quarter",
|
|
14
|
-
isPercentageChart,
|
|
15
|
-
height,
|
|
16
|
-
branding,
|
|
17
|
-
showTooltip,
|
|
18
|
-
}) => {
|
|
19
|
-
return (
|
|
20
|
-
<Box p={2} style={{ height: height || "auto" }}>
|
|
21
|
-
<Grid container spacing={2}>
|
|
22
|
-
<Grid item md={4} xs={12} container direction="column" spacing={2}>
|
|
23
|
-
<Grid item>
|
|
24
|
-
<Typography variant="subtitle1">{contentTitle}</Typography>
|
|
25
|
-
</Grid>
|
|
26
|
-
{contentRows.map((row, idx) => (
|
|
27
|
-
<Grid item key={`content-row-${idx}`}>
|
|
28
|
-
{row}
|
|
29
|
-
</Grid>
|
|
30
|
-
))}
|
|
31
|
-
</Grid>
|
|
32
|
-
<Grid item md={8} xs={12}>
|
|
33
|
-
<EmissionsChart
|
|
34
|
-
dataArray={emissions}
|
|
35
|
-
type={chartType}
|
|
36
|
-
viewMode={chartViewMode}
|
|
37
|
-
graphPeriod={interval}
|
|
38
|
-
displayUnit="tons"
|
|
39
|
-
aspect={2}
|
|
40
|
-
isPercentageChart={isPercentageChart}
|
|
41
|
-
showTooltip={showTooltip}
|
|
42
|
-
branding={branding}
|
|
43
|
-
/>
|
|
44
|
-
</Grid>
|
|
45
|
-
</Grid>
|
|
46
|
-
</Box>
|
|
47
|
-
);
|
|
48
|
-
};
|
|
49
|
-
export default ReportGraphContentLayout;
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
|
|
3
|
-
import { Typography } from "@mui/material";
|
|
4
|
-
|
|
5
|
-
import { buildEmissionsSummarySentence } from "@aclymatepackages/other-helpers";
|
|
6
|
-
import { filterEmissionsByScope } from "@aclymatepackages/other-helpers";
|
|
7
|
-
|
|
8
|
-
import ReportGraphContentLayout from "./ReportGraphContentLayout";
|
|
9
|
-
import EmissionsPieChart from "./EmissionsPieChart";
|
|
10
|
-
import EmissionsSummarySentence from "./EmissionsSummarySentence";
|
|
11
|
-
|
|
12
|
-
const ReportSummaryBlock = ({
|
|
13
|
-
emissions,
|
|
14
|
-
interval,
|
|
15
|
-
branding,
|
|
16
|
-
showTooltip,
|
|
17
|
-
scopesWithColors,
|
|
18
|
-
}) => {
|
|
19
|
-
const scopesWithEmissions = scopesWithColors.map((scopeObj) => {
|
|
20
|
-
const { scope } = scopeObj;
|
|
21
|
-
const scopeEmissions = filterEmissionsByScope(emissions, scope);
|
|
22
|
-
return { ...scopeObj, emissions: scopeEmissions };
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
return (
|
|
26
|
-
<ReportGraphContentLayout
|
|
27
|
-
showTooltip={showTooltip}
|
|
28
|
-
branding={branding}
|
|
29
|
-
contentTitle={buildEmissionsSummarySentence({
|
|
30
|
-
label: "Total Emissions",
|
|
31
|
-
emissions,
|
|
32
|
-
})}
|
|
33
|
-
interval={interval}
|
|
34
|
-
emissions={emissions}
|
|
35
|
-
contentRows={[
|
|
36
|
-
<EmissionsPieChart
|
|
37
|
-
dataArray={emissions}
|
|
38
|
-
viewMode="scopes"
|
|
39
|
-
branding={branding}
|
|
40
|
-
showTooltip={showTooltip}
|
|
41
|
-
/>,
|
|
42
|
-
<Typography variant="subtitle1">Emissions Scope Breakdown</Typography>,
|
|
43
|
-
...scopesWithEmissions.map(({ scope, emissions, color }, idx) => (
|
|
44
|
-
<EmissionsSummarySentence
|
|
45
|
-
key={`summary-sentence-${idx}`}
|
|
46
|
-
label={`Total Scope ${scope}`}
|
|
47
|
-
emissions={emissions}
|
|
48
|
-
scope={scope}
|
|
49
|
-
color={color}
|
|
50
|
-
/>
|
|
51
|
-
)),
|
|
52
|
-
]}
|
|
53
|
-
/>
|
|
54
|
-
);
|
|
55
|
-
};
|
|
56
|
-
export default ReportSummaryBlock;
|