diff --git a/docs/Tutorials/Elements/Charts.md b/docs/Tutorials/Elements/Charts.md index a938ae7e..a373238b 100644 --- a/docs/Tutorials/Elements/Charts.md +++ b/docs/Tutorials/Elements/Charts.md @@ -1,8 +1,8 @@ # Charts -| Support | | -| ------- |-| -| Events | No | +| Support | | +| ------- | --- | +| Events | No | You can display data rendered as a chart by using [`New-PodeWebChart`](../../../Functions/Elements/New-PodeWebChart), and the following chart types are supported: @@ -31,7 +31,7 @@ New-PodeWebChart -Name 'Example Chart' -Type Line -ArgumentList 'Value1', 2, $fa ### Raw -Before showing the ConvertTo function, the data format needed is as follows: the returned value has be an array of hashtables, with each hashtable requires a `Key` property, and a `Values` property that's an array of further hashtables. The `Key` is the value used on the X-axis, and the `Values` is an array of data points used on the Y-axis. The `Values` hashtables also has to contain a `Key` and a `Value` property - the `Key` here is the dataset group name, and the `Value` is the value on the Y-axis. +Before showing the ConvertTo function, the data format needed is as follows: the returned value has to be an array of hashtables, with each hashtable requiring a `Key` property, and a `Values` property that's an array of further hashtables. The `Key` is the value used on the X-axis, and the `Values` are an array of data points used on the Y-axis. The `Values` hashtables also need to contain a `Key` and a `Value` property - the `Key` here is the dataset group name, and the `Value` is the value on the Y-axis. For example, the below will show a line chart consisting of 10 data points across 2 groups: Group1/Group2: @@ -68,9 +68,9 @@ If you click the refresh button in the top-left corner, the `-ScriptBlock` will ### ConvertTo -The [`ConvertTo-PodeWebChartData`](../../../Functions/Actions/ConvertTo-PodeWebChartData) helps to simplify the above a raw format, by letting you convert data at the end of a pipeline. The function takes a `-LabelProperty` which is the name of a property in the input that should be used for the X-axis, and then a `-DatasetProperty` with is property names for Y-axis values. +The [`ConvertTo-PodeWebChartData`](../../../Functions/Actions/ConvertTo-PodeWebChartData) helps to simplify the above raw format, by letting you convert data at the end of a pipeline. The function takes a `-LabelProperty` which is the name of a property in the input that should be used for the X-axis, and then a `-DatasetProperty` with its property names for Y-axis values. -For example, let's say we want to display the top 10 processes using the most CPU. We want to display the process name, and its CPU and Memory usage, *and* we want it to auto-refresh every minute: +For example, let's say we want to display the top 10 processes using the most CPU. We want to display the process name and its CPU and Memory usage, *and* we want it to auto-refresh every minute: ```powershell New-PodeWebContainer -Content @( @@ -89,10 +89,10 @@ which renders a chart that looks like below: ### Data -You can pass static data to a Chart to be rendered by using the `-Data` parameter. This parameter can be used to in general, but is more appropriate to be used when rendering a new Chart as an action from another element - such as a Form to show "top X" processes. +You can pass static data to a Chart to be rendered by using the `-Data` parameter. This parameter can be used in general but is more appropriate to be used when rendering a new Chart as an action from another element - such as a Form to show "top X" processes. !!! important - If you render a main Chart using `-Data` on your page the data will be static and unchanging on page loads - unless you render the Chart inside a `-ScriptBlock` of `Add-PodeWebPage`, but you'd be refetching the data on every page load which might impact the performance of loading the page as it will be synchronous not asynchronous. + If you render a main Chart using `-Data` on your page the data will be static and unchanging on page loads - unless you render the Chart inside a `-ScriptBlock` of `Add-PodeWebPage`, but you'd be re-fetching the data on every page load which might impact the performance of loading the page as it will be synchronous, not asynchronous. ```powershell New-PodeWebContainer -Content @( @@ -123,9 +123,9 @@ New-PodeWebContainer -Content @( ## Append -Now let's say we want `-AutoRefresh` a chart every minute, and we want it to display the current CPU usage, but only for the last 15 minutes. To do this, you have to supply `-Append` and any data returned from the `-ScriptBlock` will be appended to the chart instead. To restrict the data points to 15 minutes, we can supply `-MaxItems 15`. +Now let's say we want `-AutoRefresh` a chart every minute, and we want it to display the current CPU usage, but only for the last 15 minutes. To do this, you have to supply `-Append`, and any data returned from the `-ScriptBlock` will be appended to the chart instead. To restrict the data points to 15 minutes, we can supply `-MaxItems 15`. -It would also be nice to have the X-axis labels be timestamps, and Pode.Web can automatically show a data points time stamp by using the `-TimeLabels` switch. +It would also be nice to have the X-axis labels be timestamps and Pode.Web can automatically show a data point's timestamp by using the `-TimeLabels` switch. The below example would render this chart for us: @@ -147,7 +147,7 @@ The scriptblock has access to the `$WebEvent`, and when a chart requests its `-S ## Windows Counters -To display line charts for Windows Performance Counters more easily, Pode.Web has an inbuilt [`New-PodeWebCounterChart`](../../../Functions/Elements/New-PodeWebCounterChart). When used, this automatically sets up an auto-refreshing, timestamped, appending line chart for you; all you have to do is supply the name of the counter, and it will show a chart for up to the last 30mins. +To display line charts for Windows Performance Counters more easily, Pode.Web has an inbuilt [`New-PodeWebCounterChart`](../../../Functions/Elements/New-PodeWebCounterChart). When used, this automatically sets up an auto-refreshing, timestamped, appending line chart for you; all you have to do is supply the name of the counter, and it will show a chart for up to the last 30 minutes. For example, taking the above CPU example, this would be it using the inbuilt helper: @@ -161,4 +161,7 @@ which renders a chart that looks like below: ## Size -The `-Height` of a chart has the default unit of `px`. If `0` is specified then `auto` is used instead. Any custom value such as `10%` can be used, but if a plain number is used then `px` is appended. +The `-Height` or `-Width` of a chart has the default unit of `px`. If `0` is specified then `auto` is used instead (or `100%` for width). Any custom value such as `10%` can be used, but if a plain number is used then `px` is appended - or you can use `em` values as well. + +!!! note + When using `%` values, note that for `-Width` they are usually respected however, for `-Height` is is best to try an use literal values as the `%` isn't always respected. diff --git a/examples/charts.ps1 b/examples/charts.ps1 index f88cd26d..e97bc3cd 100644 --- a/examples/charts.ps1 +++ b/examples/charts.ps1 @@ -16,16 +16,16 @@ Start-PodeServer -Threads 2 { } return (1..$count | ForEach-Object { - @{ - Key = $_ - Values = @(foreach ($i in 1..15) { - @{ - Key = "Example$($i)" - Value = (Get-Random -Maximum 10) - } - }) - } - }) + @{ + Key = $_ + Values = @(foreach ($i in 1..5) { + @{ + Key = "Example$($i)" + Value = (Get-Random -Maximum 10) + } + }) + } + }) } # set the home page controls @@ -36,9 +36,30 @@ Start-PodeServer -Threads 2 { -Append ` -TimeLabels ` -MaxItems 30 ` + -Height '15em' ` -AutoRefresh ` - -AsCard ` - -Colours '#ff0000', '#00ff00', '#0000ff' + -AsCard - Add-PodeWebPage -Name 'Home' -Path '/' -HomePage -Content $card1 -Title 'Charts' + $card2 = New-PodeWebChart -Name 'Bar Example' -Type Bar -Height '15em' -AutoRefresh -AsCard -ScriptBlock { + Get-Process | + Sort-Object -Property CPU -Descending | + Select-Object -First 10 | + ConvertTo-PodeWebChartData -LabelProperty ProcessName -DatasetProperty CPU + } + + $card3 = New-PodeWebChart -Name 'Pie Example' -Type Pie -Height '20em' -AutoRefresh -AsCard -ScriptBlock { + Get-Process | + Sort-Object -Property CPU -Descending | + Select-Object -First 10 | + ConvertTo-PodeWebChartData -LabelProperty ProcessName -DatasetProperty CPU + } + + $card4 = New-PodeWebChart -Name 'Doughnut Example' -Type Doughnut -Height '20em' -AutoRefresh -AsCard -ScriptBlock { + Get-Process | + Sort-Object -Property CPU -Descending | + Select-Object -First 10 | + ConvertTo-PodeWebChartData -LabelProperty ProcessName -DatasetProperty CPU + } + + Add-PodeWebPage -Name 'Home' -Path '/' -HomePage -Content $card1, $card2, $card3, $card4 -Title 'Charts' } \ No newline at end of file diff --git a/examples/full.ps1 b/examples/full.ps1 index d1d6c0be..7b0ccef2 100644 --- a/examples/full.ps1 +++ b/examples/full.ps1 @@ -228,10 +228,10 @@ Start-PodeServer -StatusPageExceptions Show { New-PodeWebChart -Name 'Line Example 2' -NoAuth -Type Line -ScriptBlock $chartData -Append -TimeLabels -MaxItems 30 -AutoRefresh -Height 250 -AsCard ) New-PodeWebTab -Name 'Bar' -Icon 'chart-bar' -Content @( - New-PodeWebChart -Name 'Bar Example 2' -NoAuth -Type Bar -ScriptBlock $chartData -AsCard + New-PodeWebChart -Name 'Bar Example 2' -NoAuth -Type Bar -ScriptBlock $chartData -AsCard -Height 500 -Width 750 ) New-PodeWebTab -Name 'Doughnut' -Icon (New-PodeWebIcon -Name 'chart-donut' -HoverIcon (New-PodeWebIconPreset -Spin)) -Content @( - New-PodeWebChart -Name 'Doughnut Example 1' -NoAuth -Type Doughnut -ScriptBlock $chartData -AsCard + New-PodeWebChart -Name 'Doughnut Example 1' -NoAuth -Type Doughnut -ScriptBlock $chartData -AsCard -Height 500 -Width 500 ) ) diff --git a/src/Public/Elements.ps1 b/src/Public/Elements.ps1 index 68d8779e..3e6de54b 100644 --- a/src/Public/Elements.ps1 +++ b/src/Public/Elements.ps1 @@ -1822,6 +1822,10 @@ function New-PodeWebChart { [string] $Height = 0, + [Parameter()] + [string] + $Width = 0, + [Parameter(ParameterSetName = 'Dynamic')] [object[]] $ArgumentList, @@ -1927,7 +1931,8 @@ function New-PodeWebChart { IsDynamic = ($null -ne $ScriptBlock) Append = $Append.IsPresent MaxItems = $MaxItems - Height = (ConvertTo-PodeWebSize -Value $Height -Default 'auto' -Type 'px') + Height = (ConvertTo-PodeWebSize -Value $Height -Default 'auto' -Type 'px').ToLowerInvariant() + Width = (ConvertTo-PodeWebSize -Value $Width -Default '100%' -Type 'px').ToLowerInvariant() TimeLabels = $TimeLabels.IsPresent AutoRefresh = $AutoRefresh.IsPresent RefreshInterval = ($RefreshInterval * 1000) diff --git a/src/Templates/Public/scripts/templates.js b/src/Templates/Public/scripts/templates.js index 376b0e7e..072e4fb6 100644 --- a/src/Templates/Public/scripts/templates.js +++ b/src/Templates/Public/scripts/templates.js @@ -4466,10 +4466,14 @@ class PodeChart extends PodeRefreshableElement { new(data, sender, opts) { var message = data.Message ? `

${data.Message}

` : ''; var height = data.Height !== 'auto' ? `height:${data.Height};` : ''; + var width = data.Width !== 'auto' ? `width:${data.Width};` : ''; + console.log(height); + console.log(width); return `${message}
@@ -4478,7 +4482,7 @@ class PodeChart extends PodeRefreshableElement { ${this.buildRefreshButton(false)}
- +
@@ -4628,8 +4632,8 @@ class PodeChart extends PodeRefreshableElement { // axis themes var axesOpts = { - x: {}, - y: {} + x: null, + y: null }; // dataset details @@ -4691,7 +4695,10 @@ class PodeChart extends PodeRefreshableElement { scales: { x: axesOpts.x, y: axesOpts.y - } + }, + + responsive: false, + maintainAspectRatio: true } }); }