summaryrefslogtreecommitdiffstats
path: root/debian/missing-sources/epoch/tests/render/basic/area.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/basic/area.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/basic/area.html')
-rw-r--r--debian/missing-sources/epoch/tests/render/basic/area.html450
1 files changed, 450 insertions, 0 deletions
diff --git a/debian/missing-sources/epoch/tests/render/basic/area.html b/debian/missing-sources/epoch/tests/render/basic/area.html
new file mode 100644
index 0000000..ea23851
--- /dev/null
+++ b/debian/missing-sources/epoch/tests/render/basic/area.html
@@ -0,0 +1,450 @@
+<!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>Basic Area Chart Test</h1>
+ <p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> &raquo; Basic Area</p>
+
+ <ol>
+ <li><a href="#test-1">Single Series</a></li>
+ <li><a href="#test-2">Single Series II</a></li>
+ <li><a href="#test-3">Multi Series</a></li>
+ <li><a href="#test-4">Multi Series II</a></li>
+ <li><a href="#test-5">Single Series Transition</a></li>
+ <li><a href="#test-6">Multi Series Transition</a></li>
+ <li><a href="#test-7">Single Series to Multi Series Transition</a></li>
+ <li><a href="#test-8">Layer Color Override</a></li>
+ <li><a href="#test-9">Categorical Color Switching</a></li>
+ <li><a href="#test-10">Multi Series without Labels</a></li>
+ <li><a href="#test-11">Hide/Show Layers</a></li>
+ <li><a href="#test-12">Data Format</a></li>
+ </ol>
+
+
+ <!-- Test 1 -->
+ <div id="test-1" class="test">
+ <h2>1. Single Series</h2>
+ <p>It should display a 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 = 64;
+
+ for (var i = 0; i < length; i++) {
+ var x = i * 2 * Math.PI / length,
+ y = Math.cos(x) + 1;
+ data[0].values.push({x: x, y: y});
+ }
+
+ $('#test-1 .epoch').epoch({ type: 'area', data: data });
+ });
+ </script>
+
+
+ <!-- Test 2 -->
+ <div id="test-2" class="test">
+ <h2>2. Single Series II</h2>
+ <p>It should display a plot of <code>y = sin(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 = 64;
+
+ for (var i = 0; i < length; i++) {
+ var x = i * 2 * Math.PI / length,
+ y = Math.sin(x) + 1;
+ data[0].values.push({x: x, y: y});
+ }
+
+ $('#test-2 .epoch').epoch({ type: 'area', data: data });
+ });
+ </script>
+
+
+ <!-- Test 3 -->
+ <div id="test-3" class="test">
+ <h2>3. Multi-series Plot</h2>
+ <p>
+ It should display a plot of the following functions stacked atop one another:
+ <ul>
+ <li><code>y = x</code></li>
+ <li><code>y = 2x</code></li>
+ <li><code>y = 3x</code></li>
+ </ul>
+ over the range <code>[0, 10)</code>.
+ </p>
+ <div class="epoch"></div>
+ </div>
+
+ <script>
+ $(function(){
+ var data = [
+ {label: 'A', values: []},
+ {label: 'B', values: []},
+ {label: 'C', values: []}
+ ],
+ length = 32;
+
+ for (var i = 0; i < length; i++) {
+ var x = i * 10 / length;
+ data[0].values.push({x: x, y: x});
+ data[1].values.push({x: x, y: 2*x});
+ data[2].values.push({x: x, y: 3*x});
+ }
+
+ $('#test-3 .epoch').epoch({ type: 'area', data: data });
+ });
+ </script>
+
+
+ <!-- Test 4 -->
+ <div id="test-4" class="test">
+ <h2>4. Multi-series Plot II</h2>
+ <p>
+ It should display a plot of the following functions stacked atop one another:
+ <ul>
+ <li><code>y = |x|</code></li>
+ <li><code>y = x<sup>2</sup></code></li>
+ <li><code>y = |x<sup>3</sup>|</code></li>
+ </ul>
+ over the range [-1, 1).
+ </p>
+ <div class="epoch"></div>
+ </div>
+
+ <script>
+ $(function() {
+ var data = [
+ {label: 'A', values: []},
+ {label: 'B', values: []},
+ {label: 'C', values: []}
+ ],
+ length = 64;
+
+ for (var i = 0; i < length; i++) {
+ var x = (i - length / 2) / (length / 2);
+ data[0].values.push({x: x, y: Math.abs(x)});
+ data[1].values.push({x: x, y: Math.pow(x, 2)});
+ data[2].values.push({x: x, y: Math.abs(Math.pow(x, 3))});
+ }
+
+ $('#test-4 .epoch').epoch({ type: 'area', data: data });
+ });
+ </script>
+
+
+ <!-- Test 5 -->
+ <div id="test-5" class="test">
+ <h2>5. Single Series Transition</h2>
+ <p>
+ It should correctly transition between the plots <code>y = |x|</code> over the range [-10, 10) and <code>y = x<sup>2</sup></code> over the range [-20, 20). The transition should be initiated when pressing the buttons below the plot.
+ </p>
+ <div class="epoch"></div>
+ <p>
+ <button data-index="0">y = x</button>
+ <button data-index="1">y = x^2</button>
+ </p>
+ </div>
+
+ <script>
+ $(function() {
+ var data1 = [{label: 'A', values: []}],
+ data2 = [{label: 'B', values: []}],
+ data = [data1, data2],
+ length = 64;
+
+ for (var i = 0; i < length; i++) {
+ var x1 = (i - length / 2) * 10 / (length / 2),
+ y1 = Math.abs(x1),
+ x2 = (i - length / 2) * 20 / (length / 2),
+ y2 = Math.pow(x2, 2);
+ data1[0].values.push({x: x1, y: y1});
+ data2[0].values.push({x: x2, y: y2});
+ }
+
+ var chart = $('#test-5 .epoch').epoch({
+ type: 'area',
+ data: data1
+ });
+
+ $('#test-5 button').on('click', function(e) {
+ var index = parseInt($(e.target).attr('data-index'));
+ chart.update(data[index]);
+ });
+ });
+ </script>
+
+ <!-- Test 6 -->
+ <div id="test-6" class="test">
+ <h2>6. Multi Series Transition</h2>
+ <p>
+ It should correctly render and transition between Set A:
+ <ul>
+ <li><code>y = x</code></li>
+ <li><code>y = 2*x</code></li>
+ <li><code>y = 3*x</code></li>
+ </ul>
+ over the range [1, 100). and Set B:
+ <ul>
+ <li><code>y = ln(x)</code></li>
+ <li><code>y = 2*ln(x)</code></li>
+ <li><code>y = 3*ln(x)</code></li>
+ </ul>
+ over the range [1, 100). The transition should be initiated when pressing the buttons below the plot.
+ <div class="epoch"></div>
+ <p>
+ <button data-index="0">Set A</button>
+ <button data-index="1">Set B</button>
+ </p>
+ </div>
+
+ <script>
+ $(function() {
+ var data1 = [
+ {label: 'A', values: []},
+ {label: 'B', values: []},
+ {label: 'C', values: []}
+ ];
+
+ var data2 = [
+ {label: 'A', values: []},
+ {label: 'B', values: []},
+ {label: 'C', values: []}
+ ];
+
+ var data = [data1, data2],
+ length = 128;
+
+ for (var i = 0; i < length; i++) {
+ var x = (i * 99 / length) + 1;
+
+ data1[0].values.push({x: x, y: x});
+ data1[1].values.push({x: x, y: 2*x});
+ data1[2].values.push({x: x, y: 3*x});
+
+ data2[0].values.push({x: x, y: Math.log(x)});
+ data2[1].values.push({x: x, y: 2*Math.log(x)});
+ data2[2].values.push({x: x, y: 3*Math.log(x)});
+ }
+
+ var chart = $('#test-6 .epoch').epoch({ type: 'area', data: data1 });
+
+ $('#test-6 button').on('click', function(e) {
+ var index = parseInt($(e.target).attr('data-index'));
+ chart.update(data[index]);
+ });
+ });
+ </script>
+
+
+ <!-- Test 7 -->
+ <div id="test-7" class="test">
+ <h2>7. Single Series to Multi Series Transition</h2>
+ <p>
+ It should correctly transition between a single series, plotting the functions:
+ <ul>
+ <li><code>y = x<sup>2</sup> - 0.5*x</code></li>
+ </ul>
+ To a multi series set, plotting the functions:
+ <ul>
+ <li><code>y = ln(x)</code></li>
+ <li><code>y = x</code></li>
+ <li><code>y = x * ln(x)</code></li>
+ </ul>
+ over the range [1, 4) for all plots. The transition should be initiated when pressing the buttons below the plot.
+ </p>
+ <div class="epoch"></div>
+ <p>
+ <button data-index="0">Single</button>
+ <button data-index="1">Multi</button>
+ </p>
+ </div>
+
+ <script>
+ $(function() {
+ var data1 = [{label: 'A', values: []}],
+ data2 = [
+ {label: 'A', values: []},
+ {label: 'B', values: []},
+ {label: 'C', values: []}
+ ],
+ data = [data1, data2],
+ length = 64;
+
+ for (var i = 0; i < length; i++) {
+ var x = (3*i/length) + 1;
+ data1[0].values.push({x: x, y: x*x - 0.5*x});
+ data2[0].values.push({x: x, y: Math.log(x)});
+ data2[1].values.push({x: x, y: x});
+ data2[2].values.push({x: x, y: x * Math.log(x)});
+ }
+
+ var chart = $('#test-7 .epoch').epoch({ type: 'area', data: data1 });
+
+ $('#test-7 button').on('click', function(e) {
+ var index = parseInt($(e.target).attr('data-index'));
+ chart.update(data[index]);
+ });
+ });
+ </script>
+
+ <!-- Test 8 -->
+ <div id="test-8" class="test">
+ <h2>8. Layer Color Override</h2>
+ <p>
+ It should display the first layer of the plot as pink, the second layer as green, and the third layer as blue.
+ </p>
+ <div class="epoch"></div>
+ </div>
+
+ <style>
+ #test-8 .epoch .a .area { fill: pink; }
+ #test-8 .epoch .b .area { fill: green; }
+ #test-8 .epoch .c .area { fill: blue; }
+ </style>
+
+ <script>
+ $(function() {
+ var data = [
+ {label: 'A', values: []},
+ {label: 'B', values: []},
+ {label: 'C', values: []}
+ ],
+ length = 128;
+
+ for (var i = 0; i < length; i++) {
+ var x = i * 10 / length + 1,
+ y = x * Math.log(x);
+ for (var j = 0; j < data.length; j++) {
+ data[j].values.push({x: x, y: y});
+ }
+ }
+
+ $('#test-8 .epoch').epoch({ type: 'area', data: data });
+ });
+ </script>
+
+ <!-- Test 9 -->
+ <div id="test-9" class="test">
+ <h2>9. Categorical Color Switching</h3>
+ <p>
+ It should change layer colors automatically when switching between the following categorical color classes on the containing element:
+ <ul>
+ <li><code>category10</code></li>
+ <li><code>category20</code></li>
+ <li><code>category20b</code></li>
+ <li><code>category20c</code></li>
+ </ul>
+ The colors should change when pressing the buttons for each categorical type below the chart.
+ </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 = [
+ {label: 'A', values: []},
+ {label: 'B', values: []},
+ {label: 'C', values: []},
+ {label: 'D', values: []},
+ {label: 'E', values: []},
+ {label: 'F', values: []},
+ {label: 'G', values: []}
+ ],
+ length = 128,
+ className = 'category10';
+
+ for (var i = 0; i < length; i++) {
+ var x = i * 1 / length;
+ for (var j = 0; j < data.length; j++) {
+ data[j].values.push({x: x, y: Math.pow(x, j+1)});
+ }
+ }
+
+ $('#test-9 .epoch').epoch({ type: 'area', data: data });
+
+ $('#test-9 button').on('click', function(e) {
+ $('#test-9 .epoch').removeClass(className);
+ className = $(e.target).attr('data-class');
+ $('#test-9 .epoch').addClass(className);
+ });
+ });
+ </script>
+
+ <!-- Test 10 -->
+ <div id="test-10" class="test">
+ <h2>10. Multi Series without Labels</h2>
+ <p>
+ Correctly render a multi-series plot of:
+ <ul>
+ <li><code>y = sin(x) + 1</code></li>
+ <li><code>y = cos(x) + 1</code></li>
+ </ul>
+ where the layers are given without labels.
+ </p>
+ <div class="epoch"></div>
+ </div>
+ <script>
+ $(function() {
+ var data = [{values: []}, {values: []}],
+ length = 128;
+
+ for (var i = 0; i <= length; i++) {
+ var x = i * 4 * Math.PI / length;
+ data[0].values.push({x: x, y: Math.sin(x) + 1});
+ data[1].values.push({x: x, y: Math.cos(x) + 1});
+ }
+
+ $('#test-10 .epoch').epoch({ type: 'area', data: data });
+ });
+ </script>
+
+ <!-- Test 11 -->
+ <div id="test-11" class="test">
+ <h2>11. Hide/Show Layers</h2>
+ <p>Correctly hide and show multiple layers</p>
+ <div class="epoch"></div>
+ <p>
+ <button data-index="0">Toggle A</button>
+ <button data-index="1">Toggle B</button>
+ <button data-index="2">Toggle C</button>
+ </p>
+ </div>
+ <script>
+ $(function() {
+ var chart = $('#test-11 .epoch').epoch({
+ type: 'area',
+ data: data().add(function(x) { return x; })
+ .add(function(x) { return 1.5*x; })
+ .add(function(x) { return 2.0*x; }).get([0, 10], 1)
+ });
+
+ $('#test-11 button').click(function(e) {
+ var index = parseInt($(e.target).attr('data-index'));
+ chart.toggleLayer(index);
+ });
+ });
+ </script>
+
+ </body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-19 23:24:59 +0000