forked from MapComplete/MapComplete
48 lines
1.7 KiB
Svelte
48 lines
1.7 KiB
Svelte
|
<script lang="ts">
|
||
|
|
/**
|
||
|
|
* Statistics, based on the tagRendering, for a single layer
|
||
|
|
*/
|
||
|
|
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
|
||
|
|
import Tr from "../Base/Tr.svelte"
|
||
|
|
import Loading from "../Base/Loading.svelte"
|
||
|
|
import ToSvelte from "../Base/ToSvelte.svelte"
|
||
|
|
import TagRenderingChart from "../BigComponents/TagRenderingChart"
|
||
|
|
import type { Feature } from "geojson"
|
||
|
|
import { AccordionItem } from "flowbite-svelte"
|
||
|
|
import ThemeViewState from "../../Models/ThemeViewState"
|
||
|
|
import DefaultIcon from "../Map/DefaultIcon.svelte"
|
||
|
|
|
||
|
|
export let layer: LayerConfig
|
||
|
|
export let state: ThemeViewState
|
||
|
|
let bbox = state.mapProperties.bounds
|
||
|
|
let elements: Feature[] = state.perLayer.get(layer.id).GetFeaturesWithin($bbox)
|
||
|
|
$: elements = state.perLayer.get(layer.id).GetFeaturesWithin($bbox)
|
||
|
|
|
||
|
|
let trs = layer.tagRenderings.filter(tr => tr.question)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<AccordionItem paddingDefault="p-2" inactiveClass="text-black" defaultClass="w-full flex-grow justify-start">
|
||
|
|
<div slot="header" class="flex items-center gap-x-2">
|
||
|
|
<div class="w-8 h-8 inline-block">
|
||
|
|
<DefaultIcon {layer} />
|
||
|
|
</div>
|
||
|
|
<Tr t={layer.name} />
|
||
|
|
({elements.length} elements in view)
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{#if elements === undefined}
|
||
|
|
<Loading />
|
||
|
|
{:else if elements.length === 0}
|
||
|
|
No features in view
|
||
|
|
{:else}
|
||
|
|
<div class="flex flex-wrap w-full gap-y-4 gap-x-4">
|
||
|
|
|
||
|
|
{#each trs as tr}
|
||
|
|
<ToSvelte construct={() => new TagRenderingChart(elements, tr, {
|
||
|
|
chartclasses: "w-full self-center",includeTitle: true
|
||
|
|
}).SetClass(tr.multiAnswer ? "w-128": "w-96") } />
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
</AccordionItem>
|