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