Skip to content

Commit cf7baee

Browse files
graphierosgraphieros
committed
Improvement - Remove artificial padding top when no title is provided
1 parent c19a05f commit cf7baee

31 files changed

+436
-48
lines changed

‎src/components/vue-ui-age-pyramid.vue‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ const step = ref(0);
6060
const agePyramid = ref(null);
6161
const chartTitle = ref(null);
6262
const source = ref(null);
63+
const noTitle = ref(null);
6364
const titleStep = ref(0);
6465
const tableStep = ref(0);
6566
@@ -115,7 +116,8 @@ function prepareChart() {
115116
const { width, height } = useResponsive({
116117
chart: agePyramid.value,
117118
title: FINAL_CONFIG.value.style.title.text ? chartTitle.value : null,
118-
source: source.value
119+
source: source.value,
120+
noTitle: noTitle.value
119121
});
120122
svg.value.width = width;
121123
svg.value.height = height;
@@ -131,6 +133,10 @@ const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
131133
fileName: FINAL_CONFIG.value.style.title.text || 'vue-ui-age-pyramid'
132134
});
133135
136+
const hasOptionsNoTitle = computed(() => {
137+
return FINAL_CONFIG.value.userOptions.show && !FINAL_CONFIG.value.style.title.text;
138+
});
139+
134140
const mutableConfig = ref({
135141
showTable: FINAL_CONFIG.value.table.show,
136142
showTooltip: FINAL_CONFIG.value.style.tooltip.show
@@ -424,7 +430,7 @@ defineExpose({
424430
</script>
425431

426432
<template>
427-
<div :class="`vue-ui-age-pyramid ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`" ref="agePyramid" :id="`vue-ui-age-pyramid_${uid}`" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;${!FINAL_CONFIG.style.title.text ? 'padding-top:36px' : ''};background:${FINAL_CONFIG.style.backgroundColor};${FINAL_CONFIG.responsive ? 'height:100%' : ''}`">
433+
<div :class="`vue-ui-age-pyramid ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`" ref="agePyramid" :id="`vue-ui-age-pyramid_${uid}`" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;background:${FINAL_CONFIG.style.backgroundColor};${FINAL_CONFIG.responsive ? 'height:100%' : ''}`">
428434
<PenAndPaper
429435
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
430436
:parent="agePyramid"
@@ -434,6 +440,13 @@ defineExpose({
434440
@close="toggleAnnotator"
435441
/>
436442

443+
<div
444+
ref="noTitle"
445+
v-if="hasOptionsNoTitle"
446+
class="vue-data-ui-no-title-space"
447+
:style="`height:36px; width: 100%;background:transparent`"
448+
/>
449+
437450
<div ref="chartTitle" v-if="FINAL_CONFIG.style.title.text" :style="`width:100%;background:transparent`">
438451
<Title
439452
:key="`title_${titleStep}`"

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -329,6 +329,10 @@ const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
329329
fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-bullet'
330330
});
331331
332+
const hasOptionsNoTitle = computed(() => {
333+
return FINAL_CONFIG.value.userOptions.show && !FINAL_CONFIG.value.style.chart.title.text;
334+
});
335+
332336
const isFullscreen = ref(false)
333337
function toggleFullscreen(state) {
334338
isFullscreen.value = state;
@@ -368,6 +372,14 @@ defineExpose({
368372
:active="isAnnotator"
369373
@close="toggleAnnotator"
370374
/>
375+
376+
<div
377+
ref="noTitle"
378+
v-if="hasOptionsNoTitle"
379+
class="vue-data-ui-no-title-space"
380+
:style="`height:36px; width: 100%;background:transparent`"
381+
/>
382+
371383
<div ref="chartTitle" v-if="FINAL_CONFIG.style.chart.title.text" :style="`width:100%;background:transparent;`">
372384
<Title
373385
lineHeight="1.3rem"

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

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ const chartTitle = ref(null);
6464
const chartLegend = ref(null);
6565
const chartSlicer = ref(null);
6666
const source = ref(null);
67+
const noTitle = ref(null);
6768
const slicerStep = ref(0);
6869
const tableStep = ref(0);
6970
const titleStep = ref(0);
@@ -136,7 +137,8 @@ function prepareChart() {
136137
title: FINAL_CONFIG.value.style.title.text ? chartTitle.value : null,
137138
slicer: chartSlicer.value,
138139
legend: chartLegend.value,
139-
source: source.value
140+
source: source.value,
141+
noTitle: noTitle.value
140142
});
141143
svg.value.width = width;
142144
svg.value.height = height;
@@ -170,6 +172,10 @@ const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
170172
fileName: FINAL_CONFIG.value.style.title.text || 'vue-ui-candlestick'
171173
});
172174
175+
const hasOptionsNoTitle = computed(() => {
176+
return FINAL_CONFIG.value.userOptions.show && !FINAL_CONFIG.value.style.title.text;
177+
});
178+
173179
const mutableConfig = ref({
174180
showTable: FINAL_CONFIG.value.table.show,
175181
showTooltip: FINAL_CONFIG.value.style.tooltip.show
@@ -473,7 +479,7 @@ defineExpose({
473479
</script>
474480

475481
<template>
476-
<div ref="candlestickChart" :class="`vue-ui-candlestick ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${FINAL_CONFIG.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`position:relative;font-family:${FINAL_CONFIG.style.fontFamily}; text-align:center;${!FINAL_CONFIG.style.title.text ? 'padding-top:36px' : ''};background:${FINAL_CONFIG.style.backgroundColor}; ${FINAL_CONFIG.responsive ? 'height: 100%' : ''}`" :id="`vue-ui-candlestick_${uid}`">
482+
<div ref="candlestickChart" :class="`vue-ui-candlestick ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${FINAL_CONFIG.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`position:relative;font-family:${FINAL_CONFIG.style.fontFamily}; text-align:center;background:${FINAL_CONFIG.style.backgroundColor}; ${FINAL_CONFIG.responsive ? 'height: 100%' : ''}`" :id="`vue-ui-candlestick_${uid}`">
477483
<PenAndPaper
478484
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
479485
:parent="candlestickChart"
@@ -483,6 +489,13 @@ defineExpose({
483489
@close="toggleAnnotator"
484490
/>
485491

492+
<div
493+
ref="noTitle"
494+
v-if="hasOptionsNoTitle"
495+
class="vue-data-ui-no-title-space"
496+
:style="`height:36px; width: 100%;background:transparent`"
497+
/>
498+
486499
<div ref="chartTitle" v-if="FINAL_CONFIG.style.title.text" :style="`width:100%;background:transparent`">
487500
<!-- TITLE AS DIV -->
488501
<Title

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,10 @@ const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
9696
fileName: FINAL_CONFIG.value.style.chart.layout.title.text || 'vue-ui-chestnut'
9797
});
9898
99+
const hasOptionsNoTitle = computed(() => {
100+
return FINAL_CONFIG.value.userOptions.show;
101+
});
102+
99103
const customPalette = computed(() => {
100104
return convertCustomPalette(FINAL_CONFIG.value.customPalette);
101105
})
@@ -516,7 +520,7 @@ defineExpose({
516520
:class="`vue-ui-chestnut ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`"
517521
ref="chestnutChart"
518522
:id="`vue-ui-chestnut_${uid}`"
519-
:style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;padding-top:36px;background:${FINAL_CONFIG.style.chart.backgroundColor}`"
523+
:style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;background:${FINAL_CONFIG.style.chart.backgroundColor}`"
520524
>
521525
<PenAndPaper
522526
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
@@ -527,6 +531,13 @@ defineExpose({
527531
@close="toggleAnnotator"
528532
/>
529533

534+
<div
535+
ref="noTitle"
536+
v-if="hasOptionsNoTitle"
537+
class="vue-data-ui-no-title-space"
538+
:style="`height:36px; width: 100%;background:transparent`"
539+
/>
540+
530541
<!-- OPTIONS -->
531542
<UserOptions
532543
ref="details"

‎src/components/vue-ui-donut-evolution.vue‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ const hoveredDatapoint = ref(null);
108108
const isFixed = ref(false);
109109
const fixedDatapoint = ref(null);
110110
const donutEvolutionChart = ref(null);
111+
const noTitle = ref(null);
111112
const step = ref(0);
112113
const slicerStep = ref(0);
113114
const titleStep = ref(0);
@@ -160,6 +161,10 @@ const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
160161
fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-donut-evolution'
161162
});
162163
164+
const hasOptionsNoTitle = computed(() => {
165+
return FINAL_CONFIG.value.userOptions.show && !FINAL_CONFIG.value.style.chart.title.text;
166+
});
167+
163168
const customPalette = computed(() => {
164169
return convertCustomPalette(FINAL_CONFIG.value.customPalette);
165170
});
@@ -518,7 +523,7 @@ defineExpose({
518523
</script>
519524
520525
<template>
521-
<div ref="donutEvolutionChart" :class="`vue-ui-donut-evolution ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${FINAL_CONFIG.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;${!FINAL_CONFIG.style.chart.title.text ? 'padding-top:36px' : ''};background:${FINAL_CONFIG.style.chart.backgroundColor}`" :id="uid">
526+
<div ref="donutEvolutionChart" :class="`vue-ui-donut-evolution ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${FINAL_CONFIG.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;background:${FINAL_CONFIG.style.chart.backgroundColor}`" :id="uid">
522527
<PenAndPaper
523528
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
524529
:parent="donutEvolutionChart"
@@ -527,6 +532,14 @@ defineExpose({
527532
:active="isAnnotator"
528533
@close="toggleAnnotator"
529534
/>
535+
536+
<div
537+
ref="noTitle"
538+
v-if="hasOptionsNoTitle"
539+
class="vue-data-ui-no-title-space"
540+
:style="`height:36px; width: 100%;background:transparent`"
541+
/>
542+
530543
<div v-if="FINAL_CONFIG.style.chart.title.text" :style="`width:100%;background:transparent;padding-bottom:24px`" @mouseleave="leave">
531544
<!-- TITLE AS DIV -->
532545
<Title

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

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ const chartTitle = ref(null);
7171
const chartLegend = ref(null);
7272
const resizeObserver = ref(null);
7373
const source = ref(null);
74+
const noTitle = ref(null);
7475
const titleStep = ref(0);
7576
const tableStep = ref(0);
7677
const legendStep = ref(0);
@@ -112,7 +113,8 @@ function prepareChart() {
112113
chart: donutChart.value,
113114
title: FINAL_CONFIG.value.style.chart.title.text ? chartTitle.value : null,
114115
legend: FINAL_CONFIG.value.style.chart.legend.show ? chartLegend.value : null,
115-
source: source.value
116+
source: source.value,
117+
noTitle: noTitle.value
116118
});
117119
svg.value.width = width;
118120
svg.value.height = height;
@@ -171,6 +173,10 @@ const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
171173
fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-donut'
172174
});
173175
176+
const hasOptionsNoTitle = computed(() => {
177+
return FINAL_CONFIG.value.userOptions.show && !FINAL_CONFIG.value.style.chart.title.text;
178+
});
179+
174180
const customPalette = computed(() => {
175181
return convertCustomPalette(FINAL_CONFIG.value.customPalette);
176182
});
@@ -644,7 +650,7 @@ defineExpose({
644650
</script>
645651

646652
<template>
647-
<div ref="donutChart" :class="`vue-ui-donut ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${FINAL_CONFIG.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; ${FINAL_CONFIG.responsive ? 'height:100%;' : ''} text-align:center;${!FINAL_CONFIG.style.chart.title.text ? 'padding-top:36px' : ''};background:${FINAL_CONFIG.style.chart.backgroundColor}`" :id="`donut__${uid}`">
653+
<div ref="donutChart" :class="`vue-ui-donut ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''} ${FINAL_CONFIG.useCssAnimation ? '' : 'vue-ui-dna'}`" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; ${FINAL_CONFIG.responsive ? 'height:100%;' : ''} text-align:center;background:${FINAL_CONFIG.style.chart.backgroundColor}`" :id="`donut__${uid}`">
648654
<PenAndPaper
649655
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
650656
:parent="donutChart"
@@ -654,7 +660,14 @@ defineExpose({
654660
@close="toggleAnnotator"
655661
/>
656662
<slot name="userConfig"></slot>
657-
663+
664+
<div
665+
ref="noTitle"
666+
v-if="hasOptionsNoTitle"
667+
class="vue-data-ui-no-title-space"
668+
:style="`height:36px; width: 100%;background:transparent`"
669+
/>
670+
658671
<div ref="chartTitle" v-if="FINAL_CONFIG.style.chart.title.text" :style="`width:100%;background:transparent;padding-bottom:24px`">
659672
<!-- TITLE AS DIV -->
660673
<Title

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

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ const dumbbellChart = ref(null);
6464
const chartTitle = ref(null);
6565
const chartLegend = ref(null);
6666
const source = ref(null);
67+
const noTitle = ref(null);
6768
const titleStep = ref(0);
6869
const tableStep = ref(0);
6970
const legendStep = ref(0);
@@ -142,7 +143,8 @@ function prepareChart() {
142143
chart: dumbbellChart.value,
143144
title: FINAL_CONFIG.value.style.chart.title.text ? chartTitle.value : null,
144145
legend: FINAL_CONFIG.value.style.chart.legend.show ? chartLegend.value : null,
145-
source: source.value
146+
source: source.value,
147+
noTitle: noTitle.value
146148
});
147149
baseWidth.value = width;
148150
baseRowHeight.value = height / props.dataset.length;
@@ -163,6 +165,10 @@ const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
163165
fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-dumbbell'
164166
});
165167
168+
const hasOptionsNoTitle = computed(() => {
169+
return FINAL_CONFIG.value.userOptions.show && !FINAL_CONFIG.value.style.chart.title.text;
170+
});
171+
166172
const mutableConfig = ref({
167173
showTable: FINAL_CONFIG.value.table.show,
168174
});
@@ -419,7 +425,7 @@ defineExpose({
419425
</script>
420426

421427
<template>
422-
<div ref="dumbbellChart" :class="`vue-ui-dumbbell ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;${!FINAL_CONFIG.style.chart.title.text ? 'padding-top:36px' : ''};background:${FINAL_CONFIG.style.chart.backgroundColor};${FINAL_CONFIG.responsive ? 'height:100%': ''}`" :id="`dumbbell_${uid}`">
428+
<div ref="dumbbellChart" :class="`vue-ui-dumbbell ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`" :style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;background:${FINAL_CONFIG.style.chart.backgroundColor};${FINAL_CONFIG.responsive ? 'height:100%': ''}`" :id="`dumbbell_${uid}`">
423429
<PenAndPaper
424430
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
425431
:parent="dumbbellChart"
@@ -429,6 +435,13 @@ defineExpose({
429435
@close="toggleAnnotator"
430436
/>
431437

438+
<div
439+
ref="noTitle"
440+
v-if="hasOptionsNoTitle"
441+
class="vue-data-ui-no-title-space"
442+
:style="`height:36px; width: 100%;background:transparent`"
443+
/>
444+
432445
<div ref="chartTitle" v-if="FINAL_CONFIG.style.chart.title.text" :style="`width:100%;background:transparent;padding-bottom:24px`">
433446
<Title
434447
:key="`title_${titleStep}`"

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,10 @@ const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
111111
fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-flow'
112112
});
113113
114+
const hasOptionsNoTitle = computed(() => {
115+
return FINAL_CONFIG.value.userOptions.show && !FINAL_CONFIG.value.style.chart.title.text;
116+
});
117+
114118
const customPalette = computed(() => {
115119
return convertCustomPalette(FINAL_CONFIG.value.customPalette)
116120
});
@@ -481,7 +485,7 @@ defineExpose({
481485
<div
482486
ref="flowChart"
483487
:class="`vue-ui-flow ${isFullscreen ? 'vue-data-ui-wrapper-fullscreen' : ''}`"
484-
:style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;${!FINAL_CONFIG.style.chart.title.text ? 'padding-top:36px' : ''};background:${FINAL_CONFIG.style.chart.backgroundColor}`"
488+
:style="`font-family:${FINAL_CONFIG.style.fontFamily};width:100%; text-align:center;background:${FINAL_CONFIG.style.chart.backgroundColor}`"
485489
:id="`flow_${uid}`"
486490
>
487491
<PenAndPaper
@@ -493,6 +497,13 @@ defineExpose({
493497
@close="toggleAnnotator"
494498
/>
495499

500+
<div
501+
ref="noTitle"
502+
v-if="hasOptionsNoTitle"
503+
class="vue-data-ui-no-title-space"
504+
:style="`height:36px; width: 100%;background:transparent`"
505+
/>
506+
496507
<div v-if="FINAL_CONFIG.style.chart.title.text" :style="`width:100%;background:transparent;padding-bottom:24px`">
497508
<Title
498509
:key="`title_${titleStep}`"

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,10 @@ const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
132132
fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-galaxy'
133133
});
134134
135+
const hasOptionsNoTitle = computed(() => {
136+
return FINAL_CONFIG.value.userOptions.show && !FINAL_CONFIG.value.style.chart.title.text;
137+
});
138+
135139
const customPalette = computed(() => {
136140
return convertCustomPalette(FINAL_CONFIG.value.customPalette);
137141
})
@@ -440,6 +444,13 @@ defineExpose({
440444
@close="toggleAnnotator"
441445
/>
442446

447+
<div
448+
ref="noTitle"
449+
v-if="hasOptionsNoTitle"
450+
class="vue-data-ui-no-title-space"
451+
:style="`height:36px; width: 100%;background:transparent`"
452+
/>
453+
443454
<div v-if="FINAL_CONFIG.style.chart.title.text" :style="`width:100%;background:transparent;padding-bottom:24px`">
444455
<Title
445456
:key="`title_${titleStep}`"

0 commit comments

Comments
 (0)