From 541eaa5b66f4b103945d427e99cc5b1cb1292663 Mon Sep 17 00:00:00 2001 From: sterenz <87770613+sterenz@users.noreply.github.com> Date: Thu, 7 Dec 2023 19:10:18 +0100 Subject: [PATCH] Updated `Documentation.tsx` --- empower-italy/app/globals.css | 8 + empower-italy/app/lib/data.ts | 54 +- empower-italy/app/page.tsx | 4 +- empower-italy/components/BarChart.tsx | 2 +- empower-italy/components/Conclusions.tsx | 26 +- empower-italy/components/Countries.tsx | 15 +- empower-italy/components/Documentation.tsx | 993 +++++++++++++++++- .../components/HorizontalBarChart.tsx | 218 ---- empower-italy/components/MashUp.tsx | 14 +- .../components/OccupationBarChart.tsx | 215 ++++ 10 files changed, 1280 insertions(+), 269 deletions(-) delete mode 100644 empower-italy/components/HorizontalBarChart.tsx create mode 100644 empower-italy/components/OccupationBarChart.tsx diff --git a/empower-italy/app/globals.css b/empower-italy/app/globals.css index b74de4f..d3611f8 100644 --- a/empower-italy/app/globals.css +++ b/empower-italy/app/globals.css @@ -6,6 +6,14 @@ p { @apply pb-4 } +table, th, td { + @apply border border-gray-600 border-collapse +} + +th, td { + @apply p-2 text-left +} + .nav-button { @apply text-indigo-600 uppercase rounded-full bg-indigo-100 py-2 px-6 hover:bg-indigo-600 hover:text-indigo-100 transition-all } diff --git a/empower-italy/app/lib/data.ts b/empower-italy/app/lib/data.ts index b4d9ac8..ef836b6 100644 --- a/empower-italy/app/lib/data.ts +++ b/empower-italy/app/lib/data.ts @@ -43,22 +43,22 @@ export const HERO_DATA = [ layoutOrder: true }, { - title: "Lorem ipsum dolor sit amet consectetur.", - paragraph: "Aliquam massa iaculis in sit felis. Diam bibendum fames lectus odio porttitor consectetur purus donec. Tellus nulla tortor a orci est. Nam cursus velit facilisis sed. Egestas bibendum eget semper sed cras pellentesque. Aenean ut iaculis vitae maecenas orci mattis porta lacus. Mauris ut purus id ipsum ultricies.", + title: "EmpowerItaly's Project Journey: Unveiling the Methodological Steps", + paragraph: "Embark on the journey of EmpowerItaly's project methodology in our Workflow section. Here, we meticulously outline the systematic steps and processes undertaken to realize the project's objectives. From initial ideation to data collection, analysis, ethical considerations, and eventual conclusions, this section unveils the roadmap followed, offering insight into the structured approach employed to comprehend Italy's employment landscape comprehensively.", imageSrc: workflow, payoff: "Our workflow", layoutOrder: false }, { - title: "Lorem ipsum dolor sit amet consectetur.", - paragraph: "Aliquam massa iaculis in sit felis. Diam bibendum fames lectus odio porttitor consectetur purus donec. Tellus nulla tortor a orci est. Nam cursus velit facilisis sed. Egestas bibendum eget semper sed cras pellentesque. Aenean ut iaculis vitae maecenas orci mattis porta lacus. Mauris ut purus id ipsum ultricies.", + title: "Documentation: Insights into Italy's Workforce Dynamics", + paragraph: "Welcome to the project's documentation. Our documentation covers a diverse array of topics, including an insightful introduction, exploration of open data scenarios, quality and legal analyses, ethical considerations, technical insights, sustainability measures, visualization techniques, RDF metadata assertions, and our work methodology. Delve into each section to gain a profound understanding of our project's objectives, methodology, and conclusions, fostering a deeper comprehension of Italy's employment landscape.", imageSrc: documentation, payoff: "Project's information", layoutOrder: true }, { - title: "Lorem ipsum dolor sit amet consectetur.", - paragraph: "Aliquam massa iaculis in sit felis. Diam bibendum fames lectus odio porttitor consectetur purus donec. Tellus nulla tortor a orci est. Nam cursus velit facilisis sed. Egestas bibendum eget semper sed cras pellentesque. Aenean ut iaculis vitae maecenas orci mattis porta lacus. Mauris ut purus id ipsum ultricies.", + title: "Dataset Collection: Unveiling Insights into Italy's Workforce Diversity", + paragraph: "Welcome to EmpowerItaly's Dataset Collection, where we showcase a comprehensive array of cards representing each dataset utilized within our project. These cards provide in-depth information and relevant details regarding the datasets employed, including their origins, sources, formats, and other pertinent metadata. Dive into this section to explore the rich tapestry of data that forms the foundation of our research, shedding light on various aspects of Italy's diverse workforce.", imageSrc: datasets, payoff: "Our sources", layoutOrder: false @@ -71,16 +71,52 @@ export const HERO_DATA = [ export const DOCUMENTATION_LINKS = [ { - name: "Introduction", + name: "1. Introduction", href: "#Introduction" }, { - name: "Scenario", + name: "2. Scenario", href: "#Scenario" }, { - name: "Datasets", + name: "3. Original datasets and mashup datasets", href: "#Datasets" + }, + { + name: "4. Quality Analysis of the datasets", + href: "#Quality" + }, + { + name: "5. Legal Analysis", + href: "#Legal" + }, + { + name: "6. Ethics Analysis", + href: "#Ethics" + }, + { + name: "7. Technical Analysis", + href: "#Technical" + }, + { + name: "8. Sustainability of updating the datasets over time", + href: "#Sustainability" + }, + { + name: "9. Visualization", + href: "#Visualization" + }, + { + name: "10. RDF Assertation of Metadata", + href: "#RDF" + }, + { + name: "11. Our Work Praxis", + href: "#Praxis" + }, + { + name: "12. Conclusions", + href: "#Conclusions" } ]; diff --git a/empower-italy/app/page.tsx b/empower-italy/app/page.tsx index a4450f6..5cdc931 100644 --- a/empower-italy/app/page.tsx +++ b/empower-italy/app/page.tsx @@ -7,7 +7,7 @@ import BarChart from "@/components/BarChart"; import NumbersAge from "@/components/NumbersAge"; import Conclusions from "@/components/Conclusions"; import MashUp from "@/components/MashUp"; -import HorizontalBarChart from "@/components/HorizontalBarChart"; +import OccupationBarChart from "@/components/OccupationBarChart"; import Map from "@/components/Map"; import Countries from "@/components/Countries"; @@ -33,7 +33,7 @@ export default function Home() { - + diff --git a/empower-italy/components/BarChart.tsx b/empower-italy/components/BarChart.tsx index 758fbba..aeec960 100644 --- a/empower-italy/components/BarChart.tsx +++ b/empower-italy/components/BarChart.tsx @@ -119,7 +119,7 @@ export default function BarChart() { display: true, text: 'Rate of Education Level', }, - suggestedMin: 0, + suggestedMin: 60, }, }, }; diff --git a/empower-italy/components/Conclusions.tsx b/empower-italy/components/Conclusions.tsx index 4b2af8a..7c5a8c5 100644 --- a/empower-italy/components/Conclusions.tsx +++ b/empower-italy/components/Conclusions.tsx @@ -1,4 +1,5 @@ import Image from "next/image" +import Link from "next/link" import conclusions from "@/public/conclusions.jpg" export default function Conclusion() { @@ -8,24 +9,17 @@ export default function Conclusion() {
{/* `grid` class is needed to use `place-self-end` on the button */}

Our conclusions

-

Placerat in maecenas iaculis at lacus enim. Nibh lorem phasellus tortor eu diam adipiscing a facilisis scelerisque. Turpis pellentesque tristique tellus vitae. Consectetur egestas ut faucibus in nam. Neque ipsum tristique pulvinar faucibus lorem dignissim auctor. Dignissim aliquam diam dis mattis felis ligula. Et aliquet elementum amet at. +

+ This project aimed at understanding significant differences between immigrants and Italians in the labour market, assessing the foreign distribution in the country, their level of education and making a comparison between these two groups in the industry sectors and in terms of activity and unemployment. In an overall it's clear the existence of a significant disparity.

-

Nisi ac in lorem quis orci cras sed varius vitae. Sem curabitur facilisi mauris magna faucibus id malesuada pretium porta. Enim parturient interdum interdum felis amet aliquet mauris. Semper pretium blandit tempor turpis mi. Scelerisque pellentesque non felis adipiscing sed sed dis euismod. Fermentum amet sociis dignissim velit integer lectus. Consectetur nibh viverra enim aliquam feugiat. +

+ Since the immigrant population is substantially smaller compared to the Italian one, they will consequently represent a smaller proportion in the labour market, but still they are always present in all the shown sectors and with further studies it could be understood if they complement the labour market when there's a lack of professionals in Italy or not.

-
diff --git a/empower-italy/components/Countries.tsx b/empower-italy/components/Countries.tsx index 5434f3e..b0770fa 100644 --- a/empower-italy/components/Countries.tsx +++ b/empower-italy/components/Countries.tsx @@ -74,7 +74,18 @@ export default function Countries() { hover:drop-shadow-md transition-all "> -

Top 10 citizenships

+
+

Top 10 citizenships

+

+ in 2022 +

+
{/* conditional rendering */} {loading ? (

Loading...

@@ -84,7 +95,7 @@ export default function Countries() {
    {topCitizenships.map((item, index) => (
  • -

    {item.citizenship}

    +

    {item.citizenship}

    {item.population.toLocaleString()}

    • ))} diff --git a/empower-italy/components/Documentation.tsx b/empower-italy/components/Documentation.tsx index 9a1ba06..b35e41c 100644 --- a/empower-italy/components/Documentation.tsx +++ b/empower-italy/components/Documentation.tsx @@ -19,7 +19,7 @@ export default function Documentation({ links }: DocumentationProps) { return (
    -
    +
    -
    diff --git a/empower-italy/components/HorizontalBarChart.tsx b/empower-italy/components/HorizontalBarChart.tsx deleted file mode 100644 index a43c238..0000000 --- a/empower-italy/components/HorizontalBarChart.tsx +++ /dev/null @@ -1,218 +0,0 @@ -'use client' - -import { useCallback, useEffect, useState } from "react"; -import Link from "next/link"; -import { - Chart as ChartJS, - BarElement, - CategoryScale, - LinearScale, - Title, - Tooltip, - Legend -} from 'chart.js'; -import { Bar } from 'react-chartjs-2'; - -ChartJS.register(BarElement, CategoryScale, LinearScale, Title, Tooltip, Legend); - -interface OccupationDataAll { - foreign: OccupationData[]; - italian: OccupationData[]; -} - -interface OccupationData { - OCCUPATION: string; - YEAR: string; - VALUE: number; -} - -export default function HorizontalBarChart() { - const [loading, setLoading] = useState(true); - const [error, setError] = useState(null); - const [jsonData, setJsonData] = useState(null); - const [occupation, setOccupation] = useState('industry'); - const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({ - labels: [], - datasets: [], - }); - - - useEffect(() => { - const fetchData = async () => { - try { - const response = await fetch('https://raw.githubusercontent.com/openaccesstoimmigrants/openaccesstoimmigrants/main/_datasets/Clean/D6/occupations_rate.json'); - if (!response.ok) { - throw new Error("Network response was not ok.") - } - - const data = await response.json(); - setJsonData(data as OccupationDataAll); - setLoading(false); - - } catch (error) { - console.error("Error fetching data:", error); - setError("An error occurred while fetching data."); - setLoading(false); - } - }; - - fetchData(); - }, []); - - const getChartData = useCallback(() => { - if (!jsonData) { - console.log('Data not available.'); - return { labels: [], datasets: [] }; - } - - const italianOccupationData = jsonData.italian?.filter(data => data.OCCUPATION === occupation) || []; - const foreignOccupationData = jsonData.foreign?.filter(data => data.OCCUPATION === occupation) || []; - - const years = italianOccupationData.map(data => data.YEAR); - const italianValues = italianOccupationData.map(data => data.VALUE); - const foreignValues = foreignOccupationData.map(data => data.VALUE); - - setChartData((prevState: any) => ({ - ...prevState, - labels: years, - datasets: [ - { - label: 'Italian', - data: italianValues, - backgroundColor: 'rgba(79, 70, 229, 0.6)', - borderColor: 'rgba(79, 70, 229, 1)', - borderWidth: 1, - }, - { - label: 'Foreign', - data: foreignValues, - backgroundColor: 'rgba(234, 88, 12, 0.6)', - borderColor: 'rgba(234, 88, 12, 1)', - borderWidth: 1, - }, - ], - })); - }, [occupation, jsonData]); - - // Update chart data when occupation or jsonData changes - useEffect(() => { - getChartData(); - }, [getChartData]); - - const options = { - maintainAspectRatio: false, - responsive: true, - //indexAxis: 'y' as const, - scales: { - x: { - title: { - display: true, - text: 'Number of workers (thousand)', - }, - }, - y: { - title: { - display: false, - }, - suggestedMin: 11000, - suggestedMax: 11000, // Set a fixed maximum value for the y-axis - }, - }, - }; - - const handleOccupationChange = (selectedOccupation: string) => { - setOccupation(selectedOccupation); - }; - - return ( -
    - -
    -

    Occupation: {occupation}

    -
    - -
    -
    -
    - ); -} - - - // return ( - //
    - //
    - //
    - - //
    - //
    - //

    - // Occupation distribution - //

    - //

    - // Lorem lorem - //

    - - //
    - - //
    - // {jsonData.foreign.length > 0 || jsonData.italian.length > 0 ? ( - // - // ) : ( - //

    Loading...

    - // )} - //
    - // - // Source DX - // - //
    - //
    - //
    - //
    - // ) \ No newline at end of file diff --git a/empower-italy/components/MashUp.tsx b/empower-italy/components/MashUp.tsx index 0d35ab9..6c0df7a 100644 --- a/empower-italy/components/MashUp.tsx +++ b/empower-italy/components/MashUp.tsx @@ -204,12 +204,12 @@ export default function MashUp() { text-indigo-900 pb-8 "> - MashUp + Mash Up

    - Lorem lorem + Observing the mashup visualization is interesting to notice that immigrants with a low level of education (less than primary, primary and lower secondary school) always show a high activity rate compared to Italians. And only in the South and Islands showing a smaller unemployment rate compared to natives.

@@ -259,8 +259,8 @@ export default function MashUp() { )} - - Source DX + + Source MASHUP diff --git a/empower-italy/components/OccupationBarChart.tsx b/empower-italy/components/OccupationBarChart.tsx new file mode 100644 index 0000000..3f5ceb7 --- /dev/null +++ b/empower-italy/components/OccupationBarChart.tsx @@ -0,0 +1,215 @@ +'use client' + +import { useCallback, useEffect, useState } from "react"; +import Link from "next/link"; +import { + Chart as ChartJS, + BarElement, + CategoryScale, + LinearScale, + Title, + Tooltip, + Legend +} from 'chart.js'; +import { Bar } from 'react-chartjs-2'; + +ChartJS.register(BarElement, CategoryScale, LinearScale, Title, Tooltip, Legend); + +interface OccupationDataAll { + foreign: OccupationData[]; + italian: OccupationData[]; +} + +interface OccupationData { + OCCUPATION: string; + YEAR: string; + VALUE: number; +} + +export default function OccupationBarChart() { + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [jsonData, setJsonData] = useState(null); + const [occupation, setOccupation] = useState('industry'); + const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({ + labels: [], + datasets: [], + }); + + + useEffect(() => { + const fetchData = async () => { + try { + const response = await fetch('https://raw.githubusercontent.com/openaccesstoimmigrants/openaccesstoimmigrants/main/_datasets/Clean/D6/occupations_rate.json'); + if (!response.ok) { + throw new Error("Network response was not ok.") + } + + const data = await response.json(); + setJsonData(data as OccupationDataAll); + setLoading(false); + + } catch (error) { + console.error("Error fetching data:", error); + setError("An error occurred while fetching data."); + setLoading(false); + } + }; + + fetchData(); + }, []); + + const getChartData = useCallback(() => { + if (!jsonData) { + console.log('Data not available.'); + return { labels: [], datasets: [] }; + } + + const italianOccupationData = jsonData.italian?.filter(data => data.OCCUPATION === occupation) || []; + const foreignOccupationData = jsonData.foreign?.filter(data => data.OCCUPATION === occupation) || []; + + const years = italianOccupationData.map(data => data.YEAR); + const italianValues = italianOccupationData.map(data => data.VALUE); + const foreignValues = foreignOccupationData.map(data => data.VALUE); + + setChartData((prevState: any) => ({ + ...prevState, + labels: years, + datasets: [ + { + label: 'Italian', + data: italianValues, + backgroundColor: 'rgba(79, 70, 229, 0.6)', + borderColor: 'rgba(79, 70, 229, 1)', + borderWidth: 1, + }, + { + label: 'Foreign', + data: foreignValues, + backgroundColor: 'rgba(234, 88, 12, 0.6)', + borderColor: 'rgba(234, 88, 12, 1)', + borderWidth: 1, + }, + ], + })); + }, [occupation, jsonData]); + + // Update chart data when occupation or jsonData changes + useEffect(() => { + getChartData(); + }, [getChartData]); + + const options = { + maintainAspectRatio: false, + responsive: true, + //indexAxis: 'y' as const, + scales: { + x: { + title: { + display: false + }, + }, + y: { + title: { + display: true, + text: 'Number of workers (thousand)', + }, + suggestedMin: 11000, + suggestedMax: 11000, // Set a fixed maximum value for the y-axis + }, + }, + }; + + const handleOccupationChange = (selectedOccupation: string) => { + setOccupation(selectedOccupation); + }; + + return ( +
+
+
+
+
+

+ Occupation distribution +

+

+ Displayed below is a comparative bar chart illustrating the number of workers (in thousands) across various occupational sectors. This visualizes a clear distinction between Italian and foreign workers. The chart allows for easy selection and comparison of workforce distribution among different sectors, shedding light on the employment patterns within these demographics. +

+
+
+ { loading ? ( +

Loading...

+ ) : error ? ( +

+ {error} +

+ ) : ( + <> +
+
+ +
+ + +
+
+
+ {/*

Occupation: {occupation}

*/} +
+ +
+ + )} +
+
+
+
+
+ ); +} \ No newline at end of file