working on splitting up app into bitesized chunks

README.md

@@ -2,6 +2,9 @@
 
 This is an app I'm creating to visualise data I've created (in JSON form) describing my self-hosted (professional, volunteer, & personal) webservices.
 
+## Credits
+
+Developed by Dave Lane, [Open Source Technologist](https://oerfoundation.org/about/staff/#Dave_Lane) at the [OER Foundation](https://oerfoundation.org). Many thanks to support from the Foundation for this exploratory work!
 
 ## Installing the Webservices App
 

src/colours.js

@@ -0,0 +1,35 @@
+// source: https://mokole.com/palette.html 20 colors with default settings otherwise
+const colours = [
+	'#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'
+];
+
+export { colours };

src/lib/processData.svelte

@@ -0,0 +1,112 @@
+<script>
+    // digest and return useful info from the Webservices JSON feed
+    export function processData(webservices) {
+        let instances = 0;
+        let current = [];
+        let future = [];
+        // properties of technologies
+        let category_list = [];
+        let analogue_list = [];
+        let license_list = [];
+        // properties of instances
+        let status_list = [];
+        let affiliate_list = [];
+        let host_list = [];
+
+        // actual objects
+        let hosts = [];
+        let affiliates = [];
+        //
+        // just a trivial reassignment
+        //let hosts = webservices.hosts;
+        //
+        // pull out relevant info in useful chunks.
+        for (let key in webservices.technologies) {
+            let tech = webservices.technologies[key];
+            if (tech.hasOwnProperty('categories') && tech.categories.constructor === Array) {
+                tech.categories.forEach(function (category, index) {
+                    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 (analogue_list.hasOwnProperty(analogue)) analogue_list[analogue]++;
+                s  else analogue_list[analogue] = 1;
+                });
+            }
+            if (tech.hasOwnProperty('license')) {
+                let license = tech.license;
+                if (license_list.hasOwnProperty(license)) license_list[license]++;
+                else license_list[license] = 1;
+            }
+
+            if (hasInstances(tech)) {
+                tech['name'] = key;
+                current.push(tech);
+                //console.log(tech.name + ': ' + tech.instances.length + ' instances...');
+                tech.instances.forEach(function (instance, i) {
+                    instances++;
+                    if (instance.hasOwnProperty('status')) {
+                        let tag = instance.status;
+                        if (status_list.hasOwnProperty(tag)) status_list[tag]++;
+                        else status_list[tag] = 1;
+                    }
+                    if (instance.hasOwnProperty('affiliation')) {
+                        let tag = instance.affiliation;
+                        if (affiliate_list.hasOwnProperty(tag)) affiliate_list[tag]++;
+                        else affiliate_list[tag] = 1;
+                    }
+                    if (instance.hasOwnProperty('host')) {
+                        let tag = instance.host;
+                        if (host_list.hasOwnProperty(tag)) host_list[tag]++;
+                        else host_list[tag] = 1;
+                    }
+                });
+            } else {
+                future[key] = tech;
+            }
+        }
+        for (let key in webservices.hosts) {
+            //console.log('key: ', key);
+            let host = webservices.hosts[key];
+            host['name'] = key;
+            //console.log('host: ', host);
+            if (
+                host.hasOwnProperty('domain') &&
+                !(host.hasOwnProperty('status') && host.status == 'retired')
+            ) {
+                hosts[key] = host;
+            }
+        }
+        //console.log('webservices.affiliates: ', webservices.affiliates);
+        for (let key in webservices.affiliates) {
+            //console.log('key: ', key);
+            let affiliate = webservices.affiliates[key];
+            //console.log('affiliate assignment: ', affiliate);
+            affiliates[key] = affiliate;
+            // if (affiliate.hasOwnProperty('name')) {
+            // affiliate_data[key] = affiliate;
+            // }
+        }
+
+        return {
+            total_instances: instances,
+            active_services: current,
+            candidate_services: future,
+            tech_lists: {
+                category_list: category_list,
+                analogue_list: analogue_list,
+                license_list: license_list
+            },
+            instance_lists: {
+                status_list: status_list,
+                affiliate_list: affiliate_list,
+                host_list: host_list
+            },
+            hosts: hosts,
+            affiliates: affiliates
+        };
+    }
+</script>
+

src/references.js

@@ -0,0 +1,3 @@
+const References = {};
+
+export { References };

src/routes/+page.svelte

@@ -3,149 +3,13 @@
 	export let data;
 	const { webservices } = data;
 
-	// source: https://mokole.com/palette.html 20 colors with default settings otherwise
+	//import References from '../references.js';
-	const colours30 = [
+	import { colours } from '../colours.js';
-		'#808080',
+	import { processData } from '../lib/processData.svelte';
-		'#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'
-	];
 
-	// digest and return useful info from the Webservices JSON feed
+	console.log('colours: ', colours);
-	function processData(webservices) {
-		let instances = 0;
-		let current = [];
-		let future = [];
-		// properties of technologies
-		let category_list = [];
-		let analogue_list = [];
-		let license_list = [];
-		// properties of instances
-		let status_list = [];
-		let affiliate_list = [];
-		let host_list = [];
 
-		// actual objects
-		let hosts = [];
-		let affiliates = [];
-		//
-		// just a trivial reassignment
-		//let hosts = webservices.hosts;
-		//
-		// pull out relevant info in useful chunks.
-		for (let key in webservices.technologies) {
-			let tech = webservices.technologies[key];
-			if (tech.hasOwnProperty('categories') && tech.categories.constructor === Array) {
-				tech.categories.forEach(function (category, index) {
-					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 (analogue_list.hasOwnProperty(analogue)) analogue_list[analogue]++;
-					else analogue_list[analogue] = 1;
-				});
-			}
-			if (tech.hasOwnProperty('license')) {
-				let license = tech.license;
-				if (license_list.hasOwnProperty(license)) license_list[license]++;
-				else license_list[license] = 1;
-			}
 
-			if (hasInstances(tech)) {
-				tech['name'] = key;
-				current.push(tech);
-				//console.log(tech.name + ': ' + tech.instances.length + ' instances...');
-				tech.instances.forEach(function (instance, i) {
-					instances++;
-					if (instance.hasOwnProperty('status')) {
-						let tag = instance.status;
-						if (status_list.hasOwnProperty(tag)) status_list[tag]++;
-						else status_list[tag] = 1;
-					}
-					if (instance.hasOwnProperty('affiliation')) {
-						let tag = instance.affiliation;
-						if (affiliate_list.hasOwnProperty(tag)) affiliate_list[tag]++;
-						else affiliate_list[tag] = 1;
-					}
-					if (instance.hasOwnProperty('host')) {
-						let tag = instance.host;
-						if (host_list.hasOwnProperty(tag)) host_list[tag]++;
-						else host_list[tag] = 1;
-					}
-				});
-			} else {
-				future[key] = tech;
-			}
-		}
-		for (let key in webservices.hosts) {
-			//console.log('key: ', key);
-			let host = webservices.hosts[key];
-			host['name'] = key;
-			//console.log('host: ', host);
-			if (
-				host.hasOwnProperty('domain') &&
-				!(host.hasOwnProperty('status') && host.status == 'retired')
-			) {
-				hosts[key] = host;
-			}
-		}
-		//console.log('webservices.affiliates: ', webservices.affiliates);
-		for (let key in webservices.affiliates) {
-			//console.log('key: ', key);
-			let affiliate = webservices.affiliates[key];
-			//console.log('affiliate assignment: ', affiliate);
-			affiliates[key] = affiliate;
-			// if (affiliate.hasOwnProperty('name')) {
-			// affiliate_data[key] = affiliate;
-			// }
-		}
-
-		return {
-			total_instances: instances,
-			active_services: current,
-			candidate_services: future,
-			tech_lists: {
-				category_list: category_list,
-				analogue_list: analogue_list,
-				license_list: license_list
-			},
-			instance_lists: {
-				status_list: status_list,
-				affiliate_list: affiliate_list,
-				host_list: host_list
-			},
-			hosts: hosts,
-			affiliates: affiliates
-		};
-	}
 
 	//    console.log(technologies);
 	// return true if a tech object includes valid instances
@@ -301,10 +165,10 @@
 	//console.log('host_data: ', results.hosts);
 	const affiliates = results.affiliates;
 	//console.log('affiliate_data: ', results.affiliates);
-	const host_colours = hostColours(host_list, colours30, hosts);
+	const host_colours = hostColours(host_list, colours, hosts);
 	//console.log('host_colours:', host_colours);
-	colours30.sort();
+	colours.sort();
-	const affiliate_colours = affiliateColours(affiliate_list, colours30, affiliates);
+	const affiliate_colours = affiliateColours(affiliate_list, colours, affiliates);
 	//console.log('affiliate_colours:',affiliate_colours);
 
 	//console.log('categories array: ', results.tech_tags.categories);