alamode

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

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!

This site is open source. Improve this page.