Skip to content

Commit

Permalink
add card component
Browse files Browse the repository at this point in the history
  • Loading branch information
@highvolt-dev
highvolt-dev committed Dec 30, 2021
1 parent 31613a5 commit 04f59ec
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 128 deletions.
163 changes: 35 additions & 128 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useState, useEffect, useRef } from 'react';
import { Area, ComposedChart, Line, CartesianGrid, ReferenceLine, XAxis, YAxis, Tooltip } from 'recharts';
import Card from './components/card';
import './App.css';

// https://stackoverflow.com/a/62798382
Expand Down Expand Up @@ -89,141 +90,47 @@ function App() {
<header className="App-header">
<h1>Tmo Live Graph</h1>
<div className="summary">
<div className="lte">
<h2>4G LTE</h2>
<h3>Band {data.length ? data.slice(-1)[0].lte.Band : 'N/A'}</h3>
<h3>RSRP</h3>
<dl>
<dt>Current:</dt>
<dd>
{data.length ? (
<>
{data.slice(-1)[0].lte.RSRPCurrent} <span className="unit">dBm</span>
</>
) : ''}
</dd>
<dt>Best:</dt>
<dd>
{data.length ? (
<>
{data.map(plot => plot.lte.RSRPCurrent).reduce((best, val) => val > best ? val : best, -140)} <span className="unit">dBm</span>
</>
) : ''}
</dd>
</dl>
<h3>SNR</h3>
<dl>
<dt>Current:</dt>
<dd>
{data.length ? (
<>
{data.slice(-1)[0].lte.SNRCurrent} <span className="unit">dB</span>
</>
) : ''}
</dd>
<dt>Best:</dt>
<dd>
{data.length ? (
<>
{data.map(plot => plot.lte.SNRCurrent).reduce((best, val) => val > best ? val : best, -19.5)} <span className="unit">dB</span>
</>
) : ''}
</dd>
</dl>
</div>
<div className="nr">
<h2>5G NR</h2>
<h3>Band {data.length ? data.slice(-1)[0].nr.Band : 'N/A'}</h3>
<h3>RSRP</h3>
<dl>
<dt>Current:</dt>
<dd>
{data.length ? (
<>
{data.slice(-1)[0].nr.RSRPCurrent} <span className="unit">dBm</span>
</>
) : ''}
</dd>
<dt>Best:</dt>
<dd>
{data.length ? (
<>
{data.map(plot => plot.nr.RSRPCurrent).reduce((best, val) => val > best ? val : best, -140)} <span className="unit">dBm</span>
</>
) : ''}
</dd>
</dl>
<h3>SNR</h3>
<dl>
<dt>Current:</dt>
<dd>
{data.length ? (
<>
{data.slice(-1)[0].nr.SNRCurrent} <span className="unit">dB</span>
</>
) : ''}
</dd>
<dt>Best:</dt>
<dd>
{data.length ? (
<>
{data.map(plot => plot.nr.SNRCurrent).reduce((best, val) => val > best ? val : best, -5)} <span className="unit">dB</span>
</>
) : ''}
</dd>
</dl>
</div>
<Card
signal="lte"
title="4G LTE"
main={true}
band={data.length ? data.slice(-1)[0].lte.Band : 'N/A'}
RSRPCurrent={data.length ? data.slice(-1)[0].lte.RSRPCurrent : null}
RSRPBest={data.length ? data.map(plot => plot.lte.RSRPCurrent).reduce((best, val) => val > best ? val : best, -140) : null}
SNRCurrent={data.length ? data.slice(-1)[0].lte.SNRCurrent : null}
SNRBest={data.length ? data.map(plot => plot.lte.SNRCurrent).reduce((best, val) => val > best ? val : best, -19.5) : null}
/>
<Card
signal="nr"
title="5G NR"
main={true}
band={data.length ? data.slice(-1)[0].nr.Band : 'N/A'}
RSRPCurrent={data.length ? data.slice(-1)[0].nr.RSRPCurrent : null}
RSRPBest={data.length ? data.map(plot => plot.nr.RSRPCurrent).reduce((best, val) => val > best ? val : best, -140) : null}
SNRCurrent={data.length ? data.slice(-1)[0].nr.SNRCurrent : null}
SNRBest={data.length ? data.map(plot => plot.nr.SNRCurrent).reduce((best, val) => val > best ? val : best, -19.5) : null}
/>
</div>
</header>
<main className="App-body">
{renderComposedChart}
</main>
<header className="App-header">
<div className="summary">
<div className="lte">
<h2>4G LTE</h2>
<h3>RSRQ</h3>
<dl>
<dt>Current:</dt>
<dd>
{data.length ? (
<>
{data.slice(-1)[0].lte.RSRQCurrent} <span className="unit">dB</span>
</>
) : ''}
</dd>
<dt>Best:</dt>
<dd>
{data.length ? (
<>
{data.map(plot => plot.lte.RSRQCurrent).reduce((best, val) => val > best ? val : best, -19.5)} <span className="unit">dB</span>
</>
) : ''}
</dd>
</dl>
</div>
<div className="nr">
<h2>5G NR</h2>
<h3>RSRQ</h3>
<dl>
<dt>Current:</dt>
<dd>
{data.length ? (
<>
{data.slice(-1)[0].nr.RSRQCurrent} <span className="unit">dB</span>
</>
) : ''}
</dd>
<dt>Best:</dt>
<dd>
{data.length ? (
<>
{data.map(plot => plot.nr.RSRQCurrent).reduce((best, val) => val > best ? val : best, -19.5)} <span className="unit">dB</span>
</>
) : ''}
</dd>
</dl>
</div>
<Card
signal="lte"
title="4G LTE"
main={false}
RSRQCurrent={data.length ? data.slice(-1)[0].lte.RSRQCurrent : null}
RSRQBest={data.length ? data.map(plot => plot.lte.RSRQCurrent).reduce((best, val) => val > best ? val : best, -19.5) : null}
/>
<Card
signal="nr"
title="5G NR"
main={false}
RSRQCurrent={data.length ? data.slice(-1)[0].nr.RSRQCurrent : null}
RSRQBest={data.length ? data.map(plot => plot.nr.RSRQCurrent).reduce((best, val) => val > best ? val : best, -19.5) : null}
/>
</div>
</header>
<main className="App-body">
Expand Down
77 changes: 77 additions & 0 deletions src/components/card.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import React from 'react';

function Card(props) {

return (
<div className={props.signal}>
<h2>{props.title}</h2>
{props.main ? (
<>
<h3>Band {props.band}</h3>
<h3>RSRP</h3>
<dl>
<dt>Current:</dt>
<dd>
{props.RSRPCurrent ? (
<>
{props.RSRPCurrent} <span className="unit">dBm</span>
</>
) : ''}
</dd>
<dt>Best:</dt>
<dd>
{props.RSRPBest ? (
<>
{props.RSRPBest} <span className="unit">dBm</span>
</>
) : ''}
</dd>
</dl>
<h3>SNR</h3>
<dl>
<dt>Current:</dt>
<dd>
{props.SNRCurrent ? (
<>
{props.SNRCurrent} <span className="unit">dB</span>
</>
) : ''}
</dd>
<dt>Best:</dt>
<dd>
{props.SNRBest ? (
<>
{props.SNRBest} <span className="unit">dB</span>
</>
) : ''}
</dd>
</dl>
</>
) : (
<>
<h3>RSRQ</h3>
<dl>
<dt>Current:</dt>
<dd>
{props.RSRQCurrent ? (
<>
{props.RSRQCurrent} <span className="unit">dB</span>
</>
) : ''}
</dd>
<dt>Best:</dt>
<dd>
{props.RSRQBest ? (
<>
{props.RSRQBest} <span className="unit">dB</span>
</>
) : ''}
</dd>
</dl>
</>
)}
</div>
);
}

export default Card;

0 comments on commit 04f59ec

Please sign in to comment.