improvement Gauge

[dakhama-mehdi]

I wanted to know if it was possible to offer gauge a little more modern than those found in the recent reports, this will give a touch of new air to the module, those present are already not bad. Thank you.

Like this example :

[PrzemyslawKlys]

Anything is possible.

Just i'm adding this stuff to my new private library that I have, which is not yet available as part of PSWriteHTML. Maybe in future it will be. Not sure yet.

[dakhama-mehdi]

Very nice you're gauge, I ended up integrating the lde bernii mode it integrates well with pswritehtml, we can either copy the JS locally or call directly on the repository for those who will be interested:

https://github.com/bernii/gauge.js/blob/gh-pages/dist/gauge.js

[dakhama-mehdi]

and here is the code it is easily integrated into new-html panel with the following parameters

New-HTMLPanel -Width "50%" {
New-HTMLGaugeLight -value 60 -Title "🏥 Health CA : 60"
}

function New-HTMLGaugeLight {
    param(
        [Parameter(Mandatory)]
        [int]$Value,
        [string]$Title = "Security Health",
		[string]$GaugePath = "https://raw.githubusercontent.com/bernii/gauge.js/gh-pages/dist/gauge.js",
        [int]$Width = 250,
        [int]$Height = 120,
        [int]$LowThreshold = 40,
        [int]$HighThreshold = 70,
        [string]$ColorLow = "#F2726F",
        [string]$ColorMid = "#FFC533",
        [string]$ColorHigh = "#62B58F"
    )

    <#
    Gauge.js integration (https://github.com/bernii/gauge.js)
    MIT License © 2012–2015 Bernhard Hiller
    Embedded for use in PowerShell HTML dashboards (no external dependency)
    #>

	#$gaugeJS = Get-Content -Raw -Path $GaugePath
    $gaugeJS = (Invoke-WebRequest -Uri $GaugePath).Content
    $id = "gauge_" + ([guid]::NewGuid().ToString("N"))

    # HTML code
    $html = @"
<div style='text-align:center;font-family:Arial;'>
  <h3>$Title</h3>
  <div style='max-width:${Width}px; width: 100%; margin: auto;'>
  <canvas id='$id'></canvas>
</div>
</div>

<script>
$gaugeJS

var opts = {
  angle: 0,
  lineWidth: 0.2,
  radiusScale: 1,
  pointer: {
    length: 0.6,
    strokeWidth: 0.035,
    color: '#000000'
  },
  limitMax: false,
  limitMin: false,
  strokeColor: '#EEEEEE',
  staticZones: [
    {strokeStyle: "$ColorLow", min: 0, max: $LowThreshold},
    {strokeStyle: "$ColorMid", min: $LowThreshold, max: $HighThreshold},
    {strokeStyle: "$ColorHigh", min: $HighThreshold, max: 100}
  ],
  staticLabels: {
    font: "12px sans-serif",
    labels: [0,25,50,75,100],
    color: "#000",
    fractionDigits: 0
  }
};
window.addEventListener('load', function () {
  var target = document.getElementById('$id');
  if (window.innerWidth < 768) {
    target.width = 150;
    target.height = 120;
  } else {
    target.width = $Width;
    target.height = $Height;
  }

  var gauge = new Gauge(target).setOptions(opts);
  gauge.maxValue = 100;
  gauge.setMinValue(0);
  gauge.animationSpeed = 32;
  gauge.set($Value);
});
</script>
"@
    return $html
}