WACI Pattern Library / Visualisations

Visualisation PowerBI

All CSS for the visualisation class can be found here: https://waci.surge.sh/assets/css/waci.css. This is likely to change during the project so it might be best to hotlin to this URL initially and then incorporate the finalised code later on.

Code sample:

<section id="visualisation" class="visualisation">
	<div class="visualisation__wrapper">
		<iframe title="Title of visualilisation" src="https://app.powerbi.com/view?r=eyJrIjoiNjQxZGVmYTgtNTc2OS00ODdlLTg1N2EtMzc4ODExYjljNWFlIiwidCI6IjY5ZjdkZTk4LWI0ODctNDcxMS1hN2YzLTgyZjM4MjU0YmFkZCIsImMiOjh9&pageName=ReportSectionc2e153efe766f264fe32" frameborder="0" allowFullScreen="true"></iframe>
	</div>
</section>
Notes
  • Strip out the height and width attributes from the iframe exported from PowerBI
  • Add a title which makes sense
  • Make sure you include a "pageName" value in the URL - this should happen most of the time automatically

Visualisation placeholder

placeholder+image