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
app/src/components/ui/componets
DraggableWidget.tsxPanel.tsx

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
: undefined, // Don't set width if it's left or right
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
}}
ref={chartWidget}

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

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