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

package/src/components/barchart/ChartControls.vue

@@ -1,113 +1,113 @@
-<template>
-  <Container>
-    <LegendAndControlsWrapper :leftMargin="yAxisWidth">
-      <LeftSection>
-        <SplitButtonsContainer
-          v-if="splitButtonOptions.length"
-          :position="position"
-        >
-          <SplitButtons
-            :modelValue="selectedSplitButton"
-            :options="splitButtonOptions"
-            @click="handleSplitButtonClick"
-          />
-        </SplitButtonsContainer>
-      </LeftSection>
-
-      <LegendGroups v-if="isLegendShown">
-        <LegendRow
-          v-for="(row, rowIndex) in groupedSeries"
-          :key="rowIndex"
-          :rowIndex="rowIndex"
-        >
-          <LegendItem v-for="(series, index) in row" :key="series.name">
-            <LegendColor
-              :gradientFrom="
-                reversedColors[rowIndex * legendsItemPerRow + index].from
-              "
-              :gradientTo="
-                reversedColors[rowIndex * legendsItemPerRow + index].to
-              "
-            />
-            <LegendText>{{ series.name }}</LegendText>
-          </LegendItem>
-        </LegendRow>
-      </LegendGroups>
-    </LegendAndControlsWrapper>
-  </Container>
-</template>
-
-<script setup>
-  import { computed } from 'vue'
-
-  import SplitButtons from '../buttons/splitButtons'
-
-  import {
-    Container,
-    LegendAndControlsWrapper,
-    LeftSection,
-    SplitButtonsContainer,
-    LegendGroups,
-    LegendRow,
-    LegendItem,
-    LegendColor,
-    LegendText,
-  } from './styles/chartControls'
-
-  const props = defineProps({
-    position: {
-      type: String,
-      required: true,
-    },
-    yAxisWidth: {
-      type: String,
-      required: true,
-    },
-    series: {
-      type: Array,
-      default: () => [],
-    },
-    stackedColors: {
-      type: Function,
-      required: true,
-    },
-    splitButtonOptions: {
-      type: Array,
-      default: () => [],
-    },
-    selectedSplitButton: {
-      type: String,
-      default: '',
-    },
-    isLegendShown: {
-      type: Boolean,
-      default: false,
-    },
-    legendsItemPerRow: {
-      type: Number,
-      required: true,
-    },
-  })
-
-  const emit = defineEmits(['select-split-button'])
-
-  const reversedColors = computed(() =>
-    [...props.stackedColors(props.series.length)].reverse()
-  )
-
-  const groupedSeries = computed(() => {
-    const { series, legendsItemPerRow } = props
-
-    return series.reduce((groups, item, index) => {
-      const groupIndex = Math.floor(index / legendsItemPerRow)
-      groups[groupIndex] = groups[groupIndex] || []
-      groups[groupIndex].push(item)
-
-      return groups
-    }, [])
-  })
-
-  const handleSplitButtonClick = (value) => {
-    emit('select-split-button', value)
-  }
-</script>
+<template>
+  <Container>
+    <LegendAndControlsWrapper :leftMargin="yAxisWidth">
+      <LeftSection>
+        <SplitButtonsContainer
+          v-if="splitButtonOptions.length"
+          :position="position"
+        >
+          <SplitButtons
+            :modelValue="selectedSplitButton"
+            :options="splitButtonOptions"
+            @click="handleSplitButtonClick"
+          />
+        </SplitButtonsContainer>
+      </LeftSection>
+
+      <LegendGroups v-if="isLegendShown">
+        <LegendRow
+          v-for="(row, rowIndex) in groupedSeries"
+          :key="rowIndex"
+          :rowIndex="rowIndex"
+        >
+          <LegendItem v-for="(series, index) in row" :key="series.name">
+            <LegendColor
+              :gradientFrom="
+                reversedColors[rowIndex * legendsItemPerRow + index].from
+              "
+              :gradientTo="
+                reversedColors[rowIndex * legendsItemPerRow + index].to
+              "
+            />
+            <LegendText>{{ series.name }}</LegendText>
+          </LegendItem>
+        </LegendRow>
+      </LegendGroups>
+    </LegendAndControlsWrapper>
+  </Container>
+</template>
+
+<script setup>
+  import { computed } from 'vue'
+
+  import SplitButtons from '../buttons/splitButtons'
+
+  import {
+    Container,
+    LegendAndControlsWrapper,
+    LeftSection,
+    SplitButtonsContainer,
+    LegendGroups,
+    LegendRow,
+    LegendItem,
+    LegendColor,
+    LegendText,
+  } from './styles/chartControls'
+
+  const props = defineProps({
+    position: {
+      type: String,
+      required: true,
+    },
+    yAxisWidth: {
+      type: String,
+      required: true,
+    },
+    series: {
+      type: Array,
+      default: () => [],
+    },
+    stackedColors: {
+      type: Function,
+      required: true,
+    },
+    splitButtonOptions: {
+      type: Array,
+      default: () => [],
+    },
+    selectedSplitButton: {
+      type: String,
+      default: '',
+    },
+    isLegendShown: {
+      type: Boolean,
+      default: false,
+    },
+    legendsItemPerRow: {
+      type: Number,
+      required: true,
+    },
+  })
+
+  const emit = defineEmits(['select-split-button'])
+
+  const reversedColors = computed(() =>
+    [...props.stackedColors(props.series.length)].reverse()
+  )
+
+  const groupedSeries = computed(() => {
+    const { series, legendsItemPerRow } = props
+
+    return series.reduce((groups, item, index) => {
+      const groupIndex = Math.floor(index / legendsItemPerRow)
+      groups[groupIndex] = groups[groupIndex] || []
+      groups[groupIndex].push(item)
+
+      return groups
+    }, [])
+  })
+
+  const handleSplitButtonClick = (value) => {
+    emit('select-split-button', value)
+  }
+</script>

package/src/components/barchart/SelectionBox.vue

@@ -1,150 +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>
+<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 +1,5 @@
-export { useTooltip } from './useTooltip'
-export { useChartData } from './useChartData'
-export { useAxisCalculations } from './useAxisCalculations'
-export { useSelection } from './useSelection'
-export { useChartScroll } from './useChartScroll'
+export { useTooltip } from './useTooltip'
+export { useChartData } from './useChartData'
+export { useAxisCalculations } from './useAxisCalculations'
+export { useSelection } from './useSelection'
+export { useChartScroll } from './useChartScroll'