[{"name":"Apex","comment":" This package provide a (WIP) integration between elm and [Apex charts](https://apexcharts.com/) via either custom-element or ports.\n\nThe 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.\n\nNote, 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).\n\nHere is how you would describe a simple chart with some options (checkout the example project for more use-cases):\n\n        import Apex\n\n        myChart : Html Msg\n        myChart =\n            Apex.apexChart\n                (Apex.chart\n                    |> Apex.addLineSeries \"Connections by week\" (connectionsByWeek logins)\n                    |> Apex.addColumnSeries \"Connections within office hour for that week\" (dayTimeConnectionByWeek logins)\n                    |> Apex.addColumnSeries \"Connections outside office hour for that week\" (outsideOfficeHourConnectionByWeek logins)\n                    |> Apex.withXAxisType Apex.DateTime\n                )\n                []\n                []\n\n\n# When should I use this package?\n\nFor that please refer to the [README](./) page\n\n\n# Creating charts\n\n\n# Entry point\n\n@docs chart\n\n\n## Adding data\n\n@docs Point\n\n@docs addLineSeries\n\n@docs addColumnSeries\n\n\n## Configuring the display\n\n@docs withLegends\n\n@docs withXAxisType\n\n@docs XAxisType\n\nNOTE: A lot more support for options and type of series needs to be added\n\n\n# Rendering charts\n\nTo render your chart you have 2 options:\n\n  - encode it to JSON and send it to via a port to be rendered via JavaScript/TypeScript.\n\n```elm\nupdate : Msg -> Model -> ( Model, Cmd Msg )\nupdate msg _ =\n    case msg of\n        LoadFakeLogins now ->\n            let\n                logins =\n                    fictiveLogins Time.utc now\n            in\n            ( logins\n            , updateChart <|\n                Apex.encodeChart <|\n                    (Apex.chart\n                        |> Apex.addLineSeries \"Connections by week\" (connectionsByWeek logins)\n                        |> Apex.addColumnSeries \"Connections within office hour for that week\" (dayTimeConnectionByWeek logins)\n                        |> Apex.addColumnSeries \"Connections outside office hour for that week\" (outsideOfficeHourConnectionByWeek logins)\n                        |> Apex.withXAxisType Apex.DateTime\n                    )\n            )\n```\n\n```js\napp.ports.updateChart.subscribe((chartDescription) => {\n  const chart = new ApexCharts(\n    document.querySelector('#chart1'),\n    chartDescription\n  )\n  chart.render()\n})\n```\n\n@docs encodeChart\n\n  - use `npm install elm-apex-charts-link` to gain access to the custom element and then use:\n\n         import Apex\n\n         myChart : Html Msg\n         myChart =\n             Apex.apexChart\n                 (Apex.chart\n                     |> Apex.addLineSeries \"Connections by week\" (connectionsByWeek logins)\n                     |> Apex.addColumnSeries \"Connections within office hour for that week\" (dayTimeConnectionByWeek logins)\n                     |> Apex.addColumnSeries \"Connections outside office hour for that week\" (outsideOfficeHourConnectionByWeek logins)\n                     |> Apex.withXAxisType Apex.DateTime\n                 )\n                 []\n                 []\n\n@docs apexChart\n\n","unions":[{"name":"XAxisType","comment":" Describe how the x-axis of your graph should be labelled.\n\nIt can be either a Category, a DateTime or a Numeric value\n\nNOTE: 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.\n\n","args":[],"cases":[["Category",[]],["DateTime",[]],["Numeric",[]]]}],"aliases":[{"name":"Point","comment":" A simple record type to make things a bit clearer when writing series\n","args":[],"type":"{ x : Basics.Float, y : Basics.Float }"}],"values":[{"name":"addColumnSeries","comment":" 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.\n","type":"String.String -> List.List Apex.Point -> Apex.Chart -> Apex.Chart"},{"name":"addLineSeries","comment":" 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.\n","type":"String.String -> List.List Apex.Point -> Apex.Chart -> Apex.Chart"},{"name":"apexChart","comment":" this is the custom element wrapper.\nMake sure that you have installed the javascript companion package (`npm i elm-apex-charts-link`) before using this function!\n","type":"Apex.Chart -> List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"chart","comment":" this is the entry point of any chart: it gives you an empty chart with some default options\n","type":"Apex.Chart"},{"name":"encodeChart","comment":" this function takes a chart and turns it into JSON data that Apex Charts can understand\n\nNOTE: if you are using the custom-element version you should not need to use this function\n\n","type":"Apex.Chart -> Json.Encode.Value"},{"name":"withLegends","comment":" Allow to turn on or off the legend for the graph\n","type":"Basics.Bool -> Apex.Chart -> Apex.Chart"},{"name":"withXAxisType","comment":" change the type of x-axis used in you graph\n","type":"Apex.XAxisType -> Apex.Chart -> Apex.Chart"}],"binops":[]}]