Chart not working from model

[Redsandro]

I just started using this. I'm using the screencast from the README as a reference.

In my case, using mapBy on a model causes the chart to show no data. Just the background grid lines. When I hard-code the same data from my models, the chart does work.

I'm guessing this might have something to do with the async nature of models and calculations. Perhaps the data is passed to the chart before the promises are resolved. How do you guys work around this?

I've tried doing the await thing, but this adaption from the example screencast does not work either:

numberData: computed('model', async function() {
	const model = await this.get('model')
	const labels = await model.mapBy('label')
	const data = await model.mapBy('value')

	return {
		labels,
		datasets: [{
			label: 'Hours',
			data
		}]
	}
})

[Redsandro]

This doesn't work (anymore) indeed. Here is a workaround:

export default Component.extend({
	model	: null,
	labels	: mapBy('model', 'label'),
	data	: mapBy('model', 'value'),

	numberData: computed('labels','data', function() {
		const labels = this.get('labels')
		const data = this.get('data')

		if (labels.length == data.length) {
			return {
				labels,
				datasets: [{
					label: 'Tickets',
					data
				}]
			}
		}
	})
})

It would be nice to have updated README because now new users need to trial and error in order to figure out how to use this.