Skip to content

Commit eaf18e8

Browse files
tnagorratnagorra
committed
Add scrollbar on Calendar Heatmap
- Change layout for area on information card
1 parent 4b64811 commit eaf18e8

File tree

5 files changed

+93
-48
lines changed

5 files changed

+93
-48
lines changed

‎community-dashboard/app/components/CalendarHeatMapContainer/index.tsx‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -85,22 +85,29 @@ function CalendarHeatMapContainer(props: Props) {
8585
label="Contributions"
8686
variant="stat"
8787
className={styles.chartContainer}
88+
contentClassName={styles.content}
8889
>
89-
<CalendarHeatmap
90-
startDate={range.startDate}
91-
endDate={range.endDate}
92-
values={data ?? []}
93-
classForValue={getClassForValue}
94-
tooltipDataAttrs={(value: { date?: string, count?: string }) => {
95-
if (value?.count && value?.date) {
96-
return { 'data-tip': `${value?.count} swipes on ${value?.date}` };
97-
}
98-
return undefined;
99-
}}
100-
showWeekdayLabels
101-
/>
90+
<div className={styles.calendar}>
91+
<CalendarHeatmap
92+
startDate={range.startDate}
93+
endDate={range.endDate}
94+
values={data ?? []}
95+
classForValue={getClassForValue}
96+
tooltipDataAttrs={(value: { date?: string, count?: string }) => {
97+
if (value?.count && value?.date) {
98+
return { 'data-tip': `${value?.count} swipes on ${value?.date}` };
99+
}
100+
return undefined;
101+
}}
102+
showWeekdayLabels
103+
showMonthLabels
104+
showOutOfRangeDays
105+
/>
106+
</div>
102107
<div className={styles.heatMapLegend}>
103-
<div>Low Contribution</div>
108+
<div>
109+
Low Contribution
110+
</div>
104111
<svg
105112
width="90"
106113
height="15"
@@ -133,7 +140,9 @@ function CalendarHeatMapContainer(props: Props) {
133140
);
134141
})}
135142
</svg>
136-
<div>High Contribution</div>
143+
<div>
144+
High Contribution
145+
</div>
137146
</div>
138147
<ReactTooltip />
139148
</InformationCard>

‎community-dashboard/app/components/CalendarHeatMapContainer/styles.css‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,35 @@
22
display: flex;
33
flex-grow: 1;
44

5-
.heat-map-legend {
5+
.content {
66
display: flex;
7-
gap: var(--spacing-small);
8-
align-items: center;
9-
justify-content: flex-end;
7+
flex-direction: column;
8+
gap: var(--spacing-medium);
9+
10+
.calendar {
11+
overflow-x: hidden;
12+
overflow-y: hidden;
13+
14+
&:hover {
15+
overflow-x: auto;
16+
}
17+
}
18+
19+
.heat-map-legend {
20+
display: flex;
21+
gap: var(--spacing-small);
22+
align-items: center;
23+
justify-content: flex-end;
24+
}
1025
}
1126

27+
1228
:global {
29+
.react-calendar-heatmap {
30+
margin-bottom: -2.4rem;
31+
min-height: 10rem;
32+
}
33+
1334
.react-calendar-heatmap text {
1435
font-size: var(--font-size-extra-small);
1536
fill: var(--color-text);

‎community-dashboard/app/components/InformationCard/styles.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,9 @@
8080
}
8181

8282
.value-container {
83+
display: flex;
84+
align-items: baseline;
85+
justify-content: space-between;
8386
color: var(--color-primary);
8487
font-size: var(--font-size-super-large);
8588
font-weight: var(--font-weight-bold);

‎community-dashboard/app/views/StatsBoard/index.tsx‎

Lines changed: 40 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -601,23 +601,20 @@ function StatsBoard(props: Props) {
601601
</InformationCard>
602602
<div className={styles.statsCardContainer}>
603603
<InformationCard
604-
icon={(<img src={areaSvg} alt="user icon" />)}
605-
value={(
606-
<NumberOutput
607-
className={styles.numberOutput}
608-
value={buildAreaTotalSwipes}
609-
normal
610-
invalidText={0}
604+
icon={(
605+
<img
606+
src={areaSvg}
607+
alt="user icon"
611608
/>
612609
)}
613-
label={(
614-
<div className={styles.infoLabel}>
615-
Area Reviewed
616-
</div>
617-
)}
618-
subHeading={(
610+
value={(
619611
<>
620-
Build Area
612+
<NumberOutput
613+
className={styles.numberOutput}
614+
value={buildAreaTotalSwipes}
615+
normal
616+
invalidText={0}
617+
/>
621618
<NumberOutput
622619
className={styles.areaOutput}
623620
value={buildAreaTotalArea}
@@ -627,10 +624,21 @@ function StatsBoard(props: Props) {
627624
/>
628625
</>
629626
)}
627+
label={(
628+
<div className={styles.infoLabel}>
629+
Area Swipes
630+
</div>
631+
)}
632+
subHeading="Build Area"
630633
variant="stat"
631634
/>
632635
<InformationCard
633-
icon={(<img src={featureSvg} alt="group icon" />)}
636+
icon={(
637+
<img
638+
src={featureSvg}
639+
alt="group icon"
640+
/>
641+
)}
634642
value={(
635643
<NumberOutput
636644
className={styles.numberOutput}
@@ -648,23 +656,20 @@ function StatsBoard(props: Props) {
648656
variant="stat"
649657
/>
650658
<InformationCard
651-
icon={(<img src={sceneSvg} alt="swipe icon" />)}
652-
value={(
653-
<NumberOutput
654-
className={styles.numberOutput}
655-
value={changeDetectionTotalSwipes}
656-
normal
657-
invalidText={0}
659+
icon={(
660+
<img
661+
src={sceneSvg}
662+
alt="swipe icon"
658663
/>
659664
)}
660-
label={(
661-
<div className={styles.infoLabel}>
662-
Scene Comparision
663-
</div>
664-
)}
665-
subHeading={(
665+
value={(
666666
<>
667-
Change Detection
667+
<NumberOutput
668+
className={styles.numberOutput}
669+
value={changeDetectionTotalSwipes}
670+
normal
671+
invalidText={0}
672+
/>
668673
<NumberOutput
669674
className={styles.areaOutput}
670675
value={changeDetectionTotalArea}
@@ -674,6 +679,12 @@ function StatsBoard(props: Props) {
674679
/>
675680
</>
676681
)}
682+
label={(
683+
<div className={styles.infoLabel}>
684+
Scene Compared
685+
</div>
686+
)}
687+
subHeading="Change Detection"
677688
variant="stat"
678689
/>
679690
</div>

‎community-dashboard/app/views/StatsBoard/styles.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,7 @@
182182
justify-content: flex-end;
183183
color: var(--color-text-light);
184184
font-size: var(--font-size-small);
185+
font-weight: var(--font-weight-medium);
185186
}
186187

187188
.info-label {

0 commit comments

Comments
 (0)