contentoh-components-library 21.2.37 → 21.2.38

package/dist/components/pages/RegistrationLoginFirstStep/index.js

@@ -0,0 +1,269 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegistrationLoginFirstStep = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _GradientPanel = require("../../atoms/GradientPanel");
+
+var _CarouselImagesLogin = require("../../molecules/CarouselImagesLogin");
+
+var _react = require("react");
+
+var _LogoImage = require("../../atoms/LogoImage");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _variables = require("../../../global-files/variables");
+
+var _TagAndInput = require("../../molecules/TagAndInput");
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _GeneralInput = require("../../atoms/GeneralInput");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var RegistrationLoginFirstStep = function RegistrationLoginFirstStep(_ref) {
+  var _ref$imageArrayCarous = _ref.imageArrayCarousel,
+      imageArrayCarousel = _ref$imageArrayCarous === void 0 ? [] : _ref$imageArrayCarous,
+      textCarousel = _ref.textCarousel,
+      backogroundColorCarousel = _ref.backogroundColorCarousel;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      emptyName = _useState2[0],
+      setEmptyName = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      emptyLastName = _useState4[0],
+      setEmptyLastName = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      emptyEmail = _useState6[0],
+      setEmptyEmail = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      emptyJob = _useState8[0],
+      setEmptyJob = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      emptyPhone = _useState10[0],
+      setEmptyPhone = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      invalidEmail = _useState12[0],
+      setInvalidEmail = _useState12[1];
+
+  var validate = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+      var name, lastName, email, job, phone;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              name = document.querySelector("#nameInput").value;
+              lastName = document.querySelector("#lastNameInput").value;
+              email = document.querySelector("#emailInput").value;
+              job = document.querySelector("#jobInput").value;
+              phone = document.querySelector("#phoneInput").value;
+              name === "" ? setEmptyName(true) : setEmptyName(false);
+              lastName === "" ? setEmptyLastName(true) : setEmptyLastName(false);
+              email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
+              job === "" ? setEmptyJob(true) : setEmptyJob(false);
+              phone === "" ? setEmptyPhone(true) : setEmptyPhone(false);
+              !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email) ? setInvalidEmail(true) : setInvalidEmail(false);
+
+            case 12:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function validate(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "credenciales",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      fontFamily: _variables.FontFamily.AvenirNext,
+      color: _variables.GlobalColors.s5,
+      text: "Ingresa tus credenciales"
+    })
+  }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "user",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "name-registration-user",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+        inputType: "text",
+        inputId: "nameInput",
+        label: "Nombre",
+        inputPlaceHolder: "Nombre"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+        inputType: "text",
+        inputId: "lastNameInput",
+        label: "Apellido",
+        inputPlaceHolder: "Apellido"
+      })]
+    }), emptyName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese su nombre"
+    }), emptyLastName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese sus apellidos"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+      inputType: "text",
+      inputId: "emailInput",
+      label: "Correo electrónico",
+      inputPlaceHolder: "username@contentoh.com"
+    }), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese su correo"
+    }), invalidEmail && !emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese un correo v\xE1lido"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+      inputType: "text",
+      inputId: "jobInput",
+      label: "Puesto laboral",
+      inputPlaceHolder: "Puesto dentro de la empresa"
+    }), emptyJob && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese su puesto"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      text: "Teléfono",
+      headerType: "input-name-header"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "phone-registration-user",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+        name: "select",
+        className: "phone-options",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+52"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+54"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+57"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+506"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+593"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+503"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+504"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+507"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+51"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralInput.GeneralInput, {
+        inputId: "phoneInput",
+        inputType: "text",
+        inputPlaceholder: "Teléfono"
+      })]
+    }), emptyPhone && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese su n\xFAmero de tel\xE9fono"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      text: "País",
+      headerType: "input-name-header"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+      name: "select",
+      className: "country-options",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value1",
+        selected: true,
+        children: "Selecciona tu pa\xEDs"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value2",
+        children: "Argentina"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value3",
+        children: "Colombia"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value2",
+        children: "Ecuador"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value3",
+        children: "El Salvador"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value2",
+        children: "Honduras"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value3",
+        children: "M\xE9xico"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value2",
+        children: "Panam\xE1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value3",
+        children: "Per\xFA"
+      })]
+    }), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Seleccione su pa\xEDs"
+    })]
+  }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "button-end",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+      buttonType: "general-default-button",
+      label: "Enviar",
+      onClick: function onClick(e) {
+        return validate(e);
+      }
+    })
+  }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "progress-bar",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "progress-bar-first-step"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "progress-bar-registration"
+    })]
+  }, "5"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+    text: "Paso 1",
+    headerType: "date-header",
+    color: _variables.GlobalColors.s4
+  }, "6"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "new-login",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+      className: "pre-registro",
+      children: ["\xBFYa tienes una cuenta?", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: " Inicia Sesi\xF3n"
+      })]
+    })
+  }, "7")];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "home-retailer",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselImagesLogin.CarouselImagesLogin, {
+        panelImg: imageArrayCarousel,
+        panelText: textCarousel,
+        panelColor: backogroundColorCarousel
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "home-login-retailer",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
+        componentsArray: loginRight,
+        panelType: "home-login",
+        panelColor: _variables.GlobalColors.white
+      })
+    })]
+  });
+};
+
+exports.RegistrationLoginFirstStep = RegistrationLoginFirstStep;

package/dist/components/pages/RegistrationLoginFirstStep/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  height: 100vh;\n  .user {\n    .name-registration-user {\n      display: flex;\n      justify-content: space-between;\n      input {\n        width: 160px;\n      }\n    }\n    .input-name-header {\n      margin-bottom: 4px;\n      margin-top: 12px;\n    }\n    .phone-registration-user {\n      display: flex;\n      justify-content: space-between;\n      .phone-options {\n        width: 80px;\n      }\n      input {\n        width: 100%;\n      }\n      & + * {\n        margin-top: 10px;\n      }\n    }\n    .country-options,\n    .phone-options {\n      width: 100%;\n      border: 1px solid ", ";\n      font-family: ", ";\n      color: ", ";\n      font-weight: normal;\n      font-size: 12px;\n      line-height: 15px;\n      padding: 10px;\n      outline: none;\n      border-radius: 2px;\n      resize: none;\n      &:focus {\n        border: 1px solid ", ";\n      }\n    }\n  }\n  .button-end {\n    text-align: end;\n    .general-default-button {\n      width: 160px;\n    }\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  .progress-bar {\n    width: 100%;\n    height: 8px;\n    display: flex;\n    justify-content: space-between;\n    .progress-bar-first-step {\n      width: 33.33%;\n      background-color: rgb(196, 196, 196);\n    }\n    .progress-bar-registration {\n      background-color: rgb(226, 226, 226);\n      width: 66.66%;\n    }\n  }\n  .date-header {\n    .new-login {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n  }\n  .home-login-retailer,\n  .home-retailer {\n    width: 50%;\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2);
+
+exports.Container = Container;

package/dist/index.js

@@ -886,17 +886,4 @@ Object.keys(_VerificationCodeResetPassword).forEach(function (key) {
       return _VerificationCodeResetPassword[key];
     }
   });
-});
-
-var _dashboardUtils = require("./components/pages/Dashboard/dashboardUtils");
-
-Object.keys(_dashboardUtils).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _dashboardUtils[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _dashboardUtils[key];
-    }
-  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.2.37",
+  "version": "21.2.38",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/atoms/Graphic/index.js

@@ -3,6 +3,7 @@ import { Chart } from "react-chartjs-2";
 import "chart.js/auto";
 
 export const Graphic = ({ data, type, options }) => {
+ 
   return (
     <Container>
       <Chart type={type} data={data} options={options} />

package/src/components/atoms/VerticalSideMenuMainPage/styles.js

@@ -9,14 +9,13 @@ export const Container = styled.div`
   flex-direction: column;
   justify-content: space-between;
   overflow: none;
-  width: ${({ bar }) => (bar ? 260 : 58)}px;
-  border-radius: ${({ bar }) => (bar ? 20 : 50)}px;
+  width: ${({ bar }) => (bar ? 250 : 58)}px;
   background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);
   scrollbar-width: none;
   display: flex;
   text-align: center;
   transition: width 0.3s linear;
-  margin: 10px 0 10px 20px;
+  margin: 0;
   & + * {
     margin-left: 30px;
   }
@@ -31,8 +30,7 @@ export const Container = styled.div`
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      margin-top: ${({ bar }) => (bar === "" ? 145 : 40)}%;
-      padding-left: ${({ bar }) => (bar ? 10 : 0)}px;
+      margin-top: 50px;
       .active {
         background: #e33aa9;
         color: #fafafa;
@@ -51,7 +49,7 @@ export const Container = styled.div`
 `;
 
 export const NavLinkOption = styled(NavLink)`
-  height: ${({ bar }) => (bar ? 32 : 38)}px;
+  height: 38px;
   display: flex;
   justify-content: ${({ bar }) => (bar ? "flex-start" : "center")};
   border-radius: ${({ bar }) => (bar ? 18 : 100)}px;
@@ -61,7 +59,6 @@ export const NavLinkOption = styled(NavLink)`
   font-weight: 400;
   font-size: 18px;
   line-height: 21px;
-  //margin: 5px 0;
   letter-spacing: -0.015em;
   color: #fafafa;
   text-decoration: none;
@@ -70,6 +67,8 @@ export const NavLinkOption = styled(NavLink)`
   padding: 0 17px;
   &:hover {
     background: #e33aa9;
+    color: #fafafa;
+    text-decoration: none;
   }
   p {
     cursor: pointer;

package/src/components/molecules/CustomSelect/CustomSelect.stories.js

@@ -13,24 +13,15 @@ CustomSelectDefault.args = {
   options: [
     {
       id: 1,
-      name: "Decoración",
+      value: "Decoración",
       subOptions: [
-        { id: 1, name: "Espejos", isSelected: true },
-        { id: 2, name: "Persianas" },
+        { id: 1, value: "Espejos" },
+        { id: 2, value: "Persianas" },
       ],
     },
-    { id: 2, name: "Eléctrico", isSelected: true },
-    { id: 3, name: "Ferretería" },
-    { id: 4, name: "Herramientas" },
-    { id: 5, name: "Iluminación" },
+    { id: 2, value: "Eléctrico" },
+    { id: 3, value: "Ferretería" },
+    { id: 4, value: "Herramientas" },
+    { id: 5, value: "Iluminación" },
   ],
-  onClickItem: (v, id) => {
-    if (v) {
-      console.log("Agregar a la lista", id);
-    } else {
-      console.log("Eliminar a la lista", id);
-    }
-  },
-  icon: "",
-  showSearchBar: true,
 };

package/src/components/molecules/CustomSelect/SelectItem.js

@@ -7,7 +7,6 @@ export const SelecItem = ({
   setParameterArray,
   activeFilters,
   setActiveFilters,
-  onClickItem,
 }) => {
   const [showSubOptions, setShowSubOptions] = useState(false);
   const [chkGlobal, setChkGlobal] = useState(false);
@@ -18,9 +17,6 @@ export const SelecItem = ({
           id={"main-item-" + option.id}
           label={option.name}
           onChange={(e) => {
-            if (onClickItem) {
-              onClickItem(e.target.checked, option.id)
-            }
             const subOptions = option.subOptions;
             const filtersCopy = { ...activeFilters };
             if (subOptions) {
@@ -81,9 +77,6 @@ export const SelecItem = ({
                   activeFilters[option.name][sub.name]
                 }
                 onChange={(e) => {
-                  if (onClickItem) {
-                    onClickItem(e.target.checked, sub.id)
-                  }
                   if (e.target.checked) {
                     setParameterArray((current) =>
                       [...current, sub.id].sort((a, b) => a - b)

package/src/components/molecules/CustomSelect/index.js

@@ -13,8 +13,6 @@ export const CustomSelect = ({
   customSelectId = "defaultSelectId",
   defaultOption,
   setParameterArray,
-  onClickItem,
-  icon,
 }) => {
   const [filters, setFilters] = useState(options || []);
   const [showList, setShowList] = useCloseModal(customSelectId);
@@ -35,19 +33,6 @@ export const CustomSelect = ({
     const end = new Date();
     setStartDate(start);
     setEndDate(end);
-    const obj = {};
-    options.forEach((o) => {
-      const { name, isSelected, subOptions } = o;
-      if (isSelected) obj[name] = {};
-      subOptions?.forEach((so) => {
-        const { name: nameSO, isSelected: isSelectedSO } = so;
-        if (isSelectedSO) {
-          if (!obj[name]) obj[name] = {};
-          obj[name][nameSO] = true;
-        }
-      });
-    });
-    setActiveFilters(obj);
   }, []);
 
   const onChangeDatePicker = (dates) => {
@@ -79,14 +64,10 @@ export const CustomSelect = ({
   }, [text]);
 
   return (
-    <Container id={customSelectId} selectLabel={selectLabel}>
+    <Container id={customSelectId}>
       <div className="button-list" onClick={() => setShowList(!showList)}>
         <p>{selectLabel}</p>
-        {icon ? (
-          <img src={icon} alt="Favorite" width={"20px"} />
-        ) : (
-          <div className="arrow-item">&#9664;</div>
-        )}
+        <div className="arrow-item">&#9664;</div>
       </div>
       {showList && (
         <div className="select-container">
@@ -135,7 +116,6 @@ export const CustomSelect = ({
                   setParameterArray={setParameterArray}
                   activeFilters={activeFilters}
                   setActiveFilters={setActiveFilters}
-                  onClickItem={onClickItem}
                 />
               )
             )}

package/src/components/molecules/CustomSelect/styles.js

@@ -9,9 +9,7 @@ export const Container = styled.div`
     font-family: ${FontFamily.Raleway};
     font-size: 13px;
     display: flex;
-    padding: ${(props) => (props.selectLabel !== "" ? "10px 15px" : "5px 5px")};
-    //padding: 10px 15px;
-    //padding: 5px 5px;
+    padding: 10px 15px;
     justify-content: space-between;
     border-radius: 50px;
     background-color: #fff;
@@ -22,7 +20,6 @@ export const Container = styled.div`
       transform: rotate(-90deg);
       cursor: pointer;
       font-size: 10px;
-      margin-left: 10px;
     }
     & + * {
       margin-top: 10px;

package/src/components/organisms/DashboardMetric/index.js

@@ -1,10 +1,5 @@
 import { Container } from "./styles";
 import { Graphic } from "../../atoms/Graphic";
-import {
-  getFullStatus,
-  removeOldStatus,
-  getStatusColor,
-} from "./dashboardMetricUtils";
 
 export const DashboardMetric = ({
   label,
@@ -15,17 +10,12 @@ export const DashboardMetric = ({
   scale = "x",
   displayScale = false,
   displayLegend = false,
-  showPercent = false,
-  borderColor,
 }) => {
-  const labels =
-    type === "doughnut"
-      ? Object.keys(dataObject).map((key) => getFullStatus(key))
-      : Object.keys(dataObject);
-  const newObject =
-    type === "doughnut" ? removeOldStatus(dataObject) : dataObject;
-  const values = Object.values(newObject);
-  const colorsArray = Object.keys(newObject).map((key) => getStatusColor(key));
+  const labels = Object.keys(dataObject);
+  const values = Object.values(dataObject);
+  const colorsArray = values.map(
+    () => `#${Math.floor(Math.random() * 16777215).toString(16)}`
+  );
 
   const data = {
     labels,
@@ -33,7 +23,6 @@ export const DashboardMetric = ({
       {
         data: values,
         backgroundColor: colorsArray,
-        borderColor: borderColor,
       },
     ],
   };
@@ -49,25 +38,12 @@ export const DashboardMetric = ({
     maintainAspectRatio: false,
     aspectRatio: 1,
     plugins: {
-      tooltip: {
-        callbacks: {
-          label: ({ dataset, element }) => {
-            const sum = dataset?.data?.reduce((accumulator, value) => {
-              return accumulator + value;
-            }, 0);
-            const { raw } = element.$context;
-            const percent = Math.round(100 * (raw / sum)) + "%";
-            return showPercent ? percent : raw;
-          },
-        },
-      },
       legend: {
         position: "right",
         display: displayLegend,
-        labels: {
-          usePointStyle: true,
-          boxWidth: 8,
-        },
+      },
+      title: {
+        display: false,
       },
     },
     scales: {

package/src/components/organisms/DashboardMetric/styles.js

@@ -48,7 +48,7 @@ export const Container = styled.div`
   }
 
   .graphic-cotainer {
-    height: 320px;
+    height: 300px;
     border: 1px solid ${GlobalColors.s3};
     padding: 10px;
     border-radius: 5px;

package/src/components/pages/Dashboard/index.js

@@ -166,7 +166,7 @@ export const Dashboard = ({ jwt, user }) => {
       },
       {
         id: 7,
-        name: "El mes pasado",
+        name: "Este mes",
         function: () =>
           setDatesRange({
             startDate: new Date(
@@ -286,7 +286,6 @@ export const Dashboard = ({ jwt, user }) => {
           }}
           type="doughnut"
           displayLegend={true}
-          showPercent={true}
         />
         <DashboardMetric
           label={"Productos solicitados"}
@@ -304,7 +303,6 @@ export const Dashboard = ({ jwt, user }) => {
             loadRequiredProducts(evt);
             setOrderByRequired(evt);
           }}
-          borderColor={"#3B1366"}
         />
       </div>
     </Container>

package/src/index.js

@@ -73,6 +73,3 @@ export * from "./components/pages/RegistrationLoginThirdStep";
 export * from "./components/pages/RetailerProductEdition";
 export * from "./components/pages/ProviderProductEdition";
 export * from "./components/pages/VerificationCodeResetPassword";
-
-//functions
-export * from "./components/pages/Dashboard/dashboardUtils";