@railzai/railz-visualizations
Version:
Railz.ai Visualizations
123 lines (118 loc) • 4.79 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 { a as accessibility, h as highcharts } from './accessibility.js';
import './financial-ratios.js';
import { A as ALL_FONTS } from './fonts.js';
/* 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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
}
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"]
}; }
static get style() { return sparklineChartCss; }
}, [1, "railz-sparkline-chart", {
"data": [16],
"sparkLineStyle": [16],
"containerRef": [32]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["railz-sparkline-chart"];
components.forEach(tagName => { switch (tagName) {
case "railz-sparkline-chart":
if (!customElements.get(tagName)) {
customElements.define(tagName, SparklineChart);
}
break;
} });
}
export { SparklineChart as S, defineCustomElement as d };
//# sourceMappingURL=sparkline-chart.js.map