VueUiRelationCircle reset on click outside

Author: graphieros

README.md

@@ -9,9 +9,11 @@
 
 
 # vue-data-ui
+![npm](https://img.shields.io/npm/v/vue-data-ui)
 [![MadeWithVueJs.com shield](https://madewithvuejs.com/storage/repo-shields/4526-shield.svg)](https://madewithvuejs.com/p/vue-data-ui/shield-link)
-[![Socket Badge](https://socket.dev/api/badge/npm/package/vue-data-ui)](https://socket.dev/npm/package/vue-data-ui)
 ![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)
+![NPM](https://img.shields.io/npm/l/vue-data-ui)
+![npm](https://img.shields.io/npm/dt/vue-data-ui)
 ![Static Badge](https://img.shields.io/badge/components-26-green)
 
 [Interactive documentation](https://vue-data-ui.graphieros.com/)

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.1",
+  "version": "1.9.2",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

package.json

@@ -3532,6 +3532,16 @@ const showLocalTest = ref(false);
     <button @click="printRelation">PRINT RELATION CIRCLE</button>
     <button @click="printThermo">PRINT THERMO</button>
 
+    <div style="max-width: 1000px; margin: 0 auto">
+      <RelationTest
+        ref="relation"
+        :dataset="relationDataset"
+        :config="relationConfig"
+        v-if="showLocalTest"
+      />
+      <VueUiRelationCircle ref="relation" v-if="!showLocalTest" :dataset="relationDataset" :config="relationConfig"/>
+    </div>
+
     <div style="max-width: 1000px; margin: 0 auto; margin-bottom: 48px">
       <VueUiSparkline
         v-if="!showLocalTest"
@@ -3678,15 +3688,7 @@ const showLocalTest = ref(false);
       <ThermoTest ref="thermo" v-if="showLocalTest" :dataset="thermoDataset" :config="thermoConfig" />
       <VueUiThermometer ref="thermo" v-if="!showLocalTest" :dataset="thermoDataset" :config="thermoConfig" />
     </div>
-    <div style="max-width: 1000px; margin: 0 auto">
-      <RelationTest
-        ref="relation"
-        :dataset="relationDataset"
-        :config="relationConfig"
-        v-if="showLocalTest"
-      />
-      <VueUiRelationCircle ref="relation" v-if="!showLocalTest" :dataset="relationDataset" :config="relationConfig"/>
-    </div>
+
     <div style="max-width: 1000px; margin: 0 auto; margin-bottom: 48px">
       <VueUiSkeleton
         v-if="!showLocalTest"

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted } from "vue";
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
 import { convertConfigColors, treeShake, palette } from "../lib.js";
 import pdf from "../pdf";
 import mainConfig from "../default_configs.json";
@@ -75,8 +75,25 @@ const radiusOffset = computed(() => {
 onMounted(() => {
     createPlots();
     createRelations();
+    const chart = document.getElementById(`relation_circle_${uid.value}`);
+    chart.addEventListener("click", clickOutside);
 });
 
+onBeforeUnmount(() => {
+    const chart = document.getElementById(`relation_circle_${uid.value}`);
+    chart.removeEventListener("click", clickOutside);
+})
+
+function clickOutside(e) {
+    const target = e.target;
+    if(target && Array.from(target.classList).includes("vue-ui-relation-circle-legend")) {
+        return;
+    } else {
+        selectedPlot.value = {};
+        selectedRelations.value = [];
+    }
+}
+
 function createPlots() {
     const angleGap = 6.28319 / limitedDataset.value.length;
     const regAngleGap = 360 / limitedDataset.value.length;