GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 15:59:01 +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); fgRef && fgRef.current && fgRef.current.zoomToFit(100, 120);
}; };
const { nodes, links } = getGraphData(serviceMap); const { nodes, links } = getGraphData(serviceMap, isDarkMode);
const graphData = { nodes, links }; const graphData = { nodes, links };
return ( return (
<Container> <Container>
@ -109,7 +109,7 @@ function ServiceMap(props: ServiceMapProps): JSX.Element {
linkAutoColorBy={(d) => d.target} linkAutoColorBy={(d) => d.target}
linkDirectionalParticles="value" linkDirectionalParticles="value"
linkDirectionalParticleSpeed={(d) => d.value} linkDirectionalParticleSpeed={(d) => d.value}
nodeCanvasObject={(node, ctx, globalScale) => { nodeCanvasObject={(node, ctx) => {
const label = transformLabel(node.id); const label = transformLabel(node.id);
const { fontSize } = node; const { fontSize } = node;
ctx.font = `${fontSize}px Roboto`; ctx.font = `${fontSize}px Roboto`;
@ -118,7 +118,6 @@ function ServiceMap(props: ServiceMapProps): JSX.Element {
ctx.fillStyle = node.color; ctx.fillStyle = node.color;
ctx.beginPath(); ctx.beginPath();
ctx.arc(node.x, node.y, width, 0, 2 * Math.PI, false); ctx.arc(node.x, node.y, width, 0, 2 * Math.PI, false);
ctx.fillStyle = isDarkMode ? '#3C8618' : '#D5F2BB';
ctx.fill(); ctx.fill();
ctx.textAlign = 'center'; ctx.textAlign = 'center';
ctx.textBaseline = 'middle'; ctx.textBaseline = 'middle';

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

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