JSFiddle - React, Tailwind, and code Playground

by sparksterz

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<body>
  <div id="example" class="k-content">
    <div class="configuration k-widget k-header" style="width:275px;"> <span class="configHead">Gauge</span>
      <ul class="options">
        <li>
          <input id="animations" type="checkbox" autocomplete="off" checked="checked">
          <label for="animations">Show Animations</label>
        </li>
        <li>
          <input id="scale" checked="checked" type="checkbox" autocomplete="off">
          <label for="scale">Show Scale</label>
        </li>
        <li>
          <input id="minorTicks" checked="checked" type="checkbox" autocomplete="off">
          <label for="minorTicks">Show Minor Ticks</label>
        </li>
        <li>
          <input id="majorTicks" checked="checked" type="checkbox" autocomplete="off">
          <label for="majorTicks">Show Major Ticks</label>
        </li>
        <li>
          <input id="labels" checked="checked" type="checkbox" autocomplete="off">
          <label for="labels">Show labels</label>
        </li>
        <li>
          <input id="labels-inside" type="radio" value="inside" name="labels-position"
          checked="checked">
          <label for="labels-inside">- Inside the Gauge</label>
        </li>
        <li>
          <input id="labels-outside" type="radio" value="outside" name="labels-position">
          <label for="labels-outside">- Outside of the Gauge</label>
        </li>
        <li>
          <input id="ranges" checked="checked" type="checkbox" autocomplete="off">
     ...

CSS

<style scoped> #gauge-container {
  width: 404px;
  height: 404px;
  text-align: center;
  margin: 0 0 30px 50px;
}
#gauge {
  width: 400px;
  height: 330px;
  margin: 0 auto 0;
}
</style>

JavaScript

//BUG #1: When redrawing the gauge to update it's core functionality it will revert the pointer to whatever it's originally initialized position is despite what it may currently be set at.
//To demonstrate this bug set the RPM to a different value than was initialized and toggle any option
//BUG #2: Range opacity seems to do nothing from what I have been able to tell...

var rangeArray = [{
  startPercent: 50,
  endPercent: 75,
  opacityVal: .5,
  colorStr: "#ffc7ff"
}, {
  startPercent: 75,
  endPercent: 90,
  opacityVal: .5,
  colorStr: "#00a0ff"
}, {
  startPercent: 90,
  endPercent: 100,
  opacityVal: .5,
  colorStr: "#0000ff"
}];
var maxVal = 180;
var pointerVal = 60;

$(document).ready(function () {
  createGauge(rangeArray, maxVal, pointerVal);
  $("#RPMPointer").bind("change", function () {
    updatePointer($("#RPMPointer").val());
  });
  $("#labels").bind("change", function () {
    if ($("#labels").attr("checked") != undefined) showLabels(true);
    else showLabels(false);
  });
  $("#scale").bind("change", function () {
    if ($("#scale").attr("checked") != undefined) showScale(true);
    else showScale(false);
  });
  $("#minorTicks").bind("change", function () {
    if ($("#minorTicks").attr("checked") != undefined) showMinorTicks(true);
    else showMinorTicks(false);
  });
  $("#majorTicks").bind("change", function () {
    if ($("#majorTicks").attr("checked") != undefined) showMajorTicks(true);
    else showMajorTicks(false);
  });
  $("#ranges").bind("change", function () {
    if ($("#ranges").attr("checked") != undefined) showRanges(true);
    else showRanges(false);
  });
  $("input[name='labels-position']").bind("change", function (e) {
    setPositionOfLabels(e.target.value);
  });
  $("#animations").bind("change", function () {
    if ($("#animations").attr("checked") != undefined) showAnimation(true);
    else showAnimation(false);
  });
  $("#reverse").bind("change", function () {
    if ($("#reverse").attr("checked") != undefined)...