Add upfront text to a group of cells

[Amanda]

Hello,

I am using Heatmap component to visualize some data at my page and I want to add some information about that data.
I have a Heatmap chart that I want to look like this. 



What I am trying to do is that I want to add a text on the cell group of the same color like it is shown at the picture above. I was thinking that one way of doing this is to get the position  of the first and the last cell of the group and then with the x and y values I could place the text in the middle of the group.

So is there a way I could implement this or another way that you think is better ?

Thanks in advance!

[Indumathi Ravi]

Hi Amanda,

We don’t have support to render the text inside the cell on the HeatMap component. However, we will analyze the feasibility of this requirement and update you with further details on November 23, 2022.

Regards,

Indumathi R.

[Indumathi Ravi]

Hi Amanda,

The HeatMap component do not support rendering the text inside a single cell. However, we have considered your requirement as an improvement and added it to our features request list. However, we will include this implementation in any of our upcoming releases. Meanwhile, please find the feedback link below to keep track of this feature.

https://www.syncfusion.com/feedback/39288

[Amanda]

Hello again,

I am trying to implement this with Javascript. Specifically what I am trying to do is to get the position of a specific rect element of the svg heatmap component with the getBoundingClientRect function.

This is the javascript function that I made to implement this

function getElementPosition(id) {
    var element = document.getElementById(id);
    var rect = element.getBoundingClientRect();
    return rect;
}

So at the getElementPosition function I add the specific rect ID as the parameter and then I am getting its position. After that I use the Top and Left value of the position to place the label on that specific rect element.

The label that I am trying to add is an html element and I set its position as relative

 Label

<div style="position:fixed;z-index:10;top:rect.Top;left:rect.Left; display:inline-block;width:fit-content;">

Label
</div>

Unfortunatelly this isn't working and the label is not placed on the correct rect element of the heatmap.

So I would like to ask you how can I place a label on a specific rect element by using its position on the viewport?

Or how can I implement this with the way that I am suggesting?

Thanks in advance

[Indumathi Ravi]

Hi Amanda,

 

We can achieve your requirement using a workaround. We must calculate the position of the specified cell considering the bounds of the SVG element of HeatMap component. Using the calculated value, we can place the text in the specified cell location. Please find the code snippet below.

 

Code Snippet:

[Index.razor]

<div id="labelText" style="@label">

    Upfront Text

</div>

 

<SfHeatMap ID="cellOpacity" @ref=@Heatmap DataSource="@HeatMapData">

</SfHeatMap>

 

[Index.razor.cs]

public string label = "position:absolute;z-index:10;top:120px;left:850px; display:inline-block;width:fit-content;";

 

protected override async Task OnAfterRenderAsync(bool firstRender)

        {

            if(!firstRender && !IsInitialRendeirng)

            {

CellRect svgRect = await jsRuntime.InvokeAsync<CellRect>("getSVGElementRect");

                CellRect cellRect = await jsRuntime.InvokeAsync<CellRect>("getCellElementRect");

                CellRect labelTextRect = await jsRuntime.InvokeAsync<CellRect>("getLabelTextRect");

                label = "position:absolute;z-index:10;top:" + (Convert.ToDouble(Convert.ToDouble(svgRect.top) +  

               Convert.ToDouble(cellRect.top))) + "px;left:" + (Convert.ToDouble(Convert.ToDouble(svgRect.left) +

               Convert.ToDouble(cellRect.left))) + "px; display:inline-block;width:fit-content;";

                IsInitialRendeirng = true;

                this.StateHasChanged();

            }

        }

[_Layout.cshtml]

<script>

      function getSVGElementRect() {

            heatMapCellRect = document.getElementById("cellOpacity_svg").getBoundingClientRect();

            return { width: heatMapCellRect.width, height: heatMapCellRect.height, top: heatMapCellRect.Top, left:  

                          heatMapCellRect.Left };

        }

        function getCellElementRect() {

            cellRect = document.getElementById("cellOpacity_HeatMapRect_450").getBoundingClientRect();

            return { width: cellRect.width, height: cellRect.height, top: cellRect.top, left: cellRect.left };

        }

       function getLabelTextRect() {

            labelRect = document.getElementById("labelText").getBoundingClientRect();

            return { width: labelRect.width, height: labelRect.height,  top: labelRect.top , left: labelRect.left};

        }

</script>

 

You can find the sample from the below link.

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HeatMap-743645878

 

 

Please let us know if the above solution meet your requirement.

[Amanda]

Hello,

First of all thanks for your reply.I tried the solution that you posted and I want to suggest another way that this could be implemented. I adjusted your project in order to show the way that I am trying to do this.

So the way that I am trying to implement this is by getting the position both of the parent which in our case is the heatmap's svg and the selected rect element of the heatmap. 

 function getElemementRelativePosition(parentId, childId) {
            var parentPos = document.getElementById(parentId).getBoundingClientRect();
            var childPos = document.getElementById(childId).getBoundingClientRect();
            var relativePos = {};

            relativePos.top = childPos.top - parentPos.top;
            relativePos.right = childPos.right - parentPos.right;
            relativePos.bottom = childPos.bottom - parentPos.bottom;
            relativePos.left = childPos.left - parentPos.left ;

            return relativePos;
        }


After that I calculate the position that the label will be placed.

The problem that I have with my solution is that  the div element of the label has its placeholder sticked at its initial position and so my label is placed a little higher than the postion that I want.

So how can I edit the style of the label or what can I do in order to achieve the correct position of the label using my idea ?

Thanks in advance!

Attachment: HeatMap_480ceaa9.zip

[Indumathi Ravi]

Hi Amanda,

 

We have modified the calculation of the label position to place the text in the specified HeatMap cell. Please find the code snippet for the same below.

 

Code Snippet:

[Layout.cshtml]

 

function getElemementRelativePosition(parentId, childId, labelId) {

            var parentPos = document.getElementById(parentId).getBoundingClientRect();

            var childPos = document.getElementById(childId).getBoundingClientRect();

var labelPos = document.getElementById("labelText").getBoundingClientRect();

            var cellWholeRect = document.getElementById("cellOpacity_Container_RectGroup").getBoundingClientRect();

            var relativePos = {};

relativePos.top = (childPos.top - parentPos.top) + (cellWholeRect.top - parentPos.top) + ((childPos.height / 2) - (labelPos.height / 2));

            relativePos.right = childPos.right - parentPos.right;

            relativePos.bottom = childPos.bottom - parentPos.bottom;

            relativePos.left = childPos.left - parentPos.left;

            return relativePos;

}

 

You can find the modified sample from the below link.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HeatMap-1458271175

 

 

Please let us know if the above solution meet your requirement.