JSFiddle - React, Tailwind, and code Playground

by Viseth7

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.12/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.12/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"></script>
		<h1>C3js Examples Test</h1>
		<a data-uk-tooltip="title: Stats on this monitor" class="uk-icon-link gitter-icon" data-uk-icon="icon:gitter; ratio: 0.8" id="testLink" onclick="test()"> </a>
		
		
		
			<div id="modal-graph" class="uk-modal-full" uk-modal>
				<div class="uk-modal-dialog">
					<button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
					<div class="uk-modal-header">
						<h2 class="uk-modal-title">Graph</h2>
					</div>
					<form class="uk-panel uk-panel-box uk-form">
						<div class="uk-modal-body">
							<div id="chart" style="width:950px;height:400px"></div>
						</div>
						<div class="uk-modal-footer uk-text-right">
							<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
						</div>
					</form>
				</div>
			</div>

CSS

.c3-region.ERROR {
			  fill: red;
			}
			.c3-region.OK {
			  fill: green;
			}

JavaScript

function test(){
				UIkit.modal.confirm('Do you really mean to delete? This action is irreversible.', { labels: { ok: 'Yeah', cancel: 'Nope' }, stack: true }).then(function() {
					alert("test");
					
					UIkit.modal('#modal-graph').show();
					//
					// timeseries data chart
					var data = {"xs":{"Registrations":"x1","Income":"x2"},"columns":[["x1",1579274074000,1579274678000,1579275272000,1579277978000,1579278585000,1579279184000,1579279780000,1579280381000,1579280978000,1579281579000],["x2",1579274074000,1579274678000,1579275272000,1579277978000,1579278585000,1579279184000,1579279780000,1579280381000,1579280978000,1579281579000],["Registrations","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71"],["Income","95.0","200.0","317.0","428.0","513.0","608.0","703.0","798.0","903.0","1028.0","1123.0","1218.0","1313.0","1418.0","1513.0","1646.0","1751.0","1846.0","1941.0","2052.0","2158.99","2263.99","2374.99","2451.99","2451.99","2558.98","2675.98","2818.98","2935.98","3052.98","3149.98","3246.98","3375.98","3470.98","3577.97","3684.96","3771.96","3896.96","3896.96","4013.96","4192.95","4329.95","4329.95","4424.95","4519.95","4529.95","4646.95","4733.95","4850.95","5001.95","5118.95","5257.96","5406.97","5523.97","5620.97","5763.97","5870.96","5967.96","6042.95","6157.95","6252.95","6327.94","6494.94","6611.94","6611.94","6611.94","6716.94","6821.94","6821.94","6821.94","6972.94","6972.94","7017.95"]],"axes":{"Registrations":"y","Income":"y2"}};

					var config = {
						"bindto": '#chart',
						"data": data,
						"subchart":{ show:true...