Svelte — графики

Admin Svelte

Реализация интерактивных графиков (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 = []

Загружаем данные в 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
    });
});

Данные для графиков:

let chartRef;
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]}]

Функция обновления графиков:

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}]
    };
}

Обновление ставим на кнопки фильтрации:

// Фильтрация таблиц
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>

Вывод графика:

<Chart data={data} type="bar" colors={colors} height="400" bind:this={chartRef}/>

На сайте отсутствует реклама! Значете почему?

Помогать людям - моё хобби. А навыки разработчика позволяют не парится нулевой монетизизацией этого сайта. Хотя...

Если вам помогла информация, то даже от доната в 40 рублей мне будет приятно. Докину немного, куплю латте в макдаке, вспомню за чей счет банкет и карма вам зачтется!

Но и просто оставленный комментарий благодарности ниже принесет мне улыбку радости :)

А если захочется написать всякие гадости с переходом на личности, да тоже не стесняйтесь, но обычно я отправляю такое в спам. Люблю, когда дома чисто.

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

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