@datarailsshared/dr_renderer 1.2.45-beta → 1.2.47-beta

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/highcharts_renderer.js +532 -144
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@datarailsshared/dr_renderer",
3
- "version": "1.2.45-beta",
3
+ "version": "1.2.47-beta",
4
4
  "description": "DataRails charts and tables renderer",
5
5
  "keywords": [
6
6
  "datarails",
package/src/highcharts_renderer.js CHANGED
@@ -891,13 +891,15 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
891
891
  return chartOptions;
892
892
  };
893
893
 
894
- highchartsRenderer.ptCreateBasicLineSeries = function (pivotData, colors, onlyNumbers, isUniqueVals, additionOptions) {
894
+ // Generate series for charts functions
895
+ highchartsRenderer.ptCreateBasicLineSeries = function (pivotData, colors, onlyNumbers, isUniqueVals, additionOptions, opts, chartOptions) {
895
896
  var chart_series = [],
896
897
  row_n_keys = pivotData.getRowKeys(),
897
898
  col_n_keys = pivotData.getColKeys();
898
899
 
899
900
  var num_cols = col_n_keys.length;
900
901
  var num_rows = row_n_keys.length;
902
+ let averages = {};
901
903
 
902
904
  var has_delta = false;
903
905
  if (additionOptions && lodash.has(additionOptions, "delta_column.field") && additionOptions.delta_column.field == "series") {
@@ -919,6 +921,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
919
921
  lodash.forEach(col_n_keys, function (col_n_value) {
920
922
  var agg = pivotData.getAggregator(row_n_value, col_n_value);
921
923
  var val = agg.value();
924
+
925
+ if (averages[col_n_value.toString()]) {
926
+ averages[col_n_value.toString()].push(val);
927
+ } else {
928
+ averages[col_n_value.toString()] = [val];
929
+ }
922
930
  if (isUniqueVals && agg.uniq)
923
931
  val = agg.uniq.join('<br>');
924
932
 
@@ -970,11 +978,63 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
970
978
  }
971
979
  }
972
980
 
981
+ highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(chart_series, pivotData, chartOptions, additionOptions, opts);
982
+
983
+ if (opts.total) {
984
+ const newSeries = lodash.clone(chart_series[chart_series.length - 1]);
985
+ newSeries.name = 'Total';
986
+ newSeries.data = [];
987
+ col_n_keys.forEach(columnKey => {
988
+ let totalKey = columnKey;
989
+ if (lodash.isArray(columnKey)) {
990
+ totalKey = totalKey.join(' , ');
991
+ }
992
+ newSeries.data.push(pivotData.colTotals[totalKey].sum);
993
+ })
994
+
995
+ chart_series.push(newSeries);
996
+ }
997
+
998
+ if (opts.trendLine) {
999
+ const trendSeries = lodash.clone(chart_series[chart_series.length - 1]);
1000
+ trendSeries.name = 'Trend Line';
1001
+ trendSeries.data = [];
1002
+ const n = col_n_keys.length;
1003
+ const xSum = (1 + n) / 2 * n;
1004
+ let ySum = 0;
1005
+ let xySum = 0;
1006
+ let squareXSum = 0;
1007
+
1008
+ col_n_keys.forEach((columnKey, x) => {
1009
+ const y = averages[columnKey.toString()] = averages[columnKey.toString()].reduce((acc, el, index) => {
1010
+ acc += Number(el);
1011
+ if (index === averages[columnKey.toString()].length - 1) {
1012
+ acc = acc / averages[columnKey.toString()].length;
1013
+ }
1014
+
1015
+ return acc;
1016
+ }, 0);
1017
+ xySum += y * (x+1);
1018
+ ySum += y;
1019
+ squareXSum += (x+1) * (x+1);
1020
+ });
1021
+
1022
+ const a = ((ySum * squareXSum) - (xSum * xySum)) / ((n * squareXSum) - (xSum * xSum));
1023
+ const b = ((n * xySum) - (xSum* ySum)) / ((n * squareXSum) - (xSum * xSum));
1024
+
1025
+ col_n_keys.forEach((columnKey, index) => {
1026
+ trendSeries.data.push(a + b * (index + 1));
1027
+ });
1028
+
1029
+ trendSeries.type = 'line';
1030
+
1031
+ chart_series.push(trendSeries);
1032
+ }
1033
+
973
1034
  return chart_series;
974
1035
  };
975
1036
 
976
-
977
- highchartsRenderer.ptCreateColumnSeries = function (pivotData, colors, onlyNumbers, isUniqueVals, isNotDrilldown, additionOptions) {
1037
+ highchartsRenderer.ptCreateColumnSeries = function (pivotData, colors, onlyNumbers, isUniqueVals, isNotDrilldown, additionOptions, opts, chartOptions) {
978
1038
  var chart_series = [],
979
1039
  row_n_keys = pivotData.getRowKeys(),
980
1040
  col_n_keys = pivotData.getColKeys();
@@ -986,12 +1046,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
986
1046
  has_delta = true;
987
1047
  }
988
1048
 
989
-
990
1049
  if (row_n_keys.length == 0)
991
1050
  row_n_keys.push([]);
992
1051
 
993
1052
  var i = 0;
994
1053
  var variat_serias = null;
1054
+ let averages = {};
995
1055
 
996
1056
  lodash.forEach(row_n_keys, function (row_n_value) {
997
1057
  var ob = {};
@@ -1009,6 +1069,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1009
1069
  lodash.forEach(col_n_keys, function (col_n_value) {
1010
1070
  var agg = pivotData.getAggregator(row_n_value, col_n_value);
1011
1071
  var val = agg.value();
1072
+ if (averages[col_n_value.toString()]) {
1073
+ averages[col_n_value.toString()].push(val);
1074
+ } else {
1075
+ averages[col_n_value.toString()] = [val];
1076
+ }
1012
1077
 
1013
1078
  if (val != null) {
1014
1079
  if ($.isNumeric(val)) {
@@ -1064,18 +1129,111 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1064
1129
  }
1065
1130
  }
1066
1131
 
1132
+ highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(chart_series, pivotData, chartOptions, additionOptions, opts);
1133
+
1134
+ let weights = { line: 2,spline: 3 ,area:-2, areaspline: -1, scatter:4, column: 1 };
1135
+
1136
+ if (opts.comboOptions && opts.comboOptions.seriesOptions.length) {
1137
+ opts.comboOptions.seriesOptions.forEach(option => {
1138
+ chart_series.forEach(series => {
1139
+ if (option.series === series.name) {
1140
+ switch (option.chartType) {
1141
+ case 'line-chart':
1142
+ series.type = 'line';
1143
+ break;
1144
+ case 'line-chart-smooth':
1145
+ series.type = 'spline';
1146
+ break;
1147
+ case 'area-chart':
1148
+ series.type = 'area';
1149
+ break;
1150
+ case 'area-chart-smooth':
1151
+ series.type = 'areaspline';
1152
+ break;
1153
+ case 'scatter-chart':
1154
+ series.type = 'scatter';
1155
+ break;
1156
+ case 'column-chart' || 'column-chart-stacked':
1157
+ delete series.type;
1158
+ break;
1159
+ }
1160
+ }
1161
+ })
1162
+ })
1163
+ }
1164
+
1165
+ if (opts.total) {
1166
+ const totalSeries = lodash.clone(chart_series[chart_series.length - 1]);
1167
+ totalSeries.name = 'Total';
1168
+ totalSeries.data = [];
1169
+ col_n_keys.forEach(columnKey => {
1170
+ let key = columnKey;
1171
+ let totalKey = columnKey;
1172
+ if (lodash.isArray(columnKey)) {
1173
+ key = columnKey[0];
1174
+ totalKey = totalKey.join(' , ');
1175
+ }
1176
+ totalSeries.data.push({name: lodash.unescape(key), y: pivotData.colTotals[totalKey].sum});
1177
+ });
1178
+
1179
+ chart_series.push(totalSeries);
1180
+ }
1181
+
1182
+ if (opts.trendLine) {
1183
+ const trendSeries = lodash.clone(chart_series[chart_series.length - 1]);
1184
+ trendSeries.name = 'Trend Line';
1185
+ trendSeries.data = [];
1186
+ const n = col_n_keys.length;
1187
+ const xSum = (1 + n) / 2 * n;
1188
+ let ySum = 0;
1189
+ let xySum = 0;
1190
+ let squareXSum = 0;
1191
+
1192
+ col_n_keys.forEach((columnKey, x) => {
1193
+ const y = averages[columnKey.toString()] = averages[columnKey.toString()].reduce((acc, el, index) => {
1194
+ acc += Number(el);
1195
+ if (index === averages[columnKey.toString()].length - 1) {
1196
+ acc = acc / averages[columnKey.toString()].length;
1197
+ }
1198
+
1199
+ return acc;
1200
+ }, 0);
1201
+ xySum += y * (x+1);
1202
+ ySum += y;
1203
+ squareXSum += (x+1) * (x+1);
1204
+ });
1205
+
1206
+ const a = ((ySum * squareXSum) - (xSum * xySum)) / ((n * squareXSum) - (xSum * xSum));
1207
+ const b = ((n * xySum) - (xSum* ySum)) / ((n * squareXSum) - (xSum * xSum));
1208
+
1209
+ col_n_keys.forEach((columnKey, index) => {
1210
+ let key = columnKey;
1211
+ if (lodash.isArray(columnKey)) {
1212
+ key = columnKey[0];
1213
+ }
1214
+
1215
+ trendSeries.data.push({
1216
+ name: lodash.unescape(key), y: a + b * (index + 1)
1217
+ });
1218
+ });
1219
+
1220
+ trendSeries.type = 'line';
1221
+
1222
+ chart_series.push(trendSeries);
1223
+ }
1224
+
1225
+ chart_series.sort((a,b) => {
1226
+ return (weights[a.type] || 0) > (weights[b.type] || 0) ? 1 : (weights[a.type] || 0) < (weights[b.type] || 0) ? -1 : 0
1227
+ });
1228
+
1067
1229
  return chart_series;
1068
- };
1230
+ }
1069
1231
 
1070
1232
  highchartsRenderer.getVariantSeries = function (series, delta_column_options) {
1071
1233
  const varianceColor = delta_column_options.color || highchartsRenderer.variance_color || Highcharts.getOptions().colors[7];
1072
1234
  series.name = delta_column_options.name.replace('_', '');
1073
1235
  series.color = varianceColor;
1074
1236
 
1075
- if (!delta_column_options.only_variant && !delta_column_options.same_yaxis) {
1076
- series.yAxis = 1;
1077
- }
1078
-
1079
1237
  if (delta_column_options.point_click_event) {
1080
1238
  series.allowPointSelect = true;
1081
1239
  series.point = {
@@ -1103,7 +1261,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1103
1261
  series.marker = {
1104
1262
  lineColor: varianceColor
1105
1263
  };
1106
- } else if (delta_column_options.chart == 'column') {
1264
+ } else if (delta_column_options.chart == 'column' || delta_column_options.chart == 'combo') {
1107
1265
  series.type = 'column';
1108
1266
  } else {
1109
1267
  series.type = 'spline';
@@ -1148,8 +1306,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1148
1306
  return series;
1149
1307
  }
1150
1308
 
1151
-
1152
- highchartsRenderer.ptCreateSeriesToDrillDownChart = function (pivotData) {
1309
+ highchartsRenderer.ptCreateSeriesToDrillDownChart = function (pivotData, chartOptions, additionOptions, opts) {
1153
1310
  var pie_series = [];
1154
1311
 
1155
1312
  var col_n_keys = pivotData.getColKeys();
@@ -1180,13 +1337,15 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1180
1337
  pie_series.push(ob);
1181
1338
  });
1182
1339
 
1340
+ highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(pie_series, pivotData, chartOptions, additionOptions, opts);
1341
+
1183
1342
  return ([{
1184
1343
  colorByPoint: true,
1185
1344
  data: pie_series
1186
1345
  }]);
1187
1346
  };
1188
1347
 
1189
- highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart = function (pivotData) {
1348
+ highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart = function (pivotData, chartOptions, additionOptions, opts) {
1190
1349
 
1191
1350
  var pie_drill_down_series = [],
1192
1351
  row_n_keys = pivotData.getRowKeys(),
@@ -1224,12 +1383,60 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1224
1383
  }
1225
1384
  });
1226
1385
 
1386
+ highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(pie_drill_down_series, pivotData, chartOptions, additionOptions, opts);
1227
1387
 
1228
1388
  return ({
1229
1389
  series: pie_drill_down_series
1230
1390
  });
1231
1391
  };
1232
1392
 
1393
+ highchartsRenderer.moveSeriesToSecondYAxisIfNeeded = function(chartSeries, pivotData, chartOptions, additionOptions, opts) {
1394
+ if (!opts || !opts.comboOptions) {
1395
+ return;
1396
+ }
1397
+
1398
+ let addSecondYAxis = false;
1399
+ lodash.forEach(chartSeries, function (series) {
1400
+ let sOptions = lodash.find(opts.comboOptions.seriesOptions, function(sOptions) {
1401
+ return sOptions.series === series.name || sOptions.series.replace('_', '') === series.name
1402
+ });
1403
+ if (sOptions && sOptions.secondaryAxis) {
1404
+ series.yAxis = 1;
1405
+ addSecondYAxis = true;
1406
+ }
1407
+ });
1408
+
1409
+ if (addSecondYAxis) {
1410
+ highchartsRenderer.addSecondYAxis(pivotData, chartOptions, additionOptions, opts);
1411
+ }
1412
+ }
1413
+
1414
+ highchartsRenderer.addSecondYAxis = function (pivotData, chartOptions, additionOptions, opts) {
1415
+ const varianceColor = additionOptions.delta_column.color || highchartsRenderer.variance_color || Highcharts.getOptions().colors[7];
1416
+ let labels_formatter = opts.comboOptions.secondaryAxisSettings.is_percentage ?
1417
+ highchartsRenderer.persantageValueLabelsFormatter(pivotData, opts) :
1418
+ highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts);
1419
+
1420
+ chartOptions.yAxis = [chartOptions.yAxis];
1421
+ chartOptions.yAxis[1] = {
1422
+ min: !isNaN(parseInt(opts.comboOptions.secondaryAxisSettings.min)) ? opts.comboOptions.secondaryAxisSettings.min : null,
1423
+ max: !isNaN(parseInt(opts.comboOptions.secondaryAxisSettings.max)) ? opts.comboOptions.secondaryAxisSettings.max : null,
1424
+ title: {
1425
+ text: opts.comboOptions.secondaryAxisSettings.name,
1426
+ style: {
1427
+ color: varianceColor
1428
+ }
1429
+ },
1430
+ labels: {
1431
+ formatter: labels_formatter,
1432
+ style: {
1433
+ color: varianceColor
1434
+ }
1435
+ },
1436
+ opposite: true
1437
+ }
1438
+ };
1439
+
1233
1440
  highchartsRenderer.ptRenderBasicPie = function (pivotData, opts) {
1234
1441
  var chartOptions = {};
1235
1442
  var additionOptions = opts.chartOptions ? opts.chartOptions : highchartsRenderer.getDefaultValueForChart('pie-chart');
@@ -1409,7 +1616,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1409
1616
  }
1410
1617
 
1411
1618
  chartOptions.xAxis = {categories: pivotData.getColKeys()};
1412
- chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true);
1619
+ chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, chartOptions);
1413
1620
 
1414
1621
  var total = [];
1415
1622
  lodash.forEach(chartOptions.series, function (obj) {
@@ -1550,7 +1757,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1550
1757
 
1551
1758
 
1552
1759
  chartOptions.xAxis = {categories: pivotData.getColKeys()};
1553
- chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true);
1760
+ chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, chartOptions);
1554
1761
 
1555
1762
  var total = [];
1556
1763
  lodash.forEach(chartOptions.series, function (obj) {
@@ -1644,7 +1851,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1644
1851
  };
1645
1852
  var uniqueVals = kpioptions.value.value == "Unique";
1646
1853
 
1647
- let temp_series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, uniqueVals);
1854
+ let temp_series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, uniqueVals, null, opts, chartOptions);
1648
1855
 
1649
1856
  var total = [];
1650
1857
  lodash.forEach(temp_series, function (obj) {
@@ -1764,12 +1971,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1764
1971
  if (useNewUx) {
1765
1972
  chartOptions.tooltip.borderColor = '#fff';
1766
1973
  }
1767
- chartOptions.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData);
1974
+ chartOptions.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, chartOptions, additionOptions, opts);
1768
1975
  chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, 1, false, true);
1769
1976
  if (drilldownFunc)
1770
1977
  chartOptions.drilldown = {}
1771
1978
  else
1772
- chartOptions.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData);
1979
+ chartOptions.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData, chartOptions, additionOptions, opts);
1773
1980
 
1774
1981
  return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
1775
1982
 
@@ -1826,7 +2033,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1826
2033
  formatter: highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts)
1827
2034
  }
1828
2035
  };
1829
- highchartsRenderer.addSecondYAxisIfNeed(pivotData, chartOptions, additionOptions, opts);
1830
2036
 
1831
2037
  chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, true);
1832
2038
 
@@ -1871,7 +2077,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1871
2077
  }
1872
2078
  };
1873
2079
  chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
1874
- chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions);
2080
+ chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions, opts, chartOptions);
1875
2081
 
1876
2082
  highchartsRenderer.handleGridLines(additionOptions, chartOptions)
1877
2083
  return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
@@ -1902,8 +2108,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1902
2108
  }
1903
2109
  };
1904
2110
 
1905
- highchartsRenderer.addSecondYAxisIfNeed(pivotData, chartOptions, additionOptions, opts);
1906
-
1907
2111
  chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, true);
1908
2112
 
1909
2113
  chartOptions.plotOptions = {
@@ -1950,7 +2154,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1950
2154
  chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
1951
2155
 
1952
2156
  var colors = ['#ff0202', '#b3060e', '#70000a'];
1953
- chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, colors, null, null, additionOptions);
2157
+ chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, colors, null, null, additionOptions, opts, chartOptions);
1954
2158
 
1955
2159
  highchartsRenderer.handleGridLines(additionOptions, chartOptions)
1956
2160
 
@@ -1972,34 +2176,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1972
2176
 
1973
2177
  }
1974
2178
 
1975
- highchartsRenderer.addSecondYAxisIfNeed = function (pivotData, chartOptions, additionOptions, opts) {
1976
- if (additionOptions && additionOptions.delta_column && additionOptions.delta_column.field == "series") {
1977
- chartOptions.yAxis = [chartOptions.yAxis];
1978
-
1979
- let labels_formatter = highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts);
1980
- if (additionOptions.delta_column.is_percentage) {
1981
- labels_formatter = highchartsRenderer.persantageValueLabelsFormatter(pivotData, opts);
1982
- }
1983
-
1984
- const varianceColor = additionOptions.delta_column.color || highchartsRenderer.variance_color || Highcharts.getOptions().colors[7];
1985
- chartOptions.yAxis[1] = {
1986
- title: {
1987
- text: additionOptions.delta_column.name.replace('_', ''),
1988
- style: {
1989
- color: varianceColor
1990
- }
1991
- },
1992
- labels: {
1993
- formatter: labels_formatter,
1994
- style: {
1995
- color: varianceColor
1996
- }
1997
- },
1998
- opposite: true
1999
- }
2000
- }
2001
- };
2002
-
2003
2179
  highchartsRenderer.ptRenderSpLine = function (pivotData, opts) {
2004
2180
  var chartOptions = {};
2005
2181
  var rowAttrs = pivotData.rowAttrs;
@@ -2025,8 +2201,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2025
2201
  }
2026
2202
  };
2027
2203
 
2028
- highchartsRenderer.addSecondYAxisIfNeed(pivotData, chartOptions, additionOptions, opts);
2029
-
2030
2204
  chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, true);
2031
2205
 
2032
2206
  chartOptions.plotOptions = {
@@ -2068,7 +2242,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2068
2242
  }
2069
2243
  };
2070
2244
  chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
2071
- chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions);
2245
+ chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions, opts, chartOptions);
2072
2246
 
2073
2247
  highchartsRenderer.handleGridLines(additionOptions, chartOptions);
2074
2248
  return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
@@ -2116,7 +2290,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2116
2290
  }
2117
2291
  };
2118
2292
  chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
2119
- chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData);
2293
+ chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
2120
2294
 
2121
2295
  highchartsRenderer.handleGridLines(additionOptions, chartOptions);
2122
2296
 
@@ -2213,7 +2387,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2213
2387
  },
2214
2388
  lineWidth: 0
2215
2389
  };
2216
- chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData);
2390
+ chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
2217
2391
 
2218
2392
  chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, false);
2219
2393
 
@@ -2275,8 +2449,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2275
2449
  }
2276
2450
  };
2277
2451
 
2278
- highchartsRenderer.addSecondYAxisIfNeed(pivotData, chartOptions, additionOptions, opts);
2279
-
2280
2452
  chartOptions.tooltip = {
2281
2453
  formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
2282
2454
  shadow: highchartsRenderer.tooltipShadow,
@@ -2290,7 +2462,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2290
2462
  highchartsRenderer.handleGridLines(additionOptions, chartOptions);
2291
2463
 
2292
2464
  var isNotDrilldown = !(colAttrs && colAttrs.length > 1);
2293
- chartOptions.series = highchartsRenderer.ptCreateColumnSeries(pivotData, null, null, null, isNotDrilldown, additionOptions);
2465
+ chartOptions.series = highchartsRenderer.ptCreateColumnSeries(pivotData, null, null, null, isNotDrilldown, additionOptions, opts, chartOptions);
2294
2466
  chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
2295
2467
  chartOptions.plotOptions = {
2296
2468
  column: {
@@ -2458,7 +2630,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2458
2630
  };
2459
2631
  //chartOptions.xAxis = { categories: pivotData.getColKeys() };
2460
2632
  chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
2461
- chartOptions.series = highchartsRenderer.ptCreateColumnSeries(pivotData, null, null, true, true);
2633
+ chartOptions.series = highchartsRenderer.ptCreateColumnSeries(pivotData, null, null, true, true, null, opts, chartOptions);
2462
2634
  //chartOptions.drilldown = {}
2463
2635
 
2464
2636
  highchartsRenderer.handleGridLines(additionOptions, chartOptions)
@@ -2535,11 +2707,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2535
2707
 
2536
2708
  chartOptions.xAxis = {type: 'category'};
2537
2709
  chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
2538
- chartOptions.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData);
2710
+ chartOptions.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, chartOptions, additionOptions, opts);
2539
2711
  //if (drilldownFunc)
2540
2712
  // chartOptions.drilldown = {}
2541
2713
  //else
2542
- chartOptions.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData);
2714
+ chartOptions.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData, chartOptions, additionOptions, opts);
2543
2715
 
2544
2716
  highchartsRenderer.handleGridLines(additionOptions, chartOptions)
2545
2717
 
@@ -2610,7 +2782,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2610
2782
  }
2611
2783
  };
2612
2784
  chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
2613
- chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData);
2785
+ chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
2614
2786
 
2615
2787
  highchartsRenderer.handleGridLines(additionOptions, chartOptions)
2616
2788
 
@@ -2724,7 +2896,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2724
2896
  }
2725
2897
  };
2726
2898
  chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
2727
- chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData);
2899
+ chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
2728
2900
 
2729
2901
  highchartsRenderer.handleGridLines(additionOptions, chartOptions)
2730
2902
 
@@ -2813,6 +2985,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2813
2985
  return format;
2814
2986
  }
2815
2987
 
2988
+ highchartsRenderer.isRowKeyShouldBePercentage = function(render_options, rowKey) {
2989
+ if (render_options && render_options.comboOptions && render_options.comboOptions.secondaryAxisSettings &&
2990
+ render_options.comboOptions.secondaryAxisSettings.is_percentage) {
2991
+ const rowKeyString = rowKey.join(highchartsRenderer.delimer);
2992
+ const rowKeyOptions = lodash.find(render_options.comboOptions.seriesOptions, {series: rowKeyString});
2993
+ if (rowKeyOptions && rowKeyOptions.secondaryAxis) {
2994
+ return true;
2995
+ }
2996
+ }
2997
+ return false;
2998
+ }
2999
+
2816
3000
  highchartsRenderer.ignoreIfCalculatedValue = function(data, rowKey, colKey, record, associatedFields, renderOptions, isGraph) {
2817
3001
  var eliminate = renderOptions && renderOptions.chartOptions && renderOptions.chartOptions.table_options &&
2818
3002
  renderOptions.chartOptions.table_options.eliminate_calc_totals && !_.isEmpty(associatedFields) && !isGraph;
@@ -2832,17 +3016,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2832
3016
 
2833
3017
  highchartsRenderer.rhPivotCount = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
2834
3018
  var attr = arg[0];
2835
- var has_variants_persentage = false;
2836
- var variant_name = '';
2837
-
2838
- if (render_options && render_options.chartOptions &&
2839
- render_options.chartOptions.delta_column &&
2840
- render_options.chartOptions.delta_column.field === 'series' &&
2841
- render_options.chartOptions.delta_column.is_percentage) {
2842
- has_variants_persentage = true;
2843
- variant_name = render_options.chartOptions.delta_column.name;
2844
- }
2845
-
2846
3019
  return function (data, rowKey, colKey) {
2847
3020
  return {
2848
3021
  sum: 0,
@@ -2864,10 +3037,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2864
3037
  this.formats = lodash.uniq(this.formats);
2865
3038
  }
2866
3039
 
2867
- if (has_variants_persentage) {
2868
- if (rowKey == variant_name || lodash.includes(rowKey, variant_name)) {
2869
- this.widget_values_format = "#,###%";
2870
- }
3040
+ if (highchartsRenderer.isRowKeyShouldBePercentage(render_options, rowKey)) {
3041
+ this.widget_values_format = "#,###%";
2871
3042
  }
2872
3043
 
2873
3044
  if (highchartsRenderer.ignoreIfCalculatedValue(data, rowKey, colKey, record, calculated_info.associated_fields, render_options, is_graph)) {
@@ -2987,17 +3158,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2987
3158
  };
2988
3159
 
2989
3160
  highchartsRenderer.rhPivotAggregatorSum = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
2990
- var attr;
2991
- attr = arg[0];
2992
- var has_variants_persentage = false;
2993
- var variant_name = '';
2994
- if (render_options && render_options.chartOptions &&
2995
- render_options.chartOptions.delta_column &&
2996
- render_options.chartOptions.delta_column.field == "series" &&
2997
- render_options.chartOptions.delta_column.is_percentage) {
2998
- has_variants_persentage = true;
2999
- variant_name = render_options.chartOptions.delta_column.name;
3000
- }
3161
+ var attr = arg[0];
3001
3162
  return function (data, rowKey, colKey) {
3002
3163
  return {
3003
3164
  sum: 0,
@@ -3030,10 +3191,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
3030
3191
  this.formats = lodash.uniq(this.formats);
3031
3192
  }
3032
3193
 
3033
- if (has_variants_persentage) {
3034
- if (rowKey == variant_name || lodash.includes(rowKey, variant_name)) {
3035
- this.widget_values_format = "#,###%";
3036
- }
3194
+ if (highchartsRenderer.isRowKeyShouldBePercentage(render_options, rowKey)) {
3195
+ this.widget_values_format = "#,###%";
3037
3196
  }
3038
3197
 
3039
3198
  if (highchartsRenderer.ignoreIfCalculatedValue(data, rowKey, colKey, record, calculated_info.associated_fields, render_options, is_graph)) {
@@ -3087,17 +3246,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
3087
3246
  };
3088
3247
 
3089
3248
  highchartsRenderer.rhPivotAggregatorMin = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
3090
- var attr;
3091
- attr = arg[0];
3092
- var has_variants_persentage = false;
3093
- var variant_name = '';
3094
- if (render_options && render_options.chartOptions &&
3095
- render_options.chartOptions.delta_column &&
3096
- render_options.chartOptions.delta_column.field == "series" &&
3097
- render_options.chartOptions.delta_column.is_percentage) {
3098
- has_variants_persentage = true;
3099
- variant_name = render_options.chartOptions.delta_column.name;
3100
- }
3249
+ var attr = arg[0];
3101
3250
  return function (data, rowKey, colKey) {
3102
3251
  return {
3103
3252
  val: null,
@@ -3131,10 +3280,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
3131
3280
  this.formats = lodash.uniq(this.formats);
3132
3281
  }
3133
3282
 
3134
- if (has_variants_persentage) {
3135
- if (rowKey == variant_name || lodash.includes(rowKey, variant_name)) {
3136
- this.widget_values_format = "#,###%";
3137
- }
3283
+ if (highchartsRenderer.isRowKeyShouldBePercentage(render_options, rowKey)) {
3284
+ this.widget_values_format = "#,###%";
3138
3285
  }
3139
3286
 
3140
3287
  if (highchartsRenderer.ignoreIfCalculatedValue(data, rowKey, colKey, record, calculated_info.associated_fields, render_options, is_graph)) {
@@ -3185,17 +3332,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
3185
3332
  };
3186
3333
 
3187
3334
  highchartsRenderer.rhPivotAggregatorMax = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
3188
- var attr;
3189
- attr = arg[0];
3190
- var has_variants_persentage = false;
3191
- var variant_name = '';
3192
- if (render_options && render_options.chartOptions &&
3193
- render_options.chartOptions.delta_column &&
3194
- render_options.chartOptions.delta_column.field == "series" &&
3195
- render_options.chartOptions.delta_column.is_percentage) {
3196
- has_variants_persentage = true;
3197
- variant_name = render_options.chartOptions.delta_column.name;
3198
- }
3335
+ var attr = arg[0];
3199
3336
  return function (data, rowKey, colKey) {
3200
3337
  return {
3201
3338
  val: null,
@@ -3229,10 +3366,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
3229
3366
  this.formats = lodash.uniq(this.formats);
3230
3367
  }
3231
3368
 
3232
- if (has_variants_persentage) {
3233
- if (rowKey == variant_name || lodash.includes(rowKey, variant_name)) {
3234
- this.widget_values_format = "#,###%";
3235
- }
3369
+ if (highchartsRenderer.isRowKeyShouldBePercentage(render_options, rowKey)) {
3370
+ this.widget_values_format = "#,###%";
3236
3371
  }
3237
3372
 
3238
3373
  if (highchartsRenderer.ignoreIfCalculatedValue(data, rowKey, colKey, record, calculated_info.associated_fields, render_options, is_graph)) {
@@ -3283,17 +3418,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
3283
3418
  };
3284
3419
 
3285
3420
  highchartsRenderer.rhPivotAggregatorAverage = function (arg, widget_values_format, is_graph, render_options, calculated_info) {
3286
- var attr;
3287
- attr = arg[0];
3288
- var has_variants_persentage = false;
3289
- var variant_name = '';
3290
- if (render_options && render_options.chartOptions &&
3291
- render_options.chartOptions.delta_column &&
3292
- render_options.chartOptions.delta_column.field == "series" &&
3293
- render_options.chartOptions.delta_column.is_percentage) {
3294
- has_variants_persentage = true;
3295
- variant_name = render_options.chartOptions.delta_column.name;
3296
- }
3421
+ var attr = arg[0];
3297
3422
  return function (data, rowKey, colKey) {
3298
3423
  return {
3299
3424
  sum: 0,
@@ -3328,10 +3453,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
3328
3453
  this.formats = lodash.uniq(this.formats);
3329
3454
  }
3330
3455
 
3331
- if (has_variants_persentage) {
3332
- if (rowKey == variant_name || lodash.includes(rowKey, variant_name)) {
3333
- this.widget_values_format = "#,###%";
3334
- }
3456
+ if (highchartsRenderer.isRowKeyShouldBePercentage(render_options, rowKey)) {
3457
+ this.widget_values_format = "#,###%";
3335
3458
  }
3336
3459
 
3337
3460
  if (highchartsRenderer.ignoreIfCalculatedValue(data, rowKey, colKey, record, calculated_info.associated_fields, render_options, is_graph)) {
@@ -4283,6 +4406,27 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
4283
4406
  delete options.chartOptions.label;
4284
4407
  }
4285
4408
  }
4409
+
4410
+ if (!options.comboOptions) {
4411
+ options.comboOptions = {
4412
+ secondaryAxisSettings: {
4413
+ name: 'Secondary Axis',
4414
+ max: null,
4415
+ min: null,
4416
+ is_percentage: false,
4417
+ },
4418
+ seriesOptions: []
4419
+ }
4420
+ if (options.chartOptions.delta_column && options.chartOptions.delta_column.field === 'series') {
4421
+ options.comboOptions.seriesOptions.push({
4422
+ series: options.chartOptions.delta_column.name,
4423
+ chartType: options.chartOptions.delta_column.chart,
4424
+ secondaryAxis: !options.chartOptions.delta_column.same_yaxis,
4425
+ });
4426
+ options.comboOptions.secondaryAxisSettings.name = options.chartOptions.delta_column.name.replace('_', '');
4427
+ options.comboOptions.secondaryAxisSettings.is_percentage = options.chartOptions.delta_column.is_percentage;
4428
+ }
4429
+ }
4286
4430
  };
4287
4431
 
4288
4432
  highchartsRenderer.addPivotOptions = function (selectedTemplateWOData, widgetOptions, drilldownFunction, drillDownListFunction) {
@@ -4421,7 +4565,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
4421
4565
 
4422
4566
  // fill selected fields
4423
4567
  lodash.forEach(dynamicRangeOptions.fields, function (valObj) {
4424
- fieldOb = lodash.find(fields, {id: valObj.field_id});
4568
+ fieldOb = lodash.find(fields, {id: valObj.field});
4425
4569
  if (fieldOb) {
4426
4570
  selectedFields.push(fieldOb);
4427
4571
  lodash.remove(fields, {id: fieldOb.id});
@@ -5412,7 +5556,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
5412
5556
  element_options: [
5413
5557
  {label: 'Markers', value: ''},
5414
5558
  {label: 'Line', value: 'line'},
5559
+ {label: 'Smooth Line', value: 'spline'},
5415
5560
  {label: 'Column', value: 'column'},
5561
+ {label: 'Area', value: 'area'},
5562
+ {label: 'Smooth Area', value: 'areaspline'},
5416
5563
  ],
5417
5564
  default_value: ''
5418
5565
  }, {
@@ -5424,7 +5571,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
5424
5571
  element_type: 'checkbox',
5425
5572
  element_label: 'Same yAxis',
5426
5573
  value_name: 'same_yaxis',
5427
- default_value: false
5574
+ default_value: false,
5575
+ hidden: true,
5428
5576
  }, {
5429
5577
  element_type: 'checkbox',
5430
5578
  element_label: 'Same xAxis',
@@ -5434,7 +5582,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
5434
5582
  element_type: 'checkbox',
5435
5583
  element_label: 'Percentage',
5436
5584
  value_name: 'is_percentage',
5437
- default_value: false
5585
+ default_value: false,
5586
+ hidden: true,
5438
5587
  }, {
5439
5588
  element_type: 'checkbox',
5440
5589
  element_label: 'Sort by variance',
@@ -5483,7 +5632,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
5483
5632
  element_options: [
5484
5633
  {label: 'Markers', value: ''},
5485
5634
  {label: 'Line', value: 'line'},
5635
+ {label: 'Smooth Line', value: 'spline'},
5486
5636
  {label: 'Column', value: 'column'},
5637
+ {label: 'Area', value: 'area'},
5638
+ {label: 'Smooth Area', value: 'areaspline'},
5487
5639
  ],
5488
5640
  default_value: ''
5489
5641
  }, {
@@ -5495,7 +5647,85 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
5495
5647
  element_type: 'checkbox',
5496
5648
  element_label: 'Same yAxis',
5497
5649
  value_name: 'same_yaxis',
5650
+ default_value: false,
5651
+ hidden: true,
5652
+ }, {
5653
+ element_type: 'checkbox',
5654
+ element_label: 'Same xAxis',
5655
+ value_name: 'same_xaxis',
5656
+ default_value: false
5657
+ }, {
5658
+ element_type: 'checkbox',
5659
+ element_label: 'Percentage',
5660
+ value_name: 'is_percentage',
5661
+ default_value: false,
5662
+ hidden: true,
5663
+ }, {
5664
+ element_type: 'checkbox',
5665
+ element_label: 'Sort by variance',
5666
+ value_name: 'sort_by_variance',
5667
+ default_value: false
5668
+ }, {
5669
+ element_type: 'checkbox',
5670
+ element_label: 'Sort by absolute variance',
5671
+ value_name: 'sort_by_absolute_variance',
5672
+ default_value: false
5673
+ }, {
5674
+ element_type: 'checkbox',
5675
+ element_label: 'Filter zero values',
5676
+ value_name: 'is_filter_zero',
5677
+ default_value: false
5678
+ }]
5679
+ },
5680
+ 'delta_column_combo': {
5681
+ category_class: 'google-visualization-charteditor-mini-more',
5682
+ category_label: 'Variance',
5683
+ category_type: 'delta_column',
5684
+ elements: [{
5685
+ element_type: 'radio',
5686
+ value_name: 'field',
5687
+ element_label: 'Select Field',
5688
+ element_options: [
5689
+ {label: 'None', value: ''},
5690
+ {label: 'Axis', value: 'category'},
5691
+ {label: 'Legend', value: 'series'},
5692
+ ],
5693
+ default_value: ''
5694
+ }, {
5695
+ element_type: 'input',
5696
+ value_name: 'name',
5697
+ element_label: 'Name',
5698
+ default_value: '_Variance'
5699
+ }, {
5700
+ element_type: 'input',
5701
+ value_name: 'formula',
5702
+ element_label: 'Formula',
5703
+ default_value: 'x2-x1'
5704
+ }, {
5705
+ hidden: true,
5706
+ element_type: 'radio',
5707
+ value_name: 'chart',
5708
+ element_label: 'Chart',
5709
+ element_options: [
5710
+ {label: 'Markers', value: ''},
5711
+ {label: 'Line', value: 'line'},
5712
+ {label: 'Smooth Line', value: 'spline'},
5713
+ {label: 'Column', value: 'column'},
5714
+ {label: 'Area', value: 'area'},
5715
+ {label: 'Smooth Area', value: 'areaspline'},
5716
+ ],
5717
+ default_value: ''
5718
+ }, {
5719
+ element_type: 'checkbox',
5720
+ element_label: 'Only variance',
5721
+ value_name: 'only_variant',
5498
5722
  default_value: false
5723
+ }, {
5724
+ element_type: 'checkbox',
5725
+ element_label: 'Same yAxis',
5726
+ value_name: 'same_yaxis',
5727
+ default_value: false,
5728
+ hidden: true,
5499
5729
  }, {
5500
5730
  element_type: 'checkbox',
5501
5731
  element_label: 'Same xAxis',
@@ -5505,7 +5735,85 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
5505
5735
  element_type: 'checkbox',
5506
5736
  element_label: 'Percentage',
5507
5737
  value_name: 'is_percentage',
5738
+ default_value: false,
5739
+ hidden: true,
5740
+ }, {
5741
+ element_type: 'checkbox',
5742
+ element_label: 'Sort by variance',
5743
+ value_name: 'sort_by_variance',
5508
5744
  default_value: false
5745
+ }, {
5746
+ element_type: 'checkbox',
5747
+ element_label: 'Sort by absolute variance',
5748
+ value_name: 'sort_by_absolute_variance',
5749
+ default_value: false
5750
+ }]
5751
+ },
5752
+ 'delta_column_for_drill_down_combo': {
5753
+ category_class: 'google-visualization-charteditor-mini-more',
5754
+ category_label: 'Variance',
5755
+ category_type: 'delta_column',
5756
+ elements: [{
5757
+ element_type: 'radio',
5758
+ value_name: 'field',
5759
+ element_label: 'Select Field',
5760
+ element_options: [
5761
+ {label: 'None', value: ''},
5762
+ {label: 'Axis', value: 'category'},
5763
+ {label: 'Legend', value: 'series'},
5764
+ ],
5765
+ default_value: ''
5766
+ }, {
5767
+ element_type: 'input',
5768
+ value_name: 'name',
5769
+ element_label: 'Name',
5770
+ default_value: '_Variance'
5771
+ }, {
5772
+ element_type: 'input',
5773
+ value_name: 'formula',
5774
+ element_label: 'Formula',
5775
+ default_value: 'x2-x1'
5776
+ }, {
5777
+ element_type: 'input',
5778
+ value_name: 'color',
5779
+ element_label: 'Color',
5780
+ default_value: ''
5781
+ }, {
5782
+ hidden: true,
5783
+ element_type: 'radio',
5784
+ value_name: 'chart',
5785
+ element_label: 'Chart',
5786
+ element_options: [
5787
+ {label: 'Markers', value: ''},
5788
+ {label: 'Line', value: 'line'},
5789
+ {label: 'Smooth Line', value: 'spline'},
5790
+ {label: 'Column', value: 'column'},
5791
+ {label: 'Area', value: 'area'},
5792
+ {label: 'Smooth Area', value: 'areaspline'},
5793
+ ],
5794
+ default_value: ''
5795
+ }, {
5796
+ element_type: 'checkbox',
5797
+ element_label: 'Only variance',
5798
+ value_name: 'only_variant',
5799
+ default_value: false
5800
+ }, {
5801
+ element_type: 'checkbox',
5802
+ element_label: 'Same yAxis',
5803
+ value_name: 'same_yaxis',
5804
+ default_value: false,
5805
+ hidden: true,
5806
+ }, {
5807
+ element_type: 'checkbox',
5808
+ element_label: 'Same xAxis',
5809
+ value_name: 'same_xaxis',
5810
+ default_value: false
5811
+ }, {
5812
+ element_type: 'checkbox',
5813
+ element_label: 'Percentage',
5814
+ value_name: 'is_percentage',
5815
+ default_value: false,
5816
+ hidden: true,
5509
5817
  }, {
5510
5818
  element_type: 'checkbox',
5511
5819
  element_label: 'Sort by variance',
@@ -5580,6 +5888,39 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
5580
5888
  };
5581
5889
 
5582
5890
  highchartsRenderer.chartsTypesInfo = {
5891
+ 'combo-chart': {
5892
+ name: 'Column Combo Chart ',
5893
+ label: 'Column Combo Chart ',
5894
+ title: 'Allows for multiple chart display formats in one widget',
5895
+ description: 'For example, Revenue and Cost of goods sold as clomuns, and Gross margin as a line',
5896
+ axisName: 'X - Axis',
5897
+ legendName: 'Data series',
5898
+ startedMessage: 'To add multiple chart types, click on “Combo Chart Options“. A Secondary Axis is available in this chart',
5899
+ axisTooltipTitle: 'Drag one or more fields here to create your x-axis.',
5900
+ legendTooltipTitle: 'Click to display these data series as line or area charts',
5901
+ },
5902
+ 'combo-column-chart': {
5903
+ name: 'Column Combo Chart ',
5904
+ label: 'Column Combo Chart ',
5905
+ title: 'Allows for multiple chart display formats in one widget',
5906
+ description: 'For example, Revenue and Cost of goods sold as clomuns, and Gross margin as a line',
5907
+ axisName: 'X - Axis',
5908
+ legendName: 'Data series',
5909
+ startedMessage: 'To add multiple chart types, click on “Combo Chart Options“. A Secondary Axis is available in this chart.',
5910
+ axisTooltipTitle: 'Drag one or more fields here to create your x-axis.',
5911
+ legendTooltipTitle: 'Click to display these data series as line or area charts.',
5912
+ },
5913
+ 'combo-stacked-chart': {
5914
+ name: 'Stacked Column Combo Chart ',
5915
+ label: 'Stacked Column Combo Chart ',
5916
+ title: 'Allows for multiple chart display formats in one widget.',
5917
+ description: 'For example, different department stacked clomuns, and average as a line.',
5918
+ axisName: 'X - Axis',
5919
+ legendName: 'Data series',
5920
+ startedMessage: 'To add multiple chart types, click on “Combo Chart Options“. A Secondary Axis is available in this chart.',
5921
+ axisTooltipTitle: 'Drag one or more fields here to create your x-axis.',
5922
+ legendTooltipTitle: 'Click to display these data series as line or area charts.',
5923
+ },
5583
5924
  'line-chart': {
5584
5925
  name: 'Line chart',
5585
5926
  label: 'Line Chart',
@@ -5809,6 +6150,53 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
5809
6150
  highchartsRenderer.suboptions["table_options_transpose"],
5810
6151
  highchartsRenderer.suboptions["chart_grid"],
5811
6152
  highchartsRenderer.suboptions["negative_number_format"],
6153
+ highchartsRenderer.suboptions["delta_column_combo"],
6154
+ highchartsRenderer.suboptions["error_policy"],
6155
+ highchartsRenderer.suboptions["from_version"],
6156
+ highchartsRenderer.suboptions["legends"],
6157
+ ]
6158
+ }
6159
+ ]
6160
+ },
6161
+ {
6162
+ type: 'combo',
6163
+ name: 'Combo',
6164
+ class: 'combo-chart',
6165
+ subtypes: [{
6166
+ type: 'combo-column-chart',
6167
+ name: highchartsRenderer.chartsTypesInfo['combo-column-chart'].name,
6168
+ class: 'combo-column-chart',
6169
+ render: highchartsRenderer.ptRenderColumn,
6170
+ suboptions: [
6171
+ highchartsRenderer.suboptions["default_show"],
6172
+ highchartsRenderer.suboptions["axisY"],
6173
+ highchartsRenderer.suboptions["axisX"],
6174
+ highchartsRenderer.suboptions["tooltips"],
6175
+ highchartsRenderer.suboptions["label"],
6176
+ highchartsRenderer.suboptions["subtitle"],
6177
+ highchartsRenderer.suboptions["table_options"],
6178
+ highchartsRenderer.suboptions["chart"],
6179
+ highchartsRenderer.suboptions["negative_number_format"],
6180
+ highchartsRenderer.suboptions["delta_column_for_drill_down_combo"],
6181
+ highchartsRenderer.suboptions["error_policy"],
6182
+ highchartsRenderer.suboptions["from_version"],
6183
+ highchartsRenderer.suboptions["legends"],
6184
+ ],
6185
+ },
6186
+ {
6187
+ type: 'combo-stacked-chart',
6188
+ name: highchartsRenderer.chartsTypesInfo['combo-stacked-chart'].name,
6189
+ class: 'combo-stacked-chart',
6190
+ render: highchartsRenderer.ptRenderStackedColumn,
6191
+ suboptions: [
6192
+ highchartsRenderer.suboptions["default_show"],
6193
+ highchartsRenderer.suboptions["axisY"],
6194
+ highchartsRenderer.suboptions["axisX"],
6195
+ highchartsRenderer.suboptions["tooltips"],
6196
+ highchartsRenderer.suboptions["label_with_percentage"],
6197
+ highchartsRenderer.suboptions["subtitle"],
6198
+ highchartsRenderer.suboptions["table_options"],
6199
+ highchartsRenderer.suboptions["chart_grid"],
5812
6200
  highchartsRenderer.suboptions["delta_column"],
5813
6201
  highchartsRenderer.suboptions["error_policy"],
5814
6202
  highchartsRenderer.suboptions["from_version"],
@@ -6728,7 +7116,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6728
7116
  var datesFields = [];
6729
7117
  datesFields = lodash.filter(widget.rows, element => element.type == 'Date');
6730
7118
  datesFields = datesFields.concat(lodash.filter(widget.cols, element => element.type == 'Date'));
6731
-
7119
+
6732
7120
  const isCustomSorting = widget.options.sortingFields && Array.isArray(widget.options.sortingFields) && widget.options.sortingFields.length > 0;
6733
7121
  if (isCustomSorting) {
6734
7122
  lodash.forEach(datesFields, function (field) {
@@ -7088,7 +7476,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
7088
7476
  itemMarginTop: 2,
7089
7477
  };
7090
7478
  const none = {
7091
- enabled: false,
7479
+ enabled: false,
7092
7480
  };
7093
7481
 
7094
7482
  if (additionOptions.legends_position && additionOptions.legends_position.value) {