@railzai/railz-visualizations
Version:
Railz.ai Visualizations
279 lines • 13.9 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.
*/
/* eslint-disable react/jsx-no-bind */
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable @typescript-eslint/no-unused-vars */
import { Component, h, Prop, State, Watch } from '@stencil/core';
import { isEmpty, isEqual, startCase } from 'lodash-es';
import { getConfiguration, getOptions, getFilter, validateRequiredParams, } from '../../helpers/chart.utils';
import { ConfigurationInstance } from '../../services/configuration';
import Translations from '../../config/translations/en.json';
import { FinancialRatio, } from '../../types';
import { errorLog } from '../../services/logger';
import { roundNumber, isFinancialRatios, getTitleByReportType } from '../../helpers/utils';
import { getReportData } from './financial-ratios.utils';
export class FinancialRatios {
constructor() {
this.loading = '';
/**
* 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 (isFinancialRatios(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;
}
};
this.propsUpdated = async (triggerRequest = true) => {
await this.validateParams(this.configuration, this.filter, this.options, triggerRequest);
};
this.handleSelected = (selectedIndex) => {
const summaryKeys = Object.keys(this._summary);
const selectedKey = summaryKeys[selectedIndex];
this._selected = this._summary[selectedKey];
};
/**
* Request report data based on filter and configuration param
*/
this.requestReportData = async () => {
var _a, _b;
this.errorStatusCode = undefined;
this.loading = Translations.RV_LOADING_REPORT;
try {
const reportData = (await getReportData({
filter: this._filter,
}));
if (reportData === null || reportData === void 0 ? void 0 : reportData.data) {
this._summary = reportData === null || reportData === void 0 ? void 0 : reportData.data;
if (!isEmpty(this._summary)) {
this.handleSelected(0);
}
else {
this.errorStatusCode = (_a = reportData.error) === null || _a === void 0 ? void 0 : _a.statusCode;
}
}
else if (reportData === null || reportData === void 0 ? void 0 : reportData.error) {
this.errorStatusCode = (_b = reportData.error) === null || _b === void 0 ? void 0 : _b.statusCode;
}
else {
this.errorStatusCode = reportData === null || reportData === void 0 ? void 0 : reportData.status;
}
}
catch (error) {
errorLog(Translations.RV_NOT_ABLE_TO_PARSE_REPORT_DATA, error);
}
finally {
this.loading = '';
}
};
this.renderMain = () => {
var _a, _b, _c;
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 FinancialRatioItem = ({ key, ratioValue, }) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
const translation = (key, tooltip = false) => {
var _a, _b, _c, _d, _e, _f;
const financialRatioKey = Object.keys(FinancialRatio).find((ratio) => FinancialRatio[ratio] === key);
const financialRatio = FinancialRatio[financialRatioKey];
const contentTranslation = (_c = (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.label) === null || _c === void 0 ? void 0 : _c[financialRatio];
const contentTooltipTranslation = (_f = (_e = (_d = this._options) === null || _d === void 0 ? void 0 : _d.content) === null || _e === void 0 ? void 0 : _e.tooltip) === null || _f === void 0 ? void 0 : _f[financialRatio];
if (tooltip) {
if (contentTooltipTranslation)
return contentTooltipTranslation;
return Translations['RV_FINANCIAL_RATIO_TOOLTIP_' + financialRatioKey];
}
if (contentTranslation)
return contentTranslation;
return Translations['RV_FINANCIAL_RATIO_' + financialRatioKey] || startCase(key);
};
const item = this._selected[key];
const tooltipText = translation(key, true);
return (h("div", { class: "rv-financial-ratio-container-item", style: (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.ratio) === null || _b === void 0 ? void 0 : _b.itemContainer },
h("div", { class: "rv-financial-ratio-info", style: (_d = (_c = this._options) === null || _c === void 0 ? void 0 : _c.ratio) === null || _d === void 0 ? void 0 : _d.itemInfo },
h("div", { class: "rv-ratio-name", style: (_f = (_e = this._options) === null || _e === void 0 ? void 0 : _e.ratio) === null || _f === void 0 ? void 0 : _f.itemName },
!isEmpty(tooltipText) &&
(((_j = (_h = (_g = this._options) === null || _g === void 0 ? void 0 : _g.ratio) === null || _h === void 0 ? void 0 : _h.itemToolTip) === null || _j === void 0 ? void 0 : _j.visible) === false ? ('') : (h("railz-tooltip", { tooltipText: tooltipText, tooltipStyle: Object.assign({ position: 'bottom-right' }, (_l = (_k = this._options) === null || _k === void 0 ? void 0 : _k.ratio) === null || _l === void 0 ? void 0 : _l.itemToolTip) }))),
h("div", { class: "rv-ratio-name-text", style: (_o = (_m = this._options) === null || _m === void 0 ? void 0 : _m.ratio) === null || _o === void 0 ? void 0 : _o.itemNameText }, translation(key))),
h("div", { class: "rv-ratio-values", style: (_q = (_p = this._options) === null || _p === void 0 ? void 0 : _p.ratio) === null || _q === void 0 ? void 0 : _q.itemSummary },
h("div", { class: "rv-ratio-summary", style: (_s = (_r = this._options) === null || _r === void 0 ? void 0 : _r.ratio) === null || _s === void 0 ? void 0 : _s.itemValue }, roundNumber(item.currentValue)),
h("div", { class: "rv-ratio-percentage" },
h("railz-percentage", { percentage: item.percentageChange, percentageStyle: (_u = (_t = this._options) === null || _t === void 0 ? void 0 : _t.ratio) === null || _u === void 0 ? void 0 : _u.itemPercentage })))),
h("railz-sparkline-chart", { data: item.timePeriodData, sparkLineStyle: (_w = (_v = this._options) === null || _v === void 0 ? void 0 : _v.ratio) === null || _w === void 0 ? void 0 : _w.sparkLine })));
};
return (this._selected && (h("div", { class: "rv-financial-ratios" }, (_c = Object.entries(this._selected)) === null || _c === void 0 ? void 0 : _c.map(([key, value]) => (h(FinancialRatioItem, { key: key, ratioValue: value }))))));
};
}
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();
}
render() {
var _a, _b, _c, _d, _e, _f;
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));
};
const SelectElement = () => {
var _a, _b;
const items = Object.keys(this._summary).map((item) => Translations[`RV_FINANCIAL_RATIO_TYPE_${item.toUpperCase()}`]);
return (h("railz-select", { items: items,
//reset the component per loading
key: this.loading, selectStyle: (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.ratio) === null || _b === void 0 ? void 0 : _b.select, onSelectedItem: (event) => {
this.handleSelected(event.detail);
} }));
};
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", style: (_d = (_c = this._options) === null || _c === void 0 ? void 0 : _c.ratio) === null || _d === void 0 ? void 0 : _d.header },
((_f = (_e = this._options) === null || _e === void 0 ? void 0 : _e.title) === null || _f === void 0 ? void 0 : _f.visible) === false ? '' : h(TitleElement, null),
!isEmpty(this._summary) && h(SelectElement, null)),
this.renderMain()));
}
static get is() { return "railz-financial-ratios"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["financial-ratios.scss"]
}; }
static get styleUrls() { return {
"$": ["financial-ratios.css"]
}; }
static get properties() { return {
"configuration": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "RVConfiguration",
"resolved": "RVConfiguration",
"references": {
"RVConfiguration": {
"location": "import",
"path": "../../types"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Configuration information like authentication configuration"
}
},
"filter": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "RVFilterFinancialRatio",
"resolved": "RVFilterFinancialRatio",
"references": {
"RVFilterFinancialRatio": {
"location": "import",
"path": "../../types"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Filter information to query the backend APIs"
}
},
"options": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "RVOptions",
"resolved": "RVOptions",
"references": {
"RVOptions": {
"location": "import",
"path": "../../types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "For whitelabeling styling"
}
}
}; }
static get states() { return {
"loading": {},
"_configuration": {},
"_filter": {},
"_options": {},
"_summary": {},
"_selected": {},
"errorStatusCode": {}
}; }
static get watchers() { return [{
"propName": "configuration",
"methodName": "watchConfiguration"
}, {
"propName": "filter",
"methodName": "watchFilter"
}, {
"propName": "options",
"methodName": "watchOptions"
}]; }
}
//# sourceMappingURL=financial-ratios.js.map