Hi, I am creating a timeline with the ability to select a time range on a histogram.
I need to be able to size the selection area based on the start and end dates.
I ended up making a copy of toSVGX to handle the conversion. Maybe I am missing
something (I just started using elm-plot).
timelineJunk : PlotSummary -> Float -> Float -> List (Plot.JunkCustomizations Msg)
timelineJunk summary pointAX pointBX =
let
start =
Basics.min pointAX pointBX
end =
Basics.max pointAX pointBX
areaWidth =
-- We add 1.5 to include both the start and
-- end bar in the area. The coordinates
-- represent the middle of the bar, hence the
-- 0.5s.
end - start + 1.5
areaPxWidth =
(ElmPlotUtils.toSVGX summary areaWidth) - summary.x.marginLower
toDate index =
-- barData is a list of (date, yValue) tuples.
Array.get (round index - 1) barData
|> Maybe.map Tuple.first
|> Maybe.withDefault 0
range =
( toDate start, toDate end )
selectedRangeArea =
junk
(Svg.rect
[ opacity "0.1"
, fill "purple"
, width <| toString areaPxWidth
, style "height: 45px"
]
[]
)
(start - 0.5)
summary.y.max
-- Since we need something to detect the mouse
-- up event, we cover the chart with an overlay.
mouseUpOverlay =
junk
(Svg.rect
[ E.onMouseUp (EndRangeSelection range)
, fill "transparent"
, width "100%"
, height "100%"
]
[]
)
0
summary.y.max
in
[ selectedRangeArea
, mouseUpOverlay
]
I've attached the project. Ideas of how to do it in another way is welcome.
Hi! I'm changing how hints work in the next version so that this won't be necessary! Might even make some helper for the selection feature, as it seems useful. Thanks for pointing it out though!
Hi, I am creating a timeline with the ability to select a time range on a histogram. I need to be able to size the selection area based on the start and end dates.
I ended up making a copy of
toSVGX
to handle the conversion. Maybe I am missing something (I just started using elm-plot).I've attached the project. Ideas of how to do it in another way is welcome.
Timeline.zip