Skip to content

Commit 1142d3f

Browse files
LoRy24LoRy24
authored
Merge pull request #195 from LoRy24/colori-grafici
Aggiornati i colori dei grafici
2 parents 9df7ad0 + d6c2023 commit 1142d3f

12 files changed

Lines changed: 1042 additions & 379 deletions

‎src/app/stats/economy/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default function GladysPage() {
3131
className={"mb-10"}
3232
delay={0.6}
3333
>
34-
<p className={"max-w-100 text-center mt-0"}>Approfondisci le statistiche per l'economia dell'area Insubrica</p>
34+
<p className={"max-w-180 text-center mt-0"}>Approfondisci le statistiche per l'economia dell'area Insubrica</p>
3535
</AnimatedContent>
3636
</div>
3737
<div id={"home-page-head-background"} className={"absolute -z-100 w-full h-[50vh]"}>

‎src/components/ui/stats/economy/InSuEconomySectorsGraph.tsx‎

Lines changed: 93 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import {
99
CartesianGrid,
1010
Tooltip,
1111
ResponsiveContainer,
12-
Legend
1312
} from "recharts";
13+
import {ECONOMY_COLORS} from "@/lib/insu/stats/GraphsColors";
1414

1515
const data = [
1616
{ year: 2000, primario: 2.5, secondario: 36.3, terziario: 61.3 },
@@ -41,62 +41,128 @@ const data = [
4141
{ year: 2025, primario: 1.8, secondario: 27.0, terziario: 70.2 },
4242
];
4343

44+
const CustomTooltip = ({ active, payload, label }: any) => {
45+
if (!active || !payload || !payload.length) return null;
46+
47+
return (
48+
<div className="rounded-xl border border-white/10 bg-[#0d0d0d]/95 px-4 py-3 shadow-2xl backdrop-blur-sm">
49+
<p className="mb-2 text-sm font-semibold text-white">{label}</p>
50+
<div className="space-y-1.5">
51+
{payload.map((entry: any) => (
52+
<div key={entry.name} className="flex justify-between gap-5">
53+
<span className="text-sm text-neutral-300">
54+
{entry.name}
55+
</span>
56+
<span className="text-sm font-semibold text-white">
57+
{entry.value.toFixed(1)}%
58+
</span>
59+
</div>
60+
))}
61+
</div>
62+
</div>
63+
);
64+
};
65+
66+
const CustomLegend = ({ payload }: any) => {
67+
if (!payload) return null;
68+
69+
return (
70+
<div className="flex flex-wrap items-center justify-center gap-3">
71+
{payload.map((entry: any) => (
72+
<div
73+
key={entry.value}
74+
className="flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 transition-all duration-200 hover:border-white/20 hover:bg-white/10"
75+
>
76+
<span
77+
className="h-2.5 w-2.5 rounded-full"
78+
style={{ backgroundColor: entry.color }}
79+
/>
80+
<span className="text-sm font-medium text-neutral-200">
81+
{entry.value}
82+
</span>
83+
</div>
84+
))}
85+
</div>
86+
);
87+
};
88+
4489
export function InsubricaEconomySectorsGraph() {
4590
return (
46-
<Card className="bg-[#111111] border border-lime-500/20 rounded-2xl shadow-xl">
91+
<Card className="rounded-2xl border border-white/10 bg-[#111111] shadow-xl">
4792
<CardContent className="p-6">
48-
<h2 className="text-2xl font-bold text-white mb-12 text-center">
93+
{/* Titolo più compatto */}
94+
<h2 className="mb-4 text-center text-2xl font-bold text-white">
4995
Distribuzione Settori Economici (2000–2025)
5096
</h2>
51-
<div className="h-125 pr-10">
97+
98+
{/* Legenda separata */}
99+
<div className="mb-6">
100+
<CustomLegend
101+
payload={[
102+
{ value: "Settore Primario (%)", color: ECONOMY_COLORS.primario },
103+
{ value: "Settore Secondario (%)", color: ECONOMY_COLORS.secondario },
104+
{ value: "Settore Terziario (%)", color: ECONOMY_COLORS.terziario },
105+
]}
106+
/>
107+
</div>
108+
109+
<div className="h-125 pr-6">
52110
<ResponsiveContainer width="100%" height="100%">
53111
<LineChart data={data}>
54-
<CartesianGrid stroke="#1f1f1f" />
112+
<CartesianGrid
113+
stroke="#262626"
114+
strokeDasharray="4 4"
115+
vertical={false}
116+
/>
117+
55118
<XAxis
56119
dataKey="year"
57-
stroke="#84cc16"
58-
tick={{ fill: "#84cc16" }}
120+
stroke="#A3A3A3"
121+
tick={{ fill: "#A3A3A3", fontSize: 12 }}
59122
/>
123+
60124
<YAxis
61-
stroke="#84cc16"
62-
tick={{ fill: "#84cc16" }}
125+
domain={[0, 100]}
126+
ticks={[0, 20, 40, 60, 80, 100]}
127+
stroke="#A3A3A3"
128+
tickFormatter={(value) => `${value}%`}
63129
/>
64-
<Tooltip
65-
contentStyle={{
66-
backgroundColor: "#0a0a0a",
67-
border: "1px solid #84cc16",
68-
}}
69-
labelStyle={{ color: "#84cc16" }}
70-
/>
71-
<Legend/>
130+
131+
<Tooltip content={<CustomTooltip />} />
132+
72133
<Line
73134
type="monotone"
74135
dataKey="primario"
75-
stroke="#84cc16"
76-
strokeWidth={2}
77-
dot={{ r: 4 }}
78136
name="Settore Primario (%)"
137+
stroke={ECONOMY_COLORS.primario}
138+
strokeWidth={3}
139+
dot={{ r: 3 }}
140+
activeDot={{ r: 6 }}
79141
/>
142+
80143
<Line
81144
type="monotone"
82145
dataKey="secondario"
83-
stroke="#a3e635"
84-
strokeWidth={2}
85-
dot={{ r: 4 }}
86146
name="Settore Secondario (%)"
147+
stroke={ECONOMY_COLORS.secondario}
148+
strokeWidth={3}
149+
dot={{ r: 3 }}
150+
activeDot={{ r: 6 }}
87151
/>
152+
88153
<Line
89154
type="monotone"
90155
dataKey="terziario"
91-
stroke="#bef264"
92-
strokeWidth={2}
93-
dot={{ r: 4 }}
94156
name="Settore Terziario (%)"
157+
stroke={ECONOMY_COLORS.terziario}
158+
strokeWidth={3}
159+
dot={{ r: 3 }}
160+
activeDot={{ r: 6 }}
95161
/>
96162
</LineChart>
97163
</ResponsiveContainer>
98164
</div>
99165
</CardContent>
100166
</Card>
101167
);
102-
}
168+
}

‎src/components/ui/stats/economy/sub/ComoEconomyGraph.tsx‎

Lines changed: 90 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

33
import { Card, CardContent } from "@/components/ui/card";
4+
import { ECONOMY_COLORS } from "@/lib/insu/stats/GraphsColors";
45
import {
56
LineChart,
67
Line,
@@ -9,7 +10,6 @@ import {
910
CartesianGrid,
1011
Tooltip,
1112
ResponsiveContainer,
12-
Legend
1313
} from "recharts";
1414

1515
const data = [
@@ -39,65 +39,127 @@ const data = [
3939
{ year: 2023, primario: 2, secondario: 29, terziario: 69 },
4040
{ year: 2024, primario: 2, secondario: 28.8, terziario: 69.2 },
4141
{ year: 2025, primario: 2, secondario: 28.5, terziario: 69.5 },
42-
4342
];
4443

44+
const CustomTooltip = ({ active, payload, label }: any) => {
45+
if (!active || !payload || !payload.length) return null;
46+
47+
return (
48+
<div className="rounded-xl border border-white/10 bg-[#0d0d0d]/95 px-4 py-3 shadow-2xl backdrop-blur-sm">
49+
<p className="mb-2 text-sm font-semibold text-white">{label}</p>
50+
<div className="space-y-1.5">
51+
{payload.map((entry: any) => (
52+
<div key={entry.name} className="flex justify-between gap-5">
53+
<span className="text-sm text-neutral-300">{entry.name}</span>
54+
<span className="text-sm font-semibold text-white">
55+
{entry.value.toFixed(1)}%
56+
</span>
57+
</div>
58+
))}
59+
</div>
60+
</div>
61+
);
62+
};
63+
64+
const CustomLegend = () => {
65+
const items = [
66+
{ value: "Settore Primario (%)", color: ECONOMY_COLORS.primario },
67+
{ value: "Settore Secondario (%)", color: ECONOMY_COLORS.secondario },
68+
{ value: "Settore Terziario (%)", color: ECONOMY_COLORS.terziario },
69+
];
70+
71+
return (
72+
<div className="flex flex-wrap items-center justify-center gap-3">
73+
{items.map((entry) => (
74+
<div
75+
key={entry.value}
76+
className="flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 transition-all duration-200 hover:border-white/20 hover:bg-white/10"
77+
>
78+
<span
79+
className="h-2.5 w-2.5 rounded-full"
80+
style={{ backgroundColor: entry.color }}
81+
/>
82+
<span className="text-sm font-medium text-neutral-200">
83+
{entry.value}
84+
</span>
85+
</div>
86+
))}
87+
</div>
88+
);
89+
};
90+
4591
export function ComoEconomyGraph() {
4692
return (
47-
<Card className="bg-[#111111] border border-lime-500/20 rounded-2xl shadow-xl">
93+
<Card className="rounded-2xl border border-white/10 bg-[#111111] shadow-xl">
4894
<CardContent className="p-6">
49-
<h2 className="text-2xl font-bold text-white mb-12 text-center">
95+
<h2 className="mb-4 text-center text-2xl font-bold text-white">
5096
Como
5197
</h2>
98+
99+
<div className="mb-6">
100+
<CustomLegend />
101+
</div>
102+
52103
<div className="h-64">
53104
<ResponsiveContainer width="100%" height="100%">
54-
<LineChart data={data} margin={{ top: 10, right: 48, left: 0, bottom: 0 }}>
55-
<CartesianGrid stroke="#1f1f1f" />
105+
<LineChart data={data} margin={{ top: 10, right: 24, left: 0, bottom: 0 }}>
106+
<CartesianGrid
107+
stroke="#262626"
108+
strokeDasharray="4 4"
109+
vertical={false}
110+
/>
111+
56112
<XAxis
57113
dataKey="year"
58-
stroke="#84cc16"
59-
tick={{ fill: "#84cc16" }}
114+
stroke="#A3A3A3"
115+
tick={{ fill: "#A3A3A3", fontSize: 12 }}
116+
axisLine={{ stroke: "#404040" }}
117+
tickLine={{ stroke: "#404040" }}
60118
/>
119+
61120
<YAxis
62-
stroke="#84cc16"
63-
tick={{ fill: "#84cc16" }}
64-
/>
65-
<Tooltip
66-
contentStyle={{
67-
backgroundColor: "#0a0a0a",
68-
border: "1px solid #84cc16",
69-
}}
70-
labelStyle={{ color: "#84cc16" }}
121+
domain={[0, 100]}
122+
ticks={[0, 20, 40, 60, 80, 100]}
123+
stroke="#A3A3A3"
124+
tick={{ fill: "#A3A3A3", fontSize: 12 }}
125+
axisLine={{ stroke: "#404040" }}
126+
tickLine={{ stroke: "#404040" }}
127+
tickFormatter={(value) => `${value}%`}
71128
/>
72-
<Legend verticalAlign="bottom" align="center"/>
129+
130+
<Tooltip content={<CustomTooltip />} />
131+
73132
<Line
74133
type="monotone"
75134
dataKey="primario"
76-
stroke="#84cc16"
77-
strokeWidth={2}
78-
dot={{ r: 4 }}
79135
name="Settore Primario (%)"
136+
stroke={ECONOMY_COLORS.primario}
137+
strokeWidth={3}
138+
dot={{ r: 3, fill: ECONOMY_COLORS.primario, strokeWidth: 0 }}
139+
activeDot={{ r: 6, fill: ECONOMY_COLORS.primario, stroke: "#111111", strokeWidth: 2 }}
80140
/>
81141
<Line
82142
type="monotone"
83143
dataKey="secondario"
84-
stroke="#a3e635"
85-
strokeWidth={2}
86-
dot={{ r: 4 }}
87144
name="Settore Secondario (%)"
145+
stroke={ECONOMY_COLORS.secondario}
146+
strokeWidth={3}
147+
dot={{ r: 3, fill: ECONOMY_COLORS.secondario, strokeWidth: 0 }}
148+
activeDot={{ r: 6, fill: ECONOMY_COLORS.secondario, stroke: "#111111", strokeWidth: 2 }}
88149
/>
89150
<Line
90151
type="monotone"
91152
dataKey="terziario"
92-
stroke="#bef264"
93-
strokeWidth={2}
94-
dot={{ r: 4 }}
95153
name="Settore Terziario (%)"
154+
stroke={ECONOMY_COLORS.terziario}
155+
strokeWidth={3}
156+
dot={{ r: 3, fill: ECONOMY_COLORS.terziario, strokeWidth: 0 }}
157+
activeDot={{ r: 6, fill: ECONOMY_COLORS.terziario, stroke: "#111111", strokeWidth: 2 }}
96158
/>
97159
</LineChart>
98160
</ResponsiveContainer>
99161
</div>
100162
</CardContent>
101163
</Card>
102164
);
103-
}
165+
}

0 commit comments

Comments
 (0)