@railzai/railz-visualizations
Version:
Railz.ai Visualizations
251 lines (244 loc) • 16.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.
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-7829b74b.js');
const en = require('./en-4ea7a4ad.js');
const chart_utils = require('./chart.utils-652dfce2.js');
const financialRatios = require('./financial-ratios-8bba8608.js');
const isEqual = require('./isEqual-d0f95783.js');
const isEmpty = require('./isEmpty-a87fbcad.js');
require('./_commonjsHelpers-7cfde13a.js');
require('./colors-c18d54d3.js');
require('./fonts-877d8e4b.js');
require('./endpoints-d1a2add3.js');
const MONTHS = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
/**
* Percentage change calculation, 2 decimal places
*/
const getPercentageChange = (value1, value2) => {
if (chart_utils.isNil(value1) || chart_utils.isNil(value2) || value2 === 0) {
return null;
}
return Math.round(((value1 - value2) / value2) * 10000) / 100;
};
const formatDate = (dateString) => {
const date = new Date(dateString);
const fullMonthName = MONTHS[date.getMonth()];
const formattedDate = `${fullMonthName} ${date.getDate()}, ${date.getFullYear()}`;
return formattedDate;
};
/**
* Make API call to tax benchmarking report
*/
const getReportData = async ({ filter, }) => {
let reportData;
try {
const allParameters = chart_utils.pick(Object.assign({}, filter), ['industryCode', 'region', 'connectionUuid']);
if (chart_utils.isNil(allParameters === null || allParameters === void 0 ? void 0 : allParameters.region))
allParameters === null || allParameters === void 0 ? true : delete allParameters.region;
reportData = await chart_utils.RequestServiceInstance.getReportData({
path: financialRatios.RVReportTypesUrlMapping[filter.reportType],
filter: allParameters,
});
}
catch (error) {
chart_utils.errorLog(en.Translations.RV_NOT_ABLE_TO_RETRIEVE_REPORT_DATA, error);
reportData = { error };
}
return reportData;
};
const taxBenchmarkingCss = "@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;justify-content:space-between;width:auto}.rv-container p{margin-block:0}.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-header-container{display:flex;flex-direction:row;justify-content:space-between}.rv-tax-benchmarking-container{width:100%;height:100%}.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;align-items:baseline}.rv-chart-percentage{visibility:inherit;-webkit-font-smoothing:antialiased;margin:0;line-height:1.5;display:flex;flex-direction:row;font-size:14px;font-weight:500;padding-left:8px}.rv-chart-percentage .rv-positive{color:#006037}.rv-chart-percentage .rv-negative{color:#b30000}.rv-score-last-updated{align-self:center;text-align:center;font-size:12px;color:#757575;font-weight:500;line-height:28px}.rv-tax-benchmarking-group{margin-top:24px}.rv-tax-benchmarking-business-info{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:#424242}.table-container{overflow-x:auto;width:100%}.benchmarking-table{border-collapse:collapse;width:100%;margin-top:24px}th,td{padding:16px;text-align:left}.table-header{font-size:12px;font-weight:600;color:#424242}.header-with-tooltip{display:flex}tr{border-bottom:1px solid #ddd}select{border:none;background-color:transparent;font-size:1rem;font-family:inherit;cursor:pointer}option{background-color:white;font-size:1rem;font-family:inherit}option:checked{font-weight:bold}";
const renderPercentageChange = (percentage, options) => {
var _a, _b, _c, _d;
if (percentage < 0) {
return (index.h("div", { class: "rv-negative", style: (_b = (_a = options === null || options === void 0 ? void 0 : options.chart) === null || _a === void 0 ? void 0 : _a.pie) === null || _b === void 0 ? void 0 : _b.negative }, "\u25BC ", Math.abs(percentage), "%"));
}
else {
return (index.h("div", { class: "rv-positive", style: (_d = (_c = options === null || options === void 0 ? void 0 : options.chart) === null || _c === void 0 ? void 0 : _c.pie) === null || _d === void 0 ? void 0 : _d.positive }, chart_utils.isNil(percentage) || isNaN(percentage) || Math.abs(percentage) === Infinity ? ('-') : (index.h("div", null, "\u25B2 ", Math.abs(percentage), "%"))));
}
};
const TaxBenchmarking = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.loading = '';
this.updateTaxBenchmarkingParams = () => {
this.selectedLineItem = this._taxBenchmarkingData && Object.keys(this._taxBenchmarkingData)[0];
this.selectedCategory =
this._taxBenchmarkingData && Object.keys(this._taxBenchmarkingData[this.selectedLineItem])[0];
// set initial options and selected values
this.lineItemOptions = Object.keys(this._taxBenchmarkingData);
this.setCategoryOptions();
};
this.setCategoryOptions = () => {
this.categoryOptions = Object.keys(this._taxBenchmarkingData[this.selectedLineItem]);
this.selectedCategory = this.categoryOptions[0];
this.refreshTableData();
};
this.setSelectedLineItem = (event) => {
var _a;
this.selectedLineItem = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
this.setCategoryOptions();
};
this.setSelectedCategory = (event) => {
var _a;
this.selectedCategory = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
this.refreshTableData();
};
this.refreshTableData = () => {
if (this.selectedLineItem !== null && this.selectedCategory !== null) {
const businessValueItem = this._businessValuesData[this.selectedLineItem];
// set the keys and values for the table data as a row object
// [['Assets', 1234.56], ['Equity', 2134.67].....]
const tempDataArray = Object.entries(this._taxBenchmarkingData[this.selectedLineItem][this.selectedCategory]);
const dataResp = tempDataArray.map((data) => {
return {
lineItemName: data[0],
businessValue: businessValueItem[data[0]],
benchmarkValue: data[1],
differencePercent: getPercentageChange(businessValueItem[data[0]], data[1]),
};
});
this.tableData = dataResp;
}
};
/**
* 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 = chart_utils.getConfiguration(configuration);
if (this._configuration) {
chart_utils.ConfigurationInstance.configuration = this._configuration;
try {
this._filter = chart_utils.getFilter(filter);
this._options = chart_utils.getOptions(options);
if (chart_utils.validateIndustryCodeAndRegionParams(this._filter)) {
if (chart_utils.isTaxBenchmarking(this._filter.reportType)) {
if (triggerRequest) {
await this.requestReportData();
}
}
else {
this.errorStatusCode = 500;
chart_utils.errorLog(en.Translations.RV_ERROR_INVALID_REPORT_TYPE);
}
}
else {
this.errorStatusCode = 204;
}
}
catch (e) {
this.errorStatusCode = 500;
chart_utils.errorLog(e);
}
}
else {
this.errorStatusCode = 0;
}
};
this.propsUpdated = async (triggerRequest = true) => {
await this.validateParams(this.configuration, this.filter, this.options, triggerRequest);
};
/**
* Request report data based on filter and configuration param
* Formats retrieved data into Highcharts format using formatData
*/
this.requestReportData = async () => {
this.errorStatusCode = undefined;
this.loading = en.Translations.RV_LOADING_REPORT;
try {
const reportData = (await getReportData({
filter: this._filter,
}));
if (!chart_utils.isNil(reportData === null || reportData === void 0 ? void 0 : reportData.taxBenchmarkingData) && !chart_utils.isNil(reportData === null || reportData === void 0 ? void 0 : reportData.businessValues)) {
this._data = reportData;
this._taxBenchmarkingData = reportData === null || reportData === void 0 ? void 0 : reportData.taxBenchmarkingData;
this._businessValuesData = reportData === null || reportData === void 0 ? void 0 : reportData.businessValues;
this.updateTaxBenchmarkingParams();
}
else {
this.errorStatusCode = chart_utils.handleError(reportData);
}
}
catch (error) {
chart_utils.errorLog(en.Translations.RV_NOT_ABLE_TO_PARSE_REPORT_DATA, error);
}
finally {
this.loading = '';
}
};
}
async watchConfiguration(newValue, oldValue) {
if (newValue && oldValue && !isEqual.isEqual(oldValue, newValue)) {
await this.validateParams(newValue, this.filter, this.options);
}
}
async watchFilter(newValue, oldValue) {
if (newValue && oldValue && !isEqual.isEqual(oldValue, newValue)) {
await this.validateParams(this.configuration, newValue, this.options);
}
}
async watchOptions(newValue, oldValue) {
if (newValue && oldValue && !isEqual.isEqual(oldValue, newValue)) {
await this.validateParams(this.configuration, this.filter, newValue);
}
}
componentWillLoad() {
this.propsUpdated && this.propsUpdated();
}
render() {
var _a, _b, _c, _d;
const TitleElement = () => {
var _a, _b, _c, _d, _e;
return (index.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) || chart_utils.getTitleByReportType((_e = this._filter) === null || _e === void 0 ? void 0 : _e.reportType) || '', ' '));
};
const renderMain = () => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
if (isEmpty.isEmpty(this.loading) &&
this.errorStatusCode === undefined &&
isEmpty.isEmpty((_a = this._data) === null || _a === void 0 ? void 0 : _a.taxBenchmarkingData) &&
isEmpty.isEmpty((_b = this._data) === null || _b === void 0 ? void 0 : _b.businessValues)) {
// if it's not loading and all are empty, show no data error
this.errorStatusCode = 204;
}
if (this.errorStatusCode !== undefined) {
return (index.h("railz-error-image", Object.assign({ statusCode: this.errorStatusCode || 500 }, (_c = this._options) === null || _c === void 0 ? void 0 : _c.errorIndicator)));
}
if (!isEmpty.isEmpty(this.loading)) {
return index.h("railz-loading", Object.assign({ loadingText: this.loading }, (_d = this._options) === null || _d === void 0 ? void 0 : _d.loadingIndicator));
}
return (index.h("div", { class: "rv-tax-benchmarking-container" }, index.h("div", { class: "rv-tax-benchmarking-group" }, index.h("div", { class: "rv-tax-benchmarking-business-info" }, index.h("div", null, "Current Business:", ' ', index.h("span", { style: { color: '#111111' } }, isEmpty.isEmpty(this.loading) && ((_f = (_e = this._data) === null || _e === void 0 ? void 0 : _e.meta) === null || _f === void 0 ? void 0 : _f.businessName))), index.h("div", null, "As of ", isEmpty.isEmpty(this.loading) && formatDate((_h = (_g = this._data) === null || _g === void 0 ? void 0 : _g.meta) === null || _h === void 0 ? void 0 : _h.endDate))), index.h("div", { class: "table-container" }, index.h("table", { class: "benchmarking-table", id: "benchmarking-table" }, index.h("thead", null, index.h("tr", null, index.h("th", null, index.h("div", { class: "table-header" }, "Line Item ", '-', index.h("select", { onChange: this.setSelectedLineItem }, this.lineItemOptions.map((lineItem) => (index.h("option", { selected: this.selectedLineItem === lineItem, value: lineItem }, lineItem)))))), index.h("th", null, index.h("div", { class: "header-with-tooltip table-header" }, "Business Value", ' ', index.h("railz-tooltip", { tooltipStyle: Object.assign(Object.assign({ position: 'bottom-center' }, (_j = this._options) === null || _j === void 0 ? void 0 : _j.tooltipIndicator), { style: Object.assign({ marginLeft: '6px' }, (_l = (_k = this._options) === null || _k === void 0 ? void 0 : _k.tooltipIndicator) === null || _l === void 0 ? void 0 : _l.style) }), tooltipText: ((_p = (_o = (_m = this._options) === null || _m === void 0 ? void 0 : _m.content) === null || _o === void 0 ? void 0 : _o.tooltip) === null || _p === void 0 ? void 0 : _p.description) ||
en.Translations.RV_TOOLTIP_TAX_BENCHMARKING_BUSINESS_VALUE }))), index.h("th", null, index.h("div", { class: "header-with-tooltip table-header" }, "Benchmark Value", ' ', index.h("railz-tooltip", { tooltipStyle: Object.assign(Object.assign({ position: 'bottom-center' }, (_q = this._options) === null || _q === void 0 ? void 0 : _q.tooltipIndicator), { style: Object.assign({ marginLeft: '6px' }, (_s = (_r = this._options) === null || _r === void 0 ? void 0 : _r.tooltipIndicator) === null || _s === void 0 ? void 0 : _s.style) }), tooltipText: ((_v = (_u = (_t = this._options) === null || _t === void 0 ? void 0 : _t.content) === null || _u === void 0 ? void 0 : _u.tooltip) === null || _v === void 0 ? void 0 : _v.description) ||
en.Translations.RV_TOOLTIP_TAX_BENCHMARKING_BENCHMARK_VALUE }))), index.h("th", null, index.h("div", { class: "table-header" }, index.h("select", { onChange: this.setSelectedCategory }, this.categoryOptions.map((category) => (index.h("option", { selected: this.selectedCategory === category, value: category }, category)))))))), index.h("tbody", null, this.tableData.map((row) => (index.h("tr", null, index.h("td", null, row.lineItemName), index.h("td", null, row.businessValue || '-'), index.h("td", null, row.benchmarkValue), index.h("td", null, index.h("div", { class: "rv-chart-percentage" }, renderPercentageChange(row.differencePercent, {}))))))))))));
};
return (index.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 }, index.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 ? '' : index.h(TitleElement, null)), renderMain()));
}
static get watchers() { return {
"configuration": ["watchConfiguration"],
"filter": ["watchFilter"],
"options": ["watchOptions"]
}; }
};
TaxBenchmarking.style = taxBenchmarkingCss;
exports.railz_tax_benchmarking = TaxBenchmarking;
//# sourceMappingURL=railz-tax-benchmarking.cjs.entry.js.map