Unable to make heatmap work

Hi,

I’m trying to implement heatmap using this library but due to lacking in examples of heatmap I’m struggling to make it to work. Data for heatmap is from an internal API. The requirement are user select production types (Oil, Gas, BOE) and data levels (7 days, 30 days, etc.) from 2 dropdown lists. When I run, all the values for X, Y and Z were populated but the heatmap doesn’t show up, only the axises (they are even wrong, not the ones I assigned, just generic 1, 2, 3, 4). All of the controls and CSS work fine. There’s no error. Please help.

Note: I’m using MudBlazor for CSS

Front end:

@using Plotly.Blazor.LayoutLib

<div class="mt-5">
    <MudText Typo="Typo.h3" Color="Color.Primary" Align="Align.Center">GOM Production Heatmap</MudText>
</div>
<div class="mt-5">
    <MudGrid>
        <MudItem lg="12">
            <MudGrid Spacing="4" Justify="Justify.Center">
                <MudItem>
                    <MudSelect T="string" Variant="Variant.Outlined" Label="Select production type" @bind-Value="selectedProductionType" Style="width:250px;">
                        @foreach(var type in ProductionTypes)
                        {
                        <MudSelectItem Value="@type">@type</MudSelectItem>
                        }
                    </MudSelect>
                </MudItem>
                <MudItem>
                    <MudSelect T="string" Variant="Variant.Outlined" Label="Select level" @bind-Value="selectedLevel" Style="width:250px;">
                        @foreach(var level in DisplayLevels)
                        {
                        <MudSelectItem Value="@level">@level</MudSelectItem>
                        }
                    </MudSelect>
                </MudItem>
            </MudGrid>
        </MudItem>
    </MudGrid>
</div>
<div class="mt-5">
    <PlotlyChart Id="TestId" Config="config" Layout="layout" Data="data" @ref="chart" />
</div>

Code behind:

using Kosgo.Apps.Services;
using Kosgo.Models;
using Microsoft.AspNetCore.Components;
using Plotly.Blazor;
using Plotly.Blazor.LayoutLib;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Plotly.Blazor.Traces;

namespace Kosgo.Components
{
    public partial class GOMProdHeatmap : ComponentBase
    {
        [Inject]
        public IGOMHeatmapDataService GOMHeatmapDataService { get; set; }
        public IEnumerable<GOMProdHeatmapData> jsData { get; set; }
        private List<object> YValues { get; set; }
        private List<object> XValues { get; set; }
        private List<object> ZValues { get; set; } = new List<object>();
        private List<object> Levels { get; set; }
        private List<string> DisplayLevels { get; set; } = new List<string>
            {
                "7 days",
                "30 days",
                "90 days",
                "365 days"
            };
        private List<int> Periods { get; set; }
        private List<string> ProductionTypes { get; set; } = new List<string>
            {
                "Gross Oil",
                "Gross Gas",
                "Gross BOE",
                "Net BOE"
            };
        
        private string selectedProductionType { get; set; } = "Gross Oil";
        private string selectedLevel { get; set; } = "7 days";


        PlotlyChart chart { get; set; }
        Config config { get; set; }
        Layout layout { get; set; }
        IList<ITrace> data { get; set; }

        public override async Task SetParametersAsync(ParameterView parameters)
        {
            await base.SetParametersAsync(parameters);

            config = new Config 
            { 
                Responsive = true 
            };

            jsData = (await GOMHeatmapDataService.GetData()).ToList();

            ProcessData();

            data = new List<ITrace>
            {
                new HeatMap
                {
                    X = XValues,
                    Y = YValues,
                    Z = ZValues,
                    //ShowScale = true,
                    HoverOnGaps = false
                }
            };
        }

        private void ProcessData()
        {
            YValues = jsData.Select(d => Convert.ChangeType(d.WellName, typeof(object))).Distinct().OrderBy(y => y).ToList();

            Levels = jsData.Select(d => Convert.ChangeType(d.Level, typeof(object))).Distinct().OrderBy(x => x).ToList();
            
            if (!Levels.Any(l => l.ToString().Length < 4))
            {
                DisplayLevels = Levels.Select(l => l.ToString().Insert(l.ToString().Length - 4, " ")).ToList();
            }

            XValues = jsData.Where(d => d.Level == selectedLevel.Replace(" ", ""))
                .Select(d => Convert.ChangeType(d.MaxDate, typeof(object)))
                .OrderBy(d => d).Distinct().ToList();

            var z = new List<decimal?[]>();

            foreach (var well in YValues)
            {
                if (selectedProductionType == "Gross Oil")
                {
                    z.Add(jsData.Where(d => d.WellName == well.ToString() && d.Level == selectedLevel.Replace(" ", ""))
                        .Select(d => d.DeltaOil).ToArray());
                }
                else if (selectedProductionType == "Gross Gas")
                {
                    z.Add(jsData.Where(d => d.WellName == well.ToString() && d.Level == selectedLevel.Replace(" ", ""))
                        .Select(d => d.DeltaGas).ToArray());
                }
                else if (selectedProductionType == "Gross BOE")
                {
                    z.Add(jsData.Where(d => d.WellName == well.ToString() && d.Level == selectedLevel.Replace(" ", ""))
                        .Select(d => d.DeltaBoe).ToArray());
                }
                else
                {
                    z.Add(jsData.Where(d => d.WellName == well.ToString() && d.Level == selectedLevel.Replace(" ", ""))
                        .Select(d => d.DeltaNetBoe).ToArray());
                }
            }

            ZValues = z.Cast<object>().ToList();
        }
    }
}

[toanngkh]

Actually, it’s my fault. I assigned the X axis labels to XValues in layout before it was populated inside GetMapData. So I moved layout down after data = GetMapData() and it works.

[toanngkh]

@sean-mcl do you have any update on why the labels on Y axis are cut off?