@railzai/railz-visualizations
Version:
Railz.ai Visualizations
190 lines (179 loc) • 9.93 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 { r as registerInstance, h, c as createEvent } from './index-673cf901.js';
import { i as isEmpty } from './isEmpty-c9bbdb38.js';
import { a as accessibility, h as highcharts } from './accessibility-2460df40.js';
import './financial-ratios-8fecc95f.js';
import { A as ALL_FONTS } from './fonts-0519869d.js';
import './_commonjsHelpers-bac520b0.js';
/**
* Checks if `value` is `null`.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is `null`, else `false`.
* @example
*
* _.isNull(null);
* // => true
*
* _.isNull(void 0);
* // => false
*/
function isNull(value) {
return value === null;
}
const percentageCss = "@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-percentage{line-height:1.5;display:flex;font-size:14px;font-weight:500}.rv-percentage .rv-positive{color:#006037}.rv-percentage .rv-negative{color:#b30000}";
const Percentage = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* Percentage to show
*/
this.percentage = 0;
}
render() {
var _a, _b;
if (isNull(this.percentage) || this.percentage === 0) {
return null;
}
return (h("div", { class: "rv-percentage" }, this.percentage > 0 ? (h("div", { class: "rv-positive", style: (_a = this.percentageStyle) === null || _a === void 0 ? void 0 : _a.positive }, "\u25B2 ", this.percentage, "%")) : (h("div", { class: "rv-negative", style: (_b = this.percentageStyle) === null || _b === void 0 ? void 0 : _b.negative }, "\u25BC ", this.percentage, "%"))));
}
};
Percentage.style = percentageCss;
/* eslint-disable @typescript-eslint/no-unused-vars */
function Arrow({ style, up = false, }) {
return (h("div", { style: Object.assign({ transform: up ? 'rotate(180deg)' : 'rotate(0deg)', width: '24px', height: '24px' }, style) },
h("svg", { focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" },
h("path", { d: "M7 10l5 5 5-5z" }))));
}
const selectCss = "@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\"}.noselect{-webkit-touch-callout:none;user-select:none}.rv-select{position:relative;display:flex;font-family:Inter, Roboto, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgba(0, 0, 0, 0.87);border:0;margin:0;cursor:pointer}.rv-select-text{box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;padding-top:8px;padding-bottom:8px;position:absolute;visibility:hidden;z-index:1;margin:2px;border-radius:4px;color:#fff;overflow-wrap:break-word;text-align:left;font-size:11px;background-color:white}.rv-select-text *{color:rgba(0, 0, 0, 0.87);background-color:rgba(0, 0, 0, 0);min-height:16px;min-width:calc(100% - 32px);font-size:16px;font-weight:400;line-height:1.5;padding:6px 16px;white-space:nowrap}.rv-select-text *:hover,.rv-select-text *:focus{background:rgba(0, 0, 0, 0.04)}.rv-select-text .rv-select-text-selected{background:rgba(0, 0, 0, 0.08)}.rv-right{top:24px;left:-2px}.rv-left{top:24px;right:-2px}.rv-center{top:24px;left:-60px}.rv-select-text-open{visibility:visible;flex-shrink:0}";
const Select = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.selectedItem = createEvent(this, "selectedItem", 7);
/**
* The items to be listed
*/
this.items = ['Efficiency', 'Liquidity', 'Profitability', 'Reliability'];
/**
* Position of the Select text when opened
*/
this.selectStyle = { position: 'right' };
this.selectedIndex = 0;
this.open = false;
}
selectedItemHandler(selectedIndex) {
this.selectedItem.emit(selectedIndex);
}
render() {
var _a, _b, _c, _d, _e, _f, _g;
if (isEmpty(this.items)) {
return;
}
return (h("div", { class: "rv-select noselect", style: (_a = this.selectStyle) === null || _a === void 0 ? void 0 : _a.style, onClick: () => (this.open = !this.open) }, h("span", null, this.items[this.selectedIndex]), ' ', ((_c = (_b = this.selectStyle) === null || _b === void 0 ? void 0 : _b.arrow) === null || _c === void 0 ? void 0 : _c.visible) === false ? ('') : (h(Arrow, { up: this.open, style: (_e = (_d = this.selectStyle) === null || _d === void 0 ? void 0 : _d.arrow) === null || _e === void 0 ? void 0 : _e.style })), h("span", { class: `rv-select-text rv-${(_f = this.selectStyle) === null || _f === void 0 ? void 0 : _f.position} ${this.open && 'rv-select-text-open'}`, style: (_g = this.selectStyle) === null || _g === void 0 ? void 0 : _g.container }, this.items.map((item, index) => {
var _a, _b;
return (h("span", { class: this.selectedIndex === index && 'rv-select-text-selected', onClick: () => {
this.selectedItemHandler(index);
this.selectedIndex = index;
}, style: Object.assign(Object.assign({}, (_a = this.selectStyle) === null || _a === void 0 ? void 0 : _a.item), (this.selectedIndex === index && ((_b = this.selectStyle) === null || _b === void 0 ? void 0 : _b.selectedItem))) }, item));
}))));
}
};
Select.style = selectCss;
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
const getOptions = (data, options) => ({
chart: {
type: 'line',
backgroundColor: (options === null || options === void 0 ? void 0 : options.backgroundColor) || '#ffffff',
height: (options === null || options === void 0 ? void 0 : options.height) || 60,
reflow: true,
marginTop: 0,
spacingTop: 0,
spacingRight: 0,
marginRight: 0,
style: Object.assign({ fontFamily: ALL_FONTS }, options === null || options === void 0 ? void 0 : options.style),
events: {
load() {
// eslint-disable-next-line @typescript-eslint/no-this-alias
const chart = this;
setTimeout(() => {
if (chart) {
try {
chart.reflow();
}
catch (e) { }
}
}, 0);
},
},
},
colors: (options === null || options === void 0 ? void 0 : options.colors) || ['#015B7E'],
title: {
text: undefined,
},
xAxis: Object.assign({ labels: {
enabled: false,
}, visible: false, tickLength: 0 }, options === null || options === void 0 ? void 0 : options.xAxisStyle),
yAxis: Object.assign({ gridLineDashStyle: 'longdash', title: {
text: null,
}, maxPadding: 0.1, minPadding: 0.1, tickAmount: 1, tickPositioner: function () {
return [0];
}, endOnTick: false, startOnTick: false, softMin: -2, softMax: 2, labels: {
style: Object.assign({ color: '#424242' }, options === null || options === void 0 ? void 0 : options.label),
} }, options === null || options === void 0 ? void 0 : options.yAxisStyle),
tooltip: {
enabled: false,
},
legend: {
enabled: false,
},
series: [
{
data,
},
],
plotOptions: {
series: {
enableMouseTracking: false,
lineWidth: 3,
shadow: false,
marker: {
radius: null,
},
},
},
credits: {
enabled: false,
},
});
const sparklineChartCss = "@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;height:360px}.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-title{display:flex;color:#015b7e;font-size:18px;font-weight:600;margin:0;padding:0;text-align:left}.rv-sparkline-chart-container{display:flex;flex-direction:row;margin-left:-10;margin-top:20px;width:132px;height:60px}";
accessibility(highcharts);
const SparklineChart = class {
constructor(hostRef) {
registerInstance(this, hostRef);
}
watchContainerRef(newValue, _) {
var _a;
const options = getOptions(this.data.map((periodValue) => periodValue.value), (_a = this.sparkLineStyle) === null || _a === void 0 ? void 0 : _a.chart);
if (newValue && options) {
highcharts.chart(this.containerRef, options);
}
}
render() {
var _a;
return (h("div", { class: "rv-sparkline-chart-container", style: (_a = this.sparkLineStyle) === null || _a === void 0 ? void 0 : _a.container, id: "railz-chart", ref: (el) => (this.containerRef = el) }));
}
static get watchers() { return {
"containerRef": ["watchContainerRef"]
}; }
};
SparklineChart.style = sparklineChartCss;
export { Percentage as railz_percentage, Select as railz_select, SparklineChart as railz_sparkline_chart };
//# sourceMappingURL=railz-percentage_3.entry.js.map