calculate the monthly total

Question

I have created a table with weekly count and monthly count and created table.I want to calculate the total and display it in yearly column. strucked with getting yearly total need to display 2,1,3,2,1,3 in yearly

const response=[{"UserName":"user1","month":"May","Type":"Type3","Week1":2,"Week3":3},
          {"UserName":"user2","month":"May","Type":"Type3","Week1":2},
          {"UserName":"user1","month":"May","Type":"Type1","Week2":1},
          {"UserName":"user2","month":"May","Type":"Type1","Week2":1,},
          {"UserName":"user1","month":"Jun","Type":"Type1","Week2":1},
          {"UserName":"user2","month":"Jun","Type":"Type1","Week2":1},
          {"UserName":"user1","month":"Jun","Type":"Type2","Week1":1},
          {"UserName":"user2","month":"Jun","Type":"Type2","Week1":1},
          {"UserName":"user1","month":"Jul","Type":"Type2","Week3":1},
          {"UserName":"user1","month":"Jul","Type":"Type2","Week1":1},
         ];
         
        
        const weeksByMonth = [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ]
        .map(m => {
          const byMonth = response.filter(x => x.month.substring(0, 3) == m);
          if (byMonth.length)
            return {
              month: m,
              weeks: [1, 2, 3, 4, 5].filter(w =>
                byMonth.find(x => "Week" + w in x)
              )
            };
        })
        .filter(m => m);
      const monthWeeks = weeksByMonth.reduce(
        (w, m) => w.concat(m.weeks.map(w => "Week" + w).concat("Total")),
        []
      );
      const users = response.reduce((u, x) => {
        if (!(x.UserName in u)) u[x.UserName] = {};
        const user = u[x.UserName];
        if (!(x.Type in user)) user[x.Type] = {};
        const { UserName, Type, month, ...weeks } = x;
        user[x.Type][x.month.substring(0, 3)] = weeks;
        return u;
      }, {});
      $("#geo_summary thead")
        .find("tr")
        .append($("<td>"))
        .append($("<td>"))
        .append(
          weeksByMonth.map(m =>
            $("<td>")
              .text(m.month)
              .attr("colspan", m.weeks.length + 1)
              .css("text-align", "center")
          )
        )
        .after(
          $("<tr>")
            .append($("<td>").text(Object.keys(users)[0]))
            .append($("<td>").text('Yearly'))
            .append(monthWeeks.map(w => $("<td>").text(w)))
        );
      $("#geo_summary tbody").append(
        Object.keys(users).reduce((r, u, i) => {
          if (i)
            r.push(
              $("<tr>")
                .append($("<td>").text(u))
                .append(new Array(monthWeeks.length).map(n => $("<td>")))
            );
          const types = users[u];
          return r.concat(
            Object.keys(types)
              .sort()
              .map(t =>
                $("<tr>")
                  .append($("<td>").text(t))
                   .append($("<td>").text('total+total')) //
                  .append(
                    weeksByMonth
                      .reduce((w, m) => {
                        const month = types[t][m.month] || {};
                        return w.concat(
                          m.weeks
                            .map(w => month["Week" + w])
                            .concat(
                              Object.keys(month).reduce(
                                (t, w) => t + month[w],
                                0
                              ) || "0"
                            )
                        );
                      }, [])
                      .map(t => $("<td>").text(t))
                  )
              )
          );
        }, [])
      );

table{border-collapse:collapse}td{border:1px solid #000;padding:.5em}.as-console-wrapper { max-height: 100% !important; top: 0; }

 <table id="geo_summary" class="basic-table"> <thead><tr></tr> </thead> <tbody> </tbody></table>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

const response = [
    {"UserName": "user1", "month": "May", "Type": "Type3", "Week1": 2, "Week3": 3},
    {"UserName": "user2", "month": "May", "Type": "Type3", "Week1": 2},
    {"UserName": "user1", "month": "May", "Type": "Type1", "Week2": 1},
    {"UserName": "user2", "month": "May", "Type": "Type1", "Week2": 1},
    {"UserName": "user1", "month": "Jun", "Type": "Type1", "Week2": 1},
    {"UserName": "user2", "month": "Jun", "Type": "Type1", "Week2": 1},
    {"UserName": "user1", "month": "Jun", "Type": "Type2", "Week1": 1},
    {"UserName": "user2", "month": "Jun", "Type": "Type2", "Week1": 1},
    {"UserName": "user1", "month": "Jul", "Type": "Type2", "Week3": 1},
    {"UserName": "user1", "month": "Jul", "Type": "Type2", "Week1": 1},
 ];            
const weeksByMonth = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"].map(m => {
    const byMonth = response.filter(x => x.month.substring(0, 3) == m);
    if (byMonth.length)
        return {
            month: m,
            weeks: [1, 2, 3, 4, 5].filter(w => byMonth.find(x => "Week" + w in x))
        };
}).filter(m => m);
const monthWeeks = weeksByMonth.reduce((w, m) => w.concat(m.weeks.map(w => "Week" + w).concat("Total")), []);
const users = response.reduce((u, x) => {
    if (!(x.UserName in u))
        u[x.UserName] = {};
    const user = u[x.UserName];
    if (!(x.Type in user))
        user[x.Type] = {};
    const {UserName, Type, month, ...weeks} = x;
    user[x.Type][x.month.substring(0, 3)] = weeks;
    return u;
}, {});
$("#geo_summary thead").find("tr")
    .append($("<td>"))
    .append($("<td>"))
    .append(weeksByMonth.map(m => $("<td>").text(m.month).attr("colspan", m.weeks.length + 1).css("text-align", "center")))
    .after($("<tr>")
        .append($("<td>").text(Object.keys(users)[0]))
        .append($("<td>").text("Yearly"))
        .append(monthWeeks.map(w => $("<td>").text(w))));
$("#geo_summary tbody").append(
    Object.keys(users).reduce((r, u, i) => {
        if(i)
            r.push($("<tr>")
                .append($("<td>").text(u))
                .append(monthWeeks.map(w => $("<td>")))
            );
        const types = users[u];
        return r.concat(Object.keys(types).sort().map(t => $("<tr>")
            .append($("<td>").text(t))
            .append($("<td>").text(Object.keys(types[t])
                .reduce((y, m) => y + Object.keys(types[t][m] || {})
                    .reduce((y, w) => y + types[t][m][w], 0), 0)))
            .append(weeksByMonth
                .reduce((w, m) => {
                    const month = types[t][m.month] || {};
                    return w.concat(m.weeks.map(w => month["Week" + w] || 0)
                        .concat(Object.keys(month).reduce((t, w) => t + month[w], 0)));
                }, [])
                .map(t => $("<td>").text(t))
            )
        ));
    }, [])
);

table{border-collapse:collapse}td{border:1px solid #000;padding:.5em}.as-console-wrapper { max-height: 100% !important; top: 0; }

<table id="geo_summary" class="basic-table"><thead><tr></tr></thead><tbody></tbody></table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>