Python + Svelte — таблицы — как сравнить сумму с предыдущей и проставить цвета

Admin Python, SQLAlchemy, Svelte

У нас есть некая таблица с данными. В ней одна из колонок состоит из цифр. Мы хотим чтобы цвет следующего значения подкрашивался зеленым цветом, если оно больше предыдущего. И наоборот — красным, если меньше. Как это сделать ниже.

Введение

Пример участка готовой таблицы:

Все было бы очень просто, если бы список формировался от последнего к первому. В таком случае следующий элемент будет знать значение предыдущего.

У нас же наоборот — последний элемент по дате формируется первым в списке. И он ничего не знает о следующей строке, ведь она еще не создана.

Для решение этой проблемы на бэке мы позже добавим одну дополнительную колонку, в которой будет сохранено предыдущее значение.

Svelte

Функция, которая присваивает цвет:

let colour;
function compare(previousDeposit, currentDeposit) {
    if (currentDeposit > previousDeposit) {
        colour = 'green';
    } else {
        colour = 'red';
    }

    return colour;
}

В отдельной статье можно узнать как создать таблицу из данных массива на Svelte.

В одном из участков формировании таблицы, там где формируется сумма мы вызываем нашу функцию сравнения и передаем ей данные предыдущего и следующего значения, а возвращаем класс с цветом.

<div class="cell deposit edit {compare(deposit.previous_deposit, deposit.deposit)}"
     contenteditable="true"
     bind:innerHTML="{deposit.deposit}"
     on:input="{saveUsersData(deposit)}"
></div>

Про conteneditable (в этом задаче он не имеет значения) можно прочитать тут.

Python

На стороне бэкэнда мы забираем из БД данные отсортированные так, чтобы последняя запись по дате была первой.

В примере данные берутся с помощью SQLAlchemy. Останавливаться подробнее не будем. Нас интересуют в этой задаче другие участки.

def get_deposits(user_id):
    response = [x.serialize for x in db.session.query(Budget).filter_by(user_id=user_id).order_by(db.desc(Budget.time)).all()]

    # Заберем из списка тюплов данные из одной колонки
    deposits = [i['deposit'] for i in response]

    # Узнаем кол-во элементов чтобы пройтись меньше на 1 раз
    length = len(deposits)

    # Удалим первый элемент, он нам не нужен
    deposits.pop(0)

    # Добавим в наш список новую колонку
    i = 0
    for x in response:
        i += 1
        if length > i:
            # Заберем первый элемент и удалим его из списка
            x['previous_deposit'] = deposits.pop(0)

    return response

Разберем подробнее.

Сначала мы получаем из БД данные такого формата:

[{'date': '2020-11-14',
  'deposit': 71721,
  'time': '00:58',
  'user_id_time': '1_1605986079'},
 {'date': '2020-10-30',
  'deposit': 15890,
  'time': '10:05',
  'user_id_time': '1_1603985712'}]

Затем мы делаем ряд преобразований (в комментариях кода подробно все расписано) и получаем такой список тюплов:

[{'date': '2020-11-14',
  'deposit': 71721,
  'time': '00:58',
  'previous_deposit': 15890,
  'user_id_time': '1_1605986079'},
 {'date': '2020-10-30',
  'deposit': 15890,
  'time': '10:05',
  'previous_deposit': 17518,
  'user_id_time': '1_1603985712'}]

Вот и все.

Простой случай

Если колонка отсортирована от первого к последнему.

Svelte

<script>
let colour;
let previousDeposit = 0;
function compare(currentDeposit) {
    if (currentDeposit > previousDeposit) {
        colour = 'green';
    } else {    
        colour = 'red';
    }

    previousDeposit = currentDeposit;

    return colour;
}
</script>

<div class="cell deposit edit {compare(deposit.deposit)}"
     contenteditable="true"
     bind:innerHTML="{deposit.deposit}"
     on:input="{saveUsersData(deposit)}"
></div>

Python

А на питоне делать никаких лишних преобразований не нужно, кроме получения данные через asc.

response = [x.serialize for x in db.session.query(Budget).filter_by(user_id=user_id).order_by(db.asc(Budget.time)).all()]

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Python + Svelte — таблицы — как сравнить сумму с предыдущей и проставить цвета"