Реагировать DataKey в диаграммах

Question

Я использую данные для заполнения графиков, построенных с помощью Recharts

У меня есть два объекта в моих данных: финансы и DAU

const charts = [
  {
    name: 'Finances',
    data:[
      {name: 'April', Balance: 48530, saving: 0},
      {name: 'May', Balance: 50328, saving: 1798},
      {name: 'June', Balance: 48573, saving: -1755},
      {name: 'July', Balance: 48825, saving: 252}
    ]
  },
  {
    name: 'DAU',
    data: [
      {Day: '2016-10-28', Android: 27, iOS: 12},
      {Day: '2016-10-29', Android: 20, iOS: 17},
      {Day: '2016-10-30', Android: 17, iOS: 13},
      {Day: '2016-10-31', Android: 15, iOS: 13},
      {Day: '2016-11-01', Android: 14, iOS: 11}
    ]
  }
];

export default charts;

На данный момент я прохожу datakey только для первого объекта данных (финансы)

за <XAxis dataKey="name"/> и компонент двух линий <Line type="monotone" dataKey="Balance"/> а также <Line type="monotone" dataKey="saving"/>

Это мой компонент диаграммы

export default class Chart extends React.Component {
  render () {
    const { chart, i } = this.props;
    return (
      <div>
        <h1>{chart.name}</h1>
        <LineChart width={600} height={300} data={chart.data}
              margin={{top: 5, right: 30, left: 20, bottom: 5}}>
         <XAxis dataKey="name"/>
         <YAxis/>
         <CartesianGrid strokeDasharray="3 3"/>
         <Tooltip/>
         <Legend />
         <Line type="monotone" dataKey="Balance" stroke="#82ca9d" />
         <Line type="monotone" dataKey="saving" stroke="#8884d8" activeDot={{r: 8}}/>
        </LineChart>
      </div>
    );
  }
};

Как я могу передать dataKey Динанмически в моем XAxis а также Lines комплектующие на 2 объекта Финансы и DAU?

Answer 1

Я бы добавил ключи к объектам диаграммы и использовал их в качестве реквизита внутри Chart составная часть. Вот так:

const charts = [
  {
    name: 'Finances',
    xAxisKey: 'name',
    line1Key: 'Balance',
    line2Key: 'saving',    
    data:[
      {name: 'April', Balance: 48530, saving: 0},
      {name: 'May', Balance: 50328, saving: 1798},
      {name: 'June', Balance: 48573, saving: -1755},
      {name: 'July', Balance: 48825, saving: 252}
    ]
  },
  {
    name: 'DAU',
    xAxisKey: 'Day',
    line1Key: 'Android',
    line2Key: 'iOS',  
    data: [
      {Day: '2016-10-28', Android: 27, iOS: 12},
      {Day: '2016-10-29', Android: 20, iOS: 17},
      {Day: '2016-10-30', Android: 17, iOS: 13},
      {Day: '2016-10-31', Android: 15, iOS: 13},
      {Day: '2016-11-01', Android: 14, iOS: 11}
    ]
  }
];

И компонент:

export default class Chart extends React.Component {
  render () {
    const { chart, i } = this.props;
    return (
      <div>
        <h1>{chart.name}</h1>
        <LineChart width={600} height={300} data={chart.data}
              margin={{top: 5, right: 30, left: 20, bottom: 5}}>
         <XAxis dataKey={chart.xAxisKey} />
         <YAxis/>
         <CartesianGrid strokeDasharray="3 3"/>
         <Tooltip/>
         <Legend />
         <Line type="monotone" dataKey={chart.line1Key} stroke="#82ca9d" />
         <Line type="monotone" dataKey={chart.line2Key} stroke="#8884d8" activeDot={{r: 8}}/>
        </LineChart>
      </div>
    );
  }
};