souplesse

commit 21fc9d68747b9f36cfdb97050aafd1871c123040
parent cdfc56d7fe6b39a50ceeec912ef82f2893b4f85a
Author: Daniel Barlow <dan@telent.net>
Date:   Wed, 13 Nov 2024 22:05:08 +0000

add titles and colour to line graphs

Diffstat:
M
frontend/src/Main.elm
 | 
38
+++++++++++++++++++++++---------------

1 file changed, 23 insertions(+), 15 deletions(-)
diff --git a/frontend/src/Main.elm b/frontend/src/Main.elm
@@ -222,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
@@ -234,21 +235,23 @@ measureView fn allPoints =
                            (String.fromFloat (p.time - startTime)) ++ "," ++
                            (String.fromFloat c) ++ ", "
                        Nothing -> ""
-        maxY = String.fromFloat (List.foldr max 0 (List.filterMap fn filteredPoints))
+        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
         [ width portalWidth
         , height 200
         , preserveAspectRatio "none"
-        , viewBox ("0 0 " ++
-                       (String.fromFloat (Point.duration allPoints)) ++
-                       " " ++ maxY)
         ]
         [ g
-          [ stroke "#ee4444"
+          [ stroke colour
           , strokeWidth "2"
-          , transform ("translate(0, " ++ maxY ++") scale(1, -1)")
+          , transform ( "scale(" ++ (String.fromFloat (portalWidth / maxX)) ++
+                            ", " ++ (String.fromFloat (200 / maxY)) ++")" ++
+                            "translate(0, " ++ (String.fromFloat maxY) ++") scale(1, -1)")
           ]
           [
            polyline
@@ -257,16 +260,21 @@ measureView fn allPoints =
                , 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
@@ -309,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 =