React中如何重组映射数组以适配reaviz图表要求的指定数据结构

实现思路如下：

• 预先定义所有打卡状态枚举，保证三种状态无论是否有统计值都不会缺项
• 双层遍历原始数据的所有打卡记录，按日期维度聚合各状态的出现次数
• 将聚合后的临时对象转换为reaviz要求的数组结构，无统计值的状态默认补0

具体实现代码：

// 定义所有打卡状态枚举，避免字段缺失
const ALL_STATUS = ['Success', 'Fail', 'Skip'];

const transformHabitsData = (habits) => {
  // 初始化临时日期计数映射表
  const dateCountMap = {};

  // 遍历所有习惯的打卡记录统计各状态数量
  habits.forEach(habitItem => {
    habitItem.inputs.forEach(inputItem => {
      const { date, input: status } = inputItem;
      // 日期首次出现时初始化计数对象
      if (!dateCountMap[date]) {
        dateCountMap[date] = ALL_STATUS.reduce((acc, cur) => {
          acc[cur] = 0;
          return acc;
        }, {});
      }
      // 对应状态计数+1
      dateCountMap[date][status] += 1;
    });
  });

  // 转换为reaviz要求的目标结构
  return Object.entries(dateCountMap).map(([dateKey, countObj]) => {
    return {
      key: dateKey,
      data: ALL_STATUS.map(status => ({
        key: status,
        data: countObj[status]
      }))
    };
  });
};

// 调用方法即可得到目标结构数据
const habitsMappedData = transformHabitsData(habits);

注：你给出的目标结构示例中Oct 6th 21对应的Success拼写错误为Sucess，上述代码会统一使用定义的状态枚举值，避免字段不一致的问题。

如果需要保证日期按时间顺序排列，可以在转换完成后增加排序逻辑：

return Object.entries(dateCountMap)
  .map(/* 上述的转换逻辑 */)
  .sort((a, b) => new Date(a.key) - new Date(b.key));

转换后的数据完全匹配你给出的统计结果：

• Oct 5th 21：Success计数2、Fail计数1、Skip计数0
• Oct 6th 21：Success计数0、Fail计数3、Skip计数0
• Oct 7th 21：Success计数0、Fail计数1、Skip计数2

内容的提问来源于stack exchange，提问作者Joshua Pujol