@eturnity/eturnity_reusable_components 8.13.2 → 8.13.3-EPDM-14657.0

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'

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