@kiva/kv-components 3.102.2 → 3.102.4

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+
+### Bug Fixes
+
+* pie chart not animating in vue 3 ([c15efec](https://github.com/kiva/kv-ui-elements/commit/c15efec2cebf39fcafaa0eb533bd6ef8ffab2d6d))
+
+
+
+
+
+## [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)
+
+
+### Bug Fixes
+
+* width classes added to pie chart ([#463](https://github.com/kiva/kv-ui-elements/issues/463)) ([77715e2](https://github.com/kiva/kv-ui-elements/commit/77715e2d27a19bbb9c3cdd5239a037ae04ee5715))
+
+
+
+
+
 ## [3.102.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.102.1...@kiva/kv-components@3.102.2) (2024-09-26)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.102.2",
+  "version": "3.102.4",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -83,5 +83,5 @@
       "optional": true
     }
   },
-  "gitHead": "045a91050100e52132289efff23cd542ac1ae89d"
+  "gitHead": "9d819f1b11475de5c5f728409069c241f399cc0f"
 }

package/vue/KvPieChart.vue

@@ -4,18 +4,17 @@
 		@mouseleave="activeSlice = null"
 	>
 		<!-- pie chart -->
-		<div class="tw-relative tw-h-full">
+		<div class="tw-relative">
 			<div
 				v-if="loading"
-				class="pie-placeholder tw-h-full tw-p-2.5"
+				class="pie-placeholder tw-mt-2.5"
 			>
-				<div class="tw-overflow-hidden tw-rounded-full tw-h-full">
+				<div class="tw-overflow-hidden tw-rounded-full">
 					<kv-loading-placeholder />
 				</div>
 			</div>
 			<svg
 				v-else
-				class="tw-h-full"
 				viewBox="0 0 32 32"
 				xmlns="http://www.w3.org/2000/svg"
 				xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -24,7 +23,7 @@
 					v-for="(slice, index) in slices"
 					:key="index"
 					class="tw-origin-center tw-transition-transform"
-					:style="activeSlice === slice ? { transform: 'scale(1.1)' } : {}"
+					:style="isSliceActive(slice) ? { transform: 'scale(1.1)' } : {}"
 					:d="slice.path"
 					:stroke="slice.color"
 					:stroke-width="lineWidth"
@@ -175,7 +174,7 @@ export default {
 				const end = start + value.percent;
 				const [startX, startY] = circumPointFromAngle(cX, cY, r, start * Math.PI * 2);
 				let path = `M ${startX},${startY} `;
-				if (value.percent === 1) {
+				if (value.percent > 0.99) {
 					// Draw a full circle in two arcs
 					const [midX, midY] = circumPointFromAngle(cX, cY, r, (start + end) * Math.PI);
 					path += `A ${r},${r} 0 0,1 ${midX},${midY} `;
@@ -211,6 +210,10 @@ export default {
 			}
 		};
 
+		const isSliceActive = (slice) => {
+			return activeSlice.value === slice;
+		};
+
 		const setActiveSlice = (slice) => {
 			activeSlice.value = slice;
 			emit('click', slice.label);
@@ -229,6 +232,7 @@ export default {
 			pageCount,
 			prevPage,
 			nextPage,
+			isSliceActive,
 			setActiveSlice,
 		};
 	},
@@ -236,14 +240,13 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-.pie-chart {
-	height: 40rem;
-	@screen md {
-		height: 20rem;
-	}
+.pie-chart svg {
+	width: 20rem;
+	height: 20rem;
 }
 
-.pie-placeholder {
-	width: 20rem;
+.pie-placeholder, .pie-placeholder div {
+	width: 17.5rem;
+	height: 17.5rem;
 }
 </style>