Python + Svelte – tables – how to compare the sum with the previous one and put down colors

2 min


We have some kind of data table. One of the columns in it consists of numbers. We want the next value to be tinted green if it is larger than the previous one. And vice versa – red if less. How to do it below.

Introduction

An example of a plot of a finished table:

Everything would be very simple if the list was formed from the last to the first. In this case, the next element will know the value of the previous one.

In our case, on the contrary, the last element by date is formed first in the list. And he doesn’t know anything about the next line, because it hasn’t been created yet.

To solve this problem on the backing, we will later add one additional column in which the previous value will be saved.

Svelte

The function that assigns the color:

let color;
function compare(previousDeposit, currentDeposit) {
if (currentDeposit > previousDeposit) {
color = ‘green’;
} else {
color = ‘red’;
}

return color;
}

In a separate article, you can learn how to create a table from array data in Svelte.

In one of the sections of the table formation, where the sum is formed, we call our comparison function and pass it the data of the previous and next values, and return the class with the color.

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

About conteneditable (in this task it does not matter) can be read here.

Python

On the backend side, we fetch data from the database sorted so that the last record by date is the first.

In the example the data is taken using SQLAlchemy. We will not dwell in more detail. We are interested in other areas in this problem.

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()]

# Let’s take data from one column from the list of tuples
deposits = [i[‘deposit’] for i in response]

# Find out the number of elements to walk less by 1 time
length = len(deposits)

# Remove the first element, we don’t need it
deposits.pop(0)

# Add a new column to our list
i = 0
for x in response:
i += 1
if length > i:
# Pick up the first item and remove it from the list
x[‘previous_deposit’] = deposits.pop(0)

return response

Let’s take a closer look.

First, we get data from the database in the following format:

[{‘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’}]

Then we make a number of transformations (everything is detailed in the code comments) and we get the following list of tyules:

[{‘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’}]

That’s all.

Simple case

If the column is sorted from first to last.

Svelte

<script>
let color;
let previousDeposit = 0;
function compare(currentDeposit) {
if (currentDeposit > previousDeposit) {
color = ‘green’;
} else {
color = ‘red’;
}

previousDeposit = currentDeposit;

return color;
}
script>

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

Python

And on python, you do not need to do any unnecessary transformations, except for receiving data through asc

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


0 Comments

Leave a Reply