为 React Nivo 条形图转换对象数组

Question

我有以下数据：

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
  }
]

预期输出：

[
  {
    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
  },
]

我想按年份和月份（“YYYY-MM”）对所有 Order_Date 进行分组，并将每个 Order_Date（“YYYY-MM”）的每个区域值的销售额总和") 组。

我需要像 Nivo Bar Chart 数据那样转换数据。但是我无法获得任何有关转换数据的 nivo 文档。

Answer 1

您可以拥有 Order_Date 的动态键并根据此键对您的数据进行分组。您可以总结 Sales 每个区域的重复键值。

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; }

为 React Nivo 条形图转换对象数组

Transform array of Objects for React Nivo Bar Chart

javascript

arrays

javascript-objects

lodash

nivo-react