{"size": 1348, "ext": "js", "max_stars_repo_path": "src/module/charts/components/LineCharts.js", "max_stars_repo_name": "SaroarShahan/readmin", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/module/charts/components/LineCharts.js", "max_issues_repo_name": "SaroarShahan/readmin", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/module/charts/components/LineCharts.js", "max_forks_repo_name": "SaroarShahan/readmin", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.962962963, "max_line_length": 72, "alphanum_fraction": 0.5430267062}
import React from 'react';
import {
  LineChart,
  XAxis,
  YAxis,
  Line,
  CartesianGrid,
  ResponsiveContainer
} from 'recharts';
import BoxWrapper from '../../common/BoxWrapper';
import {data} from '../constants/data';
let abbreviate = require('number-abbreviate');

const formatter = value => `${abbreviate(value)}`;
const TickFormater = props => {
  const {x, y, payload} = props;

  return (
    <g transform={`translate(${x},${y})`}>
      <text
        x={0}
        y={0}
        dy={4}
        fontSize={10}
        textAnchor="end"
        fill="#666"
        transform="rotate(-25)">
        {payload.value}
      </text>
    </g>
  );
};

const LineCharts = ({children}) => {
  return (
    <BoxWrapper>
      {children}
      <ResponsiveContainer width={'100%'} height={300}>
        <LineChart
          data={data}
          margin={{top: 10, right: 30, left: 0, bottom: 0}}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" interval={0} tick={<TickFormater />} />
          <YAxis tickFormatter={formatter} />
          <Line type="monotone" dataKey="pv" stroke="#8884d8" />
          <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
        </LineChart>
      </ResponsiveContainer>
    </BoxWrapper>
  );
};

export default LineCharts;
