Skip to content

Commit

Permalink
add responsive design with overview
Browse files Browse the repository at this point in the history
  • Loading branch information
@YuanhuanO
YuanhuanO committed May 28, 2024
1 parent a4fa21f commit aeeb1b2
Show file tree
Hide file tree
Showing 3 changed files with 190 additions and 87 deletions.
68 changes: 68 additions & 0 deletions daisen/static/src/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,73 @@ body {

.page-info {
margin-left: 10px;
margin-bottom: -10px;
}

.burger-menu {
display: none;
position: fixed;
top: 12px;
right: 10px;
cursor: pointer;
z-index: 1000;
margin-top: 10px;
}

.burger-bar {
width: 25px;
height: 3px;
background-color: #333;
margin: 4px 0;
}

.dropdown-canvas {
display: none;
position: absolute;
top: 50px;
right: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 10px;
width: 400px;
z-index: 1000;
flex-direction: column;
}

.dropdown-canvas #dashboard-btn {
text-align: left;
margin-bottom: 10px;
margin-left: 16px;
}

.dropdown-canvas #dashboard-filter-group {
text-align: left;
margin-bottom: 10px;
margin-left: 16px;
}
.dropdown-canvas .custom-select,
.dropdown-canvas .input-group {
width: calc(100% - 20px);
text-align: left;
margin-bottom: 10px;
margin-left: 0;
}

.dropdown-canvas .input-group-text {
display: flex;
align-items: center;
justify-content: flex-start;
}
@media (max-width: 768px) {
.burger-menu {
display: block;
}

.tool-bar {
display: none;
}
}

.row {
Expand Down Expand Up @@ -126,6 +193,7 @@ body {

.dashboard {
overflow-y: scroll;
margin-top: 5px;
}

.dashboard .widget {
Expand Down
208 changes: 121 additions & 87 deletions daisen/static/src/dashboard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,59 @@ class Dashboard {
this._canvas = canvas;
this._pageBtnContainer = pageBtnContainer;
this._toolBar = toolBar;

this._addZoomResetButton();
this._addFilterUI();
this._addPrimarySelector();
this._addSecondarySelector();

const burgerMenu = document.createElement('div');
burgerMenu.classList.add('burger-menu');
burgerMenu.innerHTML = `
<div class="burger-bar"></div>
<div class="burger-bar"></div>
<div class="burger-bar"></div>
`;
burgerMenu.style.position = 'absolute';
burgerMenu.style.top = '10px';
burgerMenu.style.right = '10px';

const dropdownCanvas = document.createElement('div');
dropdownCanvas.classList.add('dropdown-canvas');
dropdownCanvas.style.display = 'none';

document.body.appendChild(burgerMenu);
document.body.appendChild(dropdownCanvas);

burgerMenu.addEventListener('click', () => {
const isActive = dropdownCanvas.classList.toggle('active');
dropdownCanvas.style.display = isActive ? 'block' : 'none';
});

window.addEventListener('resize', () => {
if (window.innerWidth > 768) {
dropdownCanvas.classList.remove('active');
dropdownCanvas.style.display = 'none';
this._toolBar.style.display = 'flex';
this._canvas.style.display = 'flex';
} else {
this._toolBar.style.display = 'none';
// this._canvas.style.display = 'none';
}
});

if (window.innerWidth <= 768) {
this._toolBar.style.display = 'none';
// this._canvas.style.display = 'none';
} else {
this._toolBar.style.display = 'flex';
this._canvas.style.display = 'flex';
}


this._addZoomResetButton(this._toolBar);
this._addFilterUI(this._toolBar);
this._addPrimarySelector(this._toolBar);
this._addSecondarySelector(this._toolBar);
this._addZoomResetButton(dropdownCanvas);
this._addFilterUI(dropdownCanvas);
this._addPrimarySelector(dropdownCanvas);
this._addSecondarySelector(dropdownCanvas);
this._resize();
}

Expand Down Expand Up @@ -144,119 +192,111 @@ class Dashboard {
});
}

_addZoomResetButton() {
const btn = document.createElement("button");
btn.setAttribute("type", "button");
btn.classList.add("mr-3");
btn.classList.add("btn");
btn.classList.add("btn-primary");
btn.innerHTML = "Reset Zoom";
this._toolBar.appendChild(btn);

_addZoomResetButton(container: HTMLElement) {
const btn = document.createElement('button');
btn.setAttribute('type', 'button');
btn.classList.add('btn', 'btn-primary', 'mr-3');
btn.id = "dashboard-btn";
btn.innerHTML = 'Reset Zoom';
btn.onclick = () => {
this._resetZoom();
};
container.appendChild(btn);
}

_addFilterUI() {
const filterGroup = document.createElement("div");
filterGroup.classList.add("input-group");

_addFilterUI(container: HTMLElement) {
const filterGroup = document.createElement('div');
filterGroup.classList.add('input-group', 'mr-3');
filterGroup.id = 'dashboard-filter-group';
filterGroup.innerHTML = `
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Filter</span>
</div>
<input id="dashboard-filter-input" type="text" class="form-control"
placeholder="Component Name"
aria-label="Filter" aria-describedby="basic-addon1"
>
`;
this._toolBar.appendChild(filterGroup);

const input = filterGroup.getElementsByTagName("input")[0];
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Filter</span>
</div>
<input id="dashboard-filter-input" type="text" class="form-control"
placeholder="Component Name" aria-label="Filter" aria-describedby="basic-addon1">
`;
container.appendChild(filterGroup);

const input = filterGroup.getElementsByTagName('input')[0];
input.oninput = () => {
this._filterInputChage();
};
}

_addPrimarySelector() {
const selectorGroup = document.createElement("div");
selectorGroup.classList.add("input-group");
selectorGroup.classList.add("ml-3");
this._toolBar.appendChild(selectorGroup);

const button = document.createElement("div");
button.classList.add("input-group-prepend");

_addPrimarySelector(container: HTMLElement) {
const selectorGroup = document.createElement('div');
selectorGroup.classList.add('input-group', 'ml-3');
const button = document.createElement('div');
button.classList.add('input-group-prepend');
selectorGroup.id = 'primary-selector-group';
button.innerHTML = `
<label
class="input-group-text"
for="primary-axis-select"
>
<div class="circle-primary"></div>
<div class="circle-primary"></div>
<div class="circle-primary"></div>
Primary Y-Axis
</label>`;
<label class="input-group-text" for="primary-axis-select">
<div class="circle-primary"></div>
<div class="circle-primary"></div>
<div class="circle-primary"></div>
Primary Y-Axis
</label>`;
selectorGroup.appendChild(button);

const select = document.createElement("select");
select.classList.add("custom-select");
select.id = "primary-axis-select";
const select = document.createElement('select');
select.classList.add('custom-select');
select.id = 'primary-axis-select';
selectorGroup.appendChild(select);

this._yAxisOptions.forEach((o, index) => {
let option = document.createElement("option");
if (index == 0) {
let option = document.createElement('option');
if (index === 0) {
option.selected = true;
}
option.value = o.optionValue;
option.innerHTML = o.html;
select.add(option);
});

select.onchange = () => {
this._switchPrimaryAxis(select.value);
};

container.appendChild(selectorGroup);
}

_addSecondarySelector() {
const selectorGroup = document.createElement("div");
selectorGroup.classList.add("input-group");
selectorGroup.classList.add("ml-3");
this._toolBar.appendChild(selectorGroup);

const button = document.createElement("div");
button.classList.add("input-group-prepend");

_addSecondarySelector(container: HTMLElement) {
const selectorGroup = document.createElement('div');
selectorGroup.classList.add('input-group', 'ml-3');
const button = document.createElement('div');
button.classList.add('input-group-prepend');
selectorGroup.id = 'secondary-selector-group';
button.innerHTML = `
<label
class="input-group-text"
for="secondary-axis-select"
>
<div class="circle-secondary"></div>
<div class="circle-secondary"></div>
<div class="circle-secondary"></div>
Secondary Y-Axis
</label>`;
<label class="input-group-text" for="secondary-axis-select">
<div class="circle-secondary"></div>
<div class="circle-secondary"></div>
<div class="circle-secondary"></div>
Secondary Y-Axis
</label>`;
selectorGroup.appendChild(button);

const select = document.createElement("select");
select.classList.add("custom-select");
select.id = "secondary-axis-select";
const select = document.createElement('select');
select.classList.add('custom-select');
select.id = 'secondary-axis-select';
selectorGroup.appendChild(select);

this._yAxisOptions.forEach((o, index) => {
let option = document.createElement("option");
if (index == 0) {
let option = document.createElement('option');
if (index === 0) {
option.selected = true;
}
option.value = o.optionValue;
option.innerHTML = o.html;
select.add(option);
});

select.onchange = () => {
this._switchSecondaryAxis(select.value);
};

container.appendChild(selectorGroup);
}


_switchPrimaryAxis(name: string) {
this._primaryAxis = name;
Expand Down Expand Up @@ -410,12 +450,6 @@ class Dashboard {

this._pageBtnContainer.innerHTML = "";
this._pageBtnContainer.appendChild(paginationContainer);
// pageInfo.classList.add("page-info");
// pageInfo.style.marginLeft = "10px";

// this._pageBtnContainer.innerHTML = "";
// this._pageBtnContainer.appendChild(nav);
// this._pageBtnContainer.appendChild(pageInfo);

this._addPageButtons(ul);
this._updatePageInfo(pageInfo);
Expand Down
1 change: 1 addition & 0 deletions daisen/static/src/dashboardpage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ class DashboardPage {

this._dashboard.setCanvas(pageContainer, pageBtnContainer, toolBar);
// this._dashboard.resize();

}

_containerDim(): [number, number] {
Expand Down

0 comments on commit aeeb1b2

Please sign in to comment.