SharpAstrology.West.BlazorComponents 0.2.0

SharpAstrology.West.BlazorComponents

This package provides useful Blazor components to display information of an AstrologyChart class from the SharpAstrology.Base package.

${\color{red}This \space package \space is \space still \space experimental. \space Interfaces \space can \space change \space before \space version \space 1.0.0.}$

SharpAstrology Packages

Install

dotnet add package SharpAstrology.West.BlazorComponents

This package depends on SharpAstrology.West. Here is the dependency graph.

flowchart LR
    west[SharpAstrology.West]-->base[SharpAstrology.Base]
    comp[SharpAstrology.West.BlazorComponents]-->west
    west-.->|optional|eph[SharpAstrology.SwissEph]
    eph-->base

Examples

Setup

All examples use the SharpAstrology.SwissEph package.

dotnet add package SharpAstrology.SwissEph

Create a Blazor project with interactive server components. Inject The SwissEphemeridesService.

Update the program.cs file.

...
using SharpAstrology.Ephemerides;

...

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();
builder.Services.AddSingleton<SwissEphemeridesService>();
...

How can I display a basic chart in Blazor?

@using SharpAstrology.DataModels
@using SharpAstrology.Ephemerides
@using SharpAstrology.BlazorComponents
@rendermode InteractiveServer

<PageTitle>Astrology Chart Example</PageTitle>

<div style="display: flex; width: 1100px; align-items: center; flex-direction: row; justify-content: space-between">
    <div>
        <h2 style="text-align: center">Chart with location information</h2>
        <WesternAstrologyChart Height="500" Width="500"
                               Chart="chartWithLocation"/>
    </div>
    <div>
        <h2 style="text-align: center">Chart without location information</h2>
        <WesternAstrologyChart Height="500" Width="500"
                               Chart="chartWithoutLocation"/>
    </div>
</div>

@code
{
    [Inject] SwissEphemeridesService EphService { get; set; }
    private AstrologyChart chartWithLocation;
    private AstrologyChart chartWithoutLocation;
    
    protected override void OnInitialized()
    {
        using var eph = EphService.CreateContext();
        chartWithLocation = new AstrologyChart(new DateTime(1988, 9, 4, 1, 15, 0, DateTimeKind.Utc), eph, 51.0, 11.0);
        chartWithoutLocation = new AstrologyChart(new DateTime(1988, 9, 4, 1, 15, 0, DateTimeKind.Utc), eph);
    }
}

Can I specify the orbits to be usedß

@using SharpAstrology.DataModels
@using SharpAstrology.Ephemerides
@using SharpAstrology.BlazorComponents
@using SharpAstrology.Enums
@using SharpAstrology.Utility
@rendermode InteractiveServer

<PageTitle>Astrology Chart Example</PageTitle>

<div style="display: flex; width: 650px; align-items: center; justify-content: center">
         <WesternAstrologyChart Height="600" Width="600"
                                Chart="chart"
                                ShowOnInnerWheel="WesternChartWheelOptions.Signs"
                                Orbits="orbits" />
</div>

@code
{
    [Inject] SwissEphemeridesService EphService { get; set; }
    private AstrologyChart chart;
    private Dictionary<Aspects, Dictionary<Planets, int>> orbits = OrbitBuilder
        .WithWesternDefaultOrbits()
        .SetRules(Aspects.Square, new Dictionary<Planets, int>(){ { Planets.Sun, 1}, { Planets.Jupiter, 1}})
        .Build();
    
    protected override void OnInitialized()
    {
        using var eph = EphService.CreateContext();
        chart = new AstrologyChart(new DateTime(1988, 9, 4, 1, 15, 0, DateTimeKind.Utc), eph, 51.0, 11.0);
    }
}

Which zodiac does the wheel use?

Both, and the chart decides which one needs no turning. The planets are always drawn at the longitudes of the chart. ShowOnInnerWheel and ShowOnOuterWheel decide which zodiac a ring shows, and a ring that is not the zodiac of the chart is turned by the ayanamsa.

<WesternAstrologyChart Chart="chart"
                       ShowOnInnerWheel="WesternChartWheelOptions.Signs"
                       ShowOnOuterWheel="WesternChartWheelOptions.Constellations"/>

A comparator chart has to stand in the same zodiac as the chart. Both sets of planets are drawn on one wheel and the aspects between them are angles between their longitudes, so a mismatch would be wrong by an ayanamsa. The component checks this and throws.

How can I display a chart with transits?

@using SharpAstrology.DataModels
@using SharpAstrology.Enums
@using SharpAstrology.Ephemerides
@using SharpAstrology.BlazorComponents
@rendermode InteractiveServer

<PageTitle>Astrology Transit Chart Example</PageTitle>

<div style="display: flex; height: 850px; width: 850px; align-items: center; justify-content: center;">
    <WesternAstrologyChart Height="800" Width="800"
                           Chart="chart"
                           ComparatorChart="transits"
                           ShowOnOuterWheel="WesternChartWheelOptions.Comparator"
                           IncludeAspects="[Aspects.Conjunction, Aspects.Opposition, Aspects.Sextile, Aspects.Square, Aspects.Trine, Aspects.Quincunx]"
                           OnClickCallback="(x)=>Console.WriteLine(x)"/>
</div>

@code
{
    [Inject] SwissEphemeridesService EphService { get; set; }
    private AstrologyChart chart;
    private AstrologyChart transits;
    
    protected override void OnInitialized()
    {
        using var eph = EphService.CreateContext();
        chart = new AstrologyChart(new DateTime(1988, 9, 4, 1, 15, 0, DateTimeKind.Utc), eph, 51.0, 11.0);
        transits = new AstrologyChart(DateTime.UtcNow, eph);
    }
}

Can I create a combine chart with another person with aspects to each other?

@using SharpAstrology.DataModels
@using SharpAstrology.Ephemerides
@using SharpAstrology.BlazorComponents
@rendermode InteractiveServer

<PageTitle>Astrology Chart Example</PageTitle>

<div style="display: flex; width: 650px; align-items: center; justify-content: center">
         <WesternAstrologyChart Height="600" Width="600"
                                Chart="chart"
                                ComparatorChart="chartComparator"
                                ShowOnInnerWheel="WesternChartWheelOptions.Comparator"
                                ShowOnOuterWheel="WesternChartWheelOptions.Signs"
                                ShowAspectsToOther="true"/>
</div>

@code
{
    [Inject] SwissEphemeridesService EphService { get; set; }
    private AstrologyChart chart;
    private AstrologyChart chartComparator;
    
    protected override void OnInitialized()
    {
        using var eph = EphService.CreateContext();
        chart = new AstrologyChart(new DateTime(1988, 9, 4, 1, 15, 0, DateTimeKind.Utc), eph, 51.0, 11.0);
        chartComparator = new AstrologyChart(new DateTime(1990, 2, 6, 22, 50, 0, DateTimeKind.Utc), eph);
    }
}