Create a table chart

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
  // [...]

  return resultBuilder.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';

export default class extends Component {
  @service lianaServerFetch;
  @tracked users;

  constructor(...args) {
    super(...args);
    this.fetchData();
  }

  /** Load data from agent, and pass it to the template */
  async fetchData() {
    const response = await this.lianaServerFetch.fetch('/forest/_charts/myTableChart', {});
    this.users = await response.json();
  }
}

<BetaTable
  @columns={{array 'Username' 'Points'}}
  @rows={{this.users}}
  @alignColumnLeft={{true}}
  as |RowColumn user|
>
  <RowColumn>
    <span>{{user.username}}</span>
  </RowColumn>
  <RowColumn>
    <span>{{user.points}}</span>
  </RowColumn>
</BetaTable>

PreviousSmart Charts NextCreate a bar chart

Last updated 2 years ago

Was this helpful?