This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0
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

README

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

Installation

You can install PriceChart using elm-package:

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

Examples

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

Usage

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 ->
            let
                (mdl, cmd) = PriceChart.update pcMsg model.priceChart
            in
                {model | priceChart = mdl} ! [Cmd.map 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 =
    let
        pcMdl = model.priceChart
    in
        {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 port...it'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 =
    let
        -- the screen coordinates of the DOM element "#price-chart"
        screenRect = PriceChart.Types.ElementRect 100 200 300 400
    in
        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 =
    Html.program
        { init = initialModel
        , view = view
        , update = update
        , subscriptions = .priceChart >> PriceChart.subscriptions >> Sub.map PriceChartMsg
        }

That should do it!