Skip to content

Commit 81e9af5

Browse files
author
Alexandra Zwinger
committed
Make Score responsive
1 parent 9e8b7e5 commit 81e9af5

File tree

1 file changed

+182
-145
lines changed

1 file changed

+182
-145
lines changed

‎src/pages/Score.tsx‎

Lines changed: 182 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,184 +1,221 @@
11
import React from 'react';
2-
import { Bar, Line } from 'react-chartjs-2';
2+
import {Bar, Line} from 'react-chartjs-2';
33
import {
4-
Chart as ChartJS,
5-
CategoryScale,
6-
LinearScale,
7-
BarElement,
8-
LineElement,
9-
PointElement,
10-
Title,
11-
Tooltip,
12-
Legend,
13-
ChartOptions
4+
Chart as ChartJS,
5+
CategoryScale,
6+
LinearScale,
7+
BarElement,
8+
LineElement,
9+
PointElement,
10+
Title,
11+
Tooltip,
12+
Legend,
13+
ChartOptions
1414
} from 'chart.js';
1515

1616
ChartJS.register(
17-
CategoryScale,
18-
LinearScale,
19-
BarElement,
20-
LineElement,
21-
PointElement,
22-
Title,
23-
Tooltip,
24-
Legend
17+
CategoryScale,
18+
LinearScale,
19+
BarElement,
20+
LineElement,
21+
PointElement,
22+
Title,
23+
Tooltip,
24+
Legend
2525
);
2626

27-
const weeks = Array.from({ length: 20 }, (_, i) => `W${i + 1}`);
27+
const weeks = Array.from({length: 20}, (_, i) => `W${i + 1}`);
2828

2929
const dataHorizontal = {
30-
labels: ['Rechnerkommunikation', 'Mathe I', 'Statistik', 'Datenbanken'],
31-
datasets: [{
32-
data: [3, 4, 10, 20],
33-
backgroundColor: '#5FA5A1',
34-
hoverBackgroundColor: '#DFB15A',
35-
borderColor: '#457A7A',
36-
borderWidth: 0,
37-
barThickness: 30
38-
}]
30+
labels: ['Rechnerkommunikation', 'Mathe I', 'Statistik', 'Datenbanken'],
31+
datasets: [{
32+
data: [3, 4, 10, 20],
33+
backgroundColor: '#5FA5A1',
34+
hoverBackgroundColor: '#DFB15A',
35+
borderColor: '#457A7A',
36+
borderWidth: 0,
37+
barThickness: 30
38+
}]
3939
};
4040

4141
const dataVertical = {
42-
labels: ['alex_css_queen', 'jonas_677', 'luca_frings_bums', 'konsti229', 'ichbindave'],
43-
datasets: [{
44-
data: [15, 10, 6, 6, 6],
45-
backgroundColor: '#5FA5A1',
46-
hoverBackgroundColor: '#DFB15A',
47-
borderWidth: 0,
48-
barThickness: 90
49-
}]
42+
labels: ['alex_css_queen', 'jonas_677', 'luca_frings_bums', 'konsti229', 'ichbindave'],
43+
datasets: [{
44+
data: [15, 10, 6, 6, 6],
45+
backgroundColor: '#5FA5A1',
46+
hoverBackgroundColor: '#DFB15A',
47+
borderWidth: 0,
48+
barThickness: 90
49+
}]
5050
};
5151

5252
const dataLine = {
53-
labels: weeks,
54-
datasets: [{
55-
data: weeks.reduce((acc) => {
56-
const next = Math.min(100, (acc.slice(-1)[0] || 0) + Math.random() * 10);
57-
return [...acc, Math.round(next)];
58-
}, [] as number[]),
59-
fill: false,
60-
borderColor: '#DFB15A',
61-
pointBackgroundColor: '#DFB15A',
62-
tension: 0.3,
63-
borderWidth: 2
64-
}]
53+
labels: weeks,
54+
datasets: [{
55+
data: weeks.reduce((acc) => {
56+
const next = Math.min(100, (acc.slice(-1)[0] || 0) + Math.random() * 10);
57+
return [...acc, Math.round(next)];
58+
}, [] as number[]),
59+
fill: false,
60+
borderColor: '#DFB15A',
61+
pointBackgroundColor: '#DFB15A',
62+
tension: 0.3,
63+
borderWidth: 2
64+
}]
6565
};
6666

6767
const dataMultiLine = {
68-
labels: weeks,
69-
datasets: [
70-
{
71-
label: 'Rechnerkommunikation',
72-
data: [0, 0, 0, 0, 0, 0.23, 0.45, 0.9, 1.8, 3.6, 2.25, 2.7, 3.38, 7.55, 8.73, 5.1, 7.65, 4.5, 0],
73-
borderColor: '#2EF6D9',
74-
pointBackgroundColor: '#2EF6D9',
75-
tension: 0.3
76-
},
77-
{
78-
label: 'Mathe I',
79-
data: [0, 0.36, 0, 0, 0.6, 1.8, 3, 2.25, 2.7, 3.38, 2.25, 2.7, 3.2, 2.84, 4.4, 2.36, 7.8, 7.2, 2.4, 0],
80-
borderColor: '#FFFFFF',
81-
pointBackgroundColor: '#FFFFFF',
82-
tension: 0.3
83-
},
84-
{
85-
label: 'Statistik',
86-
data: [0, 0, 0, 0, 0, 0.1, 0.3, 0.8, 2.5, 6, 9, 9.5, 5, 8.5, 6.8, 9, 9.3, 9, 8.7, 2],
87-
borderColor: '#CF4C4E',
88-
pointBackgroundColor: '#CF4C4E',
89-
tension: 0.3
90-
},
91-
{
92-
label: 'Datenbanken',
93-
data: [0, 0.4, 1.13, 2.25, 2.7, 3.38, 2.25, 2.7, 3.38, 1.5, 3.38, 2.25, 2.7, 1.38, 1.5, 0.63, 0.63, 0.38, 2.25, 2.7].map(v => +v.toFixed(2)),
94-
borderColor: '#DFB15A',
95-
pointBackgroundColor: '#DFB15A',
96-
tension: 0.3
97-
}
98-
]
68+
labels: weeks,
69+
datasets: [
70+
{
71+
label: 'Rechnerkommunikation',
72+
data: [0, 0, 0, 0, 0, 0.23, 0.45, 0.9, 1.8, 3.6, 2.25, 2.7, 3.38, 7.55, 8.73, 5.1, 7.65, 4.5, 0],
73+
borderColor: '#2EF6D9',
74+
pointBackgroundColor: '#2EF6D9',
75+
tension: 0.3
76+
},
77+
{
78+
label: 'Mathe I',
79+
data: [0, 0.36, 0, 0, 0.6, 1.8, 3, 2.25, 2.7, 3.38, 2.25, 2.7, 3.2, 2.84, 4.4, 2.36, 7.8, 7.2, 2.4, 0],
80+
borderColor: '#FFFFFF',
81+
pointBackgroundColor: '#FFFFFF',
82+
tension: 0.3
83+
},
84+
{
85+
label: 'Statistik',
86+
data: [0, 0, 0, 0, 0, 0.1, 0.3, 0.8, 2.5, 6, 9, 9.5, 5, 8.5, 6.8, 9, 9.3, 9, 8.7, 2],
87+
borderColor: '#CF4C4E',
88+
pointBackgroundColor: '#CF4C4E',
89+
tension: 0.3
90+
},
91+
{
92+
label: 'Datenbanken',
93+
data: [0, 0.4, 1.13, 2.25, 2.7, 3.38, 2.25, 2.7, 3.38, 1.5, 3.38, 2.25, 2.7, 1.38, 1.5, 0.63, 0.63, 0.38, 2.25, 2.7].map(v => +v.toFixed(2)),
94+
borderColor: '#DFB15A',
95+
pointBackgroundColor: '#DFB15A',
96+
tension: 0.3
97+
}
98+
]
9999
};
100100

101101
const optionsHorizontal: ChartOptions<'bar'> = {
102-
indexAxis: 'y',
103-
responsive: true,
104-
maintainAspectRatio: false,
105-
scales: {
106-
x: { grid: { display: false }, beginAtZero: true, ticks: { color: 'white' }, title: { display: true, text: 'Stunden gesamt', color: 'white' } },
107-
y: { grid: { color: 'rgba(255,255,255,0.2)' }, ticks: { color: 'white' }, title: { display: true, text: 'Modul', color: 'white' } }
108-
},
109-
plugins: { legend: { display: false } }
102+
indexAxis: 'y',
103+
responsive: true,
104+
maintainAspectRatio: false,
105+
scales: {
106+
x: {
107+
grid: {display: false},
108+
beginAtZero: true,
109+
ticks: {color: 'white'},
110+
title: {display: true, text: 'Stunden gesamt', color: 'white'}
111+
},
112+
y: {
113+
grid: {color: 'rgba(255,255,255,0.2)'},
114+
ticks: {color: 'white'},
115+
title: {display: true, text: 'Modul', color: 'white'}
116+
}
117+
},
118+
plugins: {legend: {display: false}}
110119
};
111120

112121
const optionsVertical: ChartOptions<'bar'> = {
113-
responsive: true,
114-
maintainAspectRatio: false,
115-
scales: {
116-
x: { grid: { display: false }, ticks: { color: 'white' } },
117-
y: { grid: { color: 'rgba(255,255,255,0.2)' }, beginAtZero: true, ticks: { color: 'white' }, title: { display: true, text: 'Lernstunden', color: 'white' } }
118-
},
119-
plugins: { legend: { display: false } }
122+
responsive: true,
123+
maintainAspectRatio: false,
124+
scales: {
125+
x: {grid: {display: false}, ticks: {color: 'white'}},
126+
y: {
127+
grid: {color: 'rgba(255,255,255,0.2)'},
128+
beginAtZero: true,
129+
ticks: {color: 'white'},
130+
title: {display: true, text: 'Lernstunden', color: 'white'}
131+
}
132+
},
133+
plugins: {legend: {display: false}}
120134
};
121135

122136
const optionsLine: ChartOptions<'line'> = {
123-
responsive: true,
124-
maintainAspectRatio: false,
125-
scales: {
126-
x: { grid: { display: false }, ticks: { color: 'white', callback: (v, i) => ({0:'März',5:'April',10:'Mai',15:'Juni',19:'Juli'}[i]||'') } },
127-
y: { min: 0, max: 100, ticks: { color: 'white', stepSize: 20, callback: v => `${v}%` }, grid: { color: 'rgba(255,255,255,0.2)' } }
128-
},
129-
plugins: { legend: { display: false } }
137+
responsive: true,
138+
maintainAspectRatio: false,
139+
scales: {
140+
x: {
141+
grid: {display: false},
142+
ticks: {
143+
color: 'white',
144+
callback: (v, i) => ({0: 'März', 5: 'April', 10: 'Mai', 15: 'Juni', 19: 'Juli'}[i] || '')
145+
}
146+
},
147+
y: {
148+
min: 0,
149+
max: 100,
150+
ticks: {color: 'white', stepSize: 20, callback: v => `${v}%`},
151+
grid: {color: 'rgba(255,255,255,0.2)'}
152+
}
153+
},
154+
plugins: {legend: {display: false}}
130155
};
131156

132157
const optionsMultiLine: ChartOptions<'line'> = {
133-
responsive: true,
134-
maintainAspectRatio: false,
135-
scales: {
136-
x: { grid: { display: false }, ticks: { color: 'white', callback: (v, i) => ({0:'März',5:'April',10:'Mai',15:'Juni',19:'Juli'}[i]||'') } },
137-
y: { min: 0, max: 10, ticks: { color: 'white', stepSize: 0.5 }, grid: { color: 'rgba(255,255,255,0.2)' }, title: { display: true, text: 'Stunden', color: 'white' } }
138-
},
139-
plugins: { legend: { display: true, position: 'bottom', labels: { color: 'white' } } }
158+
responsive: true,
159+
maintainAspectRatio: false,
160+
scales: {
161+
x: {
162+
grid: {display: false},
163+
ticks: {
164+
color: 'white',
165+
callback: (v, i) => ({0: 'März', 5: 'April', 10: 'Mai', 15: 'Juni', 19: 'Juli'}[i] || '')
166+
}
167+
},
168+
y: {
169+
min: 0,
170+
max: 10,
171+
ticks: {color: 'white', stepSize: 0.5},
172+
grid: {color: 'rgba(255,255,255,0.2)'},
173+
title: {display: true, text: 'Stunden', color: 'white'}
174+
}
175+
},
176+
plugins: {legend: {display: true, position: 'bottom', labels: {color: 'white'}}}
140177
};
141178

142179
export default function Score() {
143-
return (
144-
<div className="grid grid-cols-2 grid-rows-2 h-screen w-screen">
145-
<div className="p-6 flex items-center justify-center">
146-
<div className="w-full h-full rounded-[20px] p-6 flex flex-col">
147-
<h2 className="text-xl text-white mb-4">Entwicklung deiner wöchentlichen Lerngruppenstunden:</h2>
148-
<div className="flex-1 min-h-[250px]"><Line data={dataMultiLine} options={optionsMultiLine} /></div>
149-
</div>
150-
</div>
151-
<div className="p-6 flex items-center justify-center">
152-
<div className="w-full h-full bg-[#2D3443] rounded-[20px] p-6 flex flex-col">
153-
<h2 className="text-xl text-white mb-4">So viel Zeit hast du pro Fach in Lerngruppen gelernt:</h2>
154-
<div className="flex-1 min-h-[250px]"><Bar data={dataHorizontal} options={optionsHorizontal} /></div>
155-
</div>
156-
</div>
157-
<div className="p-6 flex items-center justify-center">
158-
<div className="w-full h-full bg-[#2D3443] rounded-[20px] p-6 flex flex-col">
159-
<h2 className="text-xl text-white mb-4">Deine liebsten Study Buddies sind:</h2>
160-
<div className="flex-1 min-h-[250px]"><Bar data={dataVertical} options={optionsVertical} /></div>
161-
</div>
162-
</div>
163-
<div className="p-6 flex items-center justify-center">
164-
<div className="w-full h-full rounded-[20px] p-6 flex flex-col">
165-
<h2 className="text-xl text-white mb-4">Deine Lernfortschrittsentwicklung:</h2>
166-
<div className="flex-1 min-h-[250px]"><Line data={dataLine} options={optionsLine} /></div>
167-
<div className="mt-4 flex items-center space-x-4 text-white">
168-
<button className="w-8 h-8 bg-[#247770] rounded">‹</button>
169-
<span className="font-medium">Rechnerkommunikation</span>
170-
<button className="w-8 h-8 bg-[#247770] rounded">›</button>
171-
</div>
172-
</div>
173-
</div>
174-
<div className="absolute top-0 left-1/2 w-[2px] h-full bg-gray-700" />
175-
<div className="absolute top-1/2 left-0 w-full h-[2px] bg-gray-700" />
176-
{/* <div className="absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[18rem] h-[18rem] rounded-full bg-[#5FA5A1] shadow-xl flex items-center justify-center z-10">
180+
return (
181+
<div className="flex flex-wrap relative">
182+
<div className="p-6 w-full md:w-1/2 h-auto md:h-1/2 flex items-center justify-center">
183+
<div className="w-full h-full rounded-[20px] p-6 flex flex-col">
184+
<h2 className="text-xl text-white mb-4">Entwicklung deiner wöchentlichen Lerngruppenstunden:</h2>
185+
<div className="flex-1 min-h-[250px]"><Line data={dataMultiLine} options={optionsMultiLine}/></div>
186+
</div>
187+
</div>
188+
<div className="p-6 w-full md:w-1/2 h-auto md:h-1/2 flex items-center justify-center">
189+
<div className="w-full h-full bg-[#2D3443] rounded-[20px] p-6 flex flex-col">
190+
<h2 className="text-xl text-white mb-4">So viel Zeit hast du pro Fach in Lerngruppen gelernt:</h2>
191+
<div className="flex-1 min-h-[250px]"><Bar data={dataHorizontal} options={optionsHorizontal}/></div>
192+
</div>
193+
</div>
194+
<div className="p-6 w-full md:w-1/2 h-auto md:h-1/2 flex items-center justify-center">
195+
<div className="w-full h-full bg-[#2D3443] rounded-[20px] p-6 flex flex-col">
196+
<h2 className="text-xl text-white mb-4">Deine liebsten Study Buddies sind:</h2>
197+
<div className="flex-1 min-h-[250px]"><Bar data={dataVertical} options={optionsVertical}/></div>
198+
</div>
199+
</div>
200+
<div className="p-6 w-full md:w-1/2 h-auto md:h-1/2 flex items-center justify-center">
201+
<div className="w-full h-full rounded-[20px] p-6 flex flex-col">
202+
<h2 className="text-xl text-white mb-4">Deine Lernfortschrittsentwicklung:</h2>
203+
<div className="flex-1 min-h-[250px]"><Line data={dataLine} options={optionsLine}/></div>
204+
<div className="mt-4 flex items-center space-x-4 text-white">
205+
<button className="w-8 h-8 bg-[#247770] rounded">‹</button>
206+
<span className="font-medium">Rechnerkommunikation</span>
207+
<button className="w-8 h-8 bg-[#247770] rounded">›</button>
208+
</div>
209+
</div>
210+
</div>
211+
<div className="absolute top-0 left-1/2 w-[2px] h-full md:bg-gray-700"/>
212+
<div className="absolute top-1/2 left-0 w-full h-[2px] md:bg-gray-700"/>
213+
{/* <div className="absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[18rem] h-[18rem] rounded-full bg-[#5FA5A1] shadow-xl flex items-center justify-center z-10">
177214
<div className="w-[15rem] h-[15rem] rounded-full bg-[#247770] flex flex-col items-center justify-center text-white px-4">
178215
<div className="text-[7rem] font-extrabold leading-none">15</div>
179216
<div className="text-2xl font-medium mt-2 text-center">Lerngruppen insgesamt</div>
180217
</div>
181218
</div>*/}
182-
</div>
183-
);
219+
</div>
220+
);
184221
}

0 commit comments

Comments
 (0)