@eturnity/eturnity_reusable_components 8.19.8-EPDM-13618.0 → 8.19.8-EPDM-14690.2

package/src/components/barchart/BottomFields.vue

@@ -1,253 +1,337 @@
-<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>
+<template>
+  <Container :is-chart-controls-shown-in-bottom="isChartControlsShownInBottom">
+    <LabelsColumn :width="yAxisWidth">
+      <LabelRow v-for="series in seriesData" :key="series.name">
+        {{ series.name }}
+      </LabelRow>
+      <TotalRow v-if="seriesData.length && fieldMode === 'percentage'">
+        {{ $gettext ? `${$gettext('Total')} (%)` : 'Total (%)' }}
+      </TotalRow>
+      <TotalRow v-if="seriesData.length">
+        {{ $gettext ? `${$gettext('Total')} (kWh)` : 'Total (kWh)' }}
+      </TotalRow>
+    </LabelsColumn>
+
+    <FieldsContainer
+      :class="`fields-container-${chartId}`"
+      @scroll="handleFieldsScroll"
+    >
+      <FieldsWrapper>
+        <!-- For stacked bar chart -->
+        <template v-if="seriesData.length">
+          <InputRow
+            v-for="series in seriesData"
+            :key="series.name"
+            :data-series-name="series.name"
+          >
+            <InputGroup
+              v-for="(item, index) in props.data"
+              :key="index"
+              :bar-width="barWidth"
+              :is-scrollable="isScrollable"
+            >
+              <InputNumber
+                :allow-negative="false"
+                :disabled="isInputsDisabled"
+                input-height="36px"
+                :is-info-border="
+                  fieldMode === 'percentage'
+                    ? calculatePercentageTotal(item.label) !== 100
+                    : false
+                "
+                :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-focus="handleInputFocus(series.name, item.label)"
+              />
+            </InputGroup>
+          </InputRow>
+
+          <TotalInputRow v-if="fieldMode === 'percentage'">
+            <InputGroup
+              v-for="(item, index) in props.data"
+              :key="index"
+              :bar-width="barWidth"
+              :is-scrollable="isScrollable"
+            >
+              <InputNumber
+                :allow-negative="false"
+                :disabled="isInputsDisabled"
+                input-height="36px"
+                :is-read-only="true"
+                :min-decimals="0"
+                :number-precision="fieldMode === 'percentage' ? 2 : 0"
+                text-align="center"
+                :unit-name="fieldMode === 'percentage' ? '%' : ''"
+                :value="calculatePercentageTotal(item.label)"
+              />
+            </InputGroup>
+          </TotalInputRow>
+
+          <TotalInputRow>
+            <InputGroup
+              v-for="(item, index) in props.data"
+              :key="index"
+              :bar-width="barWidth"
+              :is-scrollable="isScrollable"
+            >
+              <InputNumber
+                input-height="36px"
+                :is-border-error-only="true"
+                :is-info-border="
+                  fieldMode === 'percentage'
+                    ? calculatePercentageTotal(item.label) !== 100
+                    : false
+                "
+                :is-read-only="true"
+                :min-decimals="0"
+                :number-precision="0"
+                text-align="center"
+                :value="calculateTotalValue(item.label)"
+              />
+            </InputGroup>
+          </TotalInputRow>
+        </template>
+
+        <!-- For simple bar chart -->
+        <template v-else>
+          <InputRow>
+            <InputGroup
+              v-for="(item, index) in props.data"
+              :key="index"
+              :bar-width="barWidth"
+              :is-scrollable="isScrollable"
+            >
+              <InputNumber
+                :allow-negative="false"
+                :disabled="isInputsDisabled"
+                input-height="36px"
+                :min-decimals="0"
+                :number-precision="0"
+                text-align="center"
+                :value="item.value"
+                @input-blur="handleInputBlur($event, null, item.label, null)"
+                @input-focus="handleInputFocus(null, item.label)"
+              />
+            </InputGroup>
+          </InputRow>
+        </template>
+      </FieldsWrapper>
+    </FieldsContainer>
+  </Container>
+  <InfoCardContainer
+    v-if="hasAnySegmentNotTotatTo100Percent && fieldMode === 'percentage'"
+    :yAxisWidth="yAxisWidth"
+  >
+    <InfoCard align-items="center" type="info">
+      <InfoCardBody>
+        {{
+          $gettext
+            ? $gettext('load_profile_not_add_up_to_100')
+            : 'load_profile_not_add_up_to_100'
+        }}
+      </InfoCardBody>
+    </InfoCard>
+  </InfoCardContainer>
+</template>
+
+<script setup>
+  import { ref, computed, watchEffect } from 'vue'
+  import InputNumber from '../inputs/inputNumber'
+  import InfoCard from '../infoCard'
+
+  import {
+    Container,
+    LabelsColumn,
+    LabelRow,
+    TotalRow,
+    FieldsContainer,
+    FieldsWrapper,
+    InputRow,
+    TotalInputRow,
+    InputGroup,
+    InfoCardContainer,
+    InfoCardBody,
+  } 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),
+    },
+    isInputsDisabled: {
+      type: Boolean,
+      default: false,
+    },
+  })
+
+  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([
+    '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 calculateTotalValue = (label) => {
+    const total = seriesData.value.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) => {
+    const container = document.querySelector(
+      `.fields-container-${props.chartId}`
+    )
+    if (container) {
+      container.scrollLeft = scrollLeft
+    }
+  }
+
+  const getDisplayValue = (data, label, shouldRound = true) => {
+    if (props.fieldMode === 'absolute') {
+      return data.find((d) => d.label === label)?.value
+    }
+
+    return data.find((d) => d.label === label)?.percentage
+  }
+
+  const calculatePercentageTotal = (label) => {
+    const percentageTotal = seriesData.value.reduce((sum, series) => {
+      const percentage =
+        series.data.find((d) => d.label === label)?.percentage || 0
+      return sum + percentage
+    }, 0)
+
+    return Math.round(percentageTotal)
+  }
+
+  const handleInputBlur = (_value, seriesName, label, currentSeriesData) => {
+    let value = Number(_value)
+
+    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 hasAnySegmentNotTotatTo100Percent = computed(() => {
+    return props.data.some((d) => {
+      return calculatePercentageTotal(d.label) !== 100
+    })
+  })
+
+  const handleFieldsScroll = (event) => {
+    emit('sync-scroll', event.target.scrollLeft)
+  }
+
+  defineExpose({
+    syncScroll,
+  })
+</script>