Transform object array to another object array summarizing some components to plot a chart with plotly

Question

I need to transform an object array with data in another object array in order to plot a chart with the library Plotly.

This is the input format:

var input = [
    {
        "COUNT_DEVICES": 48,
        "PRODUCT_ID": "16054",
        "TIME_OFFLINE": "7 days"
    },
    {
        "COUNT_DEVICES": 25,
        "PRODUCT_ID": "10485",
        "TIME_OFFLINE": "7 days"
    },
    {
        "COUNT_DEVICES": 73,
        "PRODUCT_ID": "16054",
        "TIME_OFFLINE": "15 days"
    },
    {
        "COUNT_DEVICES": 57,
        "PRODUCT_ID": "10485",
        "TIME_OFFLINE": "15 days"
    },
    {
        "COUNT_DEVICES": 3,
        "PRODUCT_ID": "16756",
        "TIME_OFFLINE": "15 days"
    },
    {
        "COUNT_DEVICES": 91,
        "PRODUCT_ID": "16054",
        "TIME_OFFLINE": "30 days"
    },
    {
        "COUNT_DEVICES": 69,
        "PRODUCT_ID": "10485",
        "TIME_OFFLINE": "30 days"
    },
    {
        "COUNT_DEVICES": 139,
        "PRODUCT_ID": "16054",
        "TIME_OFFLINE": "60 days"
    },
    {
        "COUNT_DEVICES": 99,
        "PRODUCT_ID": "10485",
        "TIME_OFFLINE": "60 days"
    },
    {
        "COUNT_DEVICES": 280,
        "PRODUCT_ID": "16054",
        "TIME_OFFLINE": "90 days"
    },
    {
        "COUNT_DEVICES": 262,
        "PRODUCT_ID": "10485",
        "TIME_OFFLINE": "90 days"
    },
    {
        "COUNT_DEVICES": 61,
        "PRODUCT_ID": "16054",
        "TIME_OFFLINE": "180 days"
    },
    {
        "COUNT_DEVICES": 323,
        "PRODUCT_ID": "10485",
        "TIME_OFFLINE": "180 days"
    },
    {
        "COUNT_DEVICES": 3181,
        "PRODUCT_ID": "16054",
        "TIME_OFFLINE": "360 days"
    },
    {
        "COUNT_DEVICES": 384,
        "PRODUCT_ID": "10485",
        "TIME_OFFLINE": "360 days"
    },
    {
        "COUNT_DEVICES": 1,
        "PRODUCT_ID": "3073",
        "TIME_OFFLINE": "360 days"
    }
]

And this is the output format:

output = [
    {
        x: ["16054","10485", "3073"],
        y: [3181,384,1],
        name: "360 days"
        type: 'bar'
    },
    {
        x: ["16054","10485"],
        y: [661,323],
        name: "180 days"
        type: 'bar'
    },
    {
        x: ["16054","10485"],
        y: [280,262],
        name: "90 days"
        type: 'bar'
    },
    {
        x: ["16054","10485"],
        y: [139,99],
        name: "60 days"
        type: 'bar'
    },
    {
        x: ["16054","10485"],
        y: [91,69],
        name: "30 days"
        type: 'bar'
    },
    {
        x: ["16054","10485","16756"],
        y: [73,57,3],
        name: "15 days"
        type: 'bar'
    }            
]

So I am looking to encapsulate this as a generical function:

function( input, x_label, y_label, name_label)

and this case it will be:

function(input, 'PRODUCT_ID', 'COUNT_DEVICES', 'TIME_OFFLINE')

It will be the base to take the input data to general charts as bar charts or others kind of plots

James · Accepted Answer · 2022-09-01 20:11:07Z

All group by questions are basically the same. You loop through the array, if an element should be in a new group you create that group and add the output shape to it, and then you populate the group's members with the data from the array element.

The standard tools to use for this are Array.reduce, and then if you want an array as output instead of the object, wrap it in Object.values.

var input = [
    {
        "COUNT_DEVICES": 48,
        "PRODUCT_ID": "16054",
        "TIME_OFFLINE": "7 days"
    },
    {
        "COUNT_DEVICES": 25,
        "PRODUCT_ID": "10485",
        "TIME_OFFLINE": "7 days"
    },
    {
        "COUNT_DEVICES": 73,
        "PRODUCT_ID": "16054",
        "TIME_OFFLINE": "15 days"
    },
    {
        "COUNT_DEVICES": 57,
        "PRODUCT_ID": "10485",
        "TIME_OFFLINE": "15 days"
    },
    {
        "COUNT_DEVICES": 3,
        "PRODUCT_ID": "16756",
        "TIME_OFFLINE": "15 days"
    },
    {
        "COUNT_DEVICES": 91,
        "PRODUCT_ID": "16054",
        "TIME_OFFLINE": "30 days"
    },
    {
        "COUNT_DEVICES": 69,
        "PRODUCT_ID": "10485",
        "TIME_OFFLINE": "30 days"
    },
    {
        "COUNT_DEVICES": 139,
        "PRODUCT_ID": "16054",
        "TIME_OFFLINE": "60 days"
    },
    {
        "COUNT_DEVICES": 99,
        "PRODUCT_ID": "10485",
        "TIME_OFFLINE": "60 days"
    },
    {
        "COUNT_DEVICES": 280,
        "PRODUCT_ID": "16054",
        "TIME_OFFLINE": "90 days"
    },
    {
        "COUNT_DEVICES": 262,
        "PRODUCT_ID": "10485",
        "TIME_OFFLINE": "90 days"
    },
    {
        "COUNT_DEVICES": 61,
        "PRODUCT_ID": "16054",
        "TIME_OFFLINE": "180 days"
    },
    {
        "COUNT_DEVICES": 323,
        "PRODUCT_ID": "10485",
        "TIME_OFFLINE": "180 days"
    },
    {
        "COUNT_DEVICES": 3181,
        "PRODUCT_ID": "16054",
        "TIME_OFFLINE": "360 days"
    },
    {
        "COUNT_DEVICES": 384,
        "PRODUCT_ID": "10485",
        "TIME_OFFLINE": "360 days"
    },
    {
        "COUNT_DEVICES": 1,
        "PRODUCT_ID": "3073",
        "TIME_OFFLINE": "360 days"
    }
];

const convert = (input, xLabel, yLabel, name) => {
  return Object.values(input.reduce((acc, el) => {
    let k = el[name]; // k is the key for the group that this element belongs to
    if (!acc[k]) acc[k] = {x: [], y: [], name: k, type: 'bar'}; // if the group doesnt exist, create it according to the output shape
    acc[k].x.push(el[xLabel]); // put the data from el into this group's x and y properties
    acc[k].y.push(el[yLabel]);
    return acc;
  }, {}));
}

console.log(convert(input, 'PRODUCT_ID', 'COUNT_DEVICES', 'TIME_OFFLINE'));

Collectives™ on Stack Overflow

Transform object array to another object array summarizing some components to plot a chart with plotly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related