add titles and colour to line graphs

frontend/src/Main.elm

@@ -13,6 +13,8 @@ import Point exposing(Point, Pos ,decoder)
 import Svg exposing (Svg, svg, rect, circle, g, polyline)
 import Svg.Attributes as S exposing
     ( viewBox
+    , preserveAspectRatio
+    , transform
     , x, y
     , r, rx, ry
     , cx, cy
@@ -220,9 +222,10 @@ tileImg zoom tilenumber = img [ width 256,
                                 height 256,
                                 src (tileUrl tilenumber zoom) ] []
 
+type alias Colour = String
 
-measureView : (Point -> Maybe Float) -> List Point -> Svg Msg
-measureView fn allPoints =
+measureView : String -> Colour -> (Point -> Maybe Float) -> List Point -> Svg Msg
+measureView title colour fn allPoints =
     let filteredPoints = Point.downsample 300 allPoints
         startTime = case allPoints of
                         (p::_) -> p.time
@@ -232,33 +235,46 @@ measureView fn allPoints =
                            (String.fromFloat (p.time - startTime)) ++ "," ++
                            (String.fromFloat c) ++ ", "
                        Nothing -> ""
+        maxY = List.foldr max 0 (List.filterMap fn filteredPoints)
+        smaxY = String.fromFloat maxY
+        maxX = Point.duration allPoints
+        smaxX = String.fromFloat maxX
         string = String.concat (List.map coords filteredPoints)
     in
         svg
-        [ H.style "width" (px portalWidth)
-        , viewBox ("0 0 " ++ (String.fromFloat (Point.duration allPoints)) ++ " 150")
+        [ width portalWidth
+        , height 200
+        , preserveAspectRatio "none"
         ]
         [ g
-          [ fill "none"
-          , stroke "red"
-          , strokeWidth "3"
+          [ stroke colour
+          , strokeWidth "2"
+          , transform ( "scale(" ++ (String.fromFloat (portalWidth / maxX)) ++
+                            ", " ++ (String.fromFloat (200 / maxY)) ++")" ++
+                            "translate(0, " ++ (String.fromFloat maxY) ++") scale(1, -1)")
           ]
           [
            polyline
                [ fill "none"
+               , style "vector-effect" "non-scaling-stroke"
                , S.points string
                ] []
           ]
+        , Svg.text_
+          [ x "97%", y "90%"
+          , style "fill" "#222244"
+          , style "text-anchor" "end"
+          , style "text-shadow" "2px 2px 1px #dddddd"
+          ] [ Svg.text title ]
         ]
 
 cadenceView : List Point -> Svg Msg
 cadenceView =
-    measureView (.cadence >> Maybe.map toFloat)
+    measureView "cadence" "#44ee44" (.cadence >> Maybe.map toFloat)
 
-powerView = measureView (.power >> Maybe.map toFloat)
+powerView = measureView "power" "#994444" (.power >> Maybe.map toFloat)
 
-eleView =
-    measureView (.pos >> .ele)
+eleView = measureView "elevation" "#4444ee" (.pos >> .ele)
 
 
 trackView : Int -> Int -> Zoom -> List Point -> Svg Msg
@@ -301,9 +317,9 @@ tiles xs ys zoom =
 ifTrack track content =
     case track of
         Present t -> content t
-        Failure f -> Debug.log f (div [] [ text "failure", text f])
-        Loading -> div [] [text "loading"]
-        Empty -> div [] [text "no points"]
+        Failure f -> Debug.log f (div [] [ Html.text "failure", Html.text f])
+        Loading -> div [] [Html.text "loading"]
+        Empty -> div [] [Html.text "no points"]
 
 
 canvas centre zoom width height track =