render thresholds for each graph

also add the visible graphs to Model type instead of hardcoding them

frontend/src/Main.elm

@@ -14,7 +14,7 @@ import Json.Decode as D
 import Http
 import Point exposing (Point, decoder)
 import Pos exposing (Pos)
-import Svg exposing (Svg, svg, rect, g, polyline, line)
+import Svg exposing (Svg, svg, rect, g, polyline, line, mask)
 import Svg.Attributes as S exposing
     ( viewBox
     , preserveAspectRatio
@@ -226,9 +226,25 @@ selectionRect selection =
                  , S.height "100%"
                  ] []
 
+thresholdMask id maxX minY threshold maxY =
+    let r y0 y1 colour =
+            rect
+            [
+             x "0"
+            , y (String.fromFloat y0)
+            , width (ceiling maxX)
+            , height (floor (y1 - y0))
+            , fill colour
+            ] []
+    in
+        mask
+        [ S.id id ]
+        [ r minY threshold "black"
+        , r threshold maxY "white"
+        ]
 
-measureView : String -> Colour -> (Point -> Maybe Float) -> Maybe (Float, Float) -> List Point -> Svg Msg
-measureView title colour fn selection points =
+measureView : String -> Colour -> (Point -> Maybe Float) -> Float -> Maybe (Float, Float) -> List Point -> Svg Msg
+measureView title colour fn threshold selection points =
     let graphHeight = 180
         startTime = Maybe.withDefault 0 (Point.startTime points)
         coords p = case (fn p) of
@@ -308,6 +324,16 @@ measureView title colour fn selection points =
           , ybar 1
           , ybar 2
           , ybar 3
+          , polyline
+              [ fill colour
+              , style "opacity" "30%"
+              , S.mask ("url(#" ++ title ++ "-mask)")
+              , stroke "none"
+              , style "vector-effect" "non-scaling-stroke"
+              , S.points (string ++
+                              (String.fromFloat maxX) ++ ",0, 0,0")
+              ] []
+          , thresholdMask (title ++ "-mask") maxX minY threshold maxY
           , polyline
                [ fill "none"
                , style "vector-effect" "non-scaling-stroke"
@@ -444,14 +470,6 @@ timeAxis model selection points =
         ]
 
 
-cadenceView :  Maybe (Float, Float) -> List Point -> Svg Msg
-cadenceView =
-    measureView "cadence" "#44ee44" (.cadence >> Maybe.map toFloat)
-
-powerView = measureView "power" "#994444" (.power >> Maybe.map toFloat)
-
-eleView = measureView "elevation" "#4444ee" (.pos >> .ele)
-
 trackView : Int -> Int -> ZoomLevel -> Maybe (Float, Float) -> List Point -> Svg Msg
 trackView leftedge topedge zoom selection points =
     let plot p =
@@ -575,9 +593,14 @@ viewDiv model =
               , style "flex-direction" "column"
               , style "row-gap" "10px"
               ]
-            [ div [] [ ifTrack model cadenceView ]
-            , div [] [ ifTrack model powerView ]
-            , div [] [ ifTrack model eleView ]
+            [ div []
+                  (List.map (\g ->
+                                div []
+                                 [ ifTrack model
+                                       <| measureView g.id g.colour g.extractor g.threshold
+                                 ]
+                            )
+                       model.graphs)
             , div [] [ ifTrack model (timeAxis model) ]
             ]
         ]

frontend/src/Model.elm

@@ -17,6 +17,18 @@ type DragState =
   | DragLeftMark (Int, Int) Float
   | DragRightMark (Int, Int) Float
 
+
+type GraphToggle = Hidden | Overlay | Solo
+
+type alias TimeGraph =
+    { title: String
+    , id: String
+    , colour: String
+    , extractor: Point -> Maybe Float
+    , toggle : GraphToggle
+    , threshold : Float
+    }
+
 type TrackState = Empty | Loading | Failure String | Present (List Point)
 
 type alias Model =
@@ -27,6 +39,7 @@ type alias Model =
     , duration : Float
     , leftMark : Float
     , rightMark : Float
+    , graphs : List TimeGraph
     , track: TrackState }
 
 empty = Model
@@ -35,6 +48,14 @@ empty = Model
         Nothing
         0 0
         0 0
+        [
+         TimeGraph "Cadence" "cadence" "#44ee44" (.cadence >> Maybe.map toFloat)
+             Solo 90
+        , TimeGraph "Power" "power"  "#994444" (.power >> Maybe.map toFloat)
+             Solo 100
+        , TimeGraph "Elevation" "elevation"  "#4444ee" (.pos >> .ele)
+             Solo 0
+        ]
         Loading
 
 isMarkActive model =