summaryrefslogtreecommitdiffstats
path: root/debian/missing-sources/epoch/tests/render/basic/pie.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-27 10:41:59 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-27 10:41:59 +0000
commitbe05184b2324848b4f33e6e5d9c716bc95f581f3 (patch)
tree4da6fcfe204d1694377e90c44b02f1b0790aabe8 /debian/missing-sources/epoch/tests/render/basic/pie.html
parentAdding upstream version 5.3.1. (diff)
downloadknot-resolver-debian.tar.xz
knot-resolver-debian.zip
Adding debian version 5.3.1-1+deb11u1.debian/5.3.1-1+deb11u1debian
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'debian/missing-sources/epoch/tests/render/basic/pie.html')
-rw-r--r--debian/missing-sources/epoch/tests/render/basic/pie.html346
1 files changed, 346 insertions, 0 deletions
diff --git a/debian/missing-sources/epoch/tests/render/basic/pie.html b/debian/missing-sources/epoch/tests/render/basic/pie.html
new file mode 100644
index 0000000..fe105e8
--- /dev/null
+++ b/debian/missing-sources/epoch/tests/render/basic/pie.html
@@ -0,0 +1,346 @@
+<!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>
+ <link rel="stylesheet" type="text/css" href="../../../dist/css/epoch.css">
+ <style>
+ .test .epoch {
+ width: 350px;
+ height: 350px;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Basic Pie Chart Test</h1>
+ <p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> &raquo; Basic Pie</p>
+ <ol>
+ <li><a href="#test-1">Basic Pie Test</a></li>
+ <li><a href="#test-2">Basic Donut Test</a></li>
+ <li><a href="#test-3">Pie Tranisition I</a></li>
+ <li><a href="#test-4">Pie Tranisition II</a></li>
+ <li><a href="#test-5">Color Override</a></li>
+ <li><a href="#test-6">Categorical Colors</a></li>
+ <li><a href="#test-7">Pie Chart Layers without Labels</a></li>
+ <li><a href="#test-8">Margin Changes</a></li>
+ <li><a href="#test-9">Inner Changes</a></li>
+ <li><a href="#test-10">Show/Hide Layers</a></li>
+ </ol>
+
+ <!-- Test 1 -->
+ <div id="test-1" class="test">
+ <h2>Basic Pie Test</h2>
+ <p>
+ Correctly render a pie chart with three categories:
+ <ul>
+ <li>A - 20</li>
+ <li>B - 45</li>
+ <li>C - 35</li>
+ </ul>
+ </p>
+ <div class="epoch"></div>
+ </div>
+
+ <script>
+ $(function() {
+ $('#test-1 .epoch').epoch({
+ type: 'pie',
+ data: [
+ {label: 'A', value: 20},
+ {label: 'B', value: 45},
+ {label: 'C', value: 35}
+ ]
+ });
+ });
+ </script>
+
+ <!-- Test 2 -->
+ <div id="test-2" class="test">
+ <h2>2. Basic Donut Test</h2>
+ <p>
+ Correctly render a donut chart with three categories:
+ <ul>
+ <li>A - 50</li>
+ <li>B - 30</li>
+ <li>C - 20</li>
+ </ul>
+ </p>
+ <div class="epoch"></div>
+ </div>
+
+ <script>
+ $(function() {
+ $('#test-2 .epoch').epoch({
+ type: 'pie',
+ inner: 100,
+ data: [
+ {label: 'A', value: 50},
+ {label: 'B', value: 30},
+ {label: 'C', value: 20}
+ ]
+ });
+ });
+ </script>
+
+ <!-- Test 3 -->
+ <div id="test-3" class="test">
+ <h2>3. Pie Tranisition I</h2>
+ <p>
+ Correctly transition between set A:
+ <ul>
+ <li>A - 20</li>
+ <li>B - 80</li>
+ </ul>
+ and set B:
+ <ul>
+ <li>A - 20</li>
+ <li>B - 30</li>
+ <li>C - 50</li>
+ </ul>
+ Use the buttons below the chart to initiate the transitions.
+ </p>
+ <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', value: 20},
+ {label: 'B', value: 80}
+ ],
+ data2 = [
+ {label: 'A', value: 20},
+ {label: 'B', value: 30},
+ {label: 'C', value: 50}
+ ],
+ data = [data1, data2],
+ chart = $('#test-3 .epoch').epoch({ type: 'pie', data: data1 });
+
+ $('#test-3 button').on('click', function(e) {
+ var index = parseInt($(e.target).attr('data-index'));
+ chart.update(data[index]);
+ });
+ });
+ </script>
+
+ <!-- Test 4 -->
+ <div id="test-4" class="test">
+ <h2>4. Pie Tranisition II</h2>
+ <p>
+ Correctly transition between set A:
+ <ul>
+ <li>A - 20</li>
+ <li>B - 80</li>
+ </ul>
+ and set B:
+ <ul>
+ <li>A - 50</li>
+ <li>B - 50</li>
+ </ul>
+ Use the buttons below the chart to initiate the transitions.
+ </p>
+ <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', value: 20},
+ {label: 'B', value: 80}
+ ],
+ data2 = [
+ {label: 'A', value: 50},
+ {label: 'B', value: 50}
+ ],
+ data = [data1, data2],
+ chart = $('#test-4 .epoch').epoch({ type: 'pie', data: data1 });
+
+ $('#test-4 button').on('click', function(e) {
+ var index = parseInt($(e.target).attr('data-index'));
+ chart.update(data[index]);
+ });
+ });
+ </script>
+
+ <!-- Test 5 -->
+ <div id="test-5" class="test">
+ <h2>5. Color Override</h2>
+ <p>
+ Override the colors as such:
+ <ul>
+ <li>A - Pink</li>
+ <li>B - Green</li>
+ <li>C - Blue</li>
+ </ul>
+ </p>
+ <div class="epoch"></div>
+ </div>
+
+ <style>
+ #test-5 .arc.a path { fill: pink; }
+ #test-5 .arc.b path { fill: green; }
+ #test-5 .arc.c path { fill: blue; }
+ </style>
+
+ <script>
+ $(function() {
+ $('#test-5 .epoch').epoch({
+ type: 'pie',
+ data: [
+ {label: 'A', value: 20},
+ {label: 'B', value: 45},
+ {label: 'C', value: 35}
+ ]
+ });
+ });
+ </script>
+
+ <!-- Test 6 -->
+ <div id="test-6" class="test">
+ <h2>6. Categorical Colors</h2>
+ <p>
+ Correctly transition between different categorical colors sets.
+ </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 = [],
+ className = 'category10';
+
+ for (var j = 0; j < 10; j++) {
+ data.push({label: String.fromCharCode(65+j), value: 10});
+ }
+
+ $('#test-6 .epoch').epoch({
+ type: 'pie',
+ inner: 100,
+ data: data
+ });
+
+ $('#test-6 button').on('click', function(e) {
+ $('#test-6 .epoch').removeClass(className);
+ className = $(e.target).attr('data-class');
+ $('#test-6 .epoch').addClass(className);
+ });
+ });
+ </script>
+
+
+ <!-- Test 7 -->
+ <div id="test-7" class="test">
+ <h2>7. Pie Chart Layers without Labels</h2>
+ <p>
+ Correctly render a pie chart with three categories:
+ <ul>
+ <li>30</li>
+ <li>35</li>
+ <li>35</li>
+ </ul>
+ when the layers are not provided labels.
+ </p>
+ <div class="epoch"></div>
+ </div>
+
+ <script>
+ $(function() {
+ $('#test-7 .epoch').epoch({
+ type: 'pie',
+ data: [ {value: 30}, {value: 35}, {value: 35} ]
+ });
+ });
+ </script>
+
+ <!-- Test 8 -->
+ <div id="test-8" class="test">
+ <h2>8. Margin Changes</h2>
+ <div class="epoch"></div>
+ <p>
+ <button data-index="0">Small</button>
+ <button data-index="1">Big</button>
+ </p>
+ </div>
+ <script>
+ $(function() {
+ var margins = [10, 40];
+ var chart = $('#test-8 .epoch').epoch({
+ type: 'pie',
+ data: [ {value: 30}, {value: 35}, {value: 35} ]
+ });
+ $('#test-8 button').click(function(e) {
+ var margin = margins[parseInt($(e.target).attr('data-index'))];
+ chart.option('margin', margin);
+ });
+ });
+ </script>
+
+ <!-- Test 9 -->
+ <div id="test-9" class="test">
+ <h2>9. Inner Changes</h2>
+ <div class="epoch"></div>
+ <p>
+ <button data-index="0">No Inner</button>
+ <button data-index="1">Small Inner</button>
+ <button data-index="2">Big Inner</button>
+ </p>
+ </div>
+ <script>
+ $(function() {
+ var innerMargins = [0, 50, 100];
+ var chart = $('#test-9 .epoch').epoch({
+ type: 'pie',
+ data: [ {value: 30}, {value: 35}, {value: 35} ]
+ });
+ $('#test-9 button').click(function(e) {
+ var inner = innerMargins[parseInt($(e.target).attr('data-index'))];
+ chart.option('inner', inner);
+ });
+ });
+ </script>
+
+ <!-- Test 10 -->
+ <div id="test-10" class="test">
+ <h2>10. Show/Hide Layers</h2>
+ <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-10 .epoch').epoch({
+ type: 'pie',
+ data: [
+ {label: 'A', value: 20},
+ {label: 'B', value: 45},
+ {label: 'C', value: 35}
+ ]
+ });
+ $('#test-10 button').click(function(e) {
+ var index = parseInt($(e.target).attr('data-index'));
+ chart.toggleLayer(index);
+ });
+ });
+ </script>
+ </body>
+</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-02 10:42:02 +0000