[Heatmap] Add value label visibility/drawing state in debug data

[dej611]

Is your feature request related to a problem? Please describe.
It would be useful to know if a value label has been rendered within each cell for a heatmap chart, via the debug state.
That would be useful for testing.

Describe the solution you'd like
Ideally something like this for each cell:

{"x":412.55517578125,"y":236.8095238095238,"fill":"rgba(160, 170, 186, 1)","formatted":"6,552","value":6552, "valueShown": true | false }

But that information is too specific and not available per-cell, having it per chart would be a good baseline to know if it the parameter has been applied.

Describe alternatives you've considered
none.

Additional context
For functional tests there's currently no way to know if value labels are shown or not.

[rshen91]

I think this might have already been completed in #976, Can you check out heatmap.cells in https://codesandbox.io/s/suspicious-tdd-rqgnd?file=/src/App.tsx and let me know what I might be misunderstanding? Thanks!!!

[dej611]

I've opened the sandbox but changing the config.cell.label.visible option I see the debug state to not change:

{
    "legend": {
        "items": [
            {
                "key": "< 3.5℃",
                "name": "< 3.5℃",
                "color": "#d2e9f7"
            },
            {
                "key": "3.5℃ - 25℃",
                "name": "3.5℃ - 25℃",
                "color": "#8bc8fb"
            },
            {
                "key": "25℃ - 50℃",
                "name": "25℃ - 50℃",
                "color": "#fdec25"
            },
            {
                "key": "50℃ - 75℃",
                "name": "50℃ - 75℃",
                "color": "#fba740"
            },
            {
                "key": "≥ 75℃",
                "name": "≥ 75℃",
                "color": "#fe5050"
            }
        ]
    },
    "axes": {
        "x": [
            {
                "id": "x",
                "position": "left",
                "labels": [
                    null,
                    null,
                    null
                ],
                "values": [
                    1572825600000,
                    1572868800000,
                    1572912000000
                ],
                "gridlines": [
                    {
                        "x": 76.712890625,
                        "y": 30
                    },
                    {
                        "x": 82.6147387822469,
                        "y": 30
                    },
                    {
                        "x": 88.51658693949382,
                        "y": 30
                    },
                    {
                        "x": 94.41843509674072,
                        "y": 30
                    },
                    {
                        "x": 100.32028325398763,
                        "y": 30
                    },
                    {
                        "x": 106.22213141123453,
                        "y": 30
                    },
                    {
                        "x": 112.12397956848145,
                        "y": 30
                    },
                    {
                        "x": 118.02582772572835,
                        "y": 30
                    },
                    {
                        "x": 123.92767588297525,
                        "y": 30
                    },
                    {
                        "x": 129.82952404022217,
                        "y": 30
                    },
                    {
                        "x": 135.73137219746906,
                        "y": 30
                    },
                    {
                        "x": 141.63322035471597,
                        "y": 30
                    },
                    {
                        "x": 147.5350685119629,
                        "y": 30
                    },
                    {
                        "x": 153.43691666920978,
                        "y": 30
                    },
                    {
                        "x": 159.3387648264567,
                        "y": 30
                    },
                    {
                        "x": 165.2406129837036,
                        "y": 30
                    },
                    {
                        "x": 171.1424611409505,
                        "y": 30
                    },
                    {
                        "x": 177.04430929819742,
                        "y": 30
                    },
                    {
                        "x": 182.94615745544434,
                        "y": 30
                    },
                    {
                        "x": 188.84800561269122,
                        "y": 30
                    },
                    {
                        "x": 194.74985376993814,
                        "y": 30
                    },
                    {
                        "x": 200.65170192718506,
                        "y": 30
                    },
                    {
                        "x": 206.55355008443195,
                        "y": 30
                    },
                    {
                        "x": 212.45539824167886,
                        "y": 30
                    },
                    {
                        "x": 218.35724639892578,
                        "y": 30
                    },
                    {
                        "x": 224.25909455617267,
                        "y": 30
                    },
                    {
                        "x": 230.1609427134196,
                        "y": 30
                    },
                    {
                        "x": 236.0627908706665,
                        "y": 30
                    },
                    {
                        "x": 241.9646390279134,
                        "y": 30
                    },
                    {
                        "x": 247.8664871851603,
                        "y": 30
                    },
                    {
                        "x": 253.76833534240723,
                        "y": 30
                    },
                    {
                        "x": 259.6701834996541,
                        "y": 30
                    },
                    {
                        "x": 265.572031656901,
                        "y": 30
                    },
                    {
                        "x": 271.47387981414795,
                        "y": 30
                    },
                    {
                        "x": 277.37572797139484,
                        "y": 30
                    },
                    {
                        "x": 283.2775761286417,
                        "y": 30
                    },
                    {
                        "x": 289.1794242858887,
                        "y": 30
                    },
                    {
                        "x": 295.08127244313556,
                        "y": 30
                    },
                    {
                        "x": 300.98312060038245,
                        "y": 30
                    },
                    {
                        "x": 306.8849687576294,
                        "y": 30
                    },
                    {
                        "x": 312.7868169148763,
                        "y": 30
                    },
                    {
                        "x": 318.6886650721232,
                        "y": 30
                    },
                    {
                        "x": 324.5905132293701,
                        "y": 30
                    },
                    {
                        "x": 330.492361386617,
                        "y": 30
                    },
                    {
                        "x": 336.3942095438639,
                        "y": 30
                    },
                    {
                        "x": 342.29605770111084,
                        "y": 30
                    },
                    {
                        "x": 348.19790585835773,
                        "y": 30
                    },
                    {
                        "x": 354.0997540156046,
                        "y": 30
                    },
                    {
                        "x": 360.00160217285156,
                        "y": 30
                    }
                ]
            }
        ],
        "y": [
            {
                "id": "y",
                "position": "bottom",
                "labels": [
                    "i-71a7f77b"
                ],
                "values": [
                    "i-71a7f77b"
                ],
                "gridlines": [
                    {
                        "x": 360.00160217285156,
                        "y": 0
                    },
                    {
                        "x": 360.00160217285156,
                        "y": 30
                    }
                ]
            }
        ]
    },
    "heatmap": {
        "cells": [
            {
                "x": 71.32217788696289,
                "y": 0.5,
                "fill": "rgba(210, 233, 247, 1)",
                "formatted": "0℃",
                "value": 0
            },
            {
                "x": 218.86838181813556,
                "y": 0.5,
                "fill": "rgba(210, 233, 247, 1)",
                "formatted": "3℃",
                "value": 3
            },
            {
                "x": 224.77022997538248,
                "y": 0.5,
                "fill": "rgba(253, 236, 37, 1)",
                "formatted": "25℃",
                "value": 25
            },
            {
                "x": 230.6720781326294,
                "y": 0.5,
                "fill": "rgba(251, 167, 64, 1)",
                "formatted": "50℃",
                "value": 50
            }
        ],
        "selection": {
            "area": null,
            "data": null
        }
    }
}

What I would like to have in the JSON above is a new property valueShown (or anything else explicit) to know whether a value label text has been rendered within the cell rect or not. This is valuable from a testing point of view.

[rshen91]

Thank you!! That makes it clearer for me 🙇🏻‍♀️