Skip to content
Snippets Groups Projects
Commit 126cc397 authored by Gaylord Delporte's avatar Gaylord Delporte
Browse files

feat: mise en forme front + recuperation liste asso

parent 2260e337
No related branches found
No related tags found
No related merge requests found
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.3", "bootstrap": "^5.3.3",
"chart.js": "^4.4.2", "chart.js": "^4.4.2",
"date-fns": "^3.6.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-bootstrap": "^2.10.2", "react-bootstrap": "^2.10.2",
"react-chartjs-2": "^5.2.0", "react-chartjs-2": "^5.2.0",
...@@ -7005,6 +7006,15 @@ ...@@ -7005,6 +7006,15 @@
"node": ">=10" "node": ">=10"
} }
}, },
"node_modules/date-fns": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/kossnocorp"
}
},
"node_modules/debug": { "node_modules/debug": {
"version": "4.3.4", "version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
...@@ -23531,6 +23541,11 @@ ...@@ -23531,6 +23541,11 @@
"whatwg-url": "^8.0.0" "whatwg-url": "^8.0.0"
} }
}, },
"date-fns": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww=="
},
"debug": { "debug": {
"version": "4.3.4", "version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
import './App.css'; import './App.css';
import Dashboard from './component/Dashboard.js' import Dashboard from './component/Dashboard.js'
import 'bootstrap/dist/css/bootstrap.min.css';
function App() { function App() {
return ( return (
......
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
import { Chart as ChartJS } from "chart.js/auto"; // A ne pas commenter sinon les graphs ne fonctionne plu☼ import { Chart as ChartJS } from "chart.js/auto"; // A ne pas commenter sinon les graphs ne fonctionne plu☼
import { Line } from "react-chartjs-2"; import { Line } from "react-chartjs-2";
import { addDays, format, parse } from 'date-fns';
import { generateData } from "./FalseDataGenerator";
function DAOLineChart(title, apiData, scale) { function DAOLineChart(title, apiData, day) {
const monthsOrder = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
const sortedMonths = Object.keys(apiData).sort((a, b) => monthsOrder.indexOf(a) - monthsOrder.indexOf(b));
const options = { const options = {
responsive: true, responsive: true,
plugins: { plugins: {
...@@ -20,28 +18,30 @@ function DAOLineChart(title, apiData, scale) { ...@@ -20,28 +18,30 @@ function DAOLineChart(title, apiData, scale) {
}, },
}; };
let labels = Object.keys(apiData);
let data = Object.values(apiData); const parsedDay = parse(day, 'dd/MM/yy', new Date());
console.log(scale)
if (scale === 'month') { const labels = Array.from({ length: 30 }, (_, index) => {
labels = sortedMonths; const date = addDays(parsedDay, index); // Ajouter les jours pour obtenir les jours suivants
data = sortedMonths.map(month => apiData[month]); return format(date, 'dd/MM/yy'); // Formatage de la date pour l'affichage
} });
const data = labels.map(label => apiData[label] || 0);
const datas = { const datas = {
labels, labels,
datasets: [ datasets: [
{ {
label: 'Nombre de DAO token achetés sur un mois glissant', label: 'Nombre de DAO token achetés',
data, data,
borderColor: 'rgb(255, 99, 132)', borderColor: 'rgb(60, 99, 255)',
backgroundColor: 'rgba(255, 99, 132, 0.5)', backgroundColor: 'rgba(60, 99, 255, 0.5)',
} }
] ]
}; };
return ( return (
<div style={{ width: '80%', margin: 'auto' }}> <div style={{ width: '50%', margin: 'auto' }}>
<Line datasetIdKey="DAO" options={options} data={datas} /> <Line datasetIdKey="DAO" options={options} data={datas} />
</div> </div>
) )
......
...@@ -2,30 +2,116 @@ import { useEffect, useState } from "react" ...@@ -2,30 +2,116 @@ import { useEffect, useState } from "react"
import DAOLineChart from "./DAOLineChart" import DAOLineChart from "./DAOLineChart"
import PieChart from "./PieChart" import PieChart from "./PieChart"
import VoteBarChart from "./VoteBarGraph" import VoteBarChart from "./VoteBarGraph"
import { testData, testDataPie } from "./GraphData" import { ButtonGroup, Dropdown, DropdownButton } from 'react-bootstrap';
import { Button, ButtonGroup, Dropdown, DropdownButton } from 'react-bootstrap'; import { generateData, generatePieData} from "./FalseDataGenerator";
const DashBoard = () => { const DashBoard = () => {
const [line, setLine] = useState() const [line, setLine] = useState('')
const [bar, setBar] = useState() const [bar, setBar] = useState('')
const [pie, setPie] = useState() const [pie, setPie] = useState('')
const [association, setAssociation] = useState([])
const [currentAsso, setCurrentAsso] = useState('')
const url = [ 'https://api.ghostnet.tzkt.io/v1/contracts/KT1QTwmF2eptKss2FWbT1rHP5wCERL16kihQ/storage',
'https://api.ghostnet.tzkt.io/v1/contracts/KT1ACcRhzuDzVKpwzjZTudcQchEijvj7b7cp/views/listAllAssociations',
'https://api.ghostnet.tzkt.io/v1/contracts/KT1LnPY3excYVUTLBuCfBbf1hLeGJTLhXNSz/storage',
'https://api.ghostnet.tzkt.io/v1/contracts/KT1Jrg6G9ziKbpSvzPLhjM4pXWYJqxoZdhMZ/views'
]
const getData = async () => {
const data = await fetch( url[0], {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
});
const response = await data.json()
console.log(response)
const objectsArray = Object.values(response);
let listeAsso= []
objectsArray.forEach(asso => {
const assoData= {
nom: asso.name,
lineData: generateData("01/01/24", 1000),
barData: generateData("01/01/24", 20),
propositions: [
{nom: 'Proposition 1', pieData: generatePieData() },
{nom: 'Proposition 2', pieData: generatePieData() },
{nom: 'Proposition 3', pieData: generatePieData() }
]
}
listeAsso.push(assoData)
});
setAssociation(listeAsso)
}
const setDataAsso = (assoName) => {
const asso = association.find(asso => asso.nom === assoName)
setLine(DAOLineChart('Nombre de DAO token achetés sur un mois glissant', asso.lineData, "01/01/24"))
setBar(VoteBarChart('Nombre de propositions soumises au vote sur un mois glissant', asso.barData, "01/01/24"))
setPie('')
setCurrentAsso(asso)
}
const setPieData = (propositions, propoName) => {
const proposition = propositions.find(propo => propo.nom === propoName)
setPie(PieChart('Taux de yay, nay ou pass pour chaque proposition', proposition.pieData))
}
useEffect(() => { useEffect(() => {
setLine(DAOLineChart("Test 1", testData, "month")) if (line === '' && bar === '' && pie === '') {
setBar(VoteBarChart("Test 2", testData, "month")) getData()
setPie(PieChart("Test 3", testDataPie)) }
}, [line, bar, pie]) }, [line, bar, pie])
const showAssociation = () => {
const result = []
for (let asso in association){
const eventKey = `${association[asso].nom}`
const label = `${association[asso].nom}`
result.push(
<Dropdown.Item key={eventKey} eventKey={eventKey} onClick={() => setDataAsso(association[asso].nom)}>
{label}
</Dropdown.Item>
)
}
return result
}
const showProposition = (propositions) => {
const result = []
for (let index in propositions){
console.log(propositions[index])
const eventKey = `${propositions[index].nom}`
const label = `${propositions[index].nom}`
result.push(
<Dropdown.Item key={eventKey} eventKey={eventKey} onClick={() => setPieData(propositions, propositions[index].nom)}>
{label}
</Dropdown.Item>
)
}
return result
}
return (<> return (<>
<p>Associations</p> <p>Liste des Associations</p>
<DropdownButton as={ButtonGroup} title="Pour l'association" id='association'> <DropdownButton as={ButtonGroup} title="Pour l'association" id='association'>
{//TODO: faire une fonction pour avoir la liste des assos afin de changer les graphs selon l'asso {showAssociation()}
}
</DropdownButton> </DropdownButton>
<p>First</p> <div className="d-flex justify-content-center align-items-center">
{line} {line}
<p>Second</p> {bar}
{bar} </div>
<p>Third</p> {(line !== '' & bar !== '') &&
<>
<p>Liste des propositions</p>
<DropdownButton as={ButtonGroup} title="Pour la proposition" id='proposition'>
{showProposition(currentAsso.propositions)}
</DropdownButton>
</>
}
{pie} {pie}
</>) </>)
} }
......
import { format, addDays } from 'date-fns';
export function generateData(startDate, max) {
let currentDate = startDate;
const data = {};
for (let i = 0; i < 30; i++) {
const formattedDate = format(currentDate, 'dd/MM/yy');
const randomValue = Math.floor(Math.random() * max);
data[formattedDate] = randomValue;
currentDate = addDays(currentDate, 1);
}
return data;
}
export function generatePieData() {
const testDataPie = {
"Yay": Math.floor(Math.random() * 30),
"Nay": Math.floor(Math.random() * 30),
"Pass": Math.floor(Math.random() * 10)
}
return testDataPie
}
export const testData = {
"Janvier": 10,
"Fevrier": 25,
"Mars": 45,
"Avril": 2,
"Mai": 4,
"Juin": 80,
"Juillet": 74,
"Août": 50,
"Septembre": 6,
"Octobre": 13,
"Novembre": 15,
"Décembre": 24
}
export const testDataPie = {
"Yay": 10,
"Nay": 8,
"Pass": 5
}
\ No newline at end of file
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
import { Chart as ChartJS } from "chart.js/auto"; // A ne pas commenter sinon les graphs ne fonctionne plu☼ import { Chart as ChartJS } from "chart.js/auto"; // A ne pas commenter sinon les graphs ne fonctionne plu☼
import { Pie} from "react-chartjs-2"; import { Pie } from "react-chartjs-2";
function PieChart(title, apiData) { function PieChart(title, apiData) {
...@@ -24,16 +24,16 @@ function PieChart(title, apiData) { ...@@ -24,16 +24,16 @@ function PieChart(title, apiData) {
labels, labels,
datasets: [ datasets: [
{ {
label: 'Taux de yay, nay ou pass pour chaque proposition', label: ['Taux de yay','Taux de nay','Taux de pass'],
data, data,
borderColor: [ borderColor: [
'rgb(255, 99, 132)',
'rgb(132, 255, 99)', 'rgb(132, 255, 99)',
'rgb(255, 99, 132)',
'rgb(132, 99, 255)' 'rgb(132, 99, 255)'
], ],
backgroundColor: [ backgroundColor: [
'rgb(255, 99, 132, 0.5)',
'rgb(132, 255, 99, 0.5)', 'rgb(132, 255, 99, 0.5)',
'rgb(255, 99, 132, 0.5)',
'rgb(132, 99, 255, 0.5)' 'rgb(132, 99, 255, 0.5)'
], ],
} }
...@@ -41,7 +41,7 @@ function PieChart(title, apiData) { ...@@ -41,7 +41,7 @@ function PieChart(title, apiData) {
}; };
return ( return (
<div style={{ width: '80%', margin: 'auto' }}> <div style={{ width: '30%', margin: 'auto' }}>
<Pie datasetIdKey="Pie" options={options} data={datas} /> <Pie datasetIdKey="Pie" options={options} data={datas} />
</div> </div>
) )
......
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
import { Chart as ChartJS } from "chart.js/auto"; // A ne pas commenter sinon les graphs ne fonctionne plu☼ import { Chart as ChartJS } from "chart.js/auto"; // A ne pas commenter sinon les graphs ne fonctionne plu☼
import { Bar } from "react-chartjs-2"; import { Bar } from "react-chartjs-2";
import { addDays, format, parse } from 'date-fns';
function VoteBarChart(title, apiData, scale) { function VoteBarChart(title, apiData, day) {
const monthsOrder = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']; const options = {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: title,
},
},
};
const sortedMonths = Object.keys(apiData).sort((a, b) => monthsOrder.indexOf(a) - monthsOrder.indexOf(b)); const parsedDay = parse(day, 'dd/MM/yy', new Date());
const options = { const labels = Array.from({ length: 30 }, (_, index) => {
responsive: true, const date = addDays(parsedDay, index); // Ajouter les jours pour obtenir les jours suivants
plugins: { return format(date, 'dd/MM/yy'); // Formatage de la date pour l'affichage
legend: { });
position: 'top',
},
title: {
display: true,
text: title,
},
},
};
let labels = Object.keys(apiData); const data = labels.map(label => apiData[label] || 0);
let data = Object.values(apiData);
console.log(scale)
if (scale === 'month') {
labels = sortedMonths;
data = sortedMonths.map(month => apiData[month]);
}
const datas = { const datas = {
labels, labels,
datasets: [ datasets: [
{ {
label: 'Nombre de propositions soumises au vote sur un mois glissant', label: 'Nombre de propositions soumises au vote',
data, data,
borderColor: 'rgb(255, 99, 132)', borderColor: 'rgb(60, 255, 60)',
backgroundColor: 'rgba(255, 99, 132, 0.5)', backgroundColor: 'rgba(60, 255, 60, 0.5)',
} }
] ]
}; };
return ( return (
<div style={{ width: '80%', margin: 'auto' }}> <div style={{ width: '50%', margin: 'auto' }}>
<Bar datasetIdKey="Vote" options={options} data={datas} /> <Bar datasetIdKey="Vote" options={options} data={datas} />
</div> </div>
) )
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment