Merge branch 'fix/chart' into feature/mor20-ecosystem

src/common/InfoDashboard/helpers.ts

@@ -38,7 +38,7 @@ function _generateTotalStakedPerDayGraphqlQuery(
         totalStaked
       }`
 
-  const monthTime = new Time(String(month), 'M')
+  const monthTime = new Time(String(month + 1), 'M')
   const currentTime = new Time()
   const poolStartedAtTime = new Time(poolStartedAt.toNumber())
 

src/common/InfoDashboard/index.vue

@@ -82,7 +82,7 @@ import type {
   InfoDashboardType,
 } from '@/types'
 import { Time, formatEther } from '@/utils'
-import { onMounted, reactive, ref, watch } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { CHART_CONFIG } from './const'
 import { getChartData } from './helpers'
 import AppIcon from '../AppIcon.vue'
@@ -106,44 +106,37 @@ const { t } = useI18n()
 
 const web3ProvidersStore = useWeb3ProvidersStore()
 
-const monthOptions: FieldOption<number>[] = [
-  {
-    title: t('months.february'),
-    value: 2,
-  },
-  {
-    title: t('months.march'),
-    value: 3,
-  },
-  {
-    title: t('months.april'),
-    value: 4,
-  },
-  {
-    title: t('months.may'),
-    value: 5,
-  },
-]
+const monthOptions = computed<FieldOption<number>[]>(() => {
+  const allMonthOptions = Array.from({ length: 12 }).map((_, idx) => ({
+    title: t(`months.${idx}`),
+    value: idx,
+  }))
+
+  const currentTime = new Time()
+  const month = currentTime.get('month')
+
+  return allMonthOptions.slice(1, month + 1)
+})
 
-const selectedMonth = ref(monthOptions[monthOptions.length - 1])
+const selectedMonth = ref(monthOptions.value[monthOptions.value.length - 1])
 
 const isChartDataUpdating = ref(false)
 
 const chartConfig = reactive<ChartConfig>({ ...CHART_CONFIG })
 
 const updateChartData = async (month: number) => {
-  if (!props.poolData) throw new Error('poolData unavailable')
-
   isChartDataUpdating.value = true
 
   try {
+    if (!props.poolData) throw new Error('poolData unavailable')
+
     const chartData = await getChartData(
       props.poolId,
       props.poolData.payoutStart,
       month,
     )
 
-    const monthTime = new Time(month.toString(), 'M')
+    const monthTime = new Time(String(month + 1), 'M')
 
     chartConfig.data.labels = Object.keys(chartData).map(
       day => `${monthTime.format('MMMM')} ${day}`,

src/localization/resources/en.json

@@ -270,17 +270,17 @@
     "default-message-default": "Just a message"
   },
   "months": {
-    "january": "January",
-    "february": "February",
-    "march": "March",
-    "april": "April",
-    "may": "May",
-    "june": "June",
-    "july": "July",
-    "august": "August",
-    "september": "September",
-    "october": "October",
-    "november": "November",
-    "december": "December"
+    "0": "January",
+    "1": "February",
+    "2": "March",
+    "3": "April",
+    "4": "May",
+    "5": "June",
+    "6": "July",
+    "7": "August",
+    "8": "September",
+    "9": "October",
+    "10": "November",
+    "11": "December"
   }
 }