@railzai/railz-visualizations
Version:
Railz.ai Visualizations
139 lines • 4.17 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, Watch, State, h, setMode } from '@stencil/core';
import Highcharts from 'highcharts';
import highchartsMore from 'highcharts/highcharts-more.js';
import solidGauge from 'highcharts/modules/solid-gauge.js';
import highchartsAccessibility from 'highcharts/modules/accessibility';
import { isEqual } from 'lodash-es';
import { getData, getOptions } from '../../helpers/chart.utils';
import { getOptionsGauge } from './gauge-chart.utils';
setMode((elm) => {
return elm.mode || elm.getAttribute('mode') || 'default';
});
highchartsMore(Highcharts);
solidGauge(Highcharts);
highchartsAccessibility(Highcharts);
export class RailzGaugeChart {
constructor() {
this.propsUpdated = async () => {
this._options = getOptions(this.options);
this._data = getData(this.data);
};
}
watchContainerRef(newValue) {
const options = getOptionsGauge(this._data, this._options);
if (newValue && options) {
Highcharts.chart(this.containerRef, options);
}
}
async watchOptions(newValue, oldValue) {
if (newValue && oldValue && !isEqual(oldValue, newValue)) {
this._options = getOptions(this.options);
}
}
async watchData(newValue, oldValue) {
if (newValue && oldValue && !isEqual(oldValue, newValue)) {
this._data = getData(this.data);
}
}
componentWillLoad() {
this.propsUpdated && this.propsUpdated();
}
render() {
var _a, _b, _c, _d;
return (this.data && (h("div", { class: "rv-score-chart-container", id: "railz-creditScore-chart", ref: (el) => (this.containerRef = el), style: {
width: (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.chart) === null || _b === void 0 ? void 0 : _b.width,
height: (_d = (_c = this._options) === null || _c === void 0 ? void 0 : _c.chart) === null || _d === void 0 ? void 0 : _d.height,
} })));
}
static get is() { return "railz-gauge-chart"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"default": ["gauge-chart.default.scss"],
"inherit": ["gauge-chart.inherit.scss"]
}; }
static get styleUrls() { return {
"default": ["gauge-chart.default.css"],
"inherit": ["gauge-chart.inherit.css"]
}; }
static get properties() { return {
"options": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "RVOptions",
"resolved": "RVOptions",
"references": {
"RVOptions": {
"location": "import",
"path": "../../types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "For whitelabeling styling"
}
},
"data": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "RVCreditScoreSummary",
"resolved": "RVCreditScoreSummary",
"references": {
"RVCreditScoreSummary": {
"location": "import",
"path": "../../types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"mode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "mode",
"reflect": false
}
}; }
static get states() { return {
"containerRef": {},
"_options": {},
"_data": {}
}; }
static get watchers() { return [{
"propName": "containerRef",
"methodName": "watchContainerRef"
}, {
"propName": "options",
"methodName": "watchOptions"
}, {
"propName": "data",
"methodName": "watchData"
}]; }
}
//# sourceMappingURL=gauge-chart.js.map