Skip to content

Commit

Permalink
🚚 Renamed few data variables to match pattern
Browse files Browse the repository at this point in the history
* hoveredTooltip -> isHoveringTooltip in all usages
* enablePointerEvents -> withPointerEvents
* Added 'opened' check for custom tooltip in bar chart story
  • Loading branch information
govind-srinidhi committed Sep 29, 2023
1 parent 8a16584 commit 81af4bb
Show file tree
Hide file tree
Showing 5 changed files with 13 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ export const MultipleDatasetsWithCustomTooltip: Story = {
title: 'Pets met in 2023',
options: {
tooltipOptions: {
enablePointerEvents: true,
withPointerEvents: true,
},
},
},
Expand Down
16 changes: 8 additions & 8 deletions packages/lib/src/components/core/lume-chart/lume-chart.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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"
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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))
);
});
Expand Down Expand Up @@ -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();
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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')"
Expand Down
2 changes: 1 addition & 1 deletion packages/lib/src/composables/options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export interface TooltipOptions extends Options {
targetElement?: Element | 'self';
titleFormat?: Format;
valueFormat?: Format;
enablePointerEvents?: boolean;
withPointerEvents?: boolean;
withAnimation?: boolean;
}

Expand Down

0 comments on commit 81af4bb

Please sign in to comment.