A community-maintained library of visualizations for Mode reports
See the gallery of visualizations included in this library.
Open the HTML editor in a Mode report.
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="https://github.com/mode/alamode/blob/master/alamode.min.css">
<script src="https://github.com/mode/alamode/raw/master/alamode.min.js">
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"
}
)
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.
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
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!