JSFiddle - React, Tailwind, and code Playground

https://jsfiddle.net/jspafford/mejhn90a/15/#

by jspafford

HTML

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
  <div>
      <label>Target mining time (seconds):</label>
      <select id="target" >
          <option>15</option>
          <option>50</option>
          <option>60</option>
          <option>120</option>
      </select>
  </div>
  
  <div>
      <label>Bucket size (seconds)?</label>
      <input id="bucket" value="30" type="number" min="1" max="100"></input>
  </div>
  
  <div>
      <label>Time around target mining time (seconds)?</label>
      <input id="seconds" value="30" type="number" min="10" max="1000"></input>
  </div>
  
  <canvas id="chart1" style="width:100%;max-width:1600px"></canvas>
  <canvas id="chart2" style="width:100%;max-width:1600px"></canvas>
</body>
</html>

JavaScript

const MIN_DIFFICULTY = BigInt(131072)
const DEFAULT_TARGET = BigInt(883423532389192164791648750371459257913741948437809479060803100646309888)

const targetInput = document.getElementById('target');
const bucketInput = document.getElementById('bucket');
const secondsInput= document.getElementById('seconds');

targetInput.value = 60
bucketInput.value = 10
secondsInput.value = 100

const chart1 = makeChart('chart1', 'Difficulty by seconds after last block (JS)')
const chart2 = makeChart('chart2', 'Difficulty by seconds after last block (RUST)')

function calcDifficulty(targetMedian, bucketSize, previousBlockDifficulty, diffInSeconds) {
    const bucket =
      Math.floor((diffInSeconds - targetMedian + Math.floor(bucketSize / 2)) / bucketSize)

  const difficulty = previousBlockDifficulty - (previousBlockDifficulty / BigInt(2048)) * BigInt(bucket)

  return max(difficulty, MIN_DIFFICULTY)
}

function calcDifficultyRust(targetMedian, bucketSize, previousBlockDifficulty, diffInSeconds) {
  let threshold = 1
	let increment_divisor = 10
  let difficulty_bound_divisor = 2048

  let diff_inc = Math.floor(diffInSeconds / increment_divisor);
  let max_change = BigInt((previousBlockDifficulty / BigInt(difficulty_bound_divisor)))
  let target = null

  if (diff_inc <= threshold) {
	  // Scale up
    let multiplier = threshold - diff_inc
    let change = max_change * multiplier

    target = previousBlockDifficulty + change
  } else {
	  // Scale down
    let multiplier = diff_inc - threshold
    let change = max_change * max(multiplier, -99)
    target = previousBlockDifficulty - change
  }

  return max(MIN_DIFFICULTY, target)
}

function scaleForDisplay(input) {
  const scale = BigInt("3000000000000000000000000000000000000000000000000000000000000000000")
  return Number(input / scale)
}

function updateCharts() {  
	const target = Number(targetInput.value)
  const bucket = Number(bucketInput.value)
	const seconds = Number(secondsInput.value)
	const halfSeconds =...