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

add y axis labels to time graphs

Browse Source
This commit is contained in:
Daniel Barlow 2024-11-14 22:19:26 +00:00
parent 293231fdf5
commit dbc2ee667a
1 changed files with 53 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/src/Main.elm
View File

@ -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)) ++")" ++
"translate(0, " ++ (String.fromFloat maxY) ++") scale(1, -1)")
", " ++ (String.fromFloat (graphHeight / rangeYaxis)) ++")" ++
"translate(0, " ++ (String.fromFloat maxYaxis) ++") scale(1, -1)")
]
[
polyline
[ ybar 0
, 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 ]