Skip to content
Snippets Groups Projects
Commit 73ab93cd authored by Toufic Batache's avatar Toufic Batache
Browse files

Add waterfall variables

parent 2ad4b134
No related branches found
No related tags found
1 merge request!210Début du travail sur la nouvelle page d'accueil/d'atterrissage du simulateur
Show whitespace changes
Inline Side-by-side
src/lib/decompositions.ts
+ 177
− 0
View file @ 73ab93cd
......@@ -1268,6 +1268,183 @@ function buildVisibleDecompositionsForGraph1(
return visibleDecompositionIndex
}
export function buildVisibleDecompositionsWithoutValues(
decompositionByName: DecompositionByName,
variableSummaryByName: VariableByName,
waterfall: Waterfall,
year: number,
): VisibleDecomposition[] {
const visibleDecompositions: VisibleDecomposition[] = []
buildVisibleDecompositionsWithoutValues1(
decompositionByName,
variableSummaryByName,
waterfall.name,
waterfall.root,
0,
false,
true,
{},
visibleDecompositions,
year,
)
return visibleDecompositions
}
function buildVisibleDecompositionsWithoutValues1(
decompositionByName: DecompositionByName,
variableSummaryByName: VariableByName,
waterfallName: string,
name: string,
depth: number,
negate: boolean,
trunk = true,
deltaSumsPreviousByCalculationName: Partial<{
[calculationName in CalculationName]: number[]
}>,
visibleDecompositions: VisibleDecomposition[],
year: number,
): number {
const decomposition = decompositionByName[name]
if (decomposition === undefined) {
return -1
}
const hidden = decomposition.hidden
// // Handle waterfall options for "hidden" attribute.
// for (const options of decomposition.options ?? []) {
// if (options.waterfall !== undefined) {
// if (
// options.then?.hidden !== undefined &&
// (options as WaterfallOptions).waterfall.includes(waterfallName)
// ) {
// hidden = options.then.hidden ?? undefined
// } else if (
// options.else?.hidden !== undefined &&
// !(options as WaterfallOptions).waterfall.includes(waterfallName)
// ) {
// hidden = options.else.hidden ?? undefined
// }
// }
// }
// // Handle variables options for "hidden" attribute.
// for (const options of decomposition.options ?? []) {
// if (options.waterfall === undefined) {
// if (
// options.then?.hidden !== undefined ||
// options.else?.hidden !== undefined
// ) {
// let allVariablesMatch = true
// for (const [variableName, variableValues] of Object.entries(options)) {
// if (["else", "then"].includes(variableName)) {
// continue
// }
// const variable = variableSummaryByName[variableName]
// const entity = entityByKey[variable.entity]
// const entitySituation = situation[entity.key_plural]
// if (entitySituation === undefined) {
// allVariablesMatch = false
// break
// }
// let variableMatch = false
// for (const population of Object.values(entitySituation)) {
// if (
// variableValues.includes(
// population[variableName]?.[year] ?? variable.default_value,
// )
// ) {
// variableMatch = true
// }
// }
// if (!variableMatch) {
// allVariablesMatch = false
// break
// }
// }
// if (options.then?.hidden !== undefined && allVariablesMatch) {
// hidden = options.then.hidden ?? undefined
// } else if (options.else?.hidden !== undefined && !allVariablesMatch) {
// hidden = options.else.hidden ?? undefined
// }
// }
// }
// }
let visibleDecompositionIndex = -1
if (!hidden) {
const visibleDecomposition = {
decomposition,
depth,
trunk,
} as VisibleDecomposition
let visibleChildren = decomposition.children
for (const options of decomposition.options ?? []) {
if (options.waterfall !== undefined) {
if (
(options as WaterfallOptions).then?.children !== undefined &&
(options as WaterfallOptions).waterfall.includes(waterfallName)
) {
visibleChildren =
(options as WaterfallOptions).then.children ?? undefined
} else if (
(options as WaterfallOptions).else?.children !== undefined &&
!(options as WaterfallOptions).waterfall.includes(waterfallName)
) {
visibleChildren =
(options as WaterfallOptions).else.children ?? undefined
}
}
}
if (visibleChildren !== undefined) {
visibleDecomposition.visibleChildren = visibleChildren
// if ((trunk || depth < 1) && !decomposition.open) {
if (trunk && !decomposition.open) {
decomposition.open = true
}
} else if (decomposition.open) {
delete decomposition.open
}
let childrenDepth = depth
if (!trunk) {
visibleDecompositionIndex = visibleDecompositions.length
visibleDecompositions.push(visibleDecomposition)
childrenDepth = depth + 1
}
if (decomposition.open && visibleChildren !== undefined) {
const beforeChildrenVisibleDecompositionLength =
visibleDecompositions.length
for (const childReference of visibleChildren) {
buildVisibleDecompositionsWithoutValues1(
decompositionByName,
variableSummaryByName,
waterfallName,
childReference.name,
childrenDepth,
Boolean(negate ? !childReference.negate : childReference.negate),
trunk &&
visibleDecompositions.length ===
beforeChildrenVisibleDecompositionLength,
deltaSumsPreviousByCalculationName,
visibleDecompositions,
year,
)
}
}
if (trunk) {
visibleDecompositionIndex = visibleDecompositions.length
visibleDecompositions.push(visibleDecomposition)
}
const variable = variableSummaryByName[name]
if (variable !== undefined) {
visibleDecomposition.variable = variable
}
}
return visibleDecompositionIndex
}
function extractLinkedVariablesName(
linkedVariablesName: Set<string>,
name: string,
......
src/routes/welcome/+page.svelte
+ 160
− 13
View file @ 73ab93cd
......@@ -2,15 +2,23 @@
import { getContext } from "svelte"
import type { Writable } from "svelte/store"
import { goto } from "$app/navigation"
import PictoBudgetEtat from "$lib/components/pictos/PictoBudgetEtat.svelte"
import WelcomeSearch from "$lib/components/search/WelcomeSearch.svelte"
import { waterfalls } from "$lib/decompositions"
import {
buildDecompositionByNameFromCore,
buildVisibleDecompositionsWithoutValues,
type Decomposition,
type DecompositionByName,
decompositionCoreByName,
decompositionCoreByNameByReformName,
waterfalls,
withLinkedVariableNames,
} from "$lib/decompositions"
import type { DisplayMode } from "$lib/displays"
import { trackSearchVariable } from "$lib/matomo"
import { newSimulationUrl } from "$lib/urls"
import PictoBudgetEtatIr from "$lib/components/pictos/PictoBudgetEtatIr.svelte"
import PictoBudgetEtat from "$lib/components/pictos/PictoBudgetEtat.svelte"
import PictoFemme from "$lib/components/pictos/PictoFemme.svelte"
import PictoBigParent from "$lib/components/pictos/PictoBigParent.svelte"
import { variableSummaryByName } from "$lib/variables"
const displayMode: DisplayMode = {
testCasesIndex: [0],
......@@ -31,13 +39,43 @@
name: "aide_logement",
label: "Aides au logement",
},
{
name: "etc",
label: "etc",
},
]
$: $welcomePage = true
const billName = getContext("billName") as Writable<string | undefined>
const year = getContext("year") as Writable<number>
$: decompositionByName = buildDecompositionByNameFromCore(
$billName === undefined
? decompositionCoreByName
: decompositionCoreByNameByReformName[$billName] ??
decompositionCoreByName,
) as DecompositionByName
$: waterfallsDecompositions = waterfalls.map((waterfall) => ({
waterfall,
visibleDecompositions: buildVisibleDecompositionsWithoutValues(
decompositionByName,
variableSummaryByName,
waterfall,
$year,
),
}))
function* iterToDepth(depth: number): Generator<number, void, unknown> {
for (let i = 0; i < depth; i++) {
yield i
}
}
function zoomIn(decomposition: Decomposition) {
decompositionByName[decomposition.name].open = true
}
function zoomOut(decomposition: Decomposition) {
decompositionByName[decomposition.name].open = false
}
</script>
<main class="h-full bg-yellow-50">
......@@ -45,7 +83,9 @@
class="relative h-[78%] before:absolute before:top-0 before:inset-x-0 before:h-[50vh] before:bg-gradient-to-b before:from-[#9AAAB4] before:to-transparent fond"
>
<div class="h-full relative z-10 flex flex-col justify-evenly items-center">
<h1 class="font-serif text-xl md:text-3xl 2xl:text-4xl text-center leading-snug">
<h1
class="font-serif text-xl md:text-3xl 2xl:text-4xl text-center leading-snug"
>
Mesurer les <span class="highlight highlight-yellow">impacts</span>
<br />
du droit en vigueur ou d’une réforme
......@@ -125,7 +165,7 @@
class="underline text-neutral-600 hover:text-black"
href="#dispositif-couverts"
>
Voir les {suggestions.length} dispositifs couverts
Voir les {withLinkedVariableNames.length} dispositifs couverts
</a>
</div>
</div>
......@@ -273,9 +313,116 @@
id="dispositif-couverts"
class="grid grid-cols-2 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-white"
>
<h2 class="text-2xl font-bold col-span-4 text-center">
Les {suggestions.length} dispositifs couverts par le simulateur LexImpact socio-fiscal&nbsp;:
<h2 class="text-2xl font-bold col-span-2 text-center">
Les {withLinkedVariableNames.length} dispositifs couverts par le simulateur
LexImpact socio-fiscal&nbsp;:
</h2>
{#each waterfallsDecompositions as { waterfall, visibleDecompositions }}
{#if visibleDecompositions.length > 0}
<div
class="h-fit flex flex-col gap-3 px-4 py-3 border rounded-lg shadow-lg"
>
<span class="font-bold text-lg px-2 mt-1.5">
Dispositifs {waterfall.label.toLowerCase()} :
</span>
<!-- Navigation dispositifs-->
<div class="flex-auto">
{#each visibleDecompositions as { decomposition, depth, trunk, visibleChildren }}
<div
class="flex h-8 items-center whitespace-nowrap border-t border-gray-200 px-2"
class:font-bold={decomposition.name ===
displayMode.parametersVariableName}
class:bg-gray-200={decomposition.name ===
displayMode.parametersVariableName}
>
{#if trunk}
<div
class="overflow-x-hidden text-ellipsis border-gray-400 text-base text-gray-500 hover:z-20 hover:overflow-x-visible hover:bg-white"
>
<a
class="cursor-pointer text-base hover:underline"
href={newSimulationUrl({
...displayMode,
parametersVariableName: decomposition.name,
})}
data-sveltekit-noscroll
>{decomposition.short_label ?? decomposition.label}</a
>
</div>
{:else}
{#each [...iterToDepth(depth)] as _level}
<div class="ml-2 h-full border-l border-le-gris-dispositif">
&nbsp;
</div>
{/each}
{#if visibleChildren === undefined}
<!-- Leaf node (except the first one, that belongs to trunk) -->
<a
class="cursor-pointer overflow-x-hidden text-ellipsis font-serif text-base hover:z-20 hover:overflow-x-visible hover:bg-white hover:text-le-gris-dispositif hover:underline"
href={newSimulationUrl({
...displayMode,
parametersVariableName: decomposition.name,
})}
data-sveltekit-noscroll
>{decomposition.short_label ?? decomposition.label}</a
>
{:else}
<!-- Non-trunk, non-leaf variable -->
<button
class="-ml-1 text-black"
on:click={() =>
decomposition.open
? zoomOut(decomposition)
: zoomIn(decomposition)}
>
<iconify-icon
class="align-[-0.2rem] text-lg"
icon={decomposition.open
? "ri-arrow-down-s-line"
: "ri-arrow-right-s-line"}
/>
</button>
<button
class="cursor-pointer overflow-x-hidden text-ellipsis font-serif text-base hover:z-20 hover:overflow-x-visible hover:bg-white hover:text-le-gris-dispositif hover:underline"
on:click={() => {
// Non-leaf decomposition node in variable inputs mode => no-link
decomposition.open
? zoomOut(decomposition)
: zoomIn(decomposition)
// Leaf decomposition node with parameters in parameters mode => link
if (displayMode.edit === undefined) {
goto(
newSimulationUrl({
...displayMode,
parametersVariableName: decomposition.name,
}),
{
noScroll: true,
},
)
}
}}
data-sveltekit-noscroll
>{decomposition.short_label ??
decomposition.label}</button
>
{/if}
{/if}
</div>
{/each}
</div>
</div>
{/if}
{/each}
<!--<div class="col-span-4 grid grid-cols-5 gap-10">-->
<!-- {#each dispositifs as dispositif}-->
<!-- <span>{dispositif.label}</span>-->
<!-- {/each}-->
<!--</div>-->
</section>
<section
class="fond grid grid-cols-4 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-white"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment