HC_APTBS/Views/UserControls/PumpLiveDataCard.xaml

<UserControl x:Class="HC_APTBS.Views.UserControls.PumpLiveDataCard"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
             xmlns:uc="clr-namespace:HC_APTBS.Views.UserControls"
             mc:Ignorable="d"
             d:DesignHeight="700" d:DesignWidth="500">

    <!--
        DataContext = PumpPageViewModel.
        Live values accessed via Root.PumpRpm / Root.PumpTemp / Root.PumpMe / Root.PumpFbkw / Root.PumpTein.
        Status words accessed via StatusDisplay1 and StatusDisplay2 (both StatusDisplayViewModel).
        RPM chart via RpmChart (SingleFlowChartViewModel).
    -->
    <Border Style="{StaticResource PumpCard}">
        <DockPanel LastChildFill="True">

            <!-- ── Card header ───────────────────────────────────────────── -->
            <DockPanel DockPanel.Dock="Top" Margin="0,0,0,12">
                <ui:SymbolIcon DockPanel.Dock="Left" Symbol="PulseSquare24" FontSize="16"
                               Foreground="{DynamicResource AccentTextFillColorPrimaryBrush}"
                               Margin="0,0,8,0" VerticalAlignment="Center"/>
                <TextBlock Text="{DynamicResource Pump.LiveData.Title}"
                           Style="{StaticResource PumpCardHeader}" Margin="0"/>
            </DockPanel>

            <!-- ── Status displays (docked bottom so chart gets the middle) ── -->
            <StackPanel DockPanel.Dock="Bottom" Margin="0,8,0,0">
                <uc:StatusDisplayView DataContext="{Binding StatusDisplay1}" Margin="0,0,0,8"/>
                <uc:StatusDisplayView DataContext="{Binding StatusDisplay2}"/>
            </StackPanel>

            <!-- ── RPM chart (docked bottom of the upper area) ──────────── -->
            <Border DockPanel.Dock="Bottom"
                    Background="{DynamicResource ControlFillColorSecondaryBrush}"
                    BorderBrush="{DynamicResource ControlStrokeColorDefaultBrush}"
                    BorderThickness="1" CornerRadius="6"
                    Padding="4,4" Margin="0,8,0,0">
                <DockPanel LastChildFill="True">
                    <TextBlock DockPanel.Dock="Top"
                               Text="{DynamicResource Pump.LiveData.RpmChart}"
                               FontSize="11"
                               Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                               Margin="4,0,0,2"/>
                    <lvc:CartesianChart Height="110"
                                        Series="{Binding RpmChart.Series}"
                                        XAxes="{Binding RpmChart.XAxes}"
                                        YAxes="{Binding RpmChart.YAxes}"
                                        TooltipPosition="Hidden"
                                        AnimationsSpeed="00:00:00"/>
                </DockPanel>
            </Border>

            <!-- ── KPI tiles (top portion, fills remaining space) ────────── -->
            <UniformGrid Rows="1" Columns="5">

                <!-- RPM -->
                <Border Style="{StaticResource KpiTile}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <StackPanel Orientation="Horizontal">
                            <ui:SymbolIcon Symbol="Gauge24" FontSize="14"
                                           Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                                           Margin="0,0,4,0" VerticalAlignment="Center"/>
                            <TextBlock Text="{DynamicResource Pump.LiveData.RPM}"
                                       Style="{StaticResource KpiHeaderText}" VerticalAlignment="Center"/>
                        </StackPanel>
                        <StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Bottom">
                            <TextBlock Text="{Binding Root.PumpRpm, StringFormat=F0}"
                                       Style="{StaticResource KpiValueText}" FontSize="32"/>
                            <TextBlock Text="{DynamicResource Pump.UnitRpm}"
                                       Style="{StaticResource KpiUnitText}"/>
                        </StackPanel>
                    </Grid>
                </Border>

                <!-- T-hyb -->
                <Border Style="{StaticResource KpiTile}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <StackPanel Orientation="Horizontal">
                            <ui:SymbolIcon Symbol="Temperature24" FontSize="14"
                                           Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                                           Margin="0,0,4,0" VerticalAlignment="Center"/>
                            <TextBlock Text="{DynamicResource Pump.LiveData.THyb}"
                                       Style="{StaticResource KpiHeaderText}" VerticalAlignment="Center"/>
                        </StackPanel>
                        <StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Bottom">
                            <TextBlock Text="{Binding Root.PumpTemp, StringFormat=F1}"
                                       Style="{StaticResource KpiValueText}" FontSize="32"/>
                            <TextBlock Text="{DynamicResource Pump.UnitCelsius}"
                                       Style="{StaticResource KpiUnitText}"/>
                        </StackPanel>
                    </Grid>
                </Border>

                <!-- T-ein -->
                <Border Style="{StaticResource KpiTile}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <StackPanel Orientation="Horizontal">
                            <ui:SymbolIcon Symbol="Timer24" FontSize="14"
                                           Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                                           Margin="0,0,4,0" VerticalAlignment="Center"/>
                            <TextBlock Text="{DynamicResource Pump.LiveData.TEin}"
                                       Style="{StaticResource KpiHeaderText}" VerticalAlignment="Center"/>
                        </StackPanel>
                        <StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Bottom">
                            <TextBlock Text="{Binding Root.PumpTein, StringFormat=F0}"
                                       Style="{StaticResource KpiValueText}" FontSize="32"/>
                            <TextBlock Text="{DynamicResource Pump.UnitUs}"
                                       Style="{StaticResource KpiUnitText}"/>
                        </StackPanel>
                    </Grid>
                </Border>

                <!-- ME -->
                <Border Style="{StaticResource KpiTile}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <StackPanel Orientation="Horizontal">
                            <ui:SymbolIcon Symbol="ArrowTrendingLines24" FontSize="14"
                                           Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                                           Margin="0,0,4,0" VerticalAlignment="Center"/>
                            <TextBlock Text="{DynamicResource Pump.LiveData.Me}"
                                       Style="{StaticResource KpiHeaderText}" VerticalAlignment="Center"/>
                        </StackPanel>
                        <StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Bottom">
                            <TextBlock Text="{Binding Root.PumpMe, StringFormat=F2}"
                                       Style="{StaticResource KpiValueText}" FontSize="32"/>
                        </StackPanel>
                    </Grid>
                </Border>

                <!-- FBKW -->
                <Border Style="{StaticResource KpiTile}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <StackPanel Orientation="Horizontal">
                            <ui:SymbolIcon Symbol="ArrowTrendingLines24" FontSize="14"
                                           Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                                           Margin="0,0,4,0" VerticalAlignment="Center"/>
                            <TextBlock Text="{DynamicResource Pump.LiveData.Fbkw}"
                                       Style="{StaticResource KpiHeaderText}" VerticalAlignment="Center"/>
                        </StackPanel>
                        <StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Bottom">
                            <TextBlock Text="{Binding Root.PumpFbkw, StringFormat=F2}"
                                       Style="{StaticResource KpiValueText}" FontSize="32"/>
                        </StackPanel>
                    </Grid>
                </Border>

            </UniformGrid>

        </DockPanel>
    </Border>
</UserControl>