JSFiddle - React, Tailwind, and code Playground

by Angelos Chaidas

HTML

<html>
<script src="https://registry.my-netdata.io/dashboard.js"></script>
<body>

<div style="padding-top: 50px;">
	Charts coming from <b>registry.my-netdata.io</b>
	<br/>
	<div data-netdata="web_log_nginx.response_statuses"
	     data-host="https://registry.my-netdata.io"
	     data-chart-library="gauge"
	     data-width="19%"
	     data-height="200px"
	     data-points="500"
	     data-title="nginx requests"
	></div>

	<div data-netdata="web_log_nginx.response_statuses"
	     data-host="https://registry.my-netdata.io"
	     data-width="80%"
	     data-points="500"
	     data-height="200px"
	></div>
</div>

<div style="padding-top: 50px;">
	Charts coming from <b>frankfurt.my-netdata.io</b>
	<br/>
	<div data-netdata="tc.world_out"
	     data-host="https://frankfurt.my-netdata.io"
	     data-chart-library="d3pie"
	     data-width="19%"
	     data-height="200px"
	     data-points="500"
	></div>

	<div data-netdata="tc.world_out"
	     data-host="https://frankfurt.my-netdata.io"
	     data-width="80%"
	     data-height="200px"
	     data-points="500"
	></div>
</div>

<div style="padding-top: 50px;">
	Charts coming from <b>cdn77.my-netdata.io</b>
	<br/>
	<div data-netdata="system.cpu"
	     data-host="https://cdn77.my-netdata.io"
	     data-chart-library="d3pie"
	     data-width="19%"
	     data-height="200px"
	     data-points="500"
	></div>

	<div data-netdata="system.cpu"
	     data-host="https://cdn77.my-netdata.io"
	     data-width="80%"
	     data-height="200px"
	     data-points="500"
	></div>
</div>

<div style="padding-top: 50px;">
	<ul>
		<li><code>DRAG with mouse</code> = pan the sharts horizontally</li>
		<li><code>SHIFT + mouse wheel</code> = zoom in / out</li>
		<li><code>SHIFT + select area on a chart</code> = zoom in to that area</li>
		<li><code>ALT + select area on a chart</code> = mark the same area on all charts</li>
	</ul>
</div>

</body>
</html>