sort cards for project pages

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.'
         }   
     ]

src/components/ChartGrid.vue

 <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