diff --git a/README.md b/README.md index 1eff2fc1597664b5c755ac7f59b4e8dfbdd5e7b0..6665393af395fd733b046ba56f03c2fb59fe56c8 100644 --- a/README.md +++ b/README.md @@ -42,3 +42,103 @@ La commande conserve la main tout en restant à l'écoute des modifications de c L'application peut alors être consultée dans un navigateur à l'adresse indiquée (par défaut : `http://localhost:3000`), mais la première fois il peut être nécessaire de la recharger plusieurs fois, le temps que toutes les dépendances se compilent. Bravo ! Vous êtes prêts à utiliser et contribuer à `leximpact-socio-fiscal-ui` 🎉 + + +## Documentation + +### Ajouter une variable calculée dans le simulateur + +Dans l'application, seules les variables indiquées dans la feuille de paie sont calculées. Pour afficher les résultats d'une autre variable il faut donc demander à l'application de la récuéprer. + +#### Variable affichée dans l'étiquette du cas type : + +1. Dans le fichier variables.ts, ajouter le nom de la viariable OpenFisca : + +```shell +/// test case summaries. +export const summaryCalculatedVariablesName = [ + "assiette_csg_revenus_capital", + "assiette_csg_plus_values", + "niveau_de_vie", + "plus_values_base_large", + "rente_viagere_titre_onereux_net", + "rsa", + "zone_apl", +``` + +2. Dans le fichier TestCaseSummary.svelte, Appeler la variable dans la bonne catégorie (Ménage, foyer fiscal, individu, etc), comme fait dans cet exemple avec la variable `zone_apl` + +```shell +{@const zone_apl = +getCalculatedVariableNumberValue( +situation, +valuesByCalculationNameByVariableName, +"zone_apl", +populationId, +) ?? 0} +``` + +3. Ensuite, appeler la variable dans le composant choisi : + +```shell +<div> + {zone_apl} +</div> +``` + +#### Variable affichée dans la décomposition : + +1. Dans le fichier variables.ts, ajouter le nom de la viariable OpenFisca : + +```shell +/// Autres variables à calculer +export const otherCalculatedVariablesName = [ + "niveau_de_vie", + "unites_consommation", + "taxes_tous_carburants", +] +``` +2. Dans le fichier souhaité, Appeler la variable dans la bonne catégorie (Ménage, foyer fiscal, individu, etc), comme fait dans cet exemple avec la variable `niveau_de_vie` dans le fichier `WaterfallView.svelte` : + +```shell +{@const niveau_de_vie = +getCalculatedVariableNumberValue( + situation, + valuesByCalculationNameByVariableName, + "niveau_de_vie", + populationId, +) ?? 0} +``` + +3. Ensuite, appeler la variable dans le composant choisi : + + +```shell +{#if niveau_de_vie !== 0} + <div + class="border-t flex items-center justify-between text-gray-500" + > + <a + href={newSimulationUrl({ + ...displayMode, + parametersVariableName: "niveau_de_vie", + })} + class="border-t border-gray-400 ml-4 hover:underline" + >Niveau de vie</a + > + <p class="flex text-sm mr-4 border-t border-gray-400 p-0.5 gap-1"> + = <ValueChange + unitName="currency-EUR" + valueByCalculationName={getCalculatedVariableValueByCalculationName( + situation, + valuesByCalculationNameByVariableName, + variableSummaryByName["niveau_de_vie"], + populationId, + )} + /> + </p> + </div> +{/if} +``` + +Utiliser le composant `ValueChange` pour afficher le montant. \ No newline at end of file