npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

apexcharts-custom-element

v1.1.0

Published

a simple custom-element wrapper for apexcharts

Downloads

6

Readme

Apex link

CI

elm-apex-charts-link: a tentative solution to using apex charts within the comfort of elm

Design decisions

the targeted solution

I wanted to get an easy way to "describe" how the charts should look like and defer the transformation from the "graph description" to the actual Apex JSON to a custom encoder.

Right now, the code looks a bit like this. First make define a plot/bar chart/etc with one of the appropriate function:

plot =
    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

Then, transform that definition into an apex chart and customize the appearance:

apexPlot =
    plot
        |> Apex.fromPlotChart
        |> Apex.withColors [ "#ff2E9B", "#3f51b5", "#7700D0" ]

It is still pretty much just a WIP and needs to support more options and more types of charts. Hopefully, this will come in a near future but it is already working fine as it is.

How to plug it

Once we've got a nice chart description what shall we do with it? This package offers 2 ways of plugging your data to an actual chart: via ports or via a custom-elements.

The first options is achieve by providing a JSON encoder for the charts (see Apex.encodeChart).

The second requires to import and setup the npm companion package: elm-apex-charts-link, once you've set it up you can use the Apex.apexChart.

For a complete example, have a look at /example.

ApexCharts' custom element

The second part of this elm-package is actually language/framework agnostic. It is a custom element wrapping the apexcharts library as simply as possible.

To use it, install and import the npm package apexcharts-custom-element and voilà. You should now be able to create a custom-element named apex-chart which will take the apexcharts definition in the chartData property. If your framework/environment does not allow you to work easily with properties, you can instead use the attribute data-chart (with JSON encoding) which will work just the same.