<template>

<v-container>

<layout-header title="Membership map" subtitle="Insights from library membership data" />

<v-divider inset color="info" class="my-2"></v-divider>

<markdown-section :markdownText="mdText" />

<v-divider inset color="info" class="my-2"></v-divider>

<h2 class="text-h5 text-decoration-underline my-3">Map library members</h2>

<v-sheet color="grey-lighten-5" rounded elevation="0" class="px-5 py-5">

<v-alert icon="mdi-numeric-1-circle" class="mb-1" title="Load a file">

First you need a CSV file in the format of the membership data schema.

</v-alert>

<file-upload v-bind:files="lsoaFiles" v-on:change-files="lsoaFiles = $event"

v-on:delete-file="lsoaFiles = null" />

<v-btn append-icon="mdi-map-marker-plus" color="info" class="mt-3" variant="tonal" size="large"

v-on:click="addMembershipData" :disabled="lsoaFiles.length == 0">

Display on map

</v-btn>

<v-alert class="mt-8 mb-4" icon="mdi-numeric-2-circle" title="Map">

<strong>Percentage membership</strong> shades the map to highlight

concentration of membership. When zooming in this also displays the

membership population percentage for individual areas.

<strong>Displaying deprivation</strong> shades the map to highlight

highly deprived areas. This uses the index of multiple deprivation for

each area. 1 represents highly deprived areas and is shaded in red, 10

the least deprived.

</v-alert>

<v-radio-group v-model="mapDisplay" v-on:change="setDisplayOptions" inline>

<v-radio label="Highlight percentage membership" value="populationPercentage"></v-radio>

<v-radio label="Highlight deprivation levels" value="imd"></v-radio>

</v-radio-group>

<v-container class="map">

<mgl-map ref="mglMap" :center="center" :zoom="zoom" :mapStyle="mapStyle">

<mgl-fullscreen-control />

<mgl-navigation-control />

<mgl-scale-control />

<mgl-vector-source source-id="libraries" :tiles="librariesSource.tiles">

<mgl-circle-layer source-layer="libraries" layer-id="libraries_layer_circles"

:paint="librariesLayerCircle.paint" />

</mgl-vector-source>

<mgl-vector-source source-id="lsoas" :tiles="lsoasSource.tiles" :promoteId="lsoasSource.promoteId">

<mgl-fill-layer source-layer="lsoa_boundaries" layer-id="lsoas_layer_fill" :paint="lsoasLayerFill.paint"

:filter="matchFilter" />

<mgl-symbol-layer source-layer="lsoa_boundaries" layer-id="lsoas_layer_label" :paint="lsoasLayerLabel.paint"

:layout="lsoasLayerLabel.layout" :filter="matchFilter" :minzoom="lsoasLayerLabel.minzoom" />

</mgl-vector-source>

<mgl-geo-json-source source-id="authority" :data="authoritySource.data">

<mgl-line-layer v-if="authoritySource.show" layer-id="authority-line" :paint="authorityLayerLine.paint" />

<mgl-symbol-layer v-if="authoritySource.show" layer-id="authority-label"

:layout="authorityLayerLabel.layout" :paint="authorityLayerLabel.paint" />

</mgl-geo-json-source>

</mgl-map>

</v-container>

<v-container>

<span v-if="authorityLsoaStats.length > 0">

<h3 class="text-h6 text-decoration-underline my-3">Authority LSOAs</h3>

<v-card color="grey-lighten-2" variant="outlined" elevation="0" class="mb-2">

<v-data-table no-filter :headers="authorityLsoaStatsSummaryColumns" :items="[authorityLsoaStatsSummary]"

item-key="lsoas">

<template #bottom></template>

</v-data-table>

</v-card>

<h3 class="text-h6 text-decoration-underline my-3">LSOA deprivation stats</h3>

<v-card color="grey-lighten-2" variant="outlined" elevation="0" class="mb-2">

<v-data-table no-filter :headers="authorityDeprivationSummaryColumns" :items="authorityDeprivationSummary"

item-key="imd">

<template #bottom></template>

</v-data-table>

</v-card>

<h3 class="text-h6 text-decoration-underline my-3">LSOA rural/urban classifications</h3>

<v-card color="grey-lighten-2" variant="outlined" elevation="0" class="mb-2">

<v-data-table no-filter :headers="authorityRuralUrbanSummaryColumns" :items="authorityRuralUrbanSummary"

item-key="ruralUrbanClassification">

<template #bottom></template>

</v-data-table>

</v-card>

<v-btn color="info" variant="tonal" size="large" v-on:click="downloadStats" append-icon="mdi-content-save">

Save all authority LSOA stats

</v-btn>

</span>

</v-container>

</v-sheet>

</v-container>

</template>

<script>

</script>

<style>

</style>