Skip to content
Snippets Groups Projects
Unverified Commit e4ff84f9 authored by Dorine Lambinet's avatar Dorine Lambinet
Browse files

Fix le layout qui accueille le waterfall comparé, et harmonise avec le code... 

Fix le layout qui accueille le waterfall comparé, et harmonise avec le code présent dans TestCaseView
parent 164c1034
No related branches found
No related tags found
1 merge request!302Resolve "Appliquer la nouvelle feuille de paie au mode comparaison"
Hide whitespace changes
Inline Side-by-side
src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/TestCaseCompareView.svelte
+ 15
− 219
View file @ e4ff84f9
<script lang="ts">
import type { DecompositionReference } from "@openfisca/json-model"
import SourcesMethodTooltip from "$lib/components/impacts_view/SourcesMethodTooltip.svelte"
import { createEventDispatcher } from "svelte"
import type { CalculationName } from "$lib/calculations.svelte"
import TestCaseSummary from "$lib/components/impacts_view/test_cases_view/test_case_selected/TestCaseSummary.svelte"
import ValueChangeCompare from "$lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/ValueChangeCompare.svelte"
import PaySlipCompareView from "$lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/PaySlipCompareView.svelte"
import { type EvaluationByName, waterfalls } from "$lib/decompositions"
import type { DisplayMode } from "$lib/displays"
import { billName, revaluationName, shared } from "$lib/shared.svelte"
import { shared } from "$lib/shared.svelte"
import { newSimulationUrl } from "$lib/urls"
import { variableSummaryByName } from "$lib/variables"
......@@ -100,217 +100,9 @@
</div>
<div id="situation_{situationsToCompareIndex.join('_')}_waterfall">
{#if variableSummaryByName !== undefined}
<div class="flex justify-between bg-gray-100">
<div class="flex w-full justify-between bg-gray-200">
<!-- Impacts et waterfall -->
<div
class="min-h-[30em] w-10/12 bg-gradient-to-r from-gray-100 from-50% to-white to-50% bg-cover bg-center bg-no-repeat px-3 text-center md:w-11/12"
>
<div class="relative flex-col border-gray-400 p-3 pb-6">
<div
class="flex justify-between gap-4"
title="⚠️ Les dispositifs n'étant pas tous à jour, cette somme est à considérer avec prudence."
>
<div class="mb-4 w-full flex-col text-gray-700">
<p class="mb-1 text-base font-medium">
{shared.waterfall.totalLabel}<svg
aria-hidden="true"
class="mx-1 inline-flex h-4 w-4 fill-current text-white"
viewBox="0 0 24 22"
xmlns="http://www.w3.org/2000/svg"
>
<path
class="text-[#FFAC33]"
d="M0.124322 18.4377C-0.240619 19.1041 0.241623 19.918 1.00142 19.918H20.6259C21.3857 19.918 21.868 19.1041 21.503 18.4377L11.6908 0.519686C11.3113 -0.173228 10.316 -0.173229 9.93658 0.519685L0.124322 18.4377ZM11.8591 16.8375C11.8591 17.3898 11.4114 17.8375 10.8591 17.8375H10.7682C10.2159 17.8375 9.76822 17.3898 9.76822 16.8375V16.627C9.76822 16.0747 10.2159 15.627 10.7682 15.627H10.8591C11.4114 15.627 11.8591 16.0747 11.8591 16.627V16.8375ZM11.8591 12.7416C11.8591 13.2938 11.4114 13.7416 10.8591 13.7416H10.7682C10.2159 13.7416 9.76822 13.2938 9.76822 12.7416V7.3298C9.76822 6.77751 10.2159 6.3298 10.7682 6.3298H10.8591C11.4114 6.3298 11.8591 6.77751 11.8591 7.3298V12.7416Z"
/>
<path
d="M10.7686 17.8378H10.8595C11.4117 17.8378 11.8595 17.3901 11.8595 16.8378V16.6273C11.8595 16.075 11.4117 15.6273 10.8595 15.6273H10.7686C10.2163 15.6273 9.76855 16.075 9.76855 16.6273V16.8378C9.76855 17.3901 10.2163 17.8378 10.7686 17.8378Z"
/>
<path
d="M10.7686 13.7418H10.8595C11.4117 13.7418 11.8595 13.2941 11.8595 12.7418V7.33008C11.8595 6.77779 11.4117 6.33008 10.8595 6.33008H10.7686C10.2163 6.33008 9.76855 6.77779 9.76855 7.33008V12.7418C9.76855 13.2941 10.2163 13.7418 10.7686 13.7418Z"
/>
</svg>:
</p>
<ValueChangeCompare
legend
unitName="currency-EUR"
valueByCalculationName0={{
amendment:
Object.keys(shared.parametricReform).length === 0
? undefined
: calculateTotal(
shared.evaluationByNameArray[
situationsToCompareIndex[0]
],
"amendment",
shared.waterfall.root,
shared.waterfall.total,
),
bill:
billName === undefined
? undefined
: calculateTotal(
shared.evaluationByNameArray[
situationsToCompareIndex[0]
],
"bill",
shared.waterfall.root,
shared.waterfall.total,
),
law: calculateTotal(
shared.evaluationByNameArray[situationsToCompareIndex[0]],
"law",
shared.waterfall.root,
shared.waterfall.total,
),
revaluation:
revaluationName === undefined
? undefined
: calculateTotal(
shared.evaluationByNameArray[
situationsToCompareIndex[0]
],
"revaluation",
shared.waterfall.root,
shared.waterfall.total,
),
}}
valueByCalculationName1={{
amendment:
Object.keys(shared.parametricReform).length === 0
? undefined
: calculateTotal(
shared.evaluationByNameArray[
situationsToCompareIndex[1]
],
"amendment",
shared.waterfall.root,
shared.waterfall.total,
),
bill:
billName === undefined
? undefined
: calculateTotal(
shared.evaluationByNameArray[
situationsToCompareIndex[1]
],
"bill",
shared.waterfall.root,
shared.waterfall.total,
),
law: calculateTotal(
shared.evaluationByNameArray[situationsToCompareIndex[1]],
"law",
shared.waterfall.root,
shared.waterfall.total,
),
revaluation:
revaluationName === undefined
? undefined
: calculateTotal(
shared.evaluationByNameArray[
situationsToCompareIndex[1]
],
"revaluation",
shared.waterfall.root,
shared.waterfall.total,
),
}}
/>
</div>
<!-- <div class="flex-col w-1/2 text-gray-500 text-sm mt-8">
<p>
dont <span class="font-bold text-black">100 €</span> de compléments
de ressources.
</p>
<p>
dont <span class="font-bold text-black">200 €</span> de prélèvements
obligatoires.
</p>
</div> -->
</div>
{#if displayMode.parametersVariableName !== undefined && shared.decompositionByName[displayMode.parametersVariableName] !== undefined}
<div class="mt-2 flex-col">
<p class="mb-1 text-lg font-black">
{shared.decompositionByName[
displayMode.parametersVariableName
].short_label ??
shared.decompositionByName[
displayMode.parametersVariableName
].label ??
displayMode.parametersVariableName}&nbsp;:
</p>
<div class="text-2xl font-semibold">
<ValueChangeCompare
unitName="currency-EUR"
valueByCalculationName0={{
amendment:
Object.keys(shared.parametricReform).length === 0
? undefined
: (shared.evaluationByNameArray[
situationsToCompareIndex[0]
][displayMode.parametersVariableName]
?.calculationEvaluationByName["amendment"]
?.deltaAtVectorIndex ?? 0),
bill:
billName === undefined
? undefined
: (shared.evaluationByNameArray[
situationsToCompareIndex[0]
][displayMode.parametersVariableName]
?.calculationEvaluationByName["bill"]
?.deltaAtVectorIndex ?? 0),
law:
shared.evaluationByNameArray[
situationsToCompareIndex[0]
][displayMode.parametersVariableName]
?.calculationEvaluationByName["law"]
?.deltaAtVectorIndex ?? 0,
revaluation:
revaluationName === undefined
? undefined
: (shared.evaluationByNameArray[
situationsToCompareIndex[0]
][displayMode.parametersVariableName]
?.calculationEvaluationByName["revaluation"]
?.deltaAtVectorIndex ?? 0),
}}
valueByCalculationName1={{
amendment:
Object.keys(shared.parametricReform).length === 0
? undefined
: (shared.evaluationByNameArray[
situationsToCompareIndex[1]
][displayMode.parametersVariableName]
?.calculationEvaluationByName["amendment"]
?.deltaAtVectorIndex ?? 0),
bill:
billName === undefined
? undefined
: (shared.evaluationByNameArray[
situationsToCompareIndex[1]
][displayMode.parametersVariableName]
?.calculationEvaluationByName["bill"]
?.deltaAtVectorIndex ?? 0),
law:
shared.evaluationByNameArray[
situationsToCompareIndex[1]
][displayMode.parametersVariableName]
?.calculationEvaluationByName["law"]
?.deltaAtVectorIndex ?? 0,
revaluation:
revaluationName === undefined
? undefined
: (shared.evaluationByNameArray[
situationsToCompareIndex[1]
][displayMode.parametersVariableName]
?.calculationEvaluationByName["revaluation"]
?.deltaAtVectorIndex ?? 0),
}}
/>
</div>
</div>
{/if}
</div>
<div class="relative w-10/12 bg-white pb-4 md:w-11/12">
<PaySlipCompareView
{displayMode}
evaluationByNameArray={shared.evaluationByNameArray}
......@@ -321,15 +113,16 @@
/>
</div>
<!--Onglets-->
<div
class="flex h-[24em] w-2/12 flex-col justify-between bg-gray-100 md:w-1/12"
>
<div class="flex w-2/12 flex-col justify-start bg-gray-200 md:w-1/12">
{#each waterfalls as { icon, label, name }}
<a
class="flex grow items-center justify-center shadow-inner"
class="group flex h-[9em] shrink items-center justify-center shadow-inner"
class:bg-white={name === shared.waterfall.name}
class:hover:bg-gray-300={name !== shared.waterfall.name}
class:border-le-bleu={name === shared.waterfall.name}
class:border-r-4={name === shared.waterfall.name}
class:border-l={name !== shared.waterfall.name}
class:border-gray-300={name !== shared.waterfall.name}
class:shadow-none={name === shared.waterfall.name}
href={newSimulationUrl({
...displayMode,
......@@ -338,17 +131,19 @@
data-sveltekit-noscroll
>
<div class="origin-center rotate-90">
<div class="mr-5 flex">
<div class="mr-6 flex">
{#if icon !== undefined}
<img
class="block origin-center -rotate-90"
alt=""
alt="Icone pour {label}"
src={icon}
/>
{/if}
<span
class="ml-2 text-xs uppercase tracking-wide text-gray-500 xl:text-sm"
class="ml-2 text-xs uppercase tracking-wide text-gray-600 xl:text-sm"
class:text-le-bleu={name === shared.waterfall.name}
class:group-hover:text-black={name !==
shared.waterfall.name}
class:font-bold={name === shared.waterfall.name}
>
{label}
......@@ -359,6 +154,7 @@
{/each}
</div>
</div>
<SourcesMethodTooltip {displayMode} />
{/if}
</div>
</div>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment