Hi Team,
I have a vue component in which i am rendering the chart. It has a section name, section details and the chart. That’s how each row is rendered. I have attached the div content here and please refer the link for the screenshot. The chart horizontal rows are not aligned correctly to the section detail rows on the left. And if you look at the Blood Pressure section it is completely misaligned. can u plz help us in fixing this issue.
https://imgtr.ee/image/OHhax
template code
<template>
<div>
<div class=”sections-container”>
<div
v-for=”(section, index) in ewsTransformedChartData.sections”
:key=”index”
class=”section-container”
>
<div
:class=”{
‘section-heading’: true,
‘horizontal-heading’: section.sectionDetails.length === 1,
}”
>
{{ section.name }}
</div>
<div v-if=”section.sectionDetails.length > 1″ class=”section-details”>
<div>
<div
v-for=”(detail, detailIndex) in section.sectionDetails”
:key=”detailIndex”
class=”row-with-border”
>
{{ detail.name }}
</div>
</div>
</div>
<div class=”chart-container”>
<div
:id=”‘chartContainer-‘ + index”
:style=”{
height:
section.sectionDetails.length === 1
? ’50px’
: chartContainerHeight(section),
}”
></div>
</div>
</div>
</div>
<div
id=”scroll-container”
ref=”scrollContainer”
style=”
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
overflow: auto;
”
>
<div
id=”scroll-content”
ref=”scrollContent”
:style=”{ width: scrollContentWidth }”
></div>
</div>
</div>
</template>
How the chart container height is calculated
chartContainerHeight() {
// Calculate the height based on the number of rows in a section
return (section) => section.sectionDetails.length * 23.1 + “px”;
},
style that i have
.row-with-border {
border: 1px solid #ccc;
padding: 1px;
margin-bottom: 0px;
}
.sections-container {
display: flex;
flex-direction: column;
gap: -15px;
width: 95%;
}
.section-container {
position: relative;
margin-bottom: 2px;
font-size: 11px;
display: flex;
align-items: flex-start;
}
.section-heading {
position: absolute;
bottom: 0;
left: 0;
transform-origin: bottom left;
transform: rotate(-90deg) translateX(-100%);
width: 1%;
margin-bottom: 15px;
white-space: nowrap;
}
.horizontal-heading {
width: 15%;
transform: none;
position: relative;
display: inline-block;
margin: 0;
white-space: nowrap;
padding-top: 5px;
height: 70;
}
.section-details {
flex: 1;
max-width: 15%;
overflow: hidden;
padding-top: 10px;
}
.chart-container {
width: 81%;
margin-left: 0px;
padding-top: 0;
margin-top: 0;
}
.
