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

feat: ajout datepicker

parent 126cc397
No related branches found
No related tags found
No related merge requests found
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
"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",
"react-datepicker": "^6.6.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
...@@ -2381,6 +2382,54 @@ ...@@ -2381,6 +2382,54 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0" "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
} }
}, },
"node_modules/@floating-ui/core": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
"integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
"dependencies": {
"@floating-ui/utils": "^0.2.1"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
"integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
"dependencies": {
"@floating-ui/core": "^1.0.0",
"@floating-ui/utils": "^0.2.0"
}
},
"node_modules/@floating-ui/react": {
"version": "0.26.10",
"resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.10.tgz",
"integrity": "sha512-sh6f9gVvWQdEzLObrWbJ97c0clJObiALsFe0LiR/kb3tDRKwEhObASEH2QyfdoO/ZBPzwxa9j+nYFo+sqgbioA==",
"dependencies": {
"@floating-ui/react-dom": "^2.0.0",
"@floating-ui/utils": "^0.2.0",
"tabbable": "^6.0.0"
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/@floating-ui/react-dom": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
"integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
"dependencies": {
"@floating-ui/dom": "^1.6.1"
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/@floating-ui/utils": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
},
"node_modules/@humanwhocodes/config-array": { "node_modules/@humanwhocodes/config-array": {
"version": "0.11.14", "version": "0.11.14",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
...@@ -6323,6 +6372,14 @@ ...@@ -6323,6 +6372,14 @@
"wrap-ansi": "^7.0.0" "wrap-ansi": "^7.0.0"
} }
}, },
"node_modules/clsx": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
"integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
"engines": {
"node": ">=6"
}
},
"node_modules/co": { "node_modules/co": {
"version": "4.6.0", "version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
...@@ -15132,6 +15189,22 @@ ...@@ -15132,6 +15189,22 @@
"react": "^16.8.0 || ^17.0.0 || ^18.0.0" "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
} }
}, },
"node_modules/react-datepicker": {
"version": "6.6.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-6.6.0.tgz",
"integrity": "sha512-ERC0/Q4pPC9bNIcGUpdCbHc+oCxhkU3WI3UOGHkyJ3A9fqALCYpEmLc5S5xvAd7DuCDdbsyW97oRPM6pWWwjww==",
"dependencies": {
"@floating-ui/react": "^0.26.2",
"clsx": "^2.1.0",
"date-fns": "^3.3.1",
"prop-types": "^15.7.2",
"react-onclickoutside": "^6.13.0"
},
"peerDependencies": {
"react": "^16.9.0 || ^17 || ^18",
"react-dom": "^16.9.0 || ^17 || ^18"
}
},
"node_modules/react-dev-utils": { "node_modules/react-dev-utils": {
"version": "12.0.1", "version": "12.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
...@@ -15276,6 +15349,19 @@ ...@@ -15276,6 +15349,19 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
}, },
"node_modules/react-onclickoutside": {
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz",
"integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==",
"funding": {
"type": "individual",
"url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
},
"peerDependencies": {
"react": "^15.5.x || ^16.x || ^17.x || ^18.x",
"react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
}
},
"node_modules/react-refresh": { "node_modules/react-refresh": {
"version": "0.11.0", "version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
...@@ -16915,6 +17001,11 @@ ...@@ -16915,6 +17001,11 @@
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
}, },
"node_modules/tabbable": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
},
"node_modules/tailwindcss": { "node_modules/tailwindcss": {
"version": "3.4.1", "version": "3.4.1",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
...@@ -20141,6 +20232,46 @@ ...@@ -20141,6 +20232,46 @@
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz", "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
"integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==" "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g=="
}, },
"@floating-ui/core": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
"integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
"requires": {
"@floating-ui/utils": "^0.2.1"
}
},
"@floating-ui/dom": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
"integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
"requires": {
"@floating-ui/core": "^1.0.0",
"@floating-ui/utils": "^0.2.0"
}
},
"@floating-ui/react": {
"version": "0.26.10",
"resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.10.tgz",
"integrity": "sha512-sh6f9gVvWQdEzLObrWbJ97c0clJObiALsFe0LiR/kb3tDRKwEhObASEH2QyfdoO/ZBPzwxa9j+nYFo+sqgbioA==",
"requires": {
"@floating-ui/react-dom": "^2.0.0",
"@floating-ui/utils": "^0.2.0",
"tabbable": "^6.0.0"
}
},
"@floating-ui/react-dom": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
"integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
"requires": {
"@floating-ui/dom": "^1.6.1"
}
},
"@floating-ui/utils": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
},
"@humanwhocodes/config-array": { "@humanwhocodes/config-array": {
"version": "0.11.14", "version": "0.11.14",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
...@@ -23063,6 +23194,11 @@ ...@@ -23063,6 +23194,11 @@
"wrap-ansi": "^7.0.0" "wrap-ansi": "^7.0.0"
} }
}, },
"clsx": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
"integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg=="
},
"co": { "co": {
"version": "4.6.0", "version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
...@@ -29198,6 +29334,18 @@ ...@@ -29198,6 +29334,18 @@
"integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==", "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==",
"requires": {} "requires": {}
}, },
"react-datepicker": {
"version": "6.6.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-6.6.0.tgz",
"integrity": "sha512-ERC0/Q4pPC9bNIcGUpdCbHc+oCxhkU3WI3UOGHkyJ3A9fqALCYpEmLc5S5xvAd7DuCDdbsyW97oRPM6pWWwjww==",
"requires": {
"@floating-ui/react": "^0.26.2",
"clsx": "^2.1.0",
"date-fns": "^3.3.1",
"prop-types": "^15.7.2",
"react-onclickoutside": "^6.13.0"
}
},
"react-dev-utils": { "react-dev-utils": {
"version": "12.0.1", "version": "12.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
...@@ -29308,6 +29456,12 @@ ...@@ -29308,6 +29456,12 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
}, },
"react-onclickoutside": {
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz",
"integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==",
"requires": {}
},
"react-refresh": { "react-refresh": {
"version": "0.11.0", "version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
...@@ -30519,6 +30673,11 @@ ...@@ -30519,6 +30673,11 @@
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
}, },
"tabbable": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
},
"tailwindcss": { "tailwindcss": {
"version": "3.4.1", "version": "3.4.1",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
...@@ -28,6 +28,8 @@ function DAOLineChart(title, apiData, day) { ...@@ -28,6 +28,8 @@ function DAOLineChart(title, apiData, day) {
const data = labels.map(label => apiData[label] || 0); const data = labels.map(label => apiData[label] || 0);
console.log(data, labels, apiData)
const datas = { const datas = {
labels, labels,
datasets: [ datasets: [
......
...@@ -4,6 +4,9 @@ import PieChart from "./PieChart" ...@@ -4,6 +4,9 @@ import PieChart from "./PieChart"
import VoteBarChart from "./VoteBarGraph" import VoteBarChart from "./VoteBarGraph"
import { ButtonGroup, Dropdown, DropdownButton } from 'react-bootstrap'; import { ButtonGroup, Dropdown, DropdownButton } from 'react-bootstrap';
import { generateData, generatePieData} from "./FalseDataGenerator"; import { generateData, generatePieData} from "./FalseDataGenerator";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { setDate } from "date-fns";
const DashBoard = () => { const DashBoard = () => {
const [line, setLine] = useState('') const [line, setLine] = useState('')
...@@ -11,6 +14,8 @@ const DashBoard = () => { ...@@ -11,6 +14,8 @@ const DashBoard = () => {
const [pie, setPie] = useState('') const [pie, setPie] = useState('')
const [association, setAssociation] = useState([]) const [association, setAssociation] = useState([])
const [currentAsso, setCurrentAsso] = useState('') const [currentAsso, setCurrentAsso] = useState('')
const [currentPropo, setCurrentPropo] = useState('')
const [startDate, setStartDate] = useState(new Date());
const url = [ 'https://api.ghostnet.tzkt.io/v1/contracts/KT1QTwmF2eptKss2FWbT1rHP5wCERL16kihQ/storage', 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/KT1ACcRhzuDzVKpwzjZTudcQchEijvj7b7cp/views/listAllAssociations',
...@@ -52,12 +57,25 @@ const DashBoard = () => { ...@@ -52,12 +57,25 @@ const DashBoard = () => {
setBar(VoteBarChart('Nombre de propositions soumises au vote sur un mois glissant', asso.barData, "01/01/24")) setBar(VoteBarChart('Nombre de propositions soumises au vote sur un mois glissant', asso.barData, "01/01/24"))
setPie('') setPie('')
setCurrentAsso(asso) setCurrentAsso(asso)
}
const setDataDate = (date) => {
setStartDate(date)
let day = date.getDate()
if (day < 10) day = '0' + day
let month = date.getMonth() + 1
if (month < 10) month = '0' + month
let year = date.getFullYear() - 2000
const fullDate = day + '/' + month + '/' + year
console.log(fullDate)
setLine(DAOLineChart('Nombre de DAO token achetés sur un mois glissant', generateData(fullDate, 1000), fullDate))
setBar(VoteBarChart('Nombre de propositions soumises au vote sur un mois glissant', generateData(fullDate, 20), fullDate))
} }
const setPieData = (propositions, propoName) => { const setPieData = (propositions, propoName) => {
const proposition = propositions.find(propo => propo.nom === propoName) const proposition = propositions.find(propo => propo.nom === propoName)
setPie(PieChart('Taux de yay, nay ou pass pour chaque proposition', proposition.pieData)) setPie(PieChart('Taux de yay, nay ou pass pour la proposition', proposition.pieData))
setCurrentPropo(proposition)
} }
useEffect(() => { useEffect(() => {
...@@ -83,7 +101,6 @@ const DashBoard = () => { ...@@ -83,7 +101,6 @@ const DashBoard = () => {
const showProposition = (propositions) => { const showProposition = (propositions) => {
const result = [] const result = []
for (let index in propositions){ for (let index in propositions){
console.log(propositions[index])
const eventKey = `${propositions[index].nom}` const eventKey = `${propositions[index].nom}`
const label = `${propositions[index].nom}` const label = `${propositions[index].nom}`
result.push( result.push(
...@@ -97,9 +114,11 @@ const DashBoard = () => { ...@@ -97,9 +114,11 @@ const DashBoard = () => {
return (<> return (<>
<p>Liste des Associations</p> <p>Liste des Associations</p>
{currentAsso && <p>Association actuelle: {currentAsso.nom}</p>}
<DropdownButton as={ButtonGroup} title="Pour l'association" id='association'> <DropdownButton as={ButtonGroup} title="Pour l'association" id='association'>
{showAssociation()} {showAssociation()}
</DropdownButton> </DropdownButton>
{currentAsso && <DatePicker selected={startDate} onChange={(date) => setDataDate(date)} />}
<div className="d-flex justify-content-center align-items-center"> <div className="d-flex justify-content-center align-items-center">
{line} {line}
{bar} {bar}
...@@ -107,6 +126,7 @@ const DashBoard = () => { ...@@ -107,6 +126,7 @@ const DashBoard = () => {
{(line !== '' & bar !== '') && {(line !== '' & bar !== '') &&
<> <>
<p>Liste des propositions</p> <p>Liste des propositions</p>
{currentPropo && <p>Proposition actuelle: {currentPropo.nom}</p>}
<DropdownButton as={ButtonGroup} title="Pour la proposition" id='proposition'> <DropdownButton as={ButtonGroup} title="Pour la proposition" id='proposition'>
{showProposition(currentAsso.propositions)} {showProposition(currentAsso.propositions)}
</DropdownButton> </DropdownButton>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment