Skip to content

Html dom building #6490

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Sep 7, 2019
Merged

Html dom building #6490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
59a3eb1
replace HTML string array with DOM node creation for legendCallback
ian-pvd Mar 29, 2019
5b3a13a
fix: don't nest labels inside spans
ian-pvd Mar 29, 2019
d9b24b4
replace HTML string array with DOM node creation for doughnut and pol…
ian-pvd Mar 29, 2019
a9b1b01
suggestion: use for ul element variable, instead of for previous HT…
ian-pvd Mar 29, 2019
c20aa3e
Update documentation for generateLegend method; fix corresponding uni…
Apr 1, 2019
9dbaed5
CR fix: Use DOM node constructors, but return HTML string for backwar…
ian-pvd Apr 4, 2019
e5ad5f3
Update unit test expected inline style spacing.
ian-pvd Apr 4, 2019
6fe8ed9
CR fixes: variable declaration, conditional and logic control formatting
ian-pvd Apr 4, 2019
b547c1c
add check for datasets values in doughnut and polar area
ian-pvd May 10, 2019
82aa7ee
declare variables at the top
ian-pvd May 10, 2019
673bcc2
Ensure class is set when datasets is empty
benmccann Aug 29, 2019
736f96b
Cache datasets
benmccann Sep 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions src/controllers/controller.doughnut.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,25 +22,25 @@ defaults._set('doughnut', {
mode: 'single'
},
legendCallback: function(chart) {
var text = [];
text.push('<ul class="' + chart.id + '-legend">');

var list = document.createElement('ul');
var data = chart.data;
var datasets = data.datasets;
var labels = data.labels;
var i, ilen, listItem, listItemSpan;

list.setAttribute('class', chart.id + '-legend');
if (datasets.length) {
for (var i = 0; i < datasets[0].data.length; ++i) {
text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>');
for (i = 0, ilen = datasets[0].data.length; i < ilen; ++i) {
listItem = list.appendChild(document.createElement('li'));
listItemSpan = listItem.appendChild(document.createElement('span'));
listItemSpan.style.backgroundColor = datasets[0].backgroundColor[i];
if (labels[i]) {
text.push(labels[i]);
listItem.appendChild(document.createTextNode(labels[i]));
}
text.push('</li>');
}
}

text.push('</ul>');
return text.join('');
return list.outerHTML;
},
legend: {
labels: {
Expand Down
18 changes: 9 additions & 9 deletions src/controllers/controller.polarArea.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,25 +32,25 @@ defaults._set('polarArea', {

startAngle: -0.5 * Math.PI,
legendCallback: function(chart) {
var text = [];
text.push('<ul class="' + chart.id + '-legend">');

var list = document.createElement('ul');
var data = chart.data;
var datasets = data.datasets;
var labels = data.labels;
var i, ilen, listItem, listItemSpan;

list.setAttribute('class', chart.id + '-legend');
if (datasets.length) {
for (var i = 0; i < datasets[0].data.length; ++i) {
text.push('<li><span style="background-color:' + datasets[0].backgroundColor[i] + '"></span>');
for (i = 0, ilen = datasets[0].data.length; i < ilen; ++i) {
listItem = list.appendChild(document.createElement('li'));
listItemSpan = listItem.appendChild(document.createElement('span'));
listItemSpan.style.backgroundColor = datasets[0].backgroundColor[i];
if (labels[i]) {
text.push(labels[i]);
listItem.appendChild(document.createTextNode(labels[i]));
}
text.push('</li>');
}
}

text.push('</ul>');
return text.join('');
return list.outerHTML;
},
legend: {
labels: {
Expand Down
23 changes: 14 additions & 9 deletions src/plugins/plugin.legend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,17 +78,22 @@ defaults._set('global', {
},

legendCallback: function(chart) {
var text = [];
text.push('<ul class="' + chart.id + '-legend">');
for (var i = 0; i < chart.data.datasets.length; i++) {
text.push('<li><span style="background-color:' + chart.data.datasets[i].backgroundColor + '"></span>');
if (chart.data.datasets[i].label) {
text.push(chart.data.datasets[i].label);
var list = document.createElement('ul');
var datasets = chart.data.datasets;
var i, ilen, listItem, listItemSpan;

list.setAttribute('class', chart.id + '-legend');

for (i = 0, ilen = datasets.length; i < ilen; i++) {
listItem = list.appendChild(document.createElement('li'));
listItemSpan = listItem.appendChild(document.createElement('span'));
listItemSpan.style.backgroundColor = datasets[i].backgroundColor;
if (datasets[i].label) {
listItem.appendChild(document.createTextNode(datasets[i].label));
}
text.push('</li>');
}
text.push('</ul>');
return text.join('');

return list.outerHTML;
}
});

Expand Down
4 changes: 2 additions & 2 deletions test/specs/global.defaults.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ describe('Default Configs', function() {
options: config
});

var expectedLegend = '<ul class="' + chart.id + '-legend"><li><span style="background-color:red"></span>label1</li><li><span style="background-color:green"></span>label2</li></ul>';
var expectedLegend = '<ul class="' + chart.id + '-legend"><li><span style="background-color: red;"></span>label1</li><li><span style="background-color: green;"></span>label2</li></ul>';
expect(chart.generateLegend()).toBe(expectedLegend);
});

Expand Down Expand Up @@ -218,7 +218,7 @@ describe('Default Configs', function() {
options: config
});

var expectedLegend = '<ul class="' + chart.id + '-legend"><li><span style="background-color:red"></span>label1</li><li><span style="background-color:green"></span>label2</li></ul>';
var expectedLegend = '<ul class="' + chart.id + '-legend"><li><span style="background-color: red;"></span>label1</li><li><span style="background-color: green;"></span>label2</li></ul>';
expect(chart.generateLegend()).toBe(expectedLegend);
});

Expand Down