Apex

This package provide a (WIP) integration between elm and Apex charts via either custom-element or ports.

The main thing this package does is provide a simple and declarative way to describe a chart and encode it so that it can directly be picked up by Apex Charts.

Note, this package comes with an "already made" custom component which you can install and use via the node package version of elm-apex-charts-link (see the README).

Here is how you would describe a simple chart with some options (checkout the example project for more use-cases):

    import Apex


    myChart : Html Msg
    myChart =
        Apex.apexChart
            (Apex.chart
                |> Apex.addLineSeries "Connections by week" (connectionsByWeek logins)
                |> Apex.addColumnSeries "Connections within office hour for that week" (dayTimeConnectionByWeek logins)
                |> Apex.addColumnSeries "Connections outside office hour for that week" (outsideOfficeHourConnectionByWeek logins)
                |> Apex.withXAxisType Apex.DateTime
            )
            []
            []

When should I use this package?

For that please refer to the README page

Creating charts

Entry point

chart : Chart

this is the entry point of any chart: it gives you an empty chart with some default options

Adding data

type alias Point =

{ x : Float

, y : Float

}

A simple record type to make things a bit clearer when writing series

addLineSeries : String -> List Point -> Chart -> Chart

as the name suggest, this add a line to your chart by creating a series with the given name and by linking the given points together.

addColumnSeries : String -> List Point -> Chart -> Chart

as the name suggest, this add a new column series to your chart using the given name and by adding a bar for each of the given points.

Configuring the display

withLegends : Bool -> Chart -> Chart

Allow to turn on or off the legend for the graph

withXAxisType : XAxisType -> Chart -> Chart

change the type of x-axis used in you graph

type XAxisType

= Category

| DateTime

| Numeric

Describe how the x-axis of your graph should be labelled.

It can be either a Category, a DateTime or a Numeric value

NOTE: for the DateTime to properly work I suggest that the x-values in your series should be turned into miliseconds via Time.posixToMillis. I hope to find something better in due time but that's the best option until then.

NOTE: A lot more support for options and type of series needs to be added

Rendering charts

To render your chart you have 2 options:

encode it to JSON and send it to via a port to be rendered via JavaScript/TypeScript.

update : Msg -> Model -> ( Model, Cmd Msg )
update msg _ =
    case msg of
        LoadFakeLogins now ->
            let
                logins =
                    fictiveLogins Time.utc now
            in
            ( logins
            , updateChart <|
                Apex.encodeChart <|
                    (Apex.chart
                        |> Apex.addLineSeries "Connections by week" (connectionsByWeek logins)
                        |> Apex.addColumnSeries "Connections within office hour for that week" (dayTimeConnectionByWeek logins)
                        |> Apex.addColumnSeries "Connections outside office hour for that week" (outsideOfficeHourConnectionByWeek logins)
                        |> Apex.withXAxisType Apex.DateTime
                    )
            )

app.ports.updateChart.subscribe((chartDescription) => {
  const chart = new ApexCharts(
    document.querySelector('#chart1'),
    chartDescription
  )
  chart.render()
})

encodeChart : Chart -> Value

this function takes a chart and turns it into JSON data that Apex Charts can understand

NOTE: if you are using the custom-element version you should not need to use this function

use npm install elm-apex-charts-link to gain access to the custom element and then use:

 import Apex


 myChart : Html Msg
 myChart =
     Apex.apexChart
         (Apex.chart
             |> Apex.addLineSeries "Connections by week" (connectionsByWeek logins)
             |> Apex.addColumnSeries "Connections within office hour for that week" (dayTimeConnectionByWeek logins)
             |> Apex.addColumnSeries "Connections outside office hour for that week" (outsideOfficeHourConnectionByWeek logins)
             |> Apex.withXAxisType Apex.DateTime
         )
         []
         []

apexChart : Chart -> List (Attribute msg) -> List (Html msg) -> Html msg

this is the custom element wrapper. Make sure that you have installed the javascript companion package (npm i elm-apex-charts-link) before using this function!

Modules

Apex

leojpod/elm-apex-charts-link/1.0.0