8000 USFS dashboard updates by jblehr · Pull Request #300 · OutdoorRD/trails-viz · GitHub
[go: up one dir, main page]
Skip to content

USFS dashboard updates #300

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

Merged
jblehr merged 6 commits into from
Sep 1, 2026
Merged

USFS dashboard updates #300

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d0f85b3
Update timeseries plot to default to modeled + onsite data only
jblehr Aug 28, 2026
8b1106f
Ensure weekly button can't be selected if there's no weekly data
jblehr Aug 28, 2026
958d069
Tweaks to showing/hiding data series on time series plot
jblehr Sep 1, 2026
bc8b1d4
Remove unnecessary comments
jblehr Sep 1, 2026
4b23003
Copy edit and limit scope of time series label formatting to time ser…
jblehr Sep 1, 2026
b0354bb
Update y axis label for time series
jblehr Sep 1, 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
53 changes: 42 additions & 11 deletions trails-viz-app/src/components/TimeSeries.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,14 @@
</div>
<b-row no-gutters class="align-items-top justify-content-end mt-2">
<b-col cols="auto">
<b-radio-group v-model="dataRange" :options="dateRangeOptions" v-on:input="switchDateRange"></b-radio-group>
</b-col>
<b-radio-group
v-model="dataRange"
:options="dateRangeOptions"
stacked
@input="switchDateRange"
:disabled="!monthlyVisitation && !weeklyVisitation"
></b-radio-group>
</b-col>
<b-col cols="auto" v-if="$store.getters.getLoggedInUser !== 'anon'">
<b-button
variant="outline-primary"
Expand All @@ -22,9 +28,11 @@
<div id="time-series"></div>
<div class="text-center disclaimer">
<p>
<strong>Click</strong> any grayed-out data source in the legend above to show it on the plot; click again to hide.
<br>
<strong>"Modeled"</strong> values here are in draft form and will change, sometimes dramatically, as our methods and data improve.
<br>
<strong>"On-site"</strong> values are estimates from infrared counters and parking lot counts, where available.
<strong>"On-site"</strong> values are estimates from a variety of sources (e.g., infrared counters, parking lot counts, NVUM surveys).
</p>
</div>
</div>
Expand Down Expand Up @@ -59,15 +67,20 @@
comparingSite: null,
comparingSiteMonthlyVisitation: null,
comparingSiteWeeklyVisitation: null,
dataRange: '',
dataRange: 'monthly',
chart: null,
domain: null,
dateRangeOptions: [
{text: 'Monthly', value: 'monthly'},
{text: 'Weekly', value: 'weekly'}
]
}
},
computed: {
// Dynamically generate options for the monthly/weekly radio group
dateRangeOptions() {
return [
{text: "Monthly", value: "monthly", disabled: !this.monthlyVisitation || this.monthlyVisitation.length === 0},
{text: "Weekly", value: "weekly", disabled: !this.weeklyVisitation || this.weeklyVisitation.length === 0},
];
},
},
methods: {
_getColors: function(trailName, comparing=false) {
let colors = {};
Expand Down Expand Up @@ -309,12 +322,18 @@
self.dataRange = "monthly";
data = self.timeseriesMonthlyData
}

// Set the columns that are visible by default
const visibleColumns = [`${self.trailName} - Modeled`, `${self.trailName} - On Site`, 'date'];
const hiddenColumns = data.map(column => column[0]).filter(name => !visibleColumns.includes(name));

self.chart = c3.generate({
bindto: '#time-series',
data: {
x: 'date',
columns: data,
colors: Object.assign({}, colors)
colors: Object.assign({}, colors),
hide: hiddenColumns
},
axis: {
x: {
Expand All @@ -339,7 +358,7 @@
}
},
label: {
text: 'User-Days / Visits',
text: 'User-Days or Visits',
position: 'outer-middle'
}
}
Expand Down Expand Up @@ -434,6 +453,18 @@
}

.disclaimer {
font-size: 12px;
font-size: 14px;
}
</style>
<style>
/* Make hidden/deselected legend items less hard-to-see */
#time-series .c3-legend-item-hidden {
opacity: 1.0 !important;
}
/* Turn the line into a gray square box */
#time-series .c3-legend-item-hidden .c3-legend-item-tile {
stroke-dasharray: 10, 10, 10, 10 !important;
stroke-width: 10px !important;
stroke: #ccc !important;
}
</style>
Loading
0