{{#let 
  (pipe
    (d3-append 'rect')
    (d3-attr 'width' 0)
    (d3-attr 'height' 0)
    (d3-attr 'x' (pipe groupKey groupScale))
    (d3-attr 'y' height)
    (d3-style 'fill' 'red')
    (d3-style 'opacity' 0)
  )

  (pipe
    (if with-transition (d3-transition transition) (d3-noop))
    (d3-attr 'width' (e-s/bandwidth groupScale))
    (d3-attr 'height' (pipe valueKey yScale (e-s/bar-height height)))
    (d3-attr 'x' (pipe groupKey groupScale))
    (d3-attr 'y' (pipe valueKey yScale))
    (d3-style 'fill' (pipe groupKey colorScale))
    (d3-style 'opacity' 1)
  ) 

  (pipe
    (if with-transition (d3-transition transition) (d3-noop))
    (d3-attr 'y' height)
    (d3-attr 'height' 0)
    (d3-style 'fill' 'green')
    (d3-style 'opacity' 0)
    (d3-remove)
  )
as |enterRect updateRect exitRect|}}

{{d3-graph (pipe
  (d3-select-all '.rect-group')
  (d3-data data)
  (d3-join
    enter=(pipe
      (d3-append 'g')
      (d3-attr 'class' 'rect-group')
      (d3-attr 'transform' (pipe inputKey xScale (e-s/translate-x)))
      (d3-select-all 'rect')
      (d3-data outputKey)
      (d3-join
        enter=(pipe enterRect updateRect)
      )
    )
    update=(pipe
      (d3-call (pipe
        (d3-select-all 'rect')
        (d3-data outputKey)
        (d3-join
          enter=(pipe enterRect updateRect)
          update=updateRect
          exit=exitRect
        )
      ))
      (if with-transition (d3-transition transition) (d3-noop))
      (d3-attr 'transform' (pipe inputKey xScale (e-s/translate-x)))
    )
    exit=(pipe
      (d3-call (pipe
        (d3-select-all 'rect')
        (d3-data outputKey)
        (d3-join
          update=exitRect
          exit=exitRect
        )
      ))
      (if with-transition (d3-transition transition) (d3-noop))
      (d3-remove)
    )
  ))
  classNames='ember-sparkles--grouped-bar-chart'
}}

{{/let}}