@aclymatepackages/modules 5.0.5 → 5.1.0

package/dist/components/BasicPieChart.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireDefault(require("react"));
+var _recharts = require("recharts");
+var _material = require("@mui/material");
+var _atoms = require("@aclymatepackages/atoms");
+var _formatters = require("@aclymatepackages/formatters");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DefaultTooltip = _ref => {
+  let {
+    active,
+    payload
+  } = _ref;
+  if (!active || !payload || !payload.length) {
+    return null;
+  }
+  const [{
+    payload: slice
+  }] = payload;
+  const {
+    label,
+    value,
+    color,
+    unit,
+    percent
+  } = slice || {};
+  return /*#__PURE__*/_react.default.createElement(_atoms.DefaultPaper, null, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    spacing: 1,
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    style: {
+      width: 12,
+      height: 12,
+      borderRadius: "50%",
+      backgroundColor: color
+    }
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "subtitle2",
+    color: "textPrimary"
+  }, label), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "caption",
+    color: "textSecondary"
+  }, "".concat((0, _formatters.formatDecimal)(value)).concat(unit ? " ".concat(unit) : "").concat(typeof percent === "number" ? " (".concat((0, _formatters.formatDecimal)(percent * 100), "%)") : "")))));
+};
+const BasicPieChart = _ref2 => {
+  let {
+    data,
+    dataKey = "value",
+    showTooltip = true,
+    CustomTooltip,
+    pieRef,
+    aspect = 1.5,
+    outerRadius = "100%",
+    cx = "50%",
+    cy = "50%"
+  } = _ref2;
+  const TooltipComponent = CustomTooltip || DefaultTooltip;
+  return /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
+    height: "100%",
+    aspect: aspect
+  }, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, {
+    ref: pieRef,
+    width: 500,
+    height: 300
+  }, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
+    data: data,
+    dataKey: dataKey,
+    nameKey: "label",
+    outerRadius: outerRadius,
+    cx: cx,
+    cy: cy,
+    isAnimationActive: false
+  }, data.map((slice, idx) => /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
+    key: "basic-pie-cell-".concat(idx),
+    name: slice.label,
+    fill: slice.color
+  }))), showTooltip && /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
+    wrapperStyle: {
+      zIndex: 99
+    },
+    content: props => /*#__PURE__*/_react.default.createElement(TooltipComponent, props)
+  })));
+};
+var _default = exports.default = BasicPieChart;

package/dist/components/EmissionsPieChart.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 require("core-js/modules/web.dom-collections.iterator.js");
 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 _otherHelpers = require("@aclymatepackages/other-helpers");
 var _subcategories = require("@aclymatepackages/subcategories");
+var _BasicPieChart = _interopRequireDefault(require("./BasicPieChart"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
 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; }
@@ -69,57 +69,38 @@ const EmissionsPieChart = _ref2 => {
   const subcategoriesArray = subcategoriesArrayProp || (0, _subcategories.buildSubcategoriesArray)(emissions);
   const scopesArray = (0, _subcategories.buildScopesWithColors)(branding);
   const emissionsSum = (0, _otherHelpers.sumTonsCo2e)(emissions);
-  const formatChartPieSlices = () => {
-    const filterFunction = subcategory => emission => {
-      if (viewMode === "subcategories") {
-        return emission.subcategory === subcategory;
-      }
-      const scopeNumber = Number(subcategory.charAt(subcategory.length - 1));
-      return emission.scope === scopeNumber;
-    };
-    const slicesArray = viewMode === "subcategories" ? subcategoriesArray : scopesArray;
-    return slicesArray.map(subcategoryObj => {
-      const {
-        subcategory
-      } = subcategoryObj;
-      const emissionsWithThisCategory = emissions.filter(filterFunction(subcategory));
-      const categoryEmissionsSum = (0, _otherHelpers.sumTonsCo2e)(emissionsWithThisCategory);
-      return _objectSpread(_objectSpread({}, subcategoryObj), {}, {
-        viewMode,
-        emissionPercentage: categoryEmissionsSum / emissionsSum * 100
-      });
-    });
+  const filterFunction = subcategory => emission => {
+    if (viewMode === "subcategories") {
+      return emission.subcategory === subcategory;
+    }
+    const scopeNumber = Number(subcategory.charAt(subcategory.length - 1));
+    return emission.scope === scopeNumber;
   };
-  const pieSlicesWithPercentages = formatChartPieSlices();
-  const TooltipComponent = CustomTooltip || PieChartCustomTooltip;
-  return /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
-    height: "100%",
-    aspect: aspect
-  }, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, {
-    ref: pieChartRef
-  }, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
-    data: pieSlicesWithPercentages,
-    outerRadius: "100%",
-    fill: "#8884d8",
-    dataKey: "emissionPercentage",
-    cx: "50%",
-    cy: "50%"
-  }, pieSlicesWithPercentages.map(_ref3 => {
-    let {
-      category,
+  const slicesArray = viewMode === "subcategories" ? subcategoriesArray : scopesArray;
+  const pieSlicesWithPercentages = slicesArray.map(subcategoryObj => {
+    const {
+      subcategory,
       name,
       color
-    } = _ref3;
-    return /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
-      key: "emissions-pie-chart-cell-".concat(category),
-      name: name,
-      fill: color
+    } = subcategoryObj;
+    const emissionsWithThisCategory = emissions.filter(filterFunction(subcategory));
+    const categoryEmissionsSum = (0, _otherHelpers.sumTonsCo2e)(emissionsWithThisCategory);
+    const emissionPercentage = categoryEmissionsSum / emissionsSum * 100;
+    return _objectSpread(_objectSpread({}, subcategoryObj), {}, {
+      viewMode,
+      emissionPercentage,
+      label: name,
+      value: emissionPercentage,
+      color
     });
-  })), showTooltip && /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
-    wrapperStyle: {
-      zIndex: 99
-    },
-    content: props => /*#__PURE__*/_react.default.createElement(TooltipComponent, props)
-  })));
+  });
+  return /*#__PURE__*/_react.default.createElement(_BasicPieChart.default, {
+    data: pieSlicesWithPercentages,
+    dataKey: "emissionPercentage",
+    showTooltip: showTooltip,
+    CustomTooltip: CustomTooltip || PieChartCustomTooltip,
+    pieRef: pieChartRef,
+    aspect: aspect
+  });
 };
 var _default = exports.default = EmissionsPieChart;

package/dist/components/PlacesAutocomplete.js

@@ -108,7 +108,7 @@ const PlacesAutocomplete = _ref => {
       helperText: helperText,
       style: style
     }, textFieldProps)),
-    getOptionSelected: (option, value) => {
+    isOptionEqualToValue: (option, value) => {
       return option === "" || option.description === value.description || option === value;
     },
     value: place || "",

package/dist/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "AccountingChart", {
     return _AccountingChart.default;
   }
 });
+Object.defineProperty(exports, "BasicPieChart", {
+  enumerable: true,
+  get: function get() {
+    return _BasicPieChart.default;
+  }
+});
 Object.defineProperty(exports, "CompanyDataConfirmation", {
   enumerable: true,
   get: function get() {
@@ -103,6 +109,7 @@ var _ComparisonChart = _interopRequireDefault(require("./components/ComparisonCh
 var _EmissionsReductionGraph = _interopRequireDefault(require("./components/EmissionsReductionGraph"));
 var _CompanyOnboardingInput = _interopRequireDefault(require("./components/CompanyOnboardingInput"));
 var _EmissionsPieChart = _interopRequireDefault(require("./components/EmissionsPieChart"));
+var _BasicPieChart = _interopRequireDefault(require("./components/BasicPieChart"));
 var _useChartWarningLabels = _interopRequireDefault(require("./components/useChartWarningLabels"));
 var _EmissionsSummarySentence = _interopRequireDefault(require("./components/EmissionsSummarySentence"));
 var _DbCompanySelect = _interopRequireDefault(require("./components/DbCompanySelect"));

package/package.json

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

package/src/components/BasicPieChart.js

@@ -0,0 +1,98 @@
+import React from "react";
+
+import {
+  Tooltip as ChartTooltip,
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+} from "recharts";
+
+import { Box, Typography, Grid } from "@mui/material";
+
+import { DefaultPaper } from "@aclymatepackages/atoms";
+import { formatDecimal } from "@aclymatepackages/formatters";
+
+const DefaultTooltip = ({ active, payload }) => {
+  if (!active || !payload || !payload.length) {
+    return null;
+  }
+
+  const [{ payload: slice }] = payload;
+  const { label, value, color, unit, percent } = slice || {};
+
+  return (
+    <DefaultPaper>
+      <Grid container spacing={1} alignItems="center">
+        <Grid item>
+          <Box
+            style={{
+              width: 12,
+              height: 12,
+              borderRadius: "50%",
+              backgroundColor: color,
+            }}
+          />
+        </Grid>
+        <Grid item>
+          <Typography variant="subtitle2" color="textPrimary">
+            {label}
+          </Typography>
+          <Typography variant="caption" color="textSecondary">
+            {`${formatDecimal(value)}${unit ? ` ${unit}` : ""}${
+              typeof percent === "number"
+                ? ` (${formatDecimal(percent * 100)}%)`
+                : ""
+            }`}
+          </Typography>
+        </Grid>
+      </Grid>
+    </DefaultPaper>
+  );
+};
+
+const BasicPieChart = ({
+  data,
+  dataKey = "value",
+  showTooltip = true,
+  CustomTooltip,
+  pieRef,
+  aspect = 1.5,
+  outerRadius = "100%",
+  cx = "50%",
+  cy = "50%",
+}) => {
+  const TooltipComponent = CustomTooltip || DefaultTooltip;
+
+  return (
+    <ResponsiveContainer height="100%" aspect={aspect}>
+      <PieChart ref={pieRef} width={500} height={300}>
+        <Pie
+          data={data}
+          dataKey={dataKey}
+          nameKey="label"
+          outerRadius={outerRadius}
+          cx={cx}
+          cy={cy}
+          isAnimationActive={false}
+        >
+          {data.map((slice, idx) => (
+            <Cell
+              key={`basic-pie-cell-${idx}`}
+              name={slice.label}
+              fill={slice.color}
+            />
+          ))}
+        </Pie>
+        {showTooltip && (
+          <ChartTooltip
+            wrapperStyle={{ zIndex: 99 }}
+            content={(props) => <TooltipComponent {...props} />}
+          />
+        )}
+      </PieChart>
+    </ResponsiveContainer>
+  );
+};
+
+export default BasicPieChart;

package/src/components/EmissionsPieChart.js

@@ -1,13 +1,5 @@
 import React from "react";
 
-import {
-  Tooltip as ChartTooltip,
-  ResponsiveContainer,
-  PieChart,
-  Pie,
-  Cell,
-} from "recharts";
-
 import { Typography, Grid } from "@mui/material";
 
 import { DefaultPaper, CategoriesAvatar } from "@aclymatepackages/atoms";
@@ -18,6 +10,8 @@ import {
   buildScopesWithColors,
 } from "@aclymatepackages/subcategories";
 
+import BasicPieChart from "./BasicPieChart";
+
 const PieChartCustomTooltip = ({ payload: passedPayload }) => {
   const [payloadObj] = passedPayload;
   const { payload = {} } = payloadObj || [{}];
@@ -64,66 +58,47 @@ const EmissionsPieChart = ({
 
   const emissionsSum = sumTonsCo2e(emissions);
 
-  const formatChartPieSlices = () => {
-    const filterFunction = (subcategory) => (emission) => {
-      if (viewMode === "subcategories") {
-        return emission.subcategory === subcategory;
-      }
-
-      const scopeNumber = Number(subcategory.charAt(subcategory.length - 1));
-      return emission.scope === scopeNumber;
-    };
-
-    const slicesArray =
-      viewMode === "subcategories" ? subcategoriesArray : scopesArray;
+  const filterFunction = (subcategory) => (emission) => {
+    if (viewMode === "subcategories") {
+      return emission.subcategory === subcategory;
+    }
 
-    return slicesArray.map((subcategoryObj) => {
-      const { subcategory } = subcategoryObj;
-      const emissionsWithThisCategory = emissions.filter(
-        filterFunction(subcategory)
-      );
-
-      const categoryEmissionsSum = sumTonsCo2e(emissionsWithThisCategory);
-
-      return {
-        ...subcategoryObj,
-        viewMode,
-        emissionPercentage: (categoryEmissionsSum / emissionsSum) * 100,
-      };
-    });
+    const scopeNumber = Number(subcategory.charAt(subcategory.length - 1));
+    return emission.scope === scopeNumber;
   };
 
-  const pieSlicesWithPercentages = formatChartPieSlices();
-
-  const TooltipComponent = CustomTooltip || PieChartCustomTooltip;
+  const slicesArray =
+    viewMode === "subcategories" ? subcategoriesArray : scopesArray;
+
+  const pieSlicesWithPercentages = slicesArray.map((subcategoryObj) => {
+    const { subcategory, name, color } = subcategoryObj;
+    const emissionsWithThisCategory = emissions.filter(
+      filterFunction(subcategory)
+    );
+
+    const categoryEmissionsSum = sumTonsCo2e(emissionsWithThisCategory);
+    const emissionPercentage = (categoryEmissionsSum / emissionsSum) * 100;
+
+    return {
+      ...subcategoryObj,
+      viewMode,
+      emissionPercentage,
+      label: name,
+      value: emissionPercentage,
+      color,
+    };
+  });
 
   return (
-    <ResponsiveContainer height="100%" aspect={aspect}>
-      <PieChart ref={pieChartRef}>
-        <Pie
-          data={pieSlicesWithPercentages}
-          outerRadius={"100%"}
-          fill="#8884d8"
-          dataKey="emissionPercentage"
-          cx="50%"
-          cy="50%"
-        >
-          {pieSlicesWithPercentages.map(({ category, name, color }) => (
-            <Cell
-              key={`emissions-pie-chart-cell-${category}`}
-              name={name}
-              fill={color}
-            />
-          ))}
-        </Pie>
-        {showTooltip && (
-          <ChartTooltip
-            wrapperStyle={{ zIndex: 99 }}
-            content={(props) => <TooltipComponent {...props} />}
-          />
-        )}
-      </PieChart>
-    </ResponsiveContainer>
+    <BasicPieChart
+      data={pieSlicesWithPercentages}
+      dataKey="emissionPercentage"
+      showTooltip={showTooltip}
+      CustomTooltip={CustomTooltip || PieChartCustomTooltip}
+      pieRef={pieChartRef}
+      aspect={aspect}
+    />
   );
 };
+
 export default EmissionsPieChart;

package/src/components/PlacesAutocomplete.js

@@ -96,7 +96,7 @@ const PlacesAutocomplete = ({
           {...textFieldProps}
         />
       )}
-      getOptionSelected={(option, value) => {
+      isOptionEqualToValue={(option, value) => {
         return (
           option === "" ||
           option.description === value.description ||

package/src/index.js

@@ -8,6 +8,7 @@ import ComparisonChart from "./components/ComparisonChart";
 import EmissionsReductionGraph from "./components/EmissionsReductionGraph";
 import CompanyOnboardingInput from "./components/CompanyOnboardingInput";
 import EmissionsPieChart from "./components/EmissionsPieChart";
+import BasicPieChart from "./components/BasicPieChart";
 import useChartWarningLabels from "./components/useChartWarningLabels";
 import EmissionsSummarySentence from "./components/EmissionsSummarySentence";
 import DbCompanySelect from "./components/DbCompanySelect";
@@ -25,6 +26,7 @@ export {
   EmissionsReductionGraph,
   CompanyOnboardingInput,
   EmissionsPieChart,
+  BasicPieChart,
   useChartWarningLabels,
   EmissionsSummarySentence,
   DbCompanySelect,