Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Stephanevg opened this issue Jul 21, 2019 · 5 comments
Labels
Charts Add support for charts enhancement New feature or request
Milestone

Comments

@Stephanevg
Copy link
Owner

Stephanevg commented Jul 21, 2019

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)

@Stephanevg Stephanevg added the Charts Add support for charts label Jul 21, 2019
@Stephanevg Stephanevg added this to the 0.8.1 milestone Jul 21, 2019
@Stephanevg Stephanevg changed the title Add script block to New-PSHTMLChart so end user doesn't have to add it anymore add script tag to New-PSHTMLChart so end user doesn't have to add it anymore Jul 22, 2019
@Stephanevg Stephanevg added the enhancement New feature or request label Jul 22, 2019
@LxLeChat
Copy link
Contributor

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
Copy link
Owner Author

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

@Stephanevg Stephanevg reopened this Aug 1, 2019
@Stephanevg
Copy link
Owner Author

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
Copy link
Owner Author

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

@Stephanevg Stephanevg modified the milestones: 0.8.1, 1.0.0 Oct 19, 2019
@Stephanevg
Copy link
Owner Author

Stephanevg commented Oct 19, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Charts Add support for charts enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants