Skip to content

Commit c7f06ad

Browse files
PrzemyslawKlysPrzemyslawKlys
committed
Gage functionality
1 parent 3c710d4 commit c7f06ad

File tree

5 files changed

+295
-4
lines changed

5 files changed

+295
-4
lines changed

‎Private/Parameters.Configuration.ps1

+2-2
Original file line numberDiff line numberDiff line change
@@ -305,8 +305,8 @@ $Script:Configuration = [ordered] @{
305305
Comment = 'Just Gage Library'
306306
Header = @{
307307
JSLink = @(
308-
'https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js'
309-
'https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.9/justgage.min.js'
308+
'https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js'
309+
'https://cdnjs.cloudflare.com/ajax/libs/justgage/1.3.3/justgage.min.js'
310310
)
311311
JS = @(
312312
"$PSScriptRoot\..\Resources\JS\raphael-min.js"

‎Public/New-GageSector.ps1

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
function New-GageSector {
2+
[CmdletBinding()]
3+
param(
4+
[string] $Color,
5+
[int] $Min,
6+
[int] $Max
7+
)
8+
9+
[ordered] @{
10+
color = ConvertFrom-Color -Color $Color
11+
lo = $Min
12+
hi = $Max
13+
}
14+
}
15+
Register-ArgumentCompleter -CommandName New-GageSection -ParameterName Color -ScriptBlock { $Script:RGBColors.Keys }

‎Public/New-HTMLGage.ps1

+276
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,276 @@
1+
function New-HTMLGage {
2+
[CmdletBinding()]
3+
param (
4+
[scriptblock] $GageContent,
5+
[validateSet('Gage', 'Donut')][string] $Type = 'Gage',
6+
[string] $BackgroundGaugageColor,
7+
[parameter(Mandatory)][decimal] $Value,
8+
[string] $ValueSymbol,
9+
[string] $ValueColor,
10+
[string] $ValueFont,
11+
[nullable[int]] $MinValue,
12+
[string] $MinText,
13+
[nullable[int]] $MaxValue,
14+
[string] $MaxText,
15+
[switch] $Reverse,
16+
[int] $DecimalNumbers,
17+
[decimal] $GaugageWidth,
18+
[string] $Title,
19+
[string] $Label,
20+
[string] $LabelColor,
21+
[switch] $Counter,
22+
[switch] $ShowInnerShadow,
23+
[switch] $NoGradient,
24+
[nullable[decimal]] $ShadowOpacity,
25+
[nullable[int]] $ShadowSize,
26+
[nullable[int]] $ShadowVerticalOffset,
27+
[switch] $Pointer,
28+
[nullable[int]] $PointerTopLength,
29+
[nullable[int]] $PointerBottomLength,
30+
[nullable[int]] $PointerBottomWidth,
31+
[string] $StrokeColor,
32+
#[validateSet('none')][string] $PointerStroke,
33+
[nullable[int]] $PointerStrokeWidth,
34+
[validateSet('none', 'square', 'round')] $PointerStrokeLinecap,
35+
[string] $PointerColor,
36+
[switch] $HideValue,
37+
[switch] $HideMinMax,
38+
[switch] $FormatNumber,
39+
[switch] $DisplayRemaining,
40+
[switch] $HumanFriendly,
41+
[int] $HumanFriendlyDecimal,
42+
[string[]] $SectorColors
43+
)
44+
# Make sure JustGage JS is added to source
45+
$Script:HTMLSchema.Features.JustGage = $true
46+
47+
# Build Options
48+
[string] $ID = "Gage" + (Get-RandomStringName -Size 8)
49+
$Gage = [ordered] @{
50+
id = $ID
51+
value = $Value
52+
}
53+
54+
# When null it will be removed as part of cleanup Remove-EmptyValues
55+
$Gage.shadowSize = $ShadowSize
56+
$Gage.shadowOpacity = $ShadowOpacity
57+
$Gage.shadowVerticalOffset = $ShadowVerticalOffset
58+
59+
if ($DecimalNumbers) {
60+
$Gage.decimals = $DecimalNumbers
61+
}
62+
if ($Title) {
63+
$Gage.title = $Title
64+
}
65+
if ($ValueColor) {
66+
$Gage.valueFontColor = $ValueColor
67+
}
68+
if ($ValueColor) {
69+
$Gage.valueFontFamily = $ValueFont
70+
}
71+
if ($MinText) {
72+
$Gage.minText = $MinText
73+
}
74+
if ($MaxText) {
75+
$Gage.maxText = $MaxText
76+
}
77+
78+
$Gage.min = $MinValue
79+
$Gage.max = $MaxValue
80+
81+
if ($Label) {
82+
$Gage.label = $Label
83+
}
84+
if ($LabelColor) {
85+
$Gage.labelFontColor = ConvertFrom-Color -Color $LabelColor
86+
}
87+
if ($Reverse) {
88+
$Gage.reverse = $Reverse.IsPresent
89+
}
90+
if ($Type -eq 'Donut') {
91+
$Gage.donut = $true
92+
}
93+
if ($GaugageWidth) {
94+
$Gage.gaugageWidthScale = $GaugageWidthScale
95+
}
96+
if ($Counter) {
97+
$Gage.counter = $Counter.IsPresent
98+
}
99+
if ($showInnerShadow) {
100+
$Gage.showInnerShadow = $ShowInnerShadow.IsPresent
101+
}
102+
if ($BackgroundGaugageColor) {
103+
$Gage.gaugeColor = ConvertFrom-Color -Color $BackgroundGaugageColor
104+
}
105+
if ($NoGradient) {
106+
$Gage.noGradient = $NoGradient.IsPresent
107+
}
108+
109+
if ($HideMinMax) {
110+
$Gage.hideMinMax = $HideMinMax.IsPresent
111+
}
112+
if ($HideValue) {
113+
$Gage.hideValue = $HideValue.IsPresent
114+
}
115+
if ($FormatNumber) {
116+
$Gage.formatNumber = $FormatNumber.IsPresent
117+
}
118+
if ($DisplayRemaining) {
119+
$Gage.displayRemaining = $DisplayRemaining.IsPresent
120+
}
121+
if ($HumanFriendly) {
122+
$Gage.humanFriendly = $HumanFriendly.IsPresent
123+
if ($HumanFriendlyDecimal) {
124+
$Gage.humanFriendlyDecimal = $HumanFriendlyDecimal
125+
}
126+
}
127+
if ($ValueSymbol) {
128+
$Gage.symbol = $ValueSymbol
129+
}
130+
131+
if ($GageContent) {
132+
[Array] $GageOutput = & $GageContent
133+
if ($GageOutput.Count -gt 0) {
134+
$Gage.customSectors = @{
135+
percents = $true
136+
ranges = $GageOutput
137+
}
138+
}
139+
}
140+
141+
142+
143+
if ($Pointer) {
144+
$Gage.pointer = $Pointer.IsPresent
145+
146+
$Gage.pointerOptions = @{ }
147+
#if ($PointerToplength) {
148+
$Gage.pointerOptions.toplength = $PointerTopLength
149+
#}
150+
#if ($PointerBottomLength) {
151+
$Gage.pointerOptions.bottomlength = $PointerBottomLength
152+
#}
153+
#if ($PointerBottomWidth) {
154+
$Gage.pointerOptions.bottomwidth = $PointerBottomWidth
155+
#}
156+
#if ($PointerStroke) {
157+
158+
#}
159+
#if ($PointerStrokeWidth) {
160+
$Gage.pointerOptions.stroke_width = $PointerStrokeWidth
161+
#}
162+
#if ($PointerStrokeLinecap) {
163+
$Gage.pointerOptions.stroke_linecap = $PointerStrokeLinecap
164+
#}
165+
#if ($PointerColor) {
166+
$Gage.pointerOptions.color = ConvertFrom-Color -Color $PointerColor
167+
#}
168+
#if ($StrokeColor) {
169+
$Gage.pointerOptions.stroke = ConvertFrom-Color -Color $StrokeColor
170+
#}
171+
}
172+
$gage.relativeGaugeSize = $true
173+
Remove-EmptyValues -Hashtable $Gage -Rerun 1 -Recursive
174+
175+
# Build HTML
176+
$Div = New-HTMLTag -Tag 'div' -Attributes @{ id = $Gage.id; }
177+
178+
$Script = New-HTMLTag -Tag 'script' -Value {
179+
# Convert Dictionary to JSON and return chart within SCRIPT tag
180+
# Make sure to return with additional empty string
181+
$JSON = $Gage | ConvertTo-Json -Depth 5 | ForEach-Object { [System.Text.RegularExpressions.Regex]::Unescape($_) }
182+
"document.addEventListener(`"DOMContentLoaded`", function (event) {"
183+
"var g1 = new JustGage( $JSON );"
184+
"});"
185+
} -NewLine
186+
187+
# Return Data
188+
$Div
189+
$Script
190+
}
191+
Register-ArgumentCompleter -CommandName New-HTMLGage -ParameterName GaugageColor -ScriptBlock { $Script:RGBColors.Keys }
192+
Register-ArgumentCompleter -CommandName New-HTMLGage -ParameterName LabelColor -ScriptBlock { $Script:RGBColors.Keys }
193+
Register-ArgumentCompleter -CommandName New-HTMLGage -ParameterName ValueColor -ScriptBlock { $Script:RGBColors.Keys }
194+
Register-ArgumentCompleter -CommandName New-HTMLGage -ParameterName PointerColor -ScriptBlock { $Script:RGBColors.Keys }
195+
Register-ArgumentCompleter -CommandName New-HTMLGage -ParameterName StrokeColor -ScriptBlock { $Script:RGBColors.Keys }
196+
Register-ArgumentCompleter -CommandName New-HTMLGage -ParameterName SectorColors -ScriptBlock { $Script:RGBColors.Keys }
197+
198+
<#
199+
| | Name | Default | Description |
200+
|-| -------------------- | --------------------------------- | ----------------------------------------------------------------------------------- |
201+
|+| id | (required) | The HTML container element id |
202+
|+| value | 0 | Value Gauge is showing |
203+
| | parentNode | null | The HTML container element object. Used if id is not present |
204+
| | defaults | false | Defaults parameters to use globally for gauge objects |
205+
| | width | null | The Gauge width in pixels (Integer) |
206+
| | height | null | The Gauge height in pixels |
207+
|+| valueFontColor | #010101 | Color of label showing current value |
208+
|+| valueFontFamily | Arial | Font of label showing current value |
209+
|+| symbol | '' | Special symbol to show next to value |
210+
|+| min | 0 | Min value |
211+
|+| minTxt | false | Min value text, overrides min if specified |
212+
|+| max | 100 | Max value |
213+
|+| maxTxt | false | Max value text, overrides max if specified |
214+
|+| reverse | false | Reverse min and max |
215+
|+| humanFriendlyDecimal | 0 | Number of decimal places for our human friendly number to contain |
216+
| | textRenderer | null | Function applied before redering text (value) => value |
217+
| | onAnimationEnd | null | Function applied after animation is done |
218+
|+| gaugeWidthScale | 1.0 | Width of the gauge element |
219+
|+| gaugeColor | #edebeb | Background color of gauge element |
220+
|+| label | '' | Text to show below value |
221+
|+| labelFontColor | #b3b3b3 | Color of label showing label under value |
222+
|+| shadowOpacity | 0.2 | Shadow opacity 0 ~ 1 |
223+
|+| shadowSize | 5 | Inner shadow size |
224+
|+| shadowVerticalOffset | 3 | How much shadow is offset from top |
225+
|+| levelColors | ["#a9d70b", "#f9c802", "#ff0000"] | Colors of indicator, from lower to upper, in RGB format |
226+
| | startAnimationTime | 700 | Length of initial animation in milliseconds |
227+
| | startAnimationType | > | Type of initial animation (linear, >, <, <>, bounce) |
228+
| | refreshAnimationTime | 700 | Length of refresh animation in milliseconds |
229+
| | refreshAnimationType | > | Type of refresh animation (linear, >, <, <>, bounce) |
230+
| | donutStartAngle | 90 | Angle to start from when in donut mode |
231+
| | valueMinFontSize | 16 | Absolute minimum font size for the value label |
232+
| | labelMinFontSize | 10 | Absolute minimum font size for the label |
233+
| | minLabelMinFontSize | 10 | Absolute minimum font size for the min label |
234+
| | maxLabelMinFontSize | 10 | Absolute minimum font size for the man label |
235+
|+| hideValue | false | Hide value text |
236+
|+| hideMinMax | false | Hide min/max text |
237+
|+| showInnerShadow | false | Show inner shadow |
238+
|+| humanFriendly | false | convert large numbers for min, max, value to human friendly (e.g. 1234567 -> 1.23M) |
239+
|+| noGradient | false | Whether to use gradual color change for value, or sector-based |
240+
|+| donut | false | Show donut gauge |
241+
|*| relativeGaugeSize | false | Whether gauge size should follow changes in container element size |
242+
|+| counter | false | Animate text value number change |
243+
|+| decimals | 0 | Number of digits after floating point |
244+
| | customSectors | {} | Custom sectors colors. Expects an object |
245+
|+| formatNumber | false | Formats numbers with commas where appropriate |
246+
|x| pointer | false | Show value pointer |
247+
|x| pointerOptions | {} | Pointer options. Expects an object |
248+
|+| displayRemaining | false | Replace display number with the value remaining to reach max value |
249+
#>
250+
251+
<#
252+
pointerOptions: {
253+
toplength: null,
254+
bottomlength: null,
255+
bottomwidth: null,
256+
stroke: 'none',
257+
stroke_width: 0,
258+
stroke_linecap: 'square',
259+
color: '#000000'
260+
}
261+
#>
262+
<#
263+
customSectors: {
264+
percents: true, // lo and hi values are in %
265+
ranges: [{
266+
color : "#43bf58",
267+
lo : 0,
268+
hi : 50
269+
},
270+
{
271+
color : "#ff3b30",
272+
lo : 51,
273+
hi : 100
274+
}]
275+
}
276+
#>

0 commit comments

Comments
 (0)