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

Merge branch '337-panneau-d-information-du-graphique' into 'master' 

Resolve "Panneau d'information du graphique"

Closes #337

See merge request !296
parents 2566032b 0dab362c
No related branches found
No related tags found
1 merge request!296Resolve "Panneau d'information du graphique"
Pipeline #19427 passed
Stage: build
Show whitespace changes
Inline Side-by-side
src/lib/components/ValueChangeGraph.svelte deleted 100644 → 0
+ 0
− 140
View file @ 2566032b
<script lang="ts">
import { shared } from "$lib/shared.svelte"
import { valueFormatter } from "$lib/values"
import type { VariableValueByCalculationName } from "$lib/variables"
interface Props {
showLoader?: boolean
unitName: string | undefined | null
valueByCalculationName: VariableValueByCalculationName
children?: import("svelte").Snippet<[any]>
}
let {
showLoader = true,
unitName,
valueByCalculationName,
children,
}: Props = $props()
function mustShowAmendmentValue(
amendmentValueFormatted: string | undefined,
billValueFormatted: string | undefined,
lawValueFormatted: string | undefined,
revaluationValueFormatted: string | undefined,
): boolean {
if (amendmentValueFormatted === undefined) {
return false
}
if (billValueFormatted !== undefined) {
return amendmentValueFormatted !== billValueFormatted
}
if (revaluationValueFormatted !== undefined) {
return amendmentValueFormatted !== revaluationValueFormatted
}
return amendmentValueFormatted !== lawValueFormatted
}
let amendmentValue = $derived(
valueByCalculationName.amendment as number | undefined,
)
let billValue = $derived(valueByCalculationName.bill as number | undefined)
let lawValue = $derived(valueByCalculationName.law as number | undefined)
let revaluationValue = $derived(
valueByCalculationName.revaluation as number | undefined,
)
let baseValue = $derived(
lawValue === undefined
? revaluationValue === undefined
? billValue === undefined
? amendmentValue
: billValue
: revaluationValue
: lawValue,
)
let format = $derived(valueFormatter(baseValue, unitName))
let runningCalculationNames = $derived(
Object.entries(shared.calculationByName)
.filter(([, calculation]) => calculation.running)
.map(([calculationName]) => calculationName),
)
let modificationsAmendmentCount = $derived(
Object.keys(shared.parametricReform).length,
)
let amendmentValueFormatted = $derived(
amendmentValue === undefined ? undefined : format(amendmentValue),
)
let billValueFormatted = $derived(
billValue === undefined ? undefined : format(billValue),
)
let lawValueFormatted = $derived(
lawValue === undefined ? undefined : format(lawValue),
)
let revaluationValueFormatted = $derived(
revaluationValue === undefined ? undefined : format(revaluationValue),
)
let showLawValue = $derived(lawValueFormatted !== undefined)
let showRevaluationValue = $derived(
revaluationValueFormatted !== undefined &&
revaluationValueFormatted !== lawValueFormatted,
)
let showBillValue = $derived(
billValueFormatted !== undefined &&
(showRevaluationValue
? billValueFormatted !== revaluationValueFormatted
: billValueFormatted !== lawValueFormatted),
)
let showAmendmentValue = $derived(
mustShowAmendmentValue(
amendmentValueFormatted,
billValueFormatted,
lawValueFormatted,
revaluationValueFormatted,
),
)
</script>
<ul class="flex flex-col">
{#if showLoader && (runningCalculationNames.includes("law") || runningCalculationNames.includes("revaluation"))}
<li class="animate-pulse-2 bg-gray-500 px-1 text-black blur-xs">
<span class="text-white blur">value €</span>&nbsp;/an
</li>
{:else if showLawValue || showRevaluationValue}
<li
class={showBillValue
? "line-through-bill "
: showAmendmentValue
? "line-through-amendment "
: ""}
>
{showRevaluationValue
? revaluationValueFormatted
: lawValueFormatted}&nbsp;/an
{@render children?.({
lawOrRevaluationValue: showRevaluationValue
? revaluationValue
: lawValue,
})}
</li>
{/if}
{#if showLoader && runningCalculationNames.includes("bill")}
<li class="animate-pulse-2 bg-le-rouge-bill px-1 text-black blur-xs">
<span class="text-white blur">value €</span>&nbsp;/an
</li>
{:else if showBillValue}
<li
class="text-le-rouge-bill"
class:line-through-amendment={showAmendmentValue}
>
{billValueFormatted}&nbsp;/an
</li>
{/if}
{#if showLoader && runningCalculationNames.includes("amendment") && modificationsAmendmentCount > 0}
<li class="animate-pulse-2 bg-le-jaune px-1 text-black blur-xs">
<span class="text-white blur">value €</span>&nbsp;/an
</li>
{:else if showAmendmentValue}
<li class="bg-le-jaune px-1 text-black">
{amendmentValueFormatted}&nbsp;/an
</li>
{/if}
</ul>
src/lib/components/test_cases/TestCaseGraph.svelte
+ 91
− 71
View file @ c09f901a
......@@ -33,7 +33,7 @@
import type { GraphDomain } from "$lib/components/piece_of_cake/types"
import TestCaseGraphXlsxExport from "$lib/components/test_cases/TestCaseGraphXlsxExport.svelte"
import Tooltip from "$lib/components/Tooltip.svelte"
import ValueChangeGraph from "$lib/components/ValueChangeGraph.svelte"
import ValueChange from "$lib/components/ValueChange.svelte"
import {
buildVisibleDecompositionsForGraph,
type EvaluationByName,
......@@ -1235,7 +1235,7 @@
<div
class="w-[22rem] overflow-hidden rounded-xl border bg-white shadow-lg"
>
<div class="flex gap-3 bg-neutral-100 p-3">
<div class="flex gap-3 bg-neutral-100 p-2">
<div class="flex items-center">
{#each Object.keys(personSituation).sort( (populationId1, populationId2) => populationId1.localeCompare(populationId2), ) as populationId}
{@const activite = getVariableValue(
......@@ -1331,9 +1331,15 @@
<div class="flex flex-col gap-3 px-5 py-3">
{#each variableGroups.slice(1) as { css, label, variables }}
<div>
<span class={css ?? ""}>
<div
class="flex justify-between {css ?? ''}"
>
<span
class="overflow-x-hidden text-ellipsis"
>
{label} :
<span class="text-xl font-bold"
</span>
<span class="text-base font-bold"
>{formatCurrency(
variables
.filter(
......@@ -1351,22 +1357,25 @@
(sum, current) => sum + current,
0,
),
)}</span
> /an
</span>
<ul
class="list-disc px-6 text-sm font-bold"
)}
<span class="text-xs">/an</span></span
>
</div>
<ul class="list-disc pl-4 text-xs">
{#each variables as variable}
<li
style:margin-left="{variable.depth *
20}px"
>
<div class="inline-flex">
<div
class="flex justify-between text-nowrap"
>
<span
class="overflow-x-hidden text-ellipsis"
>{variable.label}&nbsp;:&nbsp;</span
>
<ValueChangeGraph
<span class="flex gap-1">
<ValueChange
unitName="currency-EUR"
valueByCalculationName={Object.fromEntries(
variable.rows.map(
......@@ -1380,6 +1389,7 @@
),
)}
/>
</span>
</div>
</li>
{/each}
......@@ -1396,12 +1406,14 @@
<div>
<div
class="inline-flex text-sm text-le-gris-dispositif-dark"
class="flex justify-between text-sm text-le-gris-dispositif-dark"
>
<span class="font-bold"
<span
class="overflow-x-hidden text-ellipsis font-bold"
>{variable?.label}&nbsp;:&nbsp;</span
>
<ValueChangeGraph
<span class="flex gap-1">
<ValueChange
unitName="currency-EUR"
valueByCalculationName={Object.fromEntries(
variable.rows.map(
......@@ -1411,21 +1423,28 @@
],
),
)}
/>
/></span
>
</div>
{#if niveauDeVieVariable !== undefined}
<div
class="inline-flex text-sm text-le-gris-dispositif-dark"
class="flex justify-between text-sm text-le-gris-dispositif-dark"
>
<span
class="overflow-x-hidden text-ellipsis font-bold"
>
<span class="font-bold">
Niveau de vie&nbsp;:&nbsp;
</span>
<ValueChangeGraph
<span class="flex gap-1">
<ValueChange
unitName="currency-EUR"
valueByCalculationName={Object.fromEntries(
niveauDeVieVariable.map(
({ calculationName, delta }) => [
({
calculationName,
delta,
}) => [
calculationName,
Math.abs(delta[index]),
],
......@@ -1452,7 +1471,8 @@
</span>
{/if}
{/snippet}
</ValueChangeGraph>
</ValueChange>
</span>
</div>
{/if}
</div>
......
src/lib/graphes.ts
+ 3
− 12
View file @ c09f901a
......@@ -251,10 +251,7 @@ export const defaultCustomization: {
export const variableCustomizationsBase = {
remuneration_brute: {
stroke: {
color: "#98AEE8",
width: "3",
dasharray: "6 8",
borderstyle: "dashed",
width: "0",
},
pattern: {
background: "rgba(210, 223, 255, .6)",
......@@ -264,10 +261,7 @@ export const variableCustomizationsBase = {
},
chomage_brut: {
stroke: {
color: "#98AEE8",
width: "3",
dasharray: "6 8",
borderstyle: "dashed",
width: "0",
},
pattern: {
background: "rgba(210, 223, 255, .6)",
......@@ -277,10 +271,7 @@ export const variableCustomizationsBase = {
},
retraite_brute: {
stroke: {
color: "#98AEE8",
width: "3",
dasharray: "6 8",
borderstyle: "dashed",
width: "0",
},
pattern: {
background: "rgba(210, 223, 255, .6)",
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment