Untitled

// Add this input box to your HTML
var filterControls = document.createElement('div');
filterControls.style.margin = '10px';
filterControls.innerHTML = `
    <div style="margin-bottom: 10px;">
        <label>Percentage Filter: </label>
        <input type="text" id="percentageExpression" placeholder="e.g. >20 or <56" style="width: 120px;">
        <button id="applyExpressionFilter">Apply Filter</button>
        <button id="clearExpressionFilter">Clear</button>
        <span id="filterStatus" style="color: gray; margin-left: 10px;">(Inactive)</span>
    </div>
`;
document.body.insertBefore(filterControls, document.getElementById('myGrid'));

// Function to parse expression
function parseFilterExpression(expression) {
    if (!expression || typeof expression !== 'string') {
        return null;
    }

    // Remove all spaces from expression
    expression = expression.replace(/\s/g, '');

    // Regular expression to match patterns like >20, <56, =30, 45 (equals by default)
    const regex = /^([<>=])?(\d+)$/;
    const match = expression.match(regex);

    if (!match) {
        return null;
    }

    return {
        operator: match[1] || '=', // If no operator is provided, use '='
        value: parseInt(match[2])
    };
}

// Function to create filter based on expression
function createExpressionFilter(parsedExpression) {
    if (!parsedExpression) return null;

    return function(item) {
        switch(parsedExpression.operator) {
            case '>':
                return item.Percentage > parsedExpression.value;
            case '<':
                return item.Percentage < parsedExpression.value;
            case '=':
                return item.Percentage === parsedExpression.value;
            default:
                return true;
        }
    };
}

// Current filter expression
let currentFilterExpression = null;

// Add event listeners
document.getElementById('applyExpressionFilter').addEventListener('click', function() {
    const expressionInput = document.getElementById('percentageExpression');
    const statusSpan = document.getElementById('filterStatus');
    
    const parsedExpression = parseFilterExpression(expressionInput.value);
    
    if (parsedExpression) {
        currentFilterExpression = parsedExpression;
        dataView.setFilter(createExpressionFilter(parsedExpression));
        statusSpan.textContent = `(Active: ${parsedExpression.operator}${parsedExpression.value})`;
        statusSpan.style.color = 'green';
    } else {
        // Invalid expression
        statusSpan.textContent = '(Invalid expression)';
        statusSpan.style.color = 'red';
        setTimeout(() => {
            statusSpan.textContent = currentFilterExpression ? 
                `(Active: ${currentFilterExpression.operator}${currentFilterExpression.value})` : 
                '(Inactive)';
            statusSpan.style.color = currentFilterExpression ? 'green' : 'gray';
        }, 2000);
    }
});

document.getElementById('clearExpressionFilter').addEventListener('click', function() {
    const expressionInput = document.getElementById('percentageExpression');
    const statusSpan = document.getElementById('filterStatus');
    
    expressionInput.value = '';
    currentFilterExpression = null;
    dataView.setFilter(null);
    statusSpan.textContent = '(Inactive)';
    statusSpan.style.color = 'gray';
});

// Add input validation and real-time feedback
document.getElementById('percentageExpression').addEventListener('input', function() {
    const statusSpan = document.getElementById('filterStatus');
    const parsedExpression = parseFilterExpression(this.value);
    
    if (this.value === '') {
        statusSpan.textContent = currentFilterExpression ? 
            `(Active: ${currentFilterExpression.operator}${currentFilterExpression.value})` : 
            '(Inactive)';
        statusSpan.style.color = currentFilterExpression ? 'green' : 'gray';
    } else if (parsedExpression) {
        statusSpan.textContent = '(Valid expression)';
        statusSpan.style.color = 'blue';
    } else {
        statusSpan.textContent = '(Invalid expression)';
        statusSpan.style.color = 'red';
    }
});