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

react-vizgrammar

v0.8.10

Published

React-VizGrammar is a charting library that makes charting easy by adding required boilerplate code so that developers/designers can get started in few minutes.

Downloads

843

Readme

React-VizGrammar

React VizGrammar is a wrapper around Victory JS and it makes charting easier by adding boilerplate code so that designers and developers can get started and set it up in a few minutes.

A chart can be embedded in a React environment simply by using the VizG react component.

    import VizG from 'react-vizgrammar';

    <VizG config={config} data={data} metadata={metadata} />

Where the props?

  • config is the widget configurations specified as a JSON object.
  • data is the array of data sets fed to the charts.
  • metadata is the JSON object that contains information about the provided dataset.

Checkout the samples and documentation.

Chart config prop

Users have to provide parameters for the widget using config object in order to create the chart type they require. It is a JSON object that has a well defined configuration attributes to customize the chart.

The following is a basic configuration to plot a line chart:

    let config = {
        x : "rpm",
        charts : [{type: "line", y : "torque", color: "EngineType"}],
        maxLength: 10,
        width: 400,
        height: 200
    }

metadata prop and data prop

Once the config is provided, user can provide a dataset to visualize the chart. For easy interpretation React-VizGrammar requires this dataset to be arranged in a tabular way similar to the way explained below.

    metadata = {
        "names": ["Column1", "Column2",...],
        "types": ['ordinal', 'linear',...]
    };

metadata.names is an array which consists of column names/fields of the table and metadata.types contains their types (ordinal, time or linear), names and types are aligned together in a way that "Column1" => 'ordinal' and "Column2" => 'linear' and so on.

    data = [
        ["value1", numericValue1,...],
        ["value2", numericValue2,...],
    ];

data is a collection of arrays of data rows. Each row is stored as an array and their element order follows the order of metadata.names.

Sample data table would be like following:

    metadata = {
        "names" : ["rpm", "torque", "horsepower", "EngineType"],
        "types" : ["linear", "linear", "ordinal", "ordinal"]
    };

    data = [
        [8000, 75, 120, "Piston"], [9000, 81, 130, "Rotary"]
    ];

Build Process

Prerequisites

  • NPM
  • Node

These prerequisites must be installed before proceeding with the build process.

Build the Library

In order to build React-VizGrammar from the sources, clone this repository and run the following commands in the terminal from the react-vizgrammar directory.

    npm install
    npm run build

Build and run samples

In order to build and start the dev-server and view the samples, run the following command inside the main directory after installing the npm dependencies.

    npm run samples