@kiva/kv-components 3.95.1 → 3.97.0

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.97.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.96.0...@kiva/kv-components@3.97.0) (2024-08-29)
+
+
+### Features
+
+* emitted event added to pie chart component ([#452](https://github.com/kiva/kv-ui-elements/issues/452)) ([1d95611](https://github.com/kiva/kv-ui-elements/commit/1d95611471b25b3c2f5fb9e26431295bd1942a1f))
+
+
+
+
+
+# [3.96.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.95.1...@kiva/kv-components@3.96.0) (2024-08-28)
+
+
+### Features
+
+* async countries border data import ([#451](https://github.com/kiva/kv-ui-elements/issues/451)) ([aa27135](https://github.com/kiva/kv-ui-elements/commit/aa2713540d61ad2cd780a0fdfbfd8249030d9cbd))
+
+
+
+
+
 ## [3.95.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.95.0...@kiva/kv-components@3.95.1) (2024-08-28)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.95.1",
+  "version": "3.97.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -84,5 +84,5 @@
       "optional": true
     }
   },
-  "gitHead": "731d35dd8d4d09b1688ce93fad36c6fe993b88e6"
+  "gitHead": "00a1948fdc646666968cd5c98ef55c0e810d5ee4"
 }

package/vue/KvMap.vue

@@ -15,7 +15,6 @@
 <script>
 import kvTokensPrimitives from '@kiva/kv-tokens/primitives.json';
 import { animationCoordinator, generateMapMarkers, getCountryColor } from '../utils/mapUtils';
-import countriesBorders from '../data/countries-borders.json';
 
 export default {
 	name: 'KvMap',
@@ -164,6 +163,7 @@ export default {
 			mapLibreReady: false,
 			mapLoaded: false,
 			zoomActive: false,
+			countriesBorders: {},
 		};
 	},
 	computed: {
@@ -201,7 +201,11 @@ export default {
 			}
 		},
 	},
-	mounted() {
+	async mounted() {
+		if (this.countriesData) {
+			this.countriesBorders = await import('../data/countries-borders.json');
+		}
+
 		if (!this.mapLibreReady && !this.leafletReady) {
 			this.initializeMap();
 		}
@@ -498,7 +502,7 @@ export default {
 			});
 		},
 		getCountriesData() {
-			const countriesFeatures = countriesBorders.features ?? [];
+			const countriesFeatures = this.countriesBorders.features ?? [];
 
 			countriesFeatures.forEach((country, index) => {
 				const countryData = this.countriesData.find((data) => data.isoCode === country.properties.ISO_A2);
@@ -508,7 +512,7 @@ export default {
 				}
 			});
 
-			return countriesBorders;
+			return this.countriesBorders;
 		},
 		countryStyle(feature) {
 			return {

package/vue/KvPieChart.vue

@@ -29,8 +29,8 @@
 					:stroke="slice.color"
 					:stroke-width="lineWidth"
 					fill="none"
-					@mouseenter="activeSlice = slice"
-					@click="activeSlice = slice"
+					@mouseenter="setActiveSlice(slice)"
+					@click="setActiveSlice(slice)"
 				/>
 			</svg>
 			<!-- active slice -->
@@ -59,8 +59,8 @@
 					v-for="(slice, index) in slices.slice(pageIndex * slicesPerPage, (pageIndex + 1) * slicesPerPage)"
 					:key="index"
 					class="tw-flex tw-items-center"
-					@mouseenter="activeSlice = slice"
-					@click="activeSlice = slice"
+					@mouseenter="setActiveSlice(slice)"
+					@click="setActiveSlice(slice)"
 				>
 					<div
 						class="tw-w-2 tw-h-2 tw-mr-1 tw-rounded-full tw-flex-none"
@@ -125,7 +125,10 @@ export default {
 			default: () => ([]),
 		},
 	},
-	setup(props) {
+	emits: [
+		'click',
+	],
+	setup(props, { emit }) {
 		const {
 			values,
 		} = toRefs(props);
@@ -200,6 +203,11 @@ export default {
 			}
 		};
 
+		const setActiveSlice = (slice) => {
+			activeSlice.value = slice;
+			emit('click', slice.label);
+		};
+
 		return {
 			svgSize,
 			lineWidth,
@@ -213,6 +221,7 @@ export default {
 			pageCount,
 			prevPage,
 			nextPage,
+			setActiveSlice,
 		};
 	},
 };