From a48423bdaf7d805d13cc8169b49bb074451fab76 Mon Sep 17 00:00:00 2001 From: Tom Russell Date: Mon, 10 Sep 2018 21:49:58 +0100 Subject: [PATCH] Link legend --- app/src/frontend/about.js | 4 +- app/src/frontend/app.js | 6 +- app/src/frontend/header.js | 2 +- app/src/frontend/legend.js | 257 +++++++++++++++++------------------- app/src/frontend/welcome.js | 5 +- 5 files changed, 128 insertions(+), 146 deletions(-) diff --git a/app/src/frontend/about.js b/app/src/frontend/about.js index ae680e57..ead21174 100644 --- a/app/src/frontend/about.js +++ b/app/src/frontend/about.js @@ -213,7 +213,7 @@ const AboutPage = () => (
@@ -226,7 +226,7 @@ const AboutPage = () => ( target="_blank" rel="noopener noreferrer">newsletter archive.

- + diff --git a/app/src/frontend/app.js b/app/src/frontend/app.js index ed9f65e6..05733eb4 100644 --- a/app/src/frontend/app.js +++ b/app/src/frontend/app.js @@ -39,15 +39,13 @@ class App extends React.Component {
- + - - - + diff --git a/app/src/frontend/header.js b/app/src/frontend/header.js index efd893d6..25440d17 100644 --- a/app/src/frontend/header.js +++ b/app/src/frontend/header.js @@ -15,7 +15,7 @@ function Header(props) {
  • - View Maps + View Maps
  • About diff --git a/app/src/frontend/legend.js b/app/src/frontend/legend.js index dc3ce9ee..bccb9360 100644 --- a/app/src/frontend/legend.js +++ b/app/src/frontend/legend.js @@ -1,143 +1,124 @@ -import React from 'react'; +import React, { Component, Fragment } from 'react'; +import { Link } from 'react-router-dom'; -const Legend = () => ( -
    -

    Maps

    -
    -

    Age

    -
    -
    - Year Built
    -
    -
      -
    • - - - >=2000 -
      • -
    • - - - 1980-2000 -
      • -
    • - - - 1960-1980 -
      • -
    • - - - 1940-1960 -
      • -
    • - - - 1920-1940 -
      • -
    • - - - 1900-1920 -
      • -
    • - - - 1880-1900 -
      • -
    • - - - 1860-1880 -
      • -
    • - - - 1840-1860 -
      • -
    • - - - 1820-1840 -
      • -
    • - - - 1800-1820 -
      • -
    • - - - 1780-1800 -
      • -
    • - - - 1760-1780 -
      • -
    • - - - 1740-1760 -
      • -
    • - - - 1720-1740 -
      • -
    • - - - 1700-1720 -
      • -
    • - - - 1680-1700 -
      • -
    • - - - 1660-1680 -
      • -
    • - - - <1660 -
      • -
    -
    -
    -
    -
    -

    Size

    -
    -
    - Number of storeys -
    -
    -
      -
    • - - - >20 -
      • -
    • - - - 10-20 -
      • -
    • - - - 5-10 -
      • -
    • - - - 4 -
      • -
    • - - - 3 -
      • -
    • - - - 2 -
      • -
    • - - - 1 -
      • +const data_map = [ + { + slug: 'date_year', + label: 'Age', + elements: [ + { + slug: 'date_year', + label: 'Year Built', + elements: [ + { color: '#f0eaba', text: '≥2000' }, + { color: '#fae269', text: '1980-2000' }, + { color: '#fbaf27', text: '1960-1980' }, + { color: '#e6711d', text: '1940-1960' }, + { color: '#d73d3a', text: '1920-1940' }, + { color: '#ba221c', text: '1900-1920' }, + { color: '#bb859b', text: '1880-1900' }, + { color: '#8b3654', text: '1860-1880' }, + { color: '#8f5385', text: '1840-1860' }, + { color: '#56619b', text: '1820-1840' }, + { color: '#6793b2', text: '1800-1820' }, + { color: '#83c3b3', text: '1780-1800' }, + { color: '#adc88f', text: '1760-1780' }, + { color: '#83a663', text: '1740-1760' }, + { color: '#77852d', text: '1720-1740' }, + { color: '#69814e', text: '1700-1720' }, + { color: '#d0c291', text: '1680-1700' }, + { color: '#918158', text: '1660-1680' }, + { color: '#7a5732', text: '<1660' }, + ] + } + ] + }, + { + slug: 'size_storeys', + label: 'Size', + elements: [ + { + slug: 'size_storeys', + label: 'Number of storeys', + elements: [ + { color: '#ffc584', text: '≥20' }, + { color: '#f46259', text: '10-20' }, + { color: '#da456a', text: '5-10' }, + { color: '#a8327d', text: '4' }, + { color: '#7c2383', text: '3' }, + { color: '#5b167f', text: '2' }, + { color: '#360f69', text: '1' }, + ] + } + ] + } +]; -
    -
    -
    -
    -
    +const LegendItem = (props) => ( +
  • + - + { props.text } +
    • ); +const LegendSection = (props) => ( + +
    + { props.label } +
    +
    +
      + { props.children } +
    +
    +     +); + +const LegendGroup = (props) => ( +
    + +

    { props.label }

    + +
    + { props.children } +
    +
    +); + +class Legend extends Component { + render() { + var data_layer = undefined; + if (this.props.match && this.props.match.params && this.props.match.params.map) { + data_layer = this.props.match.params.map; + } + + return ( +
    +

    Maps

    + { + data_map.map((data_group) => ( + + { + ( data_layer.match(data_group.slug) ) + ? data_group.elements.map((data_section) => ( + + { + ( data_layer.match(data_section.slug) ) + ? data_section.elements.map((data_item) => ( + + )) + : null + } + + )) + : null + } + + )) + } +
    + ); + } +} + export default Legend; diff --git a/app/src/frontend/welcome.js b/app/src/frontend/welcome.js index b411fb61..5dd65d76 100644 --- a/app/src/frontend/welcome.js +++ b/app/src/frontend/welcome.js @@ -7,7 +7,10 @@ const Welcome = () => (

    Welcome to Colouring London

    Colour in, view and download data on London's buildings

    - Get Started + + Start Colouring +
    );