Breadcrumbs

pie-chart-breadcrumbs.ts

const breadcrumbs = [{
    filterKey: 'Base',
    filterValue: 'Base',
    nextKey: 'Region'
}];

function addLevel({ nextKey, filterKey, filterValue }) {
    const existing = breadcrumbs.find((breadcrumb) => breadcrumb.filterKey === filterKey);
    if (existing) {
        existing.filterValue = filterValue;
    } else {
        breadcrumbs.push({
            filterKey,
            filterValue,
            nextKey
        });
    }
    const index = breadcrumbs.findIndex((breadcrumb) => breadcrumb.filterKey === filterKey);
    gotoLevel(index);
}

function gotoLevel(index) {
    console.log(breadcrumbs[index].filterValue);
    breadcrumbs.splice(index + 1);
}

function getText(){
    return breadcrumbs.map((breadcrumb) => breadcrumb.filterValue).join(' > ');
}

addLevel({ filterKey: 'Region', filterValue: 'Karur', nextKey: 'District' });
console.log(getText());
addLevel({ filterKey: 'District', filterValue: 'Karur', nextKey: null });
console.log(getText());
// addLevel({ filterKey: 'Region', filterValue: 'Chennai' });
console.log(getText());
gotoLevel(0);
console.log(getText());