{"size": 1548, "ext": "js", "max_stars_repo_path": "client/src/components/PlayerCountGraph.js", "max_stars_repo_name": "VicFrank/CustomGameStats", "max_stars_repo_stars_event_min_datetime": "2021-09-07T22:15:09.000Z", "max_stars_repo_stars_event_max_datetime": "2021-09-07T22:15:09.000Z", "max_issues_repo_path": "client/src/components/PlayerCountGraph.js", "max_issues_repo_name": "VicFrank/CustomGameStats", "max_issues_repo_issues_event_min_datetime": "2020-07-07T19:55:07.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-28T23:01:06.000Z", "max_forks_repo_path": "client/src/components/PlayerCountGraph.js", "max_forks_repo_name": "VicFrank/CustomGameStats", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 17, "max_forks_count": null, "avg_line_length": 18.8780487805, "max_line_length": 67, "alphanum_fraction": 0.434754522}
import React from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

export default function PlayerCountGraph(props) {
  const { data, title } = props;

  const options = {
    title: {
      text: title
    },
    chart: {
      zoomType: "x"
    },
    subtitle: {
      text:
        document.ontouchstart === undefined
          ? "Click and drag in the plot area to zoom in"
          : "Pinch the chart to zoom in"
    },
    xAxis: {
      type: "datetime"
    },
    yAxis: {
      title: {
        text: undefined
      }
    },
    tooltip: {
      xDateFormat: "%B %e, %H:%M",
      shared: true
    },
    legend: {
      enabled: false
    },
    plotOptions: {
      area: {
        fillColor: {
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
          },
          stops: [
            [0, Highcharts.getOptions().colors[0]],
            [
              1,
              Highcharts.Color(Highcharts.getOptions().colors[0])
                .setOpacity(0)
                .get("rgba")
            ]
          ]
        },
        marker: {
          radius: 2
        },
        lineWidth: 1,
        states: {
          hover: {
            lineWidth: 1
          }
        },
        threshold: null
      }
    },
    series: [
      {
        type: "area",
        name: "Players",
        data: data
      }
    ]
  };

  return (
    <>
      <HighchartsReact highcharts={Highcharts} options={options} />
    </>
  );
}
