@kiva/kv-components 3.102.0 → 3.102.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.102.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.102.0...@kiva/kv-components@3.102.1) (2024-09-23)
+
+
+### Bug Fixes
+
+* pie chart not visible with only one value MP-791 ([6419cd8](https://github.com/kiva/kv-ui-elements/commit/6419cd8d0f348d32dddadd4170f87a6442bf1b29))
+
+
+
+
+
 # [3.102.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.101.3...@kiva/kv-components@3.102.0) (2024-09-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.102.0",
+  "version": "3.102.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -83,5 +83,5 @@
       "optional": true
     }
   },
-  "gitHead": "20b68474c85a4df97dcf32d6a234a237f02cb9ae"
+  "gitHead": "6e2360df11de20e781c327c45d43fd8d4dae1c58"
 }

package/vue/KvPieChart.vue

@@ -174,10 +174,18 @@ export default {
 				const value = values.value[i];
 				const end = start + value.percent;
 				const [startX, startY] = circumPointFromAngle(cX, cY, r, start * Math.PI * 2);
-				const [endX, endY] = circumPointFromAngle(cX, cY, r, end * Math.PI * 2);
-				const largeArc = value.percent > 0.5 ? 1 : 0;
-				// Draw just the outer arc of the slice
-				const path = `M ${startX} ${startY} A ${r} ${r} 0 ${largeArc} 1 ${endX} ${endY}`;
+				let path = `M ${startX},${startY} `;
+				if (value.percent === 1) {
+					// 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} `;
+					path += `A ${r},${r} 0 0,1 ${startX},${startY}`;
+				} else {
+					// Draw just the outer arc of the slice
+					const [endX, endY] = circumPointFromAngle(cX, cY, r, end * Math.PI * 2);
+					const largeArc = value.percent > 0.5 ? 1 : 0;
+					path += `A ${r},${r} 0 ${largeArc},1 ${endX},${endY}`;
+				}
 				slicesArr.push({
 					...value,
 					path,

package/vue/stories/KvPieChart.stories.js

@@ -40,3 +40,8 @@ export const ManyValues = Template.bind({});
 ManyValues.args = {
 	values: sectorValues,
 };
+
+export const OneValue = Template.bind({});
+OneValue.args = {
+	values: [{ label: 'Female', value: 1, percent: 1 }],
+};