{item.geo_nom}
@@ -112,10 +120,8 @@ export default function AtlasMap() {
);
}
-
function MapSelector() {
const mapbubbleData: MapBubbleDataProps = [];
-
switch (selectedTab) {
case 'general':
dataHistoric.data.forEach((item) => {
@@ -134,25 +140,37 @@ export default function AtlasMap() {
return (
);
+
case 'effectifs-par-secteurs':
return (
-
- )
+
+ );
+
+ case 'effectifs-par-genre':
+ return (
+
+ );
default:
break;
}
-
-
- // selectedTab
-
}
-
return (
@@ -167,7 +185,7 @@ export default function AtlasMap() {
-
+
diff --git a/client/src/pages/atlas/charts/map-pie-genders/index.jsx b/client/src/pages/atlas/charts/map-pie-genders/index.jsx
new file mode 100644
index 00000000..a09bfe3f
--- /dev/null
+++ b/client/src/pages/atlas/charts/map-pie-genders/index.jsx
@@ -0,0 +1,292 @@
+/* eslint-disable @typescript-eslint/no-this-alias */
+import React from "react";
+import Highcharts from "highcharts";
+import mapModule from "highcharts/modules/map";
+import HighchartsReact from "highcharts-react-official";
+import * as turf from "@turf/turf";
+
+import MapSkeleton from "../skeletons/map";
+
+mapModule(Highcharts);
+
+export default function MapPieGenders({
+ currentYear,
+ isLoading,
+ mapPieData,
+ polygonsData,
+}) {
+ if (isLoading) return
;
+
+ const data = mapPieData.map((item) => [
+ item.id,
+ item.effectif_feminin,
+ item.effectif_masculin,
+ item.effectif_feminin > item.effectif_masculin ? -1 : 1,
+ item.nom,
+ ]);
+
+ Highcharts.seriesType(
+ "mappie",
+ "pie",
+ {
+ center: null, // Can't be array by default anymore
+ linkedMap: null, // id of linked map
+ dataLabels: { enabled: false },
+ },
+ {
+ init: function () {
+ Highcharts.Series.prototype.init.apply(this, arguments);
+ // Respond to zooming and dragging the base map
+ Highcharts.addEvent(this.chart.mapView, "afterSetView", () => {
+ this.isDirty = true;
+ });
+ },
+ render: function () {
+ const series = this,
+ chart = series.chart,
+ linkedSeries = chart.get(series.options.linkedMap);
+ Highcharts.seriesTypes.pie.prototype.render.apply(this, arguments);
+ if (series.group && linkedSeries === "map") {
+ series.group.add(linkedSeries.group);
+ }
+ },
+ getCenter: function () {
+ const options = this.options,
+ chart = this.chart,
+ slicingRoom = 2 * (options.slicedOffset || 0);
+ if (!options.center) {
+ options.center = [null, null]; // Do the default here instead
+ }
+ // Handle lat/lon support
+ if (options.center.lat !== undefined) {
+ const projectedPos = chart.fromLatLonToPoint(options.center),
+ pixelPos = chart.mapView.projectedUnitsToPixels(projectedPos);
+ options.center = [pixelPos.x, pixelPos.y];
+ }
+ // Handle dynamic size
+ if (options.sizeFormatter) {
+ options.size = options.sizeFormatter.call(this);
+ }
+ // Call parent function
+ const result =
+ Highcharts.seriesTypes.pie.prototype.getCenter.call(this);
+ // Must correct for slicing room to get exact pixel pos
+ result[0] -= slicingRoom;
+ result[1] -= slicingRoom;
+ return result;
+ },
+ translate: function (p) {
+ this.options.center = this.userOptions.center;
+ this.center = this.getCenter();
+ return Highcharts.seriesTypes.pie.prototype.translate.call(this, p);
+ },
+ }
+ );
+
+ let maxVotes = 0;
+ // Compute max votes to find relative sizes of bubbles
+ Highcharts.each(data, function (row) {
+ maxVotes = Math.max(maxVotes, row[2]);
+ });
+
+ // Build the chart
+ const options = {
+ title: { text: "" },
+ credits: { enabled: false },
+ chart: {
+ animation: false,
+ mapNavigation: { enabled: false },
+ events: {
+ load: function () {
+ const chart = this;
+ // Add the pies after chart load, optionally with offset and connectors
+ Highcharts.each(chart.series[0].points, function (state) {
+ if (!state.id) {
+ return; // Skip points with no data, if any
+ }
+
+ let polygon;
+ if (state.geometry.type === "Polygon") {
+ polygon = turf.polygon(state.geometry.coordinates);
+ } else if (state.geometry.type === "MultiPolygon") {
+ polygon = turf.multiPolygon(state.geometry.coordinates);
+ }
+ const center = turf.centerOfMass(polygon);
+
+ // Add the pie for this state
+ chart.addSeries(
+ {
+ clip: true,
+ type: "mappie",
+ name: state.id,
+ zIndex: 6, // Keep pies above connector lines
+ sizeFormatter: function () {
+ const zoomFactor = chart.mapView.zoom / chart.mapView.minZoom;
+ return Math.max(
+ (this.chart.chartWidth / 45) * zoomFactor, // Min size
+ ((this.chart.chartWidth / 14) *
+ zoomFactor *
+ (state.effectifFeminin + state.effectifMasculin)) /
+ maxVotes
+ );
+ },
+ tooltip: {
+ pointFormatter: function () {
+ return (
+ this.territory +
+ "
Effectif étidiants " +
+ currentYear +
+ "" +
+ Highcharts.map(
+ [[this.name, this.y]].sort(function (a, b) {
+ return b[1] - a[1];
+ }),
+ function (line) {
+ return (
+ '
\u25CF ' +
+ line[0] +
+ ": " +
+ Highcharts.numberFormat(line[1], 0) +
+ "
"
+ );
+ }
+ ).join("") +
+ "
Total: " +
+ Highcharts.numberFormat(this.total, 0) +
+ " étudiant(e)s"
+ );
+ },
+ },
+ size:
+ ((state.effectifFeminin + state.effectifMasculin) * 70) /
+ maxVotes,
+ data: [
+ {
+ name: "Effectif féminin",
+ y: state.effectifFeminin,
+ color: "rgba(240,154,133,0.8)",
+ territory: state.territory,
+ },
+ {
+ name: "Effectif masculin",
+ y: state.effectifMasculin,
+ color: "rgba(246,227,150,0.8)",
+ territory: state.territory,
+ },
+ ],
+ center: {
+ lat: center.geometry.coordinates[1],
+ lon: center.geometry.coordinates[0],
+ },
+ },
+ false
+ );
+ });
+ chart.redraw();
+ },
+ },
+ },
+ colorAxis: {
+ dataClasses: [
+ {
+ from: -1,
+ to: 0,
+ color: "rgba(240,154,133,0.5)",
+ name: "Effectif féminin",
+ },
+ {
+ from: 0,
+ to: 1,
+ color: "rgba(246,227,150,0.5)",
+ name: "Effectif masculin",
+ },
+ ],
+ },
+
+ yAxis: { minRange: 2300 },
+ tooltip: { useHTML: true },
+ plotOptions: {
+ mappie: {
+ borderColor: "rgba(255,255,255,0.4)",
+ borderWidth: 1,
+ tooltip: {
+ headerFormat: "",
+ },
+ },
+ },
+ series: [
+ {
+ mapData: polygonsData,
+ data,
+ name: "Territoire",
+ borderColor: "#fff",
+ nullColor: "rgba(0, 0, 0, 0.3)",
+ showInLegend: false,
+ joinBy: "originalId",
+ keys: [
+ "originalId",
+ "effectifFeminin",
+ "effectifMasculin",
+ "value",
+ "territory",
+ ],
+ tooltip: {
+ headerFormat: "",
+ pointFormatter: function () {
+ var hoverVotes = this.hoverVotes; // Used by pie only
+ return (
+ this.nameFr +
+ "
Effectif étudiants " +
+ currentYear +
+ "" +
+ Highcharts.map(
+ [
+ ["Effectif féminin", this.effectifFeminin, "#F09A85"],
+ ["Effectif masculin", this.effectifMasculin, "#F6E396"],
+ ].sort(function (a, b) {
+ return b[1] - a[1]; // Sort tooltip by most votes
+ }),
+ function (line) {
+ return (
+ '
\u25CF ' +
+ (line[0] === hoverVotes ? "
" : "") +
+ line[0] +
+ ": " +
+ Highcharts.numberFormat(line[1], 0) +
+ (line[0] === hoverVotes ? "" : "") +
+ "
"
+ );
+ }
+ ).join("") +
+ "
Total: " +
+ Highcharts.numberFormat(
+ this.effectifFeminin + this.effectifMasculin,
+ 0
+ ) +
+ " étudiant(e)s"
+ );
+ },
+ },
+ },
+ ],
+ };
+
+ return (
+
+ );
+}
diff --git a/client/src/pages/atlas/charts/map-pie-sectors/index.jsx b/client/src/pages/atlas/charts/map-pie-sectors/index.jsx
new file mode 100644
index 00000000..1122a304
--- /dev/null
+++ b/client/src/pages/atlas/charts/map-pie-sectors/index.jsx
@@ -0,0 +1,291 @@
+/* eslint-disable @typescript-eslint/no-this-alias */
+import React from "react";
+import Highcharts from "highcharts";
+import mapModule from "highcharts/modules/map";
+import HighchartsReact from "highcharts-react-official";
+import * as turf from "@turf/turf";
+
+import MapSkeleton from "../skeletons/map";
+
+mapModule(Highcharts);
+
+export default function MapPieSectors({
+ currentYear,
+ isLoading,
+ mapPieData,
+ polygonsData,
+}) {
+ if (isLoading) return
;
+
+ const data = mapPieData.map((item) => [
+ item.id,
+ item.effectif_secteur_public,
+ item.effectif_secteur_prive,
+ item.effectif_secteur_public > item.effectif_secteur_prive ? -1 : 1,
+ item.nom,
+ ]);
+
+ Highcharts.seriesType(
+ "mappie",
+ "pie",
+ {
+ center: null, // Can't be array by default anymore
+ linkedMap: null, // id of linked map
+ dataLabels: { enabled: false },
+ },
+ {
+ init: function () {
+ Highcharts.Series.prototype.init.apply(this, arguments);
+ // Respond to zooming and dragging the base map
+ Highcharts.addEvent(this.chart.mapView, "afterSetView", () => {
+ this.isDirty = true;
+ });
+ },
+ render: function () {
+ const series = this,
+ chart = series.chart,
+ linkedSeries = chart.get(series.options.linkedMap);
+ Highcharts.seriesTypes.pie.prototype.render.apply(this, arguments);
+ if (series.group && linkedSeries === "map") {
+ series.group.add(linkedSeries.group);
+ }
+ },
+ getCenter: function () {
+ const options = this.options,
+ chart = this.chart,
+ slicingRoom = 2 * (options.slicedOffset || 0);
+ if (!options.center) {
+ options.center = [null, null]; // Do the default here instead
+ }
+ // Handle lat/lon support
+ if (options.center.lat !== undefined) {
+ const projectedPos = chart.fromLatLonToPoint(options.center),
+ pixelPos = chart.mapView.projectedUnitsToPixels(projectedPos);
+ options.center = [pixelPos.x, pixelPos.y];
+ }
+ // Handle dynamic size
+ if (options.sizeFormatter) {
+ options.size = options.sizeFormatter.call(this);
+ }
+ // Call parent function
+ const result =
+ Highcharts.seriesTypes.pie.prototype.getCenter.call(this);
+ // Must correct for slicing room to get exact pixel pos
+ result[0] -= slicingRoom;
+ result[1] -= slicingRoom;
+ return result;
+ },
+ translate: function (p) {
+ this.options.center = this.userOptions.center;
+ this.center = this.getCenter();
+ return Highcharts.seriesTypes.pie.prototype.translate.call(this, p);
+ },
+ }
+ );
+
+ let maxVotes = 0;
+ // Compute max votes to find relative sizes of bubbles
+ Highcharts.each(data, function (row) {
+ maxVotes = Math.max(maxVotes, row[2]);
+ });
+
+ // Build the chart
+ const options = {
+ title: { text: "" },
+ credits: { enabled: false },
+ chart: {
+ animation: false,
+ mapNavigation: { enabled: false },
+ events: {
+ load: function () {
+ const chart = this;
+ // Add the pies after chart load, optionally with offset and connectors
+ Highcharts.each(chart.series[0].points, function (state) {
+ if (!state.id) {
+ return; // Skip points with no data, if any
+ }
+
+ let polygon;
+ if (state.geometry.type === "Polygon") {
+ polygon = turf.polygon(state.geometry.coordinates);
+ } else if (state.geometry.type === "MultiPolygon") {
+ polygon = turf.multiPolygon(state.geometry.coordinates);
+ }
+ const center = turf.centerOfMass(polygon);
+
+ // Add the pie for this state
+ chart.addSeries(
+ {
+ clip: true,
+ type: "mappie",
+ name: state.id,
+ zIndex: 6, // Keep pies above connector lines
+ sizeFormatter: function () {
+ const zoomFactor = chart.mapView.zoom / chart.mapView.minZoom;
+ return Math.max(
+ (this.chart.chartWidth / 45) * zoomFactor, // Min size
+ ((this.chart.chartWidth / 14) *
+ zoomFactor *
+ (state.publicSector + state.privateSector)) /
+ maxVotes
+ );
+ },
+ tooltip: {
+ pointFormatter: function () {
+ return (
+ this.territory +
+ "
Effectif étidiants " +
+ currentYear +
+ "" +
+ Highcharts.map(
+ [[this.name, this.y]].sort(function (a, b) {
+ return b[1] - a[1];
+ }),
+ function (line) {
+ return (
+ '
\u25CF ' +
+ line[0] +
+ ": " +
+ Highcharts.numberFormat(line[1], 0) +
+ "
"
+ );
+ }
+ ).join("") +
+ "
Total: " +
+ Highcharts.numberFormat(this.total, 0) +
+ " étudiant(e)s"
+ );
+ },
+ },
+ size:
+ ((state.publicSector + state.privateSector) * 70) / maxVotes,
+ data: [
+ {
+ name: "Secteur public",
+ y: state.publicSector,
+ color: "rgba(116,140,192,0.8)",
+ territory: state.territory,
+ },
+ {
+ name: "Secteur privé",
+ y: state.privateSector,
+ color: "rgba(117,95,77,0.8)",
+ territory: state.territory,
+ },
+ ],
+ center: {
+ lat: center.geometry.coordinates[1],
+ lon: center.geometry.coordinates[0],
+ },
+ },
+ false
+ );
+ });
+ chart.redraw();
+ },
+ },
+ },
+ colorAxis: {
+ dataClasses: [
+ {
+ from: -1,
+ to: 0,
+ color: "rgba(116,140,192,0.5)",
+ name: "Secteur public",
+ },
+ {
+ from: 0,
+ to: 1,
+ color: "rgba(117,95,77,0.5)",
+ name: "Secteur privé",
+ },
+ ],
+ },
+
+ yAxis: { minRange: 2300 },
+ tooltip: { useHTML: true },
+ plotOptions: {
+ mappie: {
+ borderColor: "rgba(255,255,255,0.4)",
+ borderWidth: 1,
+ tooltip: {
+ headerFormat: "",
+ },
+ },
+ },
+ series: [
+ {
+ mapData: polygonsData,
+ data,
+ name: "Territoire",
+ borderColor: "#fff",
+ nullColor: "rgba(0, 0, 0, 0.3)",
+ showInLegend: false,
+ joinBy: "originalId",
+ keys: [
+ "originalId",
+ "publicSector",
+ "privateSector",
+ "value",
+ "territory",
+ ],
+ tooltip: {
+ headerFormat: "",
+ pointFormatter: function () {
+ var hoverVotes = this.hoverVotes; // Used by pie only
+ return (
+ this.nameFr +
+ "
Effectif étudiants " +
+ currentYear +
+ "" +
+ Highcharts.map(
+ [
+ ["Secteur public", this.publicSector, "#748CCO"],
+ ["Secteur privé", this.privateSector, "#755F4D"],
+ ].sort(function (a, b) {
+ return b[1] - a[1]; // Sort tooltip by most votes
+ }),
+ function (line) {
+ return (
+ '
\u25CF ' +
+ (line[0] === hoverVotes ? "
" : "") +
+ line[0] +
+ ": " +
+ Highcharts.numberFormat(line[1], 0) +
+ (line[0] === hoverVotes ? "" : "") +
+ "
"
+ );
+ }
+ ).join("") +
+ "
Total: " +
+ Highcharts.numberFormat(
+ this.publicSector + this.privateSector,
+ 0
+ ) +
+ " étudiant(e)s"
+ );
+ },
+ },
+ },
+ ],
+ };
+
+ return (
+
+ );
+}
diff --git a/client/src/pages/atlas/charts/map-with-polygon-highcharts.tsx b/client/src/pages/atlas/charts/map-with-polygon-highcharts.tsx
index 51178898..9743be26 100644
--- a/client/src/pages/atlas/charts/map-with-polygon-highcharts.tsx
+++ b/client/src/pages/atlas/charts/map-with-polygon-highcharts.tsx
@@ -2,19 +2,26 @@ import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import highchartsMap from "highcharts/modules/map";
import { MapBubbleDataProps, PolygonsDataProps } from "../../../types/atlas";
+import MapSkeleton from "./skeletons/map";
highchartsMap(Highcharts);
export default function MapWithPolygonHighcharts({
currentYear,
+ isLoading,
mapbubbleData = [],
polygonsData = [],
}: {
currentYear: string,
+ isLoading: boolean,
mapbubbleData: MapBubbleDataProps,
polygonsData: PolygonsDataProps,
}
) {
+ if (isLoading) {
+ return
;
+ }
+
const mapOptions = {
chart: {
map: "countries/ie/ie-all"
diff --git a/client/src/pages/atlas/charts/skeletons/map.tsx b/client/src/pages/atlas/charts/skeletons/map.tsx
new file mode 100644
index 00000000..6fe507e7
--- /dev/null
+++ b/client/src/pages/atlas/charts/skeletons/map.tsx
@@ -0,0 +1,6 @@
+
+export default function MapSkeleton({ height = '500px' }: { height?: string }) {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/client/src/pages/atlas/charts/skeletons/styles.scss b/client/src/pages/atlas/charts/skeletons/styles.scss
new file mode 100644
index 00000000..b72ba141
--- /dev/null
+++ b/client/src/pages/atlas/charts/skeletons/styles.scss
@@ -0,0 +1,38 @@
+.map-skeleton {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 15px;
+ background-image: linear-gradient(-45deg, #e2e2e2 15%, #e2e2e2 25%, #e2e2e2 51%, #cecece 100%);
+ -webkit-animation: AnimateBG 20s ease infinite;
+ animation: AnimateBG 20s ease infinite;
+}
+
+@-webkit-keyframes AnimateBG {
+ 0% {
+ background-position: 0% 50%;
+ }
+
+ 50% {
+ background-position: 100% 50%;
+ }
+
+ 100% {
+ background-position: 0% 50%;
+ }
+}
+
+@keyframes AnimateBG {
+ 0% {
+ background-position: 0% 50%;
+ }
+
+ 50% {
+ background-position: 100% 50%;
+ }
+
+ 100% {
+ background-position: 0% 50%;
+ }
+}
\ No newline at end of file
diff --git a/server/src/routes/tableaux/atlas/index.js b/server/src/routes/tableaux/atlas/index.js
index 8d46cf4c..78227d91 100644
--- a/server/src/routes/tableaux/atlas/index.js
+++ b/server/src/routes/tableaux/atlas/index.js
@@ -345,8 +345,103 @@ router.route('/atlas/number-of-students-by-gender-and-level')
})
res.json(ret);
- }
- );
+ });
+
+router.route('/atlas/number-of-students-by-sector-and-sublevel')
+ .get(async (req, res) => {
+ const filters = { ...req.query };
+ if (!req.query.annee_universitaire) {
+ filters.annee_universitaire = "2022-23";
+ }
+ filters.regroupement = "TOTAL";
+
+ const data = await db.collection('atlas2023').aggregate([
+ { $match: filters },
+ {
+ $group: {
+ _id: {
+ geo_id: "$geo_id",
+ geo_nom: "$geo_nom",
+ secteur: "$secteur",
+ },
+ effectif: { $sum: "$effectif" },
+ }
+ },
+ { $project: {
+ _id: 0,
+ secteur: "$_id.secteur",
+ geo_id: "$_id.geo_id",
+ geo_nom: "$_id.geo_nom",
+ effectif: 1
+ } },
+ {
+ $group: {
+ _id: { geo_id: "$geo_id", geo_nom: "$geo_nom"},
+ effectif_secteur_public: { $sum: { $cond: [{ $eq: ["$secteur", "PU"] }, "$effectif", 0] } },
+ effectif_secteur_prive: { $sum: { $cond: [{ $eq: ["$secteur", "PR"] }, "$effectif", 0] } },
+ effectif_total: { $sum: "$effectif" },
+ },
+ },
+ { $project: {
+ _id: 0,
+ id: "$_id.geo_id",
+ nom: "$_id.geo_nom",
+ effectif_secteur_public: 1,
+ effectif_secteur_prive: 1,
+ effectif_total: 1,
+ } },
+ { $sort: { effectif_total: -1 } },
+ ]).toArray();
+ res.json(data);
+ });
+
+ router.route('/atlas/number-of-students-by-gender-and-sublevel')
+ .get(async (req, res) => {
+ const filters = { ...req.query };
+ if (!req.query.annee_universitaire) {
+ filters.annee_universitaire = "2022-23";
+ }
+ filters.regroupement = "TOTAL";
+
+ const data = await db.collection('atlas2023').aggregate([
+ { $match: filters },
+ {
+ $group: {
+ _id: {
+ geo_id: "$geo_id",
+ geo_nom: "$geo_nom",
+ sexe: "$sexe",
+ },
+ effectif: { $sum: "$effectif" },
+ }
+ },
+ { $project: {
+ _id: 0,
+ sexe: "$_id.sexe",
+ geo_id: "$_id.geo_id",
+ geo_nom: "$_id.geo_nom",
+ effectif: 1
+ } },
+ {
+ $group: {
+ _id: { geo_id: "$geo_id", geo_nom: "$geo_nom"},
+ effectif_feminin: { $sum: { $cond: [{ $eq: ["$sexe", "2"] }, "$effectif", 0] } },
+ effectif_masculin: { $sum: { $cond: [{ $eq: ["$sexe", "1"] }, "$effectif", 0] } },
+ effectif_total: { $sum: "$effectif" },
+ },
+ },
+ { $project: {
+ _id: 0,
+ id: "$_id.geo_id",
+ nom: "$_id.geo_nom",
+ effectif_feminin: 1,
+ effectif_masculin: 1,
+ effectif_total: 1,
+ } },
+ { $sort: { effectif_total: -1 } },
+ ]).toArray();
+ res.json(data);
+ });
router.route('/atlas/number-of-students')
.get((req, res) => {