feat: add rewards chart filters

See: BEDS-875

Author: enzo-bitfly

frontend/assets/css/prime.scss

@@ -626,6 +626,122 @@ div.p-accordion {
   }
 }
 
+div.p-datepicker-input {
+  max-width: min-content;
+}
+
+div.p-datepicker-panel {
+  background: var(--input-background);
+  width: 268px;
+  margin-top: var(--padding-tiny);
+  padding: var(--padding-small);
+  border-radius: var(--border-radius);
+  border: 1px solid var(--input-border-color);
+
+  .p-datepicker-header {
+    padding: var(--padding-small);
+    padding-bottom: var(--padding);
+    border-bottom: 1px solid var(--light-grey-7);
+
+    .p-datepicker-prev-button,
+    .p-datepicker-next-button {
+      height: 30px;
+    }
+
+    .p-datepicker-title {
+      gap: var(--padding);
+
+      .p-datepicker-select-month,
+      .p-datepicker-select-year {
+        font-size: 1rem
+      }
+    }
+  }
+
+  .p-datepicker-day-view {
+    margin-top: var(--padding-small);
+    
+    .p-datepicker-weekday-cell {
+      padding: var(--padding-tiny);
+    }
+    
+    .p-datepicker-day-cell {
+      padding: var(--padding-tiny);
+      
+      &.p-datepicker-other-month {
+        color: var(--text-color-disabled);
+      }
+
+      &.p-datepicker-today > .p-datepicker-day {
+        background-color: var(--grey);
+      }
+      
+      .p-datepicker-day {
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+        
+        &.p-datepicker-day-selected {
+          background-color: var(--primary-color);
+        }
+        
+        &:not(.p-datepicker-day-selected):not(.p-disabled):hover {
+          background-color: var(--grey);
+        }
+      }
+      
+      .p-disabled {
+        color: var(--text-color-disabled);
+      }
+    }
+  }
+
+  .p-datepicker-month-view {
+    margin-top: var(--padding-small);
+
+    .p-datepicker-month {
+      padding: var(--padding-small); 
+      border-radius: var(--border-radius);
+      transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+
+      &.p-datepicker-month-selected {
+        background-color: var(--primary-color);
+      }
+
+      &:not(.p-datepicker-month-selected):not(.p-disabled):hover {
+        background-color: var(--grey);
+      }
+    }
+      
+    .p-disabled {
+      color: var(--text-color-disabled);
+    }
+  }
+
+  .p-datepicker-year-view {
+    margin-top: var(--padding-small);
+
+    .p-datepicker-year {
+      padding: var(--padding-small); 
+      border-radius: var(--border-radius);
+      transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+
+      &.p-datepicker-year-selected {
+        background-color: var(--primary-color);
+      }
+
+      &:not(.p-datepicker-year-selected):not(.p-disabled):hover {
+        background-color: var(--grey);
+      }
+    }
+      
+    .p-disabled {
+      color: var(--text-color-disabled);
+    }
+  }
+}
+
 
 /**
  * TODO: remove the .p-overflow-hidden and .p-overlay-mask class when PrimeVue is updated.

frontend/components/bc/BcDatepicker.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const {
+  dateFormat = 'dd/mm/yy',
+  label,
+} = defineProps<{
+  dateFormat?: string,
+  id: string,
+  label: string,
+  maxDate: Date,
+  minDate: Date,
+}>()
+
+const modelValue = defineModel<Date>({
+
+  required: true,
+})
+</script>
+
+<template>
+  <label
+    :id
+    class="datepicker__label"
+  >
+    <span>{{ label }}</span>
+    <Datepicker
+      :id
+      v-model="modelValue"
+      :date-format
+      :min-date
+      :max-date
+    />
+  </label>
+</template>
+
+<style lang="scss" scoped>
+.datepicker__label {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.8rem;
+  color: var(--text-color-discreet);
+}
+</style>

frontend/components/dashboard/chart/DashboardChartRewards.vue

@@ -16,27 +16,26 @@ import {
   TransformComponent,
 } from 'echarts/components'
 import VChart from 'vue-echarts'
-
 import type {
   BarSeriesOption,
   EChartsOption,
   EChartsType,
 } from 'echarts'
+import type { RewardsChartFilter } from '../chart/DashboardChartRewardsFilter.vue'
+
 import {
   getChartTextColor,
   getChartTooltipBackgroundColor,
   getRewardChartColors,
   getRewardsChartLineColor,
 } from '~/utils/colors'
 import type { GetValidatorDashboardRewardsChartResponse } from '~/types/api/validator_dashboard'
-import type {
-  ChartData, ChartSeries,
-} from '~/types/api/common'
+import type { ChartSeries } from '~/types/api/common'
 import { DashboardChartRewardsTooltip } from '#components'
 
-const {
-  getTimestampFromEpoch,
-} = useNetworkStore()
+const { filter } = defineProps<{
+  filter: RewardsChartFilter,
+}>()
 
 use([
   GridComponent,
@@ -55,26 +54,33 @@ const {
   dashboardKey,
 } = useDashboardKey()
 
-const data = ref<ChartData<number, string> | undefined>()
-
-const { status } = useAsyncData(
+const {
+  data,
+  status,
+} = useAsyncData(
   'validator_dashboard_rewards_chart',
   async () => {
     if (dashboardKey.value === undefined) {
-      data.value = undefined
       return
     }
-    const res = await fetch<GetValidatorDashboardRewardsChartResponse>(
+    return await fetch<GetValidatorDashboardRewardsChartResponse>(
       'DASHBOARD_VALIDATOR_REWARDS_CHART',
-      undefined,
+      {
+        query: {
+          ...filter,
+          group_ids: filter.group_ids.join(','),
+        },
+      },
       { dashboardKey: dashboardKey.value },
     )
-    data.value = res.data
   },
   {
     immediate: true,
     server: false,
-    watch: [ dashboardKey ],
+    watch: [
+      dashboardKey,
+      filter,
+    ],
   },
 )
 
@@ -106,7 +112,7 @@ const {
   selectedCurrencyMain,
 } = useCurrency()
 
-const categoryCount = computed(() => data.value?.categories?.length ?? 0)
+const categoryCount = computed(() => data.value?.data.categories?.length ?? 0)
 
 const isGwei = ref(false)
 
@@ -153,7 +159,7 @@ const autoFormatAmount = (values: string[], {
   return result
 }
 
-const clSeries = computed(() => data.value?.series?.filter(series => series.property === 'cl') ?? [])
+const clSeries = computed(() => data.value?.data.series?.filter(series => series.property === 'cl') ?? [])
 const clSeriesGroupTotal = computed(() => {
   let total = Array(categoryCount.value).fill('0')
   clSeries.value.forEach((group) => {
@@ -170,7 +176,7 @@ const clSeriesGroupTotal = computed(() => {
 })
 const clSeriesGroupTotalFormatted = computed(() => autoFormatAmount(clSeriesGroupTotal.value))
 
-const elSeries = computed(() => data.value?.series?.filter(series => series.property === 'el') ?? [])
+const elSeries = computed(() => data.value?.data.series?.filter(series => series.property === 'el') ?? [])
 const elSeriesGroupTotal = computed(() => {
   let total = Array(categoryCount.value).fill('0')
   elSeries.value.forEach((group) => {
@@ -230,7 +236,7 @@ type DataZoomEvent = {
   start: number,
   type: 'datazoom',
 }
-const dataZoomStart = ref(60)
+const dataZoomStart = ref(0)
 const dataZoomEnd = ref(100)
 // position of tooltip get's lost due to rerendering of `options` (> computed > currency recalculations > latest-state)
 const onDatazoom = ({
@@ -318,8 +324,7 @@ const option = computed<EChartsOption>(() => {
       },
       end: dataZoomEnd.value,
       labelFormatter: (_value: number, valueStr: string) => {
-        const unixTimestamp = getTimestampFromEpoch(Number(valueStr))
-        return getDateTime(unixTimestamp, { hasTime: false })
+        return getDateTime(Number(valueStr), { hasTime: false })
       },
       start: dataZoomStart.value,
       type: 'slider',
@@ -360,10 +365,9 @@ const option = computed<EChartsOption>(() => {
         const paramsConsensusLayer = params.find(param => param.seriesId === seriesId.cl)
         const paramsExecutionLayer = params.find(param => param.seriesId === seriesId.el)
         const currentIndex = params[0].dataIndex
-        const currentTimestamp = getTimestampFromEpoch(Number(params[0].name))
         const currentEpoch = {
           index: params[0].name,
-          timestamp: currentTimestamp,
+          timestamp: Number(params[0].name),
         }
         const currentGroupTotalCl = clSeriesGroupTotal.value[currentIndex]
         const currentGroupTotalEl = elSeriesGroupTotal.value[currentIndex]
@@ -418,14 +422,13 @@ const option = computed<EChartsOption>(() => {
       axisLabel: {
         fontSize: textSize,
         fontWeight: fontWeightMedium,
-        formatter: (epoch: number) => {
-          const unixTimestamp = getTimestampFromEpoch(epoch)
-          const date = getDateTime(unixTimestamp, { hasTime: false })
-          return `${date}\n${$t('common.epoch')} ${epoch}`
+        formatter: (timestamp: number) => {
+          const date = getDateTime(timestamp, { hasTime: false })
+          return date
         },
         lineHeight: 20,
       },
-      data: data.value?.categories,
+      data: data.value?.data.categories,
       type: 'category',
     },
     yAxis: {
@@ -446,6 +449,8 @@ const option = computed<EChartsOption>(() => {
     },
   }
 })
+
+onUpdated(() => hideTooltip())
 </script>
 
 <template>
@@ -473,14 +478,14 @@ const option = computed<EChartsOption>(() => {
       class="no-data"
       alignment="center"
     >
-      {{ $t("dashboard.validator.summary.chart.error") }}
+      {{ $t("dashboard.validator.rewards.chart.error") }}
     </div>
     <div
       v-if="status === 'success' && !clSeries.length"
       class="no-data"
       alignment="center"
     >
-      {{ $t("dashboard.validator.summary.chart.no_data") }}
+      {{ $t("dashboard.validator.rewards.chart.no_data") }}
     </div>
   </div>
 </template>