<script>
    import { quantize, interpolatePlasma, pie, arc } from 'd3';
    import data from './pie-data' // or pass data to component as prop
      
    const width = $ChartDocs[0].value // outer width of the chart, in pixels
    const height = width // outer height of the chart, in pixels
    const percent = $ChartDocs[1].value // format values as percentages (true/false)
    const fontSize = $ChartDocs[2].value; // font size of the x and y values
    const strokeWidth = $ChartDocs[3].value; // width of stroke separating wedges
    const strokeLinejoin = 'round'; // line join style of stroke separating wedges
    const outerRadius = Math.min(width, height) * 0.5 - 60; // outer radius of the circle, in pixels
    const innerRadius = $ChartDocs[4].value; // inner radius of the chart, in pixels
    const labelRadius = (innerRadius * 0.2 + outerRadius * 0.8); // center radius of labels
    const strokeColorWOR = $ChartDocs[5].value; // stroke color when inner radius is greater than 0
    const strokeColorWIR = $ChartDocs[6].value; // stroke color when inner radius is 0
    const stroke = innerRadius > 0 ? strokeColorWIR : strokeColorWOR; // stroke separating widths
    const padAngle = stroke === 'none' ? 1 / outerRadius : 0; // angular separation between wedges
  
    const x = Object.keys(data[0])[0];
    const y = Object.keys(data[0])[1];
    const xVals = data.map((el) => el[x]);
    let yVals = data.map((el) => Number(el[y]));
    if (percent) {
      const total = yVals.reduce((a, b) => a + b, 0);
      yVals = yVals.map((el) => el / total);
    }
    const iVals = data.map((el, i) => i);
  
    // colors can be adjusted manually by creating a color array which length matches length of data set.
    let colors;
    if (!colors) colors = quantize(t => interpolatePlasma(t * 0.7 + 0.3), xVals.length);
  
    const wedges = pie().
      padAngle(padAngle).
      sort(null).
      value(i => yVals[i])(iVals);
  
    const arcPath = arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius);
  
    const arcLabel = arc()
      .innerRadius(labelRadius)
      .outerRadius(labelRadius);
  </script>
  
  <svg {width} {height} viewBox="{-width / 2} {-height / 2} {width} {height}">
    {#each wedges as wedge, i}
      <path fill={colors[i]} d={arcPath(wedge)} stroke={stroke} stroke-width={strokeWidth} stroke-linejoin={strokeLinejoin} />
      <g text-anchor='middle' transform='translate({arcLabel.centroid(wedge)})'>
        <text font-size={fontSize}>
          <tspan font-weight='bold'>{xVals[i]}</tspan>
          <tspan x = '0' dy='1.1em'>{percent ? `${(yVals[i] * 100).toFixed(2)}%` : yVals[i].toLocaleString('en-US')}</tspan>
        </text>
      </g>
    {/each}
  </svg>
    
  <style>
  </style>

export default [
  {ages:'<5', count:'19736'},
  {ages:'5-9', count:'20212'},
  {ages:'10-14', count:'20827'},
  {ages:'15-19', count:'20849'},
  {ages:'20-24', count:'21254'},
  {ages:'25-29', count:'23277'},
  {ages:'30-34', count:'21932'},
  {ages:'35-39', count:'21443'},
  {ages:'40-44', count:'19584'},
  {ages:'45-49', count:'20345'},
  {ages:'50-54', count:'20355'},
  {ages:'55-59', count:'21163'},
  {ages:'60-64', count:'20592'},
  {ages:'65-69', count:'17356'},
  {ages:'70-74', count:'14131'},
  {ages:'75-79', count:'9357'},
  {ages:'80-84', count:'6050'},
  {ages:'≥85', count:'5893'}
];

    const data = [
        { xKey: x-value1, yKey: y-value1 }, 
        { xKey: x-value2, yKey: y-value2 }, 
        { xKey: x-value3, yKey: y-value3 },
        //insert additional JSON data ...
    ]