Skip to content

Small changes to reflect differences in API output and remove old references to min flow from max flow date polarscatter charts #181

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cstephen wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Small changes to reflect differences in API output and remove old references to min flow from max flow date polarscatter charts #181

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e6e4ec1
Remove unused min flow references from MinMaxFlowDates.vue and corres…
cstephen Apr 21, 2026
48239d6
Update StatsTable.vue to use new JSON structure / medians.
cstephen Apr 21, 2026
f10c3f1
Show min from rcp45 and max from rcp85 in stats tables.
cstephen Apr 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions webapp/components/Report.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ let {
streamStats,
streamHydrograph,
streamMonthlyFlow,
streamMinMaxFlowDates,
streamMaxFlowDates,
hucId,
segmentId,
segmentName,
Expand Down Expand Up @@ -122,9 +122,7 @@ onUnmounted(() => {
maximum flow rates.
</p>
</div>
<VizMinMaxFlowDates
:stream-min-max-flow-dates="streamMinMaxFlowDates"
/>
<VizMaxFlowDates :stream-max-flow-dates="streamMaxFlowDates" />
</div>
</section>

Expand Down
25 changes: 16 additions & 9 deletions webapp/components/StatsTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,9 @@ const tableCaptionHtml = computed(() => {
{{
fnc(
roundSigFig(
Number(streamStats['projected'][appEra].mid[stat.id])
Number(
streamStats['projected'][appEra]['rcp60'][stat.id].median
)
)
)
}}
Expand All @@ -70,7 +72,9 @@ const tableCaptionHtml = computed(() => {
"
:future="
roundSigFig(
Number(streamStats['projected'][appEra].mid[stat.id])
Number(
streamStats['projected'][appEra]['rcp60'][stat.id].median
)
)
"
/>
Expand All @@ -88,9 +92,8 @@ const tableCaptionHtml = computed(() => {
<th scope="col" width="15%">
Modeled Historical<br />(1976&ndash;2005)
</th>

<th scope="col">Minimum, {{ scenarioFullNames['rcp45'] }}</th>
<th scope="col">Maximum, {{ scenarioFullNames['rcp85'] }}</th>
<th scope="col">Median, {{ scenarioFullNames['rcp45'] }}</th>
<th scope="col">Median, {{ scenarioFullNames['rcp85'] }}</th>
Comment thread
cstephen marked this conversation as resolved.
</tr>
</thead>
<tbody>
Expand All @@ -114,7 +117,9 @@ const tableCaptionHtml = computed(() => {
{{
fnc(
roundSigFig(
Number(streamStats['projected'][appEra].min[stat.id])
Number(
streamStats['projected'][appEra]['rcp45'][stat.id].min
)
)
)
}}
Expand All @@ -127,7 +132,7 @@ const tableCaptionHtml = computed(() => {
"
:future="
roundSigFig(
Number(streamStats['projected'][appEra].min[stat.id])
Number(streamStats['projected'][appEra]['rcp45'][stat.id].min)
)
"
/>
Expand All @@ -137,7 +142,9 @@ const tableCaptionHtml = computed(() => {
{{
fnc(
roundSigFig(
Number(streamStats['projected'][appEra].max[stat.id])
Number(
streamStats['projected'][appEra]['rcp85'][stat.id].max
)
)
)
}}
Expand All @@ -150,7 +157,7 @@ const tableCaptionHtml = computed(() => {
"
:future="
roundSigFig(
Number(streamStats['projected'][appEra].max[stat.id])
Number(streamStats['projected'][appEra]['rcp85'][stat.id].max)
)
"
/>
Expand Down
32 changes: 12 additions & 20 deletions webapp/components/Viz/MinMaxFlowDates.vue → webapp/components/Viz/MaxFlowDates.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,23 @@ import { useStreamSegmentStore } from '~/stores/streamSegment'
const streamSegmentStore = useStreamSegmentStore()
const { appContext, appEra } = storeToRefs(streamSegmentStore)

const props = defineProps(['streamMinMaxFlowDates'])
const props = defineProps(['streamMaxFlowDates'])

onMounted(() => {
initializeChart(
$Plotly,
'min-max-flow-dates',
'max-flow-dates',
buildChart,
toRaw(props.streamMinMaxFlowDates)
toRaw(props.streamMaxFlowDates)
)
})

watch([appContext, appEra], () => {
initializeChart(
$Plotly,
'min-max-flow-dates',
'max-flow-dates',
buildChart,
toRaw(props.streamMinMaxFlowDates)
toRaw(props.streamMaxFlowDates)
)
})

Expand Down Expand Up @@ -67,12 +67,8 @@ const buildChart = () => {
}

scenarios.forEach(scenario => {
let historicalFlow = [
props.streamMinMaxFlowDates['historical']['max']['flow'],
]
let historicalFlowDate = [
props.streamMinMaxFlowDates['historical']['max']['date'],
]
let historicalFlow = [props.streamMaxFlowDates['historical']['flow']]
let historicalFlowDate = [props.streamMaxFlowDates['historical']['date']]

let customdataHistorical: string[][] = []
historicalFlowDate.forEach((doy: number, index: number) => {
Expand Down Expand Up @@ -116,13 +112,9 @@ const buildChart = () => {
historicalTraces.push(historicalTrace)

let projectedFlows =
props.streamMinMaxFlowDates['projected'][appEra.value][scenario]['max'][
'flow'
]
props.streamMaxFlowDates['projected'][appEra.value][scenario]['flow']
let projectedDates = $_.cloneDeep(
props.streamMinMaxFlowDates['projected'][appEra.value][scenario]['max'][
'date'
]
props.streamMaxFlowDates['projected'][appEra.value][scenario]['date']
)

let customdataProjected: string[][] = []
Expand Down Expand Up @@ -243,12 +235,12 @@ const buildChart = () => {
layout['margin'] = { t: 100 }
layout['height'] = 500

const config = getConfig('min-max-flow-dates')
const config = getConfig('max-flow-dates')

$Plotly.newPlot('min-max-flow-dates', traces, layout, config)
$Plotly.newPlot('max-flow-dates', traces, layout, config)
}
</script>

<template>
<div id="min-max-flow-dates" class="mb-5"></div>
<div id="max-flow-dates" class="mb-5"></div>
</template>
10 changes: 5 additions & 5 deletions webapp/stores/streamSegment.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const useStreamSegmentStore = defineStore('streamSegmentStore', () => {
const streamSummary = shallowRef(null)
const streamHydrograph = shallowRef(null)
const streamMonthlyFlow = shallowRef(null)
const streamMinMaxFlowDates = shallowRef(null)
const streamMaxFlowDates = shallowRef(null)
const streamStats = shallowRef(null)
const appContext = ref<AppContext>('mid')
const appEra = ref<Era>('2046-2075')
Expand Down Expand Up @@ -65,7 +65,7 @@ export const useStreamSegmentStore = defineStore('streamSegmentStore', () => {
streamSummary.value = null
streamHydrograph.value = null
streamMonthlyFlow.value = null
streamMinMaxFlowDates.value = null
streamMaxFlowDates.value = null
streamStats.value = null
var dataResponse

Expand Down Expand Up @@ -118,7 +118,7 @@ export const useStreamSegmentStore = defineStore('streamSegmentStore', () => {
streamSummary.value = dataResponse['summary']
streamHydrograph.value = dataResponse['hydrograph']
streamMonthlyFlow.value = dataResponse['monthly_flow']
streamMinMaxFlowDates.value = dataResponse['min_max_flow_dates']
streamMaxFlowDates.value = dataResponse['max_flow_dates']
streamStats.value = dataResponse['stats']
} catch {
console.error('API response does not contain expected data.')
Expand All @@ -131,7 +131,7 @@ export const useStreamSegmentStore = defineStore('streamSegmentStore', () => {
streamSummary.value = null
streamHydrograph.value = null
streamMonthlyFlow.value = null
streamMinMaxFlowDates.value = null
streamMaxFlowDates.value = null
streamStats.value = null
hucId.value = null
}
Expand All @@ -142,7 +142,7 @@ export const useStreamSegmentStore = defineStore('streamSegmentStore', () => {
streamSummary,
streamHydrograph,
streamMonthlyFlow,
streamMinMaxFlowDates,
streamMaxFlowDates,
streamStats,
fetchStreamStats,
fetchHucStats,
Expand Down