@eturnity/eturnity_reusable_components 8.19.8-EPDM-13618.0 → 8.19.8-EPDM-14690.2

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

@@ -1,104 +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,
-  }
-}
+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 ? '80px' : '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 +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,
-  }
-}
+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].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 +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,
-  }
-}
+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,
+  }
+}