Skip to main content
A base class for elements that make use of data. Component extends Container and adds data handling capabilities.

​
Properties

​
data

​
data
ListData<unknown>
Component’s data
See Data for more info. 
component.data.setAll([
  { value: 100 },
  { value: 200 },
  { value: 300 }
]);

​
dataItems

​
dataItems
Array<DataItem>
A list of component’s data items
const dataItems = component.dataItems;
console.log("Total items:", dataItems.length);

​
inited

​
inited
boolean
Indicates if the component has already been initialized
if (component.inited) {
  // Component is ready
}

​
Animation

​
interpolationDuration
number
A duration of the animation from one setting value to another, in milliseconds
See Animating data values for more info.
​
interpolationEasing
Easing
Easing function to use for cross setting value animations
See Easing functions for more info.

​
Methods

​
updateData()

Updates existing data in the component without disposing old data items. If there are more data items than before, new ones will be created. If there are less, old ones will be removed.
​
data
Array<any>
required
New data array
component.updateData([
  { value: 150 },
  { value: 250 },
  { value: 350 }
]);

​
makeDataItem()

Creates a new data item and processes it.
​
data
object
required
Data item settings
​
dataContext
any
Data context
​
dataItem
DataItem
New data item
const dataItem = component.makeDataItem({
  value: 100,
  category: "A"
});

​
pushDataItem()

Adds new explicit data item to the component.
​
data
object
required
Data item settings
​
dataContext
any
Data context
​
dataItem
DataItem
New data item
const dataItem = component.pushDataItem({
  value: 100,
  category: "A"
});

​
showDataItem()

Shows component’s data item.
​
dataItem
DataItem
required
Data item to show
​
duration
number
Animation duration in milliseconds
​
promise
Promise<void>
Promise that resolves when animation completes
await component.showDataItem(dataItem, 500);

​
hideDataItem()

Hides component’s data item.
​
dataItem
DataItem
required
Data item to hide
​
duration
number
Animation duration in milliseconds
​
promise
Promise<void>
Promise that resolves when animation completes
await component.hideDataItem(dataItem, 500);

​
markDirtyValues()

Forces a repaint of the element which relies on data.
​
dataItem
DataItem
Optional specific data item to mark dirty
component.markDirtyValues();

​
getDataItemById()

Looks up and returns a data item by its ID.
​
id
string
required
ID to look up
​
dataItem
DataItem | undefined
Data item with matching ID, or undefined if not found
const dataItem = component.getDataItemById("item-1");
if (dataItem) {
  console.log("Found:", dataItem);
}

​
disposeDataItem()

Disposes a data item.
​
dataItem
DataItem
required
Data item to dispose
component.disposeDataItem(dataItem);

​
Events

​
datavalidated
{}
Dispatched after data is processed and validated
​
valueschanged
{}
Dispatched when data values change
component.events.on("datavalidated", () => {
  console.log("Data has been validated");
});

component.events.on("valueschanged", () => {
  console.log("Values have changed");
});

​
DataItem Class

DataItem is a wrapper for actual data used by components.

​
Properties

​
component
Component
A data item’s owner Component
​
dataContext
unknown
A reference to actual item in source data this item is based on
​
bullets
Array<Bullet>
Bullets associated with this data item

​
Methods

​
show()

Shows a data item that’s currently hidden.
​
duration
number
Animation duration in milliseconds
dataItem.show(500);

​
hide()

Hides a data item that’s currently visible.
​
duration
number
Animation duration in milliseconds
dataItem.hide(500);

​
isHidden()

Returns true if data item is hidden.
​
hidden
boolean
Whether the data item is hidden
if (dataItem.isHidden()) {
  console.log("Data item is hidden");
}

​
Examples

​
Setting Data

component.data.setAll([
  { category: "A", value: 100 },
  { category: "B", value: 200 },
  { category: "C", value: 300 }
]);

​
Working with Data Items

const dataItems = component.dataItems;

dataItems.forEach((dataItem, index) => {
  console.log(`Item ${index}:`, dataItem.get("value"));
  
  if (dataItem.get("value") < 150) {
    dataItem.hide();
  }
});

​
Listening to Data Events

component.events.on("datavalidated", () => {
  console.log("Total items:", component.dataItems.length);
});

component.events.on("valueschanged", () => {
  console.log("Data values have been updated");
});

Build docs developers (and LLMs) love

Get started for freeTalk to us