@eturnity/eturnity_reusable_components 8.19.8-EPDM-14690.3 → 8.19.8-EPDM-13664.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.19.8-EPDM-14690.3",
+  "version": "8.19.8-EPDM-13664.1",
   "files": [
     "dist",
     "src"

package/src/components/barchart/BottomFields.vue

@@ -1,14 +1,14 @@
 <template>
   <Container :is-chart-controls-shown-in-bottom="isChartControlsShownInBottom">
     <LabelsColumn :width="yAxisWidth">
-      <LabelRow v-for="series in seriesData" :key="series.name">
+      <LabelRow v-for="series in props.series" :key="series.name">
         {{ series.name }}
       </LabelRow>
-      <TotalRow v-if="seriesData.length && fieldMode === 'percentage'">
-        {{ $gettext ? `${$gettext('Total')} (%)` : 'Total (%)' }}
+      <TotalRow v-if="props.series.length && fieldMode === 'percentage'">
+        {{ $gettext ? $gettext('Total (%)') : 'Total (%)' }}
       </TotalRow>
-      <TotalRow v-if="seriesData.length">
-        {{ $gettext ? `${$gettext('Total')} (kWh)` : 'Total (kWh)' }}
+      <TotalRow v-if="props.series.length">
+        {{ $gettext ? $gettext('Total (kWh)') : 'Total (kWh)' }}
       </TotalRow>
     </LabelsColumn>
 
@@ -18,36 +18,27 @@
     >
       <FieldsWrapper>
         <!-- For stacked bar chart -->
-        <template v-if="seriesData.length">
+        <template v-if="props.series.length">
           <InputRow
-            v-for="series in seriesData"
+            v-for="series in props.series"
             :key="series.name"
             :data-series-name="series.name"
           >
             <InputGroup
               v-for="(item, index) in props.data"
-              :key="index"
               :bar-width="barWidth"
               :is-scrollable="isScrollable"
+              :key="index"
             >
               <InputNumber
                 :allow-negative="false"
-                :disabled="isInputsDisabled"
                 input-height="36px"
-                :is-disabled-styled-only="true"
-                :is-info-border="
-                  fieldMode === 'percentage'
-                    ? calculatePercentageTotal(item.label) !== 100
-                    : false
-                "
+                :number-precision="0"
                 :min-decimals="0"
-                :number-precision="fieldMode === 'percentage' ? 2 : 0"
                 text-align="center"
                 :unit-name="fieldMode === 'percentage' ? '%' : ''"
                 :value="getDisplayValue(series.data, item.label)"
-                @input-blur="
-                  handleInputBlur($event, series.name, item.label, series.data)
-                "
+                @input-blur="handleInputBlur($event, series.name, item.label)"
                 @input-focus="handleInputFocus(series.name, item.label)"
               />
             </InputGroup>
@@ -56,18 +47,16 @@
           <TotalInputRow v-if="fieldMode === 'percentage'">
             <InputGroup
               v-for="(item, index) in props.data"
-              :key="index"
               :bar-width="barWidth"
               :is-scrollable="isScrollable"
+              :key="index"
             >
               <InputNumber
                 :allow-negative="false"
-                :disabled="isInputsDisabled"
                 input-height="36px"
-                :is-disabled-styled-only="true"
                 :is-read-only="true"
+                :number-precision="0"
                 :min-decimals="0"
-                :number-precision="fieldMode === 'percentage' ? 2 : 0"
                 text-align="center"
                 :unit-name="fieldMode === 'percentage' ? '%' : ''"
                 :value="calculatePercentageTotal(item.label)"
@@ -78,23 +67,17 @@
           <TotalInputRow>
             <InputGroup
               v-for="(item, index) in props.data"
-              :key="index"
               :bar-width="barWidth"
               :is-scrollable="isScrollable"
+              :key="index"
             >
               <InputNumber
                 input-height="36px"
-                :is-border-error-only="true"
-                :is-info-border="
-                  fieldMode === 'percentage'
-                    ? calculatePercentageTotal(item.label) !== 100
-                    : false
-                "
                 :is-read-only="true"
+                :number-precision="2"
                 :min-decimals="0"
-                :number-precision="0"
                 text-align="center"
-                :value="calculateTotalValue(item.label)"
+                :value="calculateTotal(item.label)"
               />
             </InputGroup>
           </TotalInputRow>
@@ -105,20 +88,17 @@
           <InputRow>
             <InputGroup
               v-for="(item, index) in props.data"
-              :key="index"
               :bar-width="barWidth"
               :is-scrollable="isScrollable"
+              :key="index"
             >
               <InputNumber
-                :allow-negative="false"
-                :disabled="isInputsDisabled"
                 input-height="36px"
-                :is-disabled-styled-only="true"
                 :min-decimals="0"
-                :number-precision="0"
+                :number-precision="2"
                 text-align="center"
                 :value="item.value"
-                @input-blur="handleInputBlur($event, null, item.label, null)"
+                @input-blur="handleInputBlur($event, null, item.label)"
                 @input-focus="handleInputFocus(null, item.label)"
               />
             </InputGroup>
@@ -127,22 +107,11 @@
       </FieldsWrapper>
     </FieldsContainer>
   </Container>
-  <InfoCardContainer
-    v-if="hasAnySegmentNotTotatTo100Percent && fieldMode === 'percentage'"
-    :yAxisWidth="yAxisWidth"
-  >
-    <InfoCard align-items="center" type="info">
-      <InfoCardBody>
-        {{ percentageErrorMessage }}
-      </InfoCardBody>
-    </InfoCard>
-  </InfoCardContainer>
 </template>
 
 <script setup>
-  import { ref, computed, watchEffect } from 'vue'
+  import { ref } from 'vue'
   import InputNumber from '../inputs/inputNumber'
-  import InfoCard from '../infoCard'
 
   import {
     Container,
@@ -154,8 +123,6 @@
     InputRow,
     TotalInputRow,
     InputGroup,
-    InfoCardContainer,
-    InfoCardBody,
   } from './styles/bottomFields'
 
   const props = defineProps({
@@ -192,51 +159,6 @@
       default: 'absolute',
       validator: (value) => ['absolute', 'percentage'].includes(value),
     },
-    isInputsDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    percentageErrorMessage: {
-      type: String,
-      default: '',
-    },
-  })
-
-  const seriesData = ref([])
-
-  watchEffect(() => {
-    let isNewSetOfSeries = false
-    const seriesDataCopy = [...seriesData.value]
-    if (
-      !seriesDataCopy.length ||
-      !props.series.length ||
-      seriesDataCopy.length !== props.series.length ||
-      !seriesDataCopy.some((item) => {
-        return props.series.map((s) => s.name).includes(item.name)
-      })
-    ) {
-      isNewSetOfSeries = true
-    }
-    const currentSeriesData = !isNewSetOfSeries ? seriesDataCopy : []
-    const newSeriesData = []
-
-    props.series.forEach((item, itemIndex) => {
-      const data = item.data.map((d, dIndex) => ({
-        label: d.label,
-        value: d.value,
-        percentage: d.percentage,
-        originalValue: currentSeriesData.length
-          ? currentSeriesData[itemIndex].data[dIndex].originalValue
-          : d.value,
-      }))
-
-      newSeriesData.push({
-        name: item.name,
-        data,
-      })
-    })
-
-    seriesData.value = [...newSeriesData]
   })
 
   const emit = defineEmits([
@@ -253,13 +175,11 @@
     emit('input-focus', { seriesName, label })
   }
 
-  const calculateTotalValue = (label) => {
-    const total = seriesData.value.reduce((sum, series) => {
+  const calculateTotal = (label) => {
+    return props.series.reduce((sum, series) => {
       const value = series.data.find((d) => d.label === label)?.value || 0
       return sum + value
     }, 0)
-
-    return Math.round(total)
   }
 
   const syncScroll = (scrollLeft) => {
@@ -270,38 +190,34 @@
       container.scrollLeft = scrollLeft
     }
   }
-
-  const getDisplayValue = (data, label, shouldRound = true) => {
+  const getDisplayValue = (seriesData, label) => {
     if (props.fieldMode === 'absolute') {
-      return data.find((d) => d.label === label)?.value
+      return seriesData.find((d) => d.label === label)?.value || ''
     }
 
-    return data.find((d) => d.label === label)?.percentage
+    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) => {
-    const percentageTotal = seriesData.value.reduce((sum, series) => {
-      const percentage =
-        series.data.find((d) => d.label === label)?.percentage || 0
+    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)
-
-    return Math.round(percentageTotal)
   }
 
   const handleInputBlur = (_value, seriesName, label) => {
-    if (props.isInputsDisabled) {
-      return
-    }
     let value = Number(_value)
 
-    const payload = seriesName
-      ? {
-          seriesName,
-          label,
-          value,
-        }
-      : { label, 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
 
@@ -327,12 +243,6 @@
     }
   }
 
-  const hasAnySegmentNotTotatTo100Percent = computed(() => {
-    return props.data.some((d) => {
-      return calculatePercentageTotal(d.label) !== 100
-    })
-  })
-
   const handleFieldsScroll = (event) => {
     emit('sync-scroll', event.target.scrollLeft)
   }

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

@@ -84,7 +84,7 @@ export function useAxisCalculations(props, maxValue) {
   })
 
   const yAxisWidth = computed(() => {
-    return !!props.yAxisTitle || props.isBottomFieldsShown ? '80px' : '60px'
+    return !!props.yAxisTitle || props.isBottomFieldsShown ? '70px' : '60px'
   })
 
   const isChartControlsShown = (position) => {

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

@@ -66,7 +66,7 @@ export function useChartData(props, paddedMaxValue) {
         let accumulated = 0
         return {
           label: item.label,
-          segments: [...props.series].map((series, index) => {
+          segments: [...props.series].reverse().map((series, index) => {
             const value =
               series.data.find((d) => d.label === item.label)?.value || 0
             accumulated += value

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

@@ -16,21 +16,7 @@ export function useTooltip(chartId, normalizedData) {
     if (!showTooltipContent.value) {
       showTooltipContent.value = true
     }
-    if (isObjectEqual(item, tooltipData.value)) {
-      return
-    }
-
-    const totalValue = item.segments.reduce((acc, segment) => {
-      return acc + segment.value
-    }, 0)
-
-    const segments = item.segments.map((segment) => {
-      let valuePercentage = (segment.value / totalValue) * 100
-      segment.valuePercentage = Math.round(valuePercentage)
-
-      return segment
-    })
-    item.segments = segments
+    if (isObjectEqual(item, tooltipData.value)) return
 
     tooltipData.value = { ...item }
 
@@ -55,27 +41,16 @@ export function useTooltip(chartId, normalizedData) {
 
     isInputFocused.value = true
     const barData = normalizedData.value.find((item) => item.label === label)
-    if (!barData) return
 
-    const totalValue = barData.segments.reduce((acc, segment) => {
-      return acc + segment.value
-    }, 0)
-    const segments = barData.segments.map((segment) => {
-      let valuePercentage = (segment.value / totalValue) * 100
-      segment.valuePercentage = Math.round(valuePercentage)
-
-      return segment
-    })
-    barData.segments = segments
+    if (!barData) return
     focusedBarData.value = barData
-
     const barElement = document.querySelector(
       `.barchart-${chartId} .bar-group:nth-child(${
         normalizedData.value.indexOf(barData) + 1
       })`
     )
-    if (!barElement) return
 
+    if (!barElement) return
     // Get the last bar segment, samee as hover behavior
     const targetElement = barElement.querySelector('.bar-segment:last-child')
     const rect = targetElement.getBoundingClientRect()

package/src/components/barchart/index.vue

@@ -17,7 +17,7 @@
       />
     </ChartControlsWrapper>
     <GraphSection :height="height" :width="width">
-      <YAxis :height="height" :width="yAxisWidth">
+      <YAxis :width="yAxisWidth" :height="height">
         <YAxisTitleWrapper v-if="yAxisTitle" :height="yAxisHeight">
           {{ yAxisTitle }}
         </YAxisTitleWrapper>
@@ -30,15 +30,15 @@
             )
           "
         >
-          <YAxisLabel>{{ getYAxisLabel(label) }}</YAxisLabel>
+          <YAxisLabel>{{ label }}</YAxisLabel>
           <YAxisLine :y-axis-width="yAxisWidth" />
         </YAxisRow>
       </YAxis>
 
       <ScrollContainer
         :class="`chart-scroll-container-${chartId}`"
-        :height="height"
         :is-scrollable="isScrollable"
+        :height="height"
         @scroll="handleChartScroll"
       >
         <ChartContent
@@ -64,19 +64,19 @@
           <BarsContainer>
             <BarGroup
               v-for="(item, index) in normalizedData"
-              :key="index"
               :bar-width="barWidth"
               class="bar-group"
               :is-scrollable="isScrollable"
+              :key="index"
             >
               <BarWrapper>
                 <BarSegment
                   v-for="(segment, segIndex) in item.segments"
-                  :key="segIndex"
                   class="bar-segment"
                   :gradient-from="getSegmentGradient(index, segment).from"
                   :gradient-to="getSegmentGradient(index, segment).to"
                   :height="`${segment.percentage}%`"
+                  :key="segIndex"
                   :z-index="item.segments.length - segIndex"
                   @mouseenter="showTooltip(item, $event, series)"
                   @mouseleave="hideTooltip"
@@ -96,7 +96,7 @@
         :left="tooltipStyle.left"
         :top="tooltipStyle.top"
       >
-        <slot :item="tooltipData" name="tooltip"></slot>
+        <slot :item="tooltipData" name="tooltip" />
         <TooltipTextWrapper v-if="!slots.tooltip && tooltipData">
           <template v-if="!series.length">
             <TooltipText font-weight="500">{{ tooltipData.label }}</TooltipText>
@@ -128,11 +128,7 @@
                   :gradient-to="segment.gradientTo"
                 />
                 <TooltipText>
-                  {{
-                    fieldMode === 'absolute' && showPercentageOnTooltip
-                      ? `${segment.valuePercentage}%`
-                      : handleValueFormatter(segment.value)
-                  }}
+                  {{ handleValueFormatter(segment.value) }}
                 </TooltipText>
               </TooltipRow>
             </template>
@@ -163,9 +159,7 @@
       :data="data"
       :field-mode="fieldMode"
       :is-chart-controls-shown-in-bottom="isChartControlsShown('bottom')"
-      :is-inputs-disabled="isLoading"
       :is-scrollable="isScrollable"
-      :percentage-error-message="percentageErrorMessage"
       :series="series"
       :y-axis-width="yAxisWidth"
       @input-blur="handleInputBlur"
@@ -177,13 +171,12 @@
 </template>
 
 <script setup>
-  import { useSlots, computed, ref } from 'vue'
+  import { useSlots, computed } from 'vue'
 
   import ChartControls from './ChartControls'
   import BottomFields from './BottomFields'
   import SelectionBox from './SelectionBox'
   import Spinner from '../spinner'
-  import { numberToString } from '../../helpers/numberConverter'
 
   import {
     useTooltip,
@@ -253,6 +246,10 @@
       type: String,
       default: '',
     },
+    valueFormatter: {
+      type: Function,
+      default: null,
+    },
     isLegendShown: {
       type: Boolean,
       default: false,
@@ -299,14 +296,6 @@
       type: Boolean,
       default: false,
     },
-    showPercentageOnTooltip: {
-      type: Boolean,
-      default: false,
-    },
-    percentageErrorMessage: {
-      type: String,
-      default: '',
-    },
   })
 
   const generateChartId = () =>
@@ -389,40 +378,8 @@
   }
 
   const handleValueFormatter = (value) => {
-    let formattedValue = value
-    if (value < 1000) {
-      formattedValue = numberToString({
-        value: formattedValue,
-        numberPrecision: 0,
-        minDecimals: 0,
-      })
-    } else if (value < 1000000) {
-      formattedValue = numberToString({
-        value: Number(formattedValue / 1000),
-        numberPrecision: 2,
-        minDecimals: 2,
-      })
-    } else {
-      formattedValue = numberToString({
-        value: Number(formattedValue / 1000000),
-        numberPrecision: 2,
-        minDecimals: 2,
-      })
-    }
-    if (value < 1000) {
-      return `${formattedValue} kWh`
-    } else if (value < 1000000) {
-      return `${formattedValue} MWh`
-    } else {
-      return `${formattedValue} GWh`
-    }
-  }
-
-  const getYAxisLabel = (label) => {
-    return numberToString({
-      value: label,
-      numberPrecision: 0,
-      minDecimals: 0,
-    })
+    return props.valueFormatter
+      ? props.valueFormatter(Math.round(value))
+      : value
   }
 </script>

package/src/components/barchart/styles/bottomFields.js

@@ -17,18 +17,18 @@ export const LabelsColumn = styled('div', { width: String })`
 
 export const LabelRow = styled.div`
   height: 32px;
-  padding-top: 5px;
   font-size: 12px;
   font-weight: 500;
   color: ${(props) => props.theme.semanticColors.teal[600]};
   display: flex;
-  align-items: center;
+  align-items: flex-start;
 `
 
 export const TotalRow = styled(LabelRow)``
 
 export const FieldsContainer = styled.div`
   flex: 1;
+  overflow-x: auto;
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
@@ -59,22 +59,8 @@ export const InputGroup = styled('div', {
   barWidth: Number,
   isScrollable: Boolean,
 })`
-  ${(props) => (props.isScrollable ? 'min-width' : 'width')}: 70px;
+  ${(props) => (props.isScrollable ? 'min-width' : 'width')}:${(props) =>
+    props.barWidth}px;
   display: flex;
   justify-content: center;
-  position: relative;
-
-  input[readonly] {
-    border: 1px solid ${(props) => props.theme.colors.grey4} !important;
-  }
-`
-
-export const InfoCardContainer = styled('div', { yAxisWidth: String })`
-  margin-left: ${(props) => props.yAxisWidth};
-  padding: 12px;
-  margin-top: 12px;
-`
-
-export const InfoCardBody = styled.div`
-  padding: 8px 0;
 `

package/src/components/barchart/styles/chart.js

@@ -127,7 +127,6 @@ export const BarWrapper = styled.div`
   height: 100%;
   width: 100%;
   position: relative;
-  overflow: hidden;
 `
 
 export const BarSegment = styled('div', {

package/src/components/errorMessage/index.vue

@@ -19,7 +19,7 @@
     background: ${(props) => props.theme.colors.red};
     padding: 10px;
     width: max-content;
-    /* max-width: 100%; */
+    max-width: 100%;
     min-width: min-content;
     font-size: 11px;
     font-weight: 400;

package/src/components/infoCard/index.vue

@@ -73,12 +73,7 @@
       type: {
         required: false,
         type: String,
-        default: 'info_simple',
-        validator(value) {
-          return ['info_simple', 'warning', 'error_minor', 'info'].includes(
-            value
-          )
-        },
+        default: 'info',
       },
       minWidth: {
         required: false,
@@ -117,11 +112,8 @@
       },
     },
     computed: {
-      isInfoSimple() {
-        // this property is used for tests
-        return this.type === 'info_simple'
-      },
       isInfo() {
+        // this property is used for tests
         return this.type === 'info'
       },
       isWarning() {
@@ -156,13 +148,9 @@
           stylesCollection.borderStyle = 'dashed'
           stylesCollection.borderColor = theme.colors.grey4
           stylesCollection.iconColor = theme.colors.red
-        } else if (this.isInfoSimple) {
+        } else {
           stylesCollection.borderStyle = 'dashed'
           stylesCollection.borderColor = theme.colors.grey4
-        } else {
-          stylesCollection.color = theme.semanticColors.teal[800]
-          stylesCollection.backgroundColor = theme.semanticColors.blue[300]
-          stylesCollection.iconColor = theme.semanticColors.teal[800]
         }
 
         return stylesCollection

package/src/components/infoCard/infoCard.spec.js

@@ -45,19 +45,19 @@ describe('RCInfoCard.vue', () => {
         },
       })
 
-      expect(wrapper.vm.isInfoSimple).toBe(true)
+      expect(wrapper.vm.isInfo).toBe(true)
       expect(wrapper.vm.isWarning).toBe(false)
       expect(wrapper.vm.isErrorMinor).toBe(false)
 
       await wrapper.setProps({ type: 'warning' })
 
-      expect(wrapper.vm.isInfoSimple).toBe(false)
+      expect(wrapper.vm.isInfo).toBe(false)
       expect(wrapper.vm.isWarning).toBe(true)
       expect(wrapper.vm.isErrorMinor).toBe(false)
 
       await wrapper.setProps({ type: 'error_minor' })
 
-      expect(wrapper.vm.isInfoSimple).toBe(false)
+      expect(wrapper.vm.isInfo).toBe(false)
       expect(wrapper.vm.isWarning).toBe(false)
       expect(wrapper.vm.isErrorMinor).toBe(true)
     })