Реализация интерактивных графиков (charts) на svelte.
Графики будем строить на frappe, через модуль сделанный специально для svelte. Называется модуль svelte-frappe-charts. Более подробно можно узнать здесь:
github.com
Конфигурацию frappe можно узнать здесь:
frappe.io
На выходе получим такое:
Устанавливаем svelte-frappe-charts:
npm i -S svelte svelte-frappe-charts
Основные элементы. Читайте зачем нужен itemsBackup в статье о фильтрации таблицы на svelte.
import {onMount} from "svelte";
import {getFetch} from '../assets/js/main';
import Chart from 'svelte-frappe-charts';
// Основные элементы
let items = [];
let itemsBackup = [];
// Графики
let chartLabels = []
let chartDeposits = []
import {getFetch} from '../assets/js/main';
import Chart from 'svelte-frappe-charts';
// Основные элементы
let items = [];
let itemsBackup = [];
// Графики
let chartLabels = []
let chartDeposits = []
Загружаем данные в svelte асинхронно:
// Первоначальная загрузка
onMount(async () => {
getFetch('deposit/get-deposits/').then((r) => {
items = r;
itemsBackup = r;
// Для графиков
r.forEach(function (x) {
chartLabels.push(x.date)
})
r.forEach(function (x) {
chartDeposits.push(x.deposit)
})
chartLabels.reverse().length = 20
chartDeposits.reverse().length = 20
});
});
onMount(async () => {
getFetch('deposit/get-deposits/').then((r) => {
items = r;
itemsBackup = r;
// Для графиков
r.forEach(function (x) {
chartLabels.push(x.date)
})
r.forEach(function (x) {
chartDeposits.push(x.deposit)
})
chartLabels.reverse().length = 20
chartDeposits.reverse().length = 20
});
});
Данные для графиков:
let chartRef;
let colors = ['green']
let data = {
labels: chartLabels,
datasets: [{values: chartDeposits}]
};
let colors = ['green']
let data = {
labels: chartLabels,
datasets: [{values: chartDeposits}]
};
Внутри содержатся данные такого формата:
labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
datasets: [{values: [10, 12, 3, 9, 8, 15, 9]}]
datasets: [{values: [10, 12, 3, 9, 8, 15, 9]}]
Функция обновления графиков:
function updateData(items) {
chartLabels = []
chartDeposits = []
items.forEach(function (x) {
chartLabels.push(x.date)
})
items.forEach(function (x) {
chartDeposits.push(x.deposit)
})
chartLabels.reverse().length = 20
chartDeposits.reverse().length = 20
data = {
labels: chartLabels,
datasets: [{values: chartDeposits}]
};
}
chartLabels = []
chartDeposits = []
items.forEach(function (x) {
chartLabels.push(x.date)
})
items.forEach(function (x) {
chartDeposits.push(x.deposit)
})
chartLabels.reverse().length = 20
chartDeposits.reverse().length = 20
data = {
labels: chartLabels,
datasets: [{values: chartDeposits}]
};
}
Обновление ставим на кнопки фильтрации:
// Фильтрация таблиц
function displayOnlyWithNotes() {
items = items.filter(el => el.description !== '');
updateData(items)
}
function displayAllNotes() {
items = itemsBackup;
updateData(itemsBackup)
}
function displayOnlyWithNotes() {
items = items.filter(el => el.description !== '');
updateData(items)
}
function displayAllNotes() {
items = itemsBackup;
updateData(itemsBackup)
}
Кнопки фильтрации:
<div class="menu-second">
<div class="link" on:click={displayOnlyWithNotes}>Показать только с записями</div>
<div class="link" on:click={displayAllNotes}>Показать все</div>
</div>
<div class="link" on:click={displayOnlyWithNotes}>Показать только с записями</div>
<div class="link" on:click={displayAllNotes}>Показать все</div>
</div>
Вывод графика:
<Chart data={data} type="bar" colors={colors} height="400" bind:this={chartRef}/>
Если данные не подтягиваются, воспользоваться примером из статьи по асинхронной загрузке в svelte.
