import CanvasOrgChart from 'canvas-orgchart'

const canvas = document.getElementById('canvas')
const canvasOrgChart = new CanvasOrgChart(options)

canvasOrgChart.render(canvas, data)

{
  name: 'father', // necessary.
  avatar: '',
  sex: 0,
  children: [ // necessary and must be an array.
    {
      name: 'self',
      avatar: '',
      sex: 0,
      children: []
    }
  ]
}

options = {
  width: 0, // auto
  height: 0,
  scale: [1, 1],
  originX: 0,
  originY: 0,
  padding: [10, 50],
  node: {
    width: 60,
    height: 160,
    spacing: [20, 20],
    color: 'white',
    background: 'cornflowerblue',
    customBackgrounds: [
      {
        attributeName: 'sex',
        checkOwn: false,
        color: {
          0: 'cornflowerblue',
          1: 'lightcoral'
        }
      },
      {
        attributeName: 'self',
        checkOwn: true,
        color: 'black'
      }
    ],
    defaultAvatar: '/images/male.jpg',
    customAvatar: {
      attributeName: 'sex',
      avatars: {
        0: '/images/male.jpg',
        1: '/images/female.jpg'
      }
    },
  },
  nodeTemplate: [
    {
      attributeName: 'spouse',
      checkOwn: true,
      width: 120,
      draw: function(that, ctx, x, y, node) {
        that.drawAvatar(ctx, x, y, node)
        that.drawAvatar(ctx, x + this.width / 2, y, node.spouse)
        // node color
        if (node.sex === 0) {
          ctx.fillStyle = 'cornflowerblue'
        } else {
          ctx.fillStyle = 'lightcoral'
        }
      
        ctx.fillRect(x, y + that.nodeWidth, that.nodeWidth, that.nodeHeight - that.nodeWidth)
        if (node.spouse && node.spouse.sex === 0) {
          ctx.fillStyle = 'cornflowerblue'
        } else if (node.spouse && node.spouse.sex === 1) {
          ctx.fillStyle = 'lightcoral'
        }
        ctx.fillRect(x + this.width / 2, y + that.nodeWidth, that.nodeWidth, that.nodeHeight - that.nodeWidth)
        ctx.stroke()
        const textHeight = that.nodeHeight - that.nodeWidth
        that.drawVerticalText(ctx, x, y + that.nodeWidth, that.nodeWidth, textHeight, node.name)
        that.drawVerticalText(ctx, x + this.width / 2, y + that.nodeWidth, that.nodeWidth, textHeight, node.spouse.name)
      }
    }
  ]
}