Changed PBI and layout sections to DRAFT status

new branch containing content still being worked on
added filters section
added filters images
added kpi-cards section to drafts
test push kpi cards

Author: isobelthompson

src/data/data-visualisation/dashboard-layout/images/info-page-2.png

@@ -0,0 +1,13 @@
+---
+layout: collection
+title: "Report and dashboard layout"
+description: "Layout standards for reports and dashboards at the NHSBSA"
+status: DRAFT
+tags: data-viz-home
+order: 20
+collection_tag: dv-dashboard-layout
+pagination:
+  data: collections.dv-dashboard-layout
+  size: 50
+  alias: articles
+---

src/data/data-visualisation/dashboard-layout/images/info-page.png

@@ -0,0 +1,108 @@
+---
+layout: article
+title: "Layout of a dashboard: Information"
+description: "Overview of the information pages to include in NHSBSA reports"
+status: DRAFT
+tags: dv-dashboard-layout
+order: 1
+---
+## Information pages  
+  
+The information pages are a rough wireframe to be used as a guide to the features that could be included. The idea is that a dashboard developer has a rough template to use any features they see fit. The template can be used across the organisation.  
+  
+Benefits of information pages include:
+
+- Encouraging data literacy, and a user’s understanding of what is being shown.
+- Encouraging interactivity with dashboards.
+- Encouraging confidence and self-sufficiency within users to use our dashboards and analyses to the full extent.
+- Informing users of important relevant information.
+- A standardised and reliable approach across dashboards, enabling a user’s ease-of-use.  
+  
+The information pages are designed to compliment the reporting pages, with an initial Dashboard information page, followed by the reporting pages, and with any other complimentary dashboard information pages at the end of the report for consultation by the user if needed. The pages mentioned in this example are:
+
+- Info: Dashboard information
+- Summary/highlights
+- Insight 1
+- Insight 2
+- Info: Data Details
+- Info: Updates
+- Info: How to use
+
+The content of the dashboard should be automated wherever possible to minimise manual intervention.  
+Please note, this dashboard does not consider a personalised or role-based user journey based on user access.  
+
+### General layout  
+  
+The information pages have the following features present across each page:
+
+- The NHS Business Services Authority logo in the top left corner.
+- The Report/Dashboard Title and name of the page, alongside the reporting month and year.
+- Information in the main body of the page.
+- A footer to state who created the dashboard, and a link to the [Accessibility Statement][info 0]
+- The background is NHS Grey 5 (#F0F4F5). Please see the colour guidance for more details.  
+  
+### Text content  
+  
+Your content should follow the corporate NHS Business Services Authority Content Design Standards.  
+Please note: [this link to the NHSBSA Content Design Standards][info 1] leads to an internal folder. This will be updated once the relevant content is added to the playbook.
+  
+Some important notes in relation to your text content:
+
+- A Header 1 should be used on each page to help navigate a screen reader, Header 1 should be size 16px.
+- The body of the text should be size 12px. [Source - Accessible print publications][info 2]
+- Frutiger or Arial should be used as the font throughout the report. The core NHS font is Frutiger and the secondary font is Arial. [Source - NHS identity guidelines; Fonts][info 3]  
+
+### Dashboard information section
+  
+The Dashboard Information section has been designed as an introduction to the dashboard, to allow the users to check the reporting period and refreshed date of the data. It clearly states the purpose of the dashboard to the user to give context.  
+It also benefits the perceived performance of the dashboard being the initial page a user is directed to as charts and data can load on other pages whilst the user checks the details shown.  
+  
+It includes:
+
+- In addition to the usual information page layout the Dashboard Information page has a title bar, more clearly stating the organisation name, and dashboard report title.
+- Dashboard version number is included in the top right, this enables the user and developer to ensure they are working from the same dashboard version should an issue arise.
+- Data last refreshed date is included in the top right to ensure the user can quickly check when the data was last refreshed.
+- Latest reporting period is included in the top right as another key piece of information, this ensures that the user knows when the data will display up until, even if the data was refreshed more recently.
+- The purpose of the report should give context to how the report came about, and what it hopes to achieve.
+- A nudge theory box directing the user, to encourage the user to next access the summary page or help direct the user’s journey within the dashboard.
+- The customer area should clearly state who the main users are and their interest in the data.
+- A contact section for users in case of queries, feedback, training needs or technical support.
+- An insight generator for users to ask questions and generate insights from the data.  
+
+### Data details section
+  
+The Data Details section has been designed to inform the user further on the details of the data, enabling data literacy and aiding understanding and therefore use of the report.  
+  
+It includes the following:
+
+- Methodology, for example, around the collection of data, or data included in the report.
+- Any assumptions made to the datasets.
+- Data source details, including various data sources, the date the data was last refreshed, the latest reporting period and number of records (which is useful to see if there are any issues, for example, if less records are showing than expected).
+- Data Dictionary details, and a link so that users can see definitions of the data and formats. This helps users to see the data lineage and understand the metadata behind the reports.
+- Glossary details around the terminology used, and a link so that users can access and understand relevant terminology included in the report.  
+  
+### Updates section
+  
+The Updates section is designed to help inform users on relevant news, release updates, and any other ongoing updates beneficial to the user.  
+  
+It includes the following:
+
+- Relevant news to help inform users on key events which could have had an impact on the data shown.
+- Links to relevant NHSBSA sites and news.
+- Release notes relating to the dashboard version numbers so that users are informed of new features, improvements, or bug fixes.
+- Announcements could be included in this section, for example if the NHSBSA has been made aware of an issue, and a fix is working to be put in place.
+  
+### How to use section  
+  
+The How to use section is relevant especially for users who have limited technological literacy and may not be as familiar with the reporting software used. It aims to help guide users, limit support needed, maximise usage and optimise intake of the dashboard and information shown. Please see the [Power BI User Hints standards](../../power-bi/standards/user-hints/) as an example of information to include on a How to use page.  
+  
+It includes the following:
+
+- Dashboard functionality to give details on functions within the dashboard, for example, users may not be familiar with drill down functionality and how to access it, therefore might miss this feature and other insights if not prompted to look and use this function.
+- Links to relevant articles or training courses could be useful, for example, NHSBSA training courses sign up or Microsoft could be referenced for Power BI reports.
+- Accessibility hints could be included in this section, for example, how to change from a chart format to a table.
+  
+[info 0]: https://bsa2468.atlassian.net/wiki/spaces/CoP/pages/1559396709/STAGE+3+-+Accessibility+Statements
+[info 1]: https://nhsbsauk.sharepoint.com/sites/DigitalContentDesignTeam/SitePages/NHSBSA-digital-style-guide-and-standards.aspx
+[info 2]: https://www.gov.uk/government/publications/inclusive-communication/accessible-communication-formats#accessible-print-publications
+[info 3]:  https://www.england.nhs.uk/nhsidentity/identity-guidelines/fonts/  

src/data/data-visualisation/dashboard-layout/images/page-1-eg.png

@@ -0,0 +1,29 @@
+---
+layout: article
+title: "Layout of a dashboard: Reporting"
+description: "Overview of the report pages to include in NHSBSA reports"
+status: DRAFT
+tags: dv-dashboard-layout
+order: 2
+---
+## Reporting pages  
+  
+The layout of the reporting pages are used as a guide of what a layout could look like.  
+
+### General layout  
+  
+Features of the reporting pages include the following:
+
+- A filter section: in the example shown this is on the left. Filters as best practice should either be on the left-hand side or as a banner across the top of the page. Considerations on the real estate of the page are important to consider in placing filters. Global filters should be prioritised and included first in this section, with more specific filters following below. Specific filters relating to a singular chart should be placed close to the chart on the right-hand side opposite the title of the chart. Please consult the filter guidance for further information.
+- A separation line has been included to clearly define sections.  
+  
+### Summary/highlights section  
+  
+The summary/highlights section should be a straightforward summary page which informs the user of key insights and important insights to note.  
+  
+The example template includes the following:
+
+- KPI cards for some initial summary statistics.
+- A sensible header layout, following the visual hierarchy. For example, header 1 then header 2 within the same section.
+- Charts should help give further information to the summary statistics shown.
+- There should be a prompt to look further into the details of the data, helping to guide the user on their journey.

src/data/data-visualisation/dashboard-layout/images/page-2-eg.png

@@ -0,0 +1,70 @@
+---
+layout: article
+title: "Filters"
+description: "Standards for using filters at the NHSBSA"
+status: DRAFT
+tags: data-viz-home
+order: 80
+review:
+    last_reviewed_date: 2024-12-20
+    review_cycle: ANNUAL
+---
+## Filter purpose  
+  
+Filters should only be used when needed and to add to the value of a dashboard. Due to this, the number of filters on a dashboard should be limited.  
+If there are more than three filters on a dashboard this can take away the value and visual impact of the message and distract a user.  
+  
+Features such as parameters can be created and used to change variables used within a chart. Slicers and filters can be included.  
+  
+![Example report showing slicers and filters](filters-1.png)
+
+To ensure data literacy in our end users, and developers, any filters applied should always be clearly stated on the dashboard or report. For example, on Oracle Analytics Classic a disclaimer may be added onto the dashboard.  
+
+![Example of an Oracle Analytics Classic disclaimer](filters-2.png)  
+
+## Placement of a filter  
+  
+Filters as best practice should be positioned as a banner across the top of the page starting from the left, as focus naturally falls to the left, or on the left-hand side. Having the filters on the left-hand side can take up unnecessary space. Considerations on the real estate of the page are important to consider in placing filters.  
+
+::: details Source - dashboard design
+
+[The Dos and Don'ts of Dashboard Design][filter 1]
+
+:::
+
+Icons can be used to hide filters if needed, if an icon is used the purpose of the icon should be stated for example, by accompanying text such as ‘Click the filter icon to filter the dashboard’. The icon should also have alternative text provided stating the purpose of the icon. If you have more than three filters on your page, using an icon can be a good way to hide the filters, and have the filters pop-out when the icon is clicked. This can offer usability and flexibility within your report.  
+
+Global filters should be prioritised and included at the top left of a dashboard, or first in a filter section, with more specific filters following below. Specific filters relating to a singular chart should be placed close to the chart in the right-hand side top corner opposite the title of the chart, aligned with the visualisation itself.  
+
+![Example of filter placement](filters-3.png) 
+
+Within some data visualisation tools filter panels can be included which may use less resource within your report. However, with a standard in-built filter you cannot customise the pane.  
+  
+Visualisations themselves can also be used as a filter. Many data visualisation tools have this inbuilt functionality.  
+
+::: details Source - best practices
+
+[Dashboard Design Best Practices][filter 2]
+:::
+
+## Design of a filter  
+
+A filter should be used to enable functionality of a dashboard for a user, but not distract from the main content.
+
+- The filter should clearly state its purpose. A label as a header, such as ‘Contact type filter’ is useful.
+- A user should always be able to clearly tell which filters are in place. To do this, use dynamic titles on your charts.
+- A ‘clear selection’ button in the top right-hand side of the screen is optional. This is to allow the user to quickly remove any filters applied and ensure that the report can be quickly set to be unfiltered should a user need this:  
+
+![Example of a 'clear selection' button](filters-4.png)  
+  
+- A font size of 11px should be used to Header the filter.
+- Frutiger or Arial should be used as the font, consistent with the rest of your report.
+- Filters should be of equal widths and heights if possible.
+- No borders or shadow borders should be used on a filter so as not to distract the user with additional ink to look at.
+- Filters should have a white background.
+- If the filter includes a timeline, NHS Blue (#005EB8) should be used.  
+
+![Example of a timeline filter](filters-5.png)
+
+[filter 1]: https://towardsdatascience.com/the-dos-and-donts-of-dashboard-design-2beefd5cc575
+[filter 2]: https://chartio.com/blog/dashboard-design-best-practices-the-dashboard-layout/

src/data/data-visualisation/dashboard-layout/images/page-3-eg.png

@@ -0,0 +1,12 @@
+---
+layout: article
+title: "KPI cards"
+description: "Standards for using KPI cards at the NHSBSA"
+status: DRAFT
+tags: data-viz-home
+order: 85
+review:
+    last_reviewed_date: 2025-01-10
+    review_cycle: ANNUAL
+---
+## Layout

src/data/data-visualisation/dashboard-layout/images/page-4-eg.png

@@ -0,0 +1,92 @@
+---
+layout: article
+title: "Collaborative working"
+description: "Best practices for working collaboratively using Power BI"
+status: DRAFT
+tags: pbi-best-practice
+order: 10
+---
+## Version control  
+  
+For dashboards which are being developed by more than one developer, it is possible for individuals to work on separate sheets in separate dashboards, likely a duplication of the dashboard (accessing to the same data set), developers would then copy the elements into a final dashboard. To do this, it is essential to manage the version control of dashboards, ensuring that dashboards are dated and the changes made to a dashboard are detailed for clarity when merging the dashboards.  
+  
+## Git integration  
+  
+[Power BI Desktop projects][link1] is currently in preview, which includes Git integration (a version control software). There are some pre-requisites to using Git included in the link provided. This allows changes to be merged using typical Git functionality. One of the advantages of Fabric is that it beings Git integration to Power BI which should allow more managed collaborative working once Fabric is more widely rolled out.  
+  
+## Power BI Explorer  
+  
+[Power BI Explorer is a free tool you can install on your machine][link2]. For dashboards which are being developed by more than one developer, you can create a copy of the dashboard and then compare changes, or compare changes of your report using Git. You can follow a tutorial within the tool itself.  
+  
+### Comparing reports  
+  
+Compare reports allows you to see two reports side by side and compare any changes between the two. The visuals and items each have a code which helps to track their changes across the dashboard versions.  
+  
+You can point this at a Git repository to compare versions, meaning you would not need to keep multiple versions of the same file. For Git, Power BI Explorer knows if your file is in a Git repository which allows you to see changes from a point in time, for example, to compare an uncommitted report to a committed report.  
+  
+- Select 'Compare report' from the Power BI Explorer landing page. It is the second box from the left in the centre of the screen.  
+  
+![Power BI Explorer landing page](../images/exp1.png)  
+  
+- Select the reports you wish to compare.  
+  
+![Report comparison page](../images/exp2.png)  
+  
+- Expanding Pages to see which pages have been added/removed/amended:  
+  
+![Example of expanded Pages view](../images/exp3.png)  
+  
+This section works like Git in that items highlighted in red have been removed, and items highlighted in green have been added.  
+  
+- You can click on items under Visuals and see where they are positioned on the screen.  
+
+![Example report comparison page](../images/exp4.png)  
+  
+- You can compare an overview of the pages included in each version.  
+  
+![Example overview comparison](../images/exp5.png)  
+  
+- You can refine what is shown and what you wish to compare in the drop down. Options for the refine and compare drop down box include: "Show added items", "Show deleted items", "Show modified items", "Show identical items", "Hide minor changes (tab order)", "Hide minor changes (positioning)".
+  
+![Example drop down box refining selection](../images/exp6.png)  
+  
+![Example drop down options.](../images/exp7.png)  
+
+### Inspecting reports  
+  
+This section gives a breakdown of pages and visuals.  
+  
+- Select 'Inspect report' and load in your .pbix file. It is the leftmost box in the centre of the screen.  
+  
+![Inspect report page](../images/exp8.png)  
+  
+- The Summary page gives you information on: Pages, Visuals, Fields, Filters, Issues and Themes.  
+  
+![Example summary page](../images/exp9.png)  
+  
+- The Details tab gives further information. You can see a wireframe of the dashboard, and when you select a visual: dimensions, x/y/z coordinates and drilldown functionality.  
+  
+![Example details page](../images/exp10.png)  
+  
+Values such as dimensions, categories, series can be checked against the default values to see if any values have changed.  
+  
+- Interactions between visuals can be shown.  
+  
+![Example showing interactions between visuals](../images/exp11.png)  
+  
+When you hover over some of the visuals the inbound and outbound interactions are highlighted between visuals. These interactions would otherwise be invisible on Power BI Desktop.  
+  
+Inbound interactions are shown with yellow arrows pointing into the visual in question.  
+  
+![Inbound interactions example](../images/exp12.png)  
+  
+Outbound interactions are shown with blue arrows pointing out from the visual in question.
+  
+![Outbound interactions example](../images/exp13.png)  
+  
+'Track usage' in the Data Model Explorer shows which variables are being used and where.  
+  
+![Track usage pane example](../images/exp14.png)
+
+[link1]: https://learn.microsoft.com/en-us/power-bi/developer/projects/projects-git
+[link2]: https://www.pbiexplorer.com/