fix bugs

components.d.ts

@@ -104,7 +104,7 @@ declare module 'vue' {
     MenubarSubContent: typeof import('./src/components/ui/menubar/MenubarSubContent.vue')['default']
     MenubarSubTrigger: typeof import('./src/components/ui/menubar/MenubarSubTrigger.vue')['default']
     MenubarTrigger: typeof import('./src/components/ui/menubar/MenubarTrigger.vue')['default']
-    Month_power_wave_plot: typeof import('./src/components/dense/saber/month_power_wave_plot.vue')['default']
+    Month_year_power_wave_plot: typeof import('./src/components/dense/saber/month_year_power_wave_plot.vue')['default']
     NavigationMenu: typeof import('./src/components/ui/navigation-menu/NavigationMenu.vue')['default']
     NavigationMenuContent: typeof import('./src/components/ui/navigation-menu/NavigationMenuContent.vue')['default']
     NavigationMenuIndicator: typeof import('./src/components/ui/navigation-menu/NavigationMenuIndicator.vue')['default']

src/components/DenseFramework.vue

@@ -85,7 +85,7 @@ function download() {
         </ParamsCard>
       </ResizablePanel>
       <ResizableHandle id="demo-handle-1" />
-      <ResizablePanel id="demo-panel-2" :default-size="500">
+      <ResizablePanel id="demo-panel-2" :default-size="350">
         <ImageContainer v-slot="metadata" :image-result="imageResult">
           <slot name="extra-meta" :metadata="metadata.metadata" />
         </ImageContainer>

src/components/dense/RadarSingle.vue

@@ -43,12 +43,12 @@ const queryUrl = computed(() => {
   query.set('model_name', mode)
   query.set('wind_type', windType)
   query.set('H', (selectedH.value * 1000).toString())
-  query.set('mode', selectedDateType.value)
+  query.set('mode', props.isDay ? 'day' : selectedDateType.value)
   if (props.isDay) {
     const queryDay = `${selectedDate.value.slice(0, 4)}-${selectedDate.value.slice(4, 6)}-${selectedDate.value.slice(6, 8)}`
     query.set('day', queryDay)
   }
-  if (selectedDateType.value === 'month') {
+  if (!props.isDay && selectedDateType.value === 'month') {
     query.set('month', selectedMonth.value)
   }
   // const query = `?station=${station}&year=${year}&model_name=${mode}&wind_type=${windType}&H=${selectedH.value}`
@@ -85,11 +85,16 @@ onMounted(async () => {
   })
 
   paths.value = data
+  if (props.isDay) {
+    selectedDate.value = Array.from(dates.value).filter(
+      d => d.startsWith(`${selectedYear.value}${selectedMonth.value.padStart(2, '0')}`),
+    )[0]
+  }
 })
 
-watch(selectedYear, (newV) => {
+watch([selectedYear, selectedMonth], () => {
   selectedDate.value = Array.from(dates.value).filter(
-    d => d.startsWith(newV),
+    d => d.startsWith(`${selectedYear.value}${selectedMonth.value.padStart(2, '0')}`),
   )[0]
 })
 </script>
@@ -179,26 +184,7 @@ watch(selectedYear, (newV) => {
             </SelectGroup>
           </SelectContent>
         </Select>
-        <div v-if="selectedDateType === 'day'">
-          <Label>日期</Label>
-          <Select v-model="selectedDate">
-            <SelectTrigger>
-              <SelectValue placeholder="Select a fruit" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectLabel>天</SelectLabel>
-                <SelectItem
-                  v-for="date in Array.from(dates).filter(
-                    (d) => d.startsWith(selectedYear),
-                  )" :key="date" :value="date"
-                >
-                  {{ date }}
-                </SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </div>
+
         <div v-if="selectedDateType === 'month'">
           <Label>月份</Label>
           <Select v-model="selectedMonth">
@@ -219,6 +205,26 @@ watch(selectedYear, (newV) => {
             </SelectContent>
           </Select>
         </div>
+        <div v-if="props.isDay ">
+          <Label>日期</Label>
+          <Select v-model="selectedDate">
+            <SelectTrigger>
+              <SelectValue placeholder="Select a fruit" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectLabel>天</SelectLabel>
+                <SelectItem
+                  v-for="date in Array.from(dates).filter(
+                    (d) => d.startsWith(`${selectedYear}${selectedMonth.padStart(2, '0')}`),
+                  )" :key="date" :value="date"
+                >
+                  {{ date }}
+                </SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
       </div>
     </div>
   </Denseframework>

src/components/dense/saber/day_cycle_power_wave_plot.vue

@@ -22,10 +22,28 @@ const lat_ranges = [
   '50,60',
 ]
 
+const lon_ranges = [
+  '0 ~ 24',
+  '24 ~ 48',
+  '48 ~ 72',
+  '72 ~ 96',
+  '96 ~ 120',
+  '120 ~ 144',
+  '144 ~ 168',
+  '168 ~ 192',
+  '192 ~ 216',
+  '216 ~ 240',
+  '240 ~ 264',
+  '264 ~ 288',
+  '288 ~ 312',
+  '312 ~ 336',
+  '336 ~ 360',
+]
+
 const selected = reactive({
   path: '',
   day: '',
-  cycle_no: 1,
+  cycle_no: '1',
   lat_range: '0,10',
 })
 
@@ -105,14 +123,31 @@ watch(() => selected.path, async () => {
             </SelectGroup>
           </SelectContent>
         </Select>
-        <Label for="age">Cycle No.</Label>
-        <NumberField id="age" v-model:model-value="selected.cycle_no" :default-value="1" :min="0">
+        <Label for="age">纬度范围</Label>
+        <Select v-model="selected.cycle_no">
+          <SelectTrigger>
+            <SelectValue placeholder="选择纬度范围" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>纬度范围</SelectLabel>
+              <SelectItem v-for="i in 15" :key="i" :value="i.toString()">
+                {{ lon_ranges[i - 1] }}
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <!-- <NumberField
+          id="age"
+          v-model:model-value="selected.cycle_no"
+          :default-value="1" :min="0"
+        >
           <NumberFieldContent>
             <NumberFieldDecrement />
             <NumberFieldInput />
             <NumberFieldIncrement />
           </NumberFieldContent>
-        </NumberField>
+        </NumberField> -->
       </div>
     </div>
   </DenseFramework>

src/components/dense/saber/day_fft_ifft_plot.vue

@@ -16,7 +16,7 @@ import { currentSaberDays, parseDayOfYear, refreshCurrentSaberDays, refreshPath,
 const selected = reactive({
   path: './saber/data/2012/SABER_Temp_O3_April2012_v2.0.nc',
   day: '',
-  cycle_no: 1,
+  cycle_no: '1',
   lat_range: '0,10',
 })
 
@@ -29,6 +29,24 @@ const lat_ranges = [
   '50,60',
 ]
 
+const lon_ranges = [
+  '0 ~ 24',
+  '24 ~ 48',
+  '48 ~ 72',
+  '72 ~ 96',
+  '96 ~ 120',
+  '120 ~ 144',
+  '144 ~ 168',
+  '168 ~ 192',
+  '192 ~ 216',
+  '216 ~ 240',
+  '240 ~ 264',
+  '264 ~ 288',
+  '288 ~ 312',
+  '312 ~ 336',
+  '336 ~ 360',
+]
+
 const urll = computed(() => {
   // const path = encodeURIComponent(selected.path)
   // const day = encodeURIComponent(selected.day)
@@ -105,14 +123,20 @@ watch(() => selected.path, async () => {
             </SelectGroup>
           </SelectContent>
         </Select>
-        <Label for="age">Cycle No.</Label>
-        <NumberField id="age" v-model:model-value="selected.cycle_no" :default-value="1" :min="0">
-          <NumberFieldContent>
-            <NumberFieldDecrement />
-            <NumberFieldInput />
-            <NumberFieldIncrement />
-          </NumberFieldContent>
-        </NumberField>
+        <Label for="age">纬度范围</Label>
+        <Select v-model="selected.cycle_no">
+          <SelectTrigger>
+            <SelectValue placeholder="选择纬度范围" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>纬度范围</SelectLabel>
+              <SelectItem v-for="i in 15" :key="i" :value="i.toString()">
+                {{ lon_ranges[i - 1] }}
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
       </div>
     </div>
   </DenseFramework>

src/components/dense/saber/month_power_wave_plot.vue

@@ -1,82 +0,0 @@
-<route lang="json">
-{
-  "meta": {
-    "title": "Saber月周期功率波图",
-    "description": "Saber月周期功率波图",
-    "group": "Saber",
-    "item_name": "月周期功率波图"
-  }
-}
-</route>
-
-<script setup lang="ts">
-import { API_BASE_URL } from '~/CONSTANT'
-import { refreshPath, renderPath, saberPaths } from './utils'
-
-const lat_ranges = [
-  '0,10',
-  '10,20',
-  '20,30',
-  '30,40',
-  '40,50',
-  '50,60',
-]
-
-const selected = reactive({
-  path: '',
-  lat_range: '0,10',
-})
-
-const urll = computed(() => {
-  const query = new URLSearchParams()
-  query.set('path', selected.path)
-  query.set('lat_range', selected.lat_range)
-  return `${API_BASE_URL}/saber/render/gravity_wave/per_month/power_wave_plot?${query}`
-})
-
-onMounted(async () => {
-  await refreshPath()
-  selected.path = saberPaths.value[0]
-})
-</script>
-
-<template>
-  <DenseFramework :image-query="urll">
-    <div>
-      <div flex="~ col items-stretch gap-3" py-3>
-        <Label>纬度带</Label>
-        <Select v-model="selected.lat_range">
-          <SelectTrigger>
-            <SelectValue placeholder="选择纬度带" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              <SelectLabel>纬度带</SelectLabel>
-              <SelectItem v-for="lat_range in lat_ranges" :key="lat_range" :value="lat_range">
-                {{ lat_range.replace(",", " ~ ") }}
-              </SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-        <Label for="day">年月</Label>
-        <Select v-model="selected.path">
-          <SelectTrigger>
-            <SelectValue placeholder="选择日期" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              <SelectLabel>月份</SelectLabel>
-              <SelectItem v-for="path in saberPaths.sort((a, b) => renderPath(a).localeCompare(renderPath(b)))" :key="path" :value="path">
-                {{ renderPath(path) }}
-              </SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-      </div>
-    </div>
-  </DenseFramework>
-</template>
-
-<style scoped>
-
-</style>

src/components/dense/saber/month_year_power_wave_plot.vue

@@ -0,0 +1,145 @@
+<route lang="json">
+{
+  "meta": {
+    "title": "Saber月周期功率波图",
+    "description": "Saber月周期功率波图",
+    "group": "Saber",
+    "item_name": "月周期功率波图"
+  }
+}
+</route>
+
+<script setup lang="ts">
+import { API_BASE_URL } from '~/CONSTANT'
+import { refreshPath, renderPath, saberPaths } from './utils'
+
+const currentMode = ref('月统计图')
+const allYears = ref([] as string[])
+const lat_ranges = [
+  '-60,-50',
+  '-50,-40',
+  '-40,-30',
+  '-30,-20',
+  '-20,-10',
+  '-10,0',
+  '0,10',
+  '10,20',
+  '20,30',
+  '30,40',
+  '40,50',
+  '50,60',
+]
+
+const selected = reactive({
+  path: '',
+  lat_range: '0,10',
+  year: '',
+})
+
+const urll = computed(() => {
+  if (currentMode.value === '月统计图') {
+    const query = new URLSearchParams()
+    query.set('path', selected.path)
+    query.set('lat_range', selected.lat_range)
+    return `${API_BASE_URL}/saber/render/gravity_wave/per_month/power_wave_plot?${query}`
+  }
+  else {
+    const query = new URLSearchParams()
+    query.set('year', selected.year)
+    query.set('lat_range', selected.lat_range)
+    return `${API_BASE_URL}/saber/render/gravity_wave/per_year/power_wave_plot?${query}`
+  }
+})
+
+onMounted(async () => {
+  await refreshPath()
+  selected.path = saberPaths.value[0]
+  // traverse all paths to get all years,
+  // in each item, str is like ../data/saber/2017/SABER_Temp_O3_June2017_v2.0.nc
+  const years = Array.from(new Set(saberPaths.value.map((str: string) => str.match(/(\d{4})/)?.[1])))
+  allYears.value = years.filter(year => year !== null).map(year => year!)
+  selected.year = allYears.value[0]
+})
+</script>
+
+<template>
+  <DenseFramework :image-query="urll">
+    <div>
+      <Label>模式</Label>
+      <Tabs v-model="currentMode">
+        <TabsList class="grid grid-cols-2 w-full">
+          <TabsTrigger value="月统计图">
+            月统计图
+          </TabsTrigger>
+          <TabsTrigger value="年统计图">
+            年统计图
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+      <div v-if="currentMode === '月统计图'" flex="~ col items-stretch gap-3" py-3>
+        <Label for="day">年月</Label>
+        <Select v-model="selected.path">
+          <SelectTrigger>
+            <SelectValue placeholder="选择日期" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>月份</SelectLabel>
+              <SelectItem v-for="path in saberPaths.sort((a, b) => renderPath(a).localeCompare(renderPath(b)))" :key="path" :value="path">
+                {{ renderPath(path) }}
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <Label>纬度带</Label>
+        <Select v-model="selected.lat_range">
+          <SelectTrigger>
+            <SelectValue placeholder="选择纬度带" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>纬度带</SelectLabel>
+              <SelectItem v-for="lat_range in lat_ranges" :key="lat_range" :value="lat_range">
+                {{ lat_range.replace(",", " ~ ") }}
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
+      <div v-else class="flex flex-col gap-3 py-2">
+        <Label>年份</Label>
+        <Select v-model="selected.year">
+          <SelectTrigger>
+            <SelectValue placeholder="选择年份" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>年份</SelectLabel>
+              <SelectItem v-for="year in allYears" :key="year" :value="year">
+                {{ year }}
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <Label>纬度带</Label>
+        <Select v-model="selected.lat_range">
+          <SelectTrigger>
+            <SelectValue placeholder="选择纬度带" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>纬度带</SelectLabel>
+              <SelectItem v-for="lat_range in lat_ranges" :key="lat_range" :value="lat_range">
+                {{ lat_range.replace(",", " ~ ") }}
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  </DenseFramework>
+</template>
+
+<style scoped>
+
+</style>

src/pages/balloon/gravity_wave/0-perday.vue

@@ -108,14 +108,7 @@ async function customHandle(resp: Response) {
         <span v-for="(v, k) in metadata" :key="k">{{ k }}: {{ v }}</span>
       </div>
     </template>
-    <Label>选择模式</Label>
-    <Tabs v-model="selected.selectedMode" default-value="观测的二阶多项式拟合">
-      <TabsList class="grid grid-cols-1 w-full">
-        <TabsTrigger v-for="m in modes" :key="m" :value="m">
-          {{ m }}
-        </TabsTrigger>
-      </TabsList>
-    </Tabs>
+
     <Label>选择台站</Label>
     <Select v-model="selected.station">
       <SelectTrigger>
@@ -144,6 +137,14 @@ async function customHandle(resp: Response) {
         </SelectGroup>
       </SelectContent>
     </Select>
+    <Label>选择模式</Label>
+    <Tabs v-model="selected.selectedMode" default-value="观测的二阶多项式拟合">
+      <TabsList class="grid grid-cols-1 w-full">
+        <TabsTrigger v-for="m in modes" :key="m" :value="m">
+          {{ m }}
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
   </DenseFramework>
 </template>
 

src/pages/balloon/gravity_wave/1-year.vue

@@ -10,12 +10,29 @@ meta:
 import { API_BASE_URL } from '~/CONSTANT'
 
 const selectedMode = ref('w/f值统计结果')
+const selectedStation = ref('LIN')
+const allStations = ref([] as string[])
 
 const isIllegal = ref(false)
 
 const startYear = ref(2017)
 const endYear = ref(2024)
 
+onMounted(async () => {
+  await baseFetch<string []>(`${API_BASE_URL}/balloon/metadata`).json().then(({ data }) => {
+    const das = data.value!
+
+    const _allStations = das.map((a: string) => {
+      const stationPattern = /data\/balloon\/(\w+)\//
+      return a.match(stationPattern)?.[1]
+    }) as string[]
+
+    const stations = Array.from(new Set(_allStations))
+    allStations.value = stations
+    selectedStation.value = stations[0]
+  })
+})
+
 const modes = [
 
   'w/f值统计结果',
@@ -70,26 +87,22 @@ watch([selectedMode, startYear, endYear], () => {
   <DenseFramework :image-query="queryUrl">
     <div flex="col gap-5 ~  justify-center">
       <div>
-        <Label>统计参数</Label>
-        <Select v-model="selectedMode">
+        <Label>选择台站</Label>
+        <Select v-model="selectedStation">
           <SelectTrigger>
-            <SelectValue placeholder="Select a fruit" />
+            <SelectValue placeholder="选择台站" />
           </SelectTrigger>
           <SelectContent>
             <SelectGroup>
-              <SelectLabel>模式</SelectLabel>
-              <SelectItem
-                v-for="mode in Array.from(modes).sort(((a, b) => {
-                  return mode_display_mapping[a].length - mode_display_mapping[b].length
-                }))"
-                :key="mode" :value="mode"
-              >
-                {{ mode_display_mapping[mode] }}
+              <SelectLabel>台站</SelectLabel>
+              <SelectItem v-for="s in allStations" :key="s" :value="s">
+                {{ s }}
               </SelectItem>
             </SelectGroup>
           </SelectContent>
         </Select>
       </div>
+
       <NumberField
         id="start"
         v-model:model-value="startYear" :format-options="{
@@ -118,6 +131,27 @@ watch([selectedMode, startYear, endYear], () => {
           <NumberFieldIncrement />
         </NumberFieldContent>
       </NumberField>
+      <div>
+        <Label>统计参数</Label>
+        <Select v-model="selectedMode">
+          <SelectTrigger>
+            <SelectValue placeholder="Select a fruit" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>模式</SelectLabel>
+              <SelectItem
+                v-for="mode in Array.from(modes).sort(((a, b) => {
+                  return mode_display_mapping[a].length - mode_display_mapping[b].length
+                }))"
+                :key="mode" :value="mode"
+              >
+                {{ mode_display_mapping[mode] }}
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
     </div>
   </DenseFramework>
 </template>

src/pages/cosmic/gravity_wave/0-perday.vue

@@ -33,10 +33,26 @@ const df = new DateFormatter('zh-CN', {
   dateStyle: 'long',
 })
 
+const lat_ranges = [
+  '-60 ~ -50',
+  '-50 ~ -40',
+  '-40 ~ -30',
+  '-30 ~ -20',
+  '-20 ~ -10',
+  '-10 ~ 0',
+  '0 ~ 10',
+  '10 ~ 20',
+  '20 ~ 30',
+  '30 ~ 40',
+  '40 ~ 50',
+  '50 ~ 60',
+]
+
 const selected = reactive({
   year: '2008',
   day: '1',
   mode: 'mean_ktemp_Nz',
+  lat_range: '0 ~ 10',
 })
 
 const value = ref<DateValue>(
@@ -52,13 +68,14 @@ const queryUrl = computed(() => {
   const day_No = getDayOfYear(theDate)
   query.set('day', day_No.toString())
   query.set('mode', selected.mode)
+  query.set('lat_range', selected.lat_range)
   return `/cosmic/render/gravity_wave/perday?${query}`
 })
 </script>
 
 <template>
   <DenseFramework :image-query="queryUrl">
-    <Label>模式</Label>
+    <Label>统计参数</Label>
     <Tabs v-model:model-value="selected.mode">
       <TabsList class="grid grid-cols-1 w-full">
         <TabsTrigger value="mean_ktemp_Nz">
@@ -102,6 +119,20 @@ const queryUrl = computed(() => {
         <Calendar v-model="value " initial-focus />
       </PopoverContent>
     </Popover>
+    <Label>纬度带</Label>
+    <Select v-model="selected.lat_range">
+      <SelectTrigger>
+        <SelectValue placeholder="选择纬度带" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>纬度带</SelectLabel>
+          <SelectItem v-for="lat_range in lat_ranges" :key="lat_range" :value="lat_range">
+            {{ lat_range }}
+          </SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
   </DenseFramework>
 </template>
 

src/pages/cosmic/gravity_wave/1-multiday.vue

@@ -22,18 +22,35 @@ const MODES = [
   '不同高度下的逐日统计分析',
   '每月浮力频率变化趋势',
   '每月平均重力势能的折线图',
-  '布伦特-维萨拉频率分布',
+  '浮力频率均值',
+  '每月平均N^2的折线图',
+]
+const lat_ranges = [
+  '-60 ~ -50',
+  '-50 ~ -40',
+  '-40 ~ -30',
+  '-30 ~ -20',
+  '-20 ~ -10',
+  '-10 ~ 0',
+  '0 ~ 10',
+  '10 ~ 20',
+  '20 ~ 30',
+  '30 ~ 40',
+  '40 ~ 50',
+  '50 ~ 60',
 ]
 
 const selected = reactive({
   year: '2008',
   // begin_day
   mode: '不同高度下的逐日统计分析',
+  lat_range: '0 ~ 10',
 })
 const queryUrl = computed(() => {
   const q = new URLSearchParams()
   q.set('year', selected.year)
   q.set('mode', selected.mode)
+  q.set('lat_range', selected.lat_range)
   return `${API_BASE_URL}/cosmic/render/gravity_wave/multiday?${q}`
 })
 </script>
@@ -54,7 +71,7 @@ const queryUrl = computed(() => {
         </SelectGroup>
       </SelectContent>
     </Select>
-    <Label>模式</Label>
+    <Label>统计参数</Label>
     <Tabs v-model="selected.mode">
       <TabsList class="grid grid-cols-1 w-full">
         <TabsTrigger v-for="mode in MODES" :key="mode" :value="mode">
@@ -62,6 +79,20 @@ const queryUrl = computed(() => {
         </TabsTrigger>
       </TabsList>
     </Tabs>
+    <Label>纬度带</Label>
+    <Select v-model="selected.lat_range">
+      <SelectTrigger>
+        <SelectValue placeholder="选择纬度带" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>纬度带</SelectLabel>
+          <SelectItem v-for="lat_range in lat_ranges" :key="lat_range" :value="lat_range">
+            {{ lat_range }}
+          </SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
   </DenseFramework>
 </template>
 

src/pages/saber/gravity_wave/1-monthly.vue

@@ -7,5 +7,5 @@
   </route>
 
 <template>
-  <Month_power_wave_plot />
+  <Month_year_power_wave_plot />
 </template>

src/pages/saber/planet_wave/1-monthly.vue

@@ -21,8 +21,9 @@ const selected = reactive({
 })
 
 const ranges = [
-  '-20',
+  '-30',
   '30',
+  '-60',
   '60',
 ]
 
@@ -30,6 +31,7 @@ const queryUrl = computed(() => {
   const q = new URLSearchParams()
   q.set('year', selected.year)
   q.set('T', selected.T.toString())
+  q.set('k', selected.k.toString())
   return `${API_BASE_URL}/saber/render/planet_wave/per_year/energy_plot?${q}`
 })
 </script>
@@ -74,7 +76,7 @@ const queryUrl = computed(() => {
       }" :default-value="94"
       :step="20"
       :max="110"
-      :min="70"
+      :min="30"
     >
       <NumberFieldContent>
         <NumberFieldDecrement />