Feature/435 activate sustainability (#445)

* Add colour scale definition for sustainability DEC

* Add sustainability DEC data render definition

* Activate sustainability category

app/map_styles/polygon.xml

@@ -172,6 +172,36 @@
             <PolygonSymbolizer fill="#73ebaf" />
         </Rule>
     </Style>
+    <Style name="sust_dec">
+        <Rule>
+            <Filter>[sust_dec] = A</Filter>
+            <PolygonSymbolizer fill="#007f3d" />
+        </Rule>
+        <Rule>
+            <Filter>[sust_dec] = B</Filter>
+            <PolygonSymbolizer fill="#2c9f29" />
+        </Rule>
+        <Rule>
+            <Filter>[sust_dec] = C</Filter>
+            <PolygonSymbolizer fill="#9dcb3c" />
+        </Rule>
+        <Rule>
+            <Filter>[sust_dec] = D</Filter>
+            <PolygonSymbolizer fill="#fff200" />
+        </Rule>
+        <Rule>
+            <Filter>[sust_dec] = E</Filter>
+            <PolygonSymbolizer fill="#f7af1d" />
+        </Rule>
+        <Rule>
+            <Filter>[sust_dec] = F</Filter>
+            <PolygonSymbolizer fill="#ed6823" />
+        </Rule>
+        <Rule>
+            <Filter>[sust_dec] = G</Filter>
+            <PolygonSymbolizer fill="#e31d23" />
+        </Rule>
+    </Style>
     <Style name="likes">
         <Rule>
             <Filter>[likes] &gt;= 10</Filter>

app/src/api/services/building.ts

@@ -366,6 +366,11 @@ const BUILDING_FIELD_WHITELIST = new Set([
     'planning_local_list_url',
     'planning_in_historic_area_assessment',
     'planning_historic_area_assessment_url',
+    'sust_breeam_rating',
+    'sust_dec',
+    // 'sust_aggregate_estimate_epc',
+    'sust_retrofit_date',
+    // 'sust_life_expectancy',
 ]);
 
 /**

app/src/frontend/building/building-view.tsx

@@ -87,9 +87,9 @@ const BuildingView = (props) => {
                 {...props}
                 key={props.building && props.building.building_id}
                 title="Sustainability"
-                intro="Are buildings energy efficient? Coming soon…"
+                intro="Are buildings energy efficient?"
                 help="https://pages.colouring.london/sustainability"
-                inactive={true}
+                inactive={false}
             />
         case 'streetscape':
             return <StreetscapeContainer

app/src/frontend/building/categories.tsx

@@ -83,7 +83,7 @@ const Categories = (props) => (
             desc="Performance"
             slug="sustainability"
             help="https://pages.colouring.london/sustainability"
-            inactive={true}
+            inactive={false}
             mode={props.mode}
             building_id={props.building_id}
         />

app/src/frontend/building/data-containers/sustainability.tsx

@@ -2,64 +2,76 @@ import React, { Fragment } from 'react';
 
 import withCopyEdit from '../data-container';
 import DataEntry from '../data-components/data-entry';
+import SelectDataEntry from '../data-components/select-data-entry';
+import NumericDataEntry from '../data-components/numeric-data-entry';
 
+const EnergyCategoryOptions = ["A", "B", "C", "D", "E", "F", "G"];
+const BreeamRatingOptions = [
+    'Outstanding',
+    'Excellent',
+    'Very good',
+    'Good',
+    'Pass',
+    'Unclassified'
+];
 /**
 * Sustainability view/edit section
 */
-const SustainabilityView = (props) => (
-    <Fragment>
-        <p className="data-intro">{props.intro}</p>
-        <ul>
-            <li>Energy Performance Certificate (EPC) rating</li>
-            {
-                // "disabled": true,
-                // "slug": "sustainability_epc_band_current",
-                // "type": "text_list",
-                // "options": ["A", "B", "C", "D", "E", "F", "G"]
-            }
-            <li>Display Energy Certificate (DEC)</li>
-            {
-                // "disabled": true,
-                // "slug": "sustainability_dec_band_current",
-                // "type": "text_list",
-                // "options": ["A", "B", "C", "D", "E", "F", "G"]
-            }
-            <li>BREEAM Rating</li>
-            {
-                // "disabled": true,
-                // "slug": "sustainability_breeam_rating",
-                // "type": "number",
-                // "step": 1
-            }
-            <li>Year of last significant retrofit</li>
-            {
-                // "disabled": true,
-                // "slug": "sustainability_last_retrofit_date",
-                // "type": "number",
-                // "step": 1
-            }
-            <li>Embodied carbon estimation (for discussion)</li>
-            {
-                // "slug": "sustainability_embodied_carbon",
-                // "type": "text",
-                // "disabled": true
-            }
-            <li>Adaptability/repairability rating (for discussion)</li>
-            {
-                // "slug": "sustainability_adaptability_rating",
-                // "type": "text",
-                // "disabled": true
-            }
-            <li>Expected lifespan (for discussion)</li>
-            {
-                // "slug": "sustainability_expected_lifespan",
-                // "type": "number",
-                // "step": 1,
-                // "disabled": true
-            }
-        </ul>
-    </Fragment>
-)
+const SustainabilityView = (props) => {
+    const dataEntryProps = {
+        mode: props.mode,
+        copy: props.copy,
+        onChange: props.onChange
+    };
+    return (
+        <Fragment>
+            <SelectDataEntry
+                title="BREEAM Rating"
+                slug="sust_breeam_rating"
+                value={props.building.sust_breeam_rating}
+                tooltip="(Building Research Establishment Environmental Assessment Method) May not be present for many buildings"
+                options={BreeamRatingOptions}
+                {...dataEntryProps}
+            />
+            <SelectDataEntry
+                title="DEC Rating"
+                slug="sust_dec"
+                value={props.building.sust_dec}
+                tooltip="(Display Energy Certificate) Any public building should have (and display) a DEC. Showing how the energy use for that building compares to other buildings with same use"
+                options={EnergyCategoryOptions}
+                {...dataEntryProps}
+            />
+            <SelectDataEntry
+                title="EPC Rating"
+                slug="sust_aggregate_estimate_epc"
+                value={props.building.sust_aggregate_estimate_epc}
+                tooltip="(Energy Performance Certifcate) Any premises sold or rented is required to have an EPC to show how energy efficient it is. Only buildings rate grade E or higher maybe rented"
+                options={EnergyCategoryOptions}
+                disabled={true}
+                {...dataEntryProps}
+            />
+            <NumericDataEntry
+                title="Last significant retrofit"
+                slug="sust_retrofit_date"
+                value={props.building.sust_retrofit_date}
+                tooltip="Date of last major building refurbishment"
+                step={1}
+                min={1086}
+                max={new Date().getFullYear()}
+                {...dataEntryProps}
+            />
+            <NumericDataEntry
+                title="Expected lifespan for typology"
+                slug="sust_life_expectancy"
+                value={props.building.sust_life_expectancy}
+                step={1}
+                min={1}
+                disabled={true}
+                {...dataEntryProps}
+            />
+        </Fragment>
+    );
+    }
 const SustainabilityContainer = withCopyEdit(SustainabilityView);
 
 export default SustainabilityContainer;

app/src/frontend/map/legend.tsx

@@ -69,7 +69,15 @@ const LEGEND_CONFIG = {
     },
     sustainability: {
         title: 'Sustainability',
-        elements: []
+        elements: [
+            { color: "#007f3d", text: 'A' },
+            { color: "#2c9f29", text: 'B' },
+            { color: "#9dcb3c", text: 'C' },
+            { color: "#fff200", text: 'D' },
+            { color: "#f7af1d", text: 'E' },
+            { color: "#ed6823", text: 'F' },
+            { color: "#e31d23", text: 'G' },
+        ]
     },
     streetscape: {
         title: 'Streetscape',

app/src/frontend/map/map.tsx

@@ -120,6 +120,7 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> { //
             location: 'location',
             like: 'likes',
             planning: 'conservation_area',
+            sustainability: 'sust_dec'
         };
         const tileset = tilesetByCat[cat];
         // pick revision id to bust browser cache

app/src/tiles/dataDefinition.ts

@@ -31,7 +31,7 @@ const BUILDING_LAYER_DEFINITIONS = {
             buildings as b
         WHERE
             g.geometry_id = b.geometry_id
-    ) as outline`,
+    ) as date_year`,
     size_storeys: `(
         SELECT
             (
@@ -44,7 +44,7 @@ const BUILDING_LAYER_DEFINITIONS = {
             buildings as b
         WHERE
             g.geometry_id = b.geometry_id
-    ) as outline`,
+    ) as size_stories`,
     location: `(
         SELECT
             (
@@ -76,7 +76,7 @@ const BUILDING_LAYER_DEFINITIONS = {
         WHERE
             g.geometry_id = b.geometry_id
             AND b.likes_total > 0
-    ) as location`,
+    ) as likes`,
     conservation_area: `(
         SELECT
             g.geometry_geom
@@ -86,7 +86,17 @@ const BUILDING_LAYER_DEFINITIONS = {
         WHERE
             g.geometry_id = b.geometry_id
             AND b.planning_in_conservation_area = true
-    ) as conservation_area`
+    ) as conservation_area`,
+    sust_dec: `(
+        SELECT
+            b.sust_dec::text as sust_dec,
+            g.geometry_geom
+        FROM
+            geometries as g,
+            buildings as b
+        WHERE
+            g.geometry_id = b.geometry_id
+    ) as sust_dec`
 };
 
 const GEOMETRY_FIELD = 'geometry_geom';

app/src/tiles/rendererDefinition.ts

@@ -32,7 +32,7 @@ const renderOrStitchRenderer = new BranchingRenderer(
 const tileCache = new TileCache(
     process.env.TILECACHE_PATH,
     {
-        tilesets: ['date_year', 'size_storeys', 'location', 'likes', 'conservation_area'],
+        tilesets: ['date_year', 'size_storeys', 'location', 'likes', 'conservation_area', 'sust_dec'],
         minZoom: 9,
         maxZoom: 18,
         scales: [1, 2]