Merge pull request #64 from chriscauley/feature-64-dev_index

Feature 64 dev index

docs/development/quick-start.md

@@ -25,6 +25,9 @@
 
     The password is available in BitWarden under the entry `read_only @ postgresql`
 
+    !!! note
+        Your WORKSTATION_LAN_IP should start with `192.` or `10.` and can be found with `hostname -I` on Linux and `ifconfig` on mac.
+
     !!! note
         The above configuration points `DB_PORT` at **5433** because we'll be opening a tunnel from there to the online/remote database with the `kubectl port-forward` command in step 4.
 
@@ -40,7 +43,7 @@
     docker run -ti --rm -v $(pwd):/app -w /app composer:2.0 composer install
     ```
 
-4. Open a tunnel from the online PostgreSQL database to local port `5433`:
+4. Open a tunnel from the online PostgreSQL database to local port `5433` (if you modified the DB_PORT in step 2 you should change `5433` below):
 
     ```bash
     export KUBECONFIG=~/.kube/letsplan-deployer.yaml
@@ -73,3 +76,5 @@
     ```bash
     ./vendor/bin/sail yarn watch
     ```
+
+9. The server will now be running on <http://localhost:7780>

resources/js/Pages/Explore/Layers.vue

@@ -1,5 +1,10 @@
 <template>
   <div>
+    <map-legend
+      v-if="legendPips"
+      class="mb-4"
+      :pips="legendPips"
+    />
     <div
       v-for="item in switches"
       :key="item.label"
@@ -11,6 +16,8 @@
         class="flex-grow-1"
         :label="item.label"
         :color="item.color"
+        :disabled="item.disabled"
+        @change="onChange"
       />
 
       <v-dialog v-model="item.isDialogVisible">
@@ -49,17 +56,20 @@
 </template>
 
 <script>
+import MapLegend from '../../Shared/MapLegend.vue';
 
 export default {
-
+  components: { MapLegend },
   data() {
     return {
       switches: [
         {
           label: 'Preservation',
+          attribute: 'preservation',
           color: 'teal',
           isDialogVisible: false,
-          value: true,
+          value: false,
+          disabled: true,
           tooltip: `The Preservation Index is built from our community survey <a href="/survey">here</a>.
             Go to the <a href="https://github.com/urbanSpatial/OurPlan_Methods/blob/main/README.md" target="_blank">OurPlan Methodology</a>
             to learn more about how the index is created.
@@ -83,6 +93,7 @@ export default {
         */
         {
           label: 'Development Suitability',
+          attribute: 'devIndex',
           color: 'lime',
           isDialogVisible: false,
           value: true,
@@ -95,5 +106,34 @@ export default {
       ],
     };
   },
+  computed: {
+    legendPips() {
+      const count = this.switches.filter(({ value }) => value).length;
+      if (!count) {
+        // neither switch is flipped, do not show legend
+        return null;
+      }
+      const colors = [
+        '#28CAF4',
+        '#377BF4',
+        '#311DF4',
+        '#8104F4',
+        '#C804F4',
+      ];
+      return colors.map((color, i) => ({
+        color,
+        name: i * 20 * count,
+      }));
+    },
+  },
+  methods: {
+    onChange() {
+      const attributes = {};
+      this.switches.forEach(({ attribute, value }) => {
+        attributes[attribute] = value;
+      });
+      this.$store.commit('updateLayers', attributes);
+    },
+  },
 };
 </script>

resources/js/Shared/Layouts/MapSheetLayout.vue

@@ -277,13 +277,16 @@ export default {
       /* eslint-disable prefer-spread */
       // const featMin = Math.min.apply(Math, features.map((f) => f.properties[propertyName] || 0));
       features.forEach((feat) => {
-        const fstate = { rank: 0 };
-        // no scaling or ranking since using hard coded sales price breaks
-        fstate.rank = feat.properties.sale_price_adj;
-        // for non-numeric and 0 assign negative number to color appropriately
-        if (!fstate.rank) {
-          fstate.rank = -1;
-        }
+        const { dev_index: devIndex } = feat.properties;
+        // TODO uncomment this line to see preservation on map
+        // const preservation = (devIndex * 4357) % 100
+        const preservation = undefined;
+        const fstate = {
+          rank: feat.properties.sale_price_adj || -1,
+          combined_layers: (devIndex || 0) + (preservation || 0),
+          preservation: preservation || -1,
+          devIndex: devIndex || -1,
+        };
         this.$refs.mapboxmap.map.setFeatureState({
           source: 'urban-areas',
           sourceLayer: 'urban-areas',
@@ -300,7 +303,7 @@ export default {
         this.isPopupVisible = true;
         this.$refs.parcelpopup.setMapboxMap(this.$refs.mapboxmap.map);
         this.$refs.parcelpopup.setCoords(event.coords);
-        this.$refs.parcelinfo.fetchParcel(event.properties.parcel_id);
+        this.$refs.parcelinfo.fetchParcel(event.properties);
         this.$refs.mapboxmap.highlightSource(event.feature);
       }
     },

resources/js/Shared/MapboxMap.vue

@@ -72,6 +72,34 @@ export default {
   },
 
   methods: {
+    getLayerSteps() {
+      const { devIndex, preservation } = this.$store.getters.getField('layers');
+
+      let max = 100;
+      let attribute;
+
+      if (preservation && devIndex) { // both
+        max = 200;
+        attribute = 'combined_layers';
+      } else if (preservation) {
+        attribute = 'preservation';
+      } else if (devIndex) {
+        attribute = 'devIndex';
+      } else { // neither
+        return this.colorNone;
+      }
+
+      return [
+        'step',
+        ['feature-state', attribute],
+        '#c0c0c0', 0,
+        '#28caf4', 0.2 * max,
+        '#377bf4', 0.4 * max,
+        '#311df4', 0.6 * max,
+        '#8104f4', 0.8 * max,
+        '#c804f4',
+      ];
+    },
     highlightSource(feature) {
       const clickHighlightSource = this.map.getSource('click-highlight');
       clickHighlightSource.setData(feature);
@@ -106,6 +134,11 @@ export default {
         this.map.setPaintProperty('urban-areas-fill', 'fill-color', this.colorPermitsConstSteps);
         return;
       }
+      if (tiles === 'layers') {
+        this.getLayerSteps();
+        this.map.setPaintProperty('urban-areas-fill', 'fill-color', this.getLayerSteps());
+        return;
+      }
       this.map.setPaintProperty('urban-areas-fill', 'fill-color', this.colorNone);
     },
 
@@ -220,6 +253,12 @@ export default {
         });
 
         this.showTiles(this.tiles);
+        this.$store.subscribe((mutation) => {
+          // re-render map overlay if layers was changed
+          if (mutation.type === 'updateLayers') {
+            this.showTiles(this.tiles);
+          }
+        });
       });
     },
   },

resources/js/Shared/ParcelInfo.vue

@@ -45,7 +45,7 @@
       <div class="figure-group -scores pb-0">
         <parcel-figure
           name="Preservation"
-          value="0.5"
+          :value="parcel.preservation"
           content-class="teal--text"
         />
         <!--parcel-figure
@@ -60,7 +60,7 @@
         /-->
         <parcel-figure
           name="Development"
-          value="0.5"
+          :value="parcel.devIndex"
           content-class="lime--text text--darken-2"
         />
       </div>
@@ -140,7 +140,7 @@ export default {
   },
 
   methods: {
-    fetchParcel(parcelId) {
+    fetchParcel({ parcel_id: parcelId, dev_index: devIndex, preservation }) {
       // avoid having to load the same parcel data twice in a session
       if (this.cache[parcelId]) {
         this.parcel = this.cache[parcelId];
@@ -150,7 +150,11 @@ export default {
       this.loading = true;
       window.axios.get(`/parcel/${parcelId}`)
         .then((response) => response.data.data).then((data) => {
-          const parcel = { id: data.id, ...data.attributes };
+          const parcel = {
+            id: parcelId, ...data.attributes, devIndex, preservation,
+          };
+          // TODO uncomment next line to use dummy value for preservation
+          // parcel.preservation = (parcel.devIndex * 4357) % 100
           this.parcel = parcel;
           this.cache[parcelId] = parcel;
         }).catch(() => {

resources/js/store/index.js

@@ -23,6 +23,7 @@ export default new Vuex.Store({
     },
     survey_results: null,
     submitted: false,
+    layers: { devIndex: true, preservation: false },
 
     // from letsplanorg
     exploreIsExpanded: false,
@@ -36,6 +37,10 @@ export default new Vuex.Store({
       state.survey_results = value;
     },
     updateField,
+    updateLayers(state, layers) {
+      // eslint-disable-next-line no-param-reassign
+      state.layers = layers;
+    },
   },
   getters: {
     getField,