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

fix: service map label readable

Browse Source
This commit is contained in:
Pranshu Chittora 2022-05-12 15:47:47 +05:30
parent 1926998e3c
commit 07ffd13159
No known key found for this signature in database
GPG Key ID: 3A9E57A016CC0626
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,12 +5,13 @@ import { Card } from 'antd';
import Spinner from 'components/Spinner'; import Spinner from 'components/Spinner';
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import { ForceGraph2D } from 'react-force-graph'; import { ForceGraph2D } from 'react-force-graph';
import { connect } from 'react-redux'; import { connect, useSelector } from 'react-redux';
import { RouteComponentProps, withRouter } from 'react-router-dom'; import { RouteComponentProps, withRouter } from 'react-router-dom';
import { getDetailedServiceMapItems, ServiceMapStore } from 'store/actions'; import { getDetailedServiceMapItems, ServiceMapStore } from 'store/actions';
import { AppState } from 'store/reducers'; import { AppState } from 'store/reducers';
import styled from 'styled-components'; import styled from 'styled-components';
import { GlobalTime } from 'types/actions/globalTime'; import { GlobalTime } from 'types/actions/globalTime';
import AppReducer from 'types/reducer/app';
import SelectService from './SelectService'; import SelectService from './SelectService';
import { getGraphData, getTooltip, getZoomPx, transformLabel } from './utils'; import { getGraphData, getTooltip, getZoomPx, transformLabel } from './utils';
@ -53,6 +54,8 @@ export interface graphDataType {
function ServiceMap(props: ServiceMapProps): JSX.Element { function ServiceMap(props: ServiceMapProps): JSX.Element {
const fgRef = useRef(); const fgRef = useRef();
const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
const { getDetailedServiceMapItems, globalTime, serviceMap } = props; const { getDetailedServiceMapItems, globalTime, serviceMap } = props;
useEffect(() => { useEffect(() => {
@ -115,10 +118,11 @@ 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 ? '#3d0b00' : '#ffbcad';
ctx.fill(); ctx.fill();
ctx.textAlign = 'center'; ctx.textAlign = 'center';
ctx.textBaseline = 'middle'; ctx.textBaseline = 'middle';
ctx.fillStyle = '#646464'; ctx.fillStyle = isDarkMode ? '#ffffff' : '#000000';
ctx.fillText(label, node.x, node.y); ctx.fillText(label, node.x, node.y);
}} }}
onNodeClick={(node) => { onNodeClick={(node) => {