1- import { humanFileSize , formatDuration } from "~/utils/formats" ;
2- import { GraphTypes , ProfilerEdge , ProfilerEdges , TGraphEdge , TGraphNode } from "~/config/types" ;
1+ import { formatDuration , humanFileSize } from "~/utils/formats" ;
2+ import { GraphTypes , ProfilerEdge , ProfilerEdges , TGraphEdge , TGraphNode } from "~/config/types" ;
3+
4+ function getColorForCallCount ( callCount ) : string {
5+ if ( callCount <= 1 ) {
6+ return '#fff' ; // Sky Blue for 1 call
7+ } else if ( callCount <= 10 ) {
8+ return '#7BC8F6' ; // Lighter Sky Blue
9+ } else if ( callCount <= 25 ) {
10+ return '#4DA6FF' ; // Light Blue
11+ } else if ( callCount <= 50 ) {
12+ return '#1A8FFF' ; // Brighter Blue
13+ } else if ( callCount <= 75 ) {
14+ return '#007FFF' ; // Azure Blue
15+ } else if ( callCount <= 100 ) {
16+ return '#0059B3' ; // Royal Blue
17+ } else if ( callCount <= 250 ) {
18+ return '#FFD700' ; // Golden
19+ } else if ( callCount <= 500 ) {
20+ return '#FFA500' ; // Orange
21+ } else if ( callCount <= 750 ) {
22+ return '#FF8C00' ; // Dark Orange
23+ } else if ( callCount <= 1000 ) {
24+ return '#FF4500' ; // OrangeRed
25+ } else if ( callCount <= 2500 ) {
26+ return '#FF0000' ; // Red
27+ }
28+
29+ return '#8B0000' ; // Dark Red for 1000 to 1750 calls
30+ }
31+
32+ function getColorForPercentCount ( percent ) : string {
33+ if ( percent <= 10 ) {
34+ return '#FFFFFF' ; // White
35+ } else if ( percent <= 20 ) {
36+ return '#f19797' ; // Lighter shade towards dark red
37+ } else if ( percent <= 30 ) {
38+ return '#d93939' ; // Light shade towards dark red
39+ } else if ( percent <= 40 ) {
40+ return '#ad1e1e' ; // Intermediate lighter shade towards dark red
41+ } else if ( percent <= 50 ) {
42+ return '#982525' ; // Intermediate shade towards dark red
43+ } else if ( percent <= 60 ) {
44+ return '#862323' ; // Intermediate darker shade towards dark red
45+ } else if ( percent <= 70 ) {
46+ return '#671d1d' ; // Darker shade towards dark red
47+ } else if ( percent <= 80 ) {
48+ return '#540d0d' ; // More towards dark red
49+ } else if ( percent <= 90 ) {
50+ return '#340707' ; // Almost dark red
51+ }
52+
53+ return '#2d0606' ; // Dark red
54+ }
55+
56+ function invertHexColor ( hex ) : string {
57+ // If the first character is a hash, remove it for processing
58+ hex = hex . replace ( '#' , '' ) ;
59+
60+ // Convert hex to RGB
61+ let r = parseInt ( hex . substr ( 0 , 2 ) , 16 ) ;
62+ let g = parseInt ( hex . substr ( 2 , 2 ) , 16 ) ;
63+ let b = parseInt ( hex . substr ( 4 , 2 ) , 16 ) ;
64+
65+ // Calculate the YIQ ratio
66+ let yiq = ( ( r * 299 ) + ( g * 587 ) + ( b * 114 ) ) / 1000 ;
67+
68+ // Return black for bright colors, white for dark colors
69+ return ( yiq >= 128 ) ? '#000' : '#fff' ;
70+ }
371
472const formatValue = ( value : number , metric : string ) : string | number => {
5- const metricFormatMap : Record < string , ( v : number ) => string | number > = {
6- p_mu : ( a : number ) => `${ a } ,
7- p_pmu : ( a : number ) => `${ a } ,
8- p_cpu : ( a : number ) => `${ a } ,
9- p_wt : ( a : number ) => `${ a } ,
73+ const metricFormatMap : Record < string , ( v : number ) => string | number > = {
74+ p_mu : ( a : number ) : string => `${ a } ,
75+ p_pmu : ( a : number ) : string => `${ a } ,
76+ p_cpu : ( a : number ) : string => `${ a } ,
77+ p_wt : ( a : number ) : string => `${ a } ,
1078 mu : humanFileSize ,
1179 d_mu : humanFileSize ,
1280 pmu : humanFileSize ,
@@ -23,42 +91,66 @@ const formatValue = (value: number, metric: string): string | number => {
2391export const calcGraphData : (
2492 edges : ProfilerEdges ,
2593 metric : GraphTypes ,
26- threshold : number
94+ threshold : number ,
95+ minPercent : number
2796) => ( {
2897 nodes : TGraphNode [ ] ,
2998 edges : TGraphEdge [ ]
3099} ) =
31- ( edges : ProfilerEdges , metric , threshold = 1 ) => Object . values ( edges )
100+ ( edges : ProfilerEdges , metric : GraphTypes , threshold : number = 1 , minPercent : number = 10 ) => Object . values ( edges )
32101 . reduce ( ( arr , edge : ProfilerEdge , index ) => {
33- const metricKey = `p_${ metric } ;
102+ let nodeColor : string = '#fff' ;
103+ let nodeTextColor : string = '#000' ;
104+ let edgeColor : string = '#fff' ;
105+ let edgeLabel : string = edge . cost . ct > 1 ? `${ edge . cost . ct } : '' ;
106+
107+ if ( metric === GraphTypes . CALLS ) {
108+ const metricKey : string = `ct` ;
109+ const isImportantNode : boolean = edge . cost [ metricKey ] >= minPercent ;
110+ if ( ! isImportantNode ) {
111+ return arr
112+ }
34113
35- const isImportantNode = edge . cost . p_pmu > 10 ;
114+ nodeColor = getColorForCallCount ( edge . cost [ metricKey ] ) ;
115+ } else {
116+ const metricKey : string = `p_${ metric } ;
117+ const isImportantNode : boolean = edge . cost [ metricKey ] >= minPercent ;
118+ if ( ! isImportantNode && edge . cost [ metricKey ] <= threshold ) {
119+ return arr
120+ }
121+
122+ nodeColor = isImportantNode ? getColorForPercentCount ( edge . cost [ metricKey ] ) : '#fff' ;
123+ nodeTextColor = isImportantNode ? invertHexColor ( nodeColor ) : '#000' ;
124+
125+ edgeColor = nodeColor ;
36126
37- if ( ! isImportantNode && edge . cost [ metricKey ] <= threshold ) {
38- return arr
127+ const postfix : string = edge . cost . ct > 1 ? ` [ ${ edge . cost . ct } x ]` : '' ;
128+ edgeLabel = ` ${ formatValue ( edge . cost [ metricKey ] , metricKey ) } ${ postfix } ` ;
39129 }
40130
131+
41132 arr . nodes . push ( {
42133 data : {
43134 id : edge . callee ,
44135 name : edge . callee as string ,
45136 cost : edge . cost ,
46- color : isImportantNode ? '#e74c3c' : '#fff' ,
47- textColor : isImportantNode ? '#fff' : '#000'
137+ color : nodeColor ,
138+ textColor : nodeTextColor
48139 }
49140 } )
50141
51142 const hasNodeSource = arr . nodes . find ( node => node . data . id === edge . caller ) ;
52143
53144 if ( index > 0 && hasNodeSource ) {
54- const postfix = edge . cost . ct > 1 ? ` - ${ edge . cost . ct } : '' ;
55-
56- arr . edges . push ( { data : {
145+ arr . edges . push ( {
146+ data : {
57147 source : edge . caller || '' ,
58148 target : edge . callee ,
59- color : edge . cost . p_pmu > 10 ? '#e74c3c' : '#fff' ,
60- label : `${ formatValue ( edge . cost [ metricKey ] , metricKey ) } ${ postfix }
61- } } )
149+ color : edgeColor ,
150+ label : edgeLabel ,
151+ weight : edge . cost . ct ,
152+ }
153+ } )
62154 }
63155
64156 return arr
0 commit comments