HeatMapChart

let heatChartMappings = [
    "p1", "Ohio"
    "p2", "Alaska"
    "p3", "Texas"
    "p4", "DC"
    "p5", "NYC"
]
let yPointMapping (s: string) =
    let (_, state) = heatChartMappings |> List.find (fun (yPoint, _) -> yPoint = s)
    state

let yPoint = heatChartMappings |> List.map fst

let xPoint = [
    DateOnly.Parse ("2020-03-03")
    DateOnly.Parse ("2020-03-04")
    DateOnly.Parse ("2020-03-05")
    DateOnly.Parse ("2020-03-06")
    DateOnly.Parse ("2020-03-07")
    DateOnly.Parse ("2020-03-08")
    DateOnly.Parse ("2020-03-09")
    DateOnly.Parse ("2020-03-10")
]

let heatMapChartData = [
    [
        heatMapChartData.value 100
        heatMapChartData.legend "Excellent (0-200)"
        heatMapChartData.data [
            [
                heatMapChartDataPoint.x xPoint.[2]
                heatMapChartDataPoint.y yPoint.[2]
                heatMapChartDataPoint.value 46
                heatMapChartDataPoint.rectText 46
                heatMapChartDataPoint.ratio (46, 2391)
                heatMapChartDataPoint.descriptionMessage "air quality seems to be excellent today"
            ]
        ]
    ]
    [
        heatMapChartData.value 250
        heatMapChartData.legend "Good (201-300)"
        heatMapChartData.data [
            [
                heatMapChartDataPoint.x xPoint.[0]
                heatMapChartDataPoint.y yPoint.[1]
                heatMapChartDataPoint.value 265
                heatMapChartDataPoint.rectText 265
                heatMapChartDataPoint.ratio (265, 2479)
                heatMapChartDataPoint.descriptionMessage "today we have good air quality in Alaska"
            ]
            [
                heatMapChartDataPoint.x xPoint.[1]
                heatMapChartDataPoint.y yPoint.[0]
                heatMapChartDataPoint.value 250
                heatMapChartDataPoint.rectText 250
                heatMapChartDataPoint.ratio (250, 2043)
                heatMapChartDataPoint.descriptionMessage "a sudden rise of 150 units in Ohio today"
            ]
            [
                heatMapChartDataPoint.x xPoint.[2]
                heatMapChartDataPoint.y yPoint.[0]
                heatMapChartDataPoint.value 235
                heatMapChartDataPoint.rectText 235
                heatMapChartDataPoint.ratio (235, 2043)
                heatMapChartDataPoint.descriptionMessage "air quality seems to have decreased by only 15 units from yesterday"
            ]
            [
                heatMapChartDataPoint.x xPoint.[6]
                heatMapChartDataPoint.y yPoint.[2]
                heatMapChartDataPoint.value 300
                heatMapChartDataPoint.rectText 300
                heatMapChartDataPoint.ratio (300, 2391)
                heatMapChartDataPoint.descriptionMessage "air comes to control a little bit more than yesterday"
            ]
            [
                heatMapChartDataPoint.x xPoint.[0]
                heatMapChartDataPoint.y yPoint.[3]
                heatMapChartDataPoint.value 290
                heatMapChartDataPoint.rectText 290
                heatMapChartDataPoint.ratio (290, 2462)
                heatMapChartDataPoint.descriptionMessage "1st day in the week, DC witnesses good air quality"
            ]
            [
                heatMapChartDataPoint.x xPoint.[4]
                heatMapChartDataPoint.y yPoint.[4]
                heatMapChartDataPoint.value 280
                heatMapChartDataPoint.rectText 280
                heatMapChartDataPoint.ratio (280, 2486)
                heatMapChartDataPoint.descriptionMessage "Air quality index decreases by exactly 300 units, giving the people of NYC good hope"
            ]
            [
                heatMapChartDataPoint.x xPoint.[5]
                heatMapChartDataPoint.y yPoint.[3]
                heatMapChartDataPoint.value 300
                heatMapChartDataPoint.rectText 300
                heatMapChartDataPoint.ratio (300, 2462)
                heatMapChartDataPoint.descriptionMessage "60 units decreased from yesterday."
            ]
        ]
    ]
]

Fui.heatMapChart [
    heatMapChart.data heatMapChartData
    heatMapChart.chartTitle "Heat map chart basic example"
    heatMapChart.yAxisStringFormatter yPointMapping
    heatMapChart.xAxisNumberFormatString ".7s"
    heatMapChart.yAxisNumberFormatString ".3s"
    heatMapChart.width 400
    heatMapChart.height 400
    heatMapChart.domainValuesForColorScale [0; 200; 400; 600]
    heatMapChart.rangeValuesForColorScale [
        Fui.getColorFromToken Fui.dataVizPalette.success
        Fui.getColorFromToken Fui.dataVizPalette.warning
        Fui.getColorFromToken Fui.dataVizPalette.error
        Fui.getColorFromToken Fui.dataVizPalette.highError
    ]
    heatMapChart.reflowProps.modeMinWidth
]