@eturnity/eturnity_reusable_components 8.16.9-EPDM-6306.1 → 8.16.9-EPDM-14690.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.16.9-EPDM-6306.1",
+  "version": "8.16.9-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,37 @@
     >
       <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"
+                :error-message="null"
                 input-height="36px"
-                :number-precision="0"
+                :is-border-error-only="true"
+                :is-error="
+                  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 +57,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 +78,24 @@
           <TotalInputRow>
             <InputGroup
               v-for="(item, index) in props.data"
+              :key="index"
               :bar-width="barWidth"
               :is-scrollable="isScrollable"
-              :key="index"
             >
               <InputNumber
+                :error-message="$gettext('load_profile_not_add_up_to_100')"
                 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"
+                :number-precision="2"
                 text-align="center"
-                :value="calculateTotal(item.label)"
+                :value="calculateTotalValue(item.label)"
               />
             </InputGroup>
           </TotalInputRow>
@@ -88,17 +106,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"
                 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>
@@ -110,7 +130,8 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { ref, watch, watchEffect, onMounted } from 'vue'
+  import styled from 'vue3-styled-components'
   import InputNumber from '../inputs/inputNumber'
 
   import {
@@ -159,6 +180,61 @@
       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,
+  //     }
+  //   })
+  // })
+
+  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.length
+          ? currentSeriesData[itemIndex].data[dIndex].originalValue
+          : d.value,
+      }))
+
+      newSeriesData.push({
+        name: item.name,
+        data,
+      })
+    })
+
+    seriesData.value = [...newSeriesData]
   })
 
   const emit = defineEmits([
@@ -175,11 +251,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 +268,74 @@
       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
+    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 shouldRound ? (value / total) * 100 : (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) => {
+  const handleInputBlur = (_value, seriesName, label, currentSeriesData) => {
     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
     }
 
-    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
 
@@ -247,6 +365,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,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()

package/src/components/barchart/index.vue

@@ -17,7 +17,7 @@
       />
     </ChartControlsWrapper>
     <GraphSection :height="height" :width="width">
-      <YAxis :width="yAxisWidth" :height="height">
+      <YAxis :height="height" :width="yAxisWidth">
         <YAxisTitleWrapper v-if="yAxisTitle" :height="yAxisHeight">
           {{ yAxisTitle }}
         </YAxisTitleWrapper>
@@ -30,15 +30,15 @@
             )
           "
         >
-          <YAxisLabel>{{ label }}</YAxisLabel>
+          <YAxisLabel>{{ getYAxisLabel(label) }}</YAxisLabel>
           <YAxisLine :y-axis-width="yAxisWidth" />
         </YAxisRow>
       </YAxis>
 
       <ScrollContainer
         :class="`chart-scroll-container-${chartId}`"
-        :is-scrollable="isScrollable"
         :height="height"
+        :is-scrollable="isScrollable"
         @scroll="handleChartScroll"
       >
         <ChartContent
@@ -64,19 +64,19 @@
           <BarsContainer>
             <BarGroup
               v-for="(item, index) in normalizedData"
+              :key="index"
               :bar-width="barWidth"
               class="bar-group"
               :is-scrollable="isScrollable"
-              :key="index"
             >
               <BarWrapper>
                 <BarSegment
                   v-for="(segment, segIndex) in item.segments"
+                  :key="segIndex"
                   class="bar-segment"
                   :gradient-from="getSegmentGradient(index, segment).from"
                   :gradient-to="getSegmentGradient(index, segment).to"
                   :height="`${segment.percentage}%`"
-                  :key="segIndex"
                   :z-index="item.segments.length - segIndex"
                   @mouseenter="showTooltip(item, $event, series)"
                   @mouseleave="hideTooltip"
@@ -96,7 +96,7 @@
         :left="tooltipStyle.left"
         :top="tooltipStyle.top"
       >
-        <slot :item="tooltipData" name="tooltip" />
+        <slot :item="tooltipData" name="tooltip"></slot>
         <TooltipTextWrapper v-if="!slots.tooltip && tooltipData">
           <template v-if="!series.length">
             <TooltipText font-weight="500">{{ tooltipData.label }}</TooltipText>
@@ -128,7 +128,11 @@
                   :gradient-to="segment.gradientTo"
                 />
                 <TooltipText>
-                  {{ handleValueFormatter(segment.value) }}
+                  {{
+                    fieldMode === 'absolute' && showPercentageOnTooltip
+                      ? `${segment.valuePercentage}%`
+                      : handleValueFormatter(segment.value)
+                  }}
                 </TooltipText>
               </TooltipRow>
             </template>
@@ -159,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"
@@ -171,12 +176,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 +302,10 @@
       type: Boolean,
       default: false,
     },
+    showPercentageOnTooltip: {
+      type: Boolean,
+      default: false,
+    },
   })
 
   const generateChartId = () =>
@@ -378,8 +388,14 @@
   }
 
   const handleValueFormatter = (value) => {
-    return props.valueFormatter
-      ? props.valueFormatter(Math.round(value))
-      : value
+    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

@@ -17,18 +17,18 @@ export const LabelsColumn = styled('div', { width: String })`
 
 export const LabelRow = styled.div`
   height: 32px;
+  padding-top: 5px;
   font-size: 12px;
   font-weight: 500;
   color: ${(props) => props.theme.semanticColors.teal[600]};
   display: flex;
-  align-items: flex-start;
+  align-items: center;
 `
 
 export const TotalRow = styled(LabelRow)``
 
 export const FieldsContainer = styled.div`
   flex: 1;
-  overflow-x: auto;
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
@@ -63,4 +63,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/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', {

package/src/components/errorMessage/index.vue

@@ -19,7 +19,7 @@
     background: ${(props) => props.theme.colors.red};
     padding: 10px;
     width: max-content;
-    max-width: 100%;
+    /* max-width: 100%; */
     min-width: min-content;
     font-size: 11px;
     font-weight: 400;

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,11 +58,12 @@
         :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)"
@@ -75,12 +77,12 @@
 
       <UnitContainer
         v-if="unitName && showLinearUnitName && !hasSlot"
-        :has-length="hasLength"
+        :has-length="!!textInput.length"
         :is-error="isError"
         >{{ unitName }}</UnitContainer
       >
       <IconWrapper
-        v-if="isError && !showLinearUnitName"
+        v-if="isError && !showLinearUnitName && !isBorderErrorOnly"
         :margin-right="showSelect ? selectWidth : 0"
         size="16px"
       >
@@ -92,7 +94,7 @@
           :disabled="isSelectDisabled"
           :select-width="`${selectWidth}px`"
           :show-border="false"
-          @input-change="handleSelectChange"
+          @input-change="$emit('select-change', $event)"
         >
           <template #selector>
             <SelectText>{{ getSelectValue }}</SelectText>
@@ -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) =>
@@ -457,18 +463,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,
@@ -708,13 +704,16 @@
         type: Boolean,
         default: false,
       },
+      isBorderErrorOnly: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
+        textInput: '',
         isFocused: false,
         warningIcon: warningIcon,
-        inputValue: null,
-        enteredValue: null,
       }
     },
     computed: {
@@ -737,14 +736,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) {
@@ -755,19 +746,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) {
@@ -806,28 +808,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 (
@@ -885,32 +888,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) {
@@ -920,7 +939,7 @@
         this.$nextTick(() => {
           this.$refs.inputField1.$el.select()
         })
-        this.$emit(EVENT_TYPES.INPUT_FOCUS, this.inputValue)
+        this.$emit('input-focus')
       },
       blurInput() {
         if (this.disabled) {
@@ -940,7 +959,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,
@@ -953,8 +972,6 @@
           return input + ' ' + unit
         } else if (!adjustedMinValue && adjustedMinValue !== 0) {
           return ''
-        } else if (this.isFocused) {
-          return value
         } else {
           return this.numberToStringEnabled
             ? numberToString({
@@ -975,7 +992,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()
@@ -983,9 +1007,6 @@
         window.removeEventListener('mouseup', this.stopInteract, false)
         this.blurInput()
       },
-      handleSelectChange(value) {
-        this.$emit(EVENT_TYPES.SELECT_CHANGE, value)
-      },
     },
   }
 </script>

package/src/components/pageTitle/index.vue

@@ -1,8 +1,8 @@
 <template>
   <TitleWrap data-test-id="page_wrapper" :has-info-text="!!infoText">
     <TitleText
-      data-test-id="page_title_text"
       :color="color"
+      data-test-id="page_title_text"
       :font-size="fontSize"
       :uppercase="uppercase"
     >
@@ -10,8 +10,8 @@
     </TitleText>
     <InfoText
       v-if="!!infoText"
-      data-test-id="page_title_tooltip"
       :align-arrow="infoAlign"
+      data-test-id="page_title_tooltip"
       :text="infoText"
     />
   </TitleWrap>
@@ -44,9 +44,8 @@
   const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
   const TitleText = styled('span', titleAttrs)`
     color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
-    font-weight: bold;
+    font-weight: 500;
     font-size: ${(props) => (props.fontSize ? props.fontSize : '20px')};
-    text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
   `
 
   export default {

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: