Complexity of a Simple Chart

by Jeff Cave

HTML

<table>
<caption>
  <h1>Status</h1>
  <p><time>@2023-02-02 15:26</time></p>
</caption>
<tbody>
 <tr class='expired'>
  <td>Gov SEC</td>
  <td> 0.5%</td>
 </tr>
 <tr class='refresh'>
  <td>Market NYSE</td>
  <td><time datetime='PT0H1M34S'> 1 m ◔</time><meter min='0' max='1000' value='270'></meter></td>
 </tr>
 <tr>
  <td>Gov SEDAR</td>
  <td><time datetime='PT8H34M10S'> 8 h ◑</time><meter min='0' max='1000' value='355'></meter></td>
 </tr>
 <tr>
  <td>Market Cboe</td>
  <td><time datetime='PT0H7M36S'> 7 m ◕</time><meter min='0' max='1000' value='500'></meter></td>
 </tr>
 <tr>
  <td>Market CBOT</td>
  <td><time datetime='PT0H7M36S'>13 m ◕</time><meter min='0' max='1000' value='900'></meter></td>
 </tr>
 <tr>
  <td>Market CHX</td>
  <td><time datetime='PT0H7M36S'> 4 m ◕</time><meter min='0' max='1000' value='200'></meter></td>
 </tr>
 <tr>
  <td>Market CSE</td>
  <td><time datetime='PT0H7M36S'> 7 m ◕</time><meter min='0' max='1000' value='500'></meter></td>
 </tr>
 <tr>
  <td>Market ISE</td>
  <td><time datetime='PT0H7M36S'>10 m ◕</time><meter min='0' max='1000' value='750'></meter></td>
 </tr>
 <tr>
  <td>Market MX</td>
  <td><time datetime='PT0H7M36S'> 7 m ◕</time><meter min='0' max='1000' value='500'></meter></td>
 </tr>
 <tr>
  <td>Market NASDAQ</td>
  <td><time datetime='PT0H7M36S'>12 m ◕</time><meter min='0' max='1000' value='800'></meter></td>
 </tr>
 <tr>
  <td>Market NEO</td>
  <td><time datetime='PT0H7M36S'> 7 m ◕</time><meter min='0' max='1000' value='500'></meter></td>
 </tr>
 <tr>
  <td>Market PHLX</td>
  <td><time datetime='PT0H7M36S'> 7 m ◕</time><meter min='0' max='1000' value='500'></meter></td>
 </tr>
 <tr>
  <td>Market TSX</td>
  <td><time datetime='PT0H13M36S'>13 m ◕</time><meter min='0' max='1000' value='907'></meter></td>
 </tr>
 <tr>
  <td>Market TSXV</td>
  <td><time datetime='PT0H13M36S'>13 m ◕</time><meter min='0' max='1000' value='907'></meter></td>
 </tr>
</tbody>
</table>

CSS

caption{
  border:1px solid black;
  border-bottom:none;
}
caption time{
  font-size:xx-small;
}
caption *{
  padding:0;
  margin:0;
}
table{
  border-collapse: collapse;
  border:1px solid black;
  border-top:none;
  padding:1em;
  font-size:xx-large;
  font-weight:bold;
  font-family:sans-serif;
  color:black;
  text-shadow: 0 0 0.25em white;
  min-width:600px;
  max-width:30%;
}
tbody{
  max-height:29vh;
  overflow-y:scroll;
  display:block;  
}
tr{
  margin-left: 1em;
}
td{
  position:relative;
  z-index:0;
  text-align:left;
  border:1px solid black;
  border-left:none;
  border-right:none;
  padding: 0.1em;
}

tr:hover{
  background-color:lightgrey;
}

meter{
  z-index:-1;
	position: absolute;
	display:inline-block;
	bottom:0;
	left:0;
	height:100%;
	width:100%;
	border-radius:0;
}
meter::--webkit-meter-bar{
    background:none;
}
meter::-webkit-meter-optimum-value {
    box-shadow: none;
    background-color:steelblue;
    background-size: 100% 100%;
}

tr > td:nth-of-type(1){
  width:1%;
  white-space: nowrap;
}
tr > td:nth-of-type(2){
  font-family: monospace;
}
tr > td:nth-of-type(2)::before{
    content:'✅';
    color:white;
    font-weight:bold;
    text-shadow: 0 0 0.25em black;
    background-color:steelblue;
    border:0.1em solid transparent;
    border-radius:1em;
    padding:0.1em;
}

tr.expired > td:nth-of-type(2)::before{
    content:'⏰';
    background-color:firebrick;
}
tr.expired > td:nth-of-type(2){
  color:firebrick;
  text-shadow: 0 0 1px black;
}

tr.refresh  meter::-webkit-meter-optimum-value {
    background-color:gold;
}
tr.refresh > td:nth-of-type(2)::before{
    content:'🔄';
    background-color:gold;
}