@kiva/kv-components 3.101.3 → 3.102.1

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.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)
+
+
+### Features
+
+* add underline styles for h3 ([#460](https://github.com/kiva/kv-ui-elements/issues/460)) ([b9ea2c4](https://github.com/kiva/kv-ui-elements/commit/b9ea2c4c56108064ad016f4c3c3376f2208f08dd))
+
+
+
+
+
 ## [3.101.3](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.101.2...@kiva/kv-components@3.101.3) (2024-09-13)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.101.3",
+  "version": "3.102.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -83,5 +83,5 @@
       "optional": true
     }
   },
-  "gitHead": "8f7c0ed1966ef7868217283ce8a6dce8d09e6ba6"
+  "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/KvThemeProvider.vue

@@ -84,8 +84,10 @@ export default {
 .tw-text-jumbo u,
 .tw-text-h1 u,
 .tw-text-h2 u,
+.tw-text-h3 u,
 h1 u,
-h2 u {
+h2 u,
+h3 u {
   text-decoration: none;
   box-decoration-break: clone;
   background-image: var(--heading-underline-primary);
@@ -106,7 +108,11 @@ h2 u {
   background-size: 100% 0.375rem;
   padding-bottom: 0.125rem;
 }
-
+.tw-text-h3 u,
+h3 u {
+  background-size: 100% 0.375rem;
+  padding-bottom: 0.2rem;
+}
 @screen lg {
 	.tw-text-jumbo u {
 		background-size: 100% 1rem;

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 }],
+};

package/vue/stories/KvThemeProvider.stories.js

@@ -50,6 +50,7 @@ const demoTemplate = `
 			<h1 class="tw-text-jumbo tw-mb-2">Jumbo: The quick <u>brown fox</u> jumped <u>over the lazy dog</u></h1>
 			<h1 class="tw-mb-2">H1: The quick <u>brown fox</u> jumped <u>over the lazy dog</u></h1>
 			<h2 class="tw-mb-2">H2: The quick <u>brown fox</u> jumped <u>over the lazy dog</u></h2>
+			<h3 class="tw-mb-2">H3: The quick <u>brown fox</u> jumped <u>over the lazy dog</u></h3>
 			<p>Body text: Voluptate culpa qui excepteur irure ad. Culpa commodo aliquip irure sunt do. Irure incididunt consequat reprehenderit ipsum mollit esse. Ex veniam nulla consequat deserunt fugiat est do in do sint sint ex.</p>
 		</section>
 		<kv-grid as="section" class="tw-grid-cols-2 tw-p-4 tw-gap-2" style="background-color: gray;">