elfsquad/third-party-visualization

A package to implement third party visualization in your custom interface.

📊 Elfsquad Third Party Visualization

• 🌐 Overview
• 🛠 Installation
• 🖥️ Usage
• 📝 Examples
  • Send Configuration Updates
  • Update Requirement
  • Update Multiple Requirements
  • Update Image Value
  • Update Text Value
• 🤝 Contributing
• ⚖️ License
• 🎉 Acknowledgements

🌐 Overview

The Elfsquad third party visualization package provides a simple way to implement third party visualization in your custom interface.

An example implementation can be found in the docs directory. This is also hosted at https://elfsquad.github.io/third-party-visualization/.

🛠 Installation

To install the package, run the following command:

npm install --save @elfsquad/third-party-visualization

or include the following script tag in your HTML file:

<script type="importmap>
{
  "imports": {
    "@elfsquad/third-party-visualization": "https://cdn.skypack.dev/@elfsquad/[email protected]"
  }
}
</script>

🖥️ Usage

This package exposes the VisualizationFrame class. This class can be used for creating & communicating with the iframe.

Example:

import { VisualizationFrame } from "@elfsquad/third-party-visualization";
const container = document.createElement("div");
document.body.appendChild(container);

const elfsquad = new VisualizationFrame({
  container: container,
  url: "https://elfsquad.github.io/third-party-visualization-test/"
});

📝 Examples

Send Configuration Updates

Trigger an update in the third party visualization.

visualization.sendConfigurationUpdated(new Configuration());

Update Requirement

Update a single requirement.

visualization.onUpdateRequirement(data => {
  console.log('Requirement updated:', data);
});

Update Multiple Requirements

Update multiple requirements at once.

visualization.onUpdateRequirements(data => {
  console.log('Multiple requirements updated:', data);
});

Update Image Value

Update the image value of a node.

visualization.onUpdateImageValue(data => {
  console.log('Image value updated:', data);
});

Update Text Value

Update the text value of a node.

visualization.onUpdateTextValue(data => {
  console.log('Text value updated:', data);
});

🤝 Contributing

We welcome contributions! Please feel free to fork the repository, make your changes, and submit a pull request.

⚖️ License

Licensed under MIT. See the LICENSE file in the repository for full details.

🎉 Acknowledgements

A big thank you to everyone who contributes to the ongoing development and maintenance of this package.