{{#d3-graph classNames="ember-sparkles--pie-chart" as |d3|}}
{{#let 
  (d3-arc outerRadius=(sub radius 10) innerRadius=0) 
  (compute (d3-pie valueFn=outputKey) data)
  (div width 2)
  (div height 2)
as |arc pie centerWidth centerHeight|}}

  {{d3.graph (pipe
  (d3-select-all 'path')
  (d3-data pie)
  (d3-join
    enter=(pipe
      (d3-append 'path')
      (d3-attr 'class' (pipe groupKey (r 'dasherize')))
      (d3-attr 'transform' (i 'translate(${w},${h})' h=centerHeight w=centerWidth))
      (if with-transition (d3-transition transition) (d3-noop))
      (d3-attr-tween 'd' (d3-arc-tween arc))
      (d3-style 'fill' (pipe groupKey colorScale))
      (d3-attr 'opacity' 1)
    )
    update=(pipe
      (if with-transition (d3-transition transition) (d3-noop))
      (d3-attr 'transform' (i 'translate(${w},${h})' h=centerHeight w=centerWidth))
      (d3-attr-tween 'd' (d3-arc-tween arc))
      (d3-style 'fill' (pipe groupKey colorScale))
    )
    exit=(pipe
      (if with-transition (d3-transition transition) (d3-noop))
      (d3-attr 'opacity' 0)
      (d3-remove)
    )
))}}


{{d3.graph (pipe
  (d3-select-all 'text')
  (d3-data pie)
  (d3-join
    enter=(pipe
      (d3-append 'text')
      (d3-attr 'class' (pipe groupKey (r 'dasherize')))
      (d3-attr 'opacity' 0)
      (if with-transition (d3-transition transition) (d3-noop))
      (d3-attr 'opacity' 1)
      (d3-attr 'transform' (e-s/arc-translate arc height=centerHeight width=centerWidth))
      (d3-text (r/get 'data.percentage'))
    )
    update=(pipe
      (if with-transition (d3-transition transition) (d3-noop))
      (d3-attr 'transform' (e-s/arc-translate arc height=centerHeight width=centerWidth))
      (d3-text (r/get 'data.percentage'))
    )
    exit=(pipe
      (if with-transition (d3-transition transition) (d3-noop))
      (d3-attr 'opacity' 0)
      (d3-remove)
    )
))}}

{{/let}}
{{/d3-graph}}