File size: 3,389 Bytes
e8a6c67 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <script lang="ts">
import type { EvidenceItem } from '$lib/types/evidence';
import TierGlyph from '$lib/components/glyphs/TierGlyph.svelte';
import TierBadge from '$lib/components/glyphs/TierBadge.svelte';
import Sparkline from './viz/Sparkline.svelte';
import Histogram from './viz/Histogram.svelte';
import ForecastChart from './viz/ForecastChart.svelte';
import ThumbStripe from './viz/ThumbStripe.svelte';
import { citations } from '$lib/stores/citations.svelte';
interface Props { ev: EvidenceItem; }
let { ev }: Props = $props();
let tierColor = $derived(`var(--tier-${ev.tier})`);
function openCite() {
citations.active = ev.citeId;
document.getElementById(`cite-${ev.citeId}`)?.scrollIntoView({ block: 'center', behavior: 'smooth' });
}
</script>
<article
class="evidence-card evidence-card-{ev.tier}"
aria-labelledby="ec-{ev.id}-title"
>
<header class="evidence-card-head">
<div class="evidence-card-source">
<TierGlyph tier={ev.tier} size={11} color={tierColor} />
<span class="evidence-card-source-label">{ev.source}</span>
</div>
<span class="evidence-card-vintage" title="Data vintage">v. {ev.vintage}</span>
</header>
<h4 id="ec-{ev.id}-title" class="evidence-card-title">{ev.title}</h4>
<div class="evidence-card-body">
{#if ev.fmt.kind === 'scalar'}
<div class="evidence-scalar">
<div class="evidence-scalar-value" style:color={tierColor}>{ev.fmt.value}</div>
<div class="evidence-scalar-unit">{ev.fmt.unit}</div>
{#if ev.fmt.aux}<div class="evidence-scalar-aux">{ev.fmt.aux}</div>{/if}
</div>
{:else if ev.fmt.kind === 'table'}
<table class="evidence-table">
<thead>
<tr>{#each ev.fmt.columns as h (h)}<th>{h}</th>{/each}</tr>
</thead>
<tbody>
{#each ev.fmt.rows as row, i (i)}
<tr>{#each row as cell, j (j)}<td>{cell}</td>{/each}</tr>
{/each}
</tbody>
</table>
{:else if ev.fmt.kind === 'spark'}
<div class="evidence-spark">
<div class="evidence-spark-headline" style:color={tierColor}>{ev.fmt.headline}</div>
<Sparkline data={ev.fmt.data} color={tierColor} />
<div class="evidence-scalar-aux">{ev.fmt.sub}</div>
</div>
{:else if ev.fmt.kind === 'histogram'}
<div class="evidence-spark">
<div class="evidence-spark-headline" style:color={tierColor}>{ev.fmt.headline}</div>
<Histogram data={ev.fmt.data} color={tierColor} />
<div class="evidence-scalar-aux">{ev.fmt.sub}</div>
</div>
{:else if ev.fmt.kind === 'forecast'}
<div class="evidence-spark">
<ForecastChart data={ev.fmt.data} color={tierColor} />
{#if ev.fmt.caption}
<div class="evidence-scalar-aux">{ev.fmt.caption}</div>
{/if}
</div>
{:else}
<div class="evidence-thumb">
<ThumbStripe kind={ev.fmt.thumbKind} />
<div class="evidence-scalar-aux">{ev.fmt.sub}</div>
</div>
{/if}
</div>
<footer class="evidence-card-foot">
<button type="button" class="evidence-card-cite" onclick={openCite} title="Open citation in drawer">
<span class="evidence-card-docid">{ev.docId}</span>
<span class="evidence-card-cite-arrow" aria-hidden="true">→</span>
</button>
<TierBadge tier={ev.tier} compact />
</footer>
</article>
|