Skip to content

Commit aac56cd

Browse files
graphierosgraphieros
committed
VueUiVerticalBar minor fix
1 parent 01ba529 commit aac56cd

File tree

3 files changed

+67
-67
lines changed

3 files changed

+67
-67
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-data-ui",
33
"private": false,
4-
"version": "1.9.75",
4+
"version": "1.9.76",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/components/vue-ui-vertical-bar.vue‎

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -661,71 +661,71 @@ defineExpose({
661661
<!-- DATA TABLE -->
662662
<div ref="tableContainer" class="vue-ui-vertical-bar-table">
663663
<div :style="`width:100%;margin-top:${mutableConfig.inside ? '48px' : ''}`" v-if="mutableConfig.showTable">
664+
<div style="width: 100%; container-type: inline-size;" :class="{'vue-ui-responsive': isResponsive}">
665+
<table class="vue-ui-data-table">
666+
<caption :style="{backgroundColor: verticalBarConfig.table.th.backgroundColor, color: verticalBarConfig.table.th.color, outline: verticalBarConfig.table.th.outline }" class="vue-ui-data-table__caption">
667+
{{ verticalBarConfig.style.chart.title.text }} <span v-if="verticalBarConfig.style.chart.title.subtitle.text">{{ verticalBarConfig.style.chart.title.subtitle.text }}</span>
668+
</caption>
669+
<thead data-cy="vertical-bar-thead">
670+
<tr role="row" data-cy="vertical-bar-thead-tr" :style="`background:${verticalBarConfig.table.th.backgroundColor};color:${verticalBarConfig.table.th.color}`">
671+
<th v-for="th in table.head" :style="`outline:${verticalBarConfig.table.th.outline}`">
672+
<div style="width:100%">
673+
{{ th }}
674+
</div>
675+
</th>
676+
</tr>
677+
<tr>
678+
<th :style="`background:${verticalBarConfig.table.th.backgroundColor};color:${verticalBarConfig.table.th.color};outline:${verticalBarConfig.table.th.outline}`"></th>
679+
<th :style="`background:${verticalBarConfig.table.th.backgroundColor};color:${verticalBarConfig.table.th.color};outline:${verticalBarConfig.table.th.outline};text-align:right;padding-right:5px;font-weight:bold`">∑ {{verticalBarConfig.table.td.prefix}}{{ isNaN(total) ? '' : total.toFixed(verticalBarConfig.table.td.roundingValue) }}{{verticalBarConfig.table.td.suffix}}</th>
680+
<th :style="`background:${verticalBarConfig.table.th.backgroundColor};color:${verticalBarConfig.table.th.color};outline:${verticalBarConfig.table.th.outline};text-align:right;padding-right:5px;font-weight:bold`">100%</th>
681+
<th :style="`background:${verticalBarConfig.table.th.backgroundColor};color:${verticalBarConfig.table.th.color};outline:${verticalBarConfig.table.th.outline}`"></th>
682+
<th :style="`background:${verticalBarConfig.table.th.backgroundColor};color:${verticalBarConfig.table.th.color};outline:${verticalBarConfig.table.th.outline}`"></th>
683+
<th :style="`background:${verticalBarConfig.table.th.backgroundColor};color:${verticalBarConfig.table.th.color};outline:${verticalBarConfig.table.th.outline}`"></th>
684+
<th :style="`background:${verticalBarConfig.table.th.backgroundColor};color:${verticalBarConfig.table.th.color};outline:${verticalBarConfig.table.th.outline}`"></th>
685+
</tr>
686+
</thead>
687+
<tbody>
688+
<tr v-for="(tr, i) in table.body" :class="{'vue-ui-data-table__tbody__row' : true, 'vue-ui-data-table__tbody__row-even': i % 2 === 0, 'vue-ui-data-table__tbody__row-odd': i % 2 !== 0}" :style="`background:${verticalBarConfig.table.td.backgroundColor};color:${verticalBarConfig.table.td.color}`">
689+
<td class="vue-ui-data-table__tbody__td" :style="`outline:${verticalBarConfig.table.td.outline};font-variant-numeric: tabular-nums;`" :data-cell="(table.head[0] ?? '')">
690+
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
691+
<span v-if="tr.color" :style="`color:${tr.color};margin-right:3px`">⬤</span><span>{{ tr.parentName }}</span>
692+
</div>
693+
</td>
694+
<td class="vue-ui-data-table__tbody__td" :style="`outline:${verticalBarConfig.table.td.outline}`" :data-cell="(table.head[1] ?? '')">
695+
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
696+
{{verticalBarConfig.table.td.prefix}}{{ ["", NaN, undefined].includes(tr.parentValue) ? '' : tr.parentValue.toFixed(verticalBarConfig.table.td.roundingValue) }}{{verticalBarConfig.table.td.suffix}}
697+
</div>
698+
</td>
699+
<td class="vue-ui-data-table__tbody__td" :style="`outline:${verticalBarConfig.table.td.outline}`" :data-cell="(table.head[2] ?? '')">
700+
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
701+
{{ ["", NaN, undefined].includes(tr.percentageToTotal) ? '' : `${(tr.percentageToTotal * 100).toFixed(verticalBarConfig.table.td.roundingPercentage)}%` }}
702+
</div>
703+
</td>
704+
<td class="vue-ui-data-table__tbody__td" :style="`outline:${verticalBarConfig.table.td.outline}`" :data-cell="(table.head[3] ?? '')">
705+
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
706+
{{ tr.childName }}
707+
</div>
708+
</td>
709+
<td class="vue-ui-data-table__tbody__td" :style="`outline:${verticalBarConfig.table.td.outline}`" :data-cell="(table.head[4] ?? '')">
710+
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
711+
{{verticalBarConfig.table.td.prefix}}{{ ["", NaN, undefined].includes(tr.childValue) ? '' : tr.childValue.toFixed(verticalBarConfig.table.td.roundingValue) }}{{verticalBarConfig.table.td.suffix}}
712+
</div>
713+
</td>
714+
<td class="vue-ui-data-table__tbody__td" :style="`outline:${verticalBarConfig.table.td.outline}`" :data-cell="(table.head[5] ?? '')">
715+
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
716+
{{ ["", NaN, undefined].includes(tr.childPercentageToParent) ? '' : `${(tr.childPercentageToParent * 100).toFixed(verticalBarConfig.table.td.roundingPercentage)}%` }}
717+
</div>
718+
</td>
719+
<td class="vue-ui-data-table__tbody__td" :style="`outline:${verticalBarConfig.table.td.outline}`" :data-cell="(table.head[6] ?? '')">
720+
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
721+
{{ ["", NaN, undefined].includes(tr.childPercentageToTotal) ? '' : `${(tr.childPercentageToTotal * 100).toFixed(verticalBarConfig.table.td.roundingPercentage)}%` }}
722+
</div>
723+
</td>
724+
</tr>
725+
</tbody>
726+
</table>
727+
</div>
664728
</div>
665-
<div style="width: 100%; container-type: inline-size;" :class="{'vue-ui-responsive': isResponsive}">
666-
<table class="vue-ui-data-table">
667-
<caption :style="{backgroundColor: verticalBarConfig.table.th.backgroundColor, color: verticalBarConfig.table.th.color, outline: verticalBarConfig.table.th.outline }" class="vue-ui-data-table__caption">
668-
{{ verticalBarConfig.style.chart.title.text }} <span v-if="verticalBarConfig.style.chart.title.subtitle.text">{{ verticalBarConfig.style.chart.title.subtitle.text }}</span>
669-
</caption>
670-
<thead data-cy="vertical-bar-thead">
671-
<tr role="row" data-cy="vertical-bar-thead-tr" :style="`background:${verticalBarConfig.table.th.backgroundColor};color:${verticalBarConfig.table.th.color}`">
672-
<th v-for="th in table.head" :style="`outline:${verticalBarConfig.table.th.outline}`">
673-
<div style="width:100%">
674-
{{ th }}
675-
</div>
676-
</th>
677-
</tr>
678-
<tr>
679-
<th :style="`background:${verticalBarConfig.table.th.backgroundColor};color:${verticalBarConfig.table.th.color};outline:${verticalBarConfig.table.th.outline}`"></th>
680-
<th :style="`background:${verticalBarConfig.table.th.backgroundColor};color:${verticalBarConfig.table.th.color};outline:${verticalBarConfig.table.th.outline};text-align:right;padding-right:5px;font-weight:bold`">∑ {{verticalBarConfig.table.td.prefix}}{{ isNaN(total) ? '' : total.toFixed(verticalBarConfig.table.td.roundingValue) }}{{verticalBarConfig.table.td.suffix}}</th>
681-
<th :style="`background:${verticalBarConfig.table.th.backgroundColor};color:${verticalBarConfig.table.th.color};outline:${verticalBarConfig.table.th.outline};text-align:right;padding-right:5px;font-weight:bold`">100%</th>
682-
<th :style="`background:${verticalBarConfig.table.th.backgroundColor};color:${verticalBarConfig.table.th.color};outline:${verticalBarConfig.table.th.outline}`"></th>
683-
<th :style="`background:${verticalBarConfig.table.th.backgroundColor};color:${verticalBarConfig.table.th.color};outline:${verticalBarConfig.table.th.outline}`"></th>
684-
<th :style="`background:${verticalBarConfig.table.th.backgroundColor};color:${verticalBarConfig.table.th.color};outline:${verticalBarConfig.table.th.outline}`"></th>
685-
<th :style="`background:${verticalBarConfig.table.th.backgroundColor};color:${verticalBarConfig.table.th.color};outline:${verticalBarConfig.table.th.outline}`"></th>
686-
</tr>
687-
</thead>
688-
<tbody>
689-
<tr v-for="(tr, i) in table.body" :class="{'vue-ui-data-table__tbody__row' : true, 'vue-ui-data-table__tbody__row-even': i % 2 === 0, 'vue-ui-data-table__tbody__row-odd': i % 2 !== 0}" :style="`background:${verticalBarConfig.table.td.backgroundColor};color:${verticalBarConfig.table.td.color}`">
690-
<td class="vue-ui-data-table__tbody__td" :style="`outline:${verticalBarConfig.table.td.outline};font-variant-numeric: tabular-nums;`" :data-cell="(table.head[0] ?? '')">
691-
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
692-
<span v-if="tr.color" :style="`color:${tr.color};margin-right:3px`">⬤</span><span>{{ tr.parentName }}</span>
693-
</div>
694-
</td>
695-
<td class="vue-ui-data-table__tbody__td" :style="`outline:${verticalBarConfig.table.td.outline}`" :data-cell="(table.head[1] ?? '')">
696-
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
697-
{{verticalBarConfig.table.td.prefix}}{{ ["", NaN, undefined].includes(tr.parentValue) ? '' : tr.parentValue.toFixed(verticalBarConfig.table.td.roundingValue) }}{{verticalBarConfig.table.td.suffix}}
698-
</div>
699-
</td>
700-
<td class="vue-ui-data-table__tbody__td" :style="`outline:${verticalBarConfig.table.td.outline}`" :data-cell="(table.head[2] ?? '')">
701-
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
702-
{{ ["", NaN, undefined].includes(tr.percentageToTotal) ? '' : `${(tr.percentageToTotal * 100).toFixed(verticalBarConfig.table.td.roundingPercentage)}%` }}
703-
</div>
704-
</td>
705-
<td class="vue-ui-data-table__tbody__td" :style="`outline:${verticalBarConfig.table.td.outline}`" :data-cell="(table.head[3] ?? '')">
706-
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
707-
{{ tr.childName }}
708-
</div>
709-
</td>
710-
<td class="vue-ui-data-table__tbody__td" :style="`outline:${verticalBarConfig.table.td.outline}`" :data-cell="(table.head[4] ?? '')">
711-
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
712-
{{verticalBarConfig.table.td.prefix}}{{ ["", NaN, undefined].includes(tr.childValue) ? '' : tr.childValue.toFixed(verticalBarConfig.table.td.roundingValue) }}{{verticalBarConfig.table.td.suffix}}
713-
</div>
714-
</td>
715-
<td class="vue-ui-data-table__tbody__td" :style="`outline:${verticalBarConfig.table.td.outline}`" :data-cell="(table.head[5] ?? '')">
716-
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
717-
{{ ["", NaN, undefined].includes(tr.childPercentageToParent) ? '' : `${(tr.childPercentageToParent * 100).toFixed(verticalBarConfig.table.td.roundingPercentage)}%` }}
718-
</div>
719-
</td>
720-
<td class="vue-ui-data-table__tbody__td" :style="`outline:${verticalBarConfig.table.td.outline}`" :data-cell="(table.head[6] ?? '')">
721-
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
722-
{{ ["", NaN, undefined].includes(tr.childPercentageToTotal) ? '' : `${(tr.childPercentageToTotal * 100).toFixed(verticalBarConfig.table.td.roundingPercentage)}%` }}
723-
</div>
724-
</td>
725-
</tr>
726-
</tbody>
727-
</table>
728-
</div>
729729
</div>
730730
</div>
731731
</template>

0 commit comments

Comments
 (0)