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

feat: service map color is updated according to the darkMode (#1324)

Browse Source
This commit is contained in:
Palash 2022-06-28 16:20:18 +05:30 committed by GitHub
parent eeae71163c
commit 6dbc11991b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -92,7 +92,7 @@ function ServiceMap(props: ServiceMapProps): JSX.Element {
fgRef && fgRef.current && fgRef.current.zoomToFit(100, 120);
};
const { nodes, links } = getGraphData(serviceMap);
const { nodes, links } = getGraphData(serviceMap, isDarkMode);
const graphData = { nodes, links };
return (
<Container>
@ -109,7 +109,7 @@ function ServiceMap(props: ServiceMapProps): JSX.Element {
linkAutoColorBy={(d) => d.target}
linkDirectionalParticles="value"
linkDirectionalParticleSpeed={(d) => d.value}
nodeCanvasObject={(node, ctx, globalScale) => {
nodeCanvasObject={(node, ctx) => {
const label = transformLabel(node.id);
const { fontSize } = node;
ctx.font = `${fontSize}px Roboto`;
@ -118,7 +118,6 @@ function ServiceMap(props: ServiceMapProps): JSX.Element {
ctx.fillStyle = node.color;
ctx.beginPath();
ctx.arc(node.x, node.y, width, 0, 2 * Math.PI, false);
ctx.fillStyle = isDarkMode ? '#3C8618' : '#D5F2BB';
ctx.fill();
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

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

@ -2,7 +2,6 @@
//@ts-nocheck
import { cloneDeep, find, maxBy, uniq, uniqBy } from 'lodash-es';
import { graphDataType } from './ServiceMap';
const MIN_WIDTH = 10;
@ -18,7 +17,7 @@ export const getDimensions = (num, highest) => {
};
};
export const getGraphData = (serviceMap): graphDataType => {
export const getGraphData = (serviceMap, isDarkMode): graphDataType => {
const { items, services } = serviceMap;
const highestCallCount = maxBy(items, (e) => e?.callCount)?.callCount;
const highestCallRate = maxBy(services, (e) => e?.callRate)?.callRate;
@ -39,7 +38,7 @@ export const getGraphData = (serviceMap): graphDataType => {
const uniqNodes = uniq([...uniqParent, ...uniqChild]);
const nodes = uniqNodes.map((node, i) => {
const service = find(services, (service) => service.serviceName === node);
let color = '#88CEA5';
let color = isDarkMode ? '#7CA568' : '#D5F2BB';
if (!service) {
return {
id: node,
@ -54,9 +53,9 @@ export const getGraphData = (serviceMap): graphDataType => {
};
}
if (service.errorRate > 0) {
color = '#F98989';
color = isDarkMode ? '#DB836E' : '#F98989';
} else if (service.fourXXRate > 0) {
color = '#F9DA7B';
color = isDarkMode ? '#C79931' : '#F9DA7B';
}
const { fontSize, width } = getDimensions(service.callRate, highestCallRate);
return {