Skip to content
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

Jump to bottom

113 daisen burger menu adjust while resizing #117

Merged
merged 4 commits into from
Jun 20, 2024
Merged

113 daisen burger menu adjust while resizing #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
47a7725
flex tool bar changes
YuanhuanO Jun 11, 2024
1026e32
pagination changes
YuanhuanO Jun 12, 2024
01bea53
pagination position fixed under the dashboard
YuanhuanO Jun 12, 2024
15e2197
small deletions
YuanhuanO Jun 19, 2024
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
2 changes: 0 additions & 2 deletions daisen/static/dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,5 @@
<div id="mouse-time"></div>
</div>
</div>


</body>
</html>
18 changes: 13 additions & 5 deletions daisen/static/src/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,21 @@ body {
.pagination-container {
display: flex;
align-items: center;
justify-content: space-between;
color:#2c7bb6
justify-content: center;
color:#2c7bb6;
margin-top: 0px;
margin-bottom: 40px;
position: relative;
width: 100%;
}

.canvas-container {
position: relative;
width: 100%;
}

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

.burger-menu {
Expand Down Expand Up @@ -106,13 +114,13 @@ body {
justify-content: flex-start;
}

@media (max-width: 768px) {
@media (max-width: 1300px) {
.burger-menu {
display: block;
}

.tool-bar {
display: none;
display: flex;
}
}

Expand Down
62 changes: 50 additions & 12 deletions daisen/static/src/dashboard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,17 @@ import * as d3 from "d3";
import Widget from "./widget";
import { thresholdFreedmanDiaconis } from "d3";

function throttle(func: (...args: any[]) => void, limit: number) {
let inThrottle: boolean;
return function(this: any, ...args: any[]) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(() => (inThrottle = false), limit);
}
};
}

class YAxisOption {
optionValue: string;
html: string;
Expand All @@ -26,6 +37,8 @@ class Dashboard {
_endTime: number;
_widgets: Array<Widget>;
_yAxisOptions: Array<YAxisOption>;
_initialWidth: number;
_initialHeight: number;

constructor() {
this._numWidget = 16;
Expand All @@ -41,6 +54,8 @@ class Dashboard {
{ optionValue: "PendingReqOut", html: "Pending Request Out" },
{ optionValue: "-", html: " - " },
];
this._initialWidth = window.innerWidth;
this._initialHeight = window.innerHeight;
}

setCanvas(
Expand All @@ -52,6 +67,8 @@ class Dashboard {
this._pageBtnContainer = pageBtnContainer;
this._toolBar = toolBar;

this._canvas.classList.add('canvas-container');

const burgerMenu = document.createElement('div');
burgerMenu.classList.add('burger-menu');
burgerMenu.innerHTML = `
Expand All @@ -75,17 +92,22 @@ class Dashboard {
dropdownCanvas.style.display = isActive ? 'block' : 'none';
});

window.addEventListener('resize', () => {
if (window.innerWidth > 768) {
window.addEventListener('resize', throttle(() => {
if (window.innerWidth > 1300) {
dropdownCanvas.classList.remove('active');
dropdownCanvas.style.display = 'none';
this._toolBar.style.display = 'flex';
} else {
this._toolBar.style.display = 'none';
}
const paginationContainer = this._canvas.querySelector('.pagination-container') as HTMLElement;
if (paginationContainer) {
paginationContainer.style.left = '50%';
paginationContainer.style.transform = 'translateX(-50%)';
}
this._resize();
});
}, 200));

this._addZoomResetButton(this._toolBar);
this._addFilterUI(this._toolBar);
this._addPrimarySelector(this._toolBar);
Expand All @@ -95,9 +117,11 @@ class Dashboard {
this._addPrimarySelector(dropdownCanvas);
this._addSecondarySelector(dropdownCanvas);
this._resize();

}

_resize() {
this._resetNumRowCol();
const width = this._widgetWidth();
const height = this._widgetHeight();
this._widgets.forEach((w: Widget) => {
Expand Down Expand Up @@ -125,9 +149,20 @@ class Dashboard {
[4, 4],
[4, 4],
];

this._numRow = rowColTable[this._numWidget][0];
this._numCol = rowColTable[this._numWidget][1];
const width = window.innerWidth;
const height = window.innerHeight;
this._numCol = rowColTable[this._numWidget][0];
this._numRow = rowColTable[this._numWidget][1];
if (width >= 1200) {
this._numCol = 4;
}
if (width < 1200 && width >= 800) {
this._numCol = 3;
}
if (width < 800) {
this._numCol = 2;
}
console.log(width, height);
}

_widgetWidth(): number {
Expand All @@ -142,7 +177,7 @@ class Dashboard {

_widgetHeight(): number {
this._resetNumRowCol();
const numGap = this._numCol + 1;
const numGap = this._numRow + 1;
const marginTop = 5;
const gapSpace = numGap * marginTop;
const widgetSpace = this._canvas.offsetHeight - gapSpace;
Expand Down Expand Up @@ -248,6 +283,7 @@ class Dashboard {
};

container.appendChild(selectorGroup);
this._canvas.classList.add('canvas-container');
}

_addSecondarySelector(container: HTMLElement) {
Expand Down Expand Up @@ -437,10 +473,10 @@ class Dashboard {
paginationContainer.classList.add("pagination-container");
paginationContainer.appendChild(nav);
paginationContainer.appendChild(pageInfo);

this._pageBtnContainer.innerHTML = "";
this._pageBtnContainer.appendChild(paginationContainer);

if (this._canvas.querySelector('.pagination-container')) {
this._canvas.removeChild(this._canvas.querySelector('.pagination-container'));
}
this._canvas.appendChild(paginationContainer);
this._addPageButtons(ul);
}

Expand Down Expand Up @@ -613,7 +649,9 @@ class Dashboard {

widget.render(true);
});
this._addPaginationControl();
}

}

export default Dashboard;
Loading