Skip to content

Commit

Permalink
Фильтр по датам fix #4 (#30)
Browse files Browse the repository at this point in the history
  • Loading branch information
@enovikov11
enovikov11 authored Oct 2, 2023
1 parent d08ef44 commit 10e39f8
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 64 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,9 +135,9 @@ https://t.me/enovikov11

### Одна логика реализована на двух языках

Код `index.html` и `utils.py` одинаково организован и синхронизирован, использует одинаковые библиотеки где это возможно, чтобы использовать сильные стороны языков:
- JavaScript работает в браузере на смартфонах, компьютерах, не нужно устанавливать
- В Python удобно экспериментировать с данными, есть хорошие библиотеки
Код `index.html` и `utils.py` похож и использует одинаковые библиотеки насколько это возможно, чтобы использовать сильные стороны языков:
- JavaScript работает в браузере на смартфонах, компьютерах, не нужно устанавливать, упор на UI/UX
- В Python удобно экспериментировать с данными и писть SQLки, есть хорошие библиотеки вроде Numpy и Pandas

### Можно ли выполнять кастомные запросы в браузере?

Expand Down
156 changes: 95 additions & 61 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,34 +152,6 @@ <h3><a href="#">RtxData</a></h3>
results.innerText = `Ошибка: ${e}`;
}

function display(item, type = 'div') {
if (item instanceof HTMLElement) {
results.appendChild(item);
} else {
const element = document.createElement(type);
element.innerText = String(item);
element.id = String(item);
results.appendChild(element);
}
}

function displayHeader(text) {
const a = document.createElement('a');
const h3 = document.createElement('h3');

a.innerText = h3.id = h3.innerText = text;
a.href = "#" + encodeURIComponent(a.innerText);
document.querySelector("#nav").appendChild(a);
results.appendChild(h3);
}

function displayQuery(query) {
const queryDiv = document.createElement("div");
queryDiv.innerHTML = '<pre><code class="language-sql"></code></pre>';
queryDiv.querySelector('code').innerText = query;
display(queryDiv);
}

function formatDateString(date) {
const [d, m, y] = date.split(' ')[0].split('.');
return `${y}-${m.padStart(2, '0')}-${d.padStart(2, '0')}`;
Expand Down Expand Up @@ -222,10 +194,32 @@ <h3><a href="#">RtxData</a></h3>
return queries
}

function displayDatePlot(df, title) {
const div = document.createElement('div');
display(div);
function element(item, type = 'div') {
const element = document.createElement(type);
element.innerText = String(item);
element.id = String(item);
return element;
}

function headerElement(text) {
const a = document.createElement('a');
const h3 = document.createElement('h3');

a.innerText = h3.id = h3.innerText = text;
a.href = "#" + encodeURIComponent(a.innerText);
document.querySelector("#nav").appendChild(a);
return h3;
}

function queryElement(query) {
const queryDiv = document.createElement("div");
queryDiv.innerHTML = '<pre><code class="language-sql"></code></pre>';
queryDiv.querySelector('code').innerText = query;
return queryDiv;
}

function datePlotElement(df, title) {
const div = document.createElement('div');
const dataObj = Object.fromEntries(df.values), dates = df.values.map(e => new Date(e[0]));
const minDate = new Date(Math.min(...dates)), maxDate = new Date(Math.max(...dates));
const x = [], y = [];
Expand All @@ -238,21 +232,23 @@ <h3><a href="#">RtxData</a></h3>

Plotly.newPlot(div, [{ type: 'scatter', mode: 'lines', x, y, line: { shape: 'linear' } }],
{ title, xaxis: { title: '' }, yaxis: { title: '' } });
return div;
}

function displayTotalPie(df, title) {
function totalPieElement(df, title) {
const div = document.createElement('div');
display(div);

Plotly.newPlot(div, [{
type: 'pie',
labels: df.values.map(d => d[0]),
values: df.values.map(d => d[1]),
textinfo: pieNoSum.checked ? 'percent' : 'value+percent'
}], { title, width: 700 });

return div;
}

function displayTable(df, title) {
function tableElement(df, title) {
const table = document.createElement('table');
const thead = document.createElement('thead');
const headerRow = document.createElement('tr');
Expand All @@ -275,40 +271,79 @@ <h3><a href="#">RtxData</a></h3>
tbody.appendChild(tr);
});
table.appendChild(tbody);
display(table);
return table;
}

function dataElement(queryText, name, overrides) {
try {
for (let key in overrides) {
db.create_function(key, overrides[key]);
}

const df = query(queryText);
if (!df || df.values.length === 0) {
return (element('Нет данных'));
} else if (df.columns.length === 2 && df.columns[0] === 'date') {
return (datePlotElement(df, name));
} else if (df.columns.length === 2 && df.columns[1] === 'total') {
return (totalPieElement(df, name));
} else {
return (tableElement(df, name));
}
} catch (e) {
console.error(e);
return (element(`Ошибка ${e}`));
}
}

function dashboard(queries) {
for (let item in queries) {
try {
const dates = new Set();
db.create_function("dt", dt => {
dates.add(dt.slice(0, 7));
return true;
});
const queryText = queries[item];
const container = document.createElement("div");
results.appendChild(container);

const queryText = queries[item];
const df = query(queryText);
container.appendChild(headerElement(item));
container.appendChild(queryElement(queryText));

if (dates.size > 0) {
console.log(dates);
}
const filter = document.createElement("div");
container.appendChild(filter);

const res = document.createElement("div");
container.appendChild(res);

displayHeader(item);
displayQuery(queryText);

if (!df || df.values.length === 0) {
display('Нет данных')
} else if (df.columns.length === 2 && df.columns[0] === 'date') {
displayDatePlot(df, item);
} else if (df.columns.length === 2 && df.columns[1] === 'total') {
displayTotalPie(df, item);
} else {
displayTable(df, item);
function setResult(overrides) {
res.innerHTML = '';
res.appendChild(dataElement(queryText, item, overrides));
}

const dates = new Set();
setResult({
dt(val) {
dates.add(val.slice(0, 7));
return true;
}
} catch (e) {
console.error(e);
display(`Ошибка ${e}`);
});

if (dates.size > 0) {
const datesArr = ['all', ...Array.from(dates).sort()];
const select = document.createElement('select');
select.addEventListener('change', ({ target }) => {
setResult({
dt(val) {
dates.add();
return target.value === 'all' || val.slice(0, 7) === target.value;
}
});
});

datesArr.forEach(opt => {
const option = document.createElement('option');
option.text = option.value = opt;
select.appendChild(option);
});

filter.innerText = "Дата:"
filter.appendChild(select);
}
}

Expand Down Expand Up @@ -363,7 +398,6 @@ <h3><a href="#">RtxData</a></h3>
}
}

db.create_function("dt", dt => true);
db.exec(initQuery);
}

Expand Down

0 comments on commit 10e39f8

Please sign in to comment.