@railzai/railz-visualizations
Version:
Railz.ai Visualizations
160 lines • 6.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.
*/
/* eslint-disable max-len, @typescript-eslint/no-unused-vars */
import { Component, Prop, h, State } from '@stencil/core';
import { isNil } from 'lodash-es';
import { formatNumber } from '../../helpers/utils';
import Translations from '../../config/translations/en.json';
import { RVReportTypes } from '../../types';
import { getBarOptionsStyle } from '../../helpers/chart.utils';
export class ProgressBar {
constructor() {
this.normalize = (value, max) => (value * 100) / max;
this.titleMapping = {
[RVReportTypes.INVOICES]: Translations.RV_INVOICES,
[RVReportTypes.BILLS]: Translations.RV_BILLS,
};
}
componentWillLoad() {
this._options = getBarOptionsStyle(this.options);
}
render() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
if (isNil(this.paidAmount) || isNil(this.unpaidAmount)) {
return h("span", null);
}
return (h("div", { class: "rv-progress-bar-div", style: (_a = this.options) === null || _a === void 0 ? void 0 : _a.divStyle },
((_b = this._options) === null || _b === void 0 ? void 0 : _b.hideLabels) ? null : (h("p", { class: "rv-progress-bar-total-unpaid", style: (_c = this._options) === null || _c === void 0 ? void 0 : _c.titleStyle, "aria-label": `${Translations.RV_TOTAL_UNPAID} ${formatNumber(this.unpaidAmount)}` },
Translations.RV_TOTAL_UNPAID,
" ",
this.titleMapping[this.reportType] || '',
' ',
h("span", { class: "rv-progress-bar-total-unpaid-value", style: (_d = this._options) === null || _d === void 0 ? void 0 : _d.titleValueStyle, "aria-hidden": true },
"$",
formatNumber(this.unpaidAmount)))),
h("div", { class: "rv-progress-bar-values" },
((_e = this._options) === null || _e === void 0 ? void 0 : _e.hideLabels) ? null : (h("div", { class: "rv-progress-bar-values-div" },
h("div", null,
h("p", { class: "rv-progress-bar-label", style: (_f = this._options) === null || _f === void 0 ? void 0 : _f.subTitle1Style, "aria-label": `${Translations.RV_PAID} ${formatNumber(this.paidAmount)}` }, Translations.RV_PAID),
h("p", { class: "rv-progress-bar-value", style: (_g = this._options) === null || _g === void 0 ? void 0 : _g.subTitleValue1Style, "aria-hidden": true },
"$",
formatNumber(this.paidAmount))),
h("div", null,
h("p", { class: "rv-progress-bar-label rv-progress-bar-overdue", style: (_h = this._options) === null || _h === void 0 ? void 0 : _h.subTitle2Style, "aria-label": `${Translations.RV_OVERDUE} ${formatNumber(this.overdueAmount) || 0}` }, Translations.RV_OVERDUE),
h("p", { class: "rv-progress-bar-value rv-progress-bar-overdue", style: (_j = this._options) === null || _j === void 0 ? void 0 : _j.subTitleValue2Style, "aria-hidden": true },
"$",
formatNumber(this.overdueAmount) || 0)))),
h("div", { class: "rv-progress-bar", style: (_k = this._options) === null || _k === void 0 ? void 0 : _k.barStyle },
h("span", { style: Object.assign({ width: `${this.normalize(this.paidAmount, this.unpaidAmount + this.paidAmount)}%` }, (_l = this._options) === null || _l === void 0 ? void 0 : _l.progressStyle) })))));
}
static get is() { return "railz-progress-bar"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["progress-bar.scss"]
}; }
static get styleUrls() { return {
"$": ["progress-bar.css"]
}; }
static get properties() { return {
"reportType": {
"type": "string",
"mutable": false,
"complexType": {
"original": "RVReportTypes.INVOICES | RVReportTypes.BILLS",
"resolved": "RVReportTypes.BILLS | RVReportTypes.INVOICES",
"references": {
"RVReportTypes": {
"location": "import",
"path": "../../types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "To indicate if its an invoice or bill"
},
"attribute": "report-type",
"reflect": false
},
"unpaidAmount": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "For unpaid amount of an invoice or bill"
},
"attribute": "unpaid-amount",
"reflect": false
},
"paidAmount": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "For paid amount of an invoice or bill"
},
"attribute": "paid-amount",
"reflect": false
},
"overdueAmount": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "For overdue amount of an invoice or bill"
},
"attribute": "overdue-amount",
"reflect": false
},
"options": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "RVOptionsBarStyle",
"resolved": "RVOptionsBarStyle",
"references": {
"RVOptionsBarStyle": {
"location": "import",
"path": "../../types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "For whitelabeling styling"
}
}
}; }
static get states() { return {
"_options": {}
}; }
}
//# sourceMappingURL=progress-bar.js.map