62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
import React from 'react'
|
|
import { useSelector } from 'react-redux'
|
|
import { DottedName } from 'Rules'
|
|
import { parsedRulesSelector } from 'Selectors/analyseSelectors'
|
|
import répartitionSelector from 'Selectors/repartitionSelectors'
|
|
import './Distribution.css'
|
|
import './PaySlip'
|
|
import RuleLink from './RuleLink'
|
|
import BarChartBranch from './BarChart'
|
|
|
|
export default function Distribution() {
|
|
const distribution = useSelector(répartitionSelector) as any
|
|
|
|
if (!Object.values(distribution).length) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="distribution-chart__container">
|
|
{distribution.répartition.map(
|
|
([brancheDottedName, { partPatronale, partSalariale }]) => (
|
|
<DistributionBranch
|
|
key={brancheDottedName}
|
|
dottedName={brancheDottedName}
|
|
value={partPatronale + partSalariale}
|
|
maximum={distribution.maximum}
|
|
/>
|
|
)
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
type DistributionBranchProps = {
|
|
dottedName: DottedName
|
|
value: number
|
|
maximum: number
|
|
icon?: string
|
|
}
|
|
|
|
export function DistributionBranch({
|
|
dottedName,
|
|
value,
|
|
icon,
|
|
maximum
|
|
}: DistributionBranchProps) {
|
|
const rules = useSelector(parsedRulesSelector)
|
|
const branch = rules[dottedName]
|
|
return (
|
|
<BarChartBranch
|
|
value={value}
|
|
maximum={maximum}
|
|
title={<RuleLink {...branch} />}
|
|
icon={icon ?? branch.icons}
|
|
description={branch.summary}
|
|
unit="€"
|
|
/>
|
|
)
|
|
}
|