Skip to content

Commit

Permalink
Merge branch 'dev' into code-refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@LKMason
LKMason committed Dec 5, 2023
2 parents 4e893d4 + 9e717a6 commit 8ea6760
Show file tree
Hide file tree
Showing 7 changed files with 1,154 additions and 32 deletions.
5 changes: 5 additions & 0 deletions src/components/navBarMenuItems.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,11 @@ export const navBarMenutemplate = () => {
<a class="nav-link nav-menu-links white-font" href="#map-visualization" title="Map Visualization" id="map-visualization">
Quantile Visualization
</a>
</div>
<div class="grid-elements">
<a class="nav-link nav-menu-links white-font" href="#visualization/Demographic Visualization" title="Map Visualization" id="Demographic Visualization">
Demographic Visualization
</a>
</div>
<div class="grid-elements">
<a class="nav-link nav-menu-links white-font" rel="noopener" target="_blank" href="https://github.com/episphere/dataplatform/issues" title="BCRPP github issues">
Expand Down
142 changes: 142 additions & 0 deletions src/pages/demographicVisualization.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
/** @format */

import {
renderSettingsVisualization,
SETTINGS,
} from "../components/visualization/settingsVisualization.js";

export const renderDemographicVisualizationPage = () => {
let template = /*html*/`
<div class="container-fluid p-5">
<div class="row">
<div class="col-md-2" id="sidebar">
<div class="sticky-top" style="top:50px">
<div class="card rounded-1">
<div class="card-header">
Demographic Options
</div>
<div class="card-body">
<h5 class="">Compare</h5>
<label for="comparePrimarySelect">Row</label>
<select id="comparePrimarySelect" class="form-select mb-2" disabled aria-label="Compare Primary">
<option hidden >Awaiting data...</option>
</select>
<label for="compareSecondarySelect">Column</label>
<select id="compareSecondarySelect" class="form-select mb-2" disabled aria-label="Compare Secondary">
<option hidden >Awaiting data...</option>
</select>
<h5 class="pt-3">Select</h5>
<label for="yearSelectSelect">Year</label>
<select id="yearSelectSelect" class="form-select mb-2" disabled aria-label="Year select">
<option hidden >Awaiting data...</option>
</select>
<label for="causeSelectSelect">Cause</label>
<select id="causeSelectSelect" class="form-select mb-2" aria-label="Cause select">
<option hidden >Awaiting data...</option>
</select>
<label for="sexSelectSelect">Sex</label>
<select id="sexSelectSelect" class="form-select mb-2" disabled aria-label="Sex select">
<option hidden >Awaiting data...</option>
</select>
<label for="raceSelectSelect">Race</label>
<select id="raceSelectSelect" class="form-select mb-2" disabled aria-label="Race select">
<option hidden >Awaiting data...</option>
</select>
</div>
</div>
<div class="card rounded-1 mt-3">
<div class="card-header">
Other Options
</div>
<div class="card-body">
<div id="">
<label for="measureSelect">Measure</label>
<select id="measureSelect" class="form-select mb-2" aria-label="Measure select" disabled>
<option hidden >Awaiting data...</option>
</select>
<!-- <label for="levelSelect">Level</label>
<select id="levelSelect" class="form-select mb-2" aria-label="Level select" disabled>
<option hidden >Awaiting data...</option>
<option >County</option>
<option >State</option>
</select> -->
<label for="ageGroupsSelect">Age Groups</label>
<select id="ageGroupsSelect" class="form-select mb-2" aria-label="Level select">
<option hidden >Awaiting data...</option>
</select>
<label for="stateSelectSelect">Search State</label>
<select id="stateSelectSelect" class="form-select mb-2" aria-label="State select">
<option hidden >Awaiting data...</option>
</select>
<!-- <div id="county-wrapper">
<label for="countySelectSelect">Search County</label>
<select id="countySelectSelect" class="form-select mb-2" disabled aria-label="County select">
<option hidden >Awaiting data...</option>
</select>
</div> -->
</div>
</div>
</div>
`
template += renderSettingsVisualization([ SETTINGS.COLOR_SCHEME])

template += /*html*/`
</div>
</div>
`;
return template;
};


// <div class="col-md-10 px-3 position-relative" id="main-content">
// <button id="sidebar-toggle" class="btn btn-light position-absolute start-0">
// <i class="fas fa-lg fa-caret-left"></i>
// </button>

// <div class="tab-pane fade show px-4 py-1" id="plot-map-pane" role="tabpanel" aria-labelledby="plot-map-tab">

// <div id="loader-container" class="position-absolute" style="top:50%; left:50%;">
// <div class="spinner-border" role="status"></div>
// </div>

// <div id="plots-container" class="d-flex flex-column pe-2 position-relative">
// <div id="plots-bar" class="d-inline-flex justify-content-between ps-2">
// <div id="color-legend" style="display:inline-block"></div>
// <div class="d-inline-flex align-self-end">
// <div id="display-mode-control">
// <ul class="nav nav-pills">
// <li class="nav-item">
// <a id="map-nav-link" class="nav-link active"><i class="bi bi-map"></i></a>
// </li>
// <li class="nav-item">
// <a id="table-nav-link" class="nav-link"><i class="bi bi-table"></i></a>
// </li>
// <ul>
// </div>
// <div id="group-download-container" ></div>
// </div>

// </div>
// <div id="maps-container" class="mt-3 main-plot-panel" style="display: grid"></div>
// <div id="table-container" class="mt-3 main-plot-panel" style="display: none"></div>
// </div>
// </div>

// </div>
7 changes: 7 additions & 0 deletions src/pages/homePage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,13 @@ export const infoDeck = () => {
icon: "fa-chart-line",
explanation: "",
});
template += cardContents({
header: "Demographic Visualization",
button: "Interact with Demographic Visualization",
href: "#visualization/Demographic Visualization",
icon: "fa-map",
explanation: "",
});
template += `</div>
</div>
</div>
Expand Down
38 changes: 22 additions & 16 deletions src/shared.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,27 @@
export const sort = (items = []) => {
return items.sort((a, b) => {
const nameA = a.text.toUpperCase();
const nameB = b.text.toUpperCase();
export const sort = (a, b) => {
const nameA = a.label.toUpperCase();
const nameB = b.label.toUpperCase();

if (a.disabled === true && b.disabled !== true) {
return 1;
}
if (a.disabled !== true && b.disabled === true) {
return -1
}

if (nameA === 'ALL' || nameB === 'ALL') {
return 1
}
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
if (nameA === 'ALL' || nameB === 'ALL') {
return 1
}

// names must be equal
return 0;
});
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}

// names must be equal
return 0;
}

export const getFolderItems = async (id) => {
Expand Down
Loading

0 comments on commit 8ea6760

Please sign in to comment.