{"size": 1847, "ext": "js", "max_stars_repo_path": "exts/yapi-plugin-statistics/statisticsClientPage/StatisChart.js", "max_stars_repo_name": "qq1090605939/yapi", "max_stars_repo_stars_event_min_datetime": "2020-02-19T05:33:33.000Z", "max_stars_repo_stars_event_max_datetime": "2020-07-20T11:46:05.000Z", "max_issues_repo_path": "exts/yapi-plugin-statistics/statisticsClientPage/StatisChart.js", "max_issues_repo_name": "qq1090605939/yapi", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "exts/yapi-plugin-statistics/statisticsClientPage/StatisChart.js", "max_forks_repo_name": "qq1090605939/yapi", "max_forks_repo_forks_event_min_datetime": "2018-11-20T15:42:56.000Z", "max_forks_repo_forks_event_max_datetime": "2020-06-15T06:03:56.000Z"}
{"max_stars_count": 5, "max_issues_count": null, "max_forks_count": 3, "avg_line_length": 25.301369863, "max_line_length": 109, "alphanum_fraction": 0.5549539794}
/**
 * Created by gxl.gao on 2017/10/25.
 */
import React, { Component } from 'react'
// import PropTypes from 'prop-types'
import axios from 'axios'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts'
import { Spin } from 'antd';
class StatisChart extends Component {

  static propTypes = {

  }

  constructor(props) {
    super(props);
    this.state = {
      showLoading: true,
      chartDate: {
        mockCount: 0,
        mockDateList: []

      }
    }
  }

  componentWillMount() {
    this.getMockData();

  }

  // 获取mock 请求次数信息
  async getMockData() {
    let result = await axios.get('/api/plugin/statismock/get');
    if (result.data.errcode === 0) {
      let mockStatisData = result.data.data;
      this.setState({
        showLoading:false,
        chartDate: { ...mockStatisData }
      });
    }
  }

  render() {
    const width = 1050;
    const { mockCount, mockDateList } = this.state.chartDate;
  
    
    return (
      <div>
        <Spin spinning={this.state.showLoading}>
          <div className="statis-chart-content">
            <h3 className="statis-title">mock 接口访问总数为：{mockCount.toLocaleString()}</h3>
            <div className="statis-chart">
              <LineChart width={width} height={300} data={mockDateList}
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                <XAxis dataKey="_id"/>
                <YAxis />
                <CartesianGrid strokeDasharray="7 3" />
                <Tooltip />
                <Legend/>
                <Line name="mock统计值" type="monotone" dataKey="count" stroke="#8884d8" activeDot={{ r: 8 }} />
              </LineChart>
            </div>
            <div className="statis-footer">过去3个月mock接口调用情况</div>
          </div>
        </Spin>
      </div>
    );
  }
}

export default StatisChart;