Fix/histogram chart

src/components/earnings/EarningsCard.vue

@@ -13,6 +13,7 @@ const emit = defineEmits(['try-again-clicked'])
 const props = defineProps<{
   data: EarningsData
   isLoading: boolean
+  isLoadingStats: boolean
   isError: boolean
 }>()
 </script>
@@ -24,7 +25,10 @@ const props = defineProps<{
     @try-again-clicked="emit('try-again-clicked')"
   >
     <template #left>
-      <EarningsDataComponent :earnings="props.data" />
+      <EarningsDataComponent
+        :earnings="props.data"
+        :is-loading="props.isLoadingStats"
+      />
     </template>
 
     <template #right>

src/components/earnings/EarningsChart.vue

@@ -2,15 +2,37 @@
 import { formatCurrency } from '@uicommon/utils/numbers'
 import ApexCharts from 'apexcharts'
 import dayjs from 'dayjs'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useDashboardStore } from '@/store/dashboard'
 import type { DailyEarningsData } from '@/types/types'
 
+const dashboardStore = useDashboardStore()
+
 const chart = ref<ApexCharts | null>(null)
 
 const props = defineProps<{
   data: DailyEarningsData[]
 }>()
 
+function presentCurrency(value: number): string {
+  if (isNaN(value)) {
+    return '--'
+  }
+
+  if (value === 0) {
+    return '0 HF'
+  }
+
+  const k = 1000
+  const sizes = ['', 'K', 'M']
+
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  const i = Math.min(Math.floor(Math.log(value) / Math.log(k)), 4)
+
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  return `${parseFloat((value / Math.pow(k, i)).toFixed(2))}${sizes[i]}`
+}
+
 const options = computed(() => ({
   series: [
     {
@@ -81,7 +103,7 @@ const options = computed(() => ({
       offsetX: -1,
       offsetY: 0,
       rotate: 0,
-      formatter: (value) => value
+      formatter: (value) => `${presentCurrency(value)}`
     },
     axisBorder: {
       show: true,
@@ -152,7 +174,7 @@ watch(
   () => props.data,
   async (value) => {
     if (value && chart.value) {
-      chart.value.updateSeries(value)
+      await chart.value.updateSeries(value)
     }
   },
   {
@@ -166,6 +188,10 @@ onMounted(async () => {
     await chart.value.render()
   }
 })
+
+onUnmounted(() => {
+  dashboardStore.resetHoloFuelDailyStats()
+})
 </script>
 
 <template>

src/components/earnings/EarningsData.vue

@@ -1,46 +1,39 @@
 <script setup lang="ts">
 import BaseButton from '@uicommon/components/BaseButton.vue'
 import { formatCurrency } from '@uicommon/utils/numbers'
-// import { computed } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import CircleSpinner from '../../../ui-common-library/src/components/CircleSpinner.vue'
+import { ESpinnerSize } from '../../../ui-common-library/src/types/ui'
 import EarningsChart from '@/components/earnings/EarningsChart.vue'
-// import TrendChip from '@/components/TrendChip.vue'
 import { useGoToHoloFuel } from '@/composables/useGoToHoloFuel'
 import type { EarningsData } from '@/types/types'
 
 const props = defineProps<{
   earnings: EarningsData
+  isLoading: boolean
 }>()
 
 const { goToHoloFuel } = useGoToHoloFuel()
 const { t } = useI18n()
 
-// const trendValue = computed(() => {
-//   const currentEarnings = Number(props.earnings.current)
-//   const previousEarnings = Number(props.earnings.previous)
-//
-//   return ((currentEarnings - previousEarnings) / previousEarnings) * 100
-// })
-//
-// const trendDirection = computed(() => {
-//   const currentEarnings = Number(props.earnings.current)
-//   const previousEarnings = Number(props.earnings.previous)
-//
-//   return currentEarnings >= previousEarnings ? 'up' : 'down'
-// })
+const totalEarnings = computed(() =>
+  props.earnings.dailies.reduce((acc, curr) => acc + Number(curr.paid) + Number(curr.unpaid), 0)
+)
 </script>
 
 <template>
   <div class="weekly-earnings-data">
     <div class="weekly-earnings-data__header">
-      <div class="weekly-earnings-data__header-label">
+      <div
+        class="weekly-earnings-data__header-label"
+        :class="{ 'weekly-earnings-data--loading': props.isLoading }"
+      >
         <span class="weekly-earnings-data__header-label-top">
-          <!--          {{ t('earnings.earnings_in_the_past', { numberOfDays: 7, trendDirection }) }}-->
           {{ t('earnings.earnings_in_the_past_days', { numberOfDays: 7 }) }}
         </span>
         <span class="weekly-earnings-data__header-label-bottom">
-          {{ t('earnings.totalling', { amount: formatCurrency(props.earnings.redeemed, 0) }) }}
-          <!--          <TrendChip :value="trendValue || 0" />-->
+          {{ t('earnings.totalling', { amount: formatCurrency(totalEarnings, 2) }) }}
         </span>
       </div>
 
@@ -53,9 +46,19 @@ const { t } = useI18n()
     </div>
 
     <EarningsChart
-      :data="props.earnings.dailies"
+      v-if="!props.isLoading && props.earnings.dailies.length > 0"
+      :data="[...props.earnings.dailies].reverse()"
       class="weekly-earnings-data__graph"
     />
+
+    <div
+      v-else
+      class="weekly-earnings-data__graph--loading"
+    >
+      <CircleSpinner
+        :scale="ESpinnerSize.small"
+      />
+    </div>
   </div>
 </template>
 
@@ -67,6 +70,10 @@ const { t } = useI18n()
   margin-top: 10px;
   padding: 0 60px;
 
+  &--loading {
+    opacity: 0.5;
+  }
+
   &__header {
     display: flex;
     justify-content: space-between;
@@ -94,6 +101,13 @@ const { t } = useI18n()
 
   &__graph {
     margin-top: 10px;
+
+    &--loading {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 255px;
+    }
   }
 
   &__holofuel-button {

src/interfaces/HposInterface.ts

@@ -33,7 +33,8 @@ interface HposInterface {
   getRedemptionHistory: () => Promise<HposHolochainCallResponse>
   getCoreAppVersion: () => Promise<CoreAppVersion>
   redeemHoloFuel: (payload: RedeemHoloFuelPayload) => Promise<RedemptionTransaction | boolean>
-  getHoloFuelDailyStats: () => Promise<unknown | boolean>
+  getHoloFuelDailyStats: () => Promise<EarningsData | boolean>
+  resetHoloFuelDailyStats: () => void
   HPOS_API_URL: string
 }
 

src/pages/EarningsPage.vue

@@ -11,15 +11,11 @@ const dashboardStore = useDashboardStore()
 const userStore = useUserStore()
 
 const isLoading = ref(false)
+const isLoadingStats = ref(false)
+
 const isError = computed(() => !!dashboardStore.hostEarnings.error)
 
-const rawWeeklyEarnings = computed((): string | number =>
-  !isErrorPredicate(dashboardStore.hostEarnings)
-    ? dashboardStore.hostEarnings.earnings?.last7days
-    : 0
-)
 /* eslint-enable @typescript-eslint/no-magic-numbers */
-
 const redeemableHoloFuel = computed((): number =>
   !isErrorPredicate(dashboardStore.hostEarnings)
     ? Number(dashboardStore.hostEarnings.holofuel.redeemable || 0)
@@ -29,7 +25,9 @@ const redeemableHoloFuel = computed((): number =>
 const kycLevel = computed(() => userStore.kycLevel)
 
 async function getHoloFuelDailyStats(): Promise<void> {
+  isLoadingStats.value = true
   await dashboardStore.getHoloFuelDailyStats()
+  isLoadingStats.value = false
 }
 
 async function getEarnings(): Promise<void> {
@@ -39,10 +37,8 @@ async function getEarnings(): Promise<void> {
 }
 
 onMounted(async (): Promise<void> => {
-  if (!rawWeeklyEarnings.value || !Number(rawWeeklyEarnings.value)) {
-    await getEarnings()
-    await getHoloFuelDailyStats()
-  }
+  await getEarnings()
+  await getHoloFuelDailyStats()
 })
 </script>
 
@@ -55,6 +51,7 @@ onMounted(async (): Promise<void> => {
       <EarningsCard
         :data="dashboardStore.earningsStats"
         :is-loading="isLoading"
+        :is-loading-stats="isLoadingStats"
         :is-error="isError"
         data-test-earnings-weekly-earnings-card
         @try-again-clicked="getEarnings"

src/store/dashboard.ts

@@ -2,7 +2,12 @@ import { defineStore } from 'pinia'
 import { HApp, HostEarnings, UsageResponse, useHposInterface } from '@/interfaces/HposInterface'
 import type { EarningsData } from '@/types/types'
 
-const { getUsage, getHostedHApps, getHostEarnings, getHoloFuelDailyStats } = useHposInterface()
+const {
+  getUsage,
+  getHostedHApps,
+  getHostEarnings,
+  getHoloFuelDailyStats
+} = useHposInterface()
 
 interface State {
   usage: UsageResponse | { error: unknown }
@@ -49,6 +54,13 @@ export const useDashboardStore = defineStore('dashboard', {
 
     async getHoloFuelDailyStats(): Promise<void> {
       this.earningsStats = await getHoloFuelDailyStats()
+    },
+
+    resetHoloFuelDailyStats(): void {
+      this.earningsStats = {
+        dailies: [],
+        redeemed: 0
+      }
     }
   }
 })

src/types/types.ts

@@ -108,8 +108,8 @@ export interface InvoiceDue {
 
 export interface DailyEarningsData {
   date: string
-  paid: number
-  unpaid: number
+  paid: string
+  unpaid: string
 }
 
 export interface EarningsData {