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
Dynamic Infographic require two resources to be present in order for it to be loaded onto the console:
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.
Before uploading the SVG to the static S3 bucket, please make sure the SVG has the following applied:
svg elementheight and width values from the viewBox are declared