@datarailsshared/dr_renderer 1.3.21 → 1.3.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/highcharts_renderer.js +0 -244
- package/tests/highcharts_renderer.test.js +0 -395
package/package.json
CHANGED
@@ -2226,9 +2226,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
|
|
2226
2226
|
return {aggfunc: aggfunc, base: base};
|
2227
2227
|
}
|
2228
2228
|
|
2229
|
-
highchartsRenderer.ptRenderSolidGauge = (pivotData, opts) => {
|
2230
|
-
return highchartsRenderer.ptRenderGauge(pivotData, opts, true);
|
2231
|
-
};
|
2232
2229
|
|
2233
2230
|
highchartsRenderer.transformOldGaugeOptions = (oldOptions) => {
|
2234
2231
|
const newOptions = highchartsRenderer.objectCopyJsonMethod(oldOptions);
|
@@ -2265,195 +2262,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
|
|
2265
2262
|
return new DrGaugeChart(pivotData, opts).render();
|
2266
2263
|
};
|
2267
2264
|
|
2268
|
-
highchartsRenderer.ptRenderGauge = (pivotData, opts, isSolidGauge = false) => {
|
2269
|
-
const gaugeopts = opts.chartOptions
|
2270
|
-
|| highchartsRenderer.getDefaultValueForChart(isSolidGauge ? 'gauge-solid-chart' : 'gauge-chart');
|
2271
|
-
|
2272
|
-
const chartOptions = {
|
2273
|
-
chart: {
|
2274
|
-
type: isSolidGauge ? 'solidgauge' : 'gauge',
|
2275
|
-
animation: disableAnimation ? false : true,
|
2276
|
-
},
|
2277
|
-
plotOptions: {
|
2278
|
-
solidgauge: {
|
2279
|
-
allowPointSelect: true,
|
2280
|
-
cursor: 'pointer',
|
2281
|
-
dataLabels: {
|
2282
|
-
allowOverlap: gaugeopts && gaugeopts.label
|
2283
|
-
? gaugeopts.label.overlap
|
2284
|
-
: false,
|
2285
|
-
y: 5,
|
2286
|
-
borderWidth: 0,
|
2287
|
-
useHTML: true,
|
2288
|
-
style: highchartsRenderer.getDataLabelsStyle(gaugeopts),
|
2289
|
-
},
|
2290
|
-
},
|
2291
|
-
series: {
|
2292
|
-
animation: !disableAnimation,
|
2293
|
-
},
|
2294
|
-
},
|
2295
|
-
credits: {
|
2296
|
-
enabled: false,
|
2297
|
-
},
|
2298
|
-
xAxis: {
|
2299
|
-
categories: highchartsRenderer.getFormattedColKeys(pivotData, null),
|
2300
|
-
},
|
2301
|
-
yAxis: isSolidGauge
|
2302
|
-
? {
|
2303
|
-
min: 0,
|
2304
|
-
max: gaugeopts.range.max,
|
2305
|
-
stops: [
|
2306
|
-
[gaugeopts.range.low / 100, '#55BF3B'], // green
|
2307
|
-
[gaugeopts.range.medium / 100, '#DDDF0D'], // yellow
|
2308
|
-
[gaugeopts.range.high / 100, '#DF5353'], // red
|
2309
|
-
],
|
2310
|
-
lineWidth: 0,
|
2311
|
-
minorTickInterval: null,
|
2312
|
-
tickPixelInterval: 400,
|
2313
|
-
tickWidth: 0,
|
2314
|
-
labels: {
|
2315
|
-
y: 16,
|
2316
|
-
},
|
2317
|
-
}
|
2318
|
-
: {
|
2319
|
-
min: 0,
|
2320
|
-
max: gaugeopts.range.max,
|
2321
|
-
minorTickInterval: 'auto',
|
2322
|
-
minorTickWidth: 1,
|
2323
|
-
minorTickLength: 10,
|
2324
|
-
minorTickPosition: 'inside',
|
2325
|
-
minorTickColor: CHART_COLORS.TICK_COLOR,
|
2326
|
-
tickPixelInterval: 30,
|
2327
|
-
tickWidth: 2,
|
2328
|
-
tickPosition: 'inside',
|
2329
|
-
tickLength: 10,
|
2330
|
-
tickColor: CHART_COLORS.TICK_COLOR,
|
2331
|
-
labels: {
|
2332
|
-
step: 2,
|
2333
|
-
rotation: 'auto',
|
2334
|
-
},
|
2335
|
-
title: {
|
2336
|
-
text: '', //'km/h'
|
2337
|
-
},
|
2338
|
-
plotBands: [
|
2339
|
-
{
|
2340
|
-
from: 0,
|
2341
|
-
to: (gaugeopts.range.max * gaugeopts.range.low) / 100,
|
2342
|
-
color: '#55BF3B', // green
|
2343
|
-
},
|
2344
|
-
{
|
2345
|
-
from: (gaugeopts.range.max * gaugeopts.range.low) / 100,
|
2346
|
-
to: (gaugeopts.range.max * gaugeopts.range.medium) / 100,
|
2347
|
-
color: '#DDDF0D', // yellow
|
2348
|
-
},
|
2349
|
-
{
|
2350
|
-
from: (gaugeopts.range.max * gaugeopts.range.medium) / 100,
|
2351
|
-
to: gaugeopts.range.max,
|
2352
|
-
color: '#DF5353', // red
|
2353
|
-
},
|
2354
|
-
],
|
2355
|
-
},
|
2356
|
-
pane: isSolidGauge
|
2357
|
-
? {
|
2358
|
-
center: ['50%', '85%'],
|
2359
|
-
size: '140%',
|
2360
|
-
startAngle: -90,
|
2361
|
-
endAngle: 90,
|
2362
|
-
background: {
|
2363
|
-
backgroundColor: (highchartsRenderer.highcharts_theme && highchartsRenderer.highcharts_theme .background2) || '#EEE',
|
2364
|
-
innerRadius: '60%',
|
2365
|
-
outerRadius: '100%',
|
2366
|
-
shape: 'arc',
|
2367
|
-
},
|
2368
|
-
}
|
2369
|
-
: {
|
2370
|
-
startAngle: -150,
|
2371
|
-
endAngle: 150,
|
2372
|
-
background: [
|
2373
|
-
{
|
2374
|
-
backgroundColor: {
|
2375
|
-
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
2376
|
-
stops: [
|
2377
|
-
[0, CHART_COLORS.BACKGROUND],
|
2378
|
-
[1, '#333'],
|
2379
|
-
],
|
2380
|
-
},
|
2381
|
-
borderWidth: 0,
|
2382
|
-
outerRadius: '109%',
|
2383
|
-
},
|
2384
|
-
{
|
2385
|
-
backgroundColor: {
|
2386
|
-
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
2387
|
-
stops: [
|
2388
|
-
[0, '#333'],
|
2389
|
-
[1, CHART_COLORS.BACKGROUND],
|
2390
|
-
],
|
2391
|
-
},
|
2392
|
-
borderWidth: 1,
|
2393
|
-
outerRadius: '107%',
|
2394
|
-
},
|
2395
|
-
{
|
2396
|
-
// default background
|
2397
|
-
},
|
2398
|
-
{
|
2399
|
-
backgroundColor: '#DDD',
|
2400
|
-
borderWidth: 0,
|
2401
|
-
outerRadius: '105%',
|
2402
|
-
innerRadius: '103%',
|
2403
|
-
},
|
2404
|
-
],
|
2405
|
-
},
|
2406
|
-
};
|
2407
|
-
|
2408
|
-
chartOptions.series = highchartsRenderer.ptCreateGaugeSeries(pivotData, opts, chartOptions, gaugeopts, isSolidGauge);
|
2409
|
-
|
2410
|
-
highchartsRenderer.setTitleAndSubTitle(chartOptions, opts, gaugeopts);
|
2411
|
-
chartOptions.plotOptions.solidgauge = highchartsRenderer.getDataLabelsOptions(gaugeopts, chartOptions.plotOptions.solidgauge);
|
2412
|
-
|
2413
|
-
return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
|
2414
|
-
};
|
2415
|
-
|
2416
|
-
highchartsRenderer.ptCreateGaugeSeries = (pivotData, opts, chartOptions, gaugeopts, isSolidGauge) => {
|
2417
|
-
const lineSeries = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, chartOptions);
|
2418
|
-
|
2419
|
-
let total = [];
|
2420
|
-
lodash.forEach(lineSeries, (obj) => {
|
2421
|
-
lodash.forEach(obj.data, (arr2) => {
|
2422
|
-
total = total.concat(arr2);
|
2423
|
-
});
|
2424
|
-
});
|
2425
|
-
total = lodash.filter(total, value => !isNaN(value));
|
2426
|
-
|
2427
|
-
let aggfunc = (a, b) => a + b;
|
2428
|
-
let base = 0;
|
2429
|
-
let __ret = highchartsRenderer.getSingleValueAgg(gaugeopts, aggfunc, base);
|
2430
|
-
|
2431
|
-
aggfunc = __ret.aggfunc;
|
2432
|
-
base = __ret.base;
|
2433
|
-
|
2434
|
-
const aggregator = pivotData.getAggregator([], []);
|
2435
|
-
const value = total.length > 0 ? total.reduce(aggfunc, base) : aggregator.value();
|
2436
|
-
const valueFormatted = lodash.isNumber(value) ? aggregator.format(value, true) : value;
|
2437
|
-
|
2438
|
-
let gaugeSeries = [
|
2439
|
-
{
|
2440
|
-
name: '',
|
2441
|
-
colorByPoint: true,
|
2442
|
-
data: [value],
|
2443
|
-
dataLabels: {
|
2444
|
-
format: `<div style="text-align:center"><span style="font-size:${ isSolidGauge ? 25 : 15 }px;color:black">`
|
2445
|
-
+ valueFormatted + '</span><br/><span style="font-size:12px;color:silver"></span></div>',
|
2446
|
-
enabled: gaugeopts && gaugeopts.label && !isSolidGauge ? gaugeopts.label.show : true,
|
2447
|
-
allowOverlap: gaugeopts && gaugeopts.label ? gaugeopts.label.overlap : false,
|
2448
|
-
style: highchartsRenderer.getDataLabelsStyle(gaugeopts),
|
2449
|
-
},
|
2450
|
-
},
|
2451
|
-
];
|
2452
|
-
gaugeSeries[0] = highchartsRenderer.getDataLabelsOptions(gaugeopts, gaugeSeries[0]);
|
2453
|
-
|
2454
|
-
return gaugeSeries;
|
2455
|
-
};
|
2456
|
-
|
2457
2265
|
highchartsRenderer.ptRenderKpi = function (pivotData, opts) {
|
2458
2266
|
var chartOptions = {};
|
2459
2267
|
|
@@ -7762,21 +7570,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
|
|
7762
7570
|
axisTooltipTitle: ' Best practice: we recommend no more than one segment.',
|
7763
7571
|
legendTooltipTitle: 'To create a drill-down within this category, drag a field here.',
|
7764
7572
|
},
|
7765
|
-
'gauge-solid-chart': {
|
7766
|
-
name: 'Gauge chart',
|
7767
|
-
label: 'Gauge',
|
7768
|
-
title: 'Measures progress toward a goal or a KPI.',
|
7769
|
-
axisName: 'X-Axis',
|
7770
|
-
legendName: 'Data Series',
|
7771
|
-
startedMessage: 'To get started, drag one field to the value section. Best practice: Drag one field to the filter section, and filter as required.',
|
7772
|
-
},
|
7773
|
-
'gauge-chart': {
|
7774
|
-
name: 'Gauge Speedometer',
|
7775
|
-
label: 'Gauge Speedometer',
|
7776
|
-
axisName: 'X-Axis',
|
7777
|
-
legendName: 'Data Series',
|
7778
|
-
startedMessage: 'To get started, drag one field to the value section. Best practice: Drag one field to the filter section, and filter as required.',
|
7779
|
-
},
|
7780
7573
|
[highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED]: {
|
7781
7574
|
name: 'Gauge chart',
|
7782
7575
|
label: 'Gauge',
|
@@ -8142,47 +7935,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
|
|
8142
7935
|
name: 'Gauge',
|
8143
7936
|
class: 'google-visualization-charteditor-mini-gauge',
|
8144
7937
|
subtypes: [
|
8145
|
-
{
|
8146
|
-
type: 'gauge-solid-chart',
|
8147
|
-
name: highchartsRenderer.chartsTypesInfo['gauge-solid-chart'].name,
|
8148
|
-
class: 'google-visualization-charteditor-thumbs-gauge-solid',
|
8149
|
-
render: highchartsRenderer.ptRenderSolidGauge,
|
8150
|
-
suboptions: [
|
8151
|
-
highchartsRenderer.suboptions["value"],
|
8152
|
-
highchartsRenderer.suboptions["range"],
|
8153
|
-
highchartsRenderer.suboptions["tooltips"],
|
8154
|
-
highchartsRenderer.suboptions["subtitle"],
|
8155
|
-
highchartsRenderer.suboptions["widget_library"],
|
8156
|
-
highchartsRenderer.suboptions["table_options_transpose"],
|
8157
|
-
highchartsRenderer.suboptions["table_design_options"],
|
8158
|
-
highchartsRenderer.suboptions["chart_grid"],
|
8159
|
-
highchartsRenderer.suboptions["negative_number_format"],
|
8160
|
-
highchartsRenderer.suboptions["legends"],
|
8161
|
-
]
|
8162
|
-
},
|
8163
|
-
{
|
8164
|
-
type: 'gauge-chart',
|
8165
|
-
name: highchartsRenderer.chartsTypesInfo['gauge-chart'].name,
|
8166
|
-
class: 'google-visualization-charteditor-thumbs-gauge',
|
8167
|
-
render: highchartsRenderer.ptRenderGauge,
|
8168
|
-
suboptions: [
|
8169
|
-
highchartsRenderer.suboptions["value"],
|
8170
|
-
highchartsRenderer.suboptions["range"],
|
8171
|
-
highchartsRenderer.suboptions["tooltips"],
|
8172
|
-
highchartsRenderer.suboptions["subtitle"],
|
8173
|
-
highchartsRenderer.suboptions["widget_library"],
|
8174
|
-
highchartsRenderer.suboptions["table_options_transpose"],
|
8175
|
-
highchartsRenderer.suboptions["table_design_options"],
|
8176
|
-
highchartsRenderer.suboptions["chart_grid"],
|
8177
|
-
highchartsRenderer.suboptions["negative_number_format"],
|
8178
|
-
highchartsRenderer.suboptions["legends"],
|
8179
|
-
]
|
8180
|
-
},
|
8181
7938
|
{
|
8182
7939
|
type: highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED,
|
8183
7940
|
name: highchartsRenderer.chartsTypesInfo[highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED].name,
|
8184
7941
|
class: 'google-visualization-charteditor-thumbs-gauge-solid',
|
8185
|
-
hidden: true,
|
8186
7942
|
render: highchartsRenderer.ptRenderGaugeEnhanced,
|
8187
7943
|
suboptions: [
|
8188
7944
|
highchartsRenderer.suboptions["label_gauge"],
|
@@ -8349,166 +8349,6 @@ describe('highcharts_renderer', () => {
|
|
8349
8349
|
});
|
8350
8350
|
});
|
8351
8351
|
|
8352
|
-
describe('Function ptCreateGaugeSeries', () => {
|
8353
|
-
|
8354
|
-
const pivotDataMock = {
|
8355
|
-
getAggregator: () => ({
|
8356
|
-
value: () => 1000,
|
8357
|
-
format: (val) => `formatted(${ val })`,
|
8358
|
-
})
|
8359
|
-
}
|
8360
|
-
|
8361
|
-
beforeEach(() => {
|
8362
|
-
spyOn(highchartsRenderer, 'getSingleValueAgg').and.callFake(
|
8363
|
-
(_gaugeOpts, aggfunc, base) => ({ aggfunc, base })
|
8364
|
-
);
|
8365
|
-
spyOn(highchartsRenderer, 'getDataLabelsStyle').and.returnValue('test_style');
|
8366
|
-
spyOn(highchartsRenderer, 'getDataLabelsOptions').and.callFake(
|
8367
|
-
(_gaugeOpts, seriesElement) => ({...seriesElement, additionalOptions: 'test_additional_opts'})
|
8368
|
-
);
|
8369
|
-
});
|
8370
|
-
|
8371
|
-
describe('with two calc values', () => {
|
8372
|
-
|
8373
|
-
const mockGaugeOpts = {
|
8374
|
-
label: {
|
8375
|
-
overlap: true,
|
8376
|
-
show: false,
|
8377
|
-
}
|
8378
|
-
};
|
8379
|
-
|
8380
|
-
beforeEach(() => {
|
8381
|
-
spyOn(highchartsRenderer, 'ptCreateBasicLineSeries').and.returnValue([
|
8382
|
-
{
|
8383
|
-
data: [39],
|
8384
|
-
initialName: "Test Calc",
|
8385
|
-
name: "Test Calc"
|
8386
|
-
},
|
8387
|
-
{
|
8388
|
-
data: [21],
|
8389
|
-
initialName: "Test Calc 2",
|
8390
|
-
name: "Test Calc 2"
|
8391
|
-
}
|
8392
|
-
]);
|
8393
|
-
});
|
8394
|
-
|
8395
|
-
it('should create gauge series, two calc values, isSolidGauge = false, labels disabled', () => {
|
8396
|
-
expect(highchartsRenderer.ptCreateGaugeSeries(pivotDataMock, {}, {}, mockGaugeOpts, false)).toEqual([
|
8397
|
-
{
|
8398
|
-
additionalOptions: 'test_additional_opts',
|
8399
|
-
colorByPoint: true,
|
8400
|
-
data: [60],
|
8401
|
-
dataLabels: {
|
8402
|
-
allowOverlap: true,
|
8403
|
-
enabled: false,
|
8404
|
-
format: '<div style="text-align:center"><span style="font-size:15px;color:black">formatted(60)</span><br/><span style="font-size:12px;color:silver"></span></div>',
|
8405
|
-
style: 'test_style',
|
8406
|
-
},
|
8407
|
-
name: '',
|
8408
|
-
},
|
8409
|
-
]);
|
8410
|
-
});
|
8411
|
-
|
8412
|
-
it('should create gauge series, two calc values, isSolidGauge = false, labels enabled', () => {
|
8413
|
-
const gaugeOpts = lodash.cloneDeep(mockGaugeOpts);
|
8414
|
-
gaugeOpts.label.show = true;
|
8415
|
-
expect(highchartsRenderer.ptCreateGaugeSeries(pivotDataMock, {}, {}, gaugeOpts, false)).toEqual([
|
8416
|
-
{
|
8417
|
-
additionalOptions: 'test_additional_opts',
|
8418
|
-
colorByPoint: true,
|
8419
|
-
data: [60],
|
8420
|
-
dataLabels: {
|
8421
|
-
allowOverlap: true,
|
8422
|
-
enabled: true,
|
8423
|
-
format: '<div style="text-align:center"><span style="font-size:15px;color:black">formatted(60)</span><br/><span style="font-size:12px;color:silver"></span></div>',
|
8424
|
-
style: 'test_style',
|
8425
|
-
},
|
8426
|
-
name: '',
|
8427
|
-
},
|
8428
|
-
]);
|
8429
|
-
});
|
8430
|
-
|
8431
|
-
it('should create gauge series, two calc values, isSolidGauge = true', () => {
|
8432
|
-
expect(highchartsRenderer.ptCreateGaugeSeries(pivotDataMock, {}, {}, mockGaugeOpts, true)).toEqual([
|
8433
|
-
{
|
8434
|
-
additionalOptions: 'test_additional_opts',
|
8435
|
-
colorByPoint: true,
|
8436
|
-
data: [60],
|
8437
|
-
dataLabels: {
|
8438
|
-
allowOverlap: true,
|
8439
|
-
enabled: true,
|
8440
|
-
format: '<div style="text-align:center"><span style="font-size:25px;color:black">formatted(60)</span><br/><span style="font-size:12px;color:silver"></span></div>',
|
8441
|
-
style: 'test_style',
|
8442
|
-
},
|
8443
|
-
name: '',
|
8444
|
-
},
|
8445
|
-
]);
|
8446
|
-
});
|
8447
|
-
});
|
8448
|
-
|
8449
|
-
it('should create gauge series, one calc value', () => {
|
8450
|
-
const mockGaugeOpts = {
|
8451
|
-
label: {
|
8452
|
-
overlap: true,
|
8453
|
-
show: false,
|
8454
|
-
}
|
8455
|
-
};
|
8456
|
-
|
8457
|
-
spyOn(highchartsRenderer, 'ptCreateBasicLineSeries').and.returnValue([
|
8458
|
-
{
|
8459
|
-
data: [39],
|
8460
|
-
initialName: "Test Calc",
|
8461
|
-
name: "Test Calc"
|
8462
|
-
},
|
8463
|
-
]);
|
8464
|
-
|
8465
|
-
expect(highchartsRenderer.ptCreateGaugeSeries(pivotDataMock, {}, {}, mockGaugeOpts, false)).toEqual([
|
8466
|
-
{
|
8467
|
-
additionalOptions: 'test_additional_opts',
|
8468
|
-
colorByPoint: true,
|
8469
|
-
data: [39],
|
8470
|
-
dataLabels: {
|
8471
|
-
allowOverlap: true,
|
8472
|
-
enabled: false,
|
8473
|
-
format: '<div style="text-align:center"><span style="font-size:15px;color:black">formatted(39)</span><br/><span style="font-size:12px;color:silver"></span></div>',
|
8474
|
-
style: 'test_style',
|
8475
|
-
},
|
8476
|
-
name: '',
|
8477
|
-
},
|
8478
|
-
]);
|
8479
|
-
});
|
8480
|
-
|
8481
|
-
it('should create gauge series, no calculated, one value field', () => {
|
8482
|
-
const mockGaugeOpts = {
|
8483
|
-
label: {
|
8484
|
-
overlap: true,
|
8485
|
-
show: false,
|
8486
|
-
}
|
8487
|
-
};
|
8488
|
-
|
8489
|
-
spyOn(highchartsRenderer, 'ptCreateBasicLineSeries').and.returnValue([
|
8490
|
-
{
|
8491
|
-
data: [32605]
|
8492
|
-
},
|
8493
|
-
]);
|
8494
|
-
|
8495
|
-
expect(highchartsRenderer.ptCreateGaugeSeries(pivotDataMock, {}, {}, mockGaugeOpts, false)).toEqual([
|
8496
|
-
{
|
8497
|
-
additionalOptions: 'test_additional_opts',
|
8498
|
-
colorByPoint: true,
|
8499
|
-
data: [32605],
|
8500
|
-
dataLabels: {
|
8501
|
-
allowOverlap: true,
|
8502
|
-
enabled: false,
|
8503
|
-
format: '<div style="text-align:center"><span style="font-size:15px;color:black">formatted(32605)</span><br/><span style="font-size:12px;color:silver"></span></div>',
|
8504
|
-
style: 'test_style',
|
8505
|
-
},
|
8506
|
-
name: '',
|
8507
|
-
},
|
8508
|
-
]);
|
8509
|
-
});
|
8510
|
-
});
|
8511
|
-
|
8512
8352
|
describe('highchartsRenderer.ptRenderPieWithDrillDown', () => {
|
8513
8353
|
beforeEach(() => {
|
8514
8354
|
jest.spyOn(highchartsRenderer, 'ptCreateSeriesToDrillDownChart')
|
@@ -8869,241 +8709,6 @@ describe('highcharts_renderer', () => {
|
|
8869
8709
|
});
|
8870
8710
|
});
|
8871
8711
|
|
8872
|
-
describe('Function ptRenderGauge', () => {
|
8873
|
-
|
8874
|
-
const pivotDataMock = {
|
8875
|
-
getColKeys: () => [[1], [2], [3]],
|
8876
|
-
};
|
8877
|
-
|
8878
|
-
const commonExpectedOptions = {
|
8879
|
-
chart: { animation: true, type: 'gauge' },
|
8880
|
-
credits: { enabled: false },
|
8881
|
-
pane: {
|
8882
|
-
background: [
|
8883
|
-
{
|
8884
|
-
backgroundColor: {
|
8885
|
-
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
|
8886
|
-
stops: [
|
8887
|
-
[0, '#fff'],
|
8888
|
-
[1, '#333'],
|
8889
|
-
],
|
8890
|
-
},
|
8891
|
-
borderWidth: 0,
|
8892
|
-
outerRadius: '109%',
|
8893
|
-
},
|
8894
|
-
{
|
8895
|
-
backgroundColor: {
|
8896
|
-
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
|
8897
|
-
stops: [
|
8898
|
-
[0, '#333'],
|
8899
|
-
[1, '#fff'],
|
8900
|
-
],
|
8901
|
-
},
|
8902
|
-
borderWidth: 1,
|
8903
|
-
outerRadius: '107%',
|
8904
|
-
},
|
8905
|
-
{},
|
8906
|
-
{ backgroundColor: '#DDD', borderWidth: 0, innerRadius: '103%', outerRadius: '105%' },
|
8907
|
-
],
|
8908
|
-
endAngle: 150,
|
8909
|
-
startAngle: -150,
|
8910
|
-
},
|
8911
|
-
plotOptions: {
|
8912
|
-
series: { animation: true },
|
8913
|
-
solidgauge: {
|
8914
|
-
additionalOptions: 'test_additional_opts',
|
8915
|
-
allowPointSelect: true,
|
8916
|
-
cursor: 'pointer',
|
8917
|
-
dataLabels: { allowOverlap: true, borderWidth: 0, style: 'test_style', useHTML: true, y: 5 },
|
8918
|
-
},
|
8919
|
-
},
|
8920
|
-
series: 'test_gauge_series',
|
8921
|
-
subtitle: 'test_subtitle',
|
8922
|
-
title: 'test_title',
|
8923
|
-
xAxis: { categories: ['formatted(1)', 'formatted(2)', 'formatted(3)'] },
|
8924
|
-
};
|
8925
|
-
|
8926
|
-
const gaugeDefaultChartOptions = {
|
8927
|
-
label: {
|
8928
|
-
overlap: true,
|
8929
|
-
show: false,
|
8930
|
-
},
|
8931
|
-
range: {
|
8932
|
-
min: 0,
|
8933
|
-
max: 12345,
|
8934
|
-
low: 100,
|
8935
|
-
medium: 200,
|
8936
|
-
high: 300,
|
8937
|
-
},
|
8938
|
-
};
|
8939
|
-
|
8940
|
-
const chartOptionsInOpts = {
|
8941
|
-
label: {
|
8942
|
-
overlap: false,
|
8943
|
-
show: true,
|
8944
|
-
},
|
8945
|
-
range: {
|
8946
|
-
min: 1,
|
8947
|
-
max: 234567,
|
8948
|
-
low: 500,
|
8949
|
-
medium: 800,
|
8950
|
-
high: 1000,
|
8951
|
-
},
|
8952
|
-
};
|
8953
|
-
|
8954
|
-
beforeEach(() => {
|
8955
|
-
spyOn(highchartsRenderer, 'getDefaultValueForChart').and.returnValue(gaugeDefaultChartOptions);
|
8956
|
-
spyOn(highchartsRenderer, 'getDataLabelsStyle').and.returnValue('test_style');
|
8957
|
-
spyOn(highchartsRenderer, 'getDataLabelsOptions').and.callFake(
|
8958
|
-
(_gaugeOpts, seriesElement) => ({...seriesElement, additionalOptions: 'test_additional_opts'})
|
8959
|
-
);
|
8960
|
-
spyOn(highchartsRenderer, 'getFormattedColKeys').and.callFake(
|
8961
|
-
(pivotData, _keys) => pivotData.getColKeys().map(key => `formatted(${ key })`)
|
8962
|
-
);
|
8963
|
-
spyOn(highchartsRenderer, 'ptCreateGaugeSeries').and.returnValue('test_gauge_series');
|
8964
|
-
spyOn(highchartsRenderer, 'setTitleAndSubTitle').and.callFake((chartOptions, _opts, _gaugeopts) => {
|
8965
|
-
chartOptions.title = 'test_title';
|
8966
|
-
chartOptions.subtitle = 'test_subtitle';
|
8967
|
-
});
|
8968
|
-
spyOn(highchartsRenderer, 'ptCreateElementAndDraw').and.returnValue();
|
8969
|
-
});
|
8970
|
-
|
8971
|
-
it('should call ptCreateElementAndDraw with proper options: no chartOptions passed in opts', () => {
|
8972
|
-
const optsMock = {
|
8973
|
-
testOptsField: 'test_opts_field_value',
|
8974
|
-
};
|
8975
|
-
|
8976
|
-
highchartsRenderer.ptRenderGauge(pivotDataMock, lodash.cloneDeep(optsMock));
|
8977
|
-
|
8978
|
-
const expectedChartOptions = {
|
8979
|
-
...commonExpectedOptions,
|
8980
|
-
yAxis: {
|
8981
|
-
labels: { rotation: 'auto', step: 2 },
|
8982
|
-
max: 12345,
|
8983
|
-
min: 0,
|
8984
|
-
minorTickColor: '#666',
|
8985
|
-
minorTickInterval: 'auto',
|
8986
|
-
minorTickLength: 10,
|
8987
|
-
minorTickPosition: 'inside',
|
8988
|
-
minorTickWidth: 1,
|
8989
|
-
plotBands: [
|
8990
|
-
{ color: '#55BF3B', from: 0, to: 12345 },
|
8991
|
-
{ color: '#DDDF0D', from: 12345, to: 24690 },
|
8992
|
-
{ color: '#DF5353', from: 24690, to: 12345 },
|
8993
|
-
],
|
8994
|
-
tickColor: '#666',
|
8995
|
-
tickLength: 10,
|
8996
|
-
tickPixelInterval: 30,
|
8997
|
-
tickPosition: 'inside',
|
8998
|
-
tickWidth: 2,
|
8999
|
-
title: { text: '' },
|
9000
|
-
},
|
9001
|
-
};
|
9002
|
-
|
9003
|
-
expect(highchartsRenderer.ptCreateGaugeSeries)
|
9004
|
-
.toHaveBeenCalledWith(pivotDataMock, optsMock, expectedChartOptions, gaugeDefaultChartOptions, false);
|
9005
|
-
expect(highchartsRenderer.ptCreateElementAndDraw).toHaveBeenCalledWith(expectedChartOptions, optsMock);
|
9006
|
-
});
|
9007
|
-
|
9008
|
-
it('should call ptCreateElementAndDraw with proper options: chartOptions passed in opts', () => {
|
9009
|
-
const optsMock = {
|
9010
|
-
testOptsField: 'test_opts_field_value',
|
9011
|
-
chartOptions: chartOptionsInOpts,
|
9012
|
-
};
|
9013
|
-
|
9014
|
-
highchartsRenderer.ptRenderGauge(pivotDataMock, lodash.cloneDeep(optsMock));
|
9015
|
-
|
9016
|
-
const expectedChartOptions = {
|
9017
|
-
...commonExpectedOptions,
|
9018
|
-
yAxis: {
|
9019
|
-
labels: { rotation: 'auto', step: 2 },
|
9020
|
-
max: 234567,
|
9021
|
-
min: 0,
|
9022
|
-
minorTickColor: '#666',
|
9023
|
-
minorTickInterval: 'auto',
|
9024
|
-
minorTickLength: 10,
|
9025
|
-
minorTickPosition: 'inside',
|
9026
|
-
minorTickWidth: 1,
|
9027
|
-
plotBands: [
|
9028
|
-
{ color: '#55BF3B', from: 0, to: 1172835 },
|
9029
|
-
{ color: '#DDDF0D', from: 1172835, to: 1876536 },
|
9030
|
-
{ color: '#DF5353', from: 1876536, to: 234567 },
|
9031
|
-
],
|
9032
|
-
tickColor: '#666',
|
9033
|
-
tickLength: 10,
|
9034
|
-
tickPixelInterval: 30,
|
9035
|
-
tickPosition: 'inside',
|
9036
|
-
tickWidth: 2,
|
9037
|
-
title: { text: '' },
|
9038
|
-
},
|
9039
|
-
};
|
9040
|
-
lodash.set(expectedChartOptions, 'plotOptions.solidgauge.dataLabels.allowOverlap', false);
|
9041
|
-
|
9042
|
-
expect(highchartsRenderer.ptCreateGaugeSeries)
|
9043
|
-
.toHaveBeenCalledWith(pivotDataMock, optsMock, expectedChartOptions, optsMock.chartOptions, false);
|
9044
|
-
expect(highchartsRenderer.ptCreateElementAndDraw).toHaveBeenCalledWith(expectedChartOptions, optsMock);
|
9045
|
-
});
|
9046
|
-
|
9047
|
-
it('should call ptCreateElementAndDraw with proper options: for solid gauge', () => {
|
9048
|
-
const optsMock = {
|
9049
|
-
testOptsField: 'test_opts_field_value',
|
9050
|
-
chartOptions: chartOptionsInOpts,
|
9051
|
-
};
|
9052
|
-
|
9053
|
-
highchartsRenderer.ptRenderGauge(pivotDataMock, lodash.cloneDeep(optsMock), true);
|
9054
|
-
|
9055
|
-
const expectedChartOptions = {
|
9056
|
-
chart: { animation: true, type: 'solidgauge' },
|
9057
|
-
credits: { enabled: false },
|
9058
|
-
pane: {
|
9059
|
-
background: { backgroundColor: '#fff', innerRadius: '60%', outerRadius: '100%', shape: 'arc' },
|
9060
|
-
center: ['50%', '85%'],
|
9061
|
-
endAngle: 90,
|
9062
|
-
size: '140%',
|
9063
|
-
startAngle: -90,
|
9064
|
-
},
|
9065
|
-
plotOptions: {
|
9066
|
-
series: { animation: true },
|
9067
|
-
solidgauge: {
|
9068
|
-
additionalOptions: 'test_additional_opts',
|
9069
|
-
allowPointSelect: true,
|
9070
|
-
cursor: 'pointer',
|
9071
|
-
dataLabels: { allowOverlap: false, borderWidth: 0, style: 'test_style', useHTML: true, y: 5 },
|
9072
|
-
},
|
9073
|
-
},
|
9074
|
-
series: 'test_gauge_series',
|
9075
|
-
subtitle: 'test_subtitle',
|
9076
|
-
title: 'test_title',
|
9077
|
-
xAxis: { categories: ['formatted(1)', 'formatted(2)', 'formatted(3)'] },
|
9078
|
-
yAxis: {
|
9079
|
-
labels: { y: 16 },
|
9080
|
-
lineWidth: 0,
|
9081
|
-
max: 234567,
|
9082
|
-
min: 0,
|
9083
|
-
minorTickInterval: null,
|
9084
|
-
stops: [
|
9085
|
-
[5, '#55BF3B'],
|
9086
|
-
[8, '#DDDF0D'],
|
9087
|
-
[10, '#DF5353'],
|
9088
|
-
],
|
9089
|
-
tickPixelInterval: 400,
|
9090
|
-
tickWidth: 0,
|
9091
|
-
},
|
9092
|
-
};
|
9093
|
-
lodash.set(expectedChartOptions, 'plotOptions.solidgauge.dataLabels.allowOverlap', false);
|
9094
|
-
|
9095
|
-
expect(highchartsRenderer.ptCreateGaugeSeries)
|
9096
|
-
.toHaveBeenCalledWith(pivotDataMock, optsMock, expectedChartOptions, optsMock.chartOptions, true);
|
9097
|
-
expect(highchartsRenderer.ptCreateElementAndDraw).toHaveBeenCalledWith(expectedChartOptions, optsMock);
|
9098
|
-
});
|
9099
|
-
});
|
9100
|
-
|
9101
|
-
it('ptRenderSolidGauge should call ptRenderGauge with isSolidGauge = true', () => {
|
9102
|
-
spyOn(highchartsRenderer, 'ptRenderGauge').and.returnValue();
|
9103
|
-
highchartsRenderer.ptRenderSolidGauge('mock_pivot_data', 'mock_opts');
|
9104
|
-
expect(highchartsRenderer.ptRenderGauge).toHaveBeenCalledWith('mock_pivot_data', 'mock_opts', true);
|
9105
|
-
});
|
9106
|
-
|
9107
8712
|
describe("Function ptCreateWaterfallBreakdownSeries", () => {
|
9108
8713
|
const format = null;
|
9109
8714
|
const additionalOptionsMock = { testOption: 'test additional option 1' }
|