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

New statistcs view

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-08-20 12:46:33 +02:00
parent b2c9c19cca
commit b67a80e275
206 changed files with 275 additions and 890394 deletions
Download patch file Download diff file Expand all files Collapse all files

12
UI/BigComponents/BackgroundSelector.ts
View file

@ -3,11 +3,15 @@ import Translations from "../i18n/Translations";
import State from "../../State";
import BaseLayer from "../../Models/BaseLayer";
import {VariableUiElement} from "../Base/VariableUIElement";
import {Store} from "../../Logic/UIEventSource";
export default class BackgroundSelector extends VariableUiElement {
constructor() {
const available = State.state.availableBackgroundLayers.map(available => {
constructor(state: {availableBackgroundLayers?:Store<BaseLayer[]>} ) {
const available = state.availableBackgroundLayers?.map(available => {
if(available === undefined){
return undefined
}
const baseLayers: { value: BaseLayer, shown: string }[] = [];
for (const i in available) {
if (!available.hasOwnProperty(i)) {
@ -21,8 +25,8 @@ export default class BackgroundSelector extends VariableUiElement {
)
super(
available.map(baseLayers => {
if (baseLayers.length <= 1) {
available?.map(baseLayers => {
if (baseLayers === undefined || baseLayers.length <= 1) {
return undefined;
}
return new DropDown(Translations.t.general.backgroundMap.Clone(), baseLayers, State.state.backgroundLayer, {

68
UI/BigComponents/FilterView.ts
View file

@ -9,7 +9,6 @@ import {Translation} from "../i18n/Translation";
import Svg from "../../Svg";
import {ImmutableStore, Store, UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement";
import State from "../../State";
import FilteredLayer, {FilterState} from "../../Models/FilteredLayer";
import BackgroundSelector from "./BackgroundSelector";
import FilterConfig from "../../Models/ThemeConfig/FilterConfig";
@ -21,25 +20,33 @@ import {TagUtils} from "../../Logic/Tags/TagUtils";
import {InputElement} from "../Input/InputElement";
import {DropDown} from "../Input/DropDown";
import {FixedUiElement} from "../Base/FixedUiElement";
import BaseLayer from "../../Models/BaseLayer";
import Loc from "../../Models/Loc";
export default class FilterView extends VariableUiElement {
constructor(filteredLayer: UIEventSource<FilteredLayer[]>,
tileLayers: { config: TilesourceConfig, isDisplayed: UIEventSource<boolean> }[]) {
constructor(filteredLayer: Store<FilteredLayer[]>,
tileLayers: { config: TilesourceConfig, isDisplayed: UIEventSource<boolean> }[],
state: {
availableBackgroundLayers?: Store<BaseLayer[]>,
featureSwitchBackgroundSelection?: UIEventSource<boolean>,
featureSwitchIsDebugging?: UIEventSource<boolean>,
locationControl?: UIEventSource<Loc>
}) {
const backgroundSelector = new Toggle(
new BackgroundSelector(),
new BackgroundSelector(state),
undefined,
State.state.featureSwitchBackgroundSelection
state.featureSwitchBackgroundSelection ?? new ImmutableStore(false)
)
super(
filteredLayer.map((filteredLayers) => {
// Create the views which toggle layers (and filters them) ...
let elements = filteredLayers
?.map(l => FilterView.createOneFilteredLayerElement(l, State.state)?.SetClass("filter-panel"))
?.map(l => FilterView.createOneFilteredLayerElement(l, state)?.SetClass("filter-panel"))
?.filter(l => l !== undefined)
elements[0].SetClass("first-filter-panel")
// ... create views for non-interactive layers ...
elements = elements.concat(tileLayers.map(tl => FilterView.createOverlayToggle(tl)))
elements = elements.concat(tileLayers.map(tl => FilterView.createOverlayToggle(state, tl)))
// ... and add the dropdown to select a different background
return elements.concat(backgroundSelector);
}
@ -47,7 +54,7 @@ export default class FilterView extends VariableUiElement {
);
}
private static createOverlayToggle(config: { config: TilesourceConfig, isDisplayed: UIEventSource<boolean> }) {
private static createOverlayToggle(state: { locationControl?: UIEventSource<Loc> }, config: { config: TilesourceConfig, isDisplayed: UIEventSource<boolean> }) {
const iconStyle = "width:1.5rem;height:1.5rem;margin-left:1.25rem;flex-shrink: 0;";
@ -66,7 +73,7 @@ export default class FilterView extends VariableUiElement {
Translations.t.general.layerSelection.zoomInToSeeThisLayer
.SetClass("alert")
.SetStyle("display: block ruby;width:min-content;"),
State.state.locationControl.map(location => location.zoom >= config.config.minzoom)
state.locationControl?.map(location => location.zoom >= config.config.minzoom) ?? new ImmutableStore(false)
)
@ -88,13 +95,14 @@ export default class FilterView extends VariableUiElement {
);
}
private static createOneFilteredLayerElement(filteredLayer: FilteredLayer, state: {featureSwitchIsDebugging: UIEventSource<boolean>}) {
private static createOneFilteredLayerElement(filteredLayer: FilteredLayer,
state: { featureSwitchIsDebugging?: Store<boolean>, locationControl?: Store<Loc> }) {
if (filteredLayer.layerDef.name === undefined) {
// Name is not defined: we hide this one
return new Toggle(
new FixedUiElement(filteredLayer?.layerDef?.id ).SetClass("block") ,
new FixedUiElement(filteredLayer?.layerDef?.id).SetClass("block"),
undefined,
state?.featureSwitchIsDebugging
state?.featureSwitchIsDebugging ?? new ImmutableStore(false)
);
}
const iconStyle = "width:1.5rem;height:1.5rem;margin-left:1.25rem;flex-shrink: 0;";
@ -118,7 +126,7 @@ export default class FilterView extends VariableUiElement {
Translations.t.general.layerSelection.zoomInToSeeThisLayer
.SetClass("alert")
.SetStyle("display: block ruby;width:min-content;"),
State.state.locationControl.map(location => location.zoom >= filteredLayer.layerDef.minzoom)
state?.locationControl?.map(location => location.zoom >= filteredLayer.layerDef.minzoom) ?? new ImmutableStore(false)
)
@ -135,7 +143,7 @@ export default class FilterView extends VariableUiElement {
.onClick(() => filteredLayer.isDisplayed.setData(true));
const filterPanel: BaseUIElement = FilterView.createFilterPanel(filteredLayer)
const filterPanel: BaseUIElement = new LayerFilterPanel(state, filteredLayer)
return new Toggle(
@ -144,8 +152,11 @@ export default class FilterView extends VariableUiElement {
filteredLayer.isDisplayed
);
}
}
private static createFilterPanel(flayer: FilteredLayer): BaseUIElement {
export class LayerFilterPanel extends Combine {
public constructor(state: any, flayer: FilteredLayer) {
const layer = flayer.layerDef
if (layer.filters.length === 0) {
return undefined;
@ -156,7 +167,7 @@ export default class FilterView extends VariableUiElement {
for (const filter of layer.filters) {
const [ui, actualTags] = FilterView.createFilter(filter)
const [ui, actualTags] = LayerFilterPanel.createFilter(state, filter)
ui.SetClass("mt-1")
toShow.push(ui)
@ -170,13 +181,12 @@ export default class FilterView extends VariableUiElement {
}
return new Combine(toShow)
.SetClass("flex flex-col p-2 ml-12 pl-1 pt-0 layer-filters")
super(toShow)
this.SetClass("flex flex-col p-2 ml-12 pl-1 pt-0 layer-filters")
}
// Filter which uses one or more textfields
private static createFilterWithFields(filterConfig: FilterConfig): [BaseUIElement, UIEventSource<FilterState>] {
private static createFilterWithFields(state: any, filterConfig: FilterConfig): [BaseUIElement, UIEventSource<FilterState>] {
const filter = filterConfig.options[0]
const mappings = new Map<string, BaseUIElement>()
@ -197,7 +207,7 @@ export default class FilterView extends VariableUiElement {
allFields.push(field)
allValid = allValid.map(previous => previous && field.IsValid(stable.data) && stable.data !== "", [stable])
}
const tr = new SubstitutedTranslation(filter.question, new UIEventSource<any>({id: filterConfig.id}), State.state, mappings)
const tr = new SubstitutedTranslation(filter.question, new UIEventSource<any>({id: filterConfig.id}), state, mappings)
const trigger: Store<FilterState> = allValid.map(isValid => {
if (!isValid) {
return undefined
@ -223,15 +233,15 @@ export default class FilterView extends VariableUiElement {
state: JSON.stringify(props)
}
}, [properties])
const settableFilter = new UIEventSource<FilterState>(undefined)
trigger.addCallbackAndRun(state => settableFilter.setData(state))
settableFilter.addCallback(state => {
if(state === undefined){
if (state === undefined) {
// still initializing
return
}
if(state.currentFilter === undefined){
if (state.currentFilter === undefined) {
allFields.forEach(f => f.GetValue().setData(undefined));
}
})
@ -299,18 +309,18 @@ export default class FilterView extends VariableUiElement {
)]
}
private static createFilter(filterConfig: FilterConfig): [BaseUIElement, UIEventSource<FilterState>] {
private static createFilter(state: {}, filterConfig: FilterConfig): [BaseUIElement, UIEventSource<FilterState>] {
if (filterConfig.options[0].fields.length > 0) {
return FilterView.createFilterWithFields(filterConfig)
return LayerFilterPanel.createFilterWithFields(state, filterConfig)
}
if (filterConfig.options.length === 1) {
return FilterView.createCheckboxFilter(filterConfig)
return LayerFilterPanel.createCheckboxFilter(filterConfig)
}
const filter = FilterView.createMultiFilter(filterConfig)
const filter = LayerFilterPanel.createMultiFilter(filterConfig)
filter[0].SetClass("pl-2")
return filter
}

2
UI/BigComponents/LeftControls.ts
View file

@ -93,7 +93,7 @@ export default class LeftControls extends Combine {
new ScrollableFullScreen(
() => Translations.t.general.layerSelection.title.Clone(),
() =>
new FilterView(state.filteredLayers, state.overlayToggles).SetClass(
new FilterView(state.filteredLayers, state.overlayToggles, state).SetClass(
"block p-1"
),
"filters",

113
UI/BigComponents/TagRenderingChart.ts
View file

@ -3,6 +3,8 @@ import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig";
import {ChartConfiguration} from 'chart.js';
import Combine from "../Base/Combine";
import {TagUtils} from "../../Logic/Tags/TagUtils";
import {Utils} from "../../Utils";
import {OsmFeature} from "../../Models/OsmFeature";
export interface TagRenderingChartOptions {
@ -10,6 +12,115 @@ export interface TagRenderingChartOptions {
sort?: boolean
}
export class StackedRenderingChart extends ChartJs {
constructor(tr: TagRenderingConfig, features: (OsmFeature & {properties : {date: string}})[], period: "day" | "month" = "day") {
const {labels, data} = TagRenderingChart.extractDataAndLabels(tr, features, {
sort: true
})
if (labels === undefined || data === undefined) {
throw ("No labels or data given...")
}
// labels: ["cyclofix", "buurtnatuur", ...]; data : [ ["cyclofix-changeset", "cyclofix-changeset", ...], ["buurtnatuur-cs", "buurtnatuur-cs"], ... ]
console.log("LABELS:", labels, "DATA:", data)
const datasets: { label: string /*themename*/, data: number[]/*counts per day*/, backgroundColor: string }[] = []
const allDays = StackedRenderingChart.getAllDays(features)
let trimmedDays = allDays.map(d => d.substr(0, d.indexOf("T")))
if (period === "month") {
trimmedDays = trimmedDays.map(d => d.substr(0, 7))
}
trimmedDays = Utils.Dedup(trimmedDays)
for (let i = 0; i < labels.length; i++) {
const label = labels[i];
const changesetsForTheme = data[i]
const perDay: Record<string, OsmFeature[]> = {}
for (const changeset of changesetsForTheme) {
const csDate = new Date(changeset.properties.date)
Utils.SetMidnight(csDate)
let str = csDate.toISOString();
if (period === "month") {
csDate.setUTCDate(1)
str = csDate.toISOString().substr(0, 7);
}
if (perDay[str] === undefined) {
perDay[str] = [changeset]
} else {
perDay[str].push(changeset)
}
}
const countsPerDay: number[] = []
for (let i = 0; i < trimmedDays.length; i++) {
const day = trimmedDays[i];
countsPerDay[i] = perDay[day]?.length ?? 0
}
datasets.push({
data: countsPerDay,
backgroundColor: TagRenderingChart.borderColors[i % TagRenderingChart.borderColors.length],
label
})
}
const perDayData = {
labels: trimmedDays,
datasets
}
const config = <ChartConfiguration>{
type: 'bar',
data: perDayData,
options: {
responsive: true,
legend: {
display: false
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
}
super(config)
}
public static getAllDays(features: (OsmFeature & {properties : {date: string}})[]): string[] {
let earliest: Date = undefined
let latest: Date = undefined;
let allDates = new Set<string>();
features.forEach((value, key) => {
const d = new Date(value.properties.date);
Utils.SetMidnight(d)
if (earliest === undefined) {
earliest = d
} else if (d < earliest) {
earliest = d
}
if (latest === undefined) {
latest = d
} else if (d > latest) {
latest = d
}
allDates.add(d.toISOString())
})
while (earliest < latest) {
earliest.setDate(earliest.getDate() + 1)
allDates.add(earliest.toISOString())
}
const days = Array.from(allDates)
days.sort()
return days
}
}
export default class TagRenderingChart extends Combine {
private static readonly unkownColor = 'rgba(128, 128, 128, 0.2)'
@ -30,7 +141,7 @@ export default class TagRenderingChart extends Combine {
'rgba(255, 159, 64, 0.2)'
]
private static readonly borderColors = [
public static readonly borderColors = [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',