@eturnity/eturnity_reusable_components 8.19.8-EPDM-11600.12 → 8.19.8-EPDM-11600.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.19.8-EPDM-11600.12",
+  "version": "8.19.8-EPDM-11600.14",
   "files": [
     "dist",
     "src"

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

@@ -68,7 +68,10 @@ export function useAxisCalculations(props, maxValue) {
     // Generate labels including 0 up to numSteps
     const numSteps = Math.floor(max / stepSize)
     for (let i = 0; i <= numSteps; i++) {
-      labels.push(i * stepSize)
+      const stepValue = i * stepSize
+      const roundedStepValueString = stepValue.toFixed(2)
+      const roundedStepValueNumber = parseFloat(roundedStepValueString)
+      labels.push(roundedStepValueNumber)
     }
 
     // Ensure we always have at least 2 labels (0 and max)

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

@@ -26,10 +26,13 @@ export const YAxisRow = styled('div', { percentage: Number })`
   align-items: center;
   width: 100%;
   position: absolute;
-  height: 0;
+  height: 1px;
   bottom: ${(props) =>
     Number.isFinite(props.percentage) ? `${props.percentage}%` : '0'};
-  transform: translateY(50%);
+  ${(props) =>
+    Number.isFinite(props.percentage) && props.percentage === 100
+      ? 'transform: translateY(1px)'
+      : ''};
 `
 
 export const YAxisLabel = styled.div`
@@ -47,11 +50,9 @@ export const YAxisLine = styled('div', { yAxisWidth: String })`
   right: -10px;
   left: calc(${(props) => props.yAxisWidth} - 10px);
   height: 1px;
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: ${(props) => props.theme.semanticColors.grey[400]};
   width: 12px;
   z-index: 0;
-  top: 50%;
-  transform: translateY(-50%);
 `
 
 export const YAxisTitleWrapper = styled('div')`
@@ -88,6 +89,8 @@ export const ChartContent = styled('div', {
   height: ${(props) => props.height};
   position: relative;
   background: ${(props) => props.theme.semanticColors.grey[100]};
+  border-bottom: ${(props) =>
+    `1px solid ${props.theme.semanticColors.grey[400]}`};
   ${(props) =>
     props.isScrollable
       ? ` min-width: ${props.totalBars * (props.barWidth + 8) + 24}px;`
@@ -176,7 +179,7 @@ export const XAxisLabelHighlight = styled.div`
 export const XAxisLine = styled.div`
   width: 1px;
   height: 6px;
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: ${(props) => props.theme.semanticColors.grey[400]};
   position: absolute;
   bottom: -6px;
   left: 50%;
@@ -274,6 +277,7 @@ export const InfoCardContainer = styled('div')`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  width: 500px;
   max-width: 500px;
   z-index: 2;
 `