Как преобразовать массив в JS в этот формат

Question

У меня есть этот ряд JS массив данных (для диаграммы, которая нуждается в категории и серии), как я могу преобразовать ее во 2-й формат, приведенный ниже.

            series: [{
            name: 'Bikes',
            data: [16240314.115]
        }, {
            name: 'Bikes',
            data: [9520869.049]
        }, {
            name: 'Bikes',
            data: [27832356.658]
        }, {
            name: 'Bikes',
            data: [532399.178]
        }, {
            name: 'Clothing',
            data: [1598657.794]
        }, {
            name: 'Clothing',
            data: [135523.664]
        }, {
            name: 'Accessories',
            data: [4347678.462]
        }, {
            name: 'Accessories',
            data: [376470.596]
         }]

Категория

                xaxis: {
            categories: ['2011', '2012', '2013', '2014', ' 2013', '2014', '2013', '2014'],
        }

(где каждая пара (имя, данные) в серии соответствует году в категориях соответственно, поэтому 3 пары (велосипед, данные) соответствуют 3 разным годам.) В этот

 series: [{
            name: 'Bikes',
            data: [16240314.115, 9520869.049, 27832356.658, 532399.178]
        }, {
            name: 'Clothing',
            data: [NaN, NaN, 1598657.794, 135523.664]
        }, {
            name: 'Accessories',
            data: [NaN, NaN, 4347678.462, 376470.596],
        }]

Есть ли способ получить этот вывод JS массив? Мне нужно сгруппировать дубликаты вместе и не дублировать.

Исходные данные, возвращаемые из моего webapi, приведены ниже:

            {
            salesByRegQuery: [
                {
                    ProductCategoryKey: 1,
                    EnglishProductCategoryName: "Bikes",
                    SalesTerritoryKey: 6,
                    SalesTerritoryRegion: "Canada",
                    CalendarYear: 2011,
                    Total_Sales: 40806355.42,
                    Total_cost: 24566041.305,
                    Total_Margin: 16240314.115
                },
                {
                    ProductCategoryKey: 1,
                    EnglishProductCategoryName: "Bikes",
                    SalesTerritoryKey: 6,
                    SalesTerritoryRegion: "Canada",
                    CalendarYear: 2012,
                    Total_Sales: 23146211.771,
                    Total_cost: 13625342.722,
                    Total_Margin: 9520869.049
                },
                {
                    ProductCategoryKey: 1,
                    EnglishProductCategoryName: "Bikes",
                    SalesTerritoryKey: 6,
                    SalesTerritoryRegion: "Canada",
                    CalendarYear: 2013,
                    Total_Sales: 67753756.318,
                    Total_cost: 39921399.66,
                    Total_Margin: 27832356.658
                },
                {
                    ProductCategoryKey: 1,
                    EnglishProductCategoryName: "Bikes",
                    SalesTerritoryKey: 6,
                    SalesTerritoryRegion: "Canada",
                    CalendarYear: 2014,
                    Total_Sales: 1248751.14,
                    Total_cost: 716351.962,
                    Total_Margin: 532399.178
                },
                {
                    ProductCategoryKey: 3,
                    EnglishProductCategoryName: "Clothing",
                    SalesTerritoryKey: 6,
                    SalesTerritoryRegion: "Canada",
                    CalendarYear: 2013,
                    Total_Sales: 3573393.8,
                    Total_cost: 1974736.006,
                    Total_Margin: 1598657.794
                },
                {
                    ProductCategoryKey: 3,
                    EnglishProductCategoryName: "Clothing",
                    SalesTerritoryKey: 6,
                    SalesTerritoryRegion: "Canada",
                    CalendarYear: 2014,
                    Total_Sales: 307623.46,
                    Total_cost: 172099.796,
                    Total_Margin: 135523.664
                },
                {
                    ProductCategoryKey: 4,
                    EnglishProductCategoryName: "Accessories",
                    SalesTerritoryKey: 6,
                    SalesTerritoryRegion: "Canada",
                    CalendarYear: 2013,
                    Total_Sales: 6945190.8,
                    Total_cost: 2597512.338,
                    Total_Margin: 4347678.462
                },
                {
                    ProductCategoryKey: 4,
                    EnglishProductCategoryName: "Accessories",
                    SalesTerritoryKey: 6,
                    SalesTerritoryRegion: "Canada",
                    CalendarYear: 2014,
                    Total_Sales: 601392.25,
                    Total_cost: 224921.654,
                    Total_Margin: 376470.596
                }
            ]
        };

И из этого JSON я взял ряды (EnglishProductCategoryName как «имя», Total_Margin как «данные») и данные категории (CalendarYear). Итак, у меня пока есть данные в этом формате

series: [{
            name: 'Bikes',
            data: [16240314.115]
        }, {
            name: 'Bikes',
            data: [9520869.049]
        }, {
            name: 'Bikes',
            data: [27832356.658]
        }, {
            name: 'Bikes',
            data: [532399.178]
        }, {
            name: 'Clothing',
            data: [1598657.794]
        }, {
            name: 'Clothing',
            data: [135523.664]
        }, {
            name: 'Accessories',
            data: [4347678.462]
        }, {
            name: 'Accessories',
            data: [376470.596]
         }]

И для данных категории мне просто нужен уникальный массив для источника категории для диаграммы, что просто. Я застрял с частью серии. Кодовая ручка здесь, и я жестко закодировал серию и категорию здесь в кодовой ручке

CodePen Для диаграммы

Для каждого дублированного имени сгруппируйте их значения и возьмите массив данных максимального размера с повторяющимся именем и создайте новый массив того же размера для неповторного имени и заполните NaN для года, для которого не существует данных для этого неповторяющегося имени

Answer 1

Вы можете получить годы в Advynce, отсортировать их и использовать этот массив в качестве шаблона для получения массивов NaN значения в качестве начального data свойства и использовать этот массив для получения индекса для хранения значения.

var series = [{ name: 'Bikes', data: [16240314.115] }, { name: 'Bikes', data: [9520869.049] }, { name: 'Bikes', data: [27832356.658] }, { name: 'Bikes', data: [532399.178] }, { name: 'Clothing', data: [1598657.794] }, { name: 'Clothing', data: [135523.664] }, { name: 'Accessories', data: [4347678.462] }, { name: 'Accessories', data: [376470.596] }],
    categories = ['2011', '2012', '2013', '2014', '2013', '2014', '2013', '2014'],
    years = [...new Set(categories)].sort((a, b) => a - b),
    result = series.reduce((r, { name, data }, i) => {
        var temp = r.find(q => q.name === name);
        if (!temp) r.push(temp = { name, data: years.map(_ => NaN) });
        temp.data[years.indexOf(categories[i])] = data[0];
        return r;
    }, []);

console.log(result);

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

Answer 2

Вы можете создать объект, который связывает каждый класс с объектом из пары * ключ / значение year -> value. Это будет выглядеть следующим образом:

{
  "Bikes": {
    "2011": 16240314.115,
    "2012": 9520869.049,
    "2013": 27832356.658,
    "2014": 532399.178
  },
  "Clothing": {
    "2013": 1598657.794,
    "2014": 135523.664
  },
  "Accessories": {
    "2013": 4347678.462,
    "2014": 376470.596
  }
}

Тогда вам придется преобразовать каждый подобъект в массив, заполняющий пропущенные пробелы:

const years = {'2011':0, '2012':1, '2013':2, '2014':3}

const intermediate = series.reduce((res, {name, data}, i) => {
  res[name] = res[name] || {};
  res[name][xaxis.categories[i]] = data[0];
  
  return res;
}, {});

const result = Object.entries(intermediate).map(([name, class_years]) => {
  const data = (new Array(4)).fill(NaN);
  Object.entries(class_years).forEach(([year, value]) => data[years[year]] = value);
  
  return { name, data };
});

console.log(result)

<script>
  const series = [{
    name: 'Bikes',
    data: [16240314.115]
  }, {
    name: 'Bikes',
    data: [9520869.049]
  }, {
    name: 'Bikes',
    data: [27832356.658]
  }, {
    name: 'Bikes',
    data: [532399.178]
  }, {
    name: 'Clothing',
    data: [1598657.794]
  }, {
    name: 'Clothing',
    data: [135523.664]
  }, {
    name: 'Accessories',
    data: [4347678.462]
  }, {
    name: 'Accessories',
    data: [376470.596]
  }];
  const xaxis = {
    categories: ['2011', '2012', '2013', '2014', '2013', '2014', '2013', '2014'],
  }
</script>