Rename Chart.saveHtmlAs -> Chart.saveHtml. Refactor and temporaily fix Chart.ShowAsImage

Author: kMutagene

src/Plotly.NET/CSharpLayer/GenericChartExtensions.fs

@@ -966,10 +966,10 @@ module GenericChartExtensions =
 
 
         /// Save chart as html single page
-        [<CompiledName("SaveHtmlAs")>]
+        [<CompiledName("SaveHtml")>]
         [<Extension>]
-        member this.SaveHtmlAs(pathName: string, [<Optional; DefaultParameterValue(null)>] ?Verbose) =
-            Chart.saveHtmlAs pathName this
+        member this.SaveHtml(path: string, [<Optional; DefaultParameterValue(null)>] ?OpenInBrowser: bool) =
+            this |> Chart.saveHtml (path, ?OpenInBrowser = OpenInBrowser)
 
         /// Show chart in browser
         [<CompiledName("Show")>]

src/Plotly.NET/ChartAPI/Chart.fs

@@ -18,37 +18,44 @@ type Chart =
     //==============================================================================================================
 
     /// Save chart as html single page
-    [<CompiledName("SaveHtmlAs")>]
-    static member saveHtmlAs(pathName: string, [<Optional; DefaultParameterValue(null)>] ?Verbose) =
+    [<CompiledName("SaveHtml")>]
+    static member saveHtml(path: string, [<Optional; DefaultParameterValue(null)>] ?OpenInBrowser: bool) =
         fun (ch: GenericChart) ->
+            let show = defaultArg OpenInBrowser false
+
             let html = GenericChart.toEmbeddedHTML ch
-            let file = sprintf "%s.html" pathName // remove file extension
-            File.WriteAllText(file, html)
 
-            let verbose = defaultArg Verbose false
+            let file =
+                if path.EndsWith(".html") then
+                    path
+                else
+                    $"{path}.html"
 
-            if verbose then
-                file |> openOsSpecificFile
+            File.WriteAllText(file, html)
+            if show then file |> openOsSpecificFile
 
     /// Show chart in browser
     [<CompiledName("Show")>]
     static member show(ch: GenericChart) =
         let guid = Guid.NewGuid().ToString()
-        let html = GenericChart.toEmbeddedHTML ch
         let tempPath = Path.GetTempPath()
         let file = sprintf "%s.html" guid
         let path = Path.Combine(tempPath, file)
-        File.WriteAllText(path, html)
-        path |> openOsSpecificFile
+        ch |> Chart.saveHtml (path, true)
 
     /// Show chart in browser
     [<CompiledName("ShowAsImage")>]
     static member showAsImage (format: StyleParam.ImageFormat) (ch: GenericChart) =
         let guid = Guid.NewGuid().ToString()
-        let html = GenericChart.toEmbeddedImage format ch
         let tempPath = Path.GetTempPath()
         let file = sprintf "%s.html" guid
         let path = Path.Combine(tempPath, file)
+
+        let html =
+            ch
+            |> Chart.withAdditionalHeadTags [ """<script src="https://unpkg.com/@plotly/d3@3.8.0/d3.js"></script>""" ]
+            |> GenericChart.toEmbeddedImage format
+
         File.WriteAllText(path, html)
         path |> openOsSpecificFile
 

src/Plotly.NET/ChartAPI/GenericChart.fs

@@ -48,14 +48,6 @@ module HTML =
 </html>"""
 
 
-    //  let chart =
-    //      """<div id="[ID]" style="width: [WIDTH]px; height: [HEIGHT]px;"><!-- Plotly chart will be drawn inside this DIV --></div>
-    //<script>
-    //  var data = [DATA];
-    //  var layout = [LAYOUT];
-    //  var config = [CONFIG];
-    //  Plotly.newPlot('[ID]', data, layout, config);
-    //</script>"""
     let chart =
         let newScript = new System.Text.StringBuilder()
         newScript.AppendLine("""<div id="[ID]"><!-- Plotly chart will be drawn inside this DIV --></div>""") |> ignore
@@ -99,14 +91,13 @@ module HTML =
         newScript.ToString()
 
 
-    let staticChart =
+    let imageChart =
         """<div id="[ID]" style="display: none;"><!-- Plotly chart will be drawn inside this DIV --></div>
 
-  <img id="jpg-export"></img>
+  <img id="chart-image"></img>
 
   <script>
-    var d3 = Plotly.d3;
-    var img_jpg= d3.select('#jpg-export');
+    var img_jpg = d3.select('#chart-image');
     var data = [DATA];
     var layout = [LAYOUT];
     var config = [CONFIG];
@@ -388,12 +379,6 @@ module GenericChart =
             .Replace("[CONFIG]", configJson)
         |> DisplayOptions.replaceHtmlPlaceholders displayOpts
 
-
-
-
-
-
-
     /// Converts a GenericChart to it HTML representation and set the size of the div
     let toChartHtmlWithSize (width: int) (height: int) (gChart: GenericChart) =
         let guid = Guid.NewGuid().ToString()
@@ -412,7 +397,6 @@ module GenericChart =
 
         let displayOpts = getDisplayOptions gChart
 
-
         HTML
             .chart
             .Replace("[ID]", guid)
@@ -431,8 +415,16 @@ module GenericChart =
 
         HTML.doc.Replace("[CHART]", chartMarkup) |> DisplayOptions.replaceHtmlPlaceholders displayOpts
 
+    [<Obsolete("This function will be dropped in the 2.0 release. Create either a static chart (e.g using Config.init(StaticPlot=true)) or use Plotly.NET.ImageExport")>]
     /// Converts a GenericChart to its Image representation
+    ///
+    /// This function is obsolete and will soon be dropped.
+    ///
+    /// Either use a static plot config (e.g. myChart |> Chart.withConfig(Config.init(StaticPlot=true)) https://plotly.net/00_3_chart-config.html#Static-plots
+    ///
+    /// or use the Plotly.NET.ImageExport package https://www.nuget.org/packages/Plotly.NET.ImageExport/
     let toChartImage (format: StyleParam.ImageFormat) gChart =
+
         let guid = Guid.NewGuid().ToString()
 
         let tracesJson =
@@ -443,30 +435,32 @@ module GenericChart =
             let layout = getLayout gChart
             JsonConvert.SerializeObject(layout, jsonConfig)
 
-        let html =
-            HTML
-                .staticChart
-                .Replace("[WIDTH]", string 600)
-                .Replace("[HEIGHT]", string 600)
-                .Replace("[ID]", guid)
-                .Replace("[DATA]", tracesJson)
-                .Replace("[LAYOUT]", layoutJson)
-                .Replace("[IMAGEFORMAT]", format.ToString().ToLower())
-                .Replace("[CONFIG]", "{}")
+        let displayOpts = getDisplayOptions gChart
+
+        HTML
+            .imageChart
+            .Replace("[WIDTH]", string 600)
+            .Replace("[HEIGHT]", string 600)
+            .Replace("[ID]", guid)
+            .Replace("[DATA]", tracesJson)
+            .Replace("[LAYOUT]", layoutJson)
+            .Replace("[IMAGEFORMAT]", format.ToString().ToLower())
+            .Replace("[CONFIG]", "{}")
+        |> DisplayOptions.replaceHtmlPlaceholders displayOpts
 
-        html
 
     /// Converts a GenericChart to an image and embeds it into a html page
     let toEmbeddedImage (format: StyleParam.ImageFormat) gChart =
-        let html =
-            let chartMarkup = toChartImage format gChart
 
-            HTML
-                .doc
-                .Replace("[CHART]", chartMarkup)
-                .Replace("[CONFIG]", "{}")
+        let chartMarkup = toChartImage format gChart
+
+        let displayOpts = getDisplayOptions gChart
 
-        html
+        HTML
+            .doc
+            .Replace("[CHART]", chartMarkup)
+            .Replace("[CONFIG]", "{}")
+        |> DisplayOptions.replaceHtmlPlaceholders displayOpts
 
 
     /// Creates a new GenericChart whose traces are the results of applying the given function to each of the trace of the GenericChart.