q4.highlights

Financial Highlights is a feature from S&P The data in this widget is extracted directly from the company’s documents. S&P makes every effort to line up fields, captions and headers that represent the same data over time, despite variations in how the company may report these items in different documents.

Examples
Options

Script link: q4.studioApi.4.0.0.min.js
Source file: q4.studioApi.js, line 8460

This widget extends the q4.studioApi widget. It has all the options and methods of the parent widget, in addition to those below. See the parent widget's documentation for details.

Child widgets have all the options and methods of this widget, but may add their own as well. See the child widget's documentation for additional options or methods. This widget has the following child widgets:

q4.highlightsIndex

Examples

<script type="text/javascript">
    $('.highlights-widget').highlights({
        studioApi: 'fb.studio.q4api.com',
        ticker: 'XNAS.FB',
        templateId: 1
    });
</script>

Options

templateId number

The data template to use
Banks And Thrifts = 1
Insurance Underwriter = 2
REIT = 3
Bank Balance Sheet = 8
Bank Income Statement = 9
Insurance Balance Sheet = 10
Insurance Income Statement = 11

Default value: 1
Example: 1

hasPeriods boolean

Whether to show period selection fields or not.

Default value: true

NMRanges Array.<object>

An object of additional NM ranges for returned Financial Highlights data id is required and can be found by looking at the returned Financial Highlights data in your browser's Network tab 93 NM Ranges are currently set. Syntax should be as follows:

{"134360" : { min:-1000, max:999 }, "138553" : { min:-100, max:100 }, "133084" : { min:-1000, max:100 } ...}

Default value: {}

highlightsTableSelector string

A selector for where the highlights details will be rendered

Default value: .financial-highlights_content table

template string

This is the default template which all other templates will be added to. It is not suggested to make changes to this for S&P clients. NOTE: If you change the 'sectionCustomPerions' id, you will need to update the aria-controls value in the customPeriodsTriggerTpl.

'<div class="module-highlights_custom-periods">' +
' <div class="module-highlights_custom-periods-link"></div>' +
'     <div id="sectionCustomPeriods" aria-labelledby="buttonCustomPeriods" aria-describedby="customPeriodsInstructions" class="financial-highlights_custom-periods hidden">' + 
'         <span class="sr-only" id="customPeriodsInstructions">Selecting a Preset Period or Latest Period On button will automatically update the contents. Choosing Custom Periods will only update the contents upon clicking the Update button.</span>' +
'     </div>' +
'</div>' +
'<div class="financial-highlights_content">' +
'     <div id="loadingStatus" class="module_loader" aria-live="polite">Loading...</div>' +
'     <table class="table module-highlights_table"></table>' +
'</div>'

tableHeaderTpl string

The template for the table header

'<caption>Financial Highlights</caption>'+
'<thead>' +
'     <tr>' +
'        <th>Period Ended</th>' +
'        {{#.}}' +
'            <th scope="col" class="module-highlights_table-heading-period">{{label}} <span>{{date}}</span> </th>' +
'        {{/.}}' +
'     </tr>' +
'</thead>'

tableBodyTpl string

The template for the table body

'<tbody>' +
'{{#data}}' +
'     <tr class="module-highlights_table-subheading-row">' +
'         <th scope="col">' +
'         {{subtemplateName}} {{#subtemplateMagnitude}}({{subtemplateMagnitude}}){{/subtemplateMagnitude}}' +
'         </th>' +
'         {{#emptyCells}}' +
'             <td aria-hidden="true"></td>'+
'         {{/emptyCells}}' +
'     </tr>' +
'     {{#dataItems}}' +
'         <tr>' +
'             <th scope="row" class="module-highlights_table_row-label"><a href="javascript:;" tabindex="0" aria-label="{{dataItemName}} definition. Opens in modal window" rel="showDefinitionLink" data-definition="{{dataItemDefinition}}">{{dataItemName}}</a></th>' +
'             {{#values}}' +
'                 <td data-heading="{{dataItemPeriod}}">' +
'                     {{^isNegative}}{{dataItemValue}}{{/isNegative}}' +
'                     {{#isNegative}}<span class="text-warning">{{dataItemValue}}</span>{{/isNegative}}' +
'                 </td>' +
'             {{/values}}' +
'         </tr>' +
'     {{/dataItems}}' +
'{{/data}}' +
'</tbody>'

customPeriodsSelector string

A selector for the container where the custom periods data will be rendered

Default value: .financial-highlights_custom-periods

customPeriodsTriggerSelector string

A selector for the container where the custom periods trigger (show/hide button) will be rendered

Default value: .module-highlights_custom-periods-link

presetPeriodSelector string

A selector for the unordered list of custom period presets

Default value: .financial-highlights_preset-periods

periodTypeSelector string

A selector for the period type dropdown in the custom period section

Default value: .financial-highlights_period-type

availablePeriodsSelector string

A selector for the available periods select box in the custom period section

Default value: .financial-highlights_period-list

availablePeriodsLabelSelector string

A selector for the available periods label in the custom period section

Default value: .periods-select-label

chosenPeriodsSelector string

A selector for the chosen periods select box in the custom period section

Default value: .financial-highlights_selected-periods

quarterBoxSelector string

A selector for the quarter select box in the custom period section

Default value: #periods-select-q

yearBoxSelector string

A selector for the year select box in the custom period section

Default value: #periods-select-y

ytdBoxSelector string

A selector for the YTD select box in the custom period section

Default value: #periods-select-ytd

ltmBoxSelector string

A selector for the LTM select box in the custom period section

Default value: #periods-select-ltm

halfYearBoxSelector string

A selector for the half-year select box in the custom period section

Default value: #periods-select-h

a11yLoadingSelector string

A selector for the visually hidden aria-live region to announce the loading status on period change

Default value: #loadingStatus

customPeriodsTpl string

The base template for Custom Periods.

'<div class="grid module-highlights_custom-periods-content">' +
' <div class="grid_col grid_col--1-of-5 grid_col--lc-1-of-3 grid_col--md-1-of-1">' +
'     <span class="module-highlights_custom-periods-heading">Preset Periods</span>' +
'     <ul class="financial-highlights_preset-periods"></ul>' +
' </div>' +
' <div class="grid_col grid_col--3-of-5 grid_col--lc-2-of-3 grid_col--md-1-of-1">' +
'     <span class="module-highlights_custom-periods-heading">Custom Period</span>' +
'     <div class="grid module-highlights_custom-periods-periods">' +
'         <div class="grid_col grid_col--sm-1-of-1 grid_col--md-1-of-1 grid_col--lc-1-of-1 grid_col--1-of-4">' +
'         <label for="customPeriodTypeDropdown">Period Type</label>'+
'         <span id="customPeriodTypeInstructions" class="sr-only">Selecting the value will change the list of available periods to filter by.</span>'+
'         <select id="customPeriodTypeDropdown" aria-describedby="customPeriodTypeInstructions" aria-controls="customPeriodsAvailCell" class="financial-highlights_period-type module_dropdown form-control" name="financial-highlights_period-type"></select>' +
'         </div>' +
'         <div class="grid_col grid_col--sm-1-of-1 grid_col--md-1-of-1 grid_col--lc-1-of-1 grid_col--3-of-4">' +
'             <div class="module-highlights_custom-periods-table">' +
'                 <div class="grid">' +
'                     <div id="customPeriodsAvailCell" class="module-highlights_custom-periods-select-1 grid_col grid_col--1-of-2">' +
'                         <span class="sr-only">Select one or more periods to add to the custom periods list</span>' +
'                         <label id="periods-select-q-label" for="periods-select-q">Available Periods</label>'+
'                         <select multiple="multiple" class="financial-highlights_period-list" id="periods-select-q"></select>' +
'                         <label style="display:none" id="periods-select-y-label" for="periods-select-y">Available Periods</label>'+
'                         <select multiple="multiple" class="financial-highlights_period-list hidden" id="periods-select-y"></select>' +
'                         <label style="display:none" id="periods-select-ytd-label" for="periods-select-ytd">Available Periods</label>'+
'                         <select multiple="multiple" class="financial-highlights_period-list hidden" id="periods-select-ytd"></select>' +
'                         <label style="display:none" id="periods-select-ltm-label" for="periods-select-ltm">Available Periods</label>'+
'                         <select multiple="multiple" class="financial-highlights_period-list hidden" id="periods-select-ltm"></select>' +
'                         <label style="display:none" id="periods-select-h-label" for="periods-select-h">Available Periods</label>'+
'                         <select multiple="multiple" class="financial-highlights_period-list hidden" id="periods-select-h"></select>' +
'                         <button type="button" class="move">Add</button>' +
'                     </div>' +
'                     <div class="module-highlights_custom-periods-select-2 grid_col grid_col--1-of-2">' +
'                         <span class="sr-only">Select one or more periods to remove from the custom periods list</span>' +
'                         <label for="customPeriodsSelected">Selected Periods</label>'+
'                         <select class="financial-highlights_selected-periods" name="financial-highlights_selected-periods" multiple="multiple" id="customPeriodsSelected"></select>' +
'                         <button type="button" class="remove">Remove</button>' +
'                     </div>' +
'                 </div>' +
'                 <div class="module-highlights_custom-periods-button">' +
'                     <button type="button" id="updateFinlHighlights" class="button">Update</button>' +
'                 </div>' +
'             </div>' +
'         </div>' +
'     </div>' +
' </div>' +
' <div class="grid_col grid_col--1-of-5 grid_col--lc-1-of-1 grid_col--md-1-of-1">' +
'     <span class="module-highlights_custom-periods-heading" id="latestPeriod">Latest Period On:</span>' +
'     <div id="columnOrderButtonsInnerPanel" class="financial-highlights_custom-buttons-group">' +
'         <button id="btnMostRecentDateFirst" aria-describedby="latestPeriod" type="button" class="button active">Left</button>' +
'         <button id="btnMostRecentDateLast" aria-describedby="latestPeriod" type="button" class="button">Right</button>' +
'     </div>' +
'</div>' +
'</div>'

customPeriodsTriggerTpl string

The template used for rendering the button that will show/hide the custom period section. NOTE: If you change the id on the button, you will need to update the aria-labelledby value in the template.

'<button type="button" aria-controls="sectionCustomPeriods" id="buttonCustomPeriods" class="button showCustomPeriods" aria-expanded="false">Show Custom Periods Section</button>'

Default value: <button type="button" aria-controls="sectionCustomPeriods" id="buttonCustomPeriods" class="button showCustomPeriods" aria-expanded="false">Show Custom Periods Section</button>

periodOptionsTpl string

The template used for rendering all period types within the given selection (i.e. Quarters, Years)

'{{#periods}}' +
'    <option value="{{label}}">{{label}}</option>' +
'{{/periods}}'

periodDropdownTpl string

The template for rendering the Custom Period options

'{{#.}}' +
'    <option value="{{periodTypeLabel}}">{{periodTypeLabel}}</option>' +
'{{/.}}'

selectPeriodListTpl string

This template will render the list of predefined periods (i.e. Last Four Years & YTD)

'{{#.}}' +
'     <li><button type="button">{{periodTypeLabel}}</button></li>' +
'{{/.}}'

periodSelectionTpl string

The list of items currently being displayed in the table. (Will default to Last Four Years & YTD)

'{{#.}}' +
'    <option value="{{label}}">{{label}}</option>' +
'{{/.}}'

disclaimerLink string

The format of the copyright disclaimer link

'<div class="module-disclaimer">' +
'     <button type="button" class="module-disclaimer_link disclaimer_link" aria-describedby="modal-window"> Copyright © {{year}}, S&P Global Market Intelligence (and its affiliates as applicable). All rights reserved.</button>' +
'     <span class="sr-only" id="modal-window">Opens in modal window</span>' +
' </div>'

startPeriod numberarray.<object>

Select default templated periods or set custom periods. template periods pass using numbers and custom periods using array.

Passed as template number
1 = Last Four Years & YTD
2 = Last Four Years & LTM
3 = Last Five Years
4 = Last Five Quarters/Interims
5 = Quarterly Analysis
6 = Annual Analysis

---------------------------------------------

Option passed as an array:

fiscalQuarter: 
1 = Q1 
2 = Q2
3 = Q3
4 = Q4

periodTypeId:
1 = Annual
2 = Quarterly
3 = YTD
4 = LTM
10 = Semi-annual

--------------------------------------------

startPeriod: 1
OR
startPeriod: [
  {
    "year": 2020,
    "fiscalQuarter": 1,
    "periodTypeId": 3
  },
  {
    "year": 2019,
    "fiscalQuarter": 4,
    "periodTypeId": 1
  },
  {
    "year": 2018,
    "fiscalQuarter": 4,
    "periodTypeId": 1
  },
  {
    "year": 2017,
    "fiscalQuarter": 4,
    "periodTypeId": 1
  },
  {
    "year": 2016,
    "fiscalQuarter": 4,
    "periodTypeId": 1
  }
]

afterRender function

A callback that fires after the widget is rendered and/or every period selection update.

Parameters

event Event: The event object.