Skip to content

Commit 44ac6ed

Browse files
graphierosgraphieros
committed
New feature - Add source slot for chart source captioning
1 parent cdc4222 commit 44ac6ed

Some content is hidden

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

45 files changed

+316
-15
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -959,6 +959,10 @@ defineExpose({
959959
}
960960
}"
961961
/>
962+
963+
<div v-if="$slots.source" ref="source" dir="auto">
964+
<slot name="source" />
965+
</div>
962966

963967
<!-- DATA TABLE -->
964968
<Accordion hideDetails v-if="isDataset && hasStack" :config="{

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ const selectedIndex = ref(null);
5959
const step = ref(0);
6060
const agePyramid = ref(null);
6161
const chartTitle = ref(null);
62+
const source = ref(null);
6263
const titleStep = ref(0);
6364
const tableStep = ref(0);
6465
@@ -114,6 +115,7 @@ function prepareChart() {
114115
const { width, height } = useResponsive({
115116
chart: agePyramid.value,
116117
title: FINAL_CONFIG.value.style.title.text ? chartTitle.value : null,
118+
source: source.value
117119
});
118120
svg.value.width = width;
119121
svg.value.height = height;
@@ -741,6 +743,10 @@ defineExpose({
741743

742744
<slot name="legend" v-bind:legend="drawableDataset"></slot>
743745

746+
<div v-if="$slots.source" ref="source" dir="auto">
747+
<slot name="source" />
748+
</div>
749+
744750
<!-- TOOLTIP -->
745751
<Tooltip
746752
:show="mutableConfig.showTooltip && isTooltip"

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

Lines changed: 42 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import UserOptions from "../atoms/UserOptions.vue";
1515
import { usePrinter } from "../usePrinter";
1616
import PackageVersion from "../atoms/PackageVersion.vue";
1717
import PenAndPaper from "../atoms/PenAndPaper.vue";
18+
import Skeleton from "./vue-ui-skeleton.vue";
1819
1920
const { vue_ui_bullet: DEFAULT_CONFIG } = useConfig();
2021
@@ -41,15 +42,29 @@ const step = ref(0);
4142
4243
const isDataset = computed({
4344
get: () => {
44-
return true // TODO
45+
return props.dataset.hasOwnProperty('value')
4546
},
4647
set: (bool) => {
4748
return bool
4849
}
4950
})
5051
5152
const hasSegments = computed(() => {
52-
if(!props.dataset.segments) return false;
53+
if(!props.dataset.segments) {
54+
console.warn(`VueUiBullet: dataset segments is empty. Provide segments with this datastructure:\n
55+
segments: [
56+
{
57+
name: string;
58+
from: number;
59+
to: number;
60+
color?: string;
61+
},
62+
{...}
63+
]
64+
`)
65+
isDataset.value = false;
66+
return false;
67+
}
5368
if(!Array.isArray(props.dataset.segments)) {
5469
console.warn(`VueUiBullet: dataset segments must be an array of objects with this datastructure:\n
5570
segments: [
@@ -62,6 +77,7 @@ segments: [
6277
{...}
6378
]
6479
`);
80+
isDataset.value = false;
6581
return false;
6682
}
6783
if (!props.dataset.segments.length) {
@@ -75,7 +91,8 @@ segments: [
7591
},
7692
{...}
7793
]
78-
`)
94+
`);
95+
isDataset.value = false;
7996
return false
8097
};
8198
return true;
@@ -105,6 +122,8 @@ function prepareChart() {
105122
})
106123
})
107124
})
125+
} else {
126+
isDataset.value = false;
108127
}
109128
}
110129
@@ -261,6 +280,9 @@ const segments = computed(() => {
261280
})
262281
263282
const legendSet = computed(() => {
283+
if (!segments.value || !segments.value.chunks || !segments.value.chunks.length) {
284+
return []
285+
}
264286
return segments.value.chunks.map(segment => {
265287
const formattedFrom = applyDataLabel(
266288
FINAL_CONFIG.value.style.chart.segments.dataLabels.formatter,
@@ -527,6 +549,19 @@ defineExpose({
527549
<slot name="watermark" v-bind="{ isPrinting: isPrinting || isImaging }"/>
528550
</div>
529551

552+
<Skeleton
553+
v-if="!isDataset"
554+
:config="{
555+
type: 'bullet',
556+
style: {
557+
backgroundColor: FINAL_CONFIG.style.chart.backgroundColor,
558+
bullet: {
559+
color: '#CCCCCC',
560+
}
561+
}
562+
}"
563+
/>
564+
530565
<div ref="chartLegend">
531566
<Legend
532567
v-if="FINAL_CONFIG.style.chart.legend.show"
@@ -543,6 +578,10 @@ defineExpose({
543578
</Legend>
544579
<slot name="legend" v-bind:legend="legendSet" />
545580
</div>
581+
582+
<div v-if="$slots.source" ref="source" dir="auto">
583+
<slot name="source" />
584+
</div>
546585
</div>
547586
</template>
548587

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ const candlestickChart = ref(null);
6363
const chartTitle = ref(null);
6464
const chartLegend = ref(null);
6565
const chartSlicer = ref(null);
66+
const source = ref(null);
6667
const slicerStep = ref(0);
6768
const tableStep = ref(0);
6869
const titleStep = ref(0);
@@ -134,7 +135,8 @@ function prepareChart() {
134135
chart: candlestickChart.value,
135136
title: FINAL_CONFIG.value.style.title.text ? chartTitle.value : null,
136137
slicer: chartSlicer.value,
137-
legend: chartLegend.value
138+
legend: chartLegend.value,
139+
source: source.value
138140
});
139141
svg.value.width = width;
140142
svg.value.height = height;
@@ -790,6 +792,10 @@ defineExpose({
790792
<slot name="legend" v-bind:legend="drawableDataset"></slot>
791793
</div>
792794

795+
<div v-if="$slots.source" ref="source" dir="auto">
796+
<slot name="source" />
797+
</div>
798+
793799
<!-- TOOLTIP -->
794800
<Tooltip
795801
:show="mutableConfig.showTooltip && isTooltip"

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -512,6 +512,10 @@ defineExpose({
512512
<slot name="optionFullscreen" v-bind="{ toggleFullscreen, isFullscreen }"/>
513513
</template>
514514
</UserOptions>
515+
516+
<div v-if="$slots.source" ref="source" dir="auto">
517+
<slot name="source" />
518+
</div>
515519
</div>
516520
</template>
517521

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1229,6 +1229,11 @@ defineExpose({
12291229
}"
12301230
/>
12311231
<slot name="legend" v-bind:legend="mutableDataset"></slot>
1232+
1233+
<div v-if="$slots.source" ref="source" dir="auto">
1234+
<slot name="source" />
1235+
</div>
1236+
12321237
<!-- DATA TABLE -->
12331238
<Accordion hideDetails v-if="isDataset" :config="{
12341239
open: mutableConfig.showTable,

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1011,6 +1011,10 @@ defineExpose({
10111011
10121012
<slot name="legend" v-bind:legend="legendSet"></slot>
10131013
1014+
<div v-if="$slots.source" ref="source" dir="auto">
1015+
<slot name="source" />
1016+
</div>
1017+
10141018
<Accordion hideDetails v-if="isDataset" :config="{
10151019
open: mutableConfig.showTable,
10161020
maxHeight: 10000,

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script setup>
22
import { ref, computed, nextTick, onMounted, watch, onBeforeUnmount } from "vue";
33
import {
4-
adaptColorToBackground,
54
applyDataLabel,
65
calcMarkerOffsetX,
76
calcMarkerOffsetY,
@@ -71,6 +70,7 @@ const donutChart = ref(null);
7170
const chartTitle = ref(null);
7271
const chartLegend = ref(null);
7372
const resizeObserver = ref(null);
73+
const source = ref(null);
7474
const titleStep = ref(0);
7575
const tableStep = ref(0);
7676
const legendStep = ref(0);
@@ -112,6 +112,7 @@ function prepareChart() {
112112
chart: donutChart.value,
113113
title: FINAL_CONFIG.value.style.chart.title.text ? chartTitle.value : null,
114114
legend: FINAL_CONFIG.value.style.chart.legend.show ? chartLegend.value : null,
115+
source: source.value
115116
});
116117
svg.value.width = width;
117118
svg.value.height = height;
@@ -1215,6 +1216,9 @@ defineExpose({
12151216
<slot name="legend" v-bind:legend="legendSet" />
12161217
</div>
12171218

1219+
<div v-if="$slots.source" ref="source" dir="auto">
1220+
<slot name="source" />
1221+
</div>
12181222

12191223
<!-- TOOLTIP -->
12201224
<Tooltip

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ const step = ref(0);
6363
const dumbbellChart = ref(null);
6464
const chartTitle = ref(null);
6565
const chartLegend = ref(null);
66+
const source = ref(null);
6667
const titleStep = ref(0);
6768
const tableStep = ref(0);
6869
const legendStep = ref(0);
@@ -141,6 +142,7 @@ function prepareChart() {
141142
chart: dumbbellChart.value,
142143
title: FINAL_CONFIG.value.style.chart.title.text ? chartTitle.value : null,
143144
legend: FINAL_CONFIG.value.style.chart.legend.show ? chartLegend.value : null,
145+
source: source.value
144146
});
145147
baseWidth.value = width;
146148
baseRowHeight.value = height / props.dataset.length;
@@ -745,6 +747,10 @@ defineExpose({
745747
<slot v-else name="legend" v-bind:legend="legendSet" />
746748
</div>
747749

750+
<div v-if="$slots.source" ref="source" dir="auto">
751+
<slot name="source" />
752+
</div>
753+
748754
<Accordion hideDetails v-if="isDataset" :config="{
749755
open: mutableConfig.showTable,
750756
maxHeight: 10000,

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -653,6 +653,10 @@ defineExpose({
653653
}"
654654
/>
655655

656+
<div v-if="$slots.source" ref="source" dir="auto">
657+
<slot name="source" />
658+
</div>
659+
656660
<Accordion hideDetails v-if="isDataset" :config="{
657661
open: mutableConfig.showTable,
658662
maxHeight: 10000,

0 commit comments

Comments
 (0)