/* global d3 */

const axis = ((() => {
  const axisLocal = d3.local();
  return d3.component('g')
    .create(function (selection, d) {
      axisLocal.set(selection.node(), d3[`axis${d.type}`]());
      selection
        .attr('opacity', 0)
        .call(axisLocal.get(selection.node())
          .scale(d.scale)
          .ticks(d.ticks || 10))
          .transition('opacity').duration(2000)
            .attr('opacity', 0.8);
    })
    .render(function (selection, d) {
      selection
        .attr('transform', `translate(${[
          d.translateX || 0,
          d.translateY || 0,
        ]})`)
        .transition('ticks').duration(3000)
          .call(axisLocal.get(selection.node()));
    });
})());