<v-chart
  class="chart rounded-xl"
  autoresize
  style="background-color: #cce5ec"
  :option="graphChartOptions"
></v-chart>

data () {
  return {
    everyLevelNodeCount: [6, 8, 12, 14],
    graphChartOptions: {
      title: {
        text: "Title",
        left: 20,
        top: 20,
      },
      tooltip: {
        trigger: "item",
        formatter(params) {
          const { dataType } = params;

          // if mouse hover edge, don't display anything.
          if (dataType === "edge") {
            return;
          }

          const { value: showData } = params.data;
          // avatar
          let tipText = `
              <div class="w-full h-16">
                <img class="w-16 h-16" src="avatars/100000000000000024.png" />
              </div>
            `;

          for (let key in showData) {
            tipText += `
                <div class="w-full mt-1 flex justify-between"> 
                  <span>${key}:</span>
                  <span class="font-bold">${showData[key]}</span>
                </div>
              `;
          }

          return `<div class="p-2" style="width: 250px; height: 150px;">${tipText}</div>`;
        },
      },
      legend: [
        {
          left: 40,
          top: "35%",
          itemGap: 20,
          itemWidth: 15,
          itemHeight: 15,
          orient: "vertical",
          data: ["user", "1st", "2st", "3st", "4st"],
        },
      ],
      animationDuration: 1500,
      animationEasingUpdate: "quinticInOut",
      series: [
        {
          type: "graph",
          layout: "force",
          force: {
            repulsion: 100,
            gravity: 0.01,
            edgeLength: 100,
          },
          roam: true,
          scaleLimit: {
            min: 0.5,
            max: 2,
          },
          zoom: 1,
          data: [],
          links: [],
          categories: [
            {
              name: "user",
            },
            {
              name: "1st",
            },
            {
              name: "2st",
            },
            {
              name: "3st",
            },
            {
              name: "4st",
            },
          ],
          label: {
            show: true,
          },
          lineStyle: {
            width: 3,
            curveness: 0,
          },
        },
      ],
    },
  }
}

methods: {
  // createNode for infinity level
  createNode() {
    // rootNode
    const root = {
      id: "0",
      name: `Myr0`,
      symbolSize: 100,
      value: {
        id: "0",
        user: `Myr0`,
        registerAt: new Date().toString().slice(0, 16)
      },
      category: 0,
    };
    this.dataStore.ui.B2EChartOptions.series[0].data.push(root);
    let symbolSize = 80; // node's size
    let id = 1;
    let category = 1;

    for (let i = 0, l = arguments.length; i < l; i++) {
      for (let j = 0, l2 = arguments[i]; j < l2; j++) {
        const node = {
          id: id + "",
          name: `Myr${id}`,
          symbolSize,
          value: {
            id,
            user: `Myr${id}`,
            registerAt: new Date().toString().slice(0, 16)
          },
          category,
        };
        id++;
        this.dataStore.ui.B2EChartOptions.series[0].data.push(node);
      }
      category++;
      symbolSize /= 1.5;
    }
  },

    createLink() {
      // record current node for source property
      let nodeIndex = 1;
      // confirming firstLevelNode's upperLevelNode
      for (let i = 0, l = arguments[0]; i < l; i++) {
        const link = {
          source: nodeIndex + "",
          target: "0",
        };
        nodeIndex++;
        this.dataStore.ui.B2EChartOptions.series[0].links.push(link);
      }

      let rangeMin = 1;
      let rangeMax = arguments[0];

      // confirming other node's upperLevelNode
      for (let i = 1, l = arguments.length; i < l; i++) {
        // everyLevelNodeCount: 6      8       10      14
        // upperLevelNodeRange: 0     1-6     7-14    16-25
        for (let j = 0, l2 = arguments[i]; j < l2; j++) {
          const random =
                Math.floor(Math.random() * (rangeMax - rangeMin + 1)) + rangeMin;
          const link = {
            source: nodeIndex + "",
            target: random + "",
          };
          nodeIndex++;
          this.dataStore.ui.B2EChartOptions.series[0].links.push(link);
        }

        rangeMin = rangeMax + 1;
        rangeMax = rangeMin + arguments[i] - 1;
      }
    },
},

  mounted () {
    this.createNode(...this.dataStore.data.everyLevelNodeCount);
    this.createLink(...this.dataStore.data.everyLevelNodeCount);
  },