@kiva/kv-components 3.102.3 → 3.102.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/package.json +2 -2
- package/vue/KvPieChart.vue +13 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,28 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.102.5](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.102.4...@kiva/kv-components@3.102.5) (2024-10-08)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* activeSlice value isn't comparable because it's a Proxy, use toRaw ([046a4c1](https://github.com/kiva/kv-ui-elements/commit/046a4c1518a751f8a6d47ff970a0fd6583655f59))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [3.102.4](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.102.3...@kiva/kv-components@3.102.4) (2024-10-04)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
* pie chart not animating in vue 3 ([c15efec](https://github.com/kiva/kv-ui-elements/commit/c15efec2cebf39fcafaa0eb533bd6ef8ffab2d6d))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
## [3.102.3](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.102.2...@kiva/kv-components@3.102.3) (2024-09-30)
|
|
7
29
|
|
|
8
30
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-components",
|
|
3
|
-
"version": "3.102.
|
|
3
|
+
"version": "3.102.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"optional": true
|
|
84
84
|
}
|
|
85
85
|
},
|
|
86
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "bb14366bd43ee865345ce371e52e4103791eb7c0"
|
|
87
87
|
}
|
package/vue/KvPieChart.vue
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
v-for="(slice, index) in slices"
|
|
24
24
|
:key="index"
|
|
25
25
|
class="tw-origin-center tw-transition-transform"
|
|
26
|
-
:style="
|
|
26
|
+
:style="isSliceActive(slice) ? { transform: 'scale(1.1)' } : {}"
|
|
27
27
|
:d="slice.path"
|
|
28
28
|
:stroke="slice.color"
|
|
29
29
|
:stroke-width="lineWidth"
|
|
@@ -97,7 +97,12 @@
|
|
|
97
97
|
|
|
98
98
|
<script>
|
|
99
99
|
import numeral from 'numeral';
|
|
100
|
-
import {
|
|
100
|
+
import {
|
|
101
|
+
ref,
|
|
102
|
+
toRaw,
|
|
103
|
+
toRefs,
|
|
104
|
+
computed,
|
|
105
|
+
} from 'vue-demi';
|
|
101
106
|
import Alea from '../utils/Alea';
|
|
102
107
|
import KvLoadingPlaceholder from './KvLoadingPlaceholder.vue';
|
|
103
108
|
|
|
@@ -174,7 +179,7 @@ export default {
|
|
|
174
179
|
const end = start + value.percent;
|
|
175
180
|
const [startX, startY] = circumPointFromAngle(cX, cY, r, start * Math.PI * 2);
|
|
176
181
|
let path = `M ${startX},${startY} `;
|
|
177
|
-
if (value.percent
|
|
182
|
+
if (value.percent > 0.99) {
|
|
178
183
|
// Draw a full circle in two arcs
|
|
179
184
|
const [midX, midY] = circumPointFromAngle(cX, cY, r, (start + end) * Math.PI);
|
|
180
185
|
path += `A ${r},${r} 0 0,1 ${midX},${midY} `;
|
|
@@ -210,6 +215,10 @@ export default {
|
|
|
210
215
|
}
|
|
211
216
|
};
|
|
212
217
|
|
|
218
|
+
const isSliceActive = (slice) => {
|
|
219
|
+
return toRaw(activeSlice.value) === slice;
|
|
220
|
+
};
|
|
221
|
+
|
|
213
222
|
const setActiveSlice = (slice) => {
|
|
214
223
|
activeSlice.value = slice;
|
|
215
224
|
emit('click', slice.label);
|
|
@@ -228,6 +237,7 @@ export default {
|
|
|
228
237
|
pageCount,
|
|
229
238
|
prevPage,
|
|
230
239
|
nextPage,
|
|
240
|
+
isSliceActive,
|
|
231
241
|
setActiveSlice,
|
|
232
242
|
};
|
|
233
243
|
},
|