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

Add charts to dashboard view

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-07-20 12:04:14 +02:00
parent 47a184d626
commit 72f7bbd7db
8 changed files with 314 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

120
test.ts
View file

@ -1,52 +1,76 @@
import * as shops from "./assets/generated/layers/shops.json"
import Combine from "./UI/Base/Combine";
import Img from "./UI/Base/Img";
import BaseUIElement from "./UI/BaseUIElement";
import {VariableUiElement} from "./UI/Base/VariableUIElement";
import LanguagePicker from "./UI/LanguagePicker";
import TagRenderingConfig, {Mapping} from "./Models/ThemeConfig/TagRenderingConfig";
import {MappingConfigJson} from "./Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson";
import {FixedUiElement} from "./UI/Base/FixedUiElement";
import {TagsFilter} from "./Logic/Tags/TagsFilter";
import {SearchablePillsSelector} from "./UI/Input/SearchableMappingsSelector";
import ChartJs from "./UI/Base/ChartJs";
import TagRenderingChart from "./UI/BigComponents/TagRenderingChart";
import {OsmFeature} from "./Models/OsmFeature";
import * as food from "./assets/generated/layers/food.json"
import TagRenderingConfig from "./Models/ThemeConfig/TagRenderingConfig";
import {UIEventSource} from "./Logic/UIEventSource";
const mappingsRaw: MappingConfigJson[] = <any>shops.tagRenderings.find(tr => tr.id == "shop_types").mappings
const mappings = mappingsRaw.map((m, i) => TagRenderingConfig.ExtractMapping(m, i, "test", "test"))
function fromMapping(m: Mapping): { show: BaseUIElement, value: TagsFilter, mainTerm: Record<string, string>, searchTerms?: Record<string, string[]> } {
const el: BaseUIElement = m.then
let icon: BaseUIElement
if (m.icon !== undefined) {
icon = new Img(m.icon).SetClass("h-8 w-8 pr-2")
} else {
icon = new FixedUiElement("").SetClass("h-8 w-1")
}
const show = new Combine([
icon,
el.SetClass("block-ruby")
]).SetClass("flex items-center")
return {show, mainTerm: m.then.translations, searchTerms: m.searchTerms, value: m.if};
}
const search = new UIEventSource("")
const sp = new SearchablePillsSelector(
mappings.map(m => fromMapping(m)),
import Combine from "./UI/Base/Combine";
const data = new UIEventSource<OsmFeature[]>([
{
noMatchFound: new VariableUiElement(search.map(s => "Mark this a `"+s+"`")),
onNoSearch: new FixedUiElement("Search in "+mappingsRaw.length+" categories"),
selectIfSingle: true,
searchValue: search
properties: {
id: "node/1234",
cuisine:"pizza",
"payment:cash":"yes"
},
geometry:{
type: "Point",
coordinates: [0,0]
},
id: "node/1234",
type: "Feature"
},
{
properties: {
id: "node/42",
cuisine:"pizza",
"payment:cash":"yes"
},
geometry:{
type: "Point",
coordinates: [1,0]
},
id: "node/42",
type: "Feature"
},
{
properties: {
id: "node/452",
cuisine:"pasta",
"payment:cash":"yes",
"payment:cards":"yes"
},
geometry:{
type: "Point",
coordinates: [2,0]
},
id: "node/452",
type: "Feature"
},
{
properties: {
id: "node/4542",
cuisine:"something_comletely_invented",
"payment:cards":"yes"
},
geometry:{
type: "Point",
coordinates: [3,0]
},
id: "node/4542",
type: "Feature"
},
{
properties: {
id: "node/45425",
},
geometry:{
type: "Point",
coordinates: [3,0]
},
id: "node/45425",
type: "Feature"
}
)
]);
sp.AttachTo("maindiv")
const lp = new LanguagePicker(["en", "nl"], "")
new Combine([
new VariableUiElement(sp.GetValue().map(tf => new FixedUiElement("Selected tags: " + tf.map(tf => tf.asHumanString(false, false, {})).join(", ")))),
lp
]).SetClass("flex flex-col")
.AttachTo("extradiv")
new Combine(food.tagRenderings.map(tr => new TagRenderingChart(data, new TagRenderingConfig(tr, "test"), {chartclasses: "w-160 h-160"})))
.AttachTo("maindiv")