Blazorise SVG Chart Annotations

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Visible = false },
    };

    private readonly SvgChartAnnotationLabelOptions thresholdLabel = new()
    {
        Visible = true,
        Text = "Target",
        Position = SvgChartAnnotationLabelPosition.End,
        BackgroundColor = "#ffffff",
        Border = new() { Color = Color.Danger, Width = 1, Radius = 3 },
    };

    private readonly SvgChartAnnotationLabelOptions releaseLabel = new()
    {
        Visible = true,
        Text = "Release",
        Position = SvgChartAnnotationLabelPosition.Start,
        BackgroundColor = "#ffffff",
        Border = new() { Color = Color.Warning, Width = 1, Radius = 3 },
    };

    private readonly SvgChartAnnotationLabelOptions noteLabel = new()
    {
        Visible = true,
        Text = "Stabilized",
        Position = SvgChartAnnotationLabelPosition.Center,
        BackgroundColor = "#ffffff",
        Border = new() { Color = Color.Primary, Width = 1, Radius = 3 },
    };

    private readonly List<MonthlyService> services =
    [
        new() { Month = "Jan", Uptime = 73 },
        new() { Month = "Feb", Uptime = 78 },
        new() { Month = "Mar", Uptime = 84 },
        new() { Month = "Apr", Uptime = 82 },
        new() { Month = "May", Uptime = 88 },
        new() { Month = "Jun", Uptime = 91 },
        new() { Month = "Jul", Uptime = 86 },
        new() { Month = "Aug", Uptime = 93 },
    ];

    private sealed class MonthlyService
    {
        public string Month { get; set; }

        public double Uptime { get; set; }
    }
}

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        XAxis = new()
        {
            GridLines = new() { Visible = true },
        },
        YAxis = new()
        {
            BeginAtZero = true,
            TickCount = 6,
        },
        Annotations =
        [
            new SvgChartBoxAnnotationOptions
            {
                XMin = 10,
                XMax = 20,
                YMin = 40,
                YMax = 65,
                BackgroundColor = Color.Info,
                Opacity = 0.1,
                Label = new()
                {
                    Visible = true,
                    Text = "Watch",
                    Position = SvgChartAnnotationLabelPosition.Start,
                    BackgroundColor = "#ffffff",
                },
            },
        ],
    };

    private readonly SvgChartAnnotationLabelOptions targetLabel = new()
    {
        Visible = true,
        Text = "Target area",
        Position = SvgChartAnnotationLabelPosition.Start,
        BackgroundColor = "#ffffff",
        Border = new() { Color = Color.Success, Width = 1, Radius = 3 },
    };

    private readonly SvgChartAnnotationLabelOptions pointLabel = new()
    {
        Visible = true,
        Text = "Selected store",
        Position = SvgChartAnnotationLabelPosition.End,
        BackgroundColor = "#ffffff",
        Border = new() { Color = Color.Warning, Width = 1, Radius = 3 },
    };

    private readonly List<StoreSample> stores =
    [
        new() { Traffic = 8, Sales = 42 },
        new() { Traffic = 13, Sales = 48 },
        new() { Traffic = 18, Sales = 51 },
        new() { Traffic = 22, Sales = 64 },
        new() { Traffic = 27, Sales = 62 },
        new() { Traffic = 33, Sales = 74 },
        new() { Traffic = 38, Sales = 83 },
        new() { Traffic = 45, Sales = 88 },
    ];

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

        public double Sales { get; set; }
    }
}

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Visible = false },
        Annotations =
        [
            new SvgChartBoxAnnotationOptions
            {
                XMin = 2.5,
                XMax = 4.5,
                YMin = 0,
                YMax = 100,
                BackgroundColor = Color.Warning,
                Opacity = 0.12,
                Label = new()
                {
                    Visible = true,
                    Text = "Deploy",
                    Position = SvgChartAnnotationLabelPosition.Start,
                    BackgroundColor = "#ffffff",
                },
            },
            new SvgChartLineAnnotationOptions
            {
                YMin = 80,
                YMax = 80,
                Border = new() { Color = Color.Success, Width = 2 },
                DashPattern = "6 4",
                Label = new()
                {
                    Visible = true,
                    Text = "Target",
                    Position = SvgChartAnnotationLabelPosition.End,
                    BackgroundColor = "#ffffff",
                    Border = new() { Color = Color.Success, Width = 1, Radius = 3 },
                },
            },
            new SvgChartPointAnnotationOptions
            {
                X = 4,
                Y = 88,
                Radius = 6,
                BackgroundColor = Color.Primary,
                Border = new() { Color = Color.Light, Width = 2 },
                Label = new()
                {
                    Visible = true,
                    Text = "Recovered",
                    Position = SvgChartAnnotationLabelPosition.End,
                    BackgroundColor = "#ffffff",
                },
            },
        ],
    };

    private readonly List<DeploymentSample> samples =
    [
        new() { Step = "Build", Score = 86 },
        new() { Step = "Test", Score = 84 },
        new() { Step = "Canary", Score = 63 },
        new() { Step = "Ramp", Score = 72 },
        new() { Step = "Stable", Score = 88 },
        new() { Step = "Observe", Score = 91 },
    ];

    private sealed class DeploymentSample
    {
        public string Step { get; set; }

        public double Score { get; set; }
    }
}