GuinnessGI Performance Stats Web Components Documentation

This page provides usage documentation and live examples for each GuinnessGI Performance Stats Angular Element.

Back to Home

Including GGI Elements Scripts

To use the GGI Performance Stats Web Components, include the following scripts in your HTML file. Place them before the closing </body> tag or in the <head> section. These scripts load the web components from the production CDN:

<script src="https://elements.guinnessgi.com/runtime.js"></script>
<script src="https://elements.guinnessgi.com/polyfills.js"></script>
<script src="https://elements.guinnessgi.com/styles.js"></script>
<script src="https://elements.guinnessgi.com/vendor.js"></script>
<script src="https://elements.guinnessgi.com/main.js"></script>

These scripts must be included once per page before using any <ggi-...> elements.

Performance Figures Wrapper

The <ggi-performance-figures> web component provides a complete performance figures dashboard for a fund, including a share class dropdown and all performance charts/tables. It only requires the fund-name attribute. The share class is selected automatically, but users can change it via the dropdown.

<ggi-performance-figures
  fund-name="Guinness Asian Equity Income"
></ggi-performance-figures>

This component is already rendered on the home page as a live example.

Below, you can find each individual component included in the wrapper, rendered separately for reference.

Cumulative Performance Chart

<ggi-cumulative-performance-chart
  fund-name="Guinness Asian Equity Income"
  share-class-name="Y Dis GBP"
></ggi-cumulative-performance-chart>

Cumulative Performance Table

<ggi-cumulative-performance-table
  fund-name="Guinness Asian Equity Income"
  share-class-name="Y Dis GBP"
></ggi-cumulative-performance-table>

Calendar Year Performance Chart

<ggi-calendar-year-performance-chart
  fund-name="Guinness Asian Equity Income"
  share-class-name="Y Dis GBP"
></ggi-calendar-year-performance-chart>

Calendar Year Performance Table

<ggi-calendar-year-performance-table
  fund-name="Guinness Asian Equity Income"
  share-class-name="Y Dis GBP"
></ggi-calendar-year-performance-table>

Discrete Annual Performance Table

<ggi-discrete-annual-performance-table
  fund-name="Guinness Asian Equity Income"
  share-class-name="Y Dis GBP"
></ggi-discrete-annual-performance-table>