@eturnity/eturnity_reusable_components 8.16.9-qa-16-03-26.1 → 8.16.9-qa-16-03-26.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.16.9-qa-16-03-26.1",
+  "version": "8.16.9-qa-16-03-26.3",
   "files": [
     "dist",
     "src"

package/src/components/barchart/BottomFields.vue

@@ -32,6 +32,7 @@
             >
               <InputNumber
                 :allow-negative="false"
+                :disabled="isInputsDisabled"
                 :error-message="null"
                 input-height="36px"
                 :is-border-error-only="true"
@@ -40,12 +41,14 @@
                     ? calculatePercentageTotal(item.label) !== 100
                     : false
                 "
-                :number-precision="0"
+                :number-precision="fieldMode === 'percentage' ? 2 : 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-blur="
+                  handleInputBlur($event, series.name, item.label, series.data)
+                "
                 @input-focus="handleInputFocus(series.name, item.label)"
               />
             </InputGroup>
@@ -60,15 +63,15 @@
             >
               <InputNumber
                 :allow-negative="false"
+                :disabled="isInputsDisabled"
                 input-height="36px"
                 :is-read-only="true"
-                :number-precision="0"
+                :number-precision="fieldMode === 'percentage' ? 2 : 0"
                 :min-decimals="0"
                 text-align="center"
                 :unit-name="fieldMode === 'percentage' ? '%' : ''"
                 :value="calculatePercentageTotal(item.label)"
               />
-              {{ $c.log(calculatePercentageTotal(item.label)) }}
             </InputGroup>
           </TotalInputRow>
 
@@ -108,12 +111,13 @@
               :key="index"
             >
               <InputNumber
+                :disabled="isInputsDisabled"
                 input-height="36px"
                 :min-decimals="0"
                 :number-precision="2"
                 text-align="center"
                 :value="item.value"
-                @input-blur="handleInputBlur($event, null, item.label)"
+                @input-blur="handleInputBlur($event, null, item.label, null)"
                 @input-focus="handleInputFocus(null, item.label)"
               />
             </InputGroup>
@@ -125,7 +129,7 @@
 </template>
 
 <script setup>
-  import { ref, watch, onMounted } from 'vue'
+  import { ref, watch, watchEffect, onMounted } from 'vue'
   import styled from 'vue3-styled-components'
   import InputNumber from '../inputs/inputNumber'
 
@@ -175,34 +179,52 @@
       default: 'absolute',
       validator: (value) => ['absolute', 'percentage'].includes(value),
     },
+    isInputsDisabled: {
+      type: Boolean,
+      default: false,
+    },
   })
 
   const seriesData = ref([])
 
-  onMounted(() => {
-    seriesData.value = props.series.map((item) => {
-      const data = item.data.map((d) => ({
-        label: d.label,
-        value: d.value,
-        originalValue: d.value,
-      }))
-
-      return {
-        name: item.name,
-        data,
-      }
-    })
-  })
-
-  watch(props.series, () => {
-    const currentSeriesData = [...seriesData.value]
+  // onMounted(() => {
+  //   seriesData.value = props.series.map((item) => {
+  //     const data = item.data.map((d) => ({
+  //       label: d.label,
+  //       value: d.value,
+  //       originalValue: d.value,
+  //     }))
+
+  //     return {
+  //       name: item.name,
+  //       data,
+  //     }
+  //   })
+  // })
+
+  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,
-        originalValue: currentSeriesData[itemIndex].data[dIndex].originalValue,
+        originalValue: currentSeriesData.length
+          ? currentSeriesData[itemIndex].data[dIndex].originalValue
+          : d.value,
       }))
 
       newSeriesData.push({
@@ -254,7 +276,7 @@
     }, 0)
   }
 
-  const getDisplayValue = (data, label) => {
+  const getDisplayValue = (data, label, shouldRound = true) => {
     if (props.fieldMode === 'absolute') {
       return data.find((d) => d.label === label)?.value || ''
     }
@@ -267,7 +289,7 @@
       return sum + value
     }, 0)
 
-    return Math.round((value / total) * 100)
+    return shouldRound ? (value / total) * 100 : (value / total) * 100
   }
 
   const calculatePercentageTotal = (label) => {
@@ -288,7 +310,7 @@
     return Math.round(totalPercentage)
   }
 
-  const handleInputBlur = (_value, seriesName, label) => {
+  const handleInputBlur = (_value, seriesName, label, currentSeriesData) => {
     let value = Number(_value)
 
     if (props.fieldMode === 'percentage') {
@@ -301,7 +323,18 @@
       value = (value / 100) * total
     }
 
-    const payload = seriesName ? { seriesName, label, value } : { label, value }
+    const payload = seriesName
+      ? {
+          seriesName,
+          label,
+          value,
+          inputValue: _value,
+          percentage: Number(
+            getDisplayValue(currentSeriesData, label, false).toFixed(2)
+          ),
+          totalSeriesValue: calculateTotalOriginalValue(label),
+        }
+      : { label, value }
     emit('input-blur', payload)
     focusedInput.value = null
 
@@ -331,6 +364,11 @@
     emit('sync-scroll', event.target.scrollLeft)
   }
 
+  const toFixedNoRounding = (number, decimals) => {
+    const factor = Math.pow(10, decimals)
+    return Math.floor(number * factor) / factor
+  }
+
   defineExpose({
     syncScroll,
   })

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

@@ -84,7 +84,7 @@ export function useAxisCalculations(props, maxValue) {
   })
 
   const yAxisWidth = computed(() => {
-    return !!props.yAxisTitle || props.isBottomFieldsShown ? '70px' : '60px'
+    return !!props.yAxisTitle || props.isBottomFieldsShown ? '80px' : '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].reverse().map((series, index) => {
+          segments: [...props.series].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,7 +16,9 @@ export function useTooltip(chartId, normalizedData) {
     if (!showTooltipContent.value) {
       showTooltipContent.value = true
     }
-    if (isObjectEqual(item, tooltipData.value)) return
+    if (isObjectEqual(item, tooltipData.value)) {
+      return
+    }
 
     const totalValue = item.segments.reduce((acc, segment) => {
       return acc + segment.value
@@ -53,16 +55,27 @@ 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
     focusedBarData.value = barData
+
     const barElement = document.querySelector(
       `.barchart-${chartId} .bar-group:nth-child(${
         normalizedData.value.indexOf(barData) + 1
       })`
     )
-
     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

@@ -163,6 +163,7 @@
       :data="data"
       :field-mode="fieldMode"
       :is-chart-controls-shown-in-bottom="isChartControlsShown('bottom')"
+      :is-inputs-disabled="isLoading"
       :is-scrollable="isScrollable"
       :series="series"
       :y-axis-width="yAxisWidth"
@@ -387,13 +388,22 @@
   }
 
   const handleValueFormatter = (value) => {
-    value = numberToString({
-      value,
-      numberPrecision: 0,
-      minDecimals: 0,
-    })
+    let formattedValue = value
+    if (value < 1000) {
+      formattedValue = numberToString({
+        value: formattedValue,
+        numberPrecision: 0,
+        minDecimals: 0,
+      })
+    } else if (value < 1000000) {
+      formattedValue = Number((value / 1000).toFixed(2))
+    } else {
+      formattedValue = Number((value / 1000000).toFixed(2))
+    }
 
-    return props.valueFormatter ? props.valueFormatter(value) : value
+    return props.valueFormatter
+      ? props.valueFormatter(formattedValue)
+      : formattedValue
   }
 
   const getYAxisLabel = (label) => {

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

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