Stephanevg / PSHTML

Cross platform Powershell module to generate HTML markup language
https://pshtml.readthedocs.io/en/latest/
Other
168 stars 43 forks source link

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

Open Stephanevg opened 5 years ago

Stephanevg commented 5 years ago

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)

LxLeChat commented 5 years ago

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"
Stephanevg commented 5 years ago

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

Stephanevg commented 5 years ago

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.

Stephanevg commented 5 years ago

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

Stephanevg commented 5 years ago

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