knomp/website/pages/miner_stats.html

An extremely efficient, highly scalable, KawPoW algorithm mining pool

<style>
.size-1 {
  width: 256px;
  height: 256px;
  display: block;
  float: center;
  box-sizing: border-box;
  margin: auto;
}
.chartLabel {
  text-align: center;
  font-size: 20px;
  font-weight: 300;
}
.chartHolder {
  min-height: 300px;
}
#boxesWorkers {
  margin: 0 9px;
}
#boxesWorkers > div {
  border-radius: 20px;
  display: flex;
}
#boxesWorkers > div > div {
  flex: 1 1 auto;
  margin: 0 9px 18px 9px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.boxLowerHeader {
  font-size: 1.3em;
  margin: 0 0 5px 10px;
}
#boxStatsLeft {
  color: #fefefe;
  background-color: #343A40;
}
#boxStatsRight {
  color: #fefefe;
  background-color: #343A40;
}
.boxStats {
  color: white;
}
.boxStatsList {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  opacity: 0.77;
  margin-bottom: 5px;
  flex: 1 1 auto;
  align-content: center;
}
.boxStatsList i.fa {
  height: 15px;
  width: 33px;
  text-align: center;
}
.boxStatsList > div {
  padding: 5px 20px;
}
.boxStatsList > div > div {
  padding: 3px;
}
.header-blue .hero p {
  color: rgba(255,255,255,0.8);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
}
.header-blue .hero h1 {
  color: #fff;
  margin-top: 0;
  margin-bottom: 15px;
  line-height: 1.4;
}
.header-blue {
  background-color: #738bdc;
  background-image: linear-gradient(315deg, #738bdc 0%, #48c3eb 74%);
  padding-bottom: 40px;
}
.header-blue .action-button, .header-blue .action-button:not(.disabled):active {
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 40px;
  color: #ebeff1;
  box-shadow: none;
  text-shadow: none;
  padding: .3rem .8rem;
  background: transparent;
  transition: background-color 0.25s;
  outline: none;
}
.widget-blue {
  background-color: #36a3f7;
  color: #fff;
}
</style>

<div style="margin-top: 10px; min-height: 768px;">
	<section class="title">
		<div>
			<div class="header-blue">
				<div class="container hero">
					<div class="row text-center"><br>
						<div class="col-12 col-lg-12 col-xl-12">
							<h1 class="display-4"><br><b>Miner Dashboard</b></h1>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<div>&nbsp;<br></div>
	<div class="container-fluid p-4">
		<div class="row justify-content-center pb-0">
			<h4 class="display-4 pb-0 mb-0 text-success" style="font-size: 26px;"><b>Account Details</b></h4>
		</div><br>
		<div class="row my-0 mt-0 pt-0 justify-content-center">
			<p class="lead" style="font-size: 18px;">
			Total Balance: <span id="total-balance-label"></span><br />
			Total Paid: <span id="total-paid-label"></span>
		</div>
		<div class="row justify-content-center">
			<div class="col-md-6 col-lg-3">
				<div id="gauge" class="size-1"></div>
			</div>
			<div class="col-md-6 col-lg-3">
				<div id="validShare" class="size-1"></div>
			</div>
			<div class="col-md-6 col-lg-3">
				<div id="workerDominance" class="size-1"></div>
			</div>
			<div class="col-md-6 col-lg-3">
				<div id="hashDominance" class="size-1"></div>
			</div>
		</div>
		<div class="row justify-content-center">
			<div class="col-md-12 chartWrapper">
				<div class="card">
					<div class="card-header widget-blue">
						<h3 class="card-title"><b>Worker Hashrate History</b></h3>
						<div class="card-tools">
						<button type="button" class="btn btn-tool" data-card-widget="collapse">
						<i class="fas fa-minus text-success"></i>
						</button>
						</div>
					</div>
					<div class="card-body">
						<p class="text-muted text-center" style="font-size: 12px;">Colors are random! If you don't like the ones given, simply refresh the page!</p>
						<div class="chart">
						<canvas id="workerHashChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">&nbsp;<br /><br /></div>
		<div class="row mt-2 mx-2">
			<div id="boxesWorkers"></div>
		</div>
	</div>
</div>
<script>
	var _miner = '{{=String(it.stats.address).split(".")[0]}}';
	addPoolToTracker(_miner);
	var _workerCount = 0;
	document.querySelector('main').appendChild(document.createElement('script')).src = '/static/methods.js';
	document.querySelector('main').appendChild(document.createElement('script')).src = '/static/miner_stats.js';
</script>