www/jqwidgets/jqxgrid.chart.js

changeset 619
4938909df593
child 733
67bf19c50fcc
equal deleted inserted replaced
618:2712082437b0 619:4938909df593
1 /* tslint:disable */
2 /* eslint-disable */
3 (function ($) {
4 $.extend($.jqx._jqxGrid.prototype, {
5 _getChartDataFields: function(data) {
6 var that = this;
7 var record = data[0];
8 var stringOnly = true,
9 xAxisDataField,
10 series = [];
11
12 for (var dataField in record) {
13 if (dataField === '$' || dataField === 'uid' || dataField === 'boundindex' || dataField === 'uniqueid' || dataField === 'visibleindex') {
14 continue;
15 }
16
17 var dataType = that.source._source.dataFields.find(gridField => gridField.name === dataField).type;
18
19 if (dataType === 'string') {
20 var index = that.columns.records.findIndex(col => col.datafield === dataField);
21
22 if (index === 0) {
23 xAxisDataField = dataField;
24 }
25 }
26 else {
27 stringOnly = false;
28 series.push({ dataField: dataField, displayText: dataField });
29 }
30 }
31
32 return { xAxisDataField: xAxisDataField, series: series, stringOnly: stringOnly };
33 },
34
35 createChart: function(type, dataSource) {
36 var that = this;
37 var gridSelection = that.getselection(),
38 selectedRows = gridSelection.rows,
39 selectedCells = gridSelection.cells,
40 chartElement = document.createElement('div'),
41 chartData = [],
42 seriesGroup = {};
43 var rowsToPlot = [],
44 columnsToPlot = [],
45 series;
46
47 if (selectedCells && selectedCells.length > 1) {
48 selectedCells.forEach(cell => {
49 if (rowsToPlot.indexOf(cell.rowindex) === -1) {
50 rowsToPlot.push(cell.rowindex);
51 }
52
53 if (columnsToPlot.indexOf(cell.datafield) === -1) {
54 columnsToPlot.push(cell.datafield);
55 }
56 });
57 }
58
59 if (selectedRows.length === 0 && selectedCells.length === 0) {
60 var dataSource = that.source.records;
61 }
62
63 if (dataSource) {
64 chartData = chartData.concat(dataSource);
65 }
66 else {
67 var dataSource = that.source.records;
68
69 for (var i = 0; i < dataSource.length; i++) {
70 var record = {};
71
72 if (selectedRows.length > 0) {
73 if (selectedRows.indexOf(i) === -1) {
74 continue;
75 }
76 }
77 else if (selectedCells.length > 0) {
78 if (selectedCells.length > 1) {
79 if (rowsToPlot.indexOf(i) === -1) {
80 continue;
81 }
82
83 columnsToPlot.forEach(dataField => {
84 record[dataField] = dataSource[i][dataField];
85 });
86 chartData.push(record);
87 continue;
88 }
89 }
90
91 that.columns.records.forEach(col => record[col.datafield] = dataSource[i][col.datafield]);
92 chartData.push(record);
93 }
94 }
95
96 var chartDataFields = that._getChartDataFields(chartData);
97
98 if (chartDataFields.stringOnly) {
99 if (that.showheader) {
100 var chartIcon = that.element.querySelector('#' + type);
101
102 that.toolbar[0].firstElementChild.classList.add('warning');
103
104 if (chartIcon) {
105 chartIcon.classList.add('warning');
106 }
107
108 setTimeout(function () {
109 that.toolbar[0].firstElementChild.classList.remove('warning');
110
111 if (chartIcon) {
112 chartIcon.classList.remove('warning');
113 }
114 }, 1000);
115 }
116
117 return;
118 }
119
120 series = chartDataFields.series;
121
122 var chart = {};
123
124 chart.title = '';
125 chart.description = '';
126 chart.showLegend = true;
127 chart.showBorderLine = false;
128 chart.padding = { left: 5, top: 10, right: 5, bottom: 5 };
129 chart.source = chartData;
130 chart.xAxis =
131 {
132 dataField: chartDataFields.xAxisDataField,
133 gridLines: {
134 visible: true
135 }
136 };
137 chart.valueAxis =
138 {
139 displayValueAxis: true,
140 description: that.charting.description,
141 axisSize: 'auto',
142 formatSettings: that.charting.formatSettings
143 };
144 chart.colorScheme = that.charting.colorScheme;
145 chart.seriesGroups = [seriesGroup];
146
147 seriesGroup.formatSettings = that.charting.formatSettings;
148 seriesGroup.series = series;
149
150 if (type === 'line') {
151 series.forEach(function (serie) {
152 serie.symbolSize = 8;
153 serie.symbolType = 'square';
154 });
155 }
156 else if (type === 'pie') {
157 var pieDataField = series[0].dataField;
158
159 delete seriesGroup.formatSettings;
160 seriesGroup.formatFunction = function (value, index) {
161 if (isNaN(value)) {
162 if (typeof value === 'object') {
163 return index;
164 }
165
166 return value;
167 }
168
169 return value;
170 };
171 seriesGroup.showLabels = true;
172 series.length = 0;
173 series.push({
174 dataField: pieDataField,
175 displayText: chartDataFields.xAxisDataField,
176 initialAngle: 0
177 });
178 }
179 else if (type === 'bar') {
180 type = 'column';
181 seriesGroup.orientation = 'horizontal';
182 chart.xAxis.textRotationAngle = 90;
183 chart.valueAxis.textRotationAngle = 30;
184 chart.valueAxis.flip = true;
185 }
186 else if (type === 'area') {
187 var opacity = 1;
188
189 for (var i = 0; i < series.length; i++) {
190 series[i].opacity = opacity;
191 opacity -= 0.2;
192 opacity = Math.max(0.3, opacity);
193 }
194 }
195
196 seriesGroup.type = type;
197
198 if (that.charting.ready) {
199 that.charting.ready(chart);
200 }
201
202 if (that.charting.appendTo) {
203 var container = that.charting.appendTo === 'string' ? document.querySelector(that.charting.appendTo) : that.charting.appendTo;
204
205 if (container) {
206 var chartInstance = new jqxChart(chartElement, chart);
207 container.appendChild(chartElement);
208 }
209 }
210 else {
211 that._openChartDialog(chartElement, type, chart);
212 }
213 },
214
215 _openChartDialog: function(chart, chartType, settings) {
216 var that = this;
217
218 if (!that.charting.dialog.enabled) {
219 return false;
220 }
221
222 var dialogElement = document.createElement('div');
223
224 dialogElement.innerHTML = '<div>' + that.charting.dialog.header + '</div><div style="overflow:hidden;"></div>';
225
226 var chartLabel = chartType.substring(0, 1).toUpperCase() + chartType.substring(1);
227
228 chart.style.width = '100%';
229 chart.style.height = '100%';
230
231 var dialog = new jqxWindow(dialogElement, {
232 width: that.charting.dialog.width,
233 height: that.charting.dialog.height,
234 position: that.charting.dialog.position,
235 isModal: true
236 });
237
238 dialog.open();
239
240 setTimeout(function () {
241 dialogElement.querySelector('.jqx-widget-content').appendChild(chart);
242 var chartInstance = new jqxChart(chart, settings);
243 }, 100);
244
245 dialog.on('close', function() {
246 dialog.destroy();
247 });
248 },
249
250 });
251 })(jqxBaseFramework);

mercurial