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

zingchart-web-component

v0.0.3

Published

A web component wrapper for ZingChart

Downloads

7

Readme

ZingChart Web Component

A web component wrapper around the ZingChart library.

Install

Install the zingchart-web-component package via npm

$ npm install zingchart-web-component

ZingChart is already included as a dependency, so there's no need to download and include it.

Include in your project

This web component exposes out the main <zing-chart> web component, as well as chart-specific components such as <zc-line> for readability and convenience.

Depending on how you include this package, your inclusion will be different.

Import Modules

Import the generic zingchart component

import ZingChart from 'zingchart-web-component';
customElements.define('zing-chart', ZingChart);

OR

Manually import each chart and register it as a web component.

import {Line} from 'zingchart-web-component/charts/ZCLine.js';
customElements.define('zc-line', Line);

Usage

The ZingChart web component is a fully functional web component and exposes all methods and events.

A simple hello world

Below is the most simple and straightforward way to get a chart rendered on your page.

<zing-chart data='{"type": "line", "series": {["values": 1,2,3,4,5,6,4]}}'></zing-chart>

The data attribute takes the exact same JSON that the ZingChart library uses.

We can also simplifiy the example by using our line chart component:

<zc-line data='"series": [{"values": [1,2,3,4,5,6,4]}]'></zc-line>

Note the absence of a "id" property. We autogenerate a id property so you don't have to (you can still provide one).

The web-component way

While everything can be configured via the data property, you can also fully configure ZingChart via child components.

Each configuration property that ZingChart accepts can also be used as a child-component prefixed by 'zc-'.

For instance, if we want to set our data for our chart with a component, we would use the zc-series-# components:

  <zc-line>
    <zc-series>
      <zc-series-0 values="[3,4,3,2,4,3,3]"></zc-series-0>
    </zc-series>
  </zc-line>

Similarly, if we wanted to add a draggable legend, we would simply add the following:

  <zc-line>
    <zc-legend draggable></zc-legend>
    <zc-series>
      <zc-series-0 values="[3,4,3,2,4,3,3]"></zc-series-0>
    </zc-series>
  </zc-line>

The structure of the web-component mirrors the JSON configuration that ZingChart provides, and every property is available at each level.

For objects that accept arrays, simply use a parent component just as you would in the JSON syntax. Below is an example of adding custom labels:

<zc-line>
  <zc-labels>
    <zc-label x="15%" y="5%" font-size="22px" border-width="1px" font-color="black" font-family="Times">First Label</zc-label>
    <zc-label x="15%" y="10%" font-size="22px" border-width="1px" font-color="red">Second Label</zc-label>
  </zc-labels>
</zc-line>

Reactivity

Currently the height, width, data, series, and values are watched and will re-render the chart if changed. Future support for all attributes is planned.

Methods

All methods are available via the instance of the component. The methods are simplified and do not require an id like in the JavaScript version.

zingchart.exec('myChart', 'setseriesvalues', {
  values: [
    [19, 28, 13, 42, ...],
    [37, 11, 27, 25, ...]
  ]
);
const chart = document.querySelector('zing-chart');
chart.setseriesvalues({
  values: [
    [19, 28, 13, 42, ...],
    [37, 11, 27, 25, ...]
  ]
});

Events

Events can be attached to the root component, and passed a global function to send the event results to. All ZingChart events are available.

window.chartRendered = function() {
  console.log('The chart is rendered!');
}
<zing-chart complete="chartRendered"></zing-chart>