@aclymatepackages/modules 1.0.0

package/README.md

@@ -0,0 +1,43 @@
+# Getting Started with Aclymate Modules
+
+These are modules that can be used in front-end development for the Aclymate website and platform.
+
+## Available Modules
+
+In the project directory, you can find:
+
+### `OffsetsPurchaseDialogBox.js`
+
+Exports the OffsetsPurchaseDialogBox component
+
+### `FootprintVideo.js`
+
+Exports the following:
+{
+FootprintVideo,
+convertFootprintToDriving,
+convertFootprintToTrees,
+convertFootprintToIce,
+}
+
+### `IndustryAutocomplete.js`
+
+Exports the IndustryAutocomplete component
+
+### `PlacesAutocomplete.js`
+
+Exports the custom PlacesAutocomplete component
+
+### `ProjectsTypesSelect.js`
+
+Exports the custom ProjectsTypesSelect component
+
+## Usage
+
+To use an atom component in your code, first run:
+
+### `npm i @aclymatepackages/modules`
+
+This will install or update this package. Then, use your atoms of choice like so:
+
+### `import { module } from "@aclymatepackages/modules"`

package/babel.config.json

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "edge": "17",
+          "firefox": "60",
+          "chrome": "67",
+          "safari": "11.1"
+        },
+        "useBuiltIns": "usage",
+        "corejs": "3.6.5"
+      }
+    ],
+    "@babel/preset-react"
+  ]
+}

package/dist/components/CompaniesAutocomplete.js

@@ -0,0 +1,126 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.promise.js");
+var _react = _interopRequireWildcard(require("react"));
+var _peopledatalabs = _interopRequireDefault(require("peopledatalabs"));
+var _material = require("@mui/material");
+var _formatters = require("@aclymatepackages/formatters");
+var _otherHelpers = require("@aclymatepackages/other-helpers");
+const _excluded = ["name"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const CompaniesAutocomplete = _ref => {
+  let {
+    setCompanyName,
+    onSelectCompany,
+    label,
+    variant = "outlined",
+    size = "medium",
+    disabled,
+    helperText = "",
+    id,
+    style,
+    textFieldProps,
+    pdlApiKey
+  } = _ref;
+  const [nextStepIsLoading, setNextStepIsLoading] = (0, _react.useState)(false);
+  const [inputValue, setInputValue] = (0, _react.useState)("");
+  const [options, setOptions] = (0, _react.useState)([]);
+  const pdlClient = (0, _react.useMemo)(() => new _peopledatalabs.default({
+    apiKey: pdlApiKey
+  }), [pdlApiKey]);
+  const fetchCompanies = async value => {
+    setNextStepIsLoading(true);
+    const autocompleteParamsObj = {
+      field: "company",
+      text: value || inputValue,
+      size: 10,
+      pretty: true
+    };
+    return await pdlClient.autocomplete(autocompleteParamsObj).then(_ref2 => {
+      let {
+        data
+      } = _ref2;
+      const capitalizedCompanyNamesOptions = data.map(_ref3 => {
+        let {
+            name
+          } = _ref3,
+          otherProps = _objectWithoutProperties(_ref3, _excluded);
+        return _objectSpread({
+          name: (0, _formatters.ucFirstLetters)(name)
+        }, otherProps);
+      });
+      setNextStepIsLoading(false);
+      setOptions(capitalizedCompanyNamesOptions);
+      return data;
+    }).catch(() => setOptions([]));
+  };
+  const onInputChange = (_, newInputValue) => {
+    if (newInputValue === "I don't see my company") {
+      setNextStepIsLoading(false);
+      return setCompanyName(inputValue);
+    }
+    setNextStepIsLoading(false);
+    setInputValue(newInputValue);
+    if (newInputValue === "") {
+      return setOptions([]);
+    }
+    return fetchCompanies();
+  };
+  const isError = !!inputValue && (0, _otherHelpers.incorrectNameCheck)(inputValue, 60);
+  return /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    spacing: 1,
+    direction: "column"
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_material.Autocomplete, {
+    id: id || "companies-autocomplete",
+    freeSolo: true,
+    options: [...options, "I don't see my company"],
+    getOptionLabel: option => typeof option === "string" ? option : option.name || "",
+    filterOptions: option => option,
+    autoComplete: true,
+    includeInputInList: true,
+    disabled: disabled,
+    renderInput: params => /*#__PURE__*/_react.default.createElement(_material.TextField, _extends({
+      id: "companies-autocomplete-input"
+    }, params, {
+      label: label,
+      variant: variant,
+      error: isError,
+      size: size,
+      autoComplete: "off",
+      helperText: isError ? "This company name is not valid" : helperText || "",
+      style: style
+    }, textFieldProps)),
+    getOptionSelected: (option, value) => option === "" || option.name === value.name || option === value,
+    value: inputValue,
+    onChange: (_, newValue) => {
+      setOptions(newValue ? [newValue, ...options] : options);
+      return onSelectCompany(newValue);
+    },
+    onInputChange: onInputChange
+  })), nextStepIsLoading && /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_material.LinearProgress, null)));
+};
+var _default = CompaniesAutocomplete;
+exports.default = _default;

package/dist/components/CompanyOnboardingInput.js

@@ -0,0 +1,116 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _atoms = require("@aclymatepackages/atoms");
+var _arrayImmutabilityHelpers = require("@aclymatepackages/array-immutability-helpers");
+var _regExp = require("@aclymatepackages/reg-exp");
+var _multiPartForm = require("@aclymatepackages/multi-part-form");
+var _themes = _interopRequireDefault(require("@aclymatepackages/themes"));
+var _IndustryAutocomplete = _interopRequireDefault(require("./IndustryAutocomplete"));
+var _YesNoQuestion = _interopRequireDefault(require("./YesNoQuestion"));
+var _PlacesAutocomplete = _interopRequireDefault(require("./PlacesAutocomplete"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const CompanyOnboardingInput = _ref => {
+  let {
+    companyName,
+    header,
+    onFormComplete,
+    PlacesAutocomplete,
+    theme
+  } = _ref;
+  const [inputData, setInputData] = (0, _react.useState)({
+    name: companyName
+  });
+  const editInputData = field => value => (0, _arrayImmutabilityHelpers.editObjectData)(setInputData, field, value);
+  const {
+    location,
+    industry,
+    employeeCount,
+    isRemote,
+    name
+  } = inputData;
+  const PlacesAutocompleteComponent = PlacesAutocomplete || _PlacesAutocomplete.default;
+  const nonPeopleDataLabsCompanyInputs = [{
+    label: "How many employees work for your company?",
+    value: employeeCount,
+    editData: editInputData("employeeCount"),
+    error: !(0, _regExp.numbersRegExpTest)(employeeCount) || employeeCount < 0 || employeeCount > 10000 || !Number.isInteger(Number(employeeCount))
+  }, {
+    value: industry,
+    input: /*#__PURE__*/_react.default.createElement(_IndustryAutocomplete.default, {
+      label: "Choose your company's industry",
+      industry: industry,
+      setIndustry: editInputData("industry"),
+      helperText: "We'll use this to estimate your emissions and benchmark to other similar companies"
+    })
+  }, {
+    value: location,
+    input: /*#__PURE__*/_react.default.createElement(PlacesAutocompleteComponent, {
+      place: location,
+      editPlace: editInputData("location"),
+      size: "small",
+      label: "What's your company's primary address?",
+      helperText: "We only need your physical address, not your suite number",
+      id: "company-address-autocomplete"
+    })
+  }, {
+    value: isRemote !== undefined,
+    input: /*#__PURE__*/_react.default.createElement(_YesNoQuestion.default, {
+      question: "Does your company only work remotely?",
+      value: isRemote,
+      setValue: editInputData("isRemote"),
+      lightBackground: true
+    }),
+    onNextStep: () => onFormComplete(inputData)
+  }];
+  const formInputArray = nonPeopleDataLabsCompanyInputs.map(input => _objectSpread(_objectSpread({}, input), {}, {
+    form: "onboarding"
+  }));
+  return /*#__PURE__*/_react.default.createElement(_material.Container, {
+    maxWidth: "sm"
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    direction: "column",
+    spacing: 2
+  }, header, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, /*#__PURE__*/_react.default.createElement(_atoms.TextField, {
+    value: name,
+    setValue: editInputData("name"),
+    variant: "standard",
+    label: "What is your company's name?"
+  })), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_multiPartForm.MultiPartFormLayout, {
+    forms: [{
+      name: "onboarding",
+      label: "Onboarding"
+    }],
+    rows: formInputArray,
+    confirmClose: false,
+    theme: theme || _themes.default,
+    styleProps: {
+      padding: 0
+    },
+    p: 0,
+    noGutter: true
+  }))));
+};
+var _default = CompanyOnboardingInput;
+exports.default = _default;

package/dist/components/ComparisonChart.js

@@ -0,0 +1,200 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.object.assign.js");
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _converters = require("@aclymatepackages/converters");
+var _formatters = require("@aclymatepackages/formatters");
+var _themes = require("@aclymatepackages/themes");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const GraphBar = _ref => {
+  let {
+    color,
+    categoryMaxTons,
+    dataCategoryTons,
+    left,
+    isUnitsTons
+  } = _ref;
+  const {
+    theme,
+    isMobile
+  } = (0, _themes.useLayoutHelpers)();
+  const displayColor = theme.palette[color].main;
+  const maxPercentage = dataCategoryTons / categoryMaxTons;
+  const barPercentage = maxPercentage * 100;
+  const barSize = isMobile ? 40 : 50;
+  const dataCategoryDisplayValue = isUnitsTons ? dataCategoryTons : Math.round((0, _converters.tonsToLbs)(dataCategoryTons));
+  const SmallBarAnnotation = () => /*#__PURE__*/_react.default.createElement(_material.Box, {
+    style: {
+      height: barSize - 10,
+      width: barSize - 10,
+      backgroundColor: "white",
+      borderRadius: "50%",
+      border: "".concat(displayColor, " solid thin"),
+      color: displayColor
+    },
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: isMobile ? "caption" : "subtitle1",
+    align: "center",
+    color: (0, _themes.isColorDarkTheme)(displayColor) ? "secondary" : "textPrimary"
+  }, (0, _formatters.formatDecimal)(dataCategoryDisplayValue)));
+  const barPercentageMobileBreakPoint = isMobile ? 25 : 15;
+  return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
+    theme: (0, _themes.isColorDarkTheme)(displayColor) ? _themes.mergeDarkTheme : _themes.mergeMainTheme
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    display: "flex",
+    justifyContent: left ? "flex-end" : "flex-start",
+    alignItems: "center"
+  }, barPercentage < barPercentageMobileBreakPoint && left && /*#__PURE__*/_react.default.createElement(SmallBarAnnotation, null), /*#__PURE__*/_react.default.createElement(_material.Box, {
+    style: {
+      width: "".concat(barPercentage > 100 ? 100 : barPercentage, "%"),
+      height: "".concat(barSize, "px"),
+      backgroundColor: displayColor,
+      borderRadius: left ? "25px 0 0 25px" : "0 25px 25px 0"
+    },
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, barPercentage > barPercentageMobileBreakPoint && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: isMobile ? "subtitle1" : "h6",
+    color: "textPrimary",
+    align: "center"
+  }, "".concat((0, _formatters.formatDecimal)(dataCategoryDisplayValue))))), barPercentage < barPercentageMobileBreakPoint && !left && /*#__PURE__*/_react.default.createElement(SmallBarAnnotation, null)));
+};
+const GraphRow = _ref2 => {
+  let {
+    category,
+    idx,
+    individualData,
+    comparisonData,
+    categories,
+    isUnitsTons
+  } = _ref2;
+  const {
+    theme,
+    isMobile
+  } = (0, _themes.useLayoutHelpers)();
+  const {
+    color,
+    title,
+    icon,
+    type,
+    categoryMaxTons
+  } = category;
+  const individualTons = individualData["".concat(type, "Tons")] || 0;
+  const comparisonTons = comparisonData["".concat(type, "Tons")];
+  const barDisplayMaxTons = categoryMaxTons > individualTons ? categoryMaxTons : individualTons;
+  return /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    container: true,
+    justifyContent: "center",
+    alignItems: "center",
+    wrap: "nowrap"
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 5
+  }, /*#__PURE__*/_react.default.createElement(GraphBar, _extends({}, category, {
+    categoryMaxTons: barDisplayMaxTons,
+    dataCategoryTons: individualTons,
+    isUnitsTons: isUnitsTons,
+    left: true
+  }))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: "auto"
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    style: {
+      height: isMobile ? "65px" : "85px",
+      width: isMobile ? "65px" : "85px",
+      backgroundColor: theme.palette.backgroundGray.dark,
+      borderRadius: !idx ? "8px 8px 0 0" : idx === categories.length - 1 ? "0 0 8px 8px" : 0
+    },
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+    title: title,
+    key: "comparison-graphic-category-icon-".concat(idx)
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    style: {
+      backgroundColor: theme.palette[color].main,
+      height: isMobile ? "50px" : "70px",
+      width: isMobile ? "50px" : "70px",
+      borderRadius: "50%"
+    },
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: icon,
+    size: isMobile ? "1x" : "2x",
+    style: {
+      color: "white"
+    }
+  }))))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 5
+  }, /*#__PURE__*/_react.default.createElement(GraphBar, _extends({}, category, {
+    categoryMaxTons: barDisplayMaxTons,
+    dataCategoryTons: comparisonTons,
+    isUnitsTons: isUnitsTons
+  }))));
+};
+const ComparisonChart = _ref3 => {
+  let {
+    individualData,
+    comparisonData,
+    categories,
+    youTitle = "You",
+    comparisonTitle = "US Average",
+    isUnitsTons
+  } = _ref3;
+  const {
+    isMobile
+  } = (0, _themes.useLayoutHelpers)();
+  return /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    direction: "column"
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    container: true,
+    alignItems: "flex-end"
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 5
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: isMobile ? "subtitle1" : "h5",
+    align: "center"
+  }, youTitle)), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 2
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: isMobile ? "h5" : "h3",
+    align: "center"
+  }, "VS")), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 5
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: isMobile ? "subtitle1" : "h5",
+    align: "center"
+  }, comparisonTitle))), categories.map((category, idx) => /*#__PURE__*/_react.default.createElement(GraphRow, {
+    idx: idx,
+    key: "comparison-graph-row-".concat(idx),
+    individualData: individualData,
+    comparisonData: comparisonData,
+    categories: categories,
+    category: category,
+    isUnitsTons: isUnitsTons
+  })));
+};
+var _default = ComparisonChart;
+exports.default = _default;

package/dist/components/CustomTooltipDisplayRow.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _formatters = require("@aclymatepackages/formatters");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const CustomTooltipDisplayRow = _ref => {
+  let {
+    category,
+    Icon,
+    icon,
+    customAvatar,
+    color,
+    name,
+    subtitle
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    container: true,
+    spacing: 1,
+    wrap: "nowrap",
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true
+  }, customAvatar || /*#__PURE__*/_react.default.createElement(_material.Avatar, {
+    style: {
+      backgroundColor: color,
+      color: "white"
+    }
+  }, icon, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
+    style: {
+      color: "inherit"
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    container: true,
+    direction: "column",
+    wrap: "nowrap"
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "subtitle1",
+    color: "textPrimary",
+    noWrap: true
+  }, "".concat((0, _formatters.ucFirstLetters)(name || category)))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "caption",
+    color: "textSecondary"
+  }, subtitle))));
+};
+var _default = CustomTooltipDisplayRow;
+exports.default = _default;