TransactionHistory.vue

<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>