{{#d3-graph classNames="ember-sparkles--legend" as |d3|}}

  {{#let 
    (d3-attr 'transform'
      (i 'translate(${coords})' coords=(concat dx ',' dy))
    ) 

    (compute
      (action shapePositioner
        (or direction 'vertical')
        (or shape-spacing 20)
        (e-s/pojo x=dx y=dy)
      )
    )

    (get (e-s/pojo
      rect=(pipe
        (d3-append 'rect')
        (d3-attr 'width' (or shape-size 14))
        (d3-attr 'height' (or shape-size 14))
      )
      circle=(pipe
        (d3-append 'circle')
        (d3-attr 'r' (or shape-size 8))
      )
    ) shape)
  as |transform shapePositionerOpt addShape|}}

  {{d3.graph (pipe
    (d3-append 'g')
    (d3-attr 'class' 'legend')
    (d3-call transform)
  )}}

  {{d3.graph (pipe
    (d3-select-all shape)
    (d3-data domain)
    (d3-join
      enter=(pipe
        addShape
        (d3-attr 'transform' (i 'translate(0,${c})' c=width))
        (d3-attr 'opacity' 0)
        (if with-transition (d3-transition transition) (d3-noop))
        (d3-attr 'opacity' 1)
        (d3-attr 'transform' shapePositionerOpt)
        (d3-style 'fill' colorScale)
      )

      update=(pipe
        (if with-transition (d3-transition transition) (d3-noop))
        (d3-style 'fill' colorScale)
        (d3-attr 'transform' shapePositionerOpt)
      )
      exit=(pipe
        (d3-attr 'opacity' 1)
        (if with-transition (d3-transition transition) (d3-noop))
        (d3-attr 'opacity' 0)
        (d3-remove)
      )
    )
  )}}

  {{d3.graph (pipe
    (d3-select-all 'text')
    (d3-data domain)
    (d3-join
      enter=(pipe
        (d3-append 'text')
        (d3-attr 'dx' (or text-dx 38))
        (d3-attr 'dy' (or text-dy 10))
        (d3-style 'font-size' '11px')
        (d3-attr 'opacity' 0)
        (if with-transition (d3-transition transition) (d3-noop))
        (d3-attr 'opacity' 1)
        (d3-text (d3-get))
        (d3-attr 'transform' shapePositionerOpt)
      )

      update=(pipe
        (d3-text (d3-get))
        (if with-transition (d3-transition transition) (d3-noop))
        (d3-attr 'transform' shapePositionerOpt)
      )

      exit=(pipe
        (d3-attr 'opacity' 1)
        (if with-transition (d3-transition transition) (d3-noop))
        (d3-attr 'opacity' 0)
        (d3-remove)
      )
    ))}}

  {{/let}}

{{/d3-graph}}