-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (94 loc) · 2.41 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bow Demo</title>
<style>
body {
margin: 20px;
}
.content {
display: flex;
justify-content: space-between;
height: 400px;
}
.content .content-editor {
position: relative;
overflow: hidden;
}
.content .content-editor,
.content .content-result {
flex-grow: 1;
max-width: 49%;
border: 1px solid #333;
}
.content-result {
padding: 5px;
}
.content-result table {
margin: 10px 0;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.content-result table th {
background-color: #333;
color: #fff;
}
.content-result table tr {
border-bottom: 1px solid #ddd;
}
.content-result table tr:nth-child(odd) {
background-color: #fff;
}
.content-result table tr:nth-child(even) {
background-color: #f1f1f1;
}
.content-result table th,
.content-result table td {
padding: 8px 8px;
text-align: left;
vertical-align: top;
}
.content-result table th:first-child,
.content-result table td:first-child {
padding-left: 16px;
}
</style>
</head>
<body>
<h2>Example</h2>
<section class="content">
<div class="content-editor" name="example" id="example-editor"></div>
<div class="content-result" id="example-result"></div>
</section>
<script src="./dist/bow.js"></script>
<script src="./assets/codeflask.min.js"></script>
<script>
const exampleFlask = new CodeFlask('#example-editor', {
language: 'js',
lineNumbers: true
});
exampleFlask.updateCode(`bow.TableEx
.fromColumns({
value: [1, 2, 3, 4, 5],
name: ['a', 'a', 'b', 'b', 'c'],
age: [12, 12, 12, 14, 14],
})
.groupBy('name', 'age')
.summarize({ sumOfValue: 'sum(value)' })
.orderBy((a, b) => b.age - a.age)
.addColumns({
added: ({ age, sumOfValue }) => age + sumOfValue
});
`);
exampleFlask.onUpdate((code) => {
let expr = code.trim();
if (expr.endsWith(';')) expr = expr.slice(0, -1);
const html = eval(`bow.TableEx.toHTML(${expr})`);
document.querySelector('#example-result').innerHTML = html;
});
</script>
</body>
</html>