Format of the Unica Insights Reports

Use the styles included with the global report style sheet, GlobalReportStyles.css, to format the report page.

Item Style
Text Tahoma font
Report title text Tahoma 18 point
Page footer text Tahoma 8 point
Field Set labels Tahoma 8 point

List report styles

Use the styles included with the global report style sheet, GlobalReportStyles.css, to format list reports. The following table shows formatting from the GlobalStyleSheet.css style sheet for list reports.

Item Style
Cells 1 px silver line(#c8c8c8) borders (unless otherwise noted)
Column header Light gray background(F5F5F5); 2px Grey(#c8c8c8) line separates column header from rest of table
Summary header rows (list headers) Light yellow background
Total row at bottom Dark gray background; 2px Grey line separates row from rest of table
Item CSS class name Style
Page - Header Ph

font-family: “Tahoma”;

font-size: 18pt;

font-weight: bold;

Page - Footer Pf

padding-top:10px;

font-size:8pt;

font-weight:bold;
Table - List column title cell Lt

text-align:left;

border: 1px solid #c8c8c8;

background-color: #f5f5f5;

background-image: none!important;

font-weight:normal;

vertical-align: top;

padding: 10px 20px;

font-family: “Tahoma”;

color: #444444;

font-size: 14px;

Item CSS class name Style
Table - List column body cell interior lci

border: none;

background-color: F5F5F5!important;

text-align: right;

padding: 3px 5px; vertical-align: middle;

Table - List column body cell lc

border-top:1px solid #C8C8C8;

border-bottom:1px solid #C8C8C8;

border-left: 1px solid #C8C8C8;

border-right:1px solid #C8C8C8;

padding: 3px 5px;

text-align: left; vertical-align: middle;

font-family: “Tahoma”;

Table - List column body measure cell lm

vertical-align: top;

border:1px solid #c8c8c8;

border-right: 0;

border-left: 0;

padding: 3px 5px;

text-align: right;

Crosstab - Totals first row tr

border-left: 2px solid black;

background-color: #f5f5f5 !important;

font-weight: bold;

padding: 3px 5px;

Complex table total

-new class added

ctth

color: #444444;

background-color: #f5f5f5; border-bottom:2px solid #c8c8c8;

padding: 3px 5px;

border-left: 2px solid #c8c8c8;

Table totals row ttr

color: #444444;

font-weight: bold;

background-color: #f5f5f5;

padding: 3px 5px;

Table totals row ctr

color: #444444;

font-weight: bold;

border-left:2px solid #c8c8c8;

background-color: #f5f5f5;

border-bottom:1px solid #c8c8c8;

Table totals header cth

color: #444444;

border-bottom:2px solid #c8c8c8;

border-left:1.5px solid white;

border-right:1.5px solid white;

font-weight: 100;

List - Inner header cell ih

border-top:1px solid #c8c8c8;

border-bottom:1px solid #c8c8c8;

padding: 3px 5px;

vertical-align: middle;

List - Outer header cell oh

font-weight: bold;

vertical-align: top;

border: 1px solid #c8c8c8;

border-right: 0;

border-left: 0; padding: 3px 5px; word-break:keep-all;

background-color: #f5f5f5;

Item CSS class name

Style

Outer header cell with top border ohl

font-weight: bold;

vertical-align: top;

background-color: #ddd;

padding: 3px 5px;

word-break:keep-all;

border-top:2px solid black;

border-left:1.5px solid #c8c8c8;

border-right: 5pt solid #c8c8c8;

border-style:solid;

border-bottom:none;

Crosstab xt

border: 2px solid #C8C8C8;

color: #444444;

empty-cells: show;

font-size: 16px;

Crosstab - Member label cell ml

font-style: normal !important;

color: black;

font-weight: 300;

height: 30px;

border-left: none;

border-right: none;

border-bottom:1px solid #c8c8c8;

Crosstab - Member label cell cht

vertical-align: top;

background-color:transparent;

padding: 3px 5px;

text-align: left;

Crosstab - Member value cell mv

vertical-align: top;

white-space: nowrap;

border: 1px solid #c8c8c8;

padding: 3px 5px;

text-align: right;

border-left:none;

border-right:none;

vertical-align: top; white-space: nowrap;

padding: 3px 5px;

text-align: right;

Field set fs

display: -moz-inline-block;

display: inline;

text-align: left; f

ont-size:8pt;

margin-bottom: 15px;

color : #444444;

Chart ch border:1pt solid #c8c8c8;
Chart - Title ct font-weight:bold;
Chart - Axis labels al font-size:10pt;
Chart - Axis title at font-weight:bold;

text-align:center;

font-size:10pt;

color:#444444;

Item CSS class name

Style

Chart - Chart Palette In XML Report Specification

Before the closing chart tag (</combinationChart>) in the XML Report Specification, paste the following lines:

<chartPalette>
<chartColor value="#6B80BE"/>
<chartColor value="#DDBB4D"/>
<chartColor value="#9CAC61"/>
<chartColor value="#78BF79"/>
<chartColor value="#7D5AA6"/>
<chartColor value="#efc100"/>
<chartColor value="#aeb8b8"/>
<chartColor value="#4178be"/>
</chartPalette>
Hyperlink .hy

color: #037bbf;

font-size: 14px;

font-family: “tahoma”;

Totals first Column tf

border-left: 2px solid black;

background-color: #f5f5f5 !important;

font-weight: bold;

padding: 3px 5px;

Complex table total ctt

color: #444;

background-color: #f5f5f5 !important;

border-left:2px solid black;

border-bottom: 1px solid #c8c8c8;

padding-left: 5px 5px;

Complex table total row cttr

color: #444444;

background-color: #f5f5f5;

font-weight: bold;

border-bottom:1px solid #c8c8c8;

List ls

border: 1px solid #c8c8c8;

color: #444444;

empty-cells: show; margin-top: 10px;

font-size: 14px;

Hover selection class hoverSelection background-color: transparent !important;

color: #444444 !important;

Additionally, when you create a new list report, use the following guidelines to match existing reports:

  • Use List Headers (not List Footers) to display summarization at the object level.
  • Manually right-justify any numbers that are displayed in List Headers. Unlike List Footers, List Headers are not separated into the outer component and summary component, which use a right-justified style by default. When you summarize information into a List Header, you must complete the extra step and right-justify the values.
  • Optionally, add 2px solid Grey borders to group columns.

The following example shows a list report that does not use the global styles:

Date formats for English versions

If you use a globalized version of the HCL Unica reports package, you see a different date format in your list reports depending on which locale you use. Unica Insights list reports use the date style medium.

The following table shows the date formats for list reports for all available locales.

Unica Insights list reports date formats for globalized versions

Locale Unica Insights list reports date format example
English Apr 1, 2020

Crosstab report styles

Use the styles included with the global report style sheet, GlobalReportStyles.css, to format crosstab reports.

The following table shows formatting from the GlobalStyleSheet.css style sheet for crosstab reports:

Item Style
Cells Light Grey (#f5f5f5) background; 1 px silver line borders
Measure cell (upper left) 2 px Grey (#C8C8C8) line separates the cell from the rest of the crosstable
Outer level totals Gray/offwhite background

Additionally, when you create a new list report, use the following guidelines to match the existing reports.

  • Use 2px grey borders to separate summarization from measures.
  • Use 2 px grey borders to group logical column groupings.
  • As a general guideline, avoid summarizing both columns and rows in the same report.

The following example shows a crosstab report that uses the global styles and has 1.5 px borders that are applied to show column groupings.

Chart styles

Use the styles included with the global report style sheet, GlobalReportStyles.css, to format charts.

The following table shows formatting from the GlobalStyleSheet.css style sheet for charts:

Charts obtain the following formatting from the GlobalStyleSheet.css.

Item Style
Charts 1 pt light gray border
Titles and labels 10 point bold font

Additionally, when you create a new chart, use the following guidelines to match the existing chart reports.

  • Use the default width, unless there is more than one chart on the report. When you include multiple charts in a single report, set the chart width to 750px.
  • To use gradients and color palettes, copy and paste the strings from the table in “Global report styles” into the XML report specification.
  • As a general guideline, select the chart type based on the data that you expect to be returned.
    • Use line graphs as the chart type only when you can guarantee the report retrieves continuous data.
    • If there are multiple series, a stacked bar works better than a non-stacked bar.
    • As a best practice, use percentages only when the total percentage equals 100%. Pie charts tend to confuse people when the values do not add up to 100%.
  • If there are only two series on a chart and you display both the Y1 and Y2 axes, as a best practice you must match the colors to the first two palette colors for the axis labels.

The following example shows a chart that uses the global styles and has additional formatting applied.

Chart styles

Use the styles included with the global report style sheet, GlobalReportStyles.css, to format charts.

The following table shows formatting from the GlobalStyleSheet.css style sheet for charts:

Charts obtain the following formatting from the GlobalStyleSheet.css.

Item Style
Charts 1 pt light gray border
Titles and labels 10 point bold font

Additionally, when you create a new chart, use the following guidelines to match the existing chart reports.

  • Use the default width, unless there is more than one chart on the report. When you include multiple charts in a single report, set the chart width to 750px.
  • To use gradients and color palettes, copy and paste the strings from the table in “Global report styles” into the XML report specification.
  • As a general guideline, select the chart type based on the data that you expect to be returned.
    • Use line graphs as the chart type only when you can guarantee the report retrieves continuous data.
    • If there are multiple series, a stacked bar works better than a non-stacked bar.
    • As a best practice, use percentages only when the total percentage equals 100%. Pie charts tend to confuse people when the values do not add up to 100%.
  • If there are only two series on a chart and you display both the Y1 and Y2 axes, as a best practice you must match the colors to the first two palette colors for the axis labels.

The following example shows a chart that uses the global styles and has additional formatting applied.

Date formats for English version

If you use a globalized version of the HCL Unica reports package, you see a different date format in your chart reports depending on which locale you use. Unica Insights chart reports use the date style short.

The following table shows the date formats for chart reports for English locale.

Unica Insights chart reports date formats for English version

Locale Unica Insights chart reports date format example
English 04/13/2020

Dashboard report styles

Dashboard reports use the global styles with some manual formatting.

Use the following guidelines to make sure that reports that are displayed in the Dashboard fit properly in Dashboard portlets.

Item Style
Background color Keep background color set to gray (hex value F5F5F5).
Size Specify size by using percentages whenever possible. When sizing with a percentage is not possible, set the size to 323 pixels wide by 175 pixels tall.
Subtitles Put subtitles on the left side.
Dates Put dates on the right side.
Legends Center legends below the chart.
Lines in line charts Display horizontal lines only. Do not display vertical lines.
Axis line color Keep axis lines set to black.
Grid line color Keep grid lines set to gray (hex value c8c8c8).
Lists (tables) Display a maximum of 10 lines.