contentoh-components-library 21.2.6 → 21.2.7

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

@@ -1,28 +0,0 @@
-import { DashboardMetric } from "./index";
-
-export default {
-  title: "Components/organisms/DashboardMetric",
-  component: DashboardMetric,
-};
-
-const Template = (args) => <DashboardMetric {...args} />;
-export const DashboardMetricDefault = Template.bind({});
-DashboardMetricDefault.args = {
-  label: "Productos por estatus",
-  description:
-    "Revisa el avance individual de cada estatus, utiliza los filtros para encontrar información precisa.",
-  dataObject: {
-    AA: 89,
-    ACA: 11,
-    AC: 100,
-    AP: 60,
-    AS: 300,
-    CA: 50,
-    PA: 100,
-    IE: 700,
-    RA: 50,
-    RCA: 90,
-    RC: 11,
-    RP: 49,
-  },
-};

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

@@ -1,128 +0,0 @@
-import { Container } from "./styles";
-import { MetricSelect } from "../../atoms/MetricSelect";
-import { Graphic } from "../../atoms/Graphic";
-import { Calendar } from "../Calendar";
-import { useEffect, useState } from "react";
-
-export const DashboardMetric = ({
-  label,
-  description,
-  retailerSelected,
-  dataObject = { AA: 89 },
-  indexAxis = "y",
-  type = "bar",
-  scale = "x",
-  displayScale = false,
-  retailers = [],
-  setQueryObject,
-  queryObject
-}) => {
-
-  const onChangeRetailer = (e) => {
-    setQueryObject({ ...queryObject, retailerId: e.target.value });
-  };
-
-  const [startDate, setStartDate] = useState(new Date());
-  const [endDate, setEndDate] = useState(new Date());
-
-  useEffect(() => {
-    const today = new Date();
-    const firstWeekDay = today.getDate() - today.getDay();
-    const start = `${today.getFullYear()}-${
-      today.getMonth() + 1
-    }-${firstWeekDay}`;
-    const end = new Date();
-    setStartDate(new Date(start));
-    setEndDate(end);
-  }, []);
-
-  const onChange = (dates) => {
-    const [start, end] = dates;
-    setStartDate(start);
-    setEndDate(end);
-    if (end)
-      setQueryObject({
-        ...queryObject,
-        startDate: `${start.getFullYear()}-${
-          start.getMonth() + 1
-        }-${start.getDate()}`,
-        endDate: `${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`,
-      });
-  };
-
-  const labels = Object.keys(dataObject);
-  const values = Object.values(dataObject);
-  const retailersArray = Object.values(retailers).sort((a, b) => {
-    if (a.name > b.name) {
-      return 1;
-    }
-    if (a.name < b.name) {
-      return -1;
-    }
-    // a must be equal to b
-    return 0;
-  });
-  const colorsArray = values.map(
-    () => `#${Math.floor(Math.random() * 16777215).toString(16)}`
-  );
-
-  const data = {
-    labels,
-    datasets: [
-      {
-        data: values,
-        backgroundColor: colorsArray,
-      },
-    ],
-  };
-
-  const options = {
-    indexAxis,
-    elements: {
-      bar: {
-        borderWidth: 2,
-      },
-    },
-    responsive: true,
-    maintainAspectRatio: false,
-    aspectRatio: 1,
-    plugins: {
-      legend: {
-        position: "right",
-        display: false,
-      },
-      title: {
-        display: false,
-      },
-    },
-    scales: {
-      [scale]: {
-        ticks: {
-          display: displayScale,
-        },
-      },
-    },
-  };
-
-  return (
-    <Container>
-      <div className="text-container">
-        <p>{label}</p>
-        <p>{description}</p>
-      </div>
-      <div className="select-container">
-        <Calendar onChange={onChange} startDate={startDate} endDate={endDate} />
-        <MetricSelect
-          className={"select"}
-          label={"Cadena comercial"}
-          optionSelected={retailerSelected}
-          options={retailersArray}
-          onChange={onChangeRetailer}
-        />
-      </div>
-      <div className="graphic-cotainer">
-        <Graphic data={data} options={options} type={type} />
-      </div>
-    </Container>
-  );
-};

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

@@ -1,60 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  border: 1px solid ${GlobalColors.s3};
-  border-radius: 5px;
-  padding: 24px;
-
-  .text-container {
-    p {
-      font-family: ${FontFamily.Raleway};
-      color: ${GlobalColors.s5};
-      font-size: 17px;
-
-      &:last-of-type {
-        font-size: 12px;
-        color: ${GlobalColors.s4};
-      }
-
-      & + * {
-        margin-top: 5px;
-      }
-    }
-
-    & + * {
-      margin-top: 15px;
-    }
-  }
-
-  .select-container {
-    display: flex;
-
-    .select {
-      flex: 0.1 1 30%;
-
-      select {
-        width: 100%;
-      }
-
-      & + * {
-        margin-left: 10px;
-      }
-    }
-
-    & + * {
-      margin-top: 10px;
-    }
-  }
-
-  .graphic-cotainer {
-    height: 300px;
-    border: 1px solid ${GlobalColors.s3};
-    padding: 10px;
-    border-radius: 5px;
-
-    div {
-      height: fill-available;
-    }
-  }
-`;

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

@@ -1,10 +0,0 @@
-import { Dashboard } from ".";
-
-export default {
-  title: "Components/pages/Dashboard",
-  component: Dashboard,
-};
-
-const Template = (args) => <Dashboard {...args} />;
-export const DashboardDeafult = Template.bind({});
-DashboardDeafult.args = {};

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

@@ -1,146 +0,0 @@
-import { Container } from "./styles";
-import { MetricCard } from "../../atoms/MetricCard";
-import { DashboardMetric } from "../../organisms/DashboardMetric";
-import { useEffect, useState } from "react";
-import { Loading } from "../../atoms/Loading";
-import axios from "axios";
-
-export const Dashboard = () => {
-  const [metricsData, setMetricsData] = useState([]);
-  const [productsByStatus, setProductsByStatus] = useState({});
-  const [requiredProducts, setRequiredProducts] = useState([]);
-  const [orderByStatus, setOrderByStatus] = useState({
-    retailerId: null,
-    startDate: null,
-    endDate: null,
-  });
-  const [orderByRequired, setOrderByRequired] = useState({
-    retailerId: null,
-    startDate: null,
-    endDate: null,
-  });
-  const [retailers, setRetailers] = useState({});
-  const [loading, setLoading] = useState(true);
-
-  const loadProductVersions = async (queryObject, byStatus = false) => {
-    const { retailerId, startDate, endDate} = queryObject;
-    const query = `retailerId=${retailerId}&startDate=${startDate}&endDate=${endDate}`;
-    const endpoint = byStatus ? process.env.REACT_APP_READ_ORDERS_BY_STATUS : process.env.REACT_APP_READ_REQUIRED_ORDERS
-    try {
-      const response = await axios.get(`${endpoint}?${query}`);
-      return JSON.parse(response.data.body);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  const getRetailers = async () => {
-    const retailersResponse = await axios.get(
-      `${process.env.REACT_APP_RETAILER_ENDPOINT}`,
-      {
-        headers: {
-          Authorization: sessionStorage.getItem("jwt"),
-        },
-      }
-    );
-    const parsed = JSON.parse(retailersResponse.data.body).data;
-    const retailers = Object.keys(parsed).map((key) => {
-      if (key.includes('The Home Depot')) return parsed[key];
-    }).filter((f) => f);
-    setRetailers(retailers);
-  };
-
-  const loadProductsByStatus = async (orderByStatus) => {
-    const { orders, fullData } = await loadProductVersions(orderByStatus, true);
-    const { total, R, ACA, PA } = fullData;
-    const inProcess = Object.keys(fullData).reduce((prev, curr) =>
-      !['total', 'ACA', 'PA', 'R'].includes(curr) ? prev + fullData[curr] : prev
-    , 0);
-    setMetricsData([
-      { label: "Productos totales", value: total },
-      { label: "Productos sin asignar", value: PA + R },
-      { label: "Productos en proceso", value: inProcess },
-      { label: "Productos terminados", value: ACA },
-    ]);
-    setProductsByStatus(orders);
-  };
-
-  const loadRequiredProducts = async (orderByRequired) => {
-    const { dates } = await loadProductVersions(orderByRequired);
-    setRequiredProducts(dates);
-  };
-
-  useEffect(() => {
-    const today = new Date();
-    const firstWeekDay = today.getDate() - today.getDay();
-    const startDate = `${today.getFullYear()}-${
-      today.getMonth() + 1
-    }-${firstWeekDay}`;
-    const endDate = `${today.getFullYear()}-${
-      today.getMonth() + 1
-    }-${today.getDate()}`;
-    const queryObject = { retailerId: "58", startDate, endDate };
-    setOrderByStatus(queryObject);
-    setOrderByRequired(queryObject);
-    getRetailers();
-    loadProductsByStatus(queryObject);
-    loadRequiredProducts(queryObject);
-  }, []);
-
-  useEffect(() => {
-    orderByRequired?.retailerId &&
-      orderByStatus?.retailerId &&
-      metricsData.length > 0 &&
-      setLoading(false);
-  }, [orderByRequired, orderByStatus, metricsData]);
-
-  return loading ? (
-    <Loading />
-  ) : (
-    <Container>
-      <div className="metric-cards">
-        {metricsData.map((metric, index) => (
-          <MetricCard
-            key={`${index}-${metric.value}`}
-            label={metric.label}
-            number={metric.value}
-          />
-        ))}
-      </div>
-      <div className="metrics-main-container">
-        <DashboardMetric
-          label={"Productos por estatus"}
-          description={
-            "Revisa el avance individual de cada estatus, utiliza los filtros para encontrar información precisa."
-          }
-          dataObject={productsByStatus}
-          retailerSelected={orderByStatus.retailerId}
-          retailers={retailers}
-          queryObject={orderByStatus}
-          setQueryObject={(evt) => {
-            loadProductsByStatus(evt);
-            setOrderByStatus(evt);
-          }}
-        />
-        <DashboardMetric
-          label={"Productos solicitados"}
-          description={
-            "Filtra los productos solicitados por fecha y alcance para revisar rápidamente el flujo de trabajo."
-          }
-          dataObject={requiredProducts}
-          type="line"
-          indexAxis="x"
-          scale="x"
-          displayScale={true}
-          retailers={retailers}
-          retailerSelected={orderByRequired.retailerId}
-          queryObject={orderByRequired}
-          setQueryObject={(evt) => {
-            loadRequiredProducts(evt);
-            setOrderByRequired(evt);
-          }}
-        />
-      </div>
-    </Container>
-  );
-};

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

@@ -1,24 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  padding: 30px;
-  .metric-cards {
-    display: flex;
-
-    > * + * {
-      margin-left: 10px;
-    }
-
-    & + * {
-      margin-top: 10px;
-    }
-  }
-
-  .metrics-main-container {
-    display: flex;
-
-    > * + * {
-      margin-left: 10px;
-    }
-  }
-`;