Блог

Я хочу отобразить график общего количества для GroupA и GroupB за каждый месяц.
Библиотека graph использует chart.js Я хочу поместить сумму подсчетов за каждый месяц в data:[].
Я хочу превратить массив значений, извлекаемых из данных, для определения GroupA и GroupB, и поместить количество за каждый месяц в данные

   script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"
  javascript:
    var users = #{raw @user_counts.to_json}
    console.log(users)
    var ct = document.getElementById('ex_chart');
    var ex_chart = new Chart(ct, {
        type: 'horizontalBar',
        data: {
        labels: ["Jan", "Feb", "Mar", "Apr", "May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
          datasets: [
            {
              label: 'groupA',
              data: [],
              backgroundColor: '#C7CED7'
            },
            {
              label: 'groupB',
              data: [],
              backgroundColor: '#0068B4'
            }
          ]
        },
        options: options
    })
 

Содержимое пользователей

 [
  {
    activity_type: "groupA"
    count: 10
    created_at: "2021-01-14T13:46:18.000Z"
    id: 1
    year: 2020
    month: "Jan"
    updated_at: "2021-01-14T13:46:18.000Z"
  },
  {
    activity_type: "groupA"
    count: 8
    created_at: "2021-01-14T13:46:18.000Z"
    id: 2
    year: 2020
    month: "Feb"
    updated_at: "2021-01-14T13:46:18.000Z"

  },
  {
    activity_type: "groupB"
    count: 8
    created_at: "2021-01-14T13:46:18.000Z"
    id: 3
    year: 2020
    month: "Feb"
    updated_at: "2021-01-14T13:46:18.000Z"

  }
]
 

С технической точки зрения, вы хотите сгруппировать количество пользователей по двум параметрам: «activityType» и «месяц».

Ниже приведено решение с использованием функционального программирования. Вы можете изменить keys , например, добавить параметр ‘year’, что на самом деле имеет смысл.

 const users = [
  {
    activity_type: "groupA",
    count: 10,
    year: 2020,
    month: 1
  },
  {
    activity_type: "groupA",
    count: 17,
    year: 2019,
    month: 2,
  },
  {
    activity_type: "groupA",
    count: 8,
    year: 2020,
    month: 2,
  },
  {
    activity_type: "groupB",
    count: 8,
    year: 2020,
    month: 1,
  }
];

const keys = ['activity_type', 'month'];
function matches(table, entry, keys) { // finds item with same values
  return table.find(e => keys.every(k => e[k] == entry[k]));
}
const usersGroupedByKeys = users.reduce((cur, val) => {
  let alreadyIn = matches(cur, val, keys);
  if (alreadyIn) {
    alreadyIn['count'] = alreadyIn['count']   val['count'];
  } else {
    cur.push(val);
  }
  return cur;
}, []);
console.log(usersGroupedByKeys); 

Проверьте документы.