diff --git a/src/lib/components/impacts_view/test_cases_view/test_case_selected/graph/TestCaseGraph.svelte b/src/lib/components/impacts_view/test_cases_view/test_case_selected/graph/TestCaseGraph.svelte index 7dc069f1ee1dd29abb8b4ca5964daf02f527ec12..e969e466d5da55df60cd77a836eef2c26a4f8040 100644 --- a/src/lib/components/impacts_view/test_cases_view/test_case_selected/graph/TestCaseGraph.svelte +++ b/src/lib/components/impacts_view/test_cases_view/test_case_selected/graph/TestCaseGraph.svelte @@ -34,6 +34,8 @@ import TestCaseGraphXlsxExport from "$lib/components/impacts_view/test_cases_view/test_case_selected/graph/TestCaseGraphXlsxExport.svelte" import Tooltip from "$lib/components/ui_transverse_components/Tooltip.svelte" import ValueChange from "$lib/components/impacts_view/ValueChange.svelte" + import VerticalLine from "$lib/components/ui_transverse_components/piece_of_cake/VerticalLine.svelte" + import { buildVisibleDecompositionsForGraph, type EvaluationByName, @@ -1059,7 +1061,6 @@ initialPlacement="top" > <button - aria-label={isSelected ? "Cacher" : "Montrer"} class="group h-full pl-0.5 pr-1" onclick={() => { variableCustomizations[ @@ -1094,6 +1095,7 @@ </button> {#snippet tooltip()} <div + id="hide-show-tooltip" class="overflow-hidden rounded-lg bg-black px-2 py-1 text-sm text-white" title={isSelected ? "Cacher" : "Montrer"} > @@ -1161,7 +1163,7 @@ <PieceOfCake modelGroups={variableValues.map((variableValuesGroup) => variableValuesGroup.reduce( - (arr, { depth, label, name, rows, trunk }) => { + (arr: CurveModel[], { depth, label, name, rows, trunk }) => { for (const row of rows) { arr.push( new CurveModel( @@ -1230,6 +1232,7 @@ }} > {#snippet children({ modelGroups })} + <VerticalLine {situation} {year}></VerticalLine> <SharedTooltip {modelGroups}> {#snippet children({ index })} <div diff --git a/src/lib/components/ui_transverse_components/piece_of_cake/VerticalLine.svelte b/src/lib/components/ui_transverse_components/piece_of_cake/VerticalLine.svelte new file mode 100644 index 0000000000000000000000000000000000000000..a05ea60cbf9c600ee5152d3b038a1140a102840d --- /dev/null +++ b/src/lib/components/ui_transverse_components/piece_of_cake/VerticalLine.svelte @@ -0,0 +1,55 @@ +<script lang="ts"> + import { entityByKey, personEntityKey } from "$lib/entities" + import { getSituationVariableValue, type Situation } from "$lib/situations" + import { variableSummaryByName, type VariableValue } from "$lib/variables" + import type { PopulationWithoutId } from "@openfisca/json-model" + + interface Props { + situation: Situation + year: number + } + let { situation, year }: Props = $props() + + function getVariableValue( + situation: Situation, + variableName: string, + populationId: string, + ): VariableValue | undefined { + const variable = variableSummaryByName[variableName] + if (variable === undefined) { + return undefined + } + return getSituationVariableValue(situation, variable, populationId, year) + } + + const personEntity = entityByKey[personEntityKey] + + let variableOfInterest = $derived(situation.sliders![0].name) + let min = $derived(situation.sliders![0].min) + let max = $derived(situation.sliders![0].max) + let personSituation = $derived( + situation[personEntity.key_plural] as { + [populationId: string]: PopulationWithoutId + }, + ) + let firstPersonVariableOfInterestValue = $derived( + getVariableValue( + situation, + variableOfInterest, + Object.keys(personSituation).sort((populationId1, populationId2) => + populationId1.localeCompare(populationId2), + )[0], + ), + ) + + let linePositionX = $derived( + Math.round( + (100 / (max - min)) * (Number(firstPersonVariableOfInterestValue) - min), + ), + ) +</script> + +<div + class="pointer-events-none absolute inset-y-0 -translate-x-1/2 border-l border-neutral-600" + style:left="{linePositionX}%" +></div>