GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 18:39:04 +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) => { 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); const { nodes, links } = getGraphData(serviceMap);
@ -65,7 +65,6 @@ const ServiceMap = (props: ServiceMapProps) => {
/> />
<ForceGraph2D <ForceGraph2D
ref={fgRef} ref={fgRef}
enableNodeDrag={false}
cooldownTicks={100} cooldownTicks={100}
onEngineStop={() => fgRef.current.zoomToFit(100, 200)} onEngineStop={() => fgRef.current.zoomToFit(100, 200)}
graphData={graphData} graphData={graphData}
@ -79,14 +78,13 @@ const ServiceMap = (props: ServiceMapProps) => {
ctx.font = `${fontSize}px Sans-Serif`; ctx.font = `${fontSize}px Sans-Serif`;
const textWidth = ctx.measureText(label).width; const textWidth = ctx.measureText(label).width;
const width = textWidth > node.width ? textWidth : node.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.fillStyle = node.color;
ctx.fillRect( ctx.fillRect(
node.x - bckgDimensions[0] / 2, node.x - bckgDimensions[0] / 2,
node.y - bckgDimensions[1] / 2, node.y - bckgDimensions[1] / 2,
...bckgDimensions, ...bckgDimensions,
); );
ctx.textAlign = "center"; ctx.textAlign = "center";
ctx.textBaseline = "middle"; ctx.textBaseline = "middle";
ctx.fillStyle = "black"; 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 { serviceMapStore } from "Src/store/actions";
import { graphDataType } from "./ServiceMap"; import { graphDataType } from "./ServiceMap";
const MAX_WIDTH = 12; const MIN_WIDTH = 25;
const MIN_WIDTH = 5; const MAX_WIDTH = 50;
const MAX_FONT_SIZE = 8; const MIN_HEIGHT = 10;
const MIN_FONT_SIZE = 5; const MAX_HEIGHT = 15;
const DEFAULT_FONT_SIZE = 4;
export const getDimensions = (num, highest) => { export const getDimensions = (num, highest) => {
const percentage = (num / highest) * 100; const percentage = (num / highest) * 100;
const width = (percentage * (MAX_WIDTH - MIN_WIDTH)) / 100 + MIN_WIDTH; const width = (percentage * (MAX_WIDTH - MIN_WIDTH)) / 100 + MIN_WIDTH;
const fontSize = const height = (percentage * (MAX_HEIGHT - MIN_HEIGHT)) / 100 + MIN_HEIGHT;
(percentage * (MAX_FONT_SIZE - MIN_FONT_SIZE)) / 100 + MIN_FONT_SIZE; const fontSize = DEFAULT_FONT_SIZE;
return { return {
fontSize, fontSize,
width, width,
height,
}; };
}; };
@ -43,8 +45,9 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
return { return {
id: node, id: node,
group: i + 1, group: i + 1,
fontSize: MIN_FONT_SIZE, fontSize: DEFAULT_FONT_SIZE,
width: MIN_WIDTH, width: MIN_WIDTH,
height: MIN_HEIGHT,
color, color,
nodeVal: MIN_WIDTH, nodeVal: MIN_WIDTH,
callRate: 0, callRate: 0,
@ -57,12 +60,13 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
} else if (service.fourXXRate > 0) { } else if (service.fourXXRate > 0) {
color = "#ebeb15"; color = "#ebeb15";
} }
const { fontSize, width } = getDimensions(service.callRate, highestCallRate); const { fontSize, width, height } = getDimensions(service.callRate, highestCallRate);
return { return {
id: node, id: node,
group: i + 1, group: i + 1,
fontSize, fontSize,
width, width,
height,
color, color,
nodeVal: width, nodeVal: width,
callRate: service.callRate, callRate: service.callRate,