From 54943b5ccc9c321361c5d21f13f1bea12213c5f3 Mon Sep 17 00:00:00 2001 From: Amichai Rothman Date: Thu, 22 Feb 2018 01:28:39 +0200 Subject: [PATCH 1/5] unified legend and series data structures --- chartist-plugin-legend.js | 42 ++++++++++++++------------------------- 1 file changed, 15 insertions(+), 27 deletions(-) diff --git a/chartist-plugin-legend.js b/chartist-plugin-legend.js index a8dc67b..542c213 100644 --- a/chartist-plugin-legend.js +++ b/chartist-plugin-legend.js @@ -96,20 +96,6 @@ return options.legendNames || (useLabels ? chart.data.labels : chart.data.series); } - // Initialize the array that associates series with legends. - // -1 indicates that there is no legend associated with it. - function initSeriesMetadata(useLabels) { - var seriesMetadata = new Array(chart.data.series.length); - for (var i = 0; i < chart.data.series.length; i++) { - seriesMetadata[i] = { - data: chart.data.series[i], - label: useLabels ? chart.data.labels[i] : null, - legend: -1 - }; - } - return seriesMetadata; - } - function createNameElement(i, legendText, classNamesViable) { var li = document.createElement('li'); li.classList.add('ct-series-' + i); @@ -140,7 +126,7 @@ } } - function addClickHandler(legendElement, legends, seriesMetadata, useLabels) { + function addClickHandler(legendElement, legends, useLabels) { legendElement.addEventListener('click', function(e) { var li = e.target; if (li.parentNode !== legendElement || !li.hasAttribute('data-legend')) @@ -170,11 +156,13 @@ var newSeries = []; var newLabels = []; - - for (var i = 0; i < seriesMetadata.length; i++) { - if (seriesMetadata[i].legend != -1 && legends[seriesMetadata[i].legend].active) { - newSeries.push(seriesMetadata[i].data); - newLabels.push(seriesMetadata[i].label); + for (var i = 0; i < legends.length; i++) { + if (legends[i].active) { + var legendSeries = legends[i].series; + for (var j = 0; j < legendSeries.length; j++) { + newSeries.push(legendSeries[j].data); + newLabels.push(legendSeries[j].label); + } } } @@ -196,7 +184,6 @@ var legendElement = createLegendElement(); var useLabels = chart instanceof Chartist.Pie && chart.data.labels && chart.data.labels.length; var legendNames = getLegendNames(useLabels); - var seriesMetadata = initSeriesMetadata(useLabels); var legends = []; // Check if given class names are viable to append to legends @@ -205,15 +192,16 @@ // Loop through all legends to set each name in a list item. legendNames.forEach(function (legend, i) { var legendText = legend.name || legend; - var legendSeries = legend.series || [i]; + var legendSeriesIndices = legend.series || [i]; + var legendSeries = legendSeriesIndices.map(function(i) { + return { + data: chart.data.series[i], + label: useLabels ? chart.data.labels[i] : null + }}); var li = createNameElement(i, legendText, classNamesViable); legendElement.appendChild(li); - legendSeries.forEach(function(seriesIndex) { - seriesMetadata[seriesIndex].legend = i; - }); - legends.push({ text: legendText, series: legendSeries, @@ -227,7 +215,7 @@ if (options.clickable) { setSeriesClassNames(); - addClickHandler(legendElement, legends, seriesMetadata, useLabels); + addClickHandler(legendElement, legends, useLabels); } }; }; From 25c35e010076e4eb70acb8e989ec877e318e0492 Mon Sep 17 00:00:00 2001 From: Amichai Rothman Date: Thu, 22 Feb 2018 12:44:29 +0200 Subject: [PATCH 2/5] simplified click handler activate/deactivate of legends --- chartist-plugin-legend.js | 45 +++++++++++++++------------------------ 1 file changed, 17 insertions(+), 28 deletions(-) diff --git a/chartist-plugin-legend.js b/chartist-plugin-legend.js index 542c213..d6d3edb 100644 --- a/chartist-plugin-legend.js +++ b/chartist-plugin-legend.js @@ -136,39 +136,27 @@ var legendIndex = parseInt(li.getAttribute('data-legend')); var legend = legends[legendIndex]; - if (!legend.active) { - legend.active = true; + legend.active = !legend.active; + + var activeLegends = legends.filter(function(legend) { return legend.active; }); + if (legend.active) { li.classList.remove('inactive'); - } else { - legend.active = false; + } else if (activeLegends.length > 0 || options.removeAll) { li.classList.add('inactive'); - - var activeCount = legends.filter(function(legend) { return legend.active; }).length; - if (!options.removeAll && activeCount == 0) { - // If we can't disable all series at the same time, let's - // reenable all of them: - for (var i = 0; i < legends.length; i++) { - legends[i].active = true; - legendElement.childNodes[i].classList.remove('inactive'); - } - } - } - - var newSeries = []; - var newLabels = []; - for (var i = 0; i < legends.length; i++) { - if (legends[i].active) { - var legendSeries = legends[i].series; - for (var j = 0; j < legendSeries.length; j++) { - newSeries.push(legendSeries[j].data); - newLabels.push(legendSeries[j].label); - } - } + } else { + // If we can't disable all series at the same time, re-enable all of them + legends.forEach(function(legend) { + legend.active = true; + legend.element.classList.remove('inactive'); + }); + activeLegends = legends; } - chart.data.series = newSeries; + var activeSeriesArrays = activeLegends.map(function(legend) { return legend.series; }); + var activeSeries = [].concat.apply([], activeSeriesArrays); + chart.data.series = activeSeries.map(function(series) { return series.data; }); if (useLabels) { - chart.data.labels = newLabels; + chart.data.labels = activeSeries.map(function(series) { return series.label; }); } chart.update(); @@ -205,6 +193,7 @@ legends.push({ text: legendText, series: legendSeries, + element: li, active: true }); }); From e2a6c9ce061390faf2ab0bb9cab48d809217dbcd Mon Sep 17 00:00:00 2001 From: Amichai Rothman Date: Thu, 22 Feb 2018 13:08:42 +0200 Subject: [PATCH 3/5] further simplified click handler activate/deactivate of legends --- chartist-plugin-legend.js | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/chartist-plugin-legend.js b/chartist-plugin-legend.js index d6d3edb..98ada14 100644 --- a/chartist-plugin-legend.js +++ b/chartist-plugin-legend.js @@ -139,21 +139,19 @@ legend.active = !legend.active; var activeLegends = legends.filter(function(legend) { return legend.active; }); - if (legend.active) { - li.classList.remove('inactive'); - } else if (activeLegends.length > 0 || options.removeAll) { - li.classList.add('inactive'); - } else { - // If we can't disable all series at the same time, re-enable all of them - legends.forEach(function(legend) { + var activateAll = activeLegends.length === 0 && !options.removeAll; + var activeSeries = []; + legends.forEach(function(legend) { + if (activateAll) legend.active = true; + if (legend.active) { legend.element.classList.remove('inactive'); - }); - activeLegends = legends; - } + activeSeries = activeSeries.concat(legend.series); + } else { + legend.element.classList.add('inactive'); + } + }); - var activeSeriesArrays = activeLegends.map(function(legend) { return legend.series; }); - var activeSeries = [].concat.apply([], activeSeriesArrays); chart.data.series = activeSeries.map(function(series) { return series.data; }); if (useLabels) { chart.data.labels = activeSeries.map(function(series) { return series.label; }); From 2e101e96e9db57aef4509fc1a99f287abb9e3ea3 Mon Sep 17 00:00:00 2001 From: Amichai Rothman Date: Thu, 22 Feb 2018 13:16:46 +0200 Subject: [PATCH 4/5] extracted initLegends function --- chartist-plugin-legend.js | 54 +++++++++++++++++++++------------------ 1 file changed, 29 insertions(+), 25 deletions(-) diff --git a/chartist-plugin-legend.js b/chartist-plugin-legend.js index 98ada14..e57f25f 100644 --- a/chartist-plugin-legend.js +++ b/chartist-plugin-legend.js @@ -126,6 +126,34 @@ } } + function initLegends(legendElement, legendNames, useLabels) { + var legends = []; + // Check if given class names are viable to append to legends + var classNamesViable = Array.isArray(options.classNames) && options.classNames.length === legendNames.length; + // Loop through all legends to initialize metadata and set each name in a list item + legendNames.forEach(function(legend, i) { + var legendText = legend.name || legend; + var legendSeriesIndices = legend.series || [i]; + var legendSeries = legendSeriesIndices.map(function(i) { + return { + data: chart.data.series[i], + label: useLabels ? chart.data.labels[i] : null + } + }); + + var li = createNameElement(i, legendText, classNamesViable); + legendElement.appendChild(li); + + legends.push({ + text: legendText, + series: legendSeries, + element: li, + active: true + }); + }); + return legends; + } + function addClickHandler(legendElement, legends, useLabels) { legendElement.addEventListener('click', function(e) { var li = e.target; @@ -170,31 +198,7 @@ var legendElement = createLegendElement(); var useLabels = chart instanceof Chartist.Pie && chart.data.labels && chart.data.labels.length; var legendNames = getLegendNames(useLabels); - var legends = []; - - // Check if given class names are viable to append to legends - var classNamesViable = Array.isArray(options.classNames) && options.classNames.length === legendNames.length; - - // Loop through all legends to set each name in a list item. - legendNames.forEach(function (legend, i) { - var legendText = legend.name || legend; - var legendSeriesIndices = legend.series || [i]; - var legendSeries = legendSeriesIndices.map(function(i) { - return { - data: chart.data.series[i], - label: useLabels ? chart.data.labels[i] : null - }}); - - var li = createNameElement(i, legendText, classNamesViable); - legendElement.appendChild(li); - - legends.push({ - text: legendText, - series: legendSeries, - element: li, - active: true - }); - }); + var legends = initLegends(legendElement, legendNames, useLabels); chart.on('created', function (data) { appendLegendToDOM(legendElement); From e74d2ad3a7cfdc0060ad63f48c6be68028fc90a7 Mon Sep 17 00:00:00 2001 From: Amichai Rothman Date: Thu, 22 Feb 2018 13:52:44 +0200 Subject: [PATCH 5/5] split addClickHandler function --- chartist-plugin-legend.js | 72 ++++++++++++++++++++------------------- 1 file changed, 37 insertions(+), 35 deletions(-) diff --git a/chartist-plugin-legend.js b/chartist-plugin-legend.js index e57f25f..164bf9a 100644 --- a/chartist-plugin-legend.js +++ b/chartist-plugin-legend.js @@ -154,43 +154,43 @@ return legends; } - function addClickHandler(legendElement, legends, useLabels) { - legendElement.addEventListener('click', function(e) { - var li = e.target; - if (li.parentNode !== legendElement || !li.hasAttribute('data-legend')) - return; - e.preventDefault(); - - var legendIndex = parseInt(li.getAttribute('data-legend')); - var legend = legends[legendIndex]; - - legend.active = !legend.active; - - var activeLegends = legends.filter(function(legend) { return legend.active; }); - var activateAll = activeLegends.length === 0 && !options.removeAll; - var activeSeries = []; - legends.forEach(function(legend) { - if (activateAll) - legend.active = true; - if (legend.active) { - legend.element.classList.remove('inactive'); - activeSeries = activeSeries.concat(legend.series); - } else { - legend.element.classList.add('inactive'); - } - }); - - chart.data.series = activeSeries.map(function(series) { return series.data; }); - if (useLabels) { - chart.data.labels = activeSeries.map(function(series) { return series.label; }); + function applyLegendState(legends, useLabels) { + var activeLegends = legends.filter(function(legend) { return legend.active; }); + var activateAll = activeLegends.length === 0 && !options.removeAll; + var activeSeries = []; + legends.forEach(function(legend) { + if (activateAll) + legend.active = true; + if (legend.active) { + legend.element.classList.remove('inactive'); + activeSeries = activeSeries.concat(legend.series); + } else { + legend.element.classList.add('inactive'); } + }); - chart.update(); + chart.data.series = activeSeries.map(function(series) { return series.data; }); + if (useLabels) { + chart.data.labels = activeSeries.map(function(series) { return series.label; }); + } - if (options.onClick) { - options.onClick(chart, e); - } - }); + chart.update(); + } + + function handleClick(e, legendElement, legends, useLabels) { + var li = e.target; + if (li.parentNode !== legendElement || !li.hasAttribute('data-legend')) + return; + e.preventDefault(); + + var legendIndex = parseInt(li.getAttribute('data-legend')); + var legend = legends[legendIndex]; + legend.active = !legend.active; + applyLegendState(legends, useLabels); + + if (options.onClick) { + options.onClick(chart, e); + } } removeLegendElement(); @@ -206,7 +206,9 @@ if (options.clickable) { setSeriesClassNames(); - addClickHandler(legendElement, legends, useLabels); + legendElement.addEventListener('click', function(e) { + handleClick(e, legendElement, legends, useLabels); + }); } }; };