diff --git a/UI/BigComponents/Histogram.ts b/UI/BigComponents/Histogram.ts new file mode 100644 index 0000000000..3be1cede9a --- /dev/null +++ b/UI/BigComponents/Histogram.ts @@ -0,0 +1,74 @@ +import {VariableUiElement} from "../Base/VariableUIElement"; +import {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 Translations from "../i18n/Translations"; + +export default class Histogram extends VariableUiElement { + + private static defaultPalette = [ + "#ff5858", + "#ffad48", + "#ffff59", + "#9d62d9", + "#56bd56", + "#63a9ff", + "#fa61fa" + ] + + constructor(values: UIEventSource, + title: string | BaseUIElement, + countTitle: string | BaseUIElement, + assignColor?: (t0: string) => string + ) { + super(values.map(values => { + + if (values === undefined) { + return undefined; + } + + values = Utils.NoNull(values) + + const counts = new Map() + for (const value of values) { + const c = counts.get(value) ?? 0; + counts.set(value, c + 1); + } + + const keys = Array.from(counts.keys()); + keys.sort() + + 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 (assignColor === undefined) { + actualAssignColor = fallbackColor; + }else{ + actualAssignColor = (keyValue: string) => { + return assignColor(keyValue) ?? fallbackColor(keyValue) + } + } + + return new Table( + [Translations.W(title), countTitle], + 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") + + ]), + keys.map(_ => ["width: 20%"]) + ).SetClass("w-full"); + })); + } +} \ No newline at end of file diff --git a/UI/BigComponents/SimpleAddUI.ts b/UI/BigComponents/SimpleAddUI.ts index 6b0cbf3c42..cf315337db 100644 --- a/UI/BigComponents/SimpleAddUI.ts +++ b/UI/BigComponents/SimpleAddUI.ts @@ -157,7 +157,7 @@ export default class SimpleAddUI extends Toggle { private static CreateTagInfoFor(preset: PresetInfo, optionallyLinkToWiki = true) { const csCount = State.state.osmConnection.userDetails.data.csCount; return new Toggle( - Translations.t.general.presetInfo.Subs({ + Translations.t.general.add.presetInfo.Subs({ tags: preset.tags.map(t => t.asHumanString(optionallyLinkToWiki && csCount > Constants.userJourney.tagsVisibleAndWikiLinked, true)).join("&"), }).SetStyle("word-break: break-all"), diff --git a/UI/BigComponents/ThemeIntroductionPanel.ts b/UI/BigComponents/ThemeIntroductionPanel.ts index f3b66e8803..7b3c6e5988 100644 --- a/UI/BigComponents/ThemeIntroductionPanel.ts +++ b/UI/BigComponents/ThemeIntroductionPanel.ts @@ -7,7 +7,6 @@ import Toggle from "../Input/Toggle"; import {SubtleButton} from "../Base/SubtleButton"; import Svg from "../../Svg"; import {UIEventSource} from "../../Logic/UIEventSource"; -import {FixedUiElement} from "../Base/FixedUiElement"; export default class ThemeIntroductionPanel extends VariableUiElement { diff --git a/UI/OpeningHours/OpeningHoursVisualization.ts b/UI/OpeningHours/OpeningHoursVisualization.ts index 73d3b08ccd..6f0dddc45a 100644 --- a/UI/OpeningHours/OpeningHoursVisualization.ts +++ b/UI/OpeningHours/OpeningHoursVisualization.ts @@ -66,7 +66,7 @@ export default class OpeningHoursVisualization extends UIElement { return new Toggle( ohTable, - Translations.t.general.loadingCountry.Clone(), + Translations.t.general.opening_hours.loadingCountry.Clone(), tags.map(tgs => tgs._country !== undefined) ); }