AtAGlance Historical Chart Refactor

Evaluate Brian's suggestion:

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.

Comments (2)