VueUiTreemap new component

Author: graphieros

package-lock.json

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

package.json

@@ -3139,6 +3139,9 @@ function treemapSelect(data) {
       </template>
       </Box>
 
+      <TreemapTest :dataset="treemapDataset" :config="treemapConfig" @selectLegend="treemapSelect" @selectDatapoint="treemapSelect">
+          </TreemapTest>
+
       <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_treemap)">
         <template #title>
           <BaseIcon name="chartTreemap"/>
@@ -3148,17 +3151,6 @@ function treemapSelect(data) {
         </template>
         <template #dev>
           <TreemapTest :dataset="treemapDataset" :config="treemapConfig" @selectLegend="treemapSelect" @selectDatapoint="treemapSelect">
-            <template #rect="{ rect, shouldShow, fontSize, isZoom, textColor }">
-              <div v-if="shouldShow" :style="`font-size:${fontSize}px;color:${textColor}`">
-                {{ rect.color }} {{  isZoom }}
-              </div>
-            </template>
-            <!-- <template #tooltip-before="{ seriesIndex, datapoint, series, config }">
-              {{ datapoint.name }}
-            </template>
-            <template #tooltip-after="{ seriesIndex, datapoint, series, config }">
-              {{ seriesIndex }}
-            </template> -->
           </TreemapTest>
         </template>
         <template #prod>

src/App.vue

@@ -657,10 +657,13 @@ defineExpose({
 .vue-ui-treemap-zoom-info {
     pointer-events: none;
     position: absolute;
-    top: calc(50% + 30px);
+    top: 50%;
     left: 50%;
+    height: 100%;
+    width:100%;
+    display: flex;
+    align-items:center;
+    justify-content:center;
     transform: translate(-50%, -50%);
 }
-.vue-data-ui-legend {
-}
 </style>