terezka / elm-charts

Create SVG charts in Elm.
https://www.elm-charts.org
BSD 3-Clause "New" or "Revised" License
711 stars 67 forks source link

Should tools like `toSVGX` be public API? #59

Closed anagrius closed 7 years ago

anagrius commented 7 years ago

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.

Timeline.zip

terezka commented 7 years ago

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!