Skip to content
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

Build HTML via DOM manipulation (vs string manipulation) #6179

Closed
wants to merge 11 commits into from
Closed

Build HTML via DOM manipulation (vs string manipulation) #6179

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
9e0a04e
replace HTML string array with DOM node creation for legendCallback
ian-pvd Mar 29, 2019
ae9ed57
fix: don't nest labels inside spans
ian-pvd Mar 29, 2019
66e7a71
replace HTML string array with DOM node creation for doughnut and pol…
ian-pvd Mar 29, 2019
2e8276f
suggestion: use for ul element variable, instead of for previous HT…
ian-pvd Mar 29, 2019
610d191
Update documentation for generateLegend method; fix corresponding uni…
Apr 1, 2019
62c4512
Merge pull request #2 from ian-pvd/wordpress-vip-code-review-patch-tests
ian-pvd Apr 1, 2019
f6447a3
CR fix: Use DOM node constructors, but return HTML string for backwar…
ian-pvd Apr 4, 2019
f9692c2
Update unit test expected inline style spacing.
ian-pvd Apr 4, 2019
1a01415
CR fixes: variable declaration, conditional and logic control formatting
ian-pvd Apr 4, 2019
4745b7d
add check for datasets values in doughnut and polar area
ian-pvd May 10, 2019
59e4107
declare variables at the top
ian-pvd May 10, 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
24 changes: 12 additions & 12 deletions src/controllers/controller.doughnut.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,25 +19,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;

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>');
if (labels[i]) {
text.push(labels[i]);
}
text.push('</li>');
var i, ilen, listItem, listItemSpan;

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

for (i = 0, ilen = datasets[0].data.length || 0; i < ilen; ++i) {
benmccann marked this conversation as resolved.
Show resolved Hide resolved
listItem = list.appendChild(document.createElement('li'));
listItemSpan = listItem.appendChild(document.createElement('span'));
listItemSpan.style.backgroundColor = datasets[0].backgroundColor[i];
if (labels[i]) {
listItem.appendChild(document.createTextNode(labels[i]));
}
}

text.push('</ul>');
return text.join('');
return list.outerHTML;
},
legend: {
labels: {
Expand Down
24 changes: 12 additions & 12 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;

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>');
if (labels[i]) {
text.push(labels[i]);
}
text.push('</li>');
var i, ilen, listItem, listItemSpan;

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

for (i = 0, ilen = datasets[0].data.length || 0; i < ilen; ++i) {
benmccann marked this conversation as resolved.
Show resolved Hide resolved
listItem = list.appendChild(document.createElement('li'));
listItemSpan = listItem.appendChild(document.createElement('span'));
listItemSpan.style.backgroundColor = datasets[0].backgroundColor[i];
if (labels[i]) {
listItem.appendChild(document.createTextNode(labels[i]));
}
}

text.push('</ul>');
return text.join('');
return list.outerHTML;
},
legend: {
labels: {
Expand Down
20 changes: 12 additions & 8 deletions src/plugins/plugin.legend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,17 +71,21 @@ 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>');
var list = document.createElement('ul');
var i, ilen, listItem, listItemSpan;

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

for (i = 0, ilen = chart.data.datasets.length || 0; i < ilen; i++) {
benmccann marked this conversation as resolved.
Show resolved Hide resolved
listItem = list.appendChild(document.createElement('li'));
listItemSpan = listItem.appendChild(document.createElement('span'));
listItemSpan.style.backgroundColor = chart.data.datasets[i].backgroundColor;
if (chart.data.datasets[i].label) {
text.push(chart.data.datasets[i].label);
listItem.appendChild(document.createTextNode(chart.data.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