У нас есть некая таблица с данными. В ней одна из колонок состоит из цифр. Мы хотим чтобы цвет следующего значения подкрашивался зеленым цветом, если оно больше предыдущего. И наоборот — красным, если меньше. Как это сделать ниже.
Введение
Пример участка готовой таблицы:
Все было бы очень просто, если бы список формировался от последнего к первому. В таком случае следующий элемент будет знать значение предыдущего.
У нас же наоборот — последний элемент по дате формируется первым в списке. И он ничего не знает о следующей строке, ведь она еще не создана.
Для решение этой проблемы на бэке мы позже добавим одну дополнительную колонку, в которой будет сохранено предыдущее значение.
Svelte
Функция, которая присваивает цвет:
function compare(previousDeposit, currentDeposit) {
if (currentDeposit > previousDeposit) {
colour = 'green';
} else {
colour = 'red';
}
return colour;
}
В отдельной статье можно узнать как создать таблицу из данных массива на Svelte.
В одном из участков формировании таблицы, там где формируется сумма мы вызываем нашу функцию сравнения и передаем ей данные предыдущего и следующего значения, а возвращаем класс с цветом.
contenteditable="true"
bind:innerHTML="{deposit.deposit}"
on:input="{saveUsersData(deposit)}"
></div>
Про conteneditable (в этом задаче он не имеет значения) можно прочитать тут.
Python
На стороне бэкэнда мы забираем из БД данные отсортированные так, чтобы последняя запись по дате была первой.
В примере данные берутся с помощью SQLAlchemy. Останавливаться подробнее не будем. Нас интересуют в этой задаче другие участки.
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
Разберем подробнее.
Сначала мы получаем из БД данные такого формата:
'deposit': 71721,
'time': '00:58',
'user_id_time': '1_1605986079'},
{'date': '2020-10-30',
'deposit': 15890,
'time': '10:05',
'user_id_time': '1_1603985712'}]
Затем мы делаем ряд преобразований (в комментариях кода подробно все расписано) и получаем такой список тюплов:
'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
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.
