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

package/src/assets/svgIcons/ground_symbol.svg

@@ -0,0 +1,28 @@
+<svg
+   width="50"
+   height="50"
+   viewBox="0 0 25 50"
+   fill='white'
+   >
+  <defs
+     id="defs4" />
+  <g
+     id="layer1">
+    <path
+       d="M 0.5,24.5 L 24.5,24.5"
+       style="fill:lime;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="path4098" />
+    <path
+       d="M 4.5,27.5 L 20.5,27.5"
+       style="fill:lime;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="path4100" />
+    <path
+       d="M 16.5,30.5 L 8.5,30.5"
+       style="fill:lime;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="path4102" />
+    <path
+       d="M 12.5,24.5 L 12.5,4.5"
+       style="fill:lime;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="path4104" />
+  </g>
+</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

@@ -180,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',
     },
@@ -312,7 +328,7 @@ const theme = (() => {
               borderColor: semanticColors.grey[300],
             },
             hover: {
-              backgroundColor: semanticColors.purple[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>