Add more styling options to optional Description text for charts

Author: kMutagene

.gitignore

@@ -184,4 +184,5 @@ docsrc/content/release-notes.md
 .fake
 docsrc/tools/FSharp.Formatting.svclog
 docs
-temp/gh-pages
+temp/gh-pages
+/src/FSharp.Plotly/TestScript.fsx

src/FSharp.Plotly/ChartExtensions.fs

@@ -4,7 +4,7 @@ open System
 open System.IO
 
 open GenericChart
-
+open ChartDescription
 
 /// Extensions methods for Charts supporting the fluent pipeline style 'Chart.WithXYZ(...)'.
 [<AutoOpen>]
@@ -381,28 +381,36 @@ module ChartExtensions =
             if verbose then
                 System.Diagnostics.Process.Start(file) |> ignore
 
+        /// Saves chart in a specified file name. The caller is responsible for full path / filename / extension.
+        static member SaveHtmlWithDescriptionAs (pathName : string) (description : Description) (ch:GenericChart,?Verbose) =
+            let html = GenericChart.toEmbeddedHtmlWithDescription description ch
+            File.WriteAllText(pathName, html)
+            let verbose = defaultArg Verbose false
+            if verbose then
+                System.Diagnostics.Process.Start(pathName) |> ignore
 
         /// Show chart in browser
-        static member ShowWithDescription (show : bool) (d : string) (ch:GenericChart) =
+        static member ShowWithDescription (description : Description) (ch:GenericChart) =
             let guid = Guid.NewGuid().ToString()
-            let html = GenericChart.toEmbeddedHtmlWithDescription d ch
+            let html = GenericChart.toEmbeddedHtmlWithDescription description ch
             let tempPath = Path.GetTempPath()
             let file = sprintf "%s.html" guid
             let path = Path.Combine(tempPath, file)
             File.WriteAllText(path, html)
-            if show then System.Diagnostics.Process.Start(path) |> ignore
+            System.Diagnostics.Process.Start(path) |> ignore
 
 
-        /// Saves chart in a specified file name and shows it in the browser. The caller is responsible for full path / filename / extension.
-        static member ShowFileWithDescription (show : bool) (fullFileName : string) (d : string) (ch:GenericChart) =
-            let html = GenericChart.toEmbeddedHtmlWithDescription d ch
-            File.WriteAllText(fullFileName, html)
-            if show then System.Diagnostics.Process.Start(fullFileName) |> ignore
 
 
         /// Show chart in browser
-        static member Show (ch:GenericChart) = Chart.ShowWithDescription true "" ch
-
+        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)
+            System.Diagnostics.Process.Start(path) |> ignore
 
         /// Show chart in browser
         static member ShowAsImage (format:StyleParam.ImageFormat) (ch:GenericChart) = 

src/FSharp.Plotly/FSharp.Plotly.fsproj

@@ -36,6 +36,7 @@
     <Compile Include="GenericChart.fs" />
     <Compile Include="Chart.fs" />
     <Compile Include="ChartExtensions.fs" />
+    <None Include="TestScript.fsx" />
     <None Include="paket.references" />
     <None Include="paket.template" />
   </ItemGroup>

src/FSharp.Plotly/GenericChart.fs

@@ -14,6 +14,29 @@ module HTML =
         <!-- Plotly.js -->
         <meta http-equiv="X-UA-Compatible" content="IE=11" >
         <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+        <style>
+        .container {
+          padding-right: 25px;
+          padding-left: 25px;
+          margin-right: 0 auto;
+          margin-left: 0 auto;
+        }
+        @media (min-width: 768px) {
+          .container {
+            width: 750px;
+          }
+        }
+        @media (min-width: 992px) {
+          .container {
+            width: 970px;
+          }
+        }
+        @media (min-width: 1200px) {
+          .container {
+            width: 1170px;
+          }
+        }
+        </style>
     </head>
     <body>
       [CHART]
@@ -30,6 +53,12 @@ module HTML =
     Plotly.newPlot('[ID]', data, layout);
   </script>"""
 
+    let description ="""<div class=container>
+  <h3>[DESCRIPTIONHEADING]</h3>
+  <p>[DESCRIPTIONTEXT]</p>
+  </div>"""
+
+
     let staticChart =
         """<div id="[ID]" style="width: [WIDTH]px; height: [HEIGHT]px;display: none;"><!-- Plotly chart will be drawn inside this DIV --></div>
 
@@ -57,10 +86,27 @@ module HTML =
         });
   </script>"""
 
+module ChartDescription =
+    
+
+
+    type Description =
+        {
+            Heading : string
+            Text    : string
+        }
+
+    let toDescriptionHtml (d:Description) =
+        HTML.description
+            .Replace("[DESCRIPTIONHEADING]",d.Heading)
+            .Replace("[DESCRIPTIONTEXT]",d.Text)
+
+
 /// Module to represent a GenericChart
 module GenericChart =
 
     open Trace
+    open ChartDescription
 
     type GenericChart =
         | Chart of Trace * Layout
@@ -189,18 +235,26 @@ module GenericChart =
         html
 
 
-    let toEmbeddedHtmlWithDescription description gChart =
+    let toEmbeddedHtmlWithDescription (description:Description) gChart =
         let chartMarkup =
             toChartHTML gChart
 
+        let descriptionMarkup =
+            toDescriptionHtml description
+
         HTML.doc
             .Replace("[CHART]", chartMarkup)
-            .Replace("[DESCRIPTION]", description)
+            .Replace("[DESCRIPTION]", descriptionMarkup)
 
 
     /// Converts a GenericChart to it HTML representation and embeds it into a html page.
-    let toEmbeddedHTML gChart = toEmbeddedHtmlWithDescription "" gChart
+    let toEmbeddedHTML gChart = 
+        let chartMarkup =
+            toChartHTML gChart
 
+        HTML.doc
+            .Replace("[CHART]", chartMarkup)
+            .Replace("[DESCRIPTION]", "")
 
     /// Converts a GenericChart to its Image representation
     let toChartImage (format:StyleParam.ImageFormat) gChart =