Blazorise SVG Chart Zoom and Pan

@code {
    private string lastEvent = "Wheel over the chart to zoom, or drag the plot area to pan.";

    private SvgChartViewport viewport;

    private readonly SvgChartGridLinesOptions gridLines = new()
    {
        Visible = true,
        Opacity = 0.2,
    };

    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        XAxis = new() { BeginAtZero = false, TickCount = 7, GridLines = new() { Visible = true, Opacity = 0.2 } },
        YAxis = new() { BeginAtZero = true, TickCount = 7 },
        Zoom = new() { Enabled = true, Mode = SvgChartZoomMode.XY, MaxZoom = 120 },
    };

    private readonly List<StorePerformance> stores =
    [
        new() { Traffic = 8, Sales = 42 },
        new() { Traffic = 12, Sales = 55 },
        new() { Traffic = 16, Sales = 64 },
        new() { Traffic = 22, Sales = 58 },
        new() { Traffic = 29, Sales = 91 },
        new() { Traffic = 34, Sales = 76 },
        new() { Traffic = 42, Sales = 112 },
        new() { Traffic = 48, Sales = 108 },
        new() { Traffic = 53, Sales = 132 },
        new() { Traffic = 61, Sales = 126 },
    ];

    private Task OnPointHovered( SvgChartPointEventArgs eventArgs )
    {
        lastEvent = $"Hovered {eventArgs.SeriesName} / {eventArgs.Category}: {eventArgs.Value}";

        return Task.CompletedTask;
    }

    private Task OnViewportChanged( SvgChartViewport changedViewport )
    {
        viewport = changedViewport;

        return Task.CompletedTask;
    }

    private Task OnZoomed( SvgChartZoomedEventArgs eventArgs )
    {
        lastEvent = $"Zoomed viewport X {eventArgs.Viewport.XMin:0.##}-{eventArgs.Viewport.XMax:0.##}, Y {eventArgs.Viewport.YMin:0.##}-{eventArgs.Viewport.YMax:0.##}";

        return Task.CompletedTask;
    }

    private Task OnPanned( SvgChartPannedEventArgs eventArgs )
    {
        lastEvent = $"Panned viewport X {eventArgs.Viewport.XMin:0.##}-{eventArgs.Viewport.XMax:0.##}, Y {eventArgs.Viewport.YMin:0.##}-{eventArgs.Viewport.YMax:0.##}";

        return Task.CompletedTask;
    }

    private sealed class StorePerformance
    {
        public double Traffic { get; set; }

        public double Sales { get; set; }
    }
}

@code {
    private SvgLineChart<CpuSample> chart;

    private SvgChartViewport viewport = new()
    {
        XMin = 2,
        XMax = 7,
    };

    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Visible = false },
        XAxis = new()
        {
            GridLines = new() { Visible = true },
        },
    };

    private readonly List<CpuSample> samples =
    [
        new() { Minute = "00:00", Value = 45 },
        new() { Minute = "00:05", Value = 52 },
        new() { Minute = "00:10", Value = 49 },
        new() { Minute = "00:15", Value = 64 },
        new() { Minute = "00:20", Value = 72 },
        new() { Minute = "00:25", Value = 68 },
        new() { Minute = "00:30", Value = 77 },
        new() { Minute = "00:35", Value = 70 },
        new() { Minute = "00:40", Value = 74 },
        new() { Minute = "00:45", Value = 82 },
    ];

    private async Task ZoomIn()
    {
        if ( chart is not null )
            await chart.ZoomIn();
    }

    private async Task ResetZoom()
    {
        if ( chart is not null )
            await chart.ResetZoom();
    }

    private Task OnViewportChanged( SvgChartViewport changedViewport )
    {
        viewport = changedViewport;

        return Task.CompletedTask;
    }

    private sealed class CpuSample
    {
        public string Minute { get; set; }

        public double Value { get; set; }
    }
}