What is the best way to organize an array of dates and calculate the total value for each day, 1 hour, 6 hours, 8 hours, week, month, and year

Question

What is the best way to organize an array of dates and calculate the total value for each day, 1 hour, 6 hours, 8 hours, week, month, and year

I have an array of dates that I need to group by year, month, week, day, 6 hours, 8 hours, and 1 hour, and then sum the values. Here is an example of the data:

const datesData = [
  { date: "2021-10-17T14:38:45.540Z", value: 2 },
  { date: "2021-09-16T14:36:46.540Z", value: 1 },
  { date: "2021-01-04T14:35:46.540Z", value: 2 },
  // more data...
]

I attempted to group the data using Moment.js and Lodash. You can see my code here.

However, when grouping by year, I faced issues with some years like 2018 and 2016 not being displayed in the result:

 [
  {
    "color": "Blue",
    "value": 6,
    "label": "2021"
  },
  // more results...
]

Here is the expected output for grouping by year:

[
      {
        "color": "Blue",
        "value": 6,
        "label": "2021"
      },
      // additional results including 2018 and 2016
    ]

javascript arrays date momentjs lodash

Answer 1

Answer №1

To achieve this goal, you can utilize a standard 'group-by' approach using reduce, where data is accumulated into an object and then transformed into an array by employing Object.values().

A simple helper function named get_date_parts has been defined to parse the ISO date strings, which works well for basic grouping tasks. For more complex label formats, you can also use a Date object.

The example demonstrates year-based grouping, which can be adapted for other types of grouping with some adjustments for hour ranges.

const data = [{ x: '2021-10-17T14:38:45.540Z', y: 2 }, { x: '2021-09-16T14:36:46.540Z', y: 1 }, { x: '2021-01-04T14:35:46.540Z', y: 2 }, { x: '2021-01-01T14:30:46.540Z', y: 1 }, { x: '2020-02-01T06:28:47.520Z', y: 12 }, { x: '2020-02-01T07:28:47.520Z', y: 12 }, { x: '2019-04-13T10:19:20.034Z', y: 20 }, { x: '2018-01-01T09:09:19.134Z', y: 4 }, { x: '2017-01-01T12:09:19.034Z', y: 11 }, { x: '2016-01-02T12:10:20.034Z', y: 24 },];

function get_date_parts(iso_string) {
  const [year, month, day, hr, min, sec] = iso_string.split(/\D/g);

  return { year, month, day, hr, min, sec };
}

function group_by_year(arr) {
  return Object.values(
    arr.reduce((a, { x: date_string, y: value }) => {
      const { year } = get_date_parts(date_string);
      (a[year] ??= { color: 'Blue?', value: 0, label: year }).value += value;

      return a;
    }, {}),
  );
}

const grouped_by_year = group_by_year(data).sort((a, b) => +b.label - +a.label);

console.log(grouped_by_year);

You can also perform grouping by month, showcasing an alternative method to logical nullish assignment (??=) for initial assignments to a[key].

const data = [{ x: '2021-10-17T14:38:45.540Z', y: 2 }, { x: '2021-09-16T14:36:46.540Z', y: 1 }, { x: '2021-01-04T14:35:46.540Z', y: 2 }, { x: '2021-01-01T14:30:46.540Z', y: 1 }, { x: '2020-02-01T06:28:47.520Z', y: 12 }, { x: '2020-02-01T07:28:47.520Z', y: 12 }, { x: '2019-04-13T10:19:20.034Z', y: 20 }, { x: '2018-01-01T09:09:19.134Z', y: 4 }, { x: '2017-01-01T12:09:19.034Z', y: 11 }, { x: '2016-01-02T12:10:20.034Z', y: 24 },];

function get_date_parts(iso_string) {
  const [year, month, day, hr, min, sec] = iso_string.split(/\D/g);

  return { year, month, day, hr, min, sec };
}

function group_by_month(arr) {
  return Object.values(
    arr.reduce((a, { x: date_string, y: value }) => {
      const { year, month } = get_date_parts(date_string);
      const key = `${year}/${month}`;
      
      // added longhand version for logical nullish assignment
      if (a[key] === undefined) {
        a[key] = { color: 'Blue?', value: 0, label: key };
      }

      a[key].value += value;

      return a;
    }, {}),
  );
}

const grouped_by_month = group_by_month(data).sort((a, b) => b.label.localeCompare(a.label));

console.log(grouped_by_month);

If there are groupings not directly inherent in the dates, simple arithmetic calculations can be utilized.

function get_date_parts(iso_string) {
  const [year, month, day, hr, min, sec] = iso_string.split(/\D/g);

  return { year, month, day, hr, min, sec };
}

const date_string = '2020-02-07T07:28:47.520Z';

const { year, month, day, hr } = get_date_parts(date_string);

// Calculate week within the month
const week = Math.floor((parseInt(day, 10) - 1) / 7);
const week_label = `${year}/${month} - week ${week + 1}`;
console.log({ week_label, week });

// Determine hour range
const range_size = 8;
const range = Math.floor(parseInt(hr, 10) / range_size);
const range_start = `${(range * range_size).toString().padStart(2, '0')}:00`;
const range_end = `${(range * range_size + range_size).toString().padStart(2, '0')}:00`;
const range_label = `${day}/${month}/${year} ${range_start}-${range_end}`;

console.log({ range_label, range });

Answer 2

To achieve this goal, you can utilize a standard 'group-by' approach using reduce, where data is accumulated into an object and then transformed into an array by employing Object.values().

A simple helper function named get_date_parts has been defined to parse the ISO date strings, which works well for basic grouping tasks. For more complex label formats, you can also use a Date object.

The example demonstrates year-based grouping, which can be adapted for other types of grouping with some adjustments for hour ranges.

const data = [{ x: '2021-10-17T14:38:45.540Z', y: 2 }, { x: '2021-09-16T14:36:46.540Z', y: 1 }, { x: '2021-01-04T14:35:46.540Z', y: 2 }, { x: '2021-01-01T14:30:46.540Z', y: 1 }, { x: '2020-02-01T06:28:47.520Z', y: 12 }, { x: '2020-02-01T07:28:47.520Z', y: 12 }, { x: '2019-04-13T10:19:20.034Z', y: 20 }, { x: '2018-01-01T09:09:19.134Z', y: 4 }, { x: '2017-01-01T12:09:19.034Z', y: 11 }, { x: '2016-01-02T12:10:20.034Z', y: 24 },];

function get_date_parts(iso_string) {
  const [year, month, day, hr, min, sec] = iso_string.split(/\D/g);

  return { year, month, day, hr, min, sec };
}

function group_by_year(arr) {
  return Object.values(
    arr.reduce((a, { x: date_string, y: value }) => {
      const { year } = get_date_parts(date_string);
      (a[year] ??= { color: 'Blue?', value: 0, label: year }).value += value;

      return a;
    }, {}),
  );
}

const grouped_by_year = group_by_year(data).sort((a, b) => +b.label - +a.label);

console.log(grouped_by_year);

You can also perform grouping by month, showcasing an alternative method to logical nullish assignment (??=) for initial assignments to a[key].

const data = [{ x: '2021-10-17T14:38:45.540Z', y: 2 }, { x: '2021-09-16T14:36:46.540Z', y: 1 }, { x: '2021-01-04T14:35:46.540Z', y: 2 }, { x: '2021-01-01T14:30:46.540Z', y: 1 }, { x: '2020-02-01T06:28:47.520Z', y: 12 }, { x: '2020-02-01T07:28:47.520Z', y: 12 }, { x: '2019-04-13T10:19:20.034Z', y: 20 }, { x: '2018-01-01T09:09:19.134Z', y: 4 }, { x: '2017-01-01T12:09:19.034Z', y: 11 }, { x: '2016-01-02T12:10:20.034Z', y: 24 },];

function get_date_parts(iso_string) {
  const [year, month, day, hr, min, sec] = iso_string.split(/\D/g);

  return { year, month, day, hr, min, sec };
}

function group_by_month(arr) {
  return Object.values(
    arr.reduce((a, { x: date_string, y: value }) => {
      const { year, month } = get_date_parts(date_string);
      const key = `${year}/${month}`;
      
      // added longhand version for logical nullish assignment
      if (a[key] === undefined) {
        a[key] = { color: 'Blue?', value: 0, label: key };
      }

      a[key].value += value;

      return a;
    }, {}),
  );
}

const grouped_by_month = group_by_month(data).sort((a, b) => b.label.localeCompare(a.label));

console.log(grouped_by_month);

If there are groupings not directly inherent in the dates, simple arithmetic calculations can be utilized.

function get_date_parts(iso_string) {
  const [year, month, day, hr, min, sec] = iso_string.split(/\D/g);

  return { year, month, day, hr, min, sec };
}

const date_string = '2020-02-07T07:28:47.520Z';

const { year, month, day, hr } = get_date_parts(date_string);

// Calculate week within the month
const week = Math.floor((parseInt(day, 10) - 1) / 7);
const week_label = `${year}/${month} - week ${week + 1}`;
console.log({ week_label, week });

// Determine hour range
const range_size = 8;
const range = Math.floor(parseInt(hr, 10) / range_size);
const range_start = `${(range * range_size).toString().padStart(2, '0')}:00`;
const range_end = `${(range * range_size + range_size).toString().padStart(2, '0')}:00`;
const range_label = `${day}/${month}/${year} ${range_start}-${range_end}`;

console.log({ range_label, range });

What is the best way to organize an array of dates and calculate the total value for each day, 1 hour, 6 hours, 8 hours, week, month, and year

Answer №1

Similar questions

Tips for looping through a combined array containing two distinct sets of data in a table

Tips on attaching a suffix icon to a material-ui-pickers input box

Implementing three identical dropdown menus using jQuery and HTML on a single webpage

Changing HTML content using escape characters in jQuery: A step-by-step guide

I'm in the process of designing a Todo list platform, but I've hit a roadblock trying to figure out the best way to showcase and delete tasks

Modify the nested object's two layers using the designated ID

JavaScript function trying to send a POST request to API

A Guide on Using Puppeteer to Extract the Value from an Invisible Input Element

Having various Collada scenes in Three.js animation may not be compatible

Ionic Angular 2 Form Development

Sequence of HTML elements arranged in a stack

Establishing seamless transitions between various interfaces within my application

Encountering issues when attempting to invoke a function from an external file in Angular4

What is an elegant way to showcase a large 2D array in a WPF application, similar to the layout of Excel spreadsheet

`How can I retrieve scope variables from a directive in angular.js?`

Encountering a parsing error while trying to fetch and parse XML using

React not properly updating state variable with setState

The response data from Axios remains undefined even after a successful request

Preserving KendoGrid Selection Status During Navigation Between Pages

Tips for organizing components in jQuery Mobile