summaryrefslogtreecommitdiffstats
path: root/debian/missing-sources/epoch/tests/render/real-time/options.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-05-06 00:55:53 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-05-06 00:55:53 +0000
commit129b974b59c74140570847bb4a2774d41d1e5fae (patch)
treef2dc68e7186b8157e33aebbc2526e016912ded82 /debian/missing-sources/epoch/tests/render/real-time/options.html
parentAdding upstream version 3.2.1. (diff)
downloadknot-resolver-129b974b59c74140570847bb4a2774d41d1e5fae.tar.xz
knot-resolver-129b974b59c74140570847bb4a2774d41d1e5fae.zip
Adding debian version 3.2.1-3.debian/3.2.1-3debian
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'debian/missing-sources/epoch/tests/render/real-time/options.html')
-rw-r--r--debian/missing-sources/epoch/tests/render/real-time/options.html299
1 files changed, 299 insertions, 0 deletions
diff --git a/debian/missing-sources/epoch/tests/render/real-time/options.html b/debian/missing-sources/epoch/tests/render/real-time/options.html
new file mode 100644
index 0000000..a2da792
--- /dev/null
+++ b/debian/missing-sources/epoch/tests/render/real-time/options.html
@@ -0,0 +1,299 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="../css/tests.css">
+ <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
+ <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+ <script src="../../../dist/js/epoch.js"></script>
+ <script src="../js/data.js"></script>
+ <link rel="stylesheet" type="text/css" href="../../../dist/css/epoch.css">
+ <style>
+ body { background: #333; color: #d0d0d0; }
+ a:link, a:visited { color: white; color: white; }
+ </style>
+ </head>
+ <body class="epoch-theme-dark">
+ <h1>Real-time Chart Options and Events</h1>
+ <p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> &raquo; Real-time Options and Events</p>
+ <ol>
+ <li><a href="#test-1">Resize</a></li>
+ <li><a href="#test-2">Axes</a></li>
+ <li><a href="#test-3">Ticks</a></li>
+ <li><a href="#test-4">Tick Formats</a></li>
+ <li><a href="#test-5">Margins</a></li>
+ </ol>
+
+ <!-- Test 1 -->
+ <div id="test-1" class="test">
+ <h2>1. Resize</h2>
+ <p>Correctly Resize a Real-time Chart.</p>
+ <div class="epoch"></div>
+ <p>
+ <button class="playback">Play</button> |
+ <button class="size" data-index="0">Size: Small</button>
+ <button class="size" data-index="1">Size: Medium</button>
+ <button class="size" data-index="2">Size: Large</button>
+ </p>
+ </div>
+ <script>
+ $(function() {
+ var step = Math.PI / 30,
+ data = time().add(function(x) { return Math.cos(x) + 1; }),
+ interval = null;
+
+ var sizes = [
+ { width: 400, height: 100 },
+ { width: 800, height: 150 },
+ { width: $('#test-1 .epoch').width(), height: $('#test-1 .epoch').height() }
+ ];
+
+ var chart = $('#test-1 .epoch').epoch({
+ type: 'time.line',
+ data: data.get([0, 2*Math.PI], step)
+ })
+
+ function pushPoint() {
+ chart.push(data.next(step));
+ }
+
+ $('#test-1 .playback').click(function(e) {
+ if (!interval) {
+ interval = setInterval(function() { pushPoint() }, 1000);
+ pushPoint();
+ $('#test-1 .playback').text('Pause');
+ }
+ else {
+ clearInterval(interval);
+ interval = null;
+ $('#test-1 .playback').text('Play');
+ }
+ });
+
+ $('#test-1 .size').click(function(e) {
+ var size = sizes[parseInt($(e.target).attr('data-index'))];
+ chart.option('width', size.width);
+ chart.option('height', size.height);
+ });
+ });
+ </script>
+
+ <!-- Test 2 -->
+ <div id="test-2" class="test">
+ <h2>2. Axes</h2>
+ <div class="epoch"></div>
+ <div class="controls">
+ <button class="playback">Play</button> |
+ <button class="axes" data-index="0">All</button>
+ <button class="axes" data-index="1">[left, right]</button>
+ <button class="axes" data-index="2">[top, bottom]</button>
+ <button class="axes" data-index="3">[left, bottom]</button>
+ <button class="axes" data-index="4">[top, right]</button>
+ <button class="axes" data-index="5">None</button>
+ </div>
+ </div>
+ <script>
+ $(function() {
+ var step = Math.PI / 30,
+ data = time().add(function(x) { return Math.sin(x) + 1; }),
+ interval = null;
+
+ var axes = [
+ ['top', 'left', 'bottom', 'right'],
+ ['left', 'right'],
+ ['top', 'bottom'],
+ ['left', 'bottom'],
+ ['top', 'right'],
+ []
+ ];
+
+ var chart = $('#test-2 .epoch').epoch({
+ type: 'time.line',
+ data: data.get([0, 2*Math.PI], step)
+ })
+
+ function pushPoint() {
+ chart.push(data.next(step));
+ }
+
+ $('#test-2 .playback').click(function(e) {
+ if (!interval) {
+ interval = setInterval(function() { pushPoint() }, 1000);
+ pushPoint();
+ $('#test-2 .playback').text('Pause');
+ }
+ else {
+ clearInterval(interval);
+ interval = null;
+ $('#test-2 .playback').text('Play');
+ }
+ });
+
+ $('#test-2 button.axes').click(function(e) {
+ chart.option('axes', axes[parseInt($(e.target).attr('data-index'))]);
+ });
+ });
+ </script>
+
+ <!-- Test 3 -->
+ <div id="test-3" class="test">
+ <h2>3. Ticks</h2>
+ <div class="epoch"></div>
+ <p>
+ <button class="playback">Play</button> |
+ <button class="ticks" data-index="0">Normal</button>
+ <button class="ticks" data-index="1">Many</button>
+ </p>
+ </div>
+ <script>
+ $(function() {
+ var step = Math.PI / 30,
+ data = time().add(function(x) { return Math.sqrt(x) * Math.sin(x) + 1; }),
+ interval = null;
+
+ var ticks = [
+ {time: 15, left: 5, right: 5},
+ {time: 5, left: 15, right: 15}
+ ];
+
+ var chart = $('#test-3 .epoch').epoch({
+ type: 'time.line',
+ data: data.get([0, 2*Math.PI], step),
+ axes: ['top', 'left', 'bottom', 'right']
+ })
+
+ function pushPoint() {
+ chart.push(data.next(step));
+ }
+
+ $('#test-3 .playback').click(function(e) {
+ if (!interval) {
+ interval = setInterval(function() { pushPoint() }, 1000);
+ pushPoint();
+ $('#test-3 .playback').text('Pause');
+ }
+ else {
+ clearInterval(interval);
+ interval = null;
+ $('#test-3 .playback').text('Play');
+ }
+ });
+
+ $('#test-3 .ticks').click(function(e) {
+ chart.option('ticks', ticks[parseInt($(e.target).attr('data-index'))]);
+ });
+ });
+ </script>
+
+ <!-- Test 4 -->
+ <div id="test-4" class="test">
+ <h2>4. Tick Formats</h2>
+ <div class="epoch"></div>
+ <p>
+ <button class="playback">Play</button> |
+ <button class="tickFormats" data-index="0">Normal</button>
+ <button class="tickFormats" data-index="1">Different</button>
+ </p>
+ </div>
+ <script>
+ $(function() {
+ var step = Math.PI / 30,
+ data = time().add(function(x) { return Math.abs(Math.sin(x)); }),
+ interval = null;
+
+ var tickFormats = [
+ {
+ top: Epoch.Formats.seconds,
+ bottom: Epoch.Formats.seconds,
+ left: Epoch.Formats.si,
+ right: Epoch.Formats.si
+ },
+ {
+ top: Epoch.Formats.si,
+ bottom: Epoch.Formats.si,
+ left: Epoch.Formats.percent,
+ right: Epoch.Formats.percent
+ }
+ ];
+
+ var chart = $('#test-4 .epoch').epoch({
+ type: 'time.area',
+ data: data.get([0, 2*Math.PI], step),
+ axes: ['top', 'left', 'bottom', 'right']
+ })
+
+ function pushPoint() {
+ chart.push(data.next(step));
+ }
+
+ $('#test-4 .playback').click(function(e) {
+ if (!interval) {
+ interval = setInterval(function() { pushPoint() }, 1000);
+ pushPoint();
+ $('#test-4 .playback').text('Pause');
+ }
+ else {
+ clearInterval(interval);
+ interval = null;
+ $('#test-4 .playback').text('Play');
+ }
+ });
+
+ $('#test-4 .tickFormats').click(function(e) {
+ chart.option('tickFormats', tickFormats[parseInt($(e.target).attr('data-index'))]);
+ });
+ });
+ </script>
+
+ <!-- Test 5 -->
+ <div id="test-5" class="test">
+ <h2>5. Margins</h2>
+ <div class="epoch"></div>
+ <p>
+ <button class="playback">Play</button> |
+ <button class="margins" data-index="0">None</button>
+ <button class="margins" data-index="1">Small</button>
+ <button class="margins" data-index="2">Big</button>
+ </p>
+ </div>
+ <script>
+ $(function() {
+ var step = Math.PI / 30,
+ data = time().add(function(x) { return 1 - Math.abs(Math.cos(x)); }),
+ interval = null;
+
+ var margins = [
+ { top: 6, bottom: 6, left: 6, right: 6 },
+ { top: 20, bottom: 20, left: 20, right: 20 },
+ { top: 100, bottom: 50, left: 50, right: 50 }
+ ];
+
+ var chart = $('#test-5 .epoch').epoch({
+ type: 'time.area',
+ data: data.get([0, 2*Math.PI], step),
+ axes: []
+ })
+
+ function pushPoint() {
+ chart.push(data.next(step));
+ }
+
+ $('#test-5 .playback').click(function(e) {
+ if (!interval) {
+ interval = setInterval(function() { pushPoint() }, 1000);
+ pushPoint();
+ $('#test-5 .playback').text('Pause');
+ }
+ else {
+ clearInterval(interval);
+ interval = null;
+ $('#test-5 .playback').text('Play');
+ }
+ });
+
+ $('#test-5 .margins').click(function(e) {
+ chart.option('margins', margins[parseInt($(e.target).attr('data-index'))]);
+ });
+ });
+ </script>
+ </body>
+</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-11 21:33:34 +0000