From 28634fa491c25247046bed3a461cef5ddf9a99de Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 4 Sep 2024 16:43:32 -0500
Subject: [PATCH] sort cards for project pages
---
src/assets/content/ChartGrid.js | 6 ++++++
src/components/ChartGrid.vue | 12 ++++++------
2 files changed, 12 insertions(+), 6 deletions(-)
diff --git a/src/assets/content/ChartGrid.js b/src/assets/content/ChartGrid.js
index 0f2eba3..6fb09ed 100644
--- a/src/assets/content/ChartGrid.js
+++ b/src/assets/content/ChartGrid.js
@@ -9,6 +9,7 @@ export default {
vizRoute: 'inland-fish-threats',
img_src: 'ThreatBumpChart_thumbnail.png',
alt: '',
+ chartOrder: 1,
description: 'Inland fisheries are threatened.'
},
{
@@ -18,6 +19,7 @@ export default {
vizRoute: 'glacier-scan',
img_src: 'glacial_xray_thumbnail.png',
alt: '',
+ chartOrder: 1,
description: 'Researchers are studying glacial ice.'
},
{
@@ -27,6 +29,7 @@ export default {
vizRoute: 'inland-rec-fish-value',
img_src: 'circle-pack-thumbnail.png',
alt: '',
+ chartOrder: 1,
description: 'Inland recreational fishing contributes economic value.'
},
{
@@ -36,6 +39,7 @@ export default {
vizRoute: 'beaufort-sea-ice-coring',
img_src: 'BeaufortSeaCore_thumbnail.PNG',
alt: '',
+ chartOrder: 1,
description: 'Sediment cores can help build past and present climates.'
},
{
@@ -45,6 +49,7 @@ export default {
vizRoute: 'beaufort-sea-species',
img_src: 'BeaufortSeaSpecies_thumbnail.png',
alt: '',
+ chartOrder: 2,
description: 'Microfossils can be used to indicate these changes.'
},
{
@@ -54,6 +59,7 @@ export default {
vizRoute: 'beaufort-sea-timeline',
img_src: 'BeaufortSeaTimeline_thumbnail.PNG',
alt: '',
+ chartOrder: 3,
description: 'Communities of microorganisms on the sea floor are affected.'
}
]
diff --git a/src/components/ChartGrid.vue b/src/components/ChartGrid.vue
index 7f2c7b7..e5f7982 100644
--- a/src/components/ChartGrid.vue
+++ b/src/components/ChartGrid.vue
@@ -1,6 +1,6 @@
<template>
<div id="chartGrid" class="padded">
- <ChartCard @click.enter="showSubPage(item.project, item.vizRoute)" v-for="(item, index) in randomizedChartContent" :key="index"
+ <ChartCard @click.enter="showSubPage(item.project, item.vizRoute)" v-for="(item, index) in sortedChartContent" :key="index"
:id="item.vizRoute"
:src="getThumb(item.img_src)"
:alt="item.alt"
@@ -31,12 +31,12 @@
// set up filtered chart data as computed property
const filteredChartContent = computed(() => {
- return props.view == 'all' ? chartContent : chartContent.filter(d => d.project.replace(/\s+/g, '-').toLowerCase() === props.view)
+ return props.view == 'all' ? chartContent : chartContent.filter(d => d.project.replace(/\s+/g, '-').toLowerCase() === props.view).sort((a,b) => (a.chartOrder > b.chartOrder) ? 1 : ((b.chartOrder > a.chartOrder) ? -1 : 0))
});
-
- // computed property for randomized chart content
- const randomizedChartContent = computed(() => {
- return shuffle([...filteredChartContent.value]); // clone array to avoid mutating original
+
+ // computed property for randomized chart content - only randomized on landing view
+ const sortedChartContent = computed(() => {
+ return props.view == 'all' ? shuffle([...filteredChartContent.value]) : filteredChartContent.value; // clone array to avoid mutating original
});
// Declare behavior on mounted
--
GitLab