JSFiddle - React, Tailwind, and code Playground

by sqiudward

HTML

<script src="https://cdn.jsdelivr.net/raphael/2.1.4/raphael-min.js"></script>
<script src="https://cdn.jsdelivr.net/wheelnav/1.6.1/wheelnav.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
<div id="slider-wrapper">
  <div id="home" class="wheelNavGitHub"></div>
  <div id="dashboard_level_01"></div>
  <div id="dashboard_level_02"></div>
  <div id="programs_level_01"></div>
  <div id="programs_level_02"></div>
  <div id="programs_level_03"></div>
</div>

CSS

#slider-wrapper {
  overflow: hidden;
  float: left;
  position: relative;
  width: 29%;
  height: 100%;
}

#home {
  width: 600px;
  height: 600px;
  margin-left: 0px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wheelNavGitHub {
  height: 800px;
  width: 800px;
  margin: auto;
  /*    -moz-transition: ease 1s;
    -o-transition: ease 1s;
    -webkit-transition: ease 1s;
    transition: ease 1s;*/
}

.wheelNav {
  height: 350px;
  width: 350px;
  margin: auto;
  /*    -moz-transition: ease 1s;
    -o-transition: ease 1s;
    -webkit-transition: ease 1s;
    transition: ease 1s;*/
}

.wheelNavGitHub > svg,
.wheelNav > svg {
  width: 100%;
  height: 100%;
  font-size: 16pt;
}

@media (max-width: 880px) {
  .wheelNavGitHub {
    height: 200px;
    width: 200px;
  }
  .wheelNav {
    height: 330px;
    width: 330px;
  }
}

@media (max-width: 680px) {
  .wheelNavGitHub {
    height: 190px;
    width: 190px;
  }
  .wheelNav {
    height: 310px;
    width: 310px;
  }
}

@media (max-width: 480px) {
  .wheelNavGitHub {
    height: 180px;
    width: 180px;
  }
  .wheelNav {
    height: 290px;
    width: 290px;
  }
}


/* Css classes for radialWheel */

#wheelnav-radialWheel-slice-0 {
  fill: #cbff71;
}

#wheelnav-radialWheel-slice-1 {
  fill: #a2ff00;
}

#wheelnav-radialWheel-slice-2 {
  fill: #6ad400;
}

#wheelnav-radialWheel-slice-3 {
  fill: #09b501;
}

#wheelnav-radialWheel-slice-4 {
  fill: #028f27;
}

#wheelnav-radialWheel-slice-5 {
  fill: #0a6f25;
}

[class|=wheelnav-radialWheel-slice-hover] {
  stroke-width: 2px;
  cursor: pointer;
}

[class|=wheelnav-radialWheel-slice-selected] {
  stroke-width: 3px;
}

[class|=wheelnav-radialWheel-title] {
  cursor: pointer;
}

#wheelnav-radialWheel-title-5 > tspan {
  font-family: 'Bookman Old Style', Bookman, 'URW Bookman L', 'Palatino Linotype', serif;
}

.wheelnav-radialWheel-title-basic-5 > tspan {
  font-size: 17px;
}

.wheelnav-radialWheel-title-hover-5 > tspan {
  font-size:...

JavaScript

// inner circle
home = new wheelnav('home', null, 600, 600);

home.slicePathFunction = slicePath().PieSlice;
home.slicePathCustom = slicePath().PrieSliceCustomization();
home.slicePathCustom.minRadiusPercent = 0.11;
home.slicePathCustom.maxRadiusPercent = 0.25;
home.sliceSelectedPathCustom = home.slicePathCustom;
home.sliceInitPathCustom = home.slicePathCustom;

home.navAngle = 0;
//home.titleRotateAngle = 0;
home.titleFont = '100 11px Helvetica, Arial, sans-serif';
home.colors = ['black'];
home.clickModeRotate = false;
home.animatetime = 250;
home.animateeffect = 'linear';
home.slicePathAttr = {
  opacity: 1,
  fill: "black",
  "stroke-width": 0,
  stroke: "white",
  cursor: "pointer"
};

home.createWheel(["dash", "progs", "", "", ""]);
home.setTooltips(["The Dashboard!", "Program Information", "", "", ""]);

// dashboard first level ------------------------------------------------------------------------
dashboard_level_01 = new wheelnav('dashboard_level_01', home.raphael);

dashboard_level_01.slicePathFunction = slicePath().DonutSlice;
dashboard_level_01.slicePathCustom = slicePath().DonutSliceCustomization();
dashboard_level_01.slicePathCustom.minRadiusPercent = 0.26;
dashboard_level_01.slicePathCustom.maxRadiusPercent = 0.50;
dashboard_level_01.sliceSelectedPathCustom = dashboard_level_01.slicePathCustom;
dashboard_level_01.sliceInitPathCustom = dashboard_level_01.slicePathCustom;

dashboard_level_01.navAngle = 0;
dashboard_level_01.titleFont = '100 14px Helvetica, Arial, sans-serif';
dashboard_level_01.colors = ['#329933'];
dashboard_level_01.clickModeRotate = true;
dashboard_level_01.animatetime = 250;
dashboard_level_01.animateeffect = 'linear';
dashboard_level_01.slicePathAttr = {
  opacity: 1,
  fill: "#229933",
  "stroke-width": 1,
  stroke: "#e7e7e7",
  cursor: "pointer"
};

dashboard_level_01.createWheel(["R", "A", "Moisture", null, null, null, null, null, null, null]);
dashboard_level_01.setTooltips(["Running programs overview", "List of Alarm...