From e0fd7714bef2a4eec697ac48dd2978bf6f5fa287 Mon Sep 17 00:00:00 2001 From: Dave Lane Date: Mon, 19 Aug 2024 00:26:47 +1200 Subject: [PATCH] added circle and square markers, coloured tags --- src/routes/+page.js | 1 + src/routes/+page.svelte | 194 ++++++++++++++++++++++------------------ 2 files changed, 106 insertions(+), 89 deletions(-) diff --git a/src/routes/+page.js b/src/routes/+page.js index 951d6a5..880a3ea 100644 --- a/src/routes/+page.js +++ b/src/routes/+page.js @@ -7,6 +7,7 @@ export const load = async ({ fetch }) => { return { webservices: { technologies: webservicesData.technologies, + affiliates: webservicesData.affiliates, hosts: webservicesData.hosts } }; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 4f26a81..9bcb3c5 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -2,8 +2,9 @@ export let data; const { webservices } = data; - console.log('orig affiliates:', webservices.affiliates); - console.log('orig hosts:', webservices.hosts); + //console.log('orig:', webservices); + //console.log('orig affiliates:', webservices.affiliates); + //console.log('orig hosts:', webservices.hosts); // 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" ]; @@ -11,19 +12,19 @@ function processData(webservices) { let instances = 0; let current = []; - let current_status = []; let future = []; // properties of technologies - let categories = []; - let analogues = []; - let licenses = []; + let category_list = []; + let analogue_list = []; + let license_list = []; // properties of instances - let statuses = []; - let affiliates = []; + let status_list = []; + let affiliate_list = []; + let host_list = []; + // actual objects let hosts = []; - let host_data = []; - let affiliate_data = []; + let affiliates = []; // // just a trivial reassignment //let hosts = webservices.hosts; @@ -33,20 +34,20 @@ let tech = webservices.technologies[key]; if (tech.hasOwnProperty('categories') && tech.categories.constructor === Array ) { tech.categories.forEach(function(category, index) { - if (categories.hasOwnProperty(category)) categories[category]++; - else categories[category] = 1; + if (category_list.hasOwnProperty(category)) category_list[category]++; + else category_list[category] = 1; }); } if (tech.hasOwnProperty('analogues') && tech.analogues.constructor === Array ) { tech.analogues.forEach(function(analogue, index) { - if (analogues.hasOwnProperty(analogue)) analogues[analogue]++; - else analogues[analogue] = 1; + if (analogue_list.hasOwnProperty(analogue)) analogue_list[analogue]++; + else analogue_list[analogue] = 1; }); } if (tech.hasOwnProperty('license')) { let license = tech.license; - if (licenses.hasOwnProperty(license)) licenses[license]++; - else licenses[license] = 1; + if (license_list.hasOwnProperty(license)) license_list[license]++; + else license_list[license] = 1; } if (hasInstances(tech)) { @@ -57,18 +58,18 @@ instances++; if (instance.hasOwnProperty('status')) { let tag = instance.status; - if (statuses.hasOwnProperty(tag)) statuses[tag]++; - else statuses[tag] = 1; + if (status_list.hasOwnProperty(tag)) status_list[tag]++; + else status_list[tag] = 1; } if (instance.hasOwnProperty('affiliation')) { let tag = instance.affiliation; - if (affiliates.hasOwnProperty(tag)) affiliates[tag]++; - else affiliates[tag] = 1; + if (affiliate_list.hasOwnProperty(tag)) affiliate_list[tag]++; + else affiliate_list[tag] = 1; } if (instance.hasOwnProperty('host')) { let tag = instance.host; - if (hosts.hasOwnProperty(tag)) hosts[tag]++; - else hosts[tag] = 1; + if (host_list.hasOwnProperty(tag)) host_list[tag]++; + else host_list[tag] = 1; } }); } else { @@ -82,15 +83,15 @@ host['name'] = key; //console.log('host: ', host); 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) { - console.log('key: ', key); + //console.log('key: ', key); let affiliate = webservices.affiliates[key]; - console.log('affiliate assignment: ', affiliate); - affiliate_data[key] = affiliate; + //console.log('affiliate assignment: ', affiliate); + affiliates[key] = affiliate; // if (affiliate.hasOwnProperty('name')) { // affiliate_data[key] = affiliate; // } @@ -106,18 +107,18 @@ total_instances: instances, active_services: current, candidate_services: future, - tech_tags: { - categories: categories, - analogues: analogues, - licenses: licenses + tech_lists: { + category_list: category_list, + analogue_list: analogue_list, + license_list: license_list }, - instance_tags: { - statuses: statuses, - affiliates: affiliates, - hosts: hosts + instance_lists: { + status_list: status_list, + affiliate_list: affiliate_list, + host_list: host_list }, - hosts: host_data, - affiliates: affiliate_data + hosts: hosts, + affiliates: affiliates }; } @@ -131,7 +132,6 @@ let keys = []; for (let key in ob) { keys.push(key); - //console.log('pushing key ' + key); }; return keys; } @@ -144,37 +144,38 @@ } } - function hostColours(hosts, colours, host_data) { + function hostColours(host_list, colours, hosts) { let host_array = {}; 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); - if (host_data[host].hasOwnProperty('domain') && host_data[host].hasOwnProperty('affiliation')) { + if (hosts[host].hasOwnProperty('domain') && hosts[host].hasOwnProperty('affiliation')) { host_array[host] = { "colour": colours[i++], - "domain": host_data[host].domain, - "affiliation": host_data[host].affiliation + "domain": hosts[host].domain, + "affiliation": hosts[host].affiliation } } }); return host_array; } - function affiliateColours(affiliates, colours, affiliate_data) { + function affiliateColours(affiliate_list, colours, affiliates) { let affiliate_array = {}; + let i = 0; - console.log('affiliate_data_full:', affiliate_data); + //console.log('affiliates:', affiliates); - for (const affiliate of affiliates) { - console.log('affiliate:', affiliate); - if (affiliate_data[affiliate].hasOwnProperty('name') && affiliate_data[affiliate].hasOwnProperty('website')) { + for (const affiliate of affiliate_list) { + //console.log('affiliate:', affiliate); + if (affiliates[affiliate].hasOwnProperty('name') && affiliates[affiliate].hasOwnProperty('website')) { affiliate_array[affiliate] = { "colour": colours[i++], - "name": affiliate_data[affiliate].name, - "website": affiliate_data[affiliate].website + "name": affiliates[affiliate].name, + "website": affiliates[affiliate].website } } } @@ -189,21 +190,21 @@ const technologies = results.active_services; //console.log(technologies); - const categories = getKeys(results.tech_tags.categories).sort(); - const analogues = getKeys(results.tech_tags.analogues).sort(); - const licenses = getKeys(results.tech_tags.licenses).sort(); - const statuses = getKeys(results.instance_tags.statuses).sort(); - const affiliates = getKeys(results.instance_tags.affiliates).sort(); - const hosts = getKeys(results.instance_tags.hosts).sort(); + const category_list = getKeys(results.tech_lists.category_list).sort(); + const analogue_list = getKeys(results.tech_lists.analogue_list).sort(); + const license_list = getKeys(results.tech_lists.license_list).sort(); + const status_list = getKeys(results.instance_lists.status_list).sort(); + const affiliate_list = getKeys(results.instance_lists.affiliate_list).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); - const affiliate_data = results.affiliates; - console.log('affiliate_data: ', results.affiliates); - const host_colours = hostColours(hosts, colours30, host_data); + const affiliates = results.affiliates; + //console.log('affiliate_data: ', results.affiliates); + const host_colours = hostColours(host_list, colours30, hosts); //console.log('host_colours:', host_colours); - const affiliate_colours = affiliateColours(affiliates, colours30, affiliate_data); - console.log('affiliate_colours:',affiliate_colours); + const affiliate_colours = affiliateColours(affiliate_list, colours30, affiliates); + //console.log('affiliate_colours:',affiliate_colours); //console.log('categories array: ', results.tech_tags.categories); //console.log('categories keys: ', categories); @@ -220,13 +221,13 @@
-
Categories: {#each categories as category}{category} {/each}
+
Categories: {#each category_list as category}{category} {/each}
-
Licenses: {#each licenses as license}{license} {/each}
+
Licenses: {#each license_list as license}{license} {/each}
-
Statuses: {#each statuses as status}{status} {/each}
Affiliates: {#each affiliates as affiliate}{affiliate} {/each}
-
Hosts: {#each hosts as host}{host} {/each}
+
Statuses: {#each status_list as status}{status} {/each}
Affiliates: {#each affiliate_list as affiliate} {affiliate} {/each}
+
Hosts: {#each host_list as host} {host} {/each}
@@ -237,18 +238,12 @@ {#if (technology.analogues)}

Alternative to {toOxfordCommaString(technology.analogues)}

{/if}

{technology.description}

{#if hasInstances(technology)} -
-
    - {#each technology.instances as instance} -
  • {instance.affiliation}
    • - {/each} -
+

{#each technology.instances as instance} + {/each}

{:else} -
-
    -
  • Nothing here yet...
    • -
+
+ Nothing here yet...
{/if}
@@ -284,17 +279,34 @@ } .tag { font-size: 80%; - color: #777; margin-right: 0.5em; - line-height: 2; - background-color: #a369a2; - color: #fff; - padding: 4px 8px; - border-radius: 10px; + line-height: 2.5; + padding: 6px 8px; + border-radius: 14px; white-space: nowrap; word-break: keep-all; } .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 { display: grid; grid-gap: 15px; @@ -332,18 +344,19 @@ font-size: 80%; color: #555; } - .tile .instances { - background-color: #c2e6c2; + .instances { + background-color: #eee; position: absolute; bottom: 0; height: 3em; width: 100%; } - .tile .instances ul { - margin-bottom: 0px; + .instances .marker { + margin-right: 3px; } .webservices li { list-style-type: none; } .value { font-weight: bold; color: #000; } + .marker { vertical-align: middle; } .triangle { --side-size: 20px; border-left: var(--side-size) solid transparent; @@ -354,12 +367,15 @@ } .circle { height: 20px; - width: 50px; + width: 20px; background-color: #555; border-radius: 50%; + display: inline-block; } .square { height: 20px; - width: 50px; + width: 20px; + background-color: #555; + display: inline-block; }