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