Skip to content

Commit 981a1d1

Browse files
dead-claudiadead-claudia
committed
Add 'examples/' from commit 'e5ddcf274e06533331280cde00232f2801781118'
git-subtree-dir: examples git-subtree-mainline: a04f40f git-subtree-split: e5ddcf2
2 parents a04f40f + e5ddcf2 commit 981a1d1

27 files changed

+3342
-0
lines changed

‎examples/animation-stream/flowers.jpg

58.6 KB
Loading

‎examples/animation-stream/mosaic-stream.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Mosaic</title>
6+
<style>
7+
#root {margin:auto;max-width:600px;width:100%;}
8+
.slice {animation:enter 1s;animation-fill-mode:forwards;background-image:url(flowers.jpg);height:60px;float:left;opacity:0;width:60px;}
9+
.slice:nth-child(10n) {clear:right;}
10+
.exit {animation:exit 1s;}
11+
12+
@keyframes enter {
13+
from {opacity:0;transform:rotate(-90deg) scale(0);}
14+
to {opacity:1;transform:rotate(0) scale(1);}
15+
}
16+
@keyframes exit {
17+
from {opacity:1;transform:rotate(0) scale(1);}
18+
to {opacity:0;transform:rotate(90deg) scale(0);}
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<div id="root"></div>
24+
<script src="../../mithril.js"></script>
25+
<script src="../../stream/stream.js"></script>
26+
<script>
27+
var root = document.getElementById("root")
28+
29+
const range = (start, end) => {
30+
let full = []
31+
for (let i = start; i < end; i++) full.push(i)
32+
return full
33+
}
34+
35+
const exit = vnode => {
36+
vnode.dom.classList.add("exit")
37+
return new Promise(function(resolve) {
38+
setTimeout(resolve, 1000)
39+
})
40+
}
41+
42+
const backgroundPosition = step => i =>
43+
// X
44+
(i % step * (step+1)) + "% "
45+
// Y
46+
+ (Math.floor(i / step) * (step+1)) + "%"
47+
48+
// actions -> state -> vnode
49+
const view = exit => cells =>
50+
m(".container", cells.map(i =>
51+
m(".slice", {
52+
style: {backgroundPosition: backgroundPosition(10)(i)},
53+
onbeforeremove: exit
54+
})
55+
))
56+
57+
// delayed alternate array[0] and array[1] and pipe into actions stream
58+
const alternate = delay => array => actions => {
59+
let i = 1
60+
setInterval(() => actions(array[i = 1 - i]), delay)
61+
return actions
62+
}
63+
64+
// prepare stream alternating between empty and full
65+
alternate(2000)([[], range(0, 10 * 10)])(m.stream())
66+
// pipe state stream into view
67+
.map(view(exit))
68+
// pipe view stream into render
69+
.map(vnode => m.render(root, vnode))
70+
71+
</script>
72+
</body>
73+
</html>

‎examples/animation/flowers.jpg

58.6 KB
Loading

‎examples/animation/mosaic.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Mosaic</title>
6+
<style>
7+
#root {margin:auto;max-width:600px;width:100%;}
8+
.slice {animation:enter 1s;animation-fill-mode:forwards;background-image:url(flowers.jpg);height:60px;float:left;opacity:0;width:60px;}
9+
.slice:nth-child(10n) {clear:right;}
10+
.exit {animation:exit 1s;}
11+
12+
@keyframes enter {
13+
from {opacity:0;transform:rotate(-90deg) scale(0);}
14+
to {opacity:1;transform:rotate(0) scale(1);}
15+
}
16+
@keyframes exit {
17+
from {opacity:1;transform:rotate(0) scale(1);}
18+
to {opacity:0;transform:rotate(90deg) scale(0);}
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<div id="root"></div>
24+
<script src="../../mithril.js"></script>
25+
<script>
26+
var root = document.getElementById("root")
27+
28+
var empty = []
29+
var full = []
30+
for (var i = 0; i < 100; i++) full.push(i)
31+
32+
var cells
33+
34+
function view() {
35+
return m(".container", cells.map(function(i) {
36+
return m(".slice", {
37+
style: {backgroundPosition: (i % 10 * 11) + "% " + (Math.floor(i / 10) * 11) + "%"},
38+
onbeforeremove: exit
39+
})
40+
}))
41+
}
42+
43+
function exit(vnode) {
44+
vnode.dom.classList.add("exit")
45+
return new Promise(function(resolve) {
46+
setTimeout(resolve, 1000)
47+
})
48+
}
49+
50+
function run() {
51+
cells = cells === full ? empty : full
52+
53+
m.render(root, [view()])
54+
55+
setTimeout(run, 2000)
56+
}
57+
58+
run()
59+
</script>
60+
</body>
61+
</html>

‎examples/dbmonster/ENV.js

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
var ENV = ENV || (function() {
2+
3+
var first = true;
4+
var counter = 0;
5+
var data;
6+
var _base;
7+
(_base = String.prototype).lpad || (_base.lpad = function(padding, toLength) {
8+
return padding.repeat((toLength - this.length) / padding.length).concat(this);
9+
});
10+
11+
function formatElapsed(value) {
12+
str = parseFloat(value).toFixed(2);
13+
if (value > 60) {
14+
minutes = Math.floor(value / 60);
15+
comps = (value % 60).toFixed(2).split('.');
16+
seconds = comps[0].lpad('0', 2);
17+
ms = comps[1];
18+
str = minutes + ":" + seconds + "." + ms;
19+
}
20+
return str;
21+
}
22+
23+
function getElapsedClassName(elapsed) {
24+
var className = 'Query elapsed';
25+
if (elapsed >= 10.0) {
26+
className += ' warn_long';
27+
}
28+
else if (elapsed >= 1.0) {
29+
className += ' warn';
30+
}
31+
else {
32+
className += ' short';
33+
}
34+
return className;
35+
}
36+
37+
function countClassName(queries) {
38+
var countClassName = "label";
39+
if (queries >= 20) {
40+
countClassName += " label-important";
41+
}
42+
else if (queries >= 10) {
43+
countClassName += " label-warning";
44+
}
45+
else {
46+
countClassName += " label-success";
47+
}
48+
return countClassName;
49+
}
50+
51+
function updateQuery(object) {
52+
if (!object) {
53+
object = {};
54+
}
55+
var elapsed = Math.random() * 15;
56+
object.elapsed = elapsed;
57+
object.formatElapsed = formatElapsed(elapsed);
58+
object.elapsedClassName = getElapsedClassName(elapsed);
59+
object.query = "SELECT blah FROM something";
60+
object.waiting = Math.random() < 0.5;
61+
if (Math.random() < 0.2) {
62+
object.query = "<IDLE> in transaction";
63+
}
64+
if (Math.random() < 0.1) {
65+
object.query = "vacuum";
66+
}
67+
return object;
68+
}
69+
70+
function cleanQuery(value) {
71+
if (value) {
72+
value.formatElapsed = "";
73+
value.elapsedClassName = "";
74+
value.query = "";
75+
value.elapsed = null;
76+
value.waiting = null;
77+
} else {
78+
return {
79+
query: "***",
80+
formatElapsed: "",
81+
elapsedClassName: ""
82+
};
83+
}
84+
}
85+
86+
function generateRow(object, keepIdentity, counter) {
87+
var nbQueries = Math.floor((Math.random() * 10) + 1);
88+
if (!object) {
89+
object = {};
90+
}
91+
object.lastMutationId = counter;
92+
object.nbQueries = nbQueries;
93+
if (!object.lastSample) {
94+
object.lastSample = {};
95+
}
96+
if (!object.lastSample.topFiveQueries) {
97+
object.lastSample.topFiveQueries = [];
98+
}
99+
if (keepIdentity) {
100+
// for Angular optimization
101+
if (!object.lastSample.queries) {
102+
object.lastSample.queries = [];
103+
for (var l = 0; l < 12; l++) {
104+
object.lastSample.queries[l] = cleanQuery();
105+
}
106+
}
107+
for (var j in object.lastSample.queries) {
108+
var value = object.lastSample.queries[j];
109+
if (j <= nbQueries) {
110+
updateQuery(value);
111+
} else {
112+
cleanQuery(value);
113+
}
114+
}
115+
} else {
116+
object.lastSample.queries = [];
117+
for (var j = 0; j < 12; j++) {
118+
if (j < nbQueries) {
119+
var value = updateQuery(cleanQuery());
120+
object.lastSample.queries.push(value);
121+
} else {
122+
object.lastSample.queries.push(cleanQuery());
123+
}
124+
}
125+
}
126+
for (var i = 0; i < 5; i++) {
127+
var source = object.lastSample.queries[i];
128+
object.lastSample.topFiveQueries[i] = source;
129+
}
130+
object.lastSample.nbQueries = nbQueries;
131+
object.lastSample.countClassName = countClassName(nbQueries);
132+
return object;
133+
}
134+
135+
function getData(keepIdentity) {
136+
var oldData = data;
137+
if (!keepIdentity) { // reset for each tick when !keepIdentity
138+
data = [];
139+
for (var i = 1; i <= ENV.rows; i++) {
140+
data.push({ dbname: 'cluster' + i, query: "", formatElapsed: "", elapsedClassName: "" });
141+
data.push({ dbname: 'cluster' + i + ' replica', query: "", formatElapsed: "", elapsedClassName: "" });
142+
}
143+
}
144+
if (!data) { // first init when keepIdentity
145+
data = [];
146+
for (var i = 1; i <= ENV.rows; i++) {
147+
data.push({ dbname: 'cluster' + i });
148+
data.push({ dbname: 'cluster' + i + ' replica' });
149+
}
150+
oldData = data;
151+
}
152+
for (var i in data) {
153+
var row = data[i];
154+
if (!keepIdentity && oldData && oldData[i]) {
155+
row.lastSample = oldData[i].lastSample;
156+
}
157+
if (!row.lastSample || Math.random() < ENV.mutations()) {
158+
counter = counter + 1;
159+
if (!keepIdentity) {
160+
row.lastSample = null;
161+
}
162+
generateRow(row, keepIdentity, counter);
163+
} else {
164+
data[i] = oldData[i];
165+
}
166+
}
167+
first = false;
168+
return {
169+
toArray: function() {
170+
return data;
171+
}
172+
};
173+
}
174+
175+
var mutationsValue = 0.5;
176+
177+
function mutations(value) {
178+
if (value) {
179+
mutationsValue = value;
180+
return mutationsValue;
181+
} else {
182+
return mutationsValue;
183+
}
184+
}
185+
186+
var body = document.querySelector('body');
187+
var theFirstChild = body.firstChild;
188+
189+
var sliderContainer = document.createElement( 'div' );
190+
sliderContainer.style.cssText = "display: flex";
191+
var slider = document.createElement('input');
192+
var text = document.createElement('label');
193+
text.innerHTML = 'mutations : ' + (mutationsValue * 100).toFixed(0) + '%';
194+
text.id = "ratioval";
195+
slider.setAttribute("type", "range");
196+
slider.style.cssText = 'margin-bottom: 10px; margin-top: 5px';
197+
slider.addEventListener('change', function(e) {
198+
ENV.mutations(e.target.value / 100);
199+
document.querySelector('#ratioval').innerHTML = 'mutations : ' + (ENV.mutations() * 100).toFixed(0) + '%';
200+
});
201+
sliderContainer.appendChild( text );
202+
sliderContainer.appendChild( slider );
203+
body.insertBefore( sliderContainer, theFirstChild );
204+
205+
return {
206+
generateData: getData,
207+
rows: 50,
208+
timeout: 0,
209+
mutations: mutations
210+
};
211+
})();

0 commit comments

Comments
 (0)