@railzai/railz-visualizations
Version:
Railz.ai Visualizations
190 lines • 10.6 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 { isNil } from 'lodash-es';
import { ALL_FONTS } from '../../types';
import { fromCssObjectToInline } from '../../helpers/utils';
const plotLine = {
width: 3,
color: '#fff',
zIndex: 4,
};
const getData = (score) => {
const data = [];
if (score > 850) {
data.push(score);
}
if (score > 750) {
data.push(850);
}
if (score > 675) {
data.push(750);
}
if (score > 625) {
data.push(675);
}
if (score > 575) {
data.push(625);
}
if (score > 525) {
data.push(575);
}
if (score > 0) {
data.push(525);
}
return data;
};
const getColor = (score, colors) => {
if (score > 750) {
return (colors === null || colors === void 0 ? void 0 : colors['750']) || '#009775';
}
if (score > 675) {
return (colors === null || colors === void 0 ? void 0 : colors['675']) || '#4BCD3E';
}
if (score > 625) {
return (colors === null || colors === void 0 ? void 0 : colors['625']) || '#FFCD00';
}
if (score > 575) {
return (colors === null || colors === void 0 ? void 0 : colors['575']) || '#FD8D62';
}
if (score > 525) {
return (colors === null || colors === void 0 ? void 0 : colors['525']) || '#FF1F3E';
}
return (colors === null || colors === void 0 ? void 0 : colors.default) || '#B30000';
};
/**
* Setup Highcharts options for gauge
*/
export const getOptionsGauge = (gauge, options) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16;
return ({
chart: {
type: 'solidgauge',
margin: [0, 0, 0, 0],
style: Object.assign({ fontFamily: ((_a = options === null || options === void 0 ? void 0 : options.chart) === null || _a === void 0 ? void 0 : _a.fontFamily) || ALL_FONTS }, (_b = options === null || options === void 0 ? void 0 : options.chart) === null || _b === void 0 ? void 0 : _b.style),
backgroundColor: ((_c = options === null || options === void 0 ? void 0 : options.chart) === null || _c === void 0 ? void 0 : _c.backgroundColor) || '#ffffff',
events: {
load() {
// eslint-disable-next-line @typescript-eslint/no-this-alias
const chart = this;
setTimeout(() => {
if (!isNil(chart)) {
try {
chart.reflow();
}
catch (e) { }
}
}, 0);
},
},
},
credits: {
enabled: false,
},
title: null,
pane: {
center: ((_d = options === null || options === void 0 ? void 0 : options.chart) === null || _d === void 0 ? void 0 : _d.type) === 'circle' ? ['50%', '50%'] : ['50%', '65%'],
size: ((_f = (_e = options === null || options === void 0 ? void 0 : options.chart) === null || _e === void 0 ? void 0 : _e.gauge) === null || _f === void 0 ? void 0 : _f.size) || '90%',
startAngle: ((_h = (_g = options === null || options === void 0 ? void 0 : options.chart) === null || _g === void 0 ? void 0 : _g.gauge) === null || _h === void 0 ? void 0 : _h.startAngle) === undefined ? -90 : (_k = (_j = options === null || options === void 0 ? void 0 : options.chart) === null || _j === void 0 ? void 0 : _j.gauge) === null || _k === void 0 ? void 0 : _k.startAngle,
endAngle: ((_m = (_l = options === null || options === void 0 ? void 0 : options.chart) === null || _l === void 0 ? void 0 : _l.gauge) === null || _m === void 0 ? void 0 : _m.endAngle) === undefined ? 90 : (_p = (_o = options === null || options === void 0 ? void 0 : options.chart) === null || _o === void 0 ? void 0 : _o.gauge) === null || _p === void 0 ? void 0 : _p.endAngle,
background: [
{
backgroundColor: '#F5F5F5',
shape: 'arc',
borderColor: 'transparent',
outerRadius: '90%',
innerRadius: '100%',
},
((_q = options === null || options === void 0 ? void 0 : options.chart) === null || _q === void 0 ? void 0 : _q.type) === 'circle'
? undefined
: {
innerRadius: '83%',
outerRadius: '83%',
shape: 'arc',
borderWidth: 3,
borderColor: '#F5F5F5',
backgroundColor: 'transparent',
},
],
},
tooltip: {
enabled: false,
},
// the value axis
yAxis: Object.assign({ min: ((_r = options === null || options === void 0 ? void 0 : options.chart) === null || _r === void 0 ? void 0 : _r.type) === 'circle' ? 0 : 300, max: ((_t = (_s = options === null || options === void 0 ? void 0 : options.chart) === null || _s === void 0 ? void 0 : _s.gauge) === null || _t === void 0 ? void 0 : _t.maxScore) ? (_v = (_u = options === null || options === void 0 ? void 0 : options.chart) === null || _u === void 0 ? void 0 : _u.gauge) === null || _v === void 0 ? void 0 : _v.maxScore : 850, tickPositions: ((_w = options === null || options === void 0 ? void 0 : options.chart) === null || _w === void 0 ? void 0 : _w.type) === 'circle' ? undefined : [300, 850], labels: ((_x = options === null || options === void 0 ? void 0 : options.chart) === null || _x === void 0 ? void 0 : _x.type) === 'circle'
? { enabled: false }
: {
distance: -5,
y: 15,
style: Object.assign({ color: '#757575' }, (_y = options === null || options === void 0 ? void 0 : options.chart) === null || _y === void 0 ? void 0 : _y.label),
}, stops: [
[
0,
((_0 = (_z = options === null || options === void 0 ? void 0 : options.chart) === null || _z === void 0 ? void 0 : _z.gauge) === null || _0 === void 0 ? void 0 : _0.getColor)
? (_2 = (_1 = options === null || options === void 0 ? void 0 : options.chart) === null || _1 === void 0 ? void 0 : _1.gauge) === null || _2 === void 0 ? void 0 : _2.getColor(gauge === null || gauge === void 0 ? void 0 : gauge.score)
: getColor(gauge === null || gauge === void 0 ? void 0 : gauge.score, (_4 = (_3 = options === null || options === void 0 ? void 0 : options.chart) === null || _3 === void 0 ? void 0 : _3.gauge) === null || _4 === void 0 ? void 0 : _4.colorRanges),
],
], plotLines: ((_5 = options === null || options === void 0 ? void 0 : options.chart) === null || _5 === void 0 ? void 0 : _5.type) === 'circle'
? undefined
: [
Object.assign({ value: 525 }, plotLine),
Object.assign({ value: 575 }, plotLine),
Object.assign({ value: 625 }, plotLine),
Object.assign({ value: 675 }, plotLine),
Object.assign({ value: 750 }, plotLine),
Object.assign({ value: 850 }, plotLine),
], lineColor: '#F5F5F5', lineWidth: 0, minorTickInterval: null, tickPixelInterval: 400, tickWidth: 0 }, (_6 = options === null || options === void 0 ? void 0 : options.chart) === null || _6 === void 0 ? void 0 : _6.yAxisStyle),
plotOptions: {
solidgauge: {
innerRadius: ((_8 = (_7 = options === null || options === void 0 ? void 0 : options.chart) === null || _7 === void 0 ? void 0 : _7.gauge) === null || _8 === void 0 ? void 0 : _8.innerRadius) ? (_10 = (_9 = options === null || options === void 0 ? void 0 : options.chart) === null || _9 === void 0 ? void 0 : _9.gauge) === null || _10 === void 0 ? void 0 : _10.innerRadius : '90%',
dataLabels: {
enabled: true,
y: ((_11 = options === null || options === void 0 ? void 0 : options.chart) === null || _11 === void 0 ? void 0 : _11.type) === 'circle' ? -14 : -40,
borderWidth: 0,
backgroundColor: 'none',
useHTML: true,
shadow: false,
style: {
fontSize: '16px',
fontFamily: ((_12 = options === null || options === void 0 ? void 0 : options.chart) === null || _12 === void 0 ? void 0 : _12.fontFamily) || ALL_FONTS,
},
formatter: function () {
var _a, _b, _c, _d, _e, _f, _g, _h;
return (gauge === null || gauge === void 0 ? void 0 : gauge.percentage)
? `
<div style="width:100%;text-align:center;font-family: ${((_a = options === null || options === void 0 ? void 0 : options.chart) === null || _a === void 0 ? void 0 : _a.fontFamily) || ALL_FONTS}">
<span style="font-size:1rem;font-weight: 600;${fromCssObjectToInline((_c = (_b = options === null || options === void 0 ? void 0 : options.chart) === null || _b === void 0 ? void 0 : _b.gauge) === null || _c === void 0 ? void 0 : _c.score)}">${gauge === null || gauge === void 0 ? void 0 : gauge.score}%</span>
</div>`
: `
<div style="width:100%;text-align:center;font-family: ${((_d = options === null || options === void 0 ? void 0 : options.chart) === null || _d === void 0 ? void 0 : _d.fontFamily) || ALL_FONTS}">
<span style="font-size: 36px;color: black;font-weight:600;${fromCssObjectToInline((_f = (_e = options === null || options === void 0 ? void 0 : options.chart) === null || _e === void 0 ? void 0 : _e.gauge) === null || _f === void 0 ? void 0 : _f.score)}">${gauge === null || gauge === void 0 ? void 0 : gauge.score}</span><br/>
<span style="font-size: 16px;font-weight: 400; ${fromCssObjectToInline((_h = (_g = options === null || options === void 0 ? void 0 : options.chart) === null || _g === void 0 ? void 0 : _g.gauge) === null || _h === void 0 ? void 0 : _h.rating)}">${gauge === null || gauge === void 0 ? void 0 : gauge.rating}</span>
</div>`;
},
},
tooltip: {
valueSuffix: '',
},
},
},
series: [
{
data: ((_14 = (_13 = options === null || options === void 0 ? void 0 : options.chart) === null || _13 === void 0 ? void 0 : _13.gauge) === null || _14 === void 0 ? void 0 : _14.getData)
? (_16 = (_15 = options === null || options === void 0 ? void 0 : options.chart) === null || _15 === void 0 ? void 0 : _15.gauge) === null || _16 === void 0 ? void 0 : _16.getData(gauge === null || gauge === void 0 ? void 0 : gauge.score)
: getData(gauge === null || gauge === void 0 ? void 0 : gauge.score),
animation: {
duration: 1000,
},
tooltip: {
useHTML: true,
},
},
],
exporting: {
enabled: false,
},
});
};
//# sourceMappingURL=gauge-chart.utils.js.map