Transform array of Objects for React Nivo Bar Chart

Question

I have the following data:

const rawData=[
  {
    Order_Date: "2020-08-11",
    Region: "South",
    Product_Name: "Bookcase",
    Sales: 261.96
  },
  {
    Order_Date: "2020-08-13",
    Region: "South",
    Product_Name: "Stacking Chairs",
    Sales: 731.94
  },
 {
    Order_Date: "2020-08-11",
    Region: "Central",
    Product_Name: "Table",
    Sales: 200
  },
  {
    Order_Date: "2020-08-11",
    Region: "East",
    Product_Name: "Chairs",
    Sales: 350
  },
  {
    Order_Date: "2020-10-06",
    Region: "South",
    Product_Name: "Stacking Chairs",
    Sales: 700.45
  },
 {
    Order_Date: "2020-10-06",
    Region: "Central",
    Product_Name: "Chairs",
    Sales: 500
  },
  {
    Order_Date: "2020-12-06",
    Region: "East",
    Product_Name: "Self-Adhesive Address Labels for Typewriters by Universal",
    Sales: 14.62
  },
  {
    Order_Date: "2019-11-15",
    Region: "East",
    Product_Name: "Table",
    Sales: 957
  },
  {
    Order_Date: "2019-11-10",
    Region: "East",
    Product_Name: "Eldon Fold",
    Sales: 22
  }
]

Expected Output:

[
  {
    Order_Date: "2020-08",
    East: 350,
    South: 993.90,
    Central: 200
  },
  {
    Order_Date: "2020-10",
    East: 0,
    South: 700.45,
    Central: 500
  },
  {
    Order_Date: "2019-11",
    East: 989,
    South: 0,
    Central: 0
  },
  {
    Order_Date: "2020-12",
    East: 14.62,
    South: 0,
    Central: 0
  },
]

Where I want to group all the Order_Date by Year and Month ("YYYY-MM") and put the sum of Sales for each Region value for each Order_Date ("YYYY-MM") group.

I need the data to be transformed like Nivo Bar Chart data. But I couldn't get any nivo documentation about transforming data.

How should the output be when you have multiple region for same `Order_Date`? — Hassan Imam, Sep 01 '21 at 18:57

Hassan Imam · Accepted Answer · 2021-09-02T04:42:49.573

You can have dynamic key of Order_Date and group your data based on this key. You can sum up Sales value for each region for repeating keys.

const rawData=[ { Order_Date: "2020-08-11", Region: "South", Product_Name: "Bookcase", Sales: 261.96 }, { Order_Date: "2020-08-13", Region: "South", Product_Name: "Stacking Chairs", Sales: 731.94 }, { Order_Date: "2020-08-11", Region: "Central", Product_Name: "Table", Sales: 200 }, { Order_Date: "2020-08-11", Region: "East", Product_Name: "Chairs", Sales: 350 }, { Order_Date: "2020-10-06", Region: "South", Product_Name: "Stacking Chairs", Sales: 700.45 }, { Order_Date: "2020-10-06", Region: "Central", Product_Name:"Chairs", Sales: 500 }, { Order_Date: "2020-12-06", Region: "East", Product_Name: "Self-Adhesive Address Labels for Typewriters by Universal", Sales: 14.62 }, { Order_Date: "2019-11-15", Region: "East", Product_Name: "Table", Sales: 957 }, { Order_Date:"2019-11-10", Region: "East", Product_Name: "Eldon Fold", Sales: 22 } ],
      result = Object.values(rawData.reduce((r, {Order_Date, Region, Sales}) => {
        const date = Order_Date.substr(0, 7);
        r[date] ??= {Order_Date: date, East: 0, South: 0, Central: 0};
        r[date][Region] += Sales;
        return r;
      }, {}));
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Thanks for the answer. Sorry, I have updated the questions, expected output would be for each region. — faisal-akbar, Sep 01 '21 at 21:02

Transform array of Objects for React Nivo Bar Chart

1 Answers1