fix: defaul chart options (#1027)

(cherry picked from commit 7d48260)
aeternity · Jan 13, 2025 · 81ad27b · 81ad27b
1 parent d8c46ad
commit 81ad27b
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 76 deletions.
diff --git a/src/components/AccountsChartPanel.vue b/src/components/AccountsChartPanel.vue
@@ -8,16 +8,16 @@
     </template>
     <template #end>
       <chart-controls
-        v-model="selectedRange"
+        v-model="range"
         class="u-hidden-mobile"/>
     </template>
 
     <line-chart
       :data="accountsStatistics"
-      :interval="selectedRange.interval"/>
+      :interval="range.interval"/>
 
     <chart-controls
-      v-model="selectedRange"
+      v-model="range"
       class="accounts-chart-panel__controls u-hidden-desktop"/>
   </app-panel>
 </template>
@@ -26,29 +26,37 @@
 import { storeToRefs } from 'pinia'
 import { chartsHints } from '@/utils/hints/chartsHints'
 import { useChartsStore } from '@/stores/charts'
+import { CHART_INTERVALS_PRESETS_OPTIONS } from '~/utils/constants'
 
 const chartsStore = useChartsStore()
 const { accountsStatistics } = storeToRefs(chartsStore)
 const { fetchAccountsStatistics } = chartsStore
 
-const selectedRange = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
+const props = defineProps({
+  preselectedRange: {
+    type: Object,
+    default: CHART_INTERVALS_PRESETS_OPTIONS[4],
+  },
+})
+
+const range = ref(props.preselectedRange)
 
 await useAsyncData(async() => {
   await loadHashrateStatistics()
   return true
 })
 
 if (process.client) {
-  watch([selectedRange], async() => {
+  watch([range], async() => {
     await loadHashrateStatistics()
   })
 }
 
 async function loadHashrateStatistics() {
   await fetchAccountsStatistics(
-    selectedRange.value.interval,
-    selectedRange.value.limit,
-    selectedRange.value.customInterval)
+    range.value.interval,
+    range.value.limit,
+    range.value.customInterval)
 }
 </script>
 

diff --git a/src/components/ContractsChartPanel.vue b/src/components/ContractsChartPanel.vue
@@ -5,16 +5,16 @@
     </template>
     <template #end>
       <chart-controls
-        v-model="selectedRange"
+        v-model="range"
         class="u-hidden-mobile"/>
     </template>
 
     <line-chart
       :data="contractsStatistics"
-      :interval="selectedRange.interval"/>
+      :interval="range.interval"/>
 
     <chart-controls
-      v-model="selectedRange"
+      v-model="range"
       class="contracts-chart-panel__controls u-hidden-desktop"/>
   </app-panel>
 </template>
@@ -23,29 +23,37 @@
 import { storeToRefs } from 'pinia'
 import { useChartsStore } from '@/stores/charts'
 import LineChart from '@/components/LineChart'
+import { CHART_INTERVALS_PRESETS_OPTIONS } from '~/utils/constants'
 
 const chartsStore = useChartsStore()
 const { contractsStatistics } = storeToRefs(chartsStore)
 const { fetchContractsStatistics } = chartsStore
 
-const selectedRange = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
+const props = defineProps({
+  preselectedRange: {
+    type: Object,
+    default: CHART_INTERVALS_PRESETS_OPTIONS[4],
+  },
+})
+
+const range = ref(props.preselectedRange)
 
 await useAsyncData(async() => {
   await loadContractsStatistics()
   return true
 })
 
 if (process.client) {
-  watch(selectedRange, async() => {
+  watch(range, async() => {
     await loadContractsStatistics()
   })
 }
 
 async function loadContractsStatistics() {
   await fetchContractsStatistics(
-    selectedRange.value.interval,
-    selectedRange.value.limit,
-    selectedRange.value.customInterval)
+    range.value.interval,
+    range.value.limit,
+    range.value.customInterval)
 }
 
 </script>

diff --git a/src/components/DifficultyChartPanel.vue b/src/components/DifficultyChartPanel.vue
@@ -5,16 +5,16 @@
     </template>
     <template #end>
       <chart-controls
-        v-model="selectedRange"
+        v-model="range"
         class="u-hidden-mobile"/>
     </template>
 
     <line-chart
       :data="difficultyStatistics"
-      :interval="selectedRange.interval"/>
+      :interval="range.interval"/>
 
     <chart-controls
-      v-model="selectedRange"
+      v-model="range"
       class="difficulty-chart-panel__controls u-hidden-desktop"/>
   </app-panel>
 </template>
@@ -28,31 +28,24 @@ const chartsStore = useChartsStore()
 const { difficultyStatistics } = storeToRefs(chartsStore)
 const { fetchDifficultyStatistics } = chartsStore
 
-const props = defineProps({
-  range: {
-    required: true,
-    type: Object,
-  },
-})
-
-const selectedRange = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
+const range = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
 
 await useAsyncData(async() => {
   await loadDifficultytatistics()
   return true
 })
 
 if (process.client) {
-  watch([selectedRange], async() => {
+  watch([range], async() => {
     await loadDifficultytatistics()
   })
 }
 
 async function loadDifficultytatistics() {
   await fetchDifficultyStatistics(
-    selectedRange.value.interval,
-    selectedRange.value.limit,
-    selectedRange.value.customInterval)
+    range.value.interval,
+    range.value.limit,
+    range.value.customInterval)
 }
 </script>
 

diff --git a/src/components/HashrateChartPanel.vue b/src/components/HashrateChartPanel.vue
@@ -5,16 +5,16 @@
     </template>
     <template #end>
       <chart-controls
-        v-model="selectedRange"
+        v-model="range"
         class="u-hidden-mobile"/>
     </template>
 
     <line-chart
       :data="hashrateStatistics"
-      :interval="selectedRange.interval"/>
+      :interval="range.interval"/>
 
     <chart-controls
-      v-model="selectedRange"
+      v-model="range"
       class="hashrate-chart-panel__controls u-hidden-desktop"/>
   </app-panel>
 </template>
@@ -27,24 +27,24 @@ const chartsStore = useChartsStore()
 const { hashrateStatistics } = storeToRefs(chartsStore)
 const { fetchHashrateStatistics } = chartsStore
 
-const selectedRange = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
+const range = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
 
 await useAsyncData(async() => {
   await loadHashratetatistics()
   return true
 })
 
 if (process.client) {
-  watch([selectedRange], async() => {
+  watch([range], async() => {
     await loadHashratetatistics()
   })
 }
 
 async function loadHashratetatistics() {
   await fetchHashrateStatistics(
-    selectedRange.value.interval,
-    selectedRange.value.limit,
-    selectedRange.value.customInterval)
+    range.value.interval,
+    range.value.limit,
+    range.value.customInterval)
 }
 </script>
 

diff --git a/src/components/KeyblocksChartPanel.vue b/src/components/KeyblocksChartPanel.vue
@@ -5,16 +5,16 @@
     </template>
     <template #end>
       <chart-controls
-        v-model="selectedRange"
+        v-model="range"
         class="u-hidden-mobile"/>
     </template>
 
     <line-chart
       :data="keyblocksStatistics"
-      :interval="selectedRange.interval"/>
+      :interval="range.interval"/>
 
     <chart-controls
-      v-model="selectedRange"
+      v-model="range"
       class="keyblocks-chart-panel__controls u-hidden-desktop"/>
   </app-panel>
 </template>
@@ -28,24 +28,24 @@ const chartsStore = useChartsStore()
 const { keyblocksStatistics } = storeToRefs(chartsStore)
 const { fetchKeyblocksStatistics } = chartsStore
 
-const selectedRange = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
+const range = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
 
 await useAsyncData(async() => {
   await loadKeyblockStatistics()
   return true
 })
 
 if (process.client) {
-  watch(selectedRange, async() => {
+  watch(range, async() => {
     await loadKeyblockStatistics()
   })
 }
 
 async function loadKeyblockStatistics() {
   await fetchKeyblocksStatistics(
-    selectedRange.value.interval,
-    selectedRange.value.limit,
-    selectedRange.value.customInterval)
+    range.value.interval,
+    range.value.limit,
+    range.value.customInterval)
 }
 </script>
 

diff --git a/src/components/NamesChartPanel.vue b/src/components/NamesChartPanel.vue
@@ -5,16 +5,16 @@
     </template>
     <template #end>
       <chart-controls
-        v-model="selectedRange"
+        v-model="range"
         class="u-hidden-mobile"/>
     </template>
 
     <line-chart
       :data="namesStatistics"
-      :interval="selectedRange.interval"/>
+      :interval="range.interval"/>
 
     <chart-controls
-      v-model="selectedRange"
+      v-model="range"
       class="names-chart-panel__chart__controls u-hidden-desktop"/>
   </app-panel>
 </template>
@@ -28,24 +28,35 @@ const chartsStore = useChartsStore()
 const { namesStatistics } = storeToRefs(chartsStore)
 const { fetchNamesStatistics } = chartsStore
 
-const selectedRange = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
+const props = defineProps({
+  hasSelect: {
+    required: true,
+    type: Boolean,
+  },
+  preselectedRange: {
+    type: Object,
+    default: CHART_INTERVALS_PRESETS_OPTIONS[4],
+  },
+})
+
+const range = ref(props.preselectedRange)
 
 await useAsyncData(async() => {
   await loadNamesStatistics()
   return true
 })
 
 if (process.client) {
-  watch(selectedRange, async() => {
+  watch(range, async() => {
     await loadNamesStatistics()
   })
 }
 
 async function loadNamesStatistics() {
   await fetchNamesStatistics(
-    selectedRange.value.interval,
-    selectedRange.value.limit,
-    selectedRange.value.customInterval)
+    range.value.interval,
+    range.value.limit,
+    range.value.customInterval)
 }
 </script>