#368: Fixes an issue with Bar and Pie chart heights not being respected

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.

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'
 }

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
         )
     )
 

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)

src/Templates/Public/scripts/templates.js

@@ -4466,10 +4466,14 @@ class PodeChart extends PodeRefreshableElement {
     new(data, sender, opts) {
         var message = data.Message ? `<p class='card-text'>${data.Message}</p>` : '';
         var height = data.Height !== 'auto' ? `height:${data.Height};` : '';
+        var width = data.Width !== 'auto' ? `width:${data.Width};` : '';
+        console.log(height);
+        console.log(width);
 
         return `${message}<div
             id="${this.id}"
             name="${this.name}"
+            class="w-100"
             role='chart'
             pode-object="${this.getType()}"
             pode-id="${this.uuid}">
@@ -4478,7 +4482,7 @@ class PodeChart extends PodeRefreshableElement {
                         ${this.buildRefreshButton(false)}
                     </div>
                 </div>
-                <canvas class="my-4 w-100" style="${height}"></canvas>
+                <canvas class="my-4" style="${height}${width}"></canvas>
                 <div class="text-center">
                     <span for='${this.uuid}' class="pode-spinner spinner-grow pode-inbuilt-secondary-theme canvas-spinner" role="status"></span>
                 </div>
@@ -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
             }
         });
     }