Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaelwood
michaelwood committed Jul 1, 2024
1 parent dc4d4e6 commit f745104
Show file tree
Hide file tree
Showing 4 changed files with 165 additions and 19 deletions.
9 changes: 9 additions & 0 deletions insights/static/js/data-display.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ var app = new Vue({
staticPath: STATIC_PATH,
grantnavUrl: "",
currentApiUrl: new URL(window.location),
geoTypeSelect: "best",
}
},
watch: {
Expand Down Expand Up @@ -77,6 +78,14 @@ var app = new Vue({
/* Update Grantnav button url */
this.grantnavUrl = `${this.grantnavBaseUrl}/search${url.search}`;

/* Decide which of the geo types to show (default = best) */
if (queryUrl.match("beneficiary.*Name")){
this.geoTypeSelect = "beneficiary";
}

if (queryUrl.match("recipientOrg.*Name")){
this.geoTypeSelect = "recipient_org";
}

/* In non-main insights (i.e. query restricted) these are not "public facing parameters" and only
apply to grantnav.
Expand Down
56 changes: 52 additions & 4 deletions insights/static/js/data/cards.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,20 +34,68 @@ const chartCardMetadata = {
"filterer": { type: "finder" }
},
"recipientRegionName": {
"title": "Countries and regions",
"title": "Best available countries and regions",
"instructions": "<p>Click on the bars or labels to select one or more countries.</p>",
"color": "red",
"chartType": "bar-horizontal"
},
"recipientDistrictName": {
"title": "Local authorities",
"title": "Best available local authorities",
"instructions": "<p>Click on the bars or labels to select one or more local authorities.</p>",
"color": "red",
"chartType": "bar-horizontal",
"filterer": { type: "finder" }
},
"bestCountyName": {
"title": "Best available county",
"instructions": "<p>Click on the bars or labels to select one or more counties.</p>",
"color": "red",
"chartType": "bar-horizontal",
"filterer": { type: "finder" }
},
"recipientOrgRegionName": {
"title": "Recipient Organisation countries and regions",
"instructions": "<p>Click on the bars or labels to select one or more countries.</p>",
"color": "red",
"chartType": "bar-horizontal"
},
"recipientOrgDistrictName": {
"title": "Recipient Organisation local authorities",
"instructions": "<p>Click on the bars or labels to select one or more local authorities.</p>",
"color": "red",
"chartType": "bar-horizontal",
"filterer": { type: "finder" }
},
"recipientOrgCountyName": {
"title": "Recipient Organisation county",
"instructions": "<p>Click on the bars or labels to select one or more counties.</p>",
"color": "red",
"chartType": "bar-horizontal",
"filterer": { type: "finder" }
},
"beneficiaryRegionName": {
"title": "Beneficiary countries and regions",
"instructions": "<p>Click on the bars or labels to select one or more countries.</p>",
"color": "red",
"chartType": "bar-horizontal"
},
"beneficiaryDistrictName": {
"title": "Beneficiary local authorities",
"instructions": "<p>Click on the bars or labels to select one or more local authorities.</p>",
"color": "red",
"chartType": "bar-horizontal",
"filterer": { type: "finder" }
},
"beneficiaryCountyName": {
"title": "Beneficiary county",
"instructions": "<p>Click on the bars or labels to select one or more counties.</p>",
"color": "red",
"chartType": "bar-horizontal",
"filterer": { type: "finder" }
},

"distributionChloropleth": {
"title": "Distribution of Grants by location",
"title": "Distribution of Grants by best available location",
"instructions": "<p>Zoom into a Country/Region to view Local Authority-level data. Click on an area to view number of grants, and click on the number of grants to select the area.</p>",
"color": "red",
"chartType": "map-chloropleth"
Expand All @@ -72,7 +120,7 @@ const chartCardMetadata = {
},
"simple_grant_type": {
"title": "Type of grant",
"instructions": "<p>Click on the bars or labels to select one or more grant types</p>",
"instructions": "<p>Click on the bars or labels to select one or more grant types.</p>",
"color": "orange",
"chartType": "bar-horizontal"
},
Expand Down
6 changes: 5 additions & 1 deletion insights/templates/components/chart-card.vue.j2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,8 @@
</filter-item>
<div>
<hr class="separator-light">
<span v-if="chartCardMetadata.instructions" class="hide-print" v-html="chartCardMetadata.instructions"></span>
<span style="display: inline-block" v-if="chartCardMetadata.instructions" class="hide-print" v-html="chartCardMetadata.instructions"></span>
<a class="hide-print" href="#" v-on:click.prevent="removeFilter()" v-show="itemsSelected">Clear selection.</a></small>
<span v-if="chartCardMetadata.commentary" v-html="chartCardMetadata.commentary"></span>
<p v-if="totalNotInGraph > 0">{{totalNotInGraph.toLocaleString()}} grants are not shown as they did not include information to determine {{chartCardMetadata.title.toLowerCase()}}.</p>
</div>
Expand Down Expand Up @@ -174,6 +175,9 @@
};
},
methods: {
removeFilter() {
this.$emit("remove-filter", this.dataId);
},
updateMaxValue(buckets) {
/* This maxValue is used to work out the scale of the graphs */
if (this.itemsSelected) {
Expand Down
113 changes: 99 additions & 14 deletions insights/templates/data-display.vue.j2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,28 +180,102 @@
<template v-if="data.aggregations">

<!-- Funders -->
<bar-chart-card v-on:select="updateData($event)" :data-all="data" :current-api-url="currentApiUrl" data-id="fundingOrganization"></bar-chart-card>
<bar-chart-card
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)"
:data-all="data"
:current-api-url="currentApiUrl"
data-id="fundingOrganization">
</bar-chart-card>
<!-- Funding organisation type -->
<bar-chart-card v-on:select="updateData($event)" :data-all="data" :current-api-url="currentApiUrl" data-id="fundingOrganizationTSGType"></bar-chart-card>
<bar-chart-card
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)"
:data-all="data" :current-api-url="currentApiUrl" data-id="fundingOrganizationTSGType"></bar-chart-card>
<!-- Amount awarded -->
<bar-chart-card v-on:select="updateData($event)" :data-all="data" :current-api-url="currentApiUrl" data-id="amountAwardedFixed"></bar-chart-card>
<bar-chart-card
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)" :data-all="data" :current-api-url="currentApiUrl" data-id="amountAwardedFixed"></bar-chart-card>

<!-- Award date -->
<bar-chart-card v-on:select="updateData($event)" :data-all="data" :current-api-url="currentApiUrl" data-id="awardYear"></bar-chart-card>
<bar-chart-card
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)" :data-all="data" :current-api-url="currentApiUrl" data-id="awardYear"></bar-chart-card>

<!-- Grant Programmes -->
<bar-chart-card v-on:select="updateData($event)" :data-all="data" :current-api-url="currentApiUrl" data-id="grantProgramme"></bar-chart-card>
<bar-chart-card
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)" :data-all="data" :current-api-url="currentApiUrl" data-id="grantProgramme"></bar-chart-card>

<div class="spacer-3"></div>
<div class="grid__all">
<h3 v-if="!loading">Grants locations</h3>
<h3 v-if="!loading" style="display: inline-block">Grants locations
<select v-model="geoTypeSelect" name="location-select">
<option value="best">Best Available</option>
<option value="beneficiary">Beneficiary</option>
<option value="recipient_org">Recipient Organisation</option>
</select>
</h3>
<a style="display: inline-block" class="hide-print alert-tag alert-tag--anchor margin-left:1" href="https://help.grantnav.threesixtygiving.org/en/latest/locations/" title="Learn more about locations">
<svg width="16" height="16" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7 5.83333C6.70833 5.83333 6.41667 6.06667 6.41667 6.41667V9.91667C6.41667 10.2667 6.65 10.5 7 10.5C7.29167 10.5 7.58333 10.2667 7.58333 9.91667V6.41667C7.58333 6.125 7.29167 5.83333 7 5.83333ZM7 3.5C6.70833 3.5 6.41667 3.73333 6.41667 4.08333C6.41667 4.375 6.65 4.66667 7 4.66667C7.29167 4.66667 7.58333 4.43333 7.58333 4.08333C7.58333 3.79167 7.29167 3.5 7 3.5ZM7 0C3.15 0 0 3.15 0 7C0 10.85 3.15 14 7 14C10.85 14 14 10.85 14 7C14 3.15 10.85 0 7 0ZM7 12.8333C3.79167 12.8333 1.16667 10.2083 1.16667 7C1.16667 3.79167 3.79167 1.16667 7 1.16667C10.2083 1.16667 12.8333 3.79167 12.8333 7C12.8333 10.2083 10.2083 12.8333 7 12.8333Z"
fill="#1D1536"></path>
</svg>
Learn more about types of Locations</a>
</div>

<!-- Countries & Regions -->
<bar-chart-card v-on:select="updateData($event)" :data-all="data" :current-api-url="currentApiUrl" data-id="recipientRegionName" v-if="data.aggregations" ></bar-chart-card>
<!-- Local Authorities -->
<bar-chart-card v-on:select="updateData($event)" :data-all="data" :current-api-url="currentApiUrl" data-id="recipientDistrictName" v-if="data.aggregations" ></bar-chart-card>
<bar-chart-card
v-show="geoTypeSelect === 'best'"
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)"
:data-all="data" :current-api-url="currentApiUrl" data-id="recipientRegionName" v-if="data.aggregations" ></bar-chart-card>
<!-- Counties -->
<bar-chart-card
v-show="geoTypeSelect === 'best'"
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)" :data-all="data" :current-api-url="currentApiUrl" data-id="bestCountyName" v-if="data.aggregations" ></bar-chart-card>
<!-- Local Authorities -->
<bar-chart-card
v-show="geoTypeSelect === 'best'"
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)" :data-all="data" :current-api-url="currentApiUrl" data-id="recipientDistrictName" v-if="data.aggregations" ></bar-chart-card>

<!-- Countries & Regions -->
<bar-chart-card
v-show="geoTypeSelect === 'recipient_org'"
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)" :data-all="data" :current-api-url="currentApiUrl" data-id="recipientOrgRegionName" v-if="data.aggregations" ></bar-chart-card>
<!-- Counties -->
<bar-chart-card
v-show="geoTypeSelect === 'recipient_org'"
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)" :data-all="data" :current-api-url="currentApiUrl" data-id="recipientOrgCountyName" v-if="data.aggregations" ></bar-chart-card>
<!-- Local Authorities -->
<bar-chart-card
v-show="geoTypeSelect === 'recipient_org'"
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)" :data-all="data" :current-api-url="currentApiUrl" data-id="recipientOrgDistrictName" v-if="data.aggregations" ></bar-chart-card>

<!-- Countries & Regions -->
<bar-chart-card
v-show="geoTypeSelect === 'beneficiary'"
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)" :data-all="data" :current-api-url="currentApiUrl" data-id="beneficiaryRegionName" v-if="data.aggregations" ></bar-chart-card>
<!-- Counties -->
<bar-chart-card
v-show="geoTypeSelect === 'beneficiary'"
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)" :data-all="data" :current-api-url="currentApiUrl" data-id="beneficiaryCountyName" v-if="data.aggregations" ></bar-chart-card>
<!-- Local Authorities -->
<bar-chart-card
v-show="geoTypeSelect === 'beneficiary'"
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)" :data-all="data" :current-api-url="currentApiUrl" data-id="beneficiaryDistrictName" v-if="data.aggregations" ></bar-chart-card>

<!-- Choropleth -->

<choropleth class="base-card__content" v-on:select="updateData($event)" :current-api-url="currentApiUrl" :data-all="data" data-id="distributionChloropleth" container="ch-1" height="680px" :zoom-control="true" ></choropleth>

<div class="spacer-3"></div>
Expand All @@ -210,16 +284,25 @@
</div>

<!-- Type of grant recipient -->
<bar-chart-card v-on:select="updateData($event)" :data-all="data" data-id="recipientTSGType" :current-api-url="currentApiUrl"></bar-chart-card>
<bar-chart-card
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)" :data-all="data" data-id="recipientTSGType" :current-api-url="currentApiUrl"></bar-chart-card>
<!-- Recipient org Type -->
<bar-chart-card v-on:select="updateData($event)" :data-all="data" data-id="recipientOrganizationType" :current-api-url="currentApiUrl"></bar-chart-card>
<bar-chart-card
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)" :data-all="data" data-id="recipientOrganizationType" :current-api-url="currentApiUrl"></bar-chart-card>
<div class="grid__1">
<!-- Latest Income -->
<bar-chart-card v-on:select="updateData($event)" :data-all="data" data-id="latestCharityIncomeFixed" :current-api-url="currentApiUrl"></bar-chart-card>
<bar-chart-card
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)"
:data-all="data" data-id="latestCharityIncomeFixed" :current-api-url="currentApiUrl"></bar-chart-card>
</div>
<div class="grid__1">
<!--Age of recipient org -->
<bar-chart-card v-on:select="updateData($event)" :data-all="data" data-id="orgAgeWhenAwarded" :current-api-url="currentApiUrl"></bar-chart-card>
<bar-chart-card
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)" :data-all="data" data-id="orgAgeWhenAwarded" :current-api-url="currentApiUrl"></bar-chart-card>
</div>
</div>
</div> <!-- / grid -->
Expand All @@ -228,7 +311,9 @@
</div>

<!--Age of recipient org -->
<bar-chart-card v-on:select="updateData($event)" :data-all="data" data-id="simple_grant_type" :current-api-url="currentApiUrl"></bar-chart-card>
<bar-chart-card
v-on:remove-filter="removeFilter($event)"
v-on:select="updateData($event)" :data-all="data" data-id="simple_grant_type" :current-api-url="currentApiUrl"></bar-chart-card>

</template> <!-- / if data.aggregations -->

Expand Down

0 comments on commit f745104

Please sign in to comment.