@eturnity/eturnity_reusable_components 8.19.8-EPDM-14690.4 → 8.19.8-EPDM-11600.11

package/src/components/barchart/index.vue

@@ -17,8 +17,8 @@
       />
     </ChartControlsWrapper>
     <GraphSection :height="height" :width="width">
-      <YAxis :height="height" :width="yAxisWidth">
-        <YAxisTitleWrapper v-if="yAxisTitle" :height="yAxisHeight">
+      <YAxis :width="yAxisWidth">
+        <YAxisTitleWrapper v-if="yAxisTitle">
           {{ yAxisTitle }}
         </YAxisTitleWrapper>
         <YAxisRow
@@ -30,15 +30,15 @@
             )
           "
         >
-          <YAxisLabel>{{ getYAxisLabel(label) }}</YAxisLabel>
+          <YAxisLabel>{{ label }}</YAxisLabel>
           <YAxisLine :y-axis-width="yAxisWidth" />
         </YAxisRow>
       </YAxis>
 
       <ScrollContainer
         :class="`chart-scroll-container-${chartId}`"
-        :height="height"
         :is-scrollable="isScrollable"
+        :height="height"
         @scroll="handleChartScroll"
       >
         <ChartContent
@@ -51,6 +51,11 @@
           <LoadingOverlay v-if="isLoading">
             <Spinner size="60px" />
           </LoadingOverlay>
+          <InfoCardContainer v-else-if="!isDataIssueMessageDisplayed">
+            <RCInfoCard align-items="center">
+              {{ dataIssueMessage }}
+            </RCInfoCard>
+          </InfoCardContainer>
           <SelectionBox
             v-if="selectionSize && isSelectionEnabled"
             :bar-width="barWidth"
@@ -64,19 +69,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 +101,7 @@
         :left="tooltipStyle.left"
         :top="tooltipStyle.top"
       >
-        <slot :item="tooltipData" name="tooltip"></slot>
+        <slot :item="tooltipData" name="tooltip" />
         <TooltipTextWrapper v-if="!slots.tooltip && tooltipData">
           <template v-if="!series.length">
             <TooltipText font-weight="500">{{ tooltipData.label }}</TooltipText>
@@ -128,11 +133,7 @@
                   :gradient-to="segment.gradientTo"
                 />
                 <TooltipText>
-                  {{
-                    fieldMode === 'absolute' && showPercentageOnTooltip
-                      ? `${segment.valuePercentage}%`
-                      : handleValueFormatter(segment.value)
-                  }}
+                  {{ handleValueFormatter(segment.value) }}
                 </TooltipText>
               </TooltipRow>
             </template>
@@ -163,9 +164,7 @@
       :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"
@@ -177,13 +176,13 @@
 </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 RCInfoCard from '../infoCard'
   import Spinner from '../spinner'
-  import { numberToString } from '../../helpers/numberConverter'
 
   import {
     useTooltip,
@@ -217,6 +216,7 @@
     TooltipGradientBox,
     ChartControlsWrapper,
     LoadingOverlay,
+    InfoCardContainer,
   } from './styles/chart'
 
   const props = defineProps({
@@ -253,6 +253,10 @@
       type: String,
       default: '',
     },
+    valueFormatter: {
+      type: Function,
+      default: null,
+    },
     isLegendShown: {
       type: Boolean,
       default: false,
@@ -299,14 +303,14 @@
       type: Boolean,
       default: false,
     },
-    showPercentageOnTooltip: {
-      type: Boolean,
-      default: false,
-    },
-    percentageErrorMessage: {
+    dataIssueMessage: {
       type: String,
       default: '',
     },
+    isDataIssueMessageDisplayed: {
+      type: Boolean,
+      default: false,
+    },
   })
 
   const generateChartId = () =>
@@ -389,40 +393,8 @@
   }
 
   const handleValueFormatter = (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,
-    })
+    return props.valueFormatter
+      ? props.valueFormatter(Math.round(value))
+      : value
   }
 </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: center;
+  align-items: flex-start;
 `
 
 export const TotalRow = styled(LabelRow)``
 
 export const FieldsContainer = styled.div`
   flex: 1;
+  overflow-x: auto;
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
@@ -59,22 +59,8 @@ export const InputGroup = styled('div', {
   barWidth: Number,
   isScrollable: Boolean,
 })`
-  ${(props) => (props.isScrollable ? 'min-width' : 'width')}: 70px;
+  ${(props) => (props.isScrollable ? 'min-width' : 'width')}:${(props) =>
+    props.barWidth}px;
   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

@@ -16,12 +16,9 @@ export const GraphSection = styled('div', { width: String, height: String })`
   display: flex;
 `
 
-export const YAxis = styled('div', { width: String, height: String })`
+export const YAxis = styled('div', { width: String })`
   width: ${(props) => props.width};
-  display: flex;
-  flex-direction: column;
   position: relative;
-  height: ${(props) => props.height};
 `
 
 export const YAxisRow = styled('div', { percentage: Number })`
@@ -57,18 +54,19 @@ export const YAxisLine = styled('div', { yAxisWidth: String })`
   transform: translateY(-50%);
 `
 
-export const YAxisTitleWrapper = styled('div', { height: String })`
-  position: absolute;
-  left: -66px;
-  top: ${(props) => props.height};
-  transform: rotate(-90deg) translateX(50%);
-  transform-origin: right;
+export const YAxisTitleWrapper = styled('div')`
   font-size: 12px;
-  color: ${(props) => props.theme.semanticColors.teal[600]};
-  display: flex;
-  align-items: center;
+  font-weight: 500;
+  color: ${(props) => props.theme.semanticColors.grey[700]};
   white-space: nowrap;
-  font-family: ${(props) => props.theme.fonts.mainFont};
+  height: 0;
+  width: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  transform: rotate(-90deg);
 `
 
 export const ScrollContainer = styled('div', {
@@ -127,7 +125,6 @@ export const BarWrapper = styled.div`
   height: 100%;
   width: 100%;
   position: relative;
-  overflow: hidden;
 `
 
 export const BarSegment = styled('div', {
@@ -271,3 +268,12 @@ export const LoadingOverlay = styled('div')`
   align-items: center;
   z-index: 2;
 `
+
+export const InfoCardContainer = styled('div')`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 500px;
+  z-index: 2;
+`

package/src/components/buttons/mainButton/index.vue

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

package/src/components/infoCard/index.vue

@@ -73,12 +73,7 @@
       type: {
         required: false,
         type: String,
-        default: 'info_simple',
-        validator(value) {
-          return ['info_simple', 'warning', 'error_minor', 'info'].includes(
-            value
-          )
-        },
+        default: 'info',
       },
       minWidth: {
         required: false,
@@ -117,11 +112,8 @@
       },
     },
     computed: {
-      isInfoSimple() {
-        // this property is used for tests
-        return this.type === 'info_simple'
-      },
       isInfo() {
+        // this property is used for tests
         return this.type === 'info'
       },
       isWarning() {
@@ -156,13 +148,9 @@
           stylesCollection.borderStyle = 'dashed'
           stylesCollection.borderColor = theme.colors.grey4
           stylesCollection.iconColor = theme.colors.red
-        } else if (this.isInfoSimple) {
+        } else {
           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.isInfoSimple).toBe(true)
+      expect(wrapper.vm.isInfo).toBe(true)
       expect(wrapper.vm.isWarning).toBe(false)
       expect(wrapper.vm.isErrorMinor).toBe(false)
 
       await wrapper.setProps({ type: 'warning' })
 
-      expect(wrapper.vm.isInfoSimple).toBe(false)
+      expect(wrapper.vm.isInfo).toBe(false)
       expect(wrapper.vm.isWarning).toBe(true)
       expect(wrapper.vm.isErrorMinor).toBe(false)
 
       await wrapper.setProps({ type: 'error_minor' })
 
-      expect(wrapper.vm.isInfoSimple).toBe(false)
+      expect(wrapper.vm.isInfo).toBe(false)
       expect(wrapper.vm.isWarning).toBe(false)
       expect(wrapper.vm.isErrorMinor).toBe(true)
     })

package/src/components/infoText/index.vue

@@ -15,40 +15,37 @@
         :is-disabled="isDisabled"
         :padding="padding"
       >
-        <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>
+        <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>
       </IconWrapper>
     </div>
-    <Teleport v-if="isVisible && !!text" to="body">
+    <Teleport v-if="isVisible" to="body">
       <TextWrapper data-test-id="info_text_wrapper" :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"
@@ -230,7 +227,7 @@
       },
       infoPosition: {
         required: false,
-        default: null,
+        default: 'bottom',
         type: String,
       },
       maxWidth: {
@@ -366,9 +363,7 @@
           { position: 'left', space: spaceLeft },
         ].sort((a, b) => b.space - a.space)
 
-        const bestPosition = props.infoPosition
-          ? props.infoPosition
-          : positions[0].position
+        const bestPosition = positions[0].position
 
         let top, left, arrowPosition
 

package/src/components/inputs/inputNumber/InputNumber.stories.js

@@ -3,15 +3,15 @@ import InputNumber from './index.vue'
 export default {
   title: 'InputNumber',
   component: InputNumber,
-  // argTypes: {},
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args) => ({
   // Components used in your story `template` are defined in the `components` object
   components: { InputNumber },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<input-number v-bind="$props" />',
+  setup() {
+    return { args: args }
+  },
+  template: `<InputNumber v-bind="args" />`,
 
   // import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
   // How to use: