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
)
[]
For that please refer to the README page
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
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() })
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!