Skip to content

Commit 3c4c609

Browse files
sumedhkumar96sumedhkumar96
committed
fixed sonarqube issues
1 parent 3f1f719 commit 3c4c609

2 files changed

Lines changed: 44 additions & 69 deletions

File tree

‎src/components/BMDashboard/WeeklyProjectSummary/MostFrequentKeywords/MostFrequentKeywords.jsx‎

Lines changed: 24 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,9 @@ function MostFrequentKeywords({ darkMode: propDarkMode }) {
106106

107107
// Generate clean data for any project
108108
const generateProjectSpecificData = projectName => {
109-
if (projectName.toLowerCase().includes('duplicable city center')) {
109+
const isDuplicableCityCenter = projectName.toLowerCase().includes('duplicable city center');
110+
111+
if (isDuplicableCityCenter) {
110112
return [
111113
{ tag: 'Modular Design', count: 85, date: '2025-03-15' },
112114
{ tag: 'Prefabrication', count: 78, date: '2025-04-22' },
@@ -497,12 +499,10 @@ function MostFrequentKeywords({ darkMode: propDarkMode }) {
497499

498500
const handleTouchEnd = event => {
499501
event.preventDefault();
500-
// Don't hide immediately on touch end - let the timeout handle it
501502
};
502503

503504
const handleTouchMove = event => {
504505
event.preventDefault();
505-
// Update tooltip position on touch move
506506
if (!tooltip.visible) return;
507507

508508
const svgRect = svgRef.current.getBoundingClientRect();
@@ -555,12 +555,9 @@ function MostFrequentKeywords({ darkMode: propDarkMode }) {
555555
.attr('transform', `translate(${x}, ${y})`)
556556
.style('pointer-events', 'none');
557557

558-
let tagFontSize;
559-
if (sizes.isMobile) {
560-
tagFontSize = Math.min(sizes.maxFontSize, Math.max(9, r * 0.22));
561-
} else {
562-
tagFontSize = Math.min(sizes.maxFontSize, Math.max(10, r * 0.22));
563-
}
558+
const tagFontSize = sizes.isMobile
559+
? Math.min(sizes.maxFontSize, Math.max(9, r * 0.22))
560+
: Math.min(sizes.maxFontSize, Math.max(10, r * 0.22));
564561

565562
const countFontSize = sizes.countFontSize;
566563

@@ -642,24 +639,11 @@ function MostFrequentKeywords({ darkMode: propDarkMode }) {
642639
};
643640

644641
// Function to render all bubbles
645-
const renderBubbles = useCallback(
646-
(svg, positions, sizes) => {
647-
positions.forEach((pos, i) => {
648-
renderSingleBubble(svg, pos, i, sizes);
649-
});
650-
},
651-
[
652-
darkMode,
653-
getNodeColor,
654-
handleMouseEnter,
655-
handleMouseMove,
656-
handleMouseLeave,
657-
handleTouchStart,
658-
handleTouchEnd,
659-
handleTouchMove,
660-
getDisplayText,
661-
],
662-
);
642+
const renderBubbles = useCallback((svg, positions, sizes) => {
643+
positions.forEach((pos, i) => {
644+
renderSingleBubble(svg, pos, i, sizes);
645+
});
646+
}, []);
663647

664648
// Function to render tooltip
665649
const renderTooltip = useCallback(
@@ -823,12 +807,12 @@ function MostFrequentKeywords({ darkMode: propDarkMode }) {
823807
}, [
824808
tags,
825809
dimensions,
826-
darkMode,
827810
getPositions,
828811
getResponsiveSizes,
829812
tooltip,
830813
renderBubbles,
831814
renderTooltip,
815+
darkMode,
832816
]);
833817

834818
useEffect(() => {
@@ -841,14 +825,11 @@ function MostFrequentKeywords({ darkMode: propDarkMode }) {
841825

842826
options.push({
843827
label: '📊 TEST DATASETS',
844-
options: Object.entries(testDatasets).map(([key, dataset]) => {
845-
const cleanLabel = dataset.label;
846-
return {
847-
label: cleanLabel,
848-
value: key,
849-
type: 'test',
850-
};
851-
}),
828+
options: Object.entries(testDatasets).map(([key, dataset]) => ({
829+
label: dataset.label,
830+
value: key,
831+
type: 'test',
832+
})),
852833
});
853834

854835
if (projects.length > 0) {
@@ -896,12 +877,13 @@ function MostFrequentKeywords({ darkMode: propDarkMode }) {
896877
});
897878

898879
const getOptionStyles = (base, state) => {
899-
let backgroundColor;
900-
if (state.isFocused) {
901-
backgroundColor = darkMode ? '#475569' : '#e2e8f0';
902-
} else {
903-
backgroundColor = darkMode ? '#1e293b' : 'white';
904-
}
880+
const backgroundColor = state.isFocused
881+
? darkMode
882+
? '#475569'
883+
: '#e2e8f0'
884+
: darkMode
885+
? '#1e293b'
886+
: 'white';
905887

906888
return {
907889
...base,

‎src/components/BMDashboard/WeeklyProjectSummary/MostFrequentKeywords/MostFrequentKeywords.module.css‎

Lines changed: 20 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,6 @@
7474
transition: all 0.2s ease;
7575
cursor: pointer;
7676
box-sizing: border-box;
77-
/* Left justify text in date fields */
7877
text-align: left;
7978
}
8079

@@ -88,22 +87,19 @@
8887
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
8988
}
9089

91-
/* Override placeholder alignment */
90+
/* Placeholder alignment */
9291
.mfkDatepicker::placeholder {
9392
text-align: left;
9493
}
9594

96-
/* For WebKit browsers */
9795
.mfkDatepicker::-webkit-input-placeholder {
9896
text-align: left;
9997
}
10098

101-
/* For Firefox */
10299
.mfkDatepicker::-moz-placeholder {
103100
text-align: left;
104101
}
105102

106-
/* For Internet Explorer */
107103
.mfkDatepicker:-ms-input-placeholder {
108104
text-align: left;
109105
}
@@ -219,10 +215,8 @@
219215
width: 28px;
220216
height: 28px;
221217
font-size: 12px;
222-
margin-top: 0;
223-
margin-bottom: 0;
218+
margin: 0;
224219
align-self: flex-end;
225-
margin-top: -0.25rem;
226220
}
227221

228222
.mfkLabel {
@@ -245,7 +239,6 @@
245239
width: 100%;
246240
box-sizing: border-box;
247241
min-width: 120px;
248-
/* Left justify text on mobile too */
249242
text-align: left;
250243
}
251244

@@ -381,7 +374,7 @@
381374
color: #94a3b8 !important;
382375
}
383376

384-
/* React-datepicker base styles (light mode) */
377+
/* React-datepicker base styles (light mode) - improved contrast */
385378
.mfkContainer :global(.react-datepicker) {
386379
background-color: #ffffff !important;
387380
border: 1px solid #e2e8f0 !important;
@@ -399,15 +392,15 @@
399392
}
400393

401394
.mfkContainer :global(.react-datepicker__header) {
402-
background-color: #f9fafb !important;
395+
background-color: #f8fafc !important;
403396
border-bottom: 1px solid #e2e8f0 !important;
404397
padding: 0.75rem 0.75rem 0.5rem 0.75rem !important;
405398
border-top-left-radius: 0.75rem !important;
406399
border-top-right-radius: 0.75rem !important;
407400
}
408401

409402
.mfkContainer :global(.react-datepicker__current-month) {
410-
color: #1e293b !important;
403+
color: #0f172a !important;
411404
font-weight: 600 !important;
412405
font-size: 0.9rem !important;
413406
margin-bottom: 0.5rem !important;
@@ -434,7 +427,7 @@
434427
}
435428

436429
.mfkContainer :global(.react-datepicker__day) {
437-
color: #1e293b !important;
430+
color: #0f172a !important;
438431
width: 2rem !important;
439432
line-height: 2rem !important;
440433
border-radius: 9999px !important;
@@ -445,7 +438,7 @@
445438
}
446439

447440
.mfkContainer :global(.react-datepicker__day:hover) {
448-
background-color: #f1f5f9 !important;
441+
background-color: #e2e8f0 !important;
449442
transform: scale(1.05) !important;
450443
}
451444

@@ -462,19 +455,19 @@
462455

463456
.mfkContainer :global(.react-datepicker__day--keyboard-selected) {
464457
background-color: #dbeafe !important;
465-
color: #1e293b !important;
458+
color: #0f172a !important;
466459
font-weight: 500 !important;
467460
}
468461

469462
.mfkContainer :global(.react-datepicker__day--in-range) {
470463
background-color: #dbeafe !important;
471-
color: #1e293b !important;
464+
color: #0f172a !important;
472465
border-radius: 0 !important;
473466
}
474467

475468
.mfkContainer :global(.react-datepicker__day--in-selecting-range) {
476469
background-color: #e6f0ff !important;
477-
color: #1e293b !important;
470+
color: #0f172a !important;
478471
border-radius: 0 !important;
479472
}
480473

@@ -488,11 +481,11 @@
488481
}
489482

490483
.mfkContainer :global(.react-datepicker__day--outside-month) {
491-
color: #9ca3af !important;
484+
color: #64748b !important;
492485
}
493486

494487
.mfkContainer :global(.react-datepicker__day--disabled) {
495-
color: #d1d5db !important;
488+
color: #cbd5e1 !important;
496489
cursor: not-allowed !important;
497490
}
498491

@@ -508,7 +501,7 @@
508501
}
509502

510503
.mfkContainer :global(.react-datepicker__navigation-icon::before) {
511-
border-color: #4b5563 !important;
504+
border-color: #1e293b !important;
512505
border-width: 2px 2px 0 0 !important;
513506
height: 8px !important;
514507
width: 8px !important;
@@ -541,7 +534,7 @@
541534
display: none !important;
542535
}
543536

544-
/* React-datepicker dark mode */
537+
/* React-datepicker dark mode - improved contrast */
545538
.mfkContainer.darkMode :global(.react-datepicker) {
546539
background-color: #0f172a !important;
547540
border-color: #334155 !important;
@@ -553,16 +546,16 @@
553546
}
554547

555548
.mfkContainer.darkMode :global(.react-datepicker__header) {
556-
background-color: #1a2634 !important;
549+
background-color: #1e293b !important;
557550
border-bottom-color: #334155 !important;
558551
}
559552

560553
.mfkContainer.darkMode :global(.react-datepicker__current-month) {
561-
color: #f1f5f9 !important;
554+
color: #f8fafc !important;
562555
}
563556

564557
.mfkContainer.darkMode :global(.react-datepicker__day-name) {
565-
color: #cbd5e1 !important;
558+
color: #e2e8f0 !important;
566559
background-color: transparent !important;
567560
}
568561

@@ -608,15 +601,15 @@
608601
}
609602

610603
.mfkContainer.darkMode :global(.react-datepicker__day--outside-month) {
611-
color: #4b5563 !important;
604+
color: #64748b !important;
612605
}
613606

614607
.mfkContainer.darkMode :global(.react-datepicker__day--disabled) {
615-
color: #4b5563 !important;
608+
color: #4a5568 !important;
616609
}
617610

618611
.mfkContainer.darkMode :global(.react-datepicker__navigation-icon::before) {
619-
border-color: #9ca3af !important;
612+
border-color: #cbd5e1 !important;
620613
}
621614

622615
.mfkContainer.darkMode :global(.react-datepicker__navigation:hover .react-datepicker__navigation-icon::before) {

0 commit comments

Comments
 (0)