Options
All
  • Public
  • Public/Protected
  • All
Menu

Class TableRenderer

A TableRenderer renders an HTML table (for browsers only) or CSV (comma-separated value) representation of Agent data.

for (let i = 0; i < 3; i++) {
  environment.addAgent(new Agent({
    x: i * 10,
    y: i - 2
  }));
}

const renderer = new TableRenderer(environment);
renderer.columns = ['x', 'y'];
renderer.mount('#container');
environment.tick();

The TableRenderer renders:

x y
0 -2
10 -1
20 0
since

0.5.0

Hierarchy

  • AbstractRenderer
    • TableRenderer

Index

Constructors

Properties

Methods

Constructors

constructor

  • The first parameter must be the Environment that this TableRenderer will render.

    The second parameter specifies options, which can include:

    • "type" ("csv" | "table" = "table") — Whether to render output in CSV or HTML <table> format
    • "filter" — Include a function (Agent => boolean) to specify which rows to include in the output. For example, if you only want to include Agents with an x value greater than 100:
      const renderer = new TableRenderer(environment, {
  filter: agent => {
    return agent.get('x') > 100;
  }
});
    • "limit" (number = Infinity) — The maximum number of rows (Agents) to render. If using a filter function, applies the limit after filtering.
    • "sortKey" (string = null) — Sort the Agent data by this key of data
    • "order" ("asc" | "desc" = "desc") — When using a "sortKey", specify whether Agents should be listed in ascending or descending order
    • "precision" (number = 3) — For floating point values, the number of decimal places to display
    • "refresh" (number = 500) — The number of milliseconds that should elapse between re-rendering (if this happens too quickly the effect can be visually jarring)

    Parameters

    • environment: Environment
    • options: TableRendererOptions = ...

    Returns TableRenderer

Properties

columns

columns: string[]

The TableRenderers columns should be an array of the keys of Agent data that you want to render.

// Suppose Agents in the Environment have data that looks like:
// {
//   "favor": number,
//   "oppose": number,
//   "neutral" number
// }

// order of columns is determined by order in the array
renderer.columns = ['neutral', 'favor', 'oppose'];

environment

environment: Environment

Points to the Environment that this renderer is tied to. This is automatically set when the renderer is created.

height

height: number

width

width: number

Methods

mount

  • mount(el: string | HTMLElement): void

  • Mount this renderer to a DOM element. Pass either a string representing a CSS selector matching the element or the element itself.

    // mounts the renderer to the element with the ID `container`
renderer.mount('#container');

// mounts the renderer to the element itself
const container = document.getElementById('container');
renderer.mount(container);
    override

    Parameters

    • el: string | HTMLElement

    Returns void

output

  • output(): string

  • Returns the outer HTML of the table or the CSV data as a string. This can be useful for exporting data, particularly in a Node.js environment as opposed to in a browser. For instance, in a Node.js script, you could write the CSV data to a file as follows:

    const fs = require('fs'); // import the file system module

const environment = new Environment();
for (let i = 0; i < 3; i++) environment.addAgent(new Agent({ i }));

const renderer = new TableRenderer(environment, { type: 'csv' });
renderer.columns = ['i'];

// write the TableRenderer's output to a CSV file named data.csv
fs.writeFileSync('./data.csv', renderer.output());
    since

    0.5.0

    Returns string

render

  • render(): void

Generated using TypeDoc