Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<template>
<QCard
bordered
style="min-height: calc(30vh + 40px)"
>
<QCardSection class="row">
<div class="col-sm-6 flex justify-sm-center justify-start items-center">
<div class="q-mb-md text-weight-medium">
{{ $lang('pages.dashboard.index.charts.transaction-history') }}
</div>
</div>
<div class="col-sm-6 flex justify-sm-center justify-end">
<QBtn
flat
round
icon="chevron_left"
@click="left"
/>
<QChip
size="1rem"
icon="event"
>
{{ month }}/{{ year }}
</QChip>
<QBtn
flat
round
icon="chevron_right"
@click="right"
/>
</div>
</QCardSection>
<QSeparator :inset="true" />
<QCardSection>
<AppLineChart
v-if="active"
container="height: 30vh; width: 100%;"
:data="data"
:options="options"
/>
</QCardSection>
</QCard>
</template>
<script lang="js">
import { QBtn, QCard, QCardSection, QChip, QSeparator } from 'quasar'
import TransactionService from 'source/domains/Gateway/Transaction/Schema/TransactionService'
import { currencyParseInput } from 'src/settings/components'
export default {
/**
*/
components: {
QCard,
QCardSection,
QSeparator,
QBtn,
QChip
},
/**
*/
name: 'TransactionHistory',
/**
*/
data: () => ({
active: false,
year: 2020,
month: 7,
data: {
labels: [],
datasets: []
},
options: {
responsive: true,
maintainAspectRatio: false,
lineTension: 1,
tooltips: {
callbacks: {
padding: 25,
label: function (item, data) {
return currencyParseInput(item.yLabel)
}
} // end callbacks:
},
scales: {
xAxes: [
{
type: 'time',
time: {
displayFormats: {
hour: 'MMM DD'
},
tooltipFormat: 'MMM D'
}
}
],
yAxes: [
{
ticks: {
beginAtZero: true,
padding: 25
}
}
]
}
}
}),
/**
*/
methods: {
left () {
this.month--
if (this.month <= 0) {
this.month = 12
this.year--
}
this.loadData()
},
right () {
this.month++
if (this.month >= 13) {
this.month = 1
this.year++
}
this.loadData()
},
/**
*/
async loadData () {
this.$q.loading.show({ delay: 0 })
try {
this.active = false
const response = await this.$http.history(this.year, this.month)
this.data.labels = response.data.labels
this.data.datasets = [
{
label: 'Approved',
data: response.data.approved,
borderColor: window.chartColors.blue,
fill: false,
borderWidth: 2
},
{
label: 'Declined',
data: response.data.declined,
borderColor: window.chartColors.red,
fill: false,
borderWidth: 2
},
{
label: 'Expired',
data: response.data.expired,
borderColor: window.chartColors.yellow,
fill: false,
borderWidth: 2
}
]
this.active = true
} catch (e) {
// silent is gold
}
this.$q.loading.hide()
}
},
/**
*/
created () {
this.$http = TransactionService.build()
this.loadData()
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.