lightweight/webservices-app
Template
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

added circle and square markers, coloured tags

Browse source
This commit is contained in:
Dave Lane 2024-08-19 00:26:47 +12:00
parent 29c3d48da6
commit e0fd7714be
2 changed files with 106 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/routes/+page.js
View file

@ -7,6 +7,7 @@ export const load = async ({ fetch }) => {
return { return {
webservices: { webservices: {
technologies: webservicesData.technologies, technologies: webservicesData.technologies,
affiliates: webservicesData.affiliates,
hosts: webservicesData.hosts hosts: webservicesData.hosts
} }
}; };

194
src/routes/+page.svelte
View file

@ -2,8 +2,9 @@
export let data; export let data;
const { webservices } = data; const { webservices } = data;
console.log('orig affiliates:', webservices.affiliates); //console.log('orig:', webservices);
console.log('orig hosts:', webservices.hosts); //console.log('orig affiliates:', webservices.affiliates);
//console.log('orig hosts:', webservices.hosts);
// source: https://mokole.com/palette.html 20 colors with default settings otherwise // source: https://mokole.com/palette.html 20 colors with default settings otherwise
const colours30 = [ "#808080", "#7f0000", "#006400", "#808000", "#483d8b", "#008b8b", "#cd853f", "#00008b", "#7f007f", "#8fbc8f", "#b03060", "#ff0000", "#ff8c00", "#00ff00", "#9400d3", "#00ff7f", "#dc143c", "#00ffff", "#00bfff", "#0000ff", "#f08080", "#adff2f", "#1e90ff", "#ffff54", "#90ee90", "#add8e6", "#ff1493", "#7b68ee", "#ee82ee", "#ffe4b5" ]; const colours30 = [ "#808080", "#7f0000", "#006400", "#808000", "#483d8b", "#008b8b", "#cd853f", "#00008b", "#7f007f", "#8fbc8f", "#b03060", "#ff0000", "#ff8c00", "#00ff00", "#9400d3", "#00ff7f", "#dc143c", "#00ffff", "#00bfff", "#0000ff", "#f08080", "#adff2f", "#1e90ff", "#ffff54", "#90ee90", "#add8e6", "#ff1493", "#7b68ee", "#ee82ee", "#ffe4b5" ];
@ -11,19 +12,19 @@
function processData(webservices) { function processData(webservices) {
let instances = 0; let instances = 0;
let current = []; let current = [];
let current_status = [];
let future = []; let future = [];
// properties of technologies // properties of technologies
let categories = []; let category_list = [];
let analogues = []; let analogue_list = [];
let licenses = []; let license_list = [];
// properties of instances // properties of instances
let statuses = []; let status_list = [];
let affiliates = []; let affiliate_list = [];
let host_list = [];
// actual objects
let hosts = []; let hosts = [];
let host_data = []; let affiliates = [];
let affiliate_data = [];
// //
// just a trivial reassignment // just a trivial reassignment
//let hosts = webservices.hosts; //let hosts = webservices.hosts;
@ -33,20 +34,20 @@
let tech = webservices.technologies[key]; let tech = webservices.technologies[key];
if (tech.hasOwnProperty('categories') && tech.categories.constructor === Array ) { if (tech.hasOwnProperty('categories') && tech.categories.constructor === Array ) {
tech.categories.forEach(function(category, index) { tech.categories.forEach(function(category, index) {
if (categories.hasOwnProperty(category)) categories[category]++; if (category_list.hasOwnProperty(category)) category_list[category]++;
else categories[category] = 1; else category_list[category] = 1;
}); });
} }
if (tech.hasOwnProperty('analogues') && tech.analogues.constructor === Array ) { if (tech.hasOwnProperty('analogues') && tech.analogues.constructor === Array ) {
tech.analogues.forEach(function(analogue, index) { tech.analogues.forEach(function(analogue, index) {
if (analogues.hasOwnProperty(analogue)) analogues[analogue]++; if (analogue_list.hasOwnProperty(analogue)) analogue_list[analogue]++;
else analogues[analogue] = 1; else analogue_list[analogue] = 1;
}); });
} }
if (tech.hasOwnProperty('license')) { if (tech.hasOwnProperty('license')) {
let license = tech.license; let license = tech.license;
if (licenses.hasOwnProperty(license)) licenses[license]++; if (license_list.hasOwnProperty(license)) license_list[license]++;
else licenses[license] = 1; else license_list[license] = 1;
} }
if (hasInstances(tech)) { if (hasInstances(tech)) {
@ -57,18 +58,18 @@
instances++; instances++;
if (instance.hasOwnProperty('status')) { if (instance.hasOwnProperty('status')) {
let tag = instance.status; let tag = instance.status;
if (statuses.hasOwnProperty(tag)) statuses[tag]++; if (status_list.hasOwnProperty(tag)) status_list[tag]++;
else statuses[tag] = 1; else status_list[tag] = 1;
} }
if (instance.hasOwnProperty('affiliation')) { if (instance.hasOwnProperty('affiliation')) {
let tag = instance.affiliation; let tag = instance.affiliation;
if (affiliates.hasOwnProperty(tag)) affiliates[tag]++; if (affiliate_list.hasOwnProperty(tag)) affiliate_list[tag]++;
else affiliates[tag] = 1; else affiliate_list[tag] = 1;
} }
if (instance.hasOwnProperty('host')) { if (instance.hasOwnProperty('host')) {
let tag = instance.host; let tag = instance.host;
if (hosts.hasOwnProperty(tag)) hosts[tag]++; if (host_list.hasOwnProperty(tag)) host_list[tag]++;
else hosts[tag] = 1; else host_list[tag] = 1;
} }
}); });
} else { } else {
@ -82,15 +83,15 @@
host['name'] = key; host['name'] = key;
//console.log('host: ', host); //console.log('host: ', host);
if (host.hasOwnProperty('domain') && !(host.hasOwnProperty('status') && host.status == 'retired')) { if (host.hasOwnProperty('domain') && !(host.hasOwnProperty('status') && host.status == 'retired')) {
host_data[key] = host; hosts[key] = host;
} }
} }
console.log('webservices.affiliates: ', webservices.affiliates); //console.log('webservices.affiliates: ', webservices.affiliates);
for (let key in webservices.affiliates) { for (let key in webservices.affiliates) {
console.log('key: ', key); //console.log('key: ', key);
let affiliate = webservices.affiliates[key]; let affiliate = webservices.affiliates[key];
console.log('affiliate assignment: ', affiliate); //console.log('affiliate assignment: ', affiliate);
affiliate_data[key] = affiliate; affiliates[key] = affiliate;
// if (affiliate.hasOwnProperty('name')) { // if (affiliate.hasOwnProperty('name')) {
// affiliate_data[key] = affiliate; // affiliate_data[key] = affiliate;
// } // }
@ -106,18 +107,18 @@
total_instances: instances, total_instances: instances,
active_services: current, active_services: current,
candidate_services: future, candidate_services: future,
tech_tags: { tech_lists: {
categories: categories, category_list: category_list,
analogues: analogues, analogue_list: analogue_list,
licenses: licenses license_list: license_list
}, },
instance_tags: { instance_lists: {
statuses: statuses, status_list: status_list,
affiliates: affiliates, affiliate_list: affiliate_list,
hosts: hosts host_list: host_list
}, },
hosts: host_data, hosts: hosts,
affiliates: affiliate_data affiliates: affiliates
}; };
} }
@ -131,7 +132,6 @@
let keys = []; let keys = [];
for (let key in ob) { for (let key in ob) {
keys.push(key); keys.push(key);
//console.log('pushing key ' + key);
}; };
return keys; return keys;
} }
@ -144,37 +144,38 @@
} }
} }
function hostColours(hosts, colours, host_data) { function hostColours(host_list, colours, hosts) {
let host_array = {}; let host_array = {};
let i = 0; let i = 0;
//console.log('host_data:', host_data); //console.log('hosts:', hosts);
hosts.forEach(function(host) { host_list.forEach(function(host) {
//console.log(host); //console.log(host);
if (host_data[host].hasOwnProperty('domain') && host_data[host].hasOwnProperty('affiliation')) { if (hosts[host].hasOwnProperty('domain') && hosts[host].hasOwnProperty('affiliation')) {
host_array[host] = { host_array[host] = {
"colour": colours[i++], "colour": colours[i++],
"domain": host_data[host].domain, "domain": hosts[host].domain,
"affiliation": host_data[host].affiliation "affiliation": hosts[host].affiliation
} }
} }
}); });
return host_array; return host_array;
} }
function affiliateColours(affiliates, colours, affiliate_data) { function affiliateColours(affiliate_list, colours, affiliates) {
let affiliate_array = {}; let affiliate_array = {};
let i = 0;
console.log('affiliate_data_full:', affiliate_data); //console.log('affiliates:', affiliates);
for (const affiliate of affiliates) { for (const affiliate of affiliate_list) {
console.log('affiliate:', affiliate); //console.log('affiliate:', affiliate);
if (affiliate_data[affiliate].hasOwnProperty('name') && affiliate_data[affiliate].hasOwnProperty('website')) { if (affiliates[affiliate].hasOwnProperty('name') && affiliates[affiliate].hasOwnProperty('website')) {
affiliate_array[affiliate] = { affiliate_array[affiliate] = {
"colour": colours[i++], "colour": colours[i++],
"name": affiliate_data[affiliate].name, "name": affiliates[affiliate].name,
"website": affiliate_data[affiliate].website "website": affiliates[affiliate].website
} }
} }
} }
@ -189,21 +190,21 @@
const technologies = results.active_services; const technologies = results.active_services;
//console.log(technologies); //console.log(technologies);
const categories = getKeys(results.tech_tags.categories).sort(); const category_list = getKeys(results.tech_lists.category_list).sort();
const analogues = getKeys(results.tech_tags.analogues).sort(); const analogue_list = getKeys(results.tech_lists.analogue_list).sort();
const licenses = getKeys(results.tech_tags.licenses).sort(); const license_list = getKeys(results.tech_lists.license_list).sort();
const statuses = getKeys(results.instance_tags.statuses).sort(); const status_list = getKeys(results.instance_lists.status_list).sort();
const affiliates = getKeys(results.instance_tags.affiliates).sort(); const affiliate_list = getKeys(results.instance_lists.affiliate_list).sort();
const hosts = getKeys(results.instance_tags.hosts).sort(); const host_list = getKeys(results.instance_lists.host_list).sort();
const host_data = results.hosts; const hosts = results.hosts;
//console.log('host_data: ', results.hosts); //console.log('host_data: ', results.hosts);
const affiliate_data = results.affiliates; const affiliates = results.affiliates;
console.log('affiliate_data: ', results.affiliates); //console.log('affiliate_data: ', results.affiliates);
const host_colours = hostColours(hosts, colours30, host_data); const host_colours = hostColours(host_list, colours30, hosts);
//console.log('host_colours:', host_colours); //console.log('host_colours:', host_colours);
const affiliate_colours = affiliateColours(affiliates, colours30, affiliate_data); const affiliate_colours = affiliateColours(affiliate_list, colours30, affiliates);
console.log('affiliate_colours:',affiliate_colours); //console.log('affiliate_colours:',affiliate_colours);
//console.log('categories array: ', results.tech_tags.categories); //console.log('categories array: ', results.tech_tags.categories);
//console.log('categories keys: ', categories); //console.log('categories keys: ', categories);
@ -220,13 +221,13 @@
</div> </div>
<div class="filters"> <div class="filters">
<div class="tag-list tech"> <div class="tag-list tech">
<div class="tags tech categories">Categories: {#each categories as category}<span class="tag category">{category}</span> {/each}</div> <div class="tags tech categories">Categories: {#each category_list as category}<span class="tag category">{category}</span> {/each}</div>
<!--<div class="tags tech analogues">{#each analogues as analogue}<span class="tag analogue">{analogue}</span> {/each}</div>--> <!--<div class="tags tech analogues">{#each analogues as analogue}<span class="tag analogue">{analogue}</span> {/each}</div>-->
<div class="tags tech licenses">Licenses: {#each licenses as license}<span class="tag license">{license}</span> {/each}</div> <div class="tags tech licenses">Licenses: {#each license_list as license}<span class="tag license">{license}</span> {/each}</div>
</div> </div>
<div class="tag-list instance"> <div class="tag-list instance">
<div class="tags instance statuses">Statuses: {#each statuses as status}<span class="tag status">{status}</span> {/each}</div> <div class="tags instance affiliates">Affiliates: {#each affiliates as affiliate}<span class="tag affilate">{affiliate}</span> {/each}</div> <div class="tags instance statuses">Statuses: {#each status_list as status}<span class="tag status">{status}</span> {/each}</div> <div class="tags instance affiliates">Affiliates: {#each affiliate_list as affiliate}<span class="tag affiliate"><span class="marker circle" style="background-color: {affiliate_colours[affiliate].colour}"></span> {affiliate}</span> {/each}</div>
<div class="tags instance hosts">Hosts: {#each hosts as host}<span class="tag host">{host}</span> {/each}</div> <div class="tags instance hosts">Hosts: {#each host_list as host}<span class="tag host"><span class="marker square" style="background-color: {host_colours[host].colour}"></span> {host}</span> {/each}</div>
</div> </div>
</div> </div>
<div class="tiles"> <div class="tiles">
@ -237,18 +238,12 @@
{#if (technology.analogues)}<p class="analogues">Alternative to <span class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if} {#if (technology.analogues)}<p class="analogues">Alternative to <span class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
<p class="description">{technology.description}</p> <p class="description">{technology.description}</p>
{#if hasInstances(technology)} {#if hasInstances(technology)}
<div class="instances"> <div class="instances"><p>{#each technology.instances as instance}
<ul class="instances"> <a href="https://{instance.domain}" title="{technology.name} instance {instance.domain} hosted on '{instance.host}' by {instance.affiliation}"><span class="marker circle" style="background-color: {affiliate_colours[instance.affiliation].colour}"></span></a>{/each}</p>
{#each technology.instances as instance}
<li><a href="https://{instance.domain}"><span style="{affiliate_colours[instance.affiliate]}.colour"></span></a> <span class="affiliation {instance.affiliation}">{instance.affiliation}</span></li>
{/each}
</ul>
</div> </div>
{:else} {:else}
<div class="instances cell"> <div class="instances">
<ul class="instances"> Nothing here yet...
<li>Nothing here yet...</li>
</ul>
</div> </div>
{/if} {/if}
</div> </div>
@ -284,17 +279,34 @@
} }
.tag { .tag {
font-size: 80%; font-size: 80%;
color: #777;
margin-right: 0.5em; margin-right: 0.5em;
line-height: 2; line-height: 2.5;
background-color: #a369a2; padding: 6px 8px;
color: #fff; border-radius: 14px;
padding: 4px 8px;
border-radius: 10px;
white-space: nowrap; white-space: nowrap;
word-break: keep-all; word-break: keep-all;
} }
.tag:after { content: "\00a0"; } .tag:after { content: "\00a0"; }
.tag.category {
background-color: #a369a2;
color: #fff;
}
.tag.license {
background-color: #a369a2;
color: #fff;
}
.tag.status {
background-color: #a369a2;
color: #fff;
}
.tag.affiliate {
background-color: #fff;
color: #000;
}
.tag.host {
background-color: #fff;
color: #000;
}
.tiles { .tiles {
display: grid; display: grid;
grid-gap: 15px; grid-gap: 15px;
@ -332,18 +344,19 @@
font-size: 80%; font-size: 80%;
color: #555; color: #555;
} }
.tile .instances { .instances {
background-color: #c2e6c2; background-color: #eee;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
height: 3em; height: 3em;
width: 100%; width: 100%;
} }
.tile .instances ul { .instances .marker {
margin-bottom: 0px; margin-right: 3px;
} }
.webservices li { list-style-type: none; } .webservices li { list-style-type: none; }
.value { font-weight: bold; color: #000; } .value { font-weight: bold; color: #000; }
.marker { vertical-align: middle; }
.triangle { .triangle {
--side-size: 20px; --side-size: 20px;
border-left: var(--side-size) solid transparent; border-left: var(--side-size) solid transparent;
@ -354,12 +367,15 @@
} }
.circle { .circle {
height: 20px; height: 20px;
width: 50px; width: 20px;
background-color: #555; background-color: #555;
border-radius: 50%; border-radius: 50%;
display: inline-block;
} }
.square { .square {
height: 20px; height: 20px;
width: 50px; width: 20px;
background-color: #555;
display: inline-block;
} }
</style> </style>