Sort and transform data based on the specific week intervals within the month

Question

Sort and transform data based on the specific week intervals within the month

I have a set of objects, each containing four properties (id, start, end, and amount).

Using this data, I generate a new set of objects with the following attributes: date, duration, and amount. The date corresponds to the timestamp of the start property, while the duration represents the time difference in minutes between the start and end timestamps.

Next, I define two variables representing the selected month and year. I then filter the date array based on these chosen month and year values. For instance, if month 11 is chosen, only objects with dates from November would be included, and the same applies to the year. This results in a list of days corresponding to the selected month and year.

const arrayOfDates = [
    {
        id: 1,
        start: '2021-12-01T12:10:56+0000',
        end: '2021-12-01T12:00:56+0000',
        amount: 10
    },
    {
        id: 2,
        start: '2021-12-03T11:10:56+0000',
        end: '2021-12-03T12:45:56+0000',
        amount: 4
    },
    {
        id: 3,
        start: '2021-12-07T09:10:56+0000',
        end: '2021-12-07T09:25:56+0000',
        amount: 8
    },
    {
        id: 4,
        start: '2021-11-24T11:10:56+0000',
        end: '2021-11-24T11:25:56+0000',
        amount: 8
    }
]

const selectedMonth = 12
const selectedYear = 2021

const mapped = arrayOfDates.map((el) => ({
    date: new Date(el.start).toLocaleDateString('en-CA'),
    duration: new Date(new Date(el.end).getTime() - new Date(el.start).getTime()).getMinutes(),
    amount: el.amount
}))

const filteredBySelectedDate = mapped.filter((el) => {
    var [year, month] = el.date.split('-')
    return selectedMonth === +month && selectedYear === +year;
})

const mappedByDays = filteredBySelectedDate

In addition to displaying elements by day as currently done, I intend to enhance the filteredBySelectedDate array by grouping entries into weeks within the month. This means creating an array structure like:

const mappedByWeeks = [
    {
        interval: '12/01 - 12/04',
        duration: 85,
        amount: 14
    },
    {
        interval: '12/05 - 12/11',
        duration: 15,
        amount: 8
    }
]

javascript arrays typescript javascript-objects

Answer 1

Answer №1

To achieve this goal, follow these steps: Firstly, establish the known start and end days for each week of the month using weekTransitionDays. Secondly, identify the week to which an entry belongs with getWeekIndex. Lastly, combine entries for the same week with groupByWeek.

Edit

Included a utility function for generating interval text.

const arrayOfDates = [{
    id: 1,
    start: '2021-12-01T12:10:56+0000',
    end: '2021-12-01T12:00:56+0000',
    amount: 10
  },
  {
    id: 2,
    start: '2021-12-03T11:10:56+0000',
    end: '2021-12-03T12:45:56+0000',
    amount: 4
  },
  {
    id: 3,
    start: '2021-12-07T09:10:56+0000',
    end: '2021-12-07T09:25:56+0000',
    amount: 8
  },
  {
    id: 4,
    start: '2021-11-24T11:10:56+0000',
    end: '2021-11-24T11:25:56+0000',
    amount: 8
  }
];

const selectedMonth = 12;
const selectedYear = 2021;

const weekTransitionDays = [];
const firstDayOfMonth = (new Date(selectedYear, selectedMonth - 1, 1)).getDay();
const daysInMonth = (new Date(selectedYear, selectedMonth, 0)).getDate();

const getInterval = (start, end) => {
  if (start < 10) {
    start = "0" + start;
  }
  if (end < 10) {
    end = "0" + end;
  }
  start = selectedMonth + "/" + start;
  end = selectedMonth + "/" + end;
  return start + ' - ' + end;
};

let start = 1;
if (firstDayOfMonth !== 0) {
  let end = start + 6 - firstDayOfMonth;
  const interval = getInterval(start, end);
  weekTransitionDays.push({
    start,
    end,
    interval
  });
  start = end;
}

while (start < daysInMonth) {
  let end;
  if (start + 1 < daysInMonth) {
    start++;
  } else {
    break;
  }
  if (start + 6 < daysInMonth) {
    end = start + 6;
  } else {
    break;
  }
  const interval = getInterval(start, end);
  weekTransitionDays.push({
    start,
    end,
    interval
  });
  start = end;
}

if (weekTransitionDays.at(-1).end !== daysInMonth) {
  const end = daysInMonth;
  const interval = getInterval(start, end);
  weekTransitionDays.push({
    start,
    end,
    interval
  });
}

const getWeekIndex = entry => {
  const entryStart = new Date(entry.start).getDate();
  for (let i = 0; i < weekTransitionDays.length; i++) {
    if (weekTransitionDays[i].start <= entryStart && entryStart <= weekTransitionDays[i].end) {
      return i;
    }
  }
  // Raise error if start date doesn't match transition days
  throw new Error("entry.start mismatch with transition days: \n" + JSON.stringify(entry) + "\n" + JSON.stringify(weekTransitionDays));
};

const mapped = arrayOfDates.map((el) => ({
  date: new Date(el.start).toLocaleDateString('en-CA'),
  duration: new Date(new Date(el.end).getTime() - new Date(el.start).getTime()).getMinutes(),
  weekIndex: getWeekIndex(el),
  amount: el.amount
}));

const filteredBySelectedDate = mapped.filter((el) => {
  var [year, month] = el.date.split('-');
  return selectedMonth === +month && selectedYear === +year;
});

const groupByWeek = () => {
  const obj = {};
  filteredBySelectedDate.forEach(entry => {
    if (!obj.hasOwnProperty(entry.weekIndex)) {
      obj[entry.weekIndex] = {
        interval: weekTransitionDays[entry.weekIndex].interval,
        duration: 0,
        amount: 0
      };
    }
    obj[entry.weekIndex].duration += entry.duration;
    obj[entry.weekIndex].amount += entry.amount;
  });
  return Object.values(obj);
};

const mappedByDays = filteredBySelectedDate;
const groupedByWeek = groupByWeek(mapped);

console.log(groupedByWeek);

Answer 2

To achieve this goal, follow these steps: Firstly, establish the known start and end days for each week of the month using weekTransitionDays. Secondly, identify the week to which an entry belongs with getWeekIndex. Lastly, combine entries for the same week with groupByWeek.

Edit

Included a utility function for generating interval text.

const arrayOfDates = [{
    id: 1,
    start: '2021-12-01T12:10:56+0000',
    end: '2021-12-01T12:00:56+0000',
    amount: 10
  },
  {
    id: 2,
    start: '2021-12-03T11:10:56+0000',
    end: '2021-12-03T12:45:56+0000',
    amount: 4
  },
  {
    id: 3,
    start: '2021-12-07T09:10:56+0000',
    end: '2021-12-07T09:25:56+0000',
    amount: 8
  },
  {
    id: 4,
    start: '2021-11-24T11:10:56+0000',
    end: '2021-11-24T11:25:56+0000',
    amount: 8
  }
];

const selectedMonth = 12;
const selectedYear = 2021;

const weekTransitionDays = [];
const firstDayOfMonth = (new Date(selectedYear, selectedMonth - 1, 1)).getDay();
const daysInMonth = (new Date(selectedYear, selectedMonth, 0)).getDate();

const getInterval = (start, end) => {
  if (start < 10) {
    start = "0" + start;
  }
  if (end < 10) {
    end = "0" + end;
  }
  start = selectedMonth + "/" + start;
  end = selectedMonth + "/" + end;
  return start + ' - ' + end;
};

let start = 1;
if (firstDayOfMonth !== 0) {
  let end = start + 6 - firstDayOfMonth;
  const interval = getInterval(start, end);
  weekTransitionDays.push({
    start,
    end,
    interval
  });
  start = end;
}

while (start < daysInMonth) {
  let end;
  if (start + 1 < daysInMonth) {
    start++;
  } else {
    break;
  }
  if (start + 6 < daysInMonth) {
    end = start + 6;
  } else {
    break;
  }
  const interval = getInterval(start, end);
  weekTransitionDays.push({
    start,
    end,
    interval
  });
  start = end;
}

if (weekTransitionDays.at(-1).end !== daysInMonth) {
  const end = daysInMonth;
  const interval = getInterval(start, end);
  weekTransitionDays.push({
    start,
    end,
    interval
  });
}

const getWeekIndex = entry => {
  const entryStart = new Date(entry.start).getDate();
  for (let i = 0; i < weekTransitionDays.length; i++) {
    if (weekTransitionDays[i].start <= entryStart && entryStart <= weekTransitionDays[i].end) {
      return i;
    }
  }
  // Raise error if start date doesn't match transition days
  throw new Error("entry.start mismatch with transition days: \n" + JSON.stringify(entry) + "\n" + JSON.stringify(weekTransitionDays));
};

const mapped = arrayOfDates.map((el) => ({
  date: new Date(el.start).toLocaleDateString('en-CA'),
  duration: new Date(new Date(el.end).getTime() - new Date(el.start).getTime()).getMinutes(),
  weekIndex: getWeekIndex(el),
  amount: el.amount
}));

const filteredBySelectedDate = mapped.filter((el) => {
  var [year, month] = el.date.split('-');
  return selectedMonth === +month && selectedYear === +year;
});

const groupByWeek = () => {
  const obj = {};
  filteredBySelectedDate.forEach(entry => {
    if (!obj.hasOwnProperty(entry.weekIndex)) {
      obj[entry.weekIndex] = {
        interval: weekTransitionDays[entry.weekIndex].interval,
        duration: 0,
        amount: 0
      };
    }
    obj[entry.weekIndex].duration += entry.duration;
    obj[entry.weekIndex].amount += entry.amount;
  });
  return Object.values(obj);
};

const mappedByDays = filteredBySelectedDate;
const groupedByWeek = groupByWeek(mapped);

console.log(groupedByWeek);

Sort and transform data based on the specific week intervals within the month

Answer №1

Similar questions

How to locate the index of a specific item or multiple items within a JsonArray?

I am in search of a specialized 3D camera with a unique effect

Display a jQuery alert when an AJAX post request exceeds its timeout limit

Showing an individual image when a particular list item is clicked using jquery

Blur images on parent div when hovering using javascript

Utilizing ES6 Functions to Transform Objects into Arrays

Experiencing excessive CPU usage while utilizing a progress bar in Angular

Accessing the parent scope from a directive within a nested ng-repeat in AngularJs

The angular-block-ui feature fails to run my HTML code as a personalized message

Issue with the stack: unable to add a few characters to the array

Tips for creating unique names for JSON data modification functions

What is the best method for replacing the current page in an Ionic app?

Array - Modifications do not pass down to the child component

Static files compiled from Django 2 and Angular 6 consistently redirect to the static directory

What causes async / await function to be executed twice?

A peculiar issue is occurring in Vue.js where a value within a v-for loop seems to be losing association with the intended array

Combining Angular subscriptions to fetch multiple data streams

Displaying a single array alongside another in a single communication

Modify the color of the components in Select from Material-UI

What steps should I take to troubleshoot and resolve this PHP, AJAX, and JavaScript dilemma