Skip to content

Commit 550fa60

Browse files
graphierosgraphieros
committed
Improvement - VueUiDonut & VueUiNestedDonut - Add config to setup empty arc color
1 parent aa53f76 commit 550fa60

File tree

6 files changed

+95
-29
lines changed

6 files changed

+95
-29
lines changed

‎TestingArena/ArenaVueUiDonut.vue‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,31 @@ import LocalPattern from "../src/atoms/vue-ui-pattern.vue";
99
const dataset = ref([
1010
{
1111
name: 'Serie 1',
12-
values: [100],
12+
values: [1],
1313
comment: 'This is a comment'
1414
},
1515
{
1616
name: 'Serie 2',
17-
values: [50]
17+
values: [0]
1818
},
1919
{
2020
name: 'Serie 3',
21-
values: [25],
21+
values: [0],
2222
comment: "This is another comment that is quite long to see how it fits on the chart and to see if it's nit overflowing."
2323
},
24-
{
25-
name: 'Serie 4',
26-
values: [12.5]
27-
},
28-
{
29-
name: 'Serie 5',
30-
values: [6.125]
31-
},
32-
{
33-
name: 'Serie 6',
34-
values: [25],
35-
comment: 'Some other comment'
36-
},
24+
// {
25+
// name: 'Serie 4',
26+
// values: [12.5]
27+
// },
28+
// {
29+
// name: 'Serie 5',
30+
// values: [6.125]
31+
// },
32+
// {
33+
// name: 'Serie 6',
34+
// values: [25],
35+
// comment: 'Some other comment'
36+
// },
3737
]);
3838
3939
const alternateDataset = ref([

‎TestingArena/ArenaVueUiNestedDonuts.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ const dataset = ref([
1414
series: [
1515
{
1616
name: 'Serie 1',
17-
values: [50]
17+
values: [1]
1818
},
1919
{
2020
name: 'Serie 2',
21-
values: [30]
21+
values: [0]
2222
},
2323
{
2424
name: 'Serie 3',
25-
values: [20]
25+
values: [0]
2626
},
2727
]
2828
},
@@ -31,7 +31,7 @@ const dataset = ref([
3131
series: [
3232
{
3333
name: 'Serie 1',
34-
values: [40]
34+
values: [0]
3535
},
3636
{
3737
name: 'Serie 2',

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

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -518,6 +518,26 @@ const currentDonut = computed(() => {
518518
return d
519519
});
520520
521+
const hasData = computed(() => {
522+
return Math.abs(donutSet.value.map(d => d.value).reduce((a, b) => a + b, 0)) > 0;
523+
})
524+
525+
const emptySkeleton = computed(() => {
526+
return makeDonut({
527+
series: [
528+
{
529+
value: 1,
530+
color: FINAL_CONFIG.value.style.chart.layout.donut.emptyFill,
531+
name: '_',
532+
seriesIndex: 0,
533+
patternIndex: -1,
534+
ghost: false,
535+
absoluteValues: [1]
536+
},
537+
],
538+
}, svg.value.width / 2, svg.value.height / 2, minSize.value, minSize.value, 1.99999, 2, 1, 360, 105.25, donutThickness.value)
539+
});
540+
521541
const noGhostDonut = computed(() => currentDonut.value.filter(el => !el.ghost))
522542
523543
const polarAreas = computed(() => {
@@ -973,12 +993,18 @@ defineExpose({
973993
<template v-if="total && FINAL_CONFIG.type === 'classic'">
974994
<path v-for="(arc, i) in noGhostDonut" :stroke="FINAL_CONFIG.style.chart.backgroundColor"
975995
:d="arc.arcSlice" fill="#FFFFFF" />
976-
<path v-for="(arc, i) in noGhostDonut" class="vue-ui-donut-arc-path" :data-cy="`donut-arc-${i}`"
977-
:d="arc.arcSlice" :fill="arc.color"
978-
:stroke="FINAL_CONFIG.style.chart.backgroundColor"
979-
:stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth" :filter="getBlurFilter(i)"
980-
981-
/>
996+
997+
<path
998+
v-for="(arc, i) in noGhostDonut"
999+
class="vue-ui-donut-arc-path"
1000+
:data-cy="`donut-arc-${i}`"
1001+
:d="arc.arcSlice"
1002+
:fill="arc.color"
1003+
:stroke="FINAL_CONFIG.style.chart.backgroundColor"
1004+
:stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth"
1005+
:filter="getBlurFilter(i)"
1006+
/>
1007+
9821008
<g v-if="$slots.pattern">
9831009
<path v-for="(arc, i) in noGhostDonut" class="vue-ui-donut-arc-path"
9841010
:data-cy="`donut-arc-pattern-${arc.patternIndex}`" :d="arc.arcSlice"
@@ -1043,6 +1069,18 @@ defineExpose({
10431069
</template>
10441070

10451071
<template v-else>
1072+
<!-- EMPTY SKELETON -->
1073+
<g v-if="FINAL_CONFIG.type === 'classic' && !hasData">
1074+
<path
1075+
v-for="(arc, i) in emptySkeleton"
1076+
class="vue-ui-donut-arc-path"
1077+
:data-cy="`empty-skeleton-${i}`"
1078+
:d="arc.arcSlice"
1079+
:fill="arc.color"
1080+
:stroke="FINAL_CONFIG.style.chart.backgroundColor"
1081+
:stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth"
1082+
/>
1083+
</g>
10461084
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="minSize <= 0 ? 10 : minSize" fill="transparent"
10471085
:stroke="FINAL_CONFIG.style.chart.backgroundColor" />
10481086
</template>

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

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -641,11 +641,28 @@ const donuts = computed(() => {
641641
...s,
642642
value: s.value < 0.00000000001 ? Number.MIN_VALUE : s.value,
643643
}));
644+
645+
const skeleton = makeDonut(
646+
{ series: [
647+
{ name: '_', color: FINAL_CONFIG.value.style.chart.layout.donut.emptyFill, value: 1 }
648+
]},
649+
svg.value.width / 2,
650+
svg.value.height / 2,
651+
radius,
652+
radius,
653+
1.99999,
654+
2,
655+
1,
656+
360,
657+
105.25,
658+
donutThickness.value
659+
)
644660
645661
return {
646662
...ds,
647663
hasData,
648664
radius,
665+
skeleton,
649666
donut: makeDonut(
650667
{ series },
651668
svg.value.width / 2,
@@ -1188,11 +1205,18 @@ defineExpose({
11881205
<template v-if="item.hasData">
11891206
<g v-for="(arc, j) in item.donut.filter((el) => !el.ghost)">
11901207
<path data-cy="datapoint-arc" class="vue-ui-donut-arc-path" :d="arc.arcSlice"
1191-
:fill="setOpacity(arc.color, 80)" :stroke="FINAL_CONFIG.style.chart.backgroundColor"
1208+
:fill="arc.color" :stroke="FINAL_CONFIG.style.chart.backgroundColor"
11921209
:stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth"
11931210
:filter="getBlurFilter(arc, j)" />
11941211
</g>
11951212
</template>
1213+
<template v-else>
1214+
<g v-for="(arc, j) in item.skeleton">
1215+
<path data-cy="datapoint-arc" class="vue-ui-donut-arc-path" :d="arc.arcSlice"
1216+
:fill="arc.color" :stroke="FINAL_CONFIG.style.chart.backgroundColor"
1217+
:stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth" />
1218+
</g>
1219+
</template>
11961220
</g>
11971221
11981222
<g v-if="FINAL_CONFIG.style.chart.useGradient">

‎src/useConfig.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -813,7 +813,8 @@ export function useConfig() {
813813
strokeWidth: 55,
814814
borderWidth: 1,
815815
useShadow: false,
816-
shadowColor: COLOR_BLACK
816+
shadowColor: COLOR_BLACK,
817+
emptyFill: COLOR_GREY_LIGHT
817818
}
818819
},
819820
comments: {
@@ -3260,7 +3261,8 @@ export function useConfig() {
32603261
borderWidth: 2,
32613262
spacingRatio: 0.5,
32623263
useShadow: false,
3263-
shadowColor: COLOR_BLACK
3264+
shadowColor: COLOR_BLACK,
3265+
emptyFill: COLOR_GREY_LIGHT
32643266
}
32653267
},
32663268
legend: {

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3107,6 +3107,7 @@ declare module "vue-data-ui" {
31073107
strokeWidth?: number;
31083108
useShadow?: boolean;
31093109
shadowColor?: string;
3110+
emptyFill?: string;
31103111
};
31113112
};
31123113
comments?: ChartComments;
@@ -3257,6 +3258,7 @@ declare module "vue-data-ui" {
32573258
spacingRatio?: number;
32583259
useShadow?: boolean;
32593260
shadowColor?: string;
3261+
emptyFill?: string;
32603262
};
32613263
};
32623264
legend?: ChartBaseLegend & {

0 commit comments

Comments
 (0)