VueUiTreemap new component

Author: graphieros

package-lock.json

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

package.json

@@ -13,6 +13,10 @@ const props = defineProps({
         default() {
             return {}
         }
+    },
+    id: {
+        type: String,
+        default: ''
     }
 })
 
@@ -26,6 +30,7 @@ function handleClick(legend, i) {
 
 <template>
     <div
+        :id="id"
         :data-cy="config.cy"
         class="vue-data-ui-legend"
         :style="`background:${config.backgroundColor};font-size:${config.fontSize}px;color:${config.color};padding-bottom:${config.paddingBottom}px;font-weight:${config.fontWeight}`"

src/atoms/Legend.vue

@@ -572,9 +572,10 @@ defineExpose({
 
         <!-- LEGEND & LEGEND SLOT -->
         <Legend
-            v-if="treemapConfig.style.chart.legend.show"
+            v-if="treemapConfig.style.chart.legend.show && !isZoom"
             :legendSet="legendSet"
             :config="legendConfig"
+            :id="`treemap_legend_${uid}`"
             @clickMarker="({legend}) => segregate(legend)"
         >
             <template #item="{ legend, index }">