How to mapping variable data for pie chart (react.js)

Question

I want make pie chart using state value in react with '@toast-ui/react-chart'.

I tried this and that after looking at the examples, but it's hard to me.

This is a example.

//chart data
var data = {
  categories: ['June, 2015'],
  series: [
      {
          name: 'Budget',
          data: [5000]
      },
      {
          name: 'Income',
          data: [8000]
      },
      {
          name: 'Expenses',
          data: [4000]
      },
      {
          name: 'Debt',
          data: [6000]
      }
  ]
};
var options = {
  chart: {
      width: 660,
      height: 560,
      title: 'Today's Channel & Value.'
    }
    tooltip: {
      suffix: 'value'
    }
  },
};
var theme = {
  series: {
      colors: [
          '#83b14e', '#458a3f', '#295ba0', '#2a4175', '#289399',
          '#289399', '#617178', '#8a9a9a', '#516f7d', '#dddddd'
      ]
  }
};

//render part
render()
{
return(
       <div>
        <PieChart
          data={data} 
          options={options} 
        />
       </div>
}

and document is here.

https://github.com/nhn/toast-ui.react-chart#props https://nhn.github.io/tui.chart/latest/tutorial-example07-01-pie-chart-basic

What's in the document is how to make a chart with a fixed number, but I want to change it using the state.

So, How can I mapping series data like this and how to add data length flexible?

I have list of object like...

this.state.list =[{"channel_name":"A","channel_number":17,"VALUE":3,"num":1},
{"channel_name":"B","channel_number":23,"VALUE":1,"num":2},
{"channel_name":"C","channel_number":20,"VALUE":1,"num":3},
{"channel_name":"D","channel_number":1,"VALUE":1,"num":4}]

The length of the list is between 1 and 7 depending on the results of the query.

I want to do like this.

series:[
  {
       name: this.state.list[0].channel_name+this.state.list[0].channel_num
       data: this.state.list[0].VALUE     
  },
 {
       name: this.state.list[1].channel_name+this.state.list[1].channel_num
       data: this.state.list[1].VALUE     
  },
 {
       name: this.state.list[2].channel_name+this.state.list[2].channel_num
       data: this.state.list[2].VALUE     
  },
 {
       name: this.state.list[3].channel_name+this.state.list[3].channel_num
       data: this.state.list[3].VALUE     
  }
]

How can I implement it however I want?

Answer 1

Since this.state.list is a list of objects, so you can simply use map method to loop through each object https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map . Then create new object with custom value.

let new_series = [];
this.state.list.map((obj) => {
    let info = {
        name: obj.channel_name + obj.channel_number, //from your code
        data: obj.VALUE //from your code
    }
    new_series.push(info)
});

Then assign new list to your chart.

//chart data
var data = {
  categories: ['June, 2015'],
  series: new_series
  ]
};