Skip to content

Instantly share code, notes, and snippets.

@malgamves
Last active May 5, 2019 20:07
Show Gist options
  • Save malgamves/e9b671cc612210ad8dd061b0dd7cac5d to your computer and use it in GitHub Desktop.
Save malgamves/e9b671cc612210ad8dd061b0dd7cac5d to your computer and use it in GitHub Desktop.
App.vue for a realtime Vue App using GraphQL
<template>
<div id="app">
<div class="container">
<div class="row">
<div class="column">
<h2>Who Might Die ⚔️</h2>
</div>
<div class="column">
<h2
v-if="loading"
>⚖️ Total Votes: {{totalVotes.characters_aggregate.aggregate.sum.votes}}</h2>
</div>
</div>
<div class="button-box">
<div v-for="charName of characters" v-bind:key="charName.id">
<button class="button" @click="updateVotes(charName.id)">{{charName.name}}</button>
</div>
</div>
<div>
<div class="chart">
<bar-chart v-if="loaded" :chartData="chartData" :options="options" :width="200" :height="300"/>
</div>
</div>
</div>
</div>
</template>
<script>
import BarChart from "./components/BarChart.js";
import {
ALL_CHAR_QUERY,
ADD_VOTE_MUTATION,
ALL_VOTES_SUBSCRIPTION,
SUM_VOTES_SUBSCRIPTION
} from "./constants/graphql";
import graphql2chartjs from "graphql2chartjs";
export default {
name: "app",
props: {
msg: String
},
data() {
return {
loaded: false,
loading: false,
characters: "",
totalVotes: 0,
chartData: null,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: false
}
}],
xAxes: [ {
gridLines: {
display: true
}
}]
},
legend: {
display: true
},
responsive: true,
maintainAspectRatio: true
}
};
},
components: {
BarChart
},
methods: {
updateVotes(id) {
this.$apollo.mutate({
mutation: ADD_VOTE_MUTATION,
variables: {
id: id
}
});
}
},
apollo: {
characters: {
query: ALL_CHAR_QUERY
},
$subscribe: {
votes: {
query: ALL_VOTES_SUBSCRIPTION,
result({ data }) {
const g2c = new graphql2chartjs();
g2c.add(data, "bar");
this.chartData = g2c.data;
this.loaded = true;
//console.log(g2c.data)
}
},
sumVotes: {
query: SUM_VOTES_SUBSCRIPTION,
result({ data }) {
if (data) {
this.totalVotes = data;
this.loading = true;
//console.log(data);
}
}
}
}
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 1%;
}
.container {
margin: 0 auto;
}
.row {
display: flex;
}
.column {
flex: 50%;
text-align: center;
}
.chart {
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.4);
border-radius: 10px;
padding-top: 15%;
}
button {
background-color:black;
border-radius: 10px;
color: white ;
width: 100px;
height: 40px;
float: left;
margin: 2%;
text-align: center;
}
.button-box {
text-align: center;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment