import {
viewof select,
viewof radioTime,
viewof radioGrade,
plotSex, plotCollege, plotRegion, plotDensity, plotParentEd, plotRace,
tableSex, tableCollege, tableRegion, tableDensity, tableParentEd, tableRace,
downloadSex, downloadCollege, downloadRegion, downloadDensity, downloadParentEd, downloadRace,
citation, footnotes, activeGroup, makeAccordion,
prevalencePlot, prevalenceTable, prevalenceDownload, prevalenceGrades,
mutable zoomed,
mutable subgroupsRequested
} from "./documentation.qmd"Prevalence/Trends
Substance Use Prevalence and Trends among 8th, 10th, and 12th Graders
// Single centered row: zoom | search | demo button | time radio | grade radio
{
const btnStyle = `
padding: 0.4rem 1rem;
font-family: Archivo;
font-size: 0.9rem;
cursor: pointer;
border-radius: 4px;
white-space: nowrap;
border: none;`
// Use local flag so toggle text stays correct across reactive re-renders
let isZoomed = false
const zoomBtn = html`<button style="${btnStyle}">Zoom In</button>`
zoomBtn.addEventListener("click", () => {
isZoomed = !isZoomed
mutable zoomed = isZoomed
zoomBtn.textContent = isZoomed ? "Zoom Out" : "Zoom In"
})
const demoBtn = html`<button id="show-demo-btn" style="
${btnStyle}
background: #f0f0f0;
border: none;
width: 240px;">
View by Demographic Groups
</button>`
demoBtn.addEventListener("click", () => {
const tabset = document.querySelector(".bxby-subgroup-tabs")
if (!tabset) return
const isShowing = tabset.classList.toggle("show-demographic")
// Begin loading the 16MB subgroup file the moment the user asks to see
// demographics, so it's ready by the time they click a specific tab.
// (Latch only flips on; staying open keeps the data loaded.)
if (isShowing) mutable subgroupsRequested = true
demoBtn.textContent = isShowing
? "Hide Demographic Groups"
: "View by Demographic Groups"
if (!isShowing) {
const overallTab = document.querySelector(".bxby-subgroup-tabs .nav-link")
overallTab?.click()
}
})
// Grade radio hidden by default; shown to right of time radio on demographic tabs
const gradeDiv = html`<div id="grade-radio-container" style="display:none">${viewof radioGrade}</div>`
return html`<div style="display:flex; flex-direction:column; align-items:center; gap:0.5rem; margin-bottom:0;">
<div style="display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap;">
<div>${zoomBtn}</div>
<div>${viewof select}</div>
<div>${demoBtn}</div>
</div>
<div style="display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap;">
<div>${viewof radioTime}</div>
<div>${gradeDiv}</div>
</div>
</div>`
}{
const drug = radioTime[0]?.drug
const time = radioTime[0]?.time
if (activeGroup === "Overall") {
// Show grades actually present in the prevalence data for this drug/time
const presentGrades = ["8th Grade", "10th Grade", "12th Grade"]
.filter(g => prevalenceGrades.includes(g))
const gradeLabel = presentGrades.length === 1
? presentGrades[0]
: presentGrades.length === 2
? presentGrades.join(" and ")
: "8th, 10th, and 12th Grade"
return html`<h3 style="padding-top: 0;">${drug}: Trends in <u>${time}</u> Prevalence Among ${gradeLabel} Students</h3>`
} else {
return html`<h3 style="padding-top: 0;">${drug}: Trends in <u>${time}</u> Prevalence by <u>${activeGroup}</u> Among <u>${radioGrade[0]?.grade}</u> Students</h3>`
}
}