mirrors/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime synced 2024-11-21 22:59:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance DashboardBaseComponent to track component position using state and update on dashboard view changes

Browse Source
This commit is contained in:
Simon Larsen 2024-11-05 19:42:51 +00:00
parent 9690a5897b
commit 6286653dd4
No known key found for this signature in database
GPG Key ID: 96C5DCA24769DBCA
2 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent, ReactElement } from "react"; import React, { FunctionComponent, ReactElement, useEffect } from "react";
import DashboardTextComponentType from "Common/Types/Dashboard/DashboardComponents/DashboardTextComponent"; import DashboardTextComponentType from "Common/Types/Dashboard/DashboardComponents/DashboardTextComponent";
import DashboardChartComponentType from "Common/Types/Dashboard/DashboardComponents/DashboardChartComponent"; import DashboardChartComponentType from "Common/Types/Dashboard/DashboardComponents/DashboardChartComponent";
import DashboardValueComponentType from "Common/Types/Dashboard/DashboardComponents/DashboardValueComponent"; import DashboardValueComponentType from "Common/Types/Dashboard/DashboardComponents/DashboardValueComponent";
@ -53,6 +53,9 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
const widthOfComponent: number = component.widthInDashboardUnits; const widthOfComponent: number = component.widthInDashboardUnits;
const heightOfComponent: number = component.heightInDashboardUnits; const heightOfComponent: number = component.heightInDashboardUnits;
const [topInPx, setTopInPx] = React.useState<number>(0);
const [leftInPx, setLeftInPx] = React.useState<number>(0);
let className: string = `relative rounded-md col-span-${widthOfComponent} row-span-${heightOfComponent} p-2 bg-white border-2 border-solid border-gray-100`; let className: string = `relative rounded-md col-span-${widthOfComponent} row-span-${heightOfComponent} p-2 bg-white border-2 border-solid border-gray-100`;
if (props.isEditMode) { if (props.isEditMode) {
@ -66,15 +69,32 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
const dashboardComponentRef: React.RefObject<HTMLDivElement> = const dashboardComponentRef: React.RefObject<HTMLDivElement> =
React.useRef<HTMLDivElement>(null); React.useRef<HTMLDivElement>(null);
const refreshTopAndLeftInPx: () => void = () => {
if (dashboardComponentRef.current === null) {
return;
}
const topInPx: number = dashboardComponentRef.current.getBoundingClientRect().top;
const leftInPx: number = dashboardComponentRef.current.getBoundingClientRect().left;
setTopInPx(topInPx);
setLeftInPx(leftInPx);
};
useEffect(() => {
refreshTopAndLeftInPx();
}, [props.dashboardViewConfig]);
type MoveComponentFunction = (mouseEvent: MouseEvent) => void; type MoveComponentFunction = (mouseEvent: MouseEvent) => void;
const moveComponent: MoveComponentFunction = ( const moveComponent: MoveComponentFunction = (
mouseEvent: MouseEvent, mouseEvent: MouseEvent,
): void => { ): void => {
const dashboardComponentOldTopInPx: number = const dashboardComponentOldTopInPx: number = topInPx;
dashboardComponentRef.current?.getBoundingClientRect().top || 0;
const dashboardComponentOldLeftInPx: number = const dashboardComponentOldLeftInPx: number =
dashboardComponentRef.current?.getBoundingClientRect().left || 0; leftInPx;
const newMoveToTop: number = mouseEvent.pageY; const newMoveToTop: number = mouseEvent.pageY;
const newMoveToLeft: number = mouseEvent.pageX; const newMoveToLeft: number = mouseEvent.pageX;
@ -272,8 +292,8 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
stopResizeAndMove(); stopResizeAndMove();
}} }}
className="move-element cursor-move absolute w-4 h-4 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer" className="move-element cursor-move absolute w-4 h-4 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer"
onDragStart={(_event: React.DragEvent<HTMLDivElement>) => {}} onDragStart={(_event: React.DragEvent<HTMLDivElement>) => { }}
onDragEnd={(_event: React.DragEvent<HTMLDivElement>) => {}} onDragEnd={(_event: React.DragEvent<HTMLDivElement>) => { }}
></div> ></div>
); );
}; };
@ -334,16 +354,14 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
}} }}
style={{ style={{
margin: `${MarginForEachUnitInPx}px`, margin: `${MarginForEachUnitInPx}px`,
height: `${ height: `${GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx) *
GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx) * heightOfComponent +
heightOfComponent +
SpaceBetweenUnitsInPx * (heightOfComponent - 1) SpaceBetweenUnitsInPx * (heightOfComponent - 1)
}px`, }px`,
width: `${ width: `${GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx) *
GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx) * widthOfComponent +
widthOfComponent +
(SpaceBetweenUnitsInPx - 2) * (widthOfComponent - 1) (SpaceBetweenUnitsInPx - 2) * (widthOfComponent - 1)
}px`, }px`,
}} }}
ref={dashboardComponentRef} ref={dashboardComponentRef}
> >

2
Dashboard/src/Components/Dashboard/DashboardView.tsx
View File

@ -90,7 +90,7 @@ const DashboardViewer: FunctionComponent<ComponentProps> = (
return; return;
} }
setDashboardViewConfig(dashboard.dashboardViewConfig!); setDashboardViewConfig(dashboard.dashboardViewConfig || DashboardViewConfigUtil.createDefaultDashboardViewConfig());
} catch (err) { } catch (err) {
setError(API.getFriendlyErrorMessage(err as Error)); setError(API.getFriendlyErrorMessage(err as Error));
} }