import { Spec } from 'vega';

export const spec: Spec = {
  $schema: 'https://vega.github.io/schema/vega/v5.json',
  width: 600,
  height: 1900,
  padding: 5,

  signals: [
    {
      name: 'labels',
      value: true,
      bind: { input: 'checkbox' }
    },
    {
      name: 'layout',
      value: 'cluster',
      bind: { input: 'radio', options: ['tidy', 'cluster'] }
    },
    {
      name: 'links',
      value: 'orthogonal',
      bind: {
        input: 'select',
        options: ['line', 'curve', 'diagonal', 'orthogonal']
      }
    },
    {
      name: 'separation',
      value: false,
      bind: { input: 'checkbox' }
    }
  ],

  data: [
    {
      name: 'tree',
      url: 'data/flare.json',
      transform: [
        {
          type: 'stratify',
          key: 'id',
          parentKey: 'parent'
        },
        {
          type: 'tree',
          method: { signal: 'layout' },
          size: [{ signal: 'height' }, { signal: 'width - 100' }],
          separation: { signal: 'separation' },
          as: ['y', 'x', 'depth', 'children']
        }
      ]
    },
    {
      name: 'links',
      source: 'tree',
      transform: [
        { type: 'treelinks' },
        {
          type: 'linkpath',
          orient: 'horizontal',
          shape: { signal: 'links' }
        }
      ]
    }
  ],

  scales: [
    {
      name: 'color',
      type: 'linear',
      range: { scheme: 'magma' },
      domain: { data: 'tree', field: 'depth' },
      zero: true
    }
  ],

  marks: [
    {
      type: 'path',
      from: { data: 'links' },
      encode: {
        update: {
          path: { field: 'path' },
          stroke: { value: '#ccc' }
        }
      }
    },
    {
      type: 'text',
      from: { data: 'tree' },
      encode: {
        enter: {
          text: { field: 'name' },
          fontSize: { value: 8 },
          baseline: { value: 'middle' }
        },
        update: {
          x: { field: 'x' },
          y: { field: 'y' },
          dx: { signal: 'datum.children ? -3 : 2' },
          align: { signal: "datum.children ? 'right' : 'left'" },
          opacity: { signal: 'labels ? 1 : 0' }
        }
      }
    }
  ]
};
