enfrancais-app/src/pages/library/TreeMap.vue

<template>
  <b-overlay :show="loading" class="h-100 position-absolute">
    <node-map
      v-if="!loading"
      v-bind="mapData"
      :show-id="true"
      v-on="$listeners"
    />
  </b-overlay>
</template>

<script>
import NodeMap from '@/components/NodeMap'
import { toManyManyData } from '@/helpers/d3Data'


export default {
  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>

<style lang="scss" scoped>
</style>