From e2191b5b577e9739099103eeaf193ab55be42d50 Mon Sep 17 00:00:00 2001
From: David Smadja <david.smadja@assemblee-nationale.fr>
Date: Mon, 24 Mar 2025 13:40:43 +0100
Subject: [PATCH] rework linkedvariables for compare view
---
.../compare_mode/LinkedVariables.svelte | 136 -------------
.../LinkedVariablesCompareView.svelte | 180 ++++++++++++++++++
.../compare_mode/PaySlipCompareView.svelte | 6 +-
3 files changed, 182 insertions(+), 140 deletions(-)
delete mode 100644 src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/LinkedVariables.svelte
create mode 100644 src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/LinkedVariablesCompareView.svelte
diff --git a/src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/LinkedVariables.svelte b/src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/LinkedVariables.svelte
deleted file mode 100644
index 788f0c73..00000000
--- a/src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/LinkedVariables.svelte
+++ /dev/null
@@ -1,136 +0,0 @@
-<script lang="ts">
- import {
- type Decomposition,
- type EvaluationByName,
- } from "$lib/decompositions"
- import type { DisplayMode } from "$lib/displays"
- import { billName, revaluationName, shared } from "$lib/shared.svelte"
- import { variableSummaryByNameByReformName } from "$lib/variables"
- import type {
- DecompositionReference,
- VariableByName,
- } from "@openfisca/json-model"
- import VariableValueChange from "$lib/components/impacts_view/ValueChange.svelte"
- import {
- isNullVariableValueByCalculationName,
- variableValueByCalculationNameFromEvaluation,
- } from "$lib/calculations.svelte"
- import { newSimulationUrl } from "$lib/urls"
- import { removeNegativeZero } from "$lib/values"
-
- interface Props {
- displayMode: DisplayMode
- evaluationByNameArray: EvaluationByName[]
- situationsToCompareIndex: number[]
- variableSummaryByName: VariableByName
- decomposition: Decomposition
- visibleChildren: DecompositionReference[] | undefined
- }
-
- let {
- displayMode,
- evaluationByNameArray,
- decomposition,
- situationsToCompareIndex,
- variableSummaryByName,
- visibleChildren,
- }: Props = $props()
-
- const variableSummary =
- billName === undefined
- ? variableSummaryByName[displayMode.parametersVariableName!]
- : variableSummaryByNameByReformName[billName][
- displayMode.parametersVariableName!
- ]
-
- const linkedVariables = variableSummary.linked_other_variables
-
- const deltaFormatter = (value: number): string =>
- new Intl.NumberFormat("fr-FR", {
- currency: "EUR",
- maximumFractionDigits: 0,
- minimumFractionDigits: 0,
- signDisplay: "never",
- style: "currency",
- }).format(removeNegativeZero(value))
-</script>
-
-{#if linkedVariables !== undefined}
- <div class="fond flex pr-4">
- <!--Indentation pour chaque niveau de l'arbre, illustré par une bordure-->
-
- <div
- class="w-full border-dashed border-black"
- class:border-l-0={!decomposition.open}
- class:border-l-2={decomposition.open && visibleChildren !== undefined}
- class:pl-0.5={!decomposition.open}
- >
- <div
- class="mb-2 flex w-full grow flex-col justify-end lg:flex-row"
- id="situation_{situationsToCompareIndex}_totalimpact"
- >
- <div class="flex w-full grow py-3 pl-5">
- {#if linkedVariables !== undefined}
- {@const linkedVariablesValueByCalculationName = linkedVariables.map(
- (name) =>
- variableValueByCalculationNameFromEvaluation(
- evaluationByNameArray[name],
- revaluationName,
- billName,
- shared.parametricReform,
- ),
- )}
- {#if shared.showNulls || !linkedVariablesValueByCalculationName.every(isNullVariableValueByCalculationName)}
- <ul
- class="flex h-fit flex-col rounded-md border bg-white p-2 text-gray-800"
- >
- {#each linkedVariables as linkedVariableName, index}
- {@const linkedVariableValueByCalculationName =
- linkedVariablesValueByCalculationName[index]}
- {#if shared.showNulls || !isNullVariableValueByCalculationName(linkedVariableValueByCalculationName)}
- {@const linkedVariableSummary =
- billName === undefined
- ? variableSummaryByName[linkedVariableName]
- : variableSummaryByNameByReformName[billName][
- linkedVariableName
- ]}
- <li class="flex justify-between gap-2 text-sm">
- <a
- class="2xl:text-md max-w-32 cursor-pointer overflow-x-hidden text-ellipsis text-nowrap hover:underline sm:max-w-none lg:max-w-44 xl:max-w-none"
- href={newSimulationUrl({
- ...displayMode,
- parametersVariableName: linkedVariableName,
- })}
- data-sveltekit-noscroll
- ><span class="text-gray-600"
- >{linkedVariableSummary.short_label ??
- linkedVariableSummary.label ??
- linkedVariableName} : </span
- ></a
- >
- <VariableValueChange
- {evaluationByNameArray}
- name={linkedVariableName}
- valueByCalculationName={linkedVariableValueByCalculationName}
- inline
- bold
- />
- </li>
- {/if}
- {/each}
- </ul>
- {/if}
- {/if}
- </div>
- </div>
- </div>
- </div>
-{/if}
-
-<style lang="postcss">
- .fond {
- background-color: #ffffff;
- /* Polka dots - Heropatterns.com échelle réduite */
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23A0A0A0' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
- }
-</style>
diff --git a/src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/LinkedVariablesCompareView.svelte b/src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/LinkedVariablesCompareView.svelte
new file mode 100644
index 00000000..c6321c6e
--- /dev/null
+++ b/src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/LinkedVariablesCompareView.svelte
@@ -0,0 +1,180 @@
+<script lang="ts">
+ import {
+ type Decomposition,
+ type EvaluationByName,
+ } from "$lib/decompositions"
+ import type { DisplayMode } from "$lib/displays"
+ import { billName, revaluationName, shared } from "$lib/shared.svelte"
+ import { variableSummaryByNameByReformName } from "$lib/variables"
+ import type {
+ DecompositionReference,
+ VariableByName,
+ } from "@openfisca/json-model"
+ import VariableValueChange from "$lib/components/impacts_view/ValueChange.svelte"
+ import {
+ isNullVariableValueByCalculationName,
+ variableValueByCalculationNameFromEvaluation,
+ } from "$lib/calculations.svelte"
+ import { newSimulationUrl } from "$lib/urls"
+
+ interface Props {
+ displayMode: DisplayMode
+ evaluationByNameArray: EvaluationByName[]
+ situationsToCompareIndex: number[]
+ variableSummaryByName: VariableByName
+ decomposition: Decomposition
+ visibleChildren: DecompositionReference[] | undefined
+ }
+
+ let {
+ displayMode,
+ evaluationByNameArray,
+ situationsToCompareIndex,
+ variableSummaryByName,
+ decomposition,
+ visibleChildren,
+ }: Props = $props()
+
+ const variableSummary =
+ billName === undefined
+ ? variableSummaryByName[displayMode.parametersVariableName!]
+ : variableSummaryByNameByReformName[billName][
+ displayMode.parametersVariableName!
+ ]
+
+ const linkedVariables = variableSummary.linked_other_variables
+ const situationIndexLeft = situationsToCompareIndex[0]
+ const situationIndexRight = situationsToCompareIndex[1]
+ let evaluationByNameLeft: EvaluationByName = $derived(
+ evaluationByNameArray[situationIndexLeft],
+ )
+ let evaluationByNameRight: EvaluationByName = $derived(
+ evaluationByNameArray[situationIndexRight],
+ )
+</script>
+
+{#if linkedVariables !== undefined}
+ <div
+ class="fond flex w-full grow border-dashed border-black px-4"
+ class:border-l-0={!decomposition.open}
+ class:border-l-2={decomposition.open && visibleChildren !== undefined}
+ class:pl-0.5={!decomposition.open}
+ >
+ <!-- <div
+ class="mb-2 flex w-full grow flex-col justify-end lg:flex-row"
+ id="situation_{situationIndexLeft}_totalimpact"
+ > -->
+ <div class="flex w-full grow justify-around py-3 pl-5">
+ {#if linkedVariables !== undefined}
+ {@const linkedVariablesValueByCalculationNameLeft = linkedVariables.map(
+ (name) =>
+ variableValueByCalculationNameFromEvaluation(
+ evaluationByNameLeft[name],
+ revaluationName,
+ billName,
+ shared.parametricReform,
+ ),
+ )}
+ {#if shared.showNulls || !linkedVariablesValueByCalculationNameLeft.every(isNullVariableValueByCalculationName)}
+ <ul
+ class="flex h-fit flex-col rounded-md border bg-white p-2 text-gray-800"
+ >
+ {#each linkedVariables as linkedVariableName, index}
+ {@const linkedVariableValueByCalculationNameLeft =
+ linkedVariablesValueByCalculationNameLeft[index]}
+ {#if shared.showNulls || !isNullVariableValueByCalculationName(linkedVariableValueByCalculationNameLeft)}
+ {@const linkedVariableSummary =
+ billName === undefined
+ ? variableSummaryByName[linkedVariableName]
+ : variableSummaryByNameByReformName[billName][
+ linkedVariableName
+ ]}
+ <li class="flex justify-between gap-2 text-sm">
+ <a
+ class="2xl:text-md max-w-32 cursor-pointer overflow-x-hidden text-ellipsis text-nowrap hover:underline sm:max-w-none lg:max-w-44 xl:max-w-none"
+ href={newSimulationUrl({
+ ...displayMode,
+ parametersVariableName: linkedVariableName,
+ })}
+ data-sveltekit-noscroll
+ ><span class="text-gray-600"
+ >{linkedVariableSummary.short_label ??
+ linkedVariableSummary.label ??
+ linkedVariableName} : </span
+ ></a
+ >
+ <VariableValueChange
+ {evaluationByNameLeft}
+ name={linkedVariableName}
+ valueByCalculationName={linkedVariableValueByCalculationNameLeft}
+ inline
+ bold
+ />
+ </li>
+ {/if}
+ {/each}
+ </ul>
+ {/if}
+
+ {@const linkedVariablesValueByCalculationNameRight =
+ linkedVariables.map((name) =>
+ variableValueByCalculationNameFromEvaluation(
+ evaluationByNameRight[name],
+ revaluationName,
+ billName,
+ shared.parametricReform,
+ ),
+ )}
+ {#if shared.showNulls || !linkedVariablesValueByCalculationNameRight.every(isNullVariableValueByCalculationName)}
+ <ul
+ class="flex h-fit flex-col rounded-md border bg-white p-2 text-gray-800"
+ >
+ {#each linkedVariables as linkedVariableName, index}
+ {@const linkedVariableValueByCalculationNameRight =
+ linkedVariablesValueByCalculationNameRight[index]}
+ {#if shared.showNulls || !isNullVariableValueByCalculationName(linkedVariableValueByCalculationNameRight)}
+ {@const linkedVariableSummary =
+ billName === undefined
+ ? variableSummaryByName[linkedVariableName]
+ : variableSummaryByNameByReformName[billName][
+ linkedVariableName
+ ]}
+ <li class="flex justify-between gap-2 text-sm">
+ <a
+ class="2xl:text-md max-w-32 cursor-pointer overflow-x-hidden text-ellipsis text-nowrap hover:underline sm:max-w-none lg:max-w-44 xl:max-w-none"
+ href={newSimulationUrl({
+ ...displayMode,
+ parametersVariableName: linkedVariableName,
+ })}
+ data-sveltekit-noscroll
+ ><span class="text-gray-600"
+ >{linkedVariableSummary.short_label ??
+ linkedVariableSummary.label ??
+ linkedVariableName} : </span
+ ></a
+ >
+ <VariableValueChange
+ {evaluationByNameRight}
+ name={linkedVariableName}
+ valueByCalculationName={linkedVariableValueByCalculationNameRight}
+ inline
+ bold
+ />
+ </li>
+ {/if}
+ {/each}
+ </ul>
+ {/if}
+ {/if}
+ </div>
+ <!-- </div> -->
+ </div>
+{/if}
+
+<style lang="postcss">
+ .fond {
+ background-color: #ffffff;
+ /* Polka dots - Heropatterns.com échelle réduite */
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23A0A0A0' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
+ }
+</style>
diff --git a/src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/PaySlipCompareView.svelte b/src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/PaySlipCompareView.svelte
index 90339e76..6f731343 100644
--- a/src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/PaySlipCompareView.svelte
+++ b/src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/PaySlipCompareView.svelte
@@ -1,6 +1,4 @@
<script lang="ts">
- import { preventDefault } from "svelte/legacy"
-
import type { VariableByName } from "@openfisca/json-model"
import { goto } from "$app/navigation"
@@ -18,7 +16,7 @@
import type { Situation } from "$lib/situations"
import { newSimulationUrl } from "$lib/urls"
import { removeNegativeZero } from "$lib/values"
- import LinkedVariables from "$lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/LinkedVariables.svelte"
+ import LinkedVariablesCompareView from "$lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/LinkedVariablesCompareView.svelte"
interface Props {
displayMode: DisplayMode
@@ -588,7 +586,7 @@
</div>
<!--Affichage des variables liées s'il y en a-->
{#if displayMode.parametersVariableName !== undefined && decomposition.name === displayMode.parametersVariableName}
- <LinkedVariables
+ <LinkedVariablesCompareView
{displayMode}
{evaluationByNameArray}
{situationsToCompareIndex}
--
GitLab