summaryrefslogtreecommitdiffstats
path: root/debian/missing-sources/epoch/tests/render/real-time/line.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/line.html
parentAdding upstream version 3.2.1. (diff)
downloadknot-resolver-debian/3.2.1-3.tar.xz
knot-resolver-debian/3.2.1-3.zip
Adding debian version 3.2.1-3.debian/3.2.1-3
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'debian/missing-sources/epoch/tests/render/real-time/line.html')
-rw-r--r--debian/missing-sources/epoch/tests/render/real-time/line.html596
1 files changed, 596 insertions, 0 deletions
diff --git a/debian/missing-sources/epoch/tests/render/real-time/line.html b/debian/missing-sources/epoch/tests/render/real-time/line.html
new file mode 100644
index 0000000..3346c98
--- /dev/null
+++ b/debian/missing-sources/epoch/tests/render/real-time/line.html
@@ -0,0 +1,596 @@
+<!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.js" charset="utf-8"></script>
+ <script src="../../../dist/js/epoch.js"></script>
+ <link rel="stylesheet" type="text/css" href="../../../dist/css/epoch.css">
+
+ <script>
+ var nextTime = (function() {
+ var currentTime = parseInt(new Date().getTime() / 1000);
+ return function() { return currentTime++; }
+ })();
+ </script>
+ </head>
+ <body>
+ <h1>Real-time Line Plot Test</h1>
+ <p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> &raquo; Real-time Line</p>
+ <ol>
+ <li><a href="#test-1">Single Series</a></li>
+ <li><a href="#test-2">Single Series Single Transition</a></li>
+ <li><a href="#test-3">Single Seires Stream</a></li>
+ <li><a href="#test-4">Multi Series</a></li>
+ <li><a href="#test-5">Multi Series Single Transition</a></li>
+ <li><a href="#test-6">Multi Seires Stream</a></li>
+ <li><a href="#test-7">Color Override</a></li>
+ <li><a href="#test-8">Categorical Colors</a></li>
+ <li><a href="#test-9">Show/Hide Layers</a></li>
+ <li><a href="#test-10">Show/Hide Layers</a></li>
+ <li><a href="#test-11">Multiaxes</a></li>
+ </ol>
+
+ <!-- Test 1 -->
+ <div id="test-1" class="test">
+ <h2>1. Single Series</h2>
+ <p>
+ Correctly render a single series plot of <code>y = cos(x) + 1</code> over the range <code>[0, 2&pi;]</code>.
+ </p>
+ <div class="epoch"></div>
+ </div>
+
+ <script>
+ $(function() {
+ var data = [{ label: 'A', values: [] }],
+ length = 40;
+
+ for (var i = 0; i < length; i++) {
+ var x = i * 2 * Math.PI / length,
+ y = Math.cos(x) + 1,
+ time = nextTime();
+ data[0].values.push({time: time, y: y});
+ }
+
+ $('#test-1 .epoch').epoch({ type: 'time.line', data: data });
+ });
+ </script>
+
+ <!-- Test 2 -->
+ <div id="test-2" class="test">
+ <h2>2. Single Series Single Transition</h2>
+ <p>
+ Correctly render a single series plot of <code>y = sin(x) + 1</code>. When the button is pressed push a new data point to the chart and correctly animate/render the transiton.
+ </p>
+ <div class="epoch"></div>
+ <p><button>Next</button></p>
+ </div>
+
+ <script>
+ $(function() {
+ var data = [{ label: 'A', values: [] }],
+ length = 40,
+ nextIndex = length;
+
+ for (var i = 0; i < length; i++) {
+ var x = i * 2 * Math.PI / length,
+ y = Math.sin(x) + 1,
+ time = nextTime();
+ data[0].values.push({time: time, y: y});
+ }
+
+ var chart = $('#test-2 .epoch').epoch({
+ type: 'time.line',
+ data: data
+ });
+
+ $('#test-2 button').on('click', function(e) {
+ var x = nextIndex * 2 * Math.PI / length,
+ y = Math.sin(x) + 1,
+ time = nextTime();
+ nextIndex++;
+ chart.push([{ time: time, y: y }]);
+ });
+ });
+ </script>
+
+
+ <!-- Test 3 -->
+ <div id="test-3" class="test">
+ <h2>3. Single Seires Stream</h2>
+ <p>Correctly play / pause a single series stream of values from the plot <code>y = cos(x) + 1</code>.</p>
+ <div class="epoch"></div>
+ <p><button>Play</button></p>
+ </div>
+
+ <script>
+ $(function() {
+ var data = [{ label: 'A', values: [] }],
+ length = 40,
+ nextIndex = length,
+ playing = false,
+ interval = null;
+
+ for (var i = 0; i < length; i++) {
+ var x = i * 2 * Math.PI / length,
+ y = Math.cos(x) + 1,
+ time = nextTime();
+ data[0].values.push({time: time, y: y});
+ }
+
+ var chart = $('#test-3 .epoch').epoch({
+ type: 'time.line',
+ data: data
+ });
+
+ var pushPoint = function() {
+ var x = nextIndex * 2 * Math.PI / length,
+ y = Math.cos(x) + 1,
+ time = nextTime();
+ chart.push([{ time: time, y: y}]);
+ nextIndex++;
+ };
+
+ $('#test-3 button').on('click', function(e) {
+ if (playing) {
+ $(e.target).text('Play');
+ clearInterval(interval);
+ }
+ else {
+ $(e.target).text('Pause');
+ pushPoint();
+ interval = setInterval(pushPoint, 1000);
+ }
+ playing = !playing;
+ });
+ });
+ </script>
+
+ <!-- Test 4 -->
+ <div id="test-4" class="test">
+ <h2>4. Multi Series</h2>
+ <p>Correctly render a multi series plot of the following functions:</p>
+ <ul>
+ <li><code>y = log(x+1)</code></li>
+ <li><code>y = 2*log(x+1)</code></li>
+ <li><code>y = 3*log(x+1)</code></li>
+ </ul>
+ <div class="epoch"></div>
+ </div>
+
+ <script>
+ $(function() {
+ var data = [
+ {label: 'A', values: []},
+ {label: 'B', values: []},
+ {label: 'C', values: []}
+ ],
+ length = 40;
+
+ for (var i = 0; i < length; i++) {
+ var x = i + 1,
+ time = nextTime();
+ for (var j = 0; j < data.length; j++) {
+ data[j].values.push({time: time, y: (j+1) * Math.log(x)});
+ }
+ }
+
+ $('#test-4 .epoch').epoch({
+ type: 'time.line',
+ data: data,
+ axes: ['left', 'right', 'bottom']
+ });
+ });
+ </script>
+
+
+ <!-- Test 5 -->
+ <div id="test-5" class="test">
+ <h2>5. Multi Series Single Transition</h2>
+ <p>
+ Correctly render a multi series plot of the following functions:
+ <ul>
+ <li><code>y = x</code></li>
+ <li><code>y = x<sup>1.25</sup></code></li>
+ <li><code>y = x<sup>1.5</sup></code></li>
+ </ul>
+ and correctly render/animate the transiton after pressing the "Next" button.
+ </p>
+ <div class="epoch"></div>
+ <p>
+ <button>Next</button>
+ </p>
+ </div>
+
+ <script>
+ $(function() {
+ var data = [
+ {label: 'A', values: []},
+ {label: 'B', values: []},
+ {label: 'C', values: []}
+ ],
+ length = 40,
+ scale = 0.1,
+ nextIndex = length;
+
+ for (var i = 0; i < length; i++) {
+ var x = i * scale,
+ time = nextTime();
+ data[0].values.push({time: time, y: x});
+ data[1].values.push({time: time, y: Math.pow(x, 1.25)});
+ data[2].values.push({time: time, y: Math.pow(x, 1.5)});
+ }
+
+ var chart = $('#test-5 .epoch').epoch({
+ type: 'time.line',
+ data: data,
+ axes: ['left', 'right', 'bottom']
+ });
+
+ $('#test-5 button').on('click', function(e) {
+ var x = nextIndex * scale,
+ time = nextTime();
+ nextIndex++;
+ chart.push([
+ {time: time, y: x},
+ {time: time, y: Math.pow(x, 1.25)},
+ {time: time, y: Math.pow(x, 1.5)}
+ ]);
+ });
+ });
+ </script>
+
+ <!-- Test 6 -->
+ <div id="test-6" class="test">
+ <h2>6. Multi Seires Stream</h2>
+ <p>
+ Correctly play / pause a multi series stream of values over the following plots:
+ <ul>
+ <li><code>x</code></li>
+ <li><code>x * log(x)</code></li>
+ <li><code>x * log<sup>2</sup>(x)</code></li>
+ </ul>
+ </p>
+ <div class="epoch"></div>
+ <p><button>Play</button></p>
+ </div>
+
+ <script>
+ $(function() {
+ var data = [
+ {label: 'A', values: []},
+ {label: 'B', values: []},
+ {label: 'C', values: []}
+ ],
+ length = 40,
+ nextIndex = length,
+ scale = 0.1,
+ playing = false,
+ interval = null;
+
+ for (var i = 0; i < length; i++) {
+ var x = (i+1) * scale,
+ time = nextTime();
+ data[0].values.push({time: time, y: x});
+ data[1].values.push({time: time, y: x * Math.log(x)});
+ data[2].values.push({time: time, y: x * Math.pow(Math.log(x), 2)});
+ }
+
+ var chart = $('#test-6 .epoch').epoch({
+ type: 'time.line',
+ data: data,
+ axes: ['right', 'bottom']
+ });
+
+ var pushPoint = function() {
+ var x = (nextIndex +1) * scale,
+ time = nextTime();
+ chart.push([
+ { time: time, y: x},
+ { time: time, y: x * Math.log(x)},
+ { time: time, y: x * Math.pow(Math.log(x), 2)}
+ ]);
+ nextIndex++;
+ };
+
+ $('#test-6 button').on('click', function(e) {
+ if (playing) {
+ $(e.target).text('Play');
+ clearInterval(interval);
+ }
+ else {
+ $(e.target).text('Pause');
+ interval = setInterval(pushPoint, 1000);
+ pushPoint();
+ }
+ playing = !playing;
+ });
+ });
+ </script>
+
+ <!-- Test 7 -->
+ <div id="test-7" class="test">
+ <h2>7. Color Override</h2>
+ <p>The first layer should pink, the second green, and the third blue.</p>
+ <div id="test-7-plot" class="epoch"></div>
+ </div>
+
+ <style>
+ #test-7-plot .a .line { stroke: pink; }
+ #test-7-plot .b .line { stroke: green; }
+ #test-7-plot .c .line { stroke: blue; }
+ </style>
+
+ <script>
+ $(function() {
+ var data = [
+ {label: 'A', values: []},
+ {label: 'B', values: []},
+ {label: 'C', values: []}
+ ],
+ length = 40;
+
+ for (var i = 0; i < length; i++) {
+ var x = i + 1,
+ time = nextTime();
+ for (var j = 0; j < data.length; j++) {
+ data[j].values.push({time: time, y: (j+1) * Math.log(x)});
+ }
+ }
+
+ $('#test-7 .epoch').epoch({
+ type: 'time.line',
+ data: data
+ });
+ });
+ </script>
+
+ <!-- Test 8 -->
+ <div id="test-8" class="test">
+ <h2>8. Categorical Colors</h2>
+ <p>Correctly render and switch between different categorical colors. Unlike with the basic charts this doesn't occur just by switching the class name on the containing element. The CSS query engine must be purge and the plot must be manually redrawn, like so:<code><pre>
+Epoch.QueryCSS.purge();
+chart.draw();
+</pre></code>
+ </p>
+
+ <div class="epoch category10"></div>
+
+ <p>
+ <button data-class="category10">category10</button>
+ <button data-class="category20">category20</button>
+ <button data-class="category20b">category20b</button>
+ <button data-class="category20c">category20c</button>
+ </p>
+ </div>
+
+ <script>
+ $(function() {
+ var data = [],
+ length = 41,
+ className = "category10",
+ layers = 8,
+ time = nextTime();
+
+ for (var i = 0; i < layers; i++) {
+ var layer = { label: String.fromCharCode(i+65), values: [] };
+ for (var j = 0; j < length; j++) {
+ var x = j + 1,
+ y = Math.pow(x, i * 0.02);
+ layer.values.push({ time: time + j, y: y });
+ }
+ data.push(layer);
+ }
+
+ var chart = $('#test-8 .epoch').epoch({ type: 'time.line', data: data });
+
+ $('#test-8 button').on('click', function(e) {
+ $('#test-8 .epoch').removeClass(className);
+ className = $(e.target).attr('data-class');
+ $('#test-8 .epoch').addClass(className);
+ Epoch.QueryCSS.purge();
+ chart.draw();
+ });
+ });
+ </script>
+
+ <!-- Test 9 -->
+ <div id="test-9" class="test">
+ <h2>9. Show/Hide Layers</h2>
+ <div class="epoch"></div>
+ <p>
+ <button class="toggle" data-index="0">Toggle A</button>
+ <button class="toggle" data-index="1">Toggle B</button>
+ <button class="toggle" data-index="2">Toggle C</button> |
+ <button class="playback">Play</button>
+ </p>
+ </div>
+ <script>
+ $(function() {
+ var data = [
+ {label: 'A', values: []},
+ {label: 'B', values: []},
+ {label: 'C', values: []}
+ ],
+ length = 40,
+ nextIndex = length,
+ scale = 0.1,
+ playing = false,
+ interval = null;
+
+ for (var i = 0; i < length; i++) {
+ var x = (i+1) * scale,
+ time = nextTime();
+ data[0].values.push({time: time, y: x});
+ data[1].values.push({time: time, y: x * Math.log(x)});
+ data[2].values.push({time: time, y: x * Math.pow(Math.log(x), 2)});
+ }
+
+ var chart = $('#test-9 .epoch').epoch({
+ type: 'time.line',
+ data: data,
+ axes: ['right', 'bottom']
+ });
+
+ $('#test-9 .toggle').click(function(e) {
+ var index = parseInt($(e.target).attr('data-index'));
+ chart.toggleLayer(index);
+ });
+
+ var pushPoint = function() {
+ var x = (nextIndex +1) * scale,
+ time = nextTime();
+ chart.push([
+ { time: time, y: x},
+ { time: time, y: x * Math.log(x)},
+ { time: time, y: x * Math.pow(Math.log(x), 2)}
+ ]);
+ nextIndex++;
+ };
+
+ $('#test-9 .playback').on('click', function(e) {
+ if (playing) {
+ $(e.target).text('Play');
+ clearInterval(interval);
+ }
+ else {
+ $(e.target).text('Pause');
+ interval = setInterval(pushPoint, 1000);
+ pushPoint();
+ }
+ playing = !playing;
+ });
+ });
+ </script>
+
+ <!-- Test 10 -->
+ <div id="test-10" class="test">
+ <h2>10. Fixed Range</h2>
+ <p>
+ Render a single series plot of <code>y = cos(x)</code>. Instead of automatically setting the range to <code>[-1, 1]</code>, the range is manually set to <code>[-2, 5]</code>.
+ </p>
+ <div class="epoch"></div>
+ </div>
+
+ <script>
+ $(function() {
+ var data = [{ label: 'A', values: [] }],
+ length = 40;
+
+ for (var i = 0; i < length; i++) {
+ var x = i * 2 * Math.PI / length,
+ y = Math.cos(x),
+ time = nextTime();
+ data[0].values.push({time: time, y: y});
+ }
+
+ $('#test-10 .epoch').epoch({
+ type: 'time.line',
+ axes: ['right', 'bottom'],
+ data: data,
+ range: [-2, 5]
+ });
+ });
+ </script>
+
+ <!-- Test 11 -->
+ <div id="test-11" class="test">
+ <h2>11. Multi-axes</h2>
+ <p>
+ Render a plot that uses independent axes ranges for the left and
+ right sides.
+ </p>
+ <div class="epoch"></div>
+ </div>
+
+ <script>
+ $(function() {
+ var data = [
+ {
+ label: 'A',
+ values: [],
+ range: [-5, 5]
+ },
+ {
+ label: 'B',
+ values: [],
+ range: [0, 100]
+ }
+ ];
+ var length = 40;
+
+ for (var i = 0; i < length; i++) {
+ var x = i * 2 * Math.PI / length,
+ y = Math.cos(x) + x / 4,
+ y2 = i * 100/40,
+ time = nextTime();
+ data[0].values.push({time: time, y: y});
+ data[1].values.push({time: time, y: y2});
+ }
+
+ $('#test-11 .epoch').epoch({
+ type: 'time.line',
+ axes: ['left', 'right'],
+ data: data,
+ range: {
+ right: [-5, 5],
+ left: [0, 100]
+ }
+ });
+ });
+ </script>
+
+ <!-- Test 12 -->
+ <div id="test-12" class="test">
+ <h2>12. Multi-axes with Labeled Ranges</h2>
+ <p>
+ Render a plot that uses independent axes ranges for the left and
+ right sides that are associated to labels in the chart data.
+ </p>
+ <div class="epoch"></div>
+ </div>
+
+ <script>
+ $(function() {
+ var data = [
+ {
+ label: 'A',
+ values: [],
+ range: 'range-one'
+ },
+ {
+ label: 'B',
+ values: [],
+ range: 'range-two'
+ },
+ {
+ label: 'C',
+ values: [],
+ range: 'range-one'
+ }
+ ];
+ var length = 50;
+
+ for (var i = 0; i < length; i++) {
+ var y = Math.random() * 100;
+ var y2 = Math.random() * 2;
+ var y3 = Math.random() * 50 + 75
+ var time = nextTime();
+ data[0].values.push({time: time, y: y});
+ data[1].values.push({time: time, y: y2});
+ data[2].values.push({time: time, y: y3});
+ }
+
+ $('#test-12 .epoch').epoch({
+ type: 'time.line',
+ axes: ['left', 'right'],
+ data: data,
+ range: {
+ right: 'range-one',
+ left: 'range-two'
+ }
+ });
+ });
+ </script>
+ </body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-21 21:43:02 +0000