@datarailsshared/dr_renderer 1.3.21 → 1.3.23

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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/charts/dr_donut_chart.js +152 -0
  3. package/src/highcharts_renderer.js +124 -267
  4. package/tests/highcharts_renderer.test.js +0 -395
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@datarailsshared/dr_renderer",
3
- "version": "1.3.21",
3
+ "version": "1.3.23",
4
4
  "description": "DataRails charts and tables renderer",
5
5
  "keywords": [
6
6
  "datarails",
package/src/charts/dr_donut_chart.js ADDED
@@ -0,0 +1,152 @@
1
+ function DrDonutChart(highchartsRenderer, pivotData, opts, drilldownFunc, disableAnimation) {
2
+ const additionOptions = opts.chartOptions
3
+ ? opts.chartOptions
4
+ : highchartsRenderer.getDefaultValueForChart(highchartsRenderer.CHART_TYPES.DONUT_CHART);
5
+ let totalLabel;
6
+
7
+ this.render = function () {
8
+ return highchartsRenderer.ptCreateElementAndDraw(this.getConfig(), opts);
9
+ };
10
+
11
+ this.getConfig = function () {
12
+ const config = {
13
+ chart: this.getChartConfig(),
14
+ plotOptions: this.getPlotOptionsConfig(),
15
+ colors: this.getColorSettings(),
16
+ tooltip: this.getTooltipConfig(),
17
+ legend: highchartsRenderer.getOptionsForLegends(additionOptions, 1, false, true),
18
+ };
19
+
20
+ config.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, config, additionOptions, opts);
21
+ highchartsRenderer.setTitleAndSubTitle(config, opts, additionOptions);
22
+ this.setDrilldownConfig(config);
23
+
24
+ return config;
25
+ };
26
+
27
+ this.getChartConfig = function () {
28
+ const chartConfiguration = {
29
+ type: 'pie',
30
+ events: {
31
+ drilldown: function (e) {
32
+ if (drilldownFunc) drilldownFunc(e, this, 'drilldown');
33
+ },
34
+ drillup: function (e) {
35
+ if (drilldownFunc) drilldownFunc(e, this, 'drillup');
36
+ },
37
+ render: this.drawTotalLabel,
38
+ },
39
+ animation: !disableAnimation,
40
+ };
41
+ this.setChartPositioning(chartConfiguration);
42
+
43
+ return chartConfiguration;
44
+ };
45
+
46
+ this.getPlotOptionsConfig = function () {
47
+ const plotOptions = {
48
+ series: {
49
+ animation: !disableAnimation,
50
+ dataLabels: {
51
+ allowOverlap: additionOptions && additionOptions.label_pie ? additionOptions.label_pie.overlap : false,
52
+ enabled: additionOptions && additionOptions.label_pie ? additionOptions.label_pie.show : false,
53
+ formatter: highchartsRenderer.pieDataLabelFormatter(pivotData, opts, true),
54
+ style: highchartsRenderer.getDataLabelsStyle(additionOptions),
55
+ },
56
+ showInLegend: true,
57
+ innerSize: '75%',
58
+ states: {
59
+ hover: {
60
+ halo: {
61
+ size: 0,
62
+ },
63
+ },
64
+ },
65
+ },
66
+ };
67
+ plotOptions.series = highchartsRenderer.getDataLabelsOptions(additionOptions, plotOptions.series);
68
+
69
+ return plotOptions;
70
+ };
71
+
72
+ this.getColorSettings = function () {
73
+ return additionOptions && additionOptions.chart
74
+ ? highchartsRenderer.getColorsWithOffset(additionOptions.chart.colors_offset)
75
+ : undefined;
76
+ };
77
+
78
+ this.getTooltipConfig = function () {
79
+ return {
80
+ headerFormat: '',
81
+ pointFormatter: highchartsRenderer.pieDrillDownFormatterToTooltip(pivotData, opts),
82
+ };
83
+ };
84
+
85
+ this.drawTotalLabel = function () {
86
+ const chart = this;
87
+ const series = chart.series[0];
88
+
89
+ const aggTotal = pivotData.getAggregator([], []);
90
+ const formattedValue = aggTotal.format(series.total, true);
91
+
92
+ if (totalLabel) {
93
+ totalLabel.destroy();
94
+ }
95
+
96
+ totalLabel = chart.renderer
97
+ .text(
98
+ `<tspan
99
+ style="font-size: ${series.center[2] / 12}px; font-weight: 600; fill: #333333;">
100
+ ${formattedValue}
101
+ </tspan>
102
+ <tspan
103
+ dy="${series.center[2] / 8}"
104
+ x="0"
105
+ style="font-size: ${series.center[2] / 16}px; fill: #6D6E6F;">
106
+ ${(additionOptions.total_value_label && additionOptions.total_value_label.total_value_label_text) || 'Total'}
107
+ </tspan>`,
108
+ )
109
+ .css({
110
+ textAnchor: 'middle',
111
+ dominantBaseline: 'text-before-edge',
112
+ })
113
+ .attr('y', '0')
114
+ .add();
115
+
116
+ const rect = totalLabel.element.getBoundingClientRect();
117
+ const x = series.center[0] + chart.plotLeft;
118
+ const y = chart.plotTop + series.center[1] - rect.height / 2;
119
+
120
+ totalLabel.attr({ x, y });
121
+ };
122
+
123
+ this.setDrilldownConfig = function (chartConfig) {
124
+ if (drilldownFunc) {
125
+ chartConfig.drilldown = {};
126
+ } else if (!pivotData.isDrillDownDisabled) {
127
+ chartConfig.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData, chartConfig, additionOptions, opts);
128
+ } else {
129
+ chartConfig.drilldown = highchartsRenderer.getDataLabelsStylesForDrillDown(additionOptions);
130
+ }
131
+ };
132
+
133
+ this.setChartPositioning = function (chart) {
134
+ const chartPositioning = additionOptions.chart_position;
135
+ if (!!chartPositioning) {
136
+ Object.assign(chart, {
137
+ margin: [
138
+ chartPositioning.margin_top,
139
+ chartPositioning.margin_right,
140
+ chartPositioning.margin_bottom,
141
+ chartPositioning.margin_left,
142
+ ],
143
+ spacingTop: chartPositioning.spacing_top,
144
+ spacingBottom: chartPositioning.spacing_bottom,
145
+ spacingLeft: chartPositioning.spacing_left,
146
+ spacingRight: chartPositioning.spacing_right,
147
+ });
148
+ }
149
+ };
150
+ }
151
+
152
+ module.exports = { DrDonutChart };
package/src/highcharts_renderer.js CHANGED
@@ -1,5 +1,6 @@
1
1
  const helpers = require('./dr-renderer-helpers');
2
2
  const { DrGaugeChart, GAUGE_OPTIONS_DEFAULT } = require('./charts/dr_gauge_chart');
3
+ const { DrDonutChart } = require('./charts/dr_donut_chart');
3
4
  const seriesPointStylesHelper= require('./seriesPointStyles-helper');
4
5
 
5
6
  const mobileBrowserRegex = new RegExp([
@@ -65,6 +66,7 @@ const CHART_TYPES = {
65
66
  PUBLISHED_ITEM: 'published_item',
66
67
  RICH_TEXT: 'rich_text',
67
68
  EXCEL_VIEWER: 'excel_viewer',
69
+ DONUT_CHART: 'donut-chart',
68
70
  }
69
71
 
70
72
  const HIGHCHARTS_CONSTANTS = {
@@ -1296,7 +1298,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1296
1298
  );
1297
1299
  });
1298
1300
 
1299
- if (colors && colors[i]) {
1301
+ if (additionOptions.series_colors) {
1302
+ ob.color = additionOptions.series_colors[row_n_value] || undefined;
1303
+ } else if (colors && colors[i]) {
1300
1304
  ob.color = colors[i];
1301
1305
  }
1302
1306
 
@@ -1489,7 +1493,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1489
1493
  ob.data.push(tmoobj);
1490
1494
  });
1491
1495
 
1492
- if (colors && colors[i]) {
1496
+ if (additionOptions.series_colors) {
1497
+ ob.color = additionOptions.series_colors[row_n_value] || undefined;
1498
+ } else if (colors && colors[i]) {
1493
1499
  ob.color = colors[i];
1494
1500
  }
1495
1501
 
@@ -1917,6 +1923,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1917
1923
  // check string contains hebrew
1918
1924
  ob.initialName = (/[\u0590-\u05FF]/).test(key) ? ('\u200E' + key) : key;
1919
1925
 
1926
+ if (additionOptions.series_colors) {
1927
+ ob.color = additionOptions.series_colors[key] || undefined;
1928
+ }
1929
+
1920
1930
  if (ob.initialName === highchartsRenderer.DR_OTHERS_KEY) {
1921
1931
  ob.initialName = othersName;
1922
1932
  }
@@ -2226,9 +2236,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2226
2236
  return {aggfunc: aggfunc, base: base};
2227
2237
  }
2228
2238
 
2229
- highchartsRenderer.ptRenderSolidGauge = (pivotData, opts) => {
2230
- return highchartsRenderer.ptRenderGauge(pivotData, opts, true);
2231
- };
2232
2239
 
2233
2240
  highchartsRenderer.transformOldGaugeOptions = (oldOptions) => {
2234
2241
  const newOptions = highchartsRenderer.objectCopyJsonMethod(oldOptions);
@@ -2265,195 +2272,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2265
2272
  return new DrGaugeChart(pivotData, opts).render();
2266
2273
  };
2267
2274
 
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
2275
  highchartsRenderer.ptRenderKpi = function (pivotData, opts) {
2458
2276
  var chartOptions = {};
2459
2277
 
@@ -2604,6 +2422,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2604
2422
 
2605
2423
  };
2606
2424
 
2425
+ highchartsRenderer.ptRenderDonut = function (pivotData, opts, drilldownFunc) {
2426
+ return new DrDonutChart(highchartsRenderer, pivotData, opts, drilldownFunc, disableAnimation).render();
2427
+ };
2428
+
2607
2429
  highchartsRenderer.setTitleAndSubTitle = function (chartOptions, opts, additionOptions) {
2608
2430
  chartOptions.title = opts.chartOptions.hideChartHeader ? { text: null } : {
2609
2431
  align: 'center',
@@ -6750,6 +6572,72 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6750
6572
  default_value: false
6751
6573
  }]
6752
6574
  },
6575
+ 'total_value_label_donut': {
6576
+ category_class: 'google-visualization-charteditor-mini-more',
6577
+ category_label: 'Total Value Label',
6578
+ category_type: 'total_value_label',
6579
+ elements: [{
6580
+ element_type: 'input',
6581
+ value_name: 'total_value_label_text',
6582
+ element_label: 'Total value label text for donut chart',
6583
+ default_value: 'Total'
6584
+ }]
6585
+ },
6586
+ 'chart_position': {
6587
+ category_class: 'google-visualization-charteditor-mini-more',
6588
+ category_label: 'Chart position',
6589
+ category_type: 'chart_position',
6590
+ elements: [
6591
+ {
6592
+ element_type: 'input',
6593
+ value_name: 'margin_top',
6594
+ element_label: 'Marging top',
6595
+ default_value: 0,
6596
+ },
6597
+ {
6598
+ element_type: 'input',
6599
+ value_name: 'margin_right',
6600
+ element_label: 'Marging right',
6601
+ default_value: 0,
6602
+ },
6603
+ {
6604
+ element_type: 'input',
6605
+ value_name: 'margin_bottom',
6606
+ element_label: 'Marging bottom',
6607
+ default_value: 0,
6608
+ },
6609
+ {
6610
+ element_type: 'input',
6611
+ value_name: 'margin_left',
6612
+ element_label: 'Marging left',
6613
+ default_value: 0,
6614
+ },
6615
+ {
6616
+ element_type: 'input',
6617
+ value_name: 'spacing_top',
6618
+ element_label: 'Spacing top',
6619
+ default_value: 0,
6620
+ },
6621
+ {
6622
+ element_type: 'input',
6623
+ value_name: 'spacing_right',
6624
+ element_label: 'Spacing right',
6625
+ default_value: 0,
6626
+ },
6627
+ {
6628
+ element_type: 'input',
6629
+ value_name: 'spacing_bottom',
6630
+ element_label: 'Spacing bottom',
6631
+ default_value: 0,
6632
+ },
6633
+ {
6634
+ element_type: 'input',
6635
+ value_name: 'spacing_left',
6636
+ element_label: 'Spacing left',
6637
+ default_value: 0,
6638
+ },
6639
+ ]
6640
+ },
6753
6641
  'label': {
6754
6642
  category_class: 'google-visualization-charteditor-mini-more',
6755
6643
  category_label: 'Label',
@@ -7762,21 +7650,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
7762
7650
  axisTooltipTitle: ' Best practice: we recommend no more than one segment.',
7763
7651
  legendTooltipTitle: 'To create a drill-down within this category, drag a field here.',
7764
7652
  },
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
7653
  [highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED]: {
7781
7654
  name: 'Gauge chart',
7782
7655
  label: 'Gauge',
@@ -8094,25 +7967,26 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
8094
7967
  type: 'pie',
8095
7968
  name: 'Pie',
8096
7969
  class: 'google-visualization-charteditor-mini-pie',
8097
- subtypes: [{
8098
- type: 'pie-chart',
8099
- hidden: true,
8100
- name: highchartsRenderer.chartsTypesInfo['pie-chart'].name,
8101
- class: 'google-visualization-charteditor-thumbs-piechart',
8102
- render: highchartsRenderer.ptRenderBasicPie,
8103
- suboptions: [
8104
- highchartsRenderer.suboptions["tooltips_pie"],
8105
- highchartsRenderer.suboptions["label_pie"],
8106
- highchartsRenderer.suboptions["subtitle"],
8107
- highchartsRenderer.suboptions["widget_library"],
8108
- highchartsRenderer.suboptions["table_options_transpose"],
8109
- highchartsRenderer.suboptions["table_design_options"],
8110
- highchartsRenderer.suboptions["chart"],
8111
- highchartsRenderer.suboptions["negative_number_format"],
8112
- highchartsRenderer.suboptions["advanced"],
8113
- highchartsRenderer.suboptions["legends"],
8114
- ]
8115
- },
7970
+ subtypes: [
7971
+ {
7972
+ type: 'pie-chart',
7973
+ hidden: true,
7974
+ name: highchartsRenderer.chartsTypesInfo['pie-chart'].name,
7975
+ class: 'google-visualization-charteditor-thumbs-piechart',
7976
+ render: highchartsRenderer.ptRenderBasicPie,
7977
+ suboptions: [
7978
+ highchartsRenderer.suboptions["tooltips_pie"],
7979
+ highchartsRenderer.suboptions["label_pie"],
7980
+ highchartsRenderer.suboptions["subtitle"],
7981
+ highchartsRenderer.suboptions["widget_library"],
7982
+ highchartsRenderer.suboptions["table_options_transpose"],
7983
+ highchartsRenderer.suboptions["table_design_options"],
7984
+ highchartsRenderer.suboptions["chart"],
7985
+ highchartsRenderer.suboptions["negative_number_format"],
7986
+ highchartsRenderer.suboptions["advanced"],
7987
+ highchartsRenderer.suboptions["legends"],
7988
+ ]
7989
+ },
8116
7990
  {
8117
7991
  type: 'pie-chart-drilldown',
8118
7992
  name: highchartsRenderer.chartsTypesInfo['pie-chart-drilldown'].name,
@@ -8130,8 +8004,28 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
8130
8004
  highchartsRenderer.suboptions["advanced"],
8131
8005
  highchartsRenderer.suboptions["legends"],
8132
8006
  ]
8133
- }
8134
-
8007
+ },
8008
+ {
8009
+ type: highchartsRenderer.CHART_TYPES.DONUT_CHART,
8010
+ name: "Donut chart",
8011
+ class: "google-visualization-charteditor-thumbs-donutchart",
8012
+ render: highchartsRenderer.ptRenderDonut,
8013
+ suboptions: [
8014
+ highchartsRenderer.suboptions["tooltips_pie"],
8015
+ highchartsRenderer.suboptions["label_pie"],
8016
+ highchartsRenderer.suboptions["subtitle"],
8017
+ highchartsRenderer.suboptions["widget_library"],
8018
+ highchartsRenderer.suboptions["table_options_transpose"],
8019
+ highchartsRenderer.suboptions["table_design_options"],
8020
+ highchartsRenderer.suboptions["chart"],
8021
+ highchartsRenderer.suboptions["negative_number_format"],
8022
+ highchartsRenderer.suboptions["advanced"],
8023
+ highchartsRenderer.suboptions["legends"],
8024
+ highchartsRenderer.suboptions["chart_position"],
8025
+ highchartsRenderer.suboptions["total_value_label_donut"],
8026
+ ],
8027
+ hidden: true,
8028
+ },
8135
8029
  /*,
8136
8030
  {type:'pie-chart-3d', name:'3d pie chart', class:'google-visualization-charteditor-thumbs-piechart-3d', render:highchartsRenderer.ptRenderStackedBar},
8137
8031
  {type:'donut-chart', name:'Donut chart', class:'google-visualization-charteditor-thumbs-donutchart', render:highchartsRenderer.ptRenderStackedBar}*/
@@ -8142,47 +8036,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
8142
8036
  name: 'Gauge',
8143
8037
  class: 'google-visualization-charteditor-mini-gauge',
8144
8038
  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
8039
  {
8182
8040
  type: highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED,
8183
8041
  name: highchartsRenderer.chartsTypesInfo[highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED].name,
8184
8042
  class: 'google-visualization-charteditor-thumbs-gauge-solid',
8185
- hidden: true,
8186
8043
  render: highchartsRenderer.ptRenderGaugeEnhanced,
8187
8044
  suboptions: [
8188
8045
  highchartsRenderer.suboptions["label_gauge"],
package/tests/highcharts_renderer.test.js CHANGED
@@ -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' }