@eturnity/eturnity_reusable_components 8.22.5 → 8.22.7

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,7 +163,9 @@
       :data="data"
       :field-mode="fieldMode"
       :is-chart-controls-shown-in-bottom="isChartControlsShown('bottom')"
+      :is-inputs-disabled="isLoading"
       :is-scrollable="isScrollable"
+      :percentage-error-message="percentageErrorMessage"
       :series="series"
       :y-axis-width="yAxisWidth"
       @input-blur="handleInputBlur"
@@ -171,12 +177,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,
@@ -246,10 +253,6 @@
       type: String,
       default: '',
     },
-    valueFormatter: {
-      type: Function,
-      default: null,
-    },
     isLegendShown: {
       type: Boolean,
       default: false,
@@ -296,6 +299,14 @@
       type: Boolean,
       default: false,
     },
+    showPercentageOnTooltip: {
+      type: Boolean,
+      default: false,
+    },
+    percentageErrorMessage: {
+      type: String,
+      default: '',
+    },
   })
 
   const generateChartId = () =>
@@ -378,8 +389,40 @@
   }
 
   const handleValueFormatter = (value) => {
-    return props.valueFormatter
-      ? props.valueFormatter(Math.round(value))
-      : value
+    let formattedValue = value
+    if (value < 1000) {
+      formattedValue = numberToString({
+        value: formattedValue,
+        numberPrecision: 0,
+        minDecimals: 0,
+      })
+    } else if (value < 1000000) {
+      formattedValue = numberToString({
+        value: Number(formattedValue / 1000),
+        numberPrecision: 2,
+        minDecimals: 2,
+      })
+    } else {
+      formattedValue = numberToString({
+        value: Number(formattedValue / 1000000),
+        numberPrecision: 2,
+        minDecimals: 2,
+      })
+    }
+    if (value < 1000) {
+      return `${formattedValue} kWh`
+    } else if (value < 1000000) {
+      return `${formattedValue} MWh`
+    } else {
+      return `${formattedValue} GWh`
+    }
+  }
+
+  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 {
@@ -59,8 +59,22 @@ export const InputGroup = styled('div', {
   barWidth: Number,
   isScrollable: Boolean,
 })`
-  ${(props) => (props.isScrollable ? 'min-width' : 'width')}:${(props) =>
-    props.barWidth}px;
+  ${(props) => (props.isScrollable ? 'min-width' : 'width')}: 70px;
   display: flex;
   justify-content: center;
+  position: relative;
+
+  input[readonly] {
+    border: 1px solid ${(props) => props.theme.colors.grey4} !important;
+  }
+`
+
+export const InfoCardContainer = styled('div', { yAxisWidth: String })`
+  margin-left: ${(props) => props.yAxisWidth};
+  padding: 12px;
+  margin-top: 12px;
+`
+
+export const InfoCardBody = styled.div`
+  padding: 8px 0;
 `

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/buttons/mainButton/index.vue

@@ -240,6 +240,8 @@
         return this.isDisabled
           ? this.theme.mainButton[this.appTheme][this.type][this.variant]
               .disabled.textColor
+          : this.iconColor
+          ? this.iconColor
           : this.theme.mainButton[this.appTheme][this.type][this.variant]
               .default.textColor
       },

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/icon/index.vue

@@ -208,9 +208,11 @@
       !props.disableHover &&
       `
      &:hover svg path:not(.fix, .isStrokePath) {
-      ${`${props.fillType}: ${props.hoveredColor || props.color};`}
+      ${`${props.fillType}: ${
+        props.theme.colors[props.hoveredColor] || props.color
+      };`}
      &:hover svg isStrokePath:not(.fix) {
-      ${`stroke: ${props.hoveredColor || props.color};`}
+      ${`stroke: ${props.theme.colors[props.hoveredColor] || props.color};`}
     }
     &:hover + div {
       background-color: ${props.hoveredColor};

package/src/components/infoCard/index.vue

@@ -73,7 +73,12 @@
       type: {
         required: false,
         type: String,
-        default: 'info',
+        default: 'info_simple',
+        validator(value) {
+          return ['info_simple', 'warning', 'error_minor', 'info'].includes(
+            value
+          )
+        },
       },
       minWidth: {
         required: false,
@@ -112,8 +117,11 @@
       },
     },
     computed: {
-      isInfo() {
+      isInfoSimple() {
         // this property is used for tests
+        return this.type === 'info_simple'
+      },
+      isInfo() {
         return this.type === 'info'
       },
       isWarning() {
@@ -148,9 +156,13 @@
           stylesCollection.borderStyle = 'dashed'
           stylesCollection.borderColor = theme.colors.grey4
           stylesCollection.iconColor = theme.colors.red
-        } else {
+        } else if (this.isInfoSimple) {
           stylesCollection.borderStyle = 'dashed'
           stylesCollection.borderColor = theme.colors.grey4
+        } else {
+          stylesCollection.color = theme.semanticColors.teal[800]
+          stylesCollection.backgroundColor = theme.semanticColors.blue[300]
+          stylesCollection.iconColor = theme.semanticColors.teal[800]
         }
 
         return stylesCollection

package/src/components/infoCard/infoCard.spec.js

@@ -45,19 +45,19 @@ describe('RCInfoCard.vue', () => {
         },
       })
 
-      expect(wrapper.vm.isInfo).toBe(true)
+      expect(wrapper.vm.isInfoSimple).toBe(true)
       expect(wrapper.vm.isWarning).toBe(false)
       expect(wrapper.vm.isErrorMinor).toBe(false)
 
       await wrapper.setProps({ type: 'warning' })
 
-      expect(wrapper.vm.isInfo).toBe(false)
+      expect(wrapper.vm.isInfoSimple).toBe(false)
       expect(wrapper.vm.isWarning).toBe(true)
       expect(wrapper.vm.isErrorMinor).toBe(false)
 
       await wrapper.setProps({ type: 'error_minor' })
 
-      expect(wrapper.vm.isInfo).toBe(false)
+      expect(wrapper.vm.isInfoSimple).toBe(false)
       expect(wrapper.vm.isWarning).toBe(false)
       expect(wrapper.vm.isErrorMinor).toBe(true)
     })

package/src/components/infoText/index.vue

@@ -16,37 +16,40 @@
         :is-disabled="isDisabled"
         :padding="padding"
       >
-        <LabelWrapper
-          v-if="labelText && labelAlign === 'left'"
-          :color="iconColor || computedIconColor"
-          :size="labelSize"
-        >
-          {{ labelText }}
-        </LabelWrapper>
-        <Dot
-          v-if="type === 'dot'"
-          :color="dotColor"
-          data-test-id="infoText_dot"
-        />
-        <IconComponent
-          v-else-if="!noIcon"
-          :color="iconColor || computedIconColor"
-          :cursor="isDisabled ? 'not-allowed' : 'pointer'"
-          :disabled="isDisabled"
-          :hovered-color="iconColor || computedIconColor"
-          :name="iconName"
-          :size="size"
-        />
-        <LabelWrapper
-          v-if="labelText && labelAlign === 'right'"
-          :color="iconColor || computedIconColor"
-          :size="labelSize"
-        >
-          {{ labelText }}
-        </LabelWrapper>
+        <template v-if="!$slots.trigger">
+          <LabelWrapper
+            v-if="labelText && labelAlign === 'left'"
+            :color="iconColor || computedIconColor"
+            :size="labelSize"
+          >
+            {{ labelText }}
+          </LabelWrapper>
+          <Dot
+            v-if="type === 'dot'"
+            :color="dotColor"
+            data-test-id="infoText_dot"
+          />
+          <IconComponent
+            v-else-if="!noIcon"
+            :color="iconColor || computedIconColor"
+            :cursor="isDisabled ? 'not-allowed' : 'pointer'"
+            :disabled="isDisabled"
+            :hovered-color="iconColor || computedIconColor"
+            :name="iconName"
+            :size="size"
+          />
+          <LabelWrapper
+            v-if="labelText && labelAlign === 'right'"
+            :color="iconColor || computedIconColor"
+            :size="labelSize"
+          >
+            {{ labelText }}
+          </LabelWrapper>
+        </template>
+        <slot name="trigger"></slot>
       </IconWrapper>
     </div>
-    <Teleport v-if="isVisible" to="body">
+    <Teleport v-if="isVisible && !!text" to="body">
       <TextWrapper data-test-id="info_text_wrapper" :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"
@@ -228,7 +231,7 @@
       },
       infoPosition: {
         required: false,
-        default: 'bottom',
+        default: null,
         type: String,
       },
       maxWidth: {
@@ -369,7 +372,9 @@
           { position: 'left', space: spaceLeft },
         ].sort((a, b) => b.space - a.space)
 
-        const bestPosition = positions[0].position
+        const bestPosition = props.infoPosition
+          ? props.infoPosition
+          : positions[0].position
 
         let top, left, arrowPosition
 

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

@@ -30,7 +30,61 @@
       />
     </LabelWrapper>
     <InputWrapper>
+      <InputInfoText
+        v-if="!!inputInfoText"
+        info-position="bottom"
+        :text="inputInfoText"
+      >
+        <template #trigger>
+          <InputContainer
+            v-bind="$attrs"
+            ref="inputField1"
+            :align-items="alignItems"
+            :background-color="
+              colorMode === 'transparent' ? 'transparent' : backgroundColor
+            "
+            :border-color="
+              colorMode === 'transparent' && !borderColor
+                ? 'white'
+                : borderColor
+            "
+            :color-mode="colorMode"
+            :data-id="inputDataId"
+            :data-qa-id="dataQaId"
+            :disabled="disabled && !isDisabledStyledOnly"
+            :font-color="colorMode === 'transparent' ? 'white' : fontColor"
+            :font-size="fontSize"
+            :has-label-slot="hasLabelSlot"
+            :has-slot="hasSlot"
+            :has-unit="unitName && !!unitName.length"
+            :input-height="inputHeight"
+            :is-border-error-only="isBorderErrorOnly"
+            :is-disabled="disabled"
+            :is-error="isError"
+            :is-info-border="isInfoBorder"
+            :is-interactive="isInteractive"
+            :min-width="minWidth"
+            :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="formatWithCurrency(value)"
+            @blur="onInputBlur($event)"
+            @focus="focusInput()"
+            @input="onInput($event)"
+            @keydown.down="decrementValue"
+            @keydown.up="incrementValue"
+            @keyup.enter="onEnterPress"
+          />
+        </template>
+      </InputInfoText>
+
       <InputContainer
+        v-else
         v-bind="$attrs"
         ref="inputField1"
         :align-items="alignItems"
@@ -43,20 +97,23 @@
         :color-mode="colorMode"
         :data-id="inputDataId"
         :data-qa-id="dataQaId"
-        :disabled="disabled"
+        :disabled="disabled && !isDisabledStyledOnly"
         :font-color="colorMode === 'transparent' ? 'white' : fontColor"
         :font-size="fontSize"
         :has-label-slot="hasLabelSlot"
         :has-slot="hasSlot"
         :has-unit="unitName && !!unitName.length"
         :input-height="inputHeight"
+        :is-border-error-only="isBorderErrorOnly"
         :is-disabled="disabled"
         :is-error="isError"
+        :is-info-border="isInfoBorder"
         :is-interactive="isInteractive"
         :min-width="minWidth"
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
         :read-only="isReadOnly"
+        :readonly="isReadOnly"
         :show-arrow-controls="showArrowControls"
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
@@ -69,6 +126,7 @@
         @keydown.up="incrementValue"
         @keyup.enter="onEnterPress"
       />
+
       <SlotContainer v-if="hasSlot" :is-error="isError" :slot-size="slotSize">
         <slot></slot>
       </SlotContainer>
@@ -80,7 +138,7 @@
         >{{ unitName }}</UnitContainer
       >
       <IconWrapper
-        v-if="isError && !showLinearUnitName"
+        v-if="isError && !showLinearUnitName && !isBorderErrorOnly"
         :margin-right="showSelect ? selectWidth : 0"
         size="16px"
       >
@@ -134,7 +192,9 @@
         </ArrowButton>
       </ArrowControls>
     </InputWrapper>
-    <ErrorMessage v-if="isError">{{ errorMessage }}</ErrorMessage>
+    <ErrorMessage v-if="isError && errorMessage">{{
+      errorMessage
+    }}</ErrorMessage>
   </Container>
 </template>
 
@@ -205,6 +265,8 @@
     colorMode: String,
     showArrowControls: Boolean,
     readOnly: Boolean,
+    isBorderErrorOnly: Boolean,
+    isInfoBorder: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -217,7 +279,9 @@
 
   const InputContainer = styled('input', inputProps)`
     border: ${(props) =>
-      props.isError
+      props.isInfoBorder
+        ? '1px solid ' + props.theme.semanticColors.blue[500]
+        : props.isError
         ? '1px solid ' + props.theme.colors.red
         : props.noBorder
         ? 'none'
@@ -236,16 +300,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) =>
@@ -465,6 +530,9 @@
     INPUT_DRAG: 'on-input-drag',
     SELECT_CHANGE: 'select-change',
   }
+  const InputInfoText = styled(InfoText)`
+    width: 100%;
+  `
 
   export default {
     name: 'InputNumber',
@@ -490,6 +558,7 @@
       ArrowControls,
       ArrowButton,
       ArrowDivider,
+      InputInfoText,
     },
     inheritAttrs: false,
     props: {
@@ -709,6 +778,22 @@
         type: Boolean,
         default: false,
       },
+      isBorderErrorOnly: {
+        type: Boolean,
+        default: false,
+      },
+      isInfoBorder: {
+        type: Boolean,
+        default: false,
+      },
+      inputInfoText: {
+        type: String,
+        default: '',
+      },
+      isDisabledStyledOnly: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

package/src/components/pageTitle/index.vue

@@ -46,7 +46,6 @@
     color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
     font-weight: 600;
     font-size: ${(props) => (props.fontSize ? props.fontSize : '20px')};
-    text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
   `
 
   export default {

package/src/components/tag/proTag/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <RCButton
+    button-size="tiny"
+    icon="star"
+    icon-color="yellow"
+    text="PRO"
+    type="protag"
+    variant="main"
+  />
+</template>
+<script>
+  import RCButton from '../../buttons/mainButton'
+  export default {
+    name: 'ProTag',
+    components: {
+      RCButton,
+    },
+  }
+</script>