Adding maps

_config.js

@@ -61,7 +61,7 @@ site.use(
     },
     colour: {
       scales: {
-        YFF: '#000000 0%, #7D2248 33%, #e55912 62%, #f7ab3d 84%, #fcddb1 100%',
+        YFF: '#000000 0%, #7D2248 33%, #e55912 62%, #f7ab3d 84%, #fcddb1 100%'
       },
       names: yff.namedColours,
       series: ['#E55912', '#005776', '#F7AB3D', '#4A783C'],

src/_includes/css/dashboard.css

@@ -12,6 +12,12 @@
   text-align: center;
 }
 
+.dashboard-viz {
+  & svg {
+    height: min(40em, 30vh);
+  }
+}
+
 .auto-grid .oi-dashboard .panel h3 { font-size: 1.2em; }
 /* OI dashboard component */
 .oi-dashboard .oi-dashboard-inner { --auto-dashboard-min-size: 200px; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--auto-dashboard-min-size)), 1fr)); grid-gap: 1em; }

src/_includes/partials/dashboard.njk

@@ -11,6 +11,10 @@
   {% endfor %}
 </ul>
 
+{% comp 'grid.masonry', { block_width: '20rem' } %}
+{% include './dashboard/maps.njk' %}
+{% endcomp %}
+
 {% comp 'grid.masonry', { block_width: '20rem' } %}
 {% include './dashboard/headlines.njk' %}
 {% endcomp %}

src/_includes/partials/dashboard/maps.njk

@@ -0,0 +1,53 @@
+{% set background = "#005776" %}
+
+{% comp 'grid.block', {
+	link: '~/maps/neet-factors/index.njk' | url + '?map-selector=total-score',
+  background: background,
+  colour: 'white'
+} %}
+
+	<h3>NEET factors</h3>
+
+  <p>
+    Likelihood of NEET outcome modelled on multiple factors by Local Authority.
+  </p>
+
+  <div class="dashboard-viz">
+  {{ comp.oi.map.hex_cartogram({
+    config: {
+      hexjson: search.data('/maps').uk_local_authority_districts_2021,
+      data: search.data('/maps/neet-factors').view.total_score.rows,
+      matchKey: 'local_authority_code',
+      value: 'value',
+      scale: 'YFF',
+      tooltip: '{{ n }}: <strong>{{ value | toFixed(2) }}</strong>'
+    }
+  }) | simpleviz | safe }}
+  </div>
+{% endcomp %}
+
+{% comp 'grid.block', {
+	link: '~/maps/employment/index.njk' | url + '?map-selector=census-youth-unemployed-economically-inactive',
+  background: background,
+  colour: 'white'
+} %}
+	<h3>Employment</h3>
+
+  <p>
+    Propoprtion of young people unemployed, economically inactive and not in full-time education by parliamentary consituency.
+  </p>
+
+  <div class="dashboard-viz">
+  {{ comp.oi.map.hex_cartogram({
+    config: {
+      hexjson: search.data('/maps').constituencies,
+      data: search.data('/maps/employment').view.census_unemployed_or_economically_inactive_and_not_in_fte_youth.rows,      
+      matchKey: 'geography_code',
+      value: 'rate',
+      scale: 'YFF',
+      tooltip: '{{ n }}: <strong>{{ rate | toFixed(1) }}%</strong>'
+    }
+  }) | simpleviz | safe }}
+  </div>
+
+{% endcomp %}