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

4
UI/Base/VariableUIElement.ts
View file

@ -3,9 +3,9 @@ import BaseUIElement from "../BaseUIElement";
import Combine from "./Combine";
export class VariableUiElement extends BaseUIElement {
private readonly _contents: Store<string | BaseUIElement | BaseUIElement[]>;
private readonly _contents?: Store<string | BaseUIElement | BaseUIElement[]>;
constructor(contents: Store<string | BaseUIElement | BaseUIElement[]>) {
constructor(contents?: Store<string | BaseUIElement | BaseUIElement[]>) {
super();
this._contents = contents;
}

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)',

2
UI/DashboardGui.ts
View file

@ -152,7 +152,7 @@ export default class DashboardGui {
})
const filterView = new Lazy(() => {
return new FilterView(state.filteredLayers, state.overlayToggles)
return new FilterView(state.filteredLayers, state.overlayToggles, state)
});
const welcome = new Combine([state.layoutToUse.description, state.layoutToUse.descriptionTail])
self.currentView.setData({title: state.layoutToUse.title, contents: welcome})

2
UI/Popup/DeleteWizard.ts
View file

@ -232,7 +232,7 @@ export default class DeleteWizard extends Toggle {
)).SetClass("block")
}
private static constructMultipleChoice(config: DeleteConfig, tagsSource: UIEventSource<object>, state: FeaturePipelineState):
private static constructMultipleChoice(config: DeleteConfig, tagsSource: UIEventSource<Record<string, string>>, state: FeaturePipelineState):
InputElement<{ deleteReason: string } | { retagTo: TagsFilter }> {
const elements: InputElement<{ deleteReason: string } | { retagTo: TagsFilter }>[ ] = []

145
UI/StatisticsGUI.ts
View file

@ -3,15 +3,15 @@
*/
import {UIEventSource} from "../Logic/UIEventSource";
import {VariableUiElement} from "./Base/VariableUIElement";
import ChartJs from "./Base/ChartJs";
import Loading from "./Base/Loading";
import {Utils} from "../Utils";
import Combine from "./Base/Combine";
import BaseUIElement from "./BaseUIElement";
import TagRenderingChart from "./BigComponents/TagRenderingChart";
import TagRenderingChart, {StackedRenderingChart} from "./BigComponents/TagRenderingChart";
import TagRenderingConfig from "../Models/ThemeConfig/TagRenderingConfig";
import {ChartConfiguration} from "chart.js";
import {FixedUiElement} from "./Base/FixedUiElement";
import FilterView, {LayerFilterPanel} from "./BigComponents/FilterView";
import FilteredLayer, {FilterState} from "../Models/FilteredLayer";
import {AllKnownLayouts} from "../Customizations/AllKnownLayouts";
export default class StatisticsGUI {
@ -22,6 +22,8 @@ export default class StatisticsGUI {
public setup(): void {
const appliedFilters = new UIEventSource<Map<string, FilterState>>(new Map<string, FilterState>())
const layer = AllKnownLayouts.allKnownLayouts.get("mapcomplete-changes").layers[0]
new VariableUiElement(this.index.map(paths => {
if (paths === undefined) {
@ -43,17 +45,45 @@ export default class StatisticsGUI {
return new Combine([
new VariableUiElement(downloaded.map(dl => "Downloaded " + dl.length + " items")),
new VariableUiElement(downloaded.map(l => [...l]).stabilized(250).map(downloaded => {
const overview = ChangesetsOverview.fromDirtyData([].concat(...downloaded.map(d => d.features)))
.filter(cs => new Date(cs.properties.date) > new Date(2022,6,1))
let overview = ChangesetsOverview.fromDirtyData([].concat(...downloaded.map(d => d.features)))
// return overview.breakdownPerDay(overview.themeBreakdown)
return overview.breakdownPer(overview.themeBreakdown, "month")
})).SetClass("block w-full h-full")
if (appliedFilters.data.size > 0) {
appliedFilters.data.forEach((filterSpec) => {
const tf = filterSpec?.currentFilter
if (tf === undefined) {
return
}
overview = overview.filter(cs => tf.matchesProperties(cs.properties))
})
}
if (downloaded.length === 0) {
return "No data matched the filter"
}
return new Combine(layer.tagRenderings.map(tr => {
try {
return new StackedRenderingChart(tr, <any>overview._meta, "month")
} catch (e) {
return "Could not create stats for " + tr.id
}
})
)
}, [appliedFilters])).SetClass("block w-full h-full")
]).SetClass("block w-full h-full")
})).SetClass("block w-full h-full").AttachTo("maindiv")
const filteredLayer = <FilteredLayer>{
appliedFilters,
layerDef: layer,
isDisplayed: new UIEventSource<boolean>(true)
}
new LayerFilterPanel(undefined, filteredLayer).AttachTo("extradiv")
}
}
@ -83,9 +113,9 @@ class ChangesetsOverview {
"entrances": "indoor",
"https://raw.githubusercontent.com/osmbe/play/master/mapcomplete/geveltuinen/geveltuinen.json": "geveltuintjes"
}
private readonly _meta: ChangeSetData[];
public readonly _meta: ChangeSetData[];
public static fromDirtyData(meta: ChangeSetData[]){
public static fromDirtyData(meta: ChangeSetData[]) {
return new ChangesetsOverview(meta.map(cs => ChangesetsOverview.cleanChangesetData(cs)))
}
@ -139,99 +169,6 @@ class ChangesetsOverview {
)
}
public getAllDays(perMonth = false): string[] {
let earliest: Date = undefined
let latest: Date = undefined;
let allDates = new Set<string>();
this._meta.forEach((value, key) => {
const d = new Date(value.properties.date);
Utils.SetMidnight(d)
if(perMonth){
d.setUTCDate(1)
}
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
}
public breakdownPer(tr: TagRenderingConfig, period: "day" | "month" = "day" ): BaseUIElement {
const {labels, data} = TagRenderingChart.extractDataAndLabels(tr, <any>this._meta, {
sort: true
})
if (labels === undefined || data === undefined) {
return new FixedUiElement("No labels or data given...")
}
// labels: ["cyclofix", "buurtnatuur", ...]; data : [ ["cyclofix-changeset", "cyclofix-changeset", ...], ["buurtnatuur-cs", "buurtnatuur-cs"], ... ]
const datasets: { label: string /*themename*/, data: number[]/*counts per day*/, backgroundColor: string }[] = []
const allDays = this.getAllDays()
for (let i = 0; i < labels.length; i++) {
const label = labels[i];
const changesetsForTheme = <ChangeSetData[]><any>data[i]
const perDay: ChangeSetData[][] = []
for (const day of allDays) {
const today: ChangeSetData[] = []
for (const changeset of changesetsForTheme) {
const csDate = new Date(changeset.properties.date)
Utils.SetMidnight(csDate)
if(period === "month"){
csDate.setUTCDate(1)
}
if (csDate.toISOString() !== day) {
continue
}
today.push(changeset)
}
perDay.push(today)
}
datasets.push({
data: perDay.map(cs => cs.length),
backgroundColor: TagRenderingChart.backgroundColors[i % TagRenderingChart.backgroundColors.length],
label
})
}
const perDayData = {
labels: allDays.map(d => d.substr(0, d.indexOf("T"))),
datasets
}
const config = <ChartConfiguration>{
type: 'bar',
data: perDayData,
options: {
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
}
return new ChartJs(config)
}
}

6
UI/SubstitutedTranslation.ts
View file

@ -1,4 +1,4 @@
import {Store, UIEventSource} from "../Logic/UIEventSource";
import {UIEventSource} from "../Logic/UIEventSource";
import {Translation} from "./i18n/Translation";
import Locale from "./i18n/Locale";
import {FixedUiElement} from "./Base/FixedUiElement";
@ -15,10 +15,10 @@ export class SubstitutedTranslation extends VariableUiElement {
public constructor(
translation: Translation,
tagsSource: UIEventSource<any>,
tagsSource: UIEventSource<Record<string, string>>,
state: FeaturePipelineState,
mapping: Map<string, BaseUIElement |
((state: FeaturePipelineState, tagSource: UIEventSource<any>, argument: string[], guistate: DefaultGuiState) => BaseUIElement)> = undefined) {
((state: FeaturePipelineState, tagSource: UIEventSource<Record<string, string>>, argument: string[], guistate: DefaultGuiState) => BaseUIElement)> = undefined) {
const extraMappings: SpecialVisualization[] = [];