1

I have spent quite a bit of time playing around with this generous example provided by Jorge Sanz of Carto:

https://gist.github.com/jsanz/8025628d669f1d9d0647f658f5511774

One thing I've gotten stuck on that I can't seem to resolve is updating the version of Airship that is being incorporated from 1.03 to 2.05.

Based on a review of the changelog it seems that a "breaking change" occured in version 2.00 regarding "Histogram selectionChange" in order to allow category histograms as well as numerical. I'm guessing this is the change that is breaking Jorge Sanz's example above [when referencing the new airship.js], but after several evenings of trial and error I figured I'd reach out for help.

If I had to guess I believe the issue is either in lines 31-38 of vue-component-histogram.js :

        widget.addEventListener('selectionChanged', event => {
            this.$emit(
                'selection-changed',
                event.detail !== null 
                ? event.detail 
                : []
            )    
}); 

or lines 65-68 of vue_config.js

            if (this.population.selection && this.population.selection.length == 2){
                const [minSel, maxSel] = this.population.selection;
                filterConditions.push(`between($pop_max,${minSel*1e6},${maxSel*1e6})`);
}
2

Main culprit of the breaking change here.

The selection is a bit more complex now, because of categorical data support. The event.detail is an object with several props. In event.detail.selection there's the "old" selection format, so you can just change to:

    widget.addEventListener('selectionChanged', event => {
        this.$emit(
            'selection-changed',
            event.detail !== null 
            ? event.detail.selection // <-- Here
            : []
        )    

And it should work*

I would also:

  • Remove the whole else clause in the tooltip formatting, it breaks the tooltip.

  • Not do toFixed(3) on main.js. It's making the value a string, and it might lose precision, not making the bins equal in distance, which can lead to problems later. I've noticed that when you do this, 0 is formatted funny because it's -0.000001, but this can be fixed using a custom formatter through the axisFormatter prop.

*I found a bug with the histogram selection while checking the example out, in some cases an error will be thrown and the histogram will reset to no selection. A fix is on the way for v2

1
  • Thank you Román! This does indeed fix my issue. Thanks for your time. I have also carried your other suggested changes.
    – smarchan
    Jun 13 '19 at 16:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.