Samples-viewer-generator NPM

samples-viewer-generator

A CLI utility to generate an web app structure as samples viewer quickly for presentation purpose. It can be used to present your existing data visualization samples in professional way.

An utility tool to generate data viz samples viewer web app quickly.

Demo

Here is the demo.

Requirements

node >= v4.0.0

Note: If node and npm are not installed, Install those from here.

Installation

Install this tool using npm:

$ npm install -g samples-viewer-generator

It installs two binaries: samples-viewer-generator and svgen to your system path.

Usage

At first you need to create a config file in JSON format consisting of sample details, favicon, title for web app etc. as follows:

The config.json file:

{
  "site": {
    "title": "<site title>",
    "heading": "<site heading>",
    "logo": "<site logo> [optional]",
    "favicon": "<site favicon> [optional]",
    "customCSS": "<custom css file to override the existing style> [optional]"
  },
  "samples": [
    {
      "name": "<name of the sample, it should be unique across all samples>",
      "desc": "<a short description of sample>",
      "icon": "<sample icon in .png, .jpeg, or .svg format> [optional]",
      "chart": "<a folder consisting of necessary files (e.g. index.html, js codes) to render the chart on an iframe>",
      "html": "<html code for sample, working code not needed, just for showing purpose> [optional]",
      "js": "<javascript code for sample, working code not needed, just for showing purpose> [optional]",
      "data": "<data for sample> [optional]",
      "notes": "<notes for samples in markdown format, supported github flavoured markdown(gfm)> [optional]"
    }
  ]
}

See example folder for more info.

Then you need to run the cli command svgen (alias of samples-viewer-generator) as follows:

$ svgen -c config.json -o my-samples-viewer

   create : site logo
   create : site favicon
   create : custom CSS
   create : index.html
   create : CSS assets
   create : JavaScript assets
   create : image assets
   create : sample Simple column chart
   create : sample Area 2D chart with gradient
   create : sample Pie chart with legend
   create : sample Zoom line dual Y axis chart
   create : sample Simple World map
   create : site config

Voila! Your samples viewer is generated within seconds.

Note: You should open the generated web app via any local server or remote one. It wouldn't work, if you open through file:// protocol.

Contributing

Your PRs and stars are always welcome.

Checkout the CONTRIBUTING guides.

chart data viz cli generator boilerplate visualization presentation web app cli utility

babel-runtime chalk commander ejs fs-extra lodash

@infinitebrahmanuniverse/nolb-samp @everything-registry/sub-chunk-2706

1.0.0

6 years ago