@eturnity/eturnity_reusable_components 8.13.13-qa-16-03-26.1 → 8.16.0

package/src/components/barchart/SelectionBox.vue

@@ -1,150 +0,0 @@
-<template>
-  <SelectionBoxWrapper
-    :transform="`translateX(${position}px)`"
-    :width="boxWidth + 'px'"
-    @mousedown="startDrag"
-  />
-</template>
-
-<script setup>
-  import { ref, computed, onMounted } from 'vue'
-  import styled from 'vue3-styled-components'
-
-  const SelectionBoxWrapper = styled('div', {
-    width: String,
-    transform: String,
-  })`
-    position: absolute;
-    height: 100%;
-    background: rgba(151, 71, 255, 0.1);
-    cursor: grab;
-    z-index: 0;
-    pointer-events: auto;
-    width: ${(props) => props.width};
-    transform: ${(props) => props.transform};
-    &:active {
-      cursor: grabbing;
-    }
-  `
-
-  const props = defineProps({
-    barsToShow: {
-      type: Number,
-      required: true,
-    },
-    barWidth: {
-      type: Number,
-      required: true,
-    },
-    totalBars: {
-      type: Number,
-      required: true,
-    },
-    gap: {
-      type: Number,
-      default: 8,
-    },
-    containerWidth: {
-      type: Number,
-      required: true,
-    },
-    isScrollable: {
-      type: Boolean,
-      required: true,
-    },
-  })
-
-  // Padding applied to the selection box
-  const PADDING = 6
-
-  const emit = defineEmits(['update-selection', 'drag-end'])
-
-  // Statess
-  const position = ref(0)
-  const isDragging = ref(false)
-  const currentSelection = ref({ startIndex: 0, endIndex: props.barsToShow })
-
-  // Variables for tracking drag state
-  let startX = 0
-  let startPos = 0
-
-  const actualBarWidth = computed(() => {
-    if (props.isScrollable) {
-      return props.barWidth
-    }
-
-    return props.containerWidth / props.totalBars
-  })
-
-  const boxWidth = computed(() => {
-    if (props.isScrollable) {
-      return (
-        (props.barWidth + props.gap) * props.barsToShow -
-        props.gap +
-        PADDING * 2
-      )
-    }
-
-    return actualBarWidth.value * props.barsToShow
-  })
-
-  const calculateSelection = () => {
-    if (props.isScrollable) {
-      const startIndex = Math.floor(
-        (position.value + PADDING) / (props.barWidth + props.gap)
-      )
-      const endIndex = Math.min(startIndex + props.barsToShow, props.totalBars)
-      return { startIndex, endIndex }
-    }
-
-    const boxStart = position.value
-    const boxEnd = position.value + boxWidth.value
-    const sectionWidth = props.containerWidth / props.totalBars
-
-    const startIndex = Math.round(boxStart / sectionWidth)
-    const endIndex = Math.min(
-      Math.round(boxEnd / sectionWidth),
-      props.totalBars
-    )
-    return { startIndex, endIndex }
-  }
-
-  const startDrag = (e) => {
-    isDragging.value = true
-    startX = e.clientX
-    startPos = position.value
-
-    document.addEventListener('mousemove', handleDrag)
-    document.addEventListener('mouseup', stopDrag)
-  }
-
-  const handleDrag = (e) => {
-    if (!isDragging.value) return
-
-    const delta = e.clientX - startX
-    const newPosition = startPos + delta
-
-    // Constrain position within valid bounds
-    const maxPosition = props.containerWidth - boxWidth.value + PADDING * 2
-    position.value = Math.max(-PADDING, Math.min(newPosition, maxPosition))
-
-    // Update current selection and emit event
-    currentSelection.value = calculateSelection()
-    emit('update-selection', currentSelection.value)
-  }
-
-  const stopDrag = () => {
-    isDragging.value = false
-    document.removeEventListener('mousemove', handleDrag)
-    document.removeEventListener('mouseup', stopDrag)
-
-    emit('update-selection', currentSelection.value)
-    emit('drag-end')
-  }
-
-  onMounted(() => {
-    // Ensure we start with valid selection indices
-    currentSelection.value = { startIndex: 0, endIndex: props.barsToShow }
-    emit('update-selection', currentSelection.value)
-  })
-</script>

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

@@ -1,5 +0,0 @@
-export { useTooltip } from './useTooltip'
-export { useChartData } from './useChartData'
-export { useAxisCalculations } from './useAxisCalculations'
-export { useSelection } from './useSelection'
-export { useChartScroll } from './useChartScroll'

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

@@ -1,104 +0,0 @@
-import { computed } from 'vue'
-
-export function useAxisCalculations(props, maxValue) {
-  const findNiceNumber = (value) => {
-    // Handle 0 or negative values
-    if (value <= 0) return 0
-
-    if (value < 1) {
-      return Math.ceil(value * 10) / 10
-    }
-
-    const exponent = Math.floor(Math.log10(value))
-    const factor = Math.pow(10, exponent)
-    const normalized = value / factor
-
-    const niceNumbers = [
-      1.0, 1.2, 1.5, 1.6, 2.0, 2.5, 3.0, 4.0, 5.0, 6.0, 8.0, 10.0,
-    ]
-    const niceNormalized = niceNumbers.find((n) => n >= normalized) || 10.0
-
-    return niceNormalized * factor
-  }
-
-  // Calculate max value with padding, rounded to nice numbers
-  const paddedMaxValue = computed(() => {
-    const rawMax = maxValue.value
-    const withPadding = rawMax * 1.1
-    const niceNumber = findNiceNumber(withPadding)
-
-    return niceNumber
-  })
-
-  const calculateStepSize = (max) => {
-    const preferredDivisions = [5, 6, 7, 8, 9, 10]
-
-    for (const divisions of preferredDivisions) {
-      const roughStep = max / divisions
-      const niceStep = findNiceNumber(roughStep)
-
-      const numCompleteSteps = Math.floor(max / niceStep)
-      const actualMax = niceStep * numCompleteSteps
-
-      // Only use this step size if it gets us close to our target max
-      // and gives us the right number of ticks
-      if (
-        actualMax >= max * 0.95 && // Within 5% of target max
-        numCompleteSteps + 1 >= 5 &&
-        numCompleteSteps + 1 <= 10
-      ) {
-        return niceStep
-      }
-    }
-
-    // If no perfect match found, use max/6
-    return findNiceNumber(max / 6)
-  }
-
-  const yAxisLabels = computed(() => {
-    const max = paddedMaxValue.value
-
-    if (max === 0) {
-      return [0]
-    }
-
-    const stepSize = calculateStepSize(max)
-    const labels = []
-
-    // Generate labels including 0 up to numSteps
-    const numSteps = Math.floor(max / stepSize)
-    for (let i = 0; i <= numSteps; i++) {
-      labels.push(i * stepSize)
-    }
-
-    // Ensure we always have at least 2 labels (0 and max)
-    if (labels.length < 2) {
-      labels.push(max)
-    }
-
-    return labels
-  })
-
-  const yAxisHeight = computed(() => {
-    return '100%'
-  })
-
-  const yAxisWidth = computed(() => {
-    return !!props.yAxisTitle || props.isBottomFieldsShown ? '70px' : '60px'
-  })
-
-  const isChartControlsShown = (position) => {
-    return (
-      props.chartControlsPosition === position &&
-      (props.isLegendShown || props.splitButtonOptions.length)
-    )
-  }
-
-  return {
-    yAxisLabels,
-    yAxisHeight,
-    yAxisWidth,
-    isChartControlsShown,
-    paddedMaxValue,
-  }
-}

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

@@ -1,114 +0,0 @@
-import { computed } from 'vue'
-import theme from '../../../assets/theme'
-
-export function useChartData(props, paddedMaxValue) {
-  const GRADIENT_COLORS = theme.chartGradients
-
-  // Get stacked colors based on number of segments
-  const getStackedColors = computed(() => {
-    const colorMap = new Map()
-
-    return (totalSegments) => {
-      if (colorMap.has(totalSegments)) {
-        return colorMap.get(totalSegments)
-      }
-
-      let colors
-      switch (totalSegments) {
-        case 2:
-          colors = [GRADIENT_COLORS.stacked[3], GRADIENT_COLORS.stacked[0]]
-          break
-        case 3:
-          colors = [
-            GRADIENT_COLORS.stacked[5],
-            GRADIENT_COLORS.stacked[3],
-            GRADIENT_COLORS.stacked[1],
-          ]
-          break
-        case 4:
-          colors = [
-            GRADIENT_COLORS.stacked[5],
-            GRADIENT_COLORS.stacked[3],
-            GRADIENT_COLORS.stacked[1],
-            GRADIENT_COLORS.stacked[0],
-          ]
-          break
-        case 5:
-          colors = [
-            GRADIENT_COLORS.stacked[5],
-            GRADIENT_COLORS.stacked[3],
-            GRADIENT_COLORS.stacked[2],
-            GRADIENT_COLORS.stacked[1],
-            GRADIENT_COLORS.stacked[0],
-          ]
-          break
-        case 6:
-          colors = [...GRADIENT_COLORS.stacked].reverse()
-          break
-        default:
-          colors = [GRADIENT_COLORS.stacked[0]]
-      }
-
-      colorMap.set(totalSegments, colors)
-      return colors
-    }
-  })
-
-  // Normalize data for rendering
-  const normalizedData = computed(() => {
-    if (!props.data?.length) return []
-
-    if (props.series.length) {
-      const stackedColors = [
-        ...getStackedColors.value(props.series.length),
-      ].reverse()
-      return props.data.map((item) => {
-        let accumulated = 0
-        return {
-          label: item.label,
-          segments: [...props.series].reverse().map((series, index) => {
-            const value =
-              series.data.find((d) => d.label === item.label)?.value || 0
-            accumulated += value
-            return {
-              value,
-              percentage: Number(
-                ((accumulated / paddedMaxValue.value) * 100).toFixed(4)
-              ),
-              gradientFrom: stackedColors[index].from,
-              gradientTo: stackedColors[index].to,
-              name: series.name,
-            }
-          }),
-          total: accumulated,
-        }
-      })
-    }
-
-    return props.data.map((item) => ({
-      label: item.label,
-      segments: [
-        {
-          value: item.value,
-          percentage: Number(
-            ((item.value / paddedMaxValue.value) * 100).toFixed(4)
-          ),
-          gradientFrom: GRADIENT_COLORS.simple.from,
-          gradientTo: GRADIENT_COLORS.simple.to,
-          name: 'Value',
-        },
-      ],
-    }))
-  })
-
-  // Calculate total value of segments
-  const getTotalSegmentValue = (segments) => {
-    return segments.reduce((sum, segment) => sum + segment.value, 0)
-  }
-
-  return {
-    normalizedData,
-    getStackedColors,
-    getTotalSegmentValue,
-  }
-}

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

@@ -1,61 +0,0 @@
-import { ref, onMounted, onUnmounted } from 'vue'
-
-export function useChartScroll(
-  chartId,
-  isInputFocused,
-  focusedBarData,
-  showTooltipFromInput
-) {
-  const chartContent = ref(null)
-  const chartContentWidth = ref(0)
-
-  const updateChartContentWidth = () => {
-    if (chartContent.value) {
-      chartContentWidth.value = chartContent.value.$el.offsetWidth
-    }
-  }
-
-  // Handle scroll from chart
-  const handleChartScroll = (event) => {
-    const fieldsContainer = document.querySelector(
-      `.fields-container-${chartId}`
-    )
-    if (fieldsContainer) {
-      fieldsContainer.scrollLeft = event.target.scrollLeft
-    }
-
-    if (isInputFocused.value && focusedBarData.value) {
-      showTooltipFromInput({
-        seriesName: focusedBarData.value.segments[0].name,
-        label: focusedBarData.value.label,
-      })
-    }
-  }
-
-  // Handle scroll from bottom fields
-  const handleBottomFieldsScroll = (scrollLeft) => {
-    const chartContainer = document.querySelector(
-      `.chart-scroll-container-${chartId}`
-    )
-    if (chartContainer) {
-      chartContainer.scrollLeft = scrollLeft
-    }
-  }
-
-  onMounted(() => {
-    updateChartContentWidth()
-    window.addEventListener('resize', updateChartContentWidth)
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener('resize', updateChartContentWidth)
-  })
-
-  return {
-    chartContent,
-    chartContentWidth,
-    updateChartContentWidth,
-    handleChartScroll,
-    handleBottomFieldsScroll,
-  }
-}

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

@@ -1,75 +0,0 @@
-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 +0,0 @@
-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,
-  }
-}