Add more styling options to optional Description text for charts

plotly · May 22, 2019 · 7e2e2bd · 7e2e2bd
1 parent 1d2891d
commit 7e2e2bd
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 15 deletions.
diff --git a/.gitignore b/.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
diff --git a/src/FSharp.Plotly/ChartExtensions.fs b/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) = 

diff --git a/src/FSharp.Plotly/FSharp.Plotly.fsproj b/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>

diff --git a/src/FSharp.Plotly/GenericChart.fs b/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 =