@eturnity/eturnity_reusable_components 8.16.2--EPDM-14330.5 → 8.16.2--EPDM-14330.6

package/src/components/barchart/SelectionBox.vue

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

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

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

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

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

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

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

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