ChartBestSellingProducts

.js

<template>
  <apexchart
    width="100%"
    title="Sales last week"
    type="bar"
    :series="series"
    :options="chartOptions"
  ></apexchart>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'
import { providerChartProductsOptions } from '~/components/options/chartOptions'
import StatsServiceAPI from '~/services/StatsServiceAPI'
import { ProviderState } from '~/types/store/providers.types'
import { TopProduct } from '~/types/store/orders.types'

@Component
export default class ProvidersChartSales extends Vue {
  /* Props */
  /* State */
  /* Data */
  chartOptions = providerChartProductsOptions
  series: ApexAxisChartSeries = [
    {
      name: 'Series 2',
      data: [],
    },
  ]

  /* Hooks */
  created(): void {
    this.fetchProvidersBestSellingProducts()
  }

  /* Methods */
  async fetchProvidersBestSellingProducts() {
    if (this.currentProviderID !== null) {
      try {
        const { data } = await StatsServiceAPI.getProviderBestSellingProducts(
          this.$axios,
          this.currentProviderID
        )
        if (!data) return
        this.updateChart(data)
      } catch (error) {
        console.error('Error fetching Products', error)
      }
    }
  }

  updateChart(data: TopProduct[]) {
    const newSeries: number[] = []
    const newLabels: string[] = []

    data.forEach((order: TopProduct): void => {
      newSeries.push(order.quantity)
      newLabels.push(order.name)
    })
    this.series = [
      {
        name: 'providers-chart-sales',
        data: newSeries,
      },
    ]
    this.chartOptions = {
      xaxis: {
        categories: newLabels,
      },
    }
  }

  /* Computed */
  get providerState(): ProviderState {
    return this.$store.state.providers
  }

  get currentProviderID(): number {
    return this.providerState.currentProvider.id
  }

  /* Watchers */
  @Watch('currentProviderID')
  onProviderChange() {
    console.log(
      'curr prov changed in PROVIDERS CHART PRODUCTS BEST',
      this.currentProviderID
    )

    this.fetchProvidersBestSellingProducts()
  }
}
</script>

<style scoped></style>