Skip to content
Snippets Groups Projects
Unverified Commit b7d7ca65 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 979d6bba
No related branches found
No related tags found
No related merge requests found
Show 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 @ b7d7ca65
<script lang="ts"> <script lang="ts">
import type { DecompositionReference } from "@openfisca/json-model" import type { DecompositionReference } from "@openfisca/json-model"
import SourcesMethodTooltip from "$lib/components/impacts_view/SourcesMethodTooltip.svelte"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import type { CalculationName } from "$lib/calculations.svelte" import type { CalculationName } from "$lib/calculations.svelte"
import TestCaseSummary from "$lib/components/impacts_view/test_cases_view/test_case_selected/TestCaseSummary.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 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 EvaluationByName, waterfalls } from "$lib/decompositions"
import type { DisplayMode } from "$lib/displays" 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 { newSimulationUrl } from "$lib/urls"
import { variableSummaryByName } from "$lib/variables" import { variableSummaryByName } from "$lib/variables"
...@@ -100,217 +100,9 @@ ...@@ -100,217 +100,9 @@
</div> </div>
<div id="situation_{situationsToCompareIndex.join('_')}_waterfall"> <div id="situation_{situationsToCompareIndex.join('_')}_waterfall">
{#if variableSummaryByName !== undefined} {#if variableSummaryByName !== undefined}
<div class="flex justify-between bg-gray-100"> <div class="flex w-full justify-between bg-gray-200">
<!-- Impacts et waterfall --> <!-- Impacts et waterfall -->
<div <div class="relative w-10/12 bg-white pb-4 md:w-11/12">
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>
<PaySlipCompareView <PaySlipCompareView
{displayMode} {displayMode}
evaluationByNameArray={shared.evaluationByNameArray} evaluationByNameArray={shared.evaluationByNameArray}
...@@ -321,15 +113,16 @@ ...@@ -321,15 +113,16 @@
/> />
</div> </div>
<!--Onglets--> <!--Onglets-->
<div <div class="flex w-2/12 flex-col justify-start bg-gray-200 md:w-1/12">
class="flex h-[24em] w-2/12 flex-col justify-between bg-gray-100 md:w-1/12"
>
{#each waterfalls as { icon, label, name }} {#each waterfalls as { icon, label, name }}
<a <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: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-le-bleu={name === shared.waterfall.name}
class:border-r-4={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} class:shadow-none={name === shared.waterfall.name}
href={newSimulationUrl({ href={newSimulationUrl({
...displayMode, ...displayMode,
...@@ -338,17 +131,19 @@ ...@@ -338,17 +131,19 @@
data-sveltekit-noscroll data-sveltekit-noscroll
> >
<div class="origin-center rotate-90"> <div class="origin-center rotate-90">
<div class="mr-5 flex"> <div class="mr-6 flex">
{#if icon !== undefined} {#if icon !== undefined}
<img <img
class="block origin-center -rotate-90" class="block origin-center -rotate-90"
alt="" alt="Icone pour {label}"
src={icon} src={icon}
/> />
{/if} {/if}
<span <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:text-le-bleu={name === shared.waterfall.name}
class:group-hover:text-black={name !==
shared.waterfall.name}
class:font-bold={name === shared.waterfall.name} class:font-bold={name === shared.waterfall.name}
> >
{label} {label}
...@@ -359,6 +154,7 @@ ...@@ -359,6 +154,7 @@
{/each} {/each}
</div> </div>
</div> </div>
<SourcesMethodTooltip {displayMode} />
{/if} {/if}
</div> </div>
</div> </div>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment