diff --git a/src/assets/content/ChartGrid.js b/src/assets/content/ChartGrid.js new file mode 100644 index 0000000000000000000000000000000000000000..e9c779c383c090807988b81461750bb8e1e9143a --- /dev/null +++ b/src/assets/content/ChartGrid.js @@ -0,0 +1,54 @@ +export default { + chartGridItems: [ + //we'll be replacing these img_src with paths to location on s3 + //routes will direct to appropriate subpage + { + title: '', + route: '/', + img_src: 'src/assets/images/sampleChart.PNG', + alt: '' + }, + { + title: '', + route: '/', + img_src: 'src/assets/images/sampleChart.PNG', + alt: '' + }, + { + title: '', + route: '/', + img_src: 'src/assets/images/sampleChart.PNG', + alt: '' + }, + { + title: '', + route: '/', + img_src: 'src/assets/images/sampleChart.PNG', + alt: '' + }, + { + title: '', + route: '/', + img_src: 'src/assets/images/sampleChart.PNG', + alt: '' + }, + { + title: '', + route: '/', + img_src: 'src/assets/images/sampleChart.PNG', + alt: '' + }, + { + title: '', + route: '/', + img_src: 'src/assets/images/sampleChart.PNG', + alt: '' + }, + { + title: '', + route: '/', + img_src: 'src/assets/images/sampleChart.PNG', + alt: '' + }, + ] +}; \ No newline at end of file diff --git a/src/components/ChartGrid.vue b/src/components/ChartGrid.vue index 99dad5eac564ffb4680a267f7d1221ee7ab77499..1db94d27f479ddc3ebceac5f697ea9d151520c26 100644 --- a/src/components/ChartGrid.vue +++ b/src/components/ChartGrid.vue @@ -1,60 +1,24 @@ <template> <div id="chartGrid" class="padded"> - <!-- When we get actual charts, we can pull all the info and urls in from a js file and loop through - like in the VizLab home site --> - <a href="/"> <!-- Populate hrefs with relative routes --> - <div class="chart"> - <img :src="sampleChart" alt=""/> - </div> - </a> - <a href="/"> - <div class="chart"> - <img :src="sampleChart" alt=""/> - </div> - </a> - <a href="/"> - <div class="chart"> - <img :src="sampleChart" alt=""/> - </div> - </a> - <a href="/"> - <div class="chart"> - <img :src="sampleChart" alt=""/> - </div> - </a> - <a href="/"> - <div class="chart"> - <img :src="sampleChart" alt=""/> - </div> - </a> - <a href="/"> - <div class="chart"> - <img :src="sampleChart" alt=""/> - </div> - </a> - <a href="/"> - <div class="chart"> - <img :src="sampleChart" alt=""/> - </div> - </a> - <a href="/"> - <div class="chart"> - <img :src="sampleChart" alt=""/> - </div> - </a> + <a v-for="(item, index) in chartContent" :key="index" :href="item.route"> + <div class="chart"> + <img :src="item.img_src" alt=""/> + </div> + </a> </div> </template> <script> -import sampleChart from '@/assets/images/sampleChart.PNG'; +import ChartGrid from '@/assets/content/ChartGrid.js'; export default { - data() { - return { - sampleChart - }; - } + data() { + return { + chartContent: ChartGrid.chartGridItems + }; + } }; + </script> <style>