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
} 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")
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>`
}
}