@page "/heatmap"
@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapTitleSettings Text="Sales Revenue per Employee (in 1000 US$)"></HeatMapTitleSettings>
    <HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect"></HeatMapCellSettings>
</SfHeatMap>

@code {
    int[,] GetDefaultData()
    {
        int[,] dataSource = new int[,]
        {
            {52, 65, 67, 45, 37, 52},
            {68, 52, 63, 51, 30, 51},
            {7, 16, 47, 47, 88, 6},
            {66, 64, 46, 40, 47, 41},
            {14, 46, 97, 69, 69, 3},
            {54, 46, 61, 46, 40, 39}
        };
        return dataSource;
    }
    
    public object HeatMapData { get; set; }
    
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }
}

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@JsonData">
    <HeatMapDataSourceSettings IsJsonData="true" 
                               AdaptorType="AdaptorType.Table" 
                               XDataMapping="ProductName"
                               YDataMapping="Year" 
                               ValueMapping="Value">
    </HeatMapDataSourceSettings>
    <HeatMapXAxis Labels="@XAxisLabels"></HeatMapXAxis>
    <HeatMapYAxis Labels="@YAxisLabels"></HeatMapYAxis>
</SfHeatMap>

@code {
    private object[] JsonData = new object[]
    {
        new { ProductName = "Laptop", Year = "2022", Value = 150 },
        new { ProductName = "Desktop", Year = "2022", Value = 80 },
        // ... more data
    };
    
    private string[] XAxisLabels = new string[] { "Laptop", "Desktop", "Tablet", "Phone" };
    private string[] YAxisLabels = new string[] { "2022", "2023", "2024" };
}

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapPaletteSettings Type="PaletteType.Gradient">
        <HeatMapPalettes>
            <HeatMapPalette Color="#C2E7EC" Value="0"></HeatMapPalette>
            <HeatMapPalette Color="#AEDFE6" Value="25"></HeatMapPalette>
            <HeatMapPalette Color="#7FCDC4" Value="50"></HeatMapPalette>
            <HeatMapPalette Color="#6EB5D0" Value="75"></HeatMapPalette>
            <HeatMapPalette Color="#2D6CA2" Value="100"></HeatMapPalette>
        </HeatMapPalettes>
    </HeatMapPaletteSettings>
</SfHeatMap>

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@BubbleData">
    <HeatMapCellSettings TileType="CellType.Bubble" 
                         BubbleType="BubbleType.SizeAndColor">
        <HeatMapBubbleSize Minimum="10" Maximum="30"></HeatMapBubbleSize>
    </HeatMapCellSettings>
    <HeatMapDataSourceSettings IsJsonData="true" 
                               AdaptorType="AdaptorType.Cell"
                               XDataMapping="XAxis"
                               YDataMapping="YAxis"
                               ValueMapping="Value">
        <HeatMapBubbleDataMapping Size="Size" Color="Value"></HeatMapBubbleDataMapping>
    </HeatMapDataSourceSettings>
</SfHeatMap>

@using Syncfusion.Blazor.HeatMap

<SfHeatMap DataSource="@HeatMapData">
    <HeatMapEvents CellClicked="@OnCellClick"
                   TooltipRendering="@OnTooltipRender">
    </HeatMapEvents>
    <HeatMapTooltipSettings>
        <Template>
            @{
                var data = context as TooltipEventArgs;
                <div>@data.XLabel - @data.YLabel: @data.Value</div>
            }
        </Template>
    </HeatMapTooltipSettings>
</SfHeatMap>

@code {
    private void OnCellClick(Syncfusion.Blazor.HeatMap.CellClickEventArgs args)
    {
        Console.WriteLine($"Cell clicked: {args.XLabel}, {args.YLabel}, Value: {args.Value}");
    }
    
    private void OnTooltipRender(Syncfusion.Blazor.HeatMap.TooltipEventArgs args)
    {
        // Customize tooltip content dynamically
    }
}