dan/souplesse
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add titles and colour to line graphs

Browse Source
This commit is contained in:
Daniel Barlow 2024-11-13 22:05:08 +00:00
parent cdfc56d7fe
commit 21fc9d6874
1 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/Main.elm
View File

@ -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 =