Skip to content

Commit 419a72e

Browse files
danilomartinssdanilomartinss
committed
Prettier write fix
1 parent c84d246 commit 419a72e

File tree

4 files changed

+125
-121
lines changed

4 files changed

+125
-121
lines changed

‎src/app/dashboards/covid-19/data-loader.tsx‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
1-
import {
2-
extractUniqueYears,
3-
getCovid19CSVData,
4-
} from "@/lib/data/csvUtils";
1+
import { extractUniqueYears, getCovid19CSVData } from "@/lib/data/csvUtils";
52
import { Covid19LineChart } from "./multi-region-resistance-line-charts";
63

74
export default async function DataLoader() {
85
const records = await getCovid19CSVData();
96
const years = extractUniqueYears(records);
10-
11-
return (
12-
<Covid19LineChart
13-
years={years}
14-
data={records}
15-
/>
16-
);
17-
}
7+
8+
return <Covid19LineChart years={years} data={records} />;
9+
}

‎src/app/dashboards/covid-19/multi-region-resistance-line-charts.tsx‎

Lines changed: 114 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,19 @@ import {
1919
ComposedChart,
2020
Bar,
2121
} from "recharts";
22-
import { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent } from "@/components/ui/chart";
22+
import {
23+
ChartConfig,
24+
ChartContainer,
25+
ChartLegend,
26+
ChartLegendContent,
27+
} from "@/components/ui/chart";
2328

2429
export function Covid19LineChart({
25-
years,
30+
years,
2631
data,
2732
}: {
2833
years: string[];
29-
data: Covid19Record[];
34+
data: Covid19Record[];
3035
}) {
3136
const [selectedYears, setSelectedYears] = useState<string[]>([
3237
"2020",
@@ -35,10 +40,7 @@ export function Covid19LineChart({
3540
"2023",
3641
"2024",
3742
]);
38-
const type: string[] = [
39-
"Covid-19",
40-
"Vaccine"
41-
];
43+
const type: string[] = ["Covid-19", "Vaccine"];
4244
const [selectedType, setSelectedType] = useState<string[]>([
4345
"Covid-19",
4446
"Vaccine",
@@ -56,30 +58,32 @@ export function Covid19LineChart({
5658

5759
const filteredData = useMemo(() => {
5860
if (selectedYears.length === 0 || selectedType.length === 0) {
59-
return [];
61+
return [];
6062
}
61-
63+
6264
return data
63-
.filter((item) => selectedYears.includes(item.ProveAar))
64-
.map((item) => {
65-
const result: Covid19Record = {
66-
ProveAar: item.ProveAar,
67-
Covid19: undefined,
68-
Vaccine: undefined
69-
};
70-
71-
if (selectedType.includes("Covid-19")) {
72-
result.Covid19 = item.Covid19;
73-
}
74-
if (selectedType.includes("Vaccine")) {
75-
result.Vaccine = item.Vaccine;
76-
}
77-
78-
return result;
79-
});
80-
}, [selectedYears, selectedType, data]);
81-
82-
const sortedData = filteredData.sort((a, b) => parseInt(a.ProveAar) - parseInt(b.ProveAar));
65+
.filter((item) => selectedYears.includes(item.ProveAar))
66+
.map((item) => {
67+
const result: Covid19Record = {
68+
ProveAar: item.ProveAar,
69+
Covid19: undefined,
70+
Vaccine: undefined,
71+
};
72+
73+
if (selectedType.includes("Covid-19")) {
74+
result.Covid19 = item.Covid19;
75+
}
76+
if (selectedType.includes("Vaccine")) {
77+
result.Vaccine = item.Vaccine;
78+
}
79+
80+
return result;
81+
});
82+
}, [selectedYears, selectedType, data]);
83+
84+
const sortedData = filteredData.sort(
85+
(a, b) => parseInt(a.ProveAar) - parseInt(b.ProveAar)
86+
);
8387

8488
const resetSelections = useCallback(() => {
8589
setSelectedYears([]);
@@ -93,14 +97,14 @@ export function Covid19LineChart({
9397

9498
const chartConfig = {
9599
Vaccine: {
96-
label: "Vaccine",
97-
color: generateHslColor(30,100),
100+
label: "Vaccine",
101+
color: generateHslColor(30, 100),
98102
},
99103
Covid19: {
100-
label: "Covid-19",
101-
color: generateHslColor(30,50),
104+
label: "Covid-19",
105+
color: generateHslColor(30, 50),
102106
},
103-
} satisfies ChartConfig
107+
} satisfies ChartConfig;
104108

105109
const renderDropdown = (
106110
title: string,
@@ -127,71 +131,81 @@ export function Covid19LineChart({
127131
</DropdownMenu>
128132
);
129133

130-
return (
131-
<div className="flex w-full flex-col space-y-4">
132-
<div className="flex flex-row space-x-2">
133-
<h2 className="text-xl font-bold">Filters</h2>
134-
{renderDropdown(
135-
"Select Years",
136-
years,
137-
selectedYears,
138-
handleSelectionChange(setSelectedYears)
139-
)}
140-
{renderDropdown(
141-
"Select Data",
142-
type,
143-
selectedType,
144-
handleSelectionChange(setSelectedType)
145-
)}
146-
147-
<Button variant="outline" onClick={resetSelections}>
148-
Reset All
149-
</Button>
150-
</div>
151-
<ChartContainer config={chartConfig} className="h-[300px] w-full">
152-
<div>
153-
<div className="h-[400px] w-full">
154-
<ResponsiveContainer width="100%" height="80%">
155-
<ComposedChart data={sortedData}>
156-
<CartesianGrid strokeDasharray="5 5" />
157-
<XAxis
158-
dataKey="ProveAar"
159-
label={{ value: "", position: "insideBottomRight", offset: 0 }}
160-
161-
/>
162-
<YAxis
163-
label={{ value: "Occurrences", angle: -90, position: "outsideLeft", dx: -30 }}
164-
yAxisId="left" orientation="left"
165-
stroke={chartConfig.Covid19.color}
166-
domain={['auto', 'auto']}
167-
/>
168-
<YAxis
169-
label={{ value: "", angle: -90, position: "outsideLeft" }}
170-
yAxisId="right" orientation="right"
171-
stroke={chartConfig.Vaccine.color}
172-
/>
173-
<Tooltip />
174-
<ChartLegend/>
175-
<Line
176-
key="Vaccine"
177-
type="monotone"
178-
dataKey="Vaccine"
179-
stroke={chartConfig.Vaccine.color}
180-
dot={false}
181-
yAxisId="right"
182-
/>
183-
184-
<Bar
185-
dataKey="Covid19"
186-
barSize={30}
187-
fill={chartConfig.Covid19.color}
188-
yAxisId="left"
189-
/>
190-
</ComposedChart>
191-
</ResponsiveContainer>
192-
</div>
134+
return (
135+
<div className="flex w-full flex-col space-y-4">
136+
<div className="flex flex-row space-x-2">
137+
<h2 className="text-xl font-bold">Filters</h2>
138+
{renderDropdown(
139+
"Select Years",
140+
years,
141+
selectedYears,
142+
handleSelectionChange(setSelectedYears)
143+
)}
144+
{renderDropdown(
145+
"Select Data",
146+
type,
147+
selectedType,
148+
handleSelectionChange(setSelectedType)
149+
)}
150+
151+
<Button variant="outline" onClick={resetSelections}>
152+
Reset All
153+
</Button>
154+
</div>
155+
<ChartContainer config={chartConfig} className="h-[300px] w-full">
156+
<div>
157+
<div className="h-[400px] w-full">
158+
<ResponsiveContainer width="100%" height="80%">
159+
<ComposedChart data={sortedData}>
160+
<CartesianGrid strokeDasharray="5 5" />
161+
<XAxis
162+
dataKey="ProveAar"
163+
label={{
164+
value: "",
165+
position: "insideBottomRight",
166+
offset: 0,
167+
}}
168+
/>
169+
<YAxis
170+
label={{
171+
value: "Occurrences",
172+
angle: -90,
173+
position: "outsideLeft",
174+
dx: -30,
175+
}}
176+
yAxisId="left"
177+
orientation="left"
178+
stroke={chartConfig.Covid19.color}
179+
domain={["auto", "auto"]}
180+
/>
181+
<YAxis
182+
label={{ value: "", angle: -90, position: "outsideLeft" }}
183+
yAxisId="right"
184+
orientation="right"
185+
stroke={chartConfig.Vaccine.color}
186+
/>
187+
<Tooltip />
188+
<ChartLegend />
189+
<Line
190+
key="Vaccine"
191+
type="monotone"
192+
dataKey="Vaccine"
193+
stroke={chartConfig.Vaccine.color}
194+
dot={false}
195+
yAxisId="right"
196+
/>
197+
198+
<Bar
199+
dataKey="Covid19"
200+
barSize={30}
201+
fill={chartConfig.Covid19.color}
202+
yAxisId="left"
203+
/>
204+
</ComposedChart>
205+
</ResponsiveContainer>
206+
</div>
207+
</div>
208+
</ChartContainer>
193209
</div>
194-
</ChartContainer>
195-
</div>
196-
);
210+
);
197211
}

‎src/app/dashboards/covid-19/page.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@ import DataLoader from "./data-loader";
33
export default function AntibioticResistanceAndDiseasesDashboards3() {
44
return (
55
<section className="flex w-full flex-col space-y-6 text-justify">
6-
<h1 className="text-3xl font-bold">
7-
Covid-19
8-
</h1>
6+
<h1 className="text-3xl font-bold">Covid-19</h1>
97
<p>
10-
Occurrences and vaccination data from MSIS and SYSVAK can be displayed in two synchronised plots.
8+
Occurrences and vaccination data from MSIS and SYSVAK can be displayed
9+
in two synchronised plots.
1110
</p>
1211
<DataLoader />
1312
<p className="italic">
@@ -17,16 +16,15 @@ export default function AntibioticResistanceAndDiseasesDashboards3() {
1716
className="text-primary hover:underline"
1817
>
1918
Meldingssystem for smittsomme sykdommer (MSIS), FHI
20-
</a>
21-
{" "}and{" "}
19+
</a>{" "}
20+
and{" "}
2221
<a
2322
href="https://allvis.fhi.no/sysvak/antall-vaksinerte?etter=diagnose&diagnose=COVID_19&fordeltPaa=aar"
2423
className="text-primary hover:underline"
2524
>
2625
Nasjonalt vaksinasjonsregister (SYSVAK), FHI
2726
</a>
28-
2927
</p>
3028
</section>
3129
);
32-
}
30+
}

‎src/lib/data/csvUtils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,4 +144,4 @@ export async function getCovid19CSVData(): Promise<Covid19Record[]> {
144144

145145
export function extractUniqueYears(data: Covid19Record[]): string[] {
146146
return Array.from(new Set(data.map((record) => record.ProveAar)));
147-
}
147+
}

0 commit comments

Comments
 (0)