diff --git a/src/components/graphs/response-by-admin.tsx b/src/components/graphs/response-by-admin.tsx index a502ff5..23a3f9d 100644 --- a/src/components/graphs/response-by-admin.tsx +++ b/src/components/graphs/response-by-admin.tsx @@ -26,16 +26,15 @@ const AdminResponseGraph = () => { return
Les données ne sont pas disponibles
; } - const responsesByAdmin = contributions.reduce( + const occurrencesByUser = contributions.reduce( (acc: Record, contribution: ContributionData) => { - if (contribution.team) { - contribution.team.forEach((admin: string) => { - if (!acc[admin]) { - acc[admin] = 1; - } else { - acc[admin] += 1; - } - }); + const { responseFrom } = contribution; + if (responseFrom) { + if (!acc[responseFrom]) { + acc[responseFrom] = 1; + } else { + acc[responseFrom] += 1; + } } return acc; @@ -43,50 +42,21 @@ const AdminResponseGraph = () => { {} ); - const chartData = Object.entries(responsesByAdmin) - .map(([name, y]) => ({ name, y })) - .sort((a, b) => b.y - a.y); + const chartData = Object.entries(occurrencesByUser).map(([name, y]) => ({ + name, + y, + })); const options = { chart: { - type: "column", - options3d: { - enabled: true, - alpha: 15, - beta: 15, - depth: 50, - viewDistance: 25, - }, + type: "pie", }, title: { - text: "Réponses par admin", - }, - plotOptions: { - column: { - depth: 25, - dataLabels: { - enabled: true, - format: function () { - if (this.point.index === 0) { - return ''; - } - return ""; - }, - useHTML: true, - }, - }, - }, - xAxis: { - type: "category", - }, - yAxis: { - title: { - text: "Nombre de réponses", - }, + text: "Nombre de mail envoyé", }, series: [ { - name: "Traitements", + name: "Mail de réponse depuis le guichet", data: chartData, }, ], diff --git a/src/components/graphs/treatment-by-admin.tsx b/src/components/graphs/treatment-by-admin.tsx new file mode 100644 index 0000000..f400b29 --- /dev/null +++ b/src/components/graphs/treatment-by-admin.tsx @@ -0,0 +1,119 @@ +import HighchartsReact from "highcharts-react-official"; +import Highcharts from "highcharts"; + +import { useState } from "react"; +import { ContributionData } from "../../types"; +import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData"; +import { contactUrl, contributionUrl } from "../../config/api"; +import { Button, Col } from "@dataesr/dsfr-plus"; + +const AdminTreatmentGraph = () => { + const [filter, setFilter] = useState("contributions"); + const url = filter === "object" ? contributionUrl : contactUrl; + const { data, isLoading, isError } = useGetContributionData(url, 0); + + const contributions = (data as { data: ContributionData[] })?.data; + + if (isLoading) { + return
Chargement...
; + } + + if (isError) { + return
Une erreur s'est produite
; + } + + if (!Array.isArray(contributions)) { + return
Les données ne sont pas disponibles
; + } + + const responsesByAdmin = contributions.reduce( + (acc: Record, contribution: ContributionData) => { + if (contribution.team) { + contribution.team.forEach((admin: string) => { + if (!acc[admin]) { + acc[admin] = 1; + } else { + acc[admin] += 1; + } + }); + } + + return acc; + }, + {} + ); + + const chartData = Object.entries(responsesByAdmin) + .map(([name, y]) => ({ name, y })) + .sort((a, b) => b.y - a.y); + + const options = { + chart: { + type: "column", + options3d: { + enabled: true, + alpha: 15, + beta: 15, + depth: 50, + viewDistance: 25, + }, + }, + title: { + text: "Traitements par admin", + }, + plotOptions: { + column: { + depth: 25, + dataLabels: { + enabled: true, + format: function () { + if (this.point.index === 0) { + return ''; + } + return ""; + }, + useHTML: true, + }, + }, + }, + xAxis: { + type: "category", + }, + yAxis: { + title: { + text: "Nombre de traitement", + }, + }, + series: [ + { + name: "Traitements", + data: chartData, + }, + ], + }; + + return ( + <> + + + + + + + ); +}; + +export default AdminTreatmentGraph; diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index f1c42a1..1e2792b 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -1,11 +1,12 @@ import { Col, Container, Row } from "@dataesr/dsfr-plus"; import ContributionsGraphByYear from "../../components/graphs/contributions-by-year"; import ContributionsGraphByName from "../../components/graphs/contributions-by-name"; -import AdminResponseGraph from "../../components/graphs/response-by-admin"; import ContributionsGraphByStatus from "../../components/graphs/by-status"; import ContributionsGraphByTags from "../../components/graphs/by-tags"; import ContributionsGraphByDomains from "../../components/graphs/by-domains"; import ContributionsGraphByTypes from "../../components/graphs/by-types"; +import AdminTreatmentGraph from "../../components/graphs/treatment-by-admin"; +import AdminResponseGraph from "../../components/graphs/response-by-admin"; const Home = () => { return ( @@ -21,7 +22,7 @@ const Home = () => { - + @@ -39,9 +40,9 @@ const Home = () => { - {/* - - */} + + + ); diff --git a/src/types/index.ts b/src/types/index.ts index ece4577..c300ef8 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -23,6 +23,7 @@ export type Contribution = { }; export type ContributionData = { + responseFrom: string; idref: any; tags: any; id: string;