summaryrefslogtreecommitdiffstats
path: root/debian/missing-sources/epoch/tests/render/basic/options.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-08 20:37:51 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-08 20:37:51 +0000
commit56ccd5615d426b5e18d1e6b9f6160d6bccac94fa (patch)
treeb31187a54880ac0bbc2fab7bdd165178bb24fa01 /debian/missing-sources/epoch/tests/render/basic/options.html
parentAdding upstream version 5.7.1. (diff)
downloadknot-resolver-56ccd5615d426b5e18d1e6b9f6160d6bccac94fa.tar.xz
knot-resolver-56ccd5615d426b5e18d1e6b9f6160d6bccac94fa.zip
Adding debian version 5.7.1-1.debian/5.7.1-1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'debian/missing-sources/epoch/tests/render/basic/options.html')
-rw-r--r--debian/missing-sources/epoch/tests/render/basic/options.html267
1 files changed, 267 insertions, 0 deletions
diff --git a/debian/missing-sources/epoch/tests/render/basic/options.html b/debian/missing-sources/epoch/tests/render/basic/options.html
new file mode 100644
index 0000000..5ff2d7e
--- /dev/null
+++ b/debian/missing-sources/epoch/tests/render/basic/options.html
@@ -0,0 +1,267 @@
+<!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>Basic Chart Options and Events</h1>
+ <p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> &raquo; Basic Chart Options and Events</p>
+ <ol>
+ <li><a href="#test-1">Axes</a></li>
+ <li><a href="#test-2">Margins</a></li>
+ <li><a href="#test-3">Ticks and Tick Formats</a></li>
+ <li><a href="#test-4">Resize</a></li>
+ <li><a href="#test-5">Domain</a></li>
+ <li><a href="#test-6">Range</a></li>
+ </ol>
+
+ <!-- Test 1 -->
+ <div id="test-1" class="test">
+ <h2>1. Axes</h2>
+ <p>
+ Correctly add and remove axes when options are set.
+ </p>
+ <div class="epoch"></div>
+ <div class="controls">
+ <button data-index="0">All</button>
+ <button data-index="1">[left, right]</button>
+ <button data-index="2">[top, bottom]</button>
+ <button data-index="3">[left, bottom]</button>
+ <button data-index="4">[top, right]</button>
+ <button data-index="5">None</button>
+ </div>
+ </div>
+ <script>
+ $(function() {
+ var axes = [
+ ['top', 'left', 'bottom', 'right'],
+ ['left', 'right'],
+ ['top', 'bottom'],
+ ['left', 'bottom'],
+ ['top', 'right'],
+ []
+ ];
+
+ var chart = $('#test-1 .epoch').epoch({
+ type: 'line',
+ data: data().add(function(x) { return Math.cos(x) }).get([0, 2*Math.PI], Math.PI/25)
+ });
+
+ $('#test-1 button').click(function(e) {
+ chart.option('axes', axes[parseInt($(e.target).attr('data-index'))]);
+ });
+ });
+ </script>
+
+
+ <!-- Test 2 -->
+ <div id="test-2" class="test">
+ <h2>2. Margins</h2>
+ <p>
+ Correctly resize margins when options are set.
+ </p>
+ <div class="epoch"></div>
+ <div class="controls">
+ <button data-index="0">No Margins</button>
+ <button data-index="1">Big Margins</button>
+ <button data-index="2">Small Margins</button>
+ </div>
+ </div>
+ <script>
+ $(function() {
+ var sizes = [
+ {margins: {top: null, left: null, bottom: null, right: null }},
+ {margins: {top: 60, left: 60, bottom: 60, right: 60 }},
+ {margins: {top: 20, left: 20, bottom: 20, right: 20 }}
+ ];
+
+ var chart = $('#test-2 .epoch').epoch({
+ type: 'line',
+ data: data().add(function(x) { return Math.sin(x); })
+ .add(function(x) { return Math.cos(x); })
+ .get([0, 2*Math.PI], Math.PI/25),
+ axes: []
+ });
+
+ $('#test-2 button').click(function(e) {
+ var margins = sizes[parseInt($(e.target).attr('data-index'))];
+ console.log(margins);
+ chart.option(margins);
+ });
+ });
+ </script>
+
+ <!-- Test 3 -->
+ <div id="test-3" class="test">
+ <h2>3. Ticks and Tick Formats</h2>
+ <p>
+ Correctly resize margins when options are set.
+ </p>
+ <div class="epoch"></div>
+ <div class="controls">
+ <button class="ticks">Toggle Ticks</button>
+ <button class="tickFormats">Toggle Tick Formats</button>
+ </div>
+ </div>
+ <script>
+ $(function() {
+ var ticksIndex = 0, ticks = [
+ {
+ ticks: {
+ top: 14,
+ bottom: 14,
+ left: 5,
+ right: 5,
+ }
+ },
+ {
+ ticks: {
+ top: 30,
+ left: 2,
+ bottom: 30,
+ right: 2
+ }
+ }
+ ];
+
+ var tickFormatsIndex = 0, tickFormats = [
+ {
+ tickFormats: {
+ top: Epoch.Formats.regular,
+ bottom: Epoch.Formats.regular,
+ left: Epoch.Formats.si,
+ right: Epoch.Formats.si
+ }
+ },
+ {
+ tickFormats: {
+ top: function(d) { return parseInt(100*d)+'%' },
+ bottom: function(d) { return parseInt(100*d)+'%' },
+ left: function(d) { return parseInt(100*d)+'%' },
+ right: function(d) { return parseInt(100*d)+'%' }
+ }
+ }
+ ];
+
+ var chart = $('#test-3 .epoch').epoch({
+ type: 'area',
+ data: data().add(function(x) { return (Math.sin(x)+1) / (x+1); })
+ .add(function(x) { return (Math.cos(x)+1) / (x+2); })
+ .get([0, 2*Math.PI], Math.PI/25),
+ axes: ['top', 'left', 'right', 'bottom']
+ });
+
+ $('#test-3 button.ticks').click(function(e) {
+ ticksIndex = (ticksIndex + 1) % ticks.length;
+ chart.option(ticks[ticksIndex]);
+ });
+
+ $('#test-3 button.tickFormats').click(function(e) {
+ tickFormatsIndex = (tickFormatsIndex + 1) % tickFormats.length;
+ chart.option(tickFormats[tickFormatsIndex]);
+ });
+ });
+ </script>
+
+ <!-- Test 4 -->
+ <div id="test-4" class="test">
+ <h2>4. Resize</h2>
+ <p>
+ Correctly resize the chart when the width and height options are set.
+ </p>
+ <div class="epoch" style="width: 600px; height: 200px"></div>
+ <div class="controls">
+ <button data-index="0">Original</button>
+ <button data-index="1">Bigger</button>
+ </div>
+ </div>
+ <script>
+ $(function() {
+ var sizes = [
+ [600, 200],
+ [800, 320]
+ ];
+
+ var chart = $('#test-4 .epoch').epoch({
+ type: 'line',
+ data: data().add(function(x) { return Math.sin(x) }).get([0, 2*Math.PI], Math.PI/25)
+ });
+
+ $('#test-4 button').click(function(e) {
+ var index = parseInt($(e.target).attr('data-index'));
+ chart.option('width', sizes[index][0]);
+ chart.option('height', sizes[index][1]);
+ });
+ });
+ </script>
+
+ <!-- Test 5 -->
+ <div id="test-5" class="test">
+ <h2>6. Option: domain</h2>
+ <div class="epoch"></div>
+ <p>
+ <button data-index="0">Domain From Data Extent</button>
+ <button data-index="1">[0, &pi;]</button>
+ </p>
+ </div>
+ <script>
+ $(function() {
+ var domains = [
+ null,
+ [0, Math.PI]
+ ];
+
+ var chart = $('#test-5 .epoch').epoch({
+ type: 'line',
+ data: data().add(function(x) { return 1 - Math.sin(x) }).get([0, 2*Math.PI], Math.PI/25)
+ });
+
+ $('#test-5 button').click(function(e) {
+ var index = parseInt($(e.target).attr('data-index'));
+ chart.option('domain', domains[index])
+ });
+ });
+ </script>
+
+
+ <!-- Test 6 -->
+ <div id="test-6" class="test">
+ <h2>7. Option: range</h2>
+ <div class="epoch"></div>
+ <p>
+ <button data-index="0">Range From Data Extent</button>
+ <button data-index="1">[0, 1.5]</button>
+ </p>
+ </div>
+ <script>
+ $(function() {
+ var ranges = [
+ null,
+ [0, 1.5]
+ ];
+
+ var chart = $('#test-6 .epoch').epoch({
+ type: 'area',
+ data: data().add(function(x) { return 1 - Math.cos(x) }).get([0, 2*Math.PI], Math.PI/25)
+ });
+
+ $('#test-6 button').click(function(e) {
+ var index = parseInt($(e.target).attr('data-index'));
+ console.log(ranges[index]);
+ chart.option('range', ranges[index])
+
+ });
+ });
+ </script>
+
+ </body>
+</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-28 09:01:51 +0000