Skip to content

Improve Gages #498

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PrzemyslawKlys merged 6 commits into from
Jun 5, 2025
Merged

Improve Gages #498

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
441942e
Update example
PrzemyslawKlys Jun 5, 2025
425daac
feat(New-HTMLGage): ✨ Add UseAbsoluteValues parameter for custom sectors
PrzemyslawKlys Jun 5, 2025
7dfe493
feat(New-HTMLGage): ✨ Add new parameters for enhanced gauge customiza…
PrzemyslawKlys Jun 5, 2025
e1628bb
feat(Example-UseAbsoluteValues): ✨ Add examples for UseAbsoluteValues…
PrzemyslawKlys Jun 5, 2025
e6a6eab
feat(Example-Gages-Enhanced): ✨ Add enhanced gage features and examples
PrzemyslawKlys Jun 5, 2025
59dc789
feat(Example-Gages): ✨ Add new features for gages including target li…
PrzemyslawKlys Jun 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
152 changes: 152 additions & 0 deletions Examples/Example-Gages/Example-Gages-Enhanced.ps1
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
Import-Module .\PSWriteHTML.psd1 -Force

New-HTML -TitleText 'Enhanced JustGage Features Demo' -FilePath "$PSScriptRoot\Example-Gages-Enhanced.html" {
New-HTMLSection -HeaderText "Basic Gages with Sizing" -Invisible {
New-HTMLPanel {
New-HTMLText -Text 'Standard Size' -Color Red -Alignment center -FontSize 16px
New-HTMLGage -Label 'CPU Usage' -MinValue 0 -MaxValue 100 -Value 75 -Counter
}
New-HTMLPanel {
New-HTMLText -Text 'Custom Width & Height' -Color Blue -Alignment center -FontSize 16px
New-HTMLGage -Label 'Memory Usage' -MinValue 0 -MaxValue 100 -Value 60 -Counter -Width 200 -Height 150
}
New-HTMLPanel {
New-HTMLText -Text 'Large Size' -Color Green -Alignment center -FontSize 16px
New-HTMLGage -Label 'Disk Usage' -MinValue 0 -MaxValue 100 -Value 45 -Counter -Width 250 -Height 200
}
}

New-HTMLSection -HeaderText "Target Line Feature" -Invisible {
New-HTMLPanel {
New-HTMLText -Text 'Performance with Target' -Color Purple -Alignment center -FontSize 16px
New-HTMLGage -Label 'Performance Score' -MinValue 0 -MaxValue 100 -Value 65 -TargetLine 80 -TargetLineColor "red" -TargetLineWidth 3 -Counter
}
New-HTMLPanel {
New-HTMLText -Text 'Sales with Goal' -Color Orange -Alignment center -FontSize 16px
New-HTMLGage -Label 'Sales Target' -MinValue 0 -MaxValue 1000 -Value 750 -TargetLine 900 -TargetLineColor "green" -TargetLineWidth 2 -ValueSymbol '$'
}
New-HTMLPanel {
New-HTMLText -Text 'Multiple Targets' -Color DarkBlue -Alignment center -FontSize 16px
New-HTMLGage -Label 'Quality Score' -MinValue 0 -MaxValue 100 -Value 85 -TargetLine 75 -TargetLineColor "blue" -TargetLineWidth 4
}
}

New-HTMLSection -HeaderText "Level Colors (Default Gradients)" -Invisible {
New-HTMLPanel {
New-HTMLText -Text 'Red-Yellow-Green' -Color Black -Alignment center -FontSize 16px
New-HTMLGage -Label 'Server Health' -MinValue 0 -MaxValue 100 -Value 30 -LevelColors @("red", "yellow", "green") -Counter
}
New-HTMLPanel {
New-HTMLText -Text 'Blue-Purple-Pink' -Color Black -Alignment center -FontSize 16px
New-HTMLGage -Label 'Custom Colors' -MinValue 0 -MaxValue 100 -Value 70 -LevelColors @("blue", "purple", "pink") -Counter
}
New-HTMLPanel {
New-HTMLText -Text 'Multi-Color Gradient' -Color Black -Alignment center -FontSize 16px
New-HTMLGage -Label 'Progress' -MinValue 0 -MaxValue 100 -Value 50 -LevelColors @("darkred", "orange", "yellow", "lightgreen", "green") -Counter
}
}

New-HTMLSection -HeaderText "Animation Settings" -Invisible {
New-HTMLPanel {
New-HTMLText -Text 'Fast Animation' -Color Red -Alignment center -FontSize 16px
New-HTMLGage -Label 'Quick Load' -MinValue 0 -MaxValue 100 -Value 80 -StartAnimationTime 300 -StartAnimationType "bounce" -Counter
}
New-HTMLPanel {
New-HTMLText -Text 'Slow Animation' -Color Blue -Alignment center -FontSize 16px
New-HTMLGage -Label 'Smooth Load' -MinValue 0 -MaxValue 100 -Value 60 -StartAnimationTime 1500 -StartAnimationType "<>" -Counter
}
New-HTMLPanel {
New-HTMLText -Text 'Linear Animation' -Color Green -Alignment center -FontSize 16px
New-HTMLGage -Label 'Linear Progress' -MinValue 0 -MaxValue 100 -Value 90 -StartAnimationTime 1000 -StartAnimationType "linear" -Counter
}
}

New-HTMLSection -HeaderText "Donut Gages with Start Angle" -Invisible {
New-HTMLPanel {
New-HTMLText -Text 'Default Start (90°)' -Color Purple -Alignment center -FontSize 16px
New-HTMLGage -Label 'Standard Donut' -Type Donut -MinValue 0 -MaxValue 100 -Value 75 -Counter
}
New-HTMLPanel {
New-HTMLText -Text 'Start at 0°' -Color Orange -Alignment center -FontSize 16px
New-HTMLGage -Label 'Right Start' -Type Donut -MinValue 0 -MaxValue 100 -Value 60 -DonutStartAngle 0 -Counter
}
New-HTMLPanel {
New-HTMLText -Text 'Start at 180°' -Color DarkRed -Alignment center -FontSize 16px
New-HTMLGage -Label 'Bottom Start' -Type Donut -MinValue 0 -MaxValue 100 -Value 45 -DonutStartAngle 180 -Counter
}
}

New-HTMLSection -HeaderText "Font Size Controls" -Invisible {
New-HTMLPanel {
New-HTMLText -Text 'Large Value Font' -Color Navy -Alignment center -FontSize 16px
New-HTMLGage -Label 'Big Numbers' -MinValue 0 -MaxValue 100 -Value 85 -ValueMinFontSize 24 -LabelMinFontSize 14 -Counter
}
New-HTMLPanel {
New-HTMLText -Text 'Small Fonts' -Color Maroon -Alignment center -FontSize 16px
New-HTMLGage -Label 'Compact Display' -MinValue 0 -MaxValue 100 -Value 55 -ValueMinFontSize 12 -LabelMinFontSize 8 -MinLabelMinFontSize 6 -MaxLabelMinFontSize 6
}
New-HTMLPanel {
New-HTMLText -Text 'Mixed Font Sizes' -Color DarkGreen -Alignment center -FontSize 16px
New-HTMLGage -Label 'Custom Sizing' -MinValue 0 -MaxValue 100 -Value 70 -ValueMinFontSize 20 -LabelMinFontSize 12 -MinLabelMinFontSize 8 -MaxLabelMinFontSize 8
}
}

New-HTMLSection -HeaderText "Differential Mode" -Invisible {
New-HTMLPanel {
New-HTMLText -Text 'Normal Fill (from min)' -Color Black -Alignment center -FontSize 16px
New-HTMLGage -Label 'Standard' -MinValue -50 -MaxValue 50 -Value 25 -Counter
}
New-HTMLPanel {
New-HTMLText -Text 'Differential Fill (from center)' -Color Black -Alignment center -FontSize 16px
New-HTMLGage -Label 'From Center' -MinValue -50 -MaxValue 50 -Value 25 -Differential -Counter
}
New-HTMLPanel {
New-HTMLText -Text 'Negative Differential' -Color Black -Alignment center -FontSize 16px
New-HTMLGage -Label 'Negative Value' -MinValue -50 -MaxValue 50 -Value -15 -Differential -Counter
}
}

New-HTMLSection -HeaderText "Combined Advanced Features" -Invisible {
New-HTMLPanel {
New-HTMLText -Text 'Ultimate Gage' -Color DarkBlue -Alignment center -FontSize 18px
New-HTMLGage -Label 'System Performance' -MinValue 0 -MaxValue 100 -Value 78 -Counter -Width 300 -Height 250 -TargetLine 85 -TargetLineColor "red" -TargetLineWidth 3 -LevelColors @("red", "orange", "yellow", "lightgreen", "green") -StartAnimationTime 1200 -StartAnimationType "bounce" -ValueMinFontSize 22 -LabelMinFontSize 14 -ValueSymbol '%'
}
New-HTMLPanel {
New-HTMLText -Text 'Donut with All Features' -Color DarkRed -Alignment center -FontSize 18px
New-HTMLGage -Label 'Revenue Target' -Type Donut -MinValue 0 -MaxValue 1000000 -Value 750000 -Counter -Width 280 -Height 240 -TargetLine 900000 -TargetLineColor "blue" -TargetLineWidth 4 -DonutStartAngle 45 -HumanFriendly -ValueSymbol '$' -StartAnimationTime 1500 -StartAnimationType "<>"
}
New-HTMLPanel {
New-HTMLText -Text 'Differential with Target' -Color DarkGreen -Alignment center -FontSize 18px
New-HTMLGage -Label 'Profit/Loss' -MinValue -100 -MaxValue 100 -Value 35 -Differential -Counter -Width 260 -Height 220 -TargetLine 50 -TargetLineColor "green" -TargetLineWidth 2 -LevelColors @("darkred", "red", "yellow", "lightgreen", "green") -ValueSymbol '%'
}
}

New-HTMLSection -HeaderText "Custom Sectors with New Features" -Invisible {
New-HTMLPanel {
New-HTMLText -Text 'Sectors with Target Line' -Color Purple -Alignment center -FontSize 16px
New-HTMLGage -Label 'Quality Score' -Value 65 -Counter -TargetLine 75 -TargetLineColor "black" -TargetLineWidth 2 -Width 200 -Height 160 {
New-GageSector -Color "red" -Min 0 -Max 40
New-GageSector -Color "yellow" -Min 41 -Max 70
New-GageSector -Color "green" -Min 71 -Max 100
}
}
New-HTMLPanel {
New-HTMLText -Text 'Animated Sectors' -Color Orange -Alignment center -FontSize 16px
New-HTMLGage -Label 'Performance' -Value 85 -Counter -StartAnimationTime 2000 -StartAnimationType "bounce" -Width 220 -Height 180 {
New-GageSector -Color "darkred" -Min 0 -Max 25
New-GageSector -Color "orange" -Min 26 -Max 50
New-GageSector -Color "yellow" -Min 51 -Max 75
New-GageSector -Color "lightgreen" -Min 76 -Max 90
New-GageSector -Color "green" -Min 91 -Max 100
}
}
New-HTMLPanel {
New-HTMLText -Text 'Donut Sectors with Features' -Color DarkBlue -Alignment center -FontSize 16px
New-HTMLGage -Label 'Status' -Type Donut -Value 70 -Counter -DonutStartAngle 270 -TargetLine 80 -TargetLineColor "red" -Width 240 -Height 200 {
New-GageSector -Color "red" -Min 0 -Max 50
New-GageSector -Color "yellow" -Min 51 -Max 75
New-GageSector -Color "green" -Min 76 -Max 100
}
}
}
} -ShowHTML -Online
97 changes: 95 additions & 2 deletions Examples/Example32-Gage/Example32.ps1 → Examples/Example-Gages/Example-Gages.ps1
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
Import-Module .\PSWriteHTML.psd1 -Force

New-HTML -TitleText 'This is a test' -FilePath "$PSScriptRoot\Example32-01.html" {
New-HTMLSection -Invisible {
New-HTML -TitleText 'This is a test' -FilePath "$PSScriptRoot\Example-Gages.html" { New-HTMLSection -Invisible {
New-HTMLPanel {
New-HTMLText -Text 'Title' -Color Red -Alignment center -FontSize 20px
New-HTMLGage -Label 'Fixes' -MinValue 0 -MaxValue 100 -Value 50 -Counter
Expand Down Expand Up @@ -31,6 +30,42 @@ New-HTML -TitleText 'This is a test' -FilePath "$PSScriptRoot\Example32-01.html"
New-HTMLGage -Label 'Testing Tickets' -MinValue 0 -MaxValue 100 -Value 30 -GaugageWidth 0
}
}
New-HTMLSection -HeaderText "New Features: Target Lines & Level Colors" -Invisible {
New-HTMLPanel {
New-HTMLText -Text 'With Target Line' -Color Blue -Alignment center -FontSize 16px
New-HTMLGage -Label 'Performance' -MinValue 0 -MaxValue 100 -Value 65 -TargetLine 80 -TargetLineColor "red" -TargetLineWidth 3 -Counter
}
New-HTMLPanel {
New-HTMLText -Text 'Level Colors' -Color Green -Alignment center -FontSize 16px
New-HTMLGage -Label 'Health Score' -MinValue 0 -MaxValue 100 -Value 75 -LevelColors @("red", "yellow", "green") -Counter
}
New-HTMLPanel {
New-HTMLText -Text 'Custom Size' -Color Purple -Alignment center -FontSize 16px
New-HTMLGage -Label 'Custom Gage' -MinValue 0 -MaxValue 100 -Value 85 -Width 200 -Height 150 -Counter
}
New-HTMLPanel {
New-HTMLText -Text 'Animated' -Color Orange -Alignment center -FontSize 16px
New-HTMLGage -Label 'Animated Load' -MinValue 0 -MaxValue 100 -Value 90 -StartAnimationTime 1500 -StartAnimationType "bounce" -Counter
}
}
New-HTMLSection -HeaderText "Differential Mode & Donut Features" -Invisible {
New-HTMLPanel {
New-HTMLText -Text 'Normal Fill' -Color Black -Alignment center -FontSize 16px
New-HTMLGage -Label 'Standard' -MinValue -50 -MaxValue 50 -Value 25 -Counter
}
New-HTMLPanel {
New-HTMLText -Text 'Differential Fill' -Color Black -Alignment center -FontSize 16px
New-HTMLGage -Label 'From Center' -MinValue -50 -MaxValue 50 -Value 25 -Differential -Counter
}
New-HTMLPanel {
New-HTMLText -Text 'Donut Start Angle' -Color Navy -Alignment center -FontSize 16px
New-HTMLGage -Label 'Custom Start' -Type Donut -MinValue 0 -MaxValue 100 -Value 60 -DonutStartAngle 180 -Counter
}
New-HTMLPanel {
New-HTMLText -Text 'Font Size Control' -Color DarkGreen -Alignment center -FontSize 16px
New-HTMLGage -Label 'Big Text' -MinValue 0 -MaxValue 100 -Value 80 -ValueMinFontSize 20 -LabelMinFontSize 12 -Counter
}
}
New-HTMLSection -Invisible {
New-HTMLPanel {
New-HTMLGage -Label 'Fixes' -Value 30 -Counter {
Expand Down Expand Up @@ -138,5 +173,63 @@ New-HTML -TitleText 'This is a test' -FilePath "$PSScriptRoot\Example32-01.html"
New-HTMLGage -Label 'Testing Gage' -MinValue 0 -MaxValue 100 -Value 30 -GaugageWidth 0 -Pointer -PointerTopLength 1 -PointerBottomLength 0 -PointerBottomWidth 3
}
}
New-HTMLSection -HeaderText "UseAbsoluteValues Feature Comparison" -Invisible {
New-HTMLPanel {
New-HTMLText -Text 'Percentage-based sectors (default)' -Color Blue -Alignment center -FontSize 16px
New-HTMLText -Text 'Same gauge (0-100), same sectors (0-60, 61-80, 81-100)' -Alignment center -FontSize 12px
New-HTMLText -Text 'Interpreted as: 0-60%, 61-80%, 81-100%' -Alignment center -FontSize 10px
New-HTMLGage -Label 'Server CPU %' -MinValue 0 -MaxValue 100 -Value 85 -Counter {
New-GageSector -Color Green -Min 0 -Max 60
New-GageSector -Color Yellow -Min 61 -Max 80
New-GageSector -Color Red -Min 81 -Max 100
}
}
New-HTMLPanel {
New-HTMLText -Text 'Absolute value sectors' -Color Red -Alignment center -FontSize 16px
New-HTMLText -Text 'Same gauge (0-100), same sectors (0-60, 61-80, 81-100)' -Alignment center -FontSize 12px
New-HTMLText -Text 'Interpreted as: 0-60, 61-80, 81-100 (absolute values)' -Alignment center -FontSize 10px
New-HTMLGage -Label 'Server CPU %' -MinValue 0 -MaxValue 100 -Value 85 -Counter -UseAbsoluteValues {
New-GageSector -Color Green -Min 0 -Max 60
New-GageSector -Color Yellow -Min 61 -Max 80
New-GageSector -Color Red -Min 81 -Max 100
}
}
New-HTMLPanel {
New-HTMLText -Text 'Network Traffic (Mbps)' -Color Purple -Alignment center -FontSize 16px
New-HTMLGage -Label 'Current Speed' -MinValue 0 -MaxValue 1000 -Value 750 -Counter -UseAbsoluteValues -ValueSymbol 'Mbps' {
New-GageSector -Color Green -Min 0 -Max 300
New-GageSector -Color Yellow -Min 301 -Max 700
New-GageSector -Color Orange -Min 701 -Max 900
New-GageSector -Color Red -Min 901 -Max 1000
}
}
New-HTMLPanel {
New-HTMLText -Text 'Temperature Monitoring' -Color DarkBlue -Alignment center -FontSize 16px
New-HTMLGage -Label 'Server Temp (°C)' -MinValue 0 -MaxValue 100 -Value 65 -Counter -UseAbsoluteValues -ValueSymbol '°C' {
New-GageSector -Color Blue -Min 0 -Max 40
New-GageSector -Color Green -Min 41 -Max 60
New-GageSector -Color Yellow -Min 61 -Max 75
New-GageSector -Color Orange -Min 76 -Max 85
New-GageSector -Color Red -Min 86 -Max 100
}
}
New-HTMLPanel {
New-HTMLText -Text 'Disk Space Usage (TB)' -Color DarkGreen -Alignment center -FontSize 16px
New-HTMLGage -Label 'Storage Used' -MinValue 0 -MaxValue 10 -Value 7.5 -Counter -UseAbsoluteValues -ValueSymbol 'TB' -DecimalNumbers 1 {
New-GageSector -Color Green -Min 0 -Max 5
New-GageSector -Color Yellow -Min 5 -Max 8
New-GageSector -Color Red -Min 8 -Max 10
}
}
New-HTMLPanel {
New-HTMLText -Text 'Database Connections' -Color Maroon -Alignment center -FontSize 16px
New-HTMLGage -Label 'Active Connections' -MinValue 0 -MaxValue 500 -Value 320 -Counter -UseAbsoluteValues {
New-GageSector -Color Green -Min 0 -Max 200
New-GageSector -Color Yellow -Min 201 -Max 350
New-GageSector -Color Orange -Min 351 -Max 450
New-GageSector -Color Red -Min 451 -Max 500
}
}
}

} -ShowHTML -Online
Loading
Loading