diff --git a/viz-dev-frontend/src/components/Card.vue b/viz-dev-frontend/src/components/Card.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ada6c8e2f21c315df20852d1403a71a6cb388691
--- /dev/null
+++ b/viz-dev-frontend/src/components/Card.vue
@@ -0,0 +1,40 @@
+<template>
+ <div class="card">
+ <img v-if="link" v-bind:src="require(`@/assets/${link}`)" class="logo"/>
+ <div class="container">
+ <h4><b>{{ name }}</b></h4>
+ <p>{{ desc }}</p>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'Card',
+ props: ['link', 'name', 'desc'],
+};
+</script>
+
+<style scoped>
+.logo {
+ max-height: 50px;
+ max-width: 100%;
+}
+
+.card {
+ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+ transition: 0.3s;
+ height: 100%;
+ width: 200px;
+ margin: 5px 10px;
+ padding: 10px;
+ cursor: pointer;
+ z-index: 0;
+}
+
+.card:hover {
+ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
+ transform: scale(1.1);
+ z-index: 100;
+}
+</style>
diff --git a/viz-dev-frontend/src/components/Cards.vue b/viz-dev-frontend/src/components/Cards.vue
deleted file mode 100644
index 4270b4cb4091db93366d43deb03e143317941237..0000000000000000000000000000000000000000
--- a/viz-dev-frontend/src/components/Cards.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
- <div class="flex-row flex-wrap container__card">
- <div v-for="picture in pictures" v-bind:key="picture.link">
- <div class="cards">
- <img v-bind:src="require('@/assets/' + picture.link)" :class="picture.logo"/>
- <div class="container">
- <h4><b>{{ picture.name }}</b></h4>
- <p> {{ picture.desc }} </p>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-export default {
- name: 'Cards',
- data() {
- return {
- pictures: [
- {
- name: 'Play Button', link: 'button_play.png', desc: 'Menampilkan data tahun ke tahun dalam animasi', logo: '',
- },
- {
- name: 'Color', link: 'color.png', desc: 'Mengubah warna bulatan berdasarkan range nilai', logo: 'logo__follow--btnPlay',
- },
- {
- name: 'Sumbu X', link: 'dropdown_x.png', desc: 'Mengubah variabel sumbu X', logo: 'logo__dropdown--x',
- },
- {
- name: 'Sumbu Y', link: 'dropdown_y.png', desc: 'Mengubah variabel sumbu Y', logo: '',
- },
- {
- name: 'Expand', link: 'expand.png', desc: 'Membuat grafik ditampilkan full screen', logo: 'logo__follow--btnPlay',
- },
- {
- name: 'Find', link: 'find.png', desc: 'Memilih kota-kota secara spesifik', logo: 'logo__follow--btnPlay',
- },
- {
- name: 'Option', link: 'option.png', desc: 'Mengatur tampilan grafik', logo: 'logo__follow--btnPlay',
- },
- {
- name: 'Present', link: 'present.png', desc: 'Menyajikan grafik dalam presentasi bersih', logo: 'logo__follow--btnPlay',
- },
- {
- name: 'Timeline', link: 'timeline.png', desc: 'Tahun-tahun pada data untuk ditampilkan', logo: 'logo__timeline',
- },
- {
- name: 'Zoom', link: 'zoom.png', desc: 'Zoom in atau zoom out pada grafik', logo: 'logo__follow--btnPlay',
- },
- ],
- };
- },
-};
-</script>
-
-<style scoped>
-.logo__follow--btnPlay {
- width: 45px;
- height: 43px;
-}
-
-.logo__dropdown--x {
- width: 200px;
- height: 26px;
-}
-
-.logo__timeline {
- width: 200px;
- height: 29px;
-}
-
-.flex-row {
- display: flex;
- flex-direction: row;
-}
-
-.flex-wrap {
- flex-wrap: wrap;
-}
-
-.container__card {
- text-align: center;
- align-items: center;
- justify-content: center;
-}
-
-.cards {
- box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
- transition: 0.3s;
- width: 200px;
- height: 165px;
- margin: 5px 10px;
- padding: 5px;
- cursor: pointer;
-}
-
-.cards:hover {
- box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
- transform: scale(1.1);
-}
-
-.container {
- padding: 2px 16px;
-}
-</style>
diff --git a/viz-dev-frontend/src/components/ChartLegend.vue b/viz-dev-frontend/src/components/ChartLegend.vue
new file mode 100644
index 0000000000000000000000000000000000000000..866806e481a2b82afa8d63e8c56d3f34e126859c
--- /dev/null
+++ b/viz-dev-frontend/src/components/ChartLegend.vue
@@ -0,0 +1,71 @@
+<template>
+ <div class="flex-row flex-wrap container__card">
+ <div v-for="propsCard in propsCards" v-bind:key="propsCard.name" class="card">
+ <Card v-bind="propsCard" />
+ </div>
+ </div>
+</template>
+
+<script>
+import Card from '@/components/Card.vue';
+
+export default {
+ name: 'ChartLegend',
+ components: {
+ Card,
+ },
+ data() {
+ return {
+ propsCards: [
+ {
+ name: 'Play Button', link: 'button_play.png', desc: 'Menampilkan data tahun ke tahun dalam animasi',
+ },
+ {
+ name: 'Color', link: 'color.png', desc: 'Mengubah warna bulatan berdasarkan range nilai',
+ },
+ {
+ name: 'Sumbu X', link: 'dropdown_x.png', desc: 'Mengubah variabel sumbu X',
+ },
+ {
+ name: 'Sumbu Y', link: 'dropdown_y.png', desc: 'Mengubah variabel sumbu Y',
+ },
+ {
+ name: 'Expand', link: 'expand.png', desc: 'Membuat grafik ditampilkan full screen',
+ },
+ {
+ name: 'Find', link: 'find.png', desc: 'Memilih kota-kota secara spesifik',
+ },
+ {
+ name: 'Option', link: 'option.png', desc: 'Mengatur tampilan grafik',
+ },
+ {
+ name: 'Present', link: 'present.png', desc: 'Menyajikan grafik dalam presentasi bersih',
+ },
+ {
+ name: 'Timeline', link: 'timeline.png', desc: 'Tahun-tahun pada data untuk ditampilkan',
+ },
+ {
+ name: 'Zoom', link: 'zoom.png', desc: 'Zoom in atau zoom out pada grafik',
+ },
+ ],
+ };
+ },
+};
+</script>
+
+<style scoped>
+.flex-row {
+ display: flex;
+ flex-direction: row;
+}
+
+.flex-wrap {
+ flex-wrap: wrap;
+}
+
+.container__card {
+ text-align: center;
+ align-items: stretch;
+ justify-content: center;
+}
+</style>
diff --git a/viz-dev-frontend/src/components/SeriesDescription.vue b/viz-dev-frontend/src/components/SeriesDescription.vue
new file mode 100644
index 0000000000000000000000000000000000000000..74c1418f99b4ec1983f9c166a57881c4f99375e0
--- /dev/null
+++ b/viz-dev-frontend/src/components/SeriesDescription.vue
@@ -0,0 +1,52 @@
+<template>
+ <div class="flex-row flex-wrap container__card">
+ <div v-for="propsCard in propsCards" v-bind:key="propsCard.name">
+ <Card v-bind="propsCard" />
+ </div>
+ </div>
+</template>
+
+<script>
+import Card from '@/components/Card.vue';
+import api from '@/api';
+
+export default {
+ name: 'SeriesDescription',
+ components: {
+ Card,
+ },
+ data() {
+ return {
+ propsCards: [],
+ };
+ },
+ created() {
+ api.get('/series').then((response) => {
+ const series = response.data;
+ for (let i = 0; i < series.length; i += 1) {
+ this.propsCards.push({
+ name: series[i].name,
+ desc: series[i].description,
+ });
+ }
+ });
+ },
+};
+</script>
+
+<style scoped>
+.flex-row {
+ display: flex;
+ flex-direction: row;
+}
+
+.flex-wrap {
+ flex-wrap: wrap;
+}
+
+.container__card {
+ text-align: center;
+ align-items: stretch;
+ justify-content: center;
+}
+</style>
diff --git a/viz-dev-frontend/src/views/Home.vue b/viz-dev-frontend/src/views/Home.vue
index 55cdc920289b9f22214f1001eadf2807abc7818d..ed48a9425cf0da942a0c7437f46fa1897d4744ab 100644
--- a/viz-dev-frontend/src/views/Home.vue
+++ b/viz-dev-frontend/src/views/Home.vue
@@ -2,23 +2,39 @@
<div>
<Navbar></Navbar>
<Chart></Chart>
- <Cards></Cards>
+ <div class="block">
+ <h3>Deskripsi</h3>
+ <SeriesDescription></SeriesDescription>
+ </div>
+ <div class="block">
+ <h3>Legenda</h3>
+ <ChartLegend></ChartLegend>
+ </div>
</div>
</template>
<script>
+import ChartLegend from '@/components/ChartLegend.vue';
+import SeriesDescription from '@/components/SeriesDescription.vue';
import Chart from '@/components/Chart.vue';
-import Cards from '@/components/Cards.vue';
export default {
name: 'Home',
components: {
Chart,
- Cards,
+ ChartLegend,
+ SeriesDescription,
},
};
</script>
<style scoped>
+h3 {
+ text-align: center;
+ margin: 12px 0;
+}
+.block {
+ margin-bottom: 50px;
+}
</style>