elgaard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Refactoring: Histogram now uses chartJS, simplify code

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-07-12 15:53:51 +02:00
parent 3918e5ec04
commit 6ae258c48d
9 changed files with 92 additions and 314 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/UI/Base/ChartJsUtils.ts
View file

@ -3,8 +3,10 @@ import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig"
import { TagUtils } from "../../Logic/Tags/TagUtils"
import { OsmFeature } from "../../Models/OsmFeature"
import { Utils } from "../../Utils"
import { labels } from "wikibase-sdk/dist/src/helpers/simplify"
import { isInteger } from "tailwind-merge/dist/lib/validators"
export class ChartJsColours {
class ChartJsColours {
public static readonly unknownColor = "rgba(128, 128, 128, 0.2)"
public static readonly unknownBorderColor = "rgba(128, 128, 128, 0.2)"
@ -205,7 +207,7 @@ export class ChartJsUtils {
hideUnknown?: boolean
hideNotApplicable?: boolean
}
) {
): ChartConfiguration {
const { labels, data } = ChartJsUtils.extractDataAndLabels(tr, features, {
sort: true,
groupToOtherCutoff: options?.groupToOtherCutoff,
@ -336,7 +338,7 @@ export class ChartJsUtils {
* @returns undefined if not enough parameters
*/
static createConfigForTagRendering<T extends { properties: Record<string, string> }>(tagRendering: TagRenderingConfig, features: T[],
options?: TagRenderingChartOptions){
options?: TagRenderingChartOptions): ChartConfiguration{
if (tagRendering.mappings?.length === 0 && tagRendering.freeform?.key === undefined) {
return undefined
}
@ -380,7 +382,7 @@ export class ChartJsUtils {
barchartMode = true
}
const config = <ChartConfiguration>{
return <ChartConfiguration>{
type: options?.chartType ?? (barchartMode ? "bar" : "pie"),
data: {
labels,
@ -402,7 +404,49 @@ export class ChartJsUtils {
},
},
}
return config
}
static createHistogramConfig(keys: string[], counts: Map<string, number>){
const borderColor = [
]
const backgroundColor = [
]
while (borderColor.length < keys.length) {
borderColor.push(...ChartJsColours.borderColors)
backgroundColor.push(...ChartJsColours.backgroundColors)
}
return <ChartConfiguration>{
type: "bar",
data: {
labels: keys,
datasets: [
{
data: keys.map((k) => counts.get(k)),
backgroundColor,
borderColor,
borderWidth: 1,
label: undefined,
},
],
},
options: { scales: {
y: {
ticks: {
stepSize: 1,
callback: (value) =>Number(value).toFixed(0),
},
},
},
plugins: {
legend: {
display: false,
},
},
},
}
}
}

14
src/UI/Base/FixedUiElement.ts
View file

@ -10,20 +10,6 @@ export class FixedUiElement extends BaseUIElement {
super()
this.content = html ?? ""
}
AsMarkdown(): string {
if (this.HasClass("code")) {
if (this.content.indexOf("\n") > 0 || this.HasClass("block")) {
return "\n```\n" + this.content + "\n```\n"
}
return "`" + this.content + "`"
}
if (this.HasClass("font-bold")) {
return "*" + this.content + "*"
}
return this.content
}
protected InnerConstructElement(): HTMLElement {
const e = document.createElement("span")
e.innerHTML = Utils.purify(this.content)

81
src/UI/Base/Table.ts
View file

@ -1,81 +0,0 @@
import BaseUIElement from "../BaseUIElement"
import { Utils } from "../../Utils"
import Translations from "../i18n/Translations"
/**
* @deprecated
*/
export default class Table extends BaseUIElement {
private readonly _header: BaseUIElement[]
private readonly _contents: BaseUIElement[][]
private readonly _contentStyle: string[][]
constructor(
header: (BaseUIElement | string)[],
contents: (BaseUIElement | string)[][],
options?: {
contentStyle?: string[][]
}
) {
super()
this._contentStyle = options?.contentStyle ?? [["min-width: 9rem"]]
this._header = header?.map(Translations.W)
this._contents = contents.map((row) => row.map(Translations.W))
}
protected InnerConstructElement(): HTMLElement {
const table = document.createElement("table")
const headerElems = Utils.NoNull(
(this._header ?? []).map((elem) => elem.ConstructElement())
)
if (headerElems.length > 0) {
const thead = document.createElement("thead")
const tr = document.createElement("tr")
headerElems.forEach((headerElem) => {
const td = document.createElement("th")
td.appendChild(headerElem)
tr.appendChild(td)
})
thead.appendChild(tr)
table.appendChild(thead)
}
for (let i = 0; i < this._contents.length; i++) {
const row = this._contents[i]
const tr = document.createElement("tr")
for (let j = 0; j < row.length; j++) {
try {
const elem = row[j]
if (elem?.ConstructElement === undefined) {
continue
}
const htmlElem = elem?.ConstructElement()
if (htmlElem === undefined) {
continue
}
let style = undefined
if (
this._contentStyle !== undefined &&
this._contentStyle[i] !== undefined &&
this._contentStyle[j] !== undefined
) {
style = this._contentStyle[i][j]
}
const td = document.createElement("td")
td.style.cssText = style
td.appendChild(htmlElem)
tr.appendChild(td)
} catch (e) {
console.error("Could not render an element in a table due to", e, row[j])
}
}
table.appendChild(tr)
}
return table
}
}