@eturnity/eturnity_reusable_components 8.16.8-EPDM-EPDM-14492.0 → 8.16.9-EPDM-13618.0

package/src/components/barchart/composables/useSelection.js

@@ -1,75 +1,75 @@
-import { ref, computed, watch } from 'vue'
-import theme from '../../../assets/theme'
-
-export function useSelection(props, normalizedData, emit) {
-  const selectedIndices = ref({ start: 0, end: props.selectionSize })
-  const currentSelection = ref([])
-
-  watch(
-    () => [props.selectionSize, props.isSelectionEnabled],
-    ([newSize, isEnabled]) => {
-      if (isEnabled) {
-        selectedIndices.value = {
-          start: 0,
-          end: newSize,
-        }
-      }
-    },
-    { immediate: true }
-  )
-
-  // Update visual selection
-  const updateSelectedBars = ({ startIndex, endIndex }) => {
-    selectedIndices.value = { start: startIndex, end: endIndex }
-    currentSelection.value = normalizedData.value.slice(startIndex, endIndex)
-  }
-
-  const handleSelectionDragEnd = () => {
-    emit('selection-change', currentSelection.value)
-  }
-
-  // Check if bar is a selection boundary
-  const isSelectionBoundary = computed(() => {
-    return (index) => {
-      if (!props.isSelectionEnabled) return false
-      return (
-        index === selectedIndices.value.start ||
-        index === selectedIndices.value.end - 1
-      )
-    }
-  })
-
-  // Get segment gradient based on selection state
-  const getSegmentGradient = computed(() => {
-    return (index, segment) => {
-      if (!props.isSelectionEnabled) {
-        return {
-          from: segment.gradientFrom,
-          to: segment.gradientTo,
-        }
-      }
-
-      const isSelected =
-        index >= selectedIndices.value.start &&
-        index < selectedIndices.value.end
-
-      return isSelected
-        ? {
-            from: segment.gradientFrom,
-            to: segment.gradientTo,
-          }
-        : {
-            from: theme.semanticColors.grey[500],
-            to: theme.semanticColors.grey[500],
-          }
-    }
-  })
-
-  return {
-    selectedIndices,
-    updateSelectedBars,
-    handleSelectionDragEnd,
-    isSelectionBoundary,
-    getSegmentGradient,
-  }
-}
+import { ref, computed, watch } from 'vue'
+import theme from '../../../assets/theme'
+
+export function useSelection(props, normalizedData, emit) {
+  const selectedIndices = ref({ start: 0, end: props.selectionSize })
+  const currentSelection = ref([])
+
+  watch(
+    () => [props.selectionSize, props.isSelectionEnabled],
+    ([newSize, isEnabled]) => {
+      if (isEnabled) {
+        selectedIndices.value = {
+          start: 0,
+          end: newSize,
+        }
+      }
+    },
+    { immediate: true }
+  )
+
+  // Update visual selection
+  const updateSelectedBars = ({ startIndex, endIndex }) => {
+    selectedIndices.value = { start: startIndex, end: endIndex }
+    currentSelection.value = normalizedData.value.slice(startIndex, endIndex)
+  }
+
+  const handleSelectionDragEnd = () => {
+    emit('selection-change', currentSelection.value)
+  }
+
+  // Check if bar is a selection boundary
+  const isSelectionBoundary = computed(() => {
+    return (index) => {
+      if (!props.isSelectionEnabled) return false
+      return (
+        index === selectedIndices.value.start ||
+        index === selectedIndices.value.end - 1
+      )
+    }
+  })
+
+  // Get segment gradient based on selection state
+  const getSegmentGradient = computed(() => {
+    return (index, segment) => {
+      if (!props.isSelectionEnabled) {
+        return {
+          from: segment.gradientFrom,
+          to: segment.gradientTo,
+        }
+      }
+
+      const isSelected =
+        index >= selectedIndices.value.start &&
+        index < selectedIndices.value.end
+
+      return isSelected
+        ? {
+            from: segment.gradientFrom,
+            to: segment.gradientTo,
+          }
+        : {
+            from: theme.semanticColors.grey[500],
+            to: theme.semanticColors.grey[500],
+          }
+    }
+  })
+
+  return {
+    selectedIndices,
+    updateSelectedBars,
+    handleSelectionDragEnd,
+    isSelectionBoundary,
+    getSegmentGradient,
+  }
+}

package/src/components/barchart/composables/useTooltip.js

@@ -1,100 +1,100 @@
-import { ref, onUnmounted } from 'vue'
-import isObjectEqual from '../../../helpers/isObjectEqual'
-
-export function useTooltip(chartId, normalizedData) {
-  const showTooltipContent = ref(false)
-  const tooltipData = ref(null)
-  const tooltipStyle = ref({})
-
-  const isInputFocused = ref(false)
-  const focusedBarData = ref(null)
-  const tooltipTimeout = ref(null)
-
-  const showTooltip = (item, event, series) => {
-    if (isInputFocused.value) return
-
-    if (!showTooltipContent.value) {
-      showTooltipContent.value = true
-    }
-    if (isObjectEqual(item, tooltipData.value)) return
-
-    tooltipData.value = { ...item }
-
-    const targetElement = series.length
-      ? event.target
-          .closest('.bar-group')
-          .querySelector('.bar-segment:last-child')
-      : event.target
-    const rect = targetElement.getBoundingClientRect()
-
-    tooltipStyle.value = {
-      left: `${rect.left + rect.width / 2}px`,
-      top: `${rect.top - 0}px`,
-    }
-  }
-
-  const showTooltipFromInput = ({ seriesName, label }) => {
-    if (tooltipTimeout.value) {
-      clearTimeout(tooltipTimeout.value)
-      tooltipTimeout.value = null
-    }
-
-    isInputFocused.value = true
-    const barData = normalizedData.value.find((item) => item.label === label)
-
-    if (!barData) return
-    focusedBarData.value = barData
-    const barElement = document.querySelector(
-      `.barchart-${chartId} .bar-group:nth-child(${
-        normalizedData.value.indexOf(barData) + 1
-      })`
-    )
-
-    if (!barElement) return
-    // Get the last bar segment, samee as hover behavior
-    const targetElement = barElement.querySelector('.bar-segment:last-child')
-    const rect = targetElement.getBoundingClientRect()
-
-    tooltipStyle.value = {
-      left: `${rect.left + rect.width / 2}px`,
-      top: `${rect.top - 0}px`,
-    }
-    showTooltipContent.value = true
-    tooltipData.value = barData
-  }
-
-  // Small delay to prevent tooltip flicker when switching between inputs
-  const handleInputBlurAll = () => {
-    tooltipTimeout.value = setTimeout(() => {
-      hideTooltip(true)
-      isInputFocused.value = false
-      tooltipTimeout.value = null
-    }, 50)
-  }
-
-  const hideTooltip = (isFromInputBlur = false) => {
-    if (typeof isFromInputBlur !== 'boolean' && isInputFocused.value) {
-      return
-    }
-
-    showTooltipContent.value = false
-  }
-
-  onUnmounted(() => {
-    if (!tooltipTimeout.value) return
-    clearTimeout(tooltipTimeout.value)
-    tooltipTimeout.value = null
-  })
-
-  return {
-    showTooltipContent,
-    tooltipData,
-    tooltipStyle,
-    showTooltip,
-    hideTooltip,
-    isInputFocused,
-    focusedBarData,
-    showTooltipFromInput,
-    handleInputBlurAll,
-  }
-}
+import { ref, onUnmounted } from 'vue'
+import isObjectEqual from '../../../helpers/isObjectEqual'
+
+export function useTooltip(chartId, normalizedData) {
+  const showTooltipContent = ref(false)
+  const tooltipData = ref(null)
+  const tooltipStyle = ref({})
+
+  const isInputFocused = ref(false)
+  const focusedBarData = ref(null)
+  const tooltipTimeout = ref(null)
+
+  const showTooltip = (item, event, series) => {
+    if (isInputFocused.value) return
+
+    if (!showTooltipContent.value) {
+      showTooltipContent.value = true
+    }
+    if (isObjectEqual(item, tooltipData.value)) return
+
+    tooltipData.value = { ...item }
+
+    const targetElement = series.length
+      ? event.target
+          .closest('.bar-group')
+          .querySelector('.bar-segment:last-child')
+      : event.target
+    const rect = targetElement.getBoundingClientRect()
+
+    tooltipStyle.value = {
+      left: `${rect.left + rect.width / 2}px`,
+      top: `${rect.top - 0}px`,
+    }
+  }
+
+  const showTooltipFromInput = ({ seriesName, label }) => {
+    if (tooltipTimeout.value) {
+      clearTimeout(tooltipTimeout.value)
+      tooltipTimeout.value = null
+    }
+
+    isInputFocused.value = true
+    const barData = normalizedData.value.find((item) => item.label === label)
+
+    if (!barData) return
+    focusedBarData.value = barData
+    const barElement = document.querySelector(
+      `.barchart-${chartId} .bar-group:nth-child(${
+        normalizedData.value.indexOf(barData) + 1
+      })`
+    )
+
+    if (!barElement) return
+    // Get the last bar segment, samee as hover behavior
+    const targetElement = barElement.querySelector('.bar-segment:last-child')
+    const rect = targetElement.getBoundingClientRect()
+
+    tooltipStyle.value = {
+      left: `${rect.left + rect.width / 2}px`,
+      top: `${rect.top - 0}px`,
+    }
+    showTooltipContent.value = true
+    tooltipData.value = barData
+  }
+
+  // Small delay to prevent tooltip flicker when switching between inputs
+  const handleInputBlurAll = () => {
+    tooltipTimeout.value = setTimeout(() => {
+      hideTooltip(true)
+      isInputFocused.value = false
+      tooltipTimeout.value = null
+    }, 50)
+  }
+
+  const hideTooltip = (isFromInputBlur = false) => {
+    if (typeof isFromInputBlur !== 'boolean' && isInputFocused.value) {
+      return
+    }
+
+    showTooltipContent.value = false
+  }
+
+  onUnmounted(() => {
+    if (!tooltipTimeout.value) return
+    clearTimeout(tooltipTimeout.value)
+    tooltipTimeout.value = null
+  })
+
+  return {
+    showTooltipContent,
+    tooltipData,
+    tooltipStyle,
+    showTooltip,
+    hideTooltip,
+    isInputFocused,
+    focusedBarData,
+    showTooltipFromInput,
+    handleInputBlurAll,
+  }
+}