Estoy usando chart js, traté de editar las fechas creadas desde mi MongoDB para verificar si representará de acuerdo con el mes dado. Como se muestra en la imagen, la línea no está ordenada de acuerdo con su índice de mes dado.
¿Cómo puedo organizar el gráfico de líneas según el mes creado? ¿La lógica que puse en useEffect es incorrecta?
const Home = () => { const [userStats, setUserStats] = useState([]) const MONTHS = useMemo( () => [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Agu', 'Sep', 'Oct', 'Nov', 'Dec', ], [] ) useEffect(() => { const getStats = async () => { try { const res = await userRequest.get('/user/stats') res.data.map((item) => setUserStats((prev) => [ ...prev, { name: MONTHS[item._id - 1], 'Active User': item.total }, ]) ) } catch {} } getStats() }, [MONTHS]) console.log(userStats) return ( <div className="home"> <Featured /> <Chart data={userStats} title="user Analaytics" grid dataKey="Active User" /> <div className="homeWidgets"> <Widget /> <WidgetLg /> </div> </div> ) } export default Homey cada vez que actualizo la página, la disposición se vuelve aleatoria.
De acuerdo, lo encontré, usé el método de ordenación y agarré la identificación.
const list = res.data.sort((a, b) => { return a._id - b._id }) list.map((item) => setUserStats((prev) => [ ...prev, { name: MONTHS[item._id - 1], 'Active User': item.total }, ])