summaryrefslogtreecommitdiffstats
path: root/debian/missing-sources/epoch/tests/render/real-time/heatmap.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 15:26:01 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 15:26:01 +0000
commitef03469fec14f1f0358b690934fc173d744f4e7d (patch)
tree8be439d7b2f1d7c8283b745919b9e66481a950e7 /debian/missing-sources/epoch/tests/render/real-time/heatmap.html
parentAdding upstream version 5.6.0. (diff)
downloadknot-resolver-ef03469fec14f1f0358b690934fc173d744f4e7d.tar.xz
knot-resolver-ef03469fec14f1f0358b690934fc173d744f4e7d.zip
Adding debian version 5.6.0-1.debian/5.6.0-1debian
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'debian/missing-sources/epoch/tests/render/real-time/heatmap.html')
-rw-r--r--debian/missing-sources/epoch/tests/render/real-time/heatmap.html559
1 files changed, 559 insertions, 0 deletions
diff --git a/debian/missing-sources/epoch/tests/render/real-time/heatmap.html b/debian/missing-sources/epoch/tests/render/real-time/heatmap.html
new file mode 100644
index 0000000..ddabe2e
--- /dev/null
+++ b/debian/missing-sources/epoch/tests/render/real-time/heatmap.html
@@ -0,0 +1,559 @@
+<!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">
+ </head>
+ <body>
+ <h1>Real-time Heatmap Plot Test</h1>
+ <p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> &raquo; Real-time Heatmap</p>
+ <ol>
+ <li><a href="#test-1">Single Series - Normal</a></li>
+ <li><a href="#test-2">Single Series - Beta</a></li>
+ <li><a href="#test-3">Single Series - Normal, Single Update</a></li>
+ <li><a href="#test-4">Single Series - Beta, Stream Update</a></li>
+ <li><a href="#test-5">Single Series - Color Override</a></li>
+ <li><a href="#test-6">Multi Series - Normal + Beta</a></li>
+ <li><a href="#test-7">Multi Series Color Override</a></li>
+ <li><a href="#test-8">Range Independent Bucketing</a></li>
+ <li><a href="#test-9">Option: buckets</a></li>
+ <li><a href="#test-10">Option: bucketRange</a></li>
+ <li><a href="#test-11">Option: bucketPadding</a></li>
+ <li><a href="#test-12">Option: cutOutliers</a></li>
+ <li><a href="#test-13">Option: opacity</a></li>
+ <li><a href="#test-14">Show/Hide Layer</a></li>
+ </ol>
+
+ <!-- Test 1 -->
+ <div id="test-1" class="test">
+ <h2>1. Single Series - Normal</h2>
+ <p>Select random values from the normal distribution and display them with the heatmap.</p>
+ <div class="epoch"></div>
+ </div>
+ <script>
+ $(function() {
+ var data = new NormalData(1);
+ $('#test-1 .epoch').epoch({
+ type: 'time.heatmap',
+ data: data.history(120),
+ windowSize: 120,
+ buckets: 20
+ });
+ });
+ </script>
+
+ <!-- Test 2 -->
+ <div id="test-2" class="test">
+ <h2>2. Single Series - Beta </h2>
+ <p>Select random values from the Beta(2, 5) distribution and display them with the heatmap.</p>
+ <div class="epoch"></div>
+ </div>
+ <script>
+ $(function() {
+ var data = new BetaData(2, 5, 1);
+ $('#test-2 .epoch').epoch({
+ type: 'time.heatmap',
+ data: data.history(120),
+ windowSize: 120,
+ buckets: 20
+ });
+ });
+ </script>
+
+ <!-- Test 3 -->
+ <div id="test-3" class="test">
+ <h2>3. Single Sieres - Normal, Single Update</h2>
+ <p>
+ Plot the normal distribution and transition a new element when the button is pressed.
+ </p>
+ <div class="epoch"></div>
+ <p><button>Next</button></p>
+ </div>
+ <script>
+ $(function() {
+ var data = new NormalData(1);
+ var chart = $('#test-3 .epoch').epoch({
+ type: 'time.heatmap',
+ data: data.history(120),
+ windowSize: 120,
+ buckets: 20
+ });
+ $('#test-3 button').on('click', function(e) {
+ chart.push(data.next());
+ });
+ });
+ </script>
+
+ <!-- Test 4 -->
+ <div id="test-4" class="test">
+ <h2>4. Single Series - Beta, Stream Update</h2>
+ <p>
+ Plot the Beta(2, 5) distribution and begin streaming new elements each second once the
+ button is pressed.
+ </p>
+ <div class="epoch"></div>
+ <button>Play</button>
+ </div>
+
+ <script>
+ $(function() {
+ var data = new BetaData(2, 5, 1),
+ interval = null;
+ var chart = $('#test-4 .epoch').epoch({
+ type: 'time.heatmap',
+ data: data.history(120),
+ windowSize: 120,
+ buckets: 20
+ });
+ $('#test-4 button').on('click', function(e) {
+ if (interval === null) {
+ chart.push(data.next());
+ interval = setInterval(function() {
+ chart.push(data.next());
+ }, 1000);
+ $(e.target).text('Pause');
+ }
+ else {
+ clearInterval(interval);
+ interval = null;
+ $(e.target).text('Play');
+ }
+ });
+ });
+ </script>
+
+ <!-- Test 5 -->
+ <div id="test-5" class="test">
+ <h2>5. Single Series - Color Override</h2>
+ <p>Change the bucket base color to orange and plot the Beta(2, 2) distribution.</p>
+ <div id="test-5-plot" class="epoch"></div>
+ </div>
+
+ <style>
+ #test-5-plot .a rect.bucket { fill: darkorange; }
+ </style>
+
+ <script>
+ $(function() {
+ var data = new BetaData(2, 2, 1);
+ $('#test-5 .epoch').epoch({
+ type: 'time.heatmap',
+ data: data.history(120),
+ windowSize: 120,
+ buckets: 20
+ });
+ });
+ </script>
+
+ <!-- Test 6 -->
+ <div id="test-6" class="test">
+ <h2>6. Multi Series - Normal + Beta</h2>
+ <p>
+ Plot the Beta(2,5) and Normal distributions as two layers in a single heatmap. Stream elements to the plot
+ by pressing the button. The normal distribution layer is in blue and the beta in green.
+ </p>
+ <div class="epoch"></div>
+ <button>Play</button>
+ </div>
+ <script>
+ $(function() {
+ var normal = new NormalData(1),
+ normalData = normal.history(120)[0],
+ beta = new BetaData(2, 5, 1),
+ betaData = beta.history(120)[0],
+ data = [normalData, betaData],
+ interval = null;
+
+ var chart = $('#test-6 .epoch').epoch({
+ type: 'time.heatmap',
+ data: data,
+ windowSize: 120,
+ buckets: 20
+ });
+
+ function pushNext() {
+ chart.push([normal.next()[0], beta.next()[0]]);
+ }
+
+ $('#test-6 button').on('click', function(e) {
+ if (interval == null) {
+ pushNext();
+ interval = setInterval(pushNext, 1000);
+ $(e.target).text('Pause');
+ }
+ else {
+ clearInterval(interval);
+ interval = null;
+ $(e.target).text('Play');
+ }
+ });
+ });
+ </script>
+
+ <!-- Test 7 -->
+ <div id="test-7" class="test">
+ <h2>7. Multi Series Color Override</h2>
+ <p>
+ Plot the normal distribution and the Beta(2, 5) distribution overrding normal to be in red, and beta to
+ be in purple.
+ </p>
+ <div id="test-7-plot" class="epoch"></div>
+ </div>
+
+ <style>
+ #test-7-plot .a rect.bucket { fill: red; }
+ #test-7-plot .b rect.bucket { fill: purple; }
+ </style>
+
+ <script>
+ $(function() {
+ var normal = new NormalData(1),
+ normalData = normal.history(120)[0],
+ beta = new BetaData(2, 5, 1),
+ betaData = beta.history(120)[0],
+ interval = null;
+
+ normalData.label = 'A';
+ betaData.label = 'B';
+
+ var chart = $('#test-7 .epoch').epoch({
+ type: 'time.heatmap',
+ data: [normalData, betaData],
+ windowSize: 120,
+ buckets: 20
+ });
+ });
+ </script>
+
+ <!-- Test 8 -->
+ <div id="test-8" class="test">
+ <h2>8. Range Independent Bucketing (<a href="https://github.com/fastly/epoch/issues/41">Issue #41</a>)</h2>
+ <p>
+ Discrete bucketing of sparse histogram values should produce similar looking graphs regardless
+ of numeric relation between the range of the plot and the number of buckets.
+ </p>
+ <h3>Range [0, 100] with 20 buckets</h3>
+ <div class="chart1 epoch"></div>
+
+ <h3>Range [0, 100] with 45 buckets</h3>
+ <div class="chart2 epoch"></div>
+ </div>
+ <script>
+ $(function() {
+ var normal = new NormalData(1),
+ data = normal.history(120);
+
+ console.log(data);
+
+ $('#test-8 .chart1').epoch({
+ type: 'time.heatmap',
+ data: data,
+ windowSize: 120,
+ buckets: 20
+ });
+ $('#test-8 .chart2').epoch({
+ type: 'time.heatmap',
+ data: data,
+ windowSize: 120,
+ buckets: 45
+ });
+ });
+ </script>
+
+ <!-- Test 9 -->
+ <div id="test-9" class="test">
+ <h2>9. Option: buckets</h2>
+ <div class="epoch"></div>
+ <p>
+ <button class="playback">Play</button> |
+ <button class="buckets" data-buckets="10">10 Buckets</button>
+ <button class="buckets" data-buckets="20">20 Buckets</button>
+ <button class="buckets" data-buckets="40">40 Buckets</button>
+ </p>
+ </div>
+ <script>
+ $(function() {
+ var beta = new BetaData(2, 5, 1),
+ data = beta.history(120);
+
+ var chart = $('#test-9 .epoch').epoch({
+ type: 'time.heatmap',
+ data: data,
+ buckets: 10
+ });
+
+ var interval = null,
+ pushPoint = function () { chart.push(beta.next()); };
+
+ $('#test-9 .playback').click(function(e) {
+ if (interval == null) {
+ $(e.target).text('Pause');
+ pushPoint();
+ interval = setInterval(pushPoint, 1000);
+ }
+ else {
+ $(e.target).text('Play');
+ clearInterval(interval);
+ interval = null;
+ }
+ });
+
+ $('#test-9 .buckets').click(function(e) {
+ var buckets = parseInt($(e.target).attr('data-buckets'));
+ chart.option('buckets', buckets);
+ });
+ });
+ </script>
+
+ <!-- Test 10 -->
+ <div id="test-10" class="test">
+ <h2>10. Option: bucketRange</h2>
+ <div class="epoch"></div>
+ <p>
+ <button class="playback">Play</button> |
+ <button class="bucketRange" data-bucket-range="0,100">[0, 100]</button>
+ <button class="bucketRange" data-bucket-range="0,75">[0, 75]</button>
+ <button class="bucketRange" data-bucket-range="0,50">[0, 50]</button>
+ <button class="bucketRange" data-bucket-range="0,25">[0, 25]</button>
+ <button class="bucketRange" data-bucket-range="10,75">[10,75]</button>
+ </p>
+ </div>
+ <script>
+ $(function() {
+ var beta = window.beta = new BetaData(2, 5, 1),
+ data = beta.history(120);
+
+ var chart = $('#test-10 .epoch').epoch({
+ type: 'time.heatmap',
+ data: data,
+ axes: ['left', 'right'],
+ buckets: 20,
+ windowSize: 100,
+ cutOutliers: true
+ });
+
+ var interval = null,
+ pushPoint = function () { chart.push(beta.next()); };
+
+ $('#test-10 .playback').click(function(e) {
+ if (interval == null) {
+ $(e.target).text('Pause');
+ pushPoint();
+ interval = setInterval(pushPoint, 1000);
+ }
+ else {
+ $(e.target).text('Play');
+ clearInterval(interval);
+ interval = null;
+ }
+ });
+
+ $('#test-10 .bucketRange').click(function(e) {
+ var bucketRange = $(e.target).attr('data-bucket-range')
+ .split(',').map(function(d) { return parseInt(d); });
+ chart.option('bucketRange', bucketRange);
+ });
+ });
+ </script>
+
+ <!-- Test 11 -->
+ <div id="test-11" class="test">
+ <h2>11. Option: bucketPadding</h2>
+ <div class="epoch"></div>
+ <p>
+ <button class="playback">Play</button> |
+ <button class="bucketPadding" data-bucket-padding="0">Padding: 0</button>
+ <button class="bucketPadding" data-bucket-padding="2">Padding: 2</button>
+ <button class="bucketPadding" data-bucket-padding="4">Padding: 4</button>
+ <button class="bucketPadding" data-bucket-padding="8">Padding: 8</button>
+ </p>
+ </div>
+ <script>
+ $(function() {
+ var beta = window.beta = new BetaData(2, 5, 1),
+ data = beta.history(120);
+
+ var chart = $('#test-11 .epoch').epoch({
+ type: 'time.heatmap',
+ data: data,
+ axes: [],
+ buckets: 15,
+ windowSize: 100
+ });
+
+ var interval = null,
+ pushPoint = function () { chart.push(beta.next()); };
+
+ $('#test-11 .playback').click(function(e) {
+ if (interval == null) {
+ $(e.target).text('Pause');
+ pushPoint();
+ interval = setInterval(pushPoint, 1000);
+ }
+ else {
+ $(e.target).text('Play');
+ clearInterval(interval);
+ interval = null;
+ }
+ });
+
+ $('#test-11 .bucketPadding').click(function(e) {
+ var bucketPadding = parseInt($(e.target).attr('data-bucket-padding'));
+ console.log(bucketPadding)
+ chart.option('bucketPadding', bucketPadding);
+ });
+ });
+ </script>
+
+ <!-- Test 12 -->
+ <div id="test-12" class="test">
+ <h2>12. Option: cutOutliers</h2>
+ <div class="epoch"></div>
+ <p>
+ <button class="playback">Play</button> |
+ <button class="cutOutliers" data-value="false">Keep Outliers</button>
+ <button class="cutOutliers" data-value="true">Cut Outliers</button>
+ </p>
+ </div>
+ <script>
+ $(function() {
+ var beta = window.beta = new BetaData(2, 5, 1),
+ data = beta.history(120);
+
+ var chart = $('#test-12 .epoch').epoch({
+ type: 'time.heatmap',
+ data: data,
+ axes: ['left', 'right'],
+ bucketRange: [0, 25],
+ buckets: 15,
+ windowSize: 100
+ });
+
+ var interval = null,
+ pushPoint = function () { chart.push(beta.next()); };
+
+ $('#test-12 .playback').click(function(e) {
+ if (interval == null) {
+ $(e.target).text('Pause');
+ pushPoint();
+ interval = setInterval(pushPoint, 1000);
+ }
+ else {
+ $(e.target).text('Play');
+ clearInterval(interval);
+ interval = null;
+ }
+ });
+
+ $('#test-12 .cutOutliers').click(function(e) {
+ var cutOutliers = $(e.target).attr('data-value') == "true" ? true : false;
+ chart.option('cutOutliers', cutOutliers);
+ });
+ });
+ </script>
+
+ <div id="test-13" class="test">
+ <h2>13. Option: opacity</h2>
+ <div class="epoch"></div>
+ <p>
+ <button class="playback">Play</button> |
+ <select class="opacity">
+ <option value="root">&radic;n</option>
+ <option value="linear" selected>n</option>
+ <option value="quadratic">n<sup>2</sup></option>
+ <option value="cubic">n<sup>3</sup></option>
+ <option value="quartic">n<sup>4</sup></option>
+ <option value="quintic">n<sup>5</sup></option>
+ </select>
+ </p>
+ </div>
+ <script>
+ $(function() {
+ var beta = window.beta = new BetaData(2, 5, 1),
+ data = beta.history(120);
+
+ var chart = $('#test-13 .epoch').epoch({
+ type: 'time.heatmap',
+ data: data,
+ axes: [],
+ buckets: 20,
+ windowSize: 100
+ });
+
+ var interval = null,
+ pushPoint = function () { chart.push(beta.next()); };
+
+ $('#test-13 .playback').click(function(e) {
+ if (interval == null) {
+ $(e.target).text('Pause');
+ pushPoint();
+ interval = setInterval(pushPoint, 1000);
+ }
+ else {
+ $(e.target).text('Play');
+ clearInterval(interval);
+ interval = null;
+ }
+ });
+
+ $('#test-13 select.opacity').on('change', function(e) {
+ var opacity = $('#test-13 select.opacity').val();
+ chart.option('opacity', opacity);
+ });
+ });
+ </script>
+
+ <div id="test-14" class="test">
+ <h2>14. Show/Hide Layer</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="playback">Play</button>
+ </p>
+ </div>
+ <script>
+ $(function() {
+ var normal = new NormalData(1),
+ normalData = normal.history(120)[0],
+ beta = new BetaData(2, 5, 1),
+ betaData = beta.history(120)[0],
+ data = [normalData, betaData],
+ interval = null;
+
+ var chart = $('#test-14 .epoch').epoch({
+ type: 'time.heatmap',
+ data: data,
+ windowSize: 120,
+ buckets: 20
+ });
+
+ $('#test-14 .toggle').click(function(e) {
+ var index = parseInt($(e.target).attr('data-index'));
+ chart.toggleLayer(index);
+ });
+
+ function pushNext() {
+ chart.push([normal.next()[0], beta.next()[0]]);
+ }
+
+ $('#test-14 .playback').on('click', function(e) {
+ if (interval == null) {
+ pushNext();
+ interval = setInterval(pushNext, 1000);
+ $(e.target).text('Pause');
+ }
+ else {
+ clearInterval(interval);
+ interval = null;
+ $(e.target).text('Play');
+ }
+ });
+ });
+ </script>
+ </body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-22 20:16:56 +0000