@datarailsshared/dr_renderer 1.2.271 → 1.2.273

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 +283 -328
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.273",
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'
@@ -2693,11 +2747,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
2693
2747
  chartOptions.plotOptions = {
2694
2748
  [type === 'area-chart' ? 'area' : 'areaspline']: {
2695
2749
  stacking: 'normal',
2696
- lineColor: '#666666',
2750
+ lineColor: CHART_COLORS.TICK_COLOR,
2697
2751
  lineWidth: 1,
2698
2752
  marker: {
2699
2753
  lineWidth: 1,
2700
- lineColor: '#666666'
2754
+ lineColor: CHART_COLORS.TICK_COLOR
2701
2755
  }
2702
2756
  },
2703
2757
  series: {
@@ -3251,7 +3305,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
3251
3305
  },
3252
3306
  style: {
3253
3307
  fontWeight: 'normal',
3254
- color: (highchartsRenderer.highcharts_theme && highchartsRenderer.highcharts_theme.textColor) || 'gray'
3308
+ color: (highchartsRenderer.highcharts_theme && highchartsRenderer.highcharts_theme.CHART_COLORS.TEXT) || 'gray'
3255
3309
  }
3256
3310
  },
3257
3311
  labels: {
@@ -4604,17 +4658,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
4604
4658
  }
4605
4659
  };
4606
4660
 
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
4661
  highchartsRenderer.rhPivotView = function (rowData, options, isTable = false, widget = null) {
4619
4662
  if (!rowData || !rowData) {
4620
4663
  if (options.onlyOptions) {
@@ -5979,63 +6022,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
5979
6022
  return key
5980
6023
  };
5981
6024
 
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
6025
  highchartsRenderer.getDefaultValueForSubOptions = function (type, existing_options) {
6040
6026
  var valToReturn = {};
6041
6027
  var option = highchartsRenderer.suboptions[type] || lodash.find(highchartsRenderer.suboptions, suboption => suboption.category_type === type);
@@ -6056,7 +6042,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6056
6042
  return valToReturn;
6057
6043
  };
6058
6044
 
6059
-
6060
6045
  highchartsRenderer.getChartAxisLabel = function(type) {
6061
6046
  return highchartsRenderer.chartsTypesInfo[type] ? highchartsRenderer.chartsTypesInfo[type].axisName : CHART_AXIS_DEFAULT_LABEL;
6062
6047
  };
@@ -6221,14 +6206,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6221
6206
  element_type: 'select',
6222
6207
  value_name: 'columns_font_style',
6223
6208
  element_label: 'Font style',
6224
- element_options: fonts,
6209
+ element_options: SUBOPTIONS_FONTS,
6225
6210
  default_value: 'Poppins'
6226
6211
  },
6227
6212
  {
6228
6213
  element_type: 'select',
6229
6214
  value_name: 'columns_font_size',
6230
6215
  element_label: 'Font size',
6231
- element_options: fontSizeValues,
6216
+ element_options: SUBOPTIONS_FONT_SIZE_VALUES,
6232
6217
  default_value: '10'
6233
6218
  },
6234
6219
  {
@@ -6250,14 +6235,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6250
6235
  element_type: 'select',
6251
6236
  value_name: 'rows_font_style',
6252
6237
  element_label: 'Font style',
6253
- element_options: fonts,
6238
+ element_options: SUBOPTIONS_FONTS,
6254
6239
  default_value: 'Poppins'
6255
6240
  },
6256
6241
  {
6257
6242
  element_type: 'select',
6258
6243
  value_name: 'rows_font_size',
6259
6244
  element_label: 'Font size',
6260
- element_options: fontSizeValues,
6245
+ element_options: SUBOPTIONS_FONT_SIZE_VALUES,
6261
6246
  default_value: '10'
6262
6247
  },
6263
6248
  {
@@ -6279,14 +6264,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6279
6264
  element_type: 'select',
6280
6265
  value_name: 'values_font_style',
6281
6266
  element_label: 'Font style',
6282
- element_options: fonts,
6267
+ element_options: SUBOPTIONS_FONTS,
6283
6268
  default_value: 'Poppins'
6284
6269
  },
6285
6270
  {
6286
6271
  element_type: 'select',
6287
6272
  value_name: 'values_font_size',
6288
6273
  element_label: 'Font size',
6289
- element_options: fontSizeValues,
6274
+ element_options: SUBOPTIONS_FONT_SIZE_VALUES,
6290
6275
  default_value: '10'
6291
6276
  },
6292
6277
  {
@@ -6308,14 +6293,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6308
6293
  element_type: 'select',
6309
6294
  value_name: 'totals_font_style',
6310
6295
  element_label: 'Font style',
6311
- element_options: fonts,
6296
+ element_options: SUBOPTIONS_FONTS,
6312
6297
  default_value: 'Poppins'
6313
6298
  },
6314
6299
  {
6315
6300
  element_type: 'select',
6316
6301
  value_name: 'totals_font_size',
6317
6302
  element_label: 'Font size',
6318
- element_options: fontSizeValues,
6303
+ element_options: SUBOPTIONS_FONT_SIZE_VALUES,
6319
6304
  default_value: '10'
6320
6305
  },
6321
6306
  {
@@ -6584,14 +6569,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6584
6569
  element_type: 'select',
6585
6570
  value_name: 'font_style',
6586
6571
  element_label: 'Font style',
6587
- element_options: fonts,
6572
+ element_options: SUBOPTIONS_FONTS,
6588
6573
  default_value: LABEL_DEFAULT_SETTINGS.FONT_FAMILY,
6589
6574
  },
6590
6575
  {
6591
6576
  element_type: 'select',
6592
6577
  value_name: 'font_size',
6593
6578
  element_label: 'Font size',
6594
- element_options: fontSizeValues,
6579
+ element_options: SUBOPTIONS_FONT_SIZE_VALUES,
6595
6580
  default_value: LABEL_DEFAULT_SETTINGS.FONT_SIZE,
6596
6581
  },
6597
6582
  {
@@ -6662,14 +6647,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6662
6647
  element_type: 'select',
6663
6648
  value_name: 'font_style',
6664
6649
  element_label: 'Font style',
6665
- element_options: fonts,
6650
+ element_options: SUBOPTIONS_FONTS,
6666
6651
  default_value: LABEL_DEFAULT_SETTINGS.FONT_FAMILY,
6667
6652
  },
6668
6653
  {
6669
6654
  element_type: 'select',
6670
6655
  value_name: 'font_size',
6671
6656
  element_label: 'Font size',
6672
- element_options: fontSizeValues,
6657
+ element_options: SUBOPTIONS_FONT_SIZE_VALUES,
6673
6658
  default_value: LABEL_DEFAULT_SETTINGS.FONT_SIZE,
6674
6659
  },
6675
6660
  {
@@ -6739,14 +6724,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6739
6724
  element_type: 'select',
6740
6725
  value_name: 'font_style',
6741
6726
  element_label: 'Font style',
6742
- element_options: fonts,
6727
+ element_options: SUBOPTIONS_FONTS,
6743
6728
  default_value: LABEL_DEFAULT_SETTINGS.FONT_FAMILY,
6744
6729
  },
6745
6730
  {
6746
6731
  element_type: 'select',
6747
6732
  value_name: 'font_size',
6748
6733
  element_label: 'Font size',
6749
- element_options: fontSizeValues,
6734
+ element_options: SUBOPTIONS_FONT_SIZE_VALUES,
6750
6735
  default_value: LABEL_DEFAULT_SETTINGS.FONT_SIZE,
6751
6736
  },
6752
6737
  {
@@ -6908,14 +6893,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6908
6893
  element_type: 'select',
6909
6894
  value_name: 'font_style',
6910
6895
  element_label: 'Font style',
6911
- element_options: fonts,
6896
+ element_options: SUBOPTIONS_FONTS,
6912
6897
  default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_FAMILY,
6913
6898
  },
6914
6899
  {
6915
6900
  element_type: 'select',
6916
6901
  value_name: 'font_size',
6917
6902
  element_label: 'Font size',
6918
- element_options: fontSizeValues,
6903
+ element_options: SUBOPTIONS_FONT_SIZE_VALUES,
6919
6904
  default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_SIZE,
6920
6905
  },
6921
6906
  {
@@ -6998,14 +6983,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
6998
6983
  element_type: 'select',
6999
6984
  value_name: 'font_style',
7000
6985
  element_label: 'Font style',
7001
- element_options: fonts,
6986
+ element_options: SUBOPTIONS_FONTS,
7002
6987
  default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_FAMILY,
7003
6988
  },
7004
6989
  {
7005
6990
  element_type: 'select',
7006
6991
  value_name: 'font_size',
7007
6992
  element_label: 'Font size',
7008
- element_options: fontSizeValues,
6993
+ element_options: SUBOPTIONS_FONT_SIZE_VALUES,
7009
6994
  default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_SIZE,
7010
6995
  },
7011
6996
  {
@@ -7979,9 +7964,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
7979
7964
  suboptions: []
7980
7965
  };
7981
7966
 
7982
- highchartsRenderer.MAX_SELECTED_ITEMS_IN_LABEL = 20;
7983
- highchartsRenderer.MAX_SELECTED_ITEMS_CHARECHTERS_IN_LABEL = 50;
7984
-
7985
7967
  highchartsRenderer.getFilterLabel = function (fieldFilter, showTemplateName) {
7986
7968
  var displayname;
7987
7969
  if (fieldFilter.new_name)
@@ -9093,7 +9075,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
9093
9075
  }
9094
9076
 
9095
9077
  highchartsRenderer.getOptionsForLegends = function (additionOptions, rowAttrsLength, isLine, isPie) {
9096
- const topPosition = useNewUx ? {
9078
+ const topPosition = {
9097
9079
  enabled: rowAttrsLength > 0,
9098
9080
  align: 'left',
9099
9081
  verticalAlign: 'top',
@@ -9104,27 +9086,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
9104
9086
  x: -3,
9105
9087
  y: isNewAngular ? -10 : -26,
9106
9088
  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
9089
  };
9116
- const bottomPosition = useNewUx ? {
9117
- enabled: rowAttrsLength > 0,
9118
- maxHeight: 37,
9119
- itemMarginTop: 2,
9120
- padding: 0
9121
- } : {
9090
+ const bottomPosition = {
9122
9091
  enabled: rowAttrsLength > 0,
9123
9092
  maxHeight: 37,
9124
9093
  itemMarginTop: 2,
9125
9094
  padding: 0
9126
9095
  };
9127
- const rightPosition = useNewUx ? {
9096
+ const rightPosition = {
9128
9097
  enabled: rowAttrsLength > 0,
9129
9098
  layout: 'vertical',
9130
9099
  align: 'right',
@@ -9132,15 +9101,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
9132
9101
  borderWidth: 0,
9133
9102
  itemMarginTop: 10,
9134
9103
  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
9104
  };
9143
- const leftPosition = useNewUx ? {
9105
+ const leftPosition = {
9144
9106
  enabled: rowAttrsLength > 0,
9145
9107
  layout: 'vertical',
9146
9108
  align: 'left',
@@ -9148,13 +9110,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
9148
9110
  borderWidth: 0,
9149
9111
  itemMarginTop: 10,
9150
9112
  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
9113
  };
9159
9114
  const none = {
9160
9115
  enabled: false,
@@ -9178,12 +9133,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
9178
9133
  return none;
9179
9134
  }
9180
9135
  } else if (isLine) {
9181
- return useNewUx ? leftPosition : rightPosition;
9136
+ return leftPosition;
9182
9137
  } else if (isPie) {
9183
- return useNewUx ? rightPosition : topPosition;
9138
+ return rightPosition;
9184
9139
  }
9185
9140
 
9186
- return useNewUx ? topPosition : bottomPosition;
9141
+ return topPosition;
9187
9142
  }
9188
9143
 
9189
9144
  highchartsRenderer.setYAxisMinMax = function (yAxis, axisYOptions) {