leojpod / elm-apex-charts-link / 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
    import Charts.PlotChart as Plot

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

When should I use this package?

For that please refer to the README page

Creating charts

Creating charts is done by using the Charts modules (PlotChart & RoundChart)

Once you have a Chart you can transform it into an Apex chart with one of these 2 function

fromPlotChart : Charts.Plot.Plot -> Chart

One you have a nice plot chart reprensentation from Charts.Plot you can transform it to an Apex chart by calling this function

fromRoundChart : Charts.RoundChart.RoundChart -> Chart

One you have a nice pie/radial chart reprensentation from Charts.RoundChart you can transform it to an Apex chart by calling this function

fromBarChart : Charts.Bar.Bar -> Chart

One you have a nice bar chart reprensentation from Charts.Bar you can transform it to an Apex chart by calling this function

withColors : List String -> Chart -> Chart

this allows you to set the theme of the chart. it's mostly just setting the colors value from Apex

Rendering charts

To render your chart you have 2 options:

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.fromPlotChart <|
                        (Chart.PlotChart.chart
                            |> Chart.PlotChart.addLineSeries "Connections by week" (connectionsByWeek logins)
                            |> Chart.PlotChart.addColumnSeries "Connections within office hour for that week" (dayTimeConnectionByWeek logins)
                            |> Chart.PlotChart.addColumnSeries "Connections outside office hour for that week" (outsideOfficeHourConnectionByWeek logins)
                            |> Chart.PlotChart.withXAxisType Chart.DateTime
                        )
            )

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

Note

Parts of the package depends on a node package for the custom-element. Hence the use of this silly value...

hardCodedVersionV3 : ()

the companion package changed! so let's try to tell the compiler that a version bump is required

encodeChart : Chart -> Json.Encode.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

apexChart : List (Html.Attribute msg) -> Chart -> 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!