CREATING AND PUBLISHING REUSABLE CHARTS

Pre requisites

• Create NPM account [https://www.npmjs.com/]

Flow

• Fork Repo (on code.gramener.com) into your namespace
• Open Terminal -> git bash
• Run git clone < your repo url >

Installing requirements

• Install d3 version 5.1.0
  • type "npm i [email protected]" in command prompt
• Open index.html in browser. Chart should be visible.

Configuring the existing chart

• Open index.js
  • Remove project specific code, change it to configuration(follow commented instructions)
• index.html in browser should still show Chart without any changes
• Make configuration changes in index.html to see your required version of chart.

Publishing chart as NPM Package

• Inside project repo open terminal
  • type "npm init" and fill in all the details
    • package name: gramex-< chart-name > (for this session: gramex-pie-chart-< your-name >)
    • version: default -> (1.0.0)
    • keywords: gramex barchart
• In command prompt
  • type "npm login"
    • Provide your npm account credentials
    • It might ask for OTP received in your email id
  • "npm publish"

Submit your code

• Commit and push code changes to your forked repo.
• Create an issue titled Exercise submission. Add a link to your repo, link to your NPM Package and submit the issue.