1
1
import { useEffect , useState } from "react" ;
2
- import Text from "components/atoms/Typography/text" ;
3
- import Tooltip from "components/atoms/Tooltip/tooltip" ;
4
2
import colors from "../../../lib/utils/color.json" ;
5
3
6
4
export interface AllSimpleColors {
@@ -19,22 +17,15 @@ export interface LanguageObject {
19
17
20
18
interface CardHorizontalBarChartProps {
21
19
languageList : LanguageObject [ ] ;
22
- withDescription : boolean ;
23
20
}
24
21
25
22
const languageToColor : AllSimpleColors = colors as AllSimpleColors ;
26
23
27
- const CardHorizontalBarChart = ( { languageList, withDescription } : CardHorizontalBarChartProps ) : JSX . Element => {
24
+ const CardHorizontalBarChart = ( { languageList } : CardHorizontalBarChartProps ) : JSX . Element => {
28
25
const sortedLangArray = languageList . sort ( ( a , b ) => b . percentageUsed - a . percentageUsed ) ;
29
26
// used this state to calculate thte percentage of each language
30
27
const [ percentage , setPercentage ] = useState < any > ( 0 ) ;
31
28
32
- const [ descriptText , setDescriptText ] = useState ( sortedLangArray [ 0 ] ?. languageName || "javascript" ) ;
33
-
34
- const handleChangeDescriptText = ( descriptText : string ) => {
35
- setDescriptText ( descriptText ) ;
36
- } ;
37
-
38
29
useEffect ( ( ) => {
39
30
if ( sortedLangArray . length === 0 ) return ;
40
31
@@ -54,7 +45,6 @@ const CardHorizontalBarChart = ({ languageList, withDescription }: CardHorizonta
54
45
index < 5 && (
55
46
< div
56
47
key = { index }
57
- onMouseOver = { ( ) => handleChangeDescriptText ( languageName ) }
58
48
className = "h-2 transition-all duration-500 ease-in-out"
59
49
style = { {
60
50
width : `${ percentageUsed < 20 ? ( percentageUsed / percentage ) * 100 : percentageUsed } %` ,
@@ -67,21 +57,6 @@ const CardHorizontalBarChart = ({ languageList, withDescription }: CardHorizonta
67
57
) ;
68
58
} ) }
69
59
</ div >
70
- { withDescription && (
71
- < div className = "flex gap-2 w-32 items-baseline" >
72
- < div
73
- className = { "w-2 h-2 rounded-full" }
74
- style = { {
75
- backgroundColor : languageToColor [ descriptText ]
76
- ? ( languageToColor [ descriptText ] . color as string )
77
- : NOTSUPPORTED ,
78
- } }
79
- />
80
- < Tooltip className = "max-w-[100px]" content = { descriptText } >
81
- < Text className = "!text-xs !truncate !font-semibold !text-light-slate-11" > { descriptText } </ Text >
82
- </ Tooltip >
83
- </ div >
84
- ) }
85
60
</ div >
86
61
) ;
87
62
} ;
0 commit comments