Process to Create Wrapper Functions

Phase 1 - Vanilla JavaScript

Requires D3 and Webcharts only

Steps to create a reusable wrapper using this library:

1. Clone this repository and use it to create a new repository for your project.

• git remote set-url origin [email protected]:[your name]/[project name].git

2. Update the boilerplate files.

• Update package.json - Update project name, version and description. Update file names throughout.
• Update README.md - Give a brief description of your project and link to the wiki.
• Update ./scripts/rollup.wrapper.config.js with the proper library name.
• Update ./src/default-settings.js - Provide a default settings object, default inputs for the controls, and any standard mappings (or leave them blank).
• Add custom callbacks using the on[Event].js files (or leave them blank)
• Update ./src/wrapper.js - Check to make sure the controls behavior is correct. There are lots of other advanced customizations you can make here as well.

3. Build the source code to create a final script that is ready to use in standard ES5 JavaScript environments (i.e. the browser).

• navigate to the root folder for your new library
• run npm install
• run npm run build
• your new .js file, with the name specified in package.json, will be created in the ./build` folder

4. Create a sample chart in a Gist to make sure the new renderer is working as expected.

Phase 2 - ChartFoundry Renderer

requires React, D3 and Webcharts

1. Complete steps 1 through 3 above.
2. Update ./src/chartfoundry/binding.js to include all configurable properties. The boilerplate code already includes standard Webcharts configuration options, so only custom options need to be added manually.
3. Update ./src/chartfoundry/util/Renderer.js paying special attention to the following points:

• Update the describeCode() function to use the proper function name and reference any additional dependencies.

4. Run npm run build-chf to compile/build the code to create ./build/yourRenderer-chf.js.
5. Create a sample React-based chart in a Gist to make sure the new renderer is working as expected.

Phase 3 - Publish to NPM

1. Confirm that you have the latest version of the repo checked out on your computer
2. Using a shell, browse to the root directory for the repo
3. Login to npm via npm adduser --always-auth (at Rho use the rhographics username and password)
4. Confirm that the package.json file is up to date (especially the version field)
5. Publish the package by typing npm publish