machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

save the legends active status on a cache

Browse Source
This commit is contained in:
TechMiX 2020-10-28 22:22:07 +01:00
parent 0fe32835c9
commit 5d7a39a8f2
1 changed files with 39 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/app/components/statistics/chartist.component.ts
View File

@ -292,6 +292,7 @@ const defaultOptions = {
Chartist.plugins.legend = function (options: any) { Chartist.plugins.legend = function (options: any) {
let cachedDOMPosition; let cachedDOMPosition;
let cacheInactiveLegends: any = [];
// Catch invalid options // Catch invalid options
if (options && options.position) { if (options && options.position) {
if (!(options.position === 'top' || options.position === 'bottom' || options.position instanceof HTMLElement)) { if (!(options.position === 'top' || options.position === 'bottom' || options.position instanceof HTMLElement)) {
@ -314,11 +315,11 @@ Chartist.plugins.legend = function (options: any) {
return function legend(chart: any) { return function legend(chart: any) {
var isClicked = false; var isSelfUpdate = false;
chart.on('created', function (data: any) { chart.on('created', function (data: any) {
if (isClicked) if (isSelfUpdate)
return; return;
function removeLegendElement() { function removeLegendElement() {
@ -406,6 +407,17 @@ Chartist.plugins.legend = function (options: any) {
} }
} }
function updateChart(newSeries: any, newLabels:any, useLabels: any) {
chart.data.series = newSeries;
if (useLabels) {
chart.data.labels = newLabels;
}
isSelfUpdate = true;
chart.update();
isSelfUpdate = false;
}
function addClickHandler(legendElement: any, legends: any, seriesMetadata: any, useLabels: any) { function addClickHandler(legendElement: any, legends: any, seriesMetadata: any, useLabels: any) {
legendElement.addEventListener('click', function(e: any) { legendElement.addEventListener('click', function(e: any) {
const li = e.target; const li = e.target;
@ -419,9 +431,16 @@ Chartist.plugins.legend = function (options: any) {
if (!legend.active) { if (!legend.active) {
legend.active = true; legend.active = true;
li.classList.remove('inactive'); li.classList.remove('inactive');
var indexOfInactiveLegend = cacheInactiveLegends.indexOf(legendIndex, 0)
if (indexOfInactiveLegend > -1) {
cacheInactiveLegends.splice(indexOfInactiveLegend, 1);
}
} else { } else {
legend.active = false; legend.active = false;
li.classList.add('inactive'); li.classList.add('inactive');
cacheInactiveLegends.push(legendIndex);
const activeCount = legends.filter(function(legend: any) { return legend.active; }).length; const activeCount = legends.filter(function(legend: any) { return legend.active; }).length;
if (!options.removeAll && activeCount == 0) { if (!options.removeAll && activeCount == 0) {
@ -431,6 +450,8 @@ Chartist.plugins.legend = function (options: any) {
legends[i].active = true; legends[i].active = true;
legendElement.childNodes[i].classList.remove('inactive'); legendElement.childNodes[i].classList.remove('inactive');
} }
cacheInactiveLegends = [];
} }
} }
@ -444,14 +465,7 @@ Chartist.plugins.legend = function (options: any) {
} }
} }
chart.data.series = newSeries; updateChart(newSeries, newLabels, useLabels);
if (useLabels) {
chart.data.labels = newLabels;
}
isClicked = true;
chart.update();
isClicked = false;
if (options.onClick) { if (options.onClick) {
options.onClick(chart, e); options.onClick(chart, e);
@ -470,12 +484,22 @@ Chartist.plugins.legend = function (options: any) {
// Check if given class names are viable to append to legends // Check if given class names are viable to append to legends
const classNamesViable = Array.isArray(options.classNames) && options.classNames.length === legendNames.length; const classNamesViable = Array.isArray(options.classNames) && options.classNames.length === legendNames.length;
var activeSeries = [];
var activeLabels = [];
// Loop through all legends to set each name in a list item. // Loop through all legends to set each name in a list item.
legendNames.forEach(function (legend: any, i: any) { legendNames.forEach(function (legend: any, i: any) {
const legendText = legend.name || legend; const legendText = legend.name || legend;
const legendSeries = legend.series || [i]; const legendSeries = legend.series || [i];
const li = createNameElement(i, legendText, classNamesViable); const li = createNameElement(i, legendText, classNamesViable);
const isActive: boolean = !(cacheInactiveLegends.indexOf(i) > -1);
if (isActive) {
activeSeries.push(seriesMetadata[i].data);
activeLabels.push(seriesMetadata[i].label);
} else {
li.classList.add('inactive');
}
legendElement.appendChild(li); legendElement.appendChild(li);
legendSeries.forEach(function(seriesIndex: any) { legendSeries.forEach(function(seriesIndex: any) {
@ -485,8 +509,9 @@ Chartist.plugins.legend = function (options: any) {
legends.push({ legends.push({
text: legendText, text: legendText,
series: legendSeries, series: legendSeries,
active: true active: isActive
}); });
}); });
appendLegendToDOM(legendElement); appendLegendToDOM(legendElement);
@ -495,6 +520,9 @@ Chartist.plugins.legend = function (options: any) {
setSeriesClassNames(); setSeriesClassNames();
addClickHandler(legendElement, legends, seriesMetadata, useLabels); addClickHandler(legendElement, legends, seriesMetadata, useLabels);
} }
updateChart(activeSeries, activeLabels, useLabels);
}); });
}; };
}; };