Home - RhoInc/webcharts-wrapper-boilerplate GitHub Wiki

Overview

This library provides boilerplate code for creating re-usable webcharts wrapper functions via node.js. This boilerplate code extends webcharts to allow users to package together customized behavior beyond those available in the standard webcharts library including:

  • Custom callback functions
  • Default chart configurations
  • Default chart controls

Several examples using this framework are available.

Boilerplate files

In addition to placeholders for the standard README.md and LICENSE.md files, this boilerplate library includes files which can be customized for each wrapper function. Two separate build processes are included in the boilerplate code. The first is for vanilla javascript and creates a simple stand-alone javascript function. The second build process creates a react.js component that is suitable for use with the soon-to-be-publicly-releases ChartFoundry platform.

Vanilla JavaScript (d3 and webcharts only)

The following files are required for the vanilla javascript build:

  • package.json - node.js configuration identifying external requirements and defining the build process
  • /src/defaultSettings.js - json objects for providing default settings for webcharts chart and control objects.
  • /src/on_____.js- custom callback functions to be attached to webcharts chart objects
  • /src/wrapper.js - framework for the final wrapper function (written in ES6)

Users can also add any additional custom code in the /src/util folder.

ChartFoundry (react.js, d3 and webcharts)

And several additional files are used for to build the React component used in ChartFoundry including:

  • /src/react/binding.js - defines custom data mappings and settings for the react component

Other standard files that shouldn't need customization in most cases are included in the /src/react/util folder.

Scripts and Utility code

Two scripts and several utility functions are included for use in building the wrapper functions.

  • /scripts/rollup.wrapper.config.js - combines the items above to create the reusable ES5 function in wrapper.js
  • /scripts/rollup.react.config.js - combines the items above to create a react component

Various utility functions for building the renderers are saved in /src/util and scr/chartfoundry/util/. These generally do not need to be modified.

Build Process

The build process creates 2 compiled files in the build folder files:

  • The final vanilla javascript file to be included in webpages is .\build\yourRendererName.js. It is generated using the files listed above with the npm run build command.
  • The final ChartFoundry file is .\build\yourRendererName-react.js. It is generated using the npm run build-react command.

Examples

Libraries built using this library as the base: