Introduction

The Dynamic Infographic feature provides the ability to upload and manage images and provide a powerful and flexible approach to dynamically overlaying data on to those images.

Dynamic Infographics use CSS attributes enabling extensive and flexible customisation opportunities.

example dynamic infographic with tooltip overlay and styled components

example dynamic infographic with tooltip overlay and styled components

Infographics Configuration Management

Dynamic Infographic require two resources to be present in order for it to be loaded onto the console:

Hosted SVG

For each Dynamic Infographic an SVG file should be uploaded to the relevant static S3 bucket, making sure it is housed in the correct tenants / images path.

For example, if I wanted to use the hla.svg for a particular tenant, I would need to upload it to static-origin.<environment>.humansnotrobots.com and the path should be <tenant>/images/hla.svg.

SVGs must include groups with id that will be used within the Infographic Configuration resource to associate dynamically overlayed data points.

Infographic Configuration resource

A infographic-config can be created in the console by going to https://console.<environment>.humansnotrobots.com/settings/infographic-configs and simply clicking the Create button.

Once clicked, you should see a simple starting example for you to work with:

Screenshot 2024-10-11 at 11.03.40.png