lightview 1.6.4-b → 1.7.1-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 +34 -0
- package/components/chart.html +27 -22
- package/components/components.js +93 -0
- package/components/gantt/example.html +27 -0
- package/components/gantt/gantt.html +35 -0
- package/components/gauge/example.html +28 -0
- package/components/gauge/guage.html +19 -0
- package/components/gauge.html +1 -1
- package/components/timeline.html +81 -0
- package/examples/chart.html +11 -9
- package/examples/counter.html +1 -1
- package/examples/duration.html +279 -0
- package/examples/foreign.html +27 -13
- package/examples/forgeinform.html +29 -8
- package/examples/form.html +1 -1
- package/examples/invalid-template-literals.html +1 -4
- package/examples/medium/remote.html +60 -0
- package/examples/message.html +0 -1
- package/examples/object-bound-form.html +32 -0
- package/examples/remote.json +1 -1
- package/examples/timeline.html +21 -0
- package/examples/todo.html +38 -0
- package/examples/types.html +3 -2
- package/examples/xor.html +1 -1
- package/lightview.js +380 -247
- package/package.json +1 -1
- package/test/basic.html +9 -5
- package/test/extended.html +10 -7
- package/test/extended.test.mjs +182 -4
- package/types.js +116 -70
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
# lightview v1.
|
|
1
|
+
# lightview v1.7.1b (BETA)
|
|
2
2
|
|
|
3
3
|
Small, simple, powerful web UI and micro front end creation ...
|
|
4
4
|
|
|
5
|
-
Great ideas from Svelte, React, Vue and Riot combined into one small tool: <
|
|
5
|
+
Great ideas from Svelte, React, Vue and Riot combined into one small tool: < 7.5K (minified/gzipped).
|
|
6
6
|
|
|
7
7
|
See the docs and examples at [https://lightview.dev](https://lightview.dev).
|
|
8
8
|
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<meta charset="UTF-8">
|
|
4
|
+
<title>Lightview: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/components.js");
|
|
12
|
+
chart(self);
|
|
13
|
+
</script>
|
|
14
|
+
</body>
|
|
15
|
+
</html>
|
|
@@ -0,0 +1,34 @@
|
|
|
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="myChart" type="PieChart" style="height:500px;" title="How Much Pizza I Ate Last Night">
|
|
9
|
+
{
|
|
10
|
+
options: {
|
|
11
|
+
|
|
12
|
+
},
|
|
13
|
+
columns: [
|
|
14
|
+
{label: "Topping", type: "string"},
|
|
15
|
+
{label: "Slices", type: "number"}
|
|
16
|
+
],
|
|
17
|
+
rows: [
|
|
18
|
+
["Mushrooms", 3],
|
|
19
|
+
["Onions", 1],
|
|
20
|
+
["Olives", 1],
|
|
21
|
+
["Zucchini", 1],
|
|
22
|
+
["Pepperoni", 2]
|
|
23
|
+
]
|
|
24
|
+
}
|
|
25
|
+
</l-chart>
|
|
26
|
+
<script>
|
|
27
|
+
const el = document.getElementById("myChart");
|
|
28
|
+
el.addEventListener("mounted",() => {
|
|
29
|
+
chart = el.chart;
|
|
30
|
+
chart.addRow(["Anchovies",1]);
|
|
31
|
+
});
|
|
32
|
+
</script>
|
|
33
|
+
</body>
|
|
34
|
+
</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) => {
|
|
@@ -36,24 +49,12 @@
|
|
|
36
49
|
chart.draw(datatable, options);
|
|
37
50
|
}
|
|
38
51
|
};
|
|
52
|
+
self.setOptions = (newOptions) => {
|
|
53
|
+
Object.assign(options,newOptions);
|
|
54
|
+
};
|
|
39
55
|
self.init = () => {
|
|
40
|
-
|
|
41
|
-
callback = (textNode, oldValue, newValue) => {
|
|
42
|
-
datatable = new google.visualization.DataTable();
|
|
43
|
-
try {
|
|
44
|
-
const table = JSON5.parse(newValue.trim());
|
|
45
|
-
datatable = google.visualization.arrayToDataTable(table);
|
|
46
|
-
chart.draw(datatable, options);
|
|
47
|
-
} catch (e) {
|
|
48
|
-
target.innerText = e + newValue;
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
options = {
|
|
52
|
-
title: title
|
|
53
|
-
};
|
|
56
|
+
if(!options.title && title) options.title = title;
|
|
54
57
|
chart = new google.visualization[type](target);
|
|
55
|
-
node.characterDataMutationCallback = callback;
|
|
56
|
-
callback(node, node.textContent, node.textContent);
|
|
57
58
|
addEventListener("change",({target,value}) => {
|
|
58
59
|
if (target === "type") {
|
|
59
60
|
chart = new google.visualization[type](target);
|
|
@@ -64,10 +65,14 @@
|
|
|
64
65
|
}
|
|
65
66
|
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
|
|
67
73
|
resizeObserver.observe(target);
|
|
68
|
-
self.removeAttribute("hidden");
|
|
69
74
|
};
|
|
70
|
-
addEventListener("connected", ({target}) => {
|
|
75
|
+
self.addEventListener("connected", ({target}) => {
|
|
71
76
|
google.charts.load("current", {"packages": ["corechart","gauge"]});
|
|
72
77
|
google.charts.setOnLoadCallback(self.init);
|
|
73
78
|
});
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
const chart = (self,{packages = ["corechart"],options={},columns=[],rows=[],type,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
|
+
options.width = contentBoxSize.inlineSize;
|
|
40
|
+
} else {
|
|
41
|
+
options.width = entry.contentRect.width;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
chart.draw(datatable, options);
|
|
45
|
+
}),
|
|
46
|
+
callback = (textNode, oldValue, newValue) => {
|
|
47
|
+
datatable = new google.visualization.DataTable();
|
|
48
|
+
try {
|
|
49
|
+
const config = JSON5.parse(newValue.trim());
|
|
50
|
+
if(config.options) options=config.options;
|
|
51
|
+
if(config.columns) columns=config.columns;
|
|
52
|
+
if(config.rows) rows=config.rows;
|
|
53
|
+
columns.forEach((column) => {
|
|
54
|
+
datatable.addColumn(column);
|
|
55
|
+
});
|
|
56
|
+
if(rowTransform) rows = rows.map((row) => rowTransform(row));
|
|
57
|
+
datatable.addRows(rows);
|
|
58
|
+
chart.draw(datatable, options);
|
|
59
|
+
} catch (e) {
|
|
60
|
+
target.innerText = e + newValue;
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
self.firstChild.innerText = "Loading ...";
|
|
64
|
+
self.variables({type: "string", title: "string", style: "string"}, {observed:true});
|
|
65
|
+
if(self.hasAttribute("style")) target.setAttribute("style",self.getAttribute("style"));
|
|
66
|
+
self.init = () => {
|
|
67
|
+
if(!options.title && self.hasAttribute("title")) options.title = self.getAttribute("title");
|
|
68
|
+
self.chart = chart = chartProxy(new google.visualization[type||self.getAttribute("type")](target));
|
|
69
|
+
addEventListener("change",({target,value}) => {
|
|
70
|
+
if (target === "type") {
|
|
71
|
+
chart = new google.visualization[type](target);
|
|
72
|
+
} else if (target === "title") {
|
|
73
|
+
options.title = value;
|
|
74
|
+
} else if(target === "style") {
|
|
75
|
+
target.setAttribute("style",value);
|
|
76
|
+
}
|
|
77
|
+
chart.draw(datatable, options);
|
|
78
|
+
});
|
|
79
|
+
const node = self.firstChild;
|
|
80
|
+
callback(node, node.textContent, node.textContent);
|
|
81
|
+
// Will be used by the Lightview global observer
|
|
82
|
+
node.characterDataMutationCallback = callback;
|
|
83
|
+
// resized charts if window resizes
|
|
84
|
+
resizeObserver.observe(target);
|
|
85
|
+
self.dispatchEvent(new Event("mounted"));
|
|
86
|
+
};
|
|
87
|
+
self.addEventListener("connected", ({target}) => {
|
|
88
|
+
google.charts.load("current", {"packages":packages});
|
|
89
|
+
google.charts.setOnLoadCallback(self.init);
|
|
90
|
+
});
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
export {chart};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>Lightview:Chart:Example</title>
|
|
4
|
+
<link href="./gantt.html" rel="module">
|
|
5
|
+
<script src="../../lightview.js"></script>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<l-gantt id="myChart" style="height:500px;" title="Research Project">
|
|
9
|
+
{
|
|
10
|
+
options: { },
|
|
11
|
+
rows: [
|
|
12
|
+
['Research', 'Find sources',"2015-01-01", "2015-01-05", null, 100, null],
|
|
13
|
+
['Write', 'Write paper',null,"2015-01-09", "3d", 25, 'Research,Outline'],
|
|
14
|
+
['Cite', 'Create bibliography',null, "2015-01-07","1d" , 20, 'Research'],
|
|
15
|
+
['Complete', 'Hand in paper', null, "2015-01-10", "1d" , 0, 'Cite,Write'],
|
|
16
|
+
['Outline', 'Outline paper', null, "2015-01-06", "1d" , 100, 'Research']
|
|
17
|
+
]
|
|
18
|
+
}
|
|
19
|
+
</l-gantt>
|
|
20
|
+
<script>
|
|
21
|
+
const el = document.getElementById("myChart");
|
|
22
|
+
el.addEventListener("mounted",() => {
|
|
23
|
+
chart = el.chart;
|
|
24
|
+
});
|
|
25
|
+
</script>
|
|
26
|
+
</body>
|
|
27
|
+
</html>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<meta charset="UTF-8">
|
|
4
|
+
<title>Lightview:Gantt</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/components.js"),
|
|
12
|
+
{duration} = await import("/types.js");
|
|
13
|
+
chart(self,{
|
|
14
|
+
packages:["gantt"],
|
|
15
|
+
columns:[
|
|
16
|
+
{label:"Task ID",type:"string"},
|
|
17
|
+
{label:"Task Name",type:"string"},
|
|
18
|
+
{label:"Start Date",type:"date"},
|
|
19
|
+
{label:"End Date",type:"date"},
|
|
20
|
+
{label:"Duration",type:"number"},
|
|
21
|
+
{label:"% Complete",type:"number"},
|
|
22
|
+
{label:"Dependencies",type:"string"}
|
|
23
|
+
],
|
|
24
|
+
type:"Gantt",
|
|
25
|
+
rowTransform(row) {
|
|
26
|
+
return row.map((item,index) => {
|
|
27
|
+
if(item && (index===2 || index===3)) return new Date(item);
|
|
28
|
+
if(item && index===4) return duration.parse(item);
|
|
29
|
+
return item;
|
|
30
|
+
})
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
</script>
|
|
34
|
+
</body>
|
|
35
|
+
</html>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>Lightview: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: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/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>
|
package/components/gauge.html
CHANGED
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
resizeObserver.observe(target);
|
|
49
49
|
self.removeAttribute("hidden");
|
|
50
50
|
};
|
|
51
|
-
addEventListener("connected", ({target}) => {
|
|
51
|
+
self.addEventListener("connected", ({target}) => {
|
|
52
52
|
google.charts.load("current", {"packages": ["corechart","gauge"]});
|
|
53
53
|
google.charts.setOnLoadCallback(self.init);
|
|
54
54
|
});
|
|
@@ -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/chart.html
CHANGED
|
@@ -50,15 +50,17 @@
|
|
|
50
50
|
</l-chart>
|
|
51
51
|
<script>
|
|
52
52
|
const gauges = document.getElementById("myGauges");
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
53
|
+
gauges.addEventListener("connected",() => {
|
|
54
|
+
setInterval(function() {
|
|
55
|
+
gauges.setValue(0, 1, 40 + Math.round(60 * Math.random()));
|
|
56
|
+
}, 6000);
|
|
57
|
+
setInterval(function() {
|
|
58
|
+
gauges.setValue(1, 1, 40 + Math.round(60 * Math.random()));
|
|
59
|
+
}, 5000);
|
|
60
|
+
setInterval(function() {
|
|
61
|
+
gauges.setValue(2, 1, 60 + Math.round(40 * Math.random()));
|
|
62
|
+
}, 7500);
|
|
63
|
+
})
|
|
62
64
|
</script>
|
|
63
65
|
</body>
|
|
64
66
|
</html>
|