From 9e0a04ef55e80e61369c20ed3a814060f5a6ff9b Mon Sep 17 00:00:00 2001 From: Ian Del Giudice Date: Fri, 29 Mar 2019 18:37:55 -0400 Subject: [PATCH 01/10] replace HTML string array with DOM node creation for legendCallback --- src/plugins/plugin.legend.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index d3fd5e35f04..eeaf16a438b 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -71,17 +71,17 @@ defaults._set('global', { }, legendCallback: function(chart) { - var text = []; - text.push(''); - return text.join(''); + return text; } }); From ae9ed5782b2d84facb640d1e52ebc07f368fd460 Mon Sep 17 00:00:00 2001 From: Ian Del Giudice Date: Fri, 29 Mar 2019 19:05:22 -0400 Subject: [PATCH 02/10] fix: don't nest labels inside spans --- src/plugins/plugin.legend.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index eeaf16a438b..3df7133a4ec 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -75,10 +75,10 @@ defaults._set('global', { text.setAttribute('class', chart.id + '-legend'); for (var i = 0; i < chart.data.datasets.length; i++) { var listItem = text.appendChild(document.createElement('li')); - var listItemText = listItem.appendChild(document.createElement('span')); - listItemText.style.backgroundColor = chart.data.datasets[i].backgroundColor; + var listItemSpan = listItem.appendChild(document.createElement('span')); + listItemSpan.style.backgroundColor = chart.data.datasets[i].backgroundColor; if (chart.data.datasets[i].label) { - listItemText.appendChild(document.createTextNode(chart.data.datasets[i].label)); + listItem.appendChild(document.createTextNode(chart.data.datasets[i].label)); } } return text; From 66e7a71a4b5f66152e4e366dda3e761d7f127cbf Mon Sep 17 00:00:00 2001 From: Ian Del Giudice Date: Fri, 29 Mar 2019 19:14:48 -0400 Subject: [PATCH 03/10] replace HTML string array with DOM node creation for doughnut and polarArea legendCallback --- src/controllers/controller.doughnut.js | 14 +++++++------- src/controllers/controller.polarArea.js | 14 +++++++------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js index a6d4a63775a..6ac2b6a9b62 100644 --- a/src/controllers/controller.doughnut.js +++ b/src/controllers/controller.doughnut.js @@ -19,8 +19,8 @@ defaults._set('doughnut', { mode: 'single' }, legendCallback: function(chart) { - var text = []; - text.push('
    '); + var text = document.createElement('ul'); + text.setAttribute('class', chart.id + '-legend'); var data = chart.data; var datasets = data.datasets; @@ -28,16 +28,16 @@ defaults._set('doughnut', { if (datasets.length) { for (var i = 0; i < datasets[0].data.length; ++i) { - text.push('
  • '); + var listItem = text.appendChild(document.createElement('li')); + var 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('
    • '); } } - text.push('
'); - return text.join(''); + return text; }, legend: { labels: { diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index 19ceefddab7..5a00cff6bdb 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -32,8 +32,8 @@ defaults._set('polarArea', { startAngle: -0.5 * Math.PI, legendCallback: function(chart) { - var text = []; - text.push('
    '); + var text = document.createElement('ul'); + text.setAttribute('class', chart.id + '-legend'); var data = chart.data; var datasets = data.datasets; @@ -41,16 +41,16 @@ defaults._set('polarArea', { if (datasets.length) { for (var i = 0; i < datasets[0].data.length; ++i) { - text.push('
  • '); + var listItem = text.appendChild(document.createElement('li')); + var 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('
    • '); } } - text.push('
'); - return text.join(''); + return text; }, legend: { labels: { From 2e8276f352911b8cf71d6d7fef6ee8e6244d9aec Mon Sep 17 00:00:00 2001 From: Ian Del Giudice Date: Fri, 29 Mar 2019 19:17:27 -0400 Subject: [PATCH 04/10] suggestion: use for ul element variable, instead of for previous HTML string version --- src/controllers/controller.doughnut.js | 8 ++++---- src/controllers/controller.polarArea.js | 8 ++++---- src/plugins/plugin.legend.js | 8 ++++---- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js index 6ac2b6a9b62..744ae51dccd 100644 --- a/src/controllers/controller.doughnut.js +++ b/src/controllers/controller.doughnut.js @@ -19,8 +19,8 @@ defaults._set('doughnut', { mode: 'single' }, legendCallback: function(chart) { - var text = document.createElement('ul'); - text.setAttribute('class', chart.id + '-legend'); + var list = document.createElement('ul'); + list.setAttribute('class', chart.id + '-legend'); var data = chart.data; var datasets = data.datasets; @@ -28,7 +28,7 @@ defaults._set('doughnut', { if (datasets.length) { for (var i = 0; i < datasets[0].data.length; ++i) { - var listItem = text.appendChild(document.createElement('li')); + var listItem = list.appendChild(document.createElement('li')); var listItemSpan = listItem.appendChild(document.createElement('span')); listItemSpan.style.backgroundColor = datasets[0].backgroundColor[i]; if (labels[i]) { @@ -37,7 +37,7 @@ defaults._set('doughnut', { } } - return text; + return list; }, legend: { labels: { diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index 5a00cff6bdb..17be2851886 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -32,8 +32,8 @@ defaults._set('polarArea', { startAngle: -0.5 * Math.PI, legendCallback: function(chart) { - var text = document.createElement('ul'); - text.setAttribute('class', chart.id + '-legend'); + var list = document.createElement('ul'); + list.setAttribute('class', chart.id + '-legend'); var data = chart.data; var datasets = data.datasets; @@ -41,7 +41,7 @@ defaults._set('polarArea', { if (datasets.length) { for (var i = 0; i < datasets[0].data.length; ++i) { - var listItem = text.appendChild(document.createElement('li')); + var listItem = list.appendChild(document.createElement('li')); var listItemSpan = listItem.appendChild(document.createElement('span')); listItemSpan.style.backgroundColor = datasets[0].backgroundColor[i]; if (labels[i]) { @@ -50,7 +50,7 @@ defaults._set('polarArea', { } } - return text; + return list; }, legend: { labels: { diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index 3df7133a4ec..6d13f27568d 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -71,17 +71,17 @@ defaults._set('global', { }, legendCallback: function(chart) { - var text = document.createElement('ul'); - text.setAttribute('class', chart.id + '-legend'); + var list = document.createElement('ul'); + list.setAttribute('class', chart.id + '-legend'); for (var i = 0; i < chart.data.datasets.length; i++) { - var listItem = text.appendChild(document.createElement('li')); + var listItem = list.appendChild(document.createElement('li')); var listItemSpan = listItem.appendChild(document.createElement('span')); listItemSpan.style.backgroundColor = chart.data.datasets[i].backgroundColor; if (chart.data.datasets[i].label) { listItem.appendChild(document.createTextNode(chart.data.datasets[i].label)); } } - return text; + return list; } }); From 610d191e3d2f89155675ce9b2987c89cba05d24c Mon Sep 17 00:00:00 2001 From: dkoo Date: Mon, 1 Apr 2019 13:45:48 -0600 Subject: [PATCH 05/10] Update documentation for generateLegend method; fix corresponding unit tests --- docs/configuration/legend.md | 4 ++-- src/controllers/controller.doughnut.js | 5 ++++- src/controllers/controller.polarArea.js | 7 +++++-- src/plugins/plugin.legend.js | 21 ++++++++++++++------- test/specs/global.defaults.tests.js | 16 ++++++++++++---- 5 files changed, 37 insertions(+), 16 deletions(-) diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md index f8ce7eb5a17..554d0683a40 100644 --- a/docs/configuration/legend.md +++ b/docs/configuration/legend.md @@ -161,7 +161,7 @@ Now when you click the legend in this chart, the visibility of the first two dat ## HTML Legends -Sometimes you need a very complex legend. In these cases, it makes sense to generate an HTML legend. Charts provide a `generateLegend()` method on their prototype that returns an HTML string for the legend. +Sometimes you need a very complex legend. In these cases, it makes sense to generate an HTML legend. Charts provide a `generateLegend()` method on their prototype that returns an HTML fragment for the legend. To configure how this legend is generated, you can change the `legendCallback` config property. @@ -171,7 +171,7 @@ var chart = new Chart(ctx, { data: data, options: { legendCallback: function(chart) { - // Return the HTML string here. + // Return the HTML fragment here. } } }); diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js index 744ae51dccd..1a24cd59f93 100644 --- a/src/controllers/controller.doughnut.js +++ b/src/controllers/controller.doughnut.js @@ -19,6 +19,7 @@ defaults._set('doughnut', { mode: 'single' }, legendCallback: function(chart) { + var fragment = document.createDocumentFragment(); var list = document.createElement('ul'); list.setAttribute('class', chart.id + '-legend'); @@ -35,9 +36,11 @@ defaults._set('doughnut', { listItem.appendChild(document.createTextNode(labels[i])); } } + + fragment.appendChild(list); } - return list; + return fragment; }, legend: { labels: { diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index 17be2851886..50149500855 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -31,7 +31,8 @@ defaults._set('polarArea', { }, startAngle: -0.5 * Math.PI, - legendCallback: function(chart) { + legendCallback: function (chart) { + var fragment = document.createDocumentFragment(); var list = document.createElement('ul'); list.setAttribute('class', chart.id + '-legend'); @@ -48,9 +49,11 @@ defaults._set('polarArea', { listItem.appendChild(document.createTextNode(labels[i])); } } + + fragment.appendChild(list); } - return list; + return fragment; }, legend: { labels: { diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index 6d13f27568d..0b219278bf9 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -71,17 +71,24 @@ defaults._set('global', { }, legendCallback: function(chart) { + var fragment = document.createDocumentFragment(); var list = document.createElement('ul'); list.setAttribute('class', chart.id + '-legend'); - for (var i = 0; i < chart.data.datasets.length; i++) { - var listItem = list.appendChild(document.createElement('li')); - var listItemSpan = listItem.appendChild(document.createElement('span')); - listItemSpan.style.backgroundColor = chart.data.datasets[i].backgroundColor; - if (chart.data.datasets[i].label) { - listItem.appendChild(document.createTextNode(chart.data.datasets[i].label)); + + if (datasets.length) { + for (var i = 0; i < chart.data.datasets.length; i++) { + var listItem = list.appendChild(document.createElement('li')); + var listItemSpan = listItem.appendChild(document.createElement('span')); + listItemSpan.style.backgroundColor = chart.data.datasets[i].backgroundColor; + if (chart.data.datasets[i].label) { + listItem.appendChild(document.createTextNode(chart.data.datasets[i].label)); + } } + + fragment.appendChild(list); } - return list; + + return fragment; } }); diff --git a/test/specs/global.defaults.tests.js b/test/specs/global.defaults.tests.js index a01284c1a0b..38a0a74f17f 100644 --- a/test/specs/global.defaults.tests.js +++ b/test/specs/global.defaults.tests.js @@ -102,8 +102,12 @@ describe('Default Configs', function() { options: config }); - var expectedLegend = '
  • label1
  • label2
'; - expect(chart.generateLegend()).toBe(expectedLegend); + var expectedLegend = document.createDocumentFragment(); + var expectedLegendList = document.createElement('ul'); + expectedLegendList.setAttribute('class', chart.id + '-legend'); + expectedLegendList.innerHTML = '
  • label1
  • label2
    • '; + expectedLegend.appendChild(expectedLegendList); + expect(chart.generateLegend().firstElementChild.outerHTML).toBe(expectedLegend.firstElementChild.outerHTML); }); it('should return correct legend label objects', function() { @@ -218,8 +222,12 @@ describe('Default Configs', function() { options: config }); - var expectedLegend = '
    • label1
    • label2
    '; - expect(chart.generateLegend()).toBe(expectedLegend); + var expectedLegend = document.createDocumentFragment(); + var expectedLegendList = document.createElement('ul'); + expectedLegendList.setAttribute('class', chart.id + '-legend'); + expectedLegendList.innerHTML = '
  • label1
  • label2
    • '; + expectedLegend.appendChild(expectedLegendList); + expect(chart.generateLegend().firstElementChild.outerHTML).toBe(expectedLegend.firstElementChild.outerHTML); }); it('should return correct legend label objects', function() { From f6447a354ed7f11ab3ad4e8ed09e4f3a41ef8c51 Mon Sep 17 00:00:00 2001 From: Ian Del Giudice Date: Wed, 3 Apr 2019 20:33:56 -0400 Subject: [PATCH 06/10] CR fix: Use DOM node constructors, but return HTML string for backwards compatibility. Reverts test updates --- docs/configuration/legend.md | 4 ++-- src/controllers/controller.doughnut.js | 5 +---- src/controllers/controller.polarArea.js | 7 ++----- src/plugins/plugin.legend.js | 5 +---- test/specs/global.defaults.tests.js | 16 ++++------------ 5 files changed, 10 insertions(+), 27 deletions(-) diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md index 554d0683a40..f8ce7eb5a17 100644 --- a/docs/configuration/legend.md +++ b/docs/configuration/legend.md @@ -161,7 +161,7 @@ Now when you click the legend in this chart, the visibility of the first two dat ## HTML Legends -Sometimes you need a very complex legend. In these cases, it makes sense to generate an HTML legend. Charts provide a `generateLegend()` method on their prototype that returns an HTML fragment for the legend. +Sometimes you need a very complex legend. In these cases, it makes sense to generate an HTML legend. Charts provide a `generateLegend()` method on their prototype that returns an HTML string for the legend. To configure how this legend is generated, you can change the `legendCallback` config property. @@ -171,7 +171,7 @@ var chart = new Chart(ctx, { data: data, options: { legendCallback: function(chart) { - // Return the HTML fragment here. + // Return the HTML string here. } } }); diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js index 1a24cd59f93..cc0df805068 100644 --- a/src/controllers/controller.doughnut.js +++ b/src/controllers/controller.doughnut.js @@ -19,7 +19,6 @@ defaults._set('doughnut', { mode: 'single' }, legendCallback: function(chart) { - var fragment = document.createDocumentFragment(); var list = document.createElement('ul'); list.setAttribute('class', chart.id + '-legend'); @@ -36,11 +35,9 @@ defaults._set('doughnut', { listItem.appendChild(document.createTextNode(labels[i])); } } - - fragment.appendChild(list); } - return fragment; + return list.outerHTML; }, legend: { labels: { diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index 50149500855..af5f458ebb8 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -31,8 +31,7 @@ defaults._set('polarArea', { }, startAngle: -0.5 * Math.PI, - legendCallback: function (chart) { - var fragment = document.createDocumentFragment(); + legendCallback: function(chart) { var list = document.createElement('ul'); list.setAttribute('class', chart.id + '-legend'); @@ -49,11 +48,9 @@ defaults._set('polarArea', { listItem.appendChild(document.createTextNode(labels[i])); } } - - fragment.appendChild(list); } - return fragment; + return list.outerHTML; }, legend: { labels: { diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index 0b219278bf9..0f67382146d 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -71,7 +71,6 @@ defaults._set('global', { }, legendCallback: function(chart) { - var fragment = document.createDocumentFragment(); var list = document.createElement('ul'); list.setAttribute('class', chart.id + '-legend'); @@ -84,11 +83,9 @@ defaults._set('global', { listItem.appendChild(document.createTextNode(chart.data.datasets[i].label)); } } - - fragment.appendChild(list); } - return fragment; + return list.outerHTML; } }); diff --git a/test/specs/global.defaults.tests.js b/test/specs/global.defaults.tests.js index 38a0a74f17f..a01284c1a0b 100644 --- a/test/specs/global.defaults.tests.js +++ b/test/specs/global.defaults.tests.js @@ -102,12 +102,8 @@ describe('Default Configs', function() { options: config }); - var expectedLegend = document.createDocumentFragment(); - var expectedLegendList = document.createElement('ul'); - expectedLegendList.setAttribute('class', chart.id + '-legend'); - expectedLegendList.innerHTML = '
  • label1
  • label2
    • '; - expectedLegend.appendChild(expectedLegendList); - expect(chart.generateLegend().firstElementChild.outerHTML).toBe(expectedLegend.firstElementChild.outerHTML); + var expectedLegend = '
    • label1
    • label2
    '; + expect(chart.generateLegend()).toBe(expectedLegend); }); it('should return correct legend label objects', function() { @@ -222,12 +218,8 @@ describe('Default Configs', function() { options: config }); - var expectedLegend = document.createDocumentFragment(); - var expectedLegendList = document.createElement('ul'); - expectedLegendList.setAttribute('class', chart.id + '-legend'); - expectedLegendList.innerHTML = '
  • label1
  • label2
    • '; - expectedLegend.appendChild(expectedLegendList); - expect(chart.generateLegend().firstElementChild.outerHTML).toBe(expectedLegend.firstElementChild.outerHTML); + var expectedLegend = '
    • label1
    • label2
    '; + expect(chart.generateLegend()).toBe(expectedLegend); }); it('should return correct legend label objects', function() { From f9692c2d48e69a5dead834de04ce0c6b9f5a8c61 Mon Sep 17 00:00:00 2001 From: Ian Del Giudice Date: Wed, 3 Apr 2019 21:35:27 -0400 Subject: [PATCH 07/10] Update unit test expected inline style spacing. --- test/specs/global.defaults.tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/specs/global.defaults.tests.js b/test/specs/global.defaults.tests.js index a01284c1a0b..afef1aabf2a 100644 --- a/test/specs/global.defaults.tests.js +++ b/test/specs/global.defaults.tests.js @@ -102,7 +102,7 @@ describe('Default Configs', function() { options: config }); - var expectedLegend = '
    • label1
    • label2
    '; + var expectedLegend = '
    • label1
    • label2
    '; expect(chart.generateLegend()).toBe(expectedLegend); }); @@ -218,7 +218,7 @@ describe('Default Configs', function() { options: config }); - var expectedLegend = '
    • label1
    • label2
    '; + var expectedLegend = '
    • label1
    • label2
    '; expect(chart.generateLegend()).toBe(expectedLegend); }); From 1a014152e9271676154ff714b756b1aa3693e34d Mon Sep 17 00:00:00 2001 From: Ian Del Giudice Date: Thu, 4 Apr 2019 16:34:18 -0400 Subject: [PATCH 08/10] CR fixes: variable declaration, conditional and logic control formatting --- src/controllers/controller.doughnut.js | 20 ++++++++++---------- src/controllers/controller.polarArea.js | 20 ++++++++++---------- src/plugins/plugin.legend.js | 16 ++++++++-------- 3 files changed, 28 insertions(+), 28 deletions(-) diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js index cc0df805068..9fc3a6a7ef7 100644 --- a/src/controllers/controller.doughnut.js +++ b/src/controllers/controller.doughnut.js @@ -20,20 +20,20 @@ defaults._set('doughnut', { }, legendCallback: function(chart) { var list = document.createElement('ul'); - list.setAttribute('class', chart.id + '-legend'); - 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) { - var listItem = list.appendChild(document.createElement('li')); - var listItemSpan = listItem.appendChild(document.createElement('span')); - listItemSpan.style.backgroundColor = datasets[0].backgroundColor[i]; - if (labels[i]) { - listItem.appendChild(document.createTextNode(labels[i])); - } + var i, ilen, listItem, listItemSpan; + + list.setAttribute('class', chart.id + '-legend'); + + for (i = 0, ilen = datasets[0].data.length || 0; 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]) { + listItem.appendChild(document.createTextNode(labels[i])); } } diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index af5f458ebb8..e26dc3c14f5 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -33,20 +33,20 @@ defaults._set('polarArea', { startAngle: -0.5 * Math.PI, legendCallback: function(chart) { var list = document.createElement('ul'); - list.setAttribute('class', chart.id + '-legend'); - 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) { - var listItem = list.appendChild(document.createElement('li')); - var listItemSpan = listItem.appendChild(document.createElement('span')); - listItemSpan.style.backgroundColor = datasets[0].backgroundColor[i]; - if (labels[i]) { - listItem.appendChild(document.createTextNode(labels[i])); - } + var i, ilen, listItem, listItemSpan; + + list.setAttribute('class', chart.id + '-legend'); + + for (i = 0, ilen = datasets[0].data.length || 0; 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]) { + listItem.appendChild(document.createTextNode(labels[i])); } } diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index 0f67382146d..793eb6878e8 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -72,16 +72,16 @@ defaults._set('global', { legendCallback: function(chart) { var list = document.createElement('ul'); + var i, ilen, listItem, listItemSpan; + list.setAttribute('class', chart.id + '-legend'); - if (datasets.length) { - for (var i = 0; i < chart.data.datasets.length; i++) { - var listItem = list.appendChild(document.createElement('li')); - var listItemSpan = listItem.appendChild(document.createElement('span')); - listItemSpan.style.backgroundColor = chart.data.datasets[i].backgroundColor; - if (chart.data.datasets[i].label) { - listItem.appendChild(document.createTextNode(chart.data.datasets[i].label)); - } + for (i = 0, ilen = chart.data.datasets.length || 0; i < ilen; i++) { + 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) { + listItem.appendChild(document.createTextNode(chart.data.datasets[i].label)); } } From 4745b7ddf0f8c7fe95b682eaf9e607ae2b7e6a39 Mon Sep 17 00:00:00 2001 From: Ian Del Giudice Date: Fri, 10 May 2019 16:25:56 -0400 Subject: [PATCH 09/10] add check for datasets values in doughnut and polar area --- src/controllers/controller.doughnut.js | 20 +++++++++++--------- src/controllers/controller.polarArea.js | 20 +++++++++++--------- 2 files changed, 22 insertions(+), 18 deletions(-) diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js index 9fc3a6a7ef7..19079d892f2 100644 --- a/src/controllers/controller.doughnut.js +++ b/src/controllers/controller.doughnut.js @@ -22,18 +22,20 @@ defaults._set('doughnut', { var list = document.createElement('ul'); var data = chart.data; var datasets = data.datasets; - var labels = data.labels; - var i, ilen, listItem, listItemSpan; + if (datasets.length) { + var labels = data.labels; + var i, ilen, listItem, listItemSpan; - list.setAttribute('class', chart.id + '-legend'); + list.setAttribute('class', chart.id + '-legend'); - for (i = 0, ilen = datasets[0].data.length || 0; 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]) { - listItem.appendChild(document.createTextNode(labels[i])); + 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]) { + listItem.appendChild(document.createTextNode(labels[i])); + } } } diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index e26dc3c14f5..151eee36984 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -35,18 +35,20 @@ defaults._set('polarArea', { var list = document.createElement('ul'); var data = chart.data; var datasets = data.datasets; - var labels = data.labels; - var i, ilen, listItem, listItemSpan; + if (datasets.length) { + var labels = data.labels; + var i, ilen, listItem, listItemSpan; - list.setAttribute('class', chart.id + '-legend'); + list.setAttribute('class', chart.id + '-legend'); - for (i = 0, ilen = datasets[0].data.length || 0; 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]) { - listItem.appendChild(document.createTextNode(labels[i])); + 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]) { + listItem.appendChild(document.createTextNode(labels[i])); + } } } From 59e410755cd80628891de91f249787c384db5e69 Mon Sep 17 00:00:00 2001 From: Ian Del Giudice Date: Fri, 10 May 2019 19:51:05 -0400 Subject: [PATCH 10/10] declare variables at the top --- src/controllers/controller.doughnut.js | 6 ++---- src/controllers/controller.polarArea.js | 6 ++---- src/plugins/plugin.legend.js | 2 +- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js index 19079d892f2..fb4b37aad00 100644 --- a/src/controllers/controller.doughnut.js +++ b/src/controllers/controller.doughnut.js @@ -22,13 +22,11 @@ defaults._set('doughnut', { var list = document.createElement('ul'); var data = chart.data; var datasets = data.datasets; + var labels = data.labels; + var i, ilen, listItem, listItemSpan; if (datasets.length) { - var labels = data.labels; - var i, ilen, listItem, listItemSpan; - list.setAttribute('class', chart.id + '-legend'); - for (i = 0, ilen = datasets[0].data.length; i < ilen; ++i) { listItem = list.appendChild(document.createElement('li')); listItemSpan = listItem.appendChild(document.createElement('span')); diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index 151eee36984..06ed7483b03 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -35,13 +35,11 @@ defaults._set('polarArea', { var list = document.createElement('ul'); var data = chart.data; var datasets = data.datasets; + var labels = data.labels; + var i, ilen, listItem, listItemSpan; if (datasets.length) { - var labels = data.labels; - var i, ilen, listItem, listItemSpan; - list.setAttribute('class', chart.id + '-legend'); - for (i = 0, ilen = datasets[0].data.length; i < ilen; ++i) { listItem = list.appendChild(document.createElement('li')); listItemSpan = listItem.appendChild(document.createElement('span')); diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index 793eb6878e8..d44c1f2163f 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -76,7 +76,7 @@ defaults._set('global', { list.setAttribute('class', chart.id + '-legend'); - for (i = 0, ilen = chart.data.datasets.length || 0; i < ilen; i++) { + for (i = 0, ilen = chart.data.datasets.length; i < ilen; i++) { listItem = list.appendChild(document.createElement('li')); listItemSpan = listItem.appendChild(document.createElement('span')); listItemSpan.style.backgroundColor = chart.data.datasets[i].backgroundColor;