Robin-van-der-Linde/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Refactoring: port statistics view

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-04-24 03:22:43 +02:00
parent 78c56f6fa2
commit fcc49766d4
8 changed files with 103 additions and 169 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
Models/FilteredLayer.ts
View file

@ -40,8 +40,17 @@ export default class FilteredLayer {
) {
this.layerDef = layer
this.isDisplayed = isDisplayed ?? new UIEventSource(true)
this.appliedFilters =
appliedFilters ?? new Map<string, UIEventSource<number | string | undefined>>()
if (!appliedFilters) {
const appliedFiltersWritable = new Map<
string,
UIEventSource<number | string | undefined>
>()
for (const filter of this.layerDef.filters) {
appliedFiltersWritable.set(filter.id, new UIEventSource(undefined))
}
appliedFilters = appliedFiltersWritable
}
this.appliedFilters = appliedFilters
const self = this
const currentTags = new UIEventSource<TagsFilter>(undefined)
@ -63,16 +72,6 @@ export default class FilteredLayer {
return JSON.stringify(values)
}
private static stringToFieldProperties(value: string): Record<string, string> {
const values = JSON.parse(value)
for (const key in values) {
if (values[key] === "") {
delete values[key]
}
}
return values
}
/**
* Creates a FilteredLayer which is tied into the QueryParameters and/or user preferences
*/
@ -114,6 +113,16 @@ export default class FilteredLayer {
return new FilteredLayer(layer, appliedFilters, isDisplayed)
}
private static stringToFieldProperties(value: string): Record<string, string> {
const values = JSON.parse(value)
for (const key in values) {
if (values[key] === "") {
delete values[key]
}
}
return values
}
private static fieldsToTags(
option: FilterConfigOption,
fieldstate: string | Record<string, string>
@ -170,6 +179,36 @@ export default class FilteredLayer {
this.appliedFilters.forEach((value) => value.setData(undefined))
}
/**
* Returns true if the given tags match the current filters (and the specified 'global filters')
*/
public isShown(properties: Record<string, string>, globalFilters?: GlobalFilter[]): boolean {
if (properties._deleted === "yes") {
return false
}
{
const isShown: TagsFilter = this.layerDef.isShown
if (isShown !== undefined && !isShown.matchesProperties(properties)) {
return false
}
}
{
let neededTags: TagsFilter = this.currentFilter.data
if (neededTags !== undefined && !neededTags.matchesProperties(properties)) {
return false
}
}
for (const globalFilter of globalFilters ?? []) {
const neededTags = globalFilter.osmTags
if (neededTags !== undefined && !neededTags.matchesProperties(properties)) {
return false
}
}
return true
}
private calculateCurrentTags(): TagsFilter {
let needed: TagsFilter[] = []
for (const filter of this.layerDef.filters) {
@ -209,34 +248,4 @@ export default class FilteredLayer {
}
return optimized
}
/**
* Returns true if the given tags match the current filters (and the specified 'global filters')
*/
public isShown(properties: Record<string, string>, globalFilters?: GlobalFilter[]): boolean {
if (properties._deleted === "yes") {
return false
}
{
const isShown: TagsFilter = this.layerDef.isShown
if (isShown !== undefined && !isShown.matchesProperties(properties)) {
return false
}
}
{
let neededTags: TagsFilter = this.currentFilter.data
if (neededTags !== undefined && !neededTags.matchesProperties(properties)) {
return false
}
}
for (const globalFilter of globalFilters ?? []) {
const neededTags = globalFilter.osmTags
if (neededTags !== undefined && !neededTags.matchesProperties(properties)) {
return false
}
}
return true
}
}

6
UI/BigComponents/Filterview.svelte
View file

@ -10,14 +10,14 @@ import type { Writable } from "svelte/store";
import If from "../Base/If.svelte";
import Dropdown from "../Base/Dropdown.svelte";
import { onDestroy } from "svelte";
import { UIEventSource } from "../../Logic/UIEventSource";
import { ImmutableStore, Store } from "../../Logic/UIEventSource";
import FilterviewWithFields from "./FilterviewWithFields.svelte";
import Tr from "../Base/Tr.svelte";
import Translations from "../i18n/Translations";
export let filteredLayer: FilteredLayer;
export let highlightedLayer: UIEventSource<string> | undefined;
export let zoomlevel: UIEventSource<number>;
export let highlightedLayer: Store<string | undefined> = new ImmutableStore(undefined);
export let zoomlevel: Store<number> = new ImmutableStore(22);
let layer: LayerConfig = filteredLayer.layerDef;
let isDisplayed: boolean = filteredLayer.isDisplayed.data;
onDestroy(filteredLayer.isDisplayed.addCallbackAndRunD(d => {

6
UI/BigComponents/FilterviewWithFields.svelte
View file

@ -17,7 +17,7 @@
let fieldValues: Record<string, UIEventSource<string>> = {};
let fieldTypes: Record<string, string> = {};
let appliedFilter = <UIEventSource<string>>filteredLayer.appliedFilters.get(id);
let initialState: Record<string, string> = JSON.parse(appliedFilter.data ?? "{}");
let initialState: Record<string, string> = JSON.parse(appliedFilter?.data ?? "{}");
function setFields() {
const properties: Record<string, string> = {};
@ -30,7 +30,7 @@
properties[k] = v;
}
}
appliedFilter.setData(FilteredLayer.fieldsToString(properties));
appliedFilter?.setData(FilteredLayer.fieldsToString(properties));
}
for (const field of option.fields) {
@ -38,7 +38,7 @@
fieldTypes[field.name + "}"] = field.type;
const src = new UIEventSource<string>(initialState[field.name] ?? "");
fieldValues[field.name + "}"] = src;
onDestroy(src.addCallback(() => {
onDestroy(src.stabilized(200).addCallback(() => {
setFields();
}));
}

8
UI/BigComponents/TagRenderingChart.ts
View file

@ -25,7 +25,13 @@ export class StackedRenderingChart extends ChartJs {
groupToOtherCutoff: options?.groupToOtherCutoff,
})
if (labels === undefined || data === undefined) {
console.error("Could not extract data and labels for ", tr, " with features", features)
console.error(
"Could not extract data and labels for ",
tr,
" with features",
features,
": no labels or no data"
)
throw "No labels or data given..."
}
// labels: ["cyclofix", "buurtnatuur", ...]; data : [ ["cyclofix-changeset", "cyclofix-changeset", ...], ["buurtnatuur-cs", "buurtnatuur-cs"], ... ]

81
UI/StatisticsGUI.ts
View file

@ -7,24 +7,25 @@ import Loading from "./Base/Loading"
import { Utils } from "../Utils"
import Combine from "./Base/Combine"
import { StackedRenderingChart } from "./BigComponents/TagRenderingChart"
import { LayerFilterPanel } from "./BigComponents/FilterView"
import MapState from "../Logic/State/MapState"
import BaseUIElement from "./BaseUIElement"
import Title from "./Base/Title"
import { FixedUiElement } from "./Base/FixedUiElement"
import List from "./Base/List"
import LayoutConfig from "../Models/ThemeConfig/LayoutConfig"
import mcChanges from "../assets/generated/themes/mapcomplete-changes.json"
import SvelteUIElement from "./Base/SvelteUIElement"
import Filterview from "./BigComponents/Filterview.svelte"
import FilteredLayer from "../Models/FilteredLayer"
class StatisticsForOverviewFile extends Combine {
constructor(homeUrl: string, paths: string[]) {
paths = paths.filter((p) => !p.endsWith("file-overview.json"))
const layer = new LayoutConfig(<any>mcChanges, true).layers[0]
const filteredLayer = MapState.InitializeFilteredLayers(
{ id: "statistics-view", layers: [layer] },
undefined
)[0]
const filterPanel = new LayerFilterPanel(undefined, filteredLayer)
const appliedFilters = filteredLayer.appliedFilters
const filteredLayer = new FilteredLayer(layer)
const filterPanel = new Combine([
new Title("Filters"),
new SvelteUIElement(Filterview, { filteredLayer }),
])
const downloaded = new UIEventSource<{ features: ChangeSetData[] }[]>([])
@ -63,20 +64,10 @@ class StatisticsForOverviewFile extends Combine {
return loading
}
let overview = ChangesetsOverview.fromDirtyData(
const overview = ChangesetsOverview.fromDirtyData(
[].concat(...downloaded.map((d) => d.features))
)
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)
)
})
}
).filter((cs) => filteredLayer.isShown(<any>cs.properties))
console.log("Overview is", overview)
if (overview._meta.length === 0) {
return "No data matched the filter"
@ -143,6 +134,10 @@ class StatisticsForOverviewFile extends Combine {
new Title("Breakdown"),
]
for (const tr of trs) {
if (tr.question === undefined) {
continue
}
console.log(tr)
let total = undefined
if (tr.freeform?.key !== undefined) {
total = new Set(
@ -174,7 +169,7 @@ class StatisticsForOverviewFile extends Combine {
return new Combine(elements)
},
[appliedFilters]
[filteredLayer.currentFilter]
)
).SetClass("block w-full h-full"),
])
@ -232,30 +227,12 @@ class ChangesetsOverview {
}
public readonly _meta: ChangeSetData[]
public static fromDirtyData(meta: ChangeSetData[]) {
return new ChangesetsOverview(meta?.map((cs) => ChangesetsOverview.cleanChangesetData(cs)))
}
private constructor(meta: ChangeSetData[]) {
this._meta = Utils.NoNull(meta)
}
public filter(predicate: (cs: ChangeSetData) => boolean) {
return new ChangesetsOverview(this._meta.filter(predicate))
}
public sum(key: string, excludeThemes: Set<string>): number {
let s = 0
for (const feature of this._meta) {
if (excludeThemes.has(feature.properties.theme)) {
continue
}
const parsed = Number(feature.properties[key])
if (!isNaN(parsed)) {
s += parsed
}
}
return s
public static fromDirtyData(meta: ChangeSetData[]) {
return new ChangesetsOverview(meta?.map((cs) => ChangesetsOverview.cleanChangesetData(cs)))
}
private static cleanChangesetData(cs: ChangeSetData): ChangeSetData {
@ -286,6 +263,24 @@ class ChangesetsOverview {
} catch (e) {}
return cs
}
public filter(predicate: (cs: ChangeSetData) => boolean) {
return new ChangesetsOverview(this._meta.filter(predicate))
}
public sum(key: string, excludeThemes: Set<string>): number {
let s = 0
for (const feature of this._meta) {
if (excludeThemes.has(feature.properties.theme)) {
continue
}
const parsed = Number(feature.properties[key])
if (!isNaN(parsed)) {
s += parsed
}
}
return s
}
}
interface ChangeSetData {
@ -323,3 +318,5 @@ interface ChangeSetData {
language: string
}
}
new StatisticsGUI().AttachTo("main")

74
css/tabbedComponent.css
View file

@ -1,74 +0,0 @@
.tabs-header-bar {
padding-left: 1em;
padding-top: 10px; /* For the shadow */
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: start;
background-color: var(--background-color);
max-width: 100%;
overflow-x: auto;
}
.tab-single-header img {
height: 3em;
max-width: 3em;
padding: 0.5em;
display: block;
margin: auto;
}
.tab-single-header svg {
height: 3em;
max-width: 3em;
padding: 0.5em;
display: block;
margin: auto;
}
.tab-single-header {
border-top-left-radius: 1em;
border-top-right-radius: 1em;
z-index: 5000;
padding-bottom: 0;
margin-bottom: 0;
}
.tab-active {
background-color: var(--background-color);
color: var(--foreground-color);
z-index: 5001;
box-shadow: 0 0 10px var(--shadow-color);
border: 1px solid var(--background-color);
min-width: 4em;
}
.tab-active svg {
fill: var(--foreground-color);
stroke: var(--foreground-color);
}
.tab-non-active {
background-color: var(--subtle-detail-color);
color: var(--foreground-color);
opacity: 0.5;
border-left: 1px solid gray;
border-right: 1px solid gray;
border-top: 1px solid gray;
border-bottom: 1px solid lightgray;
min-width: 4em;
}
.tab-non-active svg {
fill: var(--non-active-tab-svg) !important;
stroke: var(--non-active-tab-svg) !important;
}
.tab-non-active svg path {
fill: var(--non-active-tab-svg) !important;
stroke: var(--non-active-tab-svg) !important;
}

2
index.html
View file

@ -3,8 +3,6 @@
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<link href="./vendor/leaflet.css" rel="stylesheet"/>
<link href="./css/tabbedComponent.css" rel="stylesheet"/>
<link href="./css/mobile.css" rel="stylesheet"/>
<link href="./css/openinghourstable.css" rel="stylesheet"/>
<link href="./css/tagrendering.css" rel="stylesheet"/>

2
theme.html
View file

@ -4,8 +4,6 @@
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<link href="./css/userbadge.css" rel="stylesheet"/>
<link href="./css/tabbedComponent.css" rel="stylesheet"/>
<link href="./css/mobile.css" rel="stylesheet"/>
<link href="./css/openinghourstable.css" rel="stylesheet"/>
<link href="./css/tagrendering.css" rel="stylesheet"/>