Skip to content

Commit bf3465c

Browse files
graphierosgraphieros
committed
Improvement - VueUiDonut, VueUiNestedDonuts - Add padding config
1 parent 643e5d2 commit bf3465c

11 files changed

+64
-12
lines changed

‎TestingArena/ArenaVueUiDonut.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,11 @@ const model = ref([
8888
{ key: 'style.chart.backgroundColor', def: 'transparent', type: 'color', label: 'backgroundColor', category: 'general' },
8989
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color', label: 'textColor', category: 'general' },
9090
91+
{ key: 'style.chart.padding.top', def: 0, type: 'number', min: 0, max: 100},
92+
{ key: 'style.chart.padding.right', def: 24, type: 'number', min: 0, max: 100},
93+
{ key: 'style.chart.padding.bottom', def: 0, type: 'number', min: 0, max: 100},
94+
{ key: 'style.chart.padding.left', def: 24, type: 'number', min: 0, max: 100},
95+
9196
{ key: 'style.chart.layout.curvedMarkers', def: true, type: 'checkbox'},
9297
{ key: 'style.chart.layout.labels.dataLabels.show', def: true, type: 'checkbox', label: 'show', category: 'labels' },
9398
{ key: 'style.chart.layout.labels.dataLabels.hideUnderValue', def: 3, type: 'number', min: 0, max: 100, label: 'hideUnderValue', category: 'labels' },

‎TestingArena/ArenaVueUiIcon.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ref } from "vue";
33
import BaseIcon from "./../src/atoms/BaseIcon.vue";
44
55
const icons = ref([
6-
"annotator", "chart3dBar", "chartAgePyramid", "chartBar", "chartCandlestick", "chartChestnut", "chartDonut", "chartDonutEvolution", "chartGauge", "chartHeatmap", "chartLine", "chartMoodRadar", "chartOnion", "chartQuadrant", "chartRadar", "chartRelationCircle", "chartRings", "chartScatter", "chartSparkHistogram", "chartSparkStackbar", "chartTable", "chartThermometer", "chartTiremarks", "chartVerticalBar", "chartWaffle", "chartWheel", "close", "dashboard", "digit0", "digit1", "digit2", "digit3", "digit4", "digit5", "digit6", "digit7", "digit8", "digit9", "excel", "image", "labelClose", "labelOpen", "menu", "moodFlat", "moodHappy", "moodNeutral", "moodSad", "pdf", "screenshot", "skeleton", "smiley", "sort", "spin", "star", "tableClose", "tableOpen", "chartNestedDonuts", "chartSparkbar", "refresh", "circleQuestion", "circleExclamation", "circleCheck", "circleCancel", "moodLaughing", "moodWink", "moodEmbarrassed", "moodSurprised", "exitFullscreen", "fullscreen", "arrowRight", "arrowTop", "arrowBottom", "arrowLeft", "chartCluster", "chartSparkline", "legend", "csv", "chartGalaxy", "kpi", "kpiBox", "tooltip", "vueDataUi", "ratio", "func", "settings", "trendUp", "trendDown", "clipBoard", "zoomPlus", "zoomMinus", "clipboardLine", "clipboardDonut", "clipboardBar", "clipboardVariable", "triangle", "triangleFill", "square", "squareFill", "diamond", "diamondFill", "pentagon", "pentagonFill", "hexagon", "hexagonFill", "circle", "circleFill", "star", "starFace", "starFill", "numbers", "sigma", "mu", "lambda", "people", "copy", "accordion", "cursor", "trend", "chartStripPlot", "chartDumbbell", "copyLeft", "chartWordCloud", "stack", "unstack", "window", "chartFlow", "chartParallelCoordinatePlot", "tooltipDisabled", "pause", "play", "stop", "restart", "lap", "carouselTable", "battery", "chartStackbar", "chartBullet", "trash", "annotatorDisabled", "palette", "boxes", "chartFunnel", "chartHistoryPlot", "chartTableSparkline", "chartCirclePack"
6+
"annotator", "chart3dBar", "chartAgePyramid", "chartBar", "chartCandlestick", "chartChestnut", "chartDonut", "chartDonutEvolution", "chartGauge", "chartHeatmap", "chartLine", "chartMoodRadar", "chartOnion", "chartQuadrant", "chartRadar", "chartRelationCircle", "chartRings", "chartScatter", "chartSparkHistogram", "chartSparkStackbar", "chartTable", "chartThermometer", "chartTiremarks", "chartVerticalBar", "chartWaffle", "chartWheel", "close", "dashboard", "digit0", "digit1", "digit2", "digit3", "digit4", "digit5", "digit6", "digit7", "digit8", "digit9", "excel", "image", "labelClose", "labelOpen", "menu", "moodFlat", "moodHappy", "moodNeutral", "moodSad", "pdf", "screenshot", "skeleton", "smiley", "sort", "spin", "star", "tableClose", "tableOpen", "chartNestedDonuts", "chartSparkbar", "refresh", "circleQuestion", "circleExclamation", "circleCheck", "circleCancel", "moodLaughing", "moodWink", "moodEmbarrassed", "moodSurprised", "exitFullscreen", "fullscreen", "arrowRight", "arrowTop", "arrowBottom", "arrowLeft", "chartCluster", "chartSparkline", "legend", "csv", "chartGalaxy", "kpi", "kpiBox", "tooltip", "vueDataUi", "ratio", "func", "settings", "trendUp", "trendDown", "clipBoard", "zoomPlus", "zoomMinus", "clipboardLine", "clipboardDonut", "clipboardBar", "clipboardVariable", "triangle", "triangleFill", "square", "squareFill", "diamond", "diamondFill", "pentagon", "pentagonFill", "hexagon", "hexagonFill", "circle", "circleFill", "star", "starFace", "starFill", "numbers", "sigma", "mu", "lambda", "people", "copy", "accordion", "cursor", "trend", "chartStripPlot", "chartDumbbell", "copyLeft", "chartWordCloud", "stack", "unstack", "window", "chartFlow", "chartParallelCoordinatePlot", "tooltipDisabled", "pause", "play", "stop", "restart", "lap", "carouselTable", "battery", "chartStackbar", "chartBullet", "trash", "annotatorDisabled", "palette", "boxes", "chartFunnel", "chartHistoryPlot", "chartTableSparkline", "chartCirclePack", "icons", "robot"
77
])
88
99
</script>

‎TestingArena/ArenaVueUiNestedDonuts.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,12 @@ const model = ref([
7777
{ key: 'style.chart.gradientIntensity', def: 40, type: 'range', min: 0, max: 100},
7878
{ key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color'},
7979
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
80+
81+
{ key: 'style.chart.padding.top', def: 0, type: 'number', min: 0, max: 100},
82+
{ key: 'style.chart.padding.right', def: 48, type: 'number', min: 0, max: 100},
83+
{ key: 'style.chart.padding.bottom', def: 0, type: 'number', min: 0, max: 100},
84+
{ key: 'style.chart.padding.left', def: 48, type: 'number', min: 0, max: 100},
85+
8086
{ key: 'style.chart.layout.labels.dataLabels.show', def: true, type: 'checkbox'},
8187
{ key: 'style.chart.layout.labels.dataLabels.prefix', def: 'P', type: 'text'},
8288
{ key: 'style.chart.layout.labels.dataLabels.suffix', def: 'S', type: 'text'},

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,4 +107,4 @@
107107
"vitest": "^3.1.1",
108108
"vue": "^3.5.13"
109109
}
110-
}
110+
}

‎src/App.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ const components = ref([ //------|
120120
* Modify the index to display a component
121121
* [0] = VueUiXy
122122
*/
123-
const selectedComponent = ref(components.value[2]);
123+
const selectedComponent = ref(components.value[30]);
124124
125125
/**
126126
* Legacy testing arena where some non chart components can be tested

‎src/atoms/BaseIcon.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,9 @@ const icons = computed(() => {
180180
chartTableSparkline: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 1 L 7 1 L 7 5 L 1 5 L 1 1 M 1 8 L 7 8 L 7 12 L 1 12 L 1 8 M 1 15 L 7 15 L 7 19 L 1 19 L 1 15 M 9 3 C 9.3333 2.3333 9.261 1.027 10 1 C 11 2 10.139 4.975 11.421 5.009 C 12.231 5.009 12 3 13 3 C 14 4 14.053 4.03 14 4 C 16 4 16 1 17 1 C 18 1 18 3 19 3 M 9 12 C 9.3333 11 9.126 9.531 10 9 C 11 9 11 11 11.759 11.084 C 12.771 10.915 12.231 8.012 13.21 8.012 C 14.29 7.945 14 12 15 12 C 16 12 16 10 17 10 C 18 10 18 11 19 11 M 9 16 C 9.6667 17 9.734 18.981 10.645 19.048 C 11.691 18.609 11.117 14.965 12 15 C 13 15 12.636 17.158 13.682 17.293 C 15 17 14 15 15 15 C 16 15 16 19 17 19 C 18 19 18 15 19 15" />`,
181181
chartCirclePack: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 10 7 A 1 1 0 0 0 10 13 A 1 1 0 0 0 10 7 M 5 5 A 1 1 0 0 0 7.716 8.039 A 1 1 0 0 0 5 5 M 13 4 A 1 1 0 0 0 11.354 7.322 A 1 1 0 0 0 13 4 M 8.506 12.628 A 1 1 0 0 0 5.05 16.755 A 1 1 0 0 0 8.506 12.628 M 14.965 6.988 A 1 1 0 0 0 13.535 9.758 A 1 1 0 0 0 14.965 6.988 M 16 11 A 1 1 0 0 0 13.084 14.742 A 1 1 0 0 0 16 11"/>`,
182182
home: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 10 L 10 2 L 18 10 M 4 10 L 4 17 C 4 18 4 18 5 18 L 8 18 L 8 12 L 12 12 L 12 18 L 15 18 C 16 18 16 18 16 17 L 16 10 M 8 18"/>`,
183-
homeFilled: `<path fill="${props.stroke}" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 10 L 10 2 L 18 10 M 4 10 L 4 17 C 4 18 4 18 5 18 L 8 18 L 8 12 L 12 12 L 12 18 L 15 18 C 16 18 16 18 16 17 L 16 10 M 8 18"/>`
183+
homeFilled: `<path fill="${props.stroke}" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 10 L 10 2 L 18 10 M 4 10 L 4 17 C 4 18 4 18 5 18 L 8 18 L 8 12 L 12 12 L 12 18 L 15 18 C 16 18 16 18 16 17 L 16 10 M 8 18"/>`,
184+
icons: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 9 L 5 2 L 9 9 L 1 9 M 12 9 L 12 2 L 19 2 L 19 9 L 12 9 M 5 11 C 0 11 0 18 5 18 C 10 18 10 11 5 11 M 15 11 L 15 18 L 16 18 L 16 11 L 15 11 M 12 14 L 19 14 L 19 15 L 12 15 L 12 14"/>`,
185+
robot: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 2 L 18 2 L 18 18 L 2 18 L 2 2 M 6 5 A 1 1 0 0 0 6 8 A 1 1 0 0 0 6 5 M 14 5 A 1 1 0 0 0 14 8 A 1 1 0 0 0 14 5 M 1 4 L 1 9 M 19 4 L 19 9 M 5 11 C 6 16 14 16 15 11 M 7 1 L 13 1"/>`
184186
}
185187
});
186188

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,8 @@ function prepareChart() {
118118
title: FINAL_CONFIG.value.style.chart.title.text ? chartTitle.value : null,
119119
legend: FINAL_CONFIG.value.style.chart.legend.show ? chartLegend.value : null,
120120
source: source.value,
121-
noTitle: noTitle.value
121+
noTitle: noTitle.value,
122+
padding: padding.value
122123
});
123124
124125
requestAnimationFrame(() => {
@@ -184,6 +185,17 @@ watch(() => props.config, (_newCfg) => {
184185
mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
185186
}, { deep: true });
186187
188+
const padding = computed(() => {
189+
const { top, right, bottom, left } = FINAL_CONFIG.value.style.chart.padding;
190+
return {
191+
css: `padding:${top}px ${right}px ${bottom}px ${left}px`,
192+
top,
193+
right,
194+
bottom,
195+
left
196+
}
197+
})
198+
187199
const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
188200
elementId: `donut__${uid.value}`,
189201
fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-donut',
@@ -772,7 +784,7 @@ defineExpose({
772784
</template>
773785
</UserOptions>
774786

775-
<svg ref="svgRef" :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}`">
787+
<svg ref="svgRef" :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};${padding.css}`">
776788
<PackageVersion/>
777789

778790
<!-- BACKGROUND SLOT -->

‎src/components/vue-ui-nested-donuts.vue

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,17 @@ watch(() => props.config, (_newCfg) => {
125125
mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
126126
}, { deep: true });
127127
128+
const padding = computed(() => {
129+
const { top, right, bottom, left } = FINAL_CONFIG.value.style.chart.padding;
130+
return {
131+
css: `padding:${top}px ${right}px ${bottom}px ${left}px`,
132+
top,
133+
right,
134+
bottom,
135+
left
136+
}
137+
})
138+
128139
const resizeObserver = ref(null);
129140
130141
onMounted(() => {
@@ -146,7 +157,8 @@ function prepareChart() {
146157
title: FINAL_CONFIG.value.style.chart.title.text ? chartTitle.value : null,
147158
legend: FINAL_CONFIG.value.style.chart.legend.show ? chartLegend.value : null,
148159
source: source.value,
149-
noTitle: noTitle.value
160+
noTitle: noTitle.value,
161+
padding: padding.value
150162
});
151163
152164
requestAnimationFrame(() => {
@@ -858,7 +870,7 @@ defineExpose({
858870
v-if="isDataset"
859871
:class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }"
860872
:viewBox="`0 0 ${svg.width <= 0 ? 0.001 : svg.width} ${svg.height < 0 ? 0.001 : svg.height}`"
861-
:style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color}`"
873+
:style="`max-width:100%; overflow: visible; background:transparent;color:${FINAL_CONFIG.style.chart.color};${padding.css}`"
862874
>
863875
<PackageVersion />
864876

‎src/useConfig.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -656,6 +656,7 @@ export function useConfig() {
656656
gradientIntensity: 40,
657657
backgroundColor: COLOR_WHITE,
658658
color: COLOR_BLACK,
659+
padding: PADDING([0,0,0,0]),
659660
layout: {
660661
curvedMarkers: false,
661662
labels: {
@@ -3072,6 +3073,7 @@ export function useConfig() {
30723073
color: COLOR_BLACK,
30733074
useGradient: true,
30743075
gradientIntensity: 40,
3076+
padding: PADDING([0,0,0,0]),
30753077
layout: {
30763078
labels: {
30773079
dataLabels: {

‎src/useResponsive.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export function useResponsive({
55
legend = null,
66
source = null,
77
noTitle = null,
8+
padding = null
89
}) {
910
let height = 0;
1011
let width = 0;
@@ -13,6 +14,8 @@ export function useResponsive({
1314
let heightLegend = 0;
1415
let heightSource = 0;
1516
let heightNoTitle = 0;
17+
let heightPadding = 0;
18+
let widthPadding = 0;
1619

1720
if (!!chart) {
1821
const parent = chart.parentNode;
@@ -31,17 +34,23 @@ export function useResponsive({
3134
heightSource = source.getBoundingClientRect().height;
3235
}
3336
if (noTitle) {
34-
heightNoTitle = noTitle.getBoundingClientRect().height
37+
heightNoTitle = noTitle.getBoundingClientRect().height;
38+
}
39+
if (padding) {
40+
heightPadding = padding.top + padding.bottom;
41+
widthPadding = padding.right + padding.left;
3542
}
3643

3744
height = parentHeight
3845
- heightTitle
3946
- heightSlicer
4047
- heightLegend
4148
- heightSource
42-
- heightNoTitle;
49+
- heightNoTitle
50+
- heightPadding;
4351

44-
width = parentWidth;
52+
width = parentWidth
53+
- widthPadding;
4554
}
4655

4756
return {

‎types/vue-data-ui.d.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1153,7 +1153,9 @@ declare module "vue-data-ui" {
11531153
| "zoomMinus"
11541154
| "zoomPlus"
11551155
| "home"
1156-
| "homeFilled";
1156+
| "homeFilled"
1157+
| "icons"
1158+
| "robot";
11571159

11581160
export const VueUiIcon: DefineComponent<{
11591161
name: VueUiIconName;
@@ -2917,6 +2919,7 @@ declare module "vue-data-ui" {
29172919
gradientIntensity?: number;
29182920
backgroundColor?: string;
29192921
color?: string;
2922+
padding?: ChartPadding;
29202923
layout?: {
29212924
curvedMarkers?: boolean;
29222925
labels?: {
@@ -3095,6 +3098,7 @@ declare module "vue-data-ui" {
30953098
gradientIntensity?: number;
30963099
backgroundColor?: string;
30973100
color?: string;
3101+
padding?: ChartPadding;
30983102
layout?: {
30993103
labels?: {
31003104
dataLabels?: {

0 commit comments

Comments
 (0)