1

I am trying to sync Airship category legend data as a VueJS component but it looks like the data property is not digesting the values properly:

<legend orientation="vertical" data="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"></legend>

This is my pseudo-code. I have a legend VueJS component:

Vue.component('Legend', {
    'template': 
    `
    <as-legend-category
        ref="widget"
        :bind="$attrs"
    >
    </as-legend-category>
    `,
    props: {
        data:{ type: Array }
    },
    data: function() {
        return {
            widget: null,
            isLoading: true
        }
    },
    watch: {
        data: function(newValue){
            this.isLoading = false;
            this.widget.data = newValue;
        }
    },
    mounted: function() {
        this.widget = this.$refs.widget
        const widget = this.widget;
    }
});

This is how I load it on my HTML:

<legend orientation="vertical" :data="computedLegendData"></legend>

I got the legend data from CARTO VL when the layer is updated:

layer.on('updated' , function () {
  vm.legendData = layer.viz.color.getLegendData().data;
});

And this is my vue-config.js:

// ignore airship tags
Vue.config.ignoredElements = [/as-\w+/];

const vm = new Vue({
    el: '#app',
    data: {
        legendData: [],
        ...
    },
    computed: {
        computedLegendData: function() {
            const data = [];
            for (let index = 0; index < this.legendData.length; index++) {
                const element = this.legendData[index];
                data.push({
                    color: this.rgbToHex(element['value']),
                    label: element['key'],
                    type: 'point',
                    width: 16
                })
            }
            return data;
        },
        ...
    },
    methods: {
        rgbToHex: function (color) {
            return "#" + ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
        }
    },
    ...
}

As you have noticed I have to calculated a new legend data object because what CARTO returns is not enough and colors need to be transformed to hex values.

You can check the code here.

Your Answer

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

Browse other questions tagged or ask your own question.