Merge pull request #159 from Holo-Host/feat/histogram

Feature/histogram: connect the API

src/components/earnings/EarningsData.vue

@@ -1,10 +1,10 @@
 <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 EarningsChart from '@/components/earnings/EarningsChart.vue'
-import TrendChip from '@/components/TrendChip.vue'
+// import TrendChip from '@/components/TrendChip.vue'
 import { useGoToHoloFuel } from '@/composables/useGoToHoloFuel'
 import type { EarningsData } from '@/types/types'
 
@@ -15,31 +15,32 @@ const props = defineProps<{
 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 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'
+// })
 </script>
 
 <template>
   <div class="weekly-earnings-data">
     <div class="weekly-earnings-data__header">
       <div class="weekly-earnings-data__header-label">
         <span class="weekly-earnings-data__header-label-top">
-          {{ t('earnings.earnings_in_the_past', { numberOfDays: 7, trendDirection }) }}
+          <!--          {{ 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.current, 0) }) }}
-          <TrendChip :value="trendValue || 0" />
+          {{ t('earnings.totalling', { amount: formatCurrency(props.earnings.redeemed, 0) }) }}
+          <!--          <TrendChip :value="trendValue || 0" />-->
         </span>
       </div>
 
@@ -52,7 +53,7 @@ const trendDirection = computed(() => {
     </div>
 
     <EarningsChart
-      :data="props.earnings.daily"
+      :data="props.earnings.dailies"
       class="weekly-earnings-data__graph"
     />
   </div>
@@ -73,7 +74,6 @@ const trendDirection = computed(() => {
     &-label {
       display: flex;
       flex-direction: column;
-      opacity: 0.25;
       pointer-events: none;
 
       &-top {
@@ -94,8 +94,6 @@ const trendDirection = computed(() => {
 
   &__graph {
     margin-top: 10px;
-    opacity: 0.25;
-    pointer-events: none;
   }
 
   &__holofuel-button {

src/interfaces/HposInterface.ts

@@ -5,7 +5,7 @@ import { kAuthTokenLSKey, kCoreAppVersionLSKey } from '@/constants'
 import kHttpStatus from '@/constants/httpStatues'
 import router from '@/router'
 import { isKycLevel } from '@/types/predicates'
-import type { CheckAuthResponse, EUserKycLevel, PricesData } from '@/types/types'
+import type { CheckAuthResponse, EarningsData, EUserKycLevel, PricesData } from '@/types/types'
 import { ECriteriaType, EHostingPlan } from '@/types/types'
 import { retry } from '@/utils/functionUtils'
 import { eraseHpAdminKeypair, getHpAdminKeypair } from '@/utils/keyManagement'
@@ -33,6 +33,7 @@ interface HposInterface {
   getRedemptionHistory: () => Promise<HposHolochainCallResponse>
   getCoreAppVersion: () => Promise<CoreAppVersion>
   redeemHoloFuel: (payload: RedeemHoloFuelPayload) => Promise<RedemptionTransaction | boolean>
+  getHoloFuelDailyStats: () => Promise<unknown | boolean>
   HPOS_API_URL: string
 }
 
@@ -155,6 +156,7 @@ type HposHolochainCallResponse =
   | EUserKycLevel
   | ServiceLogsResponse
   | ZomeCallResponse
+  | EarningsData
 
 type HposAdminCallResponse = HposConfigResponse
 
@@ -1000,6 +1002,16 @@ export function useHposInterface(): HposInterface {
     }
   }
 
+  async function getHoloFuelDailyStats(): Promise<HposHolochainCallResponse> {
+    const result = await hposHolochainCall({
+      method: 'get',
+      pathPrefix: '/api/v2',
+      path: '/holofuel_redeemable_for_last_week'
+    })
+
+    return result
+  }
+
   return {
     getUsage,
     getHostedHApps,
@@ -1023,6 +1035,7 @@ export function useHposInterface(): HposInterface {
     stopHostingHApp,
     updateHAppHostingPlan,
     getServiceLogs,
+    getHoloFuelDailyStats,
     HPOS_API_URL
   }
 }

src/locales/en.ts

@@ -35,6 +35,7 @@ export default {
   },
   earnings: {
     earnings_in_the_past: 'Earnings in the past {numberOfDays} days are {trendDirection}',
+    earnings_in_the_past_days: 'Earnings in the past {numberOfDays} days',
     exceptions: 'Exceptions',
     last_30_days: 'Last 30 days',
     last_7_days: 'Last 7 days',

src/pages/EarningsPage.vue

@@ -6,7 +6,6 @@ import PrimaryLayout from '@/components/PrimaryLayout.vue'
 import { useDashboardStore } from '@/store/dashboard'
 import { useUserStore } from '@/store/user'
 import { isError as isErrorPredicate } from '@/types/predicates'
-import type { EarningsData } from '@/types/types'
 
 const dashboardStore = useDashboardStore()
 const userStore = useUserStore()
@@ -19,13 +18,6 @@ const rawWeeklyEarnings = computed((): string | number =>
     ? dashboardStore.hostEarnings.earnings?.last7days
     : 0
 )
-
-/* eslint-disable @typescript-eslint/no-magic-numbers */
-const earnings: EarningsData = {
-  current: 0,
-  previous: 0,
-  daily: []
-}
 /* eslint-enable @typescript-eslint/no-magic-numbers */
 
 const redeemableHoloFuel = computed((): number =>
@@ -36,6 +28,10 @@ const redeemableHoloFuel = computed((): number =>
 
 const kycLevel = computed(() => userStore.kycLevel)
 
+async function getHoloFuelDailyStats(): Promise<void> {
+  await dashboardStore.getHoloFuelDailyStats()
+}
+
 async function getEarnings(): Promise<void> {
   isLoading.value = true
   await dashboardStore.getEarnings()
@@ -45,6 +41,7 @@ async function getEarnings(): Promise<void> {
 onMounted(async (): Promise<void> => {
   if (!rawWeeklyEarnings.value || !Number(rawWeeklyEarnings.value)) {
     await getEarnings()
+    await getHoloFuelDailyStats()
   }
 })
 </script>
@@ -56,7 +53,7 @@ onMounted(async (): Promise<void> => {
   >
     <div>
       <EarningsCard
-        :data="earnings"
+        :data="dashboardStore.earningsStats"
         :is-loading="isLoading"
         :is-error="isError"
         data-test-earnings-weekly-earnings-card

src/store/dashboard.ts

@@ -1,12 +1,14 @@
 import { defineStore } from 'pinia'
 import { HApp, HostEarnings, UsageResponse, useHposInterface } from '@/interfaces/HposInterface'
+import type { EarningsData } from '@/types/types'
 
-const { getUsage, getHostedHApps, getHostEarnings } = useHposInterface()
+const { getUsage, getHostedHApps, getHostEarnings, getHoloFuelDailyStats } = useHposInterface()
 
 interface State {
   usage: UsageResponse | { error: unknown }
   hostEarnings: HostEarnings | { error: unknown }
   hostedHApps: HApp[] | { error: unknown }
+  earningsStats: EarningsData | { error: unknown }
 }
 
 export const useDashboardStore = defineStore('dashboard', {
@@ -25,7 +27,11 @@ export const useDashboardStore = defineStore('dashboard', {
       holofuel: { balance: '0', available: '0', redeemable: '0' },
       recentPayments: []
     },
-    hostedHApps: []
+    hostedHApps: [],
+    earningsStats: {
+      dailies: [],
+      redeemed: 0
+    }
   }),
 
   actions: {
@@ -39,6 +45,10 @@ export const useDashboardStore = defineStore('dashboard', {
 
     async getEarnings(): Promise<void> {
       this.hostEarnings = await getHostEarnings()
+    },
+
+    async getHoloFuelDailyStats(): Promise<void> {
+      this.earningsStats = await getHoloFuelDailyStats()
     }
   }
 })

src/types/types.ts

@@ -113,9 +113,8 @@ export interface DailyEarningsData {
 }
 
 export interface EarningsData {
-  current: number
-  previous: number
-  daily: DailyEarningsData[]
+  redeemed: number
+  dailies: DailyEarningsData[]
 }
 
 export enum ECriteriaType {