Include xplot in FsSnip.WebSite

App.config

@@ -1,14 +1,14 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <configuration>
   <startup>
     <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.5.1" />
   </startup>
   <runtime>
-    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
-      <dependentAssembly>
-        <assemblyIdentity name="FSharp.Core" publicKeyToken="b03f5f7f11d50a3a" culture="neutral" />
-        <bindingRedirect oldVersion="0.0.0.0-4.3.1.0" newVersion="4.3.1.0" xmlns="urn:schemas-microsoft-com:asm.v1" />
-      </dependentAssembly>
-    </assemblyBinding>
-  </runtime>
+
+  <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
+  <dependentAssembly>
+    <assemblyIdentity name="FSharp.Core" publicKeyToken="b03f5f7f11d50a3a" culture="neutral" />
+    <bindingRedirect oldVersion="0.0.0.0-4.3.1.0" newVersion="4.3.1.0" xmlns="urn:schemas-microsoft-com:asm.v1" />
+  </dependentAssembly>
+</assemblyBinding></runtime>
 </configuration>

app.fsx

@@ -5,6 +5,10 @@
 #r "packages/Suave.DotLiquid/lib/net40/Suave.DotLiquid.dll"
 #load "packages/FSharp.Azure.StorageTypeProvider/StorageTypeProvider.fsx"
 #load "packages/FSharp.Formatting/FSharp.Formatting.fsx"
+#I "packages/Google.DataTable.Net.Wrapper/lib"
+#I "packages/XPlot.GoogleCharts/lib/net45"
+#r "XPlot.GoogleCharts.dll"
+open XPlot.GoogleCharts
 open System
 open System.Web
 open System.IO
@@ -27,6 +31,7 @@ open FSharp.Azure.StorageTypeProvider
 #load "code/common/utils.fs"
 #load "code/common/filters.fs"
 #load "code/common/data.fs"
+#load "code/common/graphs.fs"
 #load "code/common/rssfeed.fs"
 #load "code/pages/home.fs"
 #load "code/pages/insert.fs"

code/common/graphs.fs

@@ -0,0 +1,7 @@
+module FsSnip.Graphs
+
+open System
+
+type Graph =
+  { Id: string
+    Script: string }

code/pages/author.fs

@@ -7,6 +7,8 @@ open System
 open System.Web
 open FsSnip.Utils
 open FsSnip.Data
+open FsSnip.Graphs
+open XPlot.GoogleCharts
 
 // -------------------------------------------------------------------------------------------------
 // Author page - domain model
@@ -25,20 +27,37 @@ type AuthorModel =
     Snippets : seq<Snippet> }
 
 type AllAuthorsModel =
-  { Authors: AuthorLinks}
+  { Authors: AuthorLinks
+    Graph : Graph }
 
 
 let getAllAuthors () = 
-    let links = 
+    let sorted = 
       publicSnippets
       |> Seq.map (fun s -> s.Author)
       |> Seq.countBy id
       |> Seq.sortBy (fun (_, c) -> -c)
+      |> Seq.cache
+
+    let links = 
+      sorted
       |> Seq.withSizeBy snd
       |> Seq.map (fun ((n,c),s) -> 
           { Text = n; Size = 80 + s; Count = c;
             Link = HttpUtility.UrlEncode(n) })
-    { Authors = links }
+
+    let image =
+        [ (sorted |> Seq.take 10) ]
+        |> Chart.Bar
+        |> Chart.WithOptions (Options(title = "Top 10 authors"))
+        |> Chart.WithLabels ["Count"]
+        |> Chart.WithLegend true
+        |> Chart.WithSize (600, 250)
+
+    { Authors = links
+      Graph = 
+       { Id = image.Id
+         Script = image.Js }}
 
 // -------------------------------------------------------------------------------------------------
 // Suave web parts
@@ -58,7 +77,7 @@ let showAll = delay (fun () ->
   DotLiquid.page "authors.html" (getAllAuthors()))
 
 // Composed web part to be included in the top-level route
-let webPart =   
+let webPart =
   choose 
     [ path "/authors/" >>= showAll
       pathScan "/authors/%s" showSnippets ]

code/pages/tag.fs

@@ -7,6 +7,8 @@ open System
 open System.Web
 open FsSnip.Utils
 open FsSnip.Data
+open FsSnip.Graphs
+open XPlot.GoogleCharts
 
 // -------------------------------------------------------------------------------------------------
 // Tag page - domain model
@@ -25,19 +27,36 @@ type TagModel =
     Snippets : seq<Snippet> }
 
 type AllTagsModel =
-  { Taglinks: TagLinks}
+  { Taglinks: TagLinks
+    Graph: Graph }
 
 let getAllTags () = 
-    let links = 
+    let sorted = 
       publicSnippets
       |> Seq.collect (fun s -> s.Tags)
       |> Seq.countBy id
       |> Seq.sortBy (fun (_, c) -> -c)
+      |> Seq.cache
+
+    let links = 
+      sorted
       |> Seq.withSizeBy snd
       |> Seq.map (fun ((n,c),s) -> 
           { Text = n; Size = 80 + s; Count = c;
             Link = HttpUtility.UrlEncode(n) })
-    {Taglinks = links}
+
+    let image =
+        [ (sorted |> Seq.take 10) ]
+        |> Chart.Bar
+        |> Chart.WithOptions (Options(title = "Top 10 tags"))
+        |> Chart.WithLabels ["Count"]
+        |> Chart.WithLegend true
+        |> Chart.WithSize (600, 250)
+
+    { Taglinks = links
+      Graph = 
+       { Id = image.Id
+         Script = image.Js }}
 
 // -------------------------------------------------------------------------------------------------
 // Suave web parts
@@ -57,7 +76,7 @@ let showAll = delay (fun () ->
 
 // Composed web part to be included in the top-level route
 let webPart = 
-  choose   
+  choose
    [ path "/tags/" >>= showAll
      pathScan "/tags/%s" showSnippets ]
 

paket.dependencies

@@ -7,4 +7,5 @@ nuget FSharp.Data
 nuget FSharp.Compiler.Service
 nuget DotLiquid
 nuget FSharp.Formatting >= 2.10.3
-nuget FSharp.Azure.StorageTypeProvider
+nuget FSharp.Azure.StorageTypeProvider
+nuget XPlot.GoogleCharts

paket.lock

@@ -15,24 +15,28 @@ NUGET
     FSharpVSPowerTools.Core (1.9.0)
       FSharp.Compiler.Service (>= 0.0.90)
     FsPickler (1.3.7)
-    Microsoft.Azure.KeyVault.Core (1.0.0) - framework: wpv8.0, >= net40
-    Microsoft.Data.Edm (5.6.4)
-    Microsoft.Data.OData (5.6.4) - framework: winv4.5, wpv8.1, wpv8.0, >= net40
+    Google.DataTable.Net.Wrapper (3.1.2)
+    Microsoft.Azure.KeyVault.Core (1.0.0) - framework: >= net40, wpv8.0
+    Microsoft.Data.Edm (5.6.4) - framework: >= net40, winv4.5, wpv8.0
+    Microsoft.Data.OData (5.6.4) - framework: >= net40, winv4.5, wpv8.0
       Microsoft.Data.Edm (5.6.4)
       System.Spatial (5.6.4)
     Microsoft.Data.Services.Client (5.6.4) - framework: >= net40
       Microsoft.Data.OData (5.6.4)
-    Newtonsoft.Json (7.0.1) - framework: wpv8.0, >= net40
+    Newtonsoft.Json (7.0.1)
     Suave (0.31.2)
       FSharp.Core (>= 3.1.2.5)
       FsPickler (>= 1.2.5)
     Suave.DotLiquid (0.31.2)
       DotLiquid (>= 1.8.0)
       Suave (>= 0.31.2)
-    System.Spatial (5.6.4)
+    System.Spatial (5.6.4) - framework: >= net40, winv4.5, wpv8.0
     WindowsAzure.Storage (5.0.2)
-      Microsoft.Azure.KeyVault.Core (>= 1.0.0) - framework: wpv8.0, >= net40
-      Microsoft.Data.OData (>= 5.6.4) - framework: winv4.5, wpv8.1, wpv8.0, >= net40
+      Microsoft.Azure.KeyVault.Core (>= 1.0.0) - framework: >= net40, wpv8.0
+      Microsoft.Data.OData (>= 5.6.4) - framework: >= net40, winv4.5, wpv8.0
       Microsoft.Data.Services.Client (>= 5.6.4) - framework: >= net40
-      Newtonsoft.Json (>= 6.0.8) - framework: wpv8.0, >= net40
+      Newtonsoft.Json (>= 6.0.8) - framework: >= net40, wpv8.0
+    XPlot.GoogleCharts (1.2.2)
+      Google.DataTable.Net.Wrapper
+      Newtonsoft.Json
     Zlib.Portable (1.11.0) - framework: portable-net40+sl50+wp80+win80

paket.references

@@ -3,4 +3,5 @@ Suave.DotLiquid
 FSharp.Data
 DotLiquid
 FSharp.Formatting
-FSharp.Azure.StorageTypeProvider
+FSharp.Azure.StorageTypeProvider
+XPlot.GoogleCharts

templates/authors.html

@@ -3,13 +3,24 @@
   <title>All Authors | F# Snippets</title>
 {% endblock %}
 
+{% block customPageScripts %}
+<script type="text/javascript" src="https://www.google.com/jsapi"></script>
+<script type="text/javascript">
+google.load("visualization", "1", { packages: ["corechart"] })
+{{ model.Graph.Script }}
+</script>
+{% endblock %}
+
 {% block content %}
 <div class="row">
   <div class="col-md-12"><h2>Snippets by Author</h2></div>
 </div>
 <div class="row">
 	<div class="col-md-12">
 		<p class="brief-listing">
+
+          <div id="{{ model.Graph.Id }}" style="width: 600px; height: 250px;"></div>
+
 		  {% for it in model.authors %}
 		  <a style="font-size:{{ it.Size }}%" href="/authors/{{ it.Link }}">{{ it.Text }}</a> ({{ it.Count }})
 		  {% endfor %}

templates/tags.html

@@ -3,12 +3,24 @@
   <title>All Tags | F# Snippets</title>
 {% endblock %}
 
+{% block customPageScripts %}
+<script type="text/javascript" src="https://www.google.com/jsapi"></script>
+<script type="text/javascript">
+google.load("visualization", "1", { packages: ["corechart"] })
+{{ model.Graph.Script }}
+</script>
+{% endblock %}
+
+
 {% block content %}
 <div class="row">
   	<div class="col-md-12"><h2>Snippets by Tag</h2></div>
 </div>
 <div class="row">
 	<div class="col-md-12">
+
+        <div id="{{ model.Graph.Id }}" style="width: 600px; height: 250px;"></div>
+
 		<p class="brief-listing">
 		  {% for it in model.TagLinks %}
 		  <a style="font-size:{{ it.Size }}%" href="/tags/{{ it.Link }}">{{ it.Text }}</a> ({{ it.Count }})