Graph

Graph is a component to present data in form of line or bar charts. Up to Graph.MAX_NUMBER_OF_CHARTS charts can be displayed within one Graph component.

Data (data prop) is an array in the following format:

[
    {
         <xDataKey>: <X data value 1>,
         <y1DataKey>: <Y1 data value 1>,
         <y2DataKey>: <Y2 data value 1>,
         <y3DataKey>: <Y3 data value 1>
    },
    {
         <xDataKey>: <X data value 2>,
         <y1DataKey>: <Y1 data value 2>,
         <y2DataKey>: <Y2 data value 2>,
         <y3DataKey>: <Y3 data value 2>
    },
    ...
]

Chart configuration (charts prop) is an array in the following format:

[
     {
          name: <y1DataKey>,
          label: <Chart1Label>,
          axisLabel: <Chart1AxisLabel>,
     },
     {
          name: <y1DataKey>,
          label: <Chart1Label>,
          axisLabel: <Chart1AxisLabel>,
     },
     ...
]

Up to Graph.MAX_NUMBER_OF_CHARTS charts can be defined in charts configuration array.

Access

Stage.Basic.Graphs.Graph

Usage

Bar chart

let data = [
    {time: '10:00', value: 300},
    {time: '11:00', value: 100},
    {time: '12:00', value: 80},
    {time: '13:00', value: 40},
    {time: '14:00', value: 30}
];
return (<Graph dataTimeFormat='HH:mm' charts={[{name:'value', label:'Number of fruits', axisLabel:''}]} data={data} type={Graph.BAR_CHART_TYPE} />);

Line chart

let data = [
     {time: '17:30', value: 1},
     {time: '17:40', value: 2},
     {time: '17:50', value: 1},
     {time: '18:00', value: 3},
     {time: '18:10', value: 5},
     {time: '18:20', value: 8},
     {time: '18:30', value: 5}
];
return (<Graph dataTimeFormat='HH:mm' charts={[{name:'value', label:'CPU load'}]} data={data} type={Graph.LINE_CHART_TYPE} />);

Area chart

let data = [
     {time: '17:30', value: 1},
     {time: '17:40', value: 2},
     {time: '17:50', value: 1},
     {time: '18:00', value: 3},
     {time: '18:10', value: 5},
     {time: '18:20', value: 8},
     {time: '18:30', value: 5}
];
return (<Graph charts={[{name:'value', label='CPU load'}]} data={data} type={Graph.AREA_CHART_TYPE} />);

Line chart - multi-charts, one Y-axis per chart

let data = [
     {cpu_total_system: 3.5,
      loadavg_processes_running: 3.071428571428572,
      memory_MemFree: 146003090.2857143,
      time: "2017-09-26 11:00:00"},
     ...
];

let charts = [
     {name: "cpu_total_system", label: "CPU - System [%]", axisLabel:""},
     {name: "memory_MemFree", label: "Memory - Free [Bytes]", axisLabel:""},
     {name: "loadavg_processes_running", label: "Load [%]", axisLabel:""}
]

return (<Graph charts={charts} data={data} type={Graph.LINE_CHART_TYPE} />);

Line chart - multi-charts, one Y-axis

let data = [
     {cpu_total_system: 3.5,
      cpu_total_user: 5.23,
      loadavg_processes_running: 3.071428571428572,
      time: "2017-09-26 11:20:00"},
     ...
];

let charts = [
     {name: "metrics", label: "metrics", axisLabel:"", fieldNames: ["cpu_total_system","cpu_total_user","loadavg_processes_running"]}
]

return (<Graph charts={charts} data={data} type={Graph.LINE_CHART_TYPE} />);