import * as d3 from 'd3'
global.d3 = d3

const data = [
  {"name": "Eve",   "parent": ""},
  {"name": "Cain",  "parent": "Eve"},
  {"name": "Seth",  "parent": "Eve"},
  {"name": "Enos",  "parent": "Seth"},
  {"name": "Noam",  "parent": "Seth"},
  {"name": "Abel",  "parent": "Eve"},
  {"name": "Awan",  "parent": "Eve"},
  {"name": "Enoch", "parent": "Awan"},
  {"name": "Azura", "parent": "Eve"}
]

const width = 600
const height = 600

const root = d3.stratify().id(d => d.name).parentId(d => d.parent)(data)
const tree = d3.tree().size([width, height-150])
               .separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth)

global.root = root
global.tree = tree(root)

const container = d3.select('#chart')
  .append('svg')
    .attr('width', width)
    .attr('height', height)
  .append('g')
    .attr("transform", "translate(40, 0)")

const link = d3.linkHorizontal()
  .x(d => d.y)
  .y(d => d.x)

container.selectAll('path')
  .data(root.links())
  .enter()
  .append('path')
  .attr('d', link)
  .attr('fill', 'none')
  .attr('stroke', 'brown')
  .attr('stroke-width', 2)

const node = container.selectAll('g')
  .data(root.descendants())
  .enter()
  .append('g')
    .attr('transform', d => 'translate(' + d.y + ',' + d.x + ')')

const circle = node.append('circle')
  .attr('r', 4.5)
  .attr('stroke', 'black')
  .attr('stroke-width', '1')
  .attr('fill', 'yellow')

node.append('text')
  .text(n => n.data.name)