Skip to content

Commit ef36f2b

Browse files
graphierosgraphieros
committed
Improvement - VueUiDonut - Improve responsive behavior & add curved option for markers
1 parent db66cc3 commit ef36f2b

File tree

7 files changed

+47
-36
lines changed

7 files changed

+47
-36
lines changed

‎TestingArena/ArenaVueUiDonut.vue

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,10 @@ const model = ref([
8585
{ key: 'style.fontFamily', def: 'inherit', type: 'text', label: "fontFamily", category: 'general' },
8686
{ key: 'style.chart.useGradient', def: true, type: 'checkbox', label: 'useGradient', category: 'general' },
8787
{ key: 'style.chart.gradientIntensity', def: 40, min: 0, max: 100, type: 'range', label: 'gradientIntensity', category: 'general' },
88-
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color', label: 'backgroundColor', category: 'general' },
88+
{ 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' },
90+
91+
{ key: 'style.chart.layout.curvedMarkers', def: true, type: 'checkbox'},
9092
{ key: 'style.chart.layout.labels.dataLabels.show', def: true, type: 'checkbox', label: 'show', category: 'labels' },
9193
{ key: 'style.chart.layout.labels.dataLabels.hideUnderValue', def: 3, type: 'number', min: 0, max: 100, label: 'hideUnderValue', category: 'labels' },
9294
{ key: 'style.chart.layout.labels.dataLabels.useLabelSlots', def: false, type: 'checkbox'},
@@ -127,9 +129,9 @@ const model = ref([
127129
{ key: 'style.chart.layout.labels.hollow.average.value.suffix', def: '', type: 'text', label: ['hollow', 'average', 'value', 'is', 'suffix'], category: 'labels' },
128130
{ key: 'style.chart.layout.labels.hollow.average.value.offsetY', def: 0, type: 'number', min: -100, max: 100, label: ['hollow', 'average', 'value', 'is', 'offsetY'], category: 'labels' },
129131
{ key: 'style.chart.layout.labels.hollow.average.value.rounding', def: 0, type: 'number', min: 0, max: 6, label: ['hollow', 'average', 'value', 'is', 'rounding'], category: 'labels' },
130-
{ key: 'style.chart.layout.donut.strokeWidth', def: 55, type: 'range', min: 3, max: 130, label: 'thickness', category: 'donut' },
132+
{ key: 'style.chart.layout.donut.strokeWidth', def: 6, type: 'range', min: 3, max: 130, label: 'thickness', category: 'donut' },
131133
{ key: 'style.chart.layout.donut.borderWidth', def: 1, type: 'range', min: 0, max: 36, label: ['border', 'is', 'thickness'], category: 'donut' },
132-
{ key: 'style.chart.layout.donut.useShadow', def: true, type: 'checkbox' },
134+
{ key: 'style.chart.layout.donut.useShadow', def: false, type: 'checkbox' },
133135
{ key: 'style.chart.layout.donut.shadowColor', def: '#1A1A1A', type: 'color' },
134136
{ key: 'style.chart.legend.show', def: true, type: 'checkbox', label: 'show', category: 'legend' },
135137
{ key: 'style.chart.legend.backgroundColor', def: '#FFFFFF20', type: 'color', label: 'backgroundColor', category: 'legend' },
@@ -339,9 +341,9 @@ function toggleLabels() {
339341
responsive: true
340342
}">
341343

342-
<template #chart-background>
344+
<!-- <template #chart-background>
343345
<div style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"/>
344-
</template>
346+
</template> -->
345347

346348
<template #plot-comment="{ plot }">
347349
<div :style="`text-align:${plot.textAlign};font-size: 10px; padding: 6px;`">

‎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[45]);
123+
const selectedComponent = ref(components.value[1]);
124124
125125
/**
126126
* Legacy testing arena where some non chart components can be tested

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -212,9 +212,9 @@ const svg = ref({
212212
213213
const donutThickness = computed(() => {
214214
const baseRatio = FINAL_CONFIG.value.style.chart.layout.donut.strokeWidth / 512;
215-
const resultSize = svg.value.width * baseRatio
215+
const resultSize = Math.min(svg.value.width, svg.value.height) * baseRatio;
216216
const adjusted = resultSize > minSize.value ? minSize.value : resultSize;
217-
return adjusted < 24 ? 24 : adjusted;
217+
return Math.max(adjusted, 3);
218218
});
219219
220220
const emit = defineEmits(['selectLegend', 'selectDatapoint'])
@@ -826,7 +826,7 @@ defineExpose({
826826
<path
827827
data-cy="donut-arc"
828828
v-if="isArcBigEnough(arc) && mutableConfig.dataLabels.show"
829-
:d="calcNutArrowPath(arc, {x: svg.width / 2, y: svg.height / 2}, 16, 16, false, false, donutThickness)"
829+
:d="calcNutArrowPath(arc, {x: svg.width / 2, y: svg.height / 2}, 16, 16, false, false, donutThickness, 12, FINAL_CONFIG.style.chart.layout.curvedMarkers)"
830830
:stroke="arc.color"
831831
stroke-width="1"
832832
stroke-linecap="round"

‎src/lib.js

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -223,33 +223,33 @@ export function getPalette(palette = 'default') {
223223
export const themePalettes = {
224224
default: palette,
225225
celebration: [
226-
"#D32F2F",
227-
"#E64A19",
228-
"#F57C00",
229-
"#FF9800",
230-
"#FF5722",
231-
"#FFC107",
232-
"#FFEB3B",
233-
"#FFD54F",
234-
"#FF6F00",
235-
"#D84315",
226+
"#D32F2F",
227+
"#E64A19",
228+
"#F57C00",
229+
"#FF9800",
230+
"#FF5722",
231+
"#FFC107",
232+
"#FFEB3B",
233+
"#FFD54F",
234+
"#FF6F00",
235+
"#D84315",
236236
"#BF360C",
237-
"#C62828",
237+
"#C62828",
238238
"#B71C1C",
239-
"#FF7043",
240-
"#FF8A65",
241-
"#FFB74D",
242-
"#FFA726",
243-
"#FFCC80",
244-
"#FFE082",
239+
"#FF7043",
240+
"#FF8A65",
241+
"#FFB74D",
242+
"#FFA726",
243+
"#FFCC80",
244+
"#FFE082",
245245
"#FFECB3"
246246
],
247247
celebrationNight: [
248-
"#D32F2F",
249-
"#E64A19",
250-
"#F57C00",
251-
"#FF9800",
252-
"#FF5722",
248+
"#D32F2F",
249+
"#E64A19",
250+
"#F57C00",
251+
"#FF9800",
252+
"#FF5722",
253253
"#FFC947",
254254
"#FFEB3B",
255255
"#FFD95B",
@@ -977,7 +977,7 @@ export function getScaleFactorUsingArcSize(centerX, centerY, x, y, arcSize) {
977977
return scaleFactor;
978978
}
979979

980-
export function calcNutArrowPath(arc, center = false, yOffsetTop = 16, yOffsetBottom = 16, toCenter = false, hideStart = false, arcSize = 0, flatLen = 12) {
980+
export function calcNutArrowPath(arc, center = false, yOffsetTop = 16, yOffsetBottom = 16, toCenter = false, hideStart = false, arcSize = 0, flatLen = 12, curved = false) {
981981
const { x } = findArcMidpoint(arc.path)
982982

983983
const start = `${calcMarkerOffsetX(arc).x},${calcMarkerOffsetY(arc, yOffsetTop, yOffsetBottom) - 4} `;
@@ -997,8 +997,15 @@ export function calcNutArrowPath(arc, center = false, yOffsetTop = 16, yOffsetBo
997997
mid = `${midX},${midY}`;
998998
}
999999

1000-
const endpoint = getCloserPoint(center.x, center.y, midX, midY, arcSize)
1001-
const end = ` ${endpoint.x},${endpoint.y}`;
1000+
const end = ` ${arc.center.endX},${arc.center.endY}`;
1001+
1002+
if (curved) {
1003+
if (hideStart) {
1004+
return `M${mid} Q${mid} ${end}`;
1005+
} else {
1006+
return `M${start} Q${mid} ${end}`;
1007+
}
1008+
}
10021009

10031010
return `M${hideStart ? '' : start}${mid}${end}`;
10041011
}
@@ -2119,7 +2126,7 @@ export function largestTriangleThreeBucketsArray({ data, threshold }) {
21192126
* @param {number} threshold
21202127
* @returns {Array<{ name: string, value: number }>}
21212128
*/
2122-
export function largestTriangleThreeBucketsArrayObjects({ data, threshold, key='value' }) {
2129+
export function largestTriangleThreeBucketsArrayObjects({ data, threshold, key = 'value' }) {
21232130
if (threshold >= data.length || threshold < 3) {
21242131
return data;
21252132
}

‎src/useConfig.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -638,6 +638,7 @@ export function useConfig() {
638638
backgroundColor: COLOR_WHITE,
639639
color: COLOR_BLACK,
640640
layout: {
641+
curvedMarkers: false,
641642
labels: {
642643
dataLabels: {
643644
show: true,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2877,6 +2877,7 @@ declare module "vue-data-ui" {
28772877
backgroundColor?: string;
28782878
color?: string;
28792879
layout?: {
2880+
curvedMarkers?: boolean;
28802881
labels?: {
28812882
dataLabels?: {
28822883
show?: boolean;

0 commit comments

Comments
 (0)