@datarailsshared/dr_renderer 1.2.343 → 1.2.345

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/highcharts_renderer.js +18 -7
  3. package/tests/highcharts_renderer.test.js +81 -30
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@datarailsshared/dr_renderer",
3
- "version": "1.2.343",
3
+ "version": "1.2.345",
4
4
  "description": "DataRails charts and tables renderer",
5
5
  "keywords": [
6
6
  "datarails",
package/src/highcharts_renderer.js CHANGED
@@ -1731,6 +1731,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
1731
1731
  highchartsRenderer.getVariantSeries = function (series, delta_column_options) {
1732
1732
  const varianceColor = delta_column_options.color || highchartsRenderer.variance_color || Highcharts.getOptions().colors[7];
1733
1733
  series.name = delta_column_options.name.replace('_', '');
1734
+ series.initialName = series.name;
1734
1735
  series.color = varianceColor;
1735
1736
 
1736
1737
  if (delta_column_options.point_click_event) {
@@ -4856,8 +4857,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
4856
4857
  sortByValueAttrs: pivotOptions ? pivotOptions.sortByValueAttrs : null,
4857
4858
  cols: lodash.map(pivotOptions.axisArray, 'name'),
4858
4859
  rows: lodash.map(pivotOptions.legendArray, 'name'),
4859
- colFormats: lodash.map(pivotOptions.axisArray, 'format'),
4860
- rowFormats: lodash.map(pivotOptions.legendArray, 'format'),
4860
+ colFormats: highchartsRenderer.getTableFormatInfosForWidgetFields(widget.cols),
4861
+ rowFormats: highchartsRenderer.getTableFormatInfosForWidgetFields(widget.rows),
4861
4862
  rendererOptions: widget.options,
4862
4863
  dateValuesDictionary: pivotOptions ? pivotOptions.dateValuesDictionary : null,
4863
4864
  };
@@ -9357,11 +9358,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
9357
9358
  let values = isFlatKey ? initialKey.toString().split(highchartsRenderer.delimer) : lodash.cloneDeep(initialKey);
9358
9359
  if (values) {
9359
9360
  lodash.forEach(values, (value, key) => {
9360
- const format = pivotData[type][key];
9361
- const valueToFloat = parseFloat(value);
9362
- values[key] = !isNaN(valueToFloat) && format
9363
- ? highchartsRenderer.formatValue('n', format, valueToFloat).value
9364
- : value;
9361
+ const formatInfo = pivotData[type][key];
9362
+ if (formatInfo && formatInfo.type !== 'Date') {
9363
+ const format = formatInfo.format;
9364
+ const valueToFloat = parseFloat(value);
9365
+ values[key] = !isNaN(valueToFloat) && format
9366
+ ? highchartsRenderer.formatValue('n', format, valueToFloat).value
9367
+ : value;
9368
+ }
9365
9369
  });
9366
9370
  return isFlatKey ? values.join(highchartsRenderer.delimer) : values;
9367
9371
  }
@@ -9412,6 +9416,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
9412
9416
  || context.key;
9413
9417
  }
9414
9418
 
9419
+ highchartsRenderer.getTableFormatInfosForWidgetFields = function(fields) {
9420
+ return lodash.map(fields, field => ({
9421
+ type: field.type,
9422
+ format: highchartsRenderer.decodeFunc(field.format),
9423
+ }));
9424
+ }
9425
+
9415
9426
  return highchartsRenderer;
9416
9427
  };
9417
9428
 
package/tests/highcharts_renderer.test.js CHANGED
@@ -4869,8 +4869,8 @@ describe('highcharts_renderer', () => {
4869
4869
  it('should return properly formatted colKey as array', () => {
4870
4870
  const initialKey = ['1000'];
4871
4871
  const pivotData = {
4872
- colFormats: ['$####.##', '₪####.##'],
4873
- rowFormats: ['€####.##', '£####.##'],
4872
+ colFormats: [{ type: 'Float', format: '$####.##' }, { type: 'Float', format: '₪####.##' }],
4873
+ rowFormats: [{ type: 'Float', format: '€####.##' }, { type: 'Float', format: '£####.##' }],
4874
4874
  isFormattingAxisLabels: true,
4875
4875
  };
4876
4876
  const type = 'colFormats';
@@ -4881,8 +4881,8 @@ describe('highcharts_renderer', () => {
4881
4881
  it('should return properly formatted rowKey as array', () => {
4882
4882
  const initialKey = ['1000'];
4883
4883
  const pivotData = {
4884
- colFormats: ['€####.##', '£####.##'],
4885
- rowFormats: ['$####.##', '₪####.##'],
4884
+ colFormats: [{ type: 'Float', format: '€####.##' }, { type: 'Float', format: '£####.##' }],
4885
+ rowFormats: [{ type: 'Float', format: '$####.##' }, { type: 'Float', format: '₪####.##' }],
4886
4886
  isFormattingAxisLabels: true,
4887
4887
  };
4888
4888
  const type = 'rowFormats';
@@ -4893,8 +4893,8 @@ describe('highcharts_renderer', () => {
4893
4893
  it('should return properly formatted colKey as string', () => {
4894
4894
  const initialKey = '1000';
4895
4895
  const pivotData = {
4896
- colFormats: ['$####.##', '₪####.##'],
4897
- rowFormats: ['€####.##', '£####.##'],
4896
+ colFormats: [{ type: 'Float', format: '$####.##' }, { type: 'Float', format: '₪####.##' }],
4897
+ rowFormats: [{ type: 'Float', format: '€####.##' }, { type: 'Float', format: '£####.##' }],
4898
4898
  isFormattingAxisLabels: true,
4899
4899
  };
4900
4900
  const type = 'colFormats';
@@ -4905,8 +4905,8 @@ describe('highcharts_renderer', () => {
4905
4905
  it('should return properly formatted rowKey as string', () => {
4906
4906
  const initialKey = '1000';
4907
4907
  const pivotData = {
4908
- colFormats: ['€####.##', '£####.##'],
4909
- rowFormats: ['$####.##', '₪####.##'],
4908
+ colFormats: [{ type: 'Float', format: '€####.##' }, { type: 'Float', format: '£####.##' }],
4909
+ rowFormats: [{ type: 'Float', format: '$####.##' }, { type: 'Float', format: '₪####.##' }],
4910
4910
  isFormattingAxisLabels: true,
4911
4911
  };
4912
4912
  const type = 'rowFormats';
@@ -4917,7 +4917,7 @@ describe('highcharts_renderer', () => {
4917
4917
  it('should return formatted multivalue colKey as string', () => {
4918
4918
  const initialKey = '1000 , 2000';
4919
4919
  const pivotData = {
4920
- colFormats: ['$####.##', '₪####.##'],
4920
+ colFormats: [{ type: 'Float', format: '$####.##' }, { type: 'Float', format: '₪####.##' }],
4921
4921
  isFormattingAxisLabels: true,
4922
4922
  };
4923
4923
  const type = 'colFormats';
@@ -4928,7 +4928,7 @@ describe('highcharts_renderer', () => {
4928
4928
  it('should return formatted multivalue colKey as array', () => {
4929
4929
  const initialKey = ['1000', '2000'];
4930
4930
  const pivotData = {
4931
- colFormats: ['$####.##', '₪####.##'],
4931
+ colFormats: [{ type: 'Float', format: '$####.##' }, { type: 'Float', format: '₪####.##' }],
4932
4932
  isFormattingAxisLabels: true,
4933
4933
  };
4934
4934
  const type = 'colFormats';
@@ -4939,7 +4939,7 @@ describe('highcharts_renderer', () => {
4939
4939
  it('should return not formatted second value (test as array)', () => {
4940
4940
  const initialKey = ['1000', '2000'];
4941
4941
  const pivotData = {
4942
- colFormats: ['$####.##', null],
4942
+ colFormats: [{ type: 'Float', format: '$####.##' }, null],
4943
4943
  isFormattingAxisLabels: true,
4944
4944
  };
4945
4945
  const type = 'colFormats';
@@ -4950,13 +4950,37 @@ describe('highcharts_renderer', () => {
4950
4950
  it('should return not formatted first value (test as array)', () => {
4951
4951
  const initialKey = ['1000', '2000'];
4952
4952
  const pivotData = {
4953
- colFormats: [null, '$####.##'],
4953
+ colFormats: [null, { type: 'Float', format: '$####.##' }],
4954
4954
  isFormattingAxisLabels: true,
4955
4955
  };
4956
4956
  const type = 'colFormats';
4957
4957
  const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
4958
4958
  expect(formattedKey).toEqual(['1000', '$2000.0']);
4959
4959
  });
4960
+
4961
+ describe('formatting Dates', () => {
4962
+ it('should return NOT formatted multivalue colKey as array', () => {
4963
+ const initialKeyAlreadyFormatted = ['10/10/2020', '10/10/2021'];
4964
+ const pivotData = {
4965
+ colFormats: [{ type: 'Date', format: 'MM/DD/YYYY' }, { type: 'Date', format: 'MMM-yy' }],
4966
+ isFormattingAxisLabels: true,
4967
+ };
4968
+ const type = 'colFormats';
4969
+ const formattedKey = highchartsRenderer.getFormattedKey(initialKeyAlreadyFormatted, pivotData, type);
4970
+ expect(formattedKey).toEqual(initialKeyAlreadyFormatted);
4971
+ });
4972
+
4973
+ it('should return NOT formatted multivalue rowKey as array', () => {
4974
+ const initialKeyAlreadyFormatted = ['10/10/2020', '10/10/2021'];
4975
+ const pivotData = {
4976
+ rowFormats: [{ type: 'Date', format: 'MM/DD/YYYY' }, { type: 'Date', format: 'MMM-yy' }],
4977
+ isFormattingAxisLabels: true,
4978
+ };
4979
+ const type = 'rowFormats';
4980
+ const formattedKey = highchartsRenderer.getFormattedKey(initialKeyAlreadyFormatted, pivotData, type);
4981
+ expect(formattedKey).toEqual(initialKeyAlreadyFormatted);
4982
+ });
4983
+ });
4960
4984
  });
4961
4985
 
4962
4986
  describe('getFormattedKey with FF off', () => {
@@ -4967,8 +4991,8 @@ describe('highcharts_renderer', () => {
4967
4991
  it('should return NOT formatted colKey as array', () => {
4968
4992
  const initialKey = ['1000'];
4969
4993
  const pivotData = {
4970
- colFormats: ['$####.##', '₪####.##'],
4971
- rowFormats: ['€####.##', '£####.##'],
4994
+ colFormats: [{ type: 'Float', format: '$####.##' }, { type: 'Float', format: '₪####.##' }],
4995
+ rowFormats: [{ type: 'Float', format: '€####.##' }, { type: 'Float', format: '£####.##' }],
4972
4996
  isFormattingAxisLabels: true,
4973
4997
  };
4974
4998
  const type = 'colFormats';
@@ -4979,8 +5003,8 @@ describe('highcharts_renderer', () => {
4979
5003
  it('should return NOT formatted rowKey as array', () => {
4980
5004
  const initialKey = ['1000'];
4981
5005
  const pivotData = {
4982
- colFormats: ['€####.##', '£####.##'],
4983
- rowFormats: ['$####.##', '₪####.##'],
5006
+ colFormats: [{ type: 'Float', format: '€####.##' }, { type: 'Float', format: '£####.##' }],
5007
+ rowFormats: [{ type: 'Float', format: '$####.##' }, { type: 'Float', format: '₪####.##' }],
4984
5008
  isFormattingAxisLabels: true,
4985
5009
  };
4986
5010
  const type = 'rowFormats';
@@ -4991,8 +5015,8 @@ describe('highcharts_renderer', () => {
4991
5015
  it('should return NOT formatted colKey as string', () => {
4992
5016
  const initialKey = '1000';
4993
5017
  const pivotData = {
4994
- colFormats: ['$####.##', '₪####.##'],
4995
- rowFormats: ['€####.##', '£####.##'],
5018
+ colFormats: [{ type: 'Float', format: '$####.##' }, { type: 'Float', format: '₪####.##' }],
5019
+ rowFormats: [{ type: 'Float', format: '€####.##' }, { type: 'Float', format: '£####.##' }],
4996
5020
  isFormattingAxisLabels: true,
4997
5021
  };
4998
5022
  const type = 'colFormats';
@@ -5003,8 +5027,8 @@ describe('highcharts_renderer', () => {
5003
5027
  it('should return NOT formatted rowKey as string', () => {
5004
5028
  const initialKey = '1000';
5005
5029
  const pivotData = {
5006
- colFormats: ['€####.##', '£####.##'],
5007
- rowFormats: ['$####.##', '₪####.##'],
5030
+ colFormats: [{ type: 'Float', format: '€####.##' }, { type: 'Float', format: '£####.##' }],
5031
+ rowFormats: [{ type: 'Float', format: '$####.##' }, { type: 'Float', format: '₪####.##' }],
5008
5032
  isFormattingAxisLabels: true,
5009
5033
  };
5010
5034
  const type = 'rowFormats';
@@ -5015,7 +5039,7 @@ describe('highcharts_renderer', () => {
5015
5039
  it('should return NOT formatted multivalue colKey as string', () => {
5016
5040
  const initialKey = '1000 , 2000';
5017
5041
  const pivotData = {
5018
- colFormats: ['$####.##', '₪####.##'],
5042
+ colFormats: [{ type: 'Float', format: '$####.##' }, { type: 'Float', format: '₪####.##' }],
5019
5043
  isFormattingAxisLabels: true,
5020
5044
  };
5021
5045
  const type = 'colFormats';
@@ -5026,13 +5050,40 @@ describe('highcharts_renderer', () => {
5026
5050
  it('should return NOT formatted multivalue colKey as array', () => {
5027
5051
  const initialKey = ['1000', '2000'];
5028
5052
  const pivotData = {
5029
- colFormats: ['$####.##', '₪####.##'],
5053
+ colFormats: [{ type: 'Float', format: '$####.##' }, { type: 'Float', format: '₪####.##' }],
5030
5054
  isFormattingAxisLabels: true,
5031
5055
  };
5032
5056
  const type = 'colFormats';
5033
5057
  const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
5034
5058
  expect(formattedKey).toEqual(['1000', '2000']);
5035
5059
  });
5060
+
5061
+ describe('formatting Dates', () => {
5062
+
5063
+ it('should return NOT formatted multivalue colKey as array (even when format_dates_as_other_axis_types is ON)', () => {
5064
+ lodash.set(document, 'ReportHippo.user.features', ['format_dates_as_other_axis_types']);
5065
+ const initialKeyAlreadyFormatted = ['10/10/2020', '10/10/2021'];
5066
+ const pivotData = {
5067
+ colFormats: [{ type: 'Date', format: 'MM/DD/YYYY' }, { type: 'Date', format: 'MMM-yy' }],
5068
+ isFormattingAxisLabels: true,
5069
+ };
5070
+ const type = 'colFormats';
5071
+ const formattedKey = highchartsRenderer.getFormattedKey(initialKeyAlreadyFormatted, pivotData, type);
5072
+ expect(formattedKey).toEqual(initialKeyAlreadyFormatted);
5073
+ });
5074
+
5075
+ it('should return NOT formatted multivalue rowKey as array (even when format_dates_as_other_axis_types is ON)', () => {
5076
+ lodash.set(document, 'ReportHippo.user.features', ['format_dates_as_other_axis_types']);
5077
+ const initialKeyAlreadyFormatted = ['10/10/2020', '10/10/2021'];
5078
+ const pivotData = {
5079
+ rowFormats: [{ type: 'Date', format: 'MM/DD/YYYY' }, { type: 'Date', format: 'MMM-yy' }],
5080
+ isFormattingAxisLabels: true,
5081
+ };
5082
+ const type = 'rowFormats';
5083
+ const formattedKey = highchartsRenderer.getFormattedKey(initialKeyAlreadyFormatted, pivotData, type);
5084
+ expect(formattedKey).toEqual(initialKeyAlreadyFormatted);
5085
+ });
5086
+ });
5036
5087
  });
5037
5088
  });
5038
5089
 
@@ -5072,14 +5123,14 @@ describe('highcharts_renderer', () => {
5072
5123
  });
5073
5124
 
5074
5125
  it('should call getFormattedKey 6 times', () => {
5075
- pivotData.colFormats = ['$####.##', '₪####.##'];
5126
+ pivotData.colFormats = [{ type: 'Float', format: '$####.##' }, { type: 'Float', format: '₪####.##' }];
5076
5127
  const isCols = true;
5077
5128
  highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
5078
5129
  expect(highchartsRenderer.getFormattedKey).toHaveBeenCalledTimes(6);
5079
5130
  });
5080
5131
 
5081
5132
  it('should return properly formatted colKeys as arrays [Dataset 1]', () => {
5082
- pivotData.colFormats = ['$####.##', '₪####.##'];
5133
+ pivotData.colFormats = [{ type: 'Float', format: '$####.##' }, { type: 'Float', format: '₪####.##' }];
5083
5134
  const isCols = true;
5084
5135
  const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
5085
5136
  expect(formattedKeys).toEqual(
@@ -5088,7 +5139,7 @@ describe('highcharts_renderer', () => {
5088
5139
  });
5089
5140
 
5090
5141
  it('should return properly formatted colKeys as arrays [Dataset 2]', () => {
5091
- pivotData.colFormats = [null, '₪####.##'];
5142
+ pivotData.colFormats = [null, { type: 'Float', format: '₪####.##'}];
5092
5143
  const isCols = true;
5093
5144
  const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
5094
5145
  expect(formattedKeys).toEqual(
@@ -5097,7 +5148,7 @@ describe('highcharts_renderer', () => {
5097
5148
  });
5098
5149
 
5099
5150
  it('should return properly formatted colKeys as arrays [Dataset 3]', () => {
5100
- pivotData.colFormats = ['$####.##', null];
5151
+ pivotData.colFormats = [{ type: 'Float', format: '$####.##' }, null];
5101
5152
  const isCols = true;
5102
5153
  const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
5103
5154
  expect(formattedKeys).toEqual(
@@ -5106,7 +5157,7 @@ describe('highcharts_renderer', () => {
5106
5157
  });
5107
5158
 
5108
5159
  it('should return properly formatted rowKeys as arrays [Dataset 1]', () => {
5109
- pivotData.rowFormats = ['$####.##', '₪####.##'];
5160
+ pivotData.rowFormats = [{ type: 'Float', format: '$####.##' }, { type: 'Float', format: '₪####.##' }];
5110
5161
  const isCols = false;
5111
5162
  const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
5112
5163
  expect(formattedKeys).toEqual(
@@ -5115,7 +5166,7 @@ describe('highcharts_renderer', () => {
5115
5166
  });
5116
5167
 
5117
5168
  it('should return properly formatted rowKeys as arrays [Dataset 2]', () => {
5118
- pivotData.rowFormats = [null, '₪####.##'];
5169
+ pivotData.rowFormats = [null, { type: 'Float', format: '₪####.##' }];
5119
5170
  const isCols = false;
5120
5171
  const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
5121
5172
  expect(formattedKeys).toEqual(
@@ -5124,7 +5175,7 @@ describe('highcharts_renderer', () => {
5124
5175
  });
5125
5176
 
5126
5177
  it('should return properly formatted rowKeys as arrays [Dataset 3]', () => {
5127
- pivotData.rowFormats = ['$####.##', null];
5178
+ pivotData.rowFormats = [{ type: 'Float', format: '$####.##' }, null];
5128
5179
  const isCols = false;
5129
5180
  const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
5130
5181
  expect(formattedKeys).toEqual(
@@ -5135,7 +5186,7 @@ describe('highcharts_renderer', () => {
5135
5186
 
5136
5187
  describe('getFormattedKey with FF off', () => {
5137
5188
 
5138
- pivotData.colFormats = ['$####.##', '₪####.##'];
5189
+ pivotData.colFormats = [{ type: 'Float', format: '$####.##' }, { type: 'Float', format: '₪####.##' }];
5139
5190
  const isCols = true;
5140
5191
 
5141
5192
  beforeEach(() => {