lightview 1.6.6-b → 1.7.3-b
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/components/chart/chart.html +15 -0
- package/components/chart/example.html +32 -0
- package/components/chart.html +22 -18
- package/components/components.js +105 -0
- package/components/gantt/example.html +22 -0
- package/components/gantt/gantt.html +40 -0
- package/components/gauge/example.html +28 -0
- package/components/gauge/guage.html +19 -0
- package/components/orgchart/example.html +25 -0
- package/components/orgchart/orgchart.html +36 -0
- package/components/timeline/example.html +33 -0
- package/components/timeline/timeline.html +42 -0
- package/components/timeline.html +81 -0
- package/examples/counter.html +1 -1
- package/examples/forgeinform.html +1 -1
- package/examples/invalid-template-literals.html +1 -4
- package/examples/medium/remote.html +3 -2
- package/examples/message.html +0 -1
- package/examples/object-bound-form.html +32 -0
- package/examples/timeline.html +21 -0
- package/examples/todo.html +38 -0
- package/examples/types.html +2 -2
- package/examples/xor.html +1 -0
- package/lightview.js +285 -214
- package/package.json +1 -1
- package/test/basic.html +8 -5
- package/types.js +73 -2
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# lightview v1.
|
|
1
|
+
# lightview v1.7.3b (BETA)
|
|
2
2
|
|
|
3
3
|
Small, simple, powerful web UI and micro front end creation ...
|
|
4
4
|
|
|
@@ -36,7 +36,7 @@ Meanwhile, here is what you get:
|
|
|
36
36
|
|
|
37
37
|
1) SPA, and MPA friendly ... somewhat SEO friendly and short steps away from fully SEO friendly.
|
|
38
38
|
|
|
39
|
-
1) A [component library](https://lightview.dev/components) including charts and gauges.
|
|
39
|
+
1) A [component library](https://lightview.dev/components) including charts and gauges that work in Markdown files.
|
|
40
40
|
|
|
41
41
|
1) Lots of live [editable examples](https://lightview.dev/#examples).
|
|
42
42
|
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<meta charset="UTF-8">
|
|
4
|
+
<title>Lightview:Component:Chart</title>
|
|
5
|
+
</head>
|
|
6
|
+
<body>
|
|
7
|
+
<div id="target"></div>
|
|
8
|
+
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
9
|
+
<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
|
|
10
|
+
<script type="lightview/module">
|
|
11
|
+
const {chart} = await import("../components.js");
|
|
12
|
+
chart(self);
|
|
13
|
+
</script>
|
|
14
|
+
</body>
|
|
15
|
+
</html>
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>Lightview:Chart:Example</title>
|
|
4
|
+
<link href="./chart.html" rel="module">
|
|
5
|
+
<script src="../../lightview.js"></script>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<l-chart id="myPieChart" type="PieChart" style="height:500px;" title="How Much Pizza I Ate Last Night">
|
|
9
|
+
{
|
|
10
|
+
options: { },
|
|
11
|
+
columns: [
|
|
12
|
+
{label: "Topping", type: "string"},
|
|
13
|
+
{label: "Slices", type: "number"}
|
|
14
|
+
],
|
|
15
|
+
rows: [
|
|
16
|
+
["Mushrooms", 3],
|
|
17
|
+
["Onions", 1],
|
|
18
|
+
["Olives", 1],
|
|
19
|
+
["Zucchini", 1],
|
|
20
|
+
["Pepperoni", 2]
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
</l-chart>
|
|
24
|
+
<script>
|
|
25
|
+
const el = document.getElementById("myChart");
|
|
26
|
+
el.addEventListener("mounted",() => {
|
|
27
|
+
chart = el.chart;
|
|
28
|
+
chart.addRow(["Anchovies",1]);
|
|
29
|
+
});
|
|
30
|
+
</script>
|
|
31
|
+
</body>
|
|
32
|
+
</html>
|
package/components/chart.html
CHANGED
|
@@ -8,6 +8,10 @@
|
|
|
8
8
|
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
9
9
|
<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
|
|
10
10
|
<script type="lightview/module">
|
|
11
|
+
let table = JSON5.parse(self.firstChild.textContent.trim()),
|
|
12
|
+
chart,
|
|
13
|
+
datatable,
|
|
14
|
+
options = {};
|
|
11
15
|
const target = self.getElementById("target"),
|
|
12
16
|
resizeObserver = new ResizeObserver(entries => {
|
|
13
17
|
for (let entry of entries) {
|
|
@@ -20,10 +24,19 @@
|
|
|
20
24
|
}
|
|
21
25
|
}
|
|
22
26
|
chart.draw(datatable, options);
|
|
23
|
-
})
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
+
}),
|
|
28
|
+
callback = (textNode, oldValue, newValue) => {
|
|
29
|
+
datatable = new google.visualization.DataTable();
|
|
30
|
+
try {
|
|
31
|
+
table = table || JSON5.parse(newValue.trim());
|
|
32
|
+
datatable = google.visualization.arrayToDataTable(table);
|
|
33
|
+
chart.draw(datatable, options);
|
|
34
|
+
table = null;
|
|
35
|
+
} catch (e) {
|
|
36
|
+
target.innerText = e + newValue;
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
self.firstChild.innerText = "Loading ...";
|
|
27
40
|
self.variables({type: "string", title: "string", style: "string"}, {observed});
|
|
28
41
|
if(style) target.setAttribute("style",style);
|
|
29
42
|
self.addRow = (row) => {
|
|
@@ -40,21 +53,8 @@
|
|
|
40
53
|
Object.assign(options,newOptions);
|
|
41
54
|
};
|
|
42
55
|
self.init = () => {
|
|
43
|
-
const node = self.firstChild,
|
|
44
|
-
callback = (textNode, oldValue, newValue) => {
|
|
45
|
-
datatable = new google.visualization.DataTable();
|
|
46
|
-
try {
|
|
47
|
-
const table = JSON5.parse(newValue.trim());
|
|
48
|
-
datatable = google.visualization.arrayToDataTable(table);
|
|
49
|
-
chart.draw(datatable, options);
|
|
50
|
-
} catch (e) {
|
|
51
|
-
target.innerText = e + newValue;
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
56
|
if(!options.title && title) options.title = title;
|
|
55
57
|
chart = new google.visualization[type](target);
|
|
56
|
-
node.characterDataMutationCallback = callback;
|
|
57
|
-
callback(node, node.textContent, node.textContent);
|
|
58
58
|
addEventListener("change",({target,value}) => {
|
|
59
59
|
if (target === "type") {
|
|
60
60
|
chart = new google.visualization[type](target);
|
|
@@ -65,8 +65,12 @@
|
|
|
65
65
|
}
|
|
66
66
|
chart.draw(datatable, options);
|
|
67
67
|
});
|
|
68
|
+
const node = self.firstChild;
|
|
69
|
+
callback(node, node.textContent, node.textContent);
|
|
70
|
+
// Will be used by the Lightview global observer
|
|
71
|
+
node.characterDataMutationCallback = callback;
|
|
72
|
+
// resized charts if window resizes
|
|
68
73
|
resizeObserver.observe(target);
|
|
69
|
-
self.removeAttribute("hidden");
|
|
70
74
|
};
|
|
71
75
|
self.addEventListener("connected", ({target}) => {
|
|
72
76
|
google.charts.load("current", {"packages": ["corechart","gauge"]});
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
const chart = (self,{packages = ["corechart"],options={},columns=[],rows=[],type,optionsTransform, rowTransform}={}) => {
|
|
2
|
+
options = {...options};
|
|
3
|
+
columns = [...columns];
|
|
4
|
+
let chart,
|
|
5
|
+
datatable;
|
|
6
|
+
const chartProxy = (chart) => {
|
|
7
|
+
const extras = {
|
|
8
|
+
setOption(name,value) {
|
|
9
|
+
options[name] = value;
|
|
10
|
+
chart.draw(datatable, options);
|
|
11
|
+
},
|
|
12
|
+
setOptions(newOptions) {
|
|
13
|
+
options = {...newOptions};
|
|
14
|
+
chart.draw(datatable, options);
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
return new Proxy(chart,{
|
|
18
|
+
get(target,property) {
|
|
19
|
+
let value = extras[property];
|
|
20
|
+
if(value!==undefined) return value;
|
|
21
|
+
value = target[property];
|
|
22
|
+
if(value!==undefined) return Reflect.get(target,property);
|
|
23
|
+
value = datatable[property];
|
|
24
|
+
if(typeof(value)==="function") {
|
|
25
|
+
if(["add","insert","remove","set"].some((prefix) => property.startsWith(prefix))) {
|
|
26
|
+
return (...args) => { value.call(datatable,...args); chart.draw(datatable,options); };
|
|
27
|
+
};
|
|
28
|
+
return value.bind(datatable);
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
const target = self.getElementById("target"),
|
|
34
|
+
resizeObserver = new ResizeObserver(entries => {
|
|
35
|
+
for (let entry of entries) {
|
|
36
|
+
if(entry.contentBoxSize) {
|
|
37
|
+
// Firefox implements `contentBoxSize` as a single content rect, rather than an array
|
|
38
|
+
const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
|
|
39
|
+
if(options.width !== contentBoxSize.inlineSize) {
|
|
40
|
+
options.width = contentBoxSize.inlineSize;
|
|
41
|
+
chart.draw(datatable, options);
|
|
42
|
+
}
|
|
43
|
+
} else {
|
|
44
|
+
if(options.width !== entry.contentRect.width) {
|
|
45
|
+
options.width = entry.contentRect.width;
|
|
46
|
+
chart.draw(datatable, options);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}),
|
|
51
|
+
callback = (textNode, oldValue, newValue) => {
|
|
52
|
+
datatable = new google.visualization.DataTable();
|
|
53
|
+
try {
|
|
54
|
+
const config = JSON5.parse(newValue.trim());
|
|
55
|
+
if(config.options) Object.assign(options,config.options);
|
|
56
|
+
if(config.columns) columns=config.columns;
|
|
57
|
+
if(config.rows) rows=config.rows;
|
|
58
|
+
columns.forEach((column) => {
|
|
59
|
+
datatable.addColumn(column);
|
|
60
|
+
});
|
|
61
|
+
if(optionsTransform) options = optionsTransform(options);
|
|
62
|
+
if(rowTransform) rows = rows.map((row,index) => rowTransform(row,index,options));
|
|
63
|
+
datatable.addRows(rows);
|
|
64
|
+
const {selectedStyle,style} = options;
|
|
65
|
+
rows.forEach((row,index) => {
|
|
66
|
+
if(selectedStyle) datatable.setRowProperty(index,"selectedStyle",selectedStyle);
|
|
67
|
+
if(style) datatable.setRowProperty(index,"style",style);
|
|
68
|
+
});
|
|
69
|
+
chart.draw(datatable, options);
|
|
70
|
+
} catch (e) {
|
|
71
|
+
console.error(e + newValue);
|
|
72
|
+
target.innerText = e + newValue;
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
self.firstChild.innerText = "Loading ...";
|
|
76
|
+
self.variables({type: "string", title: "string", style: "string"}, {observed:true});
|
|
77
|
+
if(self.hasAttribute("style")) target.setAttribute("style",self.getAttribute("style"));
|
|
78
|
+
self.init = () => {
|
|
79
|
+
if(!options.title && self.hasAttribute("title")) options.title = self.getAttribute("title");
|
|
80
|
+
self.chart = chart = chartProxy(new google.visualization[type||self.getAttribute("type")](target));
|
|
81
|
+
addEventListener("change",({target,value}) => {
|
|
82
|
+
if (target === "type") {
|
|
83
|
+
chart = new google.visualization[type](target);
|
|
84
|
+
} else if (target === "title") {
|
|
85
|
+
options.title = value;
|
|
86
|
+
} else if(target === "style") {
|
|
87
|
+
target.setAttribute("style",value);
|
|
88
|
+
}
|
|
89
|
+
chart.draw(datatable, options);
|
|
90
|
+
});
|
|
91
|
+
const node = self.firstChild;
|
|
92
|
+
callback(node, node.textContent, node.textContent);
|
|
93
|
+
// Will be used by the Lightview global observer
|
|
94
|
+
node.characterDataMutationCallback = callback;
|
|
95
|
+
// resized charts if window resizes
|
|
96
|
+
resizeObserver.observe(document.body);
|
|
97
|
+
self.dispatchEvent(new Event("mounted"));
|
|
98
|
+
};
|
|
99
|
+
self.addEventListener("connected", ({target}) => {
|
|
100
|
+
google.charts.load("current", {"packages":packages});
|
|
101
|
+
google.charts.setOnLoadCallback(self.init);
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
export {chart};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Lightview:Component:Gantt:Example</title>
|
|
5
|
+
<link href="./gantt.html" rel="module">
|
|
6
|
+
<script src="../../lightview.js"></script>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<l-gantt id="myChart" style="height:500px;" title="Research Project">
|
|
10
|
+
{
|
|
11
|
+
options: { },
|
|
12
|
+
rows: [
|
|
13
|
+
['Research', 'Find sources',"2015-01-01", "2015-01-05", null, 100, null],
|
|
14
|
+
['Write', 'Write paper',null,"2015-01-09", "3d", 25, 'Research,Outline'],
|
|
15
|
+
['Cite', 'Create bibliography',null, "2015-01-07","1d" , 20, 'Research'],
|
|
16
|
+
['Complete', 'Hand in paper', null, "2015-01-10", "1d" , 0, 'Cite,Write'],
|
|
17
|
+
['Outline', 'Outline paper', null, "2015-01-06", "1d" , 100, 'Research']
|
|
18
|
+
]
|
|
19
|
+
}
|
|
20
|
+
</l-gantt>
|
|
21
|
+
</body>
|
|
22
|
+
</html>
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>Lightview:Component:Gantt</title>
|
|
4
|
+
</head>
|
|
5
|
+
<body>
|
|
6
|
+
<div id="target"></div>
|
|
7
|
+
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
8
|
+
<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
|
|
9
|
+
<script type="lightview/module">
|
|
10
|
+
const {chart} = await import("../components.js"),
|
|
11
|
+
{duration} = await import("/types.js");
|
|
12
|
+
chart(self,{
|
|
13
|
+
packages:["gantt"],
|
|
14
|
+
columns:[
|
|
15
|
+
{label:"Task ID",type:"string"},
|
|
16
|
+
{label:"Task Name",type:"string"},
|
|
17
|
+
{label:"Start Date",type:"date"},
|
|
18
|
+
{label:"End Date",type:"date"},
|
|
19
|
+
{label:"Duration",type:"number"},
|
|
20
|
+
{label:"% Complete",type:"number"},
|
|
21
|
+
{label:"Dependencies",type:"string"}
|
|
22
|
+
],
|
|
23
|
+
type:"Gantt",
|
|
24
|
+
rowTransform(row,i) {
|
|
25
|
+
return row.map((item,index) => {
|
|
26
|
+
if(item && (index===2 || index===3)) {
|
|
27
|
+
const date = new Date(item);
|
|
28
|
+
if(!date || typeof(date)!=="object" || !(date instanceof Date)) {
|
|
29
|
+
throw new TypeError(`row:${i} col:${index} is not a date`);
|
|
30
|
+
}
|
|
31
|
+
return date;
|
|
32
|
+
}
|
|
33
|
+
if(item && index===4) return duration.parse(item);
|
|
34
|
+
return item;
|
|
35
|
+
})
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
</script>
|
|
39
|
+
</body>
|
|
40
|
+
</html>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>Lightview:Component:Gauge:Example</title>
|
|
4
|
+
<link href="./gauge.html" rel="module">
|
|
5
|
+
<script src="../../lightview.js"></script>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<l-gauge id="myChart" style="height:500px;" title="Server" hidden l-unhide>
|
|
9
|
+
{
|
|
10
|
+
options: {
|
|
11
|
+
|
|
12
|
+
},
|
|
13
|
+
rows: [
|
|
14
|
+
['Memory', 80],
|
|
15
|
+
['CPU', 55],
|
|
16
|
+
['Network', 68]
|
|
17
|
+
]
|
|
18
|
+
}
|
|
19
|
+
</l-gauge>
|
|
20
|
+
<script>
|
|
21
|
+
const el = document.getElementById("myChart");
|
|
22
|
+
el.addEventListener("mounted",() => {
|
|
23
|
+
chart = el.chart;
|
|
24
|
+
chart.addRow(["Storage",10]);
|
|
25
|
+
});
|
|
26
|
+
</script>
|
|
27
|
+
</body>
|
|
28
|
+
</html>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<meta charset="UTF-8">
|
|
4
|
+
<title>Lightview:Component:Gauge</title>
|
|
5
|
+
</head>
|
|
6
|
+
<body>
|
|
7
|
+
<div id="target"></div>
|
|
8
|
+
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
9
|
+
<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
|
|
10
|
+
<script type="lightview/module">
|
|
11
|
+
const {chart} = await import("../components.js");
|
|
12
|
+
chart(self,{
|
|
13
|
+
packages:["corechart","gauge"],
|
|
14
|
+
columns:[{label:"Label",type:"string"},{label:"Value",type:"number"}],
|
|
15
|
+
type:"Gauge"
|
|
16
|
+
});
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Lightview:Component:OrgChart:Example</title>
|
|
5
|
+
<link href="./orgchart.html" rel="module">
|
|
6
|
+
<script src="../../lightview.js"></script>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<l-orgchart id="myChart" style="height:500px;" title="My Org">
|
|
10
|
+
{
|
|
11
|
+
options: {
|
|
12
|
+
selectedStyle:"color:red"
|
|
13
|
+
},
|
|
14
|
+
// 4 columns in definition data name,title,manager,tooltip
|
|
15
|
+
rows: [
|
|
16
|
+
["Mike","President","",""],
|
|
17
|
+
["Jim","CFO","Mike",""],
|
|
18
|
+
['Alice', 'Controller','Jim',""],
|
|
19
|
+
['Bob', 'CIO', 'Mike',""],
|
|
20
|
+
['Carol', 'Executive Assistant',"Mike",""]
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
</l-orgchart>
|
|
24
|
+
</body>
|
|
25
|
+
</html>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>Lightview:Component:OrgChart</title>
|
|
4
|
+
</head>
|
|
5
|
+
<body>
|
|
6
|
+
<link id="load-css-2" rel="stylesheet" type="text/css" href="https://www.gstatic.com/charts/51/css/orgchart/orgchart.css">
|
|
7
|
+
<div id="target"></div>
|
|
8
|
+
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
9
|
+
<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
|
|
10
|
+
<script type="lightview/module">
|
|
11
|
+
const {chart} = await import("../components.js");
|
|
12
|
+
chart(self,{
|
|
13
|
+
options: {allowHtml: true, allowCollapse: true},
|
|
14
|
+
packages:["orgchart"],
|
|
15
|
+
columns:[
|
|
16
|
+
{label:"Name",type:"string"},
|
|
17
|
+
{label:"Manager",type:"string"},
|
|
18
|
+
{label:"Tooltip",type:"string"}
|
|
19
|
+
],
|
|
20
|
+
type:"OrgChart",
|
|
21
|
+
// 4 columns in definition data name,title,manager,tooltip
|
|
22
|
+
rowTransform(row) {
|
|
23
|
+
return row.reduce((row,item,index) => {
|
|
24
|
+
item ||= "";
|
|
25
|
+
if(index===1) {
|
|
26
|
+
row[0] = {v:row[0],f:`<div style="text-align:center;">${row[0]}<div style="font-style:italic">${item}</div></div>`}
|
|
27
|
+
} else {
|
|
28
|
+
row.push(item);
|
|
29
|
+
}
|
|
30
|
+
return row;
|
|
31
|
+
},[]);
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
</script>
|
|
35
|
+
</body>
|
|
36
|
+
</html>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Lightview:Component:Timeline:Example</title>
|
|
5
|
+
<link href="./timeline.html" rel="module">
|
|
6
|
+
<script src="../../lightview.js"></script>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<l-timeline title="Presidents">
|
|
10
|
+
{
|
|
11
|
+
options: { showRowLabels: false },
|
|
12
|
+
rows: [
|
|
13
|
+
[ '1', 'George Washington','1789-03-30', '1797-2-04' ],
|
|
14
|
+
[ '2', 'John Adams', '1797-02-04', '1801-02-04' ],
|
|
15
|
+
[ '3', 'Thomas Jefferson', '1801-02-04', '1809-02-04']
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
</l-timeline>
|
|
19
|
+
<l-timeline title="Presidents and Vice Presidents">
|
|
20
|
+
{
|
|
21
|
+
options: { },
|
|
22
|
+
rows: [
|
|
23
|
+
[ 'President', 'George Washington','1789-03-30', '1797-2-04' ],
|
|
24
|
+
[ 'President', 'John Adams', '1797-02-04', '1801-02-04' ],
|
|
25
|
+
[ 'President', 'Thomas Jefferson', '1801-02-04', '1809-02-04'],
|
|
26
|
+
[ 'Vice President', 'John Adams','1789-03-21', '1797-02-04'],
|
|
27
|
+
[ 'Vice President', 'Thomas Jefferson','1797-02-04', '1801-02-04'],
|
|
28
|
+
[ 'Vice President', 'Aaron Burr','1801-02-04', '1805-02-04']
|
|
29
|
+
]
|
|
30
|
+
}
|
|
31
|
+
</l-timeline>
|
|
32
|
+
</body>
|
|
33
|
+
</html>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>Lightview:Component:Timeline</title>
|
|
4
|
+
</head>
|
|
5
|
+
<body>
|
|
6
|
+
<div id="target"></div>
|
|
7
|
+
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
8
|
+
<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
|
|
9
|
+
<script type="lightview/module">
|
|
10
|
+
const {chart} = await import("../components.js");
|
|
11
|
+
chart(self,{
|
|
12
|
+
packages:["timeline"],
|
|
13
|
+
columns:[
|
|
14
|
+
{id:"RowLabel",type:"string"},
|
|
15
|
+
{id:"BarLabel",type:"string"},
|
|
16
|
+
{id:"Start",type:"date"},
|
|
17
|
+
{id:"End",type:"date"}
|
|
18
|
+
],
|
|
19
|
+
type:"Timeline",
|
|
20
|
+
optionsTransform(options) {
|
|
21
|
+
options = {...options};
|
|
22
|
+
if("showRowLabels" in options) {
|
|
23
|
+
options.timeline = { showRowLabels:options.showRowLabels };
|
|
24
|
+
}
|
|
25
|
+
return options;
|
|
26
|
+
},
|
|
27
|
+
rowTransform(row,i) {
|
|
28
|
+
return row.map((item,index) => {
|
|
29
|
+
if(item && (index===2 || index===3)) {
|
|
30
|
+
const date = new Date(item);
|
|
31
|
+
if(!date || typeof(date)!=="object" || !(date instanceof Date)) {
|
|
32
|
+
throw new TypeError(`row:${i} col:${index} is not a date`);
|
|
33
|
+
}
|
|
34
|
+
return date;
|
|
35
|
+
}
|
|
36
|
+
return item;
|
|
37
|
+
})
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
</script>
|
|
41
|
+
</body>
|
|
42
|
+
</html>
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<meta charset="UTF-8">
|
|
4
|
+
<title>Lightview:Timeline</title>
|
|
5
|
+
</head>
|
|
6
|
+
<body hidden>
|
|
7
|
+
<div id="target"></div>
|
|
8
|
+
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
9
|
+
<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
|
|
10
|
+
<script type="lightview/module">
|
|
11
|
+
debugger;
|
|
12
|
+
let table = JSON5.parse(self.firstChild.textContent.trim()),
|
|
13
|
+
chart,
|
|
14
|
+
datatable,
|
|
15
|
+
options = {};
|
|
16
|
+
const target = self.getElementById("target"),
|
|
17
|
+
resizeObserver = new ResizeObserver(entries => {
|
|
18
|
+
for (let entry of entries) {
|
|
19
|
+
if(entry.contentBoxSize) {
|
|
20
|
+
// Firefox implements `contentBoxSize` as a single content rect, rather than an array
|
|
21
|
+
const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
|
|
22
|
+
options.width = contentBoxSize.inlineSize;
|
|
23
|
+
} else {
|
|
24
|
+
options.width = entry.contentRect.width;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
chart.draw(datatable, options);
|
|
28
|
+
}),
|
|
29
|
+
callback = (textNode, oldValue, newValue) => {
|
|
30
|
+
datatable = new google.visualization.DataTable();
|
|
31
|
+
try {
|
|
32
|
+
table = table || JSON5.parse(newValue.trim());
|
|
33
|
+
datatable = google.visualization.arrayToDataTable(table);
|
|
34
|
+
chart.draw(datatable, options);
|
|
35
|
+
table = null;
|
|
36
|
+
} catch (e) {
|
|
37
|
+
target.innerText = e + newValue;
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
self.firstChild.innerText = "Loading ...";
|
|
41
|
+
self.variables({type: "string", title: "string", style: "string"}, {observed});
|
|
42
|
+
if(style) target.setAttribute("style",style);
|
|
43
|
+
self.addRow = (row) => {
|
|
44
|
+
datatable.addRows([row]);
|
|
45
|
+
chart.draw(datatable, options);
|
|
46
|
+
};
|
|
47
|
+
self.setValue = (row,col,value) => {
|
|
48
|
+
if(datatable) {
|
|
49
|
+
datatable.setValue(row,col,value);
|
|
50
|
+
chart.draw(datatable, options);
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
self.setOptions = (newOptions) => {
|
|
54
|
+
Object.assign(options,newOptions);
|
|
55
|
+
};
|
|
56
|
+
self.init = () => {
|
|
57
|
+
if(!options.title && title) options.title = title;
|
|
58
|
+
chart = new google.visualization.Timeline(target);
|
|
59
|
+
addEventListener("change",({target,value}) => {
|
|
60
|
+
if(target === "title") {
|
|
61
|
+
options.title = value;
|
|
62
|
+
} else if(target === "style") {
|
|
63
|
+
target.setAttribute("style",value);
|
|
64
|
+
}
|
|
65
|
+
chart.draw(datatable, options);
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
const node = self.firstChild;
|
|
69
|
+
callback(node, node.textContent, node.textContent);
|
|
70
|
+
// Will be used by the Lightview global observer
|
|
71
|
+
node.characterDataMutationCallback = callback;
|
|
72
|
+
// resized charts if window resizes
|
|
73
|
+
resizeObserver.observe(target);
|
|
74
|
+
};
|
|
75
|
+
self.addEventListener("connected", ({target}) => {
|
|
76
|
+
google.charts.load("current", {"packages": ["timeline"]});
|
|
77
|
+
google.charts.setOnLoadCallback(self.init);
|
|
78
|
+
});
|
|
79
|
+
</script>
|
|
80
|
+
</body>
|
|
81
|
+
</html>
|
package/examples/counter.html
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
<option>tomato</option>
|
|
28
28
|
<option>cheese</option>
|
|
29
29
|
</select>
|
|
30
|
-
<br><button l-on:click="placeOrder">Place Order</button>
|
|
30
|
+
<br><button l-on:click="${placeOrder}">Place Order</button>
|
|
31
31
|
</p>
|
|
32
32
|
Expose: <input type="checkbox" value="${checked}">
|
|
33
33
|
<p l-if="${checked}">
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
</head>
|
|
7
7
|
<body>
|
|
8
8
|
<p>
|
|
9
|
-
<button l-on:click="bump">Click count:${count}</button>
|
|
9
|
+
<button l-on:click="${bump}">Click count:${count}</button>
|
|
10
10
|
</p>
|
|
11
11
|
<div style="margin:20px">
|
|
12
12
|
<p>
|
|
@@ -24,9 +24,6 @@
|
|
|
24
24
|
<p>
|
|
25
25
|
${function(){return \${test}})()}
|
|
26
26
|
</p>
|
|
27
|
-
<p>
|
|
28
|
-
${window.alert("ok")}
|
|
29
|
-
</p>
|
|
30
27
|
</div>
|
|
31
28
|
|
|
32
29
|
<script type="lightview/module">
|
|
@@ -15,13 +15,14 @@
|
|
|
15
15
|
</head>
|
|
16
16
|
<body>
|
|
17
17
|
<!--
|
|
18
|
-
layout the
|
|
18
|
+
layout the dashboard using the chart component r-chart
|
|
19
19
|
-->
|
|
20
20
|
<div style="width:100%;text-align:center">
|
|
21
21
|
<!--
|
|
22
22
|
set the initial value 0 for all components in a relaxed JSON5 configuration data block
|
|
23
|
+
add the attributes hidden and l-unhide to eliminate flicker and display of Loading ....
|
|
23
24
|
-->
|
|
24
|
-
<r-chart id="dashboard" style="display:inline-block" type="Gauge" title="Server Status"
|
|
25
|
+
<r-chart id="dashboard" style="display:inline-block" type="Gauge" title="Server Status">
|
|
25
26
|
[
|
|
26
27
|
['Label', 'Value'], // gauge will always take two columns, Label and Value
|
|
27
28
|
['Memory', 0],
|