@datarailsshared/dr_renderer 1.3.22 → 1.3.23
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/dr_donut_chart.js +152 -0
- package/src/highcharts_renderer.js +124 -23
package/package.json
CHANGED
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
function DrDonutChart(highchartsRenderer, pivotData, opts, drilldownFunc, disableAnimation) {
|
|
2
|
+
const additionOptions = opts.chartOptions
|
|
3
|
+
? opts.chartOptions
|
|
4
|
+
: highchartsRenderer.getDefaultValueForChart(highchartsRenderer.CHART_TYPES.DONUT_CHART);
|
|
5
|
+
let totalLabel;
|
|
6
|
+
|
|
7
|
+
this.render = function () {
|
|
8
|
+
return highchartsRenderer.ptCreateElementAndDraw(this.getConfig(), opts);
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
this.getConfig = function () {
|
|
12
|
+
const config = {
|
|
13
|
+
chart: this.getChartConfig(),
|
|
14
|
+
plotOptions: this.getPlotOptionsConfig(),
|
|
15
|
+
colors: this.getColorSettings(),
|
|
16
|
+
tooltip: this.getTooltipConfig(),
|
|
17
|
+
legend: highchartsRenderer.getOptionsForLegends(additionOptions, 1, false, true),
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
config.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, config, additionOptions, opts);
|
|
21
|
+
highchartsRenderer.setTitleAndSubTitle(config, opts, additionOptions);
|
|
22
|
+
this.setDrilldownConfig(config);
|
|
23
|
+
|
|
24
|
+
return config;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
this.getChartConfig = function () {
|
|
28
|
+
const chartConfiguration = {
|
|
29
|
+
type: 'pie',
|
|
30
|
+
events: {
|
|
31
|
+
drilldown: function (e) {
|
|
32
|
+
if (drilldownFunc) drilldownFunc(e, this, 'drilldown');
|
|
33
|
+
},
|
|
34
|
+
drillup: function (e) {
|
|
35
|
+
if (drilldownFunc) drilldownFunc(e, this, 'drillup');
|
|
36
|
+
},
|
|
37
|
+
render: this.drawTotalLabel,
|
|
38
|
+
},
|
|
39
|
+
animation: !disableAnimation,
|
|
40
|
+
};
|
|
41
|
+
this.setChartPositioning(chartConfiguration);
|
|
42
|
+
|
|
43
|
+
return chartConfiguration;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
this.getPlotOptionsConfig = function () {
|
|
47
|
+
const plotOptions = {
|
|
48
|
+
series: {
|
|
49
|
+
animation: !disableAnimation,
|
|
50
|
+
dataLabels: {
|
|
51
|
+
allowOverlap: additionOptions && additionOptions.label_pie ? additionOptions.label_pie.overlap : false,
|
|
52
|
+
enabled: additionOptions && additionOptions.label_pie ? additionOptions.label_pie.show : false,
|
|
53
|
+
formatter: highchartsRenderer.pieDataLabelFormatter(pivotData, opts, true),
|
|
54
|
+
style: highchartsRenderer.getDataLabelsStyle(additionOptions),
|
|
55
|
+
},
|
|
56
|
+
showInLegend: true,
|
|
57
|
+
innerSize: '75%',
|
|
58
|
+
states: {
|
|
59
|
+
hover: {
|
|
60
|
+
halo: {
|
|
61
|
+
size: 0,
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
};
|
|
67
|
+
plotOptions.series = highchartsRenderer.getDataLabelsOptions(additionOptions, plotOptions.series);
|
|
68
|
+
|
|
69
|
+
return plotOptions;
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
this.getColorSettings = function () {
|
|
73
|
+
return additionOptions && additionOptions.chart
|
|
74
|
+
? highchartsRenderer.getColorsWithOffset(additionOptions.chart.colors_offset)
|
|
75
|
+
: undefined;
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
this.getTooltipConfig = function () {
|
|
79
|
+
return {
|
|
80
|
+
headerFormat: '',
|
|
81
|
+
pointFormatter: highchartsRenderer.pieDrillDownFormatterToTooltip(pivotData, opts),
|
|
82
|
+
};
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
this.drawTotalLabel = function () {
|
|
86
|
+
const chart = this;
|
|
87
|
+
const series = chart.series[0];
|
|
88
|
+
|
|
89
|
+
const aggTotal = pivotData.getAggregator([], []);
|
|
90
|
+
const formattedValue = aggTotal.format(series.total, true);
|
|
91
|
+
|
|
92
|
+
if (totalLabel) {
|
|
93
|
+
totalLabel.destroy();
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
totalLabel = chart.renderer
|
|
97
|
+
.text(
|
|
98
|
+
`<tspan
|
|
99
|
+
style="font-size: ${series.center[2] / 12}px; font-weight: 600; fill: #333333;">
|
|
100
|
+
${formattedValue}
|
|
101
|
+
</tspan>
|
|
102
|
+
<tspan
|
|
103
|
+
dy="${series.center[2] / 8}"
|
|
104
|
+
x="0"
|
|
105
|
+
style="font-size: ${series.center[2] / 16}px; fill: #6D6E6F;">
|
|
106
|
+
${(additionOptions.total_value_label && additionOptions.total_value_label.total_value_label_text) || 'Total'}
|
|
107
|
+
</tspan>`,
|
|
108
|
+
)
|
|
109
|
+
.css({
|
|
110
|
+
textAnchor: 'middle',
|
|
111
|
+
dominantBaseline: 'text-before-edge',
|
|
112
|
+
})
|
|
113
|
+
.attr('y', '0')
|
|
114
|
+
.add();
|
|
115
|
+
|
|
116
|
+
const rect = totalLabel.element.getBoundingClientRect();
|
|
117
|
+
const x = series.center[0] + chart.plotLeft;
|
|
118
|
+
const y = chart.plotTop + series.center[1] - rect.height / 2;
|
|
119
|
+
|
|
120
|
+
totalLabel.attr({ x, y });
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
this.setDrilldownConfig = function (chartConfig) {
|
|
124
|
+
if (drilldownFunc) {
|
|
125
|
+
chartConfig.drilldown = {};
|
|
126
|
+
} else if (!pivotData.isDrillDownDisabled) {
|
|
127
|
+
chartConfig.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData, chartConfig, additionOptions, opts);
|
|
128
|
+
} else {
|
|
129
|
+
chartConfig.drilldown = highchartsRenderer.getDataLabelsStylesForDrillDown(additionOptions);
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
this.setChartPositioning = function (chart) {
|
|
134
|
+
const chartPositioning = additionOptions.chart_position;
|
|
135
|
+
if (!!chartPositioning) {
|
|
136
|
+
Object.assign(chart, {
|
|
137
|
+
margin: [
|
|
138
|
+
chartPositioning.margin_top,
|
|
139
|
+
chartPositioning.margin_right,
|
|
140
|
+
chartPositioning.margin_bottom,
|
|
141
|
+
chartPositioning.margin_left,
|
|
142
|
+
],
|
|
143
|
+
spacingTop: chartPositioning.spacing_top,
|
|
144
|
+
spacingBottom: chartPositioning.spacing_bottom,
|
|
145
|
+
spacingLeft: chartPositioning.spacing_left,
|
|
146
|
+
spacingRight: chartPositioning.spacing_right,
|
|
147
|
+
});
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
module.exports = { DrDonutChart };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
const helpers = require('./dr-renderer-helpers');
|
|
2
2
|
const { DrGaugeChart, GAUGE_OPTIONS_DEFAULT } = require('./charts/dr_gauge_chart');
|
|
3
|
+
const { DrDonutChart } = require('./charts/dr_donut_chart');
|
|
3
4
|
const seriesPointStylesHelper= require('./seriesPointStyles-helper');
|
|
4
5
|
|
|
5
6
|
const mobileBrowserRegex = new RegExp([
|
|
@@ -65,6 +66,7 @@ const CHART_TYPES = {
|
|
|
65
66
|
PUBLISHED_ITEM: 'published_item',
|
|
66
67
|
RICH_TEXT: 'rich_text',
|
|
67
68
|
EXCEL_VIEWER: 'excel_viewer',
|
|
69
|
+
DONUT_CHART: 'donut-chart',
|
|
68
70
|
}
|
|
69
71
|
|
|
70
72
|
const HIGHCHARTS_CONSTANTS = {
|
|
@@ -1296,7 +1298,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
|
|
|
1296
1298
|
);
|
|
1297
1299
|
});
|
|
1298
1300
|
|
|
1299
|
-
if (
|
|
1301
|
+
if (additionOptions.series_colors) {
|
|
1302
|
+
ob.color = additionOptions.series_colors[row_n_value] || undefined;
|
|
1303
|
+
} else if (colors && colors[i]) {
|
|
1300
1304
|
ob.color = colors[i];
|
|
1301
1305
|
}
|
|
1302
1306
|
|
|
@@ -1489,7 +1493,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
|
|
|
1489
1493
|
ob.data.push(tmoobj);
|
|
1490
1494
|
});
|
|
1491
1495
|
|
|
1492
|
-
if (
|
|
1496
|
+
if (additionOptions.series_colors) {
|
|
1497
|
+
ob.color = additionOptions.series_colors[row_n_value] || undefined;
|
|
1498
|
+
} else if (colors && colors[i]) {
|
|
1493
1499
|
ob.color = colors[i];
|
|
1494
1500
|
}
|
|
1495
1501
|
|
|
@@ -1917,6 +1923,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
|
|
|
1917
1923
|
// check string contains hebrew
|
|
1918
1924
|
ob.initialName = (/[\u0590-\u05FF]/).test(key) ? ('\u200E' + key) : key;
|
|
1919
1925
|
|
|
1926
|
+
if (additionOptions.series_colors) {
|
|
1927
|
+
ob.color = additionOptions.series_colors[key] || undefined;
|
|
1928
|
+
}
|
|
1929
|
+
|
|
1920
1930
|
if (ob.initialName === highchartsRenderer.DR_OTHERS_KEY) {
|
|
1921
1931
|
ob.initialName = othersName;
|
|
1922
1932
|
}
|
|
@@ -2412,6 +2422,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
|
|
|
2412
2422
|
|
|
2413
2423
|
};
|
|
2414
2424
|
|
|
2425
|
+
highchartsRenderer.ptRenderDonut = function (pivotData, opts, drilldownFunc) {
|
|
2426
|
+
return new DrDonutChart(highchartsRenderer, pivotData, opts, drilldownFunc, disableAnimation).render();
|
|
2427
|
+
};
|
|
2428
|
+
|
|
2415
2429
|
highchartsRenderer.setTitleAndSubTitle = function (chartOptions, opts, additionOptions) {
|
|
2416
2430
|
chartOptions.title = opts.chartOptions.hideChartHeader ? { text: null } : {
|
|
2417
2431
|
align: 'center',
|
|
@@ -6558,6 +6572,72 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
|
|
|
6558
6572
|
default_value: false
|
|
6559
6573
|
}]
|
|
6560
6574
|
},
|
|
6575
|
+
'total_value_label_donut': {
|
|
6576
|
+
category_class: 'google-visualization-charteditor-mini-more',
|
|
6577
|
+
category_label: 'Total Value Label',
|
|
6578
|
+
category_type: 'total_value_label',
|
|
6579
|
+
elements: [{
|
|
6580
|
+
element_type: 'input',
|
|
6581
|
+
value_name: 'total_value_label_text',
|
|
6582
|
+
element_label: 'Total value label text for donut chart',
|
|
6583
|
+
default_value: 'Total'
|
|
6584
|
+
}]
|
|
6585
|
+
},
|
|
6586
|
+
'chart_position': {
|
|
6587
|
+
category_class: 'google-visualization-charteditor-mini-more',
|
|
6588
|
+
category_label: 'Chart position',
|
|
6589
|
+
category_type: 'chart_position',
|
|
6590
|
+
elements: [
|
|
6591
|
+
{
|
|
6592
|
+
element_type: 'input',
|
|
6593
|
+
value_name: 'margin_top',
|
|
6594
|
+
element_label: 'Marging top',
|
|
6595
|
+
default_value: 0,
|
|
6596
|
+
},
|
|
6597
|
+
{
|
|
6598
|
+
element_type: 'input',
|
|
6599
|
+
value_name: 'margin_right',
|
|
6600
|
+
element_label: 'Marging right',
|
|
6601
|
+
default_value: 0,
|
|
6602
|
+
},
|
|
6603
|
+
{
|
|
6604
|
+
element_type: 'input',
|
|
6605
|
+
value_name: 'margin_bottom',
|
|
6606
|
+
element_label: 'Marging bottom',
|
|
6607
|
+
default_value: 0,
|
|
6608
|
+
},
|
|
6609
|
+
{
|
|
6610
|
+
element_type: 'input',
|
|
6611
|
+
value_name: 'margin_left',
|
|
6612
|
+
element_label: 'Marging left',
|
|
6613
|
+
default_value: 0,
|
|
6614
|
+
},
|
|
6615
|
+
{
|
|
6616
|
+
element_type: 'input',
|
|
6617
|
+
value_name: 'spacing_top',
|
|
6618
|
+
element_label: 'Spacing top',
|
|
6619
|
+
default_value: 0,
|
|
6620
|
+
},
|
|
6621
|
+
{
|
|
6622
|
+
element_type: 'input',
|
|
6623
|
+
value_name: 'spacing_right',
|
|
6624
|
+
element_label: 'Spacing right',
|
|
6625
|
+
default_value: 0,
|
|
6626
|
+
},
|
|
6627
|
+
{
|
|
6628
|
+
element_type: 'input',
|
|
6629
|
+
value_name: 'spacing_bottom',
|
|
6630
|
+
element_label: 'Spacing bottom',
|
|
6631
|
+
default_value: 0,
|
|
6632
|
+
},
|
|
6633
|
+
{
|
|
6634
|
+
element_type: 'input',
|
|
6635
|
+
value_name: 'spacing_left',
|
|
6636
|
+
element_label: 'Spacing left',
|
|
6637
|
+
default_value: 0,
|
|
6638
|
+
},
|
|
6639
|
+
]
|
|
6640
|
+
},
|
|
6561
6641
|
'label': {
|
|
6562
6642
|
category_class: 'google-visualization-charteditor-mini-more',
|
|
6563
6643
|
category_label: 'Label',
|
|
@@ -7887,25 +7967,26 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
|
|
|
7887
7967
|
type: 'pie',
|
|
7888
7968
|
name: 'Pie',
|
|
7889
7969
|
class: 'google-visualization-charteditor-mini-pie',
|
|
7890
|
-
subtypes: [
|
|
7891
|
-
|
|
7892
|
-
|
|
7893
|
-
|
|
7894
|
-
|
|
7895
|
-
|
|
7896
|
-
|
|
7897
|
-
|
|
7898
|
-
|
|
7899
|
-
|
|
7900
|
-
|
|
7901
|
-
|
|
7902
|
-
|
|
7903
|
-
|
|
7904
|
-
|
|
7905
|
-
|
|
7906
|
-
|
|
7907
|
-
|
|
7908
|
-
|
|
7970
|
+
subtypes: [
|
|
7971
|
+
{
|
|
7972
|
+
type: 'pie-chart',
|
|
7973
|
+
hidden: true,
|
|
7974
|
+
name: highchartsRenderer.chartsTypesInfo['pie-chart'].name,
|
|
7975
|
+
class: 'google-visualization-charteditor-thumbs-piechart',
|
|
7976
|
+
render: highchartsRenderer.ptRenderBasicPie,
|
|
7977
|
+
suboptions: [
|
|
7978
|
+
highchartsRenderer.suboptions["tooltips_pie"],
|
|
7979
|
+
highchartsRenderer.suboptions["label_pie"],
|
|
7980
|
+
highchartsRenderer.suboptions["subtitle"],
|
|
7981
|
+
highchartsRenderer.suboptions["widget_library"],
|
|
7982
|
+
highchartsRenderer.suboptions["table_options_transpose"],
|
|
7983
|
+
highchartsRenderer.suboptions["table_design_options"],
|
|
7984
|
+
highchartsRenderer.suboptions["chart"],
|
|
7985
|
+
highchartsRenderer.suboptions["negative_number_format"],
|
|
7986
|
+
highchartsRenderer.suboptions["advanced"],
|
|
7987
|
+
highchartsRenderer.suboptions["legends"],
|
|
7988
|
+
]
|
|
7989
|
+
},
|
|
7909
7990
|
{
|
|
7910
7991
|
type: 'pie-chart-drilldown',
|
|
7911
7992
|
name: highchartsRenderer.chartsTypesInfo['pie-chart-drilldown'].name,
|
|
@@ -7923,8 +8004,28 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
|
|
|
7923
8004
|
highchartsRenderer.suboptions["advanced"],
|
|
7924
8005
|
highchartsRenderer.suboptions["legends"],
|
|
7925
8006
|
]
|
|
7926
|
-
}
|
|
7927
|
-
|
|
8007
|
+
},
|
|
8008
|
+
{
|
|
8009
|
+
type: highchartsRenderer.CHART_TYPES.DONUT_CHART,
|
|
8010
|
+
name: "Donut chart",
|
|
8011
|
+
class: "google-visualization-charteditor-thumbs-donutchart",
|
|
8012
|
+
render: highchartsRenderer.ptRenderDonut,
|
|
8013
|
+
suboptions: [
|
|
8014
|
+
highchartsRenderer.suboptions["tooltips_pie"],
|
|
8015
|
+
highchartsRenderer.suboptions["label_pie"],
|
|
8016
|
+
highchartsRenderer.suboptions["subtitle"],
|
|
8017
|
+
highchartsRenderer.suboptions["widget_library"],
|
|
8018
|
+
highchartsRenderer.suboptions["table_options_transpose"],
|
|
8019
|
+
highchartsRenderer.suboptions["table_design_options"],
|
|
8020
|
+
highchartsRenderer.suboptions["chart"],
|
|
8021
|
+
highchartsRenderer.suboptions["negative_number_format"],
|
|
8022
|
+
highchartsRenderer.suboptions["advanced"],
|
|
8023
|
+
highchartsRenderer.suboptions["legends"],
|
|
8024
|
+
highchartsRenderer.suboptions["chart_position"],
|
|
8025
|
+
highchartsRenderer.suboptions["total_value_label_donut"],
|
|
8026
|
+
],
|
|
8027
|
+
hidden: true,
|
|
8028
|
+
},
|
|
7928
8029
|
/*,
|
|
7929
8030
|
{type:'pie-chart-3d', name:'3d pie chart', class:'google-visualization-charteditor-thumbs-piechart-3d', render:highchartsRenderer.ptRenderStackedBar},
|
|
7930
8031
|
{type:'donut-chart', name:'Donut chart', class:'google-visualization-charteditor-thumbs-donutchart', render:highchartsRenderer.ptRenderStackedBar}*/
|