text: import React from 'react';
  import { withWidth } from '@material-ui/core';
  import {
    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
  } from 'recharts';
  
  const CustomizedAxisTick = ({ x, y, payload }) => {
    if (!payload.value) {
      return payload.value;
    }
    const parts = payload.value.split(' ');
    return (
      <g transform={`translate(${x},${y})`}>
        <text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">{parts[0]}</text>
        <text x={0} y={16} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">{parts[1]}</text>
      </g>
    );
  };
  
  const Graph = ({ type, items }) => (
    <ResponsiveContainer height={400} width="100%" debounce={1}>
      <LineChart data={items}>
        <XAxis dataKey="fixTime" tick={<CustomizedAxisTick />} height={60} />
        <YAxis />
        <CartesianGrid strokeDasharray="3 3" />
        <Tooltip />
        <Legend />
        <Line type="natural" dataKey={type} />
      </LineChart>
    </ResponsiveContainer>
  );
  
  export default withWidth()(Graph);
  