Skip to content

Commit 73179ea

Browse files
mathertelmathertel
committed
piechart sfc component
1 parent 7f7809a commit 73179ea

9 files changed

+1074
-227
lines changed

‎chartpie.js

-152
This file was deleted.

‎chartpie.svg

-11
This file was deleted.

‎index.htm

+22-17
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919

2020
<link Content-Type="text/css" href="/iotstyle.css" rel="stylesheet" />
2121
<script src="/micro.js"></script>
22+
<script src="/sfc/loader.js"></script>
23+
<script>
24+
var allComponentsLoaded = window.loadComponent('u-piechart', '/sfc');
25+
</script>
2226
</head>
2327

2428
<body>
@@ -70,9 +74,10 @@ <h3>File System Memory</h3>
7074
</div>
7175

7276
<div class="block">
73-
<object id="meminfo" data="chartpie.svg" type="image/svg+xml" style="float:left;width:120px;height:120px;margin-right: 1rem;"></object>
77+
<u-piechart id="meminfo" style="float:left;width:220px;margin-right: 1rem;"></u-piechart>
78+
7479
<p><span id="memTotal"></span> bytes available.</p>
75-
<p><span id="memUsed"></span> bytes (<span id="memPart"></span>%) in use</p>
80+
<p><span id="memUsed"></span> bytes in use</p>
7681
</div>
7782
</div>
7883

@@ -109,9 +114,10 @@ <h3>Dev-Links</h3>
109114
<p><a href="portal.htm">portal.htm</a></p>
110115
<p><a href="portalconfig.htm">portalConfig.htm</a></p>
111116
<p><a href="monitor.htm">monitor.htm</a></p>
112-
<p><a href="iotstylecheck.htm">iotStyleCheck</a></p>
117+
<p><a href="test-iotstyle.htm">test-iotstyle</a></p>
118+
<p><a href="test-piechart.htm">test-piechart</a></p>
119+
113120
<p><a href="chartline-test.htm">chartLine-test</a></p>
114-
<p><a href="chartpie-test.htm">chartPie-test</a></p>
115121
<p><a href="chartgauge-test.htm">gauge-test</a></p>
116122
<p><a href="elementcheck.htm">elementcheck</a></p>
117123
</div>
@@ -129,7 +135,7 @@ <h3>Diag</h3>
129135
</div>
130136

131137
<script>
132-
window.onerror = function (msg, url, lineNo, columnNo, error) {
138+
window.onerror = function(msg, url, lineNo, columnNo, error) {
133139
var string = msg.toLowerCase();
134140
var substring = 'script error';
135141
if (string.indexOf(substring) > -1) {
@@ -151,13 +157,10 @@ <h3>Diag</h3>
151157
</script>
152158

153159
<script>
154-
var memObj = document.getElementById('meminfo');
155-
var memAPI;
156-
157-
window.addEventListener('load', function () {
158-
memAPI = memObj.getSVGDocument().api;
160+
var memObj = document.querySelector('#meminfo');
161+
window.addEventListener('load', function() {
159162
fetchJSON('/api/sysinfo')
160-
.then(function (d) {
163+
.then(async (d) => {
161164
var o = document.getElementById('sysinfo');
162165
o.innerText = JSON.stringify(d, null, 1)
163166
.replace('{\n', '')
@@ -166,24 +169,26 @@ <h3>Diag</h3>
166169

167170
document.getElementById('memTotal').textContent = d.fsTotalBytes;
168171
document.getElementById('memUsed').textContent = d.fsUsedBytes;
169-
document.getElementById('memPart').textContent = Math.round((Number(d.fsUsedBytes) * 100) / Number(d.fsTotalBytes));
170172

171-
memAPI.draw([
173+
await allComponentsLoaded;
174+
175+
memObj.setOptions({ showPercentage: true });
176+
memObj.draw([
172177
{
173-
color: '#304878',
178+
color: '#223355',
174179
title: "Used",
175180
value: Number(d['fsUsedBytes'])
176181
},
177182
{
178-
color: '#cfc',
183+
color: 'silver',
179184
title: "Available",
180185
value: Number(d.fsTotalBytes) - Number(d.fsUsedBytes)
181186
}
182187
]);
183188
});
184189

185190
fetchJSON('/api/state')
186-
.then(function (d) {
191+
.then(function(d) {
187192
var o = document.querySelector('#stateInfo');
188193
o.innerText = JSON.stringify(d, null, 1)
189194
.replace('{\n', '')
@@ -193,7 +198,7 @@ <h3>Diag</h3>
193198
});
194199

195200
fetchJSON('/api/elements')
196-
.then(function (d) {
201+
.then(function(d) {
197202
var o = document.querySelector('#elementsInfo');
198203
o.innerText = d.join(', ');
199204
});

‎packdist.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -134,11 +134,10 @@ const assets = [
134134

135135
{ m: 'js', src: 'sfc/loader.js' },
136136
{ m: 'm', src: 'sfc/u-colorpick.vue' },
137+
{ m: 'm', src: 'sfc/u-piechart.vue' },
137138

138139
{ m: 'xml', src: 'chartline.svg' },
139140
{ m: 'js', src: 'chartline.js' },
140-
{ m: 'xml', src: 'chartpie.svg' },
141-
{ m: 'js', src: 'chartpie.js' },
142141
{ m: 'js', src: 'microsvg.js' },
143142

144143
{ m: 'm', src: 'index.htm' },

‎sfc/loader.js

+18-23
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
// The UComponent class acts as a intermediate class between user defined SFC and the generic HTMLElement class.
88
// It implements the generation of the shadow dom and css according to the style and template.
99
class UComponent extends HTMLElement {
10+
1011
constructor() {
1112
super();
1213

@@ -96,46 +97,40 @@ class UComponent extends HTMLElement {
9697
window.loadComponent = (function() {
9798

9899
async function fetchSFC(tagName, folder = '') {
99-
const sfc = { tagName, template: undefined, style: undefined, def: undefined };
100+
let def;
100101

101102
if (folder === undefined) folder = '';
102103
if (folder.length > 0 && (!folder.endsWith('/'))) folder += '/';
103104
const url = folder + tagName + '.vue';
104-
console.log(url);
105+
console.debug('SFC', `registerComponent(${tagName}, ${url})`);
105106

106107
// get DOM from sfc-file
107108
const dom = await fetch(url)
108109
.then(response => response.text())
109110
.then(html => (new DOMParser()).parseFromString(html, 'text/html'));
110111

111-
// save template and css for later
112-
sfc.template = dom.querySelector('template');
113-
sfc.style = dom.querySelector('style');
114-
115112
// create class from script
116113
const scriptObj = dom.querySelector('script');
117-
const jsFile = new Blob([scriptObj.textContent], { type: 'application/javascript' });
118-
const module = await import(URL.createObjectURL(jsFile));
119-
120-
sfc.def = module.default;
121-
122-
return (sfc);
123-
}; // fetchSFC()
124-
125-
126-
function registerComponent({ tagName, template, style, def }) {
127-
console.debug('SFC', `registerComponent(${tagName})`);
114+
if (scriptObj && scriptObj.textContent) {
115+
const jsFile = new Blob([scriptObj.textContent], { type: 'application/javascript' });
116+
const module = await import(URL.createObjectURL(jsFile));
117+
def = module.default;
118+
} else {
119+
console.error('SFC', `No class defined in ${url}`);
120+
def = UComponent;
121+
}
128122

129123
// make template and style available to object constructor()
130-
def.uTemplate = template;
131-
def.uStyle = style;
124+
def.uTemplate = dom.querySelector('template');
125+
def.uStyle = dom.querySelector('style');
132126
customElements.define(tagName, def);
133127
console.debug('SFC', `${tagName} defined.`);
134-
} // registerComponent();
128+
}; // fetchSFC()
129+
135130

136-
function loadComponent(urlList, folder) {
137-
const urls = urlList.split(',');
138-
return (Promise.all(urls.map((u) => fetchSFC(u, folder).then(registerComponent))));
131+
function loadComponent(tags, folder) {
132+
if (typeof tags === 'string') tags = tags.split(',');
133+
return (Promise.all(tags.map((tag) => fetchSFC(tag, folder))));
139134
}
140135

141136
return loadComponent;

‎sfc/u-colorpick.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Implementation of a web component for color picking with advanced integration fu
44
The component will display the hex color value and show a circle with the color.
55
The color value and a standard change event is implemented to mimic the behavior of a standard HTML input[type=color] element.
66

7-
<my-colorpick value="#000088" cssvar="color"></my-colorpick>
7+
<u-colorpick value="#000088" cssvar="color"></u-colorpick>
88

99
## HTML Attributes
1010

@@ -60,7 +60,7 @@ label {
6060
</style>
6161

6262
<script>
63-
export default class ColorPick extends UComponent {
63+
export default class UColorPick extends UComponent {
6464
static observedAttributes = ["value"];
6565
value = 'black';
6666
cssvar = '';

0 commit comments

Comments
 (0)