Adding additional dimensions to the Scatter Map widget tooltip

[JeremyFriedel]

Adding additional dimensions to the Scatter Map widget tooltip

Additional dimensions can be added to the hover tooltip of the Scatter Map widget type, beyond the default limit of three, to include more information from other dimensions about a location in a Scatter Map widget.

This can be accomplished by using a combination of the widget's before query event to add additional dimension data for the hover tooltips and the before datapoint tooltip event to incorporate these dimensions into the tooltip.

This method of modifying the query using the "beforequery" event can also be applied to all other widget types

// Add extra parameters to be used in tooltips by modifying query
widget.on('beforequery', function (se, ev) {

    // Initial number of widget metadata panels excluding filter panel
    widget.initialPanelSizeExcludingFilterPanel = ev.query.metadata.filter((panel) => {
        return panel.panel !== "scope"
    }).length;


    // Extra dimensions to show in tooltip, should return a single result, include as many as needed, just add to array
    // Jaql Objects can be copied from other widgets from the prism.activeWidget.metadata.panels via the browser console
    // Modify JAQL as needed, title of JAQL is used in tooltip and can be modified to any string
    widget.extraDimensionJAQL = [
        {
            "jaql": {
                "table": "Category",
                "column": "Category ID",
                "dim": "[Category.Category ID]",
                "datatype": "numeric",
                "merged": true,
                "agg": "count",
                "title": "Unique Category ID"
            }
        },
        {
            "jaql": {
                "table": "Country",
                "column": "Country ID",
                "dim": "[Country.Country ID]",
                "datatype": "numeric",
                "merged": true,
                "agg": "count",
                "title": "Unique Country ID"
            }
        },
    ]

    // Add to default widget query the extra dimensions to be used in tooltips
    ev.query.metadata = ev.query.metadata.concat(widget.extraDimensionJAQL)

});


// Add extra dimensions added with beforequery object to ScatterMap tooltip
widget.on("beforedatapointtooltip", (event, params) => {

    // Convert query results to include only the additional dimensions, and formatted for tooltip template
    var onlyAdditionalDimensions = widget.queryResult.$$rows.map((withoutDefaultDimensionOnlyAdditional) => {

        // Remove the default dimensions, first part of row result array
        var withoutDefaultDimensionOnlyAdditional = withoutDefaultDimensionOnlyAdditional.slice(widget.initialPanelSizeExcludingFilterPanel)

        // Format for tooltip template, include title from JAQL
        var extraDimensionObj = withoutDefaultDimensionOnlyAdditional.map((extraDimensionValue, index) => {
            // Use extraDimensionJAQL for label in tooltip
            return {
                "text": extraDimensionValue.text,
                "title": widget.extraDimensionJAQL[index].jaql.title
            }
        })

        return extraDimensionObj
    });

    // Object to store extra dimensions
    params.context.marker.extraDimension = {};

    // Use matching queryIndex for tooltip of additional dimensions
    params.context.marker.extraDimension.arr = onlyAdditionalDimensions[params.context.marker.queryIndex];

    // Template for tooltip, modify as needed
    params.template = `
<div class='geo-text'>{{ model.marker.name }}</div>
<div class='measure-holder' data-ng-if='model.measuresMetadata.sizeTitle'>
    <div class='measure-title slf-text-secondary'>{{ model.measuresMetadata.sizeTitle }}:</div>
    <div class='measure-value'>{{ model.marker.sizeObj.text }}</div>
</div>
<div class='measure-holder' data-ng-if='model.measuresMetadata.colorTitle'>
    <div class='measure-title slf-text-secondary'>{{ model.measuresMetadata.colorTitle }}:</div>
    <div class='measure-value'>{{ model.marker.colorObj.text }}</div>
</div>
<div class='measure-holder details-measure-holder' data-ng-if='model.measuresMetadata.detailsTitle'>
    <div class='measure-title slf-text-secondary'>{{ model.measuresMetadata.detailsTitle }}:</div>
    <div class='measure-value' data-ng-if="!model.marker.detailsObj.arr">{{ model.marker.detailsObj.text }}</div>
    <div class="details-wait" data-ng-if="model.marker.detailsObj.pendingDetails"></div>
    <div data-ng-if="model.marker.detailsObj.arr">
        <div class="details-value" data-ng-repeat="a in model.marker.detailsObj.arr">{{a.text}}</div>
        <div class="details-counter" data-ng-if="model.marker.detailsObj.hasMore">
            <div class="details-counter">...</div>
            <div class="details-counter">
                {{'smap.ttip.firstres'|translate:(args={count:model.marker.detailsObj.arr.length})}}</div>
        </div>
    </div>
</div>
<div data-ng-if="model.marker.extraDimension.arr">
    <div data-ng-if='model.measuresMetadata.colorTitle'>
        <div class='measure-holder' data-ng-repeat="a in model.marker.extraDimension.arr">
            <div class='measure-title slf-text-secondary'>{{a.title}}:</div>
            <div class="measure-value extra-dimension-value">{{a.text}}</div>
        </div>
    </div>
</div>`;


});

 The JAQL can be changed to any valid JAQL object, and the tooltip template can also be further modified.