t2-stat-parser/app/webapp/resources/js/Pages/Players/Player.js

import React from 'react'
import { InertiaLink } from '@inertiajs/inertia-react'
import Layout from '@/Shared/Layout'
import GameTypesPlayedCols from '@/Components/GameTypesPlayedCols'

import {Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis} from 'recharts'


const returnWeaponTotals = (statTotals) => {
  let totals = [
      { weapon: 'Chaingun', val: statTotals["chainKills"]},
      { weapon: 'Disc', val: statTotals["discKills"] },
      { weapon: 'Grenade Launcher', val: statTotals["grenadeKills"]},
      { weapon: 'Shocklance', val: statTotals["shockLanceKills"]},
      { weapon: 'Laser Rifle', val: statTotals["laserKills"]},
      { weapon: 'Blaster', val: statTotals["blasterKills"]},
      { weapon: 'Plasma Rifle', val: statTotals["plasmaKills"]},
      { weapon: 'Mortar Launcher', val: statTotals["mortarKills"]},
      { weapon: 'Missile Launcher', val: statTotals["missileKills"]},
      { weapon: 'Hand Grenade', val: statTotals["hGrenadeKills"]},
      { weapon: 'Mine', val: statTotals["mineKills"]},
      { weapon: 'Satchel', val: statTotals["satchelChargeKills"]},
    ];

    // dont return if the val is 0
    return totals.filter(function (el) {
      return el.val > 0;
    });
};


const GameCard = (player, index) => {
  // only display card if player has score
  if (Number(player.stats.score) <= 0){return}

   return <div key={index}  className="bg-white shadow overflow-hidden sm:rounded-lg mb-5">

            <div className="px-4 py-5 border-b border-gray-200 sm:px-6">
              <div className="-ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-no-wrap">
                <div className="ml-4 mt-4">
                  <h3 className="text-lg leading-6 font-medium text-gray-900">
                    <InertiaLink href={`/game/${player.game_id}`} className="text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">{player.stats.map}</InertiaLink>
                  </h3>

                  <p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
                    <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium leading-4 bg-gray-100 text-gray-800">{player.stats.dateStamp}</span>
                  </p>
                </div>
                <div className="ml-4 mt-4 flex-shrink-0">
                  <span className="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-indigo-100 text-indigo-800">
                  { player.gametype }
                  </span>
                </div>
              </div>
            </div>
            <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
              <dt className="text-sm leading-5 font-medium text-gray-500">
                Total Score
              </dt>
              <dd className="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
              {player.stats.score}
              </dd>
            </div>
            <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
          <dt className="text-sm leading-5 font-medium text-gray-500">
            Kills / Assists
          </dt>
          <dd className="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
          {player.stats.kills} / {player.stats.assist}
          </dd>
        </div>
        <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
          <dt className="text-sm leading-5 font-medium text-gray-500">
            MAs
          </dt>
          <dd className="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
          {player.stats.totalMA}
          </dd>
        </div>
        <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
          <dt className="text-sm leading-5 font-medium text-gray-500">
          Flag Grabs / Caps
          </dt>
          <dd className="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
          {player.stats.flagGrabs} / {player.stats.flagCaps}
          </dd>
        </div>
        <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
          <dt className="text-sm leading-5 font-medium text-gray-500">
          Flag Defends / Carrier Kills / Returns
          </dt>
          <dd className="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
          {player.stats.flagDefends} / {player.stats.carrierKills} / {player.stats.flagReturns}
          </dd>
        </div>
  </div>;
}



export default function Player(props) {
  return (
    <Layout title={props.pageTitle}>

      <div className="md:grid md:grid-cols-4 md:gap-6">

        <div className="md:col-span-1">
          <div className="px-4 sm:px-0">
            <h3 className="text-lg font-medium leading-6 text-gray-900">Aggregate</h3>
            <p className="mt-1 text-sm leading-5 text-gray-500">
            Stat Totals
            </p>
          </div>
        </div>

        <div className="mt-5 md:mt-0 md:col-span-3">
          <div className="bg-white shadow overflow-hidden sm:rounded-lg">
            <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
              <div className="text-sm leading-5 font-medium text-gray-500">
                Games Played
              </div>
              <div className="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
                <GameTypesPlayedCols ctf={props.playerData.player.total_games_ctfgame}
                            dm={props.playerData.player.total_games_dmgame}
                            lak={props.playerData.player.total_games_lakrabbitgame}
                            spawnctf={props.playerData.player.total_games_sctfgame}/>
              </div>
            </div>
            <div className="bg-gray-50 px-4 py-5">
              <dt className="text-sm leading-5 font-medium text-gray-500">
                Weapon Usage
              </dt>
              <dd className="mt-1 text-sm leading-5 text-gray-900 flex items-center justify-center">
                <RadarChart cx={300} cy={250} outerRadius={150} width={600} height={500} data={ returnWeaponTotals(props.playerData.totals).length ? returnWeaponTotals(props.playerData.totals) : [{ weapon: 'No Data', val:1}]} className="text-xs">
                  <PolarGrid />
                  <PolarAngleAxis dataKey="weapon" />
                  <PolarRadiusAxis/>
                  <Radar name={props.playerData.player.player_name} dataKey="val" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6}/>
                </RadarChart>
              </dd>
            </div>
          </div>
        </div>
      </div>

      <div className="md:grid md:grid-cols-4 md:gap-6 mt-10">
        <div className="md:col-span-1">
          <div className="px-4 sm:px-0">
            <h3 className="text-lg font-medium leading-6 text-gray-900">Game History</h3>
            <p className="mt-1 text-sm leading-5 text-gray-500">
              Stats for past {props.playerData.stats.length} games
            </p>
          </div>
        </div>
        <div className="mt-5 md:mt-0 md:col-span-3">
          { props.playerData.stats.map((player, index) => GameCard(player, index)) }
        </div>
      </div>
{/*

      <div className="bg-white shadow overflow-hidden sm:rounded-md">
       <div className="py-10 px-10"><code> {JSON.stringify(props.playerData.stats)}</code></div>
      </div> */}
    </Layout>
  )
}