Skip to content

Commit 473f6d0

Browse files
graphierosgraphieros
committed
Improvement - VueUiDonut & VueUiNestedDonuts - Add config options to control arc stroke color
1 parent d12a96b commit 473f6d0

File tree

4 files changed

+24
-11
lines changed

4 files changed

+24
-11
lines changed

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1084,7 +1084,7 @@ defineExpose({
10841084
:data-cy="`donut-arc-${i}`"
10851085
:d="arc.arcSlice"
10861086
:fill="arc.color"
1087-
:stroke="FINAL_CONFIG.style.chart.backgroundColor"
1087+
:stroke="FINAL_CONFIG.style.chart.layout.donut.borderColorAuto ? FINAL_CONFIG.style.chart.backgroundColor : FINAL_CONFIG.style.chart.layout.donut.borderColor"
10881088
:stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth"
10891089
:filter="getBlurFilter(i)"
10901090
/>
@@ -1093,14 +1093,14 @@ defineExpose({
10931093
<path v-for="(arc, i) in noGhostDonut" class="vue-ui-donut-arc-path"
10941094
:data-cy="`donut-arc-pattern-${arc.patternIndex}`" :d="arc.arcSlice"
10951095
:fill="`url(#${arc.pattern})`"
1096-
:stroke="FINAL_CONFIG.style.chart.backgroundColor"
1096+
:stroke="FINAL_CONFIG.style.chart.layout.donut.borderColorAuto ? FINAL_CONFIG.style.chart.backgroundColor : FINAL_CONFIG.style.chart.layout.donut.borderColor"
10971097
:stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth" :filter="getBlurFilter(i)" />
10981098
</g>
10991099
</template>
11001100

11011101
<template v-if="total && FINAL_CONFIG.type === 'polar'">
11021102
<g v-if="currentDonut.length > 1">
1103-
<path v-for="(arc, i) in noGhostDonut" :stroke="FINAL_CONFIG.style.chart.backgroundColor"
1103+
<path v-for="(arc, i) in noGhostDonut" :stroke="FINAL_CONFIG.style.chart.layout.donut.borderColorAuto ? FINAL_CONFIG.style.chart.backgroundColor : FINAL_CONFIG.style.chart.layout.donut.borderColor"
11041104
:d="polarAreas[i].path" fill="#FFFFFF"
11051105
:style="{
11061106
transition: isFirstLoad || !FINAL_CONFIG.serieToggleAnimation.show ? 'none' : `all ${FINAL_CONFIG.serieToggleAnimation.durationMs}ms ease-in-out`
@@ -1109,7 +1109,7 @@ defineExpose({
11091109
<g v-if="FINAL_CONFIG.style.chart.layout.donut.useShadow">
11101110
<path data-cy="polar-shadow" v-for="(_arc, i) in noGhostDonut" class="vue-ui-donut-arc-path"
11111111
:d="polarAreas[i].path" :fill="'transparent'"
1112-
:stroke="FINAL_CONFIG.style.chart.backgroundColor"
1112+
:stroke="FINAL_CONFIG.style.chart.layout.donut.borderColorAuto ? FINAL_CONFIG.style.chart.backgroundColor : FINAL_CONFIG.style.chart.layout.donut.borderColor"
11131113
:stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth"
11141114
:filter="`url(#drop_shadow_${uid})`"
11151115
:style="{
@@ -1122,7 +1122,7 @@ defineExpose({
11221122
<path v-for="(arc, i) in noGhostDonut" class="vue-ui-donut-arc-path"
11231123
:data-cy="`polar-arc-${arc.patternIndex}`" :d="polarAreas[i].path"
11241124
:fill="`url(#${arc.pattern})`"
1125-
:stroke="FINAL_CONFIG.style.chart.backgroundColor"
1125+
:stroke="FINAL_CONFIG.style.chart.layout.donut.borderColorAuto ? FINAL_CONFIG.style.chart.backgroundColor : FINAL_CONFIG.style.chart.layout.donut.borderColor"
11261126
:stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth"
11271127
:filter="getBlurFilter(i)"
11281128
:style="{
@@ -1133,7 +1133,7 @@ defineExpose({
11331133
<path v-for="(arc, i) in noGhostDonut" class="vue-ui-donut-arc-path" :data-cy="`donut-arc-${i}`"
11341134
:d="polarAreas[i].path"
11351135
:fill="FINAL_CONFIG.style.chart.useGradient ? `url(#polar_gradient_${i}_${uid})` : arc.color"
1136-
:stroke="FINAL_CONFIG.style.chart.backgroundColor"
1136+
:stroke="FINAL_CONFIG.style.chart.layout.donut.borderColorAuto ? FINAL_CONFIG.style.chart.backgroundColor : FINAL_CONFIG.style.chart.layout.donut.borderColor"
11371137
:stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth" :filter="getBlurFilter(i)"
11381138
:style="{
11391139
transition: isFirstLoad || !FINAL_CONFIG.serieToggleAnimation.show ? 'none' : `all ${FINAL_CONFIG.serieToggleAnimation.durationMs}ms ease-in-out`

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -714,6 +714,7 @@ function useTooltip({ datapoint, _relativeIndex, seriesIndex }) {
714714
selectedDonut.value = datapoint.arcOfId;
715715
selectedDatapoint.value = datapoint.id;
716716
selectedDatapointIndex.value = seriesIndex;
717+
selectedSerie.value = datapoint.id
717718
718719
dataTooltipSlot.value = {
719720
datapoint,
@@ -1237,15 +1238,16 @@ defineExpose({
12371238
<template v-if="item.hasData">
12381239
<g v-for="(arc, j) in item.donut.filter((el) => !el.ghost)">
12391240
<path data-cy="datapoint-arc" class="vue-ui-donut-arc-path" :d="arc.arcSlice"
1240-
:fill="arc.color" :stroke="FINAL_CONFIG.style.chart.backgroundColor"
1241+
:fill="arc.color"
1242+
:stroke="FINAL_CONFIG.style.chart.layout.donut.borderColorAuto ? FINAL_CONFIG.style.chart.backgroundColor : FINAL_CONFIG.style.chart.layout.donut.borderColor"
12411243
:stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth"
12421244
:filter="getBlurFilter(arc, j)" />
12431245
</g>
12441246
</template>
12451247
<template v-else>
12461248
<g v-for="(arc, j) in item.skeleton">
12471249
<path data-cy="datapoint-arc" class="vue-ui-donut-arc-path" :d="arc.arcSlice"
1248-
:fill="arc.color" :stroke="FINAL_CONFIG.style.chart.backgroundColor"
1250+
:fill="arc.color" :stroke="FINAL_CONFIG.style.chart.layout.donut.borderColorAuto ? FINAL_CONFIG.style.chart.backgroundColor : FINAL_CONFIG.style.chart.layout.donut.borderColor"
12491251
:stroke-width="FINAL_CONFIG.style.chart.layout.donut.borderWidth" />
12501252
</g>
12511253
</template>
@@ -1406,7 +1408,7 @@ defineExpose({
14061408
<g v-for="(item, i) in donuts">
14071409
<g v-for="(arc, j) in item.donut">
14081410
<path data-cy="tooltip-trap" :d="arc.arcSlice"
1409-
:fill="selectedSerie === i ? 'rgba(0,0,0,0.1)' : 'transparent'" @mouseenter="
1411+
:fill="selectedSerie === arc.id ? FINAL_CONFIG.style.chart.layout.donut.selectedColor : 'transparent'" @mouseenter="
14101412
useTooltip({
14111413
datapoint: arc,
14121414
relativeIndex: i,
@@ -1417,6 +1419,7 @@ defineExpose({
14171419
selectedDonut = null;
14181420
selectedDatapoint = null;
14191421
selectedDatapointIndex = null;
1422+
selectedSerie = null
14201423
" />
14211424
</g>
14221425
</g>

‎src/useConfig.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -829,7 +829,9 @@ export function useConfig() {
829829
useShadow: false,
830830
shadowColor: COLOR_BLACK,
831831
emptyFill: COLOR_GREY_LIGHT,
832-
selectedColor: '#0000001A'
832+
selectedColor: '#0000001A',
833+
borderColorAuto: true,
834+
borderColor: '#CCCCCC'
833835
}
834836
},
835837
comments: {
@@ -3297,7 +3299,10 @@ export function useConfig() {
32973299
spacingRatio: 0.5,
32983300
useShadow: false,
32993301
shadowColor: COLOR_BLACK,
3300-
emptyFill: COLOR_GREY_LIGHT
3302+
emptyFill: COLOR_GREY_LIGHT,
3303+
selectedColor: '#0000001A',
3304+
borderColorAuto: true,
3305+
borderColor: '#CCCCCC'
33013306
}
33023307
},
33033308
legend: {

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3393,6 +3393,8 @@ declare module "vue-data-ui" {
33933393
shadowColor?: string;
33943394
emptyFill?: string;
33953395
selectedColor?: string;
3396+
borderColorAuto?: boolean;
3397+
borderColor?: string;
33963398
};
33973399
};
33983400
comments?: ChartComments;
@@ -3563,6 +3565,9 @@ declare module "vue-data-ui" {
35633565
useShadow?: boolean;
35643566
shadowColor?: string;
35653567
emptyFill?: string;
3568+
selectedColor?: string;
3569+
borderColorAuto?: boolean;
3570+
borderColor?: string;
35663571
};
35673572
};
35683573
legend?: ChartBaseLegend & {

0 commit comments

Comments
 (0)