Our first Smart Chart example will be a simple table: however you may choose to make it as complex and customized as you wish.
We will code it in three steps:
Creating the chart in your agent (so that the data can be dynamically loaded)
Loading that data inside of the component (and passing it down to the template)
Writing a template
agent.addChart('myTableChart',async (context, resultBuilder) => {// You may want to load the data dynamically// [...]returnresultBuilder.smart([ { username:'Darth Vador', points:1500000 }, { username:'Luke Skywalker', points:2 }, ]);});
import Component from'@glimmer/component';import { inject as service } from'@ember/service';import { tracked } from'@glimmer/tracking';exportdefaultclassextendsComponent { @service lianaServerFetch; @tracked users;constructor(...args) {super(...args);this.fetchData(); }/** Load data from agent, and pass it to the template */asyncfetchData() {constresponse=awaitthis.lianaServerFetch.fetch('/forest/_charts/myTableChart', {});this.users =awaitresponse.json(); }}