diff --git a/src/assets/content/ChartGrid.js b/src/assets/content/ChartGrid.js index 0f2eba3b1fe7a01637aa96177da93c09ead0e402..6fb09ed3a3f1bc834222ff4909ed50a23961d881 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 7f2c7b7ec4577c18e21c41288af7f5806e480375..e5f7982e396551ce995f96dfe7c55759e574f809 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