@eturnity/eturnity_reusable_components 8.7.5-EPIC-8593.2 → 8.7.5-EPIC-8593.4

package/src/assets/svgIcons/house_sun.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0.5C8.27614 0.5 8.5 0.723858 8.5 1V2.86667C8.5 3.14281 8.27614 3.36667 8 3.36667C7.72386 3.36667 7.5 3.14281 7.5 2.86667V1C7.5 0.723858 7.72386 0.5 8 0.5ZM0.5 8C0.5 7.72386 0.723858 7.5 1 7.5H2.86667C3.14281 7.5 3.36667 7.72386 3.36667 8C3.36667 8.27614 3.14281 8.5 2.86667 8.5H1C0.723858 8.5 0.5 8.27614 0.5 8ZM12.6333 8C12.6333 7.72386 12.8572 7.5 13.1333 7.5H15C15.2761 7.5 15.5 7.72386 15.5 8C15.5 8.27614 15.2761 8.5 15 8.5H13.1333C12.8572 8.5 12.6333 8.27614 12.6333 8ZM8.99987 10.8145C9.09475 11.0816 9.39061 11.2244 9.64095 11.0915C10.059 10.8696 10.4293 10.5644 10.728 10.1927C11.1343 9.6872 11.3922 9.0787 11.4728 8.43514C11.5535 7.79158 11.4537 7.13827 11.1847 6.54812C10.9156 5.95796 10.4879 5.45417 9.94915 5.09297C9.41045 4.73177 8.78197 4.52736 8.13385 4.50256C7.48573 4.47776 6.84347 4.63353 6.27873 4.9525C5.71399 5.27148 5.24899 5.7411 4.93563 6.30896C4.70526 6.72642 4.56349 7.1849 4.51696 7.65586C4.48909 7.93792 4.73355 8.15738 5.01665 8.14374C5.29975 8.1301 5.51274 7.8874 5.55771 7.60756C5.60274 7.32731 5.69588 7.05561 5.83426 6.80486C6.05573 6.40352 6.38437 6.07162 6.7835 5.84619C7.18262 5.62076 7.63654 5.51066 8.0946 5.52819C8.55265 5.54572 8.99683 5.69019 9.37756 5.94546C9.75829 6.20074 10.0606 6.55679 10.2507 6.97388C10.4409 7.39098 10.5114 7.8527 10.4544 8.30754C10.3974 8.76237 10.2152 9.19242 9.928 9.54971C9.74858 9.77293 9.5326 9.96227 9.29044 10.1103C9.04864 10.2582 8.90499 10.5474 8.99987 10.8145ZM5.17261 9.95833C5.36097 9.79137 5.64409 9.79046 5.83352 9.95621L8.82925 12.5775C8.93776 12.6724 9 12.8096 9 12.9538V14.5C9 14.7761 9.22386 15 9.5 15C9.77614 15 10 14.7761 10 14.5V12.9538C10 12.5212 9.81328 12.1097 9.48776 11.8249L6.49202 9.20363C5.92373 8.70638 5.0744 8.7091 4.5093 9.20998L1.50504 11.8728C1.18385 12.1575 1 12.5662 1 12.9954V14.5C1 14.7761 1.22386 15 1.5 15C1.77614 15 2 14.7761 2 14.5V12.9954C2 12.8523 2.06128 12.7161 2.16835 12.6212L5.17261 9.95833ZM3.40391 2.69668C3.20865 2.50142 2.89206 2.50142 2.6968 2.69668C2.50154 2.89194 2.50154 3.20852 2.6968 3.40379L4.01673 4.72372C4.212 4.91898 4.52858 4.91898 4.72384 4.72372C4.9191 4.52846 4.9191 4.21187 4.72384 4.01661L3.40391 2.69668ZM11.2764 4.01661C11.0811 4.21187 11.0811 4.52846 11.2764 4.72372C11.4716 4.91898 11.7882 4.91898 11.9835 4.72372L13.3034 3.40379C13.4987 3.20852 13.4987 2.89194 13.3034 2.69668C13.1081 2.50142 12.7916 2.50142 12.5963 2.69668L11.2764 4.01661ZM11.9835 11.2762C11.7882 11.081 11.4716 11.081 11.2764 11.2762C11.0811 11.4715 11.0811 11.7881 11.2764 11.9833L12.5963 13.3033C12.7916 13.4985 13.1081 13.4985 13.3034 13.3033C13.4987 13.108 13.4987 12.7914 13.3034 12.5962L11.9835 11.2762Z" fill="black"/>
+</svg>

package/src/assets/svgIcons/move_left.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.875 6.36364H4.55V14H9.45V6.36364H13.125L7 0L0.875 6.36364Z" fill="#B2B9C5" transform="rotate(-90 7 7)"/>
+</svg>

package/src/assets/svgIcons/move_right.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.875 6.36364H4.55V14H9.45V6.36364H13.125L7 0L0.875 6.36364Z" fill="#B2B9C5" transform="rotate(90 7 7)"/>
+</svg>

package/src/assets/svgIcons/rectangle.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.5" y="2.5" width="11" height="11" rx="0.5" stroke="white"/>
+</svg>

package/src/assets/svgIcons/refresh.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path class="fix" d="M11.3335 12.5833C12.7477 11.5529 13.6668 9.88392 13.6668 8.00023C13.6668 4.87061 11.1298 2.33356 8.00016 2.33356H7.66683M8.00016 13.6669C4.87055 13.6669 2.3335 11.1298 2.3335 8.00023C2.3335 6.11654 3.25261 4.44751 4.66683 3.41716M7.3335 14.9336L8.66683 13.6002L7.3335 12.2669M8.66683 3.73356L7.3335 2.40023L8.66683 1.06689" stroke="#6F20DC" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/svgIcons/text_icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 3C3.22386 3 3 3.22386 3 3.5V4.5C3 4.77614 2.77614 5 2.5 5C2.22386 5 2 4.77614 2 4.5V3.5C2 2.67157 2.67157 2 3.5 2H8H12.5C13.3284 2 14 2.67157 14 3.5V4.5C14 4.77614 13.7761 5 13.5 5C13.2239 5 13 4.77614 13 4.5V3.5C13 3.22386 12.7761 3 12.5 3H8.5V13H10.5C10.7761 13 11 13.2239 11 13.5C11 13.7761 10.7761 14 10.5 14H8H5.5C5.22386 14 5 13.7761 5 13.5C5 13.2239 5.22386 13 5.5 13H7.5V3H3.5Z" fill="white"/>
+</svg>

package/src/assets/theme.js

@@ -71,6 +71,7 @@ const theme = (() => {
     transparentWhite2: '#ffffff32',
     transparentWhite1: '#ffffff16',
     transparentBlack1: '#263238e6',
+    transparentBlack2: '#263238e5',
     transparentBlue1: '#20a4cae6',
     blueElectric: '#66dffa',
     eturnityGrey: '#263238',
@@ -179,9 +180,25 @@ const theme = (() => {
     },
   }
 
+  const chartGradients = {
+    simple: {
+      from: semanticColors.purple[500],
+      to: semanticColors.purple[400],
+    },
+    stacked: [
+      { from: '#F5EDFF', to: '#DEC5FF' },
+      { from: '#CAA2FF', to: '#F2E8FF' },
+      { from: '#B987FC', to: '#904AEF' },
+      { from: '#8B40F2', to: '#4A1394' },
+      { from: '#6A05F2', to: '#4905A5' },
+      { from: '#5402C3', to: '#2B0362' },
+    ],
+  }
+
   return {
     colors,
     semanticColors,
+    chartGradients,
     fonts: {
       mainFont: '"Figtree", sans-serif',
     },
@@ -311,7 +328,7 @@ const theme = (() => {
               borderColor: semanticColors.grey[300],
             },
             hover: {
-              backgroundColor: semanticColors.blue[200],
+              backgroundColor: semanticColors.purple[100],
               textColor: semanticColors.purple[700],
               borderColor: semanticColors.grey[300],
             },

package/src/components/banner/infoBanner/InfoBanner.spec.js

@@ -1,5 +1,4 @@
 /* eslint-disable */
-import { h } from 'vue'
 import { mount } from '@vue/test-utils'
 import InfoBanner from '@/components/banner/infoBanner'
 import theme from '@/assets/theme'
@@ -10,59 +9,47 @@ jest.mock('@/components/icon/iconCache.mjs', () => ({
 }))
 
 describe('Info Banner Component', () => {
-  const props = {
-    isOpen: false,
-    buttonLabel: 'Gotcha',
-  }
-
-  const global = {
-    provide: {
-      theme,
-    },
-  }
-
-  it('info banner is shown when isOpen props is true', async () => {
-    const wrapper = mount(InfoBanner, {
-      props,
-      global,
+  let wrapper
+
+   beforeEach(() => {
+      wrapper = mount(InfoBanner, {
+        props: {
+          isOpen: true,
+          buttonLabel: 'Gotcha',
+        },
+        slots: {
+          title: 'Sample title',
+          body: 'Sample body text',
+        },
+        global: {
+          provide: {
+            theme,
+          },
+        },
+      })
     })
 
+    
+  it('info banner is shown when isOpen props is true', async () => {
+    
     const bannerWrapper = wrapper.find('[data-test-id="info_banner_wrapper"]')
     expect(bannerWrapper.exists()).toBe(true)
-    expect(bannerWrapper.classes()).not.toContain('visible')
-    expect(bannerWrapper.classes()).toContain('hidden')
-    await wrapper.setProps({ isOpen: true })
-    expect(bannerWrapper.classes()).toContain('visible')
-    expect(bannerWrapper.classes()).not.toContain('hidden')
   })
 
-  it('info banner slots is display when user passed slots content', async () => {
-    const titleText = 'Sample title'
-    const bodyText = 'Sample body text'
-
-    const wrapper = mount(InfoBanner, {
-      props,
-      slots: {
-        title: titleText,
-        body: bodyText,
-      },
-      global,
-    })
-
+  
+  it('info banner slots is display when user passed slots content', () => {
     const modalTitleEl = wrapper.find('[data-test-id="modal_title"]')
-    expect(modalTitleEl.text()).toBe(titleText)
+    expect(modalTitleEl.text()).toBe('Sample title')
     const modalBodyEl = wrapper.find('[data-test-id="modal_body"]')
-    expect(modalBodyEl.text()).toBe(bodyText)
+    expect(modalBodyEl.text()).toBe('Sample body text')
   })
 
   it('info banner on-close event is emitted when modal close button is clicked', async () => {
-    const wrapper = mount(InfoBanner, {
-      props,
-      global,
-    })
-
     const modalCloseButton = wrapper.find('.close')
-    await modalCloseButton.trigger('click')
+
+    modalCloseButton.trigger('click')
+    await wrapper.vm.$nextTick()
+
     expect(wrapper.emitted('on-close')).toBeTruthy()
     const emittedEvent = wrapper.emitted('on-close')
     expect(emittedEvent).toHaveLength(1)

package/src/components/barchart/BottomFields.vue

@@ -0,0 +1,253 @@
+<template>
+  <Container :is-chart-controls-shown-in-bottom="isChartControlsShownInBottom">
+    <LabelsColumn :width="yAxisWidth">
+      <LabelRow v-for="series in props.series" :key="series.name">
+        {{ series.name }}
+      </LabelRow>
+      <TotalRow v-if="props.series.length && fieldMode === 'percentage'">
+        {{ $gettext ? $gettext('Total (%)') : 'Total (%)' }}
+      </TotalRow>
+      <TotalRow v-if="props.series.length">
+        {{ $gettext ? $gettext('Total (kWh)') : 'Total (kWh)' }}
+      </TotalRow>
+    </LabelsColumn>
+
+    <FieldsContainer
+      :class="`fields-container-${chartId}`"
+      @scroll="handleFieldsScroll"
+    >
+      <FieldsWrapper>
+        <!-- For stacked bar chart -->
+        <template v-if="props.series.length">
+          <InputRow
+            v-for="series in props.series"
+            :key="series.name"
+            :data-series-name="series.name"
+          >
+            <InputGroup
+              v-for="(item, index) in props.data"
+              :bar-width="barWidth"
+              :is-scrollable="isScrollable"
+              :key="index"
+            >
+              <InputNumber
+                :allow-negative="false"
+                input-height="36px"
+                :number-precision="0"
+                :min-decimals="0"
+                text-align="center"
+                :unit-name="fieldMode === 'percentage' ? '%' : ''"
+                :value="getDisplayValue(series.data, item.label)"
+                @input-blur="handleInputBlur($event, series.name, item.label)"
+                @input-focus="handleInputFocus(series.name, item.label)"
+              />
+            </InputGroup>
+          </InputRow>
+
+          <TotalInputRow v-if="fieldMode === 'percentage'">
+            <InputGroup
+              v-for="(item, index) in props.data"
+              :bar-width="barWidth"
+              :is-scrollable="isScrollable"
+              :key="index"
+            >
+              <InputNumber
+                :allow-negative="false"
+                input-height="36px"
+                :is-read-only="true"
+                :number-precision="0"
+                :min-decimals="0"
+                text-align="center"
+                :unit-name="fieldMode === 'percentage' ? '%' : ''"
+                :value="calculatePercentageTotal(item.label)"
+              />
+            </InputGroup>
+          </TotalInputRow>
+
+          <TotalInputRow>
+            <InputGroup
+              v-for="(item, index) in props.data"
+              :bar-width="barWidth"
+              :is-scrollable="isScrollable"
+              :key="index"
+            >
+              <InputNumber
+                input-height="36px"
+                :is-read-only="true"
+                :number-precision="2"
+                :min-decimals="0"
+                text-align="center"
+                :value="calculateTotal(item.label)"
+              />
+            </InputGroup>
+          </TotalInputRow>
+        </template>
+
+        <!-- For simple bar chart -->
+        <template v-else>
+          <InputRow>
+            <InputGroup
+              v-for="(item, index) in props.data"
+              :bar-width="barWidth"
+              :is-scrollable="isScrollable"
+              :key="index"
+            >
+              <InputNumber
+                input-height="36px"
+                :min-decimals="0"
+                :number-precision="2"
+                text-align="center"
+                :value="item.value"
+                @input-blur="handleInputBlur($event, null, item.label)"
+                @input-focus="handleInputFocus(null, item.label)"
+              />
+            </InputGroup>
+          </InputRow>
+        </template>
+      </FieldsWrapper>
+    </FieldsContainer>
+  </Container>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import InputNumber from '../inputs/inputNumber'
+
+  import {
+    Container,
+    LabelsColumn,
+    LabelRow,
+    TotalRow,
+    FieldsContainer,
+    FieldsWrapper,
+    InputRow,
+    TotalInputRow,
+    InputGroup,
+  } from './styles/bottomFields'
+
+  const props = defineProps({
+    chartId: {
+      type: String,
+      required: true,
+    },
+    data: {
+      type: Array,
+      required: true,
+    },
+    series: {
+      type: Array,
+      required: true,
+    },
+    barWidth: {
+      type: Number,
+      required: true,
+    },
+    yAxisWidth: {
+      type: String,
+      required: true,
+    },
+    isScrollable: {
+      type: Boolean,
+      default: false,
+    },
+    isChartControlsShownInBottom: {
+      type: Boolean,
+      default: false,
+    },
+    fieldMode: {
+      type: String,
+      default: 'absolute',
+      validator: (value) => ['absolute', 'percentage'].includes(value),
+    },
+  })
+
+  const emit = defineEmits([
+    'sync-scroll',
+    'input-blur',
+    'input-focus',
+    'input-blur-all',
+  ])
+
+  const focusedInput = ref(null)
+
+  const handleInputFocus = (seriesName, label) => {
+    focusedInput.value = { seriesName, label }
+    emit('input-focus', { seriesName, label })
+  }
+
+  const calculateTotal = (label) => {
+    return props.series.reduce((sum, series) => {
+      const value = series.data.find((d) => d.label === label)?.value || 0
+      return sum + value
+    }, 0)
+  }
+
+  const syncScroll = (scrollLeft) => {
+    const container = document.querySelector(
+      `.fields-container-${props.chartId}`
+    )
+    if (container) {
+      container.scrollLeft = scrollLeft
+    }
+  }
+  const getDisplayValue = (seriesData, label) => {
+    if (props.fieldMode === 'absolute') {
+      return seriesData.find((d) => d.label === label)?.value || ''
+    }
+
+    const value = seriesData.find((d) => d.label === label)?.value || 0
+    const total = calculateTotal(label)
+    return total ? Number(((value / total) * 100).toFixed(0)) : 0
+  }
+
+  const calculatePercentageTotal = (label) => {
+    return props.series.reduce((sum, series) => {
+      const value = series.data.find((d) => d.label === label)?.value || 0
+      const total = calculateTotal(label)
+      const percentage = total ? Number(((value / total) * 100).toFixed(0)) : 0
+      return sum + percentage
+    }, 0)
+  }
+
+  const handleInputBlur = (_value, seriesName, label) => {
+    let value = Number(_value)
+
+    if (props.fieldMode === 'percentage') {
+      const total = calculateTotal(label)
+      value = (value / 100) * total
+    }
+
+    const payload = seriesName ? { seriesName, label, value } : { label, value }
+    emit('input-blur', payload)
+    focusedInput.value = null
+
+    // Check if the related target (element receiving focus) is another input in our chart
+    const relatedTarget = document.activeElement
+    const currentChartContainer = document.querySelector(
+      `.fields-container-${props.chartId}`
+    )
+    const isMovingToAnotherInput =
+      currentChartContainer?.contains(relatedTarget) &&
+      relatedTarget?.classList.contains('input-number')
+
+    if (!isMovingToAnotherInput) {
+      emit('input-blur-all')
+    } else {
+      // If moving to another input, trigger focus event manually
+      const seriesName =
+        relatedTarget.closest('[data-series-name]')?.dataset.seriesName
+      const label = relatedTarget.closest('[data-label]')?.dataset.label
+      if (seriesName && label) {
+        handleInputFocus(seriesName, label)
+      }
+    }
+  }
+
+  const handleFieldsScroll = (event) => {
+    emit('sync-scroll', event.target.scrollLeft)
+  }
+
+  defineExpose({
+    syncScroll,
+  })
+</script>

package/src/components/barchart/ChartControls.vue

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

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'