Skip to content

Commit

Permalink
Add: Add graphical view
Browse files Browse the repository at this point in the history
  • Loading branch information
@whats2000
whats2000 committed Sep 4, 2024
1 parent c9c74ca commit fffe649
Show file tree
Hide file tree
Showing 14 changed files with 601 additions and 510 deletions.
180 changes: 102 additions & 78 deletions Components/ResultView.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,89 +2,113 @@
@using System.Globalization
@using PearlCalculatorBlazor.Localizer
@using PearlCalculatorLib.Result
@inject NavigationManager NavigationManager
@inject HttpClient HttpClient
@inject MessageService AntMessage
@inject NotificationService Notice
@inject TranslateText TransText

<div class="calculator-result">
@switch (ShowMode)
{
case ShowResultMode.Amount:
<Table TItem="TNTCalculationResult"
DataSource="@AmountResult"
Total="AmountTotal"
@bind-PageIndex="_pageIndex"
@bind-PageSize="_pageSize"
ScrollY="80vh"
OnRowClick="OnAmountRowClickAsync"
Class="calculator-result-table">
<!-- A Tooltips with icon for info click can set the red and blue tnt amounts -->
<ActionColumn Width="50px">
<Tooltip Title="@TranslateText.GetTranslateText("TNTCalculationResultTooltip")">
<Text Type="secondary">
<Icon Type="info-circle" Theme="outline"/>
</Text>
</Tooltip>
</ActionColumn>
<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayDistance")" @bind-Field="@context.Distance" Sortable>
<Tooltip Title="@context.Distance.ToString(CultureInfo.InvariantCulture)">
<Text>@context.Distance.ToString(CultureInfo.InvariantCulture).Substring(0, 5)</Text>
</Tooltip>
</AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayTicks")" @bind-Field="@context.Tick" Sortable></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayBlue")" @bind-Field="@context.Blue"></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayRed")" @bind-Field="@context.Red"></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayTotal")" @bind-Field="@context.TotalTNT" Sortable></AntDesign.Column>
</Table>
break;
case ShowResultMode.Trace:
<Table TItem="EntityWrapper"
DataSource="@PearlTrace"
Total="PearlTotal"
@bind-PageIndex="_pageIndex"
@bind-PageSize="_pageSize"
ScrollY="80vh"
Class="calculator-result-table">
<Card Style="height: 100%">
<CardTabs>
<Tabs DefaultActiveKey="TableMode">
<ChildContent>
<TabPane Key="TableMode" Tab="@TranslateText.GetTranslateText("TableMode")">
@switch (ShowMode)
{
case ShowResultMode.Amount:
<Table TItem="TNTCalculationResult"
DataSource="@AmountResult"
Total="AmountTotal"
@bind-PageIndex="_pageIndex"
@bind-PageSize="_pageSize"
ScrollY="80vh"
OnRowClick="OnAmountRowClickAsync"
Class="calculator-result-table">
<!-- A Tooltips with icon for info click can set the red and blue tnt amounts -->
<ActionColumn Width="50px">
<Tooltip Title="@TranslateText.GetTranslateText("TNTCalculationResultTooltip")">
<Text Type="secondary">
<Icon Type="info-circle" Theme="outline"/>
</Text>
</Tooltip>
</ActionColumn>
<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayDistance")" @bind-Field="@context.Distance" Sortable>
<Tooltip Title="@context.Distance.ToString(CultureInfo.InvariantCulture)">
<Text>@context.Distance.ToString(CultureInfo.InvariantCulture).Substring(0, 5)</Text>
</Tooltip>
</AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayTicks")" @bind-Field="@context.Tick" Sortable></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayBlue")" @bind-Field="@context.Blue"></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayRed")" @bind-Field="@context.Red"></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayTotal")" @bind-Field="@context.TotalTNT" Sortable></AntDesign.Column>
</Table>
break;
case ShowResultMode.Trace:
<Table TItem="EntityWrapper"
DataSource="@PearlTrace"
Total="PearlTotal"
@bind-PageIndex="_pageIndex"
@bind-PageSize="_pageSize"
ScrollY="80vh"
Class="calculator-result-table">

<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayTicks")" @bind-Field="@context.Tick"></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("XCoor")" @bind-Field="@context.XCoor"></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("YCoor")" @bind-Field="@context.YCoor"></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("ZCoor")" @bind-Field="@context.ZCoor"></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayTicks")" @bind-Field="@context.Tick"></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("XCoor")" @bind-Field="@context.XCoor"></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("YCoor")" @bind-Field="@context.YCoor"></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("ZCoor")" @bind-Field="@context.ZCoor"></AntDesign.Column>

</Table>
break;
case ShowResultMode.Momentum:
default:
<Table TItem="EntityWrapper"
DataSource="@PearlMotion"
Total="MotionTotal"
@bind-PageIndex="_pageIndex"
@bind-PageSize="_pageSize"
ScrollY="80vh"
Class="calculator-result-table">
</Table>
break;
case ShowResultMode.Momentum:
default:
<Table TItem="EntityWrapper"
DataSource="@PearlMotion"
Total="MotionTotal"
@bind-PageIndex="_pageIndex"
@bind-PageSize="_pageSize"
ScrollY="80vh"
Class="calculator-result-table">

<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayTicks")" @bind-Field="@context.Tick"></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayXMotion")" @bind-Field="@context.XCoor"></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayYMotion")" @bind-Field="@context.YCoor"></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayZMotion")" @bind-Field="@context.ZCoor"></AntDesign.Column>
</Table>
break;
}
</div>
<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayTicks")" @bind-Field="@context.Tick"></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayXMotion")" @bind-Field="@context.XCoor"></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayYMotion")" @bind-Field="@context.YCoor"></AntDesign.Column>
<AntDesign.Column Title="@TranslateText.GetTranslateText("DisplayZMotion")" @bind-Field="@context.ZCoor"></AntDesign.Column>
</Table>
break;
}
<GridRow Gutter="12">
<GridCol Span="24" Sm="24" Md="12" Lg="12" Xl="12">
<Card Title="@TranslateText.GetTranslateText("DisplayDirection")">
<Text>
@TranslateText.GetTranslateText(_resultDirection)
</Text>
</Card>
</GridCol>
<GridCol Span="24" Sm="24" Md="12" Lg="12" Xl="12">
<Card Title="@TranslateText.GetTranslateText("DisplayAngle")">
<Text>
@_resultAngle
</Text>
</Card>
</GridCol>
</GridRow>
</TabPane>
<TabPane Key="GraphMode" Tab="@TranslateText.GetTranslateText("GraphMode")">
@if (ShowMode == ShowResultMode.Trace)
{
<AntDesign.Charts.Line Data="@PearlTrace" Config="@_lineConfig"/>
}
else if (ShowMode == ShowResultMode.Momentum)
{
<AntDesign.Charts.Line Data="@PearlMotion" Config="@_lineConfig"/>
}
else if (ShowMode == ShowResultMode.Amount)
{
<DualAxes Data="@(new[] { StackedBarData, LineData })" Config="_dualAxesConfig"/>
}
</TabPane>
</ChildContent>
</Tabs>
</CardTabs>

<GridRow Gutter="12">
<GridCol Span="24" Sm="24" Md="12" Lg="12" Xl="12">
<Card Title="@TranslateText.GetTranslateText("DisplayDirection")">
<Text>
@TranslateText.GetTranslateText(_resultDirection)
</Text>
</Card>
</GridCol>
<GridCol Span="24" Sm="24" Md="12" Lg="12" Xl="12">
<Card Title="@TranslateText.GetTranslateText("DisplayAngle")">
<Text>
@_resultAngle
</Text>
</Card>
</GridCol>
</GridRow>
</Card>
75 changes: 75 additions & 0 deletions Components/ResultView.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
using System.Linq;
using System.Threading.Tasks;
using AntDesign;
using AntDesign.Charts;
using AntDesign.TableModels;
using PearlCalculatorBlazor.Localizer;
using PearlCalculatorBlazor.Managers;
Expand All @@ -18,9 +19,47 @@ public partial class ResultView
private static string _resultDirection = string.Empty;
private static string _resultAngle = string.Empty;

private readonly LineConfig _lineConfig = new()
{
Padding = "auto",
AutoFit = true,
XField = "tick",
YField = "yCoor"
};

private DualAxesConfig _dualAxesConfig = new()
{
XField = "index",
YField = new[] { "value", "count" },
GeometryOptions = new object[]
{
new
{
Geometry = "column",
IsStack = true,
seriesField = "type",
// Red, Blue
Color = new[] { "#FF7260", "#9BD7D5" }
},
new
{
Geometry = "line",
seriesField = "name",
Color = new[] { "#129793", "#90AEC6" },
LineStyle = new
{
lineWidth = 1.5
}
}
}
};

private int _pageIndex = 1;
private int _pageSize = 50;

private object[] StackedBarData => GetStackedBarData();
private object[] LineData => GetLineData();

private ShowResultMode ShowMode { get; set; } = ShowResultMode.Amount;

private int AmountTotal => AmountResult?.Count ?? 0;
Expand All @@ -32,6 +71,42 @@ public partial class ResultView
private List<EntityWrapper> PearlTrace { get; set; } = new();
private List<EntityWrapper> PearlMotion { get; set; } = new();

private object[] GetStackedBarData()
{
return AmountResult
.Select((r, index) => new
{
index,
value = r.Red,
type = TranslateText.GetTranslateText("DisplayRed")
})
.Concat(AmountResult.Select((r, index) => new
{
index,
value = r.Blue,
type = TranslateText.GetTranslateText("DisplayBlue")
}))
.ToArray<object>();
}

private object[] GetLineData()
{
return AmountResult.Select((r, index) => new
{
index,
count = r.Distance,
name = TranslateText.GetTranslateText("DisplayDistance")
})
.Concat(AmountResult.Select((r, index) => new
{
index,
count = (double)r.Tick,
name = TranslateText.GetTranslateText("DisplayTicks")
}))
.ToArray<object>();
}


private static void ShowDirectionResult(Space3D pearlPos, Space3D destination)
{
var angle = pearlPos.WorldAngle(destination);
Expand Down
4 changes: 1 addition & 3 deletions Pages/Index.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,6 @@
</Card>
</GridCol>
<GridCol Xs="24" Sm="24" Md="24" Lg="12" Xl="12" Xxl="12">
<Card Style="height: 100%">
<PearlCalculatorBlazor.Components.ResultView/>
</Card>
<PearlCalculatorBlazor.Components.ResultView/>
</GridCol>
</GridRow>
83 changes: 44 additions & 39 deletions PearlCalculatorBlazor.csproj
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,48 @@
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
<BlazorCacheBootResources>false</BlazorCacheBootResources>
</PropertyGroup>

<ItemGroup>
<Compile Remove="PearlCalculatorLib\**" />
<Compile Remove="wwwroot\resources\**" />
<Content Remove="PearlCalculatorLib\**" />
<Content Remove="wwwroot\resources\**" />
<EmbeddedResource Remove="PearlCalculatorLib\**" />
<EmbeddedResource Remove="wwwroot\resources\**" />
<None Remove="PearlCalculatorLib\**" />
<None Remove="wwwroot\resources\**" />
</ItemGroup>

<ItemGroup>
<PackageReference Include="AntDesign" Version="0.20.2.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.33" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.33" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Http.Extensions" Version="2.2.0" />
<PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
<PackageReference Include="System.Net.Http.Json" Version="6.0.1" />
</ItemGroup>

<ItemGroup>
<ProjectReference Include=".\PearlCalculatorLib\PearlCalculatorLib.csproj" />
</ItemGroup>

<ItemGroup>
<ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
</ItemGroup>

<ItemGroup>
<Folder Include="Localizer\" />
</ItemGroup>

<ProjectExtensions><VisualStudio><UserProperties /></VisualStudio></ProjectExtensions>
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
<BlazorCacheBootResources>false</BlazorCacheBootResources>
</PropertyGroup>

<ItemGroup>
<Compile Remove="PearlCalculatorLib\**"/>
<Compile Remove="wwwroot\resources\**"/>
<Content Remove="PearlCalculatorLib\**"/>
<Content Remove="wwwroot\resources\**"/>
<EmbeddedResource Remove="PearlCalculatorLib\**"/>
<EmbeddedResource Remove="wwwroot\resources\**"/>
<None Remove="PearlCalculatorLib\**"/>
<None Remove="wwwroot\resources\**"/>
</ItemGroup>

<ItemGroup>
<PackageReference Include="AntDesign" Version="0.20.2.1"/>
<PackageReference Include="AntDesign.Charts" Version="0.5.5"/>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.33"/>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.33" PrivateAssets="all"/>
<PackageReference Include="Microsoft.AspNetCore.Http.Extensions" Version="2.2.0"/>
<PackageReference Include="Newtonsoft.Json" Version="13.0.3"/>
<PackageReference Include="System.Net.Http.Json" Version="6.0.1"/>
</ItemGroup>

<ItemGroup>
<ProjectReference Include=".\PearlCalculatorLib\PearlCalculatorLib.csproj"/>
</ItemGroup>

<ItemGroup>
<ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js"/>
</ItemGroup>

<ItemGroup>
<Folder Include="Localizer\"/>
</ItemGroup>

<ProjectExtensions>
<VisualStudio>
<UserProperties/>
</VisualStudio>
</ProjectExtensions>

</Project>
Loading

0 comments on commit fffe649

Please sign in to comment.