@emoneyadvisor/emui-planning-expenses-summary NPM

emui-planning-expenses-summary

Usage

All components are published in two locations: a private registry and the emacontent CDN.

Registry

npm install @emoneyadvisor/emui-planning-expenses-summary

yarn add @emoneyadvisor/emui-planning-expenses-summary

pnpm add @emoneyadvisor/emui-planning-expenses-summary

Import the module

The default module will register the custom element.

import '@emoneyadvisor/emui-planning-expenses-summary';

Declare the custom element as valid JSX

React's IntrinsicElements include a finite set of known tags. These can be extended to support custom elements. The type published by the main module will typically the PascalCase name after emui-.

import { DOMAttributes } from 'react';
import type { ComponentName } from '@emoneyadvisor/emui-planning-expenses-summary';

type CustomElement<T> = Partial<T & DOMAttributes<T> & { children: any }>;

declare global {
   namespace JSX {
     interface IntrinsicElements {
       ['emui-planning-expenses-summary']: CustomElement<ComponentName>;
     }
   }
}

CDN

All components have separate modules published to the CDN. They can referenced directly or downloaded. Possible URL examples include:

https://beta.emacontent.com/emoney-ui/<package version>/emui-planning-expenses-summary>.js

https://emacontent.com/emoney-ui/<package version>/emui-planning-expenses-summary.js

The component can be used on the page as an ES module.

<html>
   <head>
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/dist/themes/light.css"
     />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.1.0/dist/themes/dark.css"
     />
     <script type="module" src="@emoneyadvisor/emui-planning-expenses-summary"></script>
   </head>

   <body>
     <emui-planning-expenses-summary></emui-planning-expenses-summary>

     <script type="text/javascript">
       document.addEventListener('DOMContentLoaded', () => {
         const component = document.querySelector('emui-planning-expenses-summary');

         component.addEventListener('click', () => { ... });
       });
     </script>
   </body>
</html>

Planning Components

The Planning Components are web components that allow users to view and interact with their financial planning data. The components are built using the Web Components standard, which allows them to be used in a wide variety of web development frameworks and environments. All planning components utilize container queries to ensure that they are responsive relative to the size of their containing element. Narrower containers will result in a more compact view of the data, while wider containers will result in a more detailed view of the data.

All components require 3 pieces of external information in order to function:

An API key, which is used to authenticate the client making the API requests.
A user access token, which is used on behalf of the user to issue API requests.
The client id, which is the unique identifier for the client whose data is being displayed.

Installing the component

There are 7 components that make up the planning components:

emui-planning-asset-allocation: Displays a breakdown of assets by type or class with a donut chart to help visualize relative allocation.

emui-planning-expenses-summary: Displays client expenses.

emui-planning-goal-summary: Displays client goals and progress towards funding.

emui-planning-networth: Displays total net worth with a bar chart for visual aid.

emui-planning-probability-of-success-goals: Displays probability of success charts for each goal.

emui-planning-probability-of-success-overall: Displays overall probability of success in a single chart with details table.

emui-planning-probability-of-success-summary: Displays overall probability of success in a single chart as well as a breakdown by goal.

Placing the component on a page or in an application

Once the component is installed, it can be used in any web development framework or environment that supports Web Components. The component can be placed on a page or in an application by adding the appropriate HTML tag to the page or application code.

For example, to use the Net Worth component, you would add the following HTML tag to the page or application code:

<emui-planning-expenses-summary></emui-planning-expenses-summary>

Obtaining an access token

See the API Documentation for details on obtaining an access token.

Configuration

The initial configuration can be set on the component via the config attribute. All planning components use the same configuration object. This can be passed in as a JSON serialized string or by directly setting the public config property of the component.

const config = {
   accessToken: '',
   apiKey: '',
   clientId: '',
};

const emuiPlanning = document.querySelector('emui-planning-expenses-summary');
emuiPlanning.config = config;

Responding to component events

Each component will dispatch events for clicking the "View Details" link and for any request errors.

In either case, an event listener can be added to the component to handle the event.

const emuiPlanning = document.querySelector('emui-planning-expenses-summary');
emuiPlanning.addEventListener('emui-planning-expenses-summary-{event}', () => {
   // Handle the event
});

Theming

CSS parts are exposed for each of the components, allowing you to target different pieces of the component to override styles.

emui-planning-expenses-summary::part(header-text) {
   color: red;
}

Additionally, there are CSS variables that can be reassigned to update the components' styles.

:host {
   --emui-planning-view-details-color: red;
}

All components - loading

All components - error

npm.io

Expenses Summary

npm.io

Display a client's expenses summaries.

Properties

Property	Type	Default	Description
`defaultCurrencyFmt`		"new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n maximumFractionDigits: 0,\n currencySign: 'accounting',\n })"	The default currency format.
`defaultPercentFmt`		"new Intl.NumberFormat('en-US', {\n style: 'percent',\n maximumFractionDigits: 0,\n })"	Default percent format.
`showDetailsLink`	`boolean`		Controls whether the "View Details" link is rendered.

Events

Event	Description
`emui-planning-expenses-summary-request-failed`	Fired when any API request fails. Includes message in the event detail.
`emui-planning-expenses-summary-view-details`	Fired when the user clicks on the "View Details" link.

Slots

Name	Description
`error-details-icon`	The error details icon. Defaults to an SVG icon.

CSS Shadow Parts

Part	Description
`error-details`	The error details wrapper
`error-details-icon`	The error details icon
`error-details-text`	The error details text
`error-details-title`	The error details title
`expense`	row The container of the expense row
`header-subtext`	The header subtext element
`header-text`	The header text element
`loading-details`	The loading details wrapper
`loading-details-text`	The loading details text
`view-details`	The view details button
`view-more`	The view more button

CSS Custom Properties

Property	Default	Description
`--emui-planning-expenses-summary-expense-border-color`	"rgba(208, 213, 221, 1)"	The color of the border between expenses.
`--emui-planning-expenses-summary-view-more-color`	"rgba(103, 115, 133, 1)"	The color of the "View More" button.
`--emui-planning-header-subtext-color`	"rgba(102, 112, 133, 1)"	The color of the subtext within the header of the component.
`--emui-planning-placeholder-color`	"rgba(197, 205, 217, 1)"	The background color of the loading placeholders within the header of the component.
`--emui-planning-spinner-indicator-color`	"rgba(49, 95, 135, 1)"	The color of the spinner indicator when in the loading state.
`--emui-planning-spinner-track-color`	"transparent"	The color of the spinner track when in the loading state.
`--emui-planning-spinner-track-width`	"5px"	The width of the spinner track when in the loading state.
`--emui-planning-view-details-color`	"rgba(50, 114, 169, 1)"	The color of the "View Details" link.
`--emui-planning-view-details-hover-color`	"rgba(26, 45, 64, 1)"	The hover color of the "View Details" link.