-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Ajout du composant MainPartners et intégration dans la vue Overview, …
…avec des options de graphique et des fonctions utilitaires pour la récupération des données.
- Loading branch information
Showing
13 changed files
with
302 additions
and
122 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,85 @@ | ||
| import HighchartsInstance from "highcharts"; | ||
|
|
||
| export function ChartEP( | ||
| type: NonNullable<HighchartsInstance.Options["chart"]>["type"] | ||
| function deepMerge(obj1, obj2) { | ||
| for (const key in obj2) { | ||
| if (Object.prototype.hasOwnProperty.call(obj2, key)) { | ||
| if (obj2[key] instanceof Object && obj1[key] instanceof Object) { | ||
| obj1[key] = deepMerge(obj1[key], obj2[key]); | ||
| } else { | ||
| obj1[key] = obj2[key]; | ||
| } | ||
| } | ||
| } | ||
| return obj1; | ||
| } | ||
|
|
||
| export function CreateChartOptions( | ||
| type: NonNullable<HighchartsInstance.Options["chart"]>["type"], | ||
| options: NonNullable<HighchartsInstance.Options> | ||
| ) { | ||
| const chartOptions: HighchartsInstance.Options = { | ||
| const rootStyles = getComputedStyle(document.documentElement); | ||
|
|
||
| const defaultOptions: HighchartsInstance.Options = { | ||
| chart: { | ||
| type: type, | ||
| height: 500, | ||
| backgroundColor: "transparent", | ||
| }, | ||
| title: { text: "" }, | ||
| legend: { enabled: false }, | ||
| credits: { enabled: false }, | ||
| xAxis: { | ||
| labels: { | ||
| autoRotation: [-45, -90], | ||
| style: { | ||
| fontSize: "13px", | ||
| fontFamily: "Marianne, sans-serif", | ||
| color: rootStyles.getPropertyValue("--label-color"), | ||
| }, | ||
| }, | ||
| }, | ||
| yAxis: [ | ||
| { | ||
| labels: { | ||
| style: { | ||
| fontSize: "13px", | ||
| fontFamily: "Marianne, sans-serif", | ||
| color: rootStyles.getPropertyValue("--label-color"), | ||
| }, | ||
| }, | ||
| title: { | ||
| style: { | ||
| fontSize: "16px", | ||
| fontFamily: "Marianne, sans-serif", | ||
| color: rootStyles.getPropertyValue("--label-color"), | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| labels: { | ||
| style: { | ||
| fontSize: "13px", | ||
| fontFamily: "Marianne, sans-serif", | ||
| color: rootStyles.getPropertyValue("--label-color"), | ||
| }, | ||
| }, | ||
| title: { | ||
| style: { | ||
| fontSize: "16px", | ||
| fontFamily: "Marianne, sans-serif", | ||
| color: rootStyles.getPropertyValue("--label-color"), | ||
| }, | ||
| }, | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| if (type !== "empty") { | ||
| if (defaultOptions.chart) { | ||
| defaultOptions.chart.type = type; | ||
| } | ||
| } | ||
|
|
||
| const chartOptions = deepMerge(defaultOptions, options); | ||
|
|
||
| return chartOptions; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 32 additions & 0 deletions
32
.../pages/european-projects/components/pages/general/overview/charts/main-partners/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { useQuery } from "@tanstack/react-query"; | ||
| import { useSearchParams } from "react-router-dom"; | ||
|
|
||
| import { GetData } from "./query"; | ||
| import options from "./options"; | ||
|
|
||
| import ChartWrapper from "../../../../../chart-wrapper"; | ||
| import { getDefaultParams } from "./utils"; | ||
| import { RenderData } from "./render-data"; | ||
| import DefaultSkeleton from "../../../../../charts-skeletons/default"; | ||
|
|
||
| export default function MainPartners() { | ||
| const [searchParams] = useSearchParams(); | ||
| const params = getDefaultParams(searchParams); | ||
|
|
||
| const { data, isLoading } = useQuery({ | ||
| queryKey: ["MainBeneficiaries", params], | ||
| queryFn: () => GetData(params), | ||
| }); | ||
|
|
||
| if (isLoading || !data) return <DefaultSkeleton />; | ||
|
|
||
| return <>MainPartners chart</>; //TODO: Implement MainPartners chart | ||
| return ( | ||
| <ChartWrapper | ||
| id="mainPartners" | ||
| options={options(data)} | ||
| legend={null} | ||
| renderData={RenderData} | ||
| /> | ||
| ); | ||
| } |
34 changes: 34 additions & 0 deletions
34
...ages/european-projects/components/pages/general/overview/charts/main-partners/options.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import HighchartsInstance from "highcharts"; | ||
|
|
||
| import { CreateChartOptions } from "../../../../../chart-ep"; | ||
|
|
||
| export default function Options(data) { | ||
| if (!data) return null; | ||
|
|
||
| const newOptions: HighchartsInstance.Options = { | ||
| xAxis: { | ||
| type: "category", | ||
| }, | ||
| yAxis: { | ||
| min: 0, | ||
| title: { | ||
| text: "Euros € (millions)", | ||
| }, | ||
| }, | ||
| tooltip: { | ||
| pointFormat: "Total des subventions : <b>{point.y:.1f} €</b>", | ||
| }, | ||
| series: [ | ||
| { | ||
| type: "bar", | ||
| name: "Total subventions en euros", | ||
| colors: ["#1E3859"], | ||
| colorByPoint: true, | ||
| groupPadding: 0, | ||
| data: data.list.map((item) => [item.acronym, item.total_fund_eur]), | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| return CreateChartOptions("bar", newOptions); | ||
| } |
10 changes: 10 additions & 0 deletions
10
.../pages/european-projects/components/pages/general/overview/charts/main-partners/query.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| const { VITE_APP_SERVER_URL } = import.meta.env; | ||
|
|
||
| export async function GetData(params: string) { | ||
| let url = `${VITE_APP_SERVER_URL}/european-projects/main-beneficiaries`; | ||
| if (params !== "") { | ||
| url = `${VITE_APP_SERVER_URL}/european-projects/main-beneficiaries?${params}`; | ||
| } | ||
|
|
||
| return fetch(url).then((response) => response.json()); | ||
| } |
37 changes: 37 additions & 0 deletions
37
.../european-projects/components/pages/general/overview/charts/main-partners/render-data.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| function TableWrapper({ children }) { | ||
| return ( | ||
| <div className="fr-table--sm fr-table fr-table--bordered"> | ||
| <div className="fr-table__wrapper"> | ||
| <div className="fr-table__container"> | ||
| <div className="fr-table__content"> | ||
| <table id="table-bordered">{children}</table> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export function RenderData(options) { | ||
| return ( | ||
| <TableWrapper> | ||
| <thead> | ||
| <tr> | ||
| <th>Id des partenaires</th> | ||
| <th>Liste des partenaires</th> | ||
| <th>Nombre de projets communs</th> | ||
| <th>Pays</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {options.series[0].data.map((item) => ( | ||
| <tr key={item.id}> | ||
| <td>{item.id}</td> | ||
| <td>{item.name}</td> | ||
| <td>{item.country}</td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </TableWrapper> | ||
| ); | ||
| } |
5 changes: 5 additions & 0 deletions
5
.../pages/european-projects/components/pages/general/overview/charts/main-partners/utils.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export function getDefaultParams(searchParams) { | ||
| const params = [...searchParams].map(([key, value]) => `${key}=${value}`).join('&'); | ||
|
|
||
| return params + '&stage=successful'; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.