@datarailsshared/dr_renderer 1.5.209 → 1.5.214
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.
- package/package.json +1 -1
- package/src/charts/formatters/index.d.ts +7 -0
- package/src/charts/formatters/index.js +22 -0
- package/src/charts/formatters/stack-labels.formatter.d.ts +40 -0
- package/src/charts/formatters/stack-labels.formatter.js +67 -0
- package/src/{value.formatter.js → charts/formatters/value.formatter.js} +4 -4
- package/src/highcharts_renderer.js +4 -43
- package/tsconfig.json +1 -0
- /package/src/{value.formatter.d.ts → charts/formatters/value.formatter.d.ts} +0 -0
package/package.json
CHANGED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import valueFormatter = require("./value.formatter");
|
|
2
|
+
import stackLabelsFormatter = require("./stack-labels.formatter");
|
|
3
|
+
export let getAggregatorPercentageValueIfRequired: typeof valueFormatter.getAggregatorPercentageValueIfRequired;
|
|
4
|
+
export let getRelatedValue: typeof valueFormatter.getRelatedValue;
|
|
5
|
+
export let isAbsoluteValue: typeof valueFormatter.isAbsoluteValue;
|
|
6
|
+
export let createStackLabelsFormatter: typeof stackLabelsFormatter.createStackLabelsFormatter;
|
|
7
|
+
export let createBarStackLabelsFormatter: typeof stackLabelsFormatter.createBarStackLabelsFormatter;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @fileoverview Chart Formatters
|
|
3
|
+
*
|
|
4
|
+
* This module provides formatter functions used by Highcharts renderers
|
|
5
|
+
* for data labels, stack labels, and value formatting.
|
|
6
|
+
*
|
|
7
|
+
* @module @datarailsshared/dr_renderer/charts/formatters
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
const valueFormatter = require('./value.formatter');
|
|
11
|
+
const stackLabelsFormatter = require('./stack-labels.formatter');
|
|
12
|
+
|
|
13
|
+
module.exports = {
|
|
14
|
+
// Value formatter
|
|
15
|
+
getAggregatorPercentageValueIfRequired: valueFormatter.getAggregatorPercentageValueIfRequired,
|
|
16
|
+
getRelatedValue: valueFormatter.getRelatedValue,
|
|
17
|
+
isAbsoluteValue: valueFormatter.isAbsoluteValue,
|
|
18
|
+
|
|
19
|
+
// Stack labels formatters
|
|
20
|
+
createStackLabelsFormatter: stackLabelsFormatter.createStackLabelsFormatter,
|
|
21
|
+
createBarStackLabelsFormatter: stackLabelsFormatter.createBarStackLabelsFormatter,
|
|
22
|
+
};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Creates a Highcharts stackLabels formatter for stacked column charts.
|
|
3
|
+
* Reads totals from the pivot model via `pivotData.getAggregator` instead of
|
|
4
|
+
* relying on Highcharts' `this.total`, which can exclude segments too small to render.
|
|
5
|
+
* Supports `present_total`, `hide_subtotals`, and `show_percentage` label options.
|
|
6
|
+
*
|
|
7
|
+
* @param {{ getAggregator: (rowKey: Array, colKey: Array) => { sum: number, format: (value: number, flag: boolean) => string, value: () => number } | null, colKeys: Array<Array> }} pivotData - The pivot data model.
|
|
8
|
+
* @param {{ label?: { present_total?: boolean, hide_subtotals?: boolean, show_percentage?: boolean } } | null} additionOptions - Chart label options.
|
|
9
|
+
* @returns {function(): string} A Highcharts stackLabels formatter function (bound to Highcharts stack context with `this.x` and `this.isNegative`).
|
|
10
|
+
*/
|
|
11
|
+
export function createStackLabelsFormatter(pivotData: {
|
|
12
|
+
getAggregator: (rowKey: any[], colKey: any[]) => {
|
|
13
|
+
sum: number;
|
|
14
|
+
format: (value: number, flag: boolean) => string;
|
|
15
|
+
value: () => number;
|
|
16
|
+
} | null;
|
|
17
|
+
colKeys: Array<any[]>;
|
|
18
|
+
}, additionOptions: {
|
|
19
|
+
label?: {
|
|
20
|
+
present_total?: boolean;
|
|
21
|
+
hide_subtotals?: boolean;
|
|
22
|
+
show_percentage?: boolean;
|
|
23
|
+
};
|
|
24
|
+
} | null): () => string;
|
|
25
|
+
/**
|
|
26
|
+
* Creates a Highcharts stackLabels formatter for stacked bar charts.
|
|
27
|
+
* Uses `pivotData.getAggregator` for accurate totals instead of Highcharts' `this.total`.
|
|
28
|
+
* Always displays the formatted total — does not support `present_total`, `hide_subtotals`,
|
|
29
|
+
* or `show_percentage` options as these are not available for bar stacked charts.
|
|
30
|
+
*
|
|
31
|
+
* @param {{ getAggregator: (rowKey: Array, colKey: Array) => { sum: number, format: (value: number, flag: boolean) => string } | null, colKeys: Array<Array> }} pivotData - The pivot data model.
|
|
32
|
+
* @returns {function(): string} A Highcharts stackLabels formatter function (bound to Highcharts stack context with `this.x` and `this.isNegative`).
|
|
33
|
+
*/
|
|
34
|
+
export function createBarStackLabelsFormatter(pivotData: {
|
|
35
|
+
getAggregator: (rowKey: any[], colKey: any[]) => {
|
|
36
|
+
sum: number;
|
|
37
|
+
format: (value: number, flag: boolean) => string;
|
|
38
|
+
} | null;
|
|
39
|
+
colKeys: Array<any[]>;
|
|
40
|
+
}): () => string;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Creates a Highcharts stackLabels formatter for stacked column charts.
|
|
3
|
+
* Reads totals from the pivot model via `pivotData.getAggregator` instead of
|
|
4
|
+
* relying on Highcharts' `this.total`, which can exclude segments too small to render.
|
|
5
|
+
* Supports `present_total`, `hide_subtotals`, and `show_percentage` label options.
|
|
6
|
+
*
|
|
7
|
+
* @param {{ getAggregator: (rowKey: Array, colKey: Array) => { sum: number, format: (value: number, flag: boolean) => string, value: () => number } | null, colKeys: Array<Array> }} pivotData - The pivot data model.
|
|
8
|
+
* @param {{ label?: { present_total?: boolean, hide_subtotals?: boolean, show_percentage?: boolean } } | null} additionOptions - Chart label options.
|
|
9
|
+
* @returns {function(): string} A Highcharts stackLabels formatter function (bound to Highcharts stack context with `this.x` and `this.isNegative`).
|
|
10
|
+
*/
|
|
11
|
+
function createStackLabelsFormatter(pivotData, additionOptions) {
|
|
12
|
+
return function () {
|
|
13
|
+
const showTotal = additionOptions && additionOptions.label && additionOptions.label.present_total;
|
|
14
|
+
const hideSubtotals = additionOptions && additionOptions.label && additionOptions.label.hide_subtotals;
|
|
15
|
+
const showTotalsPercentage = additionOptions && additionOptions.label && additionOptions.label.show_percentage;
|
|
16
|
+
|
|
17
|
+
if (!hideSubtotals || showTotal) {
|
|
18
|
+
const agg = pivotData.getAggregator([], pivotData.colKeys[this.x]);
|
|
19
|
+
|
|
20
|
+
if (agg && agg.sum) {
|
|
21
|
+
const isNeedToDisplayLabel = agg.sum > 0 && !this.isNegative || agg.sum < 0 && this.isNegative;
|
|
22
|
+
|
|
23
|
+
if (isNeedToDisplayLabel) {
|
|
24
|
+
const subtotalValue = agg.sum;
|
|
25
|
+
let percentages = '';
|
|
26
|
+
|
|
27
|
+
if (showTotalsPercentage) {
|
|
28
|
+
const aggTotal = pivotData.getAggregator([], []);
|
|
29
|
+
const aggTotalValue = aggTotal.value();
|
|
30
|
+
percentages = aggTotalValue ? ' (' + Math.round(subtotalValue / aggTotalValue * 100) + '%)' : '';
|
|
31
|
+
}
|
|
32
|
+
return (showTotal ? agg.format(subtotalValue, true) : '') + percentages;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
return '';
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Creates a Highcharts stackLabels formatter for stacked bar charts.
|
|
42
|
+
* Uses `pivotData.getAggregator` for accurate totals instead of Highcharts' `this.total`.
|
|
43
|
+
* Always displays the formatted total — does not support `present_total`, `hide_subtotals`,
|
|
44
|
+
* or `show_percentage` options as these are not available for bar stacked charts.
|
|
45
|
+
*
|
|
46
|
+
* @param {{ getAggregator: (rowKey: Array, colKey: Array) => { sum: number, format: (value: number, flag: boolean) => string } | null, colKeys: Array<Array> }} pivotData - The pivot data model.
|
|
47
|
+
* @returns {function(): string} A Highcharts stackLabels formatter function (bound to Highcharts stack context with `this.x` and `this.isNegative`).
|
|
48
|
+
*/
|
|
49
|
+
function createBarStackLabelsFormatter(pivotData) {
|
|
50
|
+
return function () {
|
|
51
|
+
const agg = pivotData.getAggregator([], pivotData.colKeys[this.x]);
|
|
52
|
+
|
|
53
|
+
if (agg && agg.sum) {
|
|
54
|
+
const isNeedToDisplayLabel = agg.sum > 0 && !this.isNegative || agg.sum < 0 && this.isNegative;
|
|
55
|
+
|
|
56
|
+
if (isNeedToDisplayLabel) {
|
|
57
|
+
return agg.format(agg.sum, true);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
return '';
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
module.exports = {
|
|
65
|
+
createStackLabelsFormatter,
|
|
66
|
+
createBarStackLabelsFormatter
|
|
67
|
+
};
|
|
@@ -8,12 +8,12 @@ function getAggregatorPercentageValueIfRequired(value, render_options, data, row
|
|
|
8
8
|
const baseRowKey = data && data.rowKeys && data.rowKeys.length ? data.rowKeys[0] : null;
|
|
9
9
|
const currentColKey = colKey ? colKey : [];
|
|
10
10
|
const agg = data && baseRowKey ? data.getAggregator(baseRowKey, currentColKey) : null;
|
|
11
|
-
|
|
11
|
+
|
|
12
12
|
if (isPercentage && isVariance && baseRowKey && agg) {
|
|
13
13
|
if (deltaColumn && isAbsoluteValue(deltaColumn.formula)) {
|
|
14
14
|
value = getRelatedValue(value, agg.value());
|
|
15
15
|
}
|
|
16
|
-
|
|
16
|
+
|
|
17
17
|
return Math.round(value * 100) + '%';
|
|
18
18
|
}
|
|
19
19
|
|
|
@@ -30,7 +30,7 @@ function getRelatedValue(value, baseValue) {
|
|
|
30
30
|
function isAbsoluteValue(formula) {
|
|
31
31
|
if (!formula)
|
|
32
32
|
return false;
|
|
33
|
-
|
|
33
|
+
|
|
34
34
|
return !lodash.includes(formula.replace(/\s+/g, ''), '/');
|
|
35
35
|
};
|
|
36
36
|
|
|
@@ -38,4 +38,4 @@ module.exports = {
|
|
|
38
38
|
getAggregatorPercentageValueIfRequired,
|
|
39
39
|
getRelatedValue,
|
|
40
40
|
isAbsoluteValue
|
|
41
|
-
};
|
|
41
|
+
};
|
|
@@ -4,7 +4,8 @@ const { DrGaugeChart, GAUGE_OPTIONS_DEFAULT } = require('./charts/dr_gauge_chart
|
|
|
4
4
|
const { DrDonutChart } = require('./charts/dr_donut_chart');
|
|
5
5
|
const seriesPointStylesHelper = require('./seriesPointStyles-helper');
|
|
6
6
|
const smartQueriesHelper = require('./smart_queries_helper');
|
|
7
|
-
const valueFormatter = require('./value.formatter');
|
|
7
|
+
const valueFormatter = require('./charts/formatters/value.formatter');
|
|
8
|
+
const { createStackLabelsFormatter, createBarStackLabelsFormatter } = require('./charts/formatters/stack-labels.formatter');
|
|
8
9
|
const { DrGaugeCategoriesSummaryChart } = require("./charts/dr_gauge_categories_summary_chart");
|
|
9
10
|
const {
|
|
10
11
|
TooMuchDataError,
|
|
@@ -3117,32 +3118,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
|
|
|
3117
3118
|
},
|
|
3118
3119
|
stackLabels: {
|
|
3119
3120
|
enabled: additionOptions && additionOptions.label ? additionOptions.label.show : true,
|
|
3120
|
-
formatter:
|
|
3121
|
-
const showTotal = additionOptions && additionOptions.label && additionOptions.label.present_total;
|
|
3122
|
-
const hideSubtotals = additionOptions && additionOptions.label && additionOptions.label.hide_subtotals;
|
|
3123
|
-
const showTotalsPercentage = additionOptions && additionOptions.label && additionOptions.label.show_percentage;
|
|
3124
|
-
|
|
3125
|
-
if (!hideSubtotals || showTotal) {
|
|
3126
|
-
const agg = pivotData.getAggregator([], pivotData.colKeys[this.x]);
|
|
3127
|
-
|
|
3128
|
-
if (agg && agg.sum) {
|
|
3129
|
-
const isNeedToDisplayLabel = agg.sum > 0 && !this.isNegative || agg.sum < 0 && this.isNegative;
|
|
3130
|
-
|
|
3131
|
-
if (isNeedToDisplayLabel) {
|
|
3132
|
-
const subtotalValue = agg.sum;
|
|
3133
|
-
let percentages = '';
|
|
3134
|
-
|
|
3135
|
-
if (showTotalsPercentage) {
|
|
3136
|
-
const aggTotal = pivotData.getAggregator([], []);
|
|
3137
|
-
const aggTotalValue = aggTotal.value();
|
|
3138
|
-
percentages = aggTotalValue ? ' (' + Math.round(subtotalValue/aggTotalValue * 100) + '%)' : '';
|
|
3139
|
-
}
|
|
3140
|
-
return (showTotal ? agg.format(subtotalValue, true) : '') + percentages;
|
|
3141
|
-
}
|
|
3142
|
-
}
|
|
3143
|
-
}
|
|
3144
|
-
return '';
|
|
3145
|
-
},
|
|
3121
|
+
formatter: createStackLabelsFormatter(pivotData, additionOptions),
|
|
3146
3122
|
style: highchartsRenderer.getDataLabelsStyle(additionOptions),
|
|
3147
3123
|
},
|
|
3148
3124
|
labels: {
|
|
@@ -3435,21 +3411,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
|
|
|
3435
3411
|
highchartsRenderer.getDataLabelsStyle(additionOptions)
|
|
3436
3412
|
);
|
|
3437
3413
|
|
|
3438
|
-
const stackLabelsFormatter = function() {
|
|
3439
|
-
return function() {
|
|
3440
|
-
if (this.total) {
|
|
3441
|
-
var total = parseFloat(this.total);
|
|
3442
|
-
var agg = pivotData.getAggregator([], []);
|
|
3443
|
-
if (agg) {
|
|
3444
|
-
return agg.format(total, true);
|
|
3445
|
-
} else {
|
|
3446
|
-
return total.toLocaleString();
|
|
3447
|
-
}
|
|
3448
|
-
}
|
|
3449
|
-
return '';
|
|
3450
|
-
}
|
|
3451
|
-
}
|
|
3452
|
-
|
|
3453
3414
|
const dataLabelsFormatter = function() {
|
|
3454
3415
|
return function() {
|
|
3455
3416
|
const deltaColumnName = lodash.get(opts, 'chartOptions.delta_column.name', '');
|
|
@@ -3475,7 +3436,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
|
|
|
3475
3436
|
},
|
|
3476
3437
|
stackLabels: {
|
|
3477
3438
|
enabled: additionOptions && additionOptions.label && !isVarianceOnly ? additionOptions.label.show : false,
|
|
3478
|
-
formatter:
|
|
3439
|
+
formatter: createBarStackLabelsFormatter(pivotData),
|
|
3479
3440
|
style: labelStyle
|
|
3480
3441
|
},
|
|
3481
3442
|
labels: {
|
package/tsconfig.json
CHANGED
|
File without changes
|