Skip to content

Commit 866a322

Browse files
graphierosgraphieros
committed
Migrated all remaining data tables to new system
1 parent f8ff9a9 commit 866a322

14 files changed

+514
-342
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.73",
4+
"version": "1.9.74",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4395,7 +4395,7 @@ const moodRadarConfig = ref({
43954395
VueUiVerticalBar
43964396
</template>
43974397
<template #info>
4398-
<BaseIcon name="chartTable" stroke="#ff6347"/>
4398+
<BaseIcon name="chartTable" stroke="#5f8bee"/>
43994399
<BaseIcon name="pdf" stroke="#5f8bee"/>
44004400
<BaseIcon name="image" stroke="#5f8bee"/>
44014401
<BaseIcon name="excel" stroke="#5f8bee"/>
@@ -4733,7 +4733,7 @@ const moodRadarConfig = ref({
47334733
VueUiChestnut
47344734
</template>
47354735
<template #info>
4736-
<BaseIcon name="chartTable" stroke="#ff6347"/>
4736+
<BaseIcon name="chartTable" stroke="#5f8bee"/>
47374737
<BaseIcon name="pdf" stroke="#5f8bee"/>
47384738
<BaseIcon name="image" stroke="#5f8bee"/>
47394739
<BaseIcon name="excel" stroke="#5f8bee"/>

‎src/atoms/DataTable.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,7 @@ onMounted(() => {
3333
})
3434
if(tableContainer.value) {
3535
observer.observe(tableContainer.value)
36-
}
37-
36+
}
3837
})
3938
4039
</script>
@@ -60,7 +59,7 @@ onMounted(() => {
6059

6160
<tbody>
6261
<tr v-for="(tr, i) in body" role="row" style="font-variant-numeric: tabular-nums;" :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="{backgroundColor: tdbg, color: tdc }">
63-
<td role="cell" v-for="(td, j) in tr" :data-cell="colNames[j].name || colNames[j]" :style="{ outline: tdo}" class="vue-ui-data-table__tbody__td">
62+
<td role="cell" v-for="(td, j) in tr" :data-cell="(colNames[j] && colNames[j].name ? colNames[j].name : '') || colNames[j] || ''" :style="{ outline: tdo}" class="vue-ui-data-table__tbody__td">
6463
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
6564
<svg height="12" width="12" v-if="td.color" viewBox="0 0 20 20" style="background: none;overflow: visible">
6665
<Shape

‎src/components/vue-ui-chestnut.vue‎

Lines changed: 188 additions & 103 deletions
Large diffs are not rendered by default.

‎src/components/vue-ui-heatmap.cy.js‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -61,34 +61,6 @@ describe('<VueUiHeatmap />', () => {
6161
.trigger('mouseout');
6262
});
6363

64-
cy.get(`[data-cy="heatmap-table-title"]`)
65-
.should('exist')
66-
.contains(`${fixture.config.style.title.text} : ${fixture.config.style.title.subtitle.text}`)
67-
68-
for (let i = 0; i < yLabels.length; i += 1) {
69-
cy.get(`[data-cy="heatmap-table-col-name-${i}"]`)
70-
.should('exist')
71-
.contains(yLabels[i])
72-
}
73-
74-
for (let i = 0; i < 5; i += 1) {
75-
cy.get(`[data-cy="heatmap-table-row-${i}"]`).then(($tr) => {
76-
cy.wrap($tr)
77-
.should('exist')
78-
.find('td')
79-
.should('have.length', yLabels.length + 1)
80-
.each(($td, index) => {
81-
if (index === 0) {
82-
cy.wrap($td)
83-
.contains(fixture.config.style.layout.dataLabels.xAxis.values[i])
84-
} else {
85-
cy.wrap($td)
86-
.contains(`${Number(fixture.dataset[index - 1].values[i].toFixed(fixture.config.table.td.roundingValue)).toLocaleString()}`)
87-
}
88-
})
89-
})
90-
}
91-
9264
cy.get(`[data-cy="user-options-summary"]`).click();
9365

9466
cy.get(`[data-cy="user-options-pdf"]`).click({ force: true});

‎src/components/vue-ui-heatmap.vue‎

Lines changed: 117 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { ref, computed, nextTick } from "vue";
2+
import { ref, computed, nextTick, onMounted } from "vue";
33
import { opacity, createUid, createCsvContent, downloadCsv } from "../lib";
44
import mainConfig from "../default_configs.json";
55
import pdf from "../pdf";
@@ -36,7 +36,9 @@ const isTooltip = ref(false);
3636
const tooltipContent = ref("");
3737
const hoveredCell = ref(undefined);
3838
const step = ref(0);
39-
39+
const tableContainer = ref(null);
40+
const isResponsive = ref(false);
41+
4042
const heatmapConfig = computed(() => {
4143
return useNestedProp({
4244
userConfig: props.config,
@@ -49,6 +51,21 @@ const mutableConfig = ref({
4951
showTable: heatmapConfig.value.table.show
5052
})
5153
54+
const breakpoint = computed(() => {
55+
return heatmapConfig.value.table.responsiveBreakpoint
56+
})
57+
58+
function observeTable() {
59+
const observer = new ResizeObserver((entries) => {
60+
entries.forEach(entry => {
61+
isResponsive.value = entry.contentRect.width < breakpoint.value;
62+
})
63+
})
64+
observer.observe(tableContainer.value)
65+
}
66+
67+
onMounted(observeTable)
68+
5269
const maxX = computed(() => {
5370
return Math.max(...props.dataset.flatMap(el => el.values.length));
5471
});
@@ -416,20 +433,13 @@ defineExpose({
416433
<div v-if="heatmapConfig.style.legend.show && (!mutableConfig.inside || isPrinting)" class="vue-ui-heatmap-legend" :style="`background:${heatmapConfig.style.legend.backgroundColor};color:${heatmapConfig.style.legend.color};font-size:${heatmapConfig.style.legend.fontSize}px;padding-bottom:12px;font-weight:${heatmapConfig.style.legend.bold ? 'bold' : ''};display:flex; flex-direction:row;gap:3px;align-items:center;justify-content:center;font-weight:${heatmapConfig.style.legend.bold ? 'bold':'normal'}`" >
417434
<span data-cy="heatmap-legend-min" style="text-align:right">{{ Number(minValue.toFixed(heatmapConfig.style.legend.roundingValue)).toLocaleString() }}</span>
418435
<svg viewBox="0 0 132 12" style="width: 300px">
419-
<rect v-for="(_,i) in 13"
420-
:x="i * 12"
421-
:y="0"
422-
:height="12"
423-
:width="12"
424-
:fill="heatmapConfig.style.layout.cells.colors.underlayer"
425-
/>
426-
<rect v-for="(_,i) in 13"
427-
:x="i * 12"
428-
:y="0"
429-
:height="12"
430-
:width="12"
431-
:fill="i < 5 ? `${heatmapConfig.style.layout.cells.colors.cold}${opacity[Math.round((1-(i / 5)) * 100)]}` : `${heatmapConfig.style.layout.cells.colors.hot}${opacity[Math.round((((i-5) / 5)) * 100)]}`"
432-
/>
436+
<defs>
437+
<linearGradient id="colorScale" x1="0%" y1="0%" x2="100%" y2="0%" >
438+
<stop offset="0%" :stop-color="heatmapConfig.style.layout.cells.colors.cold"/>
439+
<stop offset="100%" :stop-color="heatmapConfig.style.layout.cells.colors.hot"/>
440+
</linearGradient>
441+
</defs>
442+
<rect x="0" y="0" height="12" width="132" fill="url(#colorScale)"/>
433443
</svg>
434444
<span data-cy="heatmap-legend-max" style="text-align:left">{{ Number(maxValue.toFixed(heatmapConfig.style.legend.roundingValue)).toLocaleString() }}</span>
435445
</div>
@@ -444,40 +454,41 @@ defineExpose({
444454
/>
445455

446456
<!-- DATA TABLE -->
447-
<div :style="`${isPrinting ? '' : 'max-height:400px'};overflow:auto;width:100%;margin-top:${mutableConfig.inside ? '48px' : ''}`" v-if="mutableConfig.showTable">
448-
<table>
449-
<thead>
450-
<tr data-cy="heatmap-table-title" v-if="heatmapConfig.style.title.text">
451-
<th :colspan="dataset.length +1" :style="`background:${heatmapConfig.table.th.backgroundColor};color:${heatmapConfig.table.th.color};outline:${heatmapConfig.table.th.outline}`">
452-
<span>{{ heatmapConfig.style.title.text }}</span>
453-
<span v-if="heatmapConfig.style.title.subtitle.text">
454-
: {{ heatmapConfig.style.title.subtitle.text }}
455-
</span>
456-
</th>
457-
</tr>
458-
<tr>
459-
<th :style="`background:${heatmapConfig.table.th.backgroundColor};color:${heatmapConfig.table.th.color};outline:${heatmapConfig.table.th.outline};padding-right:6px`"></th>
460-
<th align="right" :style="`background:${heatmapConfig.table.th.backgroundColor};color:${heatmapConfig.table.th.color};outline:${heatmapConfig.table.th.outline};padding-right:6px`" v-for="(th,i) in dataset" :data-cy="`heatmap-table-col-name-${i}`">
461-
{{ th.name }}
462-
</th>
463-
</tr>
464-
</thead>
465-
<tbody>
466-
<tr v-for="(tr, i) in dataLabels.xLabels" :data-cy="`heatmap-table-row-${i}`">
467-
<td :data-cy="`heatmap-table-row-name-${i}`" :style="`background:${heatmapConfig.table.td.backgroundColor};color:${heatmapConfig.table.td.color};outline:${heatmapConfig.table.td.outline}`">
468-
{{ tr }}
469-
</td>
470-
<td v-for="(trData, j) in dataset" :style="`background:${heatmapConfig.table.td.backgroundColor};color:${heatmapConfig.table.td.color};outline:${heatmapConfig.table.td.outline}`">
471-
{{ isNaN(trData.values[i]) ? '-' : Number(trData.values[i].toFixed(heatmapConfig.table.td.roundingValue)).toLocaleString() }}
472-
</td>
473-
</tr>
474-
</tbody>
475-
</table>
457+
<div ref="tableContainer" class="vue-ui-heatmap-table">
458+
<div :style="`${isPrinting ? '' : 'max-height:400px'};overflow:auto;width:100%;margin-top:${mutableConfig.inside ? '48px' : ''}`" v-if="mutableConfig.showTable" :class="{'vue-ui-responsive' : isResponsive}">
459+
<table class="vue-ui-data-table">
460+
<caption :style="`backgroundColor:${heatmapConfig.table.th.backgroundColor};color:${heatmapConfig.table.th.color};outline:${heatmapConfig.table.th.outline}`">
461+
{{ heatmapConfig.style.title.text }} <span v-if="heatmapConfig.style.title.subtitle.text">{{ heatmapConfig.style.title.subtitle.text }}</span>
462+
</caption>
463+
<thead>
464+
<tr role="row" :style="`background:${heatmapConfig.table.th.backgroundColor};color:${heatmapConfig.table.th.color}`">
465+
<th :style="`outline:${heatmapConfig.table.th.outline};padding-right:6px`"></th>
466+
<th align="right" :style="`outline:${heatmapConfig.table.th.outline};padding-right:6px`" v-for="(th,i) in dataset" :data-cy="`heatmap-table-col-name-${i}`">
467+
{{ th.name }}
468+
</th>
469+
</tr>
470+
</thead>
471+
<tbody>
472+
<tr role="row" v-for="(tr, i) in dataLabels.xLabels" :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:${heatmapConfig.table.td.backgroundColor};color:${heatmapConfig.table.td.color}`">
473+
<td :data-cell="heatmapConfig.table.colNames.xAxis" class="vue-ui-data-table__tbody__td" :data-cy="`heatmap-table-row-name-${i}`" :style="`outline:${heatmapConfig.table.td.outline}`">
474+
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
475+
{{ tr }}
476+
</div>
477+
</td>
478+
<td class="vue-ui-data-table__tbody__td" v-for="(trData, j) in dataset" :data-cell="dataset[j].name" :style="`outline:${heatmapConfig.table.td.outline}`">
479+
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
480+
{{ isNaN(trData.values[i]) ? '-' : Number(trData.values[i].toFixed(heatmapConfig.table.td.roundingValue)).toLocaleString() }}
481+
</div>
482+
</td>
483+
</tr>
484+
</tbody>
485+
</table>
486+
</div>
476487
</div>
477488
</div>
478489
</template>
479490

480-
<style scoped>
491+
<style scoped lang="scss">
481492
.vue-ui-heatmap *{
482493
transition: unset;
483494
}
@@ -522,22 +533,12 @@ defineExpose({
522533
z-index:1;
523534
}
524535
525-
.vue-ui-heatmap table {
536+
.vue-ui-heatmap-table {
526537
width: 100%;
527-
border-collapse:collapse;
538+
max-height: 300px;
528539
overflow: auto;
529-
max-height: 400px;
530-
}
531-
.vue-ui-heatmap table td {
532-
text-align:right;
533-
padding-right: 6px;
534-
font-variant-numeric: tabular-nums;
535-
}
536-
.vue-ui-heatmap table th {
537-
position: sticky;
538-
top:0;
539-
font-weight: 400;
540-
user-select: none;
540+
margin-top: 24px;
541+
position: relative;
541542
}
542543
.vue-data-ui-fullscreen--on {
543544
height: 80% !important;
@@ -548,4 +549,60 @@ defineExpose({
548549
.vue-data-ui-wrapper-fullscreen {
549550
overflow: auto;
550551
}
552+
553+
.vue-ui-data-table thead {
554+
position: sticky;
555+
top:0;
556+
font-weight: 400;
557+
user-select: none;
558+
}
559+
560+
table {
561+
width: 100%;
562+
padding: 1rem;
563+
border-collapse:collapse;
564+
}
565+
566+
caption,
567+
th,
568+
td {
569+
padding: 0.5rem;
570+
font-variant-numeric: tabular-nums;
571+
}
572+
573+
caption {
574+
font-size: 1.3rem;
575+
font-weight: 700;
576+
}
577+
578+
.vue-ui-responsive {
579+
th {
580+
display: none;
581+
}
582+
td {
583+
display: grid;
584+
gap: 0.5rem;
585+
grid-template-columns: repeat(2, 1fr);
586+
padding: 0.5rem 1rem;
587+
outline: none !important;
588+
text-align: left;
589+
}
590+
tr {
591+
outline: v-bind(tdo);
592+
}
593+
594+
td:first-child {
595+
padding-top: 1rem;
596+
}
597+
598+
td:last-child {
599+
padding-bottom: 1rem;
600+
}
601+
602+
td::before {
603+
content: attr(data-cell) ": ";
604+
font-weight: 700;
605+
text-transform: capitalize;
606+
}
607+
}
551608
</style>

‎src/components/vue-ui-molecule.vue‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -540,22 +540,22 @@ defineExpose({
540540
:parent="moleculeChart"
541541
:content="tooltipContent"
542542
/>
543-
544-
<DataTable
545-
v-if="mutableConfig.showTable"
546-
:colNames="dataTable.colNames"
547-
:head="dataTable.head"
548-
:body="dataTable.body"
549-
:config="dataTable.config"
550-
:title="`${moleculeConfig.style.chart.title.text}${moleculeConfig.style.chart.title.subtitle.text ? ` : ${moleculeConfig.style.chart.title.subtitle.text}` : ''}`"
551-
>
552-
<template #th="{th}">
553-
<div v-html="th" style="display:flex;align-items:center"></div>
554-
</template>
555-
<template #td="{td}">
556-
{{ td.name || td }}
557-
</template>
558-
</DataTable>
543+
<div :style="`${isPrinting ? '' : 'max-height:400px'};overflow:auto;width:100%;margin-top:48px`" v-if="mutableConfig.showTable">
544+
<DataTable
545+
:colNames="dataTable.colNames"
546+
:head="dataTable.head"
547+
:body="dataTable.body"
548+
:config="dataTable.config"
549+
:title="`${moleculeConfig.style.chart.title.text}${moleculeConfig.style.chart.title.subtitle.text ? ` : ${moleculeConfig.style.chart.title.subtitle.text}` : ''}`"
550+
>
551+
<template #th="{th}">
552+
<div v-html="th" style="display:flex;align-items:center"></div>
553+
</template>
554+
<template #td="{td}">
555+
{{ td.name || td }}
556+
</template>
557+
</DataTable>
558+
</div>
559559
</div>
560560
</template>
561561

‎src/components/vue-ui-scatter.cy.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ describe('<VueUiScatter />', () => {
114114
})
115115
}
116116

117-
cy.wait(100)
117+
cy.wait(500)
118118
cy.get(`[data-cy="scatter-plot-0-0"]`)
119119
.trigger('mouseover');
120120

0 commit comments

Comments
 (0)