Referencing DataViewsJS in your npm-based applications

Installation

DataViewsJS is hosted on npm with a set of dataviews.* packages in the @grapecity npm scope, where the @grapecity/dataviews.all includes all purejs packages of the library. In order to install any npm package, you need to have NodeJS installed on your computer.

The latest DataViewsJS release version can be installed from npm by executing the following command from the NodeJS command prompt:

npm install @grapecity/dataviews.all

Installing a Specific Package

You can also install specific DataViewsJS packages depending on the features and framework you want to use. All the dependent packages will be installed automatically.
For example, if your application only needs the dataviews.calendar package, you can install it using this command:

npm install @grapecity/dataviews.calendar

Installing Styles

DataViewsJS SASS styles and theme files are shipped in a separate @grapecity/dataviews.styles package. This allows you to create a custom theme. Please refer Using SASS topic for more details on how to create a custom theme using DataViewsJS SCSS files.

Adding DataViewsJS to your Application

Adding JavaScript Modules

Every DataViewsJS package contains JavaScript files in UMD module format referenced in the package.json main field. You can use them along with tools that are capable of loading modules, like the Webpack bundler or SystemJS run-time module loader.

To import DataViewsJS modules into your application backed by TypeScript or Babel, you can use ES2015 import statements. All module names in import statements begin with the @grapecity/ prefix, followed by the module name. For example, the following code imports the dataviews.core and dataviews.grid modules and creates an instance of the DataViewsJS control with grid layout:

import DataView from '@grapecity/dataviews.core';
import { GridLayout } from '@grapecity/dataviews.grid';

const data = []; // your data set
const dataView = new DataView('#hostElement', data, new GridLayout());

If you write code in ES5 then the CommonJS require() function can be used to import modules. For example:

var DataView = require('grapecity/dataviews.core');
var GridLayout = require('grapecity/dataviews.grid').GridLayout;

const data = []; // your data set
var dataView = new DataView('#hostElement', data, new GridLayout());

Adding Styles

You must add a reference to the DataViewsJS CSS style file for DataViewsJS layouts to appear correctly on the screen. You can do it either by adding a link tag to HTML page:

<link href="node_modules/@grapecity/dataviews.core/dist/gc.dataviews.core.css" rel="stylesheet" />

or using the ESM import statement like this:

import '@grapecity/dataviews.styles/dist/gc.dataviews.core.css';

or like this (with the relative path):

import './node_modules/@grapecity/dataviews.core/dist/gc.dataviews.core.css';

The actual format of the path specified in the import statement depends on the bundler or run-time module loader used in your application, and its configuration settings. For SPA application, it's enough to import the css file only once, somewhere in the root module of the application.

Similarly, you can import a theme file, for example:

import '@grapecity/dataviews.styles/dist/theme/flat.css';