This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
Elm Price Chart
version 2.0.0
license MIT
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 2.0.0
Committed At 2017-06-01 14:13:53 UTC
zaboco/elm-draggable 3.0.0 <= v < 4.0.0 3.1.0
justinmimbs/elm-date-extra 2.0.3 <= v < 3.0.0 2.1.1
gampleman/elm-visualization 1.1.1 <= v < 2.0.0 1.6.1
elm-lang/svg 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.0.0 <= v < 6.0.0 5.1.1
elm-community/list-extra 6.1.0 <= v < 7.0.0 6.1.0
NoRedInk/elm-decode-pipeline 3.0.0 <= v < 4.0.0 3.0.1


Elm Price Chart

This is an implementation of a price chart in Elm. You provide PriceChart with information about the price actions you want to display, and it renders an SVG element. You then embed this SVG element somewhere in an SVG that you create.

Right now PriceChart is fairly minimal and unpolished. Ideas, feedback, and contributions would be greatly appreciated!

example of price chart


You can install PriceChart using elm-package:

elm-package install --yes sixty-north/elm-price-chart


See the "examples" directory for examples of how to use PriceChart.


PriceChart is a bit of a "component" in the sense that it has its own messages, update function, model, and subscriptions. To use it you need to do a few things:

  1. Include a PriceChart.Model in your model.
  2. Provide a message constructor wraps PriceChart.Msg.
  3. When your update sees this wrapepr message, you must call PriceChart.update with the wrapped message and your PriceChart model.
  4. Subscribe to PriceChart.subscriptions.
  5. Tell PriceChart the extents of the DOM element in which it is rendering. (This can be tricky, but it is needed so that PriceChart can properly interpret mouse events.)

Create an "out message" wrapper

In your messages, create one that wraps PriceChart.Msg:

import PriceChart

type Msg
    = MyMsg
    | SomeOtherMsg Int
    | PriceChartMsg PriceChart.Msg

Adding PriceChart.Model to your model

Your model will need to store a PriceChart.Model somewhere:

import PriceChart

type alias Model =
    { myData : Int
    . . .
    , priceChart : PriceChart.Model

You can get an initial PriceChart.Model from PriceChart.initialModel:

import PriceChart

initialModel =
    { myData = 42
    . . .
    priceChart = PriceChart.initialModel

Pass PriceChart messages to PriceChart.update

When your update receives your wrapper messages, it should pass the contents along to PriceChart.update. This will return a new PriceChart.Model that you should store in your model:

import PriceChart

update msg model =
    case msg of
        . . .
        PriceChartMsg pcMsg ->
                (mdl, cmd) = PriceChart.update pcMsg model.priceChart
                {model | priceChart = mdl} ! [ PriceChartMsg msg]

Put some price information into your PriceChart.Model

The whole point of the price chart it to render price information, so you'll likely want to put some in there. This could come from anywhere, but as long as you can get it into a PriceChart.Types.PriceHistory then PriceChart can work with it.

populatePrices : Model -> PriceChart.Types.PriceHistory -> Model
populatePrices model history =
        pcMdl = model.priceChart
        {model | priceChart = { pcMdl | prices = history }}

There are, of course, other things you may want to set on the PriceChart.Model.

Render the price chart in your view

To render the PriceChart you need to create an SVG in which it will render. You also need to determine (possibly through a's not trivial in Elm) the screen extents --- left, right, top, and bottom coordiates --- of the SVG in which the price chart will render.

import PriceChart
import PriceChart.Types

view model =
        -- the screen coordinates of the DOM element "#price-chart"
        screenRect = PriceChart.Types.ElementRect 100 200 300 400
        div []
            [ svg [id "price-chart", viewBox "0 0 100 100"]
                [PriceChart.priceChart model.priceChart screenRect]]

Subscribe to PriceChart.subscriptions

In order to get full functionality of the chart, you need to subscribe to PriceChart.subscriptions:

import PriceChart

main =
        { init = initialModel
        , view = view
        , update = update
        , subscriptions = .priceChart >> PriceChart.subscriptions >> PriceChartMsg

That should do it!