@eturnity/eturnity_reusable_components 8.16.9-qa-16-03-26.2 → 8.19.0

package/package.json

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

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 seriesData" :key="series.name">
+      <LabelRow v-for="series in props.series" :key="series.name">
         {{ series.name }}
       </LabelRow>
-      <TotalRow v-if="seriesData.length && fieldMode === 'percentage'">
+      <TotalRow v-if="props.series.length && fieldMode === 'percentage'">
         {{ $gettext ? $gettext('Total (%)') : 'Total (%)' }}
       </TotalRow>
-      <TotalRow v-if="seriesData.length">
+      <TotalRow v-if="props.series.length">
         {{ $gettext ? $gettext('Total (kWh)') : 'Total (kWh)' }}
       </TotalRow>
     </LabelsColumn>
@@ -18,9 +18,9 @@
     >
       <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"
           >
@@ -32,14 +32,7 @@
             >
               <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"
@@ -68,7 +61,6 @@
                 :unit-name="fieldMode === 'percentage' ? '%' : ''"
                 :value="calculatePercentageTotal(item.label)"
               />
-              {{ $c.log(calculatePercentageTotal(item.label)) }}
             </InputGroup>
           </TotalInputRow>
 
@@ -80,19 +72,12 @@
               :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="calculateTotalValue(item.label)"
+                :value="calculateTotal(item.label)"
               />
             </InputGroup>
           </TotalInputRow>
@@ -125,8 +110,7 @@
 </template>
 
 <script setup>
-  import { ref, watch, onMounted } from 'vue'
-  import styled from 'vue3-styled-components'
+  import { ref } from 'vue'
   import InputNumber from '../inputs/inputNumber'
 
   import {
@@ -177,43 +161,6 @@
     },
   })
 
-  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',
@@ -228,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) => {
@@ -245,59 +190,30 @@
       container.scrollLeft = scrollLeft
     }
   }
-
-  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) => {
+  const getDisplayValue = (seriesData, label) => {
     if (props.fieldMode === 'absolute') {
-      return data.find((d) => d.label === label)?.value || ''
+      return seriesData.find((d) => d.label === label)?.value || ''
     }
 
-    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 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 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) => {
+    return props.series.reduce((sum, series) => {
       const value = series.data.find((d) => d.label === label)?.value || 0
-      const percentage = originalTotal
-        ? Number((value / originalTotal) * 100)
-        : 0
+      const total = calculateTotal(label)
+      const percentage = total ? Number(((value / total) * 100).toFixed(0)) : 0
       return sum + percentage
     }, 0)
-
-    return Math.round(totalPercentage)
   }
 
   const handleInputBlur = (_value, seriesName, label) => {
     let value = Number(_value)
 
     if (props.fieldMode === 'percentage') {
-      const total = seriesData.value.reduce((sum, series) => {
-        const value =
-          series.data.find((d) => d.label === label)?.originalValue || 0
-        return sum + value
-      }, 0)
-
+      const total = calculateTotal(label)
       value = (value / 100) * total
     }
 

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

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

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

@@ -28,6 +28,7 @@ export const TotalRow = styled(LabelRow)``
 
 export const FieldsContainer = styled.div`
   flex: 1;
+  overflow-x: auto;
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
@@ -62,9 +63,4 @@ 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/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/inputs/inputNumber/index.vue

@@ -50,7 +50,6 @@
         :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"
@@ -58,12 +57,11 @@
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
         :read-only="isReadOnly"
-        :readonly="isReadOnly"
         :show-arrow-controls="showArrowControls"
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
         :text-align="textAlign"
-        :value="formattedValue"
+        :value="formatWithCurrency(value)"
         @blur="onInputBlur($event)"
         @focus="focusInput()"
         @input="onInput($event)"
@@ -77,12 +75,12 @@
 
       <UnitContainer
         v-if="unitName && showLinearUnitName && !hasSlot"
-        :has-length="hasLength"
+        :has-length="!!textInput.length"
         :is-error="isError"
         >{{ unitName }}</UnitContainer
       >
       <IconWrapper
-        v-if="isError && !showLinearUnitName && !isBorderErrorOnly"
+        v-if="isError && !showLinearUnitName"
         :margin-right="showSelect ? selectWidth : 0"
         size="16px"
       >
@@ -94,7 +92,7 @@
           :disabled="isSelectDisabled"
           :select-width="`${selectWidth}px`"
           :show-border="false"
-          @input-change="handleSelectChange"
+          @input-change="$emit('select-change', $event)"
         >
           <template #selector>
             <SelectText>{{ getSelectValue }}</SelectText>
@@ -136,9 +134,7 @@
         </ArrowButton>
       </ArrowControls>
     </InputWrapper>
-    <ErrorMessage v-if="isError && errorMessage">{{
-      errorMessage
-    }}</ErrorMessage>
+    <ErrorMessage v-if="isError">{{ errorMessage }}</ErrorMessage>
   </Container>
 </template>
 
@@ -209,7 +205,6 @@
     colorMode: String,
     showArrowControls: Boolean,
     readOnly: Boolean,
-    isBorderErrorOnly: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -241,17 +236,16 @@
       showLinearUnitName,
       colorMode,
       showArrowControls,
-      isBorderErrorOnly,
     }) =>
       showArrowControls
         ? '40px'
         : colorMode === 'transparent'
         ? '0'
         : slotSize
-        ? isError && !showLinearUnitName && !isBorderErrorOnly
+        ? isError && !showLinearUnitName
           ? 'calc(' + slotSize + ' + 24px)'
           : 'calc(' + slotSize + ' + 10px)'
-        : isError && !showLinearUnitName && !isBorderErrorOnly
+        : isError && !showLinearUnitName
         ? '24px'
         : '5px'};
     border-radius: ${(props) =>
@@ -463,18 +457,8 @@
     background-color: ${({ theme }) => theme.colors.grey4};
   `
 
-  const EVENT_TYPES = {
-    INPUT_FOCUS: 'input-focus',
-    INPUT_CHANGE: 'input-change',
-    INPUT_BLUR: 'input-blur',
-    PRESS_ENTER: 'on-enter-click',
-    INPUT_DRAG: 'on-input-drag',
-    SELECT_CHANGE: 'select-change',
-  }
-
   export default {
     name: 'InputNumber',
-    emits: [...Object.values(EVENT_TYPES)],
     components: {
       Container,
       InputContainer,
@@ -529,9 +513,10 @@
         default: '40px',
       },
       value: {
-        type: [String, Number],
         required: true,
         default: null,
+        validator: (val) =>
+          typeof val === 'string' || typeof val === 'number' || val === null,
       },
       clearInput: {
         type: Boolean,
@@ -714,17 +699,12 @@
         type: Boolean,
         default: false,
       },
-      isBorderErrorOnly: {
-        type: Boolean,
-        default: false,
-      },
     },
     data() {
       return {
+        textInput: '',
         isFocused: false,
         warningIcon: warningIcon,
-        inputValue: null,
-        enteredValue: null,
       }
     },
     computed: {
@@ -747,14 +727,6 @@
 
         return item ? item.label : '-'
       },
-      formattedValue() {
-        return this.isFocused
-          ? this.enteredValue
-          : this.formatWithCurrency(this.value)
-      },
-      hasLength() {
-        return this.formattedValue !== null && this.formattedValue.length > 0
-      },
     },
     watch: {
       focus(value) {
@@ -765,19 +737,30 @@
       clearInput: function (value) {
         if (value) {
           // If the value is typed, then we should clear the textInput on Continue
-          this.inputValue = ''
-          this.enteredValue = ''
+          this.textInput = ''
         }
       },
-      value: {
-        immediate: true,
-        handler(val) {
-          if (this.value !== this.inputValue && !Number.isNaN(this.value)) {
-            this.inputValue = this.value
-            this.enteredValue = Number(this.value.toFixed(this.numberPrecision))
-          }
-        },
-      },
+    },
+    created() {
+      if (this.value) {
+        this.textInput = numberToString({
+          value: this.value,
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals,
+        })
+      } else if (this.defaultNumber !== null) {
+        this.textInput = numberToString({
+          value: this.defaultNumber,
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals,
+        })
+      } else if (this.minNumber !== null) {
+        this.textInput = numberToString({
+          value: this.minNumber,
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals,
+        })
+      }
     },
     mounted() {
       if (this.focus) {
@@ -816,28 +799,29 @@
         }
       },
       onEnterPress() {
-        this.$emit(EVENT_TYPES.PRESS_ENTER)
+        this.$emit('on-enter-click')
         this.$refs.inputField1.$el.blur()
       },
-      onChangeHandler(value) {
-        if (isNaN(value) || value === '') {
-          value = this.defaultNumber
+      onChangeHandler(event) {
+        if (isNaN(event) || event === '') {
+          event = this.defaultNumber
             ? this.defaultNumber
             : this.minNumber || this.minNumber === 0
             ? this.minNumber
-            : value
+            : event
         }
         if (!this.allowNegative) {
-          value = Math.abs(value)
+          event = Math.abs(event)
         }
-        value = parseFloat(value)
+        event = parseFloat(event)
         // Need to return an integer rather than a string
-        return parseFloat(value)
+        this.$emit('input-change', event)
       },
-      onEvaluateCode(value) {
+      onEvaluateCode(event) {
         // function to perform math on the code
         // filter the string in case of any malicious content
-        let filtered = value.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
+        const val = event.target.value
+        let filtered = val.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
         filtered = filtered.split(/([-+*/()])/)
         let formatted = filtered.map((item) => {
           if (
@@ -895,32 +879,48 @@
         return array
       },
       onInput(event) {
-        console.log('onInput', event.target.value)
-        this.enteredValue = event.target.value
-        if (!this.isFocused || this.enteredValue === this.inputValue) {
+        if (!this.isFocused) {
           return
         }
+        if (event.target.value === '') {
+          this.$emit('on-input', '')
+        }
         let evaluatedVal
         try {
-          evaluatedVal = this.onEvaluateCode(String(this.enteredValue))
+          evaluatedVal = this.onEvaluateCode(event)
         } finally {
-          this.inputValue = this.onChangeHandler(evaluatedVal)
-
-          if (this.isFocused && typeof this.enteredValue !== 'number') {
-            this.$emit(EVENT_TYPES.INPUT_CHANGE, this.inputValue)
+          if (evaluatedVal && this.value != evaluatedVal) {
+            this.$emit('on-input', evaluatedVal)
           }
         }
         this.textInput = evaluatedVal
       },
       onInputBlur(e) {
         this.isFocused = false
-        if (!Number.isNaN(this.inputValue)) {
-          this.enteredValue = this.inputValue
+        let value = e.target.value
+        let evaluatedInput = this.onEvaluateCode(e)
+        this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
+        if ((evaluatedInput && value.length) || this.minNumber !== null) {
+          this.textInput = numberToString({
+            value:
+              evaluatedInput && value.length
+                ? evaluatedInput
+                : this.defaultNumber
+                ? this.defaultNumber
+                : this.minNumber,
+            numberPrecision: this.numberPrecision,
+            minDecimals: this.minDecimals,
+          })
         }
-        this.$emit(
-          EVENT_TYPES.INPUT_BLUR,
-          Number(this.onEvaluateCode(String(this.inputValue)))
-        )
+        let adjustedMinValue =
+          evaluatedInput && evaluatedInput.length
+            ? evaluatedInput
+            : this.defaultNumber
+            ? this.defaultNumber
+            : this.minNumber || this.minNumber === 0
+            ? this.minNumber
+            : ''
+        this.$emit('input-blur', adjustedMinValue)
       },
       focusInput() {
         if (this.disabled) {
@@ -930,7 +930,7 @@
         this.$nextTick(() => {
           this.$refs.inputField1.$el.select()
         })
-        this.$emit(EVENT_TYPES.INPUT_FOCUS, this.inputValue)
+        this.$emit('input-focus')
       },
       blurInput() {
         if (this.disabled) {
@@ -950,7 +950,7 @@
             : this.minNumber || this.minNumber === 0
             ? this.minNumber
             : ''
-        if (adjustedMinValue || adjustedMinValue === 0) {
+        if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
           let input = this.numberToStringEnabled
             ? numberToString({
                 value: adjustedMinValue,
@@ -963,8 +963,6 @@
           return input + ' ' + unit
         } else if (!adjustedMinValue && adjustedMinValue !== 0) {
           return ''
-        } else if (this.isFocused) {
-          return value
         } else {
           return this.numberToStringEnabled
             ? numberToString({
@@ -985,7 +983,14 @@
         e.preventDefault()
         let value = parseFloat(this.value || 0)
         value += parseFloat(this.interactionStep) * parseInt(e.movementX)
-        this.$emit(EVENT_TYPES.INPUT_DRAG, this.onChangeHandler(value))
+        this.$emit('on-input-drag', value)
+
+        this.textInput = numberToString({
+          value: value && value.length ? value : this.minNumber,
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals,
+        })
+        //this.value=value
       },
       stopInteract(e) {
         e.preventDefault()
@@ -993,9 +998,6 @@
         window.removeEventListener('mouseup', this.stopInteract, false)
         this.blurInput()
       },
-      handleSelectChange(value) {
-        this.$emit(EVENT_TYPES.SELECT_CHANGE, value)
-      },
     },
   }
 </script>

package/src/helpers/numberConverter.js

@@ -94,7 +94,7 @@ export const stringToNumber = ({
 
 export const numberToString = ({ value, numberPrecision, minDecimals }) => {
   const minimumRounding = minDecimals ? minDecimals : 0
-  value = !Number.isNaN(parseFloat(value)) ? parseFloat(value) : 0
+  value = parseFloat(value)
   return value.toLocaleString(langForLocaleString(), {
     minimumFractionDigits: minimumRounding, // removing this for now. Why do we need this to be a minimum amount?
     maximumFractionDigits:

package/src/TestChart.vue

@@ -1,234 +0,0 @@
-<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>