From 81af4bbc6de629c871cffa01967af444a699f346 Mon Sep 17 00:00:00 2001
From: govind <govind.srinidhi@adyen.com>
Date: Fri, 29 Sep 2023 11:13:15 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=9A=20Renamed=20few=20data=20variables?=
 =?UTF-8?q?=20to=20match=20pattern?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* hoveredTooltip -> isHoveringTooltip in all usages
* enablePointerEvents -> withPointerEvents
* Added 'opened' check for custom tooltip in bar chart story
---
 .../lume-bar-chart/lume-bar-chart.stories.ts     |  4 ++--
 .../lume-line-chart/lume-line-chart.stories.ts   |  2 +-
 .../components/core/lume-chart/lume-chart.vue    | 16 ++++++++--------
 .../core/lume-tooltip/lume-tooltip.vue           |  2 +-
 packages/lib/src/composables/options.ts          |  2 +-
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/lib/src/components/charts/lume-bar-chart/lume-bar-chart.stories.ts b/packages/lib/src/components/charts/lume-bar-chart/lume-bar-chart.stories.ts
index 9d9d2bad..d9beeea9 100644
--- a/packages/lib/src/components/charts/lume-bar-chart/lume-bar-chart.stories.ts
+++ b/packages/lib/src/components/charts/lume-bar-chart/lume-bar-chart.stories.ts
@@ -179,8 +179,8 @@ export const CustomTooltip: Story = {
     template: `
     <div :style="{ width: args.width + 'px', height: args.orientation !== 'horizontal' ? args.height + 'px' : undefined }">
         <lume-bar-chart v-bind="args" :color="computedColor">
-          <template #tooltip = "{ data, hoveredIndex, targetElement }">
-            <lume-tooltip :items="customItemsFunction(data, hoveredIndex)" :target-element="targetElement" position="top"/>
+          <template #tooltip = "{ opened, data, hoveredIndex, targetElement }">
+            <lume-tooltip v-if="opened" :items="customItemsFunction(data, hoveredIndex)" :target-element="targetElement" position="top"/>
           </template>
         </lume-bar-chart>
     </div>
diff --git a/packages/lib/src/components/charts/lume-line-chart/lume-line-chart.stories.ts b/packages/lib/src/components/charts/lume-line-chart/lume-line-chart.stories.ts
index 10e88ac0..37608afb 100644
--- a/packages/lib/src/components/charts/lume-line-chart/lume-line-chart.stories.ts
+++ b/packages/lib/src/components/charts/lume-line-chart/lume-line-chart.stories.ts
@@ -144,7 +144,7 @@ export const MultipleDatasetsWithCustomTooltip: Story = {
     title: 'Pets met in 2023',
     options: {
       tooltipOptions: {
-        enablePointerEvents: true,
+        withPointerEvents: true,
       },
     },
   },
diff --git a/packages/lib/src/components/core/lume-chart/lume-chart.vue b/packages/lib/src/components/core/lume-chart/lume-chart.vue
index f508775a..18a2b533 100644
--- a/packages/lib/src/components/core/lume-chart/lume-chart.vue
+++ b/packages/lib/src/components/core/lume-chart/lume-chart.vue
@@ -192,8 +192,8 @@
         :position="tooltipPosition"
         :with-tooltip="allOptions.withTooltip !== false"
         :hovered-index="internalHoveredIndex"
-        :handle-mouse-enter="() => (hoveredTooltip = true)"
-        :handle-mouse-leave="() => (hoveredTooltip = false)"
+        :handle-mouse-enter="() => (isHoveringTooltip = true)"
+        :handle-mouse-leave="() => (isHoveringTooltip = false)"
         :options="allOptions.tooltipOptions"
       >
         <lume-tooltip
@@ -217,8 +217,8 @@
             })
           "
           @closed="emit('tooltip-closed')"
-          @tooltip-mouseenter="hoveredTooltip = true"
-          @tooltip-mouseleave="hoveredTooltip = false"
+          @tooltip-mouseenter="isHoveringTooltip = true"
+          @tooltip-mouseleave="isHoveringTooltip = false"
         >
           <slot
             name="tooltip-content"
@@ -298,7 +298,7 @@ const internalHoveredIndex = ref<number>(-1);
 const tooltipAnchor = ref<Array<SVGCircleElement>>(null);
 const chartContainer = ref<InstanceType<typeof LumeChartContainer>>(null);
 const tooltipAnchorAttributes = ref<Array<AnchorAttributes>>([]);
-const hoveredTooltip = ref<boolean | null>(null);
+const isHoveringTooltip = ref<boolean | null>(null);
 
 const xAxisHeight = ref<number>(0);
 const yAxisWidth = ref<number>(0);
@@ -411,11 +411,11 @@ const tooltipPosition = computed(
 
 const shouldHideTooltip = computed(() => {
   const arePointerEventsEnabled =
-    allOptions.value.tooltipOptions?.enablePointerEvents;
+    allOptions.value.tooltipOptions?.withPointerEvents;
   return (
     tooltipConfig.opened &&
     (!arePointerEventsEnabled ||
-      (arePointerEventsEnabled && hoveredTooltip.value === false))
+      (arePointerEventsEnabled && isHoveringTooltip.value === false))
   );
 });
 
@@ -498,7 +498,7 @@ watch(
 
 // Handles the scenario when the cursor is already outside of the chart container but in a tooltip and the user
 // tries to leave the tooltip.
-watch(hoveredTooltip, (value) => {
+watch(isHoveringTooltip, (value) => {
   if (value === false && tooltipConfig.opened) {
     handleHideTooltip();
   }
diff --git a/packages/lib/src/components/core/lume-tooltip/lume-tooltip.vue b/packages/lib/src/components/core/lume-tooltip/lume-tooltip.vue
index 64b15c83..7d222304 100644
--- a/packages/lib/src/components/core/lume-tooltip/lume-tooltip.vue
+++ b/packages/lib/src/components/core/lume-tooltip/lume-tooltip.vue
@@ -4,7 +4,7 @@
     ref="root"
     class="lume-tooltip lume-typography--caption"
     :class="{
-      'lume-tooltip--pointer-events': options.enablePointerEvents,
+      'lume-tooltip--pointer-events': options.withPointerEvents,
     }"
     data-j-tooltip
     @mouseenter="emit('tooltip-mouseenter')"
diff --git a/packages/lib/src/composables/options.ts b/packages/lib/src/composables/options.ts
index 0a747bcd..bde10ab3 100644
--- a/packages/lib/src/composables/options.ts
+++ b/packages/lib/src/composables/options.ts
@@ -33,7 +33,7 @@ export interface TooltipOptions extends Options {
   targetElement?: Element | 'self';
   titleFormat?: Format;
   valueFormat?: Format;
-  enablePointerEvents?: boolean;
+  withPointerEvents?: boolean;
   withAnimation?: boolean;
 }