add y axis labels to time graphs

frontend/src/Main.elm

@@ -7,15 +7,17 @@ import Html.Attributes as H exposing (src, style, width, height)
 import Html.Events exposing (onClick, on)
 import Html.Events.Extra.Pointer as Pointer
 import Maybe exposing (Maybe)
+import Lib exposing(..)
 import Json.Decode as D
 import Http
 import Point exposing(Point, Pos ,decoder)
-import Svg exposing (Svg, svg, rect, circle, g, polyline)
+import Svg exposing (Svg, svg, rect, circle, g, polyline, line)
 import Svg.Attributes as S exposing
     ( viewBox
     , preserveAspectRatio
     , transform
     , x, y
+    , x1, y1 , x2, y2
     , r, rx, ry
     , cx, cy
     , fill
@@ -244,6 +246,7 @@ type alias Colour = String
 measureView : String -> Colour -> (Point -> Maybe Float) -> List Point -> Svg Msg
 measureView title colour fn allPoints =
     let filteredPoints = Point.downsample 300 allPoints
+        graphHeight = 180
         startTime = case allPoints of
                         (p::_) -> p.time
                         _ -> 0
@@ -253,36 +256,69 @@ measureView title colour fn allPoints =
                            (String.fromFloat c) ++ ", "
                        Nothing -> ""
         maxY = List.foldr max 0 (List.filterMap fn filteredPoints)
-        smaxY = String.fromFloat maxY
+        minY = List.foldr min maxY (List.filterMap fn filteredPoints)
+        (minYaxis, maxYaxis, tickY) = looseLabels 4 minY maxY
+        rangeYaxis = maxYaxis - minYaxis
         maxX = Point.duration allPoints
-        smaxX = String.fromFloat maxX
         string = String.concat (List.map coords filteredPoints)
+        ybar n = line
+                 [ fill "none"
+                 , style "vector-effect" "non-scaling-stroke"
+                 , strokeWidth "1"
+                 , stroke "#aaa"
+                 , x1 "0"
+                 , y1 (String.fromFloat (minYaxis + n * tickY))
+                 , x2 (String.fromFloat (0.95 * maxX))
+                 , y2 (String.fromFloat (minYaxis + n * tickY))
+                 ] []
+        ylabel n = Svg.text_
+          [ x "99%", y (String.fromFloat (graphHeight - graphHeight * n * (tickY/rangeYaxis)))
+          , style "text-anchor" "end"
+          , style "fill" "#222244"
+          ] [ Svg.text (String.fromFloat (minYaxis + n * tickY)) ]
+
     in
         svg
         [ width portalWidth
-        , height 200
+        , height graphHeight
         , preserveAspectRatio "none"
         ]
-        [ g
+        [ rect
+              [ x "0"
+              , width portalWidth
+              , height graphHeight
+              , fill "#eef"
+              , stroke "none"
+              ] []
+        , g
           [ stroke colour
           , strokeWidth "2"
           , transform ( "scale(" ++ (String.fromFloat (portalWidth / maxX)) ++
-                            ", " ++ (String.fromFloat (200 / maxY)) ++")" ++
+                            ", " ++ (String.fromFloat (graphHeight / rangeYaxis)) ++")" ++
-                            "translate(0, " ++ (String.fromFloat maxY) ++") scale(1, -1)")
+                            "translate(0, " ++ (String.fromFloat maxYaxis) ++") scale(1, -1)")
           ]
-          [
+          [ ybar 0
-           polyline
+          , ybar 1
+          , ybar 2
+          , ybar 3
+          , polyline
                [ fill "none"
                , style "vector-effect" "non-scaling-stroke"
                , S.points string
                ] []
           ]
         , Svg.text_
-          [ x "97%", y "90%"
+          [ x "99%", y "12%"
           , style "fill" "#222244"
           , style "text-anchor" "end"
+          , style "font-weight" "bold"
           , style "text-shadow" "2px 2px 1px #dddddd"
-          ] [ Svg.text title ]
+          ] [ Svg.text title
+            ]
+        , ylabel 0
+        , ylabel 1
+        , ylabel 2
+        , ylabel 3
         ]
 
 cadenceView : List Point -> Svg Msg
@@ -379,7 +415,9 @@ viewDiv : Model -> Html Msg
 viewDiv model =
     let coord = translate model.centre (pixelsToCoord (toZoom model.zoom) (dragDelta model.drag))
         canvasV = canvas coord (toZoom model.zoom) portalWidth portalHeight model.track
-    in div [ style "display" "flex" ]
+    in div [ style "display" "flex"
+           , style "column-gap" "15px"
+           ]
         [ div [ style "display" "flex"
               , on "wheel" wheelDecoder
               , style "flex-direction" "column"]
@@ -400,7 +438,9 @@ viewDiv model =
                   ]
               ]
         , div [ style "display" "flex"
-              , style "flex-direction" "column"]
+              , style "flex-direction" "column"
+              , style "row-gap" "10px"
+              ]
             [ div [] [ ifTrack model.track cadenceView ]
             , div [] [ ifTrack model.track powerView ]
             , div [] [ ifTrack model.track eleView ]