@railzai/railz-visualizations
Version:
Railz.ai Visualizations
85 lines • 2.61 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 @typescript-eslint/no-unused-vars */
import { Component, h, Prop, Watch, State } from '@stencil/core';
import Highcharts from 'highcharts';
import highchartsAccessibility from 'highcharts/modules/accessibility';
import { getOptions } from './sparkline-charts.utils';
highchartsAccessibility(Highcharts);
export class SparklineChart {
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 is() { return "railz-sparkline-chart"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["./sparkline-chart.scss"]
}; }
static get styleUrls() { return {
"$": ["sparkline-chart.css"]
}; }
static get properties() { return {
"data": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Array<RVPeriodData>",
"resolved": "RVPeriodData[]",
"references": {
"Array": {
"location": "global"
},
"RVPeriodData": {
"location": "import",
"path": "../../types"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Data to display for sparkline"
}
},
"sparkLineStyle": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "RVOptionsRatioSparkLineStyle",
"resolved": "RVOptionsRatioSparkLineStyle",
"references": {
"RVOptionsRatioSparkLineStyle": {
"location": "import",
"path": "../../types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
}
}
}; }
static get states() { return {
"containerRef": {}
}; }
static get watchers() { return [{
"propName": "containerRef",
"methodName": "watchContainerRef"
}]; }
}
//# sourceMappingURL=sparkline-chart.js.map