Skip to content
Snippets Groups Projects
Unverified Commit e2191b5b authored by David Smadja's avatar David Smadja Committed by Dorine Lambinet
Browse files

rework linkedvariables for compare view

parent 2c332eb2
No related branches found
No related tags found
1 merge request!302Resolve "Appliquer la nouvelle feuille de paie au mode comparaison"
Pipeline #19985 passed
<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}&nbsp;:&nbsp;</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>
<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}&nbsp;:&nbsp;</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}&nbsp;:&nbsp;</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>
<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}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment