mode/alamode

A community-maintained library of visualizations for Mode reports

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!

alamode's Issues

Suggestion: Add functionality to open links in tables in new tab / window

The behaviour of links in tables is currently a little awkward in that it opens in the same window. It would be much more intuitive if by default the links open in a new tab or window, or at least add this functionality through a new parameter.

I believe to fix this all that is needed is a simple change line 116 in alamode.js to the following: cells.eq(columnToShow).html("<a href='" + encodeURI(url) + "' target='_blank'>" + cellContent + "</a>")

Sankey diagram support?

Hiya team! Do you have any plans to support Sankey diagrams in alamode?

Adding arrows for direction in force-directed-graph

Hi,

How hard is it to add arrows which show edge direction in https://mode.com/example-gallery/force-directed-graph/ ?

List available modules (d3, nvd3, etc.) in README

Looking at the source of alamode.js, I see that alamode.js makes use of jQuery, d3, and nvd3. Perhaps there are other packages/modules used by alamode JS code. Would it be possible to list them (along with versions) in a section of the README?

Multiple Google Maps maps on same report?

Is there a way to have multiple google maps on the same report? I get an error if I just put two alamode.googleMap calls back to back. Thanks in advance!

Shade by row

I only want to apply heatmap shading to the bottom 'totals' row of my table. Is this possible? I only see the ability to filter by column.

Links scrambled after scrolling

I'm looking at this example report, provided by the Mode documentation here.

I made a clone of this report and created a version of this report where the table must be scrolled. You'll notice that upon scrolling, the table links will no longer point to the correct locations.

Encoding of '&' character

Hello,

I have come across the following issue using the 'alamode' template. I am using the addLinksToTables function as described here https://community.modeanalytics.com/gallery/table-links/.

However, one of the entries in my column includes an ampersand '&' sign (say, like 'arts & crafts', which does not get encoded so it breaks the link.
The problem is that the url does get encoded by the function, but the actual column name does not (so the following does not cover case with ampersand):

line 124 if alamode.js: cells.eq(columnToShow).html("" + cellContent + "")

If I encodeURIComponents before passing it to the addLinksToTables function, the table does not recognize the format properly. I could have not found a proper work around this.

Any chance the function could be modified to account for this specific case?

Thank you!!

Alert me when I'm using a bad table or chart id

If the selector is wrong, particularly for a Mode element, it'd be nice if it told me that that element didn't exist.

Datasets not available for slow running queries, looks a lot like a race condition

I have a query on a mode.com report, which sometimes runs fast, and sometimes slow, depending on my {% form %} settings.

When I run a slow query, my alamode graphs are all empty. Additionally, the datasets[0].content is an empty array (and, because of this getDataFromQuery returns an empty array)

I thought I could do a clever work-around by doing something like

const addHeatMap = () => {
  let data = window.datasets[0].content // Works the same with `getDataFromQuery`
  if(data.length == 0){
    window.setTimeout(addHeatMap, 250)
    console.log("No data...")
    return
  }
  console.log(data.length)
  alamode.leafletMap(
    {
  	title: "Heatmap",
  	height: 700,
  	lat_column: "LATITUDE",
  	lng_column: "LONGITUDE",
  	query_name: "Query 1",
  	center_lat:  -0.02 ,
  	center_lng: 51.481,
  	starting_zoom: 12.5,
  	dot_size: .005,
  	dot_opacity: .6
    }
  )
}
addHeatMap();

But, weirdly, if the dataset had not yet loaded the first time the code was ran, then the result is always an empty array. If the first time this code runs the query has finished running, then then the dataset is available, and the graphs render correctly.

I am assuming that this is a race condition, because visually it seems to always work if the rendering of the alamode graphs occurs after the rendering of the usual mode components it always works. It is also possible that the slower query is running into some maximum dataset size which i've been unable to find documented anywhere?

Any fixes or work arounds would be appreciated

Chart Annotations don't work with the "Group By" chart option

When using the "Group By" option on a line chart, the chartAnnotations() fails, because the calculated pointNumber is incorrect. The data matches are made in the array of all data points, which means that the point number on the X-axis may be non-existent, since the maximum number of points is actually length(data) / # of groups.

addLinksToTables doesn't work with the new table

Looks like the function addLinksToTables doesn't work anymore after Mode updated the table visualization

TEST ISSUE

ERROR ReferenceError: nv is not defined at Object.bigNumberSparkline

My mode report that uses alamode.bigNumberSparkline() that has been working fine for the past few months stopped working in the last few days.

Looking at the Javascript console I noticed this error message:

Any ideas what might have changed that causes this error?

Retention heatmap confuses order of columns

When using alamode.retentionHeatmap, our report looks as follows:

Note that columns 4 and 5 are interchanged. My assumption is that the columns should be automatically sorted by label. If not, is there way to define a custom order? Thanks.

addLinksToTables option to open in same window

My current application is running mod white-label embedded reports using addLinksToTables and would like to have the report links stay within the same window/tab so the user history is intact for navigation.

I noticed @joecorkerton was having the opposite issue in Issue-13.

At the time of writing this, the code does not allow and option to set the target on the links. Would it be possible to add this functionality?

Add Chart Annotations to Quick Charts

Looking for a way to add a chart annotation to a quick chart - as was done for the legacy charts here: https://mode.com/example-gallery/chart-annotations/

Basically, just need a way to add a vertical line to a chart base on an x axis value.