mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-08-12 04:59:02 +08:00
calculate zoom px based on screen size
This commit is contained in:
parent
fcc248ddf6
commit
2482e91348
@ -10,7 +10,7 @@ import {
|
||||
import { Spin } from "antd";
|
||||
import styled from "styled-components";
|
||||
import { StoreState } from "../../store/reducers";
|
||||
import { getGraphData } from "./utils";
|
||||
import { getZoomPx, getGraphData } from "./utils";
|
||||
import SelectService from "./SelectService";
|
||||
import { ForceGraph2D } from "react-force-graph";
|
||||
|
||||
@ -72,7 +72,7 @@ const ServiceMap = (props: ServiceMapProps) => {
|
||||
}
|
||||
|
||||
const zoomToService = (value: string) => {
|
||||
fgRef && fgRef.current.zoomToFit(700, 380, (e) => e.id === value);
|
||||
fgRef && fgRef.current.zoomToFit(700, getZoomPx(), (e) => e.id === value);
|
||||
};
|
||||
|
||||
const { nodes, links } = getGraphData(serviceMap);
|
||||
|
@ -73,3 +73,14 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
|
||||
links,
|
||||
};
|
||||
};
|
||||
|
||||
export const getZoomPx = (): number => {
|
||||
const width = window.screen.width;
|
||||
if (width < 1400) {
|
||||
return 190;
|
||||
} else if (width > 1400 && width < 2500) {
|
||||
return 380;
|
||||
} else if (width > 2500) {
|
||||
return 360;
|
||||
}
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user