Direction option and more lifecycle events

[Calvein]

I'm testing Plottable by doing a population pyramid chart and I came across some issues, first off, here is my code:

let xScale = new Plottable.Scales.Linear()
let yScale = new Plottable.Scales.Linear()

let maleData = [1, 2, 3, 4, 5, 6, 5, 4, 3, 2, 1]
let maleChart = new Plottable.Plots.Bar('horizontal')
    .addDataset(new Plottable.Dataset(maleData))
    .x((d, i) => d, xScale)
    .y((d, i) => i, yScale)
    .animated(true)
let maleAxis = new Plottable.Axes.Numeric(xScale, 'bottom')

let femaleData = [1, 2, 3, 4, 5, 6, 5, 4, 3, 2, 1]
let femaleChart = new Plottable.Plots.Bar('horizontal')
    .addDataset(new Plottable.Dataset(femaleData))
    .x((d, i) => d, xScale)
    .y((d, i) => i, yScale)
    .animated(true)
let femaleAxis = new Plottable.Axes.Numeric(xScale, 'bottom')

let chart = new Plottable.Components.Table([
    [maleChart, femaleChart]
  , [maleAxis, femaleAxis]
]).renderTo('svg')

As you may know, a population pyramid is just 2 bar plots, one against the other, the first one being read from the center to the left and the second one from the center to the right. That's my first problem here, I can't set the first plot (maleChart in my example) to be read from left to right, I tried to use xAlignment but it didn't change anything. I added the onAnchor method to edit it after it's being build, I wanted to get its element (the <g class="component">) and turn it by changing it's x scale to -1, but I can't get the component directly, only the entities, maybe a selection method that returns it could fix it ?

Even if this would have work, I was still going to have a problem since my chart is responsive. I can sure call chart.redraw() (which is awesome btw) but there isn't any event on my maleChart that tells me when it has been redrawn.

[jtlan]

Hello @Calvein,

xAlignment() and yAlignment() are used for aligning Components within cells, not changing the direction of the Plot. To reverse the direction of a Plot, pass its Scale a reversed domain:

http://jsfiddle.net/v6x6m1k5/

You'll also need to use separate X Scales for the two Plots. An alternative method is to plot one set of data as though it were negative, use a single X Scale and Axis, and use a formatter to display the absolute value:

http://jsfiddle.net/7bdvaj9v/

As to your other requests, we currently have API points for attaching callbacks that get invoked when the Component is anchor()ed and detach()ed. I think it'd be a good idea to add an API for callbacks after rendering, although when animations are enabled it's possible that the callbacks would fire before the rendering is fully complete.

[Calvein]

Thanks for this :)

[Calvein]

I'm closing this issue, I'll let you create new ones if you think that the API changes I was talking about are pertinent.