adds a utility function to transform label

This commit is contained in:
dhrubesh 2021-05-16 15:50:32 +05:30
parent 55a7b5b1b3
commit 8fe2fe5aec
2 changed files with 10 additions and 2 deletions

View File

@ -10,7 +10,7 @@ import {
import { Spin } from "antd";
import styled from "styled-components";
import { StoreState } from "../../store/reducers";
import { getGraphData, getTooltip } from "./utils";
import { getGraphData, getTooltip, transformLabel } from "./utils";
import SelectService from "./SelectService";
import { ForceGraph2D } from "react-force-graph";
@ -95,7 +95,7 @@ const ServiceMap = (props: ServiceMapProps) => {
linkDirectionalParticles="value"
linkDirectionalParticleSpeed={(d) => d.value}
nodeCanvasObject={(node, ctx, globalScale) => {
const label = node.id;
const label = transformLabel(node.id);
const fontSize = node.fontSize;
ctx.font = `${fontSize}px Roboto`;
const width = node.width;

View File

@ -96,3 +96,11 @@ export const getTooltip = (node: {
</div>
</div>`;
};
export const transformLabel = (label: string) => {
const MAX_LENGTH = 18;
if (label.length > MAX_LENGTH) {
return `${label.slice(0, MAX_LENGTH)}..`;
}
return label;
};