Jmix 1.7: Pivot Table: подстветка ячейки цветом, если значение больше/меньше значения в ячейке слева в тойже строке

Вопросы и проблемы
1

Имеем:

Jimix 1.7.2

Дополнение Pivot table.

Мне нужно подстветить ячейки цветом, если значение больше/меньше значения в ячейке слева в той же строке.

Гугл мне выдал такое решение:

$("#output").pivotUI(data, {
    // Ваша конфигурация...
    
    onRefresh: function(config) {
        $(".pvtTable tbody tr").each(function() {
            var prevValue = null;
            
            $(this).find("td.pvtVal").not(".pvtTotal, .pvtGrandTotal").each(function() {
                // Сброс стилей перед новой проверкой
                $(this).css({ "background-color": "", "color": "" });
                
                var currentValue = parseFloat($(this).text().replace(/[^0-9.-]/g, ""));
                
                if (prevValue !== null && !isNaN(currentValue) && !isNaN(prevValue)) {
                    if (currentValue > prevValue) {
                        // Значение выросло — мягкий зеленый
                        $(this).css({
                            "background-color": "#d4edda",
                            "color": "#155724"
                        });
                    } else if (currentValue < prevValue) {
                        // Значение уменьшилось — мягкий красный
                        $(this).css({
                            "background-color": "#f8d7da",
                            "color": "#721c24"
                        });
                    }
                }
                
                prevValue = currentValue;
            });
        });
    }
});

но я не могу понять где его добавить.

Подскажите, пожалуйста.

3

Добрый день!

JS код можно выполнять с помощью:

import com.vaadin.ui.JavaScript;

JavaScript.getCurrent().execute("console.log('test')");

Правда, в текущем виде приведённый код не выполнить, потому что он должен встроиться в конфигурацию PivotTable при его создании. Т.к. переопределять клиентскую часть аддона сложно (+ reverse engineering), то проще было бы переписать этот код и выполнять его при открытии экрана. За динамической подкраской, когда DOM дерево компонента будет меняться, можно оставить следить MutationObserver.

Например:

Execute JS on AfterShow 
@Subscribe
public void onAfterShow(AfterShowEvent event) {
    String js = """
               (() => {
                 const root = document.querySelector('.jmix-pivot-table');
                 const paint = () => {
                   root?.querySelectorAll('tbody tr').forEach(tr => {
                     let prev = null;
                     tr.querySelectorAll('td.pvtVal').forEach(td => {
                       td.style.background = '';
                       td.style.color = '';
    
                       const cur = Number(td.dataset.value);
    
                       if (prev != null && !isNaN(cur)) {
                         if (cur > prev) {
                           td.style.background = '#d4edda';
                           td.style.color = '#155724';
                         } else if (cur < prev) {
                           td.style.background = '#f8d7da';
                           td.style.color = '#721c24';
                         }
                       }
    
                       prev = isNaN(cur) ? prev : cur;
                     });
                   });
                 };
    
                 paint();
    
                 new MutationObserver(paint)
                   .observe(root, { childList: true, subtree: true });
               })();
            """;

    JavaScript.getCurrent().execute(js);
}

Можно ещё попробовать вынести в AbstractExtension (см. Component and UI Extensions | Client-Server Integration | Framework | Vaadin Docs), чтобы можно было переиспользовать в разных экранах.

1 лайк