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

Refactor DashboardViewConfigUtil to fix lastRowThatHasComponent calculation

Browse Source
This commit is contained in:
Simon Larsen 2024-10-28 10:05:57 +00:00
parent 477da276b2
commit 6fb6329356
No known key found for this signature in database
GPG Key ID: 96C5DCA24769DBCA
3 changed files with 56 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Common/Utils/Dashboard/DashboardViewConfig.ts
View File

@ -27,10 +27,14 @@ export default class DashboardViewConfigUtil {
// find the last row that has the component.
let lastRowThatHasComponent: number = 0;
let lastRowThatHasComponent: number = -1;
for (const dashboardComponent of allComponentsFromDashboard) {
if (dashboardComponent.topInDashboardUnits < componentTopPosition) {
if (
componentTopPosition <
dashboardComponent.topInDashboardUnits +
dashboardComponent.heightInDashboardUnits
) {
lastRowThatHasComponent = componentTopPosition;
}
}

39
Dashboard/src/Components/Dashboard/Canvas/Index.tsx
View File

@ -5,6 +5,7 @@ import DefaultDashboardSize from "Common/Types/Dashboard/DashboardSize";
import DashboardBaseComponent from "Common/Types/Dashboard/DashboardComponents/DashboardBaseComponent";
import BlankDashboardUnitElement from "./DashboardUnit";
import DashboardBaseComponentElement from "../Components/DashboardBaseComponent";
import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes";
export interface ComponentProps {
dashboardViewConfig: DashboardViewConfig;
@ -15,7 +16,7 @@ export interface ComponentProps {
const DashboardCanvas: FunctionComponent<ComponentProps> = (
props: ComponentProps,
): ReactElement => {
const renderComponents = (): ReactElement => {
const renderComponents: GetReactElementFunction = (): ReactElement => {
const canvasHeight: number =
props.dashboardViewConfig.heightInDashboardUnits ||
DefaultDashboardSize.heightInDashboardUnits;
@ -29,7 +30,7 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
const grid: Array<Array<DashboardBaseComponent | null>> = [];
// Fill the grid with null initially
for (let row = 0; row < canvasHeight; row++) {
for (let row: number = 0; row < canvasHeight; row++) {
grid[row] = new Array(canvasWidth).fill(null);
}
@ -43,7 +44,7 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
} = component;
for (
let i = topInDashboardUnits;
let i: number = topInDashboardUnits;
i < topInDashboardUnits + heightInDashboardUnits;
i++
) {
@ -52,7 +53,7 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
}
for (
let j = leftInDashboardUnits;
let j: number = leftInDashboardUnits;
j < leftInDashboardUnits + widthInDashboardUnits;
j++
) {
@ -65,8 +66,8 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
const renderedComponents: Array<ReactElement | null> = [];
for (let i = 0; i < canvasHeight; i++) {
for (let j = 0; j < canvasWidth; j++) {
for (let i: number = 0; i < canvasHeight; i++) {
for (let j: number = 0; j < canvasWidth; j++) {
const component: DashboardBaseComponent | null | undefined =
grid[i]![j];
@ -114,7 +115,13 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
string | null
>(null);
const renderComponent = (component: DashboardBaseComponent): ReactElement => {
type RenderComponentFunction = (
component: DashboardBaseComponent,
) => ReactElement;
const renderComponent: RenderComponentFunction = (
component: DashboardBaseComponent,
): ReactElement => {
return (
<DashboardBaseComponentElement
isEditMode={props.isEditMode}
@ -125,6 +132,24 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
// component is selected
setSelectedComponentId(component.componentId.toString());
}}
onComponentUpdate={(updatedComponent: DashboardBaseComponent) => {
const updatedComponents: Array<DashboardBaseComponent> = props.dashboardViewConfig.components.map(
(component: DashboardBaseComponent) => {
if (component.componentId.toString() === updatedComponent.componentId.toString()) {
return updatedComponent;
}
return component;
},
);
const updatedDashboardViewConfig: DashboardViewConfig = {
...props.dashboardViewConfig,
components: updatedComponents,
};
props.onDashboardViewConfigChange(updatedDashboardViewConfig);
}}
/>
);
};

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

@ -8,12 +8,14 @@ import DashboardChartComponent from "./DashboardChartComponent";
import DashboardValueComponent from "./DashboardValueComponent";
import DashboardTextComponent from "./DashboardTextComponent";
import { DashboardRemConversionFactor } from "Common/Types/Dashboard/DashboardSize";
import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes";
export interface DashboardBaseComponentProps {
component: DashboardBaseComponent;
isEditMode: boolean;
isSelected: boolean;
key: string;
onComponentUpdate: (component: DashboardBaseComponent) => void;
}
export interface ComponentProps extends DashboardBaseComponentProps {
@ -26,7 +28,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
const widthOfComponent: number = props.component.widthInDashboardUnits;
const heightOfComponent: number = props.component.heightInDashboardUnits;
let className = `relative rounded m-2 col-span-${widthOfComponent} row-span-${heightOfComponent} border border-solid border-gray-300 p-2`;
let className: string = `relative rounded m-2 col-span-${widthOfComponent} row-span-${heightOfComponent} border border-solid border-gray-300 p-2`;
if (props.isEditMode) {
className += " cursor-pointer";
@ -36,7 +38,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
className += " border-2 border-indigo-300";
}
const getMoveElement = (): ReactElement => {
const getMoveElement: GetReactElementFunction = (): ReactElement => {
// if not selected, then return null
if (!props.isSelected) {
@ -50,11 +52,21 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
left: "-9px",
}}
className="move-element cursor-move absolute w-4 h-4 bg-indigo-400 rounded-full cursor-pointer"
></div>
onDragStart={(event: React.DragEvent<HTMLDivElement>) => {
}}
onDragEnd={(event: React.DragEvent<HTMLDivElement>) => {
}}
>
</div>
);
};
const getResizeWidthElement = (): ReactElement => {
const getResizeWidthElement: GetReactElementFunction = (): ReactElement => {
if (!props.isSelected) {
return <></>;
}
@ -70,7 +82,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
);
};
const getResizeHeightElement = (): ReactElement => {
const getResizeHeightElement: GetReactElementFunction = (): ReactElement => {
if (!props.isSelected) {
return <></>;
}
@ -99,6 +111,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
style={{
height: `${heightInRem}rem`,
}}
>
{getMoveElement()}