AtAGlance Historical Charts and Other Related Stuff

Brian Lewis repo owner

Possible refactor

The GER and NER line charts do two things: 1) take the AtAGlance API, Indicator, and use that to construct the data set 2) plot those datasets as a line chart

Perhaps it is possible separate these concerns by "nesting" components.

ie suppose we have a 'AtaGlanceLineChart' component. It draws a line chart using all the formatting you want on the AtAGlance section.

It's template is as now - just a <div><syv></syv><div> to draw on

It's binding can be chartData; a Plottable.Dataset[] (ie Array<Plottabe.Dataset>). These are the datasets it will draw, set up with their expected metadata

Then we have e.g. GERLineChart . Its job is to construct the data to draw from the AtAGlance, then render that.

So it gets the AtAGlance, and makes the three datasets, set up with their metadata. It has a public property public chartData: Array<Dataset> to hold these

and its template looks like this:

<at-a-glance-line-chart chart-data="vm.chartData"></at-a-glance-line-chart>

So at the top level, your page will have the GERLineChart component:

<ger-line-chart at-a-glance="......."></ger-line-chart>

So GERLineChart needs to use the AtAGlance to build the chartData. It should do this in the (new in 1.5.5) $onChanges event.

So when the AtaGlance is set (it probably won't change) onChanges gets called and the public chartData is calculated.

the change in chartData will affect the binding in the template: <at-a-glance-line-chart chart-data="vm.chartData"></at-a-glance-line-chart>

So $onChanges will get fired in the at-a-glance-line-chart component. This where you will render the plottable chart, it already has the datasets available as the chartData binding.

Slight variation to this:

there's basically two ways now to get data into a component: 1) by the bindings 2) by injection into the controller

Now I think atAGlance in this model is a service, yes? So it's a singleton, and is probably better accessed via injection rather than a binding. So if you went this way, you would 1) remove ataglance from the bindings of GERLineChart 2) add atAGlance as a dependency, by change static $inject and the constructor signature.

That means you won;t get an onChanges event, becuase you've removed that binding. So you would calcuate public chartData from AtAGlance in the constructor instead.

Then at the top level, you are just going to have this:

<ger-line-chart></ger-line-chart> since without the binding you don't have the at-a-glance attribute.

2016-08-05T22:59:28+00:00

Ghislain Hachey reporter

Thanks for the refactor suggestion. I'll look at it eventually but for now I will concentrate on other priorities that stakeholders "can see". The more they like what they see the better my chances on staying on board this project and I will have better chance to come back to this suggested enhancement ;)

So I've created a seperate issue for that in #169

2016-08-16T02:13:10+00:00

Ghislain Hachey reporter

changed status to closed

feat(AtAGlance): add support for rough historical charts on AtAGlance pages

Note that the work has only been done in MandE/default for now and still must be replicated to country specific templates to adopt this

Closes ~~#159~~

→ <<cset 5de9efe1b85f>>

2016-08-16T03:03:32+00:00

Ghislain Hachey reporter

I'd like to PR this work. Do you think you could have a look. I can't get the tooltip to work properly with your method (using d3). I experimented with the example on plottable website but I can't following your d3 approach. Can you have a quick look I'm sure it's something simple but I wanted to get some other things done and felt like pushing this tooltip thing further down the queue on priority tasks.