Stephanevg/PSHTML

add script tag to New-PSHTMLChart so end user doesn't have to add it anymore

Stephanevg opened this issue · 5 comments

Currently, when New-PSHTMLChart is used, a user must surround with a script tag

script -Content {
   Write-pshtmlChart -plop bla -ble
}

The idea of this story, is to integrate automatically the script tag in the Write-pshtmlchart function as this is actually an unecessary step.

We will most likley need to add a -ChartID to the new-PSHTMLChart function out of which we can generate the script tag ID using a format similar to this one: script_$ChartID (Open for suggestins)

Imo, instead of returning $Chart.GetDefinition($CanvasID) in New-PSHTMLChart, you just need to return the following:

script -content {
     $Chart.GetDefinition($CanvasID)
} -Id "pshtml_script_chart_$CanvasID"

Ok, merged in Dev. Will be part of v0.8.0Alpha2

Although this works perfectly fine for new documents, existing documents, like all the charts located in the Example folder of the module don't work anymore.

Example

#import-module PSHTML
$BarCanvasID = "barcanvas"
$htmlDocument = html { 
    head {
        title 'Chart JS Demonstration'
        
    }
    body {
        
        h1 "PSHTML Graph"

        div {
            
            p {
                "This is a horizontal bar graph"
            }
            canvas -Height 400px -Width 400px -Id $BarCanvasID {
    
            }

        }

        script -src "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" -type "text/javascript"

        script -content {

            $Labels = @("January","February","Mars","April","Mai","June","July","August","September","October","November","december")
            $dsb1 = @() 

            $Data1 = @(17,25,18,17,22,30,35,44,4,1,6,12)

            $dsb1 += New-PSHTMLChartBarDataSet -Data $data1 -label "2018" -BackgroundColor (get-pshtmlColor -color blue) -hoverBackgroundColor (get-pshtmlColor -color green)
            $Data2 = @(4,1,6,12,17,25,18,17,22,30,35,44)
            $dsb1 += New-PSHTMLChartBarDataSet -Data $data2 -label "2019" -BackgroundColor (get-pshtmlColor -color red) -hoverBackgroundColor (get-pshtmlColor -color yellow)

            New-PSHTMLChart -type horizontalBar -DataSet $dsb1 -title "Horizontal Bar Chart Example" -Labels $Labels -CanvasID $BarCanvasID

        }

            
    }
}


$OutPath = "$Home/BarChart2.html"
Out-PSHTMLDocument -HTMLDocument $htmlDocument -OutPath $outpath -Show

The above script will not work anymore as it will render a script tag inside a script tag. That is something the browser cannot understand, and therefore will render a white page.

To fix this, the existing Script tag must be removed from the PSHTML document. This must be clearly communicated on the web, and in the documentation.

Since this will be a breaking change. This can also be introduced in version 1.0.0

This one is actually ready for production, but since it breaks existing scripts, it will only be made available with version 1.0.

The only things that is left to do is:

  1. uncomment the following chunk of code in New-PSHTMLChart
<#
            Chunk ready for 8.1

            if ($tobase64) {
                script -content {
                    $Chart.GetDefinition($CanvasID,$true)
                } -Id "pshtml_script_chart_$CanvasID"
            } else {
                script -content {
                    $Chart.GetDefinition($CanvasID)
                } -Id "pshtml_script_chart_$CanvasID"
            }
            #>

2- Add tests