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
926
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