Skip to content

Commit 773f4b9

Browse files
chrisom79chrisom79
committed
Adaptando graficas a otro tipo de pantallas
1 parent 37d6d4f commit 773f4b9

File tree

1 file changed

+43
-34
lines changed

1 file changed

+43
-34
lines changed

‎src/pages/Estadisticas.tsx‎

Lines changed: 43 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ const Estadisticas = () => {
205205
Identidad de Género
206206
</h2>
207207
<div className="flex justify-center">
208-
<ChartContainer config={chartConfig} className="h-[400px] w-full">
208+
<ChartContainer config={chartConfig} className="h-[300px] md:h-[400px] w-full">
209209
<PieChart>
210210
<Pie
211211
data={datosGenero}
@@ -228,30 +228,35 @@ const Estadisticas = () => {
228228
</div>
229229

230230
{/* Gráfica de Barras */}
231-
<div className="bg-white/10 backdrop-blur-md rounded-lg p-6 border border-white/20">
232-
<h2 className="text-2xl font-semibold mb-4 text-black text-center">
231+
<div className="bg-white/10 backdrop-blur-md rounded-lg p-4 md:p-6 border border-white/20">
232+
<h2 className="text-2xl font-semibold mb-3 md:mb-4 text-black text-center">
233233
Cantidad por Género
234234
</h2>
235-
<ChartContainer config={chartConfig} className="h-[400px]">
236-
<BarChart data={datosGenero} layout="vertical">
235+
<ChartContainer config={chartConfig} className="h-[260px] md:h-[360px] w-full">
236+
<BarChart
237+
data={datosGenero}
238+
layout="vertical"
239+
margin={{ top: 5, right: 8, left: 60, bottom: 5 }}
240+
>
237241
<CartesianGrid strokeDasharray="3 3" stroke="#ffffff20" />
238242
<XAxis
239243
type="number"
240244
stroke="#ffffff80"
241-
tick={{ fill: '#ffffff' }}
245+
tick={{ fill: '#ffffff', fontSize: 10 }}
242246
/>
243247
<YAxis
244248
type="category"
245249
dataKey="response"
246250
stroke="#ffffff80"
247-
tick={{ fill: '#ffffff' }}
248-
width={120}
251+
tick={{ fill: '#ffffff', fontSize: 10 }}
252+
width={70}
249253
/>
250254
<ChartTooltip content={customTooltip} />
251255
<Bar
252256
dataKey="count"
253257
fill="#FF6B9D"
254-
radius={[0, 8, 8, 0]}
258+
radius={[0, 6, 6, 0]}
259+
barSize={22}
255260
/>
256261
</BarChart>
257262
</ChartContainer>
@@ -266,7 +271,7 @@ const Estadisticas = () => {
266271
Distribución por Edad
267272
</h2>
268273
<div className="flex justify-center">
269-
<ChartContainer config={chartConfig} className="h-[400px] w-full">
274+
<ChartContainer config={chartConfig} className="h-[300px] md:h-[400px] w-full">
270275
<PieChart>
271276
<Pie
272277
data={datosEdad}
@@ -289,33 +294,36 @@ const Estadisticas = () => {
289294
</div>
290295

291296
{/* Gráfica de Línea - Edad */}
292-
<div className="bg-white/10 backdrop-blur-md rounded-lg p-6 border border-white/20">
293-
<h2 className="text-2xl font-semibold mb-4 text-black text-center">
297+
<div className="bg-white/10 backdrop-blur-md rounded-lg p-4 md:p-6 border border-white/20">
298+
<h2 className="text-2xl font-semibold mb-3 md:mb-4 text-black text-center">
294299
Distribución por Rango de Edad
295300
</h2>
296-
<ChartContainer config={chartConfig} className="h-[400px]">
297-
<LineChart data={datosEdad}>
301+
<ChartContainer config={chartConfig} className="h-[260px] md:h-[360px] w-full">
302+
<LineChart
303+
data={datosEdad}
304+
margin={{ top: 5, right: 8, left: 8, bottom: 32 }}
305+
>
298306
<CartesianGrid strokeDasharray="3 3" stroke="#ffffff20" />
299307
<XAxis
300308
dataKey="age_range"
301309
stroke="#ffffff80"
302-
tick={{ fill: '#ffffff' }}
303-
angle={-45}
310+
tick={{ fill: '#ffffff', fontSize: 10 }}
311+
angle={-35}
304312
textAnchor="end"
305-
height={80}
313+
height={50}
306314
/>
307315
<YAxis
308316
stroke="#ffffff80"
309-
tick={{ fill: '#ffffff' }}
317+
tick={{ fill: '#ffffff', fontSize: 10 }}
310318
/>
311319
<ChartTooltip content={customTooltipEdad} />
312320
<Line
313321
type="monotone"
314322
dataKey="count"
315323
stroke="#FF6B9D"
316324
strokeWidth={3}
317-
dot={{ fill: "#FF6B9D", r: 6 }}
318-
activeDot={{ r: 8 }}
325+
dot={{ fill: "#FF6B9D", r: 5 }}
326+
activeDot={{ r: 7 }}
319327
/>
320328
</LineChart>
321329
</ChartContainer>
@@ -331,7 +339,7 @@ const Estadisticas = () => {
331339
Años de Experiencia
332340
</h2>
333341
<div className="flex justify-center">
334-
<ChartContainer config={chartConfig} className="h-[400px] w-full">
342+
<ChartContainer config={chartConfig} className="h-[300px] md:h-[400px] w-full">
335343
<PieChart>
336344
<Pie
337345
data={datosExperiencia}
@@ -358,12 +366,12 @@ const Estadisticas = () => {
358366
{/* Sección de Especialidades */}
359367
<div className="grid grid-cols-1 gap-8 mb-8">
360368
{/* Gráfica de Pastel - Especialidades */}
361-
<div className="bg-white/10 backdrop-blur-md rounded-lg p-6 border border-white/20">
362-
<h2 className="text-3xl font-bold mb-6 text-black text-center border-b border-white/20 pb-3">
369+
<div className="bg-white/10 backdrop-blur-md rounded-lg p-4 md:p-6 border border-white/20">
370+
<h2 className="text-3xl font-bold mb-3 md:mb-6 text-black text-center border-b border-white/20 pb-3">
363371
Especialidades
364372
</h2>
365373
<div className="flex justify-center">
366-
<ChartContainer config={chartConfig} className="h-[600px] w-full">
374+
<ChartContainer config={chartConfig} className="h-[320px] md:h-[480px] w-full">
367375
<PieChart>
368376
<Pie
369377
data={datosEspecialidades}
@@ -372,12 +380,12 @@ const Estadisticas = () => {
372380
labelLine={false}
373381
label={({ specialty_group, percentage }) => {
374382
// Solo mostrar etiquetas para porcentajes mayores a 2%
375-
if (percentage > 2) {
383+
if (percentage > 3) {
376384
return `${specialty_group}: ${percentage}%`;
377385
}
378386
return '';
379387
}}
380-
outerRadius={180}
388+
outerRadius={150}
381389
fill="#8884d8"
382390
dataKey="count"
383391
>
@@ -395,34 +403,35 @@ const Estadisticas = () => {
395403
{/* Sección de Tecnologías */}
396404
<div className="grid grid-cols-1 gap-8 mb-8">
397405
{/* Gráfica de Barras - Tecnologías */}
398-
<div className="bg-white/10 backdrop-blur-md rounded-lg p-6 border border-white/20">
399-
<h2 className="text-3xl font-bold mb-6 text-black text-center border-b border-white/20 pb-3">
406+
<div className="bg-white/10 backdrop-blur-md rounded-lg p-4 md:p-6 border border-white/20">
407+
<h2 className="text-3xl font-bold mb-3 md:mb-6 text-black text-center border-b border-white/20 pb-3">
400408
Tecnologías
401409
</h2>
402-
<ChartContainer config={chartConfig} className="h-[800px]">
410+
<ChartContainer config={chartConfig} className="h-[420px] md:h-[640px] w-full">
403411
<BarChart
404412
data={[...datosTecnologias].sort((a, b) => b.mention_count - a.mention_count)}
405413
layout="vertical"
406-
margin={{ top: 5, right: 30, left: 150, bottom: 5 }}
414+
margin={{ top: 5, right: 8, left: 80, bottom: 5 }}
407415
>
408416
<CartesianGrid strokeDasharray="3 3" stroke="#ffffff20" />
409417
<XAxis
410418
type="number"
411419
stroke="#ffffff80"
412-
tick={{ fill: '#ffffff' }}
420+
tick={{ fill: '#ffffff', fontSize: 10 }}
413421
/>
414422
<YAxis
415423
type="category"
416424
dataKey="technology_name"
417425
stroke="#ffffff80"
418-
tick={{ fill: '#ffffff' }}
419-
width={140}
426+
tick={{ fill: '#ffffff', fontSize: 10 }}
427+
width={90}
420428
/>
421429
<ChartTooltip content={customTooltipTecnologias} />
422430
<Bar
423431
dataKey="mention_count"
424432
fill="#FF6B9D"
425-
radius={[0, 8, 8, 0]}
433+
radius={[0, 6, 6, 0]}
434+
barSize={18}
426435
>
427436
{datosTecnologias.map((entry, index) => (
428437
<Cell key={`cell-tech-${index}`} fill={entry.color} />

0 commit comments

Comments
 (0)