Merge branch 'courbes_drag_zoom' into 'master'

Courbes cas type : Ajout de la fonctionnalité "glisser pour zoomer"

See merge request leximpact/simulateur-socio-fiscal/leximpact-socio-fiscal-ui!225

src/lib/components/piece_of_cake/DragSelect.svelte

+<script lang="ts">
+  import { createEventDispatcher } from "svelte"
+
+  import type { CurveModel } from "$lib/components/piece_of_cake/model"
+
+  export let modelGroups: CurveModel[][]
+
+  const dispatch = createEventDispatcher()
+
+  let clientWidth: number
+  let clientHeight: number
+
+  let isDragging = false
+  let start: [number, number] | undefined = undefined
+  let end: [number, number] | undefined = undefined
+
+  $: ({ xScale, yScale } = modelGroups[0][0])
+
+  $: valid =
+    start !== undefined &&
+    end !== undefined &&
+    (Math.abs(end[0] - start[0]) > 10 || Math.abs(end[1] - start[1]) > 10)
+  $: xInverted = valid ? end[0] < start[0] : false
+  $: yInverted = valid ? end[1] < start[1] : false
+
+  function mousedown(e) {
+    if (e.target.tagName === "BUTTON") {
+      return
+    }
+    isDragging = true
+    start = [e.offsetX, e.offsetY]
+    end = [e.offsetX, e.offsetY]
+  }
+
+  function mousemove(e) {
+    if (e.target.tagName === "BUTTON") {
+      return
+    }
+    if (isDragging) {
+      end = [e.offsetX, e.offsetY]
+    }
+  }
+
+  function mouseup(e) {
+    if (e.target.tagName === "BUTTON") {
+      return
+    }
+    isDragging = false
+  }
+
+  function zoom() {
+    const xRange = xScale.domain()[1] - xScale.domain()[0]
+    const xStart =
+      Math.round((start[0] / clientWidth) * xRange) + xScale.domain()[0]
+    const xEnd =
+      Math.round((end[0] / clientWidth) * xRange) + xScale.domain()[0]
+    const x = !xInverted ? [xStart, xEnd] : [xEnd, xStart]
+
+    const yRange = yScale.domain()[1] - yScale.domain()[0]
+    const yStart =
+      Math.round((1 - start[1] / clientHeight) * yRange) + yScale.domain()[0]
+    const yEnd =
+      Math.round((1 - end[1] / clientHeight) * yRange) + yScale.domain()[0]
+    const y = !yInverted ? [yEnd, yStart] : [yStart, yEnd]
+
+    const domain = {
+      x,
+      y,
+    }
+    dispatch("zoom", domain)
+    start = undefined
+    end = undefined
+  }
+</script>
+
+<div
+  bind:clientWidth
+  bind:clientHeight
+  class="absolute inset-0 cursor-crosshair"
+  on:mousedown={mousedown}
+  on:mousemove={mousemove}
+  on:mouseup={mouseup}
+  on:blur={mouseup}
+  on:mouseout={mouseup}
+  role="presentation"
+>
+  {#if valid}
+    <div
+      class="absolute bg-black bg-opacity-20 border border-white shadow-md"
+      style:left="{!xInverted ? start[0] : end[0]}px"
+      style:top="{!yInverted ? start[1] : end[1]}px"
+      style:right="{!xInverted
+        ? clientWidth - end[0]
+        : clientWidth - start[0]}px"
+      style:bottom="{!yInverted
+        ? clientHeight - end[1]
+        : clientHeight - start[1]}px"
+    >
+      {#if !isDragging}
+        <button
+          class="flex items-center z-10 absolute right-0 -bottom-2 translate-y-full px-2 select-none bg-white rounded-full shadow-md hover:bg-neutral-50 active:bg-neutral-100 ease text-sm uppercase text-gray-600 transition-opacity duration-500 hover:text-black"
+          on:click={zoom}
+          ><iconify-icon
+            class="mr-1 text-base"
+            icon="ri-zoom-in-line"
+            flip="horizontal"
+          />
+          Zoomer
+        </button>
+      {/if}
+    </div>
+  {/if}
+  <slot {modelGroups} />
+</div>

src/lib/components/piece_of_cake/SharedTooltip.svelte

@@ -30,9 +30,13 @@
       (event as MouseEvent & { layerX: number; layerY: number }).layerX +
       event.clientX
     const clientY =
-      Math.max(0, foundValueScaled[1]) -
-      (event as MouseEvent & { layerX: number; layerY: number }).layerY +
+      -(event as MouseEvent & { layerX: number; layerY: number }).layerY +
       event.clientY
+    // TODO: keep tooltip above graph or ?
+    // const clientY =
+    //   Math.max(0, foundValueScaled[1]) -
+    //   (event as MouseEvent & { layerX: number; layerY: number }).layerY +
+    //   event.clientY
 
     const virtualElement = {
       getBoundingClientRect() {

src/lib/components/test_cases/TestCaseGraph.svelte

@@ -18,8 +18,9 @@
   import Area from "$lib/components/piece_of_cake/Area.svelte"
   import AxisX from "$lib/components/piece_of_cake/AxisX.svelte"
   import AxisY from "$lib/components/piece_of_cake/AxisY.svelte"
-  import { CurveModel } from "$lib/components/piece_of_cake/model"
+  import DragSelect from "$lib/components/piece_of_cake/DragSelect.svelte"
   import Html from "$lib/components/piece_of_cake/Html.svelte"
+  import { CurveModel } from "$lib/components/piece_of_cake/model"
   import MultiLine from "$lib/components/piece_of_cake/MultiLine.svelte"
   import PersistentPopover from "$lib/components/PersistentPopover.svelte"
   import PictoBigAdulteRetraite from "$lib/components/pictos/PictoBigAdulteRetraite.svelte"
@@ -62,7 +63,6 @@
   import type {
     ValuesByCalculationNameByVariableName,
     VariableValue,
-    VariableValuesByCalculationName,
   } from "$lib/variables"
 
   export let decompositionByName: DecompositionByName
@@ -169,6 +169,8 @@
       niveauDeVieByCalculationName["revaluation"],
   )
 
+  $: console.log("deciles", deciles)
+
   $: childrenId = Object.values(familySituation).reduce(
     (children: string[], family) => [
       ...children,
@@ -324,8 +326,8 @@
         }
       }
 
-      const firstPrelevementIndex = prelevementsValues.findIndex(
-        (variable) => variable.name.startsWith("csg_deductible"),
+      const firstPrelevementIndex = prelevementsValues.findIndex((variable) =>
+        variable.name.startsWith("csg_deductible"),
       )
 
       variableGroups = [
@@ -713,6 +715,20 @@
       requestAxesCalculation()
     }
   }
+
+  function updateAllDomain(newDomain) {
+    domain = {
+      x: {
+        min: newDomain.x[0],
+        max: newDomain.x[1],
+      },
+      y: {
+        min: newDomain.y[0],
+        max: newDomain.y[1],
+      },
+    }
+    requestAxesCalculation()
+  }
 </script>
 
 {#if situation.slider !== undefined}
@@ -1022,6 +1038,13 @@
                 <MultiLine {modelGroups} />
               </Svg>
               <Html let:modelGroups {modelGroups} padding={svgPadding}>
+                <DragSelect
+                  let:modelGroups
+                  {modelGroups}
+                  on:zoom={({ detail }) => {
+                    updateAllDomain(detail)
+                  }}
+                >
                   <SharedTooltip let:index {modelGroups}>
                     <div
                       class="w-[22rem] rounded-xl border bg-white shadow-lg overflow-hidden"
@@ -1048,7 +1071,9 @@
                                   <PictoBigParent />
                                 {/if}
                                 {#if handicap}
-                                <div class="absolute -right-[24px] -top-[8px]">
+                                  <div
+                                    class="absolute -right-[24px] -top-[8px]"
+                                  >
                                     <PictoHandicap />
                                   </div>
                                 {/if}
@@ -1083,7 +1108,9 @@
                                   <PictoBigPersonneACharge />
                                 {/if}
                                 {#if handicap}
-                                <div class="absolute -right-[28px] -top-[8px]">
+                                  <div
+                                    class="absolute -right-[28px] -top-[8px]"
+                                  >
                                     <PictoHandicap />
                                   </div>
                                 {/if}
@@ -1126,9 +1153,8 @@
                                     .filter((variable) => variable.depth === 0)
                                     .map((variable) =>
                                       Math.abs(
-                                      getLatestCalculation(variable.rows).delta[
-                                        index
-                                      ],
+                                        getLatestCalculation(variable.rows)
+                                          .delta[index],
                                       ),
                                     )
                                     .reduce((sum, current) => sum + current, 0),
@@ -1271,14 +1297,15 @@
                                         )}</span
                                       >
                                       /an
-                                    {#if calculationIndex === 0}
+                                      {#if calculationIndex === 0 && deciles !== undefined}
                                         <span
                                           class="self-end mt-0.5 ml-1 text-nowrap text-sm text-gray-800 bg-gray-200 px-1.5 rounded-lg"
                                         >
                                           {@html formatLongOrdinalSup(
                                             (deciles.find(
                                               ([, end]) => end > delta[index],
-                                          ) ?? deciles[deciles.length - 1])[0],
+                                            ) ??
+                                              deciles[deciles.length - 1])[0],
                                           )} dixième
                                         </span>
                                       {/if}
@@ -1292,6 +1319,7 @@
                       </div>
                     </div>
                   </SharedTooltip>
+                </DragSelect>
               </Html>
             {/if}
           </PieceOfCake>