Mise à jour des tooltips sur les déciles

components/ir/cartes-impact/CartesImpact.tsx

@@ -37,18 +37,25 @@ export class CartesImpact extends PureComponent<Props> {
             </Grid>
           )*/}
           {isUserLogged && (
-            <Grid item lg={8} md={12} sm={6} xl={6} xs={12}>
+            /*
+            xl: The number of columns to span on extra large devices (≥1200px)
+            lg: The number of columns to span on large devices (≥992px)
+            md: The number of columns to span on medium devices (≥768px)
+            sm: The number of columns to span on small devices (≥576px)
+            xs: The number of columns to span on extra small devices (<576px)
+            */
+            <Grid item xs={"auto"} sm={12} md={12} lg={12} xl={10}>
               <CarteEtat />
             </Grid>
           )}
           {isUserLogged && (
-            <Grid item lg={4} md={6} sm={6} xl={3} xs={12}>
+            <Grid item xs={"auto"} sm={6} md={6} lg={6} xl={3}>
               <GagnantsPerdantsCard />
             </Grid>
           )}
         </Grid>
         <div className={styles.partiecastype}>
-          <span className={styles.titrepartie}>Impacts sur des cas types</span>
+          <span className={styles.titrepartie}>Impacts sur des cas types</span><br/>
           <span className={styles.soustitrepartie}>À revenus identiques 2021 et 2022</span>
         </div>
         <Grid container spacing={3}>

components/ir/cartes-impact/carte-etat/simpop-tableur-infos-deciles/SimpopTableurInfosDeciles.tsx

@@ -4,7 +4,7 @@ import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import Tooltip from "@material-ui/core/Tooltip";
-
+import { Fragment } from "react";
 // eslint-disable-next-line no-unused-vars
 import { RootState } from "../../../../../redux/reducers";
 import { formatNumber } from "../../../../common";
@@ -162,7 +162,7 @@ export function SimpopTableurInfosDeciles({ deciles, frontieresDeciles }: Props)
             <b>Pourcentage de l'impôt par rapport au RFR moyen des foyers</b>
           </TableCell>
           <TableCell classes={{ root: styles.cellStyle }}>
-            <b>Proportion de l'évolution de l'impôt moyen par rapport au RFR moyen des foyers</b>
+            <b>Proportion de l'évolution de l'impôt moyen par rapport au RFR moyen des foyers</b><br/>En € pour mille €.
           </TableCell>
         </TableRow>
       </TableHead>
@@ -243,13 +243,13 @@ export function SimpopTableurInfosDeciles({ deciles, frontieresDeciles }: Props)
                       popper: styles.tooltipContainer,
                       tooltip: styles.tooltipContent,
                     }}
-                    title={"On divise le montant moyen de l'impôt par la moyenne des RFR du décile, qui est de : " + row.rfrMoyenFoyer + " € /an"}>
+                    title={(<Fragment>{"On divise le montant moyen de l'impôt par la moyenne des RFR du décile, qui est de : "}<strong>{`${row.rfrMoyenFoyer} €`}</strong> € /an</Fragment>)}>
             <div>
               { row.ratioAvantSurRfr === undefined
                 ? null
               : (
                 <span className={styles.base}>
-                      {`${row.ratioAvantSurRfr}`}
+                      {row.ratioAvantSurRfr} %
                 </span>
               )
               }
@@ -260,7 +260,7 @@ export function SimpopTableurInfosDeciles({ deciles, frontieresDeciles }: Props)
                   <span className={styles.plf}>
                         {row.ratioPlfSurRfr === "-"
                           ? NON_APPLICABLE
-                          : `${row.ratioPlfSurRfr}`}
+                          : `${row.ratioPlfSurRfr} %`}
                       </span>
                 )
               }
@@ -272,50 +272,70 @@ export function SimpopTableurInfosDeciles({ deciles, frontieresDeciles }: Props)
                     <span className={styles.reform}>
                       {row.ratioApresSurRfr === "-"
                         ? NON_APPLICABLE
-                        : `${row.ratioApresSurRfr}`}
+                        : `${row.ratioApresSurRfr} %`}
                     </span>
                   )
               }
-              %
+              
               </div>
               </Tooltip>
             </TableCell>
             <TableCell classes={{ root: styles.cellStyle }}>
-            <Tooltip classes={{
-                      popper: styles.tooltipContainer,
-                      tooltip: styles.tooltipContent,
-                    }}
-                    title={"On soustrait le montant après du montant avant et on le divise par le RFR moyen qui est de " + row.rfrMoyenFoyer + " € /an pour ce décile"}>
+            
             <div>
               {
                 // If PLF, display diff with avant
                 (row.ratioEcartPlfMoinsAvantSurRfr === undefined)
                 ? null
-              : (<span className={styles.plf}>
-                      {`${row.ratioEcartPlfMoinsAvantSurRfr}`}
-                    </span>)
+              : (
+                <Tooltip classes={{ popper: styles.tooltipContainer, tooltip: styles.tooltipContent }}
+                title={
+                (<Fragment>
+                {"On soustrait le montant de la loi en vigueur au montant du PLF"}<br/>
+                {" et on divise le résultat par le RFR moyen qui est de"}<br />
+                <strong>{`${row.rfrMoyenFoyer} €`}</strong>
+                {"  /an pour ce décile."}</Fragment>)}>
+                  <span className={styles.plf}>
+                    {`${row.ratioEcartPlfMoinsAvantSurRfr} ‰`}
+                  </span>
+                </Tooltip>)
               }
               {
                 // If reform and PLF, display diff with PLF
                 row.ratioEcartApresMoinsPlfSurRfr === undefined
                   ? null
-                  : (<span className={styles.reform}>
-                      {`${row.ratioEcartApresMoinsPlfSurRfr}`}
-                    </span>)
+                  : (
+                    <Tooltip classes={{ popper: styles.tooltipContainer, tooltip: styles.tooltipContent }}
+                title={
+                (<Fragment>
+                {"On soustrait le montant après amendement du montant avec PLF"}<br/>
+                {" et on le divise par le RFR moyen qui est de"}<br />
+                <strong>{`${row.rfrMoyenFoyer} €`}</strong>
+                {"  /an pour ce décile."}</Fragment>)}>
+                    <span className={styles.reform}>
+                      {`${row.ratioEcartApresMoinsPlfSurRfr} ‰`}
+                    </span></Tooltip>)
               }
               {
                 // If reform and NO PLF, display diff with avant
                 row.ratioEcartApresMoinsAvantSurRfr === undefined
                 ? null
                 : (row.ratioEcartPlfMoinsAvantSurRfr === undefined)
-                  ? (<span className={styles.reform}>
-                  {`${row.ratioEcartApresMoinsAvantSurRfr}`}
-                  </span>)
+                  ? ( <Tooltip classes={{ popper: styles.tooltipContainer, tooltip: styles.tooltipContent }}
+                    title={
+                      (<Fragment>
+                      {"On soustrait le montant après amendement du montant de la loi en vigueure"}<br/>
+                      {" et on le divise par le RFR moyen qui est de"}<br />
+                      <strong>{`${row.rfrMoyenFoyer} €`}</strong>
+                      {"  /an pour ce décile."}</Fragment>)}>
+                    <span className={styles.reform}>
+                    {`${row.ratioEcartApresMoinsAvantSurRfr} ‰`}
+                    </span></Tooltip>)
                   : null
               }
-              ‰
+              
               </div>
-              </Tooltip>
+              
             </TableCell>            
             
           </TableRow>