@railzai/railz-visualizations
Version:
Railz.ai Visualizations
219 lines (214 loc) • 12.1 kB
JavaScript
/*!
* Accounting Data as a Service™ is the solution that makes sense of your business customers' financial data.
* Built with Stencil
* Copyright (c) FIS.
*/
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { T as Translations } from './en.js';
import { p as pick, R as RequestServiceInstance, e as errorLog, g as getConfiguration, C as ConfigurationInstance, a as getFilter, b as getOptions, v as validateRequiredParams, i as isBankAccounts, f as formatNumber, c as getTitleByReportType } from './chart.utils.js';
import { i as RVParams, g as RVReportTypesUrlMapping } from './financial-ratios.js';
import { d as defineCustomElement$3 } from './error-image.js';
import { d as defineCustomElement$2 } from './loading.js';
import { d as defineCustomElement$1 } from './tooltip.js';
import { i as isEmpty } from './isEmpty.js';
import { i as isEqual } from './isEqual.js';
/**
* Make API call based on expected parameters for table account data type
*/
const getReportData = async ({ filter, }) => {
let reportData;
const pickedFilter = Object.assign({}, pick(filter, [RVParams.CONNECTION_UUID]));
//TODO END
try {
reportData = await RequestServiceInstance.getReportData({
path: RVReportTypesUrlMapping[filter.reportType],
filter: pickedFilter,
});
}
catch (error) {
errorLog(Translations.RV_NOT_ABLE_TO_RETRIEVE_REPORT_DATA, error);
reportData = { error };
}
return reportData;
};
const bankAccountsCss = "@font-face{font-family:Inter;src:url(\"../assets/fonts/Inter-italic-var.woff2\");font-family:Inter;src:url(\"../assets/fonts/Inter-upright-var.woff2\")}body,div[class^=railz-],div[class*=\" railz-\"]{font-family:Inter, Roboto, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.rv-container{display:flex;padding:16px;position:relative;border:1px solid #eee;border-radius:7px;flex-direction:column;height:202px;line-height:21px}.rv-container *{font-family:Inter, Roboto, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.rv-container .rv-bank-list{overflow:auto}.rv-header-container{display:flex}.rv-title{display:flex;color:#015b7e;font-size:18px;font-weight:600;margin:0;padding:0;text-align:left;flex-grow:1;line-height:1.235}.rv-bank-accounts-ul{list-style-type:none;font-weight:400;margin:0;padding:8px 0}.rv-bank-accounts-ul-title{padding-top:8px;color:black;line-height:28px;font-size:14px;font-weight:500;text-align:left}.rv-bank-accounts-item-container{display:flex;justify-content:space-between;padding:4px 0}.rv-bank-accounts-item-name{color:#424242;font-size:14px;font-weight:500}.rv-bank-accounts-item-dot{margin:0 16px 8px;display:flex;flex-grow:1;border-bottom:1px dashed #9e9e9e}.rv-bank-accounts-item-value{text-align:end;color:#212121;font-size:14px;font-weight:700}";
const BanksAccounts = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.loading = '';
this.propsUpdated = async (triggerRequest = true) => {
await this.validateParams(this.configuration, this.filter, this.options, triggerRequest);
};
/**
* Validates if configuration was passed correctly before setting filter
* @param configuration - Config for authentication
* @param filter - filter to decide chart type to show
* @param options: Whitelabeling options
* @param triggerRequest - indicate if api request should be made
*/
this.validateParams = async (configuration, filter, options, triggerRequest = true) => {
this._configuration = getConfiguration(configuration);
if (this._configuration) {
ConfigurationInstance.configuration = this._configuration;
try {
this._filter = getFilter(filter);
this._options = getOptions(options);
if (validateRequiredParams(this._filter)) {
if (isBankAccounts(this._filter.reportType)) {
if (triggerRequest) {
await this.requestReportData();
}
}
else {
this.errorStatusCode = 500;
errorLog(Translations.RV_ERROR_INVALID_REPORT_TYPE);
}
}
else {
this.errorStatusCode = 204;
}
}
catch (e) {
this.errorStatusCode = 500;
errorLog(e);
}
}
else {
this.errorStatusCode = 0;
}
};
/**
* Request report data based on filter and configuration param
*/
this.requestReportData = async () => {
var _a;
this.errorStatusCode = undefined;
this.loading = Translations.RV_LOADING_REPORT;
try {
const reportData = (await getReportData({
filter: this._filter,
}));
this._summary = reportData.data;
if (((_a = reportData === null || reportData === void 0 ? void 0 : reportData.error) === null || _a === void 0 ? void 0 : _a.message[0]) === 'Service provider not supported') {
errorLog(Translations.DASHBOARD_FINANCIAL_SUMMARY_CHART_ERROR_ASP_NOT_SUPPORTED);
this.errorStatusCode = 404;
}
else if (isEmpty(this._summary)) {
this.errorStatusCode = 204;
}
}
catch (error) {
errorLog(Translations.RV_NOT_ABLE_TO_PARSE_REPORT_DATA, error);
}
finally {
this.loading = '';
}
};
this.renderMain = () => {
var _a, _b, _c, _d;
if (this.errorStatusCode !== undefined) {
return (h("railz-error-image", Object.assign({ statusCode: this.errorStatusCode || 500 }, (_a = this._options) === null || _a === void 0 ? void 0 : _a.errorIndicator)));
}
if (!isEmpty(this.loading)) {
return h("railz-loading", Object.assign({ loadingText: this.loading }, (_b = this._options) === null || _b === void 0 ? void 0 : _b.loadingIndicator));
}
const diffBanks = this.getAllBanks();
return (!isEmpty(this._summary) && (h("div", { class: "rv-bank-list" }, h("ul", { class: "rv-bank-accounts-ul", style: (_d = (_c = this._options) === null || _c === void 0 ? void 0 : _c.table) === null || _d === void 0 ? void 0 : _d.style }, Object.keys(diffBanks).map((bank) => {
var _a, _b;
return (h("div", null, h("li", { class: "rv-bank-accounts-ul-title", style: (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.title }, bank), diffBanks[bank].map((bankAccount) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
return (h("li", null, h("div", { class: "rv-bank-accounts-item-container", style: (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.itemContainer }, h("span", { class: "rv-bank-accounts-item-name", style: (_d = (_c = this._options) === null || _c === void 0 ? void 0 : _c.table) === null || _d === void 0 ? void 0 : _d.itemName }, bankAccount.accountName), h("span", { class: "rv-bank-accounts-item-dot", style: (_f = (_e = this._options) === null || _e === void 0 ? void 0 : _e.table) === null || _f === void 0 ? void 0 : _f.itemSeperator }), h("span", { class: "rv-bank-accounts-item-value", style: (_h = (_g = this._options) === null || _g === void 0 ? void 0 : _g.table) === null || _h === void 0 ? void 0 : _h.itemValue }, "$", formatNumber(bankAccount.currentBalance, 2, 2)))));
})));
})))));
};
}
async watchConfiguration(newValue, oldValue) {
if (newValue && oldValue && !isEqual(oldValue, newValue)) {
await this.validateParams(newValue, this.filter, this.options);
}
}
async watchFilter(newValue, oldValue) {
if (newValue && oldValue && !isEqual(oldValue, newValue)) {
await this.validateParams(this.configuration, newValue, this.options);
}
}
async watchOptions(newValue, oldValue) {
if (newValue && oldValue && !isEqual(oldValue, newValue)) {
await this.validateParams(this.configuration, this.filter, newValue);
}
}
componentWillLoad() {
this.propsUpdated && this.propsUpdated();
}
getAllBanks() {
var _a;
const institutionNames = (_a = this._summary) === null || _a === void 0 ? void 0 : _a.map(({ institutionName }) => institutionName);
const uniqueBankAccounts = new Set(institutionNames);
const diffBanks = {};
uniqueBankAccounts.forEach((institutionName) => {
var _a;
diffBanks[institutionName] = (_a = this._summary) === null || _a === void 0 ? void 0 : _a.filter(({ institutionName: internalInstitutionName }) => internalInstitutionName === institutionName);
});
return diffBanks;
}
render() {
var _a, _b, _c, _d;
if (this.errorStatusCode === 0) {
return null;
}
const TitleElement = () => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
return (h("p", { class: "rv-title", style: (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.title) === null || _b === void 0 ? void 0 : _b.style }, ((_d = (_c = this._options) === null || _c === void 0 ? void 0 : _c.content) === null || _d === void 0 ? void 0 : _d.title) || getTitleByReportType((_e = this._filter) === null || _e === void 0 ? void 0 : _e.reportType) || '', ' ', ((_g = (_f = this._options) === null || _f === void 0 ? void 0 : _f.tooltipIndicator) === null || _g === void 0 ? void 0 : _g.visible) &&
((_k = (_j = (_h = this._options) === null || _h === void 0 ? void 0 : _h.content) === null || _j === void 0 ? void 0 : _j.tooltip) === null || _k === void 0 ? void 0 : _k.description) ? (h("railz-tooltip", { tooltipStyle: Object.assign(Object.assign({ position: 'bottom-center' }, (_l = this._options) === null || _l === void 0 ? void 0 : _l.tooltipIndicator), { style: Object.assign({ marginLeft: '5px' }, (_o = (_m = this._options) === null || _m === void 0 ? void 0 : _m.tooltipIndicator) === null || _o === void 0 ? void 0 : _o.style) }), tooltipText: (_r = (_q = (_p = this._options) === null || _p === void 0 ? void 0 : _p.content) === null || _q === void 0 ? void 0 : _q.tooltip) === null || _r === void 0 ? void 0 : _r.description })) : null));
};
return (h("div", { class: "rv-container", style: (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.container) === null || _b === void 0 ? void 0 : _b.style }, h("div", { class: "rv-header-container" }, ((_d = (_c = this._options) === null || _c === void 0 ? void 0 : _c.title) === null || _d === void 0 ? void 0 : _d.visible) === false ? '' : h(TitleElement, null)), this.renderMain()));
}
static get watchers() { return {
"configuration": ["watchConfiguration"],
"filter": ["watchFilter"],
"options": ["watchOptions"]
}; }
static get style() { return bankAccountsCss; }
}, [1, "railz-bank-accounts", {
"configuration": [16],
"filter": [16],
"options": [16],
"loading": [32],
"_configuration": [32],
"_filter": [32],
"_options": [32],
"_summary": [32],
"errorStatusCode": [32]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["railz-bank-accounts", "railz-error-image", "railz-loading", "railz-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "railz-bank-accounts":
if (!customElements.get(tagName)) {
customElements.define(tagName, BanksAccounts);
}
break;
case "railz-error-image":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "railz-loading":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "railz-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { BanksAccounts as B, defineCustomElement as d };
//# sourceMappingURL=bank-accounts.js.map