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

package/package.json

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

package/src/TestChart.vue

@@ -0,0 +1,234 @@
+<template>
+  <div
+    style="
+      margin-top: 100px;
+      margin-left: 80px;
+      padding-bottom: 100px;
+      display: flex;
+      flex-direction: column;
+    "
+  >
+    <!-- Simple bar chart -->
+    <BarChart
+      :data="monthlyData"
+      width="700px"
+      height="400px"
+      :valueFormatter="valueFormatter"
+      :barWidth="60"
+      :isScrollable="false"
+      chartControlsPosition="bottom"
+      :isBottomFieldsShown="true"
+      :isSelectionEnabled="true"
+      :selectionSize="3"
+      @selection-change="handleSelectionChange"
+    >
+    </BarChart>
+    <br />
+    <br />
+
+    <!-- Stacked bar chart -->
+    <BarChart
+      yAxisTitle="Energy (kWh)"
+      :data="monthLabels"
+      :series="tariffZones"
+      width="700px"
+      height="400px"
+      :barWidth="60"
+      :valueFormatter="valueFormatter"
+      :legendsItemPerRow="4"
+      :splitButtonOptions="options"
+      :selectedSplitButton="selectedTimeFrame"
+      :showPercentageOnTooltip="true"
+      :isBottomFieldsShown="true"
+      :isLegendShown="true"
+      @select-split-button="handleSelectSplitButton"
+      @input-blur="handleInputBlur"
+    >
+    </BarChart>
+
+    <!-- Stacked bar chart -->
+    <BarChart
+      :data="monthLabels"
+      :series="tariffZones"
+      width="700px"
+      height="400px"
+      :barWidth="60"
+      :valueFormatter="valueFormatter"
+      :legendsItemPerRow="4"
+      :isBottomFieldsShown="true"
+      :isLegendShown="false"
+      fieldMode="percentage"
+      @select-split-button="handleSelectSplitButton"
+      @input-blur="handleInputBlur"
+    >
+      <!-- <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) => {
+    console.log({ 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
+    })
+
+    console.log({ newVal })
+
+    tariffZones.value = newVal
+  }
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/barchart/BottomFields.vue

@@ -1,13 +1,13 @@
 <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'">
+      <TotalRow v-if="seriesData.length && fieldMode === 'percentage'">
         {{ $gettext ? $gettext('Total (%)') : 'Total (%)' }}
       </TotalRow>
-      <TotalRow v-if="props.series.length">
+      <TotalRow v-if="seriesData.length">
         {{ $gettext ? $gettext('Total (kWh)') : 'Total (kWh)' }}
       </TotalRow>
     </LabelsColumn>
@@ -18,9 +18,9 @@
     >
       <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"
           >
@@ -32,7 +32,14 @@
             >
               <InputNumber
                 :allow-negative="false"
+                :error-message="null"
                 input-height="36px"
+                :is-border-error-only="true"
+                :is-error="
+                  fieldMode === 'percentage'
+                    ? calculatePercentageTotal(item.label) !== 100
+                    : false
+                "
                 :number-precision="0"
                 :min-decimals="0"
                 text-align="center"
@@ -61,6 +68,7 @@
                 :unit-name="fieldMode === 'percentage' ? '%' : ''"
                 :value="calculatePercentageTotal(item.label)"
               />
+              {{ $c.log(calculatePercentageTotal(item.label)) }}
             </InputGroup>
           </TotalInputRow>
 
@@ -72,12 +80,19 @@
               :key="index"
             >
               <InputNumber
+                error-message="The entered values don’t add up to 100% so we will automatically scale the total kWh"
                 input-height="36px"
+                :is-border-error-only="true"
+                :is-error="
+                  fieldMode === 'percentage'
+                    ? calculatePercentageTotal(item.label) !== 100
+                    : false
+                "
                 :is-read-only="true"
                 :number-precision="2"
                 :min-decimals="0"
                 text-align="center"
-                :value="calculateTotal(item.label)"
+                :value="calculateTotalValue(item.label)"
               />
             </InputGroup>
           </TotalInputRow>
@@ -110,7 +125,8 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { ref, watch, onMounted } from 'vue'
+  import styled from 'vue3-styled-components'
   import InputNumber from '../inputs/inputNumber'
 
   import {
@@ -161,6 +177,43 @@
     },
   })
 
+  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]
+    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,
+      }))
+
+      newSeriesData.push({
+        name: item.name,
+        data,
+      })
+    })
+
+    seriesData.value = [...newSeriesData]
+  })
+
   const emit = defineEmits([
     'sync-scroll',
     'input-blur',
@@ -175,11 +228,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,30 +245,59 @@
       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) => {
     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
+    const value = data.find((d) => d.label === label)?.value || 0
+
+    const total = seriesData.value.reduce((sum, series) => {
+      const value =
+        series.data.find((d) => d.label === label)?.originalValue || 0
+      return sum + value
+    }, 0)
+
+    return Math.round((value / total) * 100)
   }
 
   const calculatePercentageTotal = (label) => {
-    return props.series.reduce((sum, series) => {
+    const originalTotal = seriesData.value.reduce((sum, series) => {
+      const originalValue =
+        series.data.find((d) => d.label === label)?.originalValue || 0
+      return sum + originalValue
+    }, 0)
+
+    const totalPercentage = seriesData.value.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 percentage = originalTotal
+        ? Number((value / originalTotal) * 100)
+        : 0
       return sum + percentage
     }, 0)
+
+    return Math.round(totalPercentage)
   }
 
   const handleInputBlur = (_value, seriesName, label) => {
     let value = Number(_value)
 
     if (props.fieldMode === 'percentage') {
-      const total = calculateTotal(label)
+      const total = seriesData.value.reduce((sum, series) => {
+        const value =
+          series.data.find((d) => d.label === label)?.originalValue || 0
+        return sum + value
+      }, 0)
+
       value = (value / 100) * total
     }
 

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

@@ -18,6 +18,18 @@ export function useTooltip(chartId, normalizedData) {
     }
     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 }
 
     const targetElement = series.length

package/src/components/barchart/index.vue

@@ -30,7 +30,7 @@
             )
           "
         >
-          <YAxisLabel>{{ label }}</YAxisLabel>
+          <YAxisLabel>{{ getYAxisLabel(label) }}</YAxisLabel>
           <YAxisLine :y-axis-width="yAxisWidth" />
         </YAxisRow>
       </YAxis>
@@ -128,7 +128,11 @@
                   :gradient-to="segment.gradientTo"
                 />
                 <TooltipText>
-                  {{ handleValueFormatter(segment.value) }}
+                  {{
+                    fieldMode === 'absolute' && showPercentageOnTooltip
+                      ? `${segment.valuePercentage}%`
+                      : handleValueFormatter(segment.value)
+                  }}
                 </TooltipText>
               </TooltipRow>
             </template>
@@ -171,12 +175,13 @@
 </template>
 
 <script setup>
-  import { useSlots, computed } from 'vue'
+  import { useSlots, computed, ref } 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,
@@ -296,6 +301,10 @@
       type: Boolean,
       default: false,
     },
+    showPercentageOnTooltip: {
+      type: Boolean,
+      default: false,
+    },
   })
 
   const generateChartId = () =>
@@ -378,8 +387,20 @@
   }
 
   const handleValueFormatter = (value) => {
-    return props.valueFormatter
-      ? props.valueFormatter(Math.round(value))
-      : value
+    value = numberToString({
+      value,
+      numberPrecision: 0,
+      minDecimals: 0,
+    })
+
+    return props.valueFormatter ? props.valueFormatter(value) : value
+  }
+
+  const getYAxisLabel = (label) => {
+    return numberToString({
+      value: label,
+      numberPrecision: 0,
+      minDecimals: 0,
+    })
   }
 </script>

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

@@ -28,7 +28,6 @@ export const TotalRow = styled(LabelRow)``
 
 export const FieldsContainer = styled.div`
   flex: 1;
-  overflow-x: auto;
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
@@ -63,4 +62,9 @@ export const InputGroup = styled('div', {
     props.barWidth}px;
   display: flex;
   justify-content: center;
+  position: relative;
+
+  input[readonly] {
+    border: 1px solid ${(props) => props.theme.colors.grey4} !important;
+  }
 `

package/src/components/inputs/inputNumber/index.vue

@@ -50,6 +50,7 @@
         :has-slot="hasSlot"
         :has-unit="unitName && !!unitName.length"
         :input-height="inputHeight"
+        :is-border-error-only="isBorderErrorOnly"
         :is-disabled="disabled"
         :is-error="isError"
         :is-interactive="isInteractive"
@@ -57,6 +58,7 @@
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
         :read-only="isReadOnly"
+        :readonly="isReadOnly"
         :show-arrow-controls="showArrowControls"
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
@@ -80,7 +82,7 @@
         >{{ unitName }}</UnitContainer
       >
       <IconWrapper
-        v-if="isError && !showLinearUnitName"
+        v-if="isError && !showLinearUnitName && !isBorderErrorOnly"
         :margin-right="showSelect ? selectWidth : 0"
         size="16px"
       >
@@ -134,7 +136,9 @@
         </ArrowButton>
       </ArrowControls>
     </InputWrapper>
-    <ErrorMessage v-if="isError">{{ errorMessage }}</ErrorMessage>
+    <ErrorMessage v-if="isError && errorMessage">{{
+      errorMessage
+    }}</ErrorMessage>
   </Container>
 </template>
 
@@ -205,6 +209,7 @@
     colorMode: String,
     showArrowControls: Boolean,
     readOnly: Boolean,
+    isBorderErrorOnly: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -236,16 +241,17 @@
       showLinearUnitName,
       colorMode,
       showArrowControls,
+      isBorderErrorOnly,
     }) =>
       showArrowControls
         ? '40px'
         : colorMode === 'transparent'
         ? '0'
         : slotSize
-        ? isError && !showLinearUnitName
+        ? isError && !showLinearUnitName && !isBorderErrorOnly
           ? 'calc(' + slotSize + ' + 24px)'
           : 'calc(' + slotSize + ' + 10px)'
-        : isError && !showLinearUnitName
+        : isError && !showLinearUnitName && !isBorderErrorOnly
         ? '24px'
         : '5px'};
     border-radius: ${(props) =>
@@ -708,6 +714,10 @@
         type: Boolean,
         default: false,
       },
+      isBorderErrorOnly: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {