npm-pkg-hook 1.1.2 → 1.1.4

package/src/hooks/useChartData/index.js

@@ -2,196 +2,170 @@ import { useQuery } from '@apollo/client';
 import { useState } from 'react';
 import { SPANISH_MONTHS } from "../../utils/index";
 import { GET_ALL_SALES } from "../useReport/queries";
-
-// Función para calcular el total de ventas por mes
-const calculateSalesByMonth = (salesData) => {
-    try {
-    const result = Array.from({ length: 12 }, (_, mes) => ({
-          Mes: mes,
-          Year: new Date().getFullYear(),
-          totalProductsPrice: 0,
-        }));
-      
-        salesData?.forEach((value) => {
-          const mes = new Date(value.pDatCre).getMonth();
-          result[mes].totalProductsPrice += value.totalProductsPrice;
-        });
-      
-        return result;
-    } catch (error) {
-      return []   
-    }
-};
-
-// Función para llenar los meses faltantes
-const fillMissingMonths = (data) => {
-    try {
-        const allMonths = Array.from({ length: 12 }, (_, i) => i);
-        const missingMonths = allMonths.filter(month => !data.some(data => data.Mes === month));
-        return data.concat(
-          missingMonths.map(element => ({
-            Mes: element,
-            totalProductsPrice: 0,
-            Year: '',
-          }))
-        ).sort((a, b) => a.Mes - b.Mes);
-    } catch (error) {
-        return []
-    }
-};
-
-// Función para obtener los datos del gráfico
-const getChartData = (asFilter, newResult, result, chartType) => ({
-  labels: asFilter
-    ? newResult.map(data => SPANISH_MONTHS[data.Mes])
-    : result.map(data => SPANISH_MONTHS[data.Mes]),
-  datasets: [
-    {
-      label: `Ventas por meses del año ${asFilter ? chartTypeYear : ''}`,
-      data: asFilter
-        ? newResult.map(data => data.totalProductsPrice)
-        : result.map(data => data.totalProductsPrice),
-      backgroundColor: [
-        'rgba(255, 99, 132, 0.2)',
-        'rgba(54, 162, 235, 0.2)',
-        'rgba(255, 206, 86, 0.2)',
-        'rgba(75, 192, 192, 0.2)',
-        'rgba(153, 102, 255, 0.2)',
-        'rgba(255, 159, 64, 0.2)'
-      ],
-      borderColor: chartType === 'bar'
-        ? [
-            'rgba(255, 99, 132, 1)',
-            'rgba(54, 162, 235, 1)',
-            'rgba(255, 206, 86, 1)',
-            'rgba(75, 192, 192, 1)',
-            'rgba(153, 102, 255, 1)',
-            'rgba(255, 159, 64, 1)'
-          ]
-        : 'rgb(255 0 0)',
-      tension: 0.6,
-      fill: false,
-      borderWidth: 1,
-      barPercentage: 1,
-      barThickness: 50,
-      minBarLength: 3
-    }
-  ]
-});
-
-// Función para agrupar los datos por año
-const groupSalesByYear = (salesData = []) => {
-    const groupedData = {};
-    try {
-        salesData?.forEach((item) => {
-          const year = new Date(item.pDatCre).getFullYear();
-          if (!groupedData[year]) {
-            groupedData[year] = [];
-          }
-          groupedData[year].push(item);
-        });
-        return groupedData;
-    } catch (error) {
-        return groupedData
-    }
-};
-
-// Función para obtener años únicos
-const getUniqueYears = (salesData = []) => {
-    try {
-        const years = [];
-        salesData?.forEach((item) => {
-          const y = new Date(item.pDatCre).getFullYear();
-          if (!years.includes(y)) {
-            years.push(y);
-          }
-        });
-        return years.sort((a, b) => b - a);
-    } catch (error) {
-        return []
-    }
-};
+export * from './useChartData'
+export * from './useChartDataAllOrders'
 
 export const useChartData = ({ year }) => {
-  const { data, loading } = useQuery(GET_ALL_SALES);
-  const [chartType, setChartType] = useState('Line');
-  const [chartTypeYear, setChartTypeYear] = useState(new Date().getFullYear());
-  const [asFilter, setFilter] = useState(false);
-  const [newResult, setNewResult] = useState([]);
+    // Construcción del nuevo array:
+    const { data, loading } = useQuery(GET_ALL_SALES)
+    const [chartType, setChartType] = useState('bar')
+    const [chartTypeYear, setChartTypeYear] = useState(new Date().getFullYear())
+    const [asFilter, setFilter] = useState(false)
+    const [newResult, setNewResult] = useState([])
+    let result = []
+    data?.getAllSalesStore?.length > 0 && data?.getAllSalesStore.reduce(function (res, value) {
+        // Creamos la posición del array para cada mes
+        let mes = new Date(value.pDatCre).getMonth()
+        let Year = new Date(value.pDatCre).getFullYear()
+        if (!res[mes]) {
+            res[mes] = { Mes: mes, Year }
+            // Inicializamos a 0 el valor de cada key
+            Object.keys(value).forEach((key) => {
+                if (key != 'pDatCre') {
+                    res[mes][key] = 0
+                }
+            })
 
-  const result = calculateSalesByMonth(data?.getAllSalesStore);
+            result.push(res[mes])
+        }
+        // Sumamos el valor de cada clave dentro de un bucle
+        Object.keys(value).forEach(function (key) {
+            if (key != 'pDatCre') {
+                res[mes]['totalProductsPrice'] += value['totalProductsPrice']
+            }
+        })
+        return res
+    }, {})
 
-  const filledResult = fillMissingMonths(result);
+    let allMonths = Array.from({ length: 12 }, (_, i) => { return i })
+    let missingMonths = allMonths.filter(month => { return !result.some(data => { return data.Mes === month }) })
 
-  const dataChart = getChartData(asFilter, newResult, filledResult, chartType);
+    for (const element of missingMonths) {
+        result.push({
+            'Mes': element,
+            'totalProductsPrice': 0,
+            'Year': ''
+        })
+    }
 
-  const groupedData = groupSalesByYear(data?.getAllSalesStore);
-  const years = getUniqueYears(data?.getAllSalesStore);
+    result.sort((a, b) => { return a.Mes - b.Mes })
 
-const handleChangeYear = (value) => {
-    setFilter(true);
-    const currentYear = parseInt(value);
-    setChartTypeYear(currentYear || '');
-  
-    if (filledResult?.length > 0) {
-      const filterToYear = filledResult.filter((elem) => elem?.Year === currentYear);
-      const missingNewMonths = allMonths.filter(month => !filterToYear.some(data => data.Mes === month));
-  
-      const newFilteredResult = filterToYear.concat(
-        missingNewMonths.map(element => ({
-          Mes: element,
-          totalProductsPrice: 0,
-          Year: '',
-        }))
-      ).sort((a, b) => a.Mes - b.Mes);
-  
-      setNewResult(newFilteredResult);
-      return newFilteredResult;
+    const labelTitle = `Ventas por meses del año ${asFilter ? chartTypeYear : ''}`
+    // Resultado:
+    const dataChart = {
+        labels: asFilter ? newResult.map(data => {
+            return SPANISH_MONTHS[data.Mes]
+        }) : result.map(data => {
+            return SPANISH_MONTHS[data.Mes]
+        }),
+        datasets: [
+            {
+                label: labelTitle,
+                data: asFilter ? newResult.map(data => { return data.totalProductsPrice }) : result.map(data => { return data.totalProductsPrice }),
+                backgroundColor: [
+                    'rgba(255, 99, 132, 0.2)',
+                    'rgba(54, 162, 235, 0.2)',
+                    'rgba(255, 206, 86, 0.2)',
+                    'rgba(75, 192, 192, 0.2)',
+                    'rgba(153, 102, 255, 0.2)',
+                    'rgba(255, 159, 64, 0.2)'
+                ],
+                borderColor: chartType === 'bar' ?  [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)',
+                    'rgba(153, 102, 255, 1)',
+                    'rgba(255, 159, 64, 1)'
+                ] : 'rgb(255 0 0)',
+                tension: 0.6,
+                fill: false,
+                borderWidth: 1,
+                barPercentage: 1,
+                barThickness: 50,
+                minBarLength: 3,
+            }
+        ]
     }
-  };
-  
-  const cleanFilter = () => {
-    setFilter(false);
-    setChartTypeYear(new Date().getFullYear());
-  };
-  
-  const sortYear = () => years.sort((a, b) => b - a);
-  const labelTitle = `Ventas por meses del año ${asFilter ? chartTypeYear : ''}`
-  const organiceYears = sortYear();
-  const options =  {
-    interaction: {
-      mode: 'index',
-      intersect: false,
-    },
-    scales: {
-        x: {
-            stacked: true
+    const options =  {
+        interaction: {
+          mode: 'index',
+          intersect: false,
+        },
+        scales: {
+            x: {
+                stacked: true
+            },
+            y: {
+                stacked: true
+            }
         },
-        y: {
-            stacked: true
+        plugins: {
+          title: {
+            display: true,
+            text: labelTitle
+          },
+        }
+      }
+    const groupedData = {}
+
+    data && data.getAllSalesStore.forEach((item) => {
+        const year = new Date(item.pDatCre).getFullYear()
+        if (!groupedData[year]) {
+            groupedData[year] = []
+        }
+        groupedData[year].push(item)
+    })
+    const years = []
+    data && data.getAllSalesStore.forEach((item) => {
+        const y = new Date(item.pDatCre).getFullYear()
+        if (!years.includes(y)) {
+            years.push(y)
         }
-    },
-    plugins: {
-      title: {
-        display: true,
-        text: labelTitle
-      },
+    })
+    const handleChangeYear = (value) => {
+        setFilter(true)
+        const currentYear = parseInt(value)
+        setChartTypeYear(currentYear || '')
+        if (result?.length > 0) {
+            const filterToYear = result.filter((elem) => {
+                return elem?.Year == currentYear
+            })
+            let missingNewMonths = allMonths.filter(month => { return !filterToYear.some(data => { return data.Mes === month }) })
+            for (const element of missingNewMonths) {
+                filterToYear.push({
+                    'Mes': element,
+                    'totalProductsPrice': 0,
+                    'Year': ''
+                })
+            }
+            filterToYear.sort((a, b) => { return a.Mes - b.Mes })
+            setNewResult(filterToYear)
+            return filterToYear
+        }
+    }
+    const cleanFilter = () => {
+        setFilter(false)
+        setChartTypeYear(new Date().getFullYear())
+    }
+    const sortYear = () => {
+        return  years.sort((a, b) => { return b - a });
+    }
+
+    const organiceYears = sortYear()
+    return {
+        handleChangeYear,
+        setFilter,
+        cleanFilter,
+        setChartType,
+        years: organiceYears,
+        asFilter,
+        chartTypeYear,
+        options,
+        chartType,
+        labelTitle,
+        result,
+        dataChart,
+        loading
     }
-  }
-  return {
-    handleChangeYear,
-    setFilter,
-    cleanFilter,
-    setChartType,
-    years: organiceYears,
-    asFilter,
-    chartTypeYear,
-    options,
-    chartType,
-    labelTitle,
-    result: filledResult,
-    dataChart,
-    loading,
-  };
-  };
-  
+}

package/src/hooks/useChartData/useChartData/index.js

@@ -0,0 +1,197 @@
+import { useQuery } from '@apollo/client';
+import { useState } from 'react';
+import { SPANISH_MONTHS } from "../../../utils/index";
+import { GET_ALL_SALES } from "../../useReport/queries";
+
+// Función para calcular el total de ventas por mes
+const calculateSalesByMonth = (salesData) => {
+    try {
+    const result = Array.from({ length: 12 }, (_, mes) => ({
+          Mes: mes,
+          Year: new Date().getFullYear(),
+          totalProductsPrice: 0,
+        }));
+      
+        salesData?.forEach((value) => {
+          const mes = new Date(value.pDatCre).getMonth();
+          result[mes].totalProductsPrice += value.totalProductsPrice;
+        });
+      
+        return result;
+    } catch (error) {
+      return []   
+    }
+};
+
+// Función para llenar los meses faltantes
+const fillMissingMonths = (data) => {
+    try {
+        const allMonths = Array.from({ length: 12 }, (_, i) => i);
+        const missingMonths = allMonths.filter(month => !data.some(data => data.Mes === month));
+        return data.concat(
+          missingMonths.map(element => ({
+            Mes: element,
+            totalProductsPrice: 0,
+            Year: '',
+          }))
+        ).sort((a, b) => a.Mes - b.Mes);
+    } catch (error) {
+        return []
+    }
+};
+
+// Función para obtener los datos del gráfico
+const getChartData = (asFilter, newResult, result, chartType) => ({
+  labels: asFilter
+    ? newResult.map(data => SPANISH_MONTHS[data.Mes])
+    : result.map(data => SPANISH_MONTHS[data.Mes]),
+  datasets: [
+    {
+      label: `Ventas por meses del año ${asFilter ? chartTypeYear : ''}`,
+      data: asFilter
+        ? newResult.map(data => data.totalProductsPrice)
+        : result.map(data => data.totalProductsPrice),
+      backgroundColor: [
+        'rgba(255, 99, 132, 0.2)',
+        'rgba(54, 162, 235, 0.2)',
+        'rgba(255, 206, 86, 0.2)',
+        'rgba(75, 192, 192, 0.2)',
+        'rgba(153, 102, 255, 0.2)',
+        'rgba(255, 159, 64, 0.2)'
+      ],
+      borderColor: chartType === 'bar'
+        ? [
+            'rgba(255, 99, 132, 1)',
+            'rgba(54, 162, 235, 1)',
+            'rgba(255, 206, 86, 1)',
+            'rgba(75, 192, 192, 1)',
+            'rgba(153, 102, 255, 1)',
+            'rgba(255, 159, 64, 1)'
+          ]
+        : 'rgb(255 0 0)',
+      tension: 0.6,
+      fill: false,
+      borderWidth: 1,
+      barPercentage: 1,
+      barThickness: 50,
+      minBarLength: 3
+    }
+  ]
+});
+
+// Función para agrupar los datos por año
+const groupSalesByYear = (salesData = []) => {
+    const groupedData = {};
+    try {
+        salesData?.forEach((item) => {
+          const year = new Date(item.pDatCre).getFullYear();
+          if (!groupedData[year]) {
+            groupedData[year] = [];
+          }
+          groupedData[year].push(item);
+        });
+        return groupedData;
+    } catch (error) {
+        return groupedData
+    }
+};
+
+// Función para obtener años únicos
+const getUniqueYears = (salesData = []) => {
+    try {
+        const years = [];
+        salesData?.forEach((item) => {
+          const y = new Date(item.pDatCre).getFullYear();
+          if (!years.includes(y)) {
+            years.push(y);
+          }
+        });
+        return years.sort((a, b) => b - a);
+    } catch (error) {
+        return []
+    }
+};
+
+export const useChartData = ({ year }) => {
+  const { data, loading } = useQuery(GET_ALL_SALES);
+  const [chartType, setChartType] = useState('Line');
+  const [chartTypeYear, setChartTypeYear] = useState(new Date().getFullYear());
+  const [asFilter, setFilter] = useState(false);
+  const [newResult, setNewResult] = useState([]);
+
+  const result = calculateSalesByMonth(data?.getAllSalesStore);
+
+  const filledResult = fillMissingMonths(result);
+
+  const dataChart = getChartData(asFilter, newResult, filledResult, chartType);
+
+  const groupedData = groupSalesByYear(data?.getAllSalesStore);
+  const years = getUniqueYears(data?.getAllSalesStore);
+
+const handleChangeYear = (value) => {
+    setFilter(true);
+    const currentYear = parseInt(value);
+    setChartTypeYear(currentYear || '');
+  
+    if (filledResult?.length > 0) {
+      const filterToYear = filledResult.filter((elem) => elem?.Year === currentYear);
+      const missingNewMonths = allMonths.filter(month => !filterToYear.some(data => data.Mes === month));
+  
+      const newFilteredResult = filterToYear.concat(
+        missingNewMonths.map(element => ({
+          Mes: element,
+          totalProductsPrice: 0,
+          Year: '',
+        }))
+      ).sort((a, b) => a.Mes - b.Mes);
+  
+      setNewResult(newFilteredResult);
+      return newFilteredResult;
+    }
+  };
+  
+  const cleanFilter = () => {
+    setFilter(false);
+    setChartTypeYear(new Date().getFullYear());
+  };
+  
+  const sortYear = () => years.sort((a, b) => b - a);
+  const labelTitle = `Ventas por meses del año ${asFilter ? chartTypeYear : ''}`
+  const organiceYears = sortYear();
+  const options =  {
+    interaction: {
+      mode: 'index',
+      intersect: false,
+    },
+    scales: {
+        x: {
+            stacked: true
+        },
+        y: {
+            stacked: true
+        }
+    },
+    plugins: {
+      title: {
+        display: true,
+        text: labelTitle
+      },
+    }
+  }
+  return {
+    handleChangeYear,
+    setFilter,
+    cleanFilter,
+    setChartType,
+    years: organiceYears,
+    asFilter,
+    chartTypeYear,
+    options,
+    chartType,
+    labelTitle,
+    result: filledResult,
+    dataChart,
+    loading,
+  };
+  };
+  

package/src/hooks/useChartData/useChartDataAllOrders/index.js

@@ -0,0 +1,94 @@
+import { useGetAllSales } from "../../useSales/useGetAllSales"
+
+export const useChartDataAllOrders = ({
+  onScreen = false
+} = {}) => {
+  const { data, loading } = useGetAllSales({
+    onScreen
+  })
+
+  // Objeto para mapear los códigos de estado a sus nombres
+  const statusMap = {
+    1: 'ACEPTA',
+    2: 'PROCESSING',
+    3: 'READY',
+    4: 'CONCLUDES',
+    5: 'RECHAZADOS'
+  };
+
+  // Objeto para almacenar los totales por estado
+  const totalsByStatus = {};
+
+  // Inicializar totales en 0 para todos los estados
+  for (const status in statusMap) {
+    totalsByStatus[status] = 0;
+  }
+
+  // Procesar los datos y acumular los totales por estado
+  data?.forEach(item => {
+    const status = item.pSState;
+    const totalPrice = item.totalProductsPrice;
+    totalsByStatus[status] += totalPrice;
+  });
+
+  // Preparar los datos en el formato requerido por Chart.js
+  const chartLabels = [];
+  const chartData = [];
+
+  // Iterar a través del statusMap para llenar los datos
+  for (const status in statusMap) {
+    const statusLabel = statusMap[status];
+    chartLabels?.push(statusLabel);
+    chartData?.push(totalsByStatus[status] || 0);
+  }
+
+  const chartJsData = {
+    labels: chartLabels,
+    datasets: [{
+      tension: 2,
+      fill: false,
+      borderWidth: 1,
+      barPercentage: 1,
+      barThickness: 50,
+      minBarLength: 3,
+      label: '',
+      data: chartData,
+      backgroundColor: [
+        '#FF5733', // Reddish color
+        '#FFC300', // Yellowish color
+        '#FF8C42', // Orange color
+        '#138D75', // Gold color
+        '#ff0000', // Tomato color
+      ],
+    }],
+  };
+
+  const defaultOptions = {
+    animation: {
+      animateRotate: true,
+      animateScale: true,
+    },
+    responsive: true,
+    maintainAspectRatio: false,
+    legend: {
+      position: 'bottom',
+    },
+    tooltips: {
+      callbacks: {
+        label: (tooltipItem, data) => {
+          const dataset = data?.datasets[tooltipItem.datasetIndex];
+          const total = dataset?.data?.reduce((previousValue, currentValue) => previousValue + currentValue);
+          const currentValue = dataset?.data[tooltipItem?.index];
+          const percentage = ((currentValue / total) * 100).toFixed(2);
+          return `${data?.labels[tooltipItem?.index]}: ${currentValue} (${percentage}%)`;
+        },
+      },
+    },
+  };
+
+  return {
+    loading,
+    data: loading ? [] : chartJsData,
+    option: loading ? [] : defaultOptions
+  };
+}

package/src/hooks/useCheckbox/index.js

@@ -15,7 +15,7 @@ import { useCallback, useState } from 'react'
  *  - clearAll (callback)
  */
 
-export const useCheckboxState = (elem, selectedIds = [], disabledIds = [], calBack = () => { return }) => {
+export const useCheckboxState = (elem, selectedIds = [], disabledIds = []) => {
   const numTotalItems = elem?.length
   const [checkedItems, setCheckedItems] = useState(new Set(selectedIds))
   const [disabledItems, setDisabledItems] = useState(new Set(disabledIds))
@@ -23,17 +23,14 @@ export const useCheckboxState = (elem, selectedIds = [], disabledIds = [], calBa
   const handleChangeCheck = useCallback((event, id) => {
     const target = event.target
     setCheckedItems(prevState => {
-
       const newState = new Set(prevState)
       if (target.checked) {
         newState.add(id)
       } else {
         newState.delete(id)
       }
-      calBack([...newState])
       return newState
     })
-    // eslint-disable-next-line
   }, [])
 
   const setAll = useCallback(
@@ -109,9 +106,9 @@ export const useCheckboxState = (elem, selectedIds = [], disabledIds = [], calBa
     disabledItems,
     handleChangeCheck,
     toggleAll,
-    setCheckedItems,
     selectAll,
     clearAll,
+    setCheckedItems,
     enableCheckboxes,
     disableCheckboxes
   }