MapComplete/UI/BigComponents/Histogram.ts

import { VariableUiElement } from "../Base/VariableUIElement"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import Table from "../Base/Table"
import Combine from "../Base/Combine"
import { FixedUiElement } from "../Base/FixedUiElement"
import { Utils } from "../../Utils"
import BaseUIElement from "../BaseUIElement"
import Svg from "../../Svg"

export default class Histogram<T> extends VariableUiElement {
    private static defaultPalette = [
        "#ff5858",
        "#ffad48",
        "#ffff59",
        "#56bd56",
        "#63a9ff",
        "#9d62d9",
        "#fa61fa",
    ]

    constructor(
        values: Store<string[]>,
        title: string | BaseUIElement,
        countTitle: string | BaseUIElement,
        options?: {
            assignColor?: (t0: string) => string
            sortMode?: "name" | "name-rev" | "count" | "count-rev"
        }
    ) {
        const sortMode = new UIEventSource<"name" | "name-rev" | "count" | "count-rev">(
            options?.sortMode ?? "name"
        )
        const sortName = new VariableUiElement(
            sortMode.map((m) => {
                switch (m) {
                    case "name":
                        return Svg.up_svg()
                    case "name-rev":
                        return Svg.up_svg().SetStyle("transform: rotate(180deg)")
                    default:
                        return Svg.circle_svg()
                }
            })
        )
        const titleHeader = new Combine([sortName.SetClass("w-4 mr-2"), title])
            .SetClass("flex")
            .onClick(() => {
                if (sortMode.data === "name") {
                    sortMode.setData("name-rev")
                } else {
                    sortMode.setData("name")
                }
            })

        const sortCount = new VariableUiElement(
            sortMode.map((m) => {
                switch (m) {
                    case "count":
                        return Svg.up_svg()
                    case "count-rev":
                        return Svg.up_svg().SetStyle("transform: rotate(180deg)")
                    default:
                        return Svg.circle_svg()
                }
            })
        )

        const countHeader = new Combine([sortCount.SetClass("w-4 mr-2"), countTitle])
            .SetClass("flex")
            .onClick(() => {
                if (sortMode.data === "count-rev") {
                    sortMode.setData("count")
                } else {
                    sortMode.setData("count-rev")
                }
            })

        const header = [titleHeader, countHeader]

        super(
            values.map(
                (values) => {
                    if (values === undefined) {
                        return undefined
                    }

                    values = Utils.NoNull(values)

                    const counts = new Map<string, number>()
                    for (const value of values) {
                        const c = counts.get(value) ?? 0
                        counts.set(value, c + 1)
                    }

                    const keys = Array.from(counts.keys())

                    switch (sortMode.data) {
                        case "name":
                            keys.sort()
                            break
                        case "name-rev":
                            keys.sort().reverse(/*Copy of array, inplace reverse if fine*/)
                            break
                        case "count":
                            keys.sort((k0, k1) => counts.get(k0) - counts.get(k1))
                            break
                        case "count-rev":
                            keys.sort((k0, k1) => counts.get(k1) - counts.get(k0))
                            break
                    }

                    const max = Math.max(...Array.from(counts.values()))

                    const fallbackColor = (keyValue: string) => {
                        const index = keys.indexOf(keyValue)
                        return Histogram.defaultPalette[index % Histogram.defaultPalette.length]
                    }
                    let actualAssignColor = undefined
                    if (options?.assignColor === undefined) {
                        actualAssignColor = fallbackColor
                    } else {
                        actualAssignColor = (keyValue: string) => {
                            return options.assignColor(keyValue) ?? fallbackColor(keyValue)
                        }
                    }

                    return new Table(
                        header,
                        keys.map((key) => [
                            key,
                            new Combine([
                                new Combine([
                                    new FixedUiElement("" + counts.get(key)).SetClass(
                                        "font-bold rounded-full block"
                                    ),
                                ])
                                    .SetClass("flex justify-center rounded border border-black")
                                    .SetStyle(
                                        `background: ${actualAssignColor(key)}; width: ${
                                            (100 * counts.get(key)) / max
                                        }%`
                                    ),
                            ]).SetClass("block w-full"),
                        ]),
                        {
                            contentStyle: keys.map((_) => ["width: 20%"]),
                        }
                    ).SetClass("w-full zebra-table")
                },
                [sortMode]
            )
        )
    }
}