On the ‘Style’ screen, there are a series of sub-tabs:
Each of these options is covered in more detail in the Dashboard CSS Tags section. Prior knowledge of CSS and HTML is useful but not essential.
The Style can be found by clicking the ‘Themes’ option in Dashboard Configuration and then selecting a Theme on the left-hand side of the screen. Under the ‘Style’ tab there are a series of sub-tabs, Dashboard, Button, Chart Panel, Chart, Table, Card, PDF, Login Screen, Config Screens. Under each of these you will find the elements you are able to configure for that particular part of the dashboard.
Each panel relates to one tag, ‘.pi-style_body’, the current values for that tag, outlined in the following screenshot and an example of the current setting, ‘Sample Text’.
Changing the colour from #000000 to #d80751 for example changes the colour of the sample text.
To see how this change might look on the Dashboard, click the ‘Preview’ icon.
A ‘Revert’ button will also be displayed at the bottom right of the screen, which can be used to remove the preview of the changes.
If the change you made only affects the dashboard, you can click ‘Back To Dashboard’ at the top right of the screen to see the effect of your change(s) on the whole Dashboard. The ‘Style Preview’ option will remain in-situ at the bottom right of the dashboard, which is especially useful if the change you have made means you can no longer easily access the Themes screen!
Save your changes by clicking the ‘Save’ icon in the upper left-hand corner.
This section globally defines the colour palette used by the dashboard. Charts will pick from these colours when they render, unless you have manually specified different colours on the chart or on the dimension configuration.
A chart that needs three colours will pick the first three colours you have defined on this page.
If you have defined ten colours but your chart needs eleven, then the first colour on this screen will be utilised twice. It therefore makes sense to ensure that you have a reasonably large number of colours specified, and that they are sufficiently different from each other that values can be correctly isolated in charts.
To define a new colour
Click the ‘Add’ icon on the right-hand side of the screen.
A new colour example will be displayed next to the existing colours. Click the circle to open the colour palette.
Choose the colour that you want to use and click the ‘Select’ button. As in the other colour options, the Hex key has been added in the name field. You can add anything you want here.
Remember to click the ‘Save’ icon to confirm your changes.
To delete a colour
Click the ‘Remove’ icon next to the relevant colour.
This section allows users to define additional aspects associated with the stylistic parts of the dashboard, over and above the CSS tags.
Always Show Logo – When ticked, this will force the logo to always be displayed on the category. Un-ticking it will hide the logo when the category list isn’t displayed.
Dashboard Logo - the logo used inside the dashboard, as shown in the screenshot above. The image needs to be located in:
Images in Card chart types. You can embed an image inside a card chart by using the Image box on a card. Tick the ‘Image’ box and enter the name of the image into the Image field in Content section on the right-hand side of the screen.
This is how the image will appear when used on a Card chart type.
The images need to be placed in this folder: …\tomcat\webapps\panMISDashboardResources\images
Using ‘Font Awesome’ Icons in Cards / Tables
This process allows you to use images alongside text in tables and cards chart types.
<span class= "THE NAME OF THE FONT ICON"style="color:#ffffff; font-size:0.8em;"></span>
In the following example an image has been concatenated with the Gender object.
When this is used in a table, the image and the gender will appear together in the same column.
You will also need to ensure that you tick the ‘Display column as HTML’ on the Attributes tab for the relevant column.
Logos in reports
If you want to use a logo in a report, it must be placed in the following folder: …\Dashboard\tomcat\webapps\panMISDashboardResources\images
You will only be able to use Reports if you have purchased the pi Reports module, please speak to your Customer Success Manager if you wish to purchase this.
The image can then be added to the report by choosing the Image icon in the Header/ Footer section of the report and typing the name of the image into the Image Path field.
Making the dashboard vertically larger
Add the property “height: 4000px;” to the .pi-style__page-contentclass. This class can be found on the ‘Settings’ tab in Dashboard Configuration. Please refer to the section on Dashboard CSS Tags for more information.
This will extend the height of the “page” allowing you to scroll up/down the dashboard, rather than the vertical size being decided by the monitor.