JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


<form id="settings-form" class="form-horizontal">
  <div class="form-group">
    <div class="col-sm-4 control-label">Timing Metrics</div>
    <div class="col-sm-8">
      <div class="row">
        <div class="col-sm-6">
          <label for="averageTime">Average Time</label>
          <input type="number" step="0.001" id="averageTime" name="averageTime" class="form-control" aria-describedby="averageTimeHelpBlock" value="5">
        </div>
        <div class="col-sm-6">
          <label for="standardError">Standard Error</label>
          <input type="number" step="0.001" id="standardError" name="standardError" class="form-control" aria-describedby="standardErrorHelpBlock" value="1">
        </div>
      </div>
      <small id="timingMetricsHelpBlock" class="form-text text-muted">
        Average time and standard error in seconds.
      </small>
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-4 control-label">Service Levels</div>
    <div class="col-sm-8">
      <div class="row">
        <div class="col-sm-6">
          <label for="sla">SLA</label>
          <input type="number" step="0.001" id="sla" name="sla" class="form-control" aria-describedby="slaHelpBlock" value="30">
        </div>
        <div class="col-sm-6">
          <label for="errorRate">Error Rate (%)</label>
          <input type="number" step="0.001" id="errorRate" name="errorRate" class="form-control" aria-describedby="errorRateHelpBlock" value="0">
        </div>
      </div>
      <small id="serviceLevelsHelpBlock" class="form-text text-muted">
        Maximum time for SLA and rate of errors.
     ...

CSS

#canvas-container {
  display: inline-block; /* or flex, depending on layout */
  /* other styles */
}

JavaScript

$(document).ready(function() {
  const canvas = document.getElementById('progressArc');
  const ctx = canvas.getContext('2d');
  let startTime, timerInterval;
  let speedInfoDict = {};
  let averageTime, standardError, errorRate, sla, open, close, high, low;

  function collectFormInput() {
    startTime = new Date();
    averageTime = parseFloat($('#averageTime').val());
    standardError = parseFloat($('#standardError').val());
    errorRate = parseFloat($('#errorRate').val());
    open = parseFloat($('#open').val());
    close = parseFloat($('#close').val());
    high = parseFloat($('#high').val());
    low = parseFloat($('#low').val());
    sla = parseFloat($('#sla').val());
  }

  function calculateExpectedTimeForSpeedInfo() {
    return {
      breachingSLA: sla.toFixed(1),
      overTime1: (2 * (averageTime + standardError)).toFixed(1),
      overTime2: (averageTime * 2 + standardError).toFixed(1),
      overTime3: (averageTime * 2).toFixed(1),
      processing1: (2 * (averageTime + standardError)).toFixed(1),
      processing2: averageTime.toFixed(1),
      processing3: (averageTime - standardError).toFixed(1)
    };
  }

  function populateSpeedInfoDict() {
    const expectedTime = calculateExpectedTimeForSpeedInfo();

    speedInfoDict = {
      0: { color: '#808080', icon: '', state: '', expectedTime: '' },
      1: { color: '#FF0000', icon: '🛑', state: 'breaching SLA', expectedTime: expectedTime.breachingSLA },
      2: { color: '#FF4500', icon: '🐌', state: 'overtime', expectedTime: expectedTime.overTime1 },
      3: { color: '#FFA500', icon: '🐢', state: 'overtime', expectedTime: expectedTime.overTime2 },
      4: { color: '#FFFF00', icon: '😐', state: 'overtime', expectedTime: expectedTime.overTime3 },
      5: { color: '#ADFF2F', icon: '👍', state: 'processing', expectedTime: expectedTime.processing1 },
      6: { color: '#00FF00', icon: '😊', state: 'processing', expectedTime: expectedTime.processing2 },
      7: { color: '#008000', icon: '🚀', state:...