Created svg-components namespace

Create the status-monitor.svg-components namespace to contain a whole range of
SVG elements that could be used for the dashboard.  Initially just a demo image
has been created.  The demo image has been added to the status-monitor dashboard
to show how well SVG components are rendered in a web page.

src/status_monitor/handler.clj

@@ -3,7 +3,8 @@
             [compojure.route :as route]
             [ring.middleware.defaults :refer [wrap-defaults site-defaults]]
             [hiccup.core :refer :all]
-            [hiccup.page :refer :all]))
+            [hiccup.page :refer :all]
+            [status-monitor.svg-components :as svg-components]))
 
 
 
@@ -113,7 +114,17 @@
               [:p "Server memory usage:"
                (component-status-bar 75)]
               [:p "Durable pending messages"
-               (component-status-bar 92)]]]]]]))
+               (component-status-bar 92)]]
+
+             ]
+
+            ;; Testing SVG components.
+            [:div {:class "row"}
+             [:h1 "Demo"]
+             [:div {:class "col-md-12"}
+              svg-components/circle-in-a-box]
+             ]]]]))
+
 
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

src/status_monitor/svg_components.clj

@@ -0,0 +1,50 @@
+(ns status-monitor.svg-components)
+
+;; Converting HTML SVG components into equivalent Clojure code
+;; Ideally create a library of components that can be easily used
+;;
+;; HTML SVG specification from Mozilla
+;; https://developer.mozilla.org/en-US/docs/Web/SVG/Element
+
+;; An alternative approach would be to write a parser that
+;; generated Clojure Hiccup style code from HTML SVG code.
+
+
+
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Demos
+
+
+
+;; Circle in a box
+(def circle-in-a-box
+  [:svg {:version "1.1"
+         :base-profile "full"
+         :width 300
+         :height 200
+         :xmlns "http://www.w3.org/2000/svg"}
+
+   [:rect {:width "100%"
+           :height "100%"
+           :fill "blue"}]
+   [:circle {:cx 150
+             :cy 100
+             :r 80
+             :fill "green"}]
+   [:text {:x 150
+           :y 125
+           :font-size 60
+           :text-anchor "middle"
+           :fill "white"}
+    "SVG"]])
+
+;; <svg version="1.1"
+;;   baseProfile="full"
+;;   width="300" height="200"
+;;   xmlns="http://www.w3.org/2000/svg">
+
+;;   <rect width="100%" height="100%" fill="red" />
+;;   <circle cx="150" cy="100" r="80" fill="green" />
+;;   <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
+;; </svg>