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

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.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
                        )
            )

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

• 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
           (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 Apex.DateTime
              |> Apex.fromPlotChart
           )
           []