[IMP] large optimizations to the graph view rendering (pivot table)
The pivot table rendering was slow with large tables : it appended to the table each line, so the browser had to rerender each time the page. This was solved by rendering the table to a document fragment, then only add the fragment to the main document. This speeds up considerably the process (from 2600ms to 420ms in one test) Also, uses basic loops instead of underscore maps in the build_rows method bzr revid: ged@openerp.com-20140430074733-quhfkzz33rlpahps
This commit is contained in:
parent
2d41c2c7d5
commit
36e3aac85e
|
@ -453,45 +453,55 @@ openerp.web_graph.Graph = openerp.web.Widget.extend({
|
||||||
build_rows: function (raw) {
|
build_rows: function (raw) {
|
||||||
var self = this,
|
var self = this,
|
||||||
pivot = this.pivot,
|
pivot = this.pivot,
|
||||||
m, i, cell;
|
m, i, j, k, cell, row;
|
||||||
|
|
||||||
return _.map(pivot.rows.headers, function (row) {
|
var rows = [];
|
||||||
var cells = [];
|
var cells, pivot_cells, values;
|
||||||
var pivot_cells = [];
|
|
||||||
for (i = 0; i < pivot.cells.length; i++) {
|
var nbr_of_rows = pivot.rows.headers.length;
|
||||||
if (pivot.cells[i].x == row.id || pivot.cells[i].y == row.id) {
|
var col_headers = pivot.get_cols_leaves();
|
||||||
pivot_cells.push(pivot.cells[i]);
|
|
||||||
}
|
for (i = 0; i < nbr_of_rows; i++) {
|
||||||
|
row = pivot.rows.headers[i];
|
||||||
|
cells = [];
|
||||||
|
pivot_cells = [];
|
||||||
|
for (j = 0; j < pivot.cells.length; j++) {
|
||||||
|
if (pivot.cells[j].x == row.id || pivot.cells[j].y == row.id) {
|
||||||
|
pivot_cells.push(pivot.cells[j]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
_.each(pivot.get_cols_leaves(), function (col) {
|
|
||||||
var values;
|
for (j = 0; j < col_headers.length; j++) {
|
||||||
for (i = 0; i < pivot_cells.length; i++) {
|
values = undefined;
|
||||||
if (pivot_cells[i].x == col.id || pivot_cells[i].y == col.id) {
|
for (k = 0; k < pivot_cells.length; k++) {
|
||||||
values = pivot_cells[i].values;
|
if (pivot_cells[k].x == col_headers[j].id || pivot_cells[k].y == col_headers[j].id) {
|
||||||
|
values = pivot_cells[k].values;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (!values) { values = new Array(pivot.measures.length);}
|
if (!values) { values = new Array(pivot.measures.length);}
|
||||||
for (m = 0; m < pivot.measures.length; m++) {
|
for (m = 0; m < pivot.measures.length; m++) {
|
||||||
cells.push(self.make_cell(row,col,values[m], m, raw));
|
cells.push(self.make_cell(row,col_headers[j],values[m], m, raw));
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
if (pivot.get_cols_leaves().length > 1) {
|
if (col_headers.length > 1) {
|
||||||
var totals = pivot.get_total(row);
|
var totals = pivot.get_total(row);
|
||||||
for (m = 0; m < pivot.measures.length; m++) {
|
for (m = 0; m < pivot.measures.length; m++) {
|
||||||
cell = self.make_cell(row, pivot.main_col(), totals[m], m, raw);
|
cell = self.make_cell(row, pivot.cols.headers[0], totals[m], m, raw);
|
||||||
cell.is_bold = 'true';
|
cell.is_bold = 'true';
|
||||||
cells.push(cell);
|
cells.push(cell);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return {
|
rows.push({
|
||||||
id: row.id,
|
id: row.id,
|
||||||
indent: row.path.length,
|
indent: row.path.length,
|
||||||
title: row.title,
|
title: row.title,
|
||||||
expanded: row.expanded,
|
expanded: row.expanded,
|
||||||
cells: cells,
|
cells: cells,
|
||||||
};
|
});
|
||||||
});
|
}
|
||||||
|
|
||||||
|
return rows;
|
||||||
},
|
},
|
||||||
|
|
||||||
// ----------------------------------------------------------------------
|
// ----------------------------------------------------------------------
|
||||||
|
@ -524,9 +534,11 @@ openerp.web_graph.Graph = openerp.web.Widget.extend({
|
||||||
// ----------------------------------------------------------------------
|
// ----------------------------------------------------------------------
|
||||||
draw_table: function () {
|
draw_table: function () {
|
||||||
var table = this.build_table();
|
var table = this.build_table();
|
||||||
this.draw_headers(table.headers);
|
var doc_fragment = $(document.createDocumentFragment());
|
||||||
this.draw_measure_row(table.measure_row);
|
this.draw_headers(table.headers, doc_fragment);
|
||||||
this.draw_rows(table.rows);
|
this.draw_measure_row(table.measure_row, doc_fragment);
|
||||||
|
this.draw_rows(table.rows, doc_fragment);
|
||||||
|
this.table.append(doc_fragment);
|
||||||
},
|
},
|
||||||
|
|
||||||
make_header_cell: function (header) {
|
make_header_cell: function (header) {
|
||||||
|
@ -549,7 +561,7 @@ openerp.web_graph.Graph = openerp.web.Widget.extend({
|
||||||
return cell.append(content);
|
return cell.append(content);
|
||||||
},
|
},
|
||||||
|
|
||||||
draw_headers: function (headers) {
|
draw_headers: function (headers, doc_fragment) {
|
||||||
var make_cell = this.make_header_cell,
|
var make_cell = this.make_header_cell,
|
||||||
empty_cell = $('<th>').attr('rowspan', headers.length),
|
empty_cell = $('<th>').attr('rowspan', headers.length),
|
||||||
thead = $('<thead>');
|
thead = $('<thead>');
|
||||||
|
@ -562,10 +574,11 @@ openerp.web_graph.Graph = openerp.web.Widget.extend({
|
||||||
thead.append(html_row);
|
thead.append(html_row);
|
||||||
});
|
});
|
||||||
thead.children(':first').prepend(empty_cell);
|
thead.children(':first').prepend(empty_cell);
|
||||||
this.table.append(thead);
|
doc_fragment.append(thead);
|
||||||
|
this.thead = thead;
|
||||||
},
|
},
|
||||||
|
|
||||||
draw_measure_row: function (measure_row) {
|
draw_measure_row: function (measure_row, doc_fragment) {
|
||||||
if (this.pivot.measures.length === 1) { return; }
|
if (this.pivot.measures.length === 1) { return; }
|
||||||
var html_row = $('<tr>').append('<th>');
|
var html_row = $('<tr>').append('<th>');
|
||||||
_.each(measure_row, function (cell) {
|
_.each(measure_row, function (cell) {
|
||||||
|
@ -573,25 +586,39 @@ openerp.web_graph.Graph = openerp.web.Widget.extend({
|
||||||
if (cell.is_bold) {measure_cell.css('font-weight', 'bold');}
|
if (cell.is_bold) {measure_cell.css('font-weight', 'bold');}
|
||||||
html_row.append(measure_cell);
|
html_row.append(measure_cell);
|
||||||
});
|
});
|
||||||
this.$('thead').append(html_row);
|
this.thead.append(html_row);
|
||||||
},
|
},
|
||||||
|
|
||||||
draw_rows: function (rows) {
|
draw_rows: function (rows, doc_fragment) {
|
||||||
var table = this.table,
|
var make_cell = this.make_header_cell,
|
||||||
make_cell = this.make_header_cell;
|
cell,
|
||||||
|
html_row, i, j;
|
||||||
|
|
||||||
_.each(rows, function (row) {
|
var cells_list,
|
||||||
var html_row = $('<tr>').append(make_cell(row));
|
hcell,
|
||||||
_.each(row.cells, function (cell) {
|
rows_length, cells_length;
|
||||||
var html_cell = $('<td>').text(cell.value);
|
|
||||||
if (_.has(cell, 'color')) {
|
rows_length = rows.length;
|
||||||
html_cell.css('background-color', $.Color(255, cell.color, cell.color));
|
for (i = 0; i < rows_length; i++) {
|
||||||
|
html_row = $('<tr>').append(make_cell(rows[i]));
|
||||||
|
cells_length = rows[i].cells.length;
|
||||||
|
cells_list = [];
|
||||||
|
|
||||||
|
for (j = 0; j < cells_length; j++) {
|
||||||
|
cell = rows[i].cells[j];
|
||||||
|
hcell = '<td';
|
||||||
|
if (cell.is_bold || cell.color) {
|
||||||
|
hcell += ' style="';
|
||||||
|
if (cell.is_bold) hcell += 'font-weight: bold;';
|
||||||
|
if (cell.color) hcell += 'background-color:' + $.Color(255, cell.color, cell.color) + ';';
|
||||||
|
hcell += '"';
|
||||||
}
|
}
|
||||||
if (cell.is_bold) { html_cell.css('font-weight', 'bold'); }
|
hcell += '>' + cell.value + '</td>';
|
||||||
html_row.append(html_cell);
|
cells_list[j] = hcell;
|
||||||
});
|
}
|
||||||
table.append(html_row);
|
html_row.append(cells_list.join(''));
|
||||||
});
|
doc_fragment.append($('<tbody>').append(html_row));
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// ----------------------------------------------------------------------
|
// ----------------------------------------------------------------------
|
||||||
|
|
Loading…
Reference in New Issue