@datarailsshared/dr_renderer 1.2.271 → 1.2.274

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 +317 -331
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@datarailsshared/dr_renderer",
3
- "version": "1.2.271",
3
+ "version": "1.2.274",
4
4
  "description": "DataRails charts and tables renderer",
5
5
  "keywords": [
6
6
  "datarails",
package/src/highcharts_renderer.js CHANGED
@@ -1,3 +1,9 @@
1
+ const mobileBrowserRegex = new RegExp([
2
+ '(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)',
3
+ '|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/',
4
+ '|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino',
5
+ ].join(''), 'i');
6
+
1
7
  const SERIES_CLASSNAMES = {
2
8
  WATERFALL_BREAKDOWN: 'waterfallBreakdown',
3
9
  WATERFALL_WALKTHROUGH: 'waterfallWalkthrough',
@@ -6,27 +12,147 @@ const SERIES_CLASSNAMES = {
6
12
  };
7
13
 
8
14
  const EMPTY_ROW_N_KEYS = [[]];
15
+
9
16
  const NULL_VALUE = '[null]';
10
17
 
18
+ const CHART_COLORS = {
19
+ BACKGROUND: '#fff',
20
+ TEXT: '#151a41',
21
+ LABEL: '#cfd7dd',
22
+ LABEL_SECOND: '#85889c',
23
+ DRILL_UP_FILL: '#eef3f6',
24
+ PLOT_BORDER: '#606063',
25
+ MINOR_GRID_LINE: '#505053',
26
+ TICK_COLOR: '#666',
27
+ LABELS_OLD: '#D7D7D8',
28
+ DATA_LABELS: '#B0B0B3',
29
+ CONTRAST_TEXT: '#F0F0F3',
30
+ LEGEND_BACKGROUND: 'rgba(0, 0, 0, 0.5)',
31
+ MASK: 'rgba(255,255,255,0.3)',
32
+ };
33
+
34
+ const CHART_TYPES = {
35
+ LINE_CHART: 'line-chart',
36
+ LINE_CHART_SMOOTH: 'line-chart-smooth',
37
+ COLUMN_CHART: 'column-chart',
38
+ COLUMN_CHART_STACKED: 'column-chart-stacked',
39
+ COMBO_CHART: 'combo-chart',
40
+ COMBO_COLUMN_CHART: 'combo-column-chart',
41
+ COMBO_STACKED_CHART: 'combo-stacked-chart',
42
+ BAR_CHART: 'bar-chart',
43
+ BAR_CHART_STACKED: 'bar-chart-stacked',
44
+ SCATTER_CHART: 'scatter-chart',
45
+ AREA_CHART: 'area-chart',
46
+ AREA_CHART_SMOOTH: 'area-chart-smooth',
47
+ TABLE_ONLY: 'table_only',
48
+ POLYGON_CHART: 'polygon-chart',
49
+ PIE_CHART: 'pie-chart',
50
+ PIE_CHART_DRILLDOWN: 'pie-chart-drilldown',
51
+ GAUGE_SOLID_CHART: 'gauge-solid-chart',
52
+ GAUGE_CHART: 'gauge-chart',
53
+ KPI_WIDGET: 'kpi-widget',
54
+ TEXT_WIDGET: 'text-widget',
55
+ WATERFALL_BREAKDOWN: 'waterfall-chart-breakdown',
56
+ WATERFALL_WALKTHROUGH: 'waterfall-chart-walkthrough',
57
+ PUBLISHED_ITEM: 'published_item',
58
+ RICH_TEXT: 'rich_text',
59
+ EXCEL_VIEWER: 'excel_viewer',
60
+ }
61
+
62
+ const HIGHCHARTS_CONSTANTS = {
63
+ delimer: ' , ',
64
+ MAX_ROWS_FOR_AUTO_REFRESH: 100000,
65
+ MAX_ROWS_FOR_SHOW_RESULTS: 10000,
66
+ DR_OTHERS_KEY: 'DR_Others',
67
+ VIRTUAL_FIELDS: {
68
+ WATERFALL_VARIANCE: 'DR_WATERFALL_BREAKDOWN_VARIANCE',
69
+ },
70
+ waterfallConstants: {
71
+ [CHART_TYPES.WATERFALL_BREAKDOWN]: {
72
+ minCategoriesCount: 2,
73
+ maxCategoriesCount: 5,
74
+ },
75
+ [CHART_TYPES.WATERFALL_WALKTHROUGH]: {
76
+ minCategoriesCount: 2,
77
+ maxCategoriesCount: 10,
78
+ }
79
+ },
80
+ CHART_TYPES: CHART_TYPES,
81
+ MAX_SELECTED_ITEMS_IN_LABEL: 20,
82
+ MAX_SELECTED_ITEMS_CHARECHTERS_IN_LABEL: 50,
83
+ }
84
+
85
+ const SUBOPTIONS_FONT_SIZE_VALUES = (new Array(19).fill(null).map(function (item, index) {
86
+ const fontValue = index + 6;
87
+ return { label: fontValue, value: fontValue }
88
+ }));
89
+
90
+ const SUBOPTIONS_FONTS = [
91
+ 'Arial',
92
+ 'Arial Black',
93
+ 'Comic Sans MS',
94
+ 'Courier New',
95
+ 'Helvetica',
96
+ 'Impact',
97
+ 'Nunito Sans',
98
+ 'Tahoma',
99
+ 'Times New Roman',
100
+ 'Verdana',
101
+ 'Poppins'
102
+ ];
103
+
104
+ const HIGHCHARTS_FONT_FAMILY = 'Poppins';
105
+
106
+ const HIGHCHARTS_FONT_FAMILY_CSS = 'Poppins, sans-serif';
107
+
108
+ const TOOLTIP_DEFAULT_SETTINGS = {
109
+ FONT_COLOR: '#545a6b',
110
+ FONT_SIZE: '12',
111
+ FONT_FAMILY: HIGHCHARTS_FONT_FAMILY,
112
+ };
113
+
114
+ const TOOLTIP_DEFAULT_OPTIONS = {
115
+ borderColor: CHART_COLORS.BACKGROUND,
116
+ shadow: {
117
+ color: '#9199b4',
118
+ width: 10,
119
+ opacity: 0.05
120
+ },
121
+ style: {
122
+ fontSize: TOOLTIP_DEFAULT_SETTINGS.FONT_SIZE,
123
+ fontFamily: TOOLTIP_DEFAULT_SETTINGS.FONT_FAMILY,
124
+ color: TOOLTIP_DEFAULT_SETTINGS.FONT_COLOR,
125
+ },
126
+ enabled: true,
127
+ };
128
+
129
+ const LABEL_DEFAULT_SETTINGS = {
130
+ FONT_COLOR: CHART_COLORS.TEXT,
131
+ FONT_SIZE: '11',
132
+ FONT_FAMILY: HIGHCHARTS_FONT_FAMILY,
133
+ };
134
+
135
+ const LABEL_DEFAULT_OPTIONS = {
136
+ style: {
137
+ fontSize: LABEL_DEFAULT_SETTINGS.FONT_SIZE,
138
+ fontFamily: LABEL_DEFAULT_SETTINGS.FONT_FAMILY,
139
+ fontWeight: 'normal',
140
+ },
141
+ color: LABEL_DEFAULT_SETTINGS.FONT_COLOR,
142
+ };
143
+
144
+ const CHART_AXIS_DEFAULT_LABEL = 'Axis (Category)';
145
+
146
+ const CHART_LEGEND_DEFAULT_LABEL = 'Legend (Series)';
147
+
11
148
  let getHighchartsRenderer = function ($, document, Highcharts, default_colors, highchartsRenderer,
12
149
  DataFormatter, lodash, moment_lib, isNewAngular) {
13
150
 
151
+ /** Highcharts initial configuration section **/
14
152
  if(!lodash){
15
153
  lodash = _;
16
154
  }
17
155
 
18
- // TODO: always true. remove
19
- let useNewUx = true;
20
- let useTotalsCalculation = false;
21
- let disableAnimation = false;
22
- if (document.ReportHippo && document.ReportHippo && document.ReportHippo.user) {
23
- useTotalsCalculation = lodash.includes(document.ReportHippo.user.features, 'enable_server_totals_calculation');
24
- disableAnimation = document.ReportHippo.user.organization && document.ReportHippo.user.organization.settings && document.ReportHippo.user.organization.settings.disable_animation
25
- }
26
- const textColor = "#151a41";
27
- const chartLabelColor = "#cfd7dd";
28
- const HIGHCHARTS_FONT_FAMILY = 'Poppins';
29
-
30
156
  if(!Highcharts){
31
157
  Highcharts = {
32
158
  opt: {},
@@ -40,9 +166,17 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
40
166
  moment_lib = moment;
41
167
  }
42
168
 
43
- if(!highchartsRenderer){
169
+ if (!highchartsRenderer) {
44
170
  highchartsRenderer = {};
45
171
  }
172
+ lodash.assign(highchartsRenderer, HIGHCHARTS_CONSTANTS);
173
+
174
+ let useTotalsCalculation = false;
175
+ let disableAnimation = false;
176
+ if (document.ReportHippo && document.ReportHippo && document.ReportHippo.user) {
177
+ useTotalsCalculation = lodash.includes(document.ReportHippo.user.features, 'enable_server_totals_calculation');
178
+ disableAnimation = document.ReportHippo.user.organization && document.ReportHippo.user.organization.settings && document.ReportHippo.user.organization.settings.disable_animation
179
+ }
46
180
 
47
181
  // in lib it will not work
48
182
  highchartsRenderer.elem1 = document.createElement('textarea');
@@ -54,133 +188,104 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
54
188
  highchartsRenderer.variance_color = default_colors.variance_color;
55
189
  }
56
190
 
57
- const mobileBrowserRegex = new RegExp([
58
- '(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)',
59
- '|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/',
60
- '|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino',
61
- ].join(''), 'i');
62
191
  highchartsRenderer.isMobile = mobileBrowserRegex.test(navigator.userAgent);
63
192
 
64
- highchartsRenderer.CHART_TYPES = {
65
- LINE_CHART: 'line-chart',
66
- LINE_CHART_SMOOTH: 'line-chart-smooth',
67
- COLUMN_CHART: 'column-chart',
68
- COLUMN_CHART_STACKED: 'column-chart-stacked',
69
- COMBO_CHART: 'combo-chart',
70
- COMBO_COLUMN_CHART: 'combo-column-chart',
71
- COMBO_STACKED_CHART: 'combo-stacked-chart',
72
- BAR_CHART: 'bar-chart',
73
- BAR_CHART_STACKED: 'bar-chart-stacked',
74
- SCATTER_CHART: 'scatter-chart',
75
- AREA_CHART: 'area-chart',
76
- AREA_CHART_SMOOTH: 'area-chart-smooth',
77
- TABLE_ONLY: 'table_only',
78
- POLYGON_CHART: 'polygon-chart',
79
- PIE_CHART: 'pie-chart',
80
- PIE_CHART_DRILLDOWN: 'pie-chart-drilldown',
81
- GAUGE_SOLID_CHART: 'gauge-solid-chart',
82
- GAUGE_CHART: 'gauge-chart',
83
- KPI_WIDGET: 'kpi-widget',
84
- TEXT_WIDGET: 'text-widget',
85
- WATERFALL_BREAKDOWN: 'waterfall-chart-breakdown',
86
- WATERFALL_WALKTHROUGH: 'waterfall-chart-walkthrough',
87
- PUBLISHED_ITEM: 'published_item',
88
- RICH_TEXT: 'rich_text',
89
- EXCEL_VIEWER: 'excel_viewer',
90
- };
91
-
92
- highchartsRenderer.VIRTUAL_FIELDS = {
93
- WATERFALL_VARIANCE: 'DR_WATERFALL_BREAKDOWN_VARIANCE',
94
- };
95
-
96
- highchartsRenderer.DR_OTHERS_KEY = 'DR_Others';
97
-
98
193
  highchartsRenderer.highcharts_theme = {
99
- "colors": highchartsRenderer.defaults_colors,
100
- "chart": {
101
- "backgroundColor": "#FFFFFF",
102
- "plotBorderColor": "#606063",
103
- "style": {
104
- "fontFamily": "Poppins",
105
- "color": "#3C3C3C"
194
+ colors: highchartsRenderer.defaults_colors,
195
+ chart: {
196
+ backgroundColor: CHART_COLORS.BACKGROUND,
197
+ plotBorderColor: CHART_COLORS.PLOT_BORDER,
198
+ style: {
199
+ fontFamily: HIGHCHARTS_FONT_FAMILY_CSS,
200
+ color: CHART_COLORS.TEXT
106
201
  }
107
202
  },
108
- "title": {
109
- "align": "left",
110
- "style": {
111
- "fontWeight": "bold"
203
+ title: {
204
+ align: 'left',
205
+ style: {
206
+ fontWeight: 'bold'
112
207
  }
113
208
  },
114
- "subtitle": {
115
- "align": "left"
209
+ subtitle: {
210
+ align: 'left'
116
211
  },
117
- "xAxis": {
118
- "gridLineWidth": 1,
119
- "gridLineColor": "#D7D7D8" ,
120
- "labels": {
121
- "style": {
122
- "fontFamily": "Unica One, sans-serif",
123
- "color": "#3C3C3C"
212
+ xAxis: {
213
+ gridLineWidth: 1,
214
+ gridLineColor: CHART_COLORS.LABEL ,
215
+ labels: {
216
+ style: {
217
+ fontFamily: HIGHCHARTS_FONT_FAMILY_CSS,
218
+ color: CHART_COLORS.TEXT,
219
+ 'font-size': '10px',
220
+ 'font-weight': "bold"
124
221
  }
125
222
  },
126
- "lineColor": "#D7D7D8",
127
- "minorGridLineColor": "#505053",
128
- "tickColor": "#D7D7D8",
129
- "tickWidth": 1,
130
- "title": {
131
- "style": {
132
- "color": "#A0A0A3"
223
+ lineColor: CHART_COLORS.LABEL,
224
+ minorGridLineColor: CHART_COLORS.MINOR_GRID_LINE,
225
+ tickColor: CHART_COLORS.LABEL,
226
+ tickWidth: 1,
227
+ title: {
228
+ style: {
229
+ fontFamily: HIGHCHARTS_FONT_FAMILY_CSS,
230
+ color: CHART_COLORS.LABEL_SECOND,
231
+ 'font-size': '12px',
232
+ 'font-weight': 'bold'
133
233
  }
134
234
  }
135
235
  },
136
- "yAxis": {
137
- "gridLineColor": "#D7D7D8",
138
- "labels": {
139
- "style": {
140
- "fontFamily": "Unica One, sans-serif",
141
- "color": "#3C3C3C"
236
+ yAxis: {
237
+ gridLineColor: CHART_COLORS.LABEL,
238
+ labels: {
239
+ style: {
240
+ fontFamily: HIGHCHARTS_FONT_FAMILY_CSS,
241
+ 'font-size': '10px',
242
+ color: CHART_COLORS.LABEL_SECOND
142
243
  }
143
244
  },
144
- "lineColor": "#D7D7D8",
145
- "minorGridLineColor": "#505053",
146
- "tickColor": "#D7D7D8",
147
- "tickWidth": 1,
148
- "title": {
149
- "style": {
150
- "color": "#000000"
245
+ lineColor: CHART_COLORS.LABEL,
246
+ minorGridLineColor: CHART_COLORS.MINOR_GRID_LINE,
247
+ tickColor: CHART_COLORS.LABEL,
248
+ tickWidth: 1,
249
+ title: {
250
+ style: {
251
+ fontFamily: HIGHCHARTS_FONT_FAMILY_CSS,
252
+ color: CHART_COLORS.LABEL_SECOND,
253
+ 'font-size': '12px',
254
+ 'font-weight': 'bold'
151
255
  }
152
256
  }
153
257
  },
154
- "tooltip": {
155
- "backgroundColor": "rgba(0, 0, 0, 0.85)",
156
- "style": {
157
- "color": "#F0F0F0"
258
+ tooltip: {
259
+ backgroundColor: CHART_COLORS.BACKGROUND,
260
+ style: {
261
+ color: CHART_COLORS.TEXT
158
262
  }
159
263
  },
160
- "legend": {
161
- "itemStyle": {
162
- "color": "#3C3C3C"
264
+ legend: {
265
+ itemStyle: {
266
+ color: CHART_COLORS.TEXT,
267
+ fontWeight: 'normal'
163
268
  },
164
- "itemHiddenStyle": {
165
- "color": "#606063"
269
+ itemHiddenStyle: {
270
+ color: CHART_COLORS.PLOT_BORDER
166
271
  }
167
272
  },
168
- "credits": {
169
- "style": {
170
- "color": "#666"
273
+ credits: {
274
+ style: {
275
+ color: CHART_COLORS.TICK_COLOR
171
276
  }
172
277
  },
173
- "labels": {
174
- "style": {
175
- "color": "#D7D7D8"
278
+ labels: {
279
+ style: {
280
+ color: CHART_COLORS.LABELS_OLD
176
281
  }
177
282
  },
178
- "legendBackgroundColor": "rgba(0, 0, 0, 0.5)",
179
- "background2": "white",
180
- "dataLabelsColor": "#B0B0B3",
181
- "textColor": "black",
182
- "contrastTextColor": "#F0F0F3",
183
- "maskColor": "rgba(255,255,255,0.3)",
283
+ legendBackgroundColor: CHART_COLORS.LEGEND_BACKGROUND,
284
+ background2: CHART_COLORS.BACKGROUND,
285
+ dataLabelsColor: CHART_COLORS.DATA_LABELS,
286
+ textColor: CHART_COLORS.TEXT,
287
+ contrastTextColor: CHART_COLORS.CONTRAST_TEXT,
288
+ maskColor: CHART_COLORS.MASK,
184
289
  lang: {
185
290
  decimalPoint: '.',
186
291
  drillUpText: '< Back'
@@ -191,70 +296,30 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
191
296
  height: 20
192
297
  }
193
298
  },
194
- exporting: {enabled: false, sourceWidth: 900}
195
- };
196
-
197
- if (useNewUx) {
198
- highchartsRenderer.highcharts_theme.chart.style.color = textColor;
199
-
200
- highchartsRenderer.highcharts_theme.xAxis.gridLineColor = chartLabelColor;
201
- highchartsRenderer.highcharts_theme.xAxis.lineColor = chartLabelColor;
202
- highchartsRenderer.highcharts_theme.xAxis.tickColor = chartLabelColor;
203
- highchartsRenderer.highcharts_theme.xAxis.labels.style = {
204
- "fontFamily": "Poppins, sans-serif",
205
- "color": textColor,
206
- "font-size": "10px",
207
- "font-weight": "bold"
208
- };
209
- highchartsRenderer.highcharts_theme.xAxis.title.style = {
210
- "fontFamily": "Poppins, sans-serif",
211
- "color": "#85889c",
212
- "font-size": "12px",
213
- "font-weight": "bold"
214
- };
215
-
216
- highchartsRenderer.highcharts_theme.yAxis.gridLineColor = chartLabelColor;
217
- highchartsRenderer.highcharts_theme.yAxis.lineColor = chartLabelColor;
218
- highchartsRenderer.highcharts_theme.yAxis.tickColor = chartLabelColor;
219
- highchartsRenderer.highcharts_theme.yAxis.labels.style = {
220
- "fontFamily": "Poppins, sans-serif",
221
- "font-size": "10px",
222
- "color": "#85889c"
223
- };
224
- highchartsRenderer.highcharts_theme.yAxis.title.style = {
225
- "fontFamily": "Poppins, sans-serif",
226
- "color": "#85889c",
227
- "font-size": "12px",
228
- "font-weight": "bold"
229
- };
230
-
231
- highchartsRenderer.highcharts_theme.tooltip.backgroundColor = "#fff";
232
- highchartsRenderer.highcharts_theme.tooltip.style.color = textColor;
233
- highchartsRenderer.highcharts_theme.legend.itemStyle.color = textColor;
234
- highchartsRenderer.highcharts_theme.legend.itemStyle.fontWeight = 'normal';
235
- highchartsRenderer.highcharts_theme.drilldown = {
299
+ exporting: {
300
+ enabled: false,
301
+ sourceWidth: 900
302
+ },
303
+ drilldown: {
236
304
  activeAxisLabelStyle: {
237
- color: textColor
305
+ color: CHART_COLORS.TEXT
238
306
  },
239
307
  activeDataLabelStyle: {
240
308
  textDecoration: 'none',
241
309
  }
242
310
  }
243
- }
311
+ };
244
312
 
245
313
  Highcharts.setOptions(highchartsRenderer.highcharts_theme);
246
314
 
315
+ /** End of 'Highcharts initial configuration section' **/
316
+
247
317
  highchartsRenderer.filterFloat = function (value) {
248
318
  if (/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/.test(value))
249
319
  return Number(value);
250
320
  return null;
251
321
  };
252
322
 
253
- highchartsRenderer.delimer = ' , ';
254
-
255
- highchartsRenderer.MAX_ROWS_FOR_AUTO_REFRESH = 100000;
256
- highchartsRenderer.MAX_ROWS_FOR_SHOW_RESULTS = 10000;
257
-
258
323
  highchartsRenderer.setColors = function (colors) {
259
324
  highchartsRenderer.highcharts_theme.colors = colors;
260
325
  Highcharts.setOptions(highchartsRenderer.highcharts_theme);
@@ -876,20 +941,20 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
876
941
  },
877
942
  theme: {
878
943
  fill: 'white',
879
- color: '#85889c',
944
+ color: CHART_COLORS.LABEL_SECOND,
880
945
  'stroke-width': 1,
881
- stroke: '#85889c',
946
+ stroke: CHART_COLORS.LABEL_SECOND,
882
947
  r: 3,
883
948
  states: {
884
949
  hover: {
885
- fill: '#eef3f6',
886
- stroke: '#85889c',
887
- color: '#85889c'
950
+ fill: CHART_COLORS.DRILL_UP_FILL,
951
+ stroke: CHART_COLORS.LABEL_SECOND,
952
+ color: CHART_COLORS.LABEL_SECOND
888
953
  },
889
954
  select: {
890
- stroke: '#85889c',
891
- fill: '#eef3f6',
892
- color: '#85889c'
955
+ stroke: CHART_COLORS.LABEL_SECOND,
956
+ fill: CHART_COLORS.DRILL_UP_FILL,
957
+ color: CHART_COLORS.LABEL_SECOND
893
958
  }
894
959
  }
895
960
  },
@@ -913,21 +978,21 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
913
978
  floating: true,
914
979
  buttonTheme: {
915
980
  fill: 'white',
916
- color: '#85889c',
981
+ color: CHART_COLORS.LABEL_SECOND,
917
982
  'stroke-width': 1,
918
- stroke: '#85889c',
983
+ stroke: CHART_COLORS.LABEL_SECOND,
919
984
  r: 3,
920
985
  padding: 3,
921
986
  states: {
922
987
  hover: {
923
- fill: '#eef3f6',
924
- stroke: '#85889c',
925
- color: '#85889c'
988
+ fill: CHART_COLORS.DRILL_UP_FILL,
989
+ stroke: CHART_COLORS.LABEL_SECOND,
990
+ color: CHART_COLORS.LABEL_SECOND
926
991
  },
927
992
  select: {
928
- stroke: '#85889c',
929
- fill: '#eef3f6',
930
- color: '#85889c'
993
+ stroke: CHART_COLORS.LABEL_SECOND,
994
+ fill: CHART_COLORS.DRILL_UP_FILL,
995
+ color: CHART_COLORS.LABEL_SECOND
931
996
  }
932
997
  }
933
998
  },
@@ -1606,11 +1671,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1606
1671
  series.dataLabels = {y: -8};
1607
1672
  }
1608
1673
  series.marker = {
1609
- lineWidth: 6,
1674
+ lineWidth: 0,
1610
1675
  enabled: true,
1611
- radius: 6,
1676
+ radius: 8,
1612
1677
  lineColor: varianceColor,
1613
- fillColor: 'white',
1678
+ fillColor: varianceColor,
1614
1679
  symbol: 'circle',
1615
1680
  states: {
1616
1681
  select: {
@@ -1618,25 +1683,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1618
1683
  fillColor: '#00FF2D',
1619
1684
  lineColor: '#008816',
1620
1685
  lineWidth: 5,
1686
+ },
1687
+ hover: {
1688
+ enabled: false,
1689
+ lineWidthPlus: 0
1621
1690
  }
1622
1691
  }
1623
1692
  };
1624
- if (useNewUx) {
1625
- series.marker.lineWidth = 0;
1626
- series.marker.radius = 8;
1627
- series.marker.fillColor = varianceColor;
1628
- series.marker.states.hover = {
1629
- enabled: false
1630
- };
1631
- }
1632
-
1633
- series.states = {
1634
- hover: {
1635
- lineWidthPlus: 0
1636
- }
1637
- };
1638
- }
1639
- else if (delta_column_options.chart == 'area') {
1693
+ } else if (delta_column_options.chart == 'area') {
1640
1694
  series.color = varianceColor;
1641
1695
  series.type = 'area'
1642
1696
  } else if (delta_column_options.chart == 'areaspline') {
@@ -2097,7 +2151,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2097
2151
  backgroundColor: {
2098
2152
  linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
2099
2153
  stops: [
2100
- [0, '#FFF'],
2154
+ [0, CHART_COLORS.BACKGROUND],
2101
2155
  [1, '#333']
2102
2156
  ]
2103
2157
  },
@@ -2108,7 +2162,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2108
2162
  linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
2109
2163
  stops: [
2110
2164
  [0, '#333'],
2111
- [1, '#FFF']
2165
+ [1, CHART_COLORS.BACKGROUND]
2112
2166
  ]
2113
2167
  },
2114
2168
  borderWidth: 1,
@@ -2160,12 +2214,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2160
2214
  minorTickWidth: 1,
2161
2215
  minorTickLength: 10,
2162
2216
  minorTickPosition: 'inside',
2163
- minorTickColor: '#666',
2217
+ minorTickColor: CHART_COLORS.TICK_COLOR,
2164
2218
  tickPixelInterval: 30,
2165
2219
  tickWidth: 2,
2166
2220
  tickPosition: 'inside',
2167
2221
  tickLength: 10,
2168
- tickColor: '#666',
2222
+ tickColor: CHART_COLORS.TICK_COLOR,
2169
2223
  labels: {
2170
2224
  step: 2,
2171
2225
  rotation: 'auto'
@@ -2450,6 +2504,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2450
2504
  };
2451
2505
  }
2452
2506
 
2507
+ chartOptions.plotOptions.series.point.events.mouseOver = opts.insightsTooltipFunc;
2508
+ chartOptions.plotOptions.series.point.events.mouseOut = opts.insightsTooltipFunc;
2509
+
2453
2510
  chartOptions.tooltip = {
2454
2511
  formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
2455
2512
  valueDecimals: 2,
@@ -2529,6 +2586,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2529
2586
  };
2530
2587
  }
2531
2588
 
2589
+ chartOptions.plotOptions.series.point.events.mouseOver = opts.insightsTooltipFunc;
2590
+ chartOptions.plotOptions.series.point.events.mouseOut = opts.insightsTooltipFunc;
2591
+
2532
2592
  chartOptions.tooltip = {
2533
2593
  formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
2534
2594
  valueDecimals: 2,
@@ -2621,6 +2681,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2621
2681
  };
2622
2682
  }
2623
2683
 
2684
+ chartOptions.plotOptions.series.point.events.mouseOver = opts.insightsTooltipFunc;
2685
+ chartOptions.plotOptions.series.point.events.mouseOut = opts.insightsTooltipFunc;
2686
+
2624
2687
  chartOptions.tooltip = {
2625
2688
  formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
2626
2689
  valueDecimals: 2,
@@ -2693,11 +2756,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2693
2756
  chartOptions.plotOptions = {
2694
2757
  [type === 'area-chart' ? 'area' : 'areaspline']: {
2695
2758
  stacking: 'normal',
2696
- lineColor: '#666666',
2759
+ lineColor: CHART_COLORS.TICK_COLOR,
2697
2760
  lineWidth: 1,
2698
2761
  marker: {
2699
2762
  lineWidth: 1,
2700
- lineColor: '#666666'
2763
+ lineColor: CHART_COLORS.TICK_COLOR
2701
2764
  }
2702
2765
  },
2703
2766
  series: {
@@ -2897,6 +2960,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2897
2960
  }
2898
2961
  };
2899
2962
  }
2963
+ chartOptions.plotOptions.series.point.events.mouseOver = opts.insightsTooltipFunc;
2964
+ chartOptions.plotOptions.series.point.events.mouseOut = opts.insightsTooltipFunc;
2900
2965
 
2901
2966
  chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, false);
2902
2967
 
@@ -3030,6 +3095,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
3030
3095
  }
3031
3096
  };
3032
3097
  }
3098
+
3099
+ chartOptions.plotOptions.series.point.events.mouseOver = opts.insightsTooltipFunc;
3100
+ chartOptions.plotOptions.series.point.events.mouseOut = opts.insightsTooltipFunc;
3101
+
3033
3102
  chartOptions.xAxis = {
3034
3103
  type: 'category',
3035
3104
  crosshair: true,
@@ -3211,6 +3280,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
3211
3280
  }
3212
3281
  };
3213
3282
  }
3283
+
3284
+ chartOptions.plotOptions.series.point.events.mouseOver = opts.insightsTooltipFunc;
3285
+ chartOptions.plotOptions.series.point.events.mouseOut = opts.insightsTooltipFunc;
3286
+
3214
3287
  chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, false);
3215
3288
 
3216
3289
  return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
@@ -3251,7 +3324,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
3251
3324
  },
3252
3325
  style: {
3253
3326
  fontWeight: 'normal',
3254
- color: (highchartsRenderer.highcharts_theme && highchartsRenderer.highcharts_theme.textColor) || 'gray'
3327
+ color: (highchartsRenderer.highcharts_theme && highchartsRenderer.highcharts_theme.CHART_COLORS.TEXT) || 'gray'
3255
3328
  }
3256
3329
  },
3257
3330
  labels: {
@@ -3289,6 +3362,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
3289
3362
  };
3290
3363
  }
3291
3364
 
3365
+ chartOptions.plotOptions.series.point.events.mouseOver = opts.insightsTooltipFunc;
3366
+ chartOptions.plotOptions.series.point.events.mouseOut = opts.insightsTooltipFunc;
3367
+
3292
3368
  chartOptions.xAxis = {
3293
3369
  categories: pivotData.getColKeys(),
3294
3370
  title: {
@@ -3398,6 +3474,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
3398
3474
  };
3399
3475
  }
3400
3476
 
3477
+ chartOptions.plotOptions.series.point.events.mouseOver = opts.insightsTooltipFunc;
3478
+ chartOptions.plotOptions.series.point.events.mouseOut = opts.insightsTooltipFunc;
3479
+
3401
3480
  chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, 3, false);
3402
3481
  chartOptions.legend.useHTML = true;
3403
3482
  chartOptions.legend.labelFormatter = function() {
@@ -3513,6 +3592,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
3513
3592
  }
3514
3593
  };
3515
3594
  }
3595
+
3596
+ chartOptions.plotOptions.series.point.events.mouseOver = opts.insightsTooltipFunc;
3597
+ chartOptions.plotOptions.series.point.events.mouseOut = opts.insightsTooltipFunc;
3598
+
3516
3599
  if (waterfallOptions.colors) {
3517
3600
  chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, 3, false);
3518
3601
  chartOptions.legend.useHTML = true;
@@ -4604,17 +4687,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
4604
4687
  }
4605
4688
  };
4606
4689
 
4607
- highchartsRenderer.waterfallConstants = {
4608
- [highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN]: {
4609
- minCategoriesCount: 2,
4610
- maxCategoriesCount: 5,
4611
- },
4612
- [highchartsRenderer.CHART_TYPES.WATERFALL_WALKTHROUGH]: {
4613
- minCategoriesCount: 2,
4614
- maxCategoriesCount: 10,
4615
- }
4616
- };
4617
-
4618
4690
  highchartsRenderer.rhPivotView = function (rowData, options, isTable = false, widget = null) {
4619
4691
  if (!rowData || !rowData) {
4620
4692
  if (options.onlyOptions) {
@@ -5216,7 +5288,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
5216
5288
  options.chartOptions = lodash.merge(defaultOptions, options.chartOptions);
5217
5289
  };
5218
5290
 
5219
- highchartsRenderer.addPivotOptions = function (selectedTemplateWOData, widgetOptions, drilldownFunction, drillDownListFunction) {
5291
+ highchartsRenderer.addPivotOptions = function (selectedTemplateWOData, widgetOptions, drilldownFunction, drillDownListFunction, insightsTooltipFunction) {
5220
5292
  // Check if not rendered data, than it will render
5221
5293
 
5222
5294
  var fields = highchartsRenderer.objectCopyJsonMethod(selectedTemplateWOData.fields);
@@ -5226,6 +5298,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
5226
5298
  var valuesFields = [];
5227
5299
  var drilldownFunc = drilldownFunction;
5228
5300
  var drillDownListFunc = drillDownListFunction;
5301
+ var insightsTooltipFunc = insightsTooltipFunction;
5229
5302
 
5230
5303
  // fill value fields
5231
5304
  lodash.forEach(widgetOptions.vals, function (valObj) {
@@ -5280,7 +5353,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
5280
5353
  widgetOptions.pivot.valuesArray = valuesFields;
5281
5354
  widgetOptions.pivot.chartType = widgetOptions.chart_type;
5282
5355
  widgetOptions.pivot.chartOptions = widgetOptions.options;
5283
- widgetOptions.pivot.chartRender = highchartsRenderer.getChartRendererFunction(widgetOptions.pivot.chartType, drilldownFunc, drillDownListFunc);
5356
+ widgetOptions.pivot.chartRender = highchartsRenderer.getChartRendererFunction(widgetOptions.pivot.chartType, drilldownFunc, drillDownListFunc, insightsTooltipFunc);
5284
5357
 
5285
5358
  // TODO: remove this logic after BE sort is implemented
5286
5359
  // it is required to do sort by totals for comparative analysis - we need to change deltas if columns swaped vice versa
@@ -5810,7 +5883,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
5810
5883
  return toReturn;
5811
5884
  };
5812
5885
 
5813
- highchartsRenderer.getChartRendererFunction = function (newChartType, drilldownFunc, drillDownListFunc) {
5886
+ highchartsRenderer.getChartRendererFunction = function (newChartType, drilldownFunc, drillDownListFunc, insightsTooltipFunc) {
5814
5887
  var fnToReturn = null;
5815
5888
 
5816
5889
  if (newChartType == highchartsRenderer.richTextSubType.type) {
@@ -5838,6 +5911,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
5838
5911
  opt = {};
5839
5912
  }
5840
5913
  opt.drillDownListFunc = drillDownListFunc;
5914
+ opt.insightsTooltipFunc = insightsTooltipFunc;
5841
5915
  } else {
5842
5916
  opt.drillDownListFunc = null;
5843
5917
  }
@@ -5979,63 +6053,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
5979
6053
  return key
5980
6054
  };
5981
6055
 
5982
- const fontSizeValues = lodash.map(new Array(19), (item, index) => {
5983
- const fontValue = index + 6;
5984
- return {label: fontValue, value: fontValue}
5985
- })
5986
- const fonts = [
5987
- 'Arial',
5988
- 'Arial Black',
5989
- 'Comic Sans MS',
5990
- 'Courier New',
5991
- 'Helvetica',
5992
- 'Impact',
5993
- 'Nunito Sans',
5994
- 'Tahoma',
5995
- 'Times New Roman',
5996
- 'Verdana',
5997
- 'Poppins'
5998
- ];
5999
-
6000
- const TOOLTIP_DEFAULT_SETTINGS = {
6001
- FONT_COLOR: '#545a6b',
6002
- FONT_SIZE: '12',
6003
- FONT_FAMILY: HIGHCHARTS_FONT_FAMILY,
6004
- };
6005
-
6006
- const TOOLTIP_DEFAULT_OPTIONS = {
6007
- borderColor: '#fff',
6008
- shadow: {
6009
- color: '#9199b4',
6010
- width: 10,
6011
- opacity: 0.05
6012
- },
6013
- style: {
6014
- fontSize: TOOLTIP_DEFAULT_SETTINGS.FONT_SIZE,
6015
- fontFamily: TOOLTIP_DEFAULT_SETTINGS.FONT_FAMILY,
6016
- color: TOOLTIP_DEFAULT_SETTINGS.FONT_COLOR,
6017
- },
6018
- enabled: true,
6019
- };
6020
-
6021
- const LABEL_DEFAULT_SETTINGS = {
6022
- FONT_COLOR: textColor,
6023
- FONT_SIZE: '11',
6024
- FONT_FAMILY: HIGHCHARTS_FONT_FAMILY,
6025
- };
6026
-
6027
- const LABEL_DEFAULT_OPTIONS = {
6028
- style: {
6029
- fontSize: LABEL_DEFAULT_SETTINGS.FONT_SIZE,
6030
- fontFamily: LABEL_DEFAULT_SETTINGS.FONT_FAMILY,
6031
- fontWeight: 'normal',
6032
- },
6033
- color: LABEL_DEFAULT_SETTINGS.FONT_COLOR,
6034
- };
6035
-
6036
- const CHART_AXIS_DEFAULT_LABEL = 'Axis (Category)';
6037
- const CHART_LEGEND_DEFAULT_LABEL = 'Legend (Series)';
6038
-
6039
6056
  highchartsRenderer.getDefaultValueForSubOptions = function (type, existing_options) {
6040
6057
  var valToReturn = {};
6041
6058
  var option = highchartsRenderer.suboptions[type] || lodash.find(highchartsRenderer.suboptions, suboption => suboption.category_type === type);
@@ -6056,7 +6073,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6056
6073
  return valToReturn;
6057
6074
  };
6058
6075
 
6059
-
6060
6076
  highchartsRenderer.getChartAxisLabel = function(type) {
6061
6077
  return highchartsRenderer.chartsTypesInfo[type] ? highchartsRenderer.chartsTypesInfo[type].axisName : CHART_AXIS_DEFAULT_LABEL;
6062
6078
  };
@@ -6221,14 +6237,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6221
6237
  element_type: 'select',
6222
6238
  value_name: 'columns_font_style',
6223
6239
  element_label: 'Font style',
6224
- element_options: fonts,
6240
+ element_options: SUBOPTIONS_FONTS,
6225
6241
  default_value: 'Poppins'
6226
6242
  },
6227
6243
  {
6228
6244
  element_type: 'select',
6229
6245
  value_name: 'columns_font_size',
6230
6246
  element_label: 'Font size',
6231
- element_options: fontSizeValues,
6247
+ element_options: SUBOPTIONS_FONT_SIZE_VALUES,
6232
6248
  default_value: '10'
6233
6249
  },
6234
6250
  {
@@ -6250,14 +6266,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6250
6266
  element_type: 'select',
6251
6267
  value_name: 'rows_font_style',
6252
6268
  element_label: 'Font style',
6253
- element_options: fonts,
6269
+ element_options: SUBOPTIONS_FONTS,
6254
6270
  default_value: 'Poppins'
6255
6271
  },
6256
6272
  {
6257
6273
  element_type: 'select',
6258
6274
  value_name: 'rows_font_size',
6259
6275
  element_label: 'Font size',
6260
- element_options: fontSizeValues,
6276
+ element_options: SUBOPTIONS_FONT_SIZE_VALUES,
6261
6277
  default_value: '10'
6262
6278
  },
6263
6279
  {
@@ -6279,14 +6295,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6279
6295
  element_type: 'select',
6280
6296
  value_name: 'values_font_style',
6281
6297
  element_label: 'Font style',
6282
- element_options: fonts,
6298
+ element_options: SUBOPTIONS_FONTS,
6283
6299
  default_value: 'Poppins'
6284
6300
  },
6285
6301
  {
6286
6302
  element_type: 'select',
6287
6303
  value_name: 'values_font_size',
6288
6304
  element_label: 'Font size',
6289
- element_options: fontSizeValues,
6305
+ element_options: SUBOPTIONS_FONT_SIZE_VALUES,
6290
6306
  default_value: '10'
6291
6307
  },
6292
6308
  {
@@ -6308,14 +6324,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6308
6324
  element_type: 'select',
6309
6325
  value_name: 'totals_font_style',
6310
6326
  element_label: 'Font style',
6311
- element_options: fonts,
6327
+ element_options: SUBOPTIONS_FONTS,
6312
6328
  default_value: 'Poppins'
6313
6329
  },
6314
6330
  {
6315
6331
  element_type: 'select',
6316
6332
  value_name: 'totals_font_size',
6317
6333
  element_label: 'Font size',
6318
- element_options: fontSizeValues,
6334
+ element_options: SUBOPTIONS_FONT_SIZE_VALUES,
6319
6335
  default_value: '10'
6320
6336
  },
6321
6337
  {
@@ -6584,14 +6600,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6584
6600
  element_type: 'select',
6585
6601
  value_name: 'font_style',
6586
6602
  element_label: 'Font style',
6587
- element_options: fonts,
6603
+ element_options: SUBOPTIONS_FONTS,
6588
6604
  default_value: LABEL_DEFAULT_SETTINGS.FONT_FAMILY,
6589
6605
  },
6590
6606
  {
6591
6607
  element_type: 'select',
6592
6608
  value_name: 'font_size',
6593
6609
  element_label: 'Font size',
6594
- element_options: fontSizeValues,
6610
+ element_options: SUBOPTIONS_FONT_SIZE_VALUES,
6595
6611
  default_value: LABEL_DEFAULT_SETTINGS.FONT_SIZE,
6596
6612
  },
6597
6613
  {
@@ -6662,14 +6678,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6662
6678
  element_type: 'select',
6663
6679
  value_name: 'font_style',
6664
6680
  element_label: 'Font style',
6665
- element_options: fonts,
6681
+ element_options: SUBOPTIONS_FONTS,
6666
6682
  default_value: LABEL_DEFAULT_SETTINGS.FONT_FAMILY,
6667
6683
  },
6668
6684
  {
6669
6685
  element_type: 'select',
6670
6686
  value_name: 'font_size',
6671
6687
  element_label: 'Font size',
6672
- element_options: fontSizeValues,
6688
+ element_options: SUBOPTIONS_FONT_SIZE_VALUES,
6673
6689
  default_value: LABEL_DEFAULT_SETTINGS.FONT_SIZE,
6674
6690
  },
6675
6691
  {
@@ -6739,14 +6755,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6739
6755
  element_type: 'select',
6740
6756
  value_name: 'font_style',
6741
6757
  element_label: 'Font style',
6742
- element_options: fonts,
6758
+ element_options: SUBOPTIONS_FONTS,
6743
6759
  default_value: LABEL_DEFAULT_SETTINGS.FONT_FAMILY,
6744
6760
  },
6745
6761
  {
6746
6762
  element_type: 'select',
6747
6763
  value_name: 'font_size',
6748
6764
  element_label: 'Font size',
6749
- element_options: fontSizeValues,
6765
+ element_options: SUBOPTIONS_FONT_SIZE_VALUES,
6750
6766
  default_value: LABEL_DEFAULT_SETTINGS.FONT_SIZE,
6751
6767
  },
6752
6768
  {
@@ -6908,14 +6924,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6908
6924
  element_type: 'select',
6909
6925
  value_name: 'font_style',
6910
6926
  element_label: 'Font style',
6911
- element_options: fonts,
6927
+ element_options: SUBOPTIONS_FONTS,
6912
6928
  default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_FAMILY,
6913
6929
  },
6914
6930
  {
6915
6931
  element_type: 'select',
6916
6932
  value_name: 'font_size',
6917
6933
  element_label: 'Font size',
6918
- element_options: fontSizeValues,
6934
+ element_options: SUBOPTIONS_FONT_SIZE_VALUES,
6919
6935
  default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_SIZE,
6920
6936
  },
6921
6937
  {
@@ -6998,14 +7014,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6998
7014
  element_type: 'select',
6999
7015
  value_name: 'font_style',
7000
7016
  element_label: 'Font style',
7001
- element_options: fonts,
7017
+ element_options: SUBOPTIONS_FONTS,
7002
7018
  default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_FAMILY,
7003
7019
  },
7004
7020
  {
7005
7021
  element_type: 'select',
7006
7022
  value_name: 'font_size',
7007
7023
  element_label: 'Font size',
7008
- element_options: fontSizeValues,
7024
+ element_options: SUBOPTIONS_FONT_SIZE_VALUES,
7009
7025
  default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_SIZE,
7010
7026
  },
7011
7027
  {
@@ -7979,9 +7995,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
7979
7995
  suboptions: []
7980
7996
  };
7981
7997
 
7982
- highchartsRenderer.MAX_SELECTED_ITEMS_IN_LABEL = 20;
7983
- highchartsRenderer.MAX_SELECTED_ITEMS_CHARECHTERS_IN_LABEL = 50;
7984
-
7985
7998
  highchartsRenderer.getFilterLabel = function (fieldFilter, showTemplateName) {
7986
7999
  var displayname;
7987
8000
  if (fieldFilter.new_name)
@@ -9093,7 +9106,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
9093
9106
  }
9094
9107
 
9095
9108
  highchartsRenderer.getOptionsForLegends = function (additionOptions, rowAttrsLength, isLine, isPie) {
9096
- const topPosition = useNewUx ? {
9109
+ const topPosition = {
9097
9110
  enabled: rowAttrsLength > 0,
9098
9111
  align: 'left',
9099
9112
  verticalAlign: 'top',
@@ -9104,27 +9117,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
9104
9117
  x: -3,
9105
9118
  y: isNewAngular ? -10 : -26,
9106
9119
  layout: "horizontal"
9107
- } : {
9108
- enabled: rowAttrsLength > 0,
9109
- align: 'left',
9110
- verticalAlign: 'top',
9111
- itemMarginTop: 4,
9112
- maxHeight: 37,
9113
- layout: "horizontal",
9114
- padding: 0
9115
9120
  };
9116
- const bottomPosition = useNewUx ? {
9117
- enabled: rowAttrsLength > 0,
9118
- maxHeight: 37,
9119
- itemMarginTop: 2,
9120
- padding: 0
9121
- } : {
9121
+ const bottomPosition = {
9122
9122
  enabled: rowAttrsLength > 0,
9123
9123
  maxHeight: 37,
9124
9124
  itemMarginTop: 2,
9125
9125
  padding: 0
9126
9126
  };
9127
- const rightPosition = useNewUx ? {
9127
+ const rightPosition = {
9128
9128
  enabled: rowAttrsLength > 0,
9129
9129
  layout: 'vertical',
9130
9130
  align: 'right',
@@ -9132,15 +9132,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
9132
9132
  borderWidth: 0,
9133
9133
  itemMarginTop: 10,
9134
9134
  y: additionOptions.hideChartHeader ? -25 : (additionOptions.subtitle && additionOptions.subtitle.subtitle ? 30 : 13)
9135
- } : {
9136
- layout: 'vertical',
9137
- align: 'right',
9138
- verticalAlign: 'middle',
9139
- borderWidth: 0,
9140
- itemMarginTop: 2,
9141
- enabled: rowAttrsLength > 0
9142
9135
  };
9143
- const leftPosition = useNewUx ? {
9136
+ const leftPosition = {
9144
9137
  enabled: rowAttrsLength > 0,
9145
9138
  layout: 'vertical',
9146
9139
  align: 'left',
@@ -9148,13 +9141,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
9148
9141
  borderWidth: 0,
9149
9142
  itemMarginTop: 10,
9150
9143
  y: additionOptions.hideChartHeader ? -25 : (additionOptions.subtitle && additionOptions.subtitle.subtitle ? 30 : 13)
9151
- } : {
9152
- enabled: rowAttrsLength > 0,
9153
- layout: 'vertical',
9154
- align: 'left',
9155
- verticalAlign: 'middle',
9156
- borderWidth: 0,
9157
- itemMarginTop: 2,
9158
9144
  };
9159
9145
  const none = {
9160
9146
  enabled: false,
@@ -9178,12 +9164,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
9178
9164
  return none;
9179
9165
  }
9180
9166
  } else if (isLine) {
9181
- return useNewUx ? leftPosition : rightPosition;
9167
+ return leftPosition;
9182
9168
  } else if (isPie) {
9183
- return useNewUx ? rightPosition : topPosition;
9169
+ return rightPosition;
9184
9170
  }
9185
9171
 
9186
- return useNewUx ? topPosition : bottomPosition;
9172
+ return topPosition;
9187
9173
  }
9188
9174
 
9189
9175
  highchartsRenderer.setYAxisMinMax = function (yAxis, axisYOptions) {