Skip to content

Commit 774d311

Browse files
graphierosgraphieros
committed
Improvement - Add #chart-background slot support
1 parent 2a05225 commit 774d311

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+675
-29
lines changed

‎src/components/vue-ui-3d-bar.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -604,6 +604,20 @@ defineExpose({
604604
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" data-cy="3d-bar-svg" :viewBox="`0 0 ${svg.absoluteWidth} ${svg.height}`" :style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`">
605605
<PackageVersion />
606606

607+
<!-- BACKGROUND SLOT -->
608+
<foreignObject
609+
v-if="$slots['chart-background']"
610+
:x="0"
611+
:y="0"
612+
:width="svg.absoluteWidth"
613+
:height="svg.height"
614+
:style="{
615+
pointerEvents: 'none'
616+
}"
617+
>
618+
<slot name="chart-background"/>
619+
</foreignObject>
620+
607621
<!-- DEFS -->
608622
<defs>
609623
<radialGradient :id="`gradient_top${uid}`">

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -527,6 +527,20 @@ defineExpose({
527527
<!-- CHART -->
528528
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" :viewBox="`0 0 ${svg.width <= 0 ? 10 : svg.width} ${svg.height <= 0 ? 10 : svg.height}`" :style="`max-width:100%;overflow:visible;background:transparent;color:${FINAL_CONFIG.style.color}`" >
529529
<PackageVersion />
530+
531+
<!-- BACKGROUND SLOT -->
532+
<foreignObject
533+
v-if="$slots['chart-background']"
534+
:x="drawingArea.left"
535+
:y="drawingArea.top"
536+
:width="drawingArea.width"
537+
:height="drawingArea.height"
538+
:style="{
539+
pointerEvents: 'none'
540+
}"
541+
>
542+
<slot name="chart-background"/>
543+
</foreignObject>
530544

531545
<defs>
532546
<linearGradient

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -455,6 +455,20 @@ defineExpose({
455455
>
456456
<PackageVersion />
457457

458+
<!-- BACKGROUND SLOT -->
459+
<foreignObject
460+
v-if="$slots['chart-background']"
461+
:x="0"
462+
:y="0"
463+
:width="svg.width"
464+
:height="svg.height"
465+
:style="{
466+
pointerEvents: 'none'
467+
}"
468+
>
469+
<slot name="chart-background"/>
470+
</foreignObject>
471+
458472
<g v-if="hasSegments">
459473
<!-- SEGMENTS -->
460474
<rect

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -634,6 +634,20 @@ defineExpose({
634634
<!-- CHART -->
635635
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" :viewBox="`0 0 ${svg.width <= 0 ? 10 : svg.width} ${svg.height <= 0 ? 10 : svg.height}`" :style="`max-width:100%;overflow:visible;background:transparent;color:${FINAL_CONFIG.style.color}`">
636636
<PackageVersion />
637+
638+
<!-- BACKGROUND SLOT -->
639+
<foreignObject
640+
v-if="$slots['chart-background']"
641+
:x="drawingArea.left"
642+
:y="drawingArea.top"
643+
:width="drawingArea.width"
644+
:height="drawingArea.height"
645+
:style="{
646+
pointerEvents: 'none'
647+
}"
648+
>
649+
<slot name="chart-background"/>
650+
</foreignObject>
637651

638652
<g v-if="drawableDataset.length > 0">
639653
<!-- DEFS -->

‎src/components/vue-ui-carousel-table.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import { ref, computed, onMounted, watch, nextTick, onBeforeUnmount } from "vue";
2+
import { ref, computed, onMounted, watch, nextTick, onBeforeUnmount, useSlots } from "vue";
33
import { useConfig } from "../useConfig";
44
import { useNestedProp } from "../useNestedProp";
55
import {
@@ -34,13 +34,19 @@ const props = defineProps({
3434
3535
const uid = ref(createUid());
3636
const isFullscreen = ref(false);
37-
3837
const isDataset = ref(!!props.dataset);
38+
const slots = useSlots();
3939
4040
onMounted(() => {
4141
prepareChart();
4242
});
4343
44+
onMounted(() => {
45+
if (slots['chart-background']) {
46+
console.warn('VueUiCarouselTable does not support the #chart-background slot.')
47+
}
48+
});
49+
4450
function prepareChart() {
4551
if (objectIsEmpty(props.dataset)) {
4652
error({

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -594,9 +594,23 @@ defineExpose({
594594
</template>
595595
</UserOptions>
596596

597-
<svg :xmlns="XMLNS" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" v-if="svg.height > 0 && isDataset" :viewBox="`0 0 ${svg.width} ${svg.height}`" :style="`overflow:visible;background:transparent;color:${FINAL_CONFIG.style.chart.color}`" >
597+
<svg :xmlns="XMLNS" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" v-if="svg.height > 0 && isDataset" :viewBox="`0 0 ${svg.width <= 0 ? 10 : svg.width} ${svg.height <= 0 ? 10 : svg.height}`" :style="`overflow:visible;background:transparent;color:${FINAL_CONFIG.style.chart.color}`" >
598598
<PackageVersion />
599599

600+
<!-- BACKGROUND SLOT -->
601+
<foreignObject
602+
v-if="$slots['chart-background']"
603+
:x="0"
604+
:y="0"
605+
:width="svg.width <= 0 ? 10 : svg.width"
606+
:height="svg.height <= 0 ? 10 : svg.height"
607+
:style="{
608+
pointerEvents: 'none'
609+
}"
610+
>
611+
<slot name="chart-background"/>
612+
</foreignObject>
613+
600614
<!-- TITLE AS G -->
601615
<g v-if="!selectedNut">
602616
<text

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -672,6 +672,20 @@ defineExpose({
672672
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" data-cy="donut-evolution-svg" :viewBox="`0 0 ${svg.absoluteWidth} ${svg.absoluteHeight}`" :style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`">
673673
<PackageVersion />
674674
675+
<!-- BACKGROUND SLOT -->
676+
<foreignObject
677+
v-if="$slots['chart-background']"
678+
:x="padding.left"
679+
:y="padding.top"
680+
:width="svg.width"
681+
:height="svg.height"
682+
:style="{
683+
pointerEvents: 'none'
684+
}"
685+
>
686+
<slot name="chart-background"/>
687+
</foreignObject>
688+
675689
<defs>
676690
<linearGradient :id="`hover_${uid}`" x1="0%" y1="0%" x2="0%" y2="100%">
677691
<stop offset="0%" :stop-color="setOpacity(FINAL_CONFIG.style.chart.backgroundColor, FINAL_CONFIG.style.chart.layout.highlighter.opacity)"/>

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -757,6 +757,20 @@ defineExpose({
757757

758758
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" data-cy="donut-svg" :viewBox="`0 0 ${svg.width <= 0 ? 10 : svg.width} ${svg.height <= 0 ? 10 : svg.height}`" :style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`">
759759
<PackageVersion/>
760+
761+
<!-- BACKGROUND SLOT -->
762+
<foreignObject
763+
v-if="$slots['chart-background']"
764+
:x="0"
765+
:y="0"
766+
:width="svg.width <= 0 ? 10 : svg.width"
767+
:height="svg.height <= 0 ? 10 : svg.height"
768+
:style="{
769+
pointerEvents: 'none'
770+
}"
771+
>
772+
<slot name="chart-background"/>
773+
</foreignObject>
760774

761775
<!-- DEFS -->
762776
<defs v-if="FINAL_CONFIG.type === 'classic'">

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -515,6 +515,20 @@ defineExpose({
515515

516516
<svg :xmlns="XMLNS" v-if="isDataset" :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" :viewBox="`0 0 ${drawingArea.absoluteWidth <= 0 ? 10 : drawingArea.absoluteWidth} ${drawingArea.absoluteHeight <= 0 ? 10 : drawingArea.absoluteHeight}`" :style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`">
517517
<PackageVersion />
518+
519+
<!-- BACKGROUND SLOT -->
520+
<foreignObject
521+
v-if="$slots['chart-background']"
522+
:x="drawingArea.left"
523+
:y="drawingArea.top"
524+
:width="drawingArea.width"
525+
:height="drawingArea.height"
526+
:style="{
527+
pointerEvents: 'none'
528+
}"
529+
>
530+
<slot name="chart-background"/>
531+
</foreignObject>
518532

519533
<!-- VERTICAL GRID -->
520534
<g v-if="FINAL_CONFIG.style.chart.grid.verticalGrid.show">

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

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -248,11 +248,11 @@ function computeSankeyCoordinates(ds) {
248248
249249
const links = [];
250250
for (const node in nodes) {
251-
let sourceY = nodeCoordinates[node].absoluteY;
251+
let sourceY = nodeCoordinates[node].absoluteY + FINAL_CONFIG.value.style.chart.padding.top;
252252
253253
if (nodes[node].children) {
254254
nodes[node].children.forEach(({ target, value }, i) => {
255-
const targetY = nodeCoordinates[target].y;
255+
const targetY = nodeCoordinates[target].y + FINAL_CONFIG.value.style.chart.padding.top;
256256
const sourceCoord = nodeCoordinates[node];
257257
const targetCoord = nodeCoordinates[target];
258258
@@ -582,6 +582,20 @@ defineExpose({
582582
:class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }" :style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`"
583583
>
584584
<PackageVersion />
585+
586+
<!-- BACKGROUND SLOT -->
587+
<foreignObject
588+
v-if="$slots['chart-background']"
589+
:x="0"
590+
:y="0"
591+
:width="drawingArea.width"
592+
:height="drawingArea.height"
593+
:style="{
594+
pointerEvents: 'none'
595+
}"
596+
>
597+
<slot name="chart-background"/>
598+
</foreignObject>
585599

586600
<defs>
587601
<linearGradient
@@ -611,7 +625,7 @@ defineExpose({
611625
v-for="(node, i) in mutableDataset.nodes"
612626
class="vue-ui-flow-node"
613627
:x="node.x"
614-
:y="checkNaN(node.absoluteY)"
628+
:y="checkNaN(node.absoluteY) + FINAL_CONFIG.style.chart.padding.top"
615629
:height="checkNaN(node.height)"
616630
:width="nodeWidth"
617631
:fill="node.color"
@@ -625,7 +639,7 @@ defineExpose({
625639
<text
626640
v-for="(node, i) in mutableDataset.nodes"
627641
:x="node.x + nodeWidth / 2"
628-
:y="checkNaN(node.absoluteY + node.height / 2 - (FINAL_CONFIG.style.chart.nodes.labels.fontSize / 4))"
642+
:y="checkNaN(node.absoluteY + node.height / 2 - (FINAL_CONFIG.style.chart.nodes.labels.fontSize / 4)) + FINAL_CONFIG.style.chart.padding.top"
629643
:font-size="FINAL_CONFIG.style.chart.nodes.labels.fontSize"
630644
:fill="adaptColorToBackground(node.color)"
631645
text-anchor="middle"
@@ -636,7 +650,7 @@ defineExpose({
636650
<text
637651
v-for="(node, i) in mutableDataset.nodes"
638652
:x="node.x + nodeWidth / 2"
639-
:y="checkNaN(node.absoluteY + node.height / 2 + (FINAL_CONFIG.style.chart.nodes.labels.fontSize))"
653+
:y="checkNaN(node.absoluteY + node.height / 2 + (FINAL_CONFIG.style.chart.nodes.labels.fontSize)) + FINAL_CONFIG.style.chart.padding.top"
640654
:font-size="FINAL_CONFIG.style.chart.nodes.labels.fontSize"
641655
:fill="adaptColorToBackground(node.color)"
642656
text-anchor="middle"

0 commit comments

Comments
 (0)