@aclymatepackages/modules 4.3.2 → 4.3.3

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.
Files changed (3) hide show
  1. package/dist/components/ProductFootprintPieChart.js +15 -5
  2. package/package.json +1 -1
  3. package/src/components/ProductFootprintPieChart.js +19 -4
package/dist/components/ProductFootprintPieChart.js CHANGED
@@ -16,7 +16,8 @@ const CustomTooltipDisplayRow = _ref => {
16
16
  name,
17
17
  percentage,
18
18
  kgs,
19
- customAvatar
19
+ customAvatar,
20
+ blurValues
20
21
  } = _ref;
21
22
  return /*#__PURE__*/_react.default.createElement(_material.Grid, {
22
23
  container: true,
@@ -34,24 +35,31 @@ const CustomTooltipDisplayRow = _ref => {
34
35
  }, name), /*#__PURE__*/_react.default.createElement(_material.Typography, {
35
36
  variant: "caption",
36
37
  color: "textSecondary"
37
- }, (0, _formatters.formatDecimal)(kgs), " kgs (", percentage, "%)")));
38
+ }, blurValues ? /*#__PURE__*/_react.default.createElement("span", {
39
+ style: {
40
+ filter: "blur(4px)"
41
+ }
42
+ }, "****") : (0, _formatters.formatDecimal)(kgs), " ", "kgs (", percentage, "%)")));
38
43
  };
39
44
  const FootprintPieChartTooltip = _ref2 => {
40
45
  let {
41
- payload
46
+ payload,
47
+ blurValues
42
48
  } = _ref2;
43
49
  return /*#__PURE__*/_react.default.createElement(_atoms.DefaultPaper, null, (payload === null || payload === void 0 ? void 0 : payload[0]) && /*#__PURE__*/_react.default.createElement(CustomTooltipDisplayRow, {
44
50
  name: payload[0].payload.name,
45
51
  percentage: (0, _formatters.formatDecimal)(payload[0].payload.percentage),
46
52
  kgs: payload[0].payload.kgs,
47
53
  color: payload[0].payload.color,
54
+ blurValues: blurValues,
48
55
  customAvatar: /*#__PURE__*/_react.default.createElement(_atoms.ProductFootprintCategoryAvatar, payload[0].payload)
49
56
  }));
50
57
  };
51
58
  const ProductFootprintPieChart = _ref3 => {
52
59
  let {
53
60
  footprintBreakdownKgs,
54
- totalFootprintKgs
61
+ totalFootprintKgs,
62
+ blurValues
55
63
  } = _ref3;
56
64
  const pieData = _addOns.displayProductFootprintCategories.map(_ref4 => {
57
65
  let {
@@ -98,7 +106,9 @@ const ProductFootprintPieChart = _ref3 => {
98
106
  key: "cell-".concat(index),
99
107
  fill: entry.color
100
108
  }))), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
101
- content: /*#__PURE__*/_react.default.createElement(FootprintPieChartTooltip, null)
109
+ content: /*#__PURE__*/_react.default.createElement(FootprintPieChartTooltip, {
110
+ blurValues: blurValues
111
+ })
102
112
  })));
103
113
  };
104
114
  var _default = exports.default = ProductFootprintPieChart;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aclymatepackages/modules",
3
- "version": "4.3.2",
3
+ "version": "4.3.3",
4
4
  "description": "Aclymate modules",
5
5
  "author": "William Loopesko",
6
6
  "main": "dist/index.js",
package/src/components/ProductFootprintPieChart.js CHANGED
@@ -17,7 +17,13 @@ import {
17
17
  import { formatDecimal } from "@aclymatepackages/formatters";
18
18
  import { displayProductFootprintCategories } from "@aclymatepackages/add-ons";
19
19
 
20
- const CustomTooltipDisplayRow = ({ name, percentage, kgs, customAvatar }) => (
20
+ const CustomTooltipDisplayRow = ({
21
+ name,
22
+ percentage,
23
+ kgs,
24
+ customAvatar,
25
+ blurValues,
26
+ }) => (
21
27
  <Grid container spacing={2} alignItems="center">
22
28
  <Grid item>{customAvatar}</Grid>
23
29
  <Grid item>
@@ -25,13 +31,18 @@ const CustomTooltipDisplayRow = ({ name, percentage, kgs, customAvatar }) => (
25
31
  {name}
26
32
  </Typography>
27
33
  <Typography variant="caption" color="textSecondary">
28
- {formatDecimal(kgs)} kgs ({percentage}%)
34
+ {blurValues ? (
35
+ <span style={{ filter: "blur(4px)" }}>****</span>
36
+ ) : (
37
+ formatDecimal(kgs)
38
+ )}{" "}
39
+ kgs ({percentage}%)
29
40
  </Typography>
30
41
  </Grid>
31
42
  </Grid>
32
43
  );
33
44
 
34
- const FootprintPieChartTooltip = ({ payload }) => (
45
+ const FootprintPieChartTooltip = ({ payload, blurValues }) => (
35
46
  <DefaultPaper>
36
47
  {payload?.[0] && (
37
48
  <CustomTooltipDisplayRow
@@ -39,6 +50,7 @@ const FootprintPieChartTooltip = ({ payload }) => (
39
50
  percentage={formatDecimal(payload[0].payload.percentage)}
40
51
  kgs={payload[0].payload.kgs}
41
52
  color={payload[0].payload.color}
53
+ blurValues={blurValues}
42
54
  customAvatar={
43
55
  <ProductFootprintCategoryAvatar {...payload[0].payload} />
44
56
  }
@@ -50,6 +62,7 @@ const FootprintPieChartTooltip = ({ payload }) => (
50
62
  const ProductFootprintPieChart = ({
51
63
  footprintBreakdownKgs,
52
64
  totalFootprintKgs,
65
+ blurValues,
53
66
  }) => {
54
67
  const pieData = displayProductFootprintCategories
55
68
  .map(({ dataKey, name, color, icon }) => {
@@ -91,7 +104,9 @@ const ProductFootprintPieChart = ({
91
104
  <Cell key={`cell-${index}`} fill={entry.color} />
92
105
  ))}
93
106
  </Pie>
94
- <ChartTooltip content={<FootprintPieChartTooltip />} />
107
+ <ChartTooltip
108
+ content={<FootprintPieChartTooltip blurValues={blurValues} />}
109
+ />
95
110
  </PieChart>
96
111
  </ResponsiveContainer>
97
112
  );