GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-11 22:09:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

adds height variant

Browse Source
This commit is contained in:
dhrubesh 2021-05-09 20:47:56 +05:30
parent 128d75a144
commit 325ca434d4
2 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/modules/Servicemap/ServiceMap.tsx
View File

@ -52,7 +52,7 @@ const ServiceMap = (props: ServiceMapProps) => {
}
const zoomToService = (value: string) => {
fgRef && fgRef.current.zoomToFit(700, 360, (e) => e.id === value);
fgRef && fgRef.current.zoomToFit(700, 480, (e) => e.id === value);
};
const { nodes, links } = getGraphData(serviceMap);
@ -65,7 +65,6 @@ const ServiceMap = (props: ServiceMapProps) => {
/>
<ForceGraph2D
ref={fgRef}
enableNodeDrag={false}
cooldownTicks={100}
onEngineStop={() => fgRef.current.zoomToFit(100, 200)}
graphData={graphData}
@ -79,14 +78,13 @@ const ServiceMap = (props: ServiceMapProps) => {
ctx.font = `${fontSize}px Sans-Serif`;
const textWidth = ctx.measureText(label).width;
const width = textWidth > node.width ? textWidth : node.width;
const bckgDimensions = [width, fontSize].map((n) => n + fontSize); // some padding
const bckgDimensions = [width, node.height].map((n) => n + fontSize); // some padding
ctx.fillStyle = node.color;
ctx.fillRect(
node.x - bckgDimensions[0] / 2,
node.y - bckgDimensions[1] / 2,
...bckgDimensions,
);
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "black";

20
frontend/src/modules/Servicemap/utils.ts
View File

@ -2,18 +2,20 @@ import { uniqBy, uniq, maxBy, cloneDeep, find } from "lodash";
import { serviceMapStore } from "Src/store/actions";
import { graphDataType } from "./ServiceMap";
const MAX_WIDTH = 12;
const MIN_WIDTH = 5;
const MAX_FONT_SIZE = 8;
const MIN_FONT_SIZE = 5;
const MIN_WIDTH = 25;
const MAX_WIDTH = 50;
const MIN_HEIGHT = 10;
const MAX_HEIGHT = 15;
const DEFAULT_FONT_SIZE = 4;
export const getDimensions = (num, highest) => {
const percentage = (num / highest) * 100;
const width = (percentage * (MAX_WIDTH - MIN_WIDTH)) / 100 + MIN_WIDTH;
const fontSize =
(percentage * (MAX_FONT_SIZE - MIN_FONT_SIZE)) / 100 + MIN_FONT_SIZE;
const height = (percentage * (MAX_HEIGHT - MIN_HEIGHT)) / 100 + MIN_HEIGHT;
const fontSize = DEFAULT_FONT_SIZE;
return {
fontSize,
width,
height,
};
};
@ -43,8 +45,9 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
return {
id: node,
group: i + 1,
fontSize: MIN_FONT_SIZE,
fontSize: DEFAULT_FONT_SIZE,
width: MIN_WIDTH,
height: MIN_HEIGHT,
color,
nodeVal: MIN_WIDTH,
callRate: 0,
@ -57,12 +60,13 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
} else if (service.fourXXRate > 0) {
color = "#ebeb15";
}
const { fontSize, width } = getDimensions(service.callRate, highestCallRate);
const { fontSize, width, height } = getDimensions(service.callRate, highestCallRate);
return {
id: node,
group: i + 1,
fontSize,
width,
height,
color,
nodeVal: width,
callRate: service.callRate,