format

Signed-off-by: Tom Ridd <twridd@gmail.com>

ARCHITECTURE.md

@@ -4,16 +4,19 @@ A prototype for exploring neighbourhood level Census data tables on a map.
 
 ## Svelte architecture
 
-### Presentation layer ________________
-Files: *.svelte
+### Presentation layer ******\_\_\_\_******
+
+Files: \*.svelte
 Responsibilities: Displaying the current state of the app according to the designs from UI/UX
 
-### Model layer ______________________
-Files: *Store.js
+### Model layer **********\_\_**********
+
+Files: \*Store.js
 Responsibilities: Storing the current state of the app. Provide action methods to update state.
 
-### Data layer ________________________
-Files: *Service.js
+### Data layer **********\_\_\_\_**********
+
+Files: \*Service.js
 Responsibilities: Fetch data to update the model
 
 `npm run storybook` – fires up [Storybook](https://storybook.js.org/docs/react/writing-stories/introduction)

src/App.svelte

@@ -7,33 +7,31 @@
   import ByLocation from "./routes/ByLocation.svelte";
   import ByCategory from "./routes/ByCategory.svelte";
   import CensusCategories from "./routes/CensusCategories.svelte";
-  import {Router, Link, Route} from "svelte-routing";
-  import {initialiseGeography} from "./model/geography/geography";
+  import { Router, Link, Route } from "svelte-routing";
+  import { initialiseGeography } from "./model/geography/geography";
   import LegacyGeographyService from "./model/geography/services/legacyGeographyService";
-  import {initialiseCensusData} from "./model/censusdata/censusdata";
+  import { initialiseCensusData } from "./model/censusdata/censusdata";
   import LegacyCensusDataService from "./model/censusdata/services/legacyCensusDataService";
-  import {setInitialised} from "./model/appstate";
+  import { setInitialised } from "./model/appstate";
 
   export let url = "";
 
-  initialiseGeography(new LegacyGeographyService()).then(
-    () => {
-      initialiseCensusData(new LegacyCensusDataService())
-      setInitialised();
-    }
-  )
+  initialiseGeography(new LegacyGeographyService()).then(() => {
+    initialiseCensusData(new LegacyCensusDataService());
+    setInitialised();
+  });
 </script>
 
 <Router {url}>
   <div>
-    <Route path="/" component={ExploreCensus}/>
-    <Route path="/components" component={Components}/>
-    <Route path="/design-system" component={DesignSystemApp}/>
-    <Route path="/data/:categoryId/locations/:locationId" component={ByLocationAndCategory}/>
-    <Route path="/data/:categoryId" component={ByCategory}/>
-    <Route path="/locations/:locationId" component={ByLocation}/>
-    <Route path="/categories" component={CensusCategories}/>
-    <Route path="/original" component={CensusAtlas}/>
+    <Route path="/" component={ExploreCensus} />
+    <Route path="/components" component={Components} />
+    <Route path="/design-system" component={DesignSystemApp} />
+    <Route path="/data/:categoryId/locations/:locationId" component={ByLocationAndCategory} />
+    <Route path="/data/:categoryId" component={ByCategory} />
+    <Route path="/locations/:locationId" component={ByLocation} />
+    <Route path="/categories" component={CensusCategories} />
+    <Route path="/original" component={CensusAtlas} />
   </div>
   <nav
     style="position: relative; z-index: 99999; background: #e2e2e3; padding: 20px;"

src/MapLayer.svelte

@@ -72,7 +72,6 @@
   map.addLayer(options, order);
 
   function updateData() {
-
     data.lsoa.data.forEach((d) => {
       map.setFeatureState(
         {

src/MapSource.svelte

@@ -21,7 +21,7 @@
     map.removeSource(id);
   }
 
-  // watches for isSourceLoaded method on map 
+  // watches for isSourceLoaded method on map
   function isSourceLoaded() {
     if (map.isSourceLoaded(id)) {
       loaded = true;

src/config.js

@@ -42,7 +42,7 @@ export default {
             ["!=", ["feature-state", "color"], null],
             ["feature-state", "color"],
             "rgba(255, 255, 255, 0)",
-          ]
+          ],
         },
         line: {
           "line-color": ["rgba(192, 192, 192, 1)"],
@@ -65,9 +65,8 @@ export default {
             2,
             0,
           ],
-        }
-      }
-    }
-  }
-
-}
+        },
+      },
+    },
+  },
+};

src/data/test/mockDSData.js

@@ -1,22 +1,22 @@
-let ethnicity=[
-{id:"black",value:"black",label:"Black"},
-{id:"mixed",value:"mixed",label:"Mixed"},
-{id:"white",value:"white",label:"White"},
-{id:"other",value:"other",label:"Other"},
-{id:"asian",value:"asian",label:"Asian"},
-]
+let ethnicity = [
+  { id: "black", value: "black", label: "Black" },
+  { id: "mixed", value: "mixed", label: "Mixed" },
+  { id: "white", value: "white", label: "White" },
+  { id: "other", value: "other", label: "Other" },
+  { id: "asian", value: "asian", label: "Asian" },
+];
 
-let cities=[
-  { value: "none", label: "Please select", disabled:true},
+let cities = [
+  { value: "none", label: "Please select", disabled: true },
   { value: "london", label: "London" },
   { value: "bristol", label: "Bristol" },
   { value: "oxford", label: "Oxford" },
-]
+];
 
-let checkboxData=[
-    {id:"laptop", value:"laptop", label:"Laptop"},
-    {id:"mobile", value:"mobile", label:"Mobile"},
-    {id:"tablet", value:"tablet", label:"Tablet"},
-] 
+let checkboxData = [
+  { id: "laptop", value: "laptop", label: "Laptop" },
+  { id: "mobile", value: "mobile", label: "Mobile" },
+  { id: "tablet", value: "tablet", label: "Tablet" },
+];
 
-export {ethnicity, cities, checkboxData}
+export { ethnicity, cities, checkboxData };

src/dataService.js

@@ -2,15 +2,14 @@ import { csvParse } from "d3-dsv";
 import { get } from "svelte/store";
 
 export default class LocalDataService {
-
   getGeographicCodes = async function (url) {
     let response = await fetch(url);
     let string = await response.text();
     return await csvParse(string, (d) => {
       return d["GEOGRAPHY_CODE"];
     });
   };
-  
+
   getCategoryTotals = async function (url) {
     let response = await fetch(url);
     let string = await response.text();
@@ -19,13 +18,8 @@ export default class LocalDataService {
     });
     return data;
   };
-
-  getNomisData = async function (
-    url,
-    geographicCodesStore,
-    selectedCategoryTotals,
-    indicatorCode,
-  ) {
+
+  getNomisData = async function (url, geographicCodesStore, selectedCategoryTotals, indicatorCode) {
     let response = await fetch(url);
     let string = await response.text();
     let geoCodes = get(geographicCodesStore);
@@ -39,5 +33,4 @@ export default class LocalDataService {
       };
     });
   };
-
 }

src/model/appstate.js

@@ -1,7 +1,7 @@
-import {writable} from "svelte/store";
+import { writable } from "svelte/store";
 
-export let appIsInitialised = writable(false)
+export let appIsInitialised = writable(false);
 
 export const setInitialised = () => {
-  appIsInitialised.set(true)
-}
+  appIsInitialised.set(true);
+};

src/model/censusdata/censusdata.js

@@ -1,28 +1,26 @@
-import {writable} from "svelte/store";
+import { writable } from "svelte/store";
 
-export let categoryDataIsLoaded = writable(false)
-export let tableIsLoaded = writable(false)
+export let categoryDataIsLoaded = writable(false);
+export let tableIsLoaded = writable(false);
 
+export let categoryData = {};
+export let tableData = {};
+export let breaks = [];
 
-export let categoryData = {}
-export let tableData = {}
-export let breaks = []
-
-let dataService = null
+let dataService = null;
 
 export function initialiseCensusData(censusDataService) {
-  dataService = censusDataService
+  dataService = censusDataService;
 }
 
 export async function fetchCensusData(categoryCode, geographyCode) {
-  categoryDataIsLoaded.set(false)
-  
+  categoryDataIsLoaded.set(false);
+
   // Do a simple data load
-  let lsoaData = await dataService.fetchLsoaCategoryData(categoryCode)
-  let higherData = await dataService.fetchHigherGeographyCategoryData(categoryCode)
-
-  categoryData = {...lsoaData, ...higherData}
-  breaks = await dataService.fetchLegendBreakpoints(categoryCode)
-  categoryDataIsLoaded.set(true)
-}
+  let lsoaData = await dataService.fetchLsoaCategoryData(categoryCode);
+  let higherData = await dataService.fetchHigherGeographyCategoryData(categoryCode);
 
+  categoryData = { ...lsoaData, ...higherData };
+  breaks = await dataService.fetchLegendBreakpoints(categoryCode);
+  categoryDataIsLoaded.set(true);
+}