alamode.js

A community-maintained library of visualizations for Mode reports

See the gallery of visualizations included in this library.

Quick Usage

1. Open the HTML editor in a Mode report.

2. Add alamode.js and alamode.css to your report by adding these two lines to top of your report's HTML.

   <link rel="stylesheet" href="alamode.min.css">
   <script src="alamode.min.js">
   

3. Add the customizable snippet for the chart you want to include and edit the options to fit your data.

   alamode.sunburstChart(
   	{
   		html_element: "#sunburst-div",
       	query_name: "My Sunburst Query",
       	title: "A chart built with alamode",
       	event_columns: ["event_1","event_2","event_3"],
       	event_counts: "number_of_events" 
   	}
   )
   

Making Changes

To test local changes do the following:

1. Clone the kr-project/alamode fork locally.
2. Make a branch and changes to the alamode.js / alamode.css files.
3. Create a mode report or clone an existing one.
4. Edit the HTML in the report builder to point to the local scripts. The easiest way to do this is to run a simple http server (instructions below).

Running a simple http server:

1. Run npm install -g http-server to globally install a simple http server on your machine.
2. Run http-server -c-1 in your alamode fork directory.
3. There should be output in the console that looks like "Available on http://127.0.0.1:8083"
4. Load the js and css in your mode report by pointing the script tags at http://127.0.0.1:8083/alamode.js and http://127.0.0.1:8083/alamode.css.

Great! You've created a branch and you've udpated alamode.js or alamode.css but you're probably wondering how to minify your changes and get them into production. The steps below outline how to minify your code and how to get your changes live.

Minification

If you've made changes to alamode.js, in order to minify the file you'll need to use UglifyJS2. Once you've followed the instructions for installation, you'll need to run the following command to minify alamode.js to alamode.min.js

uglifyjs --output alamode.min.js --compress --mangle -- alamode.js

If you've made changes to alamode.css, in order to minify the file you'll need to use CSSO. Once you've followed the instructions for installion, you'll need to run the following command to minify alamode.css to alamode.min.css

csso alamode.css --output alamode.min.css

Geting to Production

Once your changes are minified, create a pull request against master. When your changes are approved, merge your branch into master.

After your changes have been merged to master, you'll need to merge your changes from master to a branch called gh-pages. gh-pages is our production branch and once your changes are merged to it, it will be live. Follow the commands below to merge your changes from master to gh-pages:

# from your local master branch ensure that you do a pull on master 
# this ensures that the changes that you just merged are 
# also on your local branch
git pull master

# switching to gh-pages branch
git checkout gh-pages
git merge master
git push

And that's it! Now your change to Alamode are live!