Skip to content

Commit

Permalink
feat: update dashboard for FAST
Browse files Browse the repository at this point in the history
  • Loading branch information
@MaGOs92
MaGOs92 committed May 12, 2023
1 parent 769f62f commit 8a3dd90
Show file tree
Hide file tree
Showing 4 changed files with 181 additions and 51 deletions.
70 changes: 51 additions & 19 deletions components/dashboard/charts/first-publication-evolution.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,52 @@ import {useMemo} from 'react'

ChartJS.register(...registerables)

const FirstPublicationEvolutionChart = ({firstPublicationEvolutionResponse}) => {
const data = useMemo(() => ({
labels: firstPublicationEvolutionResponse.map(({date}) => {
const [year, month, day] = date.split('-')
return `${day}/${month}/${year}`
}),
datasets: [
{
label: 'BAL publiées',
data: firstPublicationEvolutionResponse.map(({totalCreations}) => totalCreations),
borderColor: '#36A2EB',
backgroundColor: '#9BD0F5',
}
]
}), [firstPublicationEvolutionResponse])
const FirstPublicationEvolutionChart = ({firstPublicationEvolutionResponse, interval}) => {
const data = useMemo(() => {
let responseData = firstPublicationEvolutionResponse
if (interval) {
responseData = firstPublicationEvolutionResponse.filter((_data, index) => index % interval === 0)
}

return {
labels: responseData.map(({date}) => {
const [year, month, day] = date.split('-')
return `${day}/${month}/${year}`
}),
datasets: [
{
type: 'line',
label: 'Cumul BAL publiées',
data: responseData.map(({totalCreations}) => totalCreations),
borderColor: '#36A2EB',
backgroundColor: '#9BD0F5',
yAxisID: 'y1',
},
{
type: 'bar',
label: 'BAL publiées',
data: responseData
.map(({totalCreations}, index) => {
if (index === 0) {
return 0
}

return totalCreations - responseData[index - 1].totalCreations
}),
borderColor: '#f4a4b3',
backgroundColor: '#fbe2e6',
yAxisID: 'y2',
}
]
}
}, [firstPublicationEvolutionResponse, interval])

return (
<Chart
type='line'
data={data}
options={{
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: true,
text: 'Évolution du nombre de BAL publiées pour la première fois',
Expand All @@ -39,13 +59,25 @@ const FirstPublicationEvolutionChart = ({firstPublicationEvolutionResponse}) =>
},
},
},
scales: {
y1: {
type: 'linear',
position: 'left'
},
y2: {
type: 'linear',
position: 'right',
},
x: {}
}
}}
/>
)
}

FirstPublicationEvolutionChart.propTypes = {
firstPublicationEvolutionResponse: PropTypes.array.isRequired,
interval: PropTypes.number,
}

export default FirstPublicationEvolutionChart
133 changes: 115 additions & 18 deletions components/dashboard/charts/publication-count.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,47 +5,144 @@ import {useMemo} from 'react'

ChartJS.register(...registerables)

const PublicationCountChart = ({publicationsResponse}) => {
const data = useMemo(() => ({
labels: publicationsResponse.map(({date}) => {
const PublicationCountChart = ({publicationsResponse, firstPublicationEvolutionResponse, interval}) => {
const data = useMemo(() => {
let labels = publicationsResponse.map(({date}) => {
const [year, month, day] = date.split('-')
return `${day}/${month}/${year}`
}),
datasets: [
{
label: 'BAL publiées',
data: publicationsResponse.map(({publishedBAL}) => Object.values(publishedBAL).reduce((acc, numPublications) => acc + numPublications, 0)),
borderColor: '#36A2EB',
backgroundColor: '#9BD0F5',
return (interval && interval > 20) ? `${month}/${year}` : `${day}/${month}/${year}`
})

if (interval && interval > 20) {
labels = labels.filter((_data, index) => index % interval === 0)
}

const newBALPublication = firstPublicationEvolutionResponse.map(({date, totalCreations, viaMesAdresses, viaMoissonneur}, index) => {
const [year, month, day] = date.split('-')
if (index === 0) {
return {date: `${day}/${month}/${year}`, value: 0}
}
]
}), [publicationsResponse])

return {date: `${day}/${month}/${year}`, value: {
total: totalCreations - firstPublicationEvolutionResponse[index - 1].totalCreations,
viaMesAdresses: viaMesAdresses - firstPublicationEvolutionResponse[index - 1].viaMesAdresses,
viaMoissonneur: viaMoissonneur - firstPublicationEvolutionResponse[index - 1].viaMoissonneur,
}}
})

const allBALPublication = publicationsResponse
.map(({date, publishedBAL}) => {
const [year, month, day] = date.split('-')

return {
date: `${day}/${month}/${year}`,
// eslint-disable-next-line unicorn/no-array-reduce
value: Object.values(publishedBAL).reduce((acc, publications) => {
const {total, viaMesAdresses, viaMoissonneur} = publications

return {
total: acc.total + total,
viaMesAdresses: acc.viaMesAdresses + viaMesAdresses,
viaMoissonneur: acc.viaMoissonneur + viaMoissonneur
}
}, {total: 0, viaMesAdresses: 0, viaMoissonneur: 0})
}
})

// eslint-disable-next-line unicorn/no-array-reduce
const data = labels.reduce((acc, cur) => {
acc.push({
allBALViaMesAdresses: allBALPublication
.filter(({date}) => date.includes(cur))
.reduce((a, {value}) => a + value.viaMesAdresses, 0),
allBALViaMoissonneur: allBALPublication
.filter(({date}) => date.includes(cur))
.reduce((a, {value}) => a + value.viaMoissonneur, 0),
allBALViaOther: allBALPublication
.filter(({date}) => date.includes(cur))
.reduce((a, {value}) => a + (value.total - (value.viaMesAdresses + value.viaMoissonneur)), 0),
newBALViaMesAdresses: newBALPublication
.filter(({date}) => date.includes(cur))
.reduce((a, {value}) => a + value.viaMesAdresses, 0),
newBALViaMoissonneur: newBALPublication
.filter(({date}) => date.includes(cur))
.reduce((a, {value}) => a + value.viaMoissonneur, 0),
newBALViaOther: newBALPublication
.filter(({date}) => date.includes(cur))
.reduce((a, {value}) => a + (value.total - (value.viaMesAdresses + value.viaMoissonneur)), 0),
})

return acc
}, [])

return {
labels,
datasets: [
{
label: 'Nouvelles BAL publiées via un autre client',
data: data.map(({newBALViaOther}) => newBALViaOther),
backgroundColor: '#fbe2e6',
},
{
label: 'Nouvelles BAL publiées via Moissonneur',
data: data.map(({newBALViaMoissonneur}) => newBALViaMoissonneur),
backgroundColor: '#F7C4CC',
},
{
label: 'Nouvelles BAL publiées via Mes Adresses',
data: data.map(({newBALViaMesAdresses}) => newBALViaMesAdresses),
backgroundColor: '#EF9BA8',
},
{
label: 'BAL re-publiées via un autre client',
data: data.map(({allBALViaOther, newBALViaOther}) => allBALViaOther - newBALViaOther),
backgroundColor: '#9BD0F5',
},
{
label: 'BAL re-publiées via Moissonneur',
data: data.map(({allBALViaMoissonneur, newBALViaMoissonneur}) => allBALViaMoissonneur - newBALViaMoissonneur),
backgroundColor: '#72B8E9',
},
{
label: 'BAL re-publiées via Mes Adresses',
data: data.map(({allBALViaMesAdresses, newBALViaMesAdresses}) => allBALViaMesAdresses - newBALViaMesAdresses),
backgroundColor: '#4D9BD3',
},
]
}
}, [publicationsResponse, firstPublicationEvolutionResponse, interval])

return (
<Chart
type='line'
type='bar'
data={data}
options={{
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: true,
text: 'Nombre de publications par jours',
text: 'Nombre de publications',
font: {
size: 18,
},
},
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}}
/>
)
}

PublicationCountChart.propTypes = {
publicationsResponse: PropTypes.array.isRequired,
firstPublicationEvolutionResponse: PropTypes.array.isRequired,
interval: PropTypes.number,
}

export default PublicationCountChart
2 changes: 1 addition & 1 deletion components/dashboard/charts/publications-per-department.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const PublicationPerDepartmentChart = ({publicationsResponse}) => {
acc
+ selectedCommunes.reduce(
(selectedCommunesCount, codeCommunes) =>
selectedCommunesCount + publishedBAL[codeCommunes],
selectedCommunesCount + publishedBAL[codeCommunes].total,
0
)
)
Expand Down
27 changes: 14 additions & 13 deletions components/dashboard/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,47 +54,48 @@ const DashboardContainer = styled.div`
height: 500px;
}
`
const timeLapseButtons = [
const timeLapses = [
{
label: 'Année',
value: 365,
interval: 30
},
{
label: 'Mois',
value: 30,
},
{
label: 'Semaine',
value: 7,
},
{
label: 'Jour',
value: 0,
},
}
]

const Dashboard = () => {
const [timeLapse, setTimeLapse] = useState(30)
const {dashboardData} = useDashboardData(timeLapse)
const [timeLapseIndex, setTimeLapseIndex] = useState(1)
const {dashboardData} = useDashboardData(timeLapses[timeLapseIndex].value)

return (
<DashboardContainer>
<div className='dashboard-header'>
{timeLapseButtons.map(({label, value}) => (
{timeLapses.map(({label}, index) => (
<Button
key={label}
type='button'
className={value === timeLapse ? 'active' : ''}
onClick={() => setTimeLapse(value)}
className={index === timeLapseIndex ? 'active' : ''}
onClick={() => setTimeLapseIndex(index)}
>
{label}
</Button>
))}
</div>
<div className='chart-wrapper'>
<FirstPublicationEvolutionChart firstPublicationEvolutionResponse={dashboardData.firstPublicationEvolutionResponse} />
<FirstPublicationEvolutionChart firstPublicationEvolutionResponse={dashboardData.firstPublicationEvolutionResponse} interval={timeLapses[timeLapseIndex].interval} />
</div>
<div className='chart-wrapper'>
<PublicationPerDepartmentChart publicationsResponse={dashboardData.publicationsResponse} />
</div>
<div className='chart-wrapper'>
<PublicationCountChart publicationsResponse={dashboardData.publicationsResponse} />
<PublicationCountChart publicationsResponse={dashboardData.publicationsResponse} firstPublicationEvolutionResponse={dashboardData.firstPublicationEvolutionResponse} interval={timeLapses[timeLapseIndex].interval} />
</div>
</DashboardContainer>
)
Expand Down

0 comments on commit 8a3dd90

Please sign in to comment.