andymarsden / pbi-templates

0 stars 0 forks source link

pbi-templates

Canvas: 16-9 Verticle alignmnet: Middle Zoom: 100%

$GreyNeutral: #999999

$TextGrey: #605E5C

$TextDark: #252423

$ContextRed:

$ContextAmber:

$ContextGreen:

Council Green: #B9BF15

ChartBlue: #26B9C0

ChartGrey: #4D5A6F

image

⭐Tip: Use Format Painter for visuals

Key indicators

The key indicators of the dashboard should be isolated and clearly labeled at the top of the dashboard. Try and keep groupings to a maximum of 3 and seperate dynamic from fixed indicators.

We use a multi row card to show single measure values. The has the advantage of left aligning data and providing a bar to give context. The left bar is an ideal vehicle for displaying simple RAG context, if this context is not requried a neaurtal color should be used.

Multi Row Card (for single measure)

image

There should be no content within 10px of the left of the bar, furthest right of the value (or label) and the top and bottom.

Settings:

Fiters Panel

The filters panel is important for non-static data. We use filters to provide users with the ability to interact and analyse data in a more personalised and targeted manner.

image

Having the filters on a panel on the left of the platform gives a prominent display throughout all reports; users will be able to digest and understand the report.

Slicers on Filters Panel

Filters tend to be a slicer whether this is a dropdown, vertical list or a slider.

slicers_on_filters_pane

It is very important you get the look and feel of this right.

Settings:

Alligning titles, line and visuals

The allignment is key in how the report looks. When alligned correctly the report looks much neater.

image

Title - Text box Font(Segoe UI), Font size: 9px, left padding: 0px, all other padding default Line - Shapes element, Shape Style - Width: 0.5 width, Border: #B3B3B3 Visuals - Allign top of visual with line and allign the left border of the visual with the left side of the line / title

Informaton icon

The icon gives more information on what exaclty the visual below is showing.

image

You can do this by adding a button, once you have added a button click the button, go to actions in the format panel on the right hand side of power bi, navigate to action and turn it on.

image

Now you will see that tooltip is displayed (should be 'On') - you can add text to the tooltip which will show once hovering over the button you have created, like in the image below.

tooltip_iicon

The line underneath is a line from the shapes elements. Shape Style - Width: 0.5 width, Border: #B3B3B3

image

Top of platform infomation

image

Styles and Fonts

Council Name - Font: Segoe (Bold), Font Size: 8px, Left Aligned (text box) Team - Font: Segoe UI, Font Size: 10px, Left Aligned (text box) Social Care Department - Same line / text box as Team, Font: Segoe UI, Font Size: 8.3px Description - Same text box as Team but line below, Segoe UI, Font Size: 10px Tab Name - On the section below Team, Social Care Department and Description, Font: Segoe (Bold), Font Size: 8px

Bookmarks bar

bookmarks_bar

The bookmarks bar is used to display different views of the current view.

image

Tornado chart

image

A tornado chart is a great way of displaying data. An example of this is age and gender.

You must change the age to a whole number. To do this follow the instructions below.

Instructions:
  1. Click the tornado chart
  2. Click the age column in the data panel
  3. Navigate to the top of the page and change format to the whole number

As well as this, make sure the colours are the same as in this guide (Female - ChartBlue, Male - ChartGrey). Using these colours ensures consistency throughout all reports.

Remove the title as it is already clear with what is being visualised by the use of the legend labels.

Data Table

image

We use data tables to display related data. Using this format we make it look slick and easy to the eye.

Instructions:

Values: Font: Segoe ui, Font Size: 8px, Text color: $TextDark Background, color: White Alternate, text color: $TextDark Totals: Font: Segoe ui, Font Size: 8px, bold Grid: Border: Section: All, Color: ChartGrey, Width: 1 Column Headers: Font: Segoe ui, Font Size: 8px, Text color: $TextDark

What a Good One Looks Like VS What a Bad One Looks like
WAGOLL WABOLL
image image

|