import { Spec } from 'vega';

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

  data: [
    {
      name: 'table',
      values: [12, 23, 47, 6, 52, 19],
      transform: [{ type: 'pie', field: 'data' }]
    }
  ],

  scales: [
    {
      name: 'r',
      type: 'sqrt',
      domain: { data: 'table', field: 'data' },
      zero: true,
      range: [20, 100]
    }
  ],

  marks: [
    {
      type: 'arc',
      from: { data: 'table' },
      encode: {
        enter: {
          x: { field: { group: 'width' }, mult: 0.5 },
          y: { field: { group: 'height' }, mult: 0.5 },
          startAngle: { field: 'startAngle' },
          endAngle: { field: 'endAngle' },
          innerRadius: { value: 20 },
          outerRadius: { scale: 'r', field: 'data' },
          stroke: { value: '#fff' }
        },
        update: {
          fill: { value: '#ccc' }
        },
        hover: {
          fill: { value: 'pink' }
        }
      }
    },

    {
      type: 'text',
      from: { data: 'table' },
      encode: {
        enter: {
          x: { field: { group: 'width' }, mult: 0.5 },
          y: { field: { group: 'height' }, mult: 0.5 },
          radius: { scale: 'r', field: 'data', offset: 8 },
          theta: { signal: '(datum.startAngle + datum.endAngle)/2' },
          fill: { value: '#000' },
          align: { value: 'center' },
          baseline: { value: 'middle' },
          text: { field: 'data' }
        }
      }
    }
  ]
};
