setup map display

src/pages/library/TreeMap.vue

@@ -1,10 +1,44 @@
 <template>
-  <component-debug :component="this" />
+  <b-overlay :show="loading" class="h-100 position-absolute">
+    <node-map
+      v-if="!loading"
+      v-bind="mapData"
+      :show-id="true"
+    />
+  </b-overlay>
 </template>
 
 <script>
+import NodeMap from '@/components/NodeMap'
+import { toManyManyData } from '@/helpers/d3Data'
+
+
 export default {
-  name: 'TreeMap'
+  name: 'TreeMap',
+
+  components: {
+    NodeMap
+  },
+
+  props: {
+    id: { type: Number, default: 1 }
+  },
+
+  data () {
+    return {
+      loading: true,
+      depth: 3,
+      mapData: { nodes: null, links: null }
+    }
+  },
+
+  created () {
+    const { id, depth } = this
+    this.$store.dispatch('GET_TREE_WITH_DEPTH', { id, depth }).then((data) => {
+      this.mapData = toManyManyData(data)
+      this.loading = false
+    })
+  }
 }
 </script>