lightview 1.6.6-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 +1 -1
- package/components/chart/chart.html +15 -0
- package/components/chart/example.html +34 -0
- package/components/chart.html +22 -18
- 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/timeline.html +81 -0
- package/examples/counter.html +1 -1
- package/examples/duration.html +279 -0
- 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/lightview.js +271 -213
- package/package.json +1 -1
- package/test/basic.html +8 -4
- package/types.js +73 -2
package/README.md
CHANGED
|
@@ -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) => {
|
|
@@ -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,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>
|
|
@@ -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>
|