Estoy usando un reaviz que es una herramienta de gráficos para React. Estoy creando una aplicación de seguimiento de hábitos y quiero mostrar visualmente los datos en un gráfico de barras de serie para la última semana de entradas del usuario. Tengo mis datos de mi base de datos en una estructura como esta:
habits = [ { habit: "Cook Dinner", inputs: [ { input: 'Success', date: 'Oct 5th 21' }, { input: 'Fail', date: 'Oct 6th 21' }, { input: 'Skip', date: 'Oct 7th 21' }] }, { habit: "Clean House", inputs: [ { input: 'Fail', date: 'Oct 5th 21' }, { input: 'Fail', date: 'Oct 6th 21' }, { input: 'Fail', date: 'Oct 7th 21' }] }, { habit: "Cook Dinner", inputs: [ { input: 'Success', date: 'Oct 5th 21' }, { input: 'Fail', date: 'Oct 6th 21' }, { input: 'Skip', date: 'Oct 7th 21' }] }]Entonces, ahora me gustaría encontrar una forma de asignar mis datos a la estructura de datos que necesito para el gráfico, por ejemplo, la salida sería algo como esto para los datos anteriores. Necesitaré contar cuántas entradas caen ese día para éxito, falla u omisión:
habitsMappedData = [ { key: 'Oct 5th 21', data: [ { key: 'Success', data: 2 }, { key: 'Fail', data: 1 }, { key: 'Skip', data: 0 } ] }, { key: 'Oct 6th 21', data: [ { key: 'Sucess', data: 0 }, { key: 'Fail', data: 3 }, { key: 'Skip', data: 0 } ] }, { key: 'Oct 7th 21', data: [ { key: 'Success', data: 0 }, { key: 'Fail', data: 1 }, { key: 'Skip', data: 2 } ] }, ]Realmente aprecio que eches un vistazo a esto. Si se requiere alguna aclaración, por favor hágamelo saber.
Esto es realmente solo una operación de 'agrupar por' por fecha, pero debido a las matrices anidadas es un poco más complicada.
El siguiente fragmento usa una llamada reduce() para acumular en un objeto usando la date como propiedad de agrupación y sumando usando input como propiedad secundaria. Para volver a convertir el objeto resultante en una matriz de objetos anidados, llama a Array.from() en Object.entries() del objeto devuelto y asigna las propiedades key y data utilizando el map proporcionado como segundo parámetro de Array.from() . Los objetos data anidados se generan utilizando una llamada map() final.
const habits = [ { habit: 'Cook Dinner', inputs: [ { input: 'Success', date: 'Oct 5th 21', }, { input: 'Fail', date: 'Oct 6th 21', }, { input: 'Skip', date: 'Oct 7th 21', }, ], }, { habit: 'Clean House', inputs: [ { input: 'Fail', date: 'Oct 5th 21', }, { input: 'Fail', date: 'Oct 6th 21', }, { input: 'Fail', date: 'Oct 7th 21', }, ], }, { habit: 'Cook Dinner', inputs: [ { input: 'Success', date: 'Oct 5th 21', }, { input: 'Fail', date: 'Oct 6th 21', }, { input: 'Skip', date: 'Oct 7th 21', }, ], }, ]; const habitsMappedData = Array.from( Object.entries( habits.reduce((a, { inputs }) => { for (const { date, input } of inputs) { (a[date] ??= { Success: 0, Fail: 0, Skip: 0 })[input] += 1; } return a; }, {}) ), ([key, _data]) => ({ key, data: Object.entries(_data).map(([key, data]) => ({ key, data })), }) ); console.log(habitsMappedData); .as-console-wrapper { max-height: 100% !important; top: 0; } Nota: lo anterior se basa en el operador de asignación nulo lógico (??=) que se puede reemplazar con un cortocircuito OR si es necesario para la compatibilidad.
for (const { date, input } of inputs) { (a[date] || (a[date] = { Success: 0, Fail: 0, Skip: 0 }))[input] += 1; } o escrito explícitamente en un if
for (const { date, input } of inputs) { if (a[date] === undefined) { a[date] = { Success: 0, Fail: 0, Skip: 0 }; } a[date][input] += 1; }