25.10.31, Chad, Comet, Giga, Projects, Blazor, ChartDirector

25.10.31, Chad, Comet, Giga, Projects, Blazor, ChartDirector 

251031_Chad_ChartDirector_Blazor_Text_Need_Formatting.docx

F:\Projects\VS\Blazor\BlazorSln\BlazorSln.sln

---------------------------------------------

Blazor + RazorPages
F:\Projects\VS\Blazor\BlazorSln\BlazorWebApp01\BlazorWebApp01.csproj

F:\Projects\VS\Blazor\BlazorSln\BlazorWebApp055\BlazorWebApp055.csproj

RealTime Finance 15 Charts + Bars Cahrt in Blazor + RazorPage

---------------------------------------------

https://ask.chadgpt.ru/share/d7c6177e-2d39-457e-82c7-21219885d871

Chad - на Половине - еще остались исправления

F:\Projects\VS\Blazor\BlazorSln\BlazorWebApp05\BlazorWebApp05.csproj

--------------------------------------------

Comet - испортил код. Giga его исправил.

251031_Comet_Formating_Code_From_Chad_And_Generate_Code__DoesNotWork.pdf

F:\Projects\VS\Blazor\BlazorSln\BlazorWebApp052\BlazorWebApp052.csproj

Кнопки прыгнули вниз. Не работает кнопка Stop
При  форматироваеиии кода внес свое понимание

--------------------------------------------

https://giga.chat/link/gcsOqkIszL

Giga - работает.

F:\Projects\VS\Blazor\BlazorSln\BlazorWebApp053\BlazorWebApp053.csproj

Да, я постарался представить наиболее качественные и проверенные варианты реализации каждого аспекта в вашем проекте. Давайте разберём каждый ключевой момент подробнее:
📌 Программа запуска (Program.cs)
Этот фрагмент остаётся неизменённым, так как он необходим для базовой конфигурации приложения Blazor и регистрации служб. Никаких проблем с ним нет, поэтому я оставил его без изменений.
📌 Логика генератора данных (DataTicker.cs)
Вариант №1: Использование стандартного таймера System.Timers.Timer
Преимущества: прост в настройке и понимании, совместим практически со всеми платформами.
Недостатки: потенциальная проблема с повторным выполнением обработчика (Elapse), если не предпринять меры против повторных вызовов.
Такой подход хорош для большинства случаев, однако стоит рассмотреть более продвинутый вариант.
Вариант №2: Периодический таймер (PeriodicTimer)
Преимущества: гарантия отсутствия повторного вызова обработчика, аккуратнее управление ресурсом и чистота реализации.
Недостатки: небольшая дополнительная зависимость от асинхронного программирования.
public sealed class DataTicker : IAsyncDisposable
{
    private readonly PeriodicTimer _timer;
    private bool _running;
    private readonly Random _rng = new Random();

    public double[] Current { get; private set; } = new double[5] { 100, 100, 100, 100, 100 };
    public event Action? OnTick;

    public DataTicker()
    {
        _timer = new PeriodicTimer(TimeSpan.FromSeconds(1)); // Каждый 1 сек
    }

    public async Task Start()
    {
        if (_running) return;
        _running = true;
        while (await _timer.WaitForNextTickAsync()) // Очередной тик
        {
            UpdateData();
            OnTick?.Invoke();
        }
    }

    private void UpdateData()
    {
        var newData = new double[5]; // Новое значение данных
        for (int i = 0; i < 5; i++) newData[i] = _rng.NextDouble() * 100;
        Current = newData;
    }

    public async ValueTask DisposeAsync()
    {
        _running = false;
        await _timer.DisposeAsync();
    }
}
Этот подход рекомендован, если важна стабильность и безопасность многопоточной среды.
📌 Представление графика (Chart.razor)
Я использовал следующий оптимальный подход:
Минималистичное отображение графика с возможностью принудительного обновления.
Автоматическое восстановление активности при переключении страницы.
Возможности приостановки и продолжения процесса рендеринга.
@page "/chart"
@inject DataTicker Ticker
@implements IDisposable

<h3>Realtime SVG Chart</h3>

<div style="margin-bottom:8px;">
    <button class="btn btn-primary" @onclick="Start" disabled="@Ticker.IsRunning">Start</button>
    <button class="btn btn-primary" @onclick="Stop" disabled="@(!Ticker.IsRunning)">Stop</button>
</div>

@if (svg is null)
{
    <p>Loading...</p>
}
else
{
    @((MarkupString)svg)
}

@code {
    private string? svg;

    protected override void OnInitialized()
    {
        Ticker.OnTick += HandleTick;
        RenderChart(Ticker.Current);
    }

    private void HandleTick()
    {
        RenderChart(Ticker.Current);
        InvokeAsync(StateHasChanged);
    }

    private void RenderChart(double[] data)
    {
        var chart = new ChartDirector.XYChart(250, 250);
        chart.setPlotArea(30, 20, 200, 200);
        chart.addBarLayer(data);
        chart.xAxis().setLabels(new[] { "Mon", "Tue", "Wed", "Thu", "Fri" });
        byte[] svgBytes = chart.makeChart(ChartDirector.Chart.SVG);
        svg = System.Text.Encoding.UTF8.GetString(svgBytes);
    }

    private void Start()
    {
        if (!Ticker.IsRunning) Ticker.Start();
    }

    private void Stop()
    {
        if (Ticker.IsRunning) Ticker.Stop();
    }

    public void Dispose()
    {
        Ticker.OnTick -= HandleTick;
    }
}
Эта реализация решает проблему одновременного выполнения рендеров и обеспечивает хорошую управляемость.
📌 Шаблон навигационного меню (NavMenu.razor)
Навигационное меню оставлено стандартным и простым. Оно идеально подходит для небольших проектов и не нуждается в значительных изменениях.
🔥 Итог:
Я представил оптимальное сочетание проверенных методик и лучших практик.
Ваш проект готов к дальнейшему развитию и масштабированию.
Показанные подходы обеспечивают надежность и скорость работы, предотвращая возможные проблемы с производительностью и надежностью.

Вот исправленный код для Comet от GIga

@page "/chart"

@rendermode InteractiveServer

@inject DataTicker Ticker

<h3 id="chart-title">Realtime SVG Chart</h3>

<div role="img" aria-labelledby="chart-title">

    @if (svg == null)

    {

        <p>Loading...</p>

    }

    else

    {

        @((MarkupString)svg)

    }

</div>

<div style="margin-bottom:8px;">

    <button class="btn btn-primary" @onclick="OnStart" disabled="@Ticker.IsRunning" aria-pressed="@Ticker.IsRunning">Start</button>

    <button class="btn btn-primary" @onclick="OnStop" disabled="@(!Ticker.IsRunning)" aria-pressed="@(!Ticker.IsRunning)">Stop</button>

</div>

@code {

    private string? svg;

    private int rendering = 0;

    private bool disposed;

    protected override void OnInitialized()

    {

        Ticker.OnTick += HandleTick;

        RenderChart(Ticker.Current);

    }

    private void OnStart()

    {

        Ticker.Start();

        RenderChart(Ticker.Current);

        StateHasChanged();

    }

    private void OnStop()

    {

        Ticker.Stop();

        StateHasChanged();  // Важно вызвать, чтобы UI отразил изменение статуса

    }

    private async void HandleTick()

    {

        if (disposed) return;

        if (Interlocked.Exchange(ref rendering, 1) == 1) return;

        try

        {

            RenderChart(Ticker.Current);

            await InvokeAsync(() => { if (!disposed) StateHasChanged(); });

        }

        finally

        {

            Interlocked.Exchange(ref rendering, 0);

        }

    }

    private void RenderChart(double[] data)

    {

        var chart = new ChartDirector.XYChart(250, 250);

        chart.setPlotArea(30, 20, 200, 200);

        chart.addBarLayer(data);

        chart.xAxis().setLabels(new[] { "Mon", "Tue", "Wed", "Thu", "Fri" });

        byte[] svgBytes = chart.makeChart(ChartDirector.Chart.SVG);

        svg = System.Text.Encoding.UTF8.GetString(svgBytes);

    }

    public void Dispose()

    {

        disposed = true;

        Ticker.OnTick -= HandleTick;

        Ticker.Stop();

    }

}