React

【Rechart.js/JavaScript】datasとlabelをreduceを使って作る

【Rechart.js/JavaScript】datasとlabelをreduceを使って作る

先日塾生から

population:[
  [{ // 1つ目のデータ
    "year": 1980,
    "value": 12817
  }, {
    "year": 1985,
    "value": 12707
  }, {
    "year": 1990,
    "value": 12571
  }],
  [{
    "year": 1980,
    "value": 12817
  }, {
    "year": 1985,
    "value": 12707
  }, {
    "year": 1990,
    "value": 12571
  }],
  [{
    "year": 1980,
    "value": 12817
  }, {
    "year": 1985,
    "value": 12707
  }, {
    "year": 1990,
    "value": 12571
  }]
]

このようなデータを

 {
    labels: [
      data.year, data.year, data.year…
    ],
    datasets: [
      {
        data: [data.value, data.value, data.value,…],
      },
      {
        data: [data.value, data.value, data.value,…],
      },
      {
        data: [data.value, data.value, data.value,…],
      },
    ],
  }

このようにしたいという相談?投稿があって
書いたのがこれです


const population = [
  [{
    "year": 1980,
    "value": 1
  }, {
    "year": 1985,
    "value": 2
  }, {
    "year": 1990,
    "value": 3
  }],
  [{
    "year": 1980,
    "value": 2
  }, {
    "year": 1985,
    "value": 22
  }, {
    "year": 1990,
    "value": 23
  }],
  [{
    "year": 1980,
    "value": 3
  }, {
    "year": 1985,
    "value": 32
  }, {
    "year": 1990,
    "value": 33
  }]
];
const result = population.reduce((prev, current) => {
 const datas =  current.map((e) => e.value)
 const labels = current.map((e) => e.year)
 const mergedLabels = prev.labels !== undefined ? [...prev.labels, ...labels] : [...labels]
 const mergedDatas = prev.datas !== undefined ? [ ...prev.datas, {data: datas}] : [{data: datas}]
 return {labels: mergedLabels, datas: mergedDatas}
}, {})

result

{
  datas: [{ data:  [1, 2, 3] }, { data: [2, 22, 23] }, { data: [3, 32, 33] },
  labels: [1980, 1985, 1990, 1980, 1985, 1990, 1980, 1985, 1990]
}

速度は考慮してないです。みやすさを重視しました
自分はreduceが好きなのでよく使いがちです

作るデータが階層構造を持っているとマージするところちょっとややこしいですよね
(labelsは全てを平にしていいのかは疑問)