Skip to content

Commit b324d79

Browse files
skarya22skarya22
authored
[statistics] dashboard reorganization, subtitles and age distribution (#9937)
- Project and Visit filters were broken, they now appear - Added a Candidate Date Registered filter - Made filters hidden when reloading with fresh data. It was confusing before on datasets with more data than raisinbread as it would show old data until the new stuff was loaded. This was not shown in raisinbread because it loaded so fast. - Add ethnicity data to raisinbread as well as correct DoBs compared to their Date_registered - Add subtitles for Panel views in the dashboard for total counts - Added value to Pie chart tooltip from EEGNET - Added Age Distribution chart from EEGNET * Resolves #9947
1 parent 6a868b2 commit b324d79

File tree

12 files changed

+1564
-1310
lines changed

12 files changed

+1564
-1310
lines changed

‎jsx/Panel.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,14 @@ const Panel = (props) => {
9393
{props.views && props.views[activeView]['title']
9494
? props.views[activeView]['title']
9595
: props.title}
96+
{props.views && props.views[activeView]['subtitle']
97+
&& <span>
98+
{!props.views[activeView]['subtitle'].endsWith('-1')
99+
? ' | ' + `${props.views[activeView]['subtitle']}`
100+
: ' | ' + 'Loading...'
101+
}
102+
</span>
103+
}
96104
</h3>
97105
{panelViews}
98106
{props.collapsing

‎modules/statistics/css/WidgetIndex.css‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,209 @@
11
.c3-tooltip-container {
22
top: 0px !important;
3+
}
4+
5+
.filter-grid {
6+
display: grid;
7+
grid-template-columns: 1fr 1fr;
8+
gap: 20px;
9+
padding: 20px;
10+
width: 100%;
11+
}
12+
13+
.c3-chart-line.c3-target.c3-target-Total{
14+
display: none !important;
15+
}
16+
17+
/* ===== Chart Header (Title + Toggle) ===== */
18+
.chart-header {
19+
display: flex;
20+
justify-content: space-between;
21+
align-items: center;
22+
padding: 5px 15px 10px 15px;
23+
}
24+
25+
.chart-title {
26+
font-size: 1.5rem;
27+
font-weight: 700;
28+
flex: 1;
29+
}
30+
31+
/* ===== Chart Toggle Buttons ===== */
32+
.chart-toggle-wrapper {
33+
display: flex;
34+
gap: 0;
35+
flex-shrink: 0;
36+
}
37+
38+
.chart-toggle-btn {
39+
padding: 8px 16px;
40+
font-size: 0.9rem;
41+
border: 1px solid #ddd;
42+
background-color: #f8f9fa;
43+
color: #495057;
44+
cursor: pointer;
45+
transition: all 0.2s ease;
46+
text-transform: capitalize;
47+
font-weight: 500;
48+
}
49+
50+
.chart-toggle-btn:first-child {
51+
border-top-left-radius: 6px;
52+
border-bottom-left-radius: 6px;
53+
}
54+
55+
.chart-toggle-btn:last-child {
56+
border-top-right-radius: 6px;
57+
border-bottom-right-radius: 6px;
58+
}
59+
60+
.chart-toggle-btn:not(:first-child) {
61+
border-left: none;
62+
}
63+
64+
.chart-toggle-btn:hover {
65+
background-color: #246EB6;
66+
border-color: #246EB6;
67+
color: white;
68+
}
69+
70+
.chart-toggle-btn.active {
71+
background-color: #064785;
72+
color: white;
73+
border-color: #064785;
74+
box-shadow: 0 2px 4px rgba(0, 123, 255, 0.25);
75+
}
76+
77+
.chart-toggle-btn.active:hover {
78+
background-color: #043867;
79+
border-color: #043867;
80+
}
81+
82+
83+
.chart-visual-wrapper {
84+
display: flex;
85+
justify-content: center;
86+
align-items: center;
87+
width: 100%;
88+
}
89+
90+
.chart-visual-wrapper svg {
91+
display: block;
92+
margin: 0 auto;
93+
max-width: 100%;
94+
}
95+
96+
/* Mobile view: stack title and toggle vertically */
97+
@media (max-width: 600px) {
98+
.chart-header {
99+
flex-direction: column;
100+
align-items: flex-start;
101+
gap: 10px;
102+
padding: 15px 10px 10px 10px;
103+
}
104+
105+
.chart-title {
106+
font-size: 1.3rem;
107+
}
108+
109+
.chart-toggle-wrapper {
110+
align-self: stretch;
111+
}
112+
113+
.chart-toggle-btn {
114+
padding: 8px 12px;
115+
font-size: 0.85rem;
116+
flex: 1;
117+
}
118+
}
119+
120+
/* ===== Grid Wrapper for Chart Cards + Filters ===== */
121+
122+
.charts-grid {
123+
display: grid;
124+
grid-template-columns: repeat(2, 1fr);
125+
gap: 20px;
126+
padding: 20px;
127+
margin: 0 auto;
128+
width: 100%;
129+
box-sizing: border-box;
130+
}
131+
132+
#charts-one-column {
133+
grid-template-columns: 1fr;
134+
}
135+
136+
/* Chart Card */
137+
.chart-card {
138+
background-color: #ffffff;
139+
border-radius: 20px;
140+
padding: 10px;
141+
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
142+
transition: all 0.3s ease;
143+
}
144+
145+
.chart-card:hover {
146+
transform: translateY(-10px);
147+
background-color: #f9fdff;
148+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
149+
border: 1px solid #acacac;
150+
}
151+
152+
@media (max-width: 768px) {
153+
154+
body,
155+
html {
156+
width: 100%;
157+
overflow-x: hidden;
158+
}
159+
160+
.charts-grid,
161+
.chart-card,
162+
.charts-grid>[class*="col-"] {
163+
max-width: 100% !important;
164+
width: 100% !important;
165+
margin: 0 !important;
166+
padding: 0 !important;
167+
box-sizing: border-box;
168+
}
169+
170+
.chart-card svg,
171+
.chart-card .c3 {
172+
max-width: 100%;
173+
width: 100%;
174+
box-sizing: border-box;
175+
overflow-x: hidden;
176+
}
177+
178+
.chart-card .c3 {
179+
display: flex;
180+
justify-content: center;
181+
}
182+
183+
.charts-grid {
184+
grid-template-columns: 1fr;
185+
padding-left: 0 !important;
186+
padding-right: 0 !important;
187+
margin-left: 0 !important;
188+
margin-right: 0 !important;
189+
width: 100% !important;
190+
box-sizing: border-box;
191+
}
192+
193+
.charts-grid>[class*="col-"] {
194+
width: 100% !important;
195+
margin: 0 auto !important;
196+
padding-left: 0 !important;
197+
padding-right: 0 !important;
198+
box-sizing: border-box;
199+
}
200+
201+
.site-breakdown-card {
202+
width: 100% !important;
203+
box-sizing: border-box;
204+
}
205+
206+
.filter-grid {
207+
grid-template-columns: 1fr;
208+
}
3209
}

0 commit comments

Comments
 (0)