Skip to main content

@elfsquad/third-party-visualization

VisualizationFrame

The VisualizationFrame class is the main entry point for the elfsquad/third-party-visualization library. It provides methods to embed & communicate with custom visualization.

constructor(options)

Initializes a new instance of the the third-party visualization.

Method parameters

options required (VisualizationFrameOptions)

The options used to initialize the showroom.

const visualization = new VisualizationFrame ({ container: '#showroom', url: 'https://...' });

getNativeElement()

Retrieves the native iframe element.

Returns (HTMLIFrameElement)

The native iframe element.

const visualization = new VisualizationFrame ({ container: '#showroom', url: 'https://...' });
const iframe = visualization.getNativeElement();

onTriggerConfigurationUpdate(callback)

Registers a callback function to be invoked when a configuration update is triggered.

Method parameters

callback required (TriggerConfigurationUpdateCallback)

The callback function to be called when a configuration update is triggered.

const visualization = new VisualizationFrame ({ container: '#showroom', url: 'https://...' });
visualization.onTriggerConfigurationUpdate(data => {
 console.log('Update triggered. Please re-send the configuration');
});

onUpdateRequirement(callback)

Registers a callback function to be invoked when a requirement should be updated.

Method parameters

callback required (UpdateRequirementCallback)

The callback function to be called when a requirement should be updated.

const updateRequirement = (data) => {
  // your update requirement logic here
};


const visualization = new VisualizationFrame ({ container: '#showroom', url: 'https://...' });
visualization.onUpdateRequirement(data => {
  updateRequirement(data);
});

onUpdateRequirements(callback)

Registers a callback function to be invoked when multiple requirements should be updated.

Method parameters

callback required (UpdateRequirementsCallback)

The callback function to be called when multiple requirements should be updated.

const updateRequirements = (data) => {
  // your update requirements logic here
};

const visualization = new VisualizationFrame ({ container: '#showroom', url: 'https://...' });
visualization.onUpdateRequirements(data => {
  updateRequirements(data);
});

onUpdateImageValue(callback)

Registers a callback function to be invoked when an image value should be updated.

Method parameters

callback required (UpdateImageValueCallback)

The callback function to be called when an image value should be updated.

const updateImageValue = (data) => {
  // your update image value logic here
};

const visualization = new VisualizationFrame ({ container: '#showroom', url: 'https://...' });
visualization.onUpdateImageValue(data => {
  updateImageValue(data);
});

onUpdateTextValue(callback)

Registers a callback function to be invoked when a text value should be updated.

Method parameters

callback required (UpdateTextValueCallback)

The callback function to be called when a text value should be updated.

const updateTextValue = (data) => {
  // your update text value logic here
};

const visualization = new VisualizationFrame ({ container: '#showroom', url: 'https://...' });
visualization.onUpdateTextValue(data => {
  updateTextValue(data);
});

sendConfigurationUpdated(configuration)

Trigger a configuration update in the third-party visualization.

Method parameters

configuration required (Configuration)

The configuration to send to the third-party visualization.

import { ConfiguratorContext, Configuration } from '@elfsquad/configurator';
const context = new ConfiguratorContext({ ... });

const visualization = new VisualizationFrame ({ container: '#showroom', url: 'https://...' });

context.onUpdate((evt: CustomEvent<Configuration>) => {
  visualization.triggerConfigurationUpdate(evt.detail);
});

sendStepChanged(step)

Trigger a step changed event in the third-party visualization.

Method parameters

step required (ConfigurationStep)

The step to send to the third-party visualization.

const visualization = new VisualizationFrame ({ container: '#showroom', url: 'https://...' });

const step = { ... };

visualization.triggerStepChanged(step);