diff --git a/src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/TestCaseCompareView.svelte b/src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/TestCaseCompareView.svelte
index 2f884fbafa95949349fb8af697ab0ccdd54b39d1..b5c7b433d141db07b4b2cce087b506c685eb74a0 100644
--- a/src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/TestCaseCompareView.svelte
+++ b/src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/TestCaseCompareView.svelte
@@ -1,14 +1,14 @@
<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} :
- </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>