commit 8d01b16e4fd73a2a0a69c4e695574debbabe1410
parent d41426f4cf0d8d7ea0f212edf5833b391c3b2c94
Author: Daniel Barlow <dan@telent.net>
Date: Mon, 2 Dec 2024 00:09:33 +0000
render thresholds for each graph
also add the visible graphs to Model type instead of hardcoding them
Diffstat:
2 files changed, 58 insertions(+), 14 deletions(-)
diff --git a/frontend/src/Main.elm b/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
@@ -309,6 +325,16 @@ measureView title colour fn selection points =
, 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"
, S.points string
@@ -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) ]
]
]
diff --git a/frontend/src/Model.elm b/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 =
