React Recharts- getting data from different array names

Question

I have an app that shows a graph by date and brand. Unfortunately I'm new to react and recharts and i dont know how to get the specific data that I want. For now I am using an area chart

as for my data

const data1 = [
{
  "data1result": [
    {
      "brand": "brand1"
    },
    {
      "brand": "brand2"
    },
    {
      "brand": "brand3"
    },
    {
      "brand": "brand4"
    }
  ]
}   
];

const data2 = [
{
  "data2result": [
    {
      "date": "12-01",
      "details": [
        {
          "amount": 24250,
          "brand": "brand1"
        },
        {
          "amount": 68350,
          "brand": "brand2"
        },
        {
          "amount": 60,
          "brand": "brand3"
        },
        {
          "amount": 11078,
          "brand": "brand4"
        }
      ]
    },
    {
      "date": "12-02",
      "details": [
        {
          "amount": 27340,
          "brand": "brand1"
        },
        {
          "amount": 16500,
          "brand": "brand2"
        },
        {
          "amount": 210,
          "brand": "brand3"
        },
        {
          "amount": 23229,
          "brand": "brand4"
        }
      ]
    },
    {
      "date": "12-03",
      "details": [
        {
          "amount": 24250,
          "brand": "brand1"
        },
        {
          "amount": 68350,
          "brand": "brand2"
        },
        {
          "amount": 60,
          "brand": "brand3"
        },
        {
          "amount": 11078,
          "brand": "brand4"
        }
      ]
    }
    ]
}
];

and for my code

export default React.createClass({
  render() {
    return (
      <ResponsiveContainer width="100%" aspect={3}>
          <AreaChart width={600} height={400} data={data}
                  margin={{top: 10, right: 30, left: 0, bottom: 0}}>
              <XAxis height={60} tick={<CustomizedAxisTick/>} dataKey="name"/>
              <YAxis/>
              <CartesianGrid strokeDasharray="3 3"/>
              <Tooltip/>
              {data1[0].data1result.map(function(c, index) {
                return (
                  <Area type='monotone' dataKey={c.name} stroke={colors[index % colors.length]} fill={colors[index % colors.length]} fillOpacity={0.3}/>
                  )
              })}
              <Legend/>
          </AreaChart>
      </ResponsiveContainer>
    )}
})

and output should be like this

Answer 1

You need to construct your data as 0-indexed array of objects.

let graphData = [
{
    date: "12-01",
    brand1: 24250,
    brand2: 68350,
    brand3: 60,
    brand4: 11078,
},
{
    date: "12-02",
    brand1: 27340,
    brand2: 16500,
    brand3: 210,
    brand4: 23229,
},
{
    date: "12-03",
    brand1: 24250,
    brand2: 68350,
    brand3: 60,
    brand4: 11078,
}]

And your component will look like this

export default React.createClass({
_drawAreas(){
    let data = this.state.data || [];
    let dataSet = data[0], areaArr = [];        
    let count = 0, len = Object.keys(dataSet).length;
    let colorCodes = ["#17607D", "#F2D8A7", "#1FCECB", "#FF9311", "#003D5C", "#F27649", "#D5CDB6", "#008C74", "#30588C", "#263138"]
    for(let i in dataSet){
        if(dataSet.hasOwnProperty(i) && i != 'date'){
            areaArr.push(<Area type='monotone' dataKey={i} stroke={colorCodes[count]} key={`area-chart-${count}`} fill={colorCodes[count]}/>)               
            count++;
        } 
    }
    return areaArr;
}



render() {
return (
  <ResponsiveContainer width="100%" aspect={3}>
      <AreaChart width={600} height={400} data={this.state.data}
              margin={{top: 10, right: 30, left: 0, bottom: 0}}>
          <XAxis height={60} dataKey="date"/>
          <YAxis/>
          <CartesianGrid strokeDasharray="3 3"/>
          <Tooltip/>
          {this._drawAreas()}
         <Legend/>
      </AreaChart>
  </ResponsiveContainer>
)} })