@eturnity/eturnity_reusable_components 8.19.7 → 8.19.8-EPDM-14690.0

package/package.json

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

package/src/TestChart.vue

@@ -0,0 +1,229 @@
+<template>
+  <div
+    style="
+      margin-top: 100px;
+      margin-left: 80px;
+      padding-bottom: 100px;
+      display: flex;
+      flex-direction: column;
+    "
+  >
+    <!-- Simple bar chart -->
+    <BarChart
+      :bar-width="60"
+      chart-controls-position="bottom"
+      :data="monthlyData"
+      height="400px"
+      :is-bottom-fields-shown="true"
+      :is-scrollable="false"
+      :is-selection-enabled="true"
+      :selection-size="3"
+      :value-formatter="valueFormatter"
+      width="700px"
+      @selection-change="handleSelectionChange"
+    />
+    <br />
+    <br />
+
+    <!-- Stacked bar chart -->
+    <BarChart
+      :bar-width="60"
+      :data="monthLabels"
+      height="400px"
+      :is-bottom-fields-shown="true"
+      :is-legend-shown="true"
+      :legends-item-per-row="4"
+      :selected-split-button="selectedTimeFrame"
+      :series="tariffZones"
+      :show-percentage-on-tooltip="true"
+      :split-button-options="options"
+      :value-formatter="valueFormatter"
+      width="700px"
+      y-axis-title="Energy (kWh)"
+      @input-blur="handleInputBlur"
+      @select-split-button="handleSelectSplitButton"
+    />
+
+    <!-- Stacked bar chart -->
+    <BarChart
+      :bar-width="60"
+      :data="monthLabels"
+      field-mode="percentage"
+      height="400px"
+      :is-bottom-fields-shown="true"
+      :is-legend-shown="false"
+      :legends-item-per-row="4"
+      :series="tariffZones"
+      :value-formatter="valueFormatter"
+      width="700px"
+      @input-blur="handleInputBlur"
+      @select-split-button="handleSelectSplitButton"
+    >
+      <!-- <template #tooltip="{ item, segment }">
+        <div style="display: flex; flex-direction: column">
+          {{ $c.log(item, segment) }}
+          <div>{{ item.label }}</div>
+          <div>{{ item.segments[0].value }} kWh</div>
+        </div>
+      </template> -->
+    </BarChart>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import BarChart from '@/components/barchart/index.vue'
+
+  const options = [
+    { label: 'Day', value: 'day' },
+    { label: 'Month', value: 'month' },
+    { label: 'Year', value: 'year' },
+  ]
+
+  const selectedTimeFrame = ref('day')
+
+  const handleSelectSplitButton = (value) => {
+    selectedTimeFrame.value = value
+  }
+
+  const monthlyData = [
+    { label: 'Jan', value: 300 },
+    { label: 'Feb', value: 600 },
+    { label: 'Mar', value: 1000 },
+    { label: 'Apr', value: 1200 },
+    { label: 'May', value: 1400 },
+    { label: 'Jun', value: 1810 },
+    { label: 'Jul', value: 1400 },
+    { label: 'Aug', value: 1200 },
+    { label: 'Sep', value: 1000 },
+    // { label: 'Oct', value: 800 },
+    // { label: 'Nov', value: 600 },
+    // { label: 'Dec', value: 400 },
+    // { label: 'Jan', value: 300 },
+    // { label: 'Feb', value: 600 },
+    // { label: 'Mar', value: 1000 },
+    // { label: 'Apr', value: 1200 },
+    // { label: 'May', value: 1400 },
+    // { label: 'Jun', value: 1810 },
+    // { label: 'Jul', value: 1400 },
+    // { label: 'Aug', value: 1200 },
+    // { label: 'Sep', value: 1000 },
+    // { label: 'Oct', value: 800 },
+    // { label: 'Nov', value: 600 },
+    // { label: 'Dec', value: 400 },
+
+    // ... more months
+  ]
+
+  const monthLabels = [
+    { label: 'Jan' },
+    { label: 'Feb' },
+    { label: 'Mar' },
+    { label: 'Apr' },
+    { label: 'May' },
+    { label: 'Jun' },
+    // ... more months
+  ]
+
+  const tariffZones = ref([
+    {
+      name: 'Tariff Zone 1',
+      data: [
+        { label: 'Jan', value: 200 },
+        { label: 'Feb', value: 130 },
+        { label: 'Mar', value: 220 },
+        { label: 'Apr', value: 230 },
+        { label: 'May', value: 200 },
+        { label: 'Jun', value: 210 },
+        // ... more months
+      ],
+    },
+    {
+      name: 'Tariff Zone 2',
+      data: [
+        { label: 'Jan', value: 200 },
+        { label: 'Feb', value: 100 },
+        { label: 'Mar', value: 270 },
+        { label: 'Apr', value: 180 },
+        { label: 'May', value: 300 },
+        { label: 'Jun', value: 250 },
+        // ... more months
+      ],
+    },
+    {
+      name: 'Tariff Zone 3',
+      data: [
+        { label: 'Jan', value: 200 },
+        { label: 'Feb', value: 100 },
+        { label: 'Mar', value: 210 },
+        { label: 'Apr', value: 220 },
+        { label: 'May', value: 300 },
+        { label: 'Jun', value: 190 },
+        // ... more months
+      ],
+    },
+    {
+      name: 'Tariff Zone 4',
+      data: [
+        { label: 'Jan', value: 200 },
+        { label: 'Feb', value: 100 },
+        { label: 'Mar', value: 210 },
+        { label: 'Apr', value: 220 },
+        { label: 'May', value: 300 },
+        { label: 'Jun', value: 190 },
+        // ... more months
+      ],
+    },
+    {
+      name: 'Tariff Zone 5',
+      data: [
+        { label: 'Jan', value: 200 },
+        { label: 'Feb', value: 100 },
+        { label: 'Mar', value: 210 },
+        { label: 'Apr', value: 220 },
+        { label: 'May', value: 300 },
+        { label: 'Jun', value: 190 },
+        // ... more months
+      ],
+    },
+    {
+      name: 'Tariff Zone 6',
+      data: [
+        { label: 'Jan', value: 200 },
+        { label: 'Feb', value: 100 },
+        { label: 'Mar', value: 210 },
+        { label: 'Apr', value: 220 },
+        { label: 'May', value: 300 },
+        { label: 'Jun', value: 190 },
+        // ... more months
+      ],
+    },
+    // ... more tariff zones
+  ])
+
+  const valueFormatter = (value) => {
+    return `${value} kWh`
+  }
+
+  const handleSelectionChange = (selectedBars) => {
+    console.log('selectedBars', selectedBars)
+  }
+
+  const handleInputBlur = (payload) => {
+    const newVal = [...tariffZones.value].map((zone) => {
+      if (zone.name === payload.seriesName) {
+        zone.data = zone.data.map((item) => {
+          if (item.label === payload.label) {
+            item.value = payload.value
+          }
+          return item
+        })
+      }
+      return zone
+    })
+
+    tariffZones.value = newVal
+  }
+</script>
+
+<style lang="scss" scoped></style>

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 props.series" :key="series.name">
+      <LabelRow v-for="series in seriesData" :key="series.name">
         {{ series.name }}
       </LabelRow>
-      <TotalRow v-if="props.series.length && fieldMode === 'percentage'">
-        {{ $gettext ? $gettext('Total (%)') : 'Total (%)' }}
+      <TotalRow v-if="seriesData.length && fieldMode === 'percentage'">
+        {{ $gettext ? `${$gettext('Total')} (%)` : 'Total (%)' }}
       </TotalRow>
-      <TotalRow v-if="props.series.length">
-        {{ $gettext ? $gettext('Total (kWh)') : 'Total (kWh)' }}
+      <TotalRow v-if="seriesData.length">
+        {{ $gettext ? `${$gettext('Total')} (kWh)` : 'Total (kWh)' }}
       </TotalRow>
     </LabelsColumn>
 
@@ -18,27 +18,35 @@
     >
       <FieldsWrapper>
         <!-- For stacked bar chart -->
-        <template v-if="props.series.length">
+        <template v-if="seriesData.length">
           <InputRow
-            v-for="series in props.series"
+            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"
-              :key="index"
             >
               <InputNumber
                 :allow-negative="false"
+                :disabled="isInputsDisabled"
                 input-height="36px"
-                :number-precision="0"
+                :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)"
+                @input-blur="
+                  handleInputBlur($event, series.name, item.label, series.data)
+                "
                 @input-focus="handleInputFocus(series.name, item.label)"
               />
             </InputGroup>
@@ -47,16 +55,17 @@
           <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-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)"
@@ -67,17 +76,23 @@
           <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="calculateTotal(item.label)"
+                :value="calculateTotalValue(item.label)"
               />
             </InputGroup>
           </TotalInputRow>
@@ -88,17 +103,19 @@
           <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"
                 :min-decimals="0"
-                :number-precision="2"
+                :number-precision="0"
                 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>
@@ -107,11 +124,22 @@
       </FieldsWrapper>
     </FieldsContainer>
   </Container>
+  <InfoCardContainer
+    v-if="hasAnySegmentNotTotatTo100Percent && fieldMode === 'percentage'"
+    :yAxisWidth="yAxisWidth"
+  >
+    <InfoCard align-items="center" type="info">
+      <InfoCardBody>
+        {{ $gettext('load_profile_not_add_up_to_100') }}
+      </InfoCardBody>
+    </InfoCard>
+  </InfoCardContainer>
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { ref, computed, watchEffect } from 'vue'
   import InputNumber from '../inputs/inputNumber'
+  import InfoCard from '../infoCard'
 
   import {
     Container,
@@ -123,6 +151,8 @@
     InputRow,
     TotalInputRow,
     InputGroup,
+    InfoCardContainer,
+    InfoCardBody,
   } from './styles/bottomFields'
 
   const props = defineProps({
@@ -159,6 +189,47 @@
       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([
@@ -175,11 +246,13 @@
     emit('input-focus', { seriesName, label })
   }
 
-  const calculateTotal = (label) => {
-    return props.series.reduce((sum, series) => {
+  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) => {
@@ -190,34 +263,43 @@
       container.scrollLeft = scrollLeft
     }
   }
-  const getDisplayValue = (seriesData, label) => {
+
+  const calculateTotalOriginalValue = (label) => {
+    return seriesData.value.reduce((sum, series) => {
+      const value =
+        series.data.find((d) => d.label === label)?.originalValue || 0
+      return sum + value
+    }, 0)
+  }
+
+  const getDisplayValue = (data, label, shouldRound = true) => {
     if (props.fieldMode === 'absolute') {
-      return seriesData.find((d) => d.label === label)?.value || ''
+      return data.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
+    return data.find((d) => d.label === label)?.percentage
   }
 
   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
+    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) => {
+  const handleInputBlur = (_value, seriesName, label, currentSeriesData) => {
     let value = Number(_value)
 
-    if (props.fieldMode === 'percentage') {
-      const total = calculateTotal(label)
-      value = (value / 100) * total
-    }
-
-    const payload = seriesName ? { seriesName, label, value } : { label, value }
+    const payload = seriesName
+      ? {
+          seriesName,
+          label,
+          value,
+        }
+      : { label, value }
     emit('input-blur', payload)
     focusedInput.value = null
 
@@ -243,6 +325,12 @@
     }
   }
 
+  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 ? '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,21 @@ 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
+    }, 0)
+
+    const segments = item.segments.map((segment) => {
+      let valuePercentage = (segment.value / totalValue) * 100
+      segment.valuePercentage = Math.round(valuePercentage)
+
+      return segment
+    })
+    item.segments = segments
 
     tooltipData.value = { ...item }
 
@@ -41,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()