Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated realTimeViz panel style

This commit is contained in:
Nalvazhuthi 2025-04-07 18:01:48 +05:30
parent 4a05bb8cdf
commit e23b580a14
2 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/ui/componets/DraggableWidget.tsx
View File

@ -326,7 +326,7 @@ export const DraggableWidget = ({
? `calc(${canvasDimensions.width * 0.16}px - 2px)` // For top/bottom panels, set width ? `calc(${canvasDimensions.width * 0.16}px - 2px)` // For top/bottom panels, set width
: undefined, // Don't set width if it's left or right : undefined, // Don't set width if it's left or right
height: ["left", "right"].includes(widget.panel) height: ["left", "right"].includes(widget.panel)
? `calc(${canvasDimensions.height * 0.3}px - 2px)` // For left/right panels, set height ? `calc(${canvasDimensions.height * 0.25}px - 2px)` // For left/right panels, set height
: undefined, // Don't set height if it's top or bottom : undefined, // Don't set height if it's top or bottom
}} }}
ref={chartWidget} ref={chartWidget}

20
app/src/components/ui/componets/Panel.tsx
View File

@ -116,7 +116,7 @@ const Panel: React.FC<PanelProps> = ({
resizeObserver.unobserve(canvas); resizeObserver.unobserve(canvas);
}; };
}, []); }, []);
const getPanelStyle = useMemo( const getPanelStyle = useMemo(
() => (side: Side) => { () => (side: Side) => {
const currentIndex = selectedZone.panelOrder.indexOf(side); const currentIndex = selectedZone.panelOrder.indexOf(side);
@ -125,18 +125,19 @@ const Panel: React.FC<PanelProps> = ({
const rightActive = previousPanels.includes("right"); const rightActive = previousPanels.includes("right");
const topActive = previousPanels.includes("top"); const topActive = previousPanels.includes("top");
const bottomActive = previousPanels.includes("bottom"); const bottomActive = previousPanels.includes("bottom");
// Dynamic panel sizes based on canvas width // Dynamic panel sizes based on canvas width
const panelSizeWidth = Math.max(canvasDimensions.width * 0.165, 200); // Ensure minimum width of 200px const panelSizeWidth = Math.max(canvasDimensions.width * 0.165, 200); // Ensure minimum width of 200px
const panelSizeHeight = Math.max(canvasDimensions.width * 0.13, 200); // Ensure minimum height of 200px const panelSizeHeight = Math.max(canvasDimensions.width * 0.13, 200); // Ensure minimum height of 200px
switch (side) { switch (side) {
case "top": case "top":
case "bottom": case "bottom":
return { return {
minWidth: "200px", // Minimum width constraint // minWidth: "200px", // Minimum width constraint
width: `calc(100% - ${ width: `calc(100% - ${
(leftActive ? panelSizeWidth : 0) + (rightActive ? panelSizeWidth : 0) (leftActive ? panelSizeWidth : 0) +
(rightActive ? panelSizeWidth : 0)
}px)`, }px)`,
minHeight: "200px", // Minimum height constraint minHeight: "200px", // Minimum height constraint
height: `${panelSizeHeight - 2}px`, // Subtracting for border or margin height: `${panelSizeHeight - 2}px`, // Subtracting for border or margin
@ -144,21 +145,22 @@ const Panel: React.FC<PanelProps> = ({
right: rightActive ? `${panelSizeWidth}px` : "0", right: rightActive ? `${panelSizeWidth}px` : "0",
[side]: "0", [side]: "0",
}; };
case "left": case "left":
case "right": case "right":
return { return {
minWidth: "200px", // Minimum width constraint minWidth: "200px", // Minimum width constraint
width: `${panelSizeWidth - 2}px`, // Subtracting for border or margin width: `${panelSizeWidth - 2}px`, // Subtracting for border or margin
minHeight: "200px", // Minimum height constraint // minHeight: "200px", // Minimum height constraint
height: `calc(100% - ${ height: `calc(100% - ${
(topActive ? panelSizeHeight : 0) + (bottomActive ? panelSizeHeight : 0) (topActive ? panelSizeHeight : 0) +
(bottomActive ? panelSizeHeight : 0)
}px)`, }px)`,
top: topActive ? `${panelSizeHeight}px` : "0", top: topActive ? `${panelSizeHeight}px` : "0",
bottom: bottomActive ? `${panelSizeHeight}px` : "0", bottom: bottomActive ? `${panelSizeHeight}px` : "0",
[side]: "0", [side]: "0",
}; };
default: default:
return {}; return {};
} }